refactor: implement Option A - balanced alignment and visual hierarchy

Major improvements to navigation alignment and proportions:

**Title:**
- Increased from 18px to 22px for better visual prominence
- Now properly anchors the left side

**Room Info (dramatically simplified):**
- Removed 🎮 emoji (redundant)
- Removed 👥 player count (redundant - visible in player avatars)
- Reduced padding: 4px 10px → 3px 8px
- Reduced border: 2px → 1px
- Reduced font size: 12px → 11px
- Lighter background: 0.2 → 0.15 opacity
- Result: Tiny subtle tag instead of dominant banner

**Spacing & Alignment:**
- Tightened gap in mode/room stack: 4px → 3px
- Reduced gap between title and stack: 16px → 12px
- Increased gap to players: 16px → 20px
- Everything vertically centered with 56px player avatars

**Visual Hierarchy (fixed):**
1. Players (largest, most prominent)
2. Title (22px, clear focal point)
3. Mode indicator (medium pill)
4. Room info (tiny subtle tag)

Result: Clean, balanced layout with proper visual weight distribution.
The title is now prominent, mode/room are compact metadata, and players
dominate the right side.

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

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

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

@@ -136,22 +136,22 @@ export function GameContextNav({
     )
   }
 
-  // Normal layout: Left side (2 rows) | Right side (players spanning full height)
+  // Normal layout: Left side | Right side (players spanning full height)
   return (
     <div
       style={{
         display: 'flex',
-        gap: '16px',
+        gap: '20px',
         alignItems: 'center',
         width: 'auto',
       }}
     >
-      {/* Left side: Title + Mode + Room (single row) */}
+      {/* Left side: Title + Mode + Room */}
       <div
         style={{
           display: 'flex',
           alignItems: 'center',
-          gap: '16px',
+          gap: '12px',
           flex: 1,
         }}
       >
@@ -165,12 +165,12 @@ export function GameContextNav({
           showMenu={!canModifyPlayers}
         />
 
-        {/* Mode + Room stacked vertically */}
+        {/* Mode + Room stacked vertically - compact */}
         <div
           style={{
             display: 'flex',
             flexDirection: 'column',
-            gap: '4px',
+            gap: '3px',
             marginLeft: 'auto',
             alignItems: 'flex-end',
           }}

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

@@ -25,7 +25,7 @@ export function GameTitleMenu({
     return (
       <h1
         style={{
-          fontSize: '18px',
+          fontSize: '22px',
           fontWeight: 'bold',
           background: 'linear-gradient(135deg, #60a5fa, #a78bfa, #f472b6)',
           backgroundClip: 'text',
@@ -46,7 +46,7 @@ export function GameTitleMenu({
         <button
           type="button"
           style={{
-            fontSize: '18px',
+            fontSize: '22px',
             fontWeight: 'bold',
             border: 'none',
             padding: '6px 10px',
@@ -84,7 +84,7 @@ export function GameTitleMenu({
           </span>
           <span
             style={{
-              fontSize: '9px',
+              fontSize: '10px',
               color: 'rgba(139, 92, 246, 0.5)',
               transition: 'transform 0.2s ease',
               transform: open ? 'rotate(180deg)' : 'rotate(0deg)',

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

@@ -42,13 +42,13 @@ export function RoomInfo({
             style={{
               display: 'flex',
               alignItems: 'center',
-              gap: '6px',
-              padding: '4px 10px',
-              background: 'rgba(139, 92, 246, 0.2)',
+              gap: '4px',
+              padding: '3px 8px',
+              background: 'rgba(139, 92, 246, 0.15)',
               borderRadius: '6px',
-              border: '2px solid rgba(139, 92, 246, 0.4)',
-              fontSize: '12px',
-              fontWeight: 'bold',
+              border: '1px solid rgba(139, 92, 246, 0.3)',
+              fontSize: '11px',
+              fontWeight: '600',
               color: 'rgba(196, 181, 253, 1)',
               transition: 'all 0.2s ease',
               whiteSpace: 'nowrap',
@@ -57,16 +57,8 @@ export function RoomInfo({
             onMouseEnter={() => joinCode && setIsOpen(true)}
             onMouseLeave={() => !copied && setIsOpen(false)}
           >
-            {/* Room icon and name */}
-            <span style={{ fontSize: '12px' }}>🎮</span>
+            {/* Room name only */}
             <span>{displayName}</span>
-
-            {/* Player count */}
-            <span style={{ opacity: 0.6 }}>•</span>
-            <span style={{ display: 'flex', alignItems: 'center', gap: '3px' }}>
-              <span style={{ fontSize: '11px' }}>👥</span>
-              <span>{playerCount}</span>
-            </span>
           </div>
         </Tooltip.Trigger>