Vibe deck improvements

Chrono/Server/Program.cs

@@ -7,6 +7,7 @@ builder.Services.AddControllers();
 builder.Services.AddEndpointsApiExplorer();
 builder.Services.AddRazorComponents().AddInteractiveServerComponents();
 builder.Services.AddTelerikBlazor();
+builder.Services.AddSingleton<Shared.Services.CardRenderingService>();
 
 var connectionString = builder.Configuration.GetConnectionString("DefaultConnection");
 builder.Services.AddDbContext<AppDbContext>(options =>

Chrono/Shared/Components/CardDetailModal.razor

@@ -0,0 +1,150 @@
+@namespace Shared.Components
+@using Chrono.Model
+
+@if (Card != null)
+{
+    <div class="detail-overlay" @onclick="Close"></div>
+    <div class="card-detail @(!HasImage ? "card-detail-noimg" : "")">
+        <button class="detail-close" @onclick="Close"><i class="bi bi-x-lg"></i></button>
+        <div class="detail-layout @(!HasImage ? "layout-noimg" : "")">
+            @if (HasImage)
+            {
+                <div class="detail-image">
+                    <img src="@Card.ImagePath" alt="@Card.Name"
+                         onerror="this.style.display='none';this.parentElement.style.display='none'" />
+                </div>
+            }
+            <div class="detail-info">
+                <div class="detail-header">
+                    <h2>@Card.Name</h2>
+                    <div class="detail-meta">
+                        <span class="meta-badge category @Card.Category?.ToLowerInvariant()">@Card.Category</span>
+                        @if (Card.Cost.HasValue)
+                        {
+                            <span class="meta-badge cost"><i class="bi bi-lightning-fill"></i> @Card.Cost</span>
+                        }
+                        @if (Card.Attack.HasValue)
+                        {
+                            <span class="meta-badge attack"><i class="bi bi-crosshair"></i> @Card.Attack</span>
+                        }
+                        @if (Card.Health.HasValue)
+                        {
+                            <span class="meta-badge health"><i class="bi bi-heart-fill"></i> @Card.Health</span>
+                        }
+                        @if (Card.Speed != null)
+                        {
+                            <span class="meta-badge speed"><i class="bi bi-wind"></i> @Card.Speed</span>
+                        }
+                    </div>
+                </div>
+
+                @if (Card.Faction != null)
+                {
+                    <div class="detail-field">
+                        <span class="field-label"><i class="bi bi-flag-fill"></i> Faction</span>
+                        <span class="field-value">@Card.Faction</span>
+                    </div>
+                }
+
+                @if (Card.Description != null)
+                {
+                    <div class="detail-field description">
+                        <span class="field-label"><i class="bi bi-chat-quote-fill"></i></span>
+                        <span class="field-value">@RenderCardDescription(Card.Description)</span>
+                    </div>
+                }
+
+                @if (Card.Set != null)
+                {
+                    <div class="detail-field">
+                        <span class="field-label"><i class="bi bi-collection"></i> Set</span>
+                        <span class="field-value">@Card.Set</span>
+                    </div>
+                }
+
+                @if (Card.Archetypes is { Count: > 0 })
+                {
+                    <div class="detail-field">
+                        <span class="field-label"><i class="bi bi-layers-fill"></i> Archetypes</span>
+                        <span class="field-value">@string.Join(", ", Card.Archetypes)</span>
+                    </div>
+                }
+
+                @if (Card.ImmortalizeWhen != null)
+                {
+                    <div class="detail-field">
+                        <span class="field-label"><i class="bi bi-star-fill"></i> Immortalize When</span>
+                        <span class="field-value">@Card.ImmortalizeWhen</span>
+                    </div>
+                }
+
+                @if (Card.HasImmortalize)
+                {
+                    <div class="detail-field">
+                        <span class="field-label"><i class="bi bi-arrow-right-circle-fill"></i> Immortalizes To</span>
+                        <span class="field-value">
+                            @foreach (var name in Card.ImmortalizeTo!)
+                            {
+                                var targetName = name;
+                                var target = LookupCard(targetName);
+                                if (target != null)
+                                {
+                                    <button class="inline-card-btn" @onclick="() => SelectCard(target)">@targetName</button>
+                                }
+                                else
+                                {
+                                    @targetName
+                                }
+                            }
+                        </span>
+                    </div>
+                }
+
+                @if (Card.ImmortalizeFrom != null)
+                {
+                    <div class="detail-field">
+                        <span class="field-label"><i class="bi bi-arrow-left-circle-fill"></i> Immortalizes From</span>
+                        <span class="field-value">
+                            @{
+                                var fromCard = LookupCard(Card.ImmortalizeFrom);
+                                if (fromCard != null)
+                                {
+                                    <button class="inline-card-btn" @onclick="() => SelectCard(fromCard)">@Card.ImmortalizeFrom</button>
+                                }
+                                else
+                                {
+                                    @Card.ImmortalizeFrom
+                                }
+                            }
+                        </span>
+                    </div>
+                }
+            </div>
+        </div>
+    </div>
+}
+
+@code {
+    [Parameter] public CardData? Card { get; set; }
+    [Parameter] public EventCallback OnClose { get; set; }
+    [Parameter] public EventCallback<CardData> OnSelectCard { get; set; }
+    [Parameter] public RenderFragment<string>? DescriptionRenderer { get; set; }
+
+    private bool HasImage => Card?.ImageFile is { Length: > 0 } && Card.ImageFile != "placeholder.png";
+
+    private async Task Close() => await OnClose.InvokeAsync();
+
+    private async Task SelectCard(CardData card) => await OnSelectCard.InvokeAsync(card);
+
+    private RenderFragment RenderCardDescription(string description)
+    {
+        if (DescriptionRenderer != null) return DescriptionRenderer(description);
+        return builder => builder.AddContent(0, description);
+    }
+
+    private CardData? LookupCard(string cardName)
+    {
+        return CardDatabase.Cards.FirstOrDefault(c =>
+            string.Equals(c.Name, cardName, StringComparison.OrdinalIgnoreCase));
+    }
+}

Chrono/Shared/Components/CardDetailModal.razor.css

@@ -0,0 +1,255 @@
+/* ── Card Detail Overlay (inline modal) ── */
+
+.detail-overlay {
+    position: fixed;
+    inset: 0;
+    z-index: 1040;
+    background: rgba(0, 0, 0, 0.7);
+    backdrop-filter: blur(4px);
+    animation: fade-in 0.2s ease-out;
+}
+
+@keyframes fade-in {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+.card-detail {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 1050;
+    background: var(--bg-surface);
+    border: 1px solid var(--border);
+    border-radius: 16px;
+    padding: 0;
+    max-width: 720px;
+    width: 92vw;
+    max-height: 88vh;
+    overflow-y: auto;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
+    color: var(--text-primary);
+    animation: detail-enter 0.25s ease-out;
+}
+
+@keyframes detail-enter {
+    from {
+        opacity: 0;
+        transform: translate(-50%, -50%) scale(0.92);
+    }
+    to {
+        opacity: 1;
+        transform: translate(-50%, -50%) scale(1);
+    }
+}
+
+.detail-close {
+    position: absolute;
+    top: 0.75rem;
+    right: 0.75rem;
+    z-index: 1;
+    background: rgba(0, 0, 0, 0.5);
+    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;
+    font-size: 0.8rem;
+    transition: all var(--transition);
+}
+
+.detail-close:hover {
+    background: rgba(255, 255, 255, 0.15);
+}
+
+.detail-layout {
+    display: flex;
+    gap: 1.5rem;
+    padding: 1.5rem;
+}
+
+.detail-image {
+    flex: 0 0 260px;
+}
+
+.detail-image img {
+    width: 100%;
+    border-radius: var(--radius);
+    box-shadow: var(--shadow);
+}
+
+.card-detail-noimg {
+    max-width: 460px;
+}
+
+.layout-noimg {
+    justify-content: center;
+}
+
+.detail-info {
+    flex: 1;
+    min-width: 0;
+}
+
+.detail-header {
+    margin-bottom: 1rem;
+}
+
+.detail-header h2 {
+    margin: 0 0 0.75rem;
+    font-size: 1.4rem;
+    line-height: 1.3;
+}
+
+.detail-meta {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.4rem;
+}
+
+.meta-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.3rem;
+    font-size: 0.75rem;
+    font-weight: 600;
+    padding: 0.25rem 0.6rem;
+    border-radius: 100px;
+    background: var(--bg-hover);
+    color: var(--text-secondary);
+    border: 1px solid var(--border);
+}
+
+.meta-badge.category.agent,
+.meta-badge.category.immortalized {
+    background: rgba(79, 195, 247, 0.15);
+    color: #4fc3f7;
+    border-color: rgba(79, 195, 247, 0.3);
+}
+
+.meta-badge.category.spell {
+    background: rgba(206, 147, 216, 0.15);
+    color: #ce93d8;
+    border-color: rgba(206, 147, 216, 0.3);
+}
+
+.meta-badge.cost {
+    background: rgba(255, 215, 0, 0.12);
+    color: var(--gold);
+    border-color: rgba(255, 215, 0, 0.3);
+}
+
+.meta-badge.attack {
+    background: rgba(239, 83, 80, 0.15);
+    color: #ef5350;
+    border-color: rgba(239, 83, 80, 0.3);
+}
+
+.meta-badge.health {
+    background: rgba(102, 187, 106, 0.15);
+    color: #66bb6a;
+    border-color: rgba(102, 187, 106, 0.3);
+}
+
+.meta-badge.speed {
+    background: rgba(79, 195, 247, 0.12);
+    color: #4fc3f7;
+    border-color: rgba(79, 195, 247, 0.3);
+}
+
+.detail-field {
+    display: flex;
+    gap: 0.5rem;
+    margin-bottom: 0.6rem;
+    font-size: 0.88rem;
+    line-height: 1.45;
+}
+
+.detail-field.description {
+    background: var(--bg-elevated);
+    padding: 0.6rem 0.75rem;
+    border-radius: var(--radius-sm);
+    border-left: 3px solid var(--accent);
+    margin-top: 0.25rem;
+}
+
+.field-label {
+    flex-shrink: 0;
+    color: var(--text-muted);
+    font-size: 0.8rem;
+    font-weight: 500;
+    min-width: 7.5rem;
+    display: flex;
+    align-items: flex-start;
+    gap: 0.3rem;
+}
+
+.detail-field.description .field-label {
+    min-width: auto;
+    color: var(--accent);
+}
+
+.field-value {
+    color: var(--text-secondary);
+}
+
+.detail-field.description .field-value {
+    color: var(--text-primary);
+    font-style: italic;
+}
+
+.card-detail::-webkit-scrollbar {
+    width: 4px;
+}
+
+.card-detail::-webkit-scrollbar-thumb {
+    background: var(--border);
+    border-radius: 2px;
+}
+
+.inline-card-btn {
+    background: none;
+    border: none;
+    padding: 0;
+    font-family: inherit;
+    font-size: inherit;
+    font-weight: 600;
+    color: var(--accent);
+    cursor: pointer;
+    text-decoration: underline;
+    text-underline-offset: 2px;
+    text-decoration-color: rgba(108, 99, 255, 0.3);
+    transition: color var(--transition), text-decoration-color var(--transition);
+}
+
+.inline-card-btn:hover {
+    color: #7b73ff;
+    text-decoration-color: #7b73ff;
+}
+
+@media (max-width: 768px) {
+    .detail-layout {
+        flex-direction: column;
+        padding: 1rem;
+    }
+
+    .detail-image {
+        flex: 0 0 auto;
+        max-width: 180px;
+        margin: 0 auto;
+    }
+
+    .card-detail,
+    .card-detail-noimg {
+        max-height: 90vh;
+    }
+
+    .card-detail-noimg {
+        max-width: 92vw;
+    }
+}

Chrono/Shared/Components/CardGrid.razor

@@ -0,0 +1,46 @@
+@namespace Shared.Components
+@using Chrono.Model
+
+<div class="deck-card-row">
+    @foreach (var group in Cards.GroupBy(x => x))
+    {
+        var cardName = group.Key;
+        var count = group.Count();
+        var card = LookupCard(cardName);
+        <button class="mini-card-btn @(count > 1 ? "is-stacked" : "")"
+                @onclick="() => SelectCard(card)">
+            <div class="mini-card-stack">
+                @for (var i = 0; i < (count > 1 ? Math.Min(count, 3) : 1); i++)
+                {
+                    <div class="mini-card" style="--stack-index: @i">
+                        <div class="mini-card-img">
+                            <img src="@(card?.ImagePath ?? "cards/placeholder.png")" alt="@cardName"
+                                 loading="lazy"/>
+                        </div>
+                    </div>
+                }
+                @if (count > 1)
+                {
+                    <div class="mini-card-count">@count</div>
+                }
+            </div>
+        </button>
+    }
+</div>
+
+@code {
+    [Parameter, EditorRequired] public List<string> Cards { get; set; } = [];
+    [Parameter] public EventCallback<CardData?> OnSelectCard { get; set; }
+
+    private async Task SelectCard(CardData? card) => await OnSelectCard.InvokeAsync(card);
+
+    private static readonly Dictionary<string, CardData> CardLookup = CardDatabase.Cards
+        .Where(c => !string.IsNullOrWhiteSpace(c.Name))
+        .GroupBy(c => c.Name, StringComparer.OrdinalIgnoreCase)
+        .ToDictionary(g => g.Key, g => g.First(), StringComparer.OrdinalIgnoreCase);
+
+    private CardData? LookupCard(string cardName)
+    {
+        return CardLookup.GetValueOrDefault(cardName);
+    }
+}

Chrono/Shared/Components/CardGrid.razor.css

@@ -0,0 +1,92 @@
+.deck-card-row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.75rem;
+}
+
+.mini-card-btn {
+    background: none;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+    font-family: inherit;
+    display: block;
+}
+
+.mini-card {
+    width: 100px;
+    background: var(--bg-elevated);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+    overflow: hidden;
+    transition: border-color var(--transition), transform var(--transition);
+    position: relative;
+    aspect-ratio: 2.5 / 3.5;
+    display: flex;
+    flex-direction: column;
+}
+
+.mini-card:hover {
+    border-color: var(--accent);
+    z-index: 10;
+}
+
+.mini-card-img {
+    flex: 1;
+    overflow: hidden;
+    background: var(--bg-primary);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.mini-card-img img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    background: #000;
+}
+
+.mini-card-name {
+    font-size: 0.7rem;
+    font-weight: 500;
+    padding: 0.25rem 0.3rem;
+    text-align: center;
+    color: var(--text-secondary);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    background: var(--bg-elevated);
+    border-top: 1px solid var(--border);
+}
+
+.mini-card-stack {
+    position: relative;
+    width: 110px;
+    height: 140px;
+}
+
+.mini-card-stack .mini-card {
+    position: absolute;
+    top: calc(var(--stack-index) * 4px);
+    left: calc(var(--stack-index) * 4px);
+    z-index: calc(10 - var(--stack-index));
+}
+
+.mini-card-count {
+    position: absolute;
+    top: 0.25rem;
+    right: 0.25rem;
+    background: var(--accent);
+    color: white;
+    font-size: 0.65rem;
+    font-weight: 800;
+    padding: 0.1rem 0.3rem;
+    border-radius: 4px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+    z-index: 20;
+}
+
+.mini-card-btn.is-stacked:hover .mini-card {
+    transform: translate(calc(var(--stack-index) * 2px), calc(var(--stack-index) * -2px));
+}

