diff --git a/pages/card/[id].js b/pages/card/[id].js
index b458d16..a366b8e 100644
--- a/pages/card/[id].js
+++ b/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>