feat: show magnifier only when current target region needs magnification

Only display the magnifier when the region the player is currently being asked to find would require magnification to be clickable. This makes the magnifier context-aware and only appears when it's actually useful for the current game objective.

- Add targetNeedsMagnification state to track if current prompt region is small
- Add useEffect to check target region size when currentPrompt changes
- Update shouldShow logic to require both targetNeedsMagnification AND hasSmallRegion
- Use same thresholds as region detection (15px width/height, 200px² area)
- Log magnification check results for debugging

Now the magnifier won't appear when looking for large countries, even when hovering near small regions like Vatican City.

🤖 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/MapRenderer.tsx

@@ -254,6 +254,9 @@ export function MapRenderer({
   const [targetLeft, setTargetLeft] = useState(20)
   const [smallestRegionSize, setSmallestRegionSize] = useState<number>(Infinity)
 
+  // Track whether current target region needs magnification
+  const [targetNeedsMagnification, setTargetNeedsMagnification] = useState(false)
+
   // Debug: Track bounding boxes for visualization
   const [debugBoundingBoxes, setDebugBoundingBoxes] = useState<DebugBoundingBox[]>([])
   // Debug: Track full zoom search result for detailed panel
@@ -416,6 +419,48 @@ export function MapRenderer({
     })
   }, [targetOpacity, targetTop, targetLeft, smallestRegionSize, magnifierApi])
 
+  // Check if current target region needs magnification
+  useEffect(() => {
+    if (!currentPrompt || !svgRef.current || !containerRef.current) {
+      setTargetNeedsMagnification(false)
+      return
+    }
+
+    // Find the path element for the target region
+    const svgElement = svgRef.current
+    const path = svgElement.querySelector(`path[data-region-id="${currentPrompt}"]`)
+    if (!path || !(path instanceof SVGGeometryElement)) {
+      setTargetNeedsMagnification(false)
+      return
+    }
+
+    // Get the bounding box size
+    const bbox = path.getBoundingClientRect()
+    const pixelWidth = bbox.width
+    const pixelHeight = bbox.height
+    const pixelArea = pixelWidth * pixelHeight
+
+    // Use same thresholds as region detection
+    const SMALL_REGION_THRESHOLD = 15 // pixels
+    const SMALL_REGION_AREA_THRESHOLD = 200 // px²
+
+    const isVerySmall =
+      pixelWidth < SMALL_REGION_THRESHOLD ||
+      pixelHeight < SMALL_REGION_THRESHOLD ||
+      pixelArea < SMALL_REGION_AREA_THRESHOLD
+
+    setTargetNeedsMagnification(isVerySmall)
+
+    console.log('[MapRenderer] Target region magnification check:', {
+      regionId: currentPrompt,
+      pixelWidth: pixelWidth.toFixed(2),
+      pixelHeight: pixelHeight.toFixed(2),
+      pixelArea: pixelArea.toFixed(2),
+      isVerySmall,
+      needsMagnification: isVerySmall,
+    })
+  }, [currentPrompt, svgDimensions]) // Re-check when prompt or SVG size changes
+
   const [labelPositions, setLabelPositions] = useState<RegionLabelPosition[]>([])
   const [smallRegionLabelPositions, setSmallRegionLabelPositions] = useState<
     Array<{
@@ -1060,8 +1105,8 @@ export function MapRenderer({
       console.log('[Zoom Search] Sorted regions (smallest first):', sortedSizes)
     }
 
-    // Show magnifier only when there are small regions (< 15px)
+    // Show magnifier only when the current target region needs magnification
-    const shouldShow = hasSmallRegion
+    const shouldShow = targetNeedsMagnification && hasSmallRegion
 
     // Update smallest region size for adaptive cursor dampening
     if (shouldShow && detectedSmallestSize !== Infinity) {