feat(games): add horizontal scroll support to carousels

Both games and player carousels now support horizontal scrolling with:
- Mouse wheel horizontal scroll (trackpad swipe gestures)
- Shift + vertical scroll for horizontal navigation
- Prevents page scroll when interacting with carousel

Implemented with custom wheel event handlers that detect horizontal
scroll intent and call embla's scrollNext/scrollPrev methods.

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

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

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

@@ -66,6 +66,31 @@ function GamesPageContent() {
     }
   }, [gamesEmblaApi, onGamesSelect])
 
+  // Enable horizontal scrolling with mouse wheel for games carousel
+  useEffect(() => {
+    if (!gamesEmblaApi) return
+    const containerNode = gamesEmblaApi.rootNode()
+    if (!containerNode) return
+
+    const handleWheel = (event: WheelEvent) => {
+      // Only handle horizontal scroll or shift+vertical scroll
+      if (Math.abs(event.deltaX) > Math.abs(event.deltaY) || event.shiftKey) {
+        event.preventDefault()
+        const delta = event.shiftKey ? event.deltaY : event.deltaX
+
+        // Scroll the carousel based on wheel delta
+        if (delta > 0) {
+          gamesEmblaApi.scrollNext()
+        } else {
+          gamesEmblaApi.scrollPrev()
+        }
+      }
+    }
+
+    containerNode.addEventListener('wheel', handleWheel, { passive: false })
+    return () => containerNode.removeEventListener('wheel', handleWheel)
+  }, [gamesEmblaApi])
+
   // Player carousel callbacks
   const onSelect = useCallback(() => {
     if (!emblaApi) return
@@ -84,6 +109,31 @@ function GamesPageContent() {
     }
   }, [emblaApi, onSelect])
 
+  // Enable horizontal scrolling with mouse wheel for player carousel
+  useEffect(() => {
+    if (!emblaApi) return
+    const containerNode = emblaApi.rootNode()
+    if (!containerNode) return
+
+    const handleWheel = (event: WheelEvent) => {
+      // Only handle horizontal scroll or shift+vertical scroll
+      if (Math.abs(event.deltaX) > Math.abs(event.deltaY) || event.shiftKey) {
+        event.preventDefault()
+        const delta = event.shiftKey ? event.deltaY : event.deltaX
+
+        // Scroll the carousel based on wheel delta
+        if (delta > 0) {
+          emblaApi.scrollNext()
+        } else {
+          emblaApi.scrollPrev()
+        }
+      }
+    }
+
+    containerNode.addEventListener('wheel', handleWheel, { passive: false })
+    return () => containerNode.removeEventListener('wheel', handleWheel)
+  }, [emblaApi])
+
   return (
     <div
       className={css({