fix: pixel-perfect alignment across all nav elements

Got into the pixels! Fixed alignment issues throughout navigation:

**lineHeight: 1 everywhere**
- Title: added lineHeight: 1 to remove extra vertical space
- GameModeIndicator: lineHeight: 1 on container and text spans
- RoomInfo: lineHeight: 1 on pill and text
- Player avatars: lineHeight: 1 already set
- Dropdown arrow: lineHeight: 1 with flex centering

**Display fixes**
- Changed all pills from flex → inline-flex for tighter bounds
- Added display: flex, alignItems: center to title for perfect centering
- Added flexShrink: 0 to AddPlayerButton to prevent compression

**Player avatar alignment**
- Added display: flex, alignItems: center, justifyContent: center
- Ensures emoji glyphs are perfectly centered
- Removed redundant fontSize conditionals (always 56px)

**Container alignment**
- All elements now share common vertical center
- No extra space from default line-heights
- Pills are tight inline elements with no overflow

Result: Every element is pixel-perfect aligned with no extra vertical
space from line-heights, properly centered, and sharing a common baseline.

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

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

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

@@ -38,11 +38,14 @@ export function ActivePlayersList({
           <div
             style={{
               position: 'relative',
-              fontSize: shouldEmphasize ? '56px' : '56px',
+              fontSize: '56px',
               lineHeight: 1,
-              transition: 'font-size 0.4s cubic-bezier(0.4, 0, 0.2, 1), filter 0.4s ease',
+              transition: 'filter 0.4s ease',
               filter: 'drop-shadow(0 6px 12px rgba(0,0,0,0.3))',
               cursor: shouldEmphasize ? 'pointer' : 'default',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
             }}
             onClick={() => shouldEmphasize && onConfigurePlayer(player.id)}
             onMouseEnter={() => shouldEmphasize && setHoveredPlayerId(player.id)}

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

@@ -49,9 +49,9 @@ export function AddPlayerButton({
         type="button"
         onClick={() => setShowPopover(!showPopover)}
         style={{
-          fontSize: shouldEmphasize ? '36px' : '36px',
-          width: shouldEmphasize ? '56px' : '56px',
-          height: shouldEmphasize ? '56px' : '56px',
+          fontSize: '36px',
+          width: '56px',
+          height: '56px',
           borderRadius: '50%',
           border: '3px solid #10b981',
           background: showPopover
@@ -69,6 +69,7 @@ export function AddPlayerButton({
           boxShadow: showPopover
             ? '0 6px 16px rgba(16, 185, 129, 0.5)'
             : '0 6px 12px rgba(0,0,0,0.3)',
+          flexShrink: 0,
         }}
         onMouseEnter={(e) => {
           if (!showPopover) {

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

@@ -23,7 +23,7 @@ export function GameModeIndicator({
   return (
     <div
       style={{
-        display: 'flex',
+        display: 'inline-flex',
         alignItems: 'center',
         gap: shouldEmphasize ? '10px' : '4px',
         padding: shouldEmphasize ? '12px 24px' : '4px 8px',
@@ -40,17 +40,19 @@ export function GameModeIndicator({
           : 'none',
         transition: 'all 0.4s cubic-bezier(0.4, 0, 0.2, 1)',
         transform: shouldEmphasize ? 'scale(1.05)' : 'scale(1)',
+        lineHeight: 1,
       }}
     >
       <span
         style={{
           fontSize: shouldEmphasize ? '28px' : '12px',
           transition: 'font-size 0.4s cubic-bezier(0.4, 0, 0.2, 1)',
+          lineHeight: 1,
         }}
       >
         {modeInfo.emoji}
       </span>
-      <span>{modeInfo.label}</span>
+      <span style={{ lineHeight: 1 }}>{modeInfo.label}</span>
     </div>
   )
 }

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

@@ -31,7 +31,11 @@ export function GameTitleMenu({
           backgroundClip: 'text',
           color: 'transparent',
           margin: 0,
+          padding: 0,
           whiteSpace: 'nowrap',
+          lineHeight: 1,
+          display: 'flex',
+          alignItems: 'center',
         }}
       >
         {navEmoji && `${navEmoji} `}
@@ -59,6 +63,7 @@ export function GameTitleMenu({
             borderRadius: '8px',
             background: open ? 'rgba(139, 92, 246, 0.08)' : 'transparent',
             transition: 'all 0.2s ease',
+            lineHeight: 1,
           }}
           onMouseEnter={(e) => {
             if (!open) {
@@ -77,6 +82,7 @@ export function GameTitleMenu({
               backgroundClip: 'text',
               WebkitBackgroundClip: 'text',
               color: 'transparent',
+              lineHeight: 1,
             }}
           >
             {navEmoji && `${navEmoji} `}
@@ -88,7 +94,9 @@ export function GameTitleMenu({
               color: 'rgba(139, 92, 246, 0.5)',
               transition: 'transform 0.2s ease',
               transform: open ? 'rotate(180deg)' : 'rotate(0deg)',
-              lineHeight: 0,
+              lineHeight: 1,
+              display: 'flex',
+              alignItems: 'center',
             }}
           >
             ▼

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

@@ -33,10 +33,13 @@ export function NetworkPlayerIndicator({ player, shouldEmphasize }: NetworkPlaye
       <div
         style={{
           position: 'relative',
-          fontSize: shouldEmphasize ? '56px' : '56px',
+          fontSize: '56px',
           lineHeight: 1,
           transition: 'all 0.4s cubic-bezier(0.4, 0, 0.2, 1)',
           cursor: 'default',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
         }}
         onMouseEnter={() => setIsHovered(true)}
         onMouseLeave={() => setIsHovered(false)}

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

@@ -40,7 +40,7 @@ export function RoomInfo({
         <Tooltip.Trigger asChild>
           <div
             style={{
-              display: 'flex',
+              display: 'inline-flex',
               alignItems: 'center',
               gap: '4px',
               padding: '3px 8px',
@@ -53,12 +53,13 @@ export function RoomInfo({
               transition: 'all 0.2s ease',
               whiteSpace: 'nowrap',
               cursor: joinCode ? 'pointer' : 'default',
+              lineHeight: 1,
             }}
             onMouseEnter={() => joinCode && setIsOpen(true)}
             onMouseLeave={() => !copied && setIsOpen(false)}
           >
             {/* Room name only */}
-            <span>{displayName}</span>
+            <span style={{ lineHeight: 1 }}>{displayName}</span>
           </div>
         </Tooltip.Trigger>