style

src/lib/components/Piclets/PicletCard.svelte

@@ -29,7 +29,7 @@
       class="piclet-image"
       style="width: {size * 0.8}px; height: {size * 0.8}px;"
     />
-    <div class="tier-badge tier-{piclet.tier}">
+    <div class="tier-banner tier-{piclet.tier}">
       {piclet.tier}
     </div>
   </div>
@@ -102,15 +102,16 @@
     filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
   }
 
-  .tier-badge {
+  .tier-banner {
     position: absolute;
-    top: 6px;
-    right: 6px;
-    padding: 3px 8px;
-    border-radius: 8px;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    padding: 4px 8px;
     font-size: 9px;
     font-weight: bold;
     text-transform: uppercase;
+    text-align: center;
     z-index: 2;
     backdrop-filter: blur(4px);
   }

src/lib/components/Piclets/PicletDetail.svelte

@@ -56,7 +56,7 @@
               <path d="M19 12H5m0 0l7 7m-7-7l7-7"></path>
             </svg>
           </button>
-          <h1 class="card-title">{instance.typeId}</h1>
+          <h1 class="card-title">{instance.nickname || instance.objectName}</h1>
           <div class="tier-badge tier-{instance.tier}">{instance.tier}</div>
         </div>