soundtrack trigger fix

src/components/GameBackground.tsx

@@ -1,24 +1,21 @@
 import { useEffect, useState } from "react";
 
-export const GameBackground = () => {
+interface GameBackgroundProps {
+  shouldStartAudio?: boolean;
+}
+
+export const GameBackground = ({ shouldStartAudio = false }: GameBackgroundProps) => {
   const [audioStarted, setAudioStarted] = useState(false);
 
   useEffect(() => {
-    // Only start audio after user interaction
-    const handleFirstInteraction = () => {
-      if (!audioStarted) {
-        const audio = new Audio("/tension-background.mp3");
-        audio.loop = true;
-        audio.volume = 0.3;
-        audio.play().catch(console.error);
-        setAudioStarted(true);
-        document.removeEventListener("click", handleFirstInteraction);
-      }
-    };
-
-    document.addEventListener("click", handleFirstInteraction);
-    return () => document.removeEventListener("click", handleFirstInteraction);
-  }, [audioStarted]);
+    if (shouldStartAudio && !audioStarted) {
+      const audio = new Audio("/tension-background.mp3");
+      audio.loop = true;
+      audio.volume = 0.3;
+      audio.play().catch(console.error);
+      setAudioStarted(true);
+    }
+  }, [shouldStartAudio, audioStarted]);
 
   return (
     <div className="fixed inset-0 -z-10 overflow-hidden">

src/components/game/IntroDialog.tsx

@@ -11,10 +11,19 @@ import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { LanguageSwitcher } from "@/components/LanguageSwitcher";
 
-export const IntroDialog = () => {
+interface IntroDialogProps {
+  onStartAudio?: () => void;
+}
+
+export const IntroDialog = ({ onStartAudio }: IntroDialogProps) => {
   const [open, setOpen] = useState(true);
   const { t } = useTranslation();
 
+  const handleBeginSimulation = () => {
+    setOpen(false);
+    onStartAudio?.();
+  };
+
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogContent className="bg-black/90 text-white border-gray-700 max-w-2xl max-h-[90vh] overflow-y-auto">
@@ -57,7 +66,7 @@ export const IntroDialog = () => {
             </span>
           </div>
           <Button 
-            onClick={() => setOpen(false)}
+            onClick={handleBeginSimulation}
             className="bg-yellow-500 hover:bg-yellow-600 text-black font-semibold sm:w-auto"
           >
             {t('buttons.beginSimulation')}

src/pages/Index.tsx

@@ -63,6 +63,7 @@ const Index = () => {
   const [playerChoices, setPlayerChoices] = useState<string[]>([]);
   const [gameKey, setGameKey] = useState(0);
   const loadingMessages = useLoadingMessages();
+  const [shouldStartAudio, setShouldStartAudio] = useState(false);
 
   const handleStartGame = () => {
     playAcceptMissionSound();
@@ -197,7 +198,7 @@ const Index = () => {
     if (showingInitialTransition) {
       return (
         <div className="relative min-h-screen overflow-hidden">
-          <GameBackground />
+          <GameBackground shouldStartAudio={shouldStartAudio} />
           <div className="relative min-h-screen bg-transparent p-4 flex items-center justify-center">
             <div className="max-w-4xl mx-auto w-full relative">
               <MonthTransition 
@@ -212,9 +213,9 @@ const Index = () => {
     }
     return (
       <div className="relative min-h-screen overflow-hidden">
-        <GameBackground />
+        <GameBackground shouldStartAudio={shouldStartAudio} />
         <div className="relative min-h-screen bg-transparent flex items-center justify-center p-4">
-          {showIntroDialog && <IntroDialog />}
+          {showIntroDialog && <IntroDialog onStartAudio={() => setShouldStartAudio(true)} />}
           <Card className="w-full md:max-w-2xl bg-black/50 text-white border-gray-700 transition-all duration-1000 animate-fade-in backdrop-blur-sm">
             <CardHeader className="text-center space-y-4 p-4 md:p-6">
               <div className="flex justify-between items-center px-4">
@@ -311,7 +312,7 @@ const Index = () => {
   if (!currentStageData) {
     return (
       <div className="relative min-h-screen overflow-hidden">
-        <GameBackground />
+        <GameBackground shouldStartAudio={shouldStartAudio} />
         <div className="relative min-h-screen bg-transparent p-4">
           <Card className="w-full max-w-4xl mx-auto bg-black/50 text-white border-gray-700 transition-all duration-1000 animate-fade-in">
             <CardHeader>
@@ -344,7 +345,7 @@ const Index = () => {
   if (showingResult && currentResult) {
     return (
       <div className="relative min-h-screen overflow-hidden">
-        <GameBackground />
+        <GameBackground shouldStartAudio={shouldStartAudio} />
         <div className="relative min-h-screen bg-transparent p-4 flex items-center justify-center">
           <Card className="w-full md:max-w-2xl bg-black/50 text-white border-gray-700 transition-all duration-1000 animate-fade-in">
             <CardHeader>
@@ -395,7 +396,7 @@ const Index = () => {
   if (showingMonthTransition && nextStage !== null && stages[nextStage]) {
     return (
       <div className="relative min-h-screen overflow-hidden">
-        <GameBackground />
+        <GameBackground shouldStartAudio={shouldStartAudio} />
         <div className="relative min-h-screen bg-transparent p-4 flex items-center justify-center">
           <MonthTransition 
             monthIndex={stages[nextStage]?.monthIndex ?? nextStage + 1}
@@ -409,7 +410,7 @@ const Index = () => {
 
   return (
     <div className="relative min-h-screen overflow-hidden">
-      <GameBackground />
+      <GameBackground shouldStartAudio={shouldStartAudio} />
       <div className="relative min-h-screen bg-transparent md:p-4 flex flex-col">
         <div className="flex-grow flex items-center">
           <div className="w-full h-full md:max-w-4xl mx-auto md:px-4">