fix: human fight UX — SSE challenge input, fighter sprites, battle log questions, left-side positioning

- Add SSE human_challenge listener for instant input activation with auto-focus
- Buffer challenges during 3s round cooldown, apply with correct remaining time
- Map 'human' archetype to fighter-looking archetypes (boxer, ninja, etc.) in sprite system
- Show challenge questions in battle log via round_start SSE events
- Ensure human players are always botA (left side) in queue matchmaking

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

frontend/src/pages/FightPage.vue

@@ -64,6 +64,33 @@ const liveAnnouncement = ref('')
 const liveAnnouncementColor = ref('#ffffff')
 const liveAnnouncementVisible = ref(false)
 const currentChallengeInfo = ref<{ type: string; label: string } | null>(null)
+const pendingChallengeData = ref<{ data: any; receivedAt: number } | null>(null)
+
+// Map 'human' archetype to a human-like fighter archetype for the sprite system
+const HUMAN_FIGHTER_ARCHETYPES = ['boxer', 'wrestler', 'gladiator', 'ninja', 'cowboy', 'pirate', 'samurai', 'viking', 'knight']
+function humanFighterArchetype(seed: string): string {
+  let h = 0
+  for (let i = 0; i < seed.length; i++) h = ((h << 5) - h + seed.charCodeAt(i)) | 0
+  return HUMAN_FIGHTER_ARCHETYPES[Math.abs(h) % HUMAN_FIGHTER_ARCHETYPES.length]
+}
+
+function applyChallenge(data: any, receivedAt?: number) {
+  const elapsed = receivedAt ? Date.now() - receivedAt : 0
+  const remaining = Math.max(1000, (data.timeoutMs || 8000) - elapsed)
+  humanChallenge.value = {
+    type: data.type,
+    label: data.label,
+    prompt: data.prompt,
+    roundNumber: data.round,
+    remainingMs: remaining,
+    scoring: data.scoring,
+  }
+  humanAnswer.value = ''
+  humanSubmitted.value = false
+  humanTimer.value = Math.ceil(remaining / 1000)
+  startTimer()
+  nextTick(() => answerInput.value?.focus())
+}
 
 const myBotId = computed(() => {
   if (!isLoggedIn.value || !myBot.value) return null
@@ -222,10 +249,14 @@ async function initLiveScene() {
     liveCanvas.value = newCanvas
   }
 
+  // Map 'human' archetype to a fighter-looking archetype for the sprite system
+  const archA = data.botA.archetype === 'human' ? humanFighterArchetype(data.botA.avatarSeed || data.botA.name) : data.botA.archetype
+  const archB = data.botB.archetype === 'human' ? humanFighterArchetype(data.botB.avatarSeed || data.botB.name) : data.botB.archetype
+
   liveScene = await createFightScene({
     canvas: liveCanvas.value,
-    botA: { name: data.botA.name, seed: data.botA.avatarSeed || data.botA.name, tier: data.botA.tier, archetype: data.botA.archetype, customization: data.botA.customization },
-    botB: { name: data.botB.name, seed: data.botB.avatarSeed || data.botB.name, tier: data.botB.tier, archetype: data.botB.archetype, customization: data.botB.customization },
+    botA: { name: data.botA.name, seed: data.botA.avatarSeed || data.botA.name, tier: data.botA.tier, archetype: archA, customization: data.botA.customization },
+    botB: { name: data.botB.name, seed: data.botB.avatarSeed || data.botB.name, tier: data.botB.tier, archetype: archB, customization: data.botB.customization },
     arena: data.arena,
   })
 
@@ -256,6 +287,25 @@ function connectSSE() {
     try {
       const data = JSON.parse(e.data)
       currentChallengeInfo.value = { type: data.challenge.type, label: data.challenge.label }
+      // Show challenge question in battle log
+      liveLogItems.value.push({
+        type: 'challenge',
+        round: data.round,
+        text: `${data.challenge.label}: ${data.challenge.prompt}`,
+        color: 'neon-green',
+      })
+      scrollLiveLog()
+    } catch { /* */ }
+  })
+
+  eventSource.addEventListener('human_challenge', (e) => {
+    try {
+      const data = JSON.parse(e.data)
+      if (roundCooldown.value > 0) {
+        pendingChallengeData.value = { data, receivedAt: Date.now() }
+      } else {
+        applyChallenge(data)
+      }
     } catch { /* */ }
   })
 
@@ -370,6 +420,11 @@ async function handleRoundEnd(data: any) {
     roundCooldown.value--
     if (roundCooldown.value <= 0) {
       if (cooldownHandle) { clearInterval(cooldownHandle); cooldownHandle = null }
+      // Apply any buffered challenge from SSE
+      if (pendingChallengeData.value) {
+        applyChallenge(pendingChallengeData.value.data, pendingChallengeData.value.receivedAt)
+        pendingChallengeData.value = null
+      }
     }
   }, 1000)
 }
@@ -467,6 +522,7 @@ async function fightAgain(botId: string) {
   replayDone.value = false
   humanChallenge.value = null
   humanSubmitted.value = false
+  pendingChallengeData.value = null
   roundCooldown.value = 0
   if (liveScene) { liveScene.destroy(); liveScene = null }
   liveSceneReady.value = false
@@ -567,6 +623,9 @@ function stopAutoBattle() {
           <div v-for="(item, idx) in liveLogItems" :key="idx">
             <div v-if="item.type === 'divider'" class="py-1.5"><div class="border-t border-white/5" /></div>
             <p v-else-if="item.type === 'header'" class="text-neon-purple font-bold text-base tracking-wide pt-3 pb-1 uppercase">{{ item.text }}</p>
+            <div v-else-if="item.type === 'challenge'" class="bg-neon-green/[0.06] border border-neon-green/20 rounded-md px-3 py-1.5 my-1">
+              <p class="text-neon-green text-xs font-mono leading-snug">{{ item.text }}</p>
+            </div>
             <div v-else-if="item.type === 'responseA'" class="bg-neon-cyan/[0.04] border-l-2 border-neon-cyan/30 rounded-r-md px-3 py-1.5 my-1">
               <p class="text-neon-cyan text-sm leading-snug">{{ item.text }}</p>
             </div>