ios

src/lib/components/Pages/Pictuary.svelte

@@ -129,10 +129,6 @@
   />
 {:else}
   <div class="pictuary-page">
-  <header class="page-header">
-    <h1>Pictuary</h1>
-  </header>
-  
   {#if isLoading}
     <div class="loading-state">
       <div class="spinner"></div>

src/lib/components/Piclets/PicletDetail.svelte

@@ -46,17 +46,20 @@
   }
 </script>
 
-<div class="detail-modal">
-  <div class="detail-content">
+<div class="detail-page">
     <div class="navigation-bar">
-      <button class="close-btn" onclick={onClose}>Done</button>
+      <button class="back-btn" onclick={onClose}>
+        <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>
       <h2>{instance.nickname || instance.typeId}</h2>
       <div class="nav-spacer"></div>
     </div>
     
     <div class="content-scroll">
       <!-- Header Card -->
-      <div class="header-card" style="background: linear-gradient(135deg, #007bff, #0056b3);">
+      <div class="header-card">
         <div class="header-layout">
           <div class="image-column">
             <div class="image-container">
@@ -135,9 +138,6 @@
         {#if selectedTab === 'about'}
           <div class="content-card">
             <p class="description">{instance.concept}</p>
-            <div class="image-caption">
-              <strong>Original prompt:</strong> {instance.imageCaption}
-            </div>
           </div>
         {:else if selectedTab === 'stats'}
           <div class="content-card">
@@ -223,27 +223,16 @@
         {/if}
       </div>
     </div>
-  </div>
 </div>
 
 <style>
-  .detail-modal {
+  .detail-page {
     position: fixed;
     inset: 0;
-    background: rgba(0, 0, 0, 0.5);
-    display: flex;
-    align-items: flex-end;
-    z-index: 1000;
-  }
-  
-  .detail-content {
     background: #f2f2f7;
-    width: 100%;
-    height: 90vh;
-    overflow: hidden;
+    z-index: 1000;
     display: flex;
     flex-direction: column;
-    border-radius: 16px 16px 0 0;
   }
   
   /* Navigation Bar */
@@ -264,18 +253,20 @@
     text-align: center;
   }
   
-  .close-btn {
+  .back-btn {
     background: none;
     border: none;
     color: #007bff;
-    font-size: 17px;
-    font-weight: 400;
     cursor: pointer;
     padding: 0;
+    display: flex;
+    align-items: center;
+    width: 24px;
+    height: 24px;
   }
   
   .nav-spacer {
-    width: 50px;
+    width: 24px;
   }
   
   /* Content Scroll */
@@ -290,6 +281,7 @@
     margin: 16px;
     padding: 20px;
     border-radius: 16px;
+    background: linear-gradient(135deg, #636366, #48484a);
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   }
   
@@ -346,7 +338,7 @@
   }
   
   .level-badge {
-    background: rgba(52, 199, 89, 0.8);
+    background: rgba(142, 142, 147, 0.8);
     padding: 3px 10px;
     border-radius: 12px;
     font-size: 13px;
@@ -408,7 +400,7 @@
   }
   
   .tab-button.active {
-    background: #007bff;
+    background: #636366;
     color: white;
   }
   
@@ -431,11 +423,6 @@
     color: #000;
   }
   
-  .image-caption {
-    font-size: 14px;
-    color: #666;
-    line-height: 1.4;
-  }
   
   /* Stats Tab */
   .section-title {
@@ -601,16 +588,11 @@
   }
   
   @media (min-width: 768px) {
-    .detail-modal {
-      align-items: center;
-      padding: 2rem;
-    }
-    
-    .detail-content {
-      max-width: 500px;
-      height: auto;
-      max-height: 90vh;
-      border-radius: 16px;
+    .detail-page {
+      position: relative;
+      max-width: 600px;
+      margin: 0 auto;
+      box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
     }
   }
 </style>