fix: audio reliability — proper AudioContext resume, SFX destination, voice stability

- getSfxDest() helper centralizes SFX routing (replaces 38 inline calls)
- Await ensureAudioContext() before playing audio (fixes suspended context on prod)
- Chrome speechSynthesis pause bug workaround (periodic resume interval)
- Respect masterMuted on initial gain node creation
- Responsive overlay text sizes for small screens (text-2xl/5xl/7xl)
- Speech queue depth management with safety flush at depth > 3

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

frontend/src/components/FightViewer.vue

@@ -63,9 +63,9 @@ const hitTextY = ref(30)
 const glitching = ref(false)
 const soundOn = ref(true)
 
-function toggleSound() {
+async function toggleSound() {
   soundOn.value = !soundOn.value
-  ensureAudioContext()
+  await ensureAudioContext()
   setMasterMute(!soundOn.value)
 }
 
@@ -210,7 +210,7 @@ async function replay() {
 
   await initScene()
   if (soundOn.value) {
-    ensureAudioContext()
+    await ensureAudioContext()
     scene?.startMusic()
   }
   await sleep(300)
@@ -509,7 +509,7 @@ async function replay() {
           <div v-if="announcementVisible"
                class="absolute inset-0 flex items-center justify-center pointer-events-none z-20">
             <div class="announce-text-wrapper">
-              <p class="font-funky text-5xl sm:text-7xl tracking-widest announce-text uppercase announce-chromatic"
+              <p class="font-funky text-2xl sm:text-5xl lg:text-7xl tracking-widest announce-text uppercase announce-chromatic"
                  :data-text="announcement"
                  :style="{ color: announcementColor, textShadow: `0 0 20px ${announcementColor}, 0 0 40px ${announcementColor}, 0 0 80px ${announcementColor}40, 0 0 120px ${announcementColor}20` }">
                 {{ announcement }}
@@ -524,7 +524,7 @@ async function replay() {
                class="absolute pointer-events-none z-30"
                :style="{ left: `${hitTextX}%`, top: `${hitTextY}%`, transform: 'translate(-50%, -50%)' }">
             <div class="hit-text-wrapper">
-              <p class="font-neon text-4xl sm:text-5xl tracking-wider hit-text hit-chromatic"
+              <p class="font-neon text-xl sm:text-4xl lg:text-5xl tracking-wider hit-text hit-chromatic"
                  :data-text="hitText"
                  :style="{ color: hitTextColor, textShadow: `0 0 15px ${hitTextColor}, 0 0 30px ${hitTextColor}, 0 0 60px ${hitTextColor}60` }">
                 {{ hitText }}