fix(complement-race): improve AI speech bubble positioning

Speech bubbles now:
- Position 15px above AI racers instead of directly over them
- Use zIndex 20 to appear above all racers (player: 10, AI: 5)

This fixes two UX issues:
1. Bubbles were covering AI racer emojis, making them invisible
2. Bubbles appeared under player avatar when racers were close

Applied to both LinearTrack (practice) and CircularTrack (survival)

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

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

apps/web/src/app/arcade/complement-race/components/RaceTrack/CircularTrack.tsx

@@ -401,7 +401,11 @@ export function CircularTrack({ playerProgress, playerLap, aiRacers, aiLaps }: C
             {activeBubble && (
               <div
                 style={{
-                  transform: `rotate(${-aiPos.angle}deg)`, // Counter-rotate bubble
+                  position: 'absolute',
+                  bottom: '100%', // Position above the AI racer
+                  left: '50%',
+                  transform: `translate(-50%, -15px) rotate(${-aiPos.angle}deg)`, // Offset 15px above, counter-rotate bubble
+                  zIndex: 20, // Above player (10) and AI racers (5)
                 }}
               >
                 <SpeechBubble

apps/web/src/app/arcade/complement-race/components/RaceTrack/LinearTrack.tsx

@@ -144,7 +144,11 @@ export function LinearTrack({
             {activeBubble && (
               <div
                 style={{
-                  transform: 'scaleX(-1)', // Counter-flip bubble to make text readable
+                  position: 'absolute',
+                  bottom: '100%', // Position above the AI racer
+                  left: '50%',
+                  transform: 'translate(-50%, -15px) scaleX(-1)', // Offset 15px above, counter-flip bubble
+                  zIndex: 20, // Above player (10) and AI racers (5)
                 }}
               >
                 <SpeechBubble