fix: add zoom to selected continent and improve click detection

Fix two critical UX issues in the continent selector:

Auto-Zoom to Selected Continent:
- Calculate dynamic viewBox based on selected continent
- Use calculateContinentViewBox() to crop map to continent bounds
- Add 10% padding around continent for better visibility
- Smooth transition when switching between continents
- Shows full world when "All" is selected
- Selected continent fills the available space efficiently

Improved Click Detection:
- Add explicit pointerEvents: 'all' to all path elements
- Add stopPropagation() to prevent event bubbling conflicts
- Ensure all individual countries are clickable
- Better event handling for reliable click registration

Technical Changes:
- Import useMemo and calculateContinentViewBox from maps.ts
- Calculate viewBox dynamically based on selectedContinent
- Update SVG viewBox prop to use calculated value
- Add pointer-events style and stopPropagation to onClick handlers

User Experience:
- Clicking any country now reliably selects its continent
- Selected continent automatically zooms to fill the space
- Much easier to see and click individual countries
- Geographic details more visible when continent is selected

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

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

apps/web/src/arcade-games/know-your-world/components/ContinentSelector.tsx

@@ -1,9 +1,9 @@
 'use client'
 
-import { useState } from 'react'
+import { useState, useMemo } from 'react'
 import { css } from '@styled/css'
 import { useTheme } from '@/contexts/ThemeContext'
-import { WORLD_MAP } from '../maps'
+import { WORLD_MAP, calculateContinentViewBox } from '../maps'
 import { getContinentForCountry, CONTINENTS, type ContinentId } from '../continents'
 import { getRegionColor } from '../mapColors'
 
@@ -78,6 +78,11 @@ export function ContinentSelector({
     return 0.3
   }
 
+  // Calculate viewBox based on selected continent
+  const viewBox = useMemo(() => {
+    return calculateContinentViewBox(WORLD_MAP.regions, selectedContinent, WORLD_MAP.viewBox)
+  }, [selectedContinent])
+
   return (
     <div data-component="continent-selector">
       <div
@@ -111,7 +116,7 @@ export function ContinentSelector({
         })}
       >
         <svg
-          viewBox={WORLD_MAP.viewBox}
+          viewBox={viewBox}
           className={css({
             width: '100%',
             height: 'auto',
@@ -144,10 +149,14 @@ export function ContinentSelector({
                       setHoveredContinent(null)
                       setHoveredRegion(null)
                     }}
-                    onClick={() => onSelectContinent(continent.id)}
+                    onClick={(e) => {
+                      e.stopPropagation()
+                      onSelectContinent(continent.id)
+                    }}
                     style={{
                       cursor: 'pointer',
                       transition: 'all 0.15s ease',
+                      pointerEvents: 'all',
                     }}
                   />
                 ))}