🐐

frontend/src/lib/CardSelector.svelte

@@ -8,6 +8,7 @@
   let {
     allCards = [],
     selectedIds = $bindable(new Set()),
+    inDeckIds = new Set(),
     onclose = null,
     costLimit = null,   // if set, prevents selecting cards that would exceed it
     showFooter = true,  // set false to hide the Done button (e.g. inline deck builder)
@@ -185,6 +186,9 @@
             {#if selectedIds.has(card.id)}
               <div class="selected-badge">✓</div>
             {/if}
+            {#if inDeckIds.has(card.id)}
+              <div class="in-deck-badge" title="In a deck">⊞</div>
+            {/if}
           </button>
         {/each}
       </div>
@@ -410,6 +414,21 @@
     z-index: 10;
   }
 
+  .in-deck-badge {
+    position: absolute;
+    top: 6px;
+    right: 6px;
+    background: rgba(13, 8, 2, 0.75);
+    color: #7ecfcf;
+    font-size: 16px;
+    line-height: 1;
+    padding: 3px 5px;
+    border-radius: 6px;
+    border: 1px solid rgba(126, 207, 207, 0.5);
+    pointer-events: none;
+    z-index: 10;
+  }
+
   .status {
     font-family: 'Crimson Text', serif;
     font-size: 16px;

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

@@ -11,20 +11,23 @@
   let selectorOpen = $state(false);
   let shattering = $state(false);
   let result = $state(null); // { gained, shards }
+  let inDeckIds = $state(new Set());
 
   const selectedCards = $derived(allCards.filter(c => selectedIds.has(c.id)));
   const totalYield = $derived(selectedCards.reduce((sum, c) => sum + c.cost, 0));
 
   onMount(async () => {
     if (!localStorage.getItem('token')) { goto('/auth'); return; }
-    const [cardsRes, profileRes] = await Promise.all([
+    const [cardsRes, profileRes, inDecksRes] = await Promise.all([
       apiFetch(`${API_URL}/cards`),
       apiFetch(`${API_URL}/profile`),
+      apiFetch(`${API_URL}/cards/in-decks`),
     ]);
     if (cardsRes.status === 401) { goto('/auth'); return; }
     allCards = await cardsRes.json();
     const profile = await profileRes.json();
     shards = profile.shards;
+    if (inDecksRes.ok) inDeckIds = new Set(await inDecksRes.json());
   });
 
   async function shatter() {
@@ -95,6 +98,7 @@
     <CardSelector
       allCards={allCards}
       bind:selectedIds={selectedIds}
+      {inDeckIds}
       onclose={() => { selectorOpen = false; }}
     />
   </div>