🎯 Refine Rarity Effects: Card-Focused Glow + Hero Particles

✨ Perfect Balance Achieved:
- Removed bold rarity gradient from hero background
- Hero now uses neutral theme-based gradient
- Added beautiful rarity glow effect around card image only
- Kept magical particle effects in full hero space

🎨 Card Glow System:
- Subtle blur glow behind card with rarity colors
- Enhanced box-shadow with rarity-specific colors
- Gentle pulsing animation for mystical effect
- Proper scaling and positioning for perfect visual balance

🌟 Improved Readability:
- Hero text now uses consistent theme colors
- No more contrast issues with bold backgrounds
- Clean, professional appearance with magical touches

The result: Subtle, elegant rarity indication focused on the card itself while maintaining the magical particle atmosphere

pages/card/[id].js

@@ -135,16 +135,16 @@ export default function CardDetail() {
   const getRarityGradient = (rarity) => {
     const rarityKey = rarity?.toLowerCase();
     const gradients = {
-      'common': '#f3f4f6, #e5e7eb, #d1d5db',           // Subtle gray
+      'common': '#9ca3af, #6b7280, #4b5563',           // Subtle gray glow
-      'uncommon': '#ecfdf5, #d1fae5, #a7f3d0',         // Subtle green
+      'uncommon': '#10b981, #059669, #047857',         // Green glow
-      'rare': '#fef3c7, #fde68a, #fcd34d',             // Subtle gold
+      'rare': '#f59e0b, #d97706, #b45309',             // Gold glow
-      'mythic': '#fef9c3, #fef08a, #facc15',           // Rich gold
+      'mythic': '#fbbf24, #f59e0b, #d97706',           // Rich gold glow
-      'holographic': '#fce7f3, #fbcfe8, #f9a8d4',     // Subtle pink
+      'holographic': '#ec4899, #db2777, #be185d',     // Pink glow
-      'enchanted': '#f3e8ff, #e9d5ff, #c4b5fd',       // Subtle purple
+      'enchanted': '#a855f7, #9333ea, #7c3aed',       // Purple glow
-      'super rare': '#dbeafe, #bfdbfe, #93c5fd',       // Subtle blue
+      'super rare': '#3b82f6, #2563eb, #1d4ed8',       // Blue glow
-      'legendary': '#fef3c7, #fde68a, #f59e0b'         // Vibrant gold
+      'legendary': '#fbbf24, #f59e0b, #ea580c'         // Vibrant gold-orange glow
     };
-    return gradients[rarityKey] || '#f9fafb, #f3f4f6, #e5e7eb';
+    return gradients[rarityKey] || '#6b7280, #4b5563, #374151';
   };
 
   const getParticleCount = (rarity) => {
@@ -374,7 +374,7 @@ export default function CardDetail() {
       <div 
         className="relative min-h-96 flex items-center justify-center overflow-hidden"
         style={{
-          background: `linear-gradient(135deg, ${getRarityGradient(card.rarity)})`
+          background: 'linear-gradient(135deg, var(--bg-secondary), var(--bg-primary))'
         }}
       >
         {/* Animated Particles Background */}
@@ -415,11 +415,19 @@ export default function CardDetail() {
             {/* Card Image */}
             <div className="flex justify-center">
               <div className="relative group">
+                {/* Rarity Glow Effect */}
                 <div 
-                  className="w-80 h-112 rounded-2xl overflow-hidden shadow-2xl transform transition-all duration-300 hover:scale-105"
+                  className="absolute inset-0 rounded-2xl blur-xl opacity-60 animate-pulse"
                   style={{
-                    background: `linear-gradient(135deg, ${getRarityColor(card.rarity)}20, ${getRarityColor(card.rarity)}10)`,
+                    background: `linear-gradient(135deg, ${getRarityGradient(card.rarity)})`,
-                    boxShadow: `0 20px 40px rgba(0, 0, 0, 0.3)`
+                    transform: 'scale(1.1)'
+                  }}
+                />
+                <div 
+                  className="relative w-80 h-112 rounded-2xl overflow-hidden shadow-2xl transform transition-all duration-300 hover:scale-105"
+                  style={{
+                    background: `linear-gradient(135deg, ${getRarityColor(card.rarity)}15, ${getRarityColor(card.rarity)}08)`,
+                    boxShadow: `0 20px 40px rgba(0, 0, 0, 0.3), 0 0 30px ${getRarityColor(card.rarity)}40`
                   }}
                 >
                   {card.image_url ? (
@@ -447,11 +455,7 @@ export default function CardDetail() {
             </div>
 
             {/* Card Info */}
-            <div style={{ 
+            <div style={{ color: 'var(--text-primary)' }}>
-              color: ['common', 'uncommon', 'rare'].includes(card.rarity?.toLowerCase()) 
-                ? 'var(--text-primary)' 
-                : '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>