fix(complement-race): improve abacus display in equations

- Add hideInactiveBeads to AbacusTarget for cleaner minimal display
- Improve vertical centering with translateY adjustment in equations
- Apply changes consistently across practice, survival, and sprint modes

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

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

apps/web/src/app/games/complement-race/components/AbacusTarget.tsx

@@ -23,6 +23,7 @@ export function AbacusTarget({ number }: AbacusTargetProps) {
         columns={1}
         interactive={false}
         showNumbers={false}
+        hideInactiveBeads={true}
         scaleFactor={0.72}
         customStyles={{
           columnPosts: { opacity: 0 }

apps/web/src/app/games/complement-race/components/GameDisplay.tsx

@@ -332,8 +332,8 @@ export function GameDisplay() {
               <span style={{ color: '#6b7280' }}>+</span>
               {state.currentQuestion.showAsAbacus ? (
                 <div style={{
-                  transform: 'scale(2.4)',
-                  transformOrigin: 'center',
+                  transform: 'scale(2.4) translateY(8%)',
+                  transformOrigin: 'center center',
                   display: 'flex',
                   alignItems: 'center',
                   justifyContent: 'center'

apps/web/src/app/games/complement-race/components/RaceTrack/GameHUD.tsx

@@ -172,8 +172,8 @@ export const GameHUD = memo(({
             <span style={{ color: '#6b7280' }}>+</span>
             {currentQuestion.showAsAbacus ? (
               <div style={{
-                transform: 'scale(2.4)',
-                transformOrigin: 'center',
+                transform: 'scale(2.4) translateY(8%)',
+                transformOrigin: 'center center',
                 display: 'flex',
                 alignItems: 'center',
                 justifyContent: 'center'