fix: stack game title dropdown ABOVE room pane, not inside it

Corrects the layout to properly separate title from room details:

**Before (incorrect):**
- Game name was inside the room pane, no dropdown

**After (correct):**
┌──────────────┐
│ 🧩 Memory    │ ← Title with dropdown (Setup/New Game/Quit)
│ Pairs ▼     │
└──────────────┘

┌──────────────┐
│ ⚔️ Battle    │ ← Room pane (hover for join code)
│ Auto-gen     │
│ Room         │
└──────────────┘

[player avatars]

**Implementation:**
- GameTitleMenu always shown with dropdown functionality
- When in room: flexDirection: 'column' stacks title above room pane
- When not in room: flexDirection: 'row' shows title + mode horizontally
- RoomInfo back to 2-line: mode + room name
- 4px gap between stacked elements

Result: Title dropdown is separate and accessible, room pane shows
session details and serves as hover target for join code.

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

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

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

@@ -146,17 +146,28 @@ export function GameContextNav({
         width: 'auto',
       }}
     >
-      {/* Left side: Title (only when not in room) or Room info pane */}
+      {/* Left side: Title stacked above room info (if in room) */}
       <div
         style={{
           display: 'flex',
-          alignItems: 'center',
-          gap: '12px',
+          flexDirection: roomInfo ? 'column' : 'row',
+          alignItems: roomInfo ? 'flex-start' : 'center',
+          gap: roomInfo ? '4px' : '12px',
           flex: 1,
         }}
       >
+        {/* Title with dropdown menu - always shown */}
+        <GameTitleMenu
+          navTitle={navTitle}
+          navEmoji={navEmoji}
+          onSetup={onSetup}
+          onNewGame={onNewGame}
+          onQuit={onExitSession}
+          showMenu={!canModifyPlayers}
+        />
+
+        {/* Show room info pane if in room, otherwise show mode indicator */}
         {roomInfo ? (
-          // Show combined pane with game name, mode, and room
           <RoomInfo
             roomName={roomInfo.roomName}
             gameName={roomInfo.gameName}
@@ -182,24 +193,11 @@ export function GameContextNav({
               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}
-            />
-            <div style={{ marginLeft: 'auto' }}>
-              <GameModeIndicator gameMode={gameMode} shouldEmphasize={shouldEmphasize} showFullscreenSelection={false} />
-            </div>
-          </>
+          <div style={{ marginLeft: 'auto' }}>
+            <GameModeIndicator gameMode={gameMode} shouldEmphasize={shouldEmphasize} showFullscreenSelection={false} />
+          </div>
         )}
       </div>
 

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

@@ -13,8 +13,6 @@ interface RoomInfoProps {
   modeColor: string
   modeEmoji: string
   modeLabel: string
-  navTitle: string
-  navEmoji?: string
 }
 
 /**
@@ -31,8 +29,6 @@ export function RoomInfo({
   modeColor,
   modeEmoji,
   modeLabel,
-  navTitle,
-  navEmoji,
 }: RoomInfoProps) {
   const [copied, setCopied] = useState(false)
   const [isOpen, setIsOpen] = useState(false)
@@ -69,20 +65,7 @@ export function RoomInfo({
             onMouseEnter={() => joinCode && setIsOpen(true)}
             onMouseLeave={() => !copied && setIsOpen(false)}
           >
-            {/* 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 */}
+            {/* Top: Mode indicator */}
             <div
               style={{
                 display: 'flex',