Fix: Properly handle async play() and remove autoPlay conflict

components/AudioPlayer.tsx

@@ -53,14 +53,24 @@ const AudioPlayer = forwardRef<AudioPlayerRef, AudioPlayerProps>(({ src, unlocke
     // Expose play method to parent component
     useImperativeHandle(ref, () => ({
         play: () => {
-            if (!audioRef.current || isPlaying) return;
-            audioRef.current.play();
+            if (!audioRef.current) return;
+
+            const playPromise = audioRef.current.play();
+            if (playPromise !== undefined) {
+                playPromise
+                    .then(() => {
                         setIsPlaying(true);
                         onPlay?.();
                         if (!hasPlayedOnce) {
                             setHasPlayedOnce(true);
                             onHasPlayedChange?.(true);
                         }
+                    })
+                    .catch(error => {
+                        console.error("Play failed:", error);
+                        setIsPlaying(false);
+                    });
+            }
         }
     }));
 

components/Game.tsx

@@ -271,7 +271,7 @@ export default function Game({ dailyPuzzle, genre = null, isSpecial = false, max
                         src={dailyPuzzle.audioUrl}
                         unlockedSeconds={unlockedSeconds}
                         startTime={dailyPuzzle.startTime}
-                        autoPlay={lastAction === 'SKIP' || (lastAction === 'GUESS' && !hasWon && !hasLost) || hasPlayedAudio}
+                        autoPlay={lastAction === 'SKIP' || (lastAction === 'GUESS' && !hasWon && !hasLost)}
                         onReplay={addReplay}
                         onHasPlayedChange={setHasPlayedAudio}
                     />