try new fmt

src/lib/components/Piclets/PicletDetail.svelte

@@ -83,60 +83,53 @@
     <div class="content-scroll">
       <!-- Header Card -->
       <div class="header-card">
-        <button 
-          class="share-button" 
-          onclick={handleShare} 
-          disabled={isSharing}
-          aria-label="Share Piclet"
-        >
-          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            <path d="M4 12v8a2 2 0 002 2h12a2 2 0 002-2v-8"></path>
-            <polyline points="16 6 12 2 8 6"></polyline>
-            <line x1="12" y1="2" x2="12" y2="15"></line>
-          </svg>
-        </button>
-        
-        <div class="header-layout">
-          <div class="image-column">
-            <div class="image-container">
+        <div class="card-background">
+          <!-- Faded Logo Background -->
+          <div class="logo-background">PICLETS</div>
+          
+          <!-- Card Header -->
+          <div class="card-header">
+            <button 
+              class="back-btn-card" 
+              onclick={onClose} 
+              aria-label="Go back"
+            >
+              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="M19 12H5m0 0l7 7m-7-7l7-7"></path>
+              </svg>
+            </button>
+            <button 
+              class="share-button" 
+              onclick={handleShare} 
+              disabled={isSharing}
+              aria-label="Share Piclet"
+            >
+              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <circle cx="18" cy="5" r="3"></circle>
+                <circle cx="6" cy="12" r="3"></circle>
+                <circle cx="18" cy="19" r="3"></circle>
+                <line x1="8.59" y1="13.51" x2="15.42" y2="17.49"></line>
+                <line x1="15.41" y1="6.51" x2="8.59" y2="10.49"></line>
+              </svg>
+            </button>
+          </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} 
                 alt={instance.nickname || instance.typeId}
-                class="piclet-image"
+                class="large-piclet-image"
               />
             </div>
           </div>
