From 33e03d8f47c512d045b0a30df110210ceb44fd8c Mon Sep 17 00:00:00 2001
From: varutasu <104105839+varutasu@users.noreply.github.com>
Date: Wed, 3 Jun 2026 08:57:49 -0500
Subject: [PATCH] Extract Card3D and CardBack from pages/cards.js (Brief 1).
 (#77)

Moves ~530 lines of 3D card rendering into components/Card3D.js so the cards page god-component split can continue incrementally.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 components/Card3D.js | 530 ++++++++++++++++++++++++++++++++++++++++++
 pages/cards.js       | 531 -------------------------------------------
 2 files changed, 530 insertions(+), 531 deletions(-)
 create mode 100644 components/Card3D.js

diff --git a/components/Card3D.js b/components/Card3D.js
new file mode 100644
index 0000000..47fe808
--- /dev/null
+++ b/components/Card3D.js
@@ -0,0 +1,530 @@
+/* eslint-disable @next/next/no-img-element -- External card image URLs; next/image migration is out of scope. */
+import { useState } from 'react';
+import { ManaCost } from './ManaSymbols';
+import { VOCAB } from '../lib/collection-vocabulary.js';
+
+export default function Card3D({ card, viewMode, getRarityLabel, getRarityColor, useManaSvg = false }) {
+
+  const handleMouseMove = (e) => {
+    const rect = e.currentTarget.getBoundingClientRect();
+    setCardPosition({
+      x: rect.left,
+      y: rect.top,
+      width: rect.width,
+      height: rect.height
+    });
+  };
+
+  const handleMouseLeave = () => {
+    setIsHovered(false);
+  };
+
+  const handleMouseEnter = () => {
+    setIsHovered(true);
+  };
+
+  const getTCGColor = (game) => {
+    const colors = {
+      'MTG': '#8B5CF6', // purple
+      'Pokemon': '#3B82F6', // blue
+      'Lorcana': '#EC4899' // pink
+    };
+    return colors[game] || '#6B7280';
+  };
+
+  const getSetColor = (setName) => {
+    // Generate a consistent color based on set name
+    const hash = setName.split('').reduce((a, b) => {
+      a = ((a << 5) - a) + b.charCodeAt(0);
+      return a & a;
+    }, 0);
+    const hue = Math.abs(hash) % 360;
+    return `hsl(${hue}, 70%, 60%)`;
+  };
+
+  const formatCurrency = (amount) => {
+    return new Intl.NumberFormat('en-US', {
+      style: 'currency',
+      currency: 'USD'
+    }).format(amount);
+  };
+
+  const getRarityGradient = (rarity) => {
+    const gradients = {
+      common: 'from-gray-400 to-gray-500',
+      uncommon: 'from-green-400 to-emerald-500',
+      rare: 'from-yellow-400 to-orange-500',
+      mythic: 'from-yellow-400 to-orange-500',
+      holographic: 'from-red-400 to-pink-500',
+      enchanted: 'from-purple-400 to-indigo-500',
+      ultra: 'from-blue-400 to-cyan-500'
+    };
+    return gradients[rarity] || 'from-gray-400 to-gray-500';
+  };
+
+  const getRarityGlow = (rarity) => {
+    const glows = {
+      common: '0 0 15px rgba(156, 163, 175, 0.4)',
+      uncommon: '0 0 15px rgba(34, 197, 94, 0.4)',
+      rare: '0 0 20px rgba(251, 191, 36, 0.5)',
+      mythic: '0 0 20px rgba(255, 215, 0, 0.4), 0 0 40px rgba(255, 215, 0, 0.2), 0 0 60px rgba(255, 215, 0, 0.1)',
+      holographic: '0 0 25px rgba(239, 68, 68, 0.6)',
+      enchanted: '0 0 20px rgba(168, 85, 247, 0.4), 0 0 40px rgba(168, 85, 247, 0.2), 0 0 60px rgba(168, 85, 247, 0.1)',
+      ultra: '0 0 25px rgba(59, 130, 246, 0.6)'
+    };
+    return glows[rarity] || '0 0 15px rgba(156, 163, 175, 0.4)';
+  };
+
+  if (viewMode === 'list') {
+    return (
+      <div 
+        className="card hover:shadow-xl transition-all duration-300 cursor-pointer"
+        style={{
+          transition: 'all 0.3s ease'
+        }}
+      >
+        <div className="flex items-center space-x-4">
+          <div className="w-16 h-24 rounded-lg overflow-hidden" style={{ 
+            background: `linear-gradient(135deg, ${getRarityGradient(card.rarity).replace('from-', '').replace('to-', '')})`,
+            boxShadow: `0 4px 8px rgba(0, 0, 0, 0.3)`
+          }}>
+            <div className="w-full h-full flex items-center justify-center text-white font-bold text-xs">
+              {card.game}
+            </div>
+          </div>
+          <div className="flex-1">
+            <h3 className="text-lg font-semibold mb-1" style={{ color: 'var(--text-primary)' }}>
+              {card.name}
+            </h3>
+            <p className="text-sm mb-2" style={{ color: 'var(--text-secondary)' }}>
+              {card.set_name} • {getRarityLabel(card.rarity)}
+            </p>
+            <p className="text-xs" style={{ color: 'var(--text-secondary)' }}>
+              {card.oracle_text || card.card_type}
+            </p>
+          </div>
+          <div className="text-right">
+            <p className="text-lg font-bold gradient-text-purple">
+              {formatCurrency(card.current_price || 0)}
+            </p>
+            <span 
+              className="px-2 py-1 text-xs rounded-full text-white font-medium"
+              style={{ backgroundColor: getRarityColor(card.rarity) }}
+            >
+              {getRarityLabel(card.rarity)}
+            </span>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="relative">
+              {/* Card Container with proper ratio and rarity glow */}
+        <div 
+          className="relative cursor-pointer transition-transform duration-300 hover:scale-105 w-full"
+          style={{
+            aspectRatio: '5/7',
+            boxShadow: getRarityGlow(card.rarity),
+            borderRadius: '12px',
+            border: `2px solid ${getRarityColor(card.rarity)}20`,
+            overflow: 'hidden'
+          }}
+          onMouseMove={handleMouseMove}
+          onMouseLeave={handleMouseLeave}
+          onMouseEnter={handleMouseEnter}
+        >
+          {/* Particle Effects for All Rarities */}
+          {card.rarity !== 'common' && (
+            <div className="absolute inset-0 pointer-events-none overflow-hidden">
+              {/* Get particle count and colors based on rarity */}
+              {(() => {
+                const rarityConfig = {
+                  'mythic': { 
+                    particleCount: 16, 
+                    sparkleCount: 10,
+                    particleColor: '#FFD700',
+                    sparkleColor: '#FFA500',
+                    glowColor: '#FFD700'
+                  },
+                  'enchanted': { 
+                    particleCount: 14, 
+                    sparkleCount: 8,
+                    particleColor: '#A855F7',
+                    sparkleColor: '#EC4899',
+                    glowColor: '#A855F7'
+                  },
+                  'rare': { 
+                    particleCount: 10, 
+                    sparkleCount: 6,
+                    particleColor: '#3B82F6',
+                    sparkleColor: '#60A5FA',
+                    glowColor: '#3B82F6'
+                  },
+                  'uncommon': { 
+                    particleCount: 6, 
+                    sparkleCount: 4,
+                    particleColor: '#10B981',
+                    sparkleColor: '#34D399',
+                    glowColor: '#10B981'
+                  }
+                };
+                
+                const config = rarityConfig[card.rarity];
+                if (!config) return null;
+                
+                return (
+                  <>
+                    {/* Floating Particles - Edge framing */}
+                    <div className="absolute inset-0">
+                      {[...Array(config.particleCount)].map((_, i) => {
+                        // Position particles around the card edges
+                        let left, top;
+                        const edgeIndex = i % 4; // 4 edges
+                        const positionOnEdge = Math.floor(i / 4);
+                        
+                        if (edgeIndex === 0) {
+                          // Top edge
+                          left = `${10 + (positionOnEdge * 20)}%`;
+                          top = '2%';
+                        } else if (edgeIndex === 1) {
+                          // Right edge
+                          left = '98%';
+                          top = `${10 + (positionOnEdge * 20)}%`;
+                        } else if (edgeIndex === 2) {
+                          // Bottom edge
+                          left = `${10 + (positionOnEdge * 20)}%`;
+                          top = '98%';
+                        } else {
+                          // Left edge
+                          left = '2%';
+                          top = `${10 + (positionOnEdge * 20)}%`;
+                        }
+                        
+                        return (
+                          <div
+                            key={i}
+                            className="absolute w-1 h-1 rounded-full"
+                            style={{
+                              left,
+                              top,
+                              backgroundColor: config.particleColor,
+                              animation: `edgeFloat ${4 + i * 0.3}s ease-in-out infinite`,
+                              animationDelay: `${i * 0.2}s`,
+                              opacity: 0.7,
+                              filter: 'blur(1px)',
+                              boxShadow: `0 0 8px ${config.particleColor}, 0 0 16px ${config.particleColor}, 0 0 24px ${config.particleColor}`,
+                              mixBlendMode: 'screen'
+                            }}
+                          />
+                        );
+                      })}
+                    </div>
+                    
+                    {/* Sparkle Effects - Corner highlights */}
+                    <div className="absolute inset-0">
+                      {[...Array(config.sparkleCount)].map((_, i) => {
+                        // Position sparkles in the corners and edge centers
+                        let left, top;
+                        if (i < 2) {
+                          // Top corners
+                          left = i === 0 ? '5%' : '95%';
+                          top = '5%';
+                        } else if (i < 4) {
+                          // Bottom corners
+                          left = i === 2 ? '5%' : '95%';
+                          top = '95%';
+                        } else if (i < 6) {
+                          // Edge centers
+                          left = i === 4 ? '50%' : '50%';
+                          top = i === 4 ? '5%' : '95%';
+                        } else {
+                          // Side centers
+                          left = i === 6 ? '5%' : '95%';
+                          top = '50%';
+                        }
+                        
+                        return (
+                          <div
+                            key={`sparkle-${i}`}
+                            className="absolute w-0.5 h-0.5"
+                            style={{
+                              left,
+                              top,
+                              backgroundColor: config.sparkleColor,
+                              animation: `sparkle ${2 + i * 0.4}s ease-in-out infinite`,
+                              animationDelay: `${i * 0.2}s`,
+                              opacity: 0.9,
+                              filter: 'blur(0.5px)',
+                              boxShadow: `0 0 4px ${config.sparkleColor}, 0 0 8px ${config.sparkleColor}`,
+                              mixBlendMode: 'screen'
+                            }}
+                          />
+                        );
+                      })}
+                    </div>
+                    
+                    {/* Rarity Aura - Blend with overall glow */}
+                    <div 
+                      className="absolute inset-0 rounded-lg"
+                      style={{
+                        background: `radial-gradient(circle at 50% 50%, ${config.glowColor}20 0%, ${config.glowColor}10 40%, transparent 70%)`,
+                        animation: 'aura 4s ease-in-out infinite',
+                        mixBlendMode: 'screen'
+                      }}
+                    />
+                  </>
+                );
+              })()}
+            </div>
+          )}
+        {/* Card Image */}
+        <div className="w-full h-full relative">
+          {card.image_url ? (
+            <img 
+              src={card.image_url} 
+              alt={card.name}
+              className="w-full h-full object-cover"
+              style={{
+                objectFit: 'cover',
+                objectPosition: 'center',
+                borderRadius: '10px'
+              }}
+              onError={(e) => {
+                e.target.style.display = 'none';
+                e.target.nextSibling.style.display = 'flex';
+              }}
+            />
+          ) : null}
+          
+          {/* Card Back placeholder when no image */}
+          <div 
+            className={`w-full h-full absolute inset-0 ${!card.image_url ? 'block' : 'hidden'}`}
+            style={{ borderRadius: '10px' }}
+          >
+            <CardBack game={card.game} />
+          </div>
+        </div>
+
+        {/* Owned Quantity Chip - Only show if owned */}
+        {card.quantity > 0 && (
+          <div className="absolute bottom-0 left-0">
+            <div 
+              className="px-3 py-1 text-xs font-bold text-white shadow-lg"
+              style={{ 
+                backgroundColor: 'var(--text-accent)',
+                borderRadius: '8px 8px 0 0',
+                borderTop: '2px solid var(--text-accent)',
+                borderLeft: '2px solid var(--text-accent)',
+                borderRight: '2px solid var(--text-accent)',
+                transform: 'translateY(2px)'
+              }}
+            >
+              {card.quantity}
+            </div>
+          </div>
+        )}
+
+        {/* Favorite Button */}
+        <div className="absolute top-2 right-2">
+          <button
+            onClick={(e) => {
+              e.stopPropagation();
+              setIsFavorited(!isFavorited);
+            }}
+            className={`p-2 rounded-full transition-all duration-200 shadow-lg ${
+              isFavorited 
+                ? 'bg-red-500 bg-opacity-80 text-white' 
+                : 'bg-white bg-opacity-20 backdrop-blur-sm hover:bg-opacity-30'
+            }`}
+          >
+            {isFavorited ? '❤️' : '🤍'}
+          </button>
+        </div>
+      </div>
+
+      {/* Hover Details Panel */}
+      {isHovered && (
+        <div 
+          className="fixed z-50 bg-black bg-opacity-90 text-white p-4 rounded-lg shadow-2xl max-w-sm"
+          style={{
+            left: cardPosition.x + cardPosition.width,
+            top: cardPosition.y,
+            pointerEvents: 'none',
+            minHeight: cardPosition.height,
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'center'
+          }}
+        >
+          <div className="space-y-3">
+            {/* Card Title */}
+            <div>
+              <div className="text-sm font-bold text-white mb-1">{card.name}</div>
+            </div>
+
+            {/* Top Section - TCG, Set, Type, HP in 2x2 grid */}
+            <div className="grid grid-cols-2 gap-3">
+              <div>
+                <div className="text-xs font-bold text-white mb-1">TCG</div>
+                <div className="text-xs text-white">{card.game}</div>
+              </div>
+              <div>
+                <div className="text-xs font-bold text-white mb-1">Set</div>
+                <div className="text-xs text-white">{card.set_name}</div>
+              </div>
+              {card.type && (
+                <div>
+                  <div className="text-xs font-bold text-white mb-1">Type</div>
+                  <div className="text-xs text-white flex items-center gap-1">
+                    {card.game === 'Pokemon' && card.type === 'Lightning' && (
+                      <span className="text-yellow-400">⚡</span>
+                    )}
+                    {card.type}
+                  </div>
+                </div>
+              )}
+              {card.hp && (
+                <div>
+                  <div className="text-xs font-bold text-white mb-1">HP</div>
+                  <div className="text-xs text-white">{card.hp}</div>
+                </div>
+              )}
+            </div>
+
+            {/* Card Type and Form */}
+            <div className="grid grid-cols-2 gap-3">
+              <div>
+                <div className="text-xs font-bold text-white mb-1">Card type</div>
+                <div className="text-xs text-white">{card.card_type || 'Card'}</div>
+              </div>
+              {card.form && (
+                <div>
+                  <div className="text-xs font-bold text-white mb-1">Form</div>
+                  <div className="text-xs text-white">{card.form}</div>
+                </div>
+              )}
+            </div>
+
+            {/* Cost to Play */}
+            {card.mana_cost && (
+              <div>
+                <div className="text-xs font-bold text-white mb-1">Cost to Play</div>
+                <ManaCost cost={card.mana_cost} size="sm" useSVG={useManaSvg} />
+              </div>
+            )}
+
+            {/* Card Rule Section */}
+            {card.game === 'Pokemon' && card.form && card.form.includes('V') && (
+              <div>
+                <div className="text-xs font-bold text-white mb-1">Card rule</div>
+                <div className="text-xs text-white leading-relaxed">
+                  V rule: When your Pokémon V is Knocked Out, your opponent takes 2 Prize cards.
+                </div>
+              </div>
+            )}
+
+            {/* Abilities/Attacks/Moves Section */}
+            {card.oracle_text && (
+              <div>
+                <div className="text-xs font-bold text-white mb-1">Card Text</div>
+                <div className="text-xs text-white leading-relaxed">{card.oracle_text}</div>
+              </div>
+            )}
+
+            {/* Quote Section */}
+            {card.flavor_text && (
+              <div>
+                <div className="text-xs font-bold text-white mb-1">Quote</div>
+                <div className="text-xs text-white italic leading-relaxed">&quot;{card.flavor_text}&quot;</div>
+              </div>
+            )}
+
+            {/* Current Price */}
+            {card.current_price && (
+              <div>
+                <div className="text-xs font-bold text-white mb-1">Current Price</div>
+                <div className="text-xs text-white">{formatCurrency(card.current_price)}</div>
+              </div>
+            )}
+
+            {/* Bottom Section - Weaknesses and Retreat */}
+            <div className="grid grid-cols-2 gap-3">
+              {card.weakness && (
+                <div>
+                  <div className="text-xs font-bold text-white mb-1">Weaknesses</div>
+                  <div className="text-xs text-white flex items-center gap-1">
+                    {card.game === 'Pokemon' && (
+                      <span className="text-red-500">👊</span>
+                    )}
+                    {card.weakness}
+                  </div>
+                </div>
+              )}
+              {card.retreat_cost && (
+                <div>
+                  <div className="text-xs font-bold text-white mb-1">Retreat</div>
+                  <div className="text-xs text-white flex items-center gap-1">
+                    {card.game === 'Pokemon' && (
+                      <>
+                        <span className="text-gray-400">⭐</span>
+                        <span className="text-gray-400">⭐</span>
+                      </>
+                    )}
+                    {card.retreat_cost}
+                  </div>
+                </div>
+              )}
+            </div>
+
+            {/* Decks and Collections */}
+            {(card.decks && card.decks.length > 0) || (card.collections && card.collections.length > 0) && (
+              <div>
+                <div className="text-xs font-bold text-white mb-1">Included In</div>
+                <div className="text-xs text-white">
+                  {card.decks && card.decks.length > 0 && (
+                    <div className="mb-1">
+                      <span className="font-semibold">Decks:</span> {card.decks.join(', ')}
+                    </div>
+                  )}
+                  {card.collections && card.collections.length > 0 && (
+                    <div>
+                      <span className="font-semibold">{VOCAB.LISTS}:</span> {card.collections.join(', ')}
+                    </div>
+                  )}
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+} 
+
+// Card Back Component for placeholders
+function CardBack({ game }) {
+  const getCardBackImage = () => {
+    switch (game) {
+      case 'MTG':
+        return 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjE0MyIgdmlld0JveD0iMCAwIDIwMCAxNDMiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIyMDAiIGhlaWdodD0iMTQzIiBmaWxsPSIjOEI0NTEzIi8+CjxyZWN0IHg9IjEwIiB5PSIxMCIgd2lkdGg9IjE4MCIgaGVpZ2h0PSIxMjMiIGZpbGw9IiNBMDUyMkQiIHJ4PSI4Ii8+Cjx0ZXh0IHg9IjEwMCIgeT0iMzAiIGZvbnQtZmFtaWx5PSJBcmlhbCwgc2Fucy1zZXJpZiIgZm9udC1zaXplPSIyNCIgZm9udC13ZWlnaHQ9ImJvbGQiIGZpbGw9IiM0QTkwRTIiIHRleHQtYW5jaG9yPSJtaWRkbGUiPk1BR0lDPC90ZXh0Pgo8dGV4dCB4PSIxMDAiIHk9IjQ1IiBmb250LWZhbWlseT0iQXJpYWwsIHNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iMTIiIGZpbGw9IndoaXRlIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj5UaGUgR2F0aGVyaW5nPC90ZXh0Pgo8Y2lyY2xlIGN4PSI3MCIgY3k9IjcwIiByPSI0IiBmaWxsPSJ3aGl0ZSIvPgo8Y2lyY2xlIGN4PSIxMzAiIGN4PSI3MCIgcj0iNCIgZmlsbD0iI0Y1OTlFMEIiLz4KPGNpcmNsZSBjeD0iMTAwIiBjeT0iODAiIHI9IjQiIGZpbGw9IiM0QTkwRTIiLz4KPGNpcmNsZSBjeD0iNzAiIGN5PSI5MCIgcj0iNCIgZmlsbD0iIzEwQjk4MSIvPgo8Y2lyY2xlIGN4PSIxMzAiIGN5PSI5MCIgcj0iNCIgZmlsbD0iYmxhY2siLz4KPHRleHQgeD0iMTAwIiB5PSIxMjAiIGZvbnQtZmFtaWx5PSJBcmlhbCwgc2Fucy1zZXJpZiIgZm9udC1zaXplPSIxMCIgZm9udC13ZWlnaHQ9ImJvbGQiIGZpbGw9IiMyMEIyQUEiIHRleHQtYW5jaG9yPSJtaWRkbGUiPkRFQ0tNQVNURVI8L3RleHQ+Cjwvc3ZnPgo=';
+      case 'Pokemon':
+        return 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjE0MyIgdmlld0JveD0iMCAwIDIwMCAxNDMiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIyMDAiIGhlaWdodD0iMTQzIiBmaWxsPSIjRkY2QjZCIi8+CjxyZWN0IHg9IjEwIiB5PSIxMCIgd2lkdGg9IjE4MCIgaGVpZ2h0PSIxMjMiIGZpbGw9IiNGRjhFOEUiIHJ4PSI4Ii8+Cjx0ZXh0IHg9IjEwMCIgeT0iMzAiIGZvbnQtZmFtaWx5PSJBcmlhbCwgc2Fucy1zZXJpZiIgZm9udC1zaXplPSIyNCIgZm9udC13ZWlnaHQ9ImJvbGQiIGZpbGw9IiNGRkQ3MDAiIHRleHQtYW5jaG9yPSJtaWRkbGUiPlBPS0VNT048L3RleHQ+Cjx0ZXh0IHg9IjEwMCIgeT0iNDUiIGZvbnQtZmFtaWx5PSJBcmlhbCwgc2Fucy1zZXJpZiIgZm9udC1zaXplPSIxMiIgZmlsbD0id2hpdGUiIHRleHQtYW5jaG9yPSJtaWRkbGUiPlRyYWRpbmcgQ2FyZCBHYW1lPC90ZXh0Pgo8Y2lyY2xlIGN4PSIxMDAiIGN5PSI3MCIgcj0iMjAiIGZpbGw9IndoaXRlIi8+Cjx0ZXh0IHg9IjEwMCIgeT0iNzgiIGZvbnQtZmFtaWx5PSJBcmlhbCwgc2Fucy1zZXJpZiIgZm9udC1zaXplPSIyNCIgZmlsbD0iIzFGN0Y3RiIgdGV4dC1hbmNob3I9Im1pZGRsZSI+4pePPC90ZXh0Pgo8dGV4dCB4PSIxMDAiIHk9IjEyMCIgZm9udC1mYW1pbHk9IkFyaWFsLCBzYW5zLXNlcmlmIiBmb250LXNpemU9IjEwIiBmb250LXdlaWdodD0iYm9sZCIgZmlsbD0iI0ZGRDcwMCIgdGV4dC1hbmNob3I9Im1pZGRsZSI+R0FNRSBGUkVBSzwvdGV4dD4KPC9zdmc+Cg==';
+      case 'Lorcana':
+        return 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjE0MyIgdmlld0JveD0iMCAwIDIwMCAxNDMiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIyMDAiIGhlaWdodD0iMTQzIiBmaWxsPSIjRUM0ODk5Ii8+CjxyZWN0IHg9IjEwIiB5PSIxMCIgd2lkdGg9IjE4MCIgaGVpZ2h0PSIxMjMiIGZpbGw9IiNGNDcyQjYiIHJ4PSI4Ii8+Cjx0ZXh0IHg9IjEwMCIgeT0iMzAiIGZvbnQtZmFtaWx5PSJBcmlhbCwgc2Fucy1zZXJpZiIgZm9udC1zaXplPSIyNCIgZm9udC13ZWlnaHQ9ImJvbGQiIGZpbGw9IiNGQkJGMjQiIHRleHQtYW5jaG9yPSJtaWRkbGUiPkRJU05FWTwvdGV4dD4KPHRleHQgeD0iMTAwIiB5PSI0NSIgZm9udC1mYW1pbHk9IkFyaWFsLCBzYW5zLXNlcmlmIiBmb250LXNpemU9IjEyIiBmaWxsPSJ3aGl0ZSIgdGV4dC1hbmNob3I9Im1pZGRsZSI+TG9yY2FuYTwvdGV4dD4KPGNpcmNsZSBjeD0iMTAwIiBjeT0iNzAiIHI9IjIwIiBmaWxsPSJ3aGl0ZSIvPgo8dGV4dCB4PSIxMDAiIHk9Ijc4IiBmb250LWZhbWlseT0iQXJpYWwsIHNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iMjQiIGZpbGw9IiMxRjdGN0YiIHRleHQtYW5jaG9yPSJtaWRkbGUiPvCfkqQ8L3RleHQ+Cjx0ZXh0IHg9IjEwMCIgeT0iMTIwIiBmb250LWZhbWlseT0iQXJpYWwsIHNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iMTAiIGZvbnQtd2VpZ2h0PSJib2xkIiBmaWxsPSIjRjU5RTBCIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj5SQVZFTlNERVJHPzwvdGV4dD4KPC9zdmc+Cg==';
+      default:
+        return 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjE0MyIgdmlld0JveD0iMCAwIDIwMCAxNDMiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIyMDAiIGhlaWdodD0iMTQzIiBmaWxsPSIjNkI3MjgwIi8+CjxyZWN0IHg9IjEwIiB5PSIxMCIgd2lkdGg9IjE4MCIgaGVpZ2h0PSIxMjMiIGZpbGw9IiM5Q0EzQUYiIHJ4PSI4Ii8+Cjx0ZXh0IHg9IjEwMCIgeT0iMzAiIGZvbnQtZmFtaWx5PSJBcmlhbCwgc2Fucy1zZXJpZiIgZm9udC1zaXplPSIyNCIgZm9udC13ZWlnaHQ9ImJvbGQiIGZpbGw9IndoaXRlIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj5UQ0c8L3RleHQ+Cjx0ZXh0IHg9IjEwMCIgeT0iNDUiIGZvbnQtZmFtaWx5PSJBcmlhbCwgc2Fucy1zZXJpZiIgZm9udC1zaXplPSIxMiIgZmlsbD0id2hpdGUiIHRleHQtYW5jaG9yPSJtaWRkbGUiPlRyYWRpbmcgQ2FyZDwvdGV4dD4KPGNpcmNsZSBjeD0iMTAwIiBjeT0iNzAiIHI9IjIwIiBmaWxsPSJ3aGl0ZSIvPgo8dGV4dCB4PSIxMDAiIHk9Ijc4IiBmb250LWZhbWlseT0iQXJpYWwsIHNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iMjQiIGZpbGw9IiMxRjdGN0YiIHRleHQtYW5jaG9yPSJtaWRkbGUiPvCfkqQ8L3RleHQ+Cjx0ZXh0IHg9IjEwMCIgeT0iMTIwIiBmb250LWZhbWlseT0iQXJpYWwsIHNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iMTAiIGZvbnQtd2VpZ2h0PSJib2xkIiBmaWxsPSIjNkI3MjgwIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj5DQVJEPC90ZXh0Pgo8L3N2Zz4K';
+    }
+  };
+
+  return (
+    <div className="w-full h-full rounded-lg overflow-hidden">
+      <img 
+        src={getCardBackImage()} 
+        alt={`${game} card back`}
+        className="w-full h-full object-cover"
+      />
+    </div>
+  );
+} 
diff --git a/pages/cards.js b/pages/cards.js
index ee5e878..57aa942 100644
--- a/pages/cards.js
+++ b/pages/cards.js
@@ -1,4 +1,3 @@
-/* eslint-disable @next/next/no-img-element -- External or generated image URLs; next/image migration is out of scope. */
 import { useState, useEffect, useRef } from 'react';
 import { useRouter } from 'next/router';
 import Link from 'next/link';
@@ -973,533 +972,3 @@ export default function Cards() {
     </ProtectedRoute>
   );
 }
-
-// 3D Card Component
-function Card3D({ card, viewMode, getRarityLabel, getRarityColor }) {
-  const [isHovered, setIsHovered] = useState(false);
-  const [cardPosition, setCardPosition] = useState({ x: 0, y: 0, width: 0, height: 0 });
-  const [isFavorited, setIsFavorited] = useState(false);
-
-  const handleMouseMove = (e) => {
-    const rect = e.currentTarget.getBoundingClientRect();
-    setCardPosition({
-      x: rect.left,
-      y: rect.top,
-      width: rect.width,
-      height: rect.height
-    });
-  };
-
-  const handleMouseLeave = () => {
-    setIsHovered(false);
-  };
-
-  const handleMouseEnter = () => {
-    setIsHovered(true);
-  };
-
-  const getTCGColor = (game) => {
-    const colors = {
-      'MTG': '#8B5CF6', // purple
-      'Pokemon': '#3B82F6', // blue
-      'Lorcana': '#EC4899' // pink
-    };
-    return colors[game] || '#6B7280';
-  };
-
-  const getSetColor = (setName) => {
-    // Generate a consistent color based on set name
-    const hash = setName.split('').reduce((a, b) => {
-      a = ((a << 5) - a) + b.charCodeAt(0);
-      return a & a;
-    }, 0);
-    const hue = Math.abs(hash) % 360;
-    return `hsl(${hue}, 70%, 60%)`;
-  };
-
-  const formatCurrency = (amount) => {
-    return new Intl.NumberFormat('en-US', {
-      style: 'currency',
-      currency: 'USD'
-    }).format(amount);
-  };
-
-  const getRarityGradient = (rarity) => {
-    const gradients = {
-      common: 'from-gray-400 to-gray-500',
-      uncommon: 'from-green-400 to-emerald-500',
-      rare: 'from-yellow-400 to-orange-500',
-      mythic: 'from-yellow-400 to-orange-500',
-      holographic: 'from-red-400 to-pink-500',
-      enchanted: 'from-purple-400 to-indigo-500',
-      ultra: 'from-blue-400 to-cyan-500'
-    };
-    return gradients[rarity] || 'from-gray-400 to-gray-500';
-  };
-
-  const getRarityGlow = (rarity) => {
-    const glows = {
-      common: '0 0 15px rgba(156, 163, 175, 0.4)',
-      uncommon: '0 0 15px rgba(34, 197, 94, 0.4)',
-      rare: '0 0 20px rgba(251, 191, 36, 0.5)',
-      mythic: '0 0 20px rgba(255, 215, 0, 0.4), 0 0 40px rgba(255, 215, 0, 0.2), 0 0 60px rgba(255, 215, 0, 0.1)',
-      holographic: '0 0 25px rgba(239, 68, 68, 0.6)',
-      enchanted: '0 0 20px rgba(168, 85, 247, 0.4), 0 0 40px rgba(168, 85, 247, 0.2), 0 0 60px rgba(168, 85, 247, 0.1)',
-      ultra: '0 0 25px rgba(59, 130, 246, 0.6)'
-    };
-    return glows[rarity] || '0 0 15px rgba(156, 163, 175, 0.4)';
-  };
-
-  if (viewMode === 'list') {
-    return (
-      <div 
-        className="card hover:shadow-xl transition-all duration-300 cursor-pointer"
-        style={{
-          transition: 'all 0.3s ease'
-        }}
-      >
-        <div className="flex items-center space-x-4">
-          <div className="w-16 h-24 rounded-lg overflow-hidden" style={{ 
-            background: `linear-gradient(135deg, ${getRarityGradient(card.rarity).replace('from-', '').replace('to-', '')})`,
-            boxShadow: `0 4px 8px rgba(0, 0, 0, 0.3)`
-          }}>
-            <div className="w-full h-full flex items-center justify-center text-white font-bold text-xs">
-              {card.game}
-            </div>
-          </div>
-          <div className="flex-1">
-            <h3 className="text-lg font-semibold mb-1" style={{ color: 'var(--text-primary)' }}>
-              {card.name}
-            </h3>
-            <p className="text-sm mb-2" style={{ color: 'var(--text-secondary)' }}>
-              {card.set_name} • {getRarityLabel(card.rarity)}
-            </p>
-            <p className="text-xs" style={{ color: 'var(--text-secondary)' }}>
-              {card.oracle_text || card.card_type}
-            </p>
-          </div>
-          <div className="text-right">
-            <p className="text-lg font-bold gradient-text-purple">
-              {formatCurrency(card.current_price || 0)}
-            </p>
-            <span 
-              className="px-2 py-1 text-xs rounded-full text-white font-medium"
-              style={{ backgroundColor: getRarityColor(card.rarity) }}
-            >
-              {getRarityLabel(card.rarity)}
-            </span>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="relative">
-              {/* Card Container with proper ratio and rarity glow */}
-        <div 
-          className="relative cursor-pointer transition-transform duration-300 hover:scale-105 w-full"
-          style={{
-            aspectRatio: '5/7',
-            boxShadow: getRarityGlow(card.rarity),
-            borderRadius: '12px',
-            border: `2px solid ${getRarityColor(card.rarity)}20`,
-            overflow: 'hidden'
-          }}
-          onMouseMove={handleMouseMove}
-          onMouseLeave={handleMouseLeave}
-          onMouseEnter={handleMouseEnter}
-        >
-          {/* Particle Effects for All Rarities */}
-          {card.rarity !== 'common' && (
-            <div className="absolute inset-0 pointer-events-none overflow-hidden">
-              {/* Get particle count and colors based on rarity */}
-              {(() => {
-                const rarityConfig = {
-                  'mythic': { 
-                    particleCount: 16, 
-                    sparkleCount: 10,
-                    particleColor: '#FFD700',
-                    sparkleColor: '#FFA500',
-                    glowColor: '#FFD700'
-                  },
-                  'enchanted': { 
-                    particleCount: 14, 
-                    sparkleCount: 8,
-                    particleColor: '#A855F7',
-                    sparkleColor: '#EC4899',
-                    glowColor: '#A855F7'
-                  },
-                  'rare': { 
-                    particleCount: 10, 
-                    sparkleCount: 6,
-                    particleColor: '#3B82F6',
-                    sparkleColor: '#60A5FA',
-                    glowColor: '#3B82F6'
-                  },
-                  'uncommon': { 
-                    particleCount: 6, 
-                    sparkleCount: 4,
-                    particleColor: '#10B981',
-                    sparkleColor: '#34D399',
-                    glowColor: '#10B981'
-                  }
-                };
-                
-                const config = rarityConfig[card.rarity];
-                if (!config) return null;
-                
-                return (
-                  <>
-                    {/* Floating Particles - Edge framing */}
-                    <div className="absolute inset-0">
-                      {[...Array(config.particleCount)].map((_, i) => {
-                        // Position particles around the card edges
-                        let left, top;
-                        const edgeIndex = i % 4; // 4 edges
-                        const positionOnEdge = Math.floor(i / 4);
-                        
-                        if (edgeIndex === 0) {
-                          // Top edge
-                          left = `${10 + (positionOnEdge * 20)}%`;
-                          top = '2%';
-                        } else if (edgeIndex === 1) {
-                          // Right edge
-                          left = '98%';
-                          top = `${10 + (positionOnEdge * 20)}%`;
-                        } else if (edgeIndex === 2) {
-                          // Bottom edge
-                          left = `${10 + (positionOnEdge * 20)}%`;
-                          top = '98%';
-                        } else {
-                          // Left edge
-                          left = '2%';
-                          top = `${10 + (positionOnEdge * 20)}%`;
-                        }
-                        
-                        return (
-                          <div
-                            key={i}
-                            className="absolute w-1 h-1 rounded-full"
-                            style={{
-                              left,
-                              top,
-                              backgroundColor: config.particleColor,
-                              animation: `edgeFloat ${4 + i * 0.3}s ease-in-out infinite`,
-                              animationDelay: `${i * 0.2}s`,
-                              opacity: 0.7,
-                              filter: 'blur(1px)',
-                              boxShadow: `0 0 8px ${config.particleColor}, 0 0 16px ${config.particleColor}, 0 0 24px ${config.particleColor}`,
-                              mixBlendMode: 'screen'
-                            }}
-                          />
-                        );
-                      })}
-                    </div>
-                    
-                    {/* Sparkle Effects - Corner highlights */}
-                    <div className="absolute inset-0">
-                      {[...Array(config.sparkleCount)].map((_, i) => {
-                        // Position sparkles in the corners and edge centers
-                        let left, top;
-                        if (i < 2) {
-                          // Top corners
-                          left = i === 0 ? '5%' : '95%';
-                          top = '5%';
-                        } else if (i < 4) {
-                          // Bottom corners
-                          left = i === 2 ? '5%' : '95%';
-                          top = '95%';
-                        } else if (i < 6) {
-                          // Edge centers
-                          left = i === 4 ? '50%' : '50%';
-                          top = i === 4 ? '5%' : '95%';
-                        } else {
-                          // Side centers
-                          left = i === 6 ? '5%' : '95%';
-                          top = '50%';
-                        }
-                        
-                        return (
-                          <div
-                            key={`sparkle-${i}`}
-                            className="absolute w-0.5 h-0.5"
-                            style={{
-                              left,
-                              top,
-                              backgroundColor: config.sparkleColor,
-                              animation: `sparkle ${2 + i * 0.4}s ease-in-out infinite`,
-                              animationDelay: `${i * 0.2}s`,
-                              opacity: 0.9,
-                              filter: 'blur(0.5px)',
-                              boxShadow: `0 0 4px ${config.sparkleColor}, 0 0 8px ${config.sparkleColor}`,
-                              mixBlendMode: 'screen'
-                            }}
-                          />
-                        );
-                      })}
-                    </div>
-                    
-                    {/* Rarity Aura - Blend with overall glow */}
-                    <div 
-                      className="absolute inset-0 rounded-lg"
-                      style={{
-                        background: `radial-gradient(circle at 50% 50%, ${config.glowColor}20 0%, ${config.glowColor}10 40%, transparent 70%)`,
-                        animation: 'aura 4s ease-in-out infinite',
-                        mixBlendMode: 'screen'
-                      }}
-                    />
-                  </>
-                );
-              })()}
-            </div>
-          )}
-        {/* Card Image */}
-        <div className="w-full h-full relative">
-          {card.image_url ? (
-            <img 
-              src={card.image_url} 
-              alt={card.name}
-              className="w-full h-full object-cover"
-              style={{
-                objectFit: 'cover',
-                objectPosition: 'center',
-                borderRadius: '10px'
-              }}
-              onError={(e) => {
-                e.target.style.display = 'none';
-                e.target.nextSibling.style.display = 'flex';
-              }}
-            />
-          ) : null}
-          
-          {/* Card Back placeholder when no image */}
-          <div 
-            className={`w-full h-full absolute inset-0 ${!card.image_url ? 'block' : 'hidden'}`}
-            style={{ borderRadius: '10px' }}
-          >
-            <CardBack game={card.game} />
-          </div>
-        </div>
-
-        {/* Owned Quantity Chip - Only show if owned */}
-        {card.quantity > 0 && (
-          <div className="absolute bottom-0 left-0">
-            <div 
-              className="px-3 py-1 text-xs font-bold text-white shadow-lg"
-              style={{ 
-                backgroundColor: 'var(--text-accent)',
-                borderRadius: '8px 8px 0 0',
-                borderTop: '2px solid var(--text-accent)',
-                borderLeft: '2px solid var(--text-accent)',
-                borderRight: '2px solid var(--text-accent)',
-                transform: 'translateY(2px)'
-              }}
-            >
-              {card.quantity}
-            </div>
-          </div>
-        )}
-
-        {/* Favorite Button */}
-        <div className="absolute top-2 right-2">
-          <button
-            onClick={(e) => {
-              e.stopPropagation();
-              setIsFavorited(!isFavorited);
-            }}
-            className={`p-2 rounded-full transition-all duration-200 shadow-lg ${
-              isFavorited 
-                ? 'bg-red-500 bg-opacity-80 text-white' 
-                : 'bg-white bg-opacity-20 backdrop-blur-sm hover:bg-opacity-30'
-            }`}
-          >
-            {isFavorited ? '❤️' : '🤍'}
-          </button>
-        </div>
-      </div>
-
-      {/* Hover Details Panel */}
-      {isHovered && (
-        <div 
-          className="fixed z-50 bg-black bg-opacity-90 text-white p-4 rounded-lg shadow-2xl max-w-sm"
-          style={{
-            left: cardPosition.x + cardPosition.width,
-            top: cardPosition.y,
-            pointerEvents: 'none',
-            minHeight: cardPosition.height,
-            display: 'flex',
-            flexDirection: 'column',
-            justifyContent: 'center'
-          }}
-        >
-          <div className="space-y-3">
-            {/* Card Title */}
-            <div>
-              <div className="text-sm font-bold text-white mb-1">{card.name}</div>
-            </div>
-
-            {/* Top Section - TCG, Set, Type, HP in 2x2 grid */}
-            <div className="grid grid-cols-2 gap-3">
-              <div>
-                <div className="text-xs font-bold text-white mb-1">TCG</div>
-                <div className="text-xs text-white">{card.game}</div>
-              </div>
-              <div>
-                <div className="text-xs font-bold text-white mb-1">Set</div>
-                <div className="text-xs text-white">{card.set_name}</div>
-              </div>
-              {card.type && (
-                <div>
-                  <div className="text-xs font-bold text-white mb-1">Type</div>
-                  <div className="text-xs text-white flex items-center gap-1">
-                    {card.game === 'Pokemon' && card.type === 'Lightning' && (
-                      <span className="text-yellow-400">⚡</span>
-                    )}
-                    {card.type}
-                  </div>
-                </div>
-              )}
-              {card.hp && (
-                <div>
-                  <div className="text-xs font-bold text-white mb-1">HP</div>
-                  <div className="text-xs text-white">{card.hp}</div>
-                </div>
-              )}
-            </div>
-
-            {/* Card Type and Form */}
-            <div className="grid grid-cols-2 gap-3">
-              <div>
-                <div className="text-xs font-bold text-white mb-1">Card type</div>
-                <div className="text-xs text-white">{card.card_type || 'Card'}</div>
-              </div>
-              {card.form && (
-                <div>
-                  <div className="text-xs font-bold text-white mb-1">Form</div>
-                  <div className="text-xs text-white">{card.form}</div>
-                </div>
-              )}
-            </div>
-
-            {/* Cost to Play */}
-            {card.mana_cost && (
-              <div>
-                <div className="text-xs font-bold text-white mb-1">Cost to Play</div>
-                <ManaCost cost={card.mana_cost} size="sm" useSVG={manaSymbolSettings.useSVG} />
-              </div>
-            )}
-
-            {/* Card Rule Section */}
-            {card.game === 'Pokemon' && card.form && card.form.includes('V') && (
-              <div>
-                <div className="text-xs font-bold text-white mb-1">Card rule</div>
-                <div className="text-xs text-white leading-relaxed">
-                  V rule: When your Pokémon V is Knocked Out, your opponent takes 2 Prize cards.
-                </div>
-              </div>
-            )}
-
-            {/* Abilities/Attacks/Moves Section */}
-            {card.oracle_text && (
-              <div>
-                <div className="text-xs font-bold text-white mb-1">Card Text</div>
-                <div className="text-xs text-white leading-relaxed">{card.oracle_text}</div>
-              </div>
-            )}
-
-            {/* Quote Section */}
-            {card.flavor_text && (
-              <div>
-                <div className="text-xs font-bold text-white mb-1">Quote</div>
-                <div className="text-xs text-white italic leading-relaxed">&quot;{card.flavor_text}&quot;</div>
-              </div>
-            )}
-
-            {/* Current Price */}
-            {card.current_price && (
-              <div>
-                <div className="text-xs font-bold text-white mb-1">Current Price</div>
-                <div className="text-xs text-white">{formatCurrency(card.current_price)}</div>
-              </div>
-            )}
-
-            {/* Bottom Section - Weaknesses and Retreat */}
-            <div className="grid grid-cols-2 gap-3">
-              {card.weakness && (
-                <div>
-                  <div className="text-xs font-bold text-white mb-1">Weaknesses</div>
-                  <div className="text-xs text-white flex items-center gap-1">
-                    {card.game === 'Pokemon' && (
-                      <span className="text-red-500">👊</span>
-                    )}
-                    {card.weakness}
-                  </div>
-                </div>
-              )}
-              {card.retreat_cost && (
-                <div>
-                  <div className="text-xs font-bold text-white mb-1">Retreat</div>
-                  <div className="text-xs text-white flex items-center gap-1">
-                    {card.game === 'Pokemon' && (
-                      <>
-                        <span className="text-gray-400">⭐</span>
-                        <span className="text-gray-400">⭐</span>
-                      </>
-                    )}
-                    {card.retreat_cost}
-                  </div>
-                </div>
-              )}
-            </div>
-
-            {/* Decks and Collections */}
-            {(card.decks && card.decks.length > 0) || (card.collections && card.collections.length > 0) && (
-              <div>
-                <div className="text-xs font-bold text-white mb-1">Included In</div>
-                <div className="text-xs text-white">
-                  {card.decks && card.decks.length > 0 && (
-                    <div className="mb-1">
-                      <span className="font-semibold">Decks:</span> {card.decks.join(', ')}
-                    </div>
-                  )}
-                  {card.collections && card.collections.length > 0 && (
-                    <div>
-                      <span className="font-semibold">{VOCAB.LISTS}:</span> {card.collections.join(', ')}
-                    </div>
-                  )}
-                </div>
-              </div>
-            )}
-          </div>
-        </div>
-      )}
-    </div>
-  );
-} 
-
-// Card Back Component for placeholders
-function CardBack({ game }) {
-  const getCardBackImage = () => {
-    switch (game) {
-      case 'MTG':
-        return 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjE0MyIgdmlld0JveD0iMCAwIDIwMCAxNDMiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIyMDAiIGhlaWdodD0iMTQzIiBmaWxsPSIjOEI0NTEzIi8+CjxyZWN0IHg9IjEwIiB5PSIxMCIgd2lkdGg9IjE4MCIgaGVpZ2h0PSIxMjMiIGZpbGw9IiNBMDUyMkQiIHJ4PSI4Ii8+Cjx0ZXh0IHg9IjEwMCIgeT0iMzAiIGZvbnQtZmFtaWx5PSJBcmlhbCwgc2Fucy1zZXJpZiIgZm9udC1zaXplPSIyNCIgZm9udC13ZWlnaHQ9ImJvbGQiIGZpbGw9IiM0QTkwRTIiIHRleHQtYW5jaG9yPSJtaWRkbGUiPk1BR0lDPC90ZXh0Pgo8dGV4dCB4PSIxMDAiIHk9IjQ1IiBmb250LWZhbWlseT0iQXJpYWwsIHNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iMTIiIGZpbGw9IndoaXRlIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj5UaGUgR2F0aGVyaW5nPC90ZXh0Pgo8Y2lyY2xlIGN4PSI3MCIgY3k9IjcwIiByPSI0IiBmaWxsPSJ3aGl0ZSIvPgo8Y2lyY2xlIGN4PSIxMzAiIGN4PSI3MCIgcj0iNCIgZmlsbD0iI0Y1OTlFMEIiLz4KPGNpcmNsZSBjeD0iMTAwIiBjeT0iODAiIHI9IjQiIGZpbGw9IiM0QTkwRTIiLz4KPGNpcmNsZSBjeD0iNzAiIGN5PSI5MCIgcj0iNCIgZmlsbD0iIzEwQjk4MSIvPgo8Y2lyY2xlIGN4PSIxMzAiIGN5PSI5MCIgcj0iNCIgZmlsbD0iYmxhY2siLz4KPHRleHQgeD0iMTAwIiB5PSIxMjAiIGZvbnQtZmFtaWx5PSJBcmlhbCwgc2Fucy1zZXJpZiIgZm9udC1zaXplPSIxMCIgZm9udC13ZWlnaHQ9ImJvbGQiIGZpbGw9IiMyMEIyQUEiIHRleHQtYW5jaG9yPSJtaWRkbGUiPkRFQ0tNQVNURVI8L3RleHQ+Cjwvc3ZnPgo=';
-      case 'Pokemon':
-        return 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjE0MyIgdmlld0JveD0iMCAwIDIwMCAxNDMiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIyMDAiIGhlaWdodD0iMTQzIiBmaWxsPSIjRkY2QjZCIi8+CjxyZWN0IHg9IjEwIiB5PSIxMCIgd2lkdGg9IjE4MCIgaGVpZ2h0PSIxMjMiIGZpbGw9IiNGRjhFOEUiIHJ4PSI4Ii8+Cjx0ZXh0IHg9IjEwMCIgeT0iMzAiIGZvbnQtZmFtaWx5PSJBcmlhbCwgc2Fucy1zZXJpZiIgZm9udC1zaXplPSIyNCIgZm9udC13ZWlnaHQ9ImJvbGQiIGZpbGw9IiNGRkQ3MDAiIHRleHQtYW5jaG9yPSJtaWRkbGUiPlBPS0VNT048L3RleHQ+Cjx0ZXh0IHg9IjEwMCIgeT0iNDUiIGZvbnQtZmFtaWx5PSJBcmlhbCwgc2Fucy1zZXJpZiIgZm9udC1zaXplPSIxMiIgZmlsbD0id2hpdGUiIHRleHQtYW5jaG9yPSJtaWRkbGUiPlRyYWRpbmcgQ2FyZCBHYW1lPC90ZXh0Pgo8Y2lyY2xlIGN4PSIxMDAiIGN5PSI3MCIgcj0iMjAiIGZpbGw9IndoaXRlIi8+Cjx0ZXh0IHg9IjEwMCIgeT0iNzgiIGZvbnQtZmFtaWx5PSJBcmlhbCwgc2Fucy1zZXJpZiIgZm9udC1zaXplPSIyNCIgZmlsbD0iIzFGN0Y3RiIgdGV4dC1hbmNob3I9Im1pZGRsZSI+4pePPC90ZXh0Pgo8dGV4dCB4PSIxMDAiIHk9IjEyMCIgZm9udC1mYW1pbHk9IkFyaWFsLCBzYW5zLXNlcmlmIiBmb250LXNpemU9IjEwIiBmb250LXdlaWdodD0iYm9sZCIgZmlsbD0iI0ZGRDcwMCIgdGV4dC1hbmNob3I9Im1pZGRsZSI+R0FNRSBGUkVBSzwvdGV4dD4KPC9zdmc+Cg==';
-      case 'Lorcana':
-        return 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjE0MyIgdmlld0JveD0iMCAwIDIwMCAxNDMiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIyMDAiIGhlaWdodD0iMTQzIiBmaWxsPSIjRUM0ODk5Ii8+CjxyZWN0IHg9IjEwIiB5PSIxMCIgd2lkdGg9IjE4MCIgaGVpZ2h0PSIxMjMiIGZpbGw9IiNGNDcyQjYiIHJ4PSI4Ii8+Cjx0ZXh0IHg9IjEwMCIgeT0iMzAiIGZvbnQtZmFtaWx5PSJBcmlhbCwgc2Fucy1zZXJpZiIgZm9udC1zaXplPSIyNCIgZm9udC13ZWlnaHQ9ImJvbGQiIGZpbGw9IiNGQkJGMjQiIHRleHQtYW5jaG9yPSJtaWRkbGUiPkRJU05FWTwvdGV4dD4KPHRleHQgeD0iMTAwIiB5PSI0NSIgZm9udC1mYW1pbHk9IkFyaWFsLCBzYW5zLXNlcmlmIiBmb250LXNpemU9IjEyIiBmaWxsPSJ3aGl0ZSIgdGV4dC1hbmNob3I9Im1pZGRsZSI+TG9yY2FuYTwvdGV4dD4KPGNpcmNsZSBjeD0iMTAwIiBjeT0iNzAiIHI9IjIwIiBmaWxsPSJ3aGl0ZSIvPgo8dGV4dCB4PSIxMDAiIHk9Ijc4IiBmb250LWZhbWlseT0iQXJpYWwsIHNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iMjQiIGZpbGw9IiMxRjdGN0YiIHRleHQtYW5jaG9yPSJtaWRkbGUiPvCfkqQ8L3RleHQ+Cjx0ZXh0IHg9IjEwMCIgeT0iMTIwIiBmb250LWZhbWlseT0iQXJpYWwsIHNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iMTAiIGZvbnQtd2VpZ2h0PSJib2xkIiBmaWxsPSIjRjU5RTBCIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj5SQVZFTlNERVJHPzwvdGV4dD4KPC9zdmc+Cg==';
-      default:
-        return 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjE0MyIgdmlld0JveD0iMCAwIDIwMCAxNDMiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIyMDAiIGhlaWdodD0iMTQzIiBmaWxsPSIjNkI3MjgwIi8+CjxyZWN0IHg9IjEwIiB5PSIxMCIgd2lkdGg9IjE4MCIgaGVpZ2h0PSIxMjMiIGZpbGw9IiM5Q0EzQUYiIHJ4PSI4Ii8+Cjx0ZXh0IHg9IjEwMCIgeT0iMzAiIGZvbnQtZmFtaWx5PSJBcmlhbCwgc2Fucy1zZXJpZiIgZm9udC1zaXplPSIyNCIgZm9udC13ZWlnaHQ9ImJvbGQiIGZpbGw9IndoaXRlIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj5UQ0c8L3RleHQ+Cjx0ZXh0IHg9IjEwMCIgeT0iNDUiIGZvbnQtZmFtaWx5PSJBcmlhbCwgc2Fucy1zZXJpZiIgZm9udC1zaXplPSIxMiIgZmlsbD0id2hpdGUiIHRleHQtYW5jaG9yPSJtaWRkbGUiPlRyYWRpbmcgQ2FyZDwvdGV4dD4KPGNpcmNsZSBjeD0iMTAwIiBjeT0iNzAiIHI9IjIwIiBmaWxsPSJ3aGl0ZSIvPgo8dGV4dCB4PSIxMDAiIHk9Ijc4IiBmb250LWZhbWlseT0iQXJpYWwsIHNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iMjQiIGZpbGw9IiMxRjdGN0YiIHRleHQtYW5jaG9yPSJtaWRkbGUiPvCfkqQ8L3RleHQ+Cjx0ZXh0IHg9IjEwMCIgeT0iMTIwIiBmb250LWZhbWlseT0iQXJpYWwsIHNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iMTAiIGZvbnQtd2VpZ2h0PSJib2xkIiBmaWxsPSIjNkI3MjgwIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj5DQVJEPC90ZXh0Pgo8L3N2Zz4K';
-    }
-  };
-
-  return (
-    <div className="w-full h-full rounded-lg overflow-hidden">
-      <img 
-        src={getCardBackImage()} 
-        alt={`${game} card back`}
-        className="w-full h-full object-cover"
-      />
-    </div>
-  );
-} 
\ No newline at end of file