🔧 Fix Card Hero Section Invisible Text Issue

🐛 Root Cause:
- getTCGGradient() returned Tailwind classes (from-purple-600)
- CSS linear-gradient() received invalid syntax after string replacement
- Background gradient wasn't rendering, leaving white text on light background
- Text became completely invisible (only visible when highlighted)

✅ Solution:
- Fixed getTCGGradient() to return proper CSS color values
- Removed broken string replacement logic
- Used proper CSS gradient syntax: linear-gradient(135deg, #color1, #color2, #color3)
- White text now properly visible on colored gradient backgrounds

🎨 Color Improvements:
- MTG: Purple gradient (#9333ea, #8b5cf6, #4f46e5)
- Pokemon: Blue gradient (#2563eb, #3b82f6, #0891b2)
- Lorcana: Pink/Purple gradient (#db2777, #ec4899, #a855f7)
- Default: Gray gradient for unknown games

The card hero section should now be fully visible in all themes! 🌟

pages/card/[id].js

@@ -134,11 +134,11 @@ export default function CardDetail() {
 
   const getTCGGradient = (game) => {
     const gradients = {
-      'MTG': 'from-purple-600 via-purple-500 to-indigo-600',
-      'Pokemon': 'from-blue-600 via-blue-500 to-cyan-600',
-      'Lorcana': 'from-pink-600 via-pink-500 to-purple-600'
+      'MTG': '#9333ea, #8b5cf6, #4f46e5',
+      'Pokemon': '#2563eb, #3b82f6, #0891b2',
+      'Lorcana': '#db2777, #ec4899, #a855f7'
     };
-    return gradients[game] || 'from-gray-600 to-gray-700';
+    return gradients[game] || '#4b5563, #374151';
   };
 
   const getTCGIcon = (game) => {
@@ -338,7 +338,7 @@ export default function CardDetail() {
       <div 
         className="relative min-h-96 flex items-center justify-center overflow-hidden"
         style={{
-          background: `linear-gradient(135deg, ${getTCGGradient(card.game).replace('from-', '').replace('via-', '').replace('to-', '')})`
+          background: `linear-gradient(135deg, ${getTCGGradient(card.game)})`
         }}
       >
         {/* Background Pattern */}
@@ -385,7 +385,7 @@ export default function CardDetail() {
             </div>
 
             {/* Card Info */}
-            <div className="text-white">
+            <div style={{ color: 'white' }}>
               <div className="mb-6">
                 <h1 className="text-4xl font-bold mb-2">{card.name}</h1>
                 <p className="text-xl opacity-90 mb-4">{card.oracle_text || card.card_type}</p>