Chrono/Shared/Components/ManaCurve.razor

@@ -0,0 +1,20 @@
+@namespace Shared.Components
+
+<div class="mana-curve">
+    @foreach (var entry in Distribution)
+    {
+        var height = MaxCount > 0 ? (entry.Count * 100 / MaxCount) : 0;
+        <div class="mana-bar-container">
+            <div class="mana-bar-label">@entry.Count</div>
+            <div class="mana-bar" style="height: @($"{Math.Max(height, 5)}%")"></div>
+            <div class="mana-cost">@(entry.Cost >= MaxCostLabel ? $"{MaxCostLabel}+" : entry.Cost.ToString())</div>
+        </div>
+    }
+</div>
+
+@code {
+    [Parameter, EditorRequired] public List<(int Cost, int Count)> Distribution { get; set; } = [];
+    [Parameter] public int MaxCostLabel { get; set; } = 10;
+
+    private int MaxCount => Distribution.Count > 0 ? Distribution.Max(x => x.Count) : 0;
+}

Chrono/Shared/Components/ManaCurve.razor.css

@@ -0,0 +1,43 @@
+.mana-curve {
+    display: flex;
+    align-items: flex-end;
+    gap: 0.5rem;
+    height: 80px;
+    margin-top: 1rem;
+    padding: 0 0.5rem;
+}
+
+.mana-bar-container {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    height: 100%;
+    justify-content: flex-end;
+}
+
+.mana-bar-label {
+    font-size: 0.7rem;
+    color: var(--text-muted);
+    margin-bottom: 0.2rem;
+}
+
+.mana-bar {
+    width: 100%;
+    background: var(--accent);
+    border-radius: 4px 4px 0 0;
+    min-height: 4px;
+    transition: height 0.3s ease;
+}
+
+.mana-cost {
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: var(--text-secondary);
+    margin-top: 0.4rem;
+    background: var(--bg-elevated);
+    width: 100%;
+    text-align: center;
+    border-radius: 4px;
+    padding: 0.1rem 0;
+}

