Reorganzing projects

Chrono/Build/Program.cs

@@ -5,7 +5,7 @@ using Chrono.Model;
 var repoRoot = Path.GetFullPath(Path.Combine(AppContext.BaseDirectory, "..", "..", "..", "..", ".."));
 var docsDir = Path.Combine(repoRoot, "chrono.docs");
 var webWwwRoot = Path.Combine(repoRoot, "Chrono", "Web", "wwwroot");
-var generatedFile = Path.Combine(repoRoot, "Chrono", "Web", "Generated", "Cards.g.cs");
+var generatedFile = Path.Combine(repoRoot, "Chrono", "Shared", "Generated", "Cards.g.cs");
 
 Console.WriteLine($"Repo root: {repoRoot}");
 Console.WriteLine($"Docs dir: {docsDir}");
@@ -163,7 +163,7 @@ foreach (var file in deckFiles)
 Console.WriteLine($"Parsed {decks.Count} deck files");
 
 // Generate Decks.g.cs
-var deckGeneratedFile = Path.Combine(repoRoot, "Chrono", "Web", "Generated", "Decks.g.cs");
+var deckGeneratedFile = Path.Combine(repoRoot, "Chrono", "Shared", "Generated", "Decks.g.cs");
 Directory.CreateDirectory(Path.GetDirectoryName(deckGeneratedFile)!);
 using var deckWriter = new StreamWriter(deckGeneratedFile, false, Encoding.UTF8);
 deckWriter.WriteLine("// <auto-generated/>");

Chrono/Chrono.sln

@@ -12,6 +12,8 @@ Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Tests", "Tests\Tests.csproj
 EndProject
 Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Server", "Server\Server.csproj", "{BFB7B73F-EFDD-4DE8-89F2-E1CBE1B55C27}"
 EndProject
+Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Shared", "Shared\Shared.csproj", "{30D8468D-01E1-4D8A-99AF-EE4A75A5E956}"
+EndProject
 Global
 	GlobalSection(SolutionConfigurationPlatforms) = preSolution
 		Debug|Any CPU = Debug|Any CPU
@@ -94,6 +96,18 @@ Global
 		{BFB7B73F-EFDD-4DE8-89F2-E1CBE1B55C27}.Release|x64.Build.0 = Release|Any CPU
 		{BFB7B73F-EFDD-4DE8-89F2-E1CBE1B55C27}.Release|x86.ActiveCfg = Release|Any CPU
 		{BFB7B73F-EFDD-4DE8-89F2-E1CBE1B55C27}.Release|x86.Build.0 = Release|Any CPU
+		{30D8468D-01E1-4D8A-99AF-EE4A75A5E956}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{30D8468D-01E1-4D8A-99AF-EE4A75A5E956}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{30D8468D-01E1-4D8A-99AF-EE4A75A5E956}.Debug|x64.ActiveCfg = Debug|Any CPU
+		{30D8468D-01E1-4D8A-99AF-EE4A75A5E956}.Debug|x64.Build.0 = Debug|Any CPU
+		{30D8468D-01E1-4D8A-99AF-EE4A75A5E956}.Debug|x86.ActiveCfg = Debug|Any CPU
+		{30D8468D-01E1-4D8A-99AF-EE4A75A5E956}.Debug|x86.Build.0 = Debug|Any CPU
+		{30D8468D-01E1-4D8A-99AF-EE4A75A5E956}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{30D8468D-01E1-4D8A-99AF-EE4A75A5E956}.Release|Any CPU.Build.0 = Release|Any CPU
+		{30D8468D-01E1-4D8A-99AF-EE4A75A5E956}.Release|x64.ActiveCfg = Release|Any CPU
+		{30D8468D-01E1-4D8A-99AF-EE4A75A5E956}.Release|x64.Build.0 = Release|Any CPU
+		{30D8468D-01E1-4D8A-99AF-EE4A75A5E956}.Release|x86.ActiveCfg = Release|Any CPU
+		{30D8468D-01E1-4D8A-99AF-EE4A75A5E956}.Release|x86.Build.0 = Release|Any CPU
 	EndGlobalSection
 	GlobalSection(SolutionProperties) = preSolution
 		HideSolutionNode = FALSE