-          
-          <div class="info-column">
-            <h1 class="piclet-name">{instance.nickname || instance.typeId}</h1>
-            
-            <!-- Compact stats for caught piclet -->
-            <div class="compact-info">
-              <div class="level-badge">{instance.tier.toUpperCase()}</div>
-              
-              <div class="compact-stat-bar">
-                <div class="stat-bar-label">
-                  <span>HP</span>
-                  <span>{instance.currentHp}/{instance.maxHp}</span>
-                </div>
-                <div class="hp-bar-track">
-                  <div 
-                    class="hp-bar-fill" 
-                    style="width: {getStatPercentage(instance.currentHp, instance.maxHp)}%; background-color: {getHpColor(instance.currentHp, instance.maxHp)};"
-                  ></div>
-                </div>
-              </div>
-              
-              <div class="compact-stat-bar">
-                <div class="stat-bar-label">
-                  <span>XP</span>
-                  <span>{instance.xp} pts</span>
-                </div>
-                <div class="xp-bar-track">
-                  <div class="xp-bar-fill" style="width: 45%;"></div>
-                </div>
-              </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>
@@ -316,28 +309,69 @@
   /* Header Card */
   .header-card {
     margin: 16px;
-    padding: 20px;
-    border-radius: 16px;
-    background: linear-gradient(135deg, #636366, #48484a);
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    border-radius: 20px;
+    overflow: hidden;
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
     position: relative;
   }
   
-  .share-button {
+  .card-background {
+    background: linear-gradient(135deg, #4CAF50 0%, #66BB6A 100%);
+    padding: 24px;
+    position: relative;
+    overflow: hidden;
+  }
+  
+  .logo-background {
     position: absolute;
-    top: 16px;
-    right: 16px;
-    width: 40px;
-    height: 40px;
-    border-radius: 20px;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%) rotate(-15deg);
+    font-size: 80px;
+    font-weight: 900;
+    color: rgba(255, 255, 255, 0.1);
+    letter-spacing: 8px;
+    pointer-events: none;
+    z-index: 1;
+  }
+  
+  .card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+    position: relative;
+    z-index: 2;
+  }
+  
+  .back-btn-card {
     background: rgba(255, 255, 255, 0.2);
     border: none;
+    color: white;
     cursor: pointer;
+    padding: 8px;
+    border-radius: 12px;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: all 0.2s;
+  }
+  
+  .back-btn-card:hover {
+    background: rgba(255, 255, 255, 0.3);
+  }
+  
+  .share-button {
+    background: rgba(255, 255, 255, 0.2);
+    border: none;
     color: white;
+    cursor: pointer;
+    padding: 8px;
+    border-radius: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s;
   }
   
   .share-button:hover {
@@ -359,102 +393,75 @@
     height: 20px;
   }
   
-  .header-layout {
-    display: flex;
-    gap: 16px;
-  }
-  
-  .image-column {
+  .large-image-section {
     display: flex;
     flex-direction: column;
     align-items: center;
-    gap: 8px;
-  }
-  
-  .image-container {
-    background: #f8f9fa;
-    background-image: repeating-linear-gradient(
-      to bottom,
-      rgba(76, 175, 80, 0.2) 0px,
-      rgba(76, 175, 80, 0.2) 10px,
-      rgba(76, 175, 80, 0.1) 10px,
-      rgba(76, 175, 80, 0.1) 20px
-    );
-    padding: 8px;
-    border-radius: 12px;
-  }
-  
-  .piclet-image {
-    width: 120px;
-    height: 120px;
-    object-fit: contain;
+    margin-bottom: 20px;
+    position: relative;
+    z-index: 2;
   }
   
-  .info-column {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
+  .piclet-id {
+    align-self: flex-start;
     color: white;
+    font-size: 16px;
+    font-weight: 600;
+    margin-bottom: 10px;
+    opacity: 0.9;
   }
   
-  .piclet-name {
-    margin: 0 0 12px;
-    font-size: 24px;
-    font-weight: bold;
-  }
-  
-  .compact-info {
+  .large-image-container {
+    background: rgba(255, 255, 255, 0.9);
+    border-radius: 20px;
+    padding: 20px;
     display: flex;
-    flex-direction: column;
-    gap: 8px;
-  }
-  
-  .level-badge {
-    background: rgba(142, 142, 147, 0.8);
-    padding: 3px 10px;
-    border-radius: 12px;
-    font-size: 13px;
-    font-weight: bold;
-    width: fit-content;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    width: 200px;
+    height: 200px;
   }
   
-  .compact-stat-bar {
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
+  .large-piclet-image {
+    width: 160px;
+    height: 160px;
+    object-fit: contain;
+    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
   }
   
-  .stat-bar-label {
+  .card-title-section {
     display: flex;
     justify-content: space-between;
-    font-size: 12px;
-    font-weight: 500;
-  }
-  
-  .hp-bar-track,
-  .xp-bar-track {
-    height: 6px;
-    background: rgba(255, 255, 255, 0.3);
-    border-radius: 3px;
-    overflow: hidden;
+    align-items: center;
+    position: relative;
+    z-index: 2;
   }
   
-  .hp-bar-fill,
-  .xp-bar-fill {
-    height: 100%;
-    transition: width 0.3s;
+  .card-title {
+    margin: 0;
+    font-size: 28px;
+    font-weight: bold;
+    color: white;
+    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
   }
   
-  .xp-bar-fill {
-    background: #af52de;
+  .tier-badge {
+    background: rgba(255, 255, 255, 0.2);
+    color: white;
+    padding: 6px 12px;
+    border-radius: 16px;
+    font-size: 14px;
+    font-weight: 600;
+    backdrop-filter: blur(10px);
   }
   
   /* Tab Bar */
   .tab-bar {
     margin: 0 16px 16px;
-    height: 32px;
+    height: 36px;
     background: #e5e5ea;
-    border-radius: 8px;
+    border-radius: 12px;
     display: flex;
     padding: 2px;
   }
@@ -463,8 +470,8 @@
     flex: 1;
     background: none;
     border: none;
-    border-radius: 6px;
-    font-size: 13px;
+    border-radius: 10px;
+    font-size: 14px;
     font-weight: 500;
     color: #8e8e93;
     cursor: pointer;
@@ -472,8 +479,9 @@
   }
   
   .tab-button.active {
-    background: #636366;
+    background: #4CAF50;
     color: white;
+    box-shadow: 0 2px 4px rgba(76, 175, 80, 0.3);
   }
   
   /* Tab Content */