Chrono/Shared/Pages/DeckDetail.razor

@@ -1,4 +1,5 @@
 @namespace Shared.Pages
+@inject CardRenderingService CardRenderer
 @page "/decks/{Name}"
 
 <PageTitle>@deck?.Name</PageTitle>
@@ -39,41 +40,14 @@
                     }
                 </div>
 
-                @{
+                <ManaCurve Distribution="GetManaDistribution()" MaxCostLabel="10" />
-                    var distribution = GetManaDistribution();
-                    var maxCount = distribution.Max(x => x.Count);
-                }
-                <div class="mana-curve">
-                    @foreach (var entry in distribution)
-                    {
-                        var height = maxCount > 0 ? (entry.Count * 100 / maxCount) : 0;
-                        <div class="mana-bar-container">
-                            <div class="mana-bar-label">@entry.Count</div>
-                            <div class="mana-bar" style="height: @($"{Math.Max(height, 5)}%")"></div>
-                            <div class="mana-cost">@(entry.Cost >= 10 ? "10+" : entry.Cost.ToString())</div>
-                        </div>
-                    }
-                </div>
             </header>
 
             @if (deck.Keycards.Count > 0)
             {
                 <section class="deck-section">
                     <h2><i class="bi bi-star-fill" style="color: var(--gold);"></i> Keycards</h2>
-                    <div class="deck-card-row">
+                    <CardGrid Cards="deck.Keycards" OnSelectCard="SelectCard" />
-                        @foreach (var cardName in deck.Keycards)
-                        {
-                            var card = LookupCard(cardName);
-                            <button class="mini-card-btn" @onclick="() => SelectCard(card)">
-                                <div class="mini-card">
-                                    <div class="mini-card-img">
-                                        <img src="@(card?.ImagePath ?? "cards/placeholder.png")" alt="@cardName"
-                                             loading="lazy"/>
-                                    </div>
-                                </div>
-                            </button>
-                        }
-                    </div>
                 </section>
             }
 
