feat(rithmomachia): show pyramid face numbers on hover instead of selection

Changed pyramid face numbers to appear when hovering over any pyramid piece,
making them visible to all players as public information:

- Updated SvgPiece to manage hover state with useState
- Added onMouseEnter and onMouseLeave handlers
- Changed PieceRenderer prop from `selected` to `hovered`
- Updated condition to show numbers on hover for pyramid pieces
- Removed dependency on piece selection state

Pyramid face values are not secret information, so any player can now see
them by hovering over a pyramid piece, regardless of whose turn it is.

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

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

apps/web/src/arcade-games/rithmomachia/components/PieceRenderer.tsx

@@ -7,7 +7,7 @@ interface PieceRendererProps {
   value: number | string
   size?: number
   useNativeAbacusNumbers?: boolean
-  selected?: boolean
+  hovered?: boolean
   pyramidFaces?: number[]
 }
 
@@ -22,7 +22,7 @@ export function PieceRenderer({
   value,
   size = 48,
   useNativeAbacusNumbers = false,
-  selected = false,
+  hovered = false,
   pyramidFaces = [],
 }: PieceRendererProps) {
   const isDark = color === 'B'
@@ -229,8 +229,8 @@ export function PieceRenderer({
 
       {renderShape()}
 
-      {/* Pyramid face numbers - show when selected */}
-      {type === 'P' && selected && pyramidFaces.length === 4 && (
+      {/* Pyramid face numbers - show when hovered */}
+      {type === 'P' && hovered && pyramidFaces.length === 4 && (
         <g>
           {/* Filter for strong drop shadow */}
           <defs>

apps/web/src/arcade-games/rithmomachia/components/board/SvgPiece.tsx

@@ -1,5 +1,6 @@
 'use client'
 
+import { useState } from 'react'
 import { animated, useSpring } from '@react-spring/web'
 import type { Piece } from '../../types'
 import { PieceRenderer } from '../PieceRenderer'
@@ -23,6 +24,8 @@ export function SvgPiece({
   useNativeAbacusNumbers = false,
   selected = false,
 }: SvgPieceProps) {
+  const [isHovered, setIsHovered] = useState(false)
+
   const file = piece.square.charCodeAt(0) - 65 // A=0
   const rank = Number.parseInt(piece.square.slice(1), 10) // 1-8
   const row = 8 - rank // Invert for display
@@ -50,6 +53,8 @@ export function SvgPiece({
             justifyContent: 'center',
             opacity,
           }}
+          onMouseEnter={() => setIsHovered(true)}
+          onMouseLeave={() => setIsHovered(false)}
         >
           <PieceRenderer
             type={piece.type}
@@ -57,7 +62,7 @@ export function SvgPiece({
             value={piece.type === 'P' ? piece.pyramidFaces?.[0] || 0 : piece.value || 0}
             size={pieceSize}
             useNativeAbacusNumbers={useNativeAbacusNumbers}
-            selected={selected}
+            hovered={isHovered}
             pyramidFaces={piece.type === 'P' ? piece.pyramidFaces : undefined}
           />
         </div>