Refactor Game and Home screens for improved navigation and layout

- Updated HomeScreen to remove unnecessary time parameter in routing for singleplayer mode.
- Modified GameScreen to replace the back navigation with a direct route to the home screen.
- Enhanced layout adjustments in GameScreen and ResultsScreen for better responsiveness and padding based on device insets.

Author: codergautam

mobile/app/(tabs)/home.tsx

@@ -157,7 +157,7 @@ export default function HomeScreen() {
       case 'singleplayer':
         router.push({
           pathname: '/game/[id]',
-          params: { id: 'singleplayer', map: 'all', rounds: '5', time: '60' },
+          params: { id: 'singleplayer', map: 'all', rounds: '5' },
         });
         break;
       case 'rankedDuel':

mobile/app/game/[id].tsx

@@ -68,6 +68,7 @@ export default function GameScreen() {
   const router = useRouter();
   const { width, height } = useWindowDimensions();
   const insets = useSafeAreaInsets();
+  const isSingleplayer = id === 'singleplayer';
 
   const [isLoading, setIsLoading] = useState(true);
   const [loadError, setLoadError] = useState<string | null>(null);
@@ -344,7 +345,7 @@ export default function GameScreen() {
   }, [gameState, router]);
 
   const handleQuit = () => {
-    router.back();
+    router.replace('/(tabs)/home');
   };
 
   const getPointsColor = (pts: number) => {
@@ -395,9 +396,9 @@ export default function GameScreen() {
         />
       </View>
 
-      {/* Timer pill - top right, matching web .timer styling */}
+      {/* Round/score pill - top right */}
       {!gameState.isShowingResult && (
-        <SafeAreaView style={styles.timerContainer} edges={['top']} pointerEvents="box-none">
+        <SafeAreaView style={[styles.timerContainer, { paddingRight: Math.max(insets.right, spacing.lg) }]} edges={['top']} pointerEvents="box-none">
           <View style={styles.timerPill}>
             <Text style={styles.timerText}>
               Round {gameState.currentRound}/{gameState.totalRounds}
@@ -406,16 +407,18 @@ export default function GameScreen() {
               {gameState.totalScore.toLocaleString()} pts
             </Text>
           </View>
-          <GameTimer
-            timeRemaining={gameState.timePerRound}
-            onTimeUp={handleTimeUp}
-            isPaused={gameState.isShowingResult}
-          />
+          {!isSingleplayer && (
+            <GameTimer
+              timeRemaining={gameState.timePerRound}
+              onTimeUp={handleTimeUp}
+              isPaused={gameState.isShowingResult}
+            />
+          )}
         </SafeAreaView>
       )}
 
       {/* Close button - top left */}
-      <SafeAreaView style={styles.closeButtonContainer} edges={['top']} pointerEvents="box-none">
+      <SafeAreaView style={[styles.closeButtonContainer, { paddingLeft: Math.max(insets.left, spacing.lg) }]} edges={['top']} pointerEvents="box-none">
         <Pressable
           style={({ pressed }) => [
             styles.closeButton,
@@ -459,7 +462,7 @@ export default function GameScreen() {
         <Animated.View
           style={[
             styles.mapButtonsRow,
-            { bottom: height * 0.7 + 8 },
+            { bottom: height * 0.7 + 8, paddingHorizontal: Math.max(insets.right, spacing.md) },
             {
               opacity: mapBtnsAnim,
               transform: [{
@@ -525,6 +528,7 @@ export default function GameScreen() {
             {
               transform: [{ scale: fabScaleAnim }],
               bottom: Math.max(insets.bottom, 20) + 20,
+              right: Math.max(insets.right, 20),
             },
           ]}
         >
@@ -554,6 +558,8 @@ export default function GameScreen() {
             {
               transform: [{ translateY: bannerSlideAnim }],
               paddingBottom: Math.max(insets.bottom, spacing.lg),
+              paddingLeft: insets.left,
+              paddingRight: insets.right,
             },
           ]}
         >

mobile/app/game/results.tsx

@@ -10,7 +10,7 @@ import {
   Platform,
   useWindowDimensions,
 } from 'react-native';
-import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useLocalSearchParams, useRouter } from 'expo-router';
 import { Ionicons } from '@expo/vector-icons';
 import { LinearGradient } from 'expo-linear-gradient';
@@ -548,8 +548,7 @@ export default function GameResultsScreen() {
           </View>
 
           {/* Sidebar — matches web .game-summary-sidebar */}
-          <SafeAreaView
-            edges={['top', 'bottom', 'right']}
+          <View
             style={[styles.sidebar, { width: SIDEBAR_WIDTH }]}
           >
             <LinearGradient
@@ -568,7 +567,7 @@ export default function GameResultsScreen() {
                 {renderRoundsList()}
               </ScrollView>
             </LinearGradient>
-          </SafeAreaView>
+          </View>
         </View>
       </View>
     );

spec-claude/01-overview.md

@@ -1,7 +1,5 @@
 # WorldGuessr - Overview & Architecture
-Hi Claude, today we will primarily be working on stuff for the WorldGuessr mobile app located in the mobile/ folder of this directory. To  
-  get more context about this project please read the files in spec-claude/ which are a good starting place to understand this proj. I        
-  suggest you take a bit of time to immerse yourself with that and the codebase in mobile/ first and we will proceed!  
+n
 
 ## What is WorldGuessr
 - Free GeoGuessr alternative web game