Enhance GameScreen and GuessMap functionality

- Added state management for map mounting in GameScreen to prevent initialization at height 0.
- Implemented animated transitions for map buttons in GameScreen, improving user experience.
- Updated GuessMap to handle fast tap detection for map interactions, bypassing the default delay.
- Refactored map press handling to improve responsiveness and reliability.

Also, added a new command "mcp__ide__getDiagnostics" in settings.local.json.

Author: codergautam

.claude/settings.local.json

@@ -14,7 +14,8 @@
       "Bash(do echo \"=== $lang ===\")",
       "Bash(done)",
       "Bash(find:*)",
-      "Bash(cat:*)"
+      "Bash(cat:*)",
+      "mcp__ide__getDiagnostics"
     ],
     "deny": []
   }

mobile/app/game/[id].tsx

@@ -86,12 +86,22 @@ export default function GameScreen() {
   const [guessPosition, setGuessPosition] = useState<{ lat: number; lng: number } | null>(null);
   // Map is HIDDEN by default on mobile, matching web behavior
   const [miniMapShown, setMiniMapShown] = useState(false);
+  // Only mount the map once it's first shown (avoids initializing at height 0)
+  const [mapMounted, setMapMounted] = useState(false);
 
   // Animation values
   const mapSlideAnim = useRef(new Animated.Value(0)).current; // 0 = hidden, 1 = shown
+  const mapBtnsAnim = useRef(new Animated.Value(0)).current; // 0 = hidden, 1 = shown
   const bannerSlideAnim = useRef(new Animated.Value(300)).current;
   const fabScaleAnim = useRef(new Animated.Value(1)).current;
 
+  // Mount map on first show so it initializes with actual size
+  useEffect(() => {
+    if (miniMapShown || gameState.isShowingResult) {
+      setMapMounted(true);
+    }
+  }, [miniMapShown, gameState.isShowingResult]);
+
   // Animate map slide in/out
   useEffect(() => {
     if (gameState.isShowingResult) {
@@ -119,6 +129,25 @@ export default function GameScreen() {
     }
   }, [miniMapShown, gameState.isShowingResult]);
 
+  // Map buttons (Guess + collapse) slide up with map
+  useEffect(() => {
+    if (miniMapShown && !gameState.isShowingResult) {
+      mapBtnsAnim.setValue(0);
+      Animated.spring(mapBtnsAnim, {
+        toValue: 1,
+        friction: 8,
+        tension: 50,
+        useNativeDriver: true,
+      }).start();
+    } else {
+      Animated.timing(mapBtnsAnim, {
+        toValue: 0,
+        duration: 150,
+        useNativeDriver: true,
+      }).start();
+    }
+  }, [miniMapShown, gameState.isShowingResult]);
+
   // Banner slide animation
   useEffect(() => {
     if (gameState.isShowingResult) {
@@ -397,22 +426,38 @@ export default function GameScreen() {
         ]}
         pointerEvents={miniMapShown || gameState.isShowingResult ? 'auto' : 'none'}
       >
-        <GuessMap
-          guessPosition={guessPosition}
-          actualPosition={
-            gameState.isShowingResult
-              ? { lat: currentLocation.lat, lng: currentLocation.long }
-              : undefined
-          }
-          onMapPress={handleMapPress}
-          isExpanded={true}
-        />
+        {mapMounted && (
+          <GuessMap
+            guessPosition={guessPosition}
+            actualPosition={
+              gameState.isShowingResult
+                ? { lat: currentLocation.lat, lng: currentLocation.long }
+                : undefined
+            }
+            onMapPress={handleMapPress}
+            isExpanded={true}
+          />
+        )}
       </Animated.View>
 
       {/* ═══ MOBILE GUESS BUTTONS - above map when map is open ═══ */}
       {/* Matches web: .mobile_minimap__btns.miniMapShown */}
       {miniMapShown && !gameState.isShowingResult && (
-        <View style={[styles.mapButtonsRow, { bottom: height * 0.7 + 8 }]}>
+        <Animated.View
+          style={[
+            styles.mapButtonsRow,
+            { bottom: height * 0.7 + 8 },
+            {
+              opacity: mapBtnsAnim,
+              transform: [{
+                translateY: mapBtnsAnim.interpolate({
+                  inputRange: [0, 1],
+                  outputRange: [40, 0],
+                }),
+              }],
+            },
+          ]}
+        >
           {/* Guess submit button (blue) */}
           <Pressable
             onPress={handleSubmitGuess}
@@ -455,7 +500,7 @@ export default function GameScreen() {
               <Ionicons name="arrow-down" size={24} color={colors.white} />
             </LinearGradient>
           </Pressable>
-        </View>
+        </Animated.View>
       )}
 
       {/* ═══ FLOATING GUESS FAB - bottom right when map hidden ═══ */}
@@ -662,9 +707,7 @@ const styles = StyleSheet.create({
     borderRadius: 14,
     overflow: 'hidden',
   },
-  guessSubmitBtnDisabled: {
-    opacity: 0.6,
-  },
+  guessSubmitBtnDisabled: {},
   guessSubmitBtnGradient: {
     flex: 1,
     justifyContent: 'center',

mobile/src/components/game/GuessMap.tsx

@@ -1,5 +1,5 @@
-import { useRef, useEffect } from 'react';
-import { View, StyleSheet, Platform } from 'react-native';
+import { useRef, useEffect, useCallback } from 'react';
+import { View, StyleSheet, Platform, GestureResponderEvent } from 'react-native';
 import MapView, { Marker, Polyline, PROVIDER_GOOGLE } from 'react-native-maps';
 import { colors } from '../../shared';
 
@@ -10,13 +10,18 @@ interface GuessMapProps {
   isExpanded?: boolean;
 }
 
+const TAP_SLOP = 10; // max px movement to count as tap
+const TAP_MAX_MS = 300; // max duration to count as tap
+
 export default function GuessMap({
   guessPosition,
   actualPosition,
   onMapPress,
   isExpanded,
 }: GuessMapProps) {
   const mapRef = useRef<MapView>(null);
+  const touchStart = useRef({ x: 0, y: 0, time: 0 });
+  const lastFastTap = useRef(0);
 
   // When showing result, fit both markers in view
   useEffect(() => {
@@ -33,15 +38,54 @@ export default function GuessMap({
     }
   }, [actualPosition, guessPosition]);
 
-  const handleMapPress = (event: any) => {
-    if (actualPosition) return; // Don't allow new guesses when showing result
+  // Fast tap detection via raw touch events (bypasses MapView's ~300ms onPress delay)
+  const handleTouchStart = useCallback((e: GestureResponderEvent) => {
+    touchStart.current = {
+      x: e.nativeEvent.pageX,
+      y: e.nativeEvent.pageY,
+      time: Date.now(),
+    };
+  }, []);
+
+  const handleTouchEnd = useCallback(async (e: GestureResponderEvent) => {
+    if (actualPosition) return;
+
+    const dx = Math.abs(e.nativeEvent.pageX - touchStart.current.x);
+    const dy = Math.abs(e.nativeEvent.pageY - touchStart.current.y);
+    const dt = Date.now() - touchStart.current.time;
+
+    if (dx < TAP_SLOP && dy < TAP_SLOP && dt < TAP_MAX_MS && mapRef.current) {
+      try {
+        const coord = await (mapRef.current as any).coordinateForPoint({
+          x: e.nativeEvent.locationX,
+          y: e.nativeEvent.locationY,
+        });
+        if (coord) {
+          lastFastTap.current = Date.now();
+          onMapPress(coord.latitude, coord.longitude);
+        }
+      } catch {
+        // coordinateForPoint failed, fall through to MapView onPress
+      }
+    }
+  }, [actualPosition, onMapPress]);
+
+  // Fallback: MapView's built-in onPress (slower but reliable)
+  const handleMapPress = useCallback((event: any) => {
+    if (actualPosition) return;
+    // Skip if fast tap already handled this touch
+    if (Date.now() - lastFastTap.current < 500) return;
 
     const { latitude, longitude } = event.nativeEvent.coordinate;
     onMapPress(latitude, longitude);
-  };
+  }, [actualPosition, onMapPress]);
 
   return (
-    <View style={styles.container}>
+    <View
+      style={styles.container}
+      onTouchStart={handleTouchStart}
+      onTouchEnd={handleTouchEnd}
+    >
       <MapView
         ref={mapRef}
         style={styles.map}