more deets

src/lib/components/MonsterGenerator/MonsterGenerator.svelte

@@ -321,6 +321,8 @@ The output should be formatted as a JSON instance that conforms to the JSON sche
 {
   "properties": {
     "rarity": {"type": "string", "enum": ["common", "uncommon", "rare", "legendary"], "description": "Rarity of the original object based on real-world availability and value"},
+    "height": {"type": "number", "minimum": 0.1, "maximum": 50.0, "description": "Height of the piclet in meters (e.g., 1.2, 0.5, 10.0)"},
+    "weight": {"type": "number", "minimum": 0.1, "maximum": 10000.0, "description": "Weight of the piclet in kilograms (e.g., 25.4, 150.0, 0.8)"},
     "HP": {"type": "integer", "minimum": 0, "maximum": 100, "description": "Health/vitality stat (0=fragile, 100=incredibly tanky)"},
     "defence": {"type": "integer", "minimum": 0, "maximum": 100, "description": "Defensive/armor stat (0=paper thin, 100=impenetrable fortress)"},
     "attack": {"type": "integer", "minimum": 0, "maximum": 100, "description": "Physical attack power (0=harmless, 100=devastating force)"},
@@ -335,7 +337,7 @@ The output should be formatted as a JSON instance that conforms to the JSON sche
     "specialActionName": {"type": "string", "description": "Name of the monster's ultimate move (one use per battle)"},
     "specialActionDescription": {"type": "string", "description": "Describe this powerful finishing move and its dramatic effects in battle"}
   },
-  "required": ["rarity", "HP", "defence", "attack", "speed", "specialPassiveTraitDescription", "attackActionName", "attackActionDescription", "buffActionName", "buffActionDescription", "debuffActionName", "debuffActionDescription", "specialActionName", "specialActionDescription"]
+  "required": ["rarity", "height", "weight", "HP", "defence", "attack", "speed", "specialPassiveTraitDescription", "attackActionName", "attackActionDescription", "buffActionName", "buffActionDescription", "debuffActionName", "debuffActionDescription", "specialActionName", "specialActionDescription"]
 }
 \`\`\`
 
@@ -388,7 +390,7 @@ Write your response within \`\`\`json\`\`\``;
         const parsedStats = JSON.parse(cleanJson.trim());
         
         // Remove any extra fields not in our schema
-        const allowedFields = ['rarity', 'HP', 'defence', 'attack', 'speed',
+        const allowedFields = ['rarity', 'height', 'weight', 'HP', 'defence', 'attack', 'speed',
           'specialPassiveTraitDescription', 'attackActionName', 'attackActionDescription',
           'buffActionName', 'buffActionDescription', 'debuffActionName', 'debuffActionDescription',
           'specialActionName', 'specialActionDescription', 'boostActionName', 'boostActionDescription',

src/lib/components/Piclets/PicletDetail.svelte

@@ -85,7 +85,7 @@
       <div class="header-card">
         <div class="card-background">
           <!-- Faded Logo Background -->
-          <div class="logo-background">PICLETS</div>
+          <div class="logo-background"></div>
           
           <!-- Card Header -->
           <div class="card-header">
@@ -326,11 +326,14 @@
     position: absolute;
     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;
+    transform: translate(-50%, -50%);
+    width: 200px;
+    height: 200px;
+    background-image: url('/assets/snap_logo.png');
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+    opacity: 0.1;
     pointer-events: none;
     z-index: 1;
   }
@@ -412,22 +415,18 @@
   }
   
   .large-image-container {
-    background: rgba(255, 255, 255, 0.9);
-    border-radius: 20px;
-    padding: 20px;
     display: flex;
     align-items: center;
     justify-content: center;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-    width: 200px;
-    height: 200px;
+    width: 360px;
+    height: 360px;
   }
   
   .large-piclet-image {
-    width: 160px;
-    height: 160px;
+    width: 360px;
+    height: 360px;
     object-fit: contain;
-    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
+    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
   }
   
   .card-title-section {