feat(levels): make emoji tick marks clickable and remove redundant UI

- Added click handlers to emoji tick marks so you can click any emoji to jump to that level
- Added hover effects (opacity 0.6) and pointer cursor to tick marks
- Enabled pointer events on tick marks (parent has pointerEvents: 'none')
- Removed redundant "Drag or click the beads" instruction text
- Removed duplicated level info text below slider (info now only shows on slider thumb)

This simplifies the UI and makes the slider more interactive - you can now
click, drag, or hover over any emoji to explore different levels.

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

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

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

@@ -319,12 +319,6 @@ export default function LevelsPage() {
             >
               {/* Abacus-themed Radix Slider */}
               <div className={css({ mb: '6', px: { base: '2', md: '8' } })}>
-                <div className={css({ mb: '3', textAlign: 'center' })}>
-                  <p className={css({ fontSize: 'sm', color: 'gray.400' })}>
-                    Drag or click the beads to explore all levels
-                  </p>
-                </div>
-
                 <div className={css({ position: 'relative', py: '12' })}>
                   {/* Emoji tick marks */}
                   <div
@@ -351,10 +345,14 @@ export default function LevelsPage() {
                       {allLevels.map((level, index) => (
                         <div
                           key={index}
+                          onClick={() => setCurrentIndex(index)}
                           className={css({
                             fontSize: '4xl',
                             opacity: index === currentIndex ? '1' : '0.3',
                             transition: 'all 0.2s',
+                            cursor: 'pointer',
+                            pointerEvents: 'auto',
+                            _hover: { opacity: index === currentIndex ? '1' : '0.6' },
                           })}
                         >
                           {level.emoji}
@@ -499,49 +497,6 @@ export default function LevelsPage() {
                   <span>1st Kyu</span>
                   <span>10th Dan</span>
                 </div>
-
-                {/* Level Text - integrated with slider */}
-                <div
-                  className={css({
-                    textAlign: 'center',
-                    mt: '4',
-                    mb: '2',
-                  })}
-                >
-                  <h2
-                    className={css({
-                      fontSize: { base: 'xl', md: '2xl' },
-                      fontWeight: 'bold',
-                      color:
-                        currentLevel.color === 'green'
-                          ? 'green.400'
-                          : currentLevel.color === 'blue'
-                            ? 'blue.400'
-                            : currentLevel.color === 'violet'
-                              ? 'violet.400'
-                              : 'amber.400',
-                      mb: '1',
-                    })}
-                  >
-                    {currentLevel.level}
-                  </h2>
-                  {'name' in currentLevel && (
-                    <div
-                      className={css({
-                        fontSize: 'sm',
-                        color: 'gray.400',
-                        mb: '1',
-                      })}
-                    >
-                      {currentLevel.name}
-                    </div>
-                  )}
-                  {'minScore' in currentLevel && (
-                    <div className={css({ fontSize: 'xs', color: 'gray.500' })}>
-                      Minimum Score: {currentLevel.minScore} points
-                    </div>
-                  )}
-                </div>
               </div>
 
               {/* Abacus Display */}