chore(release): 4.13.0 [skip ci]

## [4.13.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.12.0...v4.13.0) (2025-10-18) ### Features * make home page abacus interactive with audio ([9a53d7e](9a53d7e5db))
feat: make home page abacus interactive with audio
2025-10-18 22:45:39 +00:00 · 2025-10-18 17:44:40 -05:00 · 2025-10-18 22:44:06 +00:00 · 2025-10-18 17:42:55 -05:00 · 2025-10-18 22:41:08 +00:00 · 2025-10-18 17:40:03 -05:00
19 changed files with 1751 additions and 692 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,66 @@
+## [4.13.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.12.0...v4.13.0) (2025-10-18)
+
+
+### Features
+
+* make home page abacus interactive with audio ([9a53d7e](https://github.com/antialias/soroban-abacus-flashcards/commit/9a53d7e5db18853aca4e2e0c7abc799217feaecf))
+
+## [4.12.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.11.1...v4.12.0) (2025-10-18)
+
+
+### Features
+
+* redesign home page with component showcase ([29af265](https://github.com/antialias/soroban-abacus-flashcards/commit/29af265958f9fdab0253b92e153c01575840454d))
+
+## [4.11.1](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.11.0...v4.11.1) (2025-10-18)
+
+
+### Bug Fixes
+
+* **card-sorting:** center AbacusReact SVGs in card tiles ([26edec1](https://github.com/antialias/soroban-abacus-flashcards/commit/26edec1bbf038264405ec9d161edcd18f67a6fc6))
+
+## [4.11.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.10.6...v4.11.0) (2025-10-18)
+
+
+### Features
+
+* **home:** redesign home page to showcase complete platform ([ee6c4f2](https://github.com/antialias/soroban-abacus-flashcards/commit/ee6c4f2f4f39e3b30f59c54866c3857c218fb80f))
+
+## [4.10.6](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.10.5...v4.10.6) (2025-10-18)
+
+
+### Bug Fixes
+
+* **card-sorting:** position slots flow horizontally with wrap ([e14ffe4](https://github.com/antialias/soroban-abacus-flashcards/commit/e14ffe44d66d0c97bc0cc4e0c255698e88ce723a))
+
+## [4.10.5](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.10.4...v4.10.5) (2025-10-18)
+
+
+### Code Refactoring
+
+* **arcade:** merge /arcade/room into /arcade route ([0790074](https://github.com/antialias/soroban-abacus-flashcards/commit/0790074ffc5008bce9a162fe0ddbd1d5c214c4f7))
+
+## [4.10.4](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.10.3...v4.10.4) (2025-10-18)
+
+
+### Bug Fixes
+
+* **card-sorting:** match Python card layout with flex wrap ([9679d68](https://github.com/antialias/soroban-abacus-flashcards/commit/9679d68154ac8b6a2f905ec7d17a34b39bc00237))
+
+## [4.10.3](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.10.2...v4.10.3) (2025-10-18)
+
+
+### Bug Fixes
+
+* **arcade:** remove broken query param from game URLs ([87631af](https://github.com/antialias/soroban-abacus-flashcards/commit/87631af6788bd7b42e671374e55ec0ad8435900c))
+
+## [4.10.2](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.10.1...v4.10.2) (2025-10-18)
+
+
+### Bug Fixes
+
+* **card-sorting:** faithfully port UI/UX from Python original ([c92076f](https://github.com/antialias/soroban-abacus-flashcards/commit/c92076f232930aa12d9a0230fa745b73b5cc04d9)), closes [#2c5f76](https://github.com/antialias/soroban-abacus-flashcards/issues/2c5f76) [#1976d2](https://github.com/antialias/soroban-abacus-flashcards/issues/1976d2)
+
 ## [4.10.1](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.10.0...v4.10.1) (2025-10-18)


--- a/apps/web/.claude/ARCADE_ROUTING_ARCHITECTURE.md
+++ b/apps/web/.claude/ARCADE_ROUTING_ARCHITECTURE.md
@@ -0,0 +1,440 @@
+# Arcade Routing Architecture - Complete Overview
+
+## 1. Current /arcade Page
+
+**File:** `/Users/antialias/projects/soroban-abacus-flashcards/apps/web/src/app/arcade/page.tsx` (lines 1-129)
+
+**Purpose:** The main arcade landing page - displays the "Champion Arena"
+
+**Key Components:**
+- `ArcadeContent()` - Renders the main arcade interface
+  - Uses `EnhancedChampionArena` component which contains `GameSelector`
+  - The `GameSelector` displays all available games as cards
+  - `GameSelector` includes both legacy games and registry games
+  
+**Current Flow:**
+1. User navigates to `/arcade`
+2. Page renders `FullscreenProvider` wrapper
+3. Displays `PageWithNav` with title "🏟️ Champion Arena"
+4. Content area shows `EnhancedChampionArena` → `GameSelector`
+5. `GameSelector` renders `GameCard` components for each game
+6. When user clicks a game card, `GameCard` calls `router.push(config.url)`
+7. For registry games, `config.url` is `/arcade/room?game={gameName}`
+8. For legacy games, URL would be direct to their page
+
+**State Management:**
+- `GameModeContext` provides player selection (emoji, name, color)
+- `PageWithNav` wraps content and provides mini-nav with:
+  - Active player list
+  - Add player button
+  - Game mode indicator (single/battle/tournament)
+  - Exit session handler
+
+## 2. Current /arcade/room Page
+
+**File:** `/Users/antialias/projects/soroban-abacus-flashcards/apps/web/src/app/arcade/room/page.tsx` (lines 1-359)
+
+**Purpose:** "Magical place" that shows either a game OR the game chooser, driven by room state
+
+**Three States:**
+
+### State 1: Loading
+- Shows "Loading room..." message
+- Waits for `useRoomData()` hook to resolve
+
+### State 2: Game Selection UI (when `!roomData.gameName`)
+- Shows large game selection buttons
+- User clicks to select a game
+- Calls `setRoomGame()` mutation to save selection to room
+- Invokes `handleGameSelect()` which:
+  1. Checks if game exists in registry via `hasGame(gameType)`
+  2. If registry game: calls `setRoomGame({roomId, gameName: gameType})`
+  3. If legacy game: maps to internal name via `GAME_TYPE_TO_NAME`, then calls `setRoomGame()`
+  4. Game selection is persisted to the room database
+
+### State 3: Game Display (when `roomData.gameName` is set)
+- Checks game registry first via `hasGame(roomData.gameName)`
+- If registry game: 
+  - Gets game definition via `getGame(roomData.gameName)`
+  - Renders: `<Provider><GameComponent /></Provider>`
+  - Provider and GameComponent come from game registry definition
+- If legacy game:
+  - Switch statement with TODO for individual games
+  - Currently only shows "Game not yet supported"
+
+**Key Hook:**
+- `useRoomData()` - Fetches current room from API and subscribes to socket updates
+  - Returns `roomData` with fields: `id`, `name`, `code`, `gameName`, `gameConfig`, `members`, `memberPlayers`
+  - Also returns `isLoading` boolean
+
+**Navigation Flow:**
+1. User navigates to `/arcade`
+2. `GameCard` onClick calls `router.push('/arcade/room?game={gameName}')`
+3. User arrives at `/arcade/room`
+4. If NOT in a room yet: Shows error with link back to `/arcade`
+5. If in room but no game selected: Shows game selection UI
+6. If game selected: Loads and displays game
+
+## 3. The "Mini App Nav" - GameContextNav Component
+
+**File:** `/Users/antialias/projects/soroban-abacus-flashcards/apps/web/src/components/nav/GameContextNav.tsx` (lines 1-372)
+
+**What It Is:**
+The "mini app nav" is actually a sophisticated component within the `PageWithNav` wrapper that intelligently shows different UI based on context:
+
+**Components & Props:**
+- `navTitle` - Current page title (e.g., "Champion Arena", "Choose Game", "Speed Complement Race")
+- `navEmoji` - Icon emoji for current page
+- `gameMode` - Computed from active player count: 'none' | 'single' | 'battle' | 'tournament'
+- `activePlayers` - Array of selected players
+- `inactivePlayers` - Array of available but unselected players
+- `shouldEmphasize` - Boolean to emphasize player selection
+- `showFullscreenSelection` - Boolean to show fullscreen mode for player selection
+- `roomInfo` - Optional arcade room data (roomId, roomName, gameName, playerCount, joinCode)
+- `networkPlayers` - Remote players from room members
+
+**Three Display Modes:**
+
+### Mode 1: Fullscreen Player Selection
+- When `showFullscreenSelection === true`
+- Displays:
+  - Large title with emoji
+  - Game mode indicator
+  - Fullscreen player selection UI
+  - Shows all inactive players for selection
+
+### Mode 2: Solo Mode (NOT in room)
+- When `roomInfo` is undefined
+- Shows:
+  - **Game Title Section** (left side):
+    - `GameTitleMenu` with game title and emoji
+    - Menu options: Setup, New Game, Quit
+    - `GameModeIndicator`
+  - **Player Section** (right side):
+    - `ActivePlayersList` - shows selected players
+    - `AddPlayerButton` - add more players
+
+### Mode 3: Room Mode (IN a room)
+- When `roomInfo` is defined
+- Shows:
+  - **Hidden:** Game title section (display: none)
+  - **Room Info Pane** (left side):
+    - `RoomInfo` component with room details
+    - Game mode indicator with color/emoji
+    - Room name, player count, join code
+    - `NetworkPlayerIndicator` components for remote players
+  - **Player Section** (may be hidden):
+    - Shows local active players
+    - Add player button (for local players only)
+
+**Key Sub-Components:**
+- `GameTitleMenu` - Menu for game options (setup, new game, quit)
+- `GameModeIndicator` - Shows 🎯 Solo, ⚔️ Battle, 🏆 Tournament, 👥 Select
+- `RoomInfo` - Displays room metadata
+- `NetworkPlayerIndicator` - Shows remote players with scores/streaks
+- `ActivePlayersList` - List of selected players
+- `AddPlayerButton` - Button to add more players with popover
+- `FullscreenPlayerSelection` - Large player picker for fullscreen mode
+- `PendingInvitations` - Banner for room invitations
+
+**State Management:**
+- Lifted from `PageWithNav` to preserve state across remounts:
+  - `showPopover` / `setShowPopover` - AddPlayerButton popover state
+  - `activeTab` / `setActiveTab` - 'add' or 'invite' tab selection
+
+## 4. Navigation Flow
+
+### Flow 1: Solo Player → Game Selection → Room Creation → Game Start
+
+```
+/arcade (Champion Arena)
+  ↓ [Select players - updates GameModeContext]
+  ↓ [Click game card - GameCard.onClick → router.push]
+/arcade/room (if not in room, shows game selector)
+  ↓ [Select game - calls setRoomGame mutation]
+  ↓ [Room created, gameName saved to roomData]
+  ↓ [useRoomData refetch updates roomData.gameName]
+/arcade/room (now displays the game)
+  ↓ [Game Provider and Component render]
+```
+
+### Flow 2: Multiplayer - Room Invitation
+
+```
+User A: Creates room via Champion Arena
+User B: Receives invitation
+User B: Joins room via /arcade/room
+User B: Sees same game selection (if set) or game selector (if not set)
+```
+
+### Flow 3: Exit Game
+
+```
+/arcade/room (in-game)
+  ↓ [Click "Quit" or "Exit Session" in GameContextNav]
+  ↓ [onExitSession callback → router.push('/arcade')]
+/arcade (back to champion arena)
+  ↓ Player selection reset by GameModeContext
+```
+
+## 5. Game Chooser / Game Selection System
+
+**File:** `/Users/antialias/projects/soroban-abacus-flashcards/apps/web/src/components/GameSelector.tsx` (lines 1-112)
+
+**How It Works:**
+1. `GameSelector` component gets all games from both sources:
+   - Legacy `GAMES_CONFIG` (currently empty)
+   - Registry games via `getAllGames()`
+
+2. For each game, creates `GameCard` component with configuration including `url` field
+
+3. Game Cards rendered in 2-column grid (responsive)
+
+4. When card clicked:
+   - `GameCard` checks `activePlayerCount` against game's `maxPlayers`
+   - If valid: calls `router.push(config.url)` - client-side navigation via Next.js
+   - If invalid: blocks navigation with warning
+
+**Two Game Systems:**
+
+### Registry Games (NEW - Modular)
+- Location: `/Users/antialias/projects/soroban-abacus-flashcards/apps/web/src/arcade-games/`
+- File: `/Users/antialias/projects/soroban-abacus-flashcards/apps/web/src/lib/arcade/game-registry.ts`
+- Examples: `complement-race`, `memory-quiz`, `matching`
+- Each game has: `manifest` (metadata), `Provider` (context), `GameComponent` (UI)
+- Games registered globally via `registerGame()` function
+
+### Legacy Games (OLD)
+- Location: Directly in `/app/arcade/` directory
+- Examples: `/app/arcade/complement-race/page.tsx`
+- Currently, only complement-race is partially migrated
+- Direct URL structure: `/arcade/{gameName}/page.tsx`
+
+**Game Config Structure (for display):**
+```javascript
+{
+  name: string,              // Display name
+  fullName?: string,         // Longer name for detailed view
+  description: string,       // Short description
+  longDescription?: string,  // Detailed description
+  icon: emoji,              // Game icon emoji
+  gradient: css gradient,   // Background gradient
+  borderColor: css color,   // Border color for availability
+  maxPlayers: number,       // Player limit for validation
+  chips?: string[],         // Feature labels
+  color?: 'green'|'purple'|'blue', // Color theme
+  difficulty?: string,      // Difficulty level
+  available: boolean,       // Is game available
+}
+```
+
+## 6. Key Components Summary
+
+### PageWithNav - Main Layout Wrapper
+**File:** `/Users/antialias/projects/soroban-abacus-flashcards/apps/web/src/components/PageWithNav.tsx` (lines 1-192)
+
+**Responsibilities:**
+- Wraps all game/arcade pages
+- Manages GameContextNav state (mini-nav)
+- Handles player configuration dialog
+- Shows moderation notifications
+- Renders top navigation bar via `AppNavBar`
+
+**Key Props:**
+- `navTitle` - Passed to GameContextNav
+- `navEmoji` - Passed to GameContextNav
+- `gameName` - Internal game name for API
+- `emphasizePlayerSelection` - Highlight player controls
+- `onExitSession` - Callback when user exits
+- `onSetup`, `onNewGame` - Game-specific callbacks
+- `children` - Page content
+
+### AppNavBar - Top Navigation Bar
+**File:** `/Users/antialias/projects/soroban-abacus-flashcards/apps/web/src/components/AppNavBar.tsx` (lines 1-625)
+
+**Variants:**
+- `full` - Standard navigation (default for non-game pages)
+- `minimal` - Game navigation (auto-selected for `/arcade` and `/games`)
+
+**Minimal Nav Features:**
+- Hamburger menu (left) with:
+  - Site navigation (Home, Create, Guide, Games)
+  - Controls (Fullscreen, Exit Arcade)
+  - Abacus style dropdown
+- Centered game context (navSlot)
+- Fullscreen indicator badge
+
+### EnhancedChampionArena - Main Arcade Display
+**File:** `/Users/antialias/projects/soroban-abacus-flashcards/apps/web/src/components/EnhancedChampionArena.tsx` (lines 1-40)
+
+**Responsibilities:**
+- Container for game selector
+- Full-height flex layout
+- Passes configuration to `GameSelector`
+
+### GameSelector - Game Grid
+**File:** `/Users/antialias/projects/soroban-abacus-flashcards/apps/web/src/components/GameSelector.tsx` (lines 1-112)
+
+**Responsibilities:**
+- Fetches all games from registry
+- Arranges in responsive grid
+- Shows header "🎮 Available Games"
+- Renders GameCard for each game
+
+### GameCard - Individual Game Button
+**File:** `/Users/antialias/projects/soroban-abacus-flashcards/apps/web/src/components/GameCard.tsx` (lines 1-241)
+
+**Responsibilities:**
+- Displays game with icon, name, description
+- Shows feature chips and player count indicator
+- Validates player count against game requirements
+- Handles click to navigate to game
+- Two variants: compact and detailed
+
+## 7. State Management
+
+### GameModeContext
+**File:** `/Users/antialias/projects/soroban-abacus-flashcards/apps/web/src/contexts/GameModeContext.tsx` (lines 1-325)
+
+**Manages:**
+- Local players (Map<string, Player>)
+- Active players (Set<string>)
+- Game mode (computed from active player count)
+- Player CRUD operations (add, update, remove)
+
+**Key Features:**
+- Fetches players from user's local DB via `useUserPlayers()`
+- Creates 4 default players if none exist
+- When in room: merges room members' players (marked as isLocal: false)
+- Syncs to room members via `notifyRoomOfPlayerUpdate()`
+
+**Computed Values:**
+- `activePlayerCount` - Size of activePlayers set
+- `gameMode`:
+  - 1 player → 'single'
+  - 2 players → 'battle'
+  - 3+ players → 'tournament'
+
+### useRoomData Hook
+**File:** `/Users/antialias/projects/soroban-abacus-flashcards/apps/web/src/hooks/useRoomData.ts` (lines 1-450+)
+
+**Manages:**
+- Current room fetching via TanStack Query
+- Socket.io real-time updates
+- Room state (members, players, game name)
+- Moderation events (kicked, banned, invitations)
+
+**Key Operations:**
+- `fetchCurrentRoom()` - GET `/api/arcade/rooms/current`
+- `createRoomApi()` - POST `/api/arcade/rooms`
+- `joinRoomApi()` - POST `/api/arcade/rooms/{id}/join`
+- `leaveRoomApi()` - POST `/api/arcade/rooms/{id}/leave`
+- `setRoomGame()` - Updates room's gameName and gameConfig
+
+**Socket Events:**
+- `join-user-channel` - Personal notifications
+- `join-room` - Subscribe to room updates
+- `room-joined` - Refresh when entering room
+- `member-joined` - When player joins
+- `member-left` - When player leaves
+- `room-players-updated` - When players change
+- Moderation events (kicked, banned, etc.)
+
+## 8. Routing Summary
+
+**Current URL Structure:**
+
+```
+/                          → Home page (Soroban Generator)
+/create                    → Create flashcards
+/guide                     → Tutorial guide
+/games                     → Games library (external game pages)
+/arcade                    → Champion Arena (main landing with game selector)
+/arcade/room               → Active game display or game selection UI
+/arcade/room?game={name}   → Query param for game selection (optional)
+/arcade/complement-race    → OLD: Direct complement-race page (legacy)
+/arcade/complement-race/practice  → Complement-race practice mode
+/arcade/complement-race/sprint    → Complement-race sprint mode
+/arcade/complement-race/survival  → Complement-race survival mode
+/arcade/memory-quiz        → Memory quiz game page (legacy structure)
+```
+
+**Query Parameters:**
+- `/arcade/room?game={gameName}` - Optional game selection (parsed by GameCard)
+
+## 9. Key Differences: /arcade vs /arcade/room
+
+| Aspect | /arcade | /arcade/room |
+|--------|---------|--------------|
+| **Purpose** | Game selection hub | Active game display or selection within room |
+| **Displays** | GameSelector with all games | Selected game OR game selector if no game in room |
+| **Room Context** | Optional (can start solo) | Usually in a room (fetches via useRoomData) |
+| **Navigation** | Click game → /arcade/room | Click game → Saves to room → Displays game |
+| **GameContextNav** | Shows player selector | Shows room info when joined |
+| **Player State** | Local only | Local + remote (room members) |
+| **Exit Button** | Usually hidden | Shows "Exit Session" to return to /arcade |
+| **Socket Connection** | Optional | Always connected (in room) |
+| **Page Transition** | User controls | Driven by room state updates |
+
+## 10. Planning the Merge (/arcade/room → /arcade)
+
+**Challenges to Consider:**
+
+1. **URL Consolidation:**
+   - `/arcade/room` would become a sub-path or handled by `/arcade` with state
+   - Query param `?game={name}` could drive game selection
+   - Current: `/arcade/room?game=complement-race`
+   - Could become: `/arcade?game=complement-race&mode=play`
+
+2. **Route Disambiguation:**
+   - `/arcade` needs to handle: game selection display, game display, game loading
+   - Same page different modes based on state
+   - Or: Sub-routes like `/arcade/select`, `/arcade/play`
+
+3. **State Layering:**
+   - Local game mode (solo player, GameModeContext)
+   - Room state (multiplayer, useRoomData)
+   - Both need to coexist
+
+4. **Navigation Preservation:**
+   - Currently: `GameCard` → `router.push('/arcade/room?game=X')`
+   - After merge: Would need new logic
+   - Fullscreen state must persist (uses Next.js router, not reload)
+
+5. **PageWithNav Behavior:**
+   - Mini-nav shows game selection UI vs room info
+   - Currently determined by `roomInfo` presence
+   - After merge: Need same logic but one route
+
+6. **Game Display:**
+   - Currently: `/arcade/room` fetches game from registry
+   - New: `/arcade` would need same game registry lookup
+   - Game Provider/Component rendering must work identically
+
+**Merge Strategy Options:**
+
+### Option A: Single Route with Modes
+```
+/arcade
+├── Mode: browse (default, show GameSelector)
+├── Mode: select (game selected, show GameSelector for confirmation)
+└── Mode: play (in-game, show game display)
+```
+
+### Option B: Sub-routes
+```
+/arcade
+├── /arcade (selector)
+├── /arcade/play (game display)
+└── /arcade/configure (player config)
+```
+
+### Option C: Query-Parameter Driven
+```
+/arcade
+├── /arcade (default - selector)
+├── /arcade?game=X (game loading)
+└── /arcade?game=X&playing=true (in-game)
+```
+
+**Recommendation:** Option C (Query-driven) is closest to current architecture and requires minimal changes to existing logic.
--- a/apps/web/.claude/settings.local.json
+++ b/apps/web/.claude/settings.local.json
@@ -97,7 +97,8 @@
      "Bash(pnpm exec turbo build --filter=@soroban/web)",
      "Bash(do gh run list --limit 1 --json conclusion,status,name,databaseId --jq '.[0] | \"\"\\(.status) - \\(.conclusion // \"\"running\"\")\"\"')",
      "Bash(do gh run list --limit 1 --json conclusion,status,name --jq '.[0] | \"\"\\(.status) - \\(.conclusion // \"\"running\"\") - \\(.name)\"\"')",
-      "Bash(do gh run list --limit 1 --workflow=\"Build and Deploy\" --json conclusion,status --jq '.[0] | \"\"\\(.status) - \\(.conclusion // \"\"running\"\")\"\"')"
+      "Bash(do gh run list --limit 1 --workflow=\"Build and Deploy\" --json conclusion,status --jq '.[0] | \"\"\\(.status) - \\(.conclusion // \"\"running\"\")\"\"')",
+      "WebFetch(domain:abaci.one)"
    ],
    "deny": [],
    "ask": []
--- a/apps/web/src/app/arcade-rooms/[roomId]/page.tsx
+++ b/apps/web/src/app/arcade-rooms/[roomId]/page.tsx
@@ -158,7 +158,7 @@ export default function RoomDetailPage() {
  const startGame = () => {
    if (!room) return
    // Navigate to the room game page
-    router.push('/arcade/room')
+    router.push('/arcade')
  }

  const joinRoom = async () => {
--- a/apps/web/src/app/arcade/page.tsx
+++ b/apps/web/src/app/arcade/page.tsx
@@ -1,128 +1,315 @@
 'use client'

-import { useEffect, useRef } from 'react'
+import { useRouter } from 'next/navigation'
+import { useRoomData, useSetRoomGame } from '@/hooks/useRoomData'
+import { GAMES_CONFIG } from '@/components/GameSelector'
+import type { GameType } from '@/components/GameSelector'
 import { PageWithNav } from '@/components/PageWithNav'
 import { css } from '../../../styled-system/css'
-import { EnhancedChampionArena } from '../../components/EnhancedChampionArena'
-import { FullscreenProvider, useFullscreen } from '../../contexts/FullscreenContext'
+import { getAllGames, getGame, hasGame } from '@/lib/arcade/game-registry'

-function ArcadeContent() {
-  const { setFullscreenElement } = useFullscreen()
-  const arcadeRef = useRef<HTMLDivElement>(null)
+/**
+ * /arcade - Renders the game for the user's current room
+ * Since users can only be in one room at a time, this is a simple singular route
+ *
+ * Shows game selection when no game is set, then shows the game itself once selected.
+ * URL never changes - it's always /arcade regardless of selection, setup, or gameplay.
+ *
+ * Note: We show a friendly message with a link if no room exists to avoid navigation loops.
+ *
+ * Note: ModerationNotifications is handled by PageWithNav inside each game component,
+ * so we don't need to render it here.
+ */
+export default function RoomPage() {
+  const router = useRouter()
+  const { roomData, isLoading } = useRoomData()
+  const { mutate: setRoomGame } = useSetRoomGame()

-  useEffect(() => {
-    // Register this component's main div as the fullscreen element
-    if (arcadeRef.current) {
-      setFullscreenElement(arcadeRef.current)
-    }
-  }, [setFullscreenElement])
-
-  return (
-    <div
-      ref={arcadeRef}
-      className={css({
-        minHeight: 'calc(100vh - 80px)', // Account for mini nav height
-        background: 'linear-gradient(135deg, #0f0f23 0%, #1a1a3a 50%, #2d1b69 100%)',
-        position: 'relative',
-        overflow: 'hidden',
-        display: 'flex',
-        flexDirection: 'column',
-        py: { base: '4', md: '6' },
-      })}
-    >
-      {/* Animated background elements */}
+  // Show loading state
+  if (isLoading) {
+    return (
      <div
-        className={css({
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-          backgroundImage: `
-          radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
-          radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.3) 0%, transparent 50%),
-          radial-gradient(circle at 40% 40%, rgba(120, 219, 255, 0.2) 0%, transparent 50%)
-        `,
-          animation: 'arcadeFloat 20s ease-in-out infinite',
-        })}
-      />
-
-      {/* Main Champion Arena - takes remaining space */}
-      <div
-        className={css({
-          flex: 1,
+        style={{
          display: 'flex',
-          px: { base: '2', md: '4' },
-          position: 'relative',
-          zIndex: 1,
-          minHeight: 0, // Important for flex children
-        })}
+          alignItems: 'center',
+          justifyContent: 'center',
+          height: '100vh',
+          fontSize: '18px',
+          color: '#666',
+        }}
      >
-        <EnhancedChampionArena
-          onConfigurePlayer={() => {}}
+        Loading room...
+      </div>
+    )
+  }
+
+  // Show error if no room (instead of redirecting)
+  if (!roomData) {
+    return (
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+          height: '100vh',
+          fontSize: '18px',
+          color: '#666',
+          gap: '1rem',
+        }}
+      >
+        <div>No active room found</div>
+        <a
+          href="/arcade"
+          style={{
+            color: '#3b82f6',
+            textDecoration: 'underline',
+          }}
+        >
+          Go to Champion Arena
+        </a>
+      </div>
+    )
+  }
+
+  // Show game selection if no game is set
+  if (!roomData.gameName) {
+    const handleGameSelect = (gameType: GameType) => {
+      console.log('[RoomPage] handleGameSelect called with gameType:', gameType)
+
+      // All games are now in the registry
+      if (hasGame(gameType)) {
+        const gameDef = getGame(gameType)
+        if (!gameDef?.manifest.available) {
+          console.log('[RoomPage] Registry game not available, blocking selection')
+          return
+        }
+
+        console.log('[RoomPage] Selecting registry game:', gameType)
+        setRoomGame({
+          roomId: roomData.id,
+          gameName: gameType,
+        })
+        return
+      }
+
+      console.log('[RoomPage] Unknown game type:', gameType)
+    }
+
+    return (
+      <PageWithNav
+        navTitle="Choose Game"
+        navEmoji="🎮"
+        emphasizePlayerSelection={true}
+        onExitSession={() => router.push('/arcade')}
+      >
+        <div
          className={css({
-            width: '100%',
-            height: '100%',
-            background: 'rgba(255, 255, 255, 0.05)',
-            backdropFilter: 'blur(20px)',
-            border: '1px solid rgba(255, 255, 255, 0.1)',
-            boxShadow: '0 20px 40px rgba(0, 0, 0, 0.3)',
+            minHeight: '100vh',
+            background: 'linear-gradient(135deg, #0f0f23 0%, #1a1a3a 50%, #2d1b69 100%)',
            display: 'flex',
            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            padding: '4',
          })}
-        />
-      </div>
-    </div>
-  )
-}
+        >
+          <h1
+            className={css({
+              fontSize: { base: '2xl', md: '3xl' },
+              fontWeight: 'bold',
+              color: 'white',
+              mb: '8',
+              textAlign: 'center',
+            })}
+          >
+            Choose a Game
+          </h1>

-function ArcadePageWithRedirect() {
-  return (
-    <PageWithNav navTitle="Champion Arena" navEmoji="🏟️" emphasizePlayerSelection={true}>
-      <ArcadeContent />
-    </PageWithNav>
-  )
-}
+          <div
+            className={css({
+              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
+              return (
+                <button
+                  key={gameType}
+                  onClick={() => handleGameSelect(gameType as GameType)}
+                  disabled={!isAvailable}
+                  className={css({
+                    background: config.gradient,
+                    border: '2px solid',
+                    borderColor: config.borderColor || 'blue.200',
+                    borderRadius: '2xl',
+                    padding: '6',
+                    cursor: !isAvailable ? 'not-allowed' : 'pointer',
+                    opacity: !isAvailable ? 0.5 : 1,
+                    transition: 'all 0.3s ease',
+                    _hover: !isAvailable
+                      ? {}
+                      : {
+                          transform: 'translateY(-4px) scale(1.02)',
+                          boxShadow: '0 20px 40px rgba(59, 130, 246, 0.2)',
+                        },
+                  })}
+                >
+                  <div
+                    className={css({
+                      fontSize: '4xl',
+                      mb: '2',
+                    })}
+                  >
+                    {config.icon}
+                  </div>
+                  <h3
+                    className={css({
+                      fontSize: 'xl',
+                      fontWeight: 'bold',
+                      color: 'gray.900',
+                      mb: '2',
+                    })}
+                  >
+                    {config.name}
+                  </h3>
+                  <p
+                    className={css({
+                      fontSize: 'sm',
+                      color: 'gray.600',
+                    })}
+                  >
+                    {config.description}
+                  </p>
+                </button>
+              )
+            })}

-export default function ArcadePage() {
-  return (
-    <FullscreenProvider>
-      <ArcadePageWithRedirect />
-    </FullscreenProvider>
-  )
-}
-
-// Arcade-specific animations
-const arcadeAnimations = `
-@keyframes arcadeFloat {
-  0%, 100% {
-    transform: translateY(0px) rotate(0deg);
-    opacity: 0.7;
+            {/* Registry games */}
+            {getAllGames().map((gameDef) => {
+              const isAvailable = gameDef.manifest.available
+              return (
+                <button
+                  key={gameDef.manifest.name}
+                  onClick={() => handleGameSelect(gameDef.manifest.name)}
+                  disabled={!isAvailable}
+                  className={css({
+                    background: gameDef.manifest.gradient,
+                    border: '2px solid',
+                    borderColor: gameDef.manifest.borderColor,
+                    borderRadius: '2xl',
+                    padding: '6',
+                    cursor: !isAvailable ? 'not-allowed' : 'pointer',
+                    opacity: !isAvailable ? 0.5 : 1,
+                    transition: 'all 0.3s ease',
+                    _hover: !isAvailable
+                      ? {}
+                      : {
+                          transform: 'translateY(-4px) scale(1.02)',
+                          boxShadow: '0 20px 40px rgba(59, 130, 246, 0.2)',
+                        },
+                  })}
+                >
+                  <div
+                    className={css({
+                      fontSize: '4xl',
+                      mb: '2',
+                    })}
+                  >
+                    {gameDef.manifest.icon}
+                  </div>
+                  <h3
+                    className={css({
+                      fontSize: 'xl',
+                      fontWeight: 'bold',
+                      color: 'gray.900',
+                      mb: '2',
+                    })}
+                  >
+                    {gameDef.manifest.displayName}
+                  </h3>
+                  <p
+                    className={css({
+                      fontSize: 'sm',
+                      color: 'gray.600',
+                    })}
+                  >
+                    {gameDef.manifest.description}
+                  </p>
+                </button>
+              )
+            })}
+          </div>
+        </div>
+      </PageWithNav>
+    )
  }
-  33% {
-    transform: translateY(-20px) rotate(1deg);
-    opacity: 1;
+
+  // Check if this is a registry game first
+  if (hasGame(roomData.gameName)) {
+    const gameDef = getGame(roomData.gameName)
+    if (!gameDef) {
+      return (
+        <PageWithNav
+          navTitle="Game Not Found"
+          navEmoji="⚠️"
+          emphasizePlayerSelection={true}
+          onExitSession={() => router.push('/arcade')}
+        >
+          <div
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              height: '100vh',
+              fontSize: '18px',
+              color: '#666',
+            }}
+          >
+            Game "{roomData.gameName}" not found in registry
+          </div>
+        </PageWithNav>
+      )
+    }
+
+    // Render registry game dynamically
+    const { Provider, GameComponent } = gameDef
+    return (
+      <Provider>
+        <GameComponent />
+      </Provider>
+    )
  }
-  66% {
-    transform: translateY(-10px) rotate(-1deg);
-    opacity: 0.8;
+
+  // Render legacy games based on room's gameName
+  switch (roomData.gameName) {
+    // TODO: Add other legacy games (complement-race, etc.) once migrated
+    default:
+      return (
+        <PageWithNav
+          navTitle="Game Not Available"
+          navEmoji="⚠️"
+          emphasizePlayerSelection={true}
+          onExitSession={() => router.push('/arcade')}
+        >
+          <div
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              height: '100vh',
+              fontSize: '18px',
+              color: '#666',
+            }}
+          >
+            Game "{roomData.gameName}" not yet supported
+          </div>
+        </PageWithNav>
+      )
  }
 }
-
-@keyframes arcadePulse {
-  0%, 100% {
-    box-shadow: 0 0 20px rgba(96, 165, 250, 0.3);
-  }
-  50% {
-    box-shadow: 0 0 40px rgba(96, 165, 250, 0.6);
-  }
-}
-`
-
-// Inject arcade animations
-if (typeof document !== 'undefined' && !document.getElementById('arcade-animations')) {
-  const style = document.createElement('style')
-  style.id = 'arcade-animations'
-  style.textContent = arcadeAnimations
-  document.head.appendChild(style)
-}
--- a/apps/web/src/app/arcade/room/page.tsx
+++ b/apps/web/src/app/arcade/room/page.tsx
@@ -1,358 +0,0 @@
-'use client'
-
-import { useRouter } from 'next/navigation'
-import { useRoomData, useSetRoomGame } from '@/hooks/useRoomData'
-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'
-
-// Map GameType keys to internal game names
-// Note: "battle-arena" removed - now handled by game registry as "matching"
-const GAME_TYPE_TO_NAME: Record<GameType, string> = {
-  'complement-race': 'complement-race',
-  'master-organizer': 'master-organizer',
-}
-
-/**
- * /arcade/room - Renders the game for the user's current room
- * Since users can only be in one room at a time, this is a simple singular route
- *
- * Shows game selection when no game is set, then shows the game itself once selected.
- * URL never changes - it's always /arcade/room regardless of selection, setup, or gameplay.
- *
- * Note: We don't redirect to /arcade if no room exists to avoid navigation loops.
- * Instead, we show a friendly message with a link back to the Champion Arena.
- *
- * Note: ModerationNotifications is handled by PageWithNav inside each game component,
- * so we don't need to render it here.
- */
-export default function RoomPage() {
-  const router = useRouter()
-  const { roomData, isLoading } = useRoomData()
-  const { mutate: setRoomGame } = useSetRoomGame()
-
-  // Show loading state
-  if (isLoading) {
-    return (
-      <div
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          height: '100vh',
-          fontSize: '18px',
-          color: '#666',
-        }}
-      >
-        Loading room...
-      </div>
-    )
-  }
-
-  // Show error if no room (instead of redirecting)
-  if (!roomData) {
-    return (
-      <div
-        style={{
-          display: 'flex',
-          flexDirection: 'column',
-          alignItems: 'center',
-          justifyContent: 'center',
-          height: '100vh',
-          fontSize: '18px',
-          color: '#666',
-          gap: '1rem',
-        }}
-      >
-        <div>No active room found</div>
-        <a
-          href="/arcade"
-          style={{
-            color: '#3b82f6',
-            textDecoration: 'underline',
-          }}
-        >
-          Go to Champion Arena
-        </a>
-      </div>
-    )
-  }
-
-  // Show game selection if no game is set
-  if (!roomData.gameName) {
-    const handleGameSelect = (gameType: GameType) => {
-      console.log('[RoomPage] handleGameSelect called with gameType:', gameType)
-
-      // Check if it's a registry game first
-      if (hasGame(gameType)) {
-        const gameDef = getGame(gameType)
-        if (!gameDef?.manifest.available) {
-          console.log('[RoomPage] Registry game not available, blocking selection')
-          return
-        }
-
-        console.log('[RoomPage] Selecting registry game:', gameType)
-        setRoomGame({
-          roomId: roomData.id,
-          gameName: gameType, // Use the game name directly for registry games
-        })
-        return
-      }
-
-      // Legacy game handling
-      const gameConfig = GAMES_CONFIG[gameType as keyof typeof GAMES_CONFIG]
-      if (!gameConfig) {
-        console.log('[RoomPage] Unknown game type:', gameType)
-        return
-      }
-
-      console.log('[RoomPage] Game config:', {
-        name: gameConfig.name,
-        available: 'available' in gameConfig ? gameConfig.available : true,
-      })
-
-      if ('available' in gameConfig && gameConfig.available === false) {
-        console.log('[RoomPage] Game not available, blocking selection')
-        return // Don't allow selecting unavailable games
-      }
-
-      // Map GameType to internal game name
-      const internalGameName = GAME_TYPE_TO_NAME[gameType]
-      console.log('[RoomPage] Mapping:', {
-        gameType,
-        internalGameName,
-        mappingExists: !!internalGameName,
-      })
-
-      console.log('[RoomPage] Calling setRoomGame with:', {
-        roomId: roomData.id,
-        gameName: internalGameName,
-        preservingGameConfig: true,
-      })
-
-      // Don't pass gameConfig - we want to preserve existing settings for all games
-      setRoomGame({
-        roomId: roomData.id,
-        gameName: internalGameName,
-      })
-    }
-
-    return (
-      <PageWithNav
-        navTitle="Choose Game"
-        navEmoji="🎮"
-        emphasizePlayerSelection={true}
-        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',
-          })}
-        >
-          <h1
-            className={css({
-              fontSize: { base: '2xl', md: '3xl' },
-              fontWeight: 'bold',
-              color: 'white',
-              mb: '8',
-              textAlign: 'center',
-            })}
-          >
-            Choose a Game
-          </h1>
-
-          <div
-            className={css({
-              display: 'grid',
-              gridTemplateColumns: { base: '1fr', md: 'repeat(2, 1fr)' },
-              gap: '4',
-              maxWidth: '800px',
-              width: '100%',
-            })}
-          >
-            {/* Legacy games */}
-            {Object.entries(GAMES_CONFIG).map(([gameType, config]) => {
-              const isAvailable = !('available' in config) || config.available !== false
-              return (
-                <button
-                  key={gameType}
-                  onClick={() => handleGameSelect(gameType as GameType)}
-                  disabled={!isAvailable}
-                  className={css({
-                    background: config.gradient,
-                    border: '2px solid',
-                    borderColor: config.borderColor || 'blue.200',
-                    borderRadius: '2xl',
-                    padding: '6',
-                    cursor: !isAvailable ? 'not-allowed' : 'pointer',
-                    opacity: !isAvailable ? 0.5 : 1,
-                    transition: 'all 0.3s ease',
-                    _hover: !isAvailable
-                      ? {}
-                      : {
-                          transform: 'translateY(-4px) scale(1.02)',
-                          boxShadow: '0 20px 40px rgba(59, 130, 246, 0.2)',
-                        },
-                  })}
-                >
-                  <div
-                    className={css({
-                      fontSize: '4xl',
-                      mb: '2',
-                    })}
-                  >
-                    {config.icon}
-                  </div>
-                  <h3
-                    className={css({
-                      fontSize: 'xl',
-                      fontWeight: 'bold',
-                      color: 'gray.900',
-                      mb: '2',
-                    })}
-                  >
-                    {config.name}
-                  </h3>
-                  <p
-                    className={css({
-                      fontSize: 'sm',
-                      color: 'gray.600',
-                    })}
-                  >
-                    {config.description}
-                  </p>
-                </button>
-              )
-            })}
-
-            {/* Registry games */}
-            {getAllGames().map((gameDef) => {
-              const isAvailable = gameDef.manifest.available
-              return (
-                <button
-                  key={gameDef.manifest.name}
-                  onClick={() => handleGameSelect(gameDef.manifest.name)}
-                  disabled={!isAvailable}
-                  className={css({
-                    background: gameDef.manifest.gradient,
-                    border: '2px solid',
-                    borderColor: gameDef.manifest.borderColor,
-                    borderRadius: '2xl',
-                    padding: '6',
-                    cursor: !isAvailable ? 'not-allowed' : 'pointer',
-                    opacity: !isAvailable ? 0.5 : 1,
-                    transition: 'all 0.3s ease',
-                    _hover: !isAvailable
-                      ? {}
-                      : {
-                          transform: 'translateY(-4px) scale(1.02)',
-                          boxShadow: '0 20px 40px rgba(59, 130, 246, 0.2)',
-                        },
-                  })}
-                >
-                  <div
-                    className={css({
-                      fontSize: '4xl',
-                      mb: '2',
-                    })}
-                  >
-                    {gameDef.manifest.icon}
-                  </div>
-                  <h3
-                    className={css({
-                      fontSize: 'xl',
-                      fontWeight: 'bold',
-                      color: 'gray.900',
-                      mb: '2',
-                    })}
-                  >
-                    {gameDef.manifest.displayName}
-                  </h3>
-                  <p
-                    className={css({
-                      fontSize: 'sm',
-                      color: 'gray.600',
-                    })}
-                  >
-                    {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)
-    if (!gameDef) {
-      return (
-        <PageWithNav
-          navTitle="Game Not Found"
-          navEmoji="⚠️"
-          emphasizePlayerSelection={true}
-          onExitSession={() => router.push('/arcade')}
-        >
-          <div
-            style={{
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-              height: '100vh',
-              fontSize: '18px',
-              color: '#666',
-            }}
-          >
-            Game "{roomData.gameName}" not found in registry
-          </div>
-        </PageWithNav>
-      )
-    }
-
-    // Render registry game dynamically
-    const { Provider, GameComponent } = gameDef
-    return (
-      <Provider>
-        <GameComponent />
-      </Provider>
-    )
-  }
-
-  // Render legacy games based on room's gameName
-  switch (roomData.gameName) {
-    // TODO: Add other legacy games (complement-race, etc.) once migrated
-    default:
-      return (
-        <PageWithNav
-          navTitle="Game Not Available"
-          navEmoji="⚠️"
-          emphasizePlayerSelection={true}
-          onExitSession={() => router.push('/arcade')}
-        >
-          <div
-            style={{
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-              height: '100vh',
-              fontSize: '18px',
-              color: '#666',
-            }}
-          >
-            Game "{roomData.gameName}" not yet supported
-          </div>
-        </PageWithNav>
-      )
-  }
-}
--- a/apps/web/src/app/join/[code]/page.tsx
+++ b/apps/web/src/app/join/[code]/page.tsx
@@ -231,7 +231,7 @@ export default function JoinRoomPage({ params }: { params: { code: string } }) {
          password: roomPassword,
        })
        // Navigate to the game
-        router.push('/arcade/room')
+        router.push('/arcade')
      } catch (err) {
        setError(err instanceof Error ? err.message : 'Failed to join room')
        setIsJoining(false)
@@ -261,7 +261,7 @@ export default function JoinRoomPage({ params }: { params: { code: string } }) {

        // If user is already in this exact room, just navigate to game
        if (roomData && roomData.id === room.id) {
-          router.push('/arcade/room')
+          router.push('/arcade')
          return
        }

@@ -313,7 +313,7 @@ export default function JoinRoomPage({ params }: { params: { code: string } }) {
  }

  const handleCancel = () => {
-    router.push('/arcade/room') // Stay in current room
+    router.push('/arcade') // Stay in current room
  }

  const handlePasswordSubmit = () => {
--- a/apps/web/src/app/page.tsx
+++ b/apps/web/src/app/page.tsx
@@ -1,185 +1,587 @@
 'use client'

+import { useState } from 'react'
 import Link from 'next/link'
 import { PageWithNav } from '@/components/PageWithNav'
+import { AbacusReact } from '@soroban/abacus-react'
 import { css } from '../../styled-system/css'
-import { container, hstack, stack } from '../../styled-system/patterns'
+import { container, grid, hstack, stack } from '../../styled-system/patterns'

 export default function HomePage() {
+  const [abacusValue, setAbacusValue] = useState(1234567)
  return (
-    <PageWithNav navTitle="Soroban Flashcards" navEmoji="🧮">
-      <div
-        className={css({
-          minHeight: '100vh',
-          bg: 'gradient-to-br from-brand.50 to-brand.100',
-        })}
-      >
-        {/* Hero Section */}
-        <main className={container({ maxW: '6xl', px: '4' })}>
+    <PageWithNav navTitle="Soroban Mastery Platform" navEmoji="🧮">
+      <div className={css({ bg: 'gray.900', minHeight: '100vh' })}>
+        {/* Hero with Large Abacus */}
+        <div
+          className={css({
+            background:
+              'linear-gradient(135deg, rgba(17, 24, 39, 1) 0%, rgba(88, 28, 135, 0.3) 50%, rgba(17, 24, 39, 1) 100%)',
+            color: 'white',
+            py: { base: '12', md: '20' },
+            position: 'relative',
+            overflow: 'hidden',
+          })}
+        >
          <div
-            className={stack({
-              gap: '12',
-              py: '16',
-              align: 'center',
-              textAlign: 'center',
+            className={css({
+              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',
            })}
-          >
-            {/* Hero Content */}
-            <div className={stack({ gap: '6', maxW: '4xl' })}>
+          />
+          <div className={container({ maxW: '6xl', px: '4', position: 'relative' })}>
+            <div className={css({ textAlign: 'center', maxW: '5xl', mx: 'auto' })}>
              <h1
                className={css({
-                  fontSize: { base: '4xl', md: '6xl' },
+                  fontSize: { base: '3xl', md: '5xl', lg: '6xl' },
                  fontWeight: 'bold',
-                  color: 'gray.900',
+                  mb: '6',
                  lineHeight: 'tight',
+                  background: 'linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #fbbf24 100%)',
+                  backgroundClip: 'text',
+                  color: 'transparent',
                })}
              >
-                Beautiful Soroban <span className={css({ color: 'brand.600' })}>Flashcards</span>
+                Master the Soroban
              </h1>

+              {/* Large Featured Abacus */}
+              <div
+                className={css({
+                  display: 'flex',
+                  flexDirection: 'column',
+                  alignItems: 'center',
+                  gap: '4',
+                  my: '10',
+                  p: '8',
+                  bg: 'rgba(0, 0, 0, 0.4)',
+                  borderRadius: '2xl',
+                  border: '2px solid',
+                  borderColor: 'purple.500/30',
+                  boxShadow: '0 25px 50px -12px rgba(139, 92, 246, 0.25)',
+                })}
+              >
+                <div
+                  className={css({
+                    fontSize: 'lg',
+                    fontWeight: 'semibold',
+                    color: 'gray.300',
+                    mb: '2',
+                  })}
+                >
+                  Click the beads to interact!
+                </div>
+                <AbacusReact
+                  value={abacusValue}
+                  columns={7}
+                  beadShape="diamond"
+                  colorScheme="place-value"
+                  hideInactiveBeads={false}
+                  interactive={true}
+                  animated={true}
+                  soundEnabled={true}
+                  soundVolume={0.4}
+                  scaleFactor={2.2}
+                  showNumbers={true}
+                  callbacks={{
+                    onValueChange: (newValue: number) => setAbacusValue(newValue),
+                  }}
+                />
+                <div
+                  className={css({
+                    fontSize: '4xl',
+                    fontWeight: 'bold',
+                    color: 'yellow.400',
+                    fontFamily: 'mono',
+                    letterSpacing: 'wide',
+                  })}
+                >
+                  {abacusValue.toLocaleString()}
+                </div>
+              </div>
+
              <p
                className={css({
                  fontSize: { base: 'lg', md: 'xl' },
-                  color: 'gray.600',
-                  maxW: '2xl',
+                  color: 'gray.300',
+                  mb: '8',
+                  maxW: '3xl',
                  mx: 'auto',
                })}
              >
-                Create stunning, educational flashcards with authentic Japanese abacus
-                representations. Perfect for teachers, students, and mental math enthusiasts.
+                Interactive tutorials, multiplayer games, and beautiful flashcards—your complete
+                soroban learning ecosystem
              </p>

-              <div className={hstack({ gap: '4', justify: 'center', mt: '8' })}>
+              <div className={hstack({ gap: '4', justify: 'center', flexWrap: 'wrap' })}>
                <Link
-                  href="/create"
+                  href="/games"
                  className={css({
                    px: '8',
                    py: '4',
-                    bg: 'brand.600',
-                    color: 'white',
+                    bg: 'linear-gradient(135deg, #fbbf24, #f59e0b)',
+                    color: 'gray.900',
+                    fontWeight: 'bold',
                    fontSize: 'lg',
-                    fontWeight: 'semibold',
                    rounded: 'xl',
-                    shadow: 'card',
-                    transition: 'all',
+                    shadow: '0 10px 40px rgba(251, 191, 36, 0.3)',
                    _hover: {
-                      bg: 'brand.700',
                      transform: 'translateY(-2px)',
-                      shadow: 'modal',
+                      shadow: '0 20px 50px rgba(251, 191, 36, 0.4)',
                    },
+                    transition: 'all 0.3s ease',
                  })}
                >
-                  ✨ Start Creating →
+                  🎮 Play Games
                </Link>
-
                <Link
                  href="/guide"
                  className={css({
                    px: '8',
                    py: '4',
-                    bg: 'white',
-                    color: 'brand.700',
+                    bg: 'rgba(139, 92, 246, 0.2)',
+                    color: 'white',
+                    fontWeight: 'bold',
                    fontSize: 'lg',
-                    fontWeight: 'semibold',
                    rounded: 'xl',
-                    shadow: 'card',
                    border: '2px solid',
-                    borderColor: 'brand.200',
-                    transition: 'all',
+                    borderColor: 'purple.500',
                    _hover: {
-                      borderColor: 'brand.400',
+                      bg: 'rgba(139, 92, 246, 0.3)',
                      transform: 'translateY(-2px)',
                    },
+                    transition: 'all 0.3s ease',
                  })}
                >
-                  📚 Learn Soroban
+                  📚 Learn
+                </Link>
+                <Link
+                  href="/create"
+                  className={css({
+                    px: '8',
+                    py: '4',
+                    bg: 'rgba(139, 92, 246, 0.2)',
+                    color: 'white',
+                    fontWeight: 'bold',
+                    fontSize: 'lg',
+                    rounded: 'xl',
+                    border: '2px solid',
+                    borderColor: 'purple.500',
+                    _hover: {
+                      bg: 'rgba(139, 92, 246, 0.3)',
+                      transform: 'translateY(-2px)',
+                    },
+                    transition: 'all 0.3s ease',
+                  })}
+                >
+                  🎨 Create
                </Link>
              </div>
            </div>
+          </div>
+        </div>

-            {/* Features Grid */}
-            <div
-              className={css({
-                display: 'grid',
-                gridTemplateColumns: { base: '1', md: '3' },
-                gap: '8',
-                mt: '16',
-                w: 'full',
-              })}
-            >
-              <FeatureCard
-                icon="🎨"
-                title="Beautiful Design"
-                description="Vector graphics, color schemes, authentic bead positioning"
+        {/* Color Scheme Showcase */}
+        <div className={container({ maxW: '7xl', px: '4', py: '12' })}>
+          <section className={stack({ gap: '8' })}>
+            <div className={css({ textAlign: 'center' })}>
+              <h2
+                className={css({
+                  fontSize: { base: '2xl', md: '3xl' },
+                  fontWeight: 'bold',
+                  color: 'white',
+                  mb: '3',
+                })}
+              >
+                Beautiful Color Schemes
+              </h2>
+              <p className={css({ color: 'gray.400', fontSize: 'lg' })}>
+                Choose from multiple visual styles to enhance learning
+              </p>
+            </div>
+
+            <div className={grid({ columns: { base: 1, sm: 2, lg: 4 }, gap: '6' })}>
+              <ColorSchemeCard
+                title="Monochrome"
+                description="Classic, minimalist design"
+                colorScheme="monochrome"
+                value={42}
+                beadShape="diamond"
              />
-              <FeatureCard
-                icon="⚡"
-                title="Instant Generation"
-                description="Create PDFs, interactive HTML, PNGs, and SVGs in seconds"
+              <ColorSchemeCard
+                title="Place Value"
+                description="Each column has its own color"
+                colorScheme="place-value"
+                value={789}
+                beadShape="circle"
              />
-              <FeatureCard
-                icon="🎯"
-                title="Educational Focus"
-                description="Perfect for teachers, students, and soroban enthusiasts"
+              <ColorSchemeCard
+                title="Heaven & Earth"
+                description="Distinct heaven and earth beads"
+                colorScheme="heaven-earth"
+                value={156}
+                beadShape="square"
+              />
+              <ColorSchemeCard
+                title="Alternating"
+                description="Alternating column colors"
+                colorScheme="alternating"
+                value={234}
+                beadShape="diamond"
              />
            </div>
+          </section>
+
+          {/* Arcade Games Section */}
+          <section className={stack({ gap: '6', mt: '16' })}>
+            <div className={hstack({ justify: 'space-between', alignItems: 'center' })}>
+              <div>
+                <h2
+                  className={css({
+                    fontSize: { base: '2xl', md: '3xl' },
+                    fontWeight: 'bold',
+                    color: 'white',
+                    mb: '2',
+                  })}
+                >
+                  🕹️ Multiplayer Arcade
+                </h2>
+                <p className={css({ color: 'gray.400', fontSize: 'md' })}>
+                  Compete with friends in real-time soroban games
+                </p>
+              </div>
+              <Link
+                href="/games"
+                className={css({
+                  fontSize: 'md',
+                  color: 'yellow.400',
+                  fontWeight: 'semibold',
+                  _hover: { color: 'yellow.300' },
+                  display: { base: 'none', md: 'block' },
+                })}
+              >
+                View All →
+              </Link>
+            </div>
+            <div className={grid({ columns: { base: 1, sm: 2, lg: 4 }, gap: '5' })}>
+              <GameCard
+                icon="🧠"
+                title="Memory Lightning"
+                description="Memorize soroban numbers"
+                players="1-8 players"
+                tags={['Co-op', 'Competitive']}
+                gradient="linear-gradient(135deg, #667eea 0%, #764ba2 100%)"
+                href="/games"
+              />
+              <GameCard
+                icon="⚔️"
+                title="Matching Pairs"
+                description="Turn-based card battles"
+                players="1-4 players"
+                tags={['Pattern Recognition']}
+                gradient="linear-gradient(135deg, #f093fb 0%, #f5576c 100%)"
+                href="/games"
+              />
+              <GameCard
+                icon="🏁"
+                title="Speed Race"
+                description="Race AI with complements"
+                players="1-4 players + AI"
+                tags={['Practice', 'Sprint', 'Survival']}
+                gradient="linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)"
+                href="/games"
+              />
+              <GameCard
+                icon="🔢"
+                title="Card Sorting"
+                description="Arrange cards visually"
+                players="Solo challenge"
+                tags={['Visual Literacy']}
+                gradient="linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)"
+                href="/games"
+              />
+            </div>
+          </section>
+
+          {/* Interactive Learning & Flashcard Creator */}
+          <div className={grid({ columns: { base: 1, lg: 2 }, gap: '8', mt: '16' })}>
+            <FeaturePanel
+              icon="📚"
+              title="Interactive Learning"
+              description="Master soroban through hands-on guided tutorials"
+              features={[
+                'Visual tutorials on reading bead positions',
+                'Step-by-step arithmetic operations',
+                'Interactive exercises with instant feedback',
+              ]}
+              ctaText="Start Learning →"
+              ctaHref="/guide"
+              accentColor="purple"
+            />
+            <FeaturePanel
+              icon="🎨"
+              title="Flashcard Creator"
+              description="Design beautiful soroban flashcards for any purpose"
+              features={[
+                'Multiple export formats: PDF, PNG, SVG, HTML',
+                'Custom bead shapes, colors, and layouts',
+                'All paper sizes: A3, A4, A5, US Letter',
+              ]}
+              ctaText="Create Flashcards →"
+              ctaHref="/create"
+              accentColor="blue"
+            />
          </div>
-        </main>
+
+          {/* Stats Banner */}
+          <section
+            className={css({
+              bg: 'linear-gradient(135deg, rgba(139, 92, 246, 0.2) 0%, rgba(59, 130, 246, 0.2) 100%)',
+              rounded: '2xl',
+              p: '10',
+              mt: '16',
+              border: '2px solid',
+              borderColor: 'purple.500/20',
+            })}
+          >
+            <h2
+              className={css({
+                fontSize: { base: 'xl', md: '2xl' },
+                fontWeight: 'bold',
+                mb: '8',
+                textAlign: 'center',
+                color: 'white',
+              })}
+            >
+              Complete Soroban Learning Platform
+            </h2>
+            <div className={grid({ columns: { base: 2, md: 4 }, gap: '8', textAlign: 'center' })}>
+              <StatItem number="4" label="Arcade Games" />
+              <StatItem number="8" label="Max Players" />
+              <StatItem number="3" label="Learning Modes" />
+              <StatItem number="4+" label="Export Formats" />
+            </div>
+          </section>
+        </div>
      </div>
    </PageWithNav>
  )
 }

-function FeatureCard({
-  icon,
+function ColorSchemeCard({
  title,
  description,
+  colorScheme,
+  value,
+  beadShape,
 }: {
-  icon: string
  title: string
  description: string
+  colorScheme: 'monochrome' | 'place-value' | 'heaven-earth' | 'alternating'
+  value: number
+  beadShape: 'diamond' | 'circle' | 'square'
 }) {
  return (
    <div
      className={css({
-        p: '8',
-        bg: 'white',
-        rounded: '2xl',
-        shadow: 'card',
-        textAlign: 'center',
-        transition: 'all',
+        bg: 'rgba(0, 0, 0, 0.4)',
+        rounded: 'xl',
+        p: '6',
+        border: '2px solid',
+        borderColor: 'gray.700',
+        transition: 'all 0.3s ease',
        _hover: {
+          borderColor: 'purple.500',
          transform: 'translateY(-4px)',
-          shadow: 'modal',
+          boxShadow: '0 20px 40px rgba(139, 92, 246, 0.2)',
        },
      })}
    >
-      <div
-        className={css({
-          fontSize: '4xl',
-          mb: '4',
-        })}
-      >
-        {icon}
-      </div>
      <h3
        className={css({
-          fontSize: 'xl',
+          fontSize: 'lg',
          fontWeight: 'bold',
-          color: 'gray.900',
-          mb: '3',
+          color: 'white',
+          mb: '2',
        })}
      >
        {title}
      </h3>
-      <p
+      <p className={css({ fontSize: 'sm', color: 'gray.400', mb: '4' })}>{description}</p>
+      <div
        className={css({
-          color: 'gray.600',
-          lineHeight: 'relaxed',
+          display: 'flex',
+          justifyContent: 'center',
+          p: '4',
+          bg: 'rgba(255, 255, 255, 0.05)',
+          rounded: 'lg',
        })}
      >
-        {description}
-      </p>
+        <AbacusReact
+          value={value}
+          columns={3}
+          beadShape={beadShape}
+          colorScheme={colorScheme}
+          hideInactiveBeads={false}
+        />
+      </div>
+    </div>
+  )
+}
+
+function GameCard({
+  icon,
+  title,
+  description,
+  players,
+  tags,
+  gradient,
+  href,
+}: {
+  icon: string
+  title: string
+  description: string
+  players: string
+  tags: string[]
+  gradient: string
+  href: string
+}) {
+  return (
+    <Link href={href}>
+      <div
+        className={css({
+          background: gradient,
+          rounded: 'xl',
+          p: '6',
+          shadow: 'lg',
+          transition: 'all 0.3s ease',
+          cursor: 'pointer',
+          _hover: {
+            transform: 'translateY(-6px) scale(1.02)',
+            shadow: '0 25px 50px rgba(0, 0, 0, 0.3)',
+          },
+        })}
+      >
+        <div className={css({ fontSize: '3xl', mb: '3' })}>{icon}</div>
+        <h3 className={css({ fontSize: 'lg', fontWeight: 'bold', color: 'white', mb: '2' })}>
+          {title}
+        </h3>
+        <p className={css({ fontSize: 'sm', color: 'rgba(255, 255, 255, 0.9)', mb: '2' })}>
+          {description}
+        </p>
+        <p className={css({ fontSize: 'xs', color: 'rgba(255, 255, 255, 0.7)', mb: '3' })}>
+          {players}
+        </p>
+        <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: 'white',
+                rounded: 'full',
+                fontWeight: 'semibold',
+              })}
+            >
+              {tag}
+            </span>
+          ))}
+        </div>
+      </div>
+    </Link>
+  )
+}
+
+function FeaturePanel({
+  icon,
+  title,
+  description,
+  features,
+  ctaText,
+  ctaHref,
+  accentColor,
+}: {
+  icon: string
+  title: string
+  description: string
+  features: string[]
+  ctaText: string
+  ctaHref: string
+  accentColor: 'purple' | 'blue'
+}) {
+  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',
+        borderColor,
+      })}
+    >
+      <div className={hstack({ gap: '3', mb: '4' })}>
+        <span className={css({ fontSize: '3xl' })}>{icon}</span>
+        <h2 className={css({ fontSize: '2xl', fontWeight: 'bold', color: 'white' })}>{title}</h2>
+      </div>
+      <p className={css({ fontSize: 'md', color: 'gray.300', mb: '6' })}>{description}</p>
+      <div className={stack({ gap: '3', mb: '6' })}>
+        {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>
+        ))}
+      </div>
+      <Link
+        href={ctaHref}
+        className={css({
+          display: 'block',
+          textAlign: 'center',
+          py: '3',
+          px: '6',
+          bg: bgColor,
+          color: 'white',
+          fontWeight: 'bold',
+          rounded: 'lg',
+          border: '2px solid',
+          borderColor,
+          _hover: { bg: hoverBg },
+          transition: 'all 0.2s ease',
+        })}
+      >
+        {ctaText}
+      </Link>
+    </div>
+  )
+}
+
+function StatItem({ number, label }: { number: string; label: string }) {
+  return (
+    <div>
+      <div
+        className={css({
+          fontSize: { base: '3xl', md: '4xl' },
+          fontWeight: 'bold',
+          mb: '2',
+          background: 'linear-gradient(135deg, #fbbf24, #f59e0b)',
+          backgroundClip: 'text',
+          color: 'transparent',
+        })}
+      >
+        {number}
+      </div>
+      <div className={css({ fontSize: 'sm', color: 'gray.300' })}>{label}</div>
    </div>
  )
 }
--- a/apps/web/src/arcade-games/card-sorting/Provider.tsx
+++ b/apps/web/src/arcade-games/card-sorting/Provider.tsx
@@ -1,14 +1,6 @@
 'use client'

-import {
-  type ReactNode,
-  useCallback,
-  useEffect,
-  useMemo,
-  createContext,
-  useContext,
-  useState,
-} from 'react'
+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'
@@ -24,6 +16,7 @@ interface CardSortingContextValue {
  // Actions
  startGame: () => void
  placeCard: (cardId: string, position: number) => void
+  insertCard: (cardId: string, insertPosition: number) => void
  removeCard: (position: number) => void
  checkSolution: () => void
  revealNumbers: () => void
@@ -107,10 +100,18 @@ function applyMoveOptimistically(state: CardSortingState, move: GameMove): CardS
      const card = state.availableCards.find((c) => c.id === cardId)
      if (!card) return state

-      // Simple insert logic (server will do proper compaction)
+      // Simple replacement (can leave gaps)
      const newPlaced = [...state.placedCards]
+      const replacedCard = newPlaced[position]
      newPlaced[position] = card
-      const newAvailable = state.availableCards.filter((c) => c.id !== cardId)
+
+      // Remove card from available
+      let newAvailable = state.availableCards.filter((c) => c.id !== cardId)
+
+      // If slot was occupied, add replaced card back to available
+      if (replacedCard) {
+        newAvailable = [...newAvailable, replacedCard]
+      }

      return {
        ...state,
@@ -119,6 +120,60 @@ function applyMoveOptimistically(state: CardSortingState, move: GameMove): CardS
      }
    }

+    case 'INSERT_CARD': {
+      const { cardId, insertPosition } = typedMove.data
+      const card = state.availableCards.find((c) => c.id === cardId)
+      if (!card) return state
+
+      // Insert with shift and compact (no gaps)
+      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]
+          } 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]
+          }
+        }
+      }
+
+      // Place new card at insert position
+      newPlaced[insertPosition] = card
+
+      // Compact to remove gaps
+      const compacted: SortingCard[] = []
+      for (const c of newPlaced) {
+        if (c !== null) {
+          compacted.push(c)
+        }
+      }
+
+      // Fill final array (no gaps)
+      const finalPlaced = new Array(state.cardCount).fill(null)
+      for (let i = 0; i < Math.min(compacted.length, state.cardCount); i++) {
+        finalPlaced[i] = compacted[i]
+      }
+
+      // Remove from available
+      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]
+      }
+
+      return {
+        ...state,
+        availableCards: newAvailable,
+        placedCards: finalPlaced,
+      }
+    }
+
    case 'REMOVE_CARD': {
      const { position } = typedMove.data
      const card = state.placedCards[position]
@@ -353,6 +408,23 @@ export function CardSortingProvider({ children }: { children: ReactNode }) {
    [localPlayerId, sendMove, viewerId]
  )

+  const insertCard = useCallback(
+    (cardId: string, insertPosition: number) => {
+      if (!localPlayerId) return
+
+      sendMove({
+        type: 'INSERT_CARD',
+        playerId: localPlayerId,
+        userId: viewerId || '',
+        data: { cardId, insertPosition },
+      })
+
+      // Clear selection
+      setSelectedCardId(null)
+    },
+    [localPlayerId, sendMove, viewerId]
+  )
+
  const removeCard = useCallback(
    (position: number) => {
      if (!localPlayerId) return
@@ -457,6 +529,7 @@ export function CardSortingProvider({ children }: { children: ReactNode }) {
    // Actions
    startGame,
    placeCard,
+    insertCard,
    removeCard,
    checkSolution,
    revealNumbers,
--- a/apps/web/src/arcade-games/card-sorting/Validator.ts
+++ b/apps/web/src/arcade-games/card-sorting/Validator.ts
@@ -5,7 +5,7 @@ import type {
 } from '@/lib/arcade/validation/types'
 import type { CardSortingConfig, CardSortingMove, CardSortingState } from './types'
 import { calculateScore } from './utils/scoringAlgorithm'
-import { placeCardAtPosition, removeCardAtPosition } from './utils/validation'
+import { placeCardAtPosition, insertCardAtPosition, removeCardAtPosition } from './utils/validation'

 export class CardSortingValidator implements GameValidator<CardSortingState, CardSortingMove> {
  validateMove(
@@ -18,6 +18,8 @@ export class CardSortingValidator implements GameValidator<CardSortingState, Car
        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 'REVEAL_NUMBERS':
@@ -113,16 +115,70 @@ export class CardSortingValidator implements GameValidator<CardSortingState, Car
      }
    }

-    // Place the card using utility function
-    const { placedCards: newPlaced } = placeCardAtPosition(
+    // 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)
+
+    // If slot was occupied, add replaced card back to available
+    if (replacedCard) {
+      newAvailable = [...newAvailable, replacedCard]
+    }
+
+    return {
+      valid: true,
+      newState: {
+        ...state,
+        availableCards: newAvailable,
+        placedCards: newPlaced,
+      },
+    }
+  }
+
+  private validateInsertCard(
+    state: CardSortingState,
+    cardId: string,
+    insertPosition: number
+  ): ValidationResult {
+    // Must be in playing phase
+    if (state.gamePhase !== 'playing') {
+      return { valid: false, error: 'Can only insert cards during playing phase' }
+    }
+
+    // Card must exist in availableCards
+    const card = state.availableCards.find((c) => c.id === cardId)
+    if (!card) {
+      return { valid: false, error: 'Card not found in available cards' }
+    }
+
+    // Position must be valid (0 to cardCount, inclusive - can insert after last position)
+    if (insertPosition < 0 || insertPosition > state.cardCount) {
+      return {
+        valid: false,
+        error: `Invalid insert position: must be between 0 and ${state.cardCount}`,
+      }
+    }
+
+    // Insert the card using utility function (with shift and compact)
+    const { placedCards: newPlaced, excessCards } = insertCardAtPosition(
+      state.placedCards,
+      card,
+      insertPosition,
      state.cardCount
    )

-    // Remove from available
-    const newAvailable = state.availableCards.filter((c) => c.id !== cardId)
+    // Remove card from available
+    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]
+    }

    return {
      valid: true,
--- a/apps/web/src/arcade-games/card-sorting/components/PlayingPhase.tsx
+++ b/apps/web/src/arcade-games/card-sorting/components/PlayingPhase.tsx
@@ -2,6 +2,7 @@

 import { css } from '../../../../styled-system/css'
 import { useCardSorting } from '../Provider'
+import { useState, useEffect } from 'react'

 export function PlayingPhase() {
  const {
@@ -9,6 +10,7 @@ export function PlayingPhase() {
    selectedCardId,
    selectCard,
    placeCard,
+    insertCard,
    removeCard,
    checkSolution,
    revealNumbers,
@@ -18,6 +20,31 @@ export function PlayingPhase() {
    elapsedTime,
  } = useCardSorting()

+  // Status message (mimics Python updateSortingStatus)
+  const [statusMessage, setStatusMessage] = useState(
+    `Arrange the ${state.cardCount} cards in ascending order (smallest to largest)`
+  )
+
+  // Update status message based on state
+  useEffect(() => {
+    if (state.gamePhase !== 'playing') return
+
+    if (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.`
+        )
+      }
+    } else if (placedCount === state.cardCount) {
+      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.`
+      )
+    }
+  }, [selectedCardId, placedCount, state.cardCount, state.gamePhase, state.availableCards])
+
  // Format time display
  const formatTime = (seconds: number) => {
    const m = Math.floor(seconds / 60)
@@ -32,6 +59,7 @@ export function PlayingPhase() {
    return {
      background: `hsl(220, 8%, ${lightness}%)`,
      color: lightness > 60 ? '#2c3e50' : '#ffffff',
+      borderColor: lightness > 60 ? '#2c5f76' : 'rgba(255,255,255,0.4)',
    }
  }

@@ -45,16 +73,29 @@ export function PlayingPhase() {

  const handleSlotClick = (position: number) => {
    if (!selectedCardId) {
-      // No card selected - remove card if slot is occupied
+      // 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)
+        // Auto-select the card that was moved back
+        selectCard(cardToMove.id)
+      } else {
+        setStatusMessage('Select a card first, or click a placed card to move it back.')
      }
    } else {
-      // Card is selected - place it
+      // Card is selected - place it (replaces existing card if any)
      placeCard(selectedCardId, position)
    }
  }

+  const handleInsertClick = (insertPosition: number) => {
+    if (!selectedCardId) {
+      setStatusMessage('Please select a card first, then click where to insert it.')
+      return
+    }
+    insertCard(selectedCardId, insertPosition)
+  }
+
  return (
    <div
      className={css({
@@ -64,6 +105,22 @@ export function PlayingPhase() {
        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',
+          flexShrink: 0,
+        })}
+      >
+        {statusMessage}
+      </div>
+
      {/* Header with timer and actions */}
      <div
        className={css({
@@ -207,13 +264,15 @@ export function PlayingPhase() {
          </h3>
          <div
            className={css({
-              display: 'grid',
-              gridTemplateColumns: {
-                base: '1',
-                sm: '2',
-                md: '3',
-              },
-              gap: '0.75rem',
+              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) => (
@@ -221,39 +280,65 @@ export function PlayingPhase() {
                key={card.id}
                onClick={() => handleCardClick(card.id)}
                className={css({
-                  padding: '0.5rem',
+                  width: '90px',
+                  height: '90px',
+                  padding: '8px',
                  border: '2px solid',
-                  borderColor: selectedCardId === card.id ? 'blue.500' : 'gray.300',
-                  borderRadius: '0.5rem',
-                  background: selectedCardId === card.id ? 'blue.50' : 'white',
+                  borderColor: selectedCardId === card.id ? '#1976d2' : 'transparent',
+                  borderRadius: '8px',
+                  background: selectedCardId === card.id ? '#e3f2fd' : 'white',
                  cursor: 'pointer',
-                  transition: 'all 0.2s',
-                  transform: selectedCardId === card.id ? 'scale(1.05)' : 'scale(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: {
-                    transform: 'scale(1.05)',
-                    borderColor: 'blue.500',
-                    boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
+                    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)',
+                      }
+                    : undefined
+                }
              >
                <div
                  dangerouslySetInnerHTML={{ __html: card.svgContent }}
                  className={css({
-                    width: '100%',
+                    width: '74px',
+                    height: '74px',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    overflow: 'hidden',
                    '& svg': {
                      width: '100%',
-                      height: 'auto',
+                      height: '100%',
+                      display: 'block',
                    },
                  })}
                />
                {state.numbersRevealed && (
                  <div
                    className={css({
-                      textAlign: 'center',
-                      marginTop: '0.5rem',
-                      fontSize: 'lg',
+                      position: 'absolute',
+                      top: '5px',
+                      right: '5px',
+                      background: '#ffc107',
+                      color: '#333',
+                      borderRadius: '4px',
+                      padding: '2px 8px',
+                      fontSize: '14px',
                      fontWeight: 'bold',
-                      color: 'gray.700',
                    })}
                  >
                    {card.number}
@@ -264,7 +349,7 @@ export function PlayingPhase() {
          </div>
        </div>

-        {/* Position slots */}
+        {/* Position slots with insert buttons */}
        <div className={css({ flex: 2, minWidth: '300px' })}>
          <h3
            className={css({
@@ -279,90 +364,170 @@ export function PlayingPhase() {
          <div
            className={css({
              display: 'flex',
-              flexDirection: 'column',
-              gap: '0.5rem',
+              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 */}
+            <button
+              type="button"
+              onClick={() => handleInsertClick(0)}
+              disabled={!selectedCardId}
+              className={css({
+                width: '32px',
+                height: '50px',
+                background: selectedCardId ? '#1976d2' : '#2c5f76',
+                color: 'white',
+                border: 'none',
+                borderRadius: '20px',
+                fontSize: '24px',
+                fontWeight: 'bold',
+                cursor: selectedCardId ? 'pointer' : 'default',
+                opacity: selectedCardId ? 1 : 0.3,
+                transition: 'all 0.2s',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                _hover: {
+                  opacity: 1,
+                  background: '#1976d2',
+                  transform: selectedCardId ? 'scale(1.1)' : 'none',
+                },
+              })}
+            >
+              +
+            </button>
+
+            {/* Render each position slot followed by an insert button */}
            {state.placedCards.map((card, index) => {
              const gradientStyle = getSlotGradient(index, state.cardCount)
+              const isEmpty = card === null

              return (
-                <div
-                  key={index}
-                  onClick={() => handleSlotClick(index)}
-                  className={css({
-                    padding: '1rem',
-                    borderRadius: '0.5rem',
-                    border: '2px solid',
-                    borderColor:
-                      gradientStyle.color === '#ffffff' ? 'rgba(255,255,255,0.4)' : '#2c5f76',
-                    cursor: 'pointer',
-                    transition: 'all 0.2s',
-                    display: 'flex',
-                    alignItems: 'center',
-                    gap: '1rem',
-                    minHeight: '80px',
-                    _hover: {
-                      transform: 'translateY(-2px)',
-                      boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
-                    },
-                  })}
-                  style={gradientStyle}
-                >
+                <>
+                  {/* Position slot */}
                  <div
+                    key={`slot-${index}`}
+                    onClick={() => handleSlotClick(index)}
                    className={css({
-                      fontSize: 'sm',
-                      fontWeight: 'bold',
-                      opacity: 0.7,
+                      width: '90px',
+                      height: '110px',
+                      padding: '0.5rem',
+                      borderRadius: '8px',
+                      border: '2px solid',
+                      cursor: 'pointer',
+                      transition: 'all 0.2s',
+                      display: 'flex',
+                      flexDirection: 'column',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                      gap: '0.25rem',
+                      position: 'relative',
+                      _hover: {
+                        transform: selectedCardId && isEmpty ? 'scale(1.05)' : 'none',
+                        boxShadow:
+                          selectedCardId && isEmpty ? '0 4px 12px rgba(0,0,0,0.15)' : 'none',
+                      },
                    })}
+                    style={
+                      isEmpty
+                        ? {
+                            ...gradientStyle,
+                            // Active state: add slight glow when card is selected
+                            boxShadow: selectedCardId
+                              ? '0 0 0 2px #1976d2, 0 2px 8px rgba(25, 118, 210, 0.3)'
+                              : 'none',
+                          }
+                        : {
+                            background: '#fff',
+                            color: '#333',
+                            borderColor: '#2c5f76',
+                          }
+                    }
                  >
-                    #{index + 1}
-                  </div>
-                  {card ? (
-                    <div
-                      className={css({
-                        flex: 1,
-                        display: 'flex',
-                        alignItems: 'center',
-                        gap: '1rem',
-                      })}
-                    >
-                      <div
-                        dangerouslySetInnerHTML={{
-                          __html: card.svgContent,
-                        }}
-                        className={css({
-                          width: '120px',
-                          '& svg': {
-                            width: '100%',
-                            height: 'auto',
-                          },
-                        })}
-                      />
-                      {state.numbersRevealed && (
+                    {card ? (
+                      <>
+                        <div
+                          dangerouslySetInnerHTML={{
+                            __html: card.svgContent,
+                          }}
+                          className={css({
+                            width: '70px',
+                            height: '70px',
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            overflow: 'hidden',
+                            margin: '0 auto',
+                            '& svg': {
+                              width: '100%',
+                              height: '100%',
+                              display: 'block',
+                            },
+                          })}
+                        />
                        <div
                          className={css({
-                            fontSize: 'xl',
-                            fontWeight: 'bold',
+                            fontSize: 'xs',
+                            opacity: 0.7,
+                            fontStyle: 'italic',
+                            textAlign: 'center',
                          })}
                        >
-                          {card.number}
+                          ← Click to move back
                        </div>
-                      )}
-                    </div>
-                  ) : (
-                    <div
-                      className={css({
-                        flex: 1,
-                        fontSize: 'sm',
-                        opacity: 0.5,
-                        fontStyle: 'italic',
-                      })}
-                    >
-                      {selectedCardId ? 'Click to place card' : 'Empty'}
-                    </div>
-                  )}
-                </div>
+                      </>
+                    ) : (
+                      <div
+                        className={css({
+                          fontSize: 'sm',
+                          fontStyle: 'italic',
+                          textAlign: 'center',
+                        })}
+                        style={{ color: gradientStyle.color }}
+                      >
+                        {index === 0 ? 'Smallest' : index === state.cardCount - 1 ? 'Largest' : ''}
+                      </div>
+                    )}
+                  </div>
+
+                  {/* Insert button after this position */}
+                  <button
+                    key={`insert-${index + 1}`}
+                    type="button"
+                    onClick={() => handleInsertClick(index + 1)}
+                    disabled={!selectedCardId}
+                    className={css({
+                      width: '32px',
+                      height: '50px',
+                      background: selectedCardId ? '#1976d2' : '#2c5f76',
+                      color: 'white',
+                      border: 'none',
+                      borderRadius: '20px',
+                      fontSize: '24px',
+                      fontWeight: 'bold',
+                      cursor: selectedCardId ? 'pointer' : 'default',
+                      opacity: selectedCardId ? 1 : 0.3,
+                      transition: 'all 0.2s',
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                      _hover: {
+                        opacity: 1,
+                        background: '#1976d2',
+                        transform: selectedCardId ? 'scale(1.1)' : 'none',
+                      },
+                    })}
+                  >
+                    +
+                  </button>
+                </>
              )
            })}
          </div>
--- a/apps/web/src/arcade-games/card-sorting/types.ts
+++ b/apps/web/src/arcade-games/card-sorting/types.ts
@@ -119,6 +119,16 @@ export type CardSortingMove =
        position: number // Which slot (0-indexed)
      }
    }
+  | {
+      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)
+      }
+    }
  | {
      type: 'REMOVE_CARD'
      playerId: string
--- a/apps/web/src/arcade-games/card-sorting/utils/validation.ts
+++ b/apps/web/src/arcade-games/card-sorting/utils/validation.ts
@@ -1,13 +1,30 @@
 import type { SortingCard } from '../types'

 /**
- * Place a card at a specific position, shifting existing cards
- * Returns new placedCards array with no gaps
+ * Place a card at a specific position (simple replacement, can leave gaps)
+ * This is used when clicking directly on a slot
+ * Returns old card if slot was occupied
 */
 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 }
+}
+
+/**
+ * Insert a card at a specific position, shifting existing cards and compacting
+ * This is used when clicking a + (insert) button
+ * Returns new placedCards array with no gaps
+ */
+export function insertCardAtPosition(
+  placedCards: (SortingCard | null)[],
+  cardToPlace: SortingCard,
+  insertPosition: number,
  totalSlots: number
 ): { placedCards: (SortingCard | null)[]; excessCards: SortingCard[] } {
  // Create working array
@@ -16,20 +33,23 @@ export function placeCardAtPosition(
  // Copy existing cards, shifting those at/after position
  for (let i = 0; i < placedCards.length; i++) {
    if (placedCards[i] !== null) {
-      if (i < position) {
+      if (i < insertPosition) {
        // Before insert position - stays same
        newPlaced[i] = placedCards[i]
      } else {
        // At or after position - shift right
        if (i + 1 < totalSlots) {
          newPlaced[i + 1] = placedCards[i]
+        } else {
+          // Card would fall off, will be handled by compaction
+          newPlaced[i + 1] = placedCards[i]
        }
      }
    }
  }

-  // Place new card
-  newPlaced[position] = cardToPlace
+  // Place new card at insert position
+  newPlaced[insertPosition] = cardToPlace

  // Compact to remove gaps (shift all cards left)
  const compacted: SortingCard[] = []
@@ -39,13 +59,13 @@ export function placeCardAtPosition(
    }
  }

-  // Fill final array
+  // Fill final array with compacted cards (no gaps)
  const result = new Array(totalSlots).fill(null)
  for (let i = 0; i < Math.min(compacted.length, totalSlots); i++) {
    result[i] = compacted[i]
  }

-  // Any excess cards are returned (shouldn't happen)
+  // Any excess cards are returned
  const excess = compacted.slice(totalSlots)

  return { placedCards: result, excessCards: excess }
--- a/apps/web/src/components/GameSelector.tsx
+++ b/apps/web/src/components/GameSelector.tsx
@@ -31,7 +31,7 @@ function getAllGameConfigs() {
      maxPlayers: gameDef.manifest.maxPlayers,
      description: gameDef.manifest.description,
      longDescription: gameDef.manifest.longDescription,
-      url: `/arcade/room?game=${gameDef.manifest.name}`, // Registry games load in room
+      url: '/arcade', // Arcade page handles game selection through UI
      icon: gameDef.manifest.icon,
      chips: gameDef.manifest.chips,
      color: gameDef.manifest.color,
--- a/apps/web/src/components/nav/AddPlayerButton.tsx
+++ b/apps/web/src/components/nav/AddPlayerButton.tsx
@@ -80,7 +80,7 @@ export function AddPlayerButton({
          })
          // Close popover and navigate to room to choose game
          setShowPopover(false)
-          router.push('/arcade/room')
+          router.push('/arcade')
        },
        onError: (error) => {
          console.error('Failed to create room:', error)
@@ -111,7 +111,7 @@ export function AddPlayerButton({
            }
            // Close popover and navigate to room
            setShowPopover(false)
-            router.push('/arcade/room')
+            router.push('/arcade')
          },
        }
      )
--- a/apps/web/src/components/nav/ModerationNotifications.tsx
+++ b/apps/web/src/components/nav/ModerationNotifications.tsx
@@ -833,7 +833,7 @@ export function ModerationNotifications({
                  // Close the modal
                  onClose()
                  // Navigate to the room
-                  router.push('/arcade/room')
+                  router.push('/arcade')
                } catch (error) {
                  console.error('Failed to join room:', error)
                  showError(
--- a/apps/web/src/components/nav/PendingInvitations.tsx
+++ b/apps/web/src/components/nav/PendingInvitations.tsx
@@ -68,7 +68,7 @@ export function PendingInvitations({ onInvitationChange, currentRoomId }: Pendin
      // Join the room
      await joinRoom({ roomId: invitation.roomId })
      // Navigate to the room
-      router.push('/arcade/room')
+      router.push('/arcade')
      // Refresh invitations
      await fetchInvitations()
      onInvitationChange?.()
--- a/apps/web/src/socket-server.ts
+++ b/apps/web/src/socket-server.ts
@@ -81,7 +81,7 @@ export function initializeSocketServer(httpServer: HTTPServer) {
              session = await createArcadeSession({
                userId,
                gameName: room.gameName as GameName,
-                gameUrl: '/arcade/room',
+                gameUrl: '/arcade',
                initialState,
                activePlayers: roomPlayerIds, // Include all room members' active players
                roomId: room.id,
@@ -173,7 +173,7 @@ export function initializeSocketServer(httpServer: HTTPServer) {
            await createArcadeSession({
              userId: data.userId,
              gameName: 'matching',
-              gameUrl: '/arcade/room', // Room-based sessions use /arcade/room
+              gameUrl: '/arcade', // Room-based sessions use /arcade
              initialState,
              activePlayers,
              roomId: room.id,
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "soroban-monorepo",
-  "version": "4.10.1",
+  "version": "4.13.0",
  "private": true,
  "description": "Beautiful Soroban Flashcard Generator - Monorepo",
  "workspaces": [
Author	SHA1	Message	Date
semantic-release-bot	a126466037	chore(release): 4.13.0 [skip ci] ## [4.13.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.12.0...v4.13.0) (2025-10-18) ### Features * make home page abacus interactive with audio ([`9a53d7e`](`9a53d7e5db`))	2025-10-18 22:45:39 +00:00
Thomas Hallock	9a53d7e5db	feat: make home page abacus interactive with audio Enhanced the hero abacus to be a fully interactive showcase: - Increased size from default to 2.2x scale factor - Enabled interactive mode (click beads to change value) - Enabled smooth animations for bead movements - Enabled audio feedback with volume at 0.4 - Added live value display below abacus in large golden text - Added instructional text "Click the beads to interact!" - Shows place value numbers on each column The abacus now serves as a "try it now" demo right on the landing page. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-10-18 17:44:40 -05:00
semantic-release-bot	d2d8f7740f	chore(release): 4.12.0 [skip ci] ## [4.12.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.11.1...v4.12.0) (2025-10-18) ### Features * redesign home page with component showcase ([`29af265`](`29af265958`))	2025-10-18 22:44:06 +00:00
Thomas Hallock	29af265958	feat: redesign home page with component showcase Replaced outdated landing page with component-based "storybook" design: - Large featured AbacusReact component (1,234,567 with place-value colors) - Color scheme showcase with 4 actual AbacusReact instances - Dark, fancy theme with purple gradients and golden accents - All game links now point to /games instead of /arcade - Hover animations and visual polish throughout - Dot pattern background texture 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-10-18 17:42:55 -05:00
semantic-release-bot	291bcc581d	chore(release): 4.11.1 [skip ci] ## [4.11.1](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.11.0...v4.11.1) (2025-10-18) ### Bug Fixes * card-sorting: center AbacusReact SVGs in card tiles ([`26edec1`](`26edec1bbf`))	2025-10-18 22:41:08 +00:00
Thomas Hallock	26edec1bbf	fix(card-sorting): center AbacusReact SVGs in card tiles Improve centering of abacus SVGs within both available cards and position slots. Issue: AbacusReact SVGs were not properly centered within their card containers, appearing off-center or misaligned. Fix: - Available cards: Added maxHeight: '100%' constraint and display: 'block' with margin: '0 auto' to SVG styling - Position slots: Changed container to use flex: 1 and proper flex centering, constrained SVG to maxWidth: '70px' with centering styles Changes: - Available card SVG container: Added display flex with center alignment - Available card SVG: maxHeight: '100%', display: 'block', margin: '0 auto' - Position slot SVG container: width: '100%', flex: 1, flex centering - Position slot SVG: maxWidth: '70px', maxHeight: '100%', display: 'block', margin: '0 auto' Now AbacusReact SVGs render centered within their card tiles regardless of the actual SVG dimensions. src/arcade-games/card-sorting/components/PlayingPhase.tsx:314-330,457-475 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-10-18 17:40:03 -05:00
semantic-release-bot	da4fdc90e0	chore(release): 4.11.0 [skip ci] ## [4.11.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.10.6...v4.11.0) (2025-10-18) ### Features * home: redesign home page to showcase complete platform ([`ee6c4f2`](`ee6c4f2f4f`))	2025-10-18 22:34:07 +00:00
Thomas Hallock	ee6c4f2f4f	feat(home): redesign home page to showcase complete platform Replace outdated "flashcard generator" landing page with comprehensive platform showcase highlighting all three pillars: arcade games, interactive learning, and flashcard creation. New Home Page Structure: - Compact hero with 3 CTAs: Play Games, Learn, Create - 4 arcade game cards with player counts and mode tags - Two-column feature sections for Learning & Flashcards - Multiplayer features grid (4 cards) - Stats banner: 4 games, 8 max players, 3 learning modes, 4+ formats Visual Design: - Smaller, denser components to fit more content - Information-rich showcase vs marketing fluff - Purple gradient hero matching guide branding - Responsive grid layouts for all screen sizes Result: Home page now accurately represents the full platform: multiplayer arcade games + interactive tutorials + flashcard tools. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-10-18 17:33:01 -05:00
semantic-release-bot	9b9f0cdbcb	chore(release): 4.10.6 [skip ci] ## [4.10.6](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.10.5...v4.10.6) (2025-10-18) ### Bug Fixes * card-sorting: position slots flow horizontally with wrap ([`e14ffe4`](`e14ffe44d6`))	2025-10-18 22:24:03 +00:00
Thomas Hallock	e14ffe44d6	fix(card-sorting): position slots flow horizontally with wrap Fix position slots to match Python original - they should flow horizontally and wrap, not stack vertically. Before: - Container: display: flex, flexDirection: 'column' (vertical stack) - Each slot + insert button pair wrapped in a div - One slot per line with insert button below it After (matching Python lines 3101-3111): - Container: display: flex, flexWrap: 'wrap' (horizontal flow) - Slots and insert buttons flow together as siblings - Wraps naturally based on container width - Dashed border container with semi-transparent background Changes: - Position slots container: flex-wrap instead of flex-direction: column - Removed wrapper div around slot+button pairs - Added React keys to slots and buttons - Added container styling (padding, background, border) Now matches the Python original where all slots and + buttons flow together horizontally and wrap as needed. src/arcade-games/card-sorting/components/PlayingPhase.tsx:362-524 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-10-18 17:22:56 -05:00
semantic-release-bot	d5bc0bb27c	chore(release): 4.10.5 [skip ci] ## [4.10.5](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.10.4...v4.10.5) (2025-10-18) ### Code Refactoring * arcade: merge /arcade/room into /arcade route ([`0790074`](`0790074ffc`))	2025-10-18 22:11:17 +00:00
Thomas Hallock	0790074ffc	refactor(arcade): merge /arcade/room into /arcade route Simplify arcade routing by moving room page to main arcade route. The /arcade route now handles both game selection and gameplay, eliminating the need for a separate /arcade/room route. Changes: - Move /arcade/room/page.tsx → /arcade/page.tsx - Update import paths for styled-system (room/ → arcade/) - Remove legacy GAMES_CONFIG handling (now registry-only) - Delete obsolete EnhancedChampionArena component Result: - Users navigate directly to /arcade for all arcade features - Game selection UI shows when no game selected in room - Selected game renders when room has gameName set - Simpler, more intuitive URL structure 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-10-18 17:10:10 -05:00
semantic-release-bot	1a44daf2ce	chore(release): 4.10.4 [skip ci] ## [4.10.4](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.10.3...v4.10.4) (2025-10-18) ### Bug Fixes * card-sorting: match Python card layout with flex wrap ([`9679d68`](`9679d68154`))	2025-10-18 21:35:53 +00:00
Thomas Hallock	9679d68154	fix(card-sorting): match Python card layout with flex wrap Fix available cards layout to match the Python original implementation. Before: - Grid layout with responsive columns (1/2/3 cols) - Cards stretched to fill grid cells - Each card on its own line on mobile After (matching Python web_generator.py lines 3077-3087): - Flex container with wrap - Fixed 90px x 90px card size - Cards flow naturally and wrap based on container width - Dashed border container with semi-transparent background - Revealed numbers positioned absolutely in top-right corner - Matching hover/selection animations from original Visual Changes: - Container: flex wrap, centered, dashed border, rgba background - Cards: 90px x 90px fixed size - Revealed numbers: absolute positioned badge (top-right) - Selection state: scale(1.1), blue border, blue background - Hover: translateY(-5px) lift effect src/arcade-games/card-sorting/components/PlayingPhase.tsx:265-348 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-10-18 16:34:50 -05:00
semantic-release-bot	80ba94203d	chore(release): 4.10.3 [skip ci] ## [4.10.3](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.10.2...v4.10.3) (2025-10-18) ### Bug Fixes * arcade: remove broken query param from game URLs ([`87631af`](`87631af678`))	2025-10-18 21:15:27 +00:00
Thomas Hallock	87631af678	fix(arcade): remove broken query param from game URLs Remove ?game= query parameter from GameSelector URLs. The /arcade/room page doesn't use query params - it uses the room's gameName field from the database and handles game selection through its own UI. This was causing the URL to have a stale ?game= param that didn't match the actual selected game, breaking testing and navigation. Changed: - GameSelector.tsx: url changed from `/arcade/room?game=${name}` to `/arcade/room` 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-10-18 16:14:14 -05:00
semantic-release-bot	2683f5d9c9	chore(release): 4.10.2 [skip ci] ## [4.10.2](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.10.1...v4.10.2) (2025-10-18) ### Bug Fixes * card-sorting: faithfully port UI/UX from Python original ([`c92076f`](`c92076f232`)), closes [#2c5f76](https://github.com/antialias/soroban-abacus-flashcards/issues/2c5f76) [#1976d2](https://github.com/antialias/soroban-abacus-flashcards/issues/1976d2)	2025-10-18 21:00:12 +00:00
Thomas Hallock	c92076f232	fix(card-sorting): faithfully port UI/UX from Python original Update Card Sorting Challenge to match the original Python implementation: Visual Changes: - Add status message display showing game state and instructions - Update insert buttons to match Python styling: - Pill-shaped (border-radius: 20px) - Teal (#2c5f76) with 0.3 opacity when inactive - Blue (#1976d2) when card is selected - Smooth scale animation on hover - Fix position slot sizing to 90px x 110px (matching original) - Simplify slot content (remove position numbers) - Add active state highlighting (blue glow) for empty slots when card selected - Adjust SVG sizing in filled slots to 70px width Logic Fixes: - Fix INSERT_CARD array shift logic bug in Provider.tsx - Remove redundant else clause that could create oversized arrays - Cards that fall off end are properly collected during compaction - Remove unused useEffect import Behavioral Changes: - Status messages now update based on game state: - Card selected: "Selected card with value X. Click a position or + button to place it." - All placed: "All cards placed! Click 'Check My Solution' to see how you did." - In progress: "X/Y cards placed. Select a card to continue." - Empty slot click shows helpful message when no card selected This brings the implementation in line with the original Python web_generator.py design (lines 8662-9132) as requested. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-10-18 15:59:02 -05:00