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

components/AudioPlayer.tsx

@@ -53,13 +53,23 @@ const AudioPlayer = forwardRef<AudioPlayerRef, AudioPlayerProps>(({ src, unlocke
     // Expose play method to parent component
     useImperativeHandle(ref, () => ({
         play: () => {
-            if (!audioRef.current || isPlaying) return;
+            if (!audioRef.current) return;
-            audioRef.current.play();
+
-            setIsPlaying(true);
+            const playPromise = audioRef.current.play();
-            onPlay?.();
+            if (playPromise !== undefined) {
-            if (!hasPlayedOnce) {
+                playPromise
-                setHasPlayedOnce(true);
+                    .then(() => {
-                onHasPlayedChange?.(true);
+                        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}
                     />