Chrono/Shared/Layout/MainLayout.razor

@@ -1,4 +1,5 @@
-@inherits LayoutComponentBase
+@namespace Shared.Layout
+@inherits LayoutComponentBase
 <div class="page">
     <div class="sidebar">
         <NavMenu/>

Chrono/Shared/Layout/NavMenu.razor

@@ -1,4 +1,6 @@
-<div class="top-row ps-3 navbar navbar-dark">
+@namespace Shared.Layout
+
+<div class="top-row ps-3 navbar navbar-dark">
     <div class="container-fluid">
         <a class="navbar-brand" href="">
             <i class="bi bi-hourglass-split me-2 text-warning"></i> Chrono CCG

Chrono/Shared/Pages/Agents.razor

@@ -1,3 +1,4 @@
+@namespace Shared.Pages
 @page "/agents"
 
 <PageTitle>Agents</PageTitle>

Chrono/Shared/Pages/DeckDetail.razor

@@ -1,3 +1,4 @@
+@namespace Shared.Pages
 @page "/decks/{Name}"
 
 <PageTitle>@deck?.Name</PageTitle>
@@ -122,7 +123,125 @@
 
 @if (selectedCard != null)
 {
-    <CardDialog Card="selectedCard" OnClose="CloseDetail" OnNavigate="SelectCard" />
+    <div class="detail-overlay" @onclick="CloseDetail"></div>
+    <div class="card-detail @(!HasImage ? "card-detail-noimg" : "")">
+        <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 {
@@ -131,6 +250,8 @@
     private DeckData? deck;
     private CardData? selectedCard;
 
+    private bool HasImage => selectedCard?.ImageFile is { Length: > 0 } && selectedCard.ImageFile != "placeholder.png";
+
     protected override void OnParametersSet()
     {
         var decoded = Uri.UnescapeDataString(Name);
@@ -214,4 +335,59 @@
         };
     }
 
+    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

@@ -0,0 +1,457 @@
+.deck-detail-page {
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 0 1rem 3rem;
+}
+
+.back-link {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4rem;
+    color: var(--text-secondary);
+    text-decoration: none;
+    font-size: 0.85rem;
+    margin-bottom: 1.5rem;
+    transition: color var(--transition);
+}
+
+.back-link:hover {
+    color: var(--accent);
+}
+
+.deck-article {
+    background: var(--bg-surface);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    padding: 2rem;
+}
+
+.deck-header {
+    margin-bottom: 2rem;
+    padding-bottom: 1.5rem;
+    border-bottom: 1px solid var(--border);
+}
+
+.deck-header h1 {
+    margin: 0 0 0.5rem;
+}
+
+.deck-factions {
+    display: flex;
+    gap: 0.4rem;
+    margin-bottom: 0.5rem;
+    flex-wrap: wrap;
+}
+
+.faction-badge {
+    display: inline-block;
+    font-size: 0.75rem;
+    font-weight: 600;
+    padding: 0.2rem 0.7rem;
+    border-radius: 999px;
+    background: var(--bg-elevated);
+    color: var(--accent);
+    border: 1px solid var(--border);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+}
+
+.deck-card-count {
+    font-size: 0.85rem;
+    color: var(--text-muted);
+    margin: 0;
+}
+
+.deck-section {
+    margin-bottom: 2rem;
+}
+
+.deck-section:last-child {
+    margin-bottom: 0;
+}
+
+.deck-section h2 {
+    font-size: 1.05rem;
+    font-weight: 600;
+    margin: 0 0 1rem;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    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;
+    color: var(--text-secondary);
+}
+
+
+.deck-description p {
+    margin: 0 0 1rem;
+}
+
+.deck-description p:last-child {
+    margin-bottom: 0;
+}
+
+.empty-state {
+    text-align: center;
+    padding: 4rem 1rem;
+    color: var(--text-muted);
+}
+
+.empty-state i {
+    font-size: 3rem;
+    display: block;
+    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;
+    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/Pages/Decks.razor

@@ -1,3 +1,4 @@
+@namespace Shared.Pages
 @page "/decks"
 
 <PageTitle>Decks</PageTitle>

Chrono/Shared/Pages/Home.razor

@@ -1,4 +1,5 @@
-@page "/"
+@namespace Shared.Pages
+@page "/"
 
 <PageTitle>Slop Game Reference - Chrono CCG</PageTitle>
 
@@ -22,4 +23,3 @@
         </div>
     </div>
 </div>
-

Chrono/Shared/Pages/NotFound.razor

@@ -0,0 +1,6 @@
+@namespace Shared.Pages
+@page "/not-found"
+@layout MainLayout
+
+<h3>Not Found</h3>
+<p>Sorry, the content you are looking for does not exist.</p>

Chrono/Shared/Shared.csproj

@@ -0,0 +1,35 @@
+<Project Sdk="Microsoft.NET.Sdk.Razor">
+
+    <PropertyGroup>
+        <TargetFramework>net10.0</TargetFramework>
+        <ImplicitUsings>enable</ImplicitUsings>
+        <Nullable>enable</Nullable>
+    </PropertyGroup>
+
+    <ItemGroup>
+        <PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="10.0.9"/>
+        <PackageReference Include="Telerik.UI.for.Blazor" Version="14.0.0"/>
+    </ItemGroup>
+
+    <ItemGroup>
+        <ProjectReference Include="..\Model\Model.csproj"/>
+    </ItemGroup>
+
+    <ItemGroup Label="Generated files">
+        <Compile Remove="Generated\**\*.cs"/>
+        <Compile Include="Generated\**\*.cs"/>
+    </ItemGroup>
+
+    <Target Name="RunBuild" BeforeTargets="CoreCompile">
+        <PropertyGroup>
+            <_BuildProject>$(MSBuildThisFileDirectory)..\Build\Build.csproj</_BuildProject>
+        </PropertyGroup>
+        <Message Text="=== Running Build project (card metadata generation) ===" Importance="high"/>
+        <Exec Command="dotnet run --project &quot;$(_BuildProject)&quot;"/>
+        <ItemGroup>
+            <Compile Remove="Generated\**\*.cs"/>
+            <Compile Include="Generated\**\*.cs"/>
+        </ItemGroup>
+    </Target>
+
+</Project>

Chrono/Shared/_Imports.razor

@@ -0,0 +1,12 @@
+@using System.Net.Http
+@using System.Net.Http.Json
+@using Chrono.Model
+@using Microsoft.AspNetCore.Components.Forms
+@using Microsoft.AspNetCore.Components.Routing
+@using Microsoft.AspNetCore.Components.Web
+@using Microsoft.AspNetCore.Components.Web.Virtualization
+@using Microsoft.JSInterop
+@using Shared.Layout
+@using Telerik.Blazor
+@using Telerik.Blazor.Components
+@using Telerik.DataSource

Chrono/Web/App.razor

@@ -1,5 +1,4 @@
-@using Web.Pages
+<Router AppAssembly="@typeof(App).Assembly" AdditionalAssemblies="new[] { typeof(Home).Assembly }" NotFoundPage="typeof(NotFound)">
-<Router AppAssembly="@typeof(App).Assembly" NotFoundPage="typeof(NotFound)">
     <Found Context="routeData">
         <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)"/>
         <FocusOnNavigate RouteData="@routeData" Selector="h1"/>

Chrono/Web/Pages/DeckDetail.razor.css

@@ -1,203 +0,0 @@
-.deck-detail-page {
-    max-width: 800px;
-    margin: 0 auto;
-    padding: 0 1rem 3rem;
-}
-
-.back-link {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.4rem;
-    color: var(--text-secondary);
-    text-decoration: none;
-    font-size: 0.85rem;
-    margin-bottom: 1.5rem;
-    transition: color var(--transition);
-}
-
-.back-link:hover {
-    color: var(--accent);
-}
-
-.deck-article {
-    background: var(--bg-surface);
-    border: 1px solid var(--border);
-    border-radius: var(--radius);
-    padding: 2rem;
-}
-
-.deck-header {
-    margin-bottom: 2rem;
-    padding-bottom: 1.5rem;
-    border-bottom: 1px solid var(--border);
-}
-
-.deck-header h1 {
-    margin: 0 0 0.5rem;
-}
-
-.deck-factions {
-    display: flex;
-    gap: 0.4rem;
-    margin-bottom: 0.5rem;
-    flex-wrap: wrap;
-}
-
-.faction-badge {
-    display: inline-block;
-    font-size: 0.75rem;
-    font-weight: 600;
-    padding: 0.2rem 0.7rem;
-    border-radius: 999px;
-    background: var(--bg-elevated);
-    color: var(--accent);
-    border: 1px solid var(--border);
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-}
-
-.deck-card-count {
-    font-size: 0.85rem;
-    color: var(--text-muted);
-    margin: 0;
-}
-
-.deck-section {
-    margin-bottom: 2rem;
-}
-
-.deck-section:last-child {
-    margin-bottom: 0;
-}
-
-.deck-section h2 {
-    font-size: 1.05rem;
-    font-weight: 600;
-    margin: 0 0 1rem;
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    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; /* Base width + some offset space */
-    height: 140px; /* Adjusted for aspect ratio */
-}
-
-.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;
-    color: var(--text-secondary);
-}
-
-
-.deck-description p {
-    margin: 0 0 1rem;
-}
-
-.deck-description p:last-child {
-    margin-bottom: 0;
-}
-
-.empty-state {
-    text-align: center;
-    padding: 4rem 1rem;
-    color: var(--text-muted);
-}
-
-.empty-state i {
-    font-size: 3rem;
-    display: block;
-    margin-bottom: 1rem;
-}
-
-

