Fix card sizing consistency across all TCGs

- Added wrapper div with max-width constraint to ensure consistent card sizes
- Updated image rendering to use object-cover with proper positioning
- Removed maxWidth from Card3D component since it's now handled by wrapper
- Ensures all cards (MTG, Pokemon, Lorcana) have identical dimensions
- Fixed responsive grid layout to maintain consistent card sizes

lorcana-import-results-2025-07-24T17-27-46-410Z.json

@@ -0,0 +1,34 @@
+{
+  "total": 0,
+  "successful": 3,
+  "failed": 0,
+  "sets": [
+    {
+      "code": "tfc",
+      "name": "The First Chapter",
+      "lorcastCode": "1",
+      "success": true,
+      "importedCount": 0,
+      "skippedCount": 216,
+      "total": 216
+    },
+    {
+      "code": "rotf",
+      "name": "Rise of the Floodborn",
+      "lorcastCode": "2",
+      "success": true,
+      "importedCount": 0,
+      "skippedCount": 216,
+      "total": 216
+    },
+    {
+      "code": "ink",
+      "name": "Into the Inklands",
+      "lorcastCode": "3",
+      "success": true,
+      "importedCount": 0,
+      "skippedCount": 226,
+      "total": 226
+    }
+  ]
+}

lorcana-import-results-2025-07-24T17-32-10-187Z.json

@@ -0,0 +1,25 @@
+{
+  "total": 658,
+  "successful": 3,
+  "failed": 0,
+  "sets": [
+    {
+      "code": "tfc",
+      "name": "The First Chapter",
+      "success": true,
+      "importedCount": 216
+    },
+    {
+      "code": "rotf",
+      "name": "Rise of the Floodborn",
+      "success": true,
+      "importedCount": 216
+    },
+    {
+      "code": "ink",
+      "name": "Into the Inklands",
+      "success": true,
+      "importedCount": 226
+    }
+  ]
+}

lorcana-import-results-2025-07-24T17-34-04-839Z.json

@@ -0,0 +1,34 @@
+{
+  "total": 0,
+  "successful": 3,
+  "failed": 0,
+  "sets": [
+    {
+      "code": "tfc",
+      "name": "The First Chapter",
+      "lorcastCode": "1",
+      "success": true,
+      "importedCount": 0,
+      "skippedCount": 216,
+      "total": 216
+    },
+    {
+      "code": "rotf",
+      "name": "Rise of the Floodborn",
+      "lorcastCode": "2",
+      "success": true,
+      "importedCount": 0,
+      "skippedCount": 216,
+      "total": 216
+    },
+    {
+      "code": "ink",
+      "name": "Into the Inklands",
+      "lorcastCode": "3",
+      "success": true,
+      "importedCount": 0,
+      "skippedCount": 226,
+      "total": 226
+    }
+  ]
+}

pages/cards.js

@@ -593,12 +593,14 @@ export default function Cards() {
             <div className={viewMode === 'grid' ? 'grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-8 gap-6 p-6' : 'space-y-4'}>
               {cards.map(card => (
                 <div key={card.id} onClick={() => router.push(`/card/${card.id}`)} className="flex justify-center">
-                  <Card3D 
+                  <div className="w-full max-w-[200px]">
-                    card={card} 
+                    <Card3D 
-                    viewMode={viewMode}
+                      card={card} 
-                    getRarityLabel={getRarityLabel}
+                      viewMode={viewMode}
-                    getRarityColor={getRarityColor}
+                      getRarityLabel={getRarityLabel}
-                  />
+                      getRarityColor={getRarityColor}
+                    />
+                  </div>
                 </div>
               ))}
             </div>
@@ -767,10 +769,8 @@ function Card3D({ card, viewMode, getRarityLabel, getRarityColor }) {
     <div className="relative">
               {/* Card Container with proper ratio and rarity glow */}
         <div 
-          className="relative cursor-pointer transition-transform duration-300 hover:scale-105"
+          className="relative cursor-pointer transition-transform duration-300 hover:scale-105 w-full"
           style={{
-            width: '100%',
-            maxWidth: '200px',
             aspectRatio: '5/7',
             boxShadow: getRarityGlow(card.rarity),
             borderRadius: '12px',
@@ -926,12 +926,17 @@ function Card3D({ card, viewMode, getRarityLabel, getRarityColor }) {
             </div>
           )}
         {/* Card Image */}
-        <div className="w-full h-full">
+        <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';
@@ -941,7 +946,7 @@ function Card3D({ card, viewMode, getRarityLabel, getRarityColor }) {
           
           {/* Card Back placeholder when no image */}
           <div 
-            className={`w-full h-full ${!card.image_url ? 'block' : 'hidden'}`}
+            className={`w-full h-full absolute inset-0 ${!card.image_url ? 'block' : 'hidden'}`}
             style={{ borderRadius: '10px' }}
           >
             <CardBack game={card.game} />

scripts/import-lorcana.js

@@ -69,55 +69,29 @@ async function importLorcanaSet(setCode, setName, lorcastCode) {
     let importedCount = 0;
     let skippedCount = 0;
 
-    for (const card of cards) {
+    // Import all cards via our API in a single batch
-      try {
+    const importResponse = await fetch('http://localhost:3000/api/cards/import-lorcana', {
-        // Check if card already exists in database
+      method: 'POST',
-        const checkResponse = await fetch('http://localhost:3000/api/cards/search', {
+      headers: {
-          method: 'GET',
+        'Content-Type': 'application/json',
-          headers: {
+      },
-            'Content-Type': 'application/json',
+      body: JSON.stringify({
-          },
+        setCode: setCode,
-          body: JSON.stringify({
+        setName: setName
-            query: card.name,
+      })
-            game: 'Lorcana',
+    });
-            set: card.set.code
-          })
-        });
 
-        const checkData = await checkResponse.json();
+    const importResult = await importResponse.json();
-        const existingCard = checkData.cards?.find(c => c.scryfall_id === card.id);
     
-        if (existingCard) {
+    if (importResult.success) {
-          skippedCount++;
+      importedCount = importResult.imported || 0;
-          continue;
+      skippedCount = importResult.skipped || 0;
-        }
+      console.log(`✅ Import completed for ${setName}: ${importedCount} imported, ${skippedCount} skipped`);
-
+    } else {
-        // Import card via our API
+      console.log(`❌ Failed to import ${setName}: ${importResult.error}`);
-        const importResponse = await fetch('http://localhost:3000/api/cards/import-lorcana', {
+      return { success: false, error: importResult.error };
-          method: 'POST',
-          headers: {
-            'Content-Type': 'application/json',
-          },
-          body: JSON.stringify({
-            setCode: setCode,
-            cardData: card
-          })
-        });
-
-        const importResult = await importResponse.json();
-        
-        if (importResult.success) {
-          importedCount++;
-        } else {
-          skippedCount++;
-        }
-      } catch (error) {
-        console.error(`Error processing card ${card.name}:`, error.message);
-        skippedCount++;
-      }
     }
 
-    console.log(`✅ Import completed for ${setName}: ${importedCount} imported, ${skippedCount} skipped`);
     return { success: true, importedCount, skippedCount, total: cards.length };
 
   } catch (error) {