Adding vibe hover effect

Chrono/Shared/Components/CardGrid.razor

@@ -1,4 +1,6 @@
-@namespace Shared.Components
+@namespace Shared.Components
+
+@inject Shared.Services.CardPreviewService PreviewService
 
 <div class="deck-card-row">
     @foreach (var group in Cards.GroupBy(x => x))
@@ -7,7 +9,9 @@
         var count = group.Count();
         var card = LookupCard(cardName);
         <button class="mini-card-btn @(count > 1 ? "is-stacked" : "")"
-                @onclick="() => SelectCard(card)">
+                @onclick="() => SelectCard(card)"
+                @onmouseenter="@(e => PreviewService.Show(card, e.ClientX, e.ClientY))"
+                @onmouseleave="@(() => PreviewService.Hide())">
             <div class="mini-card-stack">
                 @for (var i = 0; i < (count > 1 ? Math.Min(count, 3) : 1); i++)
                 {

Chrono/Shared/Components/CardPreview.razor

@@ -1,18 +1,37 @@
-@implements IDisposable
+@using Shared.Services
+@using Model
 @inject CardPreviewService PreviewService
-@namespace Shared.Components
 
 @if (PreviewService.IsVisible && PreviewService.HoveredCard != null)
 {
-    <div class="card-preview-popup" style="left: @(PreviewService.X + 20)px; top: @(PreviewService.Y)px;">
-        <div class="preview-content">
-            <img src="@PreviewService.HoveredCard.ImagePath" alt="@PreviewService.HoveredCard.Name"/>
-            <div class="preview-info">
-                <strong>@PreviewService.HoveredCard.Name</strong>
-                @if (PreviewService.HoveredCard.Cost.HasValue)
+    <div class="card-preview-container" style="left: @(PreviewService.X + 20)px; top: @(PreviewService.Y - 100)px;">
+        <div class="card-preview-card">
+            <img src="@PreviewService.HoveredCard.ImagePath" alt="@PreviewService.HoveredCard.Name" class="preview-image" />
+            <div class="preview-overlay">
+                <div class="preview-name">@PreviewService.HoveredCard.Name</div>
+                <div class="preview-meta">
+                    @if (PreviewService.HoveredCard.Cost.HasValue)
+                    {
+                        <span class="preview-cost"><i class="bi bi-lightning-fill"></i> @PreviewService.HoveredCard.Cost</span>
+                    }
+                    <span class="preview-category">@PreviewService.HoveredCard.Category</span>
+                </div>
+                @if (!string.IsNullOrEmpty(PreviewService.HoveredCard.Description))
                 {
-                    <span class="preview-cost"><i
-                            class="bi bi-lightning-fill"></i> @PreviewService.HoveredCard.Cost</span>
+                    <div class="preview-description">@PreviewService.HoveredCard.Description</div>
+                }
+                @if (PreviewService.HoveredCard.Attack.HasValue || PreviewService.HoveredCard.Health.HasValue)
+                {
+                    <div class="preview-stats">
+                        @if (PreviewService.HoveredCard.Attack.HasValue)
+                        {
+                            <span class="stat-item"><i class="bi bi-shield-shaded"></i> @PreviewService.HoveredCard.Attack</span>
+                        }
+                        @if (PreviewService.HoveredCard.Health.HasValue)
+                        {
+                            <span class="stat-item"><i class="bi bi-heart-fill"></i> @PreviewService.HoveredCard.Health</span>
+                        }
+                    </div>
                 }
             </div>
         </div>
@@ -20,7 +39,6 @@
 }
 
 @code {
-
     protected override void OnInitialized()
     {
         PreviewService.OnChange += StateHasChanged;
@@ -30,5 +48,4 @@
     {
         PreviewService.OnChange -= StateHasChanged;
     }
-
 }

Chrono/Shared/Components/CardPreview.razor.css

@@ -1,33 +1,93 @@
-.card-preview-popup {
+.card-preview-container {
     position: fixed;
-    z-index: 9999;
+    z-index: 10000;
     pointer-events: none;
-    background: var(--bg-surface);
-    border: 1px solid var(--border);
-    border-radius: var(--radius-sm);
-    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
-    padding: 0.5rem;
-    width: 220px;
     transition: opacity 0.15s ease-in-out;
 }
 
-.preview-content img {
-    width: 100%;
-    height: auto;
-    border-radius: 4px;
-    display: block;
-    margin-bottom: 0.5rem;
+.card-preview-card {
+    width: 280px;
+    background: #1a1a1a;
+    border: 2px solid #333;
+    border-radius: 12px;
+    overflow: hidden;
+    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
+    animation: previewFadeIn 0.2s ease-out;
 }
 
-.preview-info {
+.preview-image {
+    width: 100%;
+    display: block;
+}
+
+.preview-overlay {
+    padding: 10px;
+    background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+}
+
+.preview-name {
+    font-weight: bold;
+    color: white;
+    font-size: 1.1rem;
+    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
+}
+
+.preview-meta {
     display: flex;
     justify-content: space-between;
-    align-items: center;
-    font-size: 0.9rem;
-    color: var(--text-primary);
+    font-size: 0.85rem;
+    margin-top: 4px;
 }
 
 .preview-cost {
-    color: var(--accent);
-    font-weight: bold;
+    color: #00d2ff;
+}
+
+.preview-category {
+    color: #aaa;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+}
+
+.preview-description {
+    margin-top: 8px;
+    font-size: 0.85rem;
+    color: #eee;
+    line-height: 1.3;
+    font-style: italic;
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
+    padding-top: 6px;
+}
+
+.preview-stats {
+    display: flex;
+    gap: 15px;
+    margin-top: 8px;
+    padding-top: 6px;
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.stat-item {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    font-weight: bold;
+    font-size: 1rem;
+}
+
+.stat-item .bi-shield-shaded {
+    color: #ff4d4d;
+}
+
+.stat-item .bi-heart-fill {
+    color: #2ecc71;
+}
+
+@keyframes previewFadeIn {
+    from { opacity: 0; transform: translateY(10px); }
+    to { opacity: 1; transform: translateY(0); }
 }

Chrono/Shared/Components/DocDetailModal.razor

@@ -0,0 +1,139 @@
+@using System.Text.RegularExpressions
+@using Microsoft.AspNetCore.Components.Rendering
+@using Model
+@namespace Shared.Components
+
+@if (Doc != null)
+{
+    <div class="modal-backdrop" @onclick="HandleBackdropClick"></div>
+    <div class="generic-detail">
+        <button class="detail-close" @onclick="HandleClose"><i class="bi bi-x-lg"></i></button>
+        <div class="detail-layout">
+            <div class="detail-info">
+                <div class="detail-header">
+                    @if (!string.IsNullOrEmpty(Doc.Category))
+                    {
+                        <span class="category-badge">@Doc.Category</span>
+                    }
+                    <h2>@Doc.Title</h2>
+                </div>
+
+                @if (!string.IsNullOrWhiteSpace(Doc.Content))
+                {
+                    <div class="detail-field description">
+                        <div class="markdown-content">
+                            @RenderDescription(Doc.Content)
+                        </div>
+                    </div>
+                }
+            </div>
+        </div>
+    </div>
+}
+
+@code {
+    [Parameter] public DocData? Doc { get; set; }
+    [Parameter] public EventCallback OnClose { get; set; }
+
+    private void HandleClose()
+    {
+        _ = OnClose.InvokeAsync();
+    }
+
+    private void HandleBackdropClick()
+    {
+        _ = OnClose.InvokeAsync();
+    }
+
+    private RenderFragment RenderDescription(string content)
+    {
+        return builder =>
+        {
+            if (string.IsNullOrWhiteSpace(content)) return;
+
+            var seq = 0;
+            var lines = content.Split(['\r', '\n'], StringSplitOptions.None);
+            var inList = false;
+
+            for (var i = 0; i < lines.Length; i++)
+            {
+                var line = lines[i];
+                var trimmedLine = line.Trim();
+
+                // Handle Lists
+                if (trimmedLine.StartsWith("- ") || trimmedLine.StartsWith("* "))
+                {
+                    if (!inList)
+                    {
+                        builder.OpenElement(seq++, "ul");
+                        inList = true;
+                    }
+
+                    builder.OpenElement(seq++, "li");
+                    RenderInlines(builder, ref seq, trimmedLine[2..]);
+                    builder.CloseElement();
+                    continue;
+                }
+
+                if (inList)
+                {
+                    builder.CloseElement();
+                    inList = false;
+                }
+
+                if (!string.IsNullOrWhiteSpace(trimmedLine))
+                {
+                    builder.OpenElement(seq++, "p");
+                    RenderInlines(builder, ref seq, line);
+                    builder.CloseElement();
+                }
+            }
+
+            if (inList) builder.CloseElement();
+        };
+    }
+
+    private void RenderInlines(RenderTreeBuilder builder, ref int seq, string text)
+    {
+        var remaining = text;
+        while (!string.IsNullOrEmpty(remaining))
+        {
+            var boldMatch = Regex.Match(remaining, @"\*\*(.*?)\*\*");
+            var italicMatch = Regex.Match(remaining, @"\*(.*?)\*");
+
+            var bestIdx = int.MaxValue;
+            Match? bestMatch = null;
+            var matchType = 0; // 1: bold, 2: italic
+
+            if (boldMatch.Success && boldMatch.Index < bestIdx)
+            {
+                bestIdx = boldMatch.Index;
+                bestMatch = boldMatch;
+                matchType = 1;
+            }
+
+            if (italicMatch.Success && italicMatch.Index < bestIdx)
+            {
+                bestIdx = italicMatch.Index;
+                bestMatch = italicMatch;
+                matchType = 2;
+            }
+
+            if (bestMatch != null)
+            {
+                if (bestIdx > 0) builder.AddContent(seq++, remaining[..bestIdx]);
+                var innerText = bestMatch.Groups[1].Value;
+                builder.OpenElement(seq++, matchType == 1 ? "strong" : "em");
+                builder.AddContent(seq++, innerText);
+                builder.CloseElement();
+                remaining = remaining[(bestIdx + bestMatch.Length)..];
+            }
+            else
+            {
+                builder.AddContent(seq++, remaining);
+                remaining = "";
+            }
+        }
+    }
+
+}

Chrono/Shared/Components/DocDetailModal.razor.css

@@ -0,0 +1,76 @@
+.modal-backdrop {
+    position: fixed;
+    inset: 0;
+    z-index: 1060;
+    background: rgba(0, 0, 0, 0.7);
+    backdrop-filter: blur(4px);
+}
+
+.generic-detail {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 1070;
+    background: var(--bg-surface);
+    border: 1px solid var(--border);
+    border-radius: 20px;
+    padding: 2rem;
+    max-width: 600px;
+    width: 90vw;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
+    color: var(--text-primary);
+}
+
+.detail-close {
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
+    background: rgba(0, 0, 0, 0.3);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    color: var(--text-primary);
+    width: 2rem;
+    height: 2rem;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.detail-close:hover {
+    background: rgba(255, 255, 255, 0.1);
+    transform: rotate(90deg);
+}
+
+.detail-header {
+    text-align: center;
+    margin-bottom: 1.5rem;
+}
+
+.category-badge {
+    display: inline-block;
+    padding: 0.2rem 0.6rem;
+    background: var(--accent);
+    color: white;
+    font-size: 0.75rem;
+    font-weight: 700;
+    border-radius: 4px;
+    margin-bottom: 0.5rem;
+    text-transform: uppercase;
+}
+
+.detail-header h2 {
+    margin: 0;
+    font-size: 1.5rem;
+    font-weight: 800;
+}
+
+.markdown-content {
+    line-height: 1.6;
+}
+
+.markdown-content p {
+    margin-bottom: 1rem;
+}

Chrono/Shared/Pages/Agents.razor

@@ -1,4 +1,5 @@
 @namespace Shared.Pages
+@inject Shared.Services.CardPreviewService PreviewService
 @page "/agents"
 
 <PageTitle>Chrono CCG - Agents</PageTitle>
@@ -29,10 +30,15 @@
             </GridColumn>
             <GridColumn Field="@nameof(CardData.Name)" Title="Card" Width="220px">
                 <Template>
-                    <div class="agent-name-cell">
-                        <img src="@(((CardData)context).ImagePath)" alt="@(((CardData)context).Name)"
+                    @{
+                        var card = (CardData)context;
+                    }
+                    <div class="agent-name-cell"
+                         @onmouseenter="@(e => PreviewService.Show(card, e.ClientX, e.ClientY))"
+                         @onmouseleave="@(() => PreviewService.Hide())">
+                        <img src="@(card.ImagePath)" alt="@(card.Name)"
                              class="agent-thumb"/>
-                        <span>@(((CardData)context).Name)</span>
+                        <span>@(card.Name)</span>
                     </div>
                 </Template>
             </GridColumn>

Chrono/Shared/Pages/DeckDetail.razor

@@ -1,5 +1,6 @@
 @namespace Shared.Pages
 @inject CardRenderingService CardRenderer
+@inject Shared.Services.CardPreviewService PreviewService
 @page "/decks/{Name}"
 
 <PageTitle>Chrono CCG - @(deck?.Name ?? "Deck Details")</PageTitle>
@@ -75,7 +76,7 @@
                 <section class="deck-section description">
                     <h2><i class="bi bi-chat-quote-fill"></i> Description</h2>
                     <div class="deck-description">
-                        @CardRenderer.RenderDescription(deck.Description, SelectCard)
+                        @CardRenderer.RenderDescription(deck.Description, SelectCard, doc => PreviewService.SelectDoc(doc), PreviewService)
                     </div>
                 </section>
             }
@@ -86,7 +87,7 @@
 <CardDetailModal Card="selectedCard"
                  OnClose="CloseDetail"
                  OnSelectCard="SelectCard"
-                 DescriptionRenderer="@(desc => CardRenderer.RenderDescription(desc, SelectCard))"/>
+                 DescriptionRenderer="@(desc => CardRenderer.RenderDescription(desc, SelectCard, doc => PreviewService.SelectDoc(doc), PreviewService))"/>
 
 @code {
     [Parameter] public string Name { get; set; } = "";

Chrono/Shared/Pages/Docs.razor

@@ -1,3 +1,5 @@
+@inject Shared.Services.CardRenderingService CardRenderer
+@inject Shared.Services.CardPreviewService PreviewService
 @namespace Shared.Pages
 @page "/docs"
 
@@ -85,7 +87,9 @@
 
                                 @if (key == "description")
                                 {
-                                    <p class="doc-field-desc">@val</p>
+                                    <div class="doc-field-desc">
+                                        @CardRenderer.RenderDescription(val, _ => {}, doc => PreviewService.SelectDoc(doc), PreviewService)
+                                    </div>
                                 }
                                 else
                                 {

Chrono/Shared/Pages/SyndicatePairings.razor

@@ -0,0 +1,105 @@
+@page "/syndicate-pairings"
+@namespace Shared.Pages
+
+<HeadContent>
+    <meta name="description" content="Explore all syndicate pairings in Chrono CCG."/>
+</HeadContent>
+
+<div class="syndicates-container">
+    <div class="syndicates-header">
+        <h1>Syndicate Pairings</h1>
+        <p class="text-secondary">Explore all @pairings.Count combinations of syndicates</p>
+    </div>
+
+    <div class="pairings-grid">
+        @foreach (var doc in pairings)
+        {
+            var s1 = doc.Syndicates?[0] ?? "";
+            var s2 = doc.Syndicates?[1] ?? "";
+            <div class="pairing-card" @onclick="() => OpenPairing(doc)">
+                <div class="pairing-display">
+                    <div class="syndicate-item @s1.ToLowerInvariant()">
+                        <span class="syn-icon"></span>
+                        <span class="syn-name">@s1</span>
+                    </div>
+                    <div class="pairing-separator">
+                        <i class="bi bi-x-lg"></i>
+                    </div>
+                    <div class="syndicate-item @s2.ToLowerInvariant()">
+                        <span class="syn-icon"></span>
+                        <span class="syn-name">@s2</span>
+                    </div>
+                </div>
+                <div class="pairing-info">
+                    <span class="pairing-label">Dual-Syndicate Pairing</span>
+                </div>
+            </div>
+        }
+    </div>
+</div>
+
+<Shared.Components.SyndicatePairDialog Doc="selectedDoc" OnClose="ClosePairing" OnNavigate="HandleNavigate"/>
+<Shared.Components.CardDetailModal Card="selectedCard" IsVisible="@(selectedCard != null)" OnClose="CloseCard" />
+<Shared.Components.DocDetailModal Doc="selectedGenericDoc" OnClose="CloseGenericDoc"/>
+
+@code {
+    private List<DocData> pairings = [];
+    private DocData? selectedDoc;
+    private CardData? selectedCard;
+    private DocData? selectedGenericDoc;
+
+    protected override void OnInitialized()
+    {
+        pairings = DocDatabase.Docs
+            .Where(d => d.Category == "Syndicate Pairings")
+            .OrderBy(d => d.Title)
+            .ToList();
+    }
+
+    private void OpenPairing(DocData doc)
+    {
+        selectedDoc = doc;
+    }
+
+    private void ClosePairing()
+    {
+        selectedDoc = null;
+    }
+
+    private void CloseCard()
+    {
+        selectedCard = null;
+    }
+
+    private void CloseGenericDoc()
+    {
+        selectedGenericDoc = null;
+    }
+
+    private void HandleNavigate(string name)
+    {
+        var card = CardDatabase.Cards.FirstOrDefault(c => string.Equals(c.Name, name, StringComparison.OrdinalIgnoreCase));
+        if (card != null)
+        {
+            if (card.Category is "Agent" or "Spell")
+            {
+                selectedCard = card;
+            }
+            else
+            {
+                selectedGenericDoc = new DocData { Title = card.Name, Content = card.Description ?? "", Category = card.Category };
+            }
+
+            StateHasChanged();
+            return;
+        }
+
+        var doc = DocDatabase.Docs.FirstOrDefault(d => string.Equals(d.Title, name, StringComparison.OrdinalIgnoreCase));
+        if (doc != null)
+        {
+            selectedGenericDoc = doc;
+            StateHasChanged();
+        }
+    }
+
+}

Chrono/Shared/Pages/SyndicatePairings.razor.css

@@ -0,0 +1,130 @@
+.syndicates-container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 2rem;
+}
+
+.syndicates-header {
+    margin-bottom: 2rem;
+    text-align: center;
+}
+
+.pairings-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    gap: 1.5rem;
+}
+
+.pairing-card {
+    background: var(--bg-surface);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    padding: 1.5rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    transition: transform var(--transition), box-shadow var(--transition);
+    cursor: pointer;
+}
+
+.pairing-card:hover {
+    transform: translateY(-4px);
+    box-shadow: var(--shadow);
+    border-color: var(--accent);
+}
+
+.pairing-display {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    margin-bottom: 1rem;
+    width: 100%;
+    justify-content: center;
+}
+
+.syndicate-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.5rem;
+    flex: 1;
+}
+
+.syn-icon {
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    background: currentColor;
+    box-shadow: 0 0 10px currentColor;
+}
+
+.syn-name {
+    font-size: 0.9rem;
+    font-weight: 600;
+    color: var(--text-primary);
+}
+
+.pairing-separator {
+    color: var(--text-muted);
+    font-size: 0.8rem;
+    opacity: 0.5;
+}
+
+.pairing-info {
+    border-top: 1px solid var(--border);
+    padding-top: 0.75rem;
+    width: 100%;
+    text-align: center;
+}
+
+.pairing-label {
+    font-size: 0.75rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--text-muted);
+}
+
+.syn-icon {
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    background: currentColor;
+    box-shadow: 0 0 10px currentColor;
+    display: inline-block; /* Ensure visibility */
+}
+
+/* Syndicate Colors */
+.singularity {
+    color: #ffffff;
+}
+
+.phasetide {
+    color: #2196f3;
+}
+
+.silence {
+    color: #9c27b0;
+}
+
+.lifeblood {
+    color: #4caf50;
+}
+
+.sungrace {
+    color: #ff9800;
+}
+
+.splintergleam {
+    color: #f44336;
+}
+
+@media (max-width: 600px) {
+    .pairings-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .syndicates-container {
+        padding: 1rem;
+    }
+}

Chrono/Shared/Pages/Syndicates.razor

@@ -0,0 +1,97 @@
+@page "/syndicates"
+@namespace Shared.Pages
+
+<HeadContent>
+    <meta name="description" content="Explore each syndicate in Chrono CCG."/>
+</HeadContent>
+
+<div class="syndicates-container">
+    <div class="syndicates-header">
+        <h1>Syndicates</h1>
+        <p class="text-secondary">Explore the @syndicates.Count core syndicates of Chrono CCG</p>
+    </div>
+
+    <div class="pairings-grid">
+        @foreach (var doc in syndicates)
+        {
+            var s = doc.Title;
+            <div class="pairing-card" @onclick="() => OpenSyndicate(doc)">
+                <div class="pairing-display">
+                    <div class="syndicate-item @s.ToLowerInvariant()">
+                        <span class="syn-icon"></span>
+                        <span class="syn-name">@s</span>
+                    </div>
+                </div>
+                <div class="pairing-info">
+                    <span class="pairing-label">Syndicate</span>
+                </div>
+            </div>
+        }
+    </div>
+</div>
+
+<Shared.Components.SyndicateDialog Doc="selectedDoc" OnClose="CloseSyndicate" OnNavigate="HandleNavigate"/>
+<Shared.Components.CardDetailModal Card="selectedCard" IsVisible="@(selectedCard != null)" OnClose="CloseCard" />
+<Shared.Components.DocDetailModal Doc="selectedGenericDoc" OnClose="CloseGenericDoc"/>
+
+@code {
+    private List<DocData> syndicates = [];
+    private DocData? selectedDoc;
+    private CardData? selectedCard;
+    private DocData? selectedGenericDoc;
+
+    protected override void OnInitialized()
+    {
+        syndicates = DocDatabase.Docs
+            .Where(d => d.Category == "Syndicate")
+            .OrderBy(d => d.Title)
+            .ToList();
+    }
+
+    private void OpenSyndicate(DocData doc)
+    {
+        selectedDoc = doc;
+    }
+
+    private void CloseSyndicate()
+    {
+        selectedDoc = null;
+    }
+
+    private void CloseCard()
+    {
+        selectedCard = null;
+    }
+
+    private void CloseGenericDoc()
+    {
+        selectedGenericDoc = null;
+    }
+
+    private void HandleNavigate(string name)
+    {
+        var card = CardDatabase.Cards.FirstOrDefault(c => string.Equals(c.Name, name, StringComparison.OrdinalIgnoreCase));
+        if (card != null)
+        {
+            if (card.Category is "Agent" or "Spell")
+            {
+                selectedCard = card;
+            }
+            else
+            {
+                selectedGenericDoc = new DocData { Title = card.Name, Content = card.Description ?? "", Category = card.Category };
+            }
+
+            StateHasChanged();
+            return;
+        }
+
+        var doc = DocDatabase.Docs.FirstOrDefault(d => string.Equals(d.Title, name, StringComparison.OrdinalIgnoreCase));
+        if (doc != null)
+        {
+            selectedGenericDoc = doc;
+            StateHasChanged();
+        }
+    }
+
+}

Chrono/Shared/Pages/Syndicates.razor.css

@@ -0,0 +1,116 @@
+.syndicates-container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 2rem;
+}
+
+.syndicates-header {
+    margin-bottom: 2rem;
+    text-align: center;
+}
+
+.pairings-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+    gap: 1.5rem;
+}
+
+.pairing-card {
+    background: var(--bg-surface);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    padding: 1.5rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    transition: transform var(--transition), box-shadow var(--transition);
+    cursor: pointer;
+}
+
+.pairing-card:hover {
+    transform: translateY(-4px);
+    box-shadow: var(--shadow);
+    border-color: var(--accent);
+}
+
+.pairing-display {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    margin-bottom: 1rem;
+    width: 100%;
+    justify-content: center;
+}
+
+.syndicate-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.5rem;
+    flex: 1;
+}
+
+.syn-icon {
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    background: currentColor;
+    box-shadow: 0 0 10px currentColor;
+    display: inline-block;
+}
+
+.syn-name {
+    font-size: 0.9rem;
+    font-weight: 600;
+    color: var(--text-primary);
+}
+
+.pairing-info {
+    border-top: 1px solid var(--border);
+    padding-top: 0.75rem;
+    width: 100%;
+    text-align: center;
+}
+
+.pairing-label {
+    font-size: 0.75rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--text-muted);
+}
+
+/* Syndicate Colors */
+.singularity {
+    color: #ffffff;
+}
+
+.phasetide {
+    color: #2196f3;
+}
+
+.silence {
+    color: #9c27b0;
+}
+
+.lifeblood {
+    color: #4caf50;
+}
+
+.sungrace {
+    color: #ff9800;
+}
+
+.splintergleam {
+    color: #f44336;
+}
+
+@media (max-width: 600px) {
+    .pairings-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .syndicates-container {
+        padding: 1rem;
+    }
+}

Chrono/Shared/Services/CardPreviewService.cs

@@ -5,6 +5,7 @@ namespace Shared.Services;
 public class CardPreviewService
 {
     public CardData? HoveredCard { get; private set; }
+    public DocData? SelectedDoc { get; private set; }
     public double X { get; private set; }
     public double Y { get; private set; }
     public bool IsVisible { get; private set; }
@@ -26,6 +27,12 @@ public class CardPreviewService
         NotifyStateChanged();
     }
 
+    public void SelectDoc(DocData? doc)
+    {
+        SelectedDoc = doc;
+        NotifyStateChanged();
+    }
+
     private void NotifyStateChanged()
     {
         OnChange?.Invoke();

Chrono/Shared/Services/CardRenderingService.cs

@@ -7,8 +7,9 @@ namespace Shared.Services;
 public class CardRenderingService
 {
     private readonly Dictionary<string, CardData> _cardLookup;
-    private readonly List<string> _cardNames;
-    private readonly Regex _nameRegex;
+    private readonly Dictionary<string, DocData> _docLookup;
+    private readonly List<string> _allTerms;
+    private readonly Regex _termRegex;
 
     public CardRenderingService()
     {
@@ -20,16 +21,25 @@ public class CardRenderingService
             .GroupBy(c => c.Name, StringComparer.OrdinalIgnoreCase)
             .ToDictionary(g => g.Key, g => g.First(), StringComparer.OrdinalIgnoreCase);
 
-        _cardNames = allCards
-            .Select(c => c.Name)
+        var allDocs = DocDatabase.Docs
+            .Where(d => !string.IsNullOrWhiteSpace(d.Title))
+            .ToList();
+
+        _docLookup = allDocs
+            .GroupBy(d => d.Title, StringComparer.OrdinalIgnoreCase)
+            .ToDictionary(g => g.Key, g => g.First(), StringComparer.OrdinalIgnoreCase);
+
+        _allTerms = _cardLookup.Keys
+            .Concat(_docLookup.Keys)
+            .Distinct(StringComparer.OrdinalIgnoreCase)
             .OrderByDescending(n => n.Length)
             .ToList();
 
-        var pattern = string.Join("|", _cardNames.Select(n => $@"\b{Regex.Escape(n)}\b"));
-        _nameRegex = new Regex(pattern, RegexOptions.IgnoreCase | RegexOptions.Compiled);
+        var pattern = string.Join("|", _allTerms.Select(n => $@"\b{Regex.Escape(n)}\b"));
+        _termRegex = new Regex(pattern, RegexOptions.IgnoreCase | RegexOptions.Compiled);
     }
 
-    public RenderFragment RenderDescription(string description, Action<CardData?> onCardClick)
+    public RenderFragment RenderDescription(string description, Action<CardData?> onCardClick, Action<DocData?>? onDocClick = null, CardPreviewService? previewService = null)
     {
         return builder =>
         {
@@ -40,7 +50,7 @@ public class CardRenderingService
             {
                 builder.OpenElement(sequence++, "p");
 
-                var matches = _nameRegex.Matches(paragraph);
+                var matches = _termRegex.Matches(paragraph);
                 var lastIndex = 0;
 
                 foreach (Match match in matches)
@@ -48,14 +58,33 @@ public class CardRenderingService
                     if (match.Index > lastIndex)
                         builder.AddContent(sequence++, paragraph.Substring(lastIndex, match.Index - lastIndex));
 
-                    var cardName = match.Value;
-                    var card = LookupCard(cardName);
+                    var term = match.Value;
+                    var card = LookupCard(term);
+                    var doc = LookupDoc(term);
 
                     builder.OpenElement(sequence++, "button");
                     builder.AddAttribute(sequence++, "class", "inline-card-btn");
-                    builder.AddAttribute(sequence++, "onclick",
-                        EventCallback.Factory.Create(this, () => onCardClick(card)));
-                    builder.AddContent(sequence++, cardName);
+
+                    if (card != null)
+                    {
+                        builder.AddAttribute(sequence++, "onclick",
+                            EventCallback.Factory.Create(this, () => onCardClick(card)));
+                        
+                        if (previewService != null)
+                        {
+                            builder.AddAttribute(sequence++, "onmouseenter", 
+                                EventCallback.Factory.Create<Microsoft.AspNetCore.Components.Web.MouseEventArgs>(this, e => previewService.Show(card, e.ClientX, e.ClientY)));
+                            builder.AddAttribute(sequence++, "onmouseleave", 
+                                EventCallback.Factory.Create(this, () => previewService.Hide()));
+                        }
+                    }
+                    else if (doc != null && onDocClick != null)
+                    {
+                        builder.AddAttribute(sequence++, "onclick",
+                            EventCallback.Factory.Create(this, () => onDocClick(doc)));
+                    }
+
+                    builder.AddContent(sequence++, term);
                     builder.CloseElement();
 
                     lastIndex = match.Index + match.Length;
@@ -68,8 +97,13 @@ public class CardRenderingService
         };
     }
 
-    private CardData? LookupCard(string cardName)
+    private CardData? LookupCard(string name)
     {
-        return _cardLookup.GetValueOrDefault(cardName);
+        return _cardLookup.GetValueOrDefault(name);
+    }
+
+    private DocData? LookupDoc(string name)
+    {
+        return _docLookup.GetValueOrDefault(name);
     }
 }