feat: add configuration access to active player emojis in prominent nav

Make player emojis clickable and add hover controls:
- Click emoji to open configuration dialog
- Hover reveals two buttons:
  - Small gear icon (bottom-left) for configuration
  - Red × (top-right) to remove player
- Only active when emphasizeGameContext is true
- Clean during gameplay with no distracting controls

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

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

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

@@ -10,9 +10,10 @@ interface ActivePlayersListProps {
   activePlayers: Player[]
   shouldEmphasize: boolean
   onRemovePlayer: (playerId: number) => void
+  onConfigurePlayer: (playerId: number) => void
 }
 
-export function ActivePlayersList({ activePlayers, shouldEmphasize, onRemovePlayer }: ActivePlayersListProps) {
+export function ActivePlayersList({ activePlayers, shouldEmphasize, onRemovePlayer, onConfigurePlayer }: ActivePlayersListProps) {
   const [hoveredPlayerId, setHoveredPlayerId] = React.useState<number | null>(null)
 
   return (
@@ -29,49 +30,92 @@ export function ActivePlayersList({ activePlayers, shouldEmphasize, onRemovePlay
             cursor: shouldEmphasize ? 'pointer' : 'default'
           }}
           title={player.name}
+          onClick={() => shouldEmphasize && onConfigurePlayer(player.id)}
           onMouseEnter={() => shouldEmphasize && setHoveredPlayerId(player.id)}
           onMouseLeave={() => shouldEmphasize && setHoveredPlayerId(null)}
         >
           {player.emoji}
           {shouldEmphasize && hoveredPlayerId === player.id && (
-            <button
-              onClick={(e) => {
-                e.stopPropagation()
-                onRemovePlayer(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>
+            <>
+              {/* Configure button - bottom left */}
+              <button
+                onClick={(e) => {
+                  e.stopPropagation()
+                  onConfigurePlayer(player.id)
+                }}
+                style={{
+                  position: 'absolute',
+                  bottom: '-4px',
+                  left: '-4px',
+                  width: '18px',
+                  height: '18px',
+                  borderRadius: '50%',
+                  border: '2px solid white',
+                  background: '#6b7280',
+                  color: 'white',
+                  fontSize: '10px',
+                  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 = '#3b82f6'
+                  e.currentTarget.style.transform = 'scale(1.15)'
+                }}
+                onMouseLeave={(e) => {
+                  e.currentTarget.style.background = '#6b7280'
+                  e.currentTarget.style.transform = 'scale(1)'
+                }}
+                aria-label={`Configure ${player.name}`}
+              >
+                ⚙
+              </button>
+
+              {/* Remove button - top right */}
+              <button
+                onClick={(e) => {
+                  e.stopPropagation()
+                  onRemovePlayer(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>
       ))}