chore(release): 4.64.2 [skip ci]

## [4.64.2](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.64.1...v4.64.2) (2025-10-22) ### Bug Fixes * **complement-race:** use individual player positions for ghost trains ([00dc4b1](00dc4b1d06))
fix(complement-race): use individual player positions for ghost trains
2025-10-22 16:22:55 +00:00 · 2025-10-22 11:21:28 -05:00 · 2025-10-22 16:15:59 +00:00 · 2025-10-22 11:14:33 -05:00 · 2025-10-22 11:11:04 -05:00 · 2025-10-22 11:09:13 -05:00
9 changed files with 645 additions and 195 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,193 @@
+## [4.64.2](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.64.1...v4.64.2) (2025-10-22)
+
+
+### Bug Fixes
+
+* **complement-race:** use individual player positions for ghost trains ([00dc4b1](https://github.com/antialias/soroban-abacus-flashcards/commit/00dc4b1d06a4e1763deb16333a298145cafd9187))
+
+## [4.64.1](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.64.0...v4.64.1) (2025-10-22)
+
+
+### Bug Fixes
+
+* **complement-race:** use local player instead of first player for train display ([915d8a5](https://github.com/antialias/soroban-abacus-flashcards/commit/915d8a5343e70a30c7a82bed645e6628fcc08a86))
+
+## [4.64.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.63.11...v4.64.0) (2025-10-22)
+
+
+### Features
+
+* **complement-race:** add ghost trains for multiplayer visibility ([7668cc9](https://github.com/antialias/soroban-abacus-flashcards/commit/7668cc9b113b3eae2acb1b852b0ad48c979e6604))
+
+## [4.63.11](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.63.10...v4.63.11) (2025-10-22)
+
+
+### Bug Fixes
+
+* **complement-race:** actually filter by isActive instead of just id ([ef4ca57](https://github.com/antialias/soroban-abacus-flashcards/commit/ef4ca57a6c3f35d1bddc6a70952f478058fbc6b5))
+
+## [4.63.10](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.63.9...v4.63.10) (2025-10-22)
+
+
+### Bug Fixes
+
+* **complement-race:** show only first active player's passengers on train ([2bfd5d2](https://github.com/antialias/soroban-abacus-flashcards/commit/2bfd5d2bda7f7d2d83c69f75600ab461fde15d92))
+
+## [4.63.9](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.63.8...v4.63.9) (2025-10-21)
+
+
+### Bug Fixes
+
+* **homepage:** use app-wide abacus config in interactive flashcards ([cf1be2d](https://github.com/antialias/soroban-abacus-flashcards/commit/cf1be2d1730543bd30836a87d9cbdfd2cf48360e))
+
+## [4.63.8](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.63.7...v4.63.8) (2025-10-21)
+
+
+### Bug Fixes
+
+* **mobile:** restore abacus visibility in "Your Journey" section ([c96036d](https://github.com/antialias/soroban-abacus-flashcards/commit/c96036d86b6de2e25f7ecd3d00dd36221badc3b1))
+
+## [4.63.7](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.63.6...v4.63.7) (2025-10-21)
+
+
+### Bug Fixes
+
+* **mobile:** reduce height of Your Journey section on mobile ([8944035](https://github.com/antialias/soroban-abacus-flashcards/commit/89440355bf494e54072d2d1a1f228c33ec43d52d))
+
+## [4.63.6](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.63.5...v4.63.6) (2025-10-21)
+
+
+### Bug Fixes
+
+* **mobile:** optimize Your Journey section for iPhone displays ([9167fb4](https://github.com/antialias/soroban-abacus-flashcards/commit/9167fb40d68b7bdbe310b647083586434ceb6043))
+
+## [4.63.5](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.63.4...v4.63.5) (2025-10-21)
+
+
+### Bug Fixes
+
+* **flashcards:** store grab offset in local coordinates to prevent jump ([39d93a9](https://github.com/antialias/soroban-abacus-flashcards/commit/39d93a9e9f48a7d1ce10763cad62a600851a41d5))
+
+## [4.63.4](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.63.3...v4.63.4) (2025-10-21)
+
+
+### Bug Fixes
+
+* **flashcards:** keep grab point under cursor with proper coordinate conversion ([1869216](https://github.com/antialias/soroban-abacus-flashcards/commit/1869216d2fda77303c0b79d4f613c6dcdaf5324b))
+
+## [4.63.3](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.63.2...v4.63.3) (2025-10-21)
+
+
+### Bug Fixes
+
+* **flashcards:** revert to simple delta positioning to prevent card jumping ([d018b69](https://github.com/antialias/soroban-abacus-flashcards/commit/d018b699c46aea90e9cdc3309e797ff2d7447ecf))
+
+## [4.63.2](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.63.1...v4.63.2) (2025-10-21)
+
+
+### Bug Fixes
+
+* **flashcards:** correct pivot point to rotate around card center ([50fc3fd](https://github.com/antialias/soroban-abacus-flashcards/commit/50fc3fdf7f2c9b7412f6d7d890f5e0d52cb86a9b))
+
+## [4.63.1](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.63.0...v4.63.1) (2025-10-21)
+
+
+### Bug Fixes
+
+* **flashcards:** increase rotation sensitivity 10x for visible grab point physics ([c0fa926](https://github.com/antialias/soroban-abacus-flashcards/commit/c0fa926d16d02c1bfe880b7f0056a760e8461b3b))
+
+## [4.63.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.62.1...v4.63.0) (2025-10-21)
+
+
+### Features
+
+* **flashcards:** add grab point physics for realistic rotation ([bf37eb1](https://github.com/antialias/soroban-abacus-flashcards/commit/bf37eb1928de8d07673234e2faa1fa6268c45686))
+
+## [4.62.1](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.62.0...v4.62.1) (2025-10-21)
+
+
+### Bug Fixes
+
+* **flashcards:** improve shadow speed logging with separate throttling ([0f51366](https://github.com/antialias/soroban-abacus-flashcards/commit/0f51366fd56540e691df4931b6350c03043484f1))
+
+## [4.62.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.61.3...v4.62.0) (2025-10-21)
+
+
+### Features
+
+* **flashcards:** add dynamic shadow based on drag speed ([92148a4](https://github.com/antialias/soroban-abacus-flashcards/commit/92148a4cf87e828ba2e5ec1740fb51d9667c1d73))
+
+## [4.61.3](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.61.2...v4.61.3) (2025-10-21)
+
+
+### Code Refactoring
+
+* **flashcards:** completely rewrite drag-drop with simple approach ([5f0ad14](https://github.com/antialias/soroban-abacus-flashcards/commit/5f0ad14133340d073e861f5721cb48e1abab03ff))
+
+## [4.61.2](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.61.1...v4.61.2) (2025-10-21)
+
+
+### Bug Fixes
+
+* **flashcards:** use explicit per-property configs to fix decay physics ([f32480a](https://github.com/antialias/soroban-abacus-flashcards/commit/f32480a0f9153285341e5a28078840abc0590873))
+
+## [4.61.1](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.61.0...v4.61.1) (2025-10-21)
+
+
+### Bug Fixes
+
+* **flashcards:** fix position snap-back by using api.set before decay ([30e16c8](https://github.com/antialias/soroban-abacus-flashcards/commit/30e16c8e5ac3bb25f2d54cf715dc6fb45adc4fcc))
+
+## [4.61.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.60.0...v4.61.0) (2025-10-21)
+
+
+### Features
+
+* **flashcards:** enable unbounded drag and position persistence ([ad1ad69](https://github.com/antialias/soroban-abacus-flashcards/commit/ad1ad690f014257b5a3c3f599e794205a11d286f))
+
+## [4.60.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.59.1...v4.60.0) (2025-10-21)
+
+
+### Features
+
+* **homepage:** significantly increase mobile hero abacus size ([424f41d](https://github.com/antialias/soroban-abacus-flashcards/commit/424f41d4bfc1ddea068f8c110b495ebd5c0bb455))
+
+## [4.59.1](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.59.0...v4.59.1) (2025-10-21)
+
+
+### Bug Fixes
+
+* **homepage:** adjust hero abacus scale for optimal sizing across devices ([86dee31](https://github.com/antialias/soroban-abacus-flashcards/commit/86dee31c9a51ca0712f1b4181a4899d25374d403))
+* **homepage:** reduce mobile abacus scale to prevent scroll hint overlap ([b8235be](https://github.com/antialias/soroban-abacus-flashcards/commit/b8235be612c3f1dbd0da2b6cd1a935001b7dac9b))
+
+## [4.59.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.58.2...v4.59.0) (2025-10-21)
+
+
+### Features
+
+* **homepage:** increase hero abacus size for better visibility ([7666b0a](https://github.com/antialias/soroban-abacus-flashcards/commit/7666b0aea949f2432a4d0f4648c1a366af3ea6d2))
+
+## [4.58.2](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.58.1...v4.58.2) (2025-10-21)
+
+
+### Code Refactoring
+
+* **navbar:** prevent subtitle wrap and remove abacus emoji ([a58f7b7](https://github.com/antialias/soroban-abacus-flashcards/commit/a58f7b78b0020c85da523c36fdf6d70ad069736a))
+
+## [4.58.1](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.58.0...v4.58.1) (2025-10-21)
+
+
+### Bug Fixes
+
+* **navbar:** apply glassmorphism to transparent mode, not scrolled mode ([8893675](https://github.com/antialias/soroban-abacus-flashcards/commit/8893675b36b1c1534c6fe7e57fa7e0cc55f198d6))
+
+## [4.58.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.57.10...v4.58.0) (2025-10-21)
+
+
+### Features
+
+* **navbar:** add glassmorphism effect to nav links when scrolled ([89b9072](https://github.com/antialias/soroban-abacus-flashcards/commit/89b90723b7a3fc9ed12da3ba8718fccb6ce0760f))
+
 ## [4.57.10](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.57.9...v4.57.10) (2025-10-21)


--- a/apps/web/src/app/arcade/complement-race/components/RaceTrack/GhostTrain.tsx
+++ b/apps/web/src/app/arcade/complement-race/components/RaceTrack/GhostTrain.tsx
@@ -0,0 +1,123 @@
+'use client'
+
+import { useEffect, useMemo, useRef } from 'react'
+import type { PlayerState } from '@/arcade-games/complement-race/types'
+import type { RailroadTrackGenerator } from '../../lib/RailroadTrackGenerator'
+
+interface GhostTrainProps {
+  player: PlayerState
+  trainPosition: number
+  trackGenerator: RailroadTrackGenerator
+  pathRef: React.RefObject<SVGPathElement>
+}
+
+/**
+ * GhostTrain - Renders a semi-transparent train for other players in multiplayer
+ * Shows opponent positions in real-time during steam sprint races
+ */
+export function GhostTrain({ player, trainPosition, trackGenerator, pathRef }: GhostTrainProps) {
+  const ghostRef = useRef<SVGGElement>(null)
+
+  // Calculate train transform using same logic as local player
+  const trainTransform = useMemo(() => {
+    if (!pathRef.current) {
+      return { x: 0, y: 0, rotation: 0, opacity: 0 }
+    }
+
+    const pathLength = pathRef.current.getTotalLength()
+    const targetDistance = (trainPosition / 100) * pathLength
+    const point = pathRef.current.getPointAtLength(targetDistance)
+
+    // Calculate tangent for rotation
+    const tangentDelta = 1
+    const tangentDistance = Math.min(targetDistance + tangentDelta, pathLength)
+    const tangentPoint = pathRef.current.getPointAtLength(tangentDistance)
+    const rotation =
+      (Math.atan2(tangentPoint.y - point.y, tangentPoint.x - point.x) * 180) / Math.PI
+
+    return {
+      x: point.x,
+      y: point.y,
+      rotation,
+      opacity: 0.35, // Ghost effect - 35% opacity
+    }
+  }, [trainPosition, pathRef])
+
+  // Log only once when this ghost train first renders
+  const hasLoggedRef = useRef(false)
+  useEffect(() => {
+    if (!hasLoggedRef.current && trainTransform.opacity > 0) {
+      console.log('[GhostTrain] rendering:', player.name, 'at position:', trainPosition.toFixed(1))
+      hasLoggedRef.current = true
+    }
+  }, [trainTransform.opacity, player.name, trainPosition])
+
+  // Don't render if position data isn't ready
+  if (trainTransform.opacity === 0) {
+    return null
+  }
+
+  return (
+    <g
+      ref={ghostRef}
+      data-component="ghost-train"
+      data-player-id={player.id}
+      transform={`translate(${trainTransform.x}, ${trainTransform.y}) rotate(${trainTransform.rotation}) scale(-1, 1)`}
+      opacity={trainTransform.opacity}
+      style={{
+        transition: 'opacity 0.3s ease-in',
+      }}
+    >
+      {/* Ghost locomotive */}
+      <text
+        data-element="ghost-locomotive"
+        x={0}
+        y={0}
+        textAnchor="middle"
+        style={{
+          fontSize: '100px',
+          filter: `drop-shadow(0 2px 8px ${player.color || 'rgba(100, 100, 255, 0.6)'})`,
+          pointerEvents: 'none',
+        }}
+      >
+        🚂
+      </text>
+
+      {/* Player name label - positioned above train */}
+      <text
+        data-element="ghost-label"
+        x={0}
+        y={-60}
+        textAnchor="middle"
+        style={{
+          fontSize: '18px',
+          fontWeight: 'bold',
+          fill: player.color || '#6366f1',
+          filter: 'drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3))',
+          pointerEvents: 'none',
+          transform: 'scaleX(-1)', // Counter the parent's scaleX(-1)
+        }}
+      >
+        {player.name || `Player ${player.id.slice(0, 4)}`}
+      </text>
+
+      {/* Score indicator - positioned below train */}
+      <text
+        data-element="ghost-score"
+        x={0}
+        y={50}
+        textAnchor="middle"
+        style={{
+          fontSize: '14px',
+          fontWeight: 'bold',
+          fill: 'rgba(255, 255, 255, 0.9)',
+          filter: 'drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5))',
+          pointerEvents: 'none',
+          transform: 'scaleX(-1)', // Counter the parent's scaleX(-1)
+        }}
+      >
+        {player.score}
+      </text>
+    </g>
+  )
+}
--- a/apps/web/src/app/arcade/complement-race/components/RaceTrack/SteamTrainJourney.tsx
+++ b/apps/web/src/app/arcade/complement-race/components/RaceTrack/SteamTrainJourney.tsx
@@ -1,7 +1,7 @@
 'use client'

 import { animated, useSpring } from '@react-spring/web'
-import { memo, useMemo, useRef, useState } from 'react'
+import { memo, useEffect, useMemo, useRef, useState } from 'react'
 import { useGameMode } from '@/contexts/GameModeContext'
 import { useUserProfile } from '@/contexts/UserProfileContext'
 import { useComplementRace } from '@/arcade-games/complement-race/Provider'
@@ -20,6 +20,7 @@ import { GameHUD } from './GameHUD'
 import { RailroadTrackPath } from './RailroadTrackPath'
 import { TrainAndCars } from './TrainAndCars'
 import { TrainTerrainBackground } from './TrainTerrainBackground'
+import { GhostTrain } from './GhostTrain'

 const BoardingPassengerAnimation = memo(({ animation }: { animation: BoardingAnimation }) => {
  const spring = useSpring({
@@ -92,7 +93,7 @@ export function SteamTrainJourney({
  currentQuestion,
  currentInput,
 }: SteamTrainJourneyProps) {
-  const { state } = useComplementRace()
+  const { state, multiplayerState, localPlayerId } = useComplementRace()

  const { getSkyGradient, getTimeOfDayPeriod } = useSteamJourney()
  const _skyGradient = getSkyGradient()
@@ -100,10 +101,20 @@ export function SteamTrainJourney({
  const { players } = useGameMode()
  const { profile: _profile } = useUserProfile()

-  // Get the first active player's emoji
-  const activePlayers = Array.from(players.values()).filter((p) => p.id)
-  const firstActivePlayer = activePlayers[0]
-  const playerEmoji = firstActivePlayer?.emoji ?? '👤'
+  // Get the LOCAL player's emoji (not just the first player!)
+  const activePlayers = Array.from(players.values()).filter((p) => p.isActive)
+  const localPlayer = activePlayers.find((p) => p.isLocal)
+  const playerEmoji = localPlayer?.emoji ?? '👤'
+
+  // Log only when localPlayer changes
+  useEffect(() => {
+    console.log(
+      '[SteamTrainJourney] localPlayer:',
+      localPlayer?.name,
+      'isLocal:',
+      localPlayer?.isLocal
+    )
+  }, [localPlayer?.id, localPlayer?.name, localPlayer?.isLocal])

  const svgRef = useRef<SVGSVGElement>(null)
  const pathRef = useRef<SVGPathElement>(null)
@@ -164,9 +175,13 @@ export function SteamTrainJourney({

  // Memoize filtered passenger lists to avoid recalculating on every render
  // Arcade room multiplayer uses claimedBy/deliveredBy instead of isBoarded/isDelivered
+  // Only show passengers claimed by the LOCAL player
  const boardedPassengers = useMemo(
-    () => displayPassengers.filter((p) => p.claimedBy !== null && p.deliveredBy === null),
-    [displayPassengers]
+    () =>
+      displayPassengers.filter(
+        (p) => p.claimedBy === localPlayer?.id && p.claimedBy !== null && p.deliveredBy === null
+      ),
+    [displayPassengers, localPlayer?.id]
  )

  const nonDeliveredPassengers = useMemo(
@@ -186,6 +201,30 @@ export function SteamTrainJourney({
    []
  )

+  // Get other players for ghost trains (filter out local player)
+  const otherPlayers = useMemo(() => {
+    if (!multiplayerState?.players || !localPlayerId) {
+      return []
+    }
+
+    const filtered = Object.entries(multiplayerState.players)
+      .filter(([playerId, player]) => playerId !== localPlayerId && player.isActive)
+      .map(([_, player]) => player)
+
+    return filtered
+  }, [multiplayerState?.players, localPlayerId])
+
+  // Log only when otherPlayers count changes
+  useEffect(() => {
+    console.log('[SteamTrainJourney] otherPlayers count:', otherPlayers.length)
+    if (otherPlayers.length > 0) {
+      console.log(
+        '[SteamTrainJourney] ghost positions:',
+        otherPlayers.map((p) => `${p.name}: ${p.position.toFixed(1)}`).join(', ')
+      )
+    }
+  }, [otherPlayers.length, otherPlayers])
+
  if (!trackData) return null

  return (
@@ -247,7 +286,18 @@ export function SteamTrainJourney({
          disembarkingAnimations={disembarkingAnimations}
        />

-        {/* Train, cars, and passenger animations */}
+        {/* Ghost trains - other players in multiplayer */}
+        {otherPlayers.map((player) => (
+          <GhostTrain
+            key={player.id}
+            player={player}
+            trainPosition={player.position} // Use each player's individual position
+            trackGenerator={trackGenerator}
+            pathRef={pathRef}
+          />
+        ))}
+
+        {/* Train, cars, and passenger animations - local player */}
        <TrainAndCars
          boardingAnimations={boardingAnimations}
          disembarkingAnimations={disembarkingAnimations}
--- a/apps/web/src/arcade-games/complement-race/Provider.tsx
+++ b/apps/web/src/arcade-games/complement-race/Provider.tsx
@@ -99,6 +99,8 @@ interface CompatibleGameState {
 */
 interface ComplementRaceContextValue {
  state: CompatibleGameState // Return adapted state
+  multiplayerState: ComplementRaceState // Raw multiplayer state for rendering other players
+  localPlayerId: string | undefined // Local player ID for filtering
  dispatch: (action: { type: string; [key: string]: any }) => void // Compatibility layer
  lastError: string | null
  startGame: () => void
@@ -304,12 +306,18 @@ export function ComplementRaceProvider({ children }: { children: ReactNode }) {

  // Get local player ID
  const localPlayerId = useMemo(() => {
-    return activePlayers.find((id) => {
+    const foundId = activePlayers.find((id) => {
      const player = players.get(id)
      return player?.isLocal
    })
+    return foundId
  }, [activePlayers, players])

+  // Log only when localPlayerId changes
+  useEffect(() => {
+    console.log('[Provider] localPlayerId:', localPlayerId)
+  }, [localPlayerId])
+
  // Debug logging ref (track last logged values)
  const lastLogRef = useState({ key: '', count: 0 })[0]

@@ -914,6 +922,8 @@ export function ComplementRaceProvider({ children }: { children: ReactNode }) {

  const contextValue: ComplementRaceContextValue = {
    state: compatibleState, // Use transformed state
+    multiplayerState, // Expose raw multiplayer state for ghost trains
+    localPlayerId, // Expose local player ID for filtering
    dispatch,
    lastError,
    startGame,
--- a/apps/web/src/components/AppNavBar.tsx
+++ b/apps/web/src/components/AppNavBar.tsx
@@ -575,12 +575,8 @@ export function AppNavBar({ variant = 'full', navSlot }: AppNavBarProps) {
  return (
    <Tooltip.Provider delayDuration={200}>
      <header
-        style={{
-          background: isTransparent
-            ? 'transparent'
-            : 'linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.5) calc(100% - 10px), transparent 100%)',
-        }}
        className={css({
+          bg: isTransparent ? 'transparent' : 'rgba(0, 0, 0, 0.5)',
          backdropFilter: isTransparent ? 'none' : 'blur(12px)',
          shadow: isTransparent ? 'none' : 'lg',
          borderBottom: isTransparent ? 'none' : '1px solid',
@@ -616,7 +612,7 @@ export function AppNavBar({ variant = 'full', navSlot }: AppNavBarProps) {
                    color: 'rgba(255, 255, 255, 0.95)',
                  })}
                >
-                  🧮 Abaci One
+                  Abaci One
                </span>
                <Tooltip.Root>
                  <Tooltip.Trigger asChild>
@@ -627,6 +623,7 @@ export function AppNavBar({ variant = 'full', navSlot }: AppNavBarProps) {
                        color: 'rgba(196, 181, 253, 0.8)',
                        fontStyle: 'italic',
                        cursor: 'help',
+                        whiteSpace: 'nowrap',
                        _hover: { color: 'rgba(196, 181, 253, 1)' },
                      })}
                    >
@@ -722,6 +719,9 @@ function NavLink({
  return (
    <Link
      href={href}
+      style={{
+        backdropFilter: isTransparent ? 'blur(8px)' : 'none',
+      }}
      className={css({
        px: { base: '4', md: '3' },
        py: { base: '3', md: '2' },
@@ -738,20 +738,29 @@ function NavLink({
            : 'rgba(209, 213, 219, 0.9)',
        bg: isTransparent
          ? isActive
-            ? 'rgba(255, 255, 255, 0.15)'
-            : 'transparent'
+            ? 'rgba(255, 255, 255, 0.2)'
+            : 'rgba(255, 255, 255, 0.08)'
          : isActive
            ? 'rgba(139, 92, 246, 0.2)'
            : 'transparent',
+        border: isTransparent ? '1px solid' : 'none',
+        borderColor: isTransparent
+          ? isActive
+            ? 'rgba(255, 255, 255, 0.3)'
+            : 'rgba(255, 255, 255, 0.15)'
+          : 'transparent',
        rounded: 'lg',
        transition: 'all',
        textDecoration: 'none',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
+        boxShadow: isTransparent ? '0 2px 8px rgba(0, 0, 0, 0.2)' : 'none',
        _hover: {
          color: isTransparent ? 'white' : 'rgba(196, 181, 253, 1)',
-          bg: isTransparent ? 'rgba(255, 255, 255, 0.2)' : 'rgba(139, 92, 246, 0.25)',
+          bg: isTransparent ? 'rgba(255, 255, 255, 0.25)' : 'rgba(139, 92, 246, 0.25)',
+          borderColor: isTransparent ? 'rgba(255, 255, 255, 0.4)' : 'transparent',
+          boxShadow: isTransparent ? '0 4px 12px rgba(0, 0, 0, 0.3)' : 'none',
        },
      })}
    >
--- a/apps/web/src/components/HeroAbacus.tsx
+++ b/apps/web/src/components/HeroAbacus.tsx
@@ -131,7 +131,7 @@ export function HeroAbacus() {
      >
        <div
          className={css({
-            transform: { base: 'scale(2)', md: 'scale(3)', lg: 'scale(4)' },
+            transform: { base: 'scale(3.5)', md: 'scale(3.5)', lg: 'scale(4.25)' },
            transformOrigin: 'center center',
            transition: 'all 0.5s cubic-bezier(0.4, 0, 0.2, 1)',
          })}
--- a/apps/web/src/components/InteractiveFlashcards.tsx
+++ b/apps/web/src/components/InteractiveFlashcards.tsx
@@ -1,9 +1,7 @@
 'use client'

-import { AbacusReact } from '@soroban/abacus-react'
-import { useDrag } from '@use-gesture/react'
+import { AbacusReact, useAbacusConfig } from '@soroban/abacus-react'
 import { useEffect, useRef, useState } from 'react'
-import { animated, config, to, useSpring } from '@react-spring/web'
 import { css } from '../../styled-system/css'

 interface Flashcard {
@@ -16,12 +14,11 @@ interface Flashcard {
 }

 /**
- * InteractiveFlashcards - A fun, physics-based flashcard display
- * Users can drag and throw flashcards around with realistic momentum
+ * InteractiveFlashcards - A fun flashcard display where you can drag cards around
+ * Cards stay where you drop them - simple and intuitive
 */
 export function InteractiveFlashcards() {
  const containerRef = useRef<HTMLDivElement>(null)
-  // Generate 8-15 random flashcards (client-side only to avoid hydration errors)
  const [cards, setCards] = useState<Flashcard[]>([])

  useEffect(() => {
@@ -77,14 +74,14 @@ export function InteractiveFlashcards() {
        maxW: '1200px',
        mx: 'auto',
        height: { base: '400px', md: '500px' },
-        overflow: 'hidden',
+        overflow: 'visible',
        bg: 'rgba(0, 0, 0, 0.3)',
        rounded: 'xl',
        border: '1px solid rgba(255, 255, 255, 0.1)',
      })}
    >
      {cards.map((card) => (
-        <DraggableCard key={card.id} card={card} />
+        <DraggableCard key={card.id} card={card} containerRef={containerRef} />
      ))}
    </div>
  )
@@ -92,193 +89,247 @@ export function InteractiveFlashcards() {

 interface DraggableCardProps {
  card: Flashcard
+  containerRef: React.RefObject<HTMLDivElement>
 }

-function DraggableCard({ card }: DraggableCardProps) {
-  // Track the card's current position in state (separate from the animation values)
-  const currentPositionRef = useRef({
-    x: card.initialX,
-    y: card.initialY,
-    rotation: card.initialRotation,
-  })
-
-  const [{ x, y, rotation, scale }, api] = useSpring(() => ({
-    x: card.initialX,
-    y: card.initialY,
-    rotation: card.initialRotation,
-    scale: 1,
-    config: config.wobbly,
-  }))
+function DraggableCard({ card, containerRef }: DraggableCardProps) {
+  const appConfig = useAbacusConfig()

+  // Track position - starts at initial, updates when dragged
+  const [position, setPosition] = useState({ x: card.initialX, y: card.initialY })
+  const [rotation, setRotation] = useState(card.initialRotation) // Now dynamic!
  const [zIndex, setZIndex] = useState(card.zIndex)
-  const cardRef = useRef<HTMLDivElement>(null)
-  const dragOffsetRef = useRef({ x: 0, y: 0 })
-  const lastVelocityRef = useRef({ vx: 0, vy: 0 })
-  const velocityHistoryRef = useRef<Array<{ vx: number; vy: number }>>([])
-  const [transformOrigin, setTransformOrigin] = useState('center center')
+  const [isDragging, setIsDragging] = useState(false)
+  const [dragSpeed, setDragSpeed] = useState(0) // Speed for dynamic shadow

-  const bind = useDrag(
-    ({ down, movement: [mx, my], velocity: [vx, vy], direction: [dx, dy], first, xy }) => {
-      // Bring card to front when dragging
-      if (down) {
-        setZIndex(1000)
+  // Track drag state
+  const dragStartRef = useRef<{ x: number; y: number; cardX: number; cardY: number } | null>(null)
+  const grabOffsetRef = useRef<{ x: number; y: number }>({ x: 0, y: 0 }) // Offset from card center where grabbed
+  const baseRotationRef = useRef(card.initialRotation) // Starting rotation
+  const lastMoveTimeRef = useRef<number>(0)
+  const lastMovePositionRef = useRef<{ x: number; y: number }>({ x: 0, y: 0 })
+  const lastLogTimeRef = useRef<number>(0) // Separate throttling for logging
+  const cardRef = useRef<HTMLDivElement>(null) // Reference to card element

-        // Calculate drag offset from card center on first touch
-        if (first && cardRef.current) {
-          const cardRect = cardRef.current.getBoundingClientRect()
-          const cardWidth = cardRect.width
-          const cardHeight = cardRect.height
+  const handlePointerDown = (e: React.PointerEvent) => {
+    setIsDragging(true)
+    setZIndex(1000) // Bring to front
+    setDragSpeed(0)

-          // xy is in viewport coordinates, convert to position relative to card
-          const clickRelativeToCard = {
-            x: xy[0] - cardRect.left,
-            y: xy[1] - cardRect.top,
-          }
+    // Capture the pointer
+    e.currentTarget.setPointerCapture(e.pointerId)

-          // Calculate offset from card center
-          const cardCenterX = cardWidth / 2
-          const cardCenterY = cardHeight / 2
-          const offsetX = clickRelativeToCard.x - cardCenterX
-          const offsetY = clickRelativeToCard.y - cardCenterY
-
-          dragOffsetRef.current = { x: offsetX, y: offsetY }
-
-          // Convert offset to transform-origin (50% + offset as percentage of card size)
-          const originX = 50 + (offsetX / cardWidth) * 100
-          const originY = 50 + (offsetY / cardHeight) * 100
-          const transformOriginValue = `${originX}% ${originY}%`
-
-          console.log(
-            `Drag start: click at (${clickRelativeToCard.x.toFixed(0)}, ${clickRelativeToCard.y.toFixed(0)}) in card, offset from center: (${offsetX.toFixed(0)}, ${offsetY.toFixed(0)}), origin: ${transformOriginValue}`
-          )
-
-          setTransformOrigin(transformOriginValue)
-          velocityHistoryRef.current = []
-        }
-
-        // Smooth velocity by averaging last 3 frames
-        velocityHistoryRef.current.push({ vx, vy })
-        if (velocityHistoryRef.current.length > 3) {
-          velocityHistoryRef.current.shift()
-        }
-
-        const avgVx =
-          velocityHistoryRef.current.reduce((sum, v) => sum + v.vx, 0) /
-          velocityHistoryRef.current.length
-        const avgVy =
-          velocityHistoryRef.current.reduce((sum, v) => sum + v.vy, 0) /
-          velocityHistoryRef.current.length
-
-        // Calculate rotation based on smoothed velocity and drag offset
-        const velocityAngle = Math.atan2(avgVy, avgVx) * (180 / Math.PI)
-        const offsetAngle =
-          Math.atan2(dragOffsetRef.current.y, dragOffsetRef.current.x) * (180 / Math.PI)
-
-        // Card rotates to align with movement direction, offset by where we're grabbing
-        const targetRotation = velocityAngle - offsetAngle + 90
-
-        const speed = Math.sqrt(avgVx * avgVx + avgVy * avgVy)
-
-        // Store smoothed velocity for throw
-        lastVelocityRef.current = { vx: avgVx, vy: avgVy }
-
-        const finalRotation = speed > 0.01 ? targetRotation : currentPositionRef.current.rotation
-
-        api.start({
-          x: currentPositionRef.current.x + mx,
-          y: currentPositionRef.current.y + my,
-          scale: 1.1,
-          rotation: finalRotation,
-          immediate: (key) => key !== 'rotation', // Position immediate, rotation smooth
-          config: { tension: 200, friction: 30 }, // Smoother rotation spring
-        })
-      } else {
-        // On release, reset transform origin to center
-        setTransformOrigin('center center')
-
-        // On release, apply momentum with decay physics
-        const throwVelocityX = lastVelocityRef.current.vx * 1000
-        const throwVelocityY = lastVelocityRef.current.vy * 1000
-
-        // Calculate final rotation based on throw direction
-        const throwAngle = Math.atan2(throwVelocityY, throwVelocityX) * (180 / Math.PI)
-
-        api.start({
-          x: {
-            from: currentPositionRef.current.x + mx,
-            velocity: throwVelocityX,
-            decay: true,
-          },
-          y: {
-            from: currentPositionRef.current.y + my,
-            velocity: throwVelocityY,
-            decay: true,
-          },
-          scale: 1,
-          rotation: throwAngle + 90, // Card aligns with throw direction
-          config: config.wobbly,
-          onChange: (result) => {
-            // Update current position as card settles
-            if (result.value.x !== undefined) {
-              currentPositionRef.current.x = result.value.x
-            }
-            if (result.value.y !== undefined) {
-              currentPositionRef.current.y = result.value.y
-            }
-            if (result.value.rotation !== undefined) {
-              currentPositionRef.current.rotation = result.value.rotation
-            }
-          },
-        })
-      }
-    },
-    {
-      // Prevent scrolling when dragging
-      preventDefault: true,
-      filterTaps: true,
+    // Record where the drag started (pointer position and card position)
+    dragStartRef.current = {
+      x: e.clientX,
+      y: e.clientY,
+      cardX: position.x,
+      cardY: position.y,
    }
-  )
+
+    // Calculate grab offset from card center IN LOCAL COORDINATES (unrotated)
+    if (cardRef.current) {
+      const rect = cardRef.current.getBoundingClientRect()
+      const cardCenterX = rect.left + rect.width / 2
+      const cardCenterY = rect.top + rect.height / 2
+
+      // Screen-space offset from center
+      const screenOffsetX = e.clientX - cardCenterX
+      const screenOffsetY = e.clientY - cardCenterY
+
+      // Convert to local coordinates by rotating by -rotation
+      const currentRotationRad = (rotation * Math.PI) / 180
+      const cosRot = Math.cos(-currentRotationRad)
+      const sinRot = Math.sin(-currentRotationRad)
+
+      grabOffsetRef.current = {
+        x: screenOffsetX * cosRot - screenOffsetY * sinRot,
+        y: screenOffsetX * sinRot + screenOffsetY * cosRot,
+      }
+      console.log(
+        `[GrabPoint] Grabbed at local offset: (${grabOffsetRef.current.x.toFixed(0)}, ${grabOffsetRef.current.y.toFixed(0)})px (screen offset: ${screenOffsetX.toFixed(0)}, ${screenOffsetY.toFixed(0)}px, rotation: ${rotation.toFixed(1)}°)`
+      )
+    }
+
+    // Store the current rotation as the base for this drag
+    baseRotationRef.current = rotation
+
+    // Initialize velocity tracking
+    const now = Date.now()
+    lastMoveTimeRef.current = now
+    lastMovePositionRef.current = { x: e.clientX, y: e.clientY }
+    lastLogTimeRef.current = now
+
+    console.log('[Shadow] Drag started, speed reset to 0')
+  }
+
+  const handlePointerMove = (e: React.PointerEvent) => {
+    if (!isDragging || !dragStartRef.current) return
+
+    // Calculate how far the pointer has moved since drag started
+    const deltaX = e.clientX - dragStartRef.current.x
+    const deltaY = e.clientY - dragStartRef.current.y
+
+    // Calculate velocity for dynamic shadow
+    const now = Date.now()
+    const timeDelta = now - lastMoveTimeRef.current
+
+    if (timeDelta > 0) {
+      // Distance moved since last frame
+      const distX = e.clientX - lastMovePositionRef.current.x
+      const distY = e.clientY - lastMovePositionRef.current.y
+      const distance = Math.sqrt(distX * distX + distY * distY)
+
+      // Speed in pixels per millisecond, then convert to reasonable scale
+      const speed = distance / timeDelta
+      const scaledSpeed = Math.min(speed * 100, 100) // Cap at 100 for reasonable shadow size
+
+      setDragSpeed(scaledSpeed)
+
+      // Log occasionally (every ~200ms) to avoid console spam
+      const timeSinceLastLog = now - lastLogTimeRef.current
+      if (timeSinceLastLog > 200) {
+        console.log(
+          `[Shadow] Speed: ${scaledSpeed.toFixed(1)}, distance: ${distance.toFixed(0)}px, timeDelta: ${timeDelta}ms`
+        )
+        lastLogTimeRef.current = now
+      }
+
+      lastMoveTimeRef.current = now
+      lastMovePositionRef.current = { x: e.clientX, y: e.clientY }
+    }
+
+    // Calculate rotation based on grab point physics
+    // Cross product of grab offset and drag direction determines rotation
+    // If grabbed on left and dragged right → clockwise rotation
+    // If grabbed on right and dragged left → counter-clockwise rotation
+    const crossProduct = grabOffsetRef.current.x * deltaY - grabOffsetRef.current.y * deltaX
+    const rotationInfluence = crossProduct / 500 // Reduced scale factor for more visible rotation
+    const newRotation = baseRotationRef.current + rotationInfluence
+
+    // Clamp rotation to prevent excessive spinning
+    const clampedRotation = Math.max(-45, Math.min(45, newRotation))
+    setRotation(clampedRotation)
+
+    // Log rotation changes occasionally (same throttle as shadow logging)
+    const timeSinceLastLog = now - lastLogTimeRef.current
+    if (timeSinceLastLog > 200) {
+      console.log(
+        `[GrabPoint] Rotation: ${clampedRotation.toFixed(1)}° (influence: ${rotationInfluence.toFixed(1)}°, cross: ${crossProduct.toFixed(0)})`
+      )
+    }
+
+    // Update card position - keep grab point under cursor while rotating
+    // Calculate the rotated grab offset
+    const rotationRad = (clampedRotation * Math.PI) / 180
+    const cosRot = Math.cos(rotationRad)
+    const sinRot = Math.sin(rotationRad)
+
+    // Rotate the grab offset by the current rotation angle
+    const rotatedGrabX = grabOffsetRef.current.x * cosRot - grabOffsetRef.current.y * sinRot
+    const rotatedGrabY = grabOffsetRef.current.x * sinRot + grabOffsetRef.current.y * cosRot
+
+    // Get container bounds for coordinate conversion
+    if (!containerRef.current || !cardRef.current) {
+      // Fallback to simple delta if refs not ready
+      setPosition({
+        x: dragStartRef.current.cardX + deltaX,
+        y: dragStartRef.current.cardY + deltaY,
+      })
+      return
+    }
+
+    const containerRect = containerRef.current.getBoundingClientRect()
+    const cardRect = cardRef.current.getBoundingClientRect()
+
+    // Current cursor position in viewport space
+    const cursorViewportX = e.clientX
+    const cursorViewportY = e.clientY
+
+    // Card center should be at: cursor - rotated grab offset (viewport space)
+    const cardCenterViewportX = cursorViewportX - rotatedGrabX
+    const cardCenterViewportY = cursorViewportY - rotatedGrabY
+
+    // Convert card center from viewport space to container space
+    const cardCenterContainerX = cardCenterViewportX - containerRect.left
+    const cardCenterContainerY = cardCenterViewportY - containerRect.top
+
+    // position.x/y represents translate() which positions the top-left corner
+    // So we need: top-left = center - (width/2, height/2)
+    setPosition({
+      x: cardCenterContainerX - cardRect.width / 2,
+      y: cardCenterContainerY - cardRect.height / 2,
+    })
+  }
+
+  const handlePointerUp = (e: React.PointerEvent) => {
+    setIsDragging(false)
+    dragStartRef.current = null
+
+    console.log('[Shadow] Drag released, speed decaying to 0')
+    console.log(
+      `[GrabPoint] Final rotation: ${rotation.toFixed(1)}° (base was ${baseRotationRef.current.toFixed(1)}°)`
+    )
+
+    // Gradually decay speed back to 0 for smooth shadow transition
+    const decayInterval = setInterval(() => {
+      setDragSpeed((prev) => {
+        const newSpeed = prev * 0.8 // Decay by 20% each frame
+        if (newSpeed < 1) {
+          clearInterval(decayInterval)
+          return 0
+        }
+        return newSpeed
+      })
+    }, 50) // Update every 50ms
+
+    // Release the pointer capture
+    e.currentTarget.releasePointerCapture(e.pointerId)
+  }
+
+  // Calculate dynamic shadow based on drag speed
+  // Base shadow: 0 8px 24px rgba(0, 0, 0, 0.3)
+  // Fast drag: 0 32px 64px rgba(0, 0, 0, 0.6)
+  const shadowY = 8 + (dragSpeed / 100) * 24 // 8px to 32px
+  const shadowBlur = 24 + (dragSpeed / 100) * 40 // 24px to 64px
+  const shadowOpacity = 0.3 + (dragSpeed / 100) * 0.3 // 0.3 to 0.6
+  const boxShadow = `0 ${shadowY}px ${shadowBlur}px rgba(0, 0, 0, ${shadowOpacity})`

  return (
-    <animated.div
+    <div
      ref={cardRef}
-      {...bind()}
+      onPointerDown={handlePointerDown}
+      onPointerMove={handlePointerMove}
+      onPointerUp={handlePointerUp}
      style={{
        position: 'absolute',
        left: 0,
        top: 0,
-        transform: to(
-          [x, y, rotation, scale],
-          (x, y, r, s) => `translate(${x}px, ${y}px) rotate(${r}deg) scale(${s})`
-        ),
-        transformOrigin,
+        transform: `translate(${position.x}px, ${position.y}px) rotate(${rotation}deg) scale(${isDragging ? 1.05 : 1})`,
        zIndex,
        touchAction: 'none',
-        cursor: 'grab',
+        cursor: isDragging ? 'grabbing' : 'grab',
+        transition: isDragging ? 'none' : 'transform 0.2s ease-out',
      }}
      className={css({
        userSelect: 'none',
-        _active: {
-          cursor: 'grabbing',
-        },
      })}
    >
      <div
+        style={{
+          boxShadow, // Dynamic shadow based on drag speed
+        }}
        className={css({
          bg: 'white',
          rounded: 'lg',
          p: '4',
-          boxShadow: '0 8px 24px rgba(0, 0, 0, 0.3)',
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          gap: '2',
          minW: '120px',
          border: '2px solid rgba(0, 0, 0, 0.1)',
-          transition: 'box-shadow 0.2s',
-          _hover: {
-            boxShadow: '0 12px 32px rgba(0, 0, 0, 0.4)',
-          },
+          transition: 'box-shadow 0.1s', // Quick transition for responsive feel
        })}
      >
        {/* Abacus visualization */}
@@ -288,7 +339,7 @@ function DraggableCard({ card }: DraggableCardProps) {
            transformOrigin: 'center',
          })}
        >
-          <AbacusReact value={card.number} columns={3} beadShape="circle" />
+          <AbacusReact value={card.number} columns={3} beadShape={appConfig.beadShape} />
        </div>

        {/* Number display */}
@@ -303,6 +354,6 @@ function DraggableCard({ card }: DraggableCardProps) {
          {card.number}
        </div>
      </div>
-    </animated.div>
+    </div>
  )
 }
--- a/apps/web/src/components/LevelSliderDisplay.tsx
+++ b/apps/web/src/components/LevelSliderDisplay.tsx
@@ -412,8 +412,9 @@ export function LevelSliderDisplay({
                  ? 'violet.500'
                  : 'amber.500',
          rounded: 'xl',
-          p: { base: '6', md: '8' },
+          p: { base: '4', md: '8' },
          height: { base: 'auto', md: '700px' },
+          maxHeight: { base: '500px', md: 'none' },
          display: 'flex',
          flexDirection: 'column',
        })}
@@ -448,7 +449,7 @@ export function LevelSliderDisplay({
                    key={index}
                    onClick={() => setCurrentIndex(index)}
                    className={css({
-                      fontSize: '4xl',
+                      fontSize: { base: '2xl', sm: '3xl', md: '4xl' },
                      opacity: index === currentIndex ? '1' : '0.3',
                      transition: 'all 0.2s',
                      cursor: 'pointer',
@@ -500,8 +501,8 @@ export function LevelSliderDisplay({
                  alignItems: 'center',
                  justifyContent: 'center',
                  position: 'relative',
-                  w: '180px',
-                  h: '128px',
+                  w: { base: '120px', md: '180px' },
+                  h: { base: '96px', md: '128px' },
                  bg: 'transparent',
                  cursor: 'grab',
                  transition: 'transform 0.15s ease-out, left 0.3s ease-out',
@@ -514,7 +515,12 @@ export function LevelSliderDisplay({
                  _active: { cursor: 'grabbing' },
                })}
              >
-                <div className={css({ opacity: 0.75 })}>
+                <div
+                  className={css({
+                    opacity: 0.75,
+                    transform: { base: 'scale(0.75)', md: 'scale(1)' },
+                  })}
+                >
                  <StandaloneBead
                    size={128}
                    color={currentLevel.color === 'violet' ? '#8b5cf6' : '#22c55e'}
@@ -607,14 +613,16 @@ export function LevelSliderDisplay({
        <div
          className={css({
            display: 'flex',
+            flexDirection: { base: 'column', lg: 'row' },
            gap: '4',
-            p: '6',
+            p: { base: '4', md: '6' },
            bg: 'rgba(0, 0, 0, 0.3)',
            rounded: 'lg',
            border: '1px solid',
            borderColor: 'gray.700',
            overflow: 'hidden',
            flex: 1,
+            minH: 0, // Allow flex shrinking
          })}
        >
          {/* Level Details (only for Kyu levels) */}
@@ -633,12 +641,14 @@ export function LevelSliderDisplay({
                <div
                  className={css({
                    flex: '0 0 auto',
-                    display: 'grid',
+                    display: { base: 'none', lg: 'grid' },
                    gridTemplateColumns: 'repeat(2, 1fr)',
                    gap: '2',
                    p: '2',
+                    w: '100%',
                    maxW: '400px',
                    alignContent: 'center',
+                    justifyItems: 'center',
                  })}
                >
                  {sections.map((section, idx) => {
@@ -666,8 +676,10 @@ export function LevelSliderDisplay({
                          justifyContent: 'center',
                          gap: '1.5',
                          opacity: hasData ? 1 : 0.3,
-                          width: '170px',
-                          height: '150px',
+                          w: { base: '100%', sm: 'auto' },
+                          minW: { sm: '140px' },
+                          maxW: { base: '170px', sm: '170px' },
+                          minH: '150px',
                          _hover: hasData
                            ? {
                                borderColor: 'gray.500',
@@ -733,13 +745,18 @@ export function LevelSliderDisplay({
              ) : null
            })()}

-          {/* Abacus (right-aligned for Kyu, centered for Dan) */}
+          {/* Abacus (centered on mobile, right-aligned for Kyu on desktop, centered for Dan) */}
          <div
            className={css({
              display: 'flex',
-              justifyContent: currentLevel.type === 'kyu' ? 'flex-end' : 'center',
+              justifyContent:
+                currentLevel.type === 'kyu' ? { base: 'center', lg: 'flex-end' } : 'center',
              alignItems: 'center',
              flex: 1,
+              overflowX: 'auto',
+              overflowY: 'hidden',
+              minW: 0, // Allow flex shrinking
+              minH: 0, // Allow flex shrinking
            })}
          >
            <animated.div
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "soroban-monorepo",
-  "version": "4.57.10",
+  "version": "4.64.2",
  "private": true,
  "description": "Beautiful Soroban Flashcard Generator - Monorepo",
  "workspaces": [