@@ -81,47 +55,13 @@
             {
                 <section class="deck-section">
                     <h2><i class="bi bi-shuffle"></i> Divers</h2>
-                    <div class="deck-card-row">
+                    <CardGrid Cards="deck.Divers" OnSelectCard="SelectCard" />
-                        @foreach (var cardName in deck.Divers)
-                        {
-                            var card = LookupCard(cardName);
-                            <button class="mini-card-btn" @onclick="() => SelectCard(card)">
-                                <div class="mini-card">
-                                    <div class="mini-card-img">
-                                        <img src="@(card?.ImagePath ?? "cards/placeholder.png")" alt="@cardName"
-                                             loading="lazy"/>
-                                    </div>
-                                </div>
-                            </button>
-                        }
-                    </div>
                 </section>
             }
 
             <section class="deck-section">
                 <h2><i class="bi bi-collection-fill"></i> Cards</h2>
-                <div class="deck-card-row">
+                <CardGrid Cards="deck.Cards" OnSelectCard="SelectCard" />
-                    @foreach (var group in deck.Cards.GroupBy(x => x))
-                    {
-                        var cardName = group.Key;
-                        var count = group.Count();
-                        var card = LookupCard(cardName);
-                        <button class="mini-card-btn @(count > 1 ? "is-stacked" : "")"
-                                @onclick="() => SelectCard(card)">
-                            <div class="mini-card-stack">
-                                @for (var i = 0; i < (count > 1 ? Math.Min(count, 3) : 1); i++)
-                                {
-                                    <div class="mini-card" style="--stack-index: @i">
-                                        <div class="mini-card-img">
-                                            <img src="@(card?.ImagePath ?? "cards/placeholder.png")" alt="@cardName"
-                                                 loading="lazy"/>
-                                        </div>
-                                    </div>
-                                }
-                            </div>
-                        </button>
-                    }
-                </div>
             </section>
 
             @if (deck.Description != null)
