fix: ensure abacus visibility in memory quiz display phase

Replace pre-generated large TypstSoroban components with fresh
instances using proper dimensions (240pt x 320pt) and scaling
(1.5x) in DisplayPhase. This fixes abacus visibility during
the memorize phase by avoiding oversized transparent SVGs.

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

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

apps/web/src/app/games/memory-quiz/page.tsx

@@ -500,15 +500,19 @@ function DisplayPhase({ state, dispatch }: { state: SorobanQuizState; dispatch:
           justifyContent: 'center',
           margin: '0 auto',
           transition: 'transform 0.3s ease',
-          '& svg': {
-            width: '100%',
-            height: '100%',
-            maxWidth: '100%',
-            maxHeight: '100%',
-            objectFit: 'contain'
-          }
+          overflow: 'hidden'
         })}>
-          {currentCard.svgComponent}
+          <div className={css({
+            transform: 'scale(1.5)',
+            transformOrigin: 'center'
+          })}>
+            <TypstSoroban
+              number={currentCard.number}
+              width="240pt"
+              height="320pt"
+              transparent={true}
+            />
+          </div>
         </div>
       )}
     </div>