feat: add interactive remove buttons for players in mini nav

- Hover over player emoji to reveal red × button
- Click × to remove player from active game
- Smooth animations on hover (scale 1.1, darker red)
- Button positioned absolutely in top-right corner
- Works on all pages with game context (arcade, matching setup, etc)

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

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

apps/web/src/components/PageWithNav.tsx

@@ -13,9 +13,10 @@ interface PageWithNavProps {
 }
 
 export function PageWithNav({ navTitle, navEmoji, emphasizeGameContext = false, children }: PageWithNavProps) {
-  const { players, activePlayerCount } = useGameMode()
+  const { players, activePlayerCount, updatePlayer } = useGameMode()
   const { profile } = useUserProfile()
   const [mounted, setMounted] = React.useState(false)
+  const [hoveredPlayerId, setHoveredPlayerId] = React.useState<number | null>(null)
 
   // Delay mounting animation slightly for smooth transition
   React.useEffect(() => {
@@ -23,6 +24,10 @@ export function PageWithNav({ navTitle, navEmoji, emphasizeGameContext = false,
     return () => clearTimeout(timer)
   }, [])
 
+  const handleRemovePlayer = (playerId: number) => {
+    updatePlayer(playerId, { isActive: false })
+  }
+
   // Transform players to use profile emojis for players 1 and 2 (same as EnhancedChampionArena)
   const activePlayers = players
     .filter(p => p.isActive)
@@ -112,15 +117,59 @@ export function PageWithNav({ navTitle, navEmoji, emphasizeGameContext = false,
             <div
               key={player.id}
               style={{
+                position: 'relative',
                 fontSize: shouldEmphasize ? '48px' : '20px',
                 lineHeight: 1,
                 transition: 'font-size 0.4s cubic-bezier(0.4, 0, 0.2, 1), filter 0.4s ease',
                 filter: shouldEmphasize ? 'drop-shadow(0 4px 8px rgba(0,0,0,0.25))' : 'none',
-                transform: shouldEmphasize ? 'translateY(0)' : 'translateY(0)'
+                transform: shouldEmphasize ? 'translateY(0)' : 'translateY(0)',
+                cursor: 'pointer'
               }}
               title={player.name}
+              onMouseEnter={() => setHoveredPlayerId(player.id)}
+              onMouseLeave={() => setHoveredPlayerId(null)}
             >
               {player.emoji}
+              {hoveredPlayerId === player.id && (
+                <button
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    handleRemovePlayer(player.id)
+                  }}
+                  style={{
+                    position: 'absolute',
+                    top: '-4px',
+                    right: '-4px',
+                    width: '20px',
+                    height: '20px',
+                    borderRadius: '50%',
+                    border: '2px solid white',
+                    background: '#ef4444',
+                    color: 'white',
+                    fontSize: '12px',
+                    fontWeight: 'bold',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    cursor: 'pointer',
+                    boxShadow: '0 2px 8px rgba(0,0,0,0.3)',
+                    transition: 'all 0.2s ease',
+                    padding: 0,
+                    lineHeight: 1
+                  }}
+                  onMouseEnter={(e) => {
+                    e.currentTarget.style.background = '#dc2626'
+                    e.currentTarget.style.transform = 'scale(1.1)'
+                  }}
+                  onMouseLeave={(e) => {
+                    e.currentTarget.style.background = '#ef4444'
+                    e.currentTarget.style.transform = 'scale(1)'
+                  }}
+                  aria-label={`Remove ${player.name}`}
+                >
+                  ×
+                </button>
+              )}
             </div>
           ))}
         </div>