@@ -129,7 +69,7 @@
                 <section class="deck-section description">
                     <h2><i class="bi bi-chat-quote-fill"></i> Description</h2>
                     <div class="deck-description">
-                        @RenderDescription(deck.Description)
+                        @CardRenderer.RenderDescription(deck.Description, SelectCard)
                     </div>
                 </section>
             }
@@ -137,128 +77,10 @@
     }
 </div>
 
-@if (selectedCard != null)
+<CardDetailModal Card="selectedCard" 
-{
+                 OnClose="CloseDetail" 
-    <div class="detail-overlay" @onclick="CloseDetail"></div>
+                 OnSelectCard="SelectCard" 
-    <div class="card-detail @(!HasImage ? "card-detail-noimg" : "")">
+                 DescriptionRenderer="@(desc => CardRenderer.RenderDescription(desc, SelectCard))" />
-        <button class="detail-close" @onclick="CloseDetail"><i class="bi bi-x-lg"></i></button>
-        <div class="detail-layout @(!HasImage ? "layout-noimg" : "")">
-            @if (HasImage)
-            {
-                <div class="detail-image">
-                    <img src="@selectedCard.ImagePath" alt="@selectedCard.Name"
-                         onerror="this.style.display='none';this.parentElement.style.display='none'" />
-                </div>
-            }
-            <div class="detail-info">
-                <div class="detail-header">
-                    <h2>@selectedCard.Name</h2>
-                    <div class="detail-meta">
-                        <span class="meta-badge category @selectedCard.Category?.ToLowerInvariant()">@selectedCard.Category</span>
-                        @if (selectedCard.Cost.HasValue)
-                        {
-                            <span class="meta-badge cost"><i class="bi bi-lightning-fill"></i> @selectedCard.Cost</span>
-                        }
-                        @if (selectedCard.Attack.HasValue)
-                        {
-                            <span class="meta-badge attack"><i class="bi bi-crosshair"></i> @selectedCard.Attack</span>
-                        }
-                        @if (selectedCard.Health.HasValue)
-                        {
-                            <span class="meta-badge health"><i class="bi bi-heart-fill"></i> @selectedCard.Health</span>
-                        }
-                        @if (selectedCard.Speed != null)
-                        {
-                            <span class="meta-badge speed"><i class="bi bi-wind"></i> @selectedCard.Speed</span>
-                        }
-                    </div>
-                </div>
-
-                @if (selectedCard.Faction != null)
-                {
-                    <div class="detail-field">
-                        <span class="field-label"><i class="bi bi-flag-fill"></i> Faction</span>
-                        <span class="field-value">@selectedCard.Faction</span>
-                    </div>
-                }
-
-                @if (selectedCard.Description != null)
-                {
-                    <div class="detail-field description">
-                        <span class="field-label"><i class="bi bi-chat-quote-fill"></i></span>
-                        <span class="field-value">@RenderCardDescription(selectedCard.Description)</span>
-                    </div>
-                }
-
-                @if (selectedCard.Set != null)
-                {
-                    <div class="detail-field">
-                        <span class="field-label"><i class="bi bi-collection"></i> Set</span>
-                        <span class="field-value">@selectedCard.Set</span>
-                    </div>
-                }
-
-                @if (selectedCard.Archetypes is { Count: > 0 })
-                {
-                    <div class="detail-field">
-                        <span class="field-label"><i class="bi bi-layers-fill"></i> Archetypes</span>
-                        <span class="field-value">@string.Join(", ", selectedCard.Archetypes)</span>
-                    </div>
-                }
-
-                @if (selectedCard.ImmortalizeWhen != null)
-                {
-                    <div class="detail-field">
-                        <span class="field-label"><i class="bi bi-star-fill"></i> Immortalize When</span>
-                        <span class="field-value">@selectedCard.ImmortalizeWhen</span>
-                    </div>
-                }
-
-                @if (selectedCard.HasImmortalize)
-                {
-                    <div class="detail-field">
-                        <span class="field-label"><i class="bi bi-arrow-right-circle-fill"></i> Immortalizes To</span>
-                        <span class="field-value">
-                            @foreach (var name in selectedCard.ImmortalizeTo!)
-                            {
-                                var targetName = name;
-                                var target = LookupCard(targetName);
-                                if (target != null)
-                                {
-                                    <button class="inline-card-btn" @onclick="() => SelectCard(target)">@targetName</button>
-                                }
-                                else
-                                {
-                                    @targetName
-                                }
-                            }
-                        </span>
-                    </div>
-                }
-
-                @if (selectedCard.ImmortalizeFrom != null)
-                {
-                    <div class="detail-field">
-                        <span class="field-label"><i class="bi bi-arrow-left-circle-fill"></i> Immortalizes From</span>
-                        <span class="field-value">
-                            @{
-                                var fromCard = LookupCard(selectedCard.ImmortalizeFrom);
-                                if (fromCard != null)
-                                {
-                                    <button class="inline-card-btn" @onclick="() => SelectCard(fromCard)">@selectedCard.ImmortalizeFrom</button>
-                                }
-                                else
-                                {
-                                    @selectedCard.ImmortalizeFrom
-                                }
-                            }
-                        </span>
-                    </div>
-                }
-            </div>
-        </div>
-    </div>
-}
 
 @code {
     [Parameter] public string Name { get; set; } = "";
@@ -274,10 +96,14 @@
         deck = DeckDatabase.Decks.FirstOrDefault(d => d.IsVisible && d.Name == decoded);
     }
 
