Use game.color for GameCard fallback instead of static gradients

Replace hardcoded Tailwind gradient classes with dynamic background
color from the game's color field. Falls back to indigo if no color
is set.

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

frontend/src/components/GameCard.tsx

@@ -1,14 +1,6 @@
 import type { Game } from '../types'
 
-const GAME_GRADIENTS: Record<string, string> = {
-  firered: 'from-red-500 to-orange-500',
-  leafgreen: 'from-green-500 to-emerald-500',
-  emerald: 'from-emerald-500 to-teal-500',
-  heartgold: 'from-amber-400 to-yellow-500',
-  soulsilver: 'from-gray-400 to-slate-500',
-}
-
-const DEFAULT_GRADIENT = 'from-blue-500 to-indigo-500'
+const DEFAULT_COLOR = '#6366f1' // indigo-500
 
 interface GameCardProps {
   game: Game
@@ -17,7 +9,7 @@ interface GameCardProps {
 }
 
 export function GameCard({ game, selected, onSelect }: GameCardProps) {
-  const gradient = GAME_GRADIENTS[game.slug] ?? DEFAULT_GRADIENT
+  const backgroundColor = game.color ?? DEFAULT_COLOR
 
   return (
     <button
@@ -35,7 +27,8 @@ export function GameCard({ game, selected, onSelect }: GameCardProps) {
         />
       ) : (
         <div
-          className={`w-full h-48 bg-gradient-to-br ${gradient} flex items-center justify-center`}
+          className="w-full h-48 flex items-center justify-center"
+          style={{ backgroundColor }}
         >
           <span className="text-white text-2xl font-bold text-center px-4 drop-shadow-md">
             {game.name.replace('Pokemon ', '')}