fix: correct hover avatar and turn indicator to show only current player

Previously, hover avatars were showing for remote players while the
current player's avatar was hidden. Also, the turn indicator was
incorrectly showing "Your turn" for all players regardless of whether
they belonged to the current viewer.

Changes:
- MemoryGrid: Filter hover avatars to show only for current player
  (playerId === state.currentPlayer) instead of remote players
- PlayerStatusBar: Check player ownership by comparing player.userId
  with viewerId instead of hardcoded gameMode check

This ensures:
1. Only the current player (whose turn it is) displays their hover avatar
2. Turn indicator correctly shows "Your turn" vs "Their turn" based on
   whether the current player belongs to the local viewer

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

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

apps/web/src/app/arcade/matching/components/MemoryGrid.tsx

@@ -1,9 +1,9 @@
 'use client'
 
-import { useSpring, animated } from '@react-spring/web'
+import { animated, useSpring } from '@react-spring/web'
 import { useEffect, useMemo, useRef, useState } from 'react'
-import { css } from '../../../../../styled-system/css'
 import { useViewerId } from '@/hooks/useViewerId'
+import { css } from '../../../../../styled-system/css'
 import { useMemoryPairs } from '../context/MemoryPairsContext'
 import { getGridConfiguration } from '../utils/cardGeneration'
 import { GameCard } from './GameCard'
@@ -379,15 +379,13 @@ export function MemoryGrid() {
       )}
 
       {/* Animated Hover Avatars - Rendered as fixed positioned elements that smoothly transition */}
-      {/* Render one avatar per remote player - key by playerId to keep component alive */}
+      {/* Render one avatar per player - key by playerId to keep component alive */}
       {state.playerHovers &&
         Object.entries(state.playerHovers)
           .filter(([playerId]) => {
-            // Don't show your own hover avatar (only show remote players)
-            // In local games, all players belong to this user
-            // In room games, check if player belongs to different user
-            const player = state.playerMetadata?.[playerId]
-            return player?.userId !== viewerId
+            // Only show avatar for the CURRENT player whose turn it is
+            // Don't show for other players (they're waiting for their turn)
+            return playerId === state.currentPlayer
           })
           .map(([playerId, cardId]) => {
             const playerInfo = getPlayerHoverInfo(playerId)

apps/web/src/app/arcade/matching/components/PlayerStatusBar.tsx

@@ -1,5 +1,6 @@
 'use client'
 
+import { useViewerId } from '@/hooks/useViewerId'
 import { css } from '../../../../../styled-system/css'
 import { gamePlurals } from '../../../../utils/pluralization'
 import { useMemoryPairs } from '../context/MemoryPairsContext'
@@ -10,6 +11,7 @@ interface PlayerStatusBarProps {
 
 export function PlayerStatusBar({ className }: PlayerStatusBarProps) {
   const { state } = useMemoryPairs()
+  const { data: viewerId } = useViewerId()
 
   // Get active players from game state (not GameModeContext)
   // This ensures we only show players actually in this game
@@ -25,8 +27,8 @@ export function PlayerStatusBar({ className }: PlayerStatusBarProps) {
     displayEmoji: player.emoji,
     score: state.scores[player.id] || 0,
     consecutiveMatches: state.consecutiveMatches?.[player.id] || 0,
-    // In local games all players are local, in room games check metadata
-    isLocalPlayer: state.gameMode === 'single' || state.gameMode === 'multiplayer',
+    // Check if this player belongs to the current viewer
+    isLocalPlayer: player.userId === viewerId,
   }))
 
   // Check if current player is local (your turn) or remote (waiting)