+    private static readonly Dictionary<string, CardData> CardLookup = CardDatabase.Cards
+        .Where(c => !string.IsNullOrWhiteSpace(c.Name))
+        .GroupBy(c => c.Name, StringComparer.OrdinalIgnoreCase)
+        .ToDictionary(g => g.Key, g => g.First(), StringComparer.OrdinalIgnoreCase);
+
     private CardData? LookupCard(string cardName)
     {
-        return CardDatabase.Cards.FirstOrDefault(c =>
+        return CardLookup.GetValueOrDefault(cardName);
-            string.Equals(c.Name, cardName, StringComparison.OrdinalIgnoreCase));
     }
 
     private void SelectCard(CardData? card)
@@ -309,121 +135,4 @@
 
         return counts.OrderBy(x => x.Key).Select(x => (x.Key, x.Value)).ToList();
     }
-
-    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();
-            }
-        };
-    }
-
-    private RenderFragment RenderCardDescription(string description) => builder =>
-    {
-        var cardNames = CardDatabase.Cards
-            .Select(c => c.Name)
-            .Where(n => !string.IsNullOrWhiteSpace(n))
-            .OrderByDescending(n => n.Length)
-            .ToList();
-
-        int seq = 0;
-        var remaining = description;
-
-        while (!string.IsNullOrEmpty(remaining))
-        {
-            int bestIdx = -1;
-            string? bestName = null;
-
-            foreach (var name in cardNames)
-            {
-                int idx = remaining.IndexOf(name, StringComparison.OrdinalIgnoreCase);
-                if (idx != -1 && (bestIdx == -1 || idx < bestIdx))
-                {
-                    bestIdx = idx;
-                    bestName = name;
-                }
-            }
-
-            if (bestIdx != -1 && bestName != null)
-            {
-                if (bestIdx > 0)
-                    builder.AddContent(seq++, remaining[..bestIdx]);
-
-                var card = LookupCard(bestName);
-                if (card != null)
-                {
-                    builder.OpenElement(seq++, "button");
-                    builder.AddAttribute(seq++, "class", "inline-card-btn");
-                    builder.AddAttribute(seq++, "onclick",
-                        EventCallback.Factory.Create(this, () => SelectCard(card)));
-                    builder.AddContent(seq++, bestName);
-                    builder.CloseElement();
-                }
-                else
-                {
-                    builder.AddContent(seq++, bestName);
-                }
-
-                remaining = remaining[(bestIdx + bestName.Length)..];
-            }
-            else
-            {
-                builder.AddContent(seq++, remaining);
-                remaining = "";
-            }
-        }
-    };
 }

Chrono/Shared/Pages/DeckDetail.razor.css

@@ -62,50 +62,6 @@
     margin: 0 0 1.5rem;
 }
 
-.mana-curve {
-    display: flex;
-    align-items: flex-end;
-    gap: 0.5rem;
-    height: 80px;
-    margin-top: 1rem;
-    padding: 0 0.5rem;
-}
-
-.mana-bar-container {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    height: 100%;
-    justify-content: flex-end;
-}
-
-.mana-bar-label {
-    font-size: 0.7rem;
-    color: var(--text-muted);
-    margin-bottom: 0.2rem;
-}
-
-.mana-bar {
-    width: 100%;
-    background: var(--accent);
-    border-radius: 4px 4px 0 0;
-    min-height: 4px;
-    transition: height 0.3s ease;
-}
-
-.mana-cost {
-    font-size: 0.75rem;
-    font-weight: 600;
-    color: var(--text-secondary);
-    margin-top: 0.4rem;
-    background: var(--bg-elevated);
-    width: 100%;
-    text-align: center;
-    border-radius: 4px;
-    padding: 0.1rem 0;
-}
-
 .deck-section {
     margin-bottom: 2rem;
 }
@@ -124,99 +80,6 @@
     color: var(--text-primary);
 }
 
