fix(mobile): restore abacus visibility in "Your Journey" section

On mobile screens (base breakpoint), the level details cards were taking
up all vertical space within the 500px maxHeight constraint, pushing the
abacus completely out of view.

Solution: Hide level details on mobile (display: { base: 'none', lg: 'grid' })
so mobile users see only the slider and abacus, while desktop users see
all components. Also added minH: 0 to containers to ensure proper flex
shrinking behavior.

Changes to LevelSliderDisplay.tsx:
- Level details grid now hidden on base breakpoint, visible on lg+
- Simplified grid columns to single value since it's desktop-only
- Added minH: 0 to flex containers for proper shrinking

Tested on iPhone 14 (390px viewport).

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

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

apps/web/src/components/LevelSliderDisplay.tsx

@@ -622,6 +622,7 @@ export function LevelSliderDisplay({
             borderColor: 'gray.700',
             overflow: 'hidden',
             flex: 1,
+            minH: 0, // Allow flex shrinking
           })}
         >
           {/* Level Details (only for Kyu levels) */}
@@ -640,16 +641,12 @@ export function LevelSliderDisplay({
                 <div
                   className={css({
                     flex: '0 0 auto',
-                    display: 'grid',
-                    gridTemplateColumns: {
-                      base: 'repeat(2, 1fr)',
-                      sm: 'repeat(3, 1fr)',
-                      lg: 'repeat(2, 1fr)',
-                    },
+                    display: { base: 'none', lg: 'grid' },
+                    gridTemplateColumns: 'repeat(2, 1fr)',
                     gap: '2',
                     p: '2',
                     w: '100%',
-                    maxW: { base: '100%', lg: '400px' },
+                    maxW: '400px',
                     alignContent: 'center',
                     justifyItems: 'center',
                   })}
@@ -748,7 +745,7 @@ 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',
@@ -759,6 +756,7 @@ export function LevelSliderDisplay({
               overflowX: 'auto',
               overflowY: 'hidden',
               minW: 0, // Allow flex shrinking
+              minH: 0, // Allow flex shrinking
             })}
           >
             <animated.div