Add Hall of Fame team selection for completed runs

After marking a run as completed, a modal prompts the player to select
which Pokemon (up to 6) entered the Hall of Fame. The selection is stored
as hof_encounter_ids on the run, displayed in the victory banner, and
can be edited later. This lays the foundation for scoping genlocke
retireHoF to only the actual HoF team.

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

frontend/src/components/HofTeamModal.tsx

@@ -0,0 +1,115 @@
+import { useState } from 'react'
+import type { EncounterDetail } from '../types'
+
+interface HofTeamModalProps {
+  alive: EncounterDetail[]
+  onSubmit: (encounterIds: number[]) => void
+  onSkip: () => void
+  isPending: boolean
+}
+
+export function HofTeamModal({ alive, onSubmit, onSkip, isPending }: HofTeamModalProps) {
+  const [selected, setSelected] = useState<Set<number>>(() => {
+    // Pre-select all if 6 or fewer
+    if (alive.length <= 6) return new Set(alive.map((e) => e.id))
+    return new Set<number>()
+  })
+
+  const toggle = (id: number) => {
+    setSelected((prev) => {
+      const next = new Set(prev)
+      if (next.has(id)) {
+        next.delete(id)
+      } else if (next.size < 6) {
+        next.add(id)
+      }
+      return next
+    })
+  }
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+      <div className="fixed inset-0 bg-black/50" />
+      <div className="relative bg-white dark:bg-gray-800 rounded-xl shadow-xl max-w-lg w-full max-h-[90vh] overflow-y-auto">
+        <div className="sticky top-0 bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 px-6 py-4 rounded-t-xl">
+          <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
+            Hall of Fame Team
+          </h2>
+          <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
+            Select the Pokemon that entered the Hall of Fame (max 6)
+          </p>
+        </div>
+
+        <div className="px-6 py-4">
+          <div className="grid grid-cols-3 gap-2">
+            {alive.map((enc) => {
+              const displayPokemon = enc.currentPokemon ?? enc.pokemon
+              const isSelected = selected.has(enc.id)
+              const atMax = selected.size >= 6 && !isSelected
+
+              return (
+                <button
+                  key={enc.id}
+                  type="button"
+                  onClick={() => !atMax && toggle(enc.id)}
+                  disabled={atMax}
+                  className={`flex flex-col items-center p-3 rounded-lg border-2 text-center transition-colors ${
+                    isSelected
+                      ? 'border-yellow-500 bg-yellow-50 dark:bg-yellow-900/20'
+                      : atMax
+                        ? 'border-gray-200 dark:border-gray-700 opacity-40 cursor-not-allowed'
+                        : 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600'
+                  }`}
+                >
+                  {displayPokemon.spriteUrl ? (
+                    <img
+                      src={displayPokemon.spriteUrl}
+                      alt={displayPokemon.name}
+                      className="w-14 h-14"
+                    />
+                  ) : (
+                    <div className="w-14 h-14 rounded-full bg-gray-200 dark:bg-gray-600 flex items-center justify-center text-lg font-bold">
+                      {displayPokemon.name[0].toUpperCase()}
+                    </div>
+                  )}
+                  <span className="text-xs font-medium text-gray-700 dark:text-gray-300 mt-1 capitalize">
+                    {enc.nickname || displayPokemon.name}
+                  </span>
+                  {enc.nickname && (
+                    <span className="text-[10px] text-gray-400">
+                      {displayPokemon.name}
+                    </span>
+                  )}
+                </button>
+              )
+            })}
+          </div>
+        </div>
+
+        <div className="sticky bottom-0 bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 px-6 py-4 rounded-b-xl flex items-center justify-between">
+          <button
+            type="button"
+            onClick={onSkip}
+            disabled={isPending}
+            className="text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 disabled:opacity-50"
+          >
+            Skip
+          </button>
+          <div className="flex items-center gap-3">
+            <span className="text-sm text-gray-400 dark:text-gray-500">
+              {selected.size}/6 selected
+            </span>
+            <button
+              type="button"
+              disabled={selected.size === 0 || isPending}
+              onClick={() => onSubmit([...selected])}
+              className="px-4 py-2 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+            >
+              {isPending ? 'Saving...' : 'Confirm'}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

frontend/src/components/index.ts

@@ -3,6 +3,7 @@ export { EncounterMethodBadge } from './EncounterMethodBadge'
 export { EncounterModal } from './EncounterModal'
 export { EndRunModal } from './EndRunModal'
 export { GameCard } from './GameCard'
+export { HofTeamModal } from './HofTeamModal'
 export { GameGrid } from './GameGrid'
 export { Layout } from './Layout'
 export { PokemonCard } from './PokemonCard'