-.deck-card-row {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0.75rem;
-}
-
-.mini-card-btn {
-    background: none;
-    border: none;
-    padding: 0;
-    cursor: pointer;
-    font-family: inherit;
-    display: block;
-}
-
-.mini-card {
-    width: 100px;
-    background: var(--bg-elevated);
-    border: 1px solid var(--border);
-    border-radius: var(--radius-sm);
-    overflow: hidden;
-    transition: border-color var(--transition), transform var(--transition);
-    position: relative;
-    aspect-ratio: 2.5 / 3.5;
-    display: flex;
-    flex-direction: column;
-}
-
-.mini-card:hover {
-    border-color: var(--accent);
-    z-index: 10;
-}
-
-.mini-card-img {
-    flex: 1;
-    overflow: hidden;
-    background: var(--bg-primary);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.mini-card-img img {
-    width: 100%;
-    height: 100%;
-    object-fit: contain;
-    background: #000;
-}
-
-.mini-card-name {
-    font-size: 0.7rem;
-    font-weight: 500;
-    padding: 0.25rem 0.3rem;
-    text-align: center;
-    color: var(--text-secondary);
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    background: var(--bg-elevated);
-    border-top: 1px solid var(--border);
-}
-
-.mini-card-stack {
-    position: relative;
-    width: 110px;
-    height: 140px;
-}
-
-.mini-card-stack .mini-card {
-    position: absolute;
-    top: calc(var(--stack-index) * 4px);
-    left: calc(var(--stack-index) * 4px);
-    z-index: calc(10 - var(--stack-index));
-}
-
-.mini-card-count {
-    position: absolute;
-    top: 0.25rem;
-    right: 0.25rem;
-    background: var(--accent);
-    color: white;
-    font-size: 0.65rem;
-    font-weight: 800;
-    padding: 0.1rem 0.3rem;
-    border-radius: 4px;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
-    z-index: 20;
-}
-
-.mini-card-btn.is-stacked:hover .mini-card {
-    transform: translate(calc(var(--stack-index) * 2px), calc(var(--stack-index) * -2px));
-}
-
 .deck-description {
     font-size: 0.95rem;
     line-height: 1.7;
@@ -244,220 +107,6 @@
     margin-bottom: 1rem;
 }
 
-/* ── Card Detail Overlay (inline modal) ── */
-
-.detail-overlay {
-    position: fixed;
-    inset: 0;
-    z-index: 1040;
-    background: rgba(0, 0, 0, 0.7);
-    backdrop-filter: blur(4px);
-    animation: fade-in 0.2s ease-out;
-}
-
-@keyframes fade-in {
-    from { opacity: 0; }
-    to { opacity: 1; }
-}
-
-.card-detail {
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    z-index: 1050;
-    background: var(--bg-surface);
-    border: 1px solid var(--border);
-    border-radius: 16px;
-    padding: 0;
-    max-width: 720px;
-    width: 92vw;
-    max-height: 88vh;
-    overflow-y: auto;
-    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
-    color: var(--text-primary);
-    animation: detail-enter 0.25s ease-out;
-}
-
-@keyframes detail-enter {
-    from {
-        opacity: 0;
-        transform: translate(-50%, -50%) scale(0.92);
-    }
-    to {
-        opacity: 1;
-        transform: translate(-50%, -50%) scale(1);
-    }
-}
-
-.detail-close {
-    position: absolute;
-    top: 0.75rem;
-    right: 0.75rem;
-    z-index: 1;
-    background: rgba(0, 0, 0, 0.5);
-    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;
-    font-size: 0.8rem;
-    transition: all var(--transition);
-}
-
-.detail-close:hover {
-    background: rgba(255, 255, 255, 0.15);
-}
-
-.detail-layout {
-    display: flex;
-    gap: 1.5rem;
-    padding: 1.5rem;
-}
-
-.detail-image {
-    flex: 0 0 260px;
-}
-
-.detail-image img {
-    width: 100%;
-    border-radius: var(--radius);
-    box-shadow: var(--shadow);
-}
-
-.card-detail-noimg {
-    max-width: 460px;
-}
-
-.layout-noimg {
-    justify-content: center;
-}
-
-.detail-info {
-    flex: 1;
-    min-width: 0;
-}
-
-.detail-header {
-    margin-bottom: 1rem;
-}
-
-.detail-header h2 {
-    margin: 0 0 0.75rem;
-    font-size: 1.4rem;
-    line-height: 1.3;
-}
-
-.detail-meta {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0.4rem;
-}
-
-.meta-badge {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.3rem;
-    font-size: 0.75rem;
-    font-weight: 600;
-    padding: 0.25rem 0.6rem;
-    border-radius: 100px;
-    background: var(--bg-hover);
-    color: var(--text-secondary);
-    border: 1px solid var(--border);
-}
-
-.meta-badge.category.agent,
-.meta-badge.category.immortalized {
-    background: rgba(79, 195, 247, 0.15);
-    color: #4fc3f7;
-    border-color: rgba(79, 195, 247, 0.3);
-}
-
-.meta-badge.category.spell {
-    background: rgba(206, 147, 216, 0.15);
-    color: #ce93d8;
-    border-color: rgba(206, 147, 216, 0.3);
-}
-
-.meta-badge.cost {
-    background: rgba(255, 215, 0, 0.12);
-    color: var(--gold);
-    border-color: rgba(255, 215, 0, 0.3);
-}
-
-.meta-badge.attack {
-    background: rgba(239, 83, 80, 0.15);
-    color: #ef5350;
-    border-color: rgba(239, 83, 80, 0.3);
-}
-
-.meta-badge.health {
-    background: rgba(102, 187, 106, 0.15);
-    color: #66bb6a;
-    border-color: rgba(102, 187, 106, 0.3);
-}
-
-.meta-badge.speed {
-    background: rgba(79, 195, 247, 0.12);
-    color: #4fc3f7;
-    border-color: rgba(79, 195, 247, 0.3);
-}
-
-.detail-field {
-    display: flex;
-    gap: 0.5rem;
-    margin-bottom: 0.6rem;
-    font-size: 0.88rem;
-    line-height: 1.45;
-}
-
-.detail-field.description {
-    background: var(--bg-elevated);
-    padding: 0.6rem 0.75rem;
-    border-radius: var(--radius-sm);
-    border-left: 3px solid var(--accent);
-    margin-top: 0.25rem;
-}
-
-.field-label {
-    flex-shrink: 0;
-    color: var(--text-muted);
-    font-size: 0.8rem;
-    font-weight: 500;
-    min-width: 7.5rem;
-    display: flex;
-    align-items: flex-start;
-    gap: 0.3rem;
-}
-
-.detail-field.description .field-label {
-    min-width: auto;
-    color: var(--accent);
-}
-
-.field-value {
-    color: var(--text-secondary);
-}
-
-.detail-field.description .field-value {
-    color: var(--text-primary);
-    font-style: italic;
-}
-
-.card-detail::-webkit-scrollbar {
-    width: 4px;
-}
-
-.card-detail::-webkit-scrollbar-thumb {
-    background: var(--border);
-    border-radius: 2px;
-}
-
 .inline-card-btn {
     background: none;
     border: none;
@@ -479,23 +128,7 @@
 }
 
 @media (max-width: 768px) {
-    .detail-layout {
+    .back-link {
-        flex-direction: column;
+        margin-bottom: 1rem;
-        padding: 1rem;
-    }
-
-    .detail-image {
-        flex: 0 0 auto;
-        max-width: 180px;
-        margin: 0 auto;
-    }
-
-    .card-detail,
-    .card-detail-noimg {
-        max-height: 90vh;
-    }
-
-    .card-detail-noimg {
-        max-width: 92vw;
     }
 }

Chrono/Shared/Services/CardRenderingService.cs

@@ -0,0 +1,79 @@
+using Microsoft.AspNetCore.Components;
+using Chrono.Model;
+using System.Text.RegularExpressions;
+
+namespace Shared.Services;
+
+public class CardRenderingService
+{
+    private readonly List<string> _cardNames;
+    private readonly Dictionary<string, CardData> _cardLookup;
+    private readonly Regex _nameRegex;
+
+    public CardRenderingService()
+    {
+        var allCards = CardDatabase.Cards
+            .Where(c => !string.IsNullOrWhiteSpace(c.Name))
+            .ToList();
+
+        _cardLookup = allCards
+            .GroupBy(c => c.Name, StringComparer.OrdinalIgnoreCase)
+            .ToDictionary(g => g.Key, g => g.First(), StringComparer.OrdinalIgnoreCase);
+
+        _cardNames = allCards
+            .Select(c => c.Name)
+            .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);
+    }
+
+    public RenderFragment RenderDescription(string description, Action<CardData?> onCardClick)
+    {
+        return builder =>
+        {
+            int sequence = 0;
+            var paragraphs = description.Split('\n', StringSplitOptions.RemoveEmptyEntries);
+
+            foreach (var paragraph in paragraphs)
+            {
+                builder.OpenElement(sequence++, "p");
+
+                var matches = _nameRegex.Matches(paragraph);
+                int lastIndex = 0;
+
+                foreach (Match match in matches)
+                {
+                    if (match.Index > lastIndex)
+                    {
+                        builder.AddContent(sequence++, paragraph.Substring(lastIndex, match.Index - lastIndex));
+                    }
+
+                    var cardName = match.Value;
+                    var card = LookupCard(cardName);
+
+                    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);
+                    builder.CloseElement();
+
+                    lastIndex = match.Index + match.Length;
+                }
+
+                if (lastIndex < paragraph.Length)
+                {
+                    builder.AddContent(sequence++, paragraph.Substring(lastIndex));
+                }
+
+                builder.CloseElement();
+            }
+        };
+    }
+
+    private CardData? LookupCard(string cardName)
+    {
+        return _cardLookup.GetValueOrDefault(cardName);
+    }
+}