Chrono/Web/Pages/NotFound.razor

@@ -1,5 +0,0 @@
-@page "/not-found"
-@layout MainLayout
-
-<h3>Not Found</h3>
-<p>Sorry, the content you are looking for does not exist.</p>

Chrono/Web/Web.csproj

@@ -16,22 +16,6 @@
 
     <ItemGroup>
         <ProjectReference Include="..\Model\Model.csproj"/>
+        <ProjectReference Include="..\Shared\Shared.csproj" />
     </ItemGroup>
-
-    <ItemGroup Label="Generated files">
-        <Compile Remove="Generated\**\*.cs"/>
-        <Compile Include="Generated\**\*.cs"/>
-    </ItemGroup>
-
-    <Target Name="RunBuild" BeforeTargets="CoreCompile">
-        <PropertyGroup>
-            <_BuildProject>$(MSBuildThisFileDirectory)..\Build\Build.csproj</_BuildProject>
-        </PropertyGroup>
-        <Message Text="=== Running Build project (card metadata generation) ===" Importance="high"/>
-        <Exec Command="dotnet run --project &quot;$(_BuildProject)&quot;"/>
-        <ItemGroup>
-            <Compile Remove="Generated\**\*.cs"/>
-            <Compile Include="Generated\**\*.cs"/>
-        </ItemGroup>
-    </Target>
 </Project>

