chore(release): 4.13.4 [skip ci]

## [4.13.4](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.13.3...v4.13.4) (2025-10-18)

### Bug Fixes

* **card-sorting:** increase card tile sizes to contain abacuses ([d2a3b7a](d2a3b7ae2e))

CHANGELOG.md

@@ -1,3 +1,80 @@
+## [4.13.4](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.13.3...v4.13.4) (2025-10-18)
+
+
+### Bug Fixes
+
+* **card-sorting:** increase card tile sizes to contain abacuses ([d2a3b7a](https://github.com/antialias/soroban-abacus-flashcards/commit/d2a3b7ae2e3f6819b8d9ace32be22f04f748d1bc))
+
+## [4.13.3](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.13.2...v4.13.3) (2025-10-18)
+
+
+### Bug Fixes
+
+* **card-sorting:** increase SVG size to fill card containers ([cf9d893](https://github.com/antialias/soroban-abacus-flashcards/commit/cf9d893f3fdbef6e91cd0ba283d602b9215569f1))
+
+## [4.13.2](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.13.1...v4.13.2) (2025-10-18)
+
+
+### Bug Fixes
+
+* show initial value and improve numeral contrast ([1b57f6d](https://github.com/antialias/soroban-abacus-flashcards/commit/1b57f6ddecf3a118f2e4fadd1a91be1256f5a034)), closes [#fbbf24](https://github.com/antialias/soroban-abacus-flashcards/issues/fbbf24)
+
+## [4.13.1](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.13.0...v4.13.1) (2025-10-18)
+
+
+### Bug Fixes
+
+* use defaultValue for interactive abacus control ([06aca98](https://github.com/antialias/soroban-abacus-flashcards/commit/06aca986ace4d76b70f2fd2f5e57f66758185b38))
+
+## [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)
 
 

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": []

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 () => {

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)
-}

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>
-      )
-  }
-}

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 = () => {

apps/web/src/app/page.tsx

@@ -1,185 +1,594 @@
 '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}
+                  customStyles={{
+                    numerals: {
+                      fill: '#fbbf24',
+                      fontWeight: 'bold',
+                      fontSize: '18px',
+                    },
+                  }}
+                  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>
   )
 }

apps/web/src/arcade-games/card-sorting/components/PlayingPhase.tsx

@@ -264,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) => (
@@ -278,39 +280,65 @@ export function PlayingPhase() {
                 key={card.id}
                 onClick={() => handleCardClick(card.id)}
                 className={css({
-                  padding: '0.5rem',
+                  width: '140px',
+                  height: '140px',
+                  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%',
+                    height: '100%',
+                    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}
@@ -336,8 +364,14 @@ export function PlayingPhase() {
           <div
             className={css({
               display: 'flex',
-              flexDirection: 'column',
-              gap: '0.25rem',
+              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 */}
@@ -376,13 +410,14 @@ export function PlayingPhase() {
               const isEmpty = card === null
 
               return (
-                <div key={index}>
+                <>
                   {/* Position slot */}
                   <div
+                    key={`slot-${index}`}
                     onClick={() => handleSlotClick(index)}
                     className={css({
-                      width: '90px',
-                      height: '110px',
+                      width: '140px',
+                      height: '160px',
                       padding: '0.5rem',
                       borderRadius: '8px',
                       border: '2px solid',
@@ -423,10 +458,16 @@ export function PlayingPhase() {
                             __html: card.svgContent,
                           }}
                           className={css({
-                            width: '70px',
+                            flex: 1,
+                            width: '100%',
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            overflow: 'hidden',
                             '& svg': {
                               width: '100%',
-                              height: 'auto',
+                              height: '100%',
+                              display: 'block',
                             },
                           })}
                         />
@@ -457,6 +498,7 @@ export function PlayingPhase() {
 
                   {/* Insert button after this position */}
                   <button
+                    key={`insert-${index + 1}`}
                     type="button"
                     onClick={() => handleInsertClick(index + 1)}
                     disabled={!selectedCardId}
@@ -472,7 +514,6 @@ export function PlayingPhase() {
                       cursor: selectedCardId ? 'pointer' : 'default',
                       opacity: selectedCardId ? 1 : 0.3,
                       transition: 'all 0.2s',
-                      marginTop: '0.25rem',
                       display: 'flex',
                       alignItems: 'center',
                       justifyContent: 'center',
@@ -485,7 +526,7 @@ export function PlayingPhase() {
                   >
                     +
                   </button>
-                </div>
+                </>
               )
             })}
           </div>

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', // Room page handles game selection through UI
+      url: '/arcade', // Arcade page handles game selection through UI
       icon: gameDef.manifest.icon,
       chips: gameDef.manifest.chips,
       color: gameDef.manifest.color,

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')
           },
         }
       )

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(

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?.()

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,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "soroban-monorepo",
-  "version": "4.10.3",
+  "version": "4.13.4",
   "private": true,
   "description": "Beautiful Soroban Flashcard Generator - Monorepo",
   "workspaces": [