refactor: move game name into room pane, remove player count

Major restructure of navigation when in a room:

**Before:**
- Separate title on left: "Memory Pairs ▼"
- Small room pill on right with mode and room name

**After:**
- Single comprehensive pane with 3-line stack:
  1. 🧩 Memory Pairs (12px, white, game name)
  2. ⚔️ Battle (11px, mode color, mode)
  3. Auto-generated Room (10px, light purple, room name)

**Changes:**
- Removed redundant player count (visible in avatars to the right)
- Game name now at top of room pane instead of separate title
- Entire pane is hover target for join code tooltip
- When NOT in room: shows original title + mode layout
- Progressive text sizing: 12px → 11px → 10px for hierarchy

**Benefits:**
- All session info in one cohesive, hoverable pane
- No duplicate game name on screen
- Clearer visual hierarchy with game name most prominent
- More space for player avatars on right

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

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

apps/web/src/components/nav/GameContextNav.tsx

@@ -146,7 +146,7 @@ export function GameContextNav({
         width: 'auto',
       }}
     >
-      {/* Left side: Title + Mode + Room */}
+      {/* Left side: Title (only when not in room) or Room info pane */}
       <div
         style={{
           display: 'flex',
@@ -155,53 +155,52 @@ export function GameContextNav({
           flex: 1,
         }}
       >
-        {/* Title with dropdown menu */}
-        <GameTitleMenu
-          navTitle={navTitle}
-          navEmoji={navEmoji}
-          onSetup={onSetup}
-          onNewGame={onNewGame}
-          onQuit={onExitSession}
-          showMenu={!canModifyPlayers}
-        />
-
-        {/* Mode + Room: show combined pane if in room, otherwise just mode */}
-        <div
-          style={{
-            marginLeft: 'auto',
-          }}
-        >
-          {roomInfo ? (
-            <RoomInfo
-              roomName={roomInfo.roomName}
-              gameName={roomInfo.gameName}
-              playerCount={roomInfo.playerCount}
-              joinCode={roomInfo.joinCode}
-              shouldEmphasize={shouldEmphasize}
-              gameMode={gameMode}
-              modeColor={
-                gameMode === 'battle' ? '#8b5cf6' :
-                gameMode === 'single' ? '#3b82f6' :
-                gameMode === 'tournament' ? '#f59e0b' :
-                '#6b7280'
-              }
-              modeEmoji={
-                gameMode === 'battle' ? '⚔️' :
-                gameMode === 'single' ? '🎯' :
-                gameMode === 'tournament' ? '🏆' :
-                '👥'
-              }
-              modeLabel={
-                gameMode === 'battle' ? 'Battle' :
-                gameMode === 'single' ? 'Solo' :
-                gameMode === 'tournament' ? 'Tournament' :
-                'Select Players'
-              }
+        {roomInfo ? (
+          // Show combined pane with game name, mode, and room
+          <RoomInfo
+            roomName={roomInfo.roomName}
+            gameName={roomInfo.gameName}
+            playerCount={roomInfo.playerCount}
+            joinCode={roomInfo.joinCode}
+            shouldEmphasize={shouldEmphasize}
+            gameMode={gameMode}
+            modeColor={
+              gameMode === 'battle' ? '#8b5cf6' :
+              gameMode === 'single' ? '#3b82f6' :
+              gameMode === 'tournament' ? '#f59e0b' :
+              '#6b7280'
+            }
+            modeEmoji={
+              gameMode === 'battle' ? '⚔️' :
+              gameMode === 'single' ? '🎯' :
+              gameMode === 'tournament' ? '🏆' :
+              '👥'
+            }
+            modeLabel={
+              gameMode === 'battle' ? 'Battle' :
+              gameMode === 'single' ? 'Solo' :
+              gameMode === 'tournament' ? 'Tournament' :
+              'Select Players'
+            }
+            navTitle={navTitle}
+            navEmoji={navEmoji}
+          />
+        ) : (
+          // Show title and mode when not in room
+          <>
+            <GameTitleMenu
+              navTitle={navTitle}
+              navEmoji={navEmoji}
+              onSetup={onSetup}
+              onNewGame={onNewGame}
+              onQuit={onExitSession}
+              showMenu={!canModifyPlayers}
             />
-          ) : (
-            <GameModeIndicator gameMode={gameMode} shouldEmphasize={shouldEmphasize} showFullscreenSelection={false} />
-          )}
-        </div>
+            <div style={{ marginLeft: 'auto' }}>
+              <GameModeIndicator gameMode={gameMode} shouldEmphasize={shouldEmphasize} showFullscreenSelection={false} />
+            </div>
+          </>
+        )}
       </div>
 
       {/* Right side: Players spanning full height */}

apps/web/src/components/nav/RoomInfo.tsx

@@ -13,6 +13,8 @@ interface RoomInfoProps {
   modeColor: string
   modeEmoji: string
   modeLabel: string
+  navTitle: string
+  navEmoji?: string
 }
 
 /**
@@ -29,6 +31,8 @@ export function RoomInfo({
   modeColor,
   modeEmoji,
   modeLabel,
+  navTitle,
+  navEmoji,
 }: RoomInfoProps) {
   const [copied, setCopied] = useState(false)
   const [isOpen, setIsOpen] = useState(false)
@@ -65,45 +69,46 @@ export function RoomInfo({
             onMouseEnter={() => joinCode && setIsOpen(true)}
             onMouseLeave={() => !copied && setIsOpen(false)}
           >
-            {/* Top: Mode indicator */}
+            {/* Top: Game name */}
+            <div
+              style={{
+                fontSize: '12px',
+                fontWeight: 'bold',
+                color: 'rgba(255, 255, 255, 0.9)',
+                lineHeight: 1,
+              }}
+            >
+              {navEmoji && `${navEmoji} `}
+              {navTitle}
+            </div>
+
+            {/* Middle: Mode indicator */}
             <div
               style={{
                 display: 'flex',
                 alignItems: 'center',
                 gap: '4px',
-                fontSize: '12px',
+                fontSize: '11px',
                 fontWeight: 'bold',
                 color: modeColor,
                 lineHeight: 1,
               }}
             >
-              <span style={{ fontSize: '12px', lineHeight: 1 }}>{modeEmoji}</span>
+              <span style={{ fontSize: '11px', lineHeight: 1 }}>{modeEmoji}</span>
               <span style={{ lineHeight: 1 }}>{modeLabel}</span>
             </div>
 
-            {/* Middle: Room name */}
+            {/* Bottom: Room name */}
             <div
               style={{
-                fontSize: '11px',
+                fontSize: '10px',
                 fontWeight: '600',
-                color: 'rgba(196, 181, 253, 0.8)',
+                color: 'rgba(196, 181, 253, 0.7)',
                 lineHeight: 1,
               }}
             >
               {displayName}
             </div>
-
-            {/* Bottom: Player count */}
-            <div
-              style={{
-                fontSize: '9px',
-                fontWeight: '500',
-                color: 'rgba(196, 181, 253, 0.6)',
-                lineHeight: 1,
-              }}
-            >
-              {playerCount} {playerCount === 1 ? 'player' : 'players'}
-            </div>
           </div>
         </Tooltip.Trigger>