Making cards in deck description clickable

Chrono/Web/Pages/DeckDetail.razor

@@ -111,10 +111,7 @@
                 <section class="deck-section description">
                     <h2><i class="bi bi-chat-quote-fill"></i> Description</h2>
                     <div class="deck-description">
-                        @foreach (var paragraph in deck.Description.Split('\n', StringSplitOptions.RemoveEmptyEntries))
-                        {
-                            <p>@paragraph</p>
-                        }
+                        @RenderDescription(deck.Description)
                     </div>
                 </section>
             }
@@ -238,4 +235,65 @@
         selectedCard = null;
     }
 
+    private RenderFragment RenderDescription(string description)
+    {
+        return builder =>
+        {
+            var cardNames = CardDatabase.Cards
+                .Select(c => c.Name)
+                .Where(n => !string.IsNullOrWhiteSpace(n))
+                .OrderByDescending(n => n.Length)
+                .ToList();
+
+            int sequence = 0;
+            var paragraphs = description.Split('\n', StringSplitOptions.RemoveEmptyEntries);
+
+            foreach (var paragraph in paragraphs)
+            {
+                builder.OpenElement(sequence++, "p");
+
+                var currentText = paragraph;
+                while (!string.IsNullOrEmpty(currentText))
+                {
+                    int bestMatchIndex = -1;
+                    string? bestMatchName = null;
+
+                    foreach (var name in cardNames)
+                    {
+                        int index = currentText.IndexOf(name, StringComparison.OrdinalIgnoreCase);
+                        if (index != -1 && (bestMatchIndex == -1 || index < bestMatchIndex))
+                        {
+                            bestMatchIndex = index;
+                            bestMatchName = name;
+                        }
+                    }
+
+                    if (bestMatchIndex != -1 && bestMatchName != null)
+                    {
+                        if (bestMatchIndex > 0)
+                        {
+                            builder.AddContent(sequence++, currentText.Substring(0, bestMatchIndex));
+                        }
+
+                        var card = LookupCard(bestMatchName);
+                        builder.OpenElement(sequence++, "button");
+                        builder.AddAttribute(sequence++, "class", "inline-card-btn");
+                        builder.AddAttribute(sequence++, "onclick", EventCallback.Factory.Create(this, () => SelectCard(card)));
+                        builder.AddContent(sequence++, bestMatchName);
+                        builder.CloseElement();
+
+                        currentText = currentText.Substring(bestMatchIndex + bestMatchName.Length);
+                    }
+                    else
+                    {
+                        builder.AddContent(sequence++, currentText);
+                        currentText = string.Empty;
+                    }
+                }
+
+                builder.CloseElement();
+            }
+        };
+    }
+
 }

Chrono/Web/Pages/DeckDetail.razor.css

@@ -179,6 +179,7 @@
     color: var(--text-secondary);
 }
 
+
 .deck-description p {
     margin: 0 0 1rem;
 }

Chrono/Web/wwwroot/css/app.css

@@ -7,6 +7,7 @@
     --text-secondary: #9898b8;
     --text-muted: #686888;
     --accent: #6c63ff;
+    --accent-rgb: 108, 99, 255;
     --accent-glow: rgba(108, 99, 255, 0.3);
     --gold: #ffd700;
     --gold-glow: rgba(255, 215, 0, 0.4);
@@ -254,3 +255,29 @@ a, .btn-link {
     font-style: italic;
     align-self: flex-end;
 }
+
+
+
+
+
+.inline-card-btn {
+    background: none;
+    border: none;
+    padding: 0 2px;
+    color: var(--accent);
+    font-weight: 500;
+    text-decoration: none;
+    border-bottom: 1px dashed var(--accent);
+    cursor: pointer;
+    transition: all var(--transition);
+    display: inline;
+    font-size: inherit;
+    font-family: inherit;
+    border-radius: 2px;
+}
+
+.inline-card-btn:hover {
+    color: var(--accent-light, #60a5fa);
+    border-bottom-style: solid;
+    background-color: rgba(var(--accent-rgb, 59, 130, 246), 0.1);
+}