🐐

frontend/src/routes/cards/+page.svelte

@@ -30,14 +30,17 @@
 
   let sortAsc = $state(true);
   let costMin = $state(1);
-  let costMax = $state(11);
+  let costMax = $state(10);
+  let searchQuery = $state('');
 
   let filtered = $derived.by(() => {
+    const q = searchQuery.trim().toLowerCase();
     let result = allCards.filter(c =>
       selectedRarities.has(c.card_rarity) &&
       selectedTypes.has(c.card_type) &&
       c.cost >= costMin &&
-      c.cost <= costMax
+      c.cost <= costMax &&
+      (!q || c.name.toLowerCase().includes(q))
     );
 
     result = result.slice().sort((a, b) => {
@@ -189,6 +192,13 @@
         </button>
       {/each}
 
+      <input
+        class="search-input"
+        type="search"
+        placeholder="Search by name…"
+        bind:value={searchQuery}
+      />
+
       <button class="filter-toggle" onclick={() => filtersOpen = !filtersOpen}>
         {filtersOpen ? 'Hide filters' : 'Filter'}
         {#if selectedRarities.size < RARITIES.length || selectedTypes.size < TYPES.length || costMin > 1 || costMax < 10}
@@ -236,14 +246,14 @@
         <div class="filter-group">
           <div class="filter-group-header">
             <span class="filter-group-label">Cost</span>
-            <button class="select-all" onclick={() => { costMin = 1; costMax = 11; }}>Reset</button>
+            <button class="select-all" onclick={() => { costMin = 1; costMax = 10; }}>Reset</button>
           </div>
           <div class="cost-range">
             <span class="range-label">Min: {costMin}</span>
-            <input type="range" min="1" max="11" bind:value={costMin}
+            <input type="range" min="1" max="10" bind:value={costMin}
               oninput={() => { if (costMin > costMax) costMax = costMin; }} />
             <span class="range-label">Max: {costMax}</span>
-            <input type="range" min="1" max="11" bind:value={costMax}
+            <input type="range" min="1" max="10" bind:value={costMax}
               oninput={() => { if (costMax < costMin) costMin = costMax; }} />
           </div>
         </div>
@@ -327,6 +337,22 @@
     flex-wrap: wrap;
   }
 
+  .search-input {
+    font-family: 'Crimson Text', serif;
+    font-size: 15px;
+    background: rgba(255,255,255,0.04);
+    border: 1px solid rgba(107, 76, 30, 0.4);
+    border-radius: 4px;
+    color: #f0d080;
+    padding: 5px 10px;
+    outline: none;
+    width: 220px;
+    margin-left: auto;
+    transition: border-color 0.15s;
+  }
+  .search-input:focus { border-color: #c8861a; }
+  .search-input::placeholder { color: rgba(240, 180, 80, 0.3); }
+
   .toolbar-label {
     font-family: 'Cinzel', serif;
     font-size: 11px;
@@ -374,7 +400,7 @@
     color: rgba(240, 180, 80, 0.6);
     padding: 4px 10px;
     cursor: pointer;
-    margin-left: auto;
+    margin-left: 0.5rem;
     position: relative;
     transition: all 0.15s;
   }
@@ -530,6 +556,7 @@
     align-items: center;
     justify-content: center;
     z-index: 100;
+    backdrop-filter: blur(6px);
   }
 
   .card-popup {