feat: spectator reactions with floating emoji particles

POST /api/fights/:fightId/react endpoint accepts emoji reactions (fist,
fire, skull, 100, clown), aggregates counts, broadcasts via SSE.
Reaction bar added to FightViewer with floating emoji particles that
rise and fade. Live fight views receive reactions via SSE in real-time.

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

frontend/src/components/FightViewer.vue

@@ -70,6 +70,51 @@ const glitching = ref(false)
 const soundOn = ref(true)
 const insanityMode = ref(false)
 
+// Reactions
+const REACTION_EMOJIS: Record<string, string> = {
+  fist: '\u{1F44A}',
+  fire: '\u{1F525}',
+  skull: '\u{1F480}',
+  '100': '\u{1F4AF}',
+  clown: '\u{1F921}',
+}
+const reactionCounts = ref<Record<string, number>>({})
+const floatingEmojis = ref<{ id: number; emoji: string; x: number }[]>([])
+let emojiIdCounter = 0
+
+async function sendReaction(key: string) {
+  // Spawn local particle immediately
+  spawnFloatingEmoji(REACTION_EMOJIS[key])
+
+  try {
+    const res = await fetch(`/api/fights/${props.fight.id}/react`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ emoji: key }),
+    })
+    if (res.ok) {
+      const data = await res.json()
+      if (data.counts) reactionCounts.value = data.counts
+    }
+  } catch { /* ignore */ }
+}
+
+function spawnFloatingEmoji(emoji: string) {
+  const id = emojiIdCounter++
+  const x = 15 + Math.random() * 70
+  floatingEmojis.value.push({ id, emoji, x })
+  setTimeout(() => {
+    floatingEmojis.value = floatingEmojis.value.filter(e => e.id !== id)
+  }, 2000)
+}
+
+function receiveReaction(emoji: string, counts: Record<string, number>) {
+  reactionCounts.value = counts
+  spawnFloatingEmoji(REACTION_EMOJIS[emoji] || emoji)
+}
+
+defineExpose({ receiveReaction })
+
 async function toggleSound() {
   soundOn.value = !soundOn.value
   await ensureAudioContext()
@@ -652,6 +697,16 @@ async function _doReplay() {
           </div>
         </Transition>
 
+        <!-- Floating reaction emojis -->
+        <div
+          v-for="fe in floatingEmojis"
+          :key="fe.id"
+          class="absolute pointer-events-none z-25 emoji-float"
+          :style="{ left: `${fe.x}%`, bottom: '10%' }"
+        >
+          <span class="text-2xl sm:text-3xl">{{ fe.emoji }}</span>
+        </div>
+
         <!-- Floating hit text -->
         <Transition name="hit-pop">
           <div v-if="hitTextVisible"
@@ -705,6 +760,20 @@ async function _doReplay() {
         </button>
         <span class="font-pixel text-[10px] text-text-muted">{{ fight.status === 'finished' ? 'FINISHED' : fight.status.toUpperCase() }}</span>
       </div>
+
+      <!-- Reaction bar -->
+      <div class="px-3 py-1.5 border-t border-border flex-shrink-0 flex items-center gap-1.5 bg-surface-raised/30">
+        <button
+          v-for="(emoji, key) in REACTION_EMOJIS"
+          :key="key"
+          class="flex items-center gap-0.5 px-2 py-1 rounded-md border border-border/30
+                 hover:border-neon-cyan/30 hover:bg-neon-cyan/5 transition-all active:scale-90"
+          @click="sendReaction(key)"
+        >
+          <span class="text-sm">{{ emoji }}</span>
+          <span v-if="reactionCounts[key]" class="font-mono text-[9px] text-text-muted">{{ reactionCounts[key] }}</span>
+        </button>
+      </div>
     </div>
   </div>
 </template>
@@ -837,6 +906,16 @@ async function _doReplay() {
   100% { filter: none; transform: none; }
 }
 
+/* Floating reaction emoji */
+.emoji-float {
+  animation: emoji-rise 2s ease-out forwards;
+}
+@keyframes emoji-rise {
+  0% { opacity: 1; transform: translateY(0) scale(1); }
+  50% { opacity: 0.8; transform: translateY(-60px) scale(1.2); }
+  100% { opacity: 0; transform: translateY(-140px) scale(0.6); }
+}
+
 /* VHS scanline overlay on canvas */
 .glitch-container::after {
   content: '';