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
6 changed files with 571 additions and 152 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,45 @@
+## [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)


--- 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/page.tsx
+++ b/apps/web/src/app/arcade/page.tsx
@@ -5,16 +5,9 @@ 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 { 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 - 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
@@ -84,7 +77,7 @@ export default function RoomPage() {
    const handleGameSelect = (gameType: GameType) => {
      console.log('[RoomPage] handleGameSelect called with gameType:', gameType)

-      // Check if it's a registry game first
+      // All games are now in the registry
      if (hasGame(gameType)) {
        const gameDef = getGame(gameType)
        if (!gameDef?.manifest.available) {
@@ -95,47 +88,12 @@ export default function RoomPage() {
        console.log('[RoomPage] Selecting registry game:', gameType)
        setRoomGame({
          roomId: roomData.id,
-          gameName: gameType, // Use the game name directly for registry games
+          gameName: gameType,
        })
        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,
-      })
+      console.log('[RoomPage] Unknown game type:', gameType)
    }

    return (
@@ -178,7 +136,7 @@ export default function RoomPage() {
            })}
          >
            {/* Legacy games */}
-            {Object.entries(GAMES_CONFIG).map(([gameType, config]) => {
+            {Object.entries(GAMES_CONFIG).map(([gameType, config]: [string, any]) => {
              const isAvailable = !('available' in config) || config.available !== false
              return (
                <button
--- 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/components/PlayingPhase.tsx
+++ b/apps/web/src/arcade-games/card-sorting/components/PlayingPhase.tsx
@@ -314,14 +314,16 @@ export function PlayingPhase() {
                <div
                  dangerouslySetInnerHTML={{ __html: card.svgContent }}
                  className={css({
-                    width: '100%',
-                    height: '100%',
+                    width: '74px',
+                    height: '74px',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
+                    overflow: 'hidden',
                    '& svg': {
-                      maxWidth: '100%',
-                      height: 'auto',
+                      width: '100%',
+                      height: '100%',
+                      display: 'block',
                    },
                  })}
                />
@@ -362,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 */}
@@ -402,9 +410,10 @@ export function PlayingPhase() {
              const isEmpty = card === null

              return (
-                <div key={index}>
+                <>
                  {/* Position slot */}
                  <div
+                    key={`slot-${index}`}
                    onClick={() => handleSlotClick(index)}
                    className={css({
                      width: '90px',
@@ -450,9 +459,16 @@ export function PlayingPhase() {
                          }}
                          className={css({
                            width: '70px',
+                            height: '70px',
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            overflow: 'hidden',
+                            margin: '0 auto',
                            '& svg': {
                              width: '100%',
-                              height: 'auto',
+                              height: '100%',
+                              display: 'block',
                            },
                          })}
                        />
@@ -483,6 +499,7 @@ export function PlayingPhase() {

                  {/* Insert button after this position */}
                  <button
+                    key={`insert-${index + 1}`}
                    type="button"
                    onClick={() => handleInsertClick(index + 1)}
                    disabled={!selectedCardId}
@@ -498,7 +515,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',
@@ -511,7 +527,7 @@ export function PlayingPhase() {
                  >
                    +
                  </button>
-                </div>
+                </>
              )
            })}
          </div>
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "soroban-monorepo",
-  "version": "4.10.4",
+  "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