style

src/lib/components/Pages/Pictuary.svelte

@@ -53,6 +53,9 @@
     const canonicalCount = collectedPiclets.filter(p => p.isCanonical).length;
     const variationCount = collectedPiclets.filter(p => !p.isCanonical).length;
 
+    // Calculate total scans
+    const totalScans = collectedPiclets.reduce((sum, p) => sum + (p.scanCount || 1), 0);
+
     // Calculate total rarity score
     const rarityScore = collectedPiclets.reduce((sum, p) => {
       const points = CanonicalService.calculateRarity(p.scanCount);
@@ -63,6 +66,7 @@
 
     return {
       totalDiscovered,
+      totalScans,
       uniqueObjects,
       canonicalCount,
       variationCount,
@@ -110,8 +114,12 @@
     <h1>Pictuary</h1>
     <div class="stats">
       <div class="stat-item">
-        <span class="stat-value">{stats.totalDiscovered}</span>
-        <span class="stat-label">Total</span>
+        <span class="stat-value">📷 {stats.totalScans}</span>
+        <span class="stat-label">Scans</span>
+      </div>
+      <div class="stat-item">
+        <span class="stat-value">🔍 {stats.totalDiscovered}</span>
+        <span class="stat-label">Discovered</span>
       </div>
       <div class="stat-item">
         <span class="stat-value">{stats.uniqueObjects}</span>
@@ -121,10 +129,6 @@
         <span class="stat-value">{stats.canonicalCount}</span>
         <span class="stat-label">Canonical</span>
       </div>
-      <div class="stat-item">
-        <span class="stat-value">{stats.variationCount}</span>
-        <span class="stat-label">Variations</span>
-      </div>
       <div class="stat-item">
         <span class="stat-value">⭐{stats.rarityScore}</span>
         <span class="stat-label">Score</span>

src/lib/components/Piclets/PicletCard.svelte

@@ -27,15 +27,11 @@
       src={piclet.imageData || piclet.imageUrl}
       alt={piclet.typeId || 'Piclet'}
       class="piclet-image"
-      style="width: {size * 0.8}px; height: {size * 0.8}px;"
     />
   </div>
 
   <div class="details-section">
     <p class="nickname">{piclet.nickname || piclet.objectName}</p>
-    <div class="info-row">
-      <span class="type-badge">{piclet.primaryType}</span>
-    </div>
   </div>
 
   <div class="tier-banner tier-{piclet.tier}">
@@ -81,8 +77,8 @@
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-    width: 80%;
-    height: 80%;
+    width: 100%;
+    height: 100%;
     background-image: var(--type-logo);
     background-size: contain;
     background-repeat: no-repeat;
@@ -93,6 +89,8 @@
   }
 
   .piclet-image {
+    width: 120px;
+    height: 120px;
     object-fit: contain;
     position: relative;
     z-index: 1;
@@ -146,30 +144,4 @@
     white-space: nowrap;
     color: #1a1a1a;
   }
-
-  .info-row {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    gap: 6px;
-  }
-
-  .type-badge {
-    font-size: 9px;
-    padding: 2px 6px;
-    border-radius: 6px;
-    font-weight: 600;
-    text-transform: uppercase;
-    background: var(--type-color);
-    color: white;
-  }
-
-  .scan-count {
-    font-size: 9px;
-    font-weight: 600;
-    color: #666;
-    background: #f0f0f0;
-    padding: 2px 6px;
-    border-radius: 6px;
-  }
 </style>