fix voice

src/App.jsx

@@ -94,6 +94,24 @@ function AppMain() {
   const scoreEndRef = useRef(0);
   const scoreRafRef = useRef(null);
   const [crowns, setCrowns] = useState({ bronze: 0, silver: 0, gold: 0 });
+  const [playingBgm, setPlayingBgm] = useState(null);
+  const bgmRef = useRef(null);
+
+  const toggleBgm = useCallback((tier) => {
+    if (bgmRef.current) {
+      bgmRef.current.pause();
+      bgmRef.current = null;
+      if (playingBgm === tier) { setPlayingBgm(null); return; }
+    }
+    if (volumeRef.current < 0.5) { handleVolumeChange(0.5); }
+    const audio = new Audio(`${BASE_URL}music/${tier}.mp3`);
+    audio.volume = volumeRef.current;
+    audio.loop = true;
+    audio.play().catch(() => {});
+    audio.onended = () => setPlayingBgm(null);
+    bgmRef.current = audio;
+    setPlayingBgm(tier);
+  }, [playingBgm]);
   const langRef = useRef('en');
   const volumeRef = useRef(0);
   const voiceIndexRef = useRef(0);
@@ -122,6 +140,7 @@ function AppMain() {
     setVolume(v);
     volumeRef.current = v;
     if (windRef.current) windRef.current.volume = v;
+    if (bgmRef.current) bgmRef.current.volume = v;
   }, []);
 
   useEffect(() => {
@@ -134,8 +153,7 @@ function AppMain() {
   }, [view]);
 
   const playSkillVoice = useCallback(() => {
-    const type = voicePattern[voiceIndexRef.current % voicePattern.length];
+    const type = Math.random() < 1/6 ? 'skill' : 'normal';
-    voiceIndexRef.current += 1;
     const suffix = langRef.current === 'en' ? '_en' : '';
     const file = `${import.meta.env.BASE_URL}voice/ai/${type}_1${suffix}.mp3`;
     const audio = new Audio(file);
@@ -235,6 +253,9 @@ function AppMain() {
     }, 4500);
     // Damage number - show during blackhole phase
     setTimeout(() => {
+      const burstEnd = new Audio(`${BASE_URL}sound/burst_end.mp3`);
+      burstEnd.volume = volumeRef.current;
+      burstEnd.play().catch(() => {});
       const baseDmg = Math.floor(Math.random() * 100000) + 1;
       // x2 if ai_mode
       const modeMult = vrmModel === 'ai_mode.vrm' ? 2 : 1;
@@ -279,7 +300,8 @@ function AppMain() {
       });
     }, 2500);
     const suffix = langRef.current === 'en' ? '_en' : '';
-    const file = `${import.meta.env.BASE_URL}voice/ai/burst_1${suffix}.mp3`;
+    const burstType = Math.random() < 1/6 ? 'burst' : 'normal';
+    const file = `${import.meta.env.BASE_URL}voice/ai/${burstType}_1${suffix}.mp3`;
     const audio = new Audio(file);
     audio.volume = volumeRef.current;
     audio.play().catch(() => {});
@@ -467,6 +489,11 @@ function AppMain() {
             }}>
               <img src={`${import.meta.env.BASE_URL}icon/crown.svg`} alt="gold" style={{ width: 16, height: 16, filter: 'brightness(0) invert(1) sepia(1) saturate(10) hue-rotate(330deg)' }} />
               <span style={{ color: 'rgba(255,255,255,0.5)', fontSize: '11px', fontFamily: 'monospace' }}>{crowns.gold}</span>
+              <img
+                src={`${import.meta.env.BASE_URL}icon/play.svg`} alt="play"
+                onClick={() => toggleBgm('gold')}
+                style={{ width: 14, height: 14, filter: 'brightness(0) invert(1)', opacity: playingBgm === 'gold' ? 1 : 0.4, cursor: 'pointer' }}
+              />
             </div>
           )}
           {crowns.silver > 0 && (
@@ -479,6 +506,11 @@ function AppMain() {
             }}>
               <img src={`${import.meta.env.BASE_URL}icon/crown.svg`} alt="silver" style={{ width: 16, height: 16, filter: 'brightness(0) invert(1) brightness(0.9)' }} />
               <span style={{ color: 'rgba(255,255,255,0.5)', fontSize: '11px', fontFamily: 'monospace' }}>{crowns.silver}</span>
+              <img
+                src={`${import.meta.env.BASE_URL}icon/play.svg`} alt="play"
+                onClick={() => toggleBgm('silver')}
+                style={{ width: 14, height: 14, filter: 'brightness(0) invert(1)', opacity: playingBgm === 'silver' ? 1 : 0.4, cursor: 'pointer' }}
+              />
             </div>
           )}
           {crowns.bronze > 0 && (
@@ -491,6 +523,11 @@ function AppMain() {
             }}>
               <img src={`${import.meta.env.BASE_URL}icon/crown.svg`} alt="bronze" style={{ width: 16, height: 16, filter: 'brightness(0) invert(1) sepia(1) saturate(10) hue-rotate(90deg)' }} />
               <span style={{ color: 'rgba(255,255,255,0.5)', fontSize: '11px', fontFamily: 'monospace' }}>{crowns.bronze}</span>
+              <img
+                src={`${import.meta.env.BASE_URL}icon/play.svg`} alt="play"
+                onClick={() => toggleBgm('bronze')}
+                style={{ width: 14, height: 14, filter: 'brightness(0) invert(1)', opacity: playingBgm === 'bronze' ? 1 : 0.4, cursor: 'pointer' }}
+              />
             </div>
           )}
         </div>