Fix doubled encounters in encounter modals by filtering on gameId

EncounterModal and ShinyEncounterModal were calling useRoutePokemon
without a gameId, returning encounters for all games in the version
group. Now both receive and pass the run's gameId to scope results
to the current game only.

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

frontend/src/components/EncounterModal.tsx

@@ -14,6 +14,7 @@ import type {
 
 interface EncounterModalProps {
   route: Route
+  gameId: number
   existing?: EncounterDetail
   dupedPokemonIds?: Set<number>
   onSubmit: (data: {
@@ -78,6 +79,7 @@ function groupByMethod(pokemon: RouteEncounterDetail[]): { method: string; pokem
 
 export function EncounterModal({
   route,
+  gameId,
   existing,
   dupedPokemonIds,
   onSubmit,
@@ -87,6 +89,7 @@ export function EncounterModal({
 }: EncounterModalProps) {
   const { data: routePokemon, isLoading: loadingPokemon } = useRoutePokemon(
     route.id,
+    gameId,
   )
 
   const [selectedPokemon, setSelectedPokemon] =
@@ -190,7 +193,7 @@ export function EncounterModal({
               </label>
               {loadingPokemon ? (
                 <div className="flex items-center justify-center py-4">
-                  <div className="w-6 h-6 border-2 border-blue-600 border-t-transparent rounded-full animate-spin" />
+                  <div className="w-10 h-10 border-2 border-blue-600 border-t-transparent rounded-full animate-spin" />
                 </div>
               ) : filteredPokemon && filteredPokemon.length > 0 ? (
                 <>

frontend/src/components/ShinyEncounterModal.tsx

@@ -9,6 +9,7 @@ import type { Route, RouteEncounterDetail } from '../types'
 
 interface ShinyEncounterModalProps {
   routes: Route[]
+  gameId: number
   onSubmit: (data: {
     routeId: number
     pokemonId: number
@@ -41,6 +42,7 @@ function groupByMethod(pokemon: RouteEncounterDetail[]): { method: string; pokem
 
 export function ShinyEncounterModal({
   routes,
+  gameId,
   onSubmit,
   onClose,
   isPending,
@@ -48,6 +50,7 @@ export function ShinyEncounterModal({
   const [selectedRouteId, setSelectedRouteId] = useState<number | null>(null)
   const { data: routePokemon, isLoading: loadingPokemon } = useRoutePokemon(
     selectedRouteId,
+    gameId,
   )
 
   const [selectedPokemon, setSelectedPokemon] =

frontend/src/pages/RunEncounters.tsx

@@ -218,7 +218,7 @@ function RouteGroup({
                 <img
                   src={groupEncounter.pokemon.spriteUrl}
                   alt={groupEncounter.pokemon.name}
-                  className="w-5 h-5"
+                  className="w-10 h-10"
                 />
               )}
               <span className="text-xs text-gray-500 dark:text-gray-400 capitalize">
@@ -972,7 +972,7 @@ export function RunEncounters() {
                         <img
                           src={encounter.pokemon.spriteUrl}
                           alt={encounter.pokemon.name}
-                          className="w-5 h-5"
+                          className="w-10 h-10"
                         />
                       )}
                       <span className="text-xs text-gray-500 dark:text-gray-400 capitalize">
@@ -1116,6 +1116,7 @@ export function RunEncounters() {
       {selectedRoute && (
         <EncounterModal
           route={selectedRoute}
+          gameId={run!.gameId}
           existing={editingEncounter ?? undefined}
           dupedPokemonIds={dupedPokemonIds}
           onSubmit={handleCreate}
@@ -1132,6 +1133,7 @@ export function RunEncounters() {
       {showShinyModal && routes && (
         <ShinyEncounterModal
           routes={routes}
+          gameId={run!.gameId}
           onSubmit={handleCreate}
           onClose={() => setShowShinyModal(false)}
           isPending={createEncounter.isPending}