feat: mobile-optimized human fight input

Large tap-target multiple-choice buttons (min 48px), full-width text
area for creative responses, countdown timer with color shift
(green/yellow/red) and shake animation at <3s, timer progress bar,
correct/wrong feedback flash overlay.

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

frontend/src/pages/HumanFightPage.vue

@@ -22,12 +22,17 @@ const currentChallenge = ref<{
   timeoutMs: number
   remainingMs: number
   scoring: string
+  choices: string[]
 } | null>(null)
 const answer = ref('')
 const trashTalk = ref('')
 const remainingSeconds = ref(45)
 const showTrashTalk = ref(false)
 
+// Feedback state
+const feedback = ref<'correct' | 'wrong' | null>(null)
+const feedbackTimer = ref<ReturnType<typeof setTimeout> | null>(null)
+
 // Round results tracking
 const roundResults = ref<Array<{
   round: number
@@ -51,6 +56,18 @@ const isMyFight = computed(() => {
 })
 const amSideA = computed(() => fight.value?.botAId === myBot.value?.id)
 
+const timerColor = computed(() => {
+  if (remainingSeconds.value <= 3) return 'text-ko'
+  if (remainingSeconds.value <= 10) return 'text-neon-yellow'
+  return 'text-neon-green'
+})
+
+const timerShake = computed(() => remainingSeconds.value <= 3 && remainingSeconds.value > 0)
+
+const hasChoices = computed(() =>
+  currentChallenge.value?.choices && currentChallenge.value.choices.length > 0
+)
+
 onMounted(() => {
   if (!myBot.value) {
     router.push('/join')
@@ -62,6 +79,7 @@ onMounted(() => {
 onUnmounted(() => {
   stopPolling()
   stopTimer()
+  if (feedbackTimer.value) clearTimeout(feedbackTimer.value)
 })
 
 function startPolling() {
@@ -82,6 +100,7 @@ function startTimer(remainingMs: number) {
       stopTimer()
       if (phase.value === 'challenge') {
         phase.value = 'submitted'
+        showFeedback('wrong')
       }
     }
   }, 1000)
@@ -91,6 +110,12 @@ function stopTimer() {
   if (timerHandle) { clearInterval(timerHandle); timerHandle = null }
 }
 
+function showFeedback(type: 'correct' | 'wrong') {
+  feedback.value = type
+  if (feedbackTimer.value) clearTimeout(feedbackTimer.value)
+  feedbackTimer.value = setTimeout(() => { feedback.value = null }, 1500)
+}
+
 async function pollForChallenge() {
   if (!myBotId.value || phase.value === 'finished' || phase.value === 'replay' || phase.value === 'error') return
 
@@ -106,10 +131,11 @@ async function pollForChallenge() {
         answer.value = ''
         trashTalk.value = ''
         showTrashTalk.value = false
+        feedback.value = null
         phase.value = 'challenge'
         startTimer(data.remainingMs)
         await nextTick()
-        answerInput.value?.focus()
+        if (!hasChoices.value) answerInput.value?.focus()
       }
     } else if (data.fightStatus === 'finished') {
       stopPolling()
@@ -117,7 +143,6 @@ async function pollForChallenge() {
       await loadFight()
       phase.value = 'finished'
     } else if (phase.value === 'submitted') {
-      // Between rounds — waiting for next challenge or fight end
       phase.value = 'between'
     }
   } catch {
@@ -125,6 +150,11 @@ async function pollForChallenge() {
   }
 }
 
+function selectChoice(choice: string) {
+  answer.value = choice
+  submitAnswer()
+}
+
 async function submitAnswer() {
   if (!currentChallenge.value || phase.value !== 'challenge') return
   if (!answer.value.trim()) return
@@ -142,7 +172,13 @@ async function submitAnswer() {
       }),
     })
 
-    if (!res.ok) {
+    if (res.ok) {
+      const data = await res.json()
+      // Show feedback if server tells us if answer was right
+      if (data.correct !== undefined) {
+        showFeedback(data.correct ? 'correct' : 'wrong')
+      }
+    } else {
       const data = await res.json()
       error.value = data.error || 'Failed to submit.'
     }
@@ -162,9 +198,7 @@ async function loadFight() {
         opponentName.value = enemy?.name || 'Unknown'
       }
       if (data.rounds) {
-        let hpA = 200, hpB = 200
         roundResults.value = data.rounds.map((r: any) => {
-          // Approximate HP from scores — actual HP tracked in fight record
           return { round: r.roundNumber, won: r.winnerId === myBotId.value, hpA: 0, hpB: 0 }
         })
         myHp.value = amSideA.value ? data.botAHp : data.botBHp
@@ -193,6 +227,22 @@ function goToArena() {
   <div class="h-[calc(100dvh-4rem)] flex flex-col items-center px-4 overflow-hidden">
     <div class="max-w-lg w-full flex-1 min-h-0 overflow-y-auto py-4">
 
+      <!-- Feedback flash overlay -->
+      <Transition name="fade">
+        <div
+          v-if="feedback"
+          class="fixed inset-0 z-50 flex items-center justify-center pointer-events-none"
+          :class="feedback === 'correct' ? 'bg-neon-green/10' : 'bg-ko/10'"
+        >
+          <span
+            class="font-display font-black text-5xl tracking-widest"
+            :class="feedback === 'correct' ? 'text-neon-green glow-green' : 'text-ko'"
+          >
+            {{ feedback === 'correct' ? 'CORRECT' : 'WRONG' }}
+          </span>
+        </div>
+      </Transition>
+
       <!-- PHASE: WAITING -->
       <div v-if="phase === 'waiting'" class="flex flex-col items-center justify-center flex-1 gap-4">
         <div class="w-12 h-12 border-4 border-neon-pink/30 border-t-neon-pink rounded-full animate-spin" />
@@ -209,14 +259,27 @@ function goToArena() {
             ROUND {{ currentChallenge.roundNumber }}
           </span>
           <span
-            class="font-display font-black text-lg tracking-wider"
-            :class="remainingSeconds <= 10 ? 'text-ko animate-pulse' : 'text-neon-yellow'"
+            class="font-display font-black text-xl tracking-wider transition-colors"
+            :class="[timerColor, { 'animate-shake': timerShake }]"
           >
             {{ remainingSeconds }}s
           </span>
         </div>
 
-        <div class="p-3 border-2 border-neon-purple/30 bg-neon-purple/5 mb-3">
+        <!-- Timer bar -->
+        <div class="h-1 bg-white/5 rounded-full mb-3 overflow-hidden">
+          <div
+            class="h-full rounded-full transition-all duration-1000 ease-linear"
+            :class="{
+              'bg-neon-green': remainingSeconds > 10,
+              'bg-neon-yellow': remainingSeconds > 3 && remainingSeconds <= 10,
+              'bg-ko': remainingSeconds <= 3,
+            }"
+            :style="{ width: (remainingSeconds / Math.ceil((currentChallenge.timeoutMs || 45000) / 1000)) * 100 + '%' }"
+          />
+        </div>
+
+        <div class="p-3 border-2 border-neon-purple/30 bg-neon-purple/5 mb-3 rounded">
           <div class="flex items-center gap-2 mb-1.5">
             <span class="font-display font-bold text-[10px] tracking-wider text-neon-purple uppercase">
               {{ currentChallenge.label }}
@@ -230,49 +293,69 @@ function goToArena() {
           </p>
         </div>
 
-        <textarea
-          ref="answerInput"
-          v-model="answer"
-          rows="4"
-          placeholder="Type your answer..."
-          class="w-full bg-surface border-2 border-border px-4 py-3 text-sm font-mono
-                 text-text-primary placeholder-text-muted resize-none
-                 focus:outline-none focus:border-neon-pink/50 transition-colors mb-2"
-          @keydown.ctrl.enter="submitAnswer"
-          @keydown.meta.enter="submitAnswer"
-        />
+        <!-- Multiple choice buttons -->
+        <div v-if="hasChoices" class="space-y-2 mb-3">
+          <button
+            v-for="(choice, i) in currentChallenge.choices"
+            :key="i"
+            class="w-full min-h-[48px] px-4 py-3 text-left text-sm font-mono
+                   border-2 border-border bg-surface/50 rounded
+                   hover:border-neon-cyan/50 hover:bg-neon-cyan/5
+                   active:bg-neon-cyan/10 active:border-neon-cyan
+                   transition-all"
+            @click="selectChoice(choice)"
+          >
+            <span class="text-neon-cyan/50 font-display font-bold mr-2">{{ String.fromCharCode(65 + i) }}.</span>
+            <span class="text-text-primary">{{ choice }}</span>
+          </button>
+        </div>
 
-        <button
-          v-if="!showTrashTalk"
-          class="font-mono text-[10px] text-text-muted hover:text-neon-yellow transition-colors mb-2"
-          @click="showTrashTalk = true"
-        >
-          + add trash talk
-        </button>
-        <input
-          v-if="showTrashTalk"
-          v-model="trashTalk"
-          type="text"
-          maxlength="200"
-          placeholder="Talk smack to your opponent..."
-          class="w-full bg-surface border border-border px-3 py-2 text-xs font-mono
-                 text-neon-yellow placeholder-text-muted
-                 focus:outline-none focus:border-neon-yellow/50 transition-colors mb-2"
-        />
+        <!-- Free text input (for creative or when no choices) -->
+        <template v-if="!hasChoices">
+          <textarea
+            ref="answerInput"
+            v-model="answer"
+            rows="4"
+            placeholder="Type your answer..."
+            class="w-full bg-surface border-2 border-border px-4 py-3 text-sm font-mono
+                   text-text-primary placeholder-text-muted resize-none rounded
+                   focus:outline-none focus:border-neon-pink/50 transition-colors mb-2"
+            @keydown.ctrl.enter="submitAnswer"
+            @keydown.meta.enter="submitAnswer"
+          />
 
-        <button
-          class="w-full py-4 bg-neon-pink/10 border-2 border-neon-pink text-neon-pink
-                 font-display font-black text-lg tracking-[0.15em]
-                 hover:bg-neon-pink/20 transition-all neon-border-pink
-                 disabled:opacity-30 disabled:cursor-not-allowed"
-          :disabled="!answer.trim()"
-          @click="submitAnswer"
-        >
-          SUBMIT ANSWER
-        </button>
-        <p class="font-mono text-[10px] text-text-muted text-center mt-1">
-          Ctrl+Enter to submit
-        </p>
+          <button
+            v-if="!showTrashTalk"
+            class="font-mono text-[10px] text-text-muted hover:text-neon-yellow transition-colors mb-2"
+            @click="showTrashTalk = true"
+          >
+            + add trash talk
+          </button>
+          <input
+            v-if="showTrashTalk"
+            v-model="trashTalk"
+            type="text"
+            maxlength="200"
+            placeholder="Talk smack to your opponent..."
+            class="w-full bg-surface border border-border px-3 py-2 text-xs font-mono
+                   text-neon-yellow placeholder-text-muted rounded
+                   focus:outline-none focus:border-neon-yellow/50 transition-colors mb-2"
+          />
+
+          <button
+            class="w-full min-h-[48px] py-4 bg-neon-pink/10 border-2 border-neon-pink text-neon-pink
+                   font-display font-black text-lg tracking-[0.15em] rounded
+                   hover:bg-neon-pink/20 transition-all neon-border-pink
+                   disabled:opacity-30 disabled:cursor-not-allowed"
+            :disabled="!answer.trim()"
+            @click="submitAnswer"
+          >
+            SUBMIT ANSWER
+          </button>
+          <p class="font-mono text-[10px] text-text-muted text-center mt-1">
+            Ctrl+Enter to submit
+          </p>
+        </template>
       </div>
 
       <!-- PHASE: SUBMITTED / BETWEEN ROUNDS -->
@@ -306,7 +389,7 @@ function goToArena() {
         <div class="space-y-2">
           <button
             class="w-full py-4 bg-neon-cyan/10 border-2 border-neon-cyan/50 text-neon-cyan
-                   font-display font-black text-sm tracking-widest
+                   font-display font-black text-sm tracking-widest rounded
                    hover:bg-neon-cyan/20 transition-all neon-border-cyan"
             @click="watchReplay"
           >
@@ -314,14 +397,14 @@ function goToArena() {
           </button>
           <button
             class="w-full py-3 bg-neon-pink/10 border-2 border-neon-pink/50 text-neon-pink
-                   font-display font-bold text-sm tracking-wider
+                   font-display font-bold text-sm tracking-wider rounded
                    hover:bg-neon-pink/20 transition-all"
             @click="fightAgain"
           >
             FIGHT AGAIN
           </button>
           <button
-            class="w-full py-2 border border-border text-text-muted
+            class="w-full py-2 border border-border text-text-muted rounded
                    font-display font-bold text-xs tracking-wider
                    hover:border-neon-purple/30 transition-all"
             @click="goToArena"
@@ -338,14 +421,14 @@ function goToArena() {
         </div>
         <div class="flex gap-2 mt-2">
           <button
-            class="flex-1 py-2 border border-neon-pink/40 text-neon-pink font-display font-bold text-xs tracking-wider
+            class="flex-1 py-2 border border-neon-pink/40 text-neon-pink font-display font-bold text-xs tracking-wider rounded
                    hover:bg-neon-pink/10 transition-all"
             @click="fightAgain"
           >
             FIGHT AGAIN
           </button>
           <button
-            class="flex-1 py-2 border border-border text-text-muted font-display font-bold text-xs tracking-wider
+            class="flex-1 py-2 border border-border text-text-muted font-display font-bold text-xs tracking-wider rounded
                    hover:border-neon-purple/30 transition-all"
             @click="phase = 'finished'"
           >
@@ -355,9 +438,27 @@ function goToArena() {
       </div>
 
       <!-- ERROR -->
-      <div v-if="error" class="mt-4 p-3 border-2 border-ko/30 bg-ko/5 text-center">
+      <div v-if="error" class="mt-4 p-3 border-2 border-ko/30 bg-ko/5 text-center rounded">
         <p class="font-mono text-xs text-ko">{{ error }}</p>
       </div>
     </div>
   </div>
 </template>
+
+<style scoped>
+.fade-enter-active { transition: opacity 0.15s ease; }
+.fade-leave-active { transition: opacity 0.8s ease; }
+.fade-enter-from, .fade-leave-to { opacity: 0; }
+
+@keyframes shake {
+  0%, 100% { transform: translateX(0); }
+  20% { transform: translateX(-3px); }
+  40% { transform: translateX(3px); }
+  60% { transform: translateX(-2px); }
+  80% { transform: translateX(2px); }
+}
+
+.animate-shake {
+  animation: shake 0.4s ease-in-out infinite;
+}
+</style>