feat(nav): add turn label text under current player avatars

Players now see clear text labels under avatars when it's someone's turn:
- "Your turn" under local players (in player's color)
- "Their turn" under network/remote players (in player's color)

Labels are:
- Small uppercase text (11px, bold)
- Colored with player's theme color
- Only shown during active gameplay (hasGameState)
- Only appear under the current player's avatar

This provides explicit confirmation of whose turn it is, complementing
the visual indicators (border ring, arrow badge, size/animation changes).

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

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

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

@@ -59,23 +59,31 @@ export function ActivePlayersList({
           >
             <div
               style={{
-                position: 'relative',
-                fontSize: isCurrentPlayer && hasGameState ? '70px' : '56px',
-                lineHeight: 1,
-                transition: 'all 0.4s cubic-bezier(0.4, 0, 0.2, 1)',
-                filter: 'drop-shadow(0 6px 12px rgba(0,0,0,0.3))',
-                cursor: shouldEmphasize ? 'pointer' : 'default',
                 display: 'flex',
+                flexDirection: 'column',
                 alignItems: 'center',
-                justifyContent: 'center',
-                opacity: hasGameState ? (isCurrentPlayer ? 1 : 0.65) : 1,
-                transform: isCurrentPlayer && hasGameState ? 'scale(1.1)' : 'scale(1)',
-                animation: isCurrentPlayer && hasGameState ? 'avatarFloat 3s ease-in-out infinite' : 'none',
+                gap: '4px',
               }}
-              onClick={() => shouldEmphasize && onConfigurePlayer(player.id)}
-              onMouseEnter={() => shouldEmphasize && setHoveredPlayerId(player.id)}
-              onMouseLeave={() => shouldEmphasize && setHoveredPlayerId(null)}
             >
+              <div
+                style={{
+                  position: 'relative',
+                  fontSize: isCurrentPlayer && hasGameState ? '70px' : '56px',
+                  lineHeight: 1,
+                  transition: 'all 0.4s cubic-bezier(0.4, 0, 0.2, 1)',
+                  filter: 'drop-shadow(0 6px 12px rgba(0,0,0,0.3))',
+                  cursor: shouldEmphasize ? 'pointer' : 'default',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  opacity: hasGameState ? (isCurrentPlayer ? 1 : 0.65) : 1,
+                  transform: isCurrentPlayer && hasGameState ? 'scale(1.1)' : 'scale(1)',
+                  animation: isCurrentPlayer && hasGameState ? 'avatarFloat 3s ease-in-out infinite' : 'none',
+                }}
+                onClick={() => shouldEmphasize && onConfigurePlayer(player.id)}
+                onMouseEnter={() => shouldEmphasize && setHoveredPlayerId(player.id)}
+                onMouseLeave={() => shouldEmphasize && setHoveredPlayerId(null)}
+              >
               {/* Border ring for current player */}
               {isCurrentPlayer && hasGameState && (
                 <div
@@ -257,7 +265,25 @@ export function ActivePlayersList({
                 </button>
               </>
             )}
-          </div>
+              </div>
+
+              {/* Turn label */}
+              {isCurrentPlayer && hasGameState && (
+                <div
+                  style={{
+                    fontSize: '11px',
+                    fontWeight: 'bold',
+                    color: player.color || '#3b82f6',
+                    textTransform: 'uppercase',
+                    letterSpacing: '0.5px',
+                    textShadow: '0 2px 4px rgba(0,0,0,0.2)',
+                    marginTop: '-2px',
+                  }}
+                >
+                  Your turn
+                </div>
+              )}
+            </div>
         </PlayerTooltip>
       )})}
 

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

@@ -59,20 +59,28 @@ export function NetworkPlayerIndicator({
     >
       <div
         style={{
-          position: 'relative',
-          fontSize: '56px',
-          lineHeight: 1,
-          transition: 'all 0.4s cubic-bezier(0.4, 0, 0.2, 1)',
-          filter: 'drop-shadow(0 6px 12px rgba(0,0,0,0.3))',
-          cursor: 'default',
           display: 'flex',
+          flexDirection: 'column',
           alignItems: 'center',
-          justifyContent: 'center',
-          opacity: hasGameState ? (isCurrentPlayer ? 1 : 0.65) : 1,
+          gap: '4px',
         }}
-        onMouseEnter={() => setIsHovered(true)}
-        onMouseLeave={() => setIsHovered(false)}
       >
+        <div
+          style={{
+            position: 'relative',
+            fontSize: '56px',
+            lineHeight: 1,
+            transition: 'all 0.4s cubic-bezier(0.4, 0, 0.2, 1)',
+            filter: 'drop-shadow(0 6px 12px rgba(0,0,0,0.3))',
+            cursor: 'default',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            opacity: hasGameState ? (isCurrentPlayer ? 1 : 0.65) : 1,
+          }}
+          onMouseEnter={() => setIsHovered(true)}
+          onMouseLeave={() => setIsHovered(false)}
+        >
         {/* Network frame border - only show when not current player */}
         {!isCurrentPlayer && (
           <div
@@ -268,6 +276,24 @@ export function NetworkPlayerIndicator({
           `,
           }}
         />
+        </div>
+
+        {/* Turn label */}
+        {isCurrentPlayer && hasGameState && (
+          <div
+            style={{
+              fontSize: '11px',
+              fontWeight: 'bold',
+              color: player.color || '#3b82f6',
+              textTransform: 'uppercase',
+              letterSpacing: '0.5px',
+              textShadow: '0 2px 4px rgba(0,0,0,0.2)',
+              marginTop: '-2px',
+            }}
+          >
+            Their turn
+          </div>
+        )}
       </div>
     </PlayerTooltip>
   )