Use type PNG badges instead of colored text spans

Replace inline typeColors maps in PokemonCard and StatusChangeModal
with a shared TypeBadge component that renders the type icon PNGs
from /types/{type}.png.

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

frontend/src/components/PokemonCard.tsx

@@ -1,4 +1,5 @@
 import type { EncounterDetail } from '../types'
+import { TypeBadge } from './TypeBadge'
 
 interface PokemonCardProps {
   encounter: EncounterDetail
@@ -6,27 +7,6 @@ interface PokemonCardProps {
   onClick?: () => void
 }
 
-const typeColors: Record<string, string> = {
-  normal: 'bg-gray-400',
-  fire: 'bg-red-500',
-  water: 'bg-blue-500',
-  electric: 'bg-yellow-400',
-  grass: 'bg-green-500',
-  ice: 'bg-cyan-300',
-  fighting: 'bg-red-700',
-  poison: 'bg-purple-500',
-  ground: 'bg-amber-600',
-  flying: 'bg-indigo-300',
-  psychic: 'bg-pink-500',
-  bug: 'bg-lime-500',
-  rock: 'bg-amber-700',
-  ghost: 'bg-purple-700',
-  dragon: 'bg-indigo-600',
-  dark: 'bg-gray-700',
-  steel: 'bg-gray-400',
-  fairy: 'bg-pink-300',
-}
-
 export function PokemonCard({ encounter, showFaintLevel, onClick }: PokemonCardProps) {
   const { pokemon, currentPokemon, route, nickname, catchLevel, faintLevel, deathCause } = encounter
   const isDead = faintLevel !== null
@@ -68,12 +48,7 @@ export function PokemonCard({ encounter, showFaintLevel, onClick }: PokemonCardP
 
       <div className="flex gap-1 mt-1">
         {displayPokemon.types.map((type) => (
-          <span
-            key={type}
-            className={`px-1.5 py-0.5 rounded text-[10px] font-medium text-white ${typeColors[type] ?? 'bg-gray-500'}`}
-          >
-            {type}
-          </span>
+          <TypeBadge key={type} type={type} />
         ))}
       </div>