fmt

src/lib/components/Piclets/PicletDetail.svelte

@@ -114,9 +114,14 @@
             </button>
           </div>
 
+          <!-- Card Title -->
+          <div class="card-title-section">
+            <h1 class="card-title">{instance.nickname || instance.typeId}</h1>
+            <div class="tier-badge">{instance.tier.toUpperCase()}</div>
+          </div>
+
           <!-- Large Image Section -->
           <div class="large-image-section">
-            <div class="piclet-id">#{String(instance.id).padStart(3, '0')}</div>
             <div class="large-image-container">
               <img 
                 src={instance.imageData || instance.imageUrl} 
@@ -125,12 +130,6 @@
               />
             </div>
           </div>
-
-          <!-- Card Title -->
-          <div class="card-title-section">
-            <h1 class="card-title">{instance.nickname || instance.typeId}</h1>
-            <div class="tier-badge">{instance.tier.toUpperCase()}</div>
-          </div>
         </div>
       </div>
       
@@ -324,11 +323,10 @@
   
   .logo-background {
     position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 200px;
-    height: 200px;
+    bottom: 20px;
+    right: 20px;
+    width: 120px;
+    height: 120px;
     background-image: url('/assets/snap_logo.png');
     background-size: contain;
     background-repeat: no-repeat;
@@ -400,20 +398,10 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    margin-bottom: 20px;
     position: relative;
     z-index: 2;
   }
   
-  .piclet-id {
-    align-self: flex-start;
-    color: white;
-    font-size: 16px;
-    font-weight: 600;
-    margin-bottom: 10px;
-    opacity: 0.9;
-  }
-  
   .large-image-container {
     display: flex;
     align-items: center;
@@ -433,6 +421,7 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
+    margin-bottom: 20px;
     position: relative;
     z-index: 2;
   }