debug: add logging for pointer lock and custom cursor

Add extensive console logging to debug cursor visibility:

**PlayingPhase:**
- Log when pointer lock listeners attach/detach
- Log pointer lock state changes with element details
- Log container click events with conditions
- Log pointerLocked state changes

**MapRenderer:**
- Log custom cursor render conditions on every render
- Log when cursor should be visible
- Log cursor position when rendering

This will help diagnose why custom cursor isn't visible.

🤖 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

@@ -1222,24 +1222,36 @@ export function MapRenderer({
       ))}
 
       {/* Custom Cursor - Visible when pointer lock is active */}
-      {pointerLocked && cursorPosition && (
-        <div
-          data-element="custom-cursor"
-          style={{
-            position: 'absolute',
-            left: `${cursorPosition.x}px`,
-            top: `${cursorPosition.y}px`,
-            width: '20px',
-            height: '20px',
-            border: `2px solid ${isDark ? '#60a5fa' : '#3b82f6'}`,
-            borderRadius: '50%',
-            pointerEvents: 'none',
-            zIndex: 200,
-            transform: 'translate(-50%, -50%)',
-            backgroundColor: 'transparent',
-            boxShadow: '0 0 0 1px rgba(0, 0, 0, 0.3)',
-          }}
-        >
+      {(() => {
+        console.log('[Custom Cursor] Render check:', {
+          pointerLocked,
+          hasCursorPosition: !!cursorPosition,
+          cursorPosition,
+          shouldRender: pointerLocked && cursorPosition,
+        })
+
+        if (pointerLocked && cursorPosition) {
+          console.log('[Custom Cursor] ✅ RENDERING at position:', cursorPosition)
+        }
+
+        return pointerLocked && cursorPosition ? (
+          <div
+            data-element="custom-cursor"
+            style={{
+              position: 'absolute',
+              left: `${cursorPosition.x}px`,
+              top: `${cursorPosition.y}px`,
+              width: '20px',
+              height: '20px',
+              border: `2px solid ${isDark ? '#60a5fa' : '#3b82f6'}`,
+              borderRadius: '50%',
+              pointerEvents: 'none',
+              zIndex: 200,
+              transform: 'translate(-50%, -50%)',
+              backgroundColor: 'transparent',
+              boxShadow: '0 0 0 1px rgba(0, 0, 0, 0.3)',
+            }}
+          >
           {/* Crosshair */}
           <div
             style={{
@@ -1264,7 +1276,8 @@ export function MapRenderer({
             }}
           />
         </div>
-      )}
+        ) : null
+      })()}
 
       {/* Magnifier Window - Always rendered when cursor exists, opacity controlled by spring */}
       {cursorPosition && svgRef.current && containerRef.current && (

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

@@ -33,6 +33,12 @@ export function PlayingPhase() {
   useEffect(() => {
     const handlePointerLockChange = () => {
       const isLocked = document.pointerLockElement === containerRef.current
+      console.log('[PlayingPhase] Pointer lock change event:', {
+        isLocked,
+        pointerLockElement: document.pointerLockElement,
+        containerElement: containerRef.current,
+        elementsMatch: document.pointerLockElement === containerRef.current,
+      })
       setPointerLocked(isLocked)
       console.log('[Pointer Lock]', isLocked ? '🔒 LOCKED' : '🔓 UNLOCKED')
     }
@@ -46,9 +52,12 @@ export function PlayingPhase() {
     document.addEventListener('pointerlockchange', handlePointerLockChange)
     document.addEventListener('pointerlockerror', handlePointerLockError)
 
+    console.log('[PlayingPhase] Pointer lock listeners attached')
+
     return () => {
       document.removeEventListener('pointerlockchange', handlePointerLockChange)
       document.removeEventListener('pointerlockerror', handlePointerLockError)
+      console.log('[PlayingPhase] Pointer lock listeners removed')
     }
   }, [])
 
@@ -64,13 +73,30 @@ export function PlayingPhase() {
 
   // Request pointer lock on first click
   const handleContainerClick = () => {
+    console.log('[PlayingPhase] Container clicked:', {
+      pointerLocked,
+      hasContainer: !!containerRef.current,
+      showLockPrompt,
+      willRequestLock: !pointerLocked && containerRef.current && showLockPrompt,
+    })
+
     if (!pointerLocked && containerRef.current && showLockPrompt) {
       console.log('[Pointer Lock] 🔒 REQUESTING pointer lock (user clicked)')
-      containerRef.current.requestPointerLock()
+      try {
+        containerRef.current.requestPointerLock()
+        console.log('[Pointer Lock] Request sent successfully')
+      } catch (error) {
+        console.error('[Pointer Lock] Request failed with error:', error)
+      }
       setShowLockPrompt(false) // Hide prompt after first click
     }
   }
 
+  // Log when pointerLocked state changes
+  useEffect(() => {
+    console.log('[PlayingPhase] pointerLocked state changed:', pointerLocked)
+  }, [pointerLocked])
+
   // Get the display name for the current prompt
   const currentRegionName = state.currentPrompt
     ? mapData.regions.find((r) => r.id === state.currentPrompt)?.name