Chrono/Web/_Imports.razor

@@ -7,8 +7,8 @@
 @using Microsoft.AspNetCore.Components.Web.Virtualization
 @using Microsoft.AspNetCore.Components.WebAssembly.Http
 @using Microsoft.JSInterop
-@using Web
+@using Shared.Layout
-@using Web.Layout
+@using Shared.Pages
 @using Chrono.Components
 @using Telerik.Blazor
 @using Telerik.Blazor.Components

chrono.docs/.obsidian/workspace.json

@@ -11,13 +11,14 @@
             "id": "9aaa8a83f2165190",
             "type": "leaf",
             "state": {
-              "type": "bases",
+              "type": "markdown",
               "state": {
-                "file": "_Debuff.base",
+                "file": "Immortalized/[[Phasetide]]/Alina, the Overflowing Cup.md",
-                "viewName": "Table"
+                "mode": "source",
+                "source": false
               },
-              "icon": "lucide-table",
+              "icon": "lucide-file",
-              "title": "_Debuff"
+              "title": "Alina, the Overflowing Cup"
             }
           }
         ]
@@ -182,12 +183,26 @@
       "bases:Create new base": false
     }
   },
-  "active": "0ce4e65b7e2934e1",
+  "active": "9aaa8a83f2165190",
   "lastOpenFiles": [
+    "_Factions.base",
+    "Redirect/Cores.md",
+    "Redirect/Agents.md",
+    "Rule/Round End.md",
+    "Rule/Discarded.md",
+    "Rule/Core.md",
+    "Rule/Chain.md",
+    "Decks/Rewind Me.canvas",
+    "Faction/Singularity.md",
+    "Faction/Splintergleam.md",
+    "Faction/Silence.md",
+    "Faction/Phasetide.md",
+    "Faction/Lifeblood.md",
+    "Faction/Sungrace.md",
+    "_Debuff.base",
     "Keyword/Sprout.md",
     "Keyword/Sprout.md",
     "Keyword/Siphon.md",
-    "_Debuff.base",
     "Debuff/Transient.md",
     "Debuff/Temporary.md",
     "Debuff/Exposed.md",
@@ -207,20 +222,6 @@
     "Agent/[[Lifeblood]]/2",
     "Agent/[[Phasetide]]/5",
     "Keyword/Surge.md",
-    "Keyword/Breakdown.md",
-    "Keyword/Revive.md",
-    "Keyword/Refresh.md",
-    "Keyword/Rejuvenate.md",
-    "Keyword/Heal.md",
-    "Keyword/Fervor.md",
-    "Keyword/Evasive.md",
-    "Keyword/Confront.md",
-    "Keyword/Cleave.md",
-    "Keyword/Blitz.md",
-    "Keyword/Draw.md",
-    "Spell/[[Lifeblood]]/Affront to Nature.md",
-    "Timeline/[[Lifeblood]]/Deadly Fauna.md",
-    "Decks/Rewind Me.canvas",
     "images/Wolf.png",
     "images/Seedling.png",
     "images/Pocket Scout.png",

chrono.docs/Faction/Lifeblood.md

@@ -1,3 +1,6 @@
 ---
 category: Faction
 ---
+Concepts:
+- Wide Boards
+- Overpower

chrono.docs/Faction/Phasetide.md

@@ -1,3 +1,6 @@
 ---
 category: Faction
 ---
+Concepts:
+- Healing
+- 

chrono.docs/Faction/Silence.md

@@ -1,3 +1,6 @@
 ---
 category: Faction
 ---
+Concepts:
+- Activatable Agents
+- 

chrono.docs/Faction/Singularity.md

@@ -1,3 +1,5 @@
 ---
 category: Faction
 ---
+Concepts:
+- Discard

chrono.docs/Faction/Splintergleam.md

@@ -1,3 +1,7 @@
 ---
 category: Faction
 ---
+Concepts:
+- Self Damage
+- Bleed
+- 

chrono.docs/Faction/Sungrace.md

@@ -1,3 +1,7 @@
 ---
 category: Faction
 ---
+Concepts:
+- Ramp
+- Using and Replenishing Reserved Energy
+-