feat(levels): add hover tracking to slider for real-time level preview

Added mouse hover functionality to the slider so it responds as you move
your mouse across the track:
- Calculates hover position based on mouse X coordinate
- Updates slider value in real-time as you hover
- Tracks hover state with isHovering flag
- Slider thumb follows your mouse smoothly with CSS transitions

Now you can explore levels by simply hovering across the slider track,
in addition to clicking emoji tick marks or dragging the thumb.

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

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

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

@@ -183,8 +183,18 @@ const allLevels = [
 
 export default function LevelsPage() {
   const [currentIndex, setCurrentIndex] = useState(0)
+  const [isHovering, setIsHovering] = useState(false)
   const currentLevel = allLevels[currentIndex]
 
+  // Handle hover on slider track
+  const handleSliderHover = (e: React.MouseEvent<HTMLSpanElement>) => {
+    const rect = e.currentTarget.getBoundingClientRect()
+    const x = e.clientX - rect.left
+    const percentage = x / rect.width
+    const index = Math.round(percentage * (allLevels.length - 1))
+    setCurrentIndex(Math.max(0, Math.min(allLevels.length - 1, index)))
+  }
+
   // Calculate scale factor based on number of columns to fit the page
   // Use constrained range to prevent huge size differences between levels
   // Min 1.2 (for 30-column Dan levels) to Max 2.0 (for 2-column Kyu levels)
@@ -367,6 +377,9 @@ export default function LevelsPage() {
                     min={0}
                     max={allLevels.length - 1}
                     step={1}
+                    onMouseMove={handleSliderHover}
+                    onMouseEnter={() => setIsHovering(true)}
+                    onMouseLeave={() => setIsHovering(false)}
                     className={css({
                       position: 'relative',
                       display: 'flex',