Chrono/Shared/_Imports.razor

@@ -11,3 +11,5 @@
 @using Telerik.Blazor
 @using Telerik.Blazor.Components
 @using Telerik.DataSource
+@using Shared.Components
+@using Shared.Services

Chrono/Web/Components/CardDialog.razor

@@ -227,11 +227,16 @@
 
             foreach (var name in cardNames)
             {
-                int idx = remaining.IndexOf(name, StringComparison.OrdinalIgnoreCase);
+                var pattern = $@"\b{System.Text.RegularExpressions.Regex.Escape(name)}\b";
-                if (idx != -1 && (bestIdx == -1 || idx < bestIdx))
+                var match = System.Text.RegularExpressions.Regex.Match(remaining, pattern, System.Text.RegularExpressions.RegexOptions.IgnoreCase);
+
+                if (match.Success)
                 {
-                    bestIdx = idx;
+                    if (bestIdx == -1 || match.Index < bestIdx)
-                    bestName = name;
+                    {
+                        bestIdx = match.Index;
+                        bestName = match.Value;
+                    }
                 }
             }
 

Chrono/Web/Program.cs

@@ -8,5 +8,6 @@ builder.RootComponents.Add<HeadOutlet>("head::after");
 
 builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
 builder.Services.AddTelerikBlazor();
+builder.Services.AddSingleton<Shared.Services.CardRenderingService>();
 
 await builder.Build().RunAsync();