fix(levels): use correct AbacusReact API with direct props

Fixed abacus not rendering by using the correct API:
- Removed non-existent useAbacusConfig import
- Changed from config object to direct props (value, columns, scaleFactor)
- Added scaleFactor=1.5 for better visibility

The abacus now properly displays with the appropriate number of columns
based on the selected kyu/dan level.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

apps/web/src/app/levels/page.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { useState } from 'react'
-import { AbacusReact, useAbacusConfig } from '@soroban/abacus-react'
+import { AbacusReact } from '@soroban/abacus-react'
 import { PageWithNav } from '@/components/PageWithNav'
 import { css } from '../../../styled-system/css'
 import { container, stack } from '../../../styled-system/patterns'
@@ -122,7 +122,6 @@ const allLevels = [
 export default function LevelsPage() {
   const [currentIndex, setCurrentIndex] = useState(0)
   const currentLevel = allLevels[currentIndex]
-  const abacusConfig = useAbacusConfig({ columns: currentLevel.digits })
 
   return (
     <PageWithNav navTitle="Kyu & Dan Levels" navEmoji="📊">
@@ -246,7 +245,7 @@ export default function LevelsPage() {
                   borderColor: 'gray.700',
                 })}
               >
-                <AbacusReact config={abacusConfig} initialNumber={0} />
+                <AbacusReact value={0} columns={currentLevel.digits} scaleFactor={1.5} />
               </div>
 
               {/* Digit Count */}