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>

.beans/nuzlocke-tracker-qeim--ux-improvements-pass.md

@@ -18,5 +18,6 @@ Areas to evaluate:
 - Navigation between run dashboard and encounters
 - Empty states and onboarding flow
 - Visual feedback for actions (success/error toasts, optimistic updates)
+- It is unintuitive to not be able to deselect a game on the new run page
 
 Produce a concrete plan with specific UI/UX changes to implement.

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 ', '')}