Vibe passkey

...
2026-07-03 14:31:40 -04:00 · 2026-07-03 13:48:14 -04:00 · 2026-07-03 13:41:30 -04:00 · 2026-07-03 12:26:41 -04:00
405 changed files with 4491 additions and 68077 deletions
@@ -0,0 +1,22 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(cp \"C:/Users/jonmc/ChronoCCG/Chrono/Web/Components/CardDialog.razor.css\" \"C:/Users/jonmc/ChronoCCG/Chrono/Server/Components/CardDialog.razor.css\")",
+      "Bash(cp \"C:/Users/jonmc/ChronoCCG/Chrono/Web/Pages/Cards.razor.css\" \"C:/Users/jonmc/ChronoCCG/Chrono/Server/Components/Pages/Cards.razor.css\")",
+      "Bash(dotnet ef *)",
+      "Bash(dotnet build *)",
+      "Bash(awk '{print $NF}')",
+      "Bash(dotnet test *)",
+      "Bash(dotnet user-secrets *)",
+      "Bash(env)",
+      "Bash(grep -E \"\\\\.\\(cs|json|razor\\)$\")",
+      "Bash(dotnet package *)",
+      "Bash(dotnet restore *)",
+      "Bash(powershell -Command '[Reflection.Assembly]::LoadFrom\\('\\\\''C:\\\\Users\\\\jonmc\\\\.nuget\\\\packages\\\\microsoft.playwright\\\\1.60.0\\\\lib\\\\netstandard2.0\\\\Microsoft.Playwright.dll'\\\\''\\) | Out-Null; [Microsoft.Playwright.IBrowserContext].GetMethods\\(\\) | Where-Object { $_.Name -match '\\\\''Virtual|Authenticator|CDP|Request'\\\\'' } | Select-Object Name')",
+      "Bash(powershell -Command 'Add-Type -Path '\\\\''C:\\\\Users\\\\jonmc\\\\.nuget\\\\packages\\\\microsoft.playwright\\\\1.60.0\\\\lib\\\\netstandard2.0\\\\Microsoft.Playwright.dll'\\\\''; [AppDomain]::CurrentDomain.GetAssemblies\\(\\) | Where-Object { $_.GetName\\(\\).Name -eq '\\\\''Microsoft.Playwright'\\\\'' } | ForEach-Object { $_.GetExportedTypes\\(\\) | Where-Object { $_.Name -match '\\\\''Virtual|Authenticator|IBrowserContext'\\\\'' } | Select-Object FullName }')",
+      "Bash(python3 -c \"import json; d=json.load\\(open\\('/c/Users/jonmc/.nuget/packages/microsoft.playwright/1.60.0/.playwright/package/api.json'\\)\\); keys=[k for k in str\\(d\\) if 'Virtual' in k or 'Authenticator' in k]; print\\(keys[:5]\\)\")",
+      "Bash(python3 -c ' *)",
+      "Bash(powershell -Command ' *)"
+    ]
+  }
+}
@@ -14,8 +14,6 @@ Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Server", "Server\Server.csp
 EndProject
 Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Shared", "Shared\Shared.csproj", "{30D8468D-01E1-4D8A-99AF-EE4A75A5E956}"
 EndProject
-Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Cloud", "Cloud\Cloud.csproj", "{378D4271-55B8-4E77-92F0-65C7DA26ABD3}"
-EndProject
 Global
 	GlobalSection(SolutionConfigurationPlatforms) = preSolution
 		Debug|Any CPU = Debug|Any CPU
@@ -110,18 +108,6 @@ Global
 		{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
-		{378D4271-55B8-4E77-92F0-65C7DA26ABD3}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
-		{378D4271-55B8-4E77-92F0-65C7DA26ABD3}.Debug|Any CPU.Build.0 = Debug|Any CPU
-		{378D4271-55B8-4E77-92F0-65C7DA26ABD3}.Debug|x64.ActiveCfg = Debug|Any CPU
-		{378D4271-55B8-4E77-92F0-65C7DA26ABD3}.Debug|x64.Build.0 = Debug|Any CPU
-		{378D4271-55B8-4E77-92F0-65C7DA26ABD3}.Debug|x86.ActiveCfg = Debug|Any CPU
-		{378D4271-55B8-4E77-92F0-65C7DA26ABD3}.Debug|x86.Build.0 = Debug|Any CPU
-		{378D4271-55B8-4E77-92F0-65C7DA26ABD3}.Release|Any CPU.ActiveCfg = Release|Any CPU
-		{378D4271-55B8-4E77-92F0-65C7DA26ABD3}.Release|Any CPU.Build.0 = Release|Any CPU
-		{378D4271-55B8-4E77-92F0-65C7DA26ABD3}.Release|x64.ActiveCfg = Release|Any CPU
-		{378D4271-55B8-4E77-92F0-65C7DA26ABD3}.Release|x64.Build.0 = Release|Any CPU
-		{378D4271-55B8-4E77-92F0-65C7DA26ABD3}.Release|x86.ActiveCfg = Release|Any CPU
-		{378D4271-55B8-4E77-92F0-65C7DA26ABD3}.Release|x86.Build.0 = Release|Any CPU
 	EndGlobalSection
 	GlobalSection(SolutionProperties) = preSolution
 		HideSolutionNode = FALSE
@@ -1,15 +0,0 @@
-<Project Sdk="Microsoft.NET.Sdk.Web">
-
-    <PropertyGroup>
-        <TargetFramework>net10.0</TargetFramework>
-        <Nullable>enable</Nullable>
-        <ImplicitUsings>enable</ImplicitUsings>
-        <BlazorDisableThrowNavigationException>true</BlazorDisableThrowNavigationException>
-    </PropertyGroup>
-
-    <ItemGroup>
-        <ProjectReference Include="..\Model\Model.csproj"/>
-        <ProjectReference Include="..\Shared\Shared.csproj"/>
-    </ItemGroup>
-
-</Project>
@@ -1,23 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <meta charset="utf-8"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-    <base href="/"/>
-    <ResourcePreloader/>
-    <link rel="stylesheet" href="@Assets["lib/bootstrap/dist/css/bootstrap.min.css"]"/>
-    <link rel="stylesheet" href="@Assets["app.css"]"/>
-    <link rel="stylesheet" href="@Assets["Cloud.styles.css"]"/>
-    <ImportMap/>
-    <link rel="icon" type="image/png" href="favicon.png"/>
-    <HeadOutlet/>
-</head>
-
-<body>
-<Routes/>
-<ReconnectModal/>
-<script src="@Assets["_framework/blazor.web.js"]"></script>
-</body>
-
-</html>
@@ -1,23 +0,0 @@
-@inherits LayoutComponentBase
-
-<div class="page">
-    <div class="sidebar">
-        <NavMenu/>
-    </div>
-
-    <main>
-        <div class="top-row px-4">
-            <a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
-        </div>
-
-        <article class="content px-4">
-            @Body
-        </article>
-    </main>
-</div>
-
-<div id="blazor-error-ui" data-nosnippet>
-    An unhandled error has occurred.
-    <a href="." class="reload">Reload</a>
-    <span class="dismiss">🗙</span>
-</div>
@@ -1,98 +0,0 @@
-.page {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-}
-
-main {
-    flex: 1;
-}
-
-.sidebar {
-    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
-}
-
-.top-row {
-    background-color: #f7f7f7;
-    border-bottom: 1px solid #d6d5d5;
-    justify-content: flex-end;
-    height: 3.5rem;
-    display: flex;
-    align-items: center;
-}
-
-.top-row ::deep a, .top-row ::deep .btn-link {
-    white-space: nowrap;
-    margin-left: 1.5rem;
-    text-decoration: none;
-}
-
-.top-row ::deep a:hover, .top-row ::deep .btn-link:hover {
-    text-decoration: underline;
-}
-
-.top-row ::deep a:first-child {
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-@media (max-width: 640.98px) {
-    .top-row {
-        justify-content: space-between;
-    }
-
-    .top-row ::deep a, .top-row ::deep .btn-link {
-        margin-left: 0;
-    }
-}
-
-@media (min-width: 641px) {
-    .page {
-        flex-direction: row;
-    }
-
-    .sidebar {
-        width: 250px;
-        height: 100vh;
-        position: sticky;
-        top: 0;
-    }
-
-    .top-row {
-        position: sticky;
-        top: 0;
-        z-index: 1;
-    }
-
-    .top-row.auth ::deep a:first-child {
-        flex: 1;
-        text-align: right;
-        width: 0;
-    }
-
-    .top-row, article {
-        padding-left: 2rem !important;
-        padding-right: 1.5rem !important;
-    }
-}
-
-#blazor-error-ui {
-    color-scheme: light only;
-    background: lightyellow;
-    bottom: 0;
-    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
-    box-sizing: border-box;
-    display: none;
-    left: 0;
-    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
-    position: fixed;
-    width: 100%;
-    z-index: 1000;
-}
-
-#blazor-error-ui .dismiss {
-    cursor: pointer;
-    position: absolute;
-    right: 0.75rem;
-    top: 0.5rem;
-}
@@ -1,29 +0,0 @@
-<div class="top-row ps-3 navbar navbar-dark">
-    <div class="container-fluid">
-        <a class="navbar-brand" href="">Cloud</a>
-    </div>
-</div>
-
-<input type="checkbox" title="Navigation menu" class="navbar-toggler"/>
-
-<div class="nav-scrollable" onclick="document.querySelector('.navbar-toggler').click()">
-    <nav class="nav flex-column">
-        <div class="nav-item px-3">
-            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
-                <span class="bi bi-house-door-fill-nav-menu" aria-hidden="true"></span> Home
-            </NavLink>
-        </div>
-
-        <div class="nav-item px-3">
-            <NavLink class="nav-link" href="counter">
-                <span class="bi bi-plus-square-fill-nav-menu" aria-hidden="true"></span> Counter
-            </NavLink>
-        </div>
-
-        <div class="nav-item px-3">
-            <NavLink class="nav-link" href="weather">
-                <span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Weather
-            </NavLink>
-        </div>
-    </nav>
-</div>
@@ -1,105 +0,0 @@
-.navbar-toggler {
-    appearance: none;
-    cursor: pointer;
-    width: 3.5rem;
-    height: 2.5rem;
-    color: white;
-    position: absolute;
-    top: 0.5rem;
-    right: 1rem;
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
-}
-
-.navbar-toggler:checked {
-    background-color: rgba(255, 255, 255, 0.5);
-}
-
-.top-row {
-    min-height: 3.5rem;
-    background-color: rgba(0, 0, 0, 0.4);
-}
-
-.navbar-brand {
-    font-size: 1.1rem;
-}
-
-.bi {
-    display: inline-block;
-    position: relative;
-    width: 1.25rem;
-    height: 1.25rem;
-    margin-right: 0.75rem;
-    top: -1px;
-    background-size: cover;
-}
-
-.bi-house-door-fill-nav-menu {
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
-}
-
-.bi-plus-square-fill-nav-menu {
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
-}
-
-.bi-list-nested-nav-menu {
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
-}
-
-.nav-item {
-    font-size: 0.9rem;
-    padding-bottom: 0.5rem;
-}
-
-.nav-item:first-of-type {
-    padding-top: 1rem;
-}
-
-.nav-item:last-of-type {
-    padding-bottom: 1rem;
-}
-
-.nav-item ::deep .nav-link {
-    color: #d7d7d7;
-    background: none;
-    border: none;
-    border-radius: 4px;
-    height: 3rem;
-    display: flex;
-    align-items: center;
-    line-height: 3rem;
-    width: 100%;
-}
-
-.nav-item ::deep a.active {
-    background-color: rgba(255, 255, 255, 0.37);
-    color: white;
-}
-
-.nav-item ::deep .nav-link:hover {
-    background-color: rgba(255, 255, 255, 0.1);
-    color: white;
-}
-
-.nav-scrollable {
-    display: none;
-}
-
-.navbar-toggler:checked ~ .nav-scrollable {
-    display: block;
-}
-
-@media (min-width: 641px) {
-    .navbar-toggler {
-        display: none;
-    }
-
-    .nav-scrollable {
-        /* Never collapse the sidebar for wide screens */
-        display: block;
-
-        /* Allow sidebar to scroll for tall menus */
-        height: calc(100vh - 3.5rem);
-        overflow-y: auto;
-    }
-}
@@ -1,31 +0,0 @@
-<script type="module" src="@Assets["Components/Layout/ReconnectModal.razor.js"]"></script>
-
-<dialog id="components-reconnect-modal" data-nosnippet>
-    <div class="components-reconnect-container">
-        <div class="components-rejoining-animation" aria-hidden="true">
-            <div></div>
-            <div></div>
-        </div>
-        <p class="components-reconnect-first-attempt-visible">
-            Rejoining the server...
-        </p>
-        <p class="components-reconnect-repeated-attempt-visible">
-            Rejoin failed... trying again in <span id="components-seconds-to-next-attempt"></span> seconds.
-        </p>
-        <p class="components-reconnect-failed-visible">
-            Failed to rejoin.<br/>Please retry or reload the page.
-        </p>
-        <button id="components-reconnect-button" class="components-reconnect-failed-visible">
-            Retry
-        </button>
-        <p class="components-pause-visible">
-            The session has been paused by the server.
-        </p>
-        <p class="components-resume-failed-visible">
-            Failed to resume the session.<br/>Please retry or reload the page.
-        </p>
-        <button id="components-resume-button" class="components-pause-visible components-resume-failed-visible">
-            Resume
-        </button>
-    </div>
-</dialog>
@@ -1,156 +0,0 @@
-.components-reconnect-first-attempt-visible,
-.components-reconnect-repeated-attempt-visible,
-.components-reconnect-failed-visible,
-.components-pause-visible,
-.components-resume-failed-visible,
-.components-rejoining-animation {
-    display: none;
-}
-
-#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible,
-#components-reconnect-modal.components-reconnect-show .components-rejoining-animation,
-#components-reconnect-modal.components-reconnect-paused .components-pause-visible,
-#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible,
-#components-reconnect-modal.components-reconnect-retrying,
-#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible,
-#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation,
-#components-reconnect-modal.components-reconnect-failed,
-#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible {
-    display: block;
-}
-
-
-#components-reconnect-modal {
-    background-color: white;
-    width: 20rem;
-    margin: 20vh auto;
-    padding: 2rem;
-    border: 0;
-    border-radius: 0.5rem;
-    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
-    opacity: 0;
-    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
-    animation: components-reconnect-modal-fadeOutOpacity 0.5s both;
-
-    &[open] {
-        animation: components-reconnect-modal-slideUp 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity 0.5s ease-in-out 0.3s;
-        animation-fill-mode: both;
-    }
-
-}
-
-#components-reconnect-modal::backdrop {
-    background-color: rgba(0, 0, 0, 0.4);
-    animation: components-reconnect-modal-fadeInOpacity 0.5s ease-in-out;
-    opacity: 1;
-}
-
-@keyframes components-reconnect-modal-slideUp {
-    0% {
-        transform: translateY(30px) scale(0.95);
-    }
-
-    100% {
-        transform: translateY(0);
-    }
-}
-
-@keyframes components-reconnect-modal-fadeInOpacity {
-    0% {
-        opacity: 0;
-    }
-
-    100% {
-        opacity: 1;
-    }
-}
-
-@keyframes components-reconnect-modal-fadeOutOpacity {
-    0% {
-        opacity: 1;
-    }
-
-    100% {
-        opacity: 0;
-    }
-}
-
-.components-reconnect-container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 1rem;
-}
-
-#components-reconnect-modal p {
-    margin: 0;
-    text-align: center;
-}
-
-#components-reconnect-modal button {
-    border: 0;
-    background-color: #6b9ed2;
-    color: white;
-    padding: 4px 24px;
-    border-radius: 4px;
-}
-
-#components-reconnect-modal button:hover {
-    background-color: #3b6ea2;
-}
-
-#components-reconnect-modal button:active {
-    background-color: #6b9ed2;
-}
-
-.components-rejoining-animation {
-    position: relative;
-    width: 80px;
-    height: 80px;
-}
-
-.components-rejoining-animation div {
-    position: absolute;
-    border: 3px solid #0087ff;
-    opacity: 1;
-    border-radius: 50%;
-    animation: components-rejoining-animation 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
-}
-
-.components-rejoining-animation div:nth-child(2) {
-    animation-delay: -0.5s;
-}
-
-@keyframes components-rejoining-animation {
-    0% {
-        top: 40px;
-        left: 40px;
-        width: 0;
-        height: 0;
-        opacity: 0;
-    }
-
-    4.9% {
-        top: 40px;
-        left: 40px;
-        width: 0;
-        height: 0;
-        opacity: 0;
-    }
-
-    5% {
-        top: 40px;
-        left: 40px;
-        width: 0;
-        height: 0;
-        opacity: 1;
-    }
-
-    100% {
-        top: 0px;
-        left: 0px;
-        width: 80px;
-        height: 80px;
-        opacity: 0;
-    }
-}
@@ -1,63 +0,0 @@
-// Set up event handlers
-const reconnectModal = document.getElementById("components-reconnect-modal");
-reconnectModal.addEventListener("components-reconnect-state-changed", handleReconnectStateChanged);
-
-const retryButton = document.getElementById("components-reconnect-button");
-retryButton.addEventListener("click", retry);
-
-const resumeButton = document.getElementById("components-resume-button");
-resumeButton.addEventListener("click", resume);
-
-function handleReconnectStateChanged(event) {
-    if (event.detail.state === "show") {
-        reconnectModal.showModal();
-    } else if (event.detail.state === "hide") {
-        reconnectModal.close();
-    } else if (event.detail.state === "failed") {
-        document.addEventListener("visibilitychange", retryWhenDocumentBecomesVisible);
-    } else if (event.detail.state === "rejected") {
-        location.reload();
-    }
-}
-
-async function retry() {
-    document.removeEventListener("visibilitychange", retryWhenDocumentBecomesVisible);
-
-    try {
-        // Reconnect will asynchronously return:
-        // - true to mean success
-        // - false to mean we reached the server, but it rejected the connection (e.g., unknown circuit ID)
-        // - exception to mean we didn't reach the server (this can be sync or async)
-        const successful = await Blazor.reconnect();
-        if (!successful) {
-            // We have been able to reach the server, but the circuit is no longer available.
-            // We'll reload the page so the user can continue using the app as quickly as possible.
-            const resumeSuccessful = await Blazor.resumeCircuit();
-            if (!resumeSuccessful) {
-                location.reload();
-            } else {
-                reconnectModal.close();
-            }
-        }
-    } catch (err) {
-        // We got an exception, server is currently unavailable
-        document.addEventListener("visibilitychange", retryWhenDocumentBecomesVisible);
-    }
-}
-
-async function resume() {
-    try {
-        const successful = await Blazor.resumeCircuit();
-        if (!successful) {
-            location.reload();
-        }
-    } catch {
-        reconnectModal.classList.replace("components-reconnect-paused", "components-reconnect-resume-failed");
-    }
-}
-
-async function retryWhenDocumentBecomesVisible() {
-    if (document.visibilityState === "visible") {
-        await retry();
-    }
-}
@@ -1,20 +0,0 @@
-@page "/counter"
-@rendermode InteractiveServer
-
-<PageTitle>Counter</PageTitle>
-
-<h1>Counter</h1>
-
-<p role="status">Current count: @currentCount</p>
-
-<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
-
-@code {
-    private int currentCount;
-
-    private void IncrementCount()
-    {
-        currentCount++;
-    }
-
-}
@@ -1,40 +0,0 @@
-@page "/Error"
-@using System.Diagnostics
-
-<PageTitle>Error</PageTitle>
-
-<h1 class="text-danger">Error.</h1>
-<h2 class="text-danger">An error occurred while processing your request.</h2>
-
-@if (ShowRequestId)
-{
-    <p>
-        <strong>Request ID:</strong> <code>@RequestId</code>
-    </p>
-}
-
-<h3>Development Mode</h3>
-<p>
-    Swapping to <strong>Development</strong> environment will display more detailed information about the error that
-    occurred.
-</p>
-<p>
-    <strong>The Development environment shouldn't be enabled for deployed applications.</strong>
-    It can result in displaying sensitive information from exceptions to end users.
-    For local debugging, enable the <strong>Development</strong> environment by setting the <strong>ASPNETCORE_ENVIRONMENT</strong>
-    environment variable to <strong>Development</strong>
-    and restarting the app.
-</p>
-
-@code{
-    [CascadingParameter] private HttpContext? HttpContext { get; set; }
-
-    private string? RequestId { get; set; }
-    private bool ShowRequestId => !string.IsNullOrEmpty(RequestId);
-
-    protected override void OnInitialized()
-    {
-        RequestId = Activity.Current?.Id ?? HttpContext?.TraceIdentifier;
-    }
-
-}
@@ -1,7 +0,0 @@
-@page "/"
-
-<PageTitle>Home</PageTitle>
-
-<h1>Hello, world!</h1>
-
-Welcome to your new app.
@@ -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>
@@ -1,5 +0,0 @@
-@page "/weather"
-@using Shared.Pages
-@attribute [StreamRendering]
-
-<Decks></Decks>
@@ -1,9 +0,0 @@
-@using Shared.Pages
-@using NotFound = Cloud.Components.Pages.NotFound
-<Router AppAssembly="typeof(Program).Assembly" AdditionalAssemblies="new[] { typeof(Home).Assembly }"
-        NotFoundPage="typeof(NotFound)">
-    <Found Context="routeData">
-        <RouteView RouteData="routeData" DefaultLayout="typeof(MainLayout)"/>
-        <FocusOnNavigate RouteData="routeData" Selector="h1"/>
-    </Found>
-</Router>
@@ -1,11 +0,0 @@
-@using System.Net.Http
-@using System.Net.Http.Json
-@using Microsoft.AspNetCore.Components.Forms
-@using Microsoft.AspNetCore.Components.Routing
-@using Microsoft.AspNetCore.Components.Web
-@using static Microsoft.AspNetCore.Components.Web.RenderMode
-@using Microsoft.AspNetCore.Components.Web.Virtualization
-@using Microsoft.JSInterop
-@using Cloud
-@using Cloud.Components
-@using Cloud.Components.Layout
@@ -1,28 +0,0 @@
-using Cloud.Components;
-
-var builder = WebApplication.CreateBuilder(args);
-
-// Add services to the container.
-builder.Services.AddRazorComponents()
-    .AddInteractiveServerComponents();
-
-var app = builder.Build();
-
-// Configure the HTTP request pipeline.
-if (!app.Environment.IsDevelopment())
-{
-    app.UseExceptionHandler("/Error", true);
-    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
-    app.UseHsts();
-}
-
-app.UseStatusCodePagesWithReExecute("/not-found", createScopeForStatusCodePages: true);
-app.UseHttpsRedirection();
-
-app.UseAntiforgery();
-
-app.MapStaticAssets();
-app.MapRazorComponents<App>()
-    .AddInteractiveServerRenderMode();
-
-app.Run();
@@ -1,23 +0,0 @@
-{
-  "$schema": "https://json.schemastore.org/launchsettings.json",
-  "profiles": {
-    "http": {
-      "commandName": "Project",
-      "dotnetRunMessages": true,
-      "launchBrowser": true,
-      "applicationUrl": "http://localhost:5230",
-      "environmentVariables": {
-        "ASPNETCORE_ENVIRONMENT": "Development"
-      }
-    },
-    "https": {
-      "commandName": "Project",
-      "dotnetRunMessages": true,
-      "launchBrowser": true,
-      "applicationUrl": "https://localhost:7086;http://localhost:5230",
-      "environmentVariables": {
-        "ASPNETCORE_ENVIRONMENT": "Development"
-      }
-    }
-  }
-}
@@ -1,9 +0,0 @@
-{
-  "Logging": {
-    "LogLevel": {
-      "Default": "Information",
-      "Microsoft.AspNetCore": "Warning"
-    }
-  },
-  "AllowedHosts": "*"
-}
@@ -1,60 +0,0 @@
-html, body {
-    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
-}
-
-a, .btn-link {
-    color: #006bb7;
-}
-
-.btn-primary {
-    color: #fff;
-    background-color: #1b6ec2;
-    border-color: #1861ac;
-}
-
-.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
-    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
-}
-
-.content {
-    padding-top: 1.1rem;
-}
-
-h1:focus {
-    outline: none;
-}
-
-.valid.modified:not([type=checkbox]) {
-    outline: 1px solid #26b050;
-}
-
-.invalid {
-    outline: 1px solid #e50000;
-}
-
-.validation-message {
-    color: #e50000;
-}
-
-.blazor-error-boundary {
-    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
-    padding: 1rem 1rem 1rem 3.7rem;
-    color: white;
-}
-
-.blazor-error-boundary::after {
-    content: "An error has occurred."
-}
-
-.darker-border-checkbox.form-check-input {
-    border-color: #929292;
-}
-
-.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
-    color: var(--bs-secondary-color);
-    text-align: end;
-}
-
-.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
-    text-align: start;
-}
@@ -1,609 +0,0 @@
-/*!
- * Bootstrap Reboot v5.3.3 (https://getbootstrap.com/)
- * Copyright 2011-2024 The Bootstrap Authors
- * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
- */
-:root,
-[data-bs-theme=light] {
-    --bs-blue: #0d6efd;
-    --bs-indigo: #6610f2;
-    --bs-purple: #6f42c1;
-    --bs-pink: #d63384;
-    --bs-red: #dc3545;
-    --bs-orange: #fd7e14;
-    --bs-yellow: #ffc107;
-    --bs-green: #198754;
-    --bs-teal: #20c997;
-    --bs-cyan: #0dcaf0;
-    --bs-black: #000;
-    --bs-white: #fff;
-    --bs-gray: #6c757d;
-    --bs-gray-dark: #343a40;
-    --bs-gray-100: #f8f9fa;
-    --bs-gray-200: #e9ecef;
-    --bs-gray-300: #dee2e6;
-    --bs-gray-400: #ced4da;
-    --bs-gray-500: #adb5bd;
-    --bs-gray-600: #6c757d;
-    --bs-gray-700: #495057;
-    --bs-gray-800: #343a40;
-    --bs-gray-900: #212529;
-    --bs-primary: #0d6efd;
-    --bs-secondary: #6c757d;
-    --bs-success: #198754;
-    --bs-info: #0dcaf0;
-    --bs-warning: #ffc107;
-    --bs-danger: #dc3545;
-    --bs-light: #f8f9fa;
-    --bs-dark: #212529;
-    --bs-primary-rgb: 13, 110, 253;
-    --bs-secondary-rgb: 108, 117, 125;
-    --bs-success-rgb: 25, 135, 84;
-    --bs-info-rgb: 13, 202, 240;
-    --bs-warning-rgb: 255, 193, 7;
-    --bs-danger-rgb: 220, 53, 69;
-    --bs-light-rgb: 248, 249, 250;
-    --bs-dark-rgb: 33, 37, 41;
-    --bs-primary-text-emphasis: #052c65;
-    --bs-secondary-text-emphasis: #2b2f32;
-    --bs-success-text-emphasis: #0a3622;
-    --bs-info-text-emphasis: #055160;
-    --bs-warning-text-emphasis: #664d03;
-    --bs-danger-text-emphasis: #58151c;
-    --bs-light-text-emphasis: #495057;
-    --bs-dark-text-emphasis: #495057;
-    --bs-primary-bg-subtle: #cfe2ff;
-    --bs-secondary-bg-subtle: #e2e3e5;
-    --bs-success-bg-subtle: #d1e7dd;
-    --bs-info-bg-subtle: #cff4fc;
-    --bs-warning-bg-subtle: #fff3cd;
-    --bs-danger-bg-subtle: #f8d7da;
-    --bs-light-bg-subtle: #fcfcfd;
-    --bs-dark-bg-subtle: #ced4da;
-    --bs-primary-border-subtle: #9ec5fe;
-    --bs-secondary-border-subtle: #c4c8cb;
-    --bs-success-border-subtle: #a3cfbb;
-    --bs-info-border-subtle: #9eeaf9;
-    --bs-warning-border-subtle: #ffe69c;
-    --bs-danger-border-subtle: #f1aeb5;
-    --bs-light-border-subtle: #e9ecef;
-    --bs-dark-border-subtle: #adb5bd;
-    --bs-white-rgb: 255, 255, 255;
-    --bs-black-rgb: 0, 0, 0;
-    --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-    --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-    --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
-    --bs-body-font-family: var(--bs-font-sans-serif);
-    --bs-body-font-size: 1rem;
-    --bs-body-font-weight: 400;
-    --bs-body-line-height: 1.5;
-    --bs-body-color: #212529;
-    --bs-body-color-rgb: 33, 37, 41;
-    --bs-body-bg: #fff;
-    --bs-body-bg-rgb: 255, 255, 255;
-    --bs-emphasis-color: #000;
-    --bs-emphasis-color-rgb: 0, 0, 0;
-    --bs-secondary-color: rgba(33, 37, 41, 0.75);
-    --bs-secondary-color-rgb: 33, 37, 41;
-    --bs-secondary-bg: #e9ecef;
-    --bs-secondary-bg-rgb: 233, 236, 239;
-    --bs-tertiary-color: rgba(33, 37, 41, 0.5);
-    --bs-tertiary-color-rgb: 33, 37, 41;
-    --bs-tertiary-bg: #f8f9fa;
-    --bs-tertiary-bg-rgb: 248, 249, 250;
-    --bs-heading-color: inherit;
-    --bs-link-color: #0d6efd;
-    --bs-link-color-rgb: 13, 110, 253;
-    --bs-link-decoration: underline;
-    --bs-link-hover-color: #0a58ca;
-    --bs-link-hover-color-rgb: 10, 88, 202;
-    --bs-code-color: #d63384;
-    --bs-highlight-color: #212529;
-    --bs-highlight-bg: #fff3cd;
-    --bs-border-width: 1px;
-    --bs-border-style: solid;
-    --bs-border-color: #dee2e6;
-    --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
-    --bs-border-radius: 0.375rem;
-    --bs-border-radius-sm: 0.25rem;
-    --bs-border-radius-lg: 0.5rem;
-    --bs-border-radius-xl: 1rem;
-    --bs-border-radius-xxl: 2rem;
-    --bs-border-radius-2xl: var(--bs-border-radius-xxl);
-    --bs-border-radius-pill: 50rem;
-    --bs-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
-    --bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
-    --bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
-    --bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);
-    --bs-focus-ring-width: 0.25rem;
-    --bs-focus-ring-opacity: 0.25;
-    --bs-focus-ring-color: rgba(13, 110, 253, 0.25);
-    --bs-form-valid-color: #198754;
-    --bs-form-valid-border-color: #198754;
-    --bs-form-invalid-color: #dc3545;
-    --bs-form-invalid-border-color: #dc3545;
-}
-
-[data-bs-theme=dark] {
-    color-scheme: dark;
-    --bs-body-color: #dee2e6;
-    --bs-body-color-rgb: 222, 226, 230;
-    --bs-body-bg: #212529;
-    --bs-body-bg-rgb: 33, 37, 41;
-    --bs-emphasis-color: #fff;
-    --bs-emphasis-color-rgb: 255, 255, 255;
-    --bs-secondary-color: rgba(222, 226, 230, 0.75);
-    --bs-secondary-color-rgb: 222, 226, 230;
-    --bs-secondary-bg: #343a40;
-    --bs-secondary-bg-rgb: 52, 58, 64;
-    --bs-tertiary-color: rgba(222, 226, 230, 0.5);
-    --bs-tertiary-color-rgb: 222, 226, 230;
-    --bs-tertiary-bg: #2b3035;
-    --bs-tertiary-bg-rgb: 43, 48, 53;
-    --bs-primary-text-emphasis: #6ea8fe;
-    --bs-secondary-text-emphasis: #a7acb1;
-    --bs-success-text-emphasis: #75b798;
-    --bs-info-text-emphasis: #6edff6;
-    --bs-warning-text-emphasis: #ffda6a;
-    --bs-danger-text-emphasis: #ea868f;
-    --bs-light-text-emphasis: #f8f9fa;
-    --bs-dark-text-emphasis: #dee2e6;
-    --bs-primary-bg-subtle: #031633;
-    --bs-secondary-bg-subtle: #161719;
-    --bs-success-bg-subtle: #051b11;
-    --bs-info-bg-subtle: #032830;
-    --bs-warning-bg-subtle: #332701;
-    --bs-danger-bg-subtle: #2c0b0e;
-    --bs-light-bg-subtle: #343a40;
-    --bs-dark-bg-subtle: #1a1d20;
-    --bs-primary-border-subtle: #084298;
-    --bs-secondary-border-subtle: #41464b;
-    --bs-success-border-subtle: #0f5132;
-    --bs-info-border-subtle: #087990;
-    --bs-warning-border-subtle: #997404;
-    --bs-danger-border-subtle: #842029;
-    --bs-light-border-subtle: #495057;
-    --bs-dark-border-subtle: #343a40;
-    --bs-heading-color: inherit;
-    --bs-link-color: #6ea8fe;
-    --bs-link-hover-color: #8bb9fe;
-    --bs-link-color-rgb: 110, 168, 254;
-    --bs-link-hover-color-rgb: 139, 185, 254;
-    --bs-code-color: #e685b5;
-    --bs-highlight-color: #dee2e6;
-    --bs-highlight-bg: #664d03;
-    --bs-border-color: #495057;
-    --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
-    --bs-form-valid-color: #75b798;
-    --bs-form-valid-border-color: #75b798;
-    --bs-form-invalid-color: #ea868f;
-    --bs-form-invalid-border-color: #ea868f;
-}
-
-*,
-*::before,
-*::after {
-    box-sizing: border-box;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-    :root {
-        scroll-behavior: smooth;
-    }
-}
-
-body {
-    margin: 0;
-    font-family: var(--bs-body-font-family);
-    font-size: var(--bs-body-font-size);
-    font-weight: var(--bs-body-font-weight);
-    line-height: var(--bs-body-line-height);
-    color: var(--bs-body-color);
-    text-align: var(--bs-body-text-align);
-    background-color: var(--bs-body-bg);
-    -webkit-text-size-adjust: 100%;
-    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-}
-
-hr {
-    margin: 1rem 0;
-    color: inherit;
-    border: 0;
-    border-top: var(--bs-border-width) solid;
-    opacity: 0.25;
-}
-
-h6, h5, h4, h3, h2, h1 {
-    margin-top: 0;
-    margin-bottom: 0.5rem;
-    font-weight: 500;
-    line-height: 1.2;
-    color: var(--bs-heading-color);
-}
-
-h1 {
-    font-size: calc(1.375rem + 1.5vw);
-}
-
-@media (min-width: 1200px) {
-    h1 {
-        font-size: 2.5rem;
-    }
-}
-
-h2 {
-    font-size: calc(1.325rem + 0.9vw);
-}
-
-@media (min-width: 1200px) {
-    h2 {
-        font-size: 2rem;
-    }
-}
-
-h3 {
-    font-size: calc(1.3rem + 0.6vw);
-}
-
-@media (min-width: 1200px) {
-    h3 {
-        font-size: 1.75rem;
-    }
-}
-
-h4 {
-    font-size: calc(1.275rem + 0.3vw);
-}
-
-@media (min-width: 1200px) {
-    h4 {
-        font-size: 1.5rem;
-    }
-}
-
-h5 {
-    font-size: 1.25rem;
-}
-
-h6 {
-    font-size: 1rem;
-}
-
-p {
-    margin-top: 0;
-    margin-bottom: 1rem;
-}
-
-abbr[title] {
-    -webkit-text-decoration: underline dotted;
-    text-decoration: underline dotted;
-    cursor: help;
-    -webkit-text-decoration-skip-ink: none;
-    text-decoration-skip-ink: none;
-}
-
-address {
-    margin-bottom: 1rem;
-    font-style: normal;
-    line-height: inherit;
-}
-
-ol,
-ul {
-    padding-left: 2rem;
-}
-
-ol,
-ul,
-dl {
-    margin-top: 0;
-    margin-bottom: 1rem;
-}
-
-ol ol,
-ul ul,
-ol ul,
-ul ol {
-    margin-bottom: 0;
-}
-
-dt {
-    font-weight: 700;
-}
-
-dd {
-    margin-bottom: 0.5rem;
-    margin-left: 0;
-}
-
-blockquote {
-    margin: 0 0 1rem;
-}
-
-b,
-strong {
-    font-weight: bolder;
-}
-
-small {
-    font-size: 0.875em;
-}
-
-mark {
-    padding: 0.1875em;
-    color: var(--bs-highlight-color);
-    background-color: var(--bs-highlight-bg);
-}
-
-sub,
-sup {
-    position: relative;
-    font-size: 0.75em;
-    line-height: 0;
-    vertical-align: baseline;
-}
-
-sub {
-    bottom: -0.25em;
-}
-
-sup {
-    top: -0.5em;
-}
-
-a {
-    color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1));
-    text-decoration: underline;
-}
-
-a:hover {
-    --bs-link-color-rgb: var(--bs-link-hover-color-rgb);
-}
-
-a:not([href]):not([class]), a:not([href]):not([class]):hover {
-    color: inherit;
-    text-decoration: none;
-}
-
-pre,
-code,
-kbd,
-samp {
-    font-family: var(--bs-font-monospace);
-    font-size: 1em;
-}
-
-pre {
-    display: block;
-    margin-top: 0;
-    margin-bottom: 1rem;
-    overflow: auto;
-    font-size: 0.875em;
-}
-
-pre code {
-    font-size: inherit;
-    color: inherit;
-    word-break: normal;
-}
-
-code {
-    font-size: 0.875em;
-    color: var(--bs-code-color);
-    word-wrap: break-word;
-}
-
-a > code {
-    color: inherit;
-}
-
-kbd {
-    padding: 0.1875rem 0.375rem;
-    font-size: 0.875em;
-    color: var(--bs-body-bg);
-    background-color: var(--bs-body-color);
-    border-radius: 0.25rem;
-}
-
-kbd kbd {
-    padding: 0;
-    font-size: 1em;
-}
-
-figure {
-    margin: 0 0 1rem;
-}
-
-img,
-svg {
-    vertical-align: middle;
-}
-
-table {
-    caption-side: bottom;
-    border-collapse: collapse;
-}
-
-caption {
-    padding-top: 0.5rem;
-    padding-bottom: 0.5rem;
-    color: var(--bs-secondary-color);
-    text-align: left;
-}
-
-th {
-    text-align: inherit;
-    text-align: -webkit-match-parent;
-}
-
-thead,
-tbody,
-tfoot,
-tr,
-td,
-th {
-    border-color: inherit;
-    border-style: solid;
-    border-width: 0;
-}
-
-label {
-    display: inline-block;
-}
-
-button {
-    border-radius: 0;
-}
-
-button:focus:not(:focus-visible) {
-    outline: 0;
-}
-
-input,
-button,
-select,
-optgroup,
-textarea {
-    margin: 0;
-    font-family: inherit;
-    font-size: inherit;
-    line-height: inherit;
-}
-
-button,
-select {
-    text-transform: none;
-}
-
-[role=button] {
-    cursor: pointer;
-}
-
-select {
-    word-wrap: normal;
-}
-
-select:disabled {
-    opacity: 1;
-}
-
-[list]:not([type=date]):not([type=datetime-local]):not([type=month]):not([type=week]):not([type=time])::-webkit-calendar-picker-indicator {
-    display: none !important;
-}
-
-button,
-[type=button],
-[type=reset],
-[type=submit] {
-    -webkit-appearance: button;
-}
-
-button:not(:disabled),
-[type=button]:not(:disabled),
-[type=reset]:not(:disabled),
-[type=submit]:not(:disabled) {
-    cursor: pointer;
-}
-
-::-moz-focus-inner {
-    padding: 0;
-    border-style: none;
-}
-
-textarea {
-    resize: vertical;
-}
-
-fieldset {
-    min-width: 0;
-    padding: 0;
-    margin: 0;
-    border: 0;
-}
-
-legend {
-    float: left;
-    width: 100%;
-    padding: 0;
-    margin-bottom: 0.5rem;
-    font-size: calc(1.275rem + 0.3vw);
-    line-height: inherit;
-}
-
-@media (min-width: 1200px) {
-    legend {
-        font-size: 1.5rem;
-    }
-}
-
-legend + * {
-    clear: left;
-}
-
-::-webkit-datetime-edit-fields-wrapper,
-::-webkit-datetime-edit-text,
-::-webkit-datetime-edit-minute,
-::-webkit-datetime-edit-hour-field,
-::-webkit-datetime-edit-day-field,
-::-webkit-datetime-edit-month-field,
-::-webkit-datetime-edit-year-field {
-    padding: 0;
-}
-
-::-webkit-inner-spin-button {
-    height: auto;
-}
-
-[type=search] {
-    -webkit-appearance: textfield;
-    outline-offset: -2px;
-}
-
-/* rtl:raw:
-[type="tel"],
-[type="url"],
-[type="email"],
-[type="number"] {
-  direction: ltr;
-}
-*/
-::-webkit-search-decoration {
-    -webkit-appearance: none;
-}
-
-::-webkit-color-swatch-wrapper {
-    padding: 0;
-}
-
-::-webkit-file-upload-button {
-    font: inherit;
-    -webkit-appearance: button;
-}
-
-::file-selector-button {
-    font: inherit;
-    -webkit-appearance: button;
-}
-
-output {
-    display: inline-block;
-}
-
-iframe {
-    border: 0;
-}
-
-summary {
-    display: list-item;
-    cursor: pointer;
-}
-
-progress {
-    vertical-align: baseline;
-}
-
-[hidden] {
-    display: none !important;
-}
-
-/*# sourceMappingURL=bootstrap-reboot.css.map */
@@ -1,608 +0,0 @@
-/*!
- * Bootstrap Reboot v5.3.3 (https://getbootstrap.com/)
- * Copyright 2011-2024 The Bootstrap Authors
- * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
- */
-:root,
-[data-bs-theme=light] {
-    --bs-blue: #0d6efd;
-    --bs-indigo: #6610f2;
-    --bs-purple: #6f42c1;
-    --bs-pink: #d63384;
-    --bs-red: #dc3545;
-    --bs-orange: #fd7e14;
-    --bs-yellow: #ffc107;
-    --bs-green: #198754;
-    --bs-teal: #20c997;
-    --bs-cyan: #0dcaf0;
-    --bs-black: #000;
-    --bs-white: #fff;
-    --bs-gray: #6c757d;
-    --bs-gray-dark: #343a40;
-    --bs-gray-100: #f8f9fa;
-    --bs-gray-200: #e9ecef;
-    --bs-gray-300: #dee2e6;
-    --bs-gray-400: #ced4da;
-    --bs-gray-500: #adb5bd;
-    --bs-gray-600: #6c757d;
-    --bs-gray-700: #495057;
-    --bs-gray-800: #343a40;
-    --bs-gray-900: #212529;
-    --bs-primary: #0d6efd;
-    --bs-secondary: #6c757d;
-    --bs-success: #198754;
-    --bs-info: #0dcaf0;
-    --bs-warning: #ffc107;
-    --bs-danger: #dc3545;
-    --bs-light: #f8f9fa;
-    --bs-dark: #212529;
-    --bs-primary-rgb: 13, 110, 253;
-    --bs-secondary-rgb: 108, 117, 125;
-    --bs-success-rgb: 25, 135, 84;
-    --bs-info-rgb: 13, 202, 240;
-    --bs-warning-rgb: 255, 193, 7;
-    --bs-danger-rgb: 220, 53, 69;
-    --bs-light-rgb: 248, 249, 250;
-    --bs-dark-rgb: 33, 37, 41;
-    --bs-primary-text-emphasis: #052c65;
-    --bs-secondary-text-emphasis: #2b2f32;
-    --bs-success-text-emphasis: #0a3622;
-    --bs-info-text-emphasis: #055160;
-    --bs-warning-text-emphasis: #664d03;
-    --bs-danger-text-emphasis: #58151c;
-    --bs-light-text-emphasis: #495057;
-    --bs-dark-text-emphasis: #495057;
-    --bs-primary-bg-subtle: #cfe2ff;
-    --bs-secondary-bg-subtle: #e2e3e5;
-    --bs-success-bg-subtle: #d1e7dd;
-    --bs-info-bg-subtle: #cff4fc;
-    --bs-warning-bg-subtle: #fff3cd;
-    --bs-danger-bg-subtle: #f8d7da;
-    --bs-light-bg-subtle: #fcfcfd;
-    --bs-dark-bg-subtle: #ced4da;
-    --bs-primary-border-subtle: #9ec5fe;
-    --bs-secondary-border-subtle: #c4c8cb;
-    --bs-success-border-subtle: #a3cfbb;
-    --bs-info-border-subtle: #9eeaf9;
-    --bs-warning-border-subtle: #ffe69c;
-    --bs-danger-border-subtle: #f1aeb5;
-    --bs-light-border-subtle: #e9ecef;
-    --bs-dark-border-subtle: #adb5bd;
-    --bs-white-rgb: 255, 255, 255;
-    --bs-black-rgb: 0, 0, 0;
-    --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-    --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-    --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
-    --bs-body-font-family: var(--bs-font-sans-serif);
-    --bs-body-font-size: 1rem;
-    --bs-body-font-weight: 400;
-    --bs-body-line-height: 1.5;
-    --bs-body-color: #212529;
-    --bs-body-color-rgb: 33, 37, 41;
-    --bs-body-bg: #fff;
-    --bs-body-bg-rgb: 255, 255, 255;
-    --bs-emphasis-color: #000;
-    --bs-emphasis-color-rgb: 0, 0, 0;
-    --bs-secondary-color: rgba(33, 37, 41, 0.75);
-    --bs-secondary-color-rgb: 33, 37, 41;
-    --bs-secondary-bg: #e9ecef;
-    --bs-secondary-bg-rgb: 233, 236, 239;
-    --bs-tertiary-color: rgba(33, 37, 41, 0.5);
-    --bs-tertiary-color-rgb: 33, 37, 41;
-    --bs-tertiary-bg: #f8f9fa;
-    --bs-tertiary-bg-rgb: 248, 249, 250;
-    --bs-heading-color: inherit;
-    --bs-link-color: #0d6efd;
-    --bs-link-color-rgb: 13, 110, 253;
-    --bs-link-decoration: underline;
-    --bs-link-hover-color: #0a58ca;
-    --bs-link-hover-color-rgb: 10, 88, 202;
-    --bs-code-color: #d63384;
-    --bs-highlight-color: #212529;
-    --bs-highlight-bg: #fff3cd;
-    --bs-border-width: 1px;
-    --bs-border-style: solid;
-    --bs-border-color: #dee2e6;
-    --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
-    --bs-border-radius: 0.375rem;
-    --bs-border-radius-sm: 0.25rem;
-    --bs-border-radius-lg: 0.5rem;
-    --bs-border-radius-xl: 1rem;
-    --bs-border-radius-xxl: 2rem;
-    --bs-border-radius-2xl: var(--bs-border-radius-xxl);
-    --bs-border-radius-pill: 50rem;
-    --bs-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
-    --bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
-    --bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
-    --bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);
-    --bs-focus-ring-width: 0.25rem;
-    --bs-focus-ring-opacity: 0.25;
-    --bs-focus-ring-color: rgba(13, 110, 253, 0.25);
-    --bs-form-valid-color: #198754;
-    --bs-form-valid-border-color: #198754;
-    --bs-form-invalid-color: #dc3545;
-    --bs-form-invalid-border-color: #dc3545;
-}
-
-[data-bs-theme=dark] {
-    color-scheme: dark;
-    --bs-body-color: #dee2e6;
-    --bs-body-color-rgb: 222, 226, 230;
-    --bs-body-bg: #212529;
-    --bs-body-bg-rgb: 33, 37, 41;
-    --bs-emphasis-color: #fff;
-    --bs-emphasis-color-rgb: 255, 255, 255;
-    --bs-secondary-color: rgba(222, 226, 230, 0.75);
-    --bs-secondary-color-rgb: 222, 226, 230;
-    --bs-secondary-bg: #343a40;
-    --bs-secondary-bg-rgb: 52, 58, 64;
-    --bs-tertiary-color: rgba(222, 226, 230, 0.5);
-    --bs-tertiary-color-rgb: 222, 226, 230;
-    --bs-tertiary-bg: #2b3035;
-    --bs-tertiary-bg-rgb: 43, 48, 53;
-    --bs-primary-text-emphasis: #6ea8fe;
-    --bs-secondary-text-emphasis: #a7acb1;
-    --bs-success-text-emphasis: #75b798;
-    --bs-info-text-emphasis: #6edff6;
-    --bs-warning-text-emphasis: #ffda6a;
-    --bs-danger-text-emphasis: #ea868f;
-    --bs-light-text-emphasis: #f8f9fa;
-    --bs-dark-text-emphasis: #dee2e6;
-    --bs-primary-bg-subtle: #031633;
-    --bs-secondary-bg-subtle: #161719;
-    --bs-success-bg-subtle: #051b11;
-    --bs-info-bg-subtle: #032830;
-    --bs-warning-bg-subtle: #332701;
-    --bs-danger-bg-subtle: #2c0b0e;
-    --bs-light-bg-subtle: #343a40;
-    --bs-dark-bg-subtle: #1a1d20;
-    --bs-primary-border-subtle: #084298;
-    --bs-secondary-border-subtle: #41464b;
-    --bs-success-border-subtle: #0f5132;
-    --bs-info-border-subtle: #087990;
-    --bs-warning-border-subtle: #997404;
-    --bs-danger-border-subtle: #842029;
-    --bs-light-border-subtle: #495057;
-    --bs-dark-border-subtle: #343a40;
-    --bs-heading-color: inherit;
-    --bs-link-color: #6ea8fe;
-    --bs-link-hover-color: #8bb9fe;
-    --bs-link-color-rgb: 110, 168, 254;
-    --bs-link-hover-color-rgb: 139, 185, 254;
-    --bs-code-color: #e685b5;
-    --bs-highlight-color: #dee2e6;
-    --bs-highlight-bg: #664d03;
-    --bs-border-color: #495057;
-    --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
-    --bs-form-valid-color: #75b798;
-    --bs-form-valid-border-color: #75b798;
-    --bs-form-invalid-color: #ea868f;
-    --bs-form-invalid-border-color: #ea868f;
-}
-
-*,
-*::before,
-*::after {
-    box-sizing: border-box;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-    :root {
-        scroll-behavior: smooth;
-    }
-}
-
-body {
-    margin: 0;
-    font-family: var(--bs-body-font-family);
-    font-size: var(--bs-body-font-size);
-    font-weight: var(--bs-body-font-weight);
-    line-height: var(--bs-body-line-height);
-    color: var(--bs-body-color);
-    text-align: var(--bs-body-text-align);
-    background-color: var(--bs-body-bg);
-    -webkit-text-size-adjust: 100%;
-    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-}
-
-hr {
-    margin: 1rem 0;
-    color: inherit;
-    border: 0;
-    border-top: var(--bs-border-width) solid;
-    opacity: 0.25;
-}
-
-h6, h5, h4, h3, h2, h1 {
-    margin-top: 0;
-    margin-bottom: 0.5rem;
-    font-weight: 500;
-    line-height: 1.2;
-    color: var(--bs-heading-color);
-}
-
-h1 {
-    font-size: calc(1.375rem + 1.5vw);
-}
-
-@media (min-width: 1200px) {
-    h1 {
-        font-size: 2.5rem;
-    }
-}
-
-h2 {
-    font-size: calc(1.325rem + 0.9vw);
-}
-
-@media (min-width: 1200px) {
-    h2 {
-        font-size: 2rem;
-    }
-}
-
-h3 {
-    font-size: calc(1.3rem + 0.6vw);
-}
-
-@media (min-width: 1200px) {
-    h3 {
-        font-size: 1.75rem;
-    }
-}
-
-h4 {
-    font-size: calc(1.275rem + 0.3vw);
-}
-
-@media (min-width: 1200px) {
-    h4 {
-        font-size: 1.5rem;
-    }
-}
-
-h5 {
-    font-size: 1.25rem;
-}
-
-h6 {
-    font-size: 1rem;
-}
-
-p {
-    margin-top: 0;
-    margin-bottom: 1rem;
-}
-
-abbr[title] {
-    -webkit-text-decoration: underline dotted;
-    text-decoration: underline dotted;
-    cursor: help;
-    -webkit-text-decoration-skip-ink: none;
-    text-decoration-skip-ink: none;
-}
-
-address {
-    margin-bottom: 1rem;
-    font-style: normal;
-    line-height: inherit;
-}
-
-ol,
-ul {
-    padding-right: 2rem;
-}
-
-ol,
-ul,
-dl {
-    margin-top: 0;
-    margin-bottom: 1rem;
-}
-
-ol ol,
-ul ul,
-ol ul,
-ul ol {
-    margin-bottom: 0;
-}
-
-dt {
-    font-weight: 700;
-}
-
-dd {
-    margin-bottom: 0.5rem;
-    margin-right: 0;
-}
-
-blockquote {
-    margin: 0 0 1rem;
-}
-
-b,
-strong {
-    font-weight: bolder;
-}
-
-small {
-    font-size: 0.875em;
-}
-
-mark {
-    padding: 0.1875em;
-    color: var(--bs-highlight-color);
-    background-color: var(--bs-highlight-bg);
-}
-
-sub,
-sup {
-    position: relative;
-    font-size: 0.75em;
-    line-height: 0;
-    vertical-align: baseline;
-}
-
-sub {
-    bottom: -0.25em;
-}
-
-sup {
-    top: -0.5em;
-}
-
-a {
-    color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1));
-    text-decoration: underline;
-}
-
-a:hover {
-    --bs-link-color-rgb: var(--bs-link-hover-color-rgb);
-}
-
-a:not([href]):not([class]), a:not([href]):not([class]):hover {
-    color: inherit;
-    text-decoration: none;
-}
-
-pre,
-code,
-kbd,
-samp {
-    font-family: var(--bs-font-monospace);
-    font-size: 1em;
-}
-
-pre {
-    display: block;
-    margin-top: 0;
-    margin-bottom: 1rem;
-    overflow: auto;
-    font-size: 0.875em;
-}
-
-pre code {
-    font-size: inherit;
-    color: inherit;
-    word-break: normal;
-}
-
-code {
-    font-size: 0.875em;
-    color: var(--bs-code-color);
-    word-wrap: break-word;
-}
-
-a > code {
-    color: inherit;
-}
-
-kbd {
-    padding: 0.1875rem 0.375rem;
-    font-size: 0.875em;
-    color: var(--bs-body-bg);
-    background-color: var(--bs-body-color);
-    border-radius: 0.25rem;
-}
-
-kbd kbd {
-    padding: 0;
-    font-size: 1em;
-}
-
-figure {
-    margin: 0 0 1rem;
-}
-
-img,
-svg {
-    vertical-align: middle;
-}
-
-table {
-    caption-side: bottom;
-    border-collapse: collapse;
-}
-
-caption {
-    padding-top: 0.5rem;
-    padding-bottom: 0.5rem;
-    color: var(--bs-secondary-color);
-    text-align: right;
-}
-
-th {
-    text-align: inherit;
-    text-align: -webkit-match-parent;
-}
-
-thead,
-tbody,
-tfoot,
-tr,
-td,
-th {
-    border-color: inherit;
-    border-style: solid;
-    border-width: 0;
-}
-
-label {
-    display: inline-block;
-}
-
-button {
-    border-radius: 0;
-}
-
-button:focus:not(:focus-visible) {
-    outline: 0;
-}
-
-input,
-button,
-select,
-optgroup,
-textarea {
-    margin: 0;
-    font-family: inherit;
-    font-size: inherit;
-    line-height: inherit;
-}
-
-button,
-select {
-    text-transform: none;
-}
-
-[role=button] {
-    cursor: pointer;
-}
-
-select {
-    word-wrap: normal;
-}
-
-select:disabled {
-    opacity: 1;
-}
-
-[list]:not([type=date]):not([type=datetime-local]):not([type=month]):not([type=week]):not([type=time])::-webkit-calendar-picker-indicator {
-    display: none !important;
-}
-
-button,
-[type=button],
-[type=reset],
-[type=submit] {
-    -webkit-appearance: button;
-}
-
-button:not(:disabled),
-[type=button]:not(:disabled),
-[type=reset]:not(:disabled),
-[type=submit]:not(:disabled) {
-    cursor: pointer;
-}
-
-::-moz-focus-inner {
-    padding: 0;
-    border-style: none;
-}
-
-textarea {
-    resize: vertical;
-}
-
-fieldset {
-    min-width: 0;
-    padding: 0;
-    margin: 0;
-    border: 0;
-}
-
-legend {
-    float: right;
-    width: 100%;
-    padding: 0;
-    margin-bottom: 0.5rem;
-    font-size: calc(1.275rem + 0.3vw);
-    line-height: inherit;
-}
-
-@media (min-width: 1200px) {
-    legend {
-        font-size: 1.5rem;
-    }
-}
-
-legend + * {
-    clear: right;
-}
-
-::-webkit-datetime-edit-fields-wrapper,
-::-webkit-datetime-edit-text,
-::-webkit-datetime-edit-minute,
-::-webkit-datetime-edit-hour-field,
-::-webkit-datetime-edit-day-field,
-::-webkit-datetime-edit-month-field,
-::-webkit-datetime-edit-year-field {
-    padding: 0;
-}
-
-::-webkit-inner-spin-button {
-    height: auto;
-}
-
-[type=search] {
-    -webkit-appearance: textfield;
-    outline-offset: -2px;
-}
-
-[type="tel"],
-[type="url"],
-[type="email"],
-[type="number"] {
-    direction: ltr;
-}
-
-::-webkit-search-decoration {
-    -webkit-appearance: none;
-}
-
-::-webkit-color-swatch-wrapper {
-    padding: 0;
-}
-
-::-webkit-file-upload-button {
-    font: inherit;
-    -webkit-appearance: button;
-}
-
-::file-selector-button {
-    font: inherit;
-    -webkit-appearance: button;
-}
-
-output {
-    display: inline-block;
-}
-
-iframe {
-    border: 0;
-}
-
-summary {
-    display: list-item;
-    cursor: pointer;
-}
-
-progress {
-    vertical-align: baseline;
-}
-
-[hidden] {
-    display: none !important;
-}
-
-/*# sourceMappingURL=bootstrap-reboot.rtl.css.map */
@@ -1,5 +1,6 @@
 using Chrono.Model;
 using Microsoft.EntityFrameworkCore;
+using Server.Models;

 namespace Server;

@@ -10,9 +11,18 @@ public class AppDbContext : DbContext
    }

    public DbSet<CardNote> CardNotes { get; set; }
+    public DbSet<UserDeck> UserDecks { get; set; }
+    public DbSet<PasskeyCredential> PasskeyCredentials { get; set; }

    protected override void OnModelCreating(ModelBuilder modelBuilder)
    {
        modelBuilder.Entity<CardNote>().HasKey(n => n.CardName);
+
+        modelBuilder.Entity<UserDeck>(b =>
+        {
+            b.HasKey(d => d.Id);
+            b.Property(d => d.Cards).HasColumnType("jsonb");
+            b.Property(d => d.Divers).HasColumnType("jsonb");
+        });
    }
 }
@@ -0,0 +1,15 @@
+using Microsoft.EntityFrameworkCore;
+using Microsoft.EntityFrameworkCore.Design;
+
+namespace Server;
+
+public class AppDbContextFactory : IDesignTimeDbContextFactory<AppDbContext>
+{
+    public AppDbContext CreateDbContext(string[] args)
+    {
+        var options = new DbContextOptionsBuilder<AppDbContext>()
+            .UseNpgsql("Host=localhost;Database=chrono;Username=postgres;Password=postgres")
+            .Options;
+        return new AppDbContext(options);
+    }
+}
@@ -13,14 +13,17 @@
    <link href="/lib/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="/_content/Telerik.UI.for.Blazor/css/kendo-theme-bootstrap/all.css" rel="stylesheet"/>
    <link href="/css/app.css" rel="stylesheet"/>
-    <link href="/_content/Shared/Shared.styles.css" rel="stylesheet"/>
+    <link href="/Server.styles.css" rel="stylesheet"/>
    <script defer src="/_content/Telerik.UI.for.Blazor/js/telerik-blazor.js"></script>
+    <script src="/js/passkey.js"></script>
    <link href="/favicon.png" rel="icon" type="image/png"/>
    <HeadOutlet/>
 </head>

 <body>
-<Routes/>
+<CascadingAuthenticationState>
+    <Routes/>
+</CascadingAuthenticationState>
 <script src="_framework/blazor.web.js"></script>
 </body>

@@ -0,0 +1,282 @@
+
+@using System.Text.RegularExpressions
+@namespace Chrono.Components
+
+@if (Card != null)
+{
+    <div class="modal-backdrop" @onclick="HandleBackdropClick"></div>
+    <div class="card-detail @(!HasImage ? "card-detail-noimg" : "")">
+        <button class="detail-close" @onclick="HandleClose"><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">@RenderDescription(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="() => Navigate(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="() => Navigate(fromCard)">@Card.ImmortalizeFrom</button>
+                                }
+                                else
+                                {
+                                    @Card.ImmortalizeFrom
+                                }
+                            }
+                        </span>
+                    </div>
+                }
+
+                @if (ShowNotes && Card.IsAgent)
+                {
+                    <div class="detail-field note">
+                        <span class="field-label"><i class="bi bi-pencil-fill"></i> Personal Note</span>
+                        <textarea class="form-control note-input" @bind="currentNote" @onblur="SaveNote"
+                                  placeholder="Add a private note about this agent..."></textarea>
+                        @if (isSaving)
+                        {
+                            <span class="saving-indicator">Saving...</span>
+                        }
+                    </div>
+                }
+            </div>
+        </div>
+    </div>
+}
+
+@code {
+    [Parameter] public CardData? Card { get; set; }
+    [Parameter] public EventCallback OnClose { get; set; }
+    [Parameter] public EventCallback<CardData> OnNavigate { get; set; }
+    [Parameter] public bool ShowNotes { get; set; }
+
+    [Inject] private HttpClient Http { get; set; } = default!;
+
+    private bool HasImage => Card?.ImageFile is { Length: > 0 } && Card.ImageFile != "placeholder.png";
+
+    private string currentNote = "";
+    private bool isSaving;
+
+    protected override void OnParametersSet()
+    {
+        if (Card != null && Card.IsAgent)
+        {
+            currentNote = "";
+            _ = LoadNote();
+        }
+    }
+
+    private async Task LoadNote()
+    {
+        if (Card == null || !Card.IsAgent) return;
+        try
+        {
+            var note = await Http.GetFromJsonAsync<CardNote>($"api/notes/{Uri.EscapeDataString(Card.Name)}");
+            currentNote = note?.Note ?? "";
+        }
+        catch
+        {
+            currentNote = "";
+        }
+    }
+
+    private async Task SaveNote()
+    {
+        if (Card == null || !Card.IsAgent) return;
+
+        isSaving = true;
+        try
+        {
+            await Http.PostAsJsonAsync("api/notes", new CardNote { CardName = Card.Name, Note = currentNote });
+        }
+        catch
+        {
+        }
+        finally
+        {
+            isSaving = false;
+        }
+    }
+
+    private void HandleClose()
+    {
+        _ = OnClose.InvokeAsync();
+    }
+
+    private void HandleBackdropClick()
+    {
+        _ = OnClose.InvokeAsync();
+    }
+
+    private void Navigate(CardData card)
+    {
+        _ = OnNavigate.InvokeAsync(card);
+    }
+
+    private static CardData? LookupCard(string cardName)
+    {
+        return CardDatabase.Cards.FirstOrDefault(c =>
+            string.Equals(c.Name, cardName, StringComparison.OrdinalIgnoreCase));
+    }
+
+    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();
+
+            var seq = 0;
+            var remaining = description;
+
+            while (!string.IsNullOrEmpty(remaining))
+            {
+                var bestIdx = -1;
+                string? bestName = null;
+
+                foreach (var name in cardNames)
+                {
+                    var pattern = $@"\b{Regex.Escape(name)}\b";
+                    var match = Regex.Match(remaining, pattern, RegexOptions.IgnoreCase);
+
+                    if (match.Success)
+                    {
+                        if (bestIdx == -1 || match.Index < bestIdx)
+                        {
+                            bestIdx = match.Index;
+                            bestName = match.Value;
+                        }
+                    }
+                }
+
+                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, () => Navigate(card)));
+                        builder.AddContent(seq++, bestName);
+                        builder.CloseElement();
+                    }
+                    else
+                    {
+                        builder.AddContent(seq++, bestName);
+                    }
+
+                    remaining = remaining[(bestIdx + bestName.Length)..];
+                }
+                else
+                {
+                    builder.AddContent(seq++, remaining);
+                    remaining = "";
+                }
+            }
+        };
+    }
+
+}
@@ -0,0 +1,259 @@
+.modal-backdrop {
+    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);
+}
+
+/* ── No-image layout ── */
+.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;
+    }
+}
@@ -0,0 +1,345 @@
+@page "/cards"
+@using Shared.Services
+@inject HttpClient Http
+@inject AnalyticsService AnalyticsService
+
+<PageTitle>Chrono CCG - Card Gallery</PageTitle>
+
+<HeadContent>
+    <meta name="description" content="Browse and filter all Chrono CCG cards. Explore agents, spells, and more."/>
+</HeadContent>
+
+<div class="gallery-container">
+    <div class="gallery-header">
+        <h1>Card Gallery</h1>
+        <p class="text-secondary">Browse all @allCards.Count cards</p>
+    </div>
+
+    <div class="category-tabs">
+        <button class="tab @(categoryFilter == "" ? "active" : "")" @onclick='@(() => SetCategory(""))'>
+            <i class="bi bi-grid-3x3-gap-fill"></i> All
+        </button>
+
+        <button class="tab agent @(categoryFilter == "Agent" ? "active" : "")" @onclick='@(() => SetCategory("Agent"))'>
+            <i class="bi bi-person-fill"></i> Agents
+        </button>
+        <button class="tab agent @(categoryFilter == "Immortalized" ? "active" : "")"
+                @onclick='@(() => SetCategory("Immortalized"))'>
+            <i class="bi bi-person-fill"></i> Immortalized
+        </button>
+
+        <div class="tab link-toggle @(agentLink ? "active" : "")" @onclick="ToggleAgentLink" title="Link Agents and Immortalized cards">
+            <i class="bi bi-link-45deg"></i>
+            <span>Linked</span>
+            <span class="toggle-switch @(agentLink ? "on" : "off")"></span>
+        </div>
+
+        <div class="category-divider"></div>
+
+        <button class="tab spell @(categoryFilter == "Spell" ? "active" : "")" @onclick='@(() => SetCategory("Spell"))'>
+            <i class="bi bi-wand"></i> Spells
+        </button>
+    </div>
+
+    <div class="filter-bar">
+        <div class="search-wrapper">
+            <i class="bi bi-search search-icon"></i>
+            <input @bind="search" @bind:event="oninput" class="form-control search-input"
+                   placeholder="Search cards by name or description..."/>
+            @if (search.Length > 0)
+            {
+                <button class="search-clear" @onclick="ClearSearch"><i class="bi bi-x-lg"></i></button>
+            }
+        </div>
+        <select @bind="factionFilter" class="form-select filter-select">
+            <option value="">All Factions</option>
+            @foreach (var f in factions)
+            {
+                <option value="@f">@f</option>
+            }
+        </select>
+        <select @bind="costFilter" class="form-select filter-select">
+            <option value="">All Costs</option>
+            @for (var i = 0; i <= 13; i++)
+            {
+                <option value="@i">@i</option>
+            }
+        </select>
+        <div class="sort-group d-flex gap-1">
+            <select @bind="sortBy" class="form-select filter-select sort-select">
+                <option value="Cost">Sort by Cost</option>
+                <option value="Name">Sort by Name</option>
+                <option value="Attack">Sort by Attack</option>
+                <option value="Health">Sort by Health</option>
+                <option value="Efficiency">Sort by Efficiency</option>
+            </select>
+            <button class="btn btn-outline-secondary sort-dir-btn" @onclick="() => sortDescending = !sortDescending"
+                    title="@(sortDescending ? "Descending" : "Ascending")">
+                <i class="bi bi-sort-@(sortDescending ? "down" : "up")"></i>
+            </button>
+        </div>
+        <button class="btn @(showDetailedView ? "btn-primary" : "btn-outline-primary") view-toggle-btn"
+                @onclick="() => showDetailedView = !showDetailedView" title="Toggle Detailed View">
+            <i class="bi bi-list-ul"></i>
+        </button>
+    </div>
+
+    @if (HasActiveFilters)
+    {
+        <div class="active-filters">
+            <span class="filter-label">Filters:</span>
+            @if (categoryFilter != "")
+            {
+                <span class="filter-chip">
+                    <i class="bi bi-tag-fill"></i> @categoryFilter
+                    <button @onclick="ClearCategoryFilter"><i class="bi bi-x"></i></button>
+                </span>
+            }
+            @if (factionFilter != "")
+            {
+                <span class="filter-chip">
+                    <i class="bi bi-flag-fill"></i> @factionFilter
+                    <button @onclick="ClearFactionFilter"><i class="bi bi-x"></i></button>
+                </span>
+            }
+            @if (costFilter != "")
+            {
+                <span class="filter-chip">
+                    <i class="bi bi-lightning-fill"></i> Cost @costFilter
+                    <button @onclick="ClearCostFilter"><i class="bi bi-x"></i></button>
+                </span>
+            }
+            <button class="clear-all" @onclick="ClearFilters">Clear all</button>
+        </div>
+    }
+
+    <div class="result-count">
+        <span>@filteredCards.Count() card@(filteredCards.Count() != 1 ? "s" : "") found</span>
+        @if (HasActiveFilters || search != "")
+        {
+            <span class="text-muted">out of @allCards.Count total</span>
+        }
+    </div>
+
+    @if (filteredCards.Any())
+    {
+        <div class="card-grid @(showDetailedView ? "detailed-view" : "")">
+            @{ var idx = 0; }
+            @foreach (var card in filteredCards.Where(a => a.Category is "Agent" or "Spell" or "Immortalized"))
+            {
+                <div class="card-cell @(selectedCard == card ? "selected" : "")"
+                     style="--i: @idx"
+                     @onclick="() => SelectCard(card)">
+                    <div class="card-image-wrapper">
+                        <div class="card-shimmer"></div>
+                        <img src="@card.ImagePath" alt="@card.Name" loading="lazy"
+                             onerror="this.src='data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22200%22 height=%22280%22><rect fill=%22%23222244%22 width=%22200%22 height=%22280%22/><text fill=%22%23686888%22 font-size=%2214%22 x=%22100%22 y=%22140%22 text-anchor=%22middle%22 dominant-baseline=%22middle%22>No Image</text></svg>'"/>
+                        @if (card.IsImmortalized)
+                        {
+                            <div class="card-immortalize-badge" title="Immortalizes"><i class="bi bi-star-fill"></i>
+                            </div>
+                        }
+                    </div>
+                    @if (showDetailedView)
+                    {
+                        <div class="card-label">
+                            <div class="card-name">@card.Name</div>
+                            <div class="card-stats">
+                                @if (card.Attack.HasValue)
+                                {
+                                    <span class="stat"><i class="bi bi-crosshair"></i> @card.Attack</span>
+                                }
+                                @if (card.Health.HasValue)
+                                {
+                                    <span class="stat"><i class="bi bi-heart-fill"></i> @card.Health</span>
+                                }
+                            </div>
+                            <div class="card-description-preview">@card.Description</div>
+                            <div class="card-category-badge @card.Category?.ToLowerInvariant()">@card.Category</div>
+
+                        </div>
+                    }
+                </div>
+                idx++;
+            }
+        </div>
+    }
+    else
+    {
+        <div class="empty-state">
+            <i class="bi bi-search"></i>
+            <p>No cards match your filters.</p>
+            <button class="btn btn-outline-secondary" @onclick="ClearFilters">Reset Filters</button>
+        </div>
+    }
+</div>
+
+@if (selectedCard != null)
+{
+    <CardDialog Card="selectedCard" OnClose="CloseDetail" OnNavigate="SelectCard"/>
+}
+
+@code {
+    private List<CardData> allCards = [];
+    private IEnumerable<CardData> filteredCards => ApplyFilters();
+    private string search = "";
+    private string categoryFilter = "";
+    private string immortalFilter = "";
+    private bool agentLink = true;
+    private string factionFilter = "";
+    private string costFilter = "";
+    private string sortBy = "Cost";
+    private bool sortDescending;
+    private bool showDetailedView;
+    private CardData? selectedCard;
+    private List<string> factions = [];
+
+    private bool HasActiveFilters => categoryFilter != "" || factionFilter != "" || costFilter != "" || immortalFilter != "";
+
+    protected override void OnInitialized()
+    {
+        allCards = CardDatabase.Cards;
+        factions = allCards
+            .Select(c => c.Faction)
+            .Where(f => f != null)
+            .Distinct()
+            .OrderBy(f => f)
+            .ToList()!;
+    }
+
+    private IEnumerable<CardData> ApplyFilters()
+    {
+        var primarySet = allCards.Where(c =>
+            c.MatchesSearch(search) &&
+            (categoryFilter == "" || c.Category == categoryFilter) &&
+            (factionFilter == "" || c.Faction == factionFilter) &&
+            (costFilter == "" || c.Cost?.ToString() == costFilter)
+        );
+
+        var sortedPrimary = sortBy switch
+        {
+            "Cost" => sortDescending ? primarySet.OrderByDescending(c => c.Cost) : primarySet.OrderBy(c => c.Cost),
+            "Efficiency" => sortDescending ? primarySet.OrderByDescending(c => c.StatEfficiency) : primarySet.OrderBy(c => c.StatEfficiency),
+            "Attack" => sortDescending ? primarySet.OrderByDescending(c => c.Attack) : primarySet.OrderBy(c => c.Attack),
+            "Health" => sortDescending ? primarySet.OrderByDescending(c => c.Health) : primarySet.OrderBy(c => c.Health),
+            _ => sortDescending ? primarySet.OrderByDescending(c => c.Name) : primarySet.OrderBy(c => c.Name)
+        };
+
+        if (!agentLink)
+        {
+            return sortedPrimary;
+        }
+
+        var result = new List<CardData>();
+        var seen = new HashSet<string>();
+        foreach (var card in sortedPrimary)
+        {
+            if (seen.Contains(card.Name)) continue;
+
+            // Determine the "Chain Head" (the Agent)
+            var head = card;
+            if (card.Category == "Immortalized" && card.ImmortalizeFrom != null)
+            {
+                var source = allCards.FirstOrDefault(c => c.Name == card.ImmortalizeFrom);
+                if (source != null) head = source;
+            }
+
+            // Add the chain starting from head
+            if (!seen.Contains(head.Name))
+            {
+                result.Add(head);
+                seen.Add(head.Name);
+            }
+
+            if (head.ImmortalizeTo != null)
+            {
+                foreach (var targetName in head.ImmortalizeTo)
+                {
+                    if (seen.Contains(targetName)) continue;
+                    var linked = allCards.FirstOrDefault(c => c.Name == targetName);
+                    if (linked != null)
+                    {
+                        result.Add(linked);
+                        seen.Add(linked.Name);
+                    }
+                }
+            }
+
+            // Ensure the original card is added if it was somehow not part of the head's chain
+            if (!seen.Contains(card.Name))
+            {
+                result.Add(card);
+                seen.Add(card.Name);
+            }
+        }
+        return result;
+    }
+
+    private void SetImmortal(string imm)
+    {
+        immortalFilter = immortalFilter == imm ? "" : imm;
+    }
+
+    private void ClearImmortalFilter()
+    {
+        immortalFilter = "";
+    }
+
+    private void SetCategory(string cat)
+    {
+        categoryFilter = categoryFilter == cat ? "" : cat;
+        _ = AnalyticsService.TrackEvent("filter_category", new { category = categoryFilter });
+    }
+
+    private void ClearCategoryFilter()
+    {
+        categoryFilter = "";
+        _ = AnalyticsService.TrackEvent("filter_category", new { category = "All" });
+    }
+
+    private void ClearFactionFilter()
+    {
+        factionFilter = "";
+    }
+
+    private void ToggleAgentLink()
+    {
+        agentLink = !agentLink;
+        OnToggleAgentLink();
+    }
+
+    private void OnToggleAgentLink()
+    {
+        _ = AnalyticsService.TrackEvent("toggle_agent_link", new { enabled = agentLink });
+    }
+
+    private void ClearCostFilter()
+    {
+        costFilter = "";
+    }
+
+    private void ClearSearch()
+    {
+        search = "";
+    }
+
+    private void SelectCard(CardData card)
+    {
+        selectedCard = card;
+        _ = AnalyticsService.TrackEvent("select_item", new { item_name = card.Name, item_category = card.Category });
+    }
+
+    private void CloseDetail()
+    {
+        selectedCard = null;
+    }
+
+    private void ClearFilters()
+    {
+        search = "";
+        categoryFilter = "";
+        factionFilter = "";
+        costFilter = "";
+    }
+
+}
@@ -0,0 +1,604 @@
+.gallery-container {
+    max-width: 1400px;
+    margin: 0 auto;
+    padding: 1.5rem;
+}
+
+/* ── Header ── */
+.gallery-header {
+    margin-bottom: 1.5rem;
+}
+
+.gallery-header h1 {
+    margin-bottom: 0.25rem;
+}
+
+.gallery-header p {
+    font-size: 0.9rem;
+    margin: 0;
+}
+
+/* ── Category Tabs ── */
+.category-tabs {
+    display: flex;
+    gap: 0.4rem;
+    margin-bottom: 1rem;
+    flex-wrap: wrap;
+}
+
+.tab {
+    display: flex;
+    align-items: center;
+    gap: 0.35rem;
+    padding: 0.5rem 1rem;
+    border: 1px solid var(--border);
+    border-radius: 100px;
+    background: transparent;
+    color: var(--text-secondary);
+    font-size: 0.85rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all var(--transition);
+    font-family: inherit;
+}
+
+.tab:hover {
+    background: var(--bg-hover);
+    color: var(--text-primary);
+    border-color: var(--text-muted);
+}
+
+.tab.active {
+    background: var(--bg-elevated);
+    color: var(--text-primary);
+    border-color: var(--accent);
+    box-shadow: 0 0 12px var(--accent-glow);
+}
+
+.tab.active.agent {
+    border-color: #4fc3f7;
+    box-shadow: 0 0 12px rgba(79, 195, 247, 0.3);
+}
+
+.tab.active.spell {
+    border-color: #ce93d8;
+    box-shadow: 0 0 12px rgba(206, 147, 216, 0.3);
+}
+
+.tab.active.token {
+    border-color: #ffd54f;
+    box-shadow: 0 0 12px rgba(255, 213, 79, 0.3);
+}
+
+.tab i {
+    font-size: 0.9rem;
+}
+
+.category-divider {
+    width: 1px;
+    height: 1.5rem;
+    background: var(--border);
+    margin: 0 0.6rem;
+    align-self: center;
+    opacity: 0.6;
+}
+
+.tab.link-toggle {
+    border-style: dashed;
+    gap: 0.6rem;
+    user-select: none;
+    padding-right: 0.8rem;
+    margin-left: 0.2rem;
+}
+
+.tab.link-toggle.active {
+    border-style: solid;
+    background: rgba(108, 99, 255, 0.1);
+    border-color: var(--accent);
+    color: var(--text-primary);
+}
+
+.toggle-switch {
+    width: 28px;
+    height: 16px;
+    background: var(--bg-hover);
+    border-radius: 10px;
+    position: relative;
+    transition: all 0.2s;
+    border: 1px solid var(--border);
+    flex-shrink: 0;
+}
+
+.toggle-switch.on {
+    background: var(--accent);
+    border-color: rgba(255, 255, 255, 0.2);
+}
+
+.toggle-switch::after {
+    content: '';
+    position: absolute;
+    width: 10px;
+    height: 10px;
+    background: white;
+    border-radius: 50%;
+    top: 2px;
+    left: 2px;
+    transition: transform 0.2s;
+}
+
+.toggle-switch.on::after {
+    transform: translateX(12px);
+}
+
+/* ── Filter Bar ── */
+.filter-bar {
+    display: flex;
+    gap: 0.5rem;
+    margin-bottom: 0.75rem;
+    align-items: stretch;
+}
+
+.search-wrapper {
+    position: relative;
+    flex: 1;
+    min-width: 0;
+}
+
+.search-icon {
+    position: absolute;
+    left: 0.75rem;
+    top: 50%;
+    transform: translateY(-50%);
+    color: var(--text-muted);
+    z-index: 3;
+    pointer-events: none;
+    font-size: 0.85rem;
+}
+
+.search-input {
+    padding-left: 2.2rem;
+    padding-right: 2.2rem;
+    height: 100%;
+}
+
+.search-clear {
+    position: absolute;
+    right: 0.5rem;
+    top: 50%;
+    transform: translateY(-50%);
+    background: none;
+    border: none;
+    color: var(--text-muted);
+    cursor: pointer;
+    padding: 0.2rem;
+    display: flex;
+    align-items: center;
+    font-size: 0.7rem;
+    z-index: 3;
+}
+
+.search-clear:hover {
+    color: var(--text-primary);
+}
+
+.filter-select {
+    width: auto;
+    min-width: 140px;
+}
+
+/* ── Active Filter Chips ── */
+.active-filters {
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+    margin-bottom: 0.75rem;
+    flex-wrap: wrap;
+    font-size: 0.85rem;
+}
+
+.filter-label {
+    color: var(--text-muted);
+    font-weight: 500;
+    font-size: 0.8rem;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+}
+
+.filter-chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.3rem;
+    padding: 0.25rem 0.5rem;
+    background: var(--bg-elevated);
+    border: 1px solid var(--border);
+    border-radius: 100px;
+    color: var(--text-secondary);
+    font-size: 0.8rem;
+}
+
+.filter-chip i:first-child {
+    font-size: 0.7rem;
+}
+
+.filter-chip button {
+    background: none;
+    border: none;
+    color: var(--text-muted);
+    cursor: pointer;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    font-size: 0.65rem;
+    line-height: 1;
+}
+
+.filter-chip button:hover {
+    color: var(--text-primary);
+}
+
+.clear-all {
+    background: none;
+    border: none;
+    color: var(--accent);
+    cursor: pointer;
+    font-size: 0.8rem;
+    padding: 0.25rem 0.5rem;
+    font-family: inherit;
+}
+
+.clear-all:hover {
+    text-decoration: underline;
+}
+
+/* ── Result Count ── */
+.result-count {
+    font-size: 0.85rem;
+    color: var(--text-secondary);
+    margin-bottom: 1rem;
+    display: flex;
+    gap: 0.3rem;
+}
+
+/* ── Card Grid ── */
+.card-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
+    gap: 1rem;
+}
+
+.card-grid.detailed-view {
+    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+}
+
+.card-grid.detailed-view .card-cell {
+    display: flex;
+    flex-direction: row;
+    height: 180px;
+    animation: none;
+}
+
+.card-grid.detailed-view .card-image-wrapper {
+    width: 130px;
+    height: 100%;
+    flex-shrink: 0;
+}
+
+.card-grid.detailed-view .card-label {
+    flex: 1;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
+    padding: 0.75rem;
+    gap: 0.4rem;
+    background: var(--bg-surface);
+}
+
+.card-grid.detailed-view .card-name {
+    font-size: 1rem;
+    font-weight: 700;
+    white-space: normal;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    line-height: 1.2;
+}
+
+.card-stats {
+    display: flex;
+    gap: 0.75rem;
+    font-size: 0.85rem;
+    font-weight: 600;
+}
+
+.card-stats .stat {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+}
+
+.card-stats .stat i {
+    font-size: 0.75rem;
+}
+
+.card-stats .stat:nth-child(1) {
+    color: #ffab40;
+}
+
+/* Attack */
+.card-stats .stat:nth-child(2) {
+    color: #f44336;
+}
+
+/* Health */
+
+.card-description-preview {
+    font-size: 0.8rem;
+    color: var(--text-secondary);
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    line-height: 1.4;
+    margin-top: 0.2rem;
+}
+
+.sort-group {
+    min-width: 200px;
+}
+
+.sort-select {
+    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
+}
+
+.sort-dir-btn {
+    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
+    border-left: none;
+    background: var(--bg-surface);
+}
+
+.view-toggle-btn {
+    min-width: 40px;
+    background: var(--bg-surface);
+}
+
+/* ── Card Cell ── */
+.card-cell {
+    cursor: pointer;
+    border-radius: var(--radius);
+    overflow: hidden;
+    background: var(--bg-surface);
+    transition: transform 0.25s ease, box-shadow 0.25s ease;
+    border: 2px solid transparent;
+    animation: card-enter 0.4s ease-out both;
+    animation-delay: calc(var(--i, 0) * 25ms);
+    will-change: transform;
+}
+
+.card-cell:hover {
+    transform: translateY(-6px);
+    box-shadow: 0 8px 30px rgba(108, 99, 255, 0.2);
+    border-color: rgba(108, 99, 255, 0.2);
+}
+
+.card-cell.selected {
+    border-color: var(--gold);
+    box-shadow: 0 0 20px var(--gold-glow);
+}
+
+.card-cell.selected:hover {
+    box-shadow: 0 8px 30px var(--gold-glow);
+}
+
+@keyframes card-enter {
+    from {
+        opacity: 0;
+        transform: translateY(16px) scale(0.97);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+    }
+}
+
+/* ── Card Image ── */
+.card-image-wrapper {
+    position: relative;
+    width: 100%;
+    aspect-ratio: 5 / 7;
+    overflow: hidden;
+    background: #111128;
+}
+
+.card-shimmer {
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.03) 50%, transparent 100%);
+    background-size: 200% 100%;
+    animation: shimmer 2.5s infinite;
+    pointer-events: none;
+    z-index: 0;
+}
+
+@keyframes shimmer {
+    0% {
+        background-position: -200% 0;
+    }
+    100% {
+        background-position: 200% 0;
+    }
+}
+
+.card-image-wrapper img {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+    z-index: 1;
+}
+
+.card-cost-badge {
+    position: absolute;
+    top: 0.4rem;
+    left: 0.4rem;
+    background: rgba(0, 0, 0, 0.75);
+    backdrop-filter: blur(4px);
+    color: var(--gold);
+    font-weight: 700;
+    font-size: 0.8rem;
+    padding: 0.15rem 0.5rem;
+    border-radius: 100px;
+    border: 1px solid rgba(255, 215, 0, 0.3);
+    z-index: 2;
+    line-height: 1.4;
+}
+
+.card-cost-badge::before {
+    content: "⚡";
+    margin-right: 0.15rem;
+}
+
+.card-immortalize-badge {
+    position: absolute;
+    top: 0.4rem;
+    right: 0.4rem;
+    background: rgba(0, 0, 0, 0.75);
+    backdrop-filter: blur(4px);
+    color: var(--gold);
+    font-size: 0.7rem;
+    padding: 0.25rem;
+    border-radius: 50%;
+    z-index: 2;
+    width: 1.5rem;
+    height: 1.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid rgba(255, 215, 0, 0.3);
+}
+
+/* ── Card Label ── */
+.card-label {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 0.3rem;
+    padding: 0.4rem 0.6rem;
+    background: var(--bg-elevated);
+    min-height: 2.4rem;
+}
+
+.card-name {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    flex: 1;
+    min-width: 0;
+    font-size: 0.8rem;
+    font-weight: 500;
+    color: var(--text-primary);
+}
+
+.card-category-badge {
+    flex-shrink: 0;
+    font-size: 0.65rem;
+    font-weight: 600;
+    padding: 0.15rem 0.45rem;
+    border-radius: 100px;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    background: var(--bg-hover);
+    color: var(--text-secondary);
+    border: 1px solid var(--border);
+}
+
+.card-category-badge.agent {
+    background: rgba(79, 195, 247, 0.15);
+    color: #4fc3f7;
+    border-color: rgba(79, 195, 247, 0.3);
+}
+
+.card-category-badge.spell {
+    background: rgba(206, 147, 216, 0.15);
+    color: #ce93d8;
+    border-color: rgba(206, 147, 216, 0.3);
+}
+
+.card-category-badge.token {
+    background: rgba(255, 213, 79, 0.15);
+    color: #ffd54f;
+    border-color: rgba(255, 213, 79, 0.3);
+}
+
+/* ── Empty State ── */
+.empty-state {
+    text-align: center;
+    padding: 3rem 1rem;
+    color: var(--text-muted);
+}
+
+.empty-state i {
+    font-size: 2.5rem;
+    display: block;
+    margin-bottom: 1rem;
+}
+
+.empty-state p {
+    font-size: 1.1rem;
+    margin-bottom: 1rem;
+}
+
+/* ── Responsive ── */
+@media (max-width: 768px) {
+    .gallery-container {
+        padding: 1rem;
+    }
+
+    .filter-bar {
+        flex-direction: column;
+    }
+
+    .filter-select {
+        width: 100%;
+        min-width: 0;
+    }
+
+    .card-grid {
+        grid-template-columns: 1fr;
+        gap: 0.75rem;
+        max-width: 400px;
+        margin-left: auto;
+        margin-right: auto;
+    }
+
+    .card-grid.detailed-view {
+        grid-template-columns: 1fr;
+        max-width: 500px;
+    }
+
+    .tab {
+        padding: 0.4rem 0.8rem;
+        font-size: 0.8rem;
+    }
+}
+
+@media (max-width: 480px) {
+    .card-grid, .card-grid.detailed-view {
+        grid-template-columns: 1fr;
+        gap: 0.5rem;
+        max-width: 100%;
+    }
+
+    .category-tabs {
+        gap: 0.3rem;
+    }
+
+    .tab {
+        padding: 0.35rem 0.65rem;
+        font-size: 0.75rem;
+    }
+
+    .tab i {
+        display: none;
+    }
+}
@@ -0,0 +1,452 @@
+@page "/deck-builder"
+@page "/deck-builder/{Id:guid}"
+@rendermode InteractiveServer
+@using Chrono.Model
+@inject AppDbContext Db
+@inject NavigationManager Nav
+
+<PageTitle>@(Id == null ? "New Deck" : "Edit Deck") - Chrono CCG</PageTitle>
+
+<div class="builder-topbar">
+    <a href="/my-decks" class="btn btn-sm btn-outline-secondary">
+        <i class="bi bi-arrow-left"></i> My Decks
+    </a>
+    <input @bind="deckName" @bind:event="oninput" class="form-control deck-name-input" placeholder="Deck name..." maxlength="80"/>
+    <input @bind="deckSeason" @bind:event="oninput" class="form-control season-input" placeholder="Season (e.g. S1)" maxlength="20"/>
+    <span class="validity-badge @(IsValid ? "badge-valid" : "badge-invalid")">
+        <i class="bi @(IsValid ? "bi-check-circle-fill" : "bi-exclamation-circle-fill")"></i>
+        @ValidationMessage
+    </span>
+    <button class="btn btn-primary save-btn" @onclick="SaveDeck" disabled="@isSaving">
+        @if (isSaving)
+        {
+            <span class="spinner-border spinner-border-sm me-1"></span>
+        }
+        else
+        {
+            <i class="bi bi-floppy-fill me-1"></i>
+        }
+        Save
+    </button>
+    @if (!string.IsNullOrEmpty(saveMessage))
+    {
+        <span class="save-toast @(saveError ? "save-error" : "save-ok")">@saveMessage</span>
+    }
+</div>
+
+<div class="builder-layout">
+
+    <!-- LEFT: Card Browser -->
+    <div class="browser-panel">
+        <div class="category-tabs">
+            <button class="tab @(categoryFilter == "" ? "active" : "")" @onclick='() => categoryFilter = ""'>
+                <i class="bi bi-grid-3x3-gap-fill"></i> All
+            </button>
+            <button class="tab agent @(categoryFilter == "Agent" ? "active" : "")" @onclick='() => categoryFilter = "Agent"'>
+                <i class="bi bi-person-fill"></i> Agents
+            </button>
+            <button class="tab agent @(categoryFilter == "Immortalized" ? "active" : "")" @onclick='() => categoryFilter = "Immortalized"'>
+                <i class="bi bi-star-fill"></i> Immortalized
+            </button>
+            <button class="tab spell @(categoryFilter == "Spell" ? "active" : "")" @onclick='() => categoryFilter = "Spell"'>
+                <i class="bi bi-wand"></i> Spells
+            </button>
+        </div>
+
+        <div class="filter-bar">
+            <div class="search-wrapper">
+                <i class="bi bi-search search-icon"></i>
+                <input @bind="search" @bind:event="oninput" class="form-control search-input" placeholder="Search cards..."/>
+                @if (search.Length > 0)
+                {
+                    <button class="search-clear" @onclick='() => search = ""'><i class="bi bi-x-lg"></i></button>
+                }
+            </div>
+            <select @bind="factionFilter" class="form-select filter-select">
+                <option value="">All Factions</option>
+                @foreach (var f in factions)
+                {
+                    <option value="@f">@f</option>
+                }
+            </select>
+            <div class="col-picker" title="Cards per row">
+                @for (var c = 1; c <= 6; c++)
+                {
+                    var cols = c;
+                    <button class="col-btn @(gridColumns == cols ? "active" : "")" @onclick="() => gridColumns = cols">@cols</button>
+                }
+            </div>
+        </div>
+
+        <div class="browser-grid" style="--grid-cols: @gridColumns">
+            @foreach (var card in BrowserCards)
+            {
+                var count = CountInDeck(card.Name);
+                var maxed = count >= 3;
+                <div @key="card.Name" class="browser-card @(count > 0 ? "in-deck" : "") @(maxed ? "maxed" : "")"
+                     @onclick="() => AddCard(card)"
+                     title="@(count > 0 ? $"{card.Name} ({count}/3)" : card.Name)">
+                    <div class="browser-card-img">
+                        <img src="@card.ImagePath" alt="@card.Name" loading="lazy"
+                             onerror="this.style.display='none'"/>
+                        @if (count > 0)
+                        {
+                            <span class="in-deck-count">@count</span>
+                        }
+                        @if (maxed)
+                        {
+                            <div class="maxed-overlay"><i class="bi bi-lock-fill"></i></div>
+                        }
+                    </div>
+                    <div class="browser-card-name">@card.Name</div>
+                </div>
+            }
+        </div>
+    </div>
+
+    <!-- RIGHT: Deck Panel -->
+    <div class="deck-panel">
+
+        <div class="deck-status-bar">
+            <span class="card-count @(deckCards.Count == 40 ? "count-ok" : deckCards.Count > 40 ? "count-over" : "count-under")">
+                <i class="bi bi-stack"></i> @deckCards.Count<span class="count-denom">/40</span>
+            </span>
+            <button class="btn btn-sm btn-outline-danger ms-auto" @onclick="ClearDeck" title="Clear deck">
+                <i class="bi bi-trash3"></i> Clear
+            </button>
+        </div>
+
+        @if (deckCards.Count > 0)
+        {
+            <div class="mana-curve">
+                @for (var cost = 0; cost <= 10; cost++)
+                {
+                    var c = cost;
+                    var costCount = ManaCurveData.TryGetValue(c, out var v) ? v : 0;
+                    var maxVal = ManaCurveData.Values.DefaultIfEmpty(1).Max();
+                    var heightPct = maxVal > 0 ? costCount * 100 / maxVal : 0;
+                    <div class="curve-col">
+                        <div class="curve-bar-wrap">
+                            <span class="curve-count">@(costCount > 0 ? costCount.ToString() : "")</span>
+                            <div class="curve-bar" style="height: @heightPct%"></div>
+                        </div>
+                        <div class="curve-label">@(c == 10 ? "10+" : c.ToString())</div>
+                    </div>
+                }
+            </div>
+        }
+
+        <div class="deck-card-list">
+            @if (DeckGroups.Count == 0)
+            {
+                <div class="deck-empty">
+                    <i class="bi bi-collection"></i>
+                    <span>Click cards on the left to add them</span>
+                </div>
+            }
+            @foreach (var group in DeckGroups)
+            {
+                var cardData = group.Card;
+                <div class="deck-row">
+                    <img src="@cardData.ImagePath" alt="@cardData.Name" class="deck-row-img" loading="lazy"
+                         onerror="this.style.display='none'"/>
+                    <span class="deck-row-name">@cardData.Name</span>
+                    @if (cardData.Cost.HasValue)
+                    {
+                        <span class="deck-row-cost"><i class="bi bi-lightning-fill"></i>@cardData.Cost</span>
+                    }
+                    <div class="deck-row-controls">
+                        <button class="count-btn" @onclick="() => RemoveCard(cardData.Name)">−</button>
+                        <span class="count-display">@group.Count</span>
+                        <button class="count-btn" @onclick="() => AddCard(cardData)" disabled="@(group.Count >= 3)">+</button>
+                    </div>
+                </div>
+            }
+        </div>
+
+        <div class="divers-section">
+            <div class="section-header">
+                <i class="bi bi-person-arms-up"></i> Divers
+                <span class="section-count">@divers.Count(d => d != null)/2</span>
+            </div>
+            @for (var i = 0; i < 2; i++)
+            {
+                var idx = i;
+                var diver = idx < divers.Count ? divers[idx] : null;
+                <div class="diver-slot @(diver != null ? "filled" : "empty")" @onclick="() => OpenDiverPicker(idx)">
+                    @if (diver != null)
+                    {
+                        var diverCard = AllCards.FirstOrDefault(c => c.Name == diver);
+                        @if (diverCard != null)
+                        {
+                            <img src="@diverCard.ImagePath" class="diver-thumb" alt="@diver"
+                                 onerror="this.style.display='none'"/>
+                        }
+                        <span class="diver-name">@diver</span>
+                        <button class="diver-remove" @onclick:stopPropagation="true" @onclick="() => RemoveDiver(idx)">
+                            <i class="bi bi-x"></i>
+                        </button>
+                    }
+                    else
+                    {
+                        <i class="bi bi-plus-circle"></i>
+                        <span>Select Diver @(idx + 1)</span>
+                    }
+                </div>
+            }
+        </div>
+
+        <div class="notes-section">
+            <div class="section-header"><i class="bi bi-pencil-fill"></i> Notes</div>
+            <textarea @bind="deckNotes" class="form-control notes-input" rows="4"
+                      placeholder="Strategy notes, matchup tips, card choices..."></textarea>
+        </div>
+
+    </div>
+</div>
+
+@if (showDiverPicker)
+{
+    <div class="modal-backdrop" @onclick="CloseDiverPicker"></div>
+    <div class="diver-modal">
+        <div class="diver-modal-header">
+            <h5><i class="bi bi-person-arms-up"></i> Select Diver @(activeDiverSlot + 1)</h5>
+            <button class="btn-close" @onclick="CloseDiverPicker"></button>
+        </div>
+        <div class="filter-bar mb-2">
+            <div class="search-wrapper">
+                <i class="bi bi-search search-icon"></i>
+                <input @bind="diverSearch" @bind:event="oninput" class="form-control search-input" placeholder="Search..."/>
+            </div>
+        </div>
+        <div class="diver-picker-grid">
+            @foreach (var card in DiverPickerCards)
+            {
+                <div class="diver-picker-card" @onclick="() => SelectDiver(card.Name)">
+                    <img src="@card.ImagePath" alt="@card.Name" loading="lazy" onerror="this.style.display='none'"/>
+                    <span>@card.Name</span>
+                </div>
+            }
+        </div>
+    </div>
+}
+
+@code {
+    [Parameter] public Guid? Id { get; set; }
+
+    private List<CardData> AllCards => CardDatabase.Cards;
+    private List<string> factions = [];
+
+    private string deckName = "";
+    private string deckSeason = "";
+    private string deckNotes = "";
+    private List<string> deckCards = [];
+    private List<string> divers = [];
+
+    private string search = "";
+    private string categoryFilter = "";
+    private string factionFilter = "";
+    private int gridColumns = 4;
+
+    private bool showDiverPicker;
+    private int activeDiverSlot;
+    private string diverSearch = "";
+
+    private bool isSaving;
+    private string saveMessage = "";
+    private bool saveError;
+
+    private bool IsValid => deckCards.Count == 40 && divers.Count == 2 && divers.All(d => d != null);
+
+    private string ValidationMessage => (deckCards.Count, divers.Count) switch
+    {
+        (< 40, _) => $"{40 - deckCards.Count} cards short",
+        (> 40, _) => $"{deckCards.Count - 40} cards over",
+        (40, < 2) => "Need 2 divers",
+        _ => "Valid"
+    };
+
+    private IEnumerable<CardData> BrowserCards => AllCards
+        .Where(c => c.Category is "Agent" or "Spell" or "Immortalized")
+        .Where(c => categoryFilter == "" || c.Category == categoryFilter)
+        .Where(c => factionFilter == "" || c.Faction == factionFilter)
+        .Where(c => search == "" || c.MatchesSearch(search));
+
+    private record DeckGroup(CardData Card, int Count);
+
+    private List<DeckGroup> DeckGroups => deckCards
+        .GroupBy(name => name)
+        .Select(g => new DeckGroup(AllCards.First(c => c.Name == g.Key), g.Count()))
+        .OrderBy(g => g.Card.Cost ?? 99)
+        .ThenBy(g => g.Card.Name)
+        .ToList();
+
+    private IEnumerable<CardData> DiverPickerCards
+    {
+        get
+        {
+            var inDeck = deckCards.ToHashSet();
+            var otherDiverSlot = activeDiverSlot == 0
+                ? (divers.Count > 1 ? divers[1] : null)
+                : (divers.Count > 0 ? divers[0] : null);
+
+            return AllCards
+                .Where(c => c.Category is "Agent" or "Spell" or "Immortalized")
+                .Where(c => !inDeck.Contains(c.Name))
+                .Where(c => c.Name != otherDiverSlot)
+                .Where(c => diverSearch == "" || c.MatchesSearch(diverSearch));
+        }
+    }
+
+    private Dictionary<int, int> ManaCurveData
+    {
+        get
+        {
+            var result = new Dictionary<int, int>();
+            foreach (var name in deckCards)
+            {
+                var card = AllCards.FirstOrDefault(c => c.Name == name);
+                if (card == null) continue;
+                var bucket = Math.Min(card.Cost ?? 0, 10);
+                result[bucket] = result.GetValueOrDefault(bucket) + 1;
+            }
+            return result;
+        }
+    }
+
+    private Dictionary<string, int> _deckCounts = new();
+
+    private void RebuildDeckCounts() =>
+        _deckCounts = deckCards.GroupBy(n => n).ToDictionary(g => g.Key, g => g.Count());
+
+    private int CountInDeck(string name) =>
+        _deckCounts.TryGetValue(name, out var c) ? c : 0;
+
+    protected override async Task OnParametersSetAsync()
+    {
+        factions = AllCards
+            .Where(c => c.Faction != null)
+            .Select(c => c.Faction!)
+            .Distinct()
+            .OrderBy(f => f)
+            .ToList();
+
+        if (Id.HasValue)
+            await LoadDeck(Id.Value);
+    }
+
+    private async Task LoadDeck(Guid id)
+    {
+        var deck = await Db.UserDecks.FindAsync(id);
+        if (deck == null) return;
+
+        deckName = deck.Name;
+        deckSeason = deck.Season ?? "";
+        deckNotes = deck.Notes ?? "";
+        deckCards = new List<string>(deck.Cards);
+        divers = new List<string>(deck.Divers);
+        RebuildDeckCounts();
+    }
+
+    private void AddCard(CardData card)
+    {
+        if (CountInDeck(card.Name) >= 3) return;
+        deckCards.Add(card.Name);
+        RebuildDeckCounts();
+    }
+
+    private void RemoveCard(string name)
+    {
+        var idx = deckCards.LastIndexOf(name);
+        if (idx >= 0) deckCards.RemoveAt(idx);
+        RebuildDeckCounts();
+    }
+
+    private void ClearDeck()
+    {
+        deckCards.Clear();
+        RebuildDeckCounts();
+    }
+
+    private void OpenDiverPicker(int slot)
+    {
+        activeDiverSlot = slot;
+        diverSearch = "";
+        showDiverPicker = true;
+    }
+
+    private void CloseDiverPicker() => showDiverPicker = false;
+
+    private void SelectDiver(string name)
+    {
+        while (divers.Count <= activeDiverSlot)
+            divers.Add(null!);
+        divers[activeDiverSlot] = name;
+        showDiverPicker = false;
+    }
+
+    private void RemoveDiver(int slot)
+    {
+        if (slot < divers.Count)
+            divers.RemoveAt(slot);
+    }
+
+    private async Task SaveDeck()
+    {
+        if (string.IsNullOrWhiteSpace(deckName))
+        {
+            saveMessage = "Please enter a deck name.";
+            saveError = true;
+            return;
+        }
+
+        isSaving = true;
+        saveMessage = "";
+
+        try
+        {
+            if (Id.HasValue)
+            {
+                var existing = await Db.UserDecks.FindAsync(Id.Value);
+                if (existing != null)
+                {
+                    existing.Name = deckName;
+                    existing.Cards = new List<string>(deckCards);
+                    existing.Divers = new List<string>(divers);
+                    existing.Notes = deckNotes;
+                    existing.Season = deckSeason;
+                    existing.UpdatedAt = DateTime.UtcNow;
+                    await Db.SaveChangesAsync();
+                    saveMessage = "Saved!";
+                    saveError = false;
+                }
+            }
+            else
+            {
+                var deck = new UserDeck
+                {
+                    Name = deckName,
+                    Cards = new List<string>(deckCards),
+                    Divers = new List<string>(divers),
+                    Notes = deckNotes,
+                    Season = deckSeason,
+                    UpdatedAt = DateTime.UtcNow
+                };
+                Db.UserDecks.Add(deck);
+                await Db.SaveChangesAsync();
+                saveMessage = "Saved!";
+                saveError = false;
+                Nav.NavigateTo($"/deck-builder/{deck.Id}", replace: true);
+            }
+        }
+        catch (Exception ex)
+        {
+            saveMessage = $"Error: {ex.Message}";
+            saveError = true;
+        }
+        finally
+        {
+            isSaving = false;
+        }
+    }
+}
@@ -0,0 +1,768 @@
+/* ── Top Bar ── */
+.builder-topbar {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 0.6rem 1.25rem;
+    background: var(--bg-surface);
+    border-bottom: 1px solid var(--border);
+    flex-wrap: wrap;
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    box-shadow: 0 2px 12px rgba(0,0,0,0.25);
+}
+
+.deck-name-input {
+    flex: 1;
+    min-width: 180px;
+    max-width: 360px;
+    font-weight: 600;
+    background: var(--bg-elevated);
+    border-color: var(--border);
+    color: var(--text-primary);
+}
+
+.deck-name-input:focus {
+    background: var(--bg-elevated);
+    border-color: var(--accent);
+    color: var(--text-primary);
+    box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.18);
+}
+
+.season-input {
+    width: 110px;
+    background: var(--bg-elevated);
+    border-color: var(--border);
+    color: var(--text-primary);
+}
+
+.season-input:focus {
+    background: var(--bg-elevated);
+    border-color: var(--accent);
+    color: var(--text-primary);
+    box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.18);
+}
+
+.save-btn {
+    white-space: nowrap;
+    font-weight: 600;
+    letter-spacing: 0.02em;
+}
+
+.validity-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35rem;
+    font-size: 0.8rem;
+    font-weight: 600;
+    padding: 0.3rem 0.75rem;
+    border-radius: 100px;
+    white-space: nowrap;
+}
+
+.badge-valid {
+    background: rgba(102, 187, 106, 0.15);
+    color: #66bb6a;
+    border: 1px solid rgba(102, 187, 106, 0.35);
+}
+
+.badge-invalid {
+    background: rgba(255, 171, 64, 0.12);
+    color: #ffab40;
+    border: 1px solid rgba(255, 171, 64, 0.35);
+}
+
+.save-toast {
+    font-size: 0.85rem;
+    font-weight: 500;
+    animation: fade-in 0.2s ease-out;
+}
+
+.save-ok { color: #66bb6a; }
+.save-error { color: #ef5350; }
+
+/* ── Main Layout ── */
+.builder-layout {
+    display: grid;
+    grid-template-columns: 1fr 380px;
+    height: calc(100vh - 110px);
+    overflow: hidden;
+}
+
+/* ── Browser Panel ── */
+.browser-panel {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    border-right: 1px solid var(--border);
+    background: var(--bg-primary);
+}
+
+/* ── Category Tabs ── */
+.browser-panel .category-tabs {
+    display: flex;
+    gap: 0.35rem;
+    padding: 0.75rem 1rem 0.6rem;
+    flex-wrap: wrap;
+    border-bottom: 1px solid var(--border);
+    background: var(--bg-surface);
+}
+
+.tab {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35rem;
+    padding: 0.35rem 0.85rem;
+    border-radius: 100px;
+    border: 1px solid var(--border);
+    background: var(--bg-elevated);
+    color: var(--text-muted);
+    font-size: 0.78rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.15s ease;
+    letter-spacing: 0.02em;
+}
+
+.tab:hover {
+    border-color: rgba(108, 99, 255, 0.45);
+    color: var(--text-primary);
+    background: rgba(108, 99, 255, 0.08);
+}
+
+.tab.active {
+    background: var(--accent);
+    border-color: var(--accent);
+    color: #fff;
+    box-shadow: 0 2px 10px rgba(108, 99, 255, 0.35);
+}
+
+/* ── Filter Bar ── */
+.browser-panel .filter-bar {
+    padding: 0.6rem 1rem;
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+    background: var(--bg-surface);
+    border-bottom: 1px solid var(--border);
+}
+
+.search-wrapper {
+    position: relative;
+    flex: 1;
+}
+
+.search-icon {
+    position: absolute;
+    left: 0.6rem;
+    top: 50%;
+    transform: translateY(-50%);
+    color: var(--text-muted);
+    font-size: 0.8rem;
+    pointer-events: none;
+}
+
+.search-input {
+    padding-left: 2rem;
+    background: var(--bg-elevated);
+    border-color: var(--border);
+    color: var(--text-primary);
+    font-size: 0.85rem;
+}
+
+.search-input:focus {
+    background: var(--bg-elevated);
+    border-color: var(--accent);
+    color: var(--text-primary);
+    box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.15);
+}
+
+.search-clear {
+    position: absolute;
+    right: 0.4rem;
+    top: 50%;
+    transform: translateY(-50%);
+    background: none;
+    border: none;
+    color: var(--text-muted);
+    cursor: pointer;
+    padding: 0.15rem 0.3rem;
+    font-size: 0.7rem;
+    display: flex;
+    align-items: center;
+}
+
+.search-clear:hover { color: var(--text-primary); }
+
+.filter-select {
+    width: 130px;
+    flex-shrink: 0;
+    background: var(--bg-elevated);
+    border-color: var(--border);
+    color: var(--text-primary);
+    font-size: 0.82rem;
+}
+
+.filter-select:focus {
+    background: var(--bg-elevated);
+    border-color: var(--accent);
+    color: var(--text-primary);
+    box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.15);
+}
+
+/* ── Column Picker ── */
+.col-picker {
+    display: flex;
+    gap: 2px;
+    flex-shrink: 0;
+    background: var(--bg-elevated);
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    padding: 2px;
+}
+
+.col-btn {
+    width: 1.6rem;
+    height: 1.6rem;
+    border: none;
+    background: none;
+    color: var(--text-muted);
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 0.7rem;
+    font-weight: 700;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.12s ease;
+    padding: 0;
+}
+
+.col-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
+.col-btn.active { background: var(--accent); color: #fff; }
+
+/* ── Browser Grid ── */
+.browser-grid {
+    flex: 1;
+    overflow-y: auto;
+    padding: 0.75rem 1rem 1rem;
+    display: grid;
+    grid-template-columns: repeat(var(--grid-cols, 4), 1fr);
+    column-gap: 0.6rem;
+    row-gap: 1rem;
+    align-content: start;
+}
+
+.browser-card {
+    cursor: pointer;
+    border-radius: var(--radius);
+    overflow: hidden;
+    background: var(--bg-surface);
+    border: 2px solid transparent;
+    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
+    height: 210px;
+}
+
+.browser-card:hover {
+    transform: translateY(-4px) scale(1.01);
+    box-shadow: 0 8px 24px rgba(108, 99, 255, 0.28);
+    border-color: rgba(108, 99, 255, 0.45);
+    z-index: 2;
+}
+
+.browser-card.in-deck {
+    border-color: rgba(108, 99, 255, 0.5);
+}
+
+.browser-card.maxed {
+    opacity: 0.45;
+    cursor: not-allowed;
+}
+
+.browser-card.maxed:hover {
+    transform: none;
+    box-shadow: none;
+    border-color: transparent;
+}
+
+.browser-card-img {
+    position: relative;
+    width: 100%;
+    height: calc(100% - 26px);
+    overflow: hidden;
+    background: #0e0e22;
+}
+
+.browser-card-img img {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+    transition: transform 0.2s ease;
+}
+
+.browser-card:hover .browser-card-img img {
+    transform: scale(1.04);
+}
+
+.in-deck-count {
+    position: absolute;
+    bottom: 0.3rem;
+    right: 0.3rem;
+    background: var(--accent);
+    color: white;
+    font-size: 0.68rem;
+    font-weight: 700;
+    width: 1.35rem;
+    height: 1.35rem;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 1.5px solid rgba(255,255,255,0.25);
+    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
+}
+
+.maxed-overlay {
+    position: absolute;
+    inset: 0;
+    background: rgba(0,0,0,0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.4rem;
+    color: rgba(255,255,255,0.45);
+}
+
+.browser-card-name {
+    font-size: 0.7rem;
+    font-weight: 600;
+    padding: 0 0.45rem;
+    background: var(--bg-elevated);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: var(--text-primary);
+    letter-spacing: 0.01em;
+    height: 26px;
+    line-height: 26px;
+}
+
+/* ── Deck Panel ── */
+.deck-panel {
+    display: flex;
+    flex-direction: column;
+    overflow-y: auto;
+    background: var(--bg-surface);
+}
+
+.deck-status-bar {
+    display: flex;
+    align-items: center;
+    padding: 0.6rem 1rem;
+    border-bottom: 1px solid var(--border);
+    background: var(--bg-elevated);
+    position: sticky;
+    top: 0;
+    z-index: 10;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
+}
+
+.card-count {
+    font-size: 1.05rem;
+    font-weight: 700;
+    display: flex;
+    align-items: baseline;
+    gap: 0.15rem;
+}
+
+.count-denom { font-size: 0.78rem; font-weight: 400; color: var(--text-muted); }
+.count-ok { color: #66bb6a; }
+.count-over { color: #ef5350; }
+.count-under { color: var(--text-secondary); }
+
+/* ── Mana Curve ── */
+.mana-curve {
+    display: flex;
+    align-items: flex-end;
+    gap: 3px;
+    padding: 0.75rem 1rem 0.5rem;
+    border-bottom: 1px solid var(--border);
+    height: 80px;
+    background: var(--bg-primary);
+}
+
+.curve-col {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    height: 100%;
+}
+
+.curve-bar-wrap {
+    flex: 1;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    align-items: center;
+    gap: 2px;
+}
+
+.curve-count {
+    font-size: 0.58rem;
+    color: var(--text-muted);
+    height: 0.8rem;
+    line-height: 1;
+}
+
+.curve-bar {
+    width: 80%;
+    background: linear-gradient(to top, var(--accent), rgba(108, 99, 255, 0.5));
+    border-radius: 2px 2px 0 0;
+    min-height: 2px;
+    transition: height 0.25s ease;
+}
+
+.curve-label {
+    font-size: 0.58rem;
+    color: var(--text-muted);
+    margin-top: 2px;
+}
+
+/* ── Deck Card List ── */
+.deck-card-list {
+    flex: 1;
+    padding: 0.4rem 0;
+}
+
+.deck-empty {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 2.5rem 1rem;
+    color: var(--text-muted);
+    font-size: 0.88rem;
+    opacity: 0.7;
+}
+
+.deck-empty i { font-size: 2rem; }
+
+.deck-row {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.3rem 0.75rem;
+    border-bottom: 1px solid rgba(255,255,255,0.04);
+    transition: background 0.12s ease;
+}
+
+.deck-row:hover { background: var(--bg-hover); }
+
+.deck-row-img {
+    width: 26px;
+    height: 37px;
+    object-fit: cover;
+    border-radius: 3px;
+    flex-shrink: 0;
+    opacity: 0.9;
+}
+
+.deck-row-name {
+    flex: 1;
+    font-size: 0.8rem;
+    font-weight: 500;
+    color: var(--text-primary);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    min-width: 0;
+}
+
+.deck-row-cost {
+    font-size: 0.72rem;
+    color: var(--gold);
+    font-weight: 700;
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    gap: 0.15rem;
+}
+
+.deck-row-controls {
+    display: flex;
+    align-items: center;
+    gap: 0.2rem;
+    flex-shrink: 0;
+}
+
+.count-btn {
+    width: 1.4rem;
+    height: 1.4rem;
+    border: 1px solid var(--border);
+    background: var(--bg-elevated);
+    color: var(--text-primary);
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 0.85rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.12s ease;
+    padding: 0;
+}
+
+.count-btn:hover:not(:disabled) {
+    background: var(--bg-hover);
+    border-color: var(--accent);
+    color: var(--accent);
+}
+
+.count-btn:disabled { opacity: 0.3; cursor: not-allowed; }
+
+.count-display {
+    font-size: 0.82rem;
+    font-weight: 700;
+    width: 1.1rem;
+    text-align: center;
+    color: var(--accent);
+}
+
+/* ── Divers Section ── */
+.section-header {
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+    padding: 0.55rem 0.75rem 0.4rem;
+    font-size: 0.72rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: var(--text-muted);
+    border-top: 1px solid var(--border);
+    background: var(--bg-elevated);
+}
+
+.section-count {
+    margin-left: auto;
+    background: var(--bg-hover);
+    padding: 0.1rem 0.5rem;
+    border-radius: 100px;
+    font-size: 0.72rem;
+}
+
+.divers-section { padding-bottom: 0.5rem; }
+
+.diver-slot {
+    display: flex;
+    align-items: center;
+    gap: 0.6rem;
+    margin: 0.25rem 0.75rem;
+    padding: 0.45rem 0.65rem;
+    border-radius: var(--radius-sm);
+    border: 1px dashed var(--border);
+    cursor: pointer;
+    font-size: 0.83rem;
+    transition: all 0.15s ease;
+    color: var(--text-muted);
+}
+
+.diver-slot.empty:hover {
+    border-color: var(--accent);
+    color: var(--accent);
+    background: rgba(108, 99, 255, 0.06);
+}
+
+.diver-slot.filled {
+    border-style: solid;
+    border-color: rgba(108, 99, 255, 0.35);
+    color: var(--text-primary);
+    background: var(--bg-elevated);
+}
+
+.diver-slot.filled:hover {
+    border-color: rgba(108, 99, 255, 0.6);
+    box-shadow: 0 2px 8px rgba(108, 99, 255, 0.15);
+}
+
+.diver-thumb {
+    width: 26px;
+    height: 37px;
+    object-fit: cover;
+    border-radius: 3px;
+    flex-shrink: 0;
+}
+
+.diver-name {
+    flex: 1;
+    font-weight: 500;
+    font-size: 0.83rem;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.diver-remove {
+    background: none;
+    border: none;
+    color: var(--text-muted);
+    cursor: pointer;
+    padding: 0.2rem;
+    display: flex;
+    align-items: center;
+    font-size: 0.85rem;
+    flex-shrink: 0;
+    border-radius: 4px;
+    transition: all 0.12s ease;
+}
+
+.diver-remove:hover { color: #ef5350; background: rgba(239, 83, 80, 0.1); }
+
+/* ── Notes Section ── */
+.notes-section { padding-bottom: 1rem; }
+
+.notes-input {
+    margin: 0 0.75rem;
+    width: calc(100% - 1.5rem);
+    font-size: 0.82rem;
+    resize: vertical;
+    min-height: 80px;
+    background: var(--bg-primary);
+    border-color: var(--border);
+    color: var(--text-primary);
+}
+
+.notes-input:focus {
+    background: var(--bg-primary);
+    border-color: var(--accent);
+    color: var(--text-primary);
+    box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.12);
+}
+
+/* ── Diver Picker Modal ── */
+.modal-backdrop {
+    position: fixed;
+    inset: 0;
+    background: rgba(0,0,0,0.6);
+    z-index: 1040;
+    backdrop-filter: blur(2px);
+}
+
+.diver-modal {
+    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: 1.25rem;
+    width: 580px;
+    max-width: 93vw;
+    max-height: 80vh;
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    box-shadow: 0 24px 64px rgba(0,0,0,0.7), 0 0 0 1px rgba(108, 99, 255, 0.1);
+    animation: modal-enter 0.18s ease-out;
+}
+
+@keyframes modal-enter {
+    from { opacity: 0; transform: translate(-50%, -52%) scale(0.97); }
+    to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
+}
+
+.diver-modal-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-bottom: 0.5rem;
+    border-bottom: 1px solid var(--border);
+}
+
+.diver-modal-header h5 {
+    margin: 0;
+    font-size: 1rem;
+    font-weight: 700;
+}
+
+.diver-picker-grid {
+    overflow-y: auto;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+    gap: 0.5rem;
+    flex: 1;
+}
+
+.diver-picker-card {
+    cursor: pointer;
+    border-radius: var(--radius-sm);
+    overflow: hidden;
+    background: var(--bg-elevated);
+    border: 2px solid transparent;
+    transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
+    text-align: center;
+}
+
+.diver-picker-card:hover {
+    border-color: var(--accent);
+    transform: translateY(-3px);
+    box-shadow: 0 6px 16px rgba(108, 99, 255, 0.25);
+}
+
+.diver-picker-card img {
+    width: 100%;
+    aspect-ratio: 5 / 7;
+    object-fit: cover;
+    display: block;
+}
+
+.diver-picker-card span {
+    display: block;
+    font-size: 0.67rem;
+    padding: 0.25rem;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: var(--text-primary);
+    background: var(--bg-elevated);
+    font-weight: 500;
+}
+
+/* ── Responsive ── */
+@media (max-width: 900px) {
+    .builder-layout {
+        grid-template-columns: 1fr;
+        height: auto;
+        overflow: visible;
+    }
+
+    .browser-panel {
+        border-right: none;
+        border-bottom: 1px solid var(--border);
+        max-height: 70vh;
+    }
+
+    .deck-panel {
+        max-height: none;
+    }
+
+    .builder-topbar {
+        position: static;
+    }
+
+    /* Force single column on mobile regardless of picker selection */
+    .browser-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .col-picker {
+        display: none;
+    }
+}
@@ -0,0 +1,110 @@
+@page "/login"
+@rendermode InteractiveServer
+@attribute [Microsoft.AspNetCore.Authorization.AllowAnonymous]
+@using Microsoft.AspNetCore.Components.Authorization
+@inject IJSRuntime JS
+@inject NavigationManager Nav
+@inject AuthenticationStateProvider AuthStateProvider
+
+<PageTitle>Sign In — Chrono CCG</PageTitle>
+
+<div class="login-container">
+    <div class="login-card">
+        <h1 class="login-title">Chrono CCG</h1>
+
+        @if (_error is not null)
+        {
+            <div class="alert alert-danger">@_error</div>
+        }
+
+        @if (_enrolled)
+        {
+            <p class="login-hint">Use your registered passkey to sign in.</p>
+            <button class="btn btn-primary btn-lg w-100" @onclick="SignIn" disabled="@_busy">
+                @if (_busy)
+                {
+                    <span class="spinner-border spinner-border-sm me-2" role="status"></span>
+                }
+                Sign in with Passkey
+            </button>
+        }
+        else
+        {
+            <p class="login-hint">No passkey enrolled yet. Register your device to get started.</p>
+            <button class="btn btn-success btn-lg w-100" @onclick="Enroll" disabled="@_busy">
+                @if (_busy)
+                {
+                    <span class="spinner-border spinner-border-sm me-2" role="status"></span>
+                }
+                Enroll Passkey
+            </button>
+        }
+    </div>
+</div>
+
+@code {
+    private bool _enrolled;
+    private bool _busy;
+    private string? _error;
+
+    protected override async Task OnInitializedAsync()
+    {
+        var authState = await AuthStateProvider.GetAuthenticationStateAsync();
+        if (authState.User.Identity?.IsAuthenticated == true)
+        {
+            Nav.NavigateTo("/", replace: true);
+            return;
+        }
+
+        try
+        {
+            using var http = new HttpClient { BaseAddress = new Uri(Nav.BaseUri) };
+            var status = await http.GetFromJsonAsync<StatusResponse>("/api/auth/status");
+            _enrolled = status?.Enrolled ?? false;
+        }
+        catch
+        {
+            _enrolled = false;
+        }
+    }
+
+    private async Task SignIn()
+    {
+        _busy = true;
+        _error = null;
+        try
+        {
+            await JS.InvokeVoidAsync("passkeyLogin");
+            Nav.NavigateTo("/", forceLoad: true);
+        }
+        catch (Exception ex)
+        {
+            _error = ex.Message;
+        }
+        finally
+        {
+            _busy = false;
+        }
+    }
+
+    private async Task Enroll()
+    {
+        _busy = true;
+        _error = null;
+        try
+        {
+            await JS.InvokeVoidAsync("passkeyEnroll");
+            Nav.NavigateTo("/", forceLoad: true);
+        }
+        catch (Exception ex)
+        {
+            _error = ex.Message;
+        }
+        finally
+        {
+            _busy = false;
+        }
+    }
+
+    private record StatusResponse(bool Enrolled, bool Authenticated);
+}
@@ -0,0 +1,29 @@
+.login-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+    background: var(--bs-body-bg, #f8f9fa);
+}
+
+.login-card {
+    background: #fff;
+    border-radius: 12px;
+    box-shadow: 0 4px 24px rgba(0,0,0,0.10);
+    padding: 2.5rem 2rem;
+    width: 100%;
+    max-width: 380px;
+    text-align: center;
+}
+
+.login-title {
+    font-size: 1.75rem;
+    font-weight: 700;
+    margin-bottom: 1.5rem;
+}
+
+.login-hint {
+    color: #6c757d;
+    margin-bottom: 1.25rem;
+    font-size: 0.95rem;
+}
@@ -0,0 +1,181 @@
+@page "/my-decks"
+@rendermode InteractiveServer
+@using Microsoft.EntityFrameworkCore
+@inject AppDbContext Db
+@inject NavigationManager Nav
+
+<PageTitle>My Decks - Chrono CCG</PageTitle>
+
+<div class="my-decks-container">
+    <div class="my-decks-header">
+        <div>
+            <h1>My Decks</h1>
+            <p class="text-secondary">@decks.Count deck@(decks.Count != 1 ? "s" : "") saved</p>
+        </div>
+        <a href="/deck-builder" class="btn btn-primary">
+            <i class="bi bi-plus-lg me-1"></i> New Deck
+        </a>
+    </div>
+
+    @if (loading)
+    {
+        <div class="decks-loading">
+            <span class="spinner-border spinner-border-sm me-2"></span> Loading decks...
+        </div>
+    }
+    else if (decks.Count == 0)
+    {
+        <div class="decks-empty">
+            <i class="bi bi-journal-x"></i>
+            <p>No decks yet. Create your first deck!</p>
+            <a href="/deck-builder" class="btn btn-outline-primary">
+                <i class="bi bi-plus-lg me-1"></i> Build a Deck
+            </a>
+        </div>
+    }
+    else
+    {
+        <div class="decks-grid">
+            @foreach (var deck in decks)
+            {
+                var cardCount = deck.Cards.Count;
+                var uniqueCount = deck.Cards.Distinct().Count();
+                var isValid = cardCount == 40 && deck.Divers.Count == 2;
+                <div class="deck-card" @onclick="() => EditDeck(deck.Id)">
+                    <div class="deck-card-header">
+                        <div class="deck-name">@(string.IsNullOrEmpty(deck.Name) ? "Untitled Deck" : deck.Name)</div>
+                        <span class="deck-valid-badge @(isValid ? "valid" : "invalid")">
+                            <i class="bi @(isValid ? "bi-check-circle-fill" : "bi-exclamation-circle-fill")"></i>
+                            @(isValid ? "Valid" : $"{cardCount}/40")
+                        </span>
+                    </div>
+
+                    @if (!string.IsNullOrEmpty(deck.Season))
+                    {
+                        <div class="deck-season">
+                            <i class="bi bi-calendar3"></i> @deck.Season
+                        </div>
+                    }
+
+                    <div class="deck-meta">
+                        <span><i class="bi bi-stack"></i> @cardCount cards</span>
+                        <span><i class="bi bi-files"></i> @uniqueCount unique</span>
+                        <span><i class="bi bi-person-arms-up"></i> @deck.Divers.Count/2 divers</span>
+                    </div>
+
+                    @if (deck.Divers.Count > 0)
+                    {
+                        <div class="deck-divers">
+                            @foreach (var diver in deck.Divers)
+                            {
+                                <span class="diver-chip"><i class="bi bi-person-arms-up"></i> @diver</span>
+                            }
+                        </div>
+                    }
+
+                    @if (!string.IsNullOrEmpty(deck.Notes))
+                    {
+                        <div class="deck-notes-preview">@deck.Notes</div>
+                    }
+
+                    <div class="deck-footer">
+                        <span class="deck-updated">
+                            <i class="bi bi-clock"></i> @deck.UpdatedAt.ToLocalTime().ToString("MMM d, yyyy h:mm tt")
+                        </span>
+                        <button class="btn btn-sm btn-outline-danger deck-delete"
+                                @onclick:stopPropagation="true"
+                                @onclick="() => ConfirmDelete(deck)">
+                            <i class="bi bi-trash3"></i>
+                        </button>
+                    </div>
+                </div>
+            }
+        </div>
+    }
+</div>
+
+@if (deckToDelete != null)
+{
+    <div class="modal-backdrop" @onclick="CancelDelete"></div>
+    <div class="confirm-modal">
+        <h5>Delete Deck</h5>
+        <p>Delete <strong>@(string.IsNullOrEmpty(deckToDelete.Name) ? "Untitled Deck" : deckToDelete.Name)</strong>? This cannot be undone.</p>
+        <div class="d-flex gap-2 justify-content-end">
+            <button class="btn btn-outline-secondary" @onclick="CancelDelete">Cancel</button>
+            <button class="btn btn-danger" @onclick="DeleteDeck" disabled="@deleting">
+                @if (deleting) { <span class="spinner-border spinner-border-sm me-1"></span> }
+                Delete
+            </button>
+        </div>
+    </div>
+}
+
+@code {
+    private List<UserDeck> decks = [];
+    private bool loading = true;
+    private UserDeck? deckToDelete;
+    private bool deleting;
+
+    protected override async Task OnInitializedAsync()
+    {
+        await LoadDecks();
+    }
+
+    private async Task LoadDecks()
+    {
+        loading = true;
+        try
+        {
+            decks = await Db.UserDecks.OrderByDescending(d => d.UpdatedAt).ToListAsync();
+        }
+        catch (Exception ex)
+        {
+            Console.WriteLine($"[WARNING] Could not load decks: {ex.Message}");
+            decks = [];
+        }
+        finally
+        {
+            loading = false;
+        }
+    }
+
+    private void EditDeck(Guid id)
+    {
+        Nav.NavigateTo($"/deck-builder/{id}");
+    }
+
+    private void ConfirmDelete(UserDeck deck)
+    {
+        deckToDelete = deck;
+    }
+
+    private void CancelDelete()
+    {
+        deckToDelete = null;
+    }
+
+    private async Task DeleteDeck()
+    {
+        if (deckToDelete == null) return;
+        deleting = true;
+        try
+        {
+            var deck = await Db.UserDecks.FindAsync(deckToDelete.Id);
+            if (deck != null)
+            {
+                Db.UserDecks.Remove(deck);
+                await Db.SaveChangesAsync();
+            }
+        }
+        catch (Exception ex)
+        {
+            Console.WriteLine($"[WARNING] Could not delete deck: {ex.Message}");
+        }
+        finally
+        {
+            deleting = false;
+            deckToDelete = null;
+            await LoadDecks();
+        }
+    }
+}
@@ -0,0 +1,219 @@
+.my-decks-container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 1.5rem;
+}
+
+.my-decks-header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    margin-bottom: 1.5rem;
+    gap: 1rem;
+}
+
+.my-decks-header h1 {
+    margin-bottom: 0.25rem;
+}
+
+.my-decks-header p {
+    font-size: 0.9rem;
+    margin: 0;
+}
+
+.decks-loading {
+    color: var(--text-muted);
+    padding: 2rem;
+    display: flex;
+    align-items: center;
+}
+
+.decks-empty {
+    text-align: center;
+    padding: 4rem 1rem;
+    color: var(--text-muted);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1rem;
+}
+
+.decks-empty i {
+    font-size: 3rem;
+    display: block;
+}
+
+.decks-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    gap: 1rem;
+}
+
+.deck-card {
+    background: var(--bg-surface);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    padding: 1rem;
+    cursor: pointer;
+    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
+    display: flex;
+    flex-direction: column;
+    gap: 0.6rem;
+}
+
+.deck-card:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 6px 24px rgba(108, 99, 255, 0.15);
+    border-color: rgba(108, 99, 255, 0.3);
+}
+
+.deck-card-header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 0.5rem;
+}
+
+.deck-name {
+    font-size: 1rem;
+    font-weight: 700;
+    color: var(--text-primary);
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.deck-valid-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.3rem;
+    font-size: 0.72rem;
+    font-weight: 600;
+    padding: 0.2rem 0.55rem;
+    border-radius: 100px;
+    white-space: nowrap;
+    flex-shrink: 0;
+}
+
+.deck-valid-badge.valid {
+    background: rgba(102, 187, 106, 0.15);
+    color: #66bb6a;
+    border: 1px solid rgba(102, 187, 106, 0.3);
+}
+
+.deck-valid-badge.invalid {
+    background: rgba(255, 171, 64, 0.12);
+    color: #ffab40;
+    border: 1px solid rgba(255, 171, 64, 0.3);
+}
+
+.deck-season {
+    font-size: 0.78rem;
+    color: var(--text-muted);
+    display: flex;
+    align-items: center;
+    gap: 0.3rem;
+}
+
+.deck-meta {
+    display: flex;
+    gap: 0.75rem;
+    font-size: 0.8rem;
+    color: var(--text-secondary);
+    flex-wrap: wrap;
+}
+
+.deck-meta span {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+}
+
+.deck-divers {
+    display: flex;
+    gap: 0.4rem;
+    flex-wrap: wrap;
+}
+
+.diver-chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.3rem;
+    font-size: 0.75rem;
+    padding: 0.2rem 0.55rem;
+    background: var(--bg-elevated);
+    border: 1px solid var(--border);
+    border-radius: 100px;
+    color: var(--text-secondary);
+}
+
+.deck-notes-preview {
+    font-size: 0.8rem;
+    color: var(--text-muted);
+    font-style: italic;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    line-height: 1.5;
+    background: var(--bg-elevated);
+    padding: 0.4rem 0.6rem;
+    border-radius: var(--radius-sm);
+    border-left: 2px solid var(--border);
+}
+
+.deck-footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-top: auto;
+    padding-top: 0.4rem;
+    border-top: 1px solid var(--border);
+}
+
+.deck-updated {
+    font-size: 0.75rem;
+    color: var(--text-muted);
+    display: flex;
+    align-items: center;
+    gap: 0.3rem;
+}
+
+.deck-delete {
+    opacity: 0;
+    transition: opacity 0.15s ease;
+}
+
+.deck-card:hover .deck-delete {
+    opacity: 1;
+}
+
+/* ── Confirm Modal ── */
+.confirm-modal {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 1050;
+    background: var(--bg-surface);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    padding: 1.5rem;
+    width: 380px;
+    max-width: 92vw;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
+    animation: detail-enter 0.2s ease-out;
+}
+
+.confirm-modal h5 {
+    margin: 0 0 0.75rem;
+    font-size: 1rem;
+}
+
+.confirm-modal p {
+    font-size: 0.9rem;
+    color: var(--text-secondary);
+    margin-bottom: 1.25rem;
+}
@@ -0,0 +1,8 @@
+@inject NavigationManager Nav
+
+@code {
+    protected override void OnInitialized()
+    {
+        Nav.NavigateTo("/login", forceLoad: true);
+    }
+}
@@ -1,12 +1,10 @@
 <Router AppAssembly="@typeof(Program).Assembly" AdditionalAssemblies="new[] { typeof(Home).Assembly }">
    <Found Context="routeData">
-        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)"/>
+        <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)">
+            <NotAuthorized>
+                <RedirectToLogin/>
+            </NotAuthorized>
+        </AuthorizeRouteView>
        <FocusOnNavigate RouteData="@routeData" Selector="h1"/>
    </Found>
-    <NotFound>
-        <PageTitle>Not found</PageTitle>
-        <LayoutView Layout="@typeof(MainLayout)">
-            <p role="alert">Sorry, there's nothing at this address.</p>
-        </LayoutView>
-    </NotFound>
 </Router>
@@ -1,13 +1,19 @@
@using System.Net.Http
@using System.Net.Http.Json
+@using Microsoft.AspNetCore.Authorization
+@using Microsoft.AspNetCore.Components.Authorization
@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 static Microsoft.AspNetCore.Components.Web.RenderMode
@using Microsoft.JSInterop
@using Shared.Layout
@using Shared.Pages
+@using Shared.Components
+@using Server.Components
+@using Server.Models
@using Telerik.Blazor
@using Telerik.Blazor.Components
@using Telerik.DataSource
@@ -0,0 +1,219 @@
+using System.Security.Claims;
+using Fido2NetLib;
+using Fido2NetLib.Objects;
+using Microsoft.AspNetCore.Authentication;
+using Microsoft.AspNetCore.Authentication.Cookies;
+using Microsoft.AspNetCore.Authorization;
+using Microsoft.AspNetCore.Mvc;
+using Microsoft.EntityFrameworkCore;
+using Server.Models;
+
+namespace Server.Controllers;
+
+[AllowAnonymous]
+[ApiController]
+[Route("api/auth")]
+public class AuthController : ControllerBase
+{
+    private const string RegOptionsKey = "fido2.reg.options";
+    private const string AssertOptionsKey = "fido2.assert.options";
+
+    private readonly IFido2 _fido2;
+    private readonly AppDbContext _db;
+
+    public AuthController(IFido2 fido2, AppDbContext db)
+    {
+        _fido2 = fido2;
+        _db = db;
+    }
+
+    // ── Registration ──────────────────────────────────────────────────────────
+
+    [HttpPost("register/options")]
+    public async Task<IActionResult> RegisterOptions()
+    {
+        // Only allow registration when unenrolled or already authenticated
+        var hasCredentials = await _db.PasskeyCredentials.AnyAsync();
+        if (hasCredentials && !User.Identity!.IsAuthenticated)
+            return Forbid();
+
+        var user = new Fido2User
+        {
+            Id = Guid.NewGuid().ToByteArray(),
+            Name = "owner",
+            DisplayName = "Owner"
+        };
+
+        var existingKeys = await _db.PasskeyCredentials
+            .Select(c => new PublicKeyCredentialDescriptor(c.CredentialId))
+            .ToListAsync();
+
+        var options = _fido2.RequestNewCredential(new RequestNewCredentialParams
+        {
+            User = user,
+            ExcludeCredentials = existingKeys,
+            AuthenticatorSelection = new AuthenticatorSelection
+            {
+                ResidentKey = ResidentKeyRequirement.Required,
+                UserVerification = UserVerificationRequirement.Required,
+            },
+            AttestationPreference = AttestationConveyancePreference.None,
+        });
+
+        HttpContext.Session.SetString(RegOptionsKey, options.ToJson());
+        return Ok(options);
+    }
+
+    [HttpPost("register/complete")]
+    public async Task<IActionResult> RegisterComplete([FromBody] AuthenticatorAttestationRawResponse attestationResponse)
+    {
+        var json = HttpContext.Session.GetString(RegOptionsKey);
+        if (json is null) return BadRequest("Session expired. Please retry enrollment.");
+
+        var options = CredentialCreateOptions.FromJson(json);
+        HttpContext.Session.Remove(RegOptionsKey);
+
+        var hasCredentials = await _db.PasskeyCredentials.AnyAsync();
+        if (hasCredentials && !User.Identity!.IsAuthenticated)
+            return Forbid();
+
+        IsCredentialIdUniqueToUserAsyncDelegate isUnique = async (args, _) =>
+            !await _db.PasskeyCredentials.AnyAsync(c => c.CredentialId == args.CredentialId);
+
+        var result = await _fido2.MakeNewCredentialAsync(new MakeNewCredentialParams
+        {
+            AttestationResponse = attestationResponse,
+            OriginalOptions = options,
+            IsCredentialIdUniqueToUserCallback = isUnique,
+        });
+
+        var credential = new PasskeyCredential
+        {
+            CredentialId = result.Id,
+            PublicKey = result.PublicKey,
+            SignCount = result.SignCount,
+            UserHandle = result.User.Id,
+            AaGuid = result.AaGuid.ToString(),
+        };
+        _db.PasskeyCredentials.Add(credential);
+        await _db.SaveChangesAsync();
+
+        var claims = new[] { new Claim(ClaimTypes.Name, "owner") };
+        var identity = new ClaimsIdentity(claims, CookieAuthenticationDefaults.AuthenticationScheme);
+        await HttpContext.SignInAsync(
+            CookieAuthenticationDefaults.AuthenticationScheme,
+            new ClaimsPrincipal(identity),
+            new AuthenticationProperties { IsPersistent = true });
+
+        return Ok(new { message = "Passkey enrolled and authenticated." });
+    }
+
+    // ── Authentication ────────────────────────────────────────────────────────
+
+    [HttpPost("login/options")]
+    public async Task<IActionResult> LoginOptions()
+    {
+        var existingKeys = await _db.PasskeyCredentials
+            .Select(c => new PublicKeyCredentialDescriptor(c.CredentialId))
+            .ToListAsync();
+
+        var options = _fido2.GetAssertionOptions(new GetAssertionOptionsParams
+        {
+            AllowedCredentials = existingKeys,
+            UserVerification = UserVerificationRequirement.Required,
+        });
+
+        HttpContext.Session.SetString(AssertOptionsKey, options.ToJson());
+        return Ok(options);
+    }
+
+    [HttpPost("login/complete")]
+    public async Task<IActionResult> LoginComplete([FromBody] AuthenticatorAssertionRawResponse assertionResponse)
+    {
+        var json = HttpContext.Session.GetString(AssertOptionsKey);
+        if (json is null) return BadRequest("Session expired. Please retry sign-in.");
+
+        var options = AssertionOptions.FromJson(json);
+        HttpContext.Session.Remove(AssertOptionsKey);
+
+        // assertionResponse.RawId contains the credential ID as raw bytes
+        var credentialId = assertionResponse.RawId;
+        var allCredentials = await _db.PasskeyCredentials.ToListAsync();
+        var stored = allCredentials.FirstOrDefault(c => c.CredentialId.SequenceEqual(credentialId));
+
+        if (stored is null) return Unauthorized("Credential not recognized.");
+
+        IsUserHandleOwnerOfCredentialIdAsync isOwner = (args, _) =>
+            Task.FromResult(args.UserHandle.SequenceEqual(stored.UserHandle));
+
+        var result = await _fido2.MakeAssertionAsync(new MakeAssertionParams
+        {
+            AssertionResponse = assertionResponse,
+            OriginalOptions = options,
+            StoredPublicKey = stored.PublicKey,
+            StoredSignatureCounter = (uint)stored.SignCount,
+            IsUserHandleOwnerOfCredentialIdCallback = isOwner,
+        });
+
+        stored.SignCount = result.SignCount;
+        await _db.SaveChangesAsync();
+
+        var claims = new[] { new Claim(ClaimTypes.Name, "owner") };
+        var identity = new ClaimsIdentity(claims, CookieAuthenticationDefaults.AuthenticationScheme);
+        await HttpContext.SignInAsync(
+            CookieAuthenticationDefaults.AuthenticationScheme,
+            new ClaimsPrincipal(identity),
+            new AuthenticationProperties { IsPersistent = true });
+
+        return Ok(new { message = "Authenticated." });
+    }
+
+    // ── Logout ────────────────────────────────────────────────────────────────
+
+    [HttpPost("logout")]
+    public async Task<IActionResult> Logout()
+    {
+        await HttpContext.SignOutAsync(CookieAuthenticationDefaults.AuthenticationScheme);
+        return Ok();
+    }
+
+    // ── Status ────────────────────────────────────────────────────────────────
+
+    [HttpGet("status")]
+    public async Task<IActionResult> Status()
+    {
+        var hasCredentials = await _db.PasskeyCredentials.AnyAsync();
+        return Ok(new
+        {
+            enrolled = hasCredentials,
+            authenticated = User.Identity?.IsAuthenticated ?? false,
+        });
+    }
+
+    // ── Dev-only test helpers (Development environment only) ──────────────────
+
+    [HttpPost("dev-login")]
+    public async Task<IActionResult> DevLogin([FromServices] IWebHostEnvironment env)
+    {
+        if (!env.IsDevelopment()) return NotFound();
+
+        var claims = new[] { new Claim(ClaimTypes.Name, "owner") };
+        var identity = new ClaimsIdentity(claims, CookieAuthenticationDefaults.AuthenticationScheme);
+        await HttpContext.SignInAsync(
+            CookieAuthenticationDefaults.AuthenticationScheme,
+            new ClaimsPrincipal(identity),
+            new AuthenticationProperties { IsPersistent = false });
+
+        return Ok(new { message = "Dev login successful." });
+    }
+
+    [HttpDelete("credentials")]
+    public async Task<IActionResult> DeleteAllCredentials([FromServices] IWebHostEnvironment env)
+    {
+        if (!env.IsDevelopment()) return NotFound();
+
+        _db.PasskeyCredentials.RemoveRange(_db.PasskeyCredentials);
+        await _db.SaveChangesAsync();
+        return Ok(new { message = "All credentials deleted." });
+    }
+}
@@ -0,0 +1,110 @@
+using Microsoft.AspNetCore.Authorization;
+using Microsoft.AspNetCore.Mvc;
+using Microsoft.EntityFrameworkCore;
+using Server.Models;
+
+namespace Server.Controllers;
+
+[Authorize]
+[ApiController]
+[Route("api/[controller]")]
+public class DecksController : ControllerBase
+{
+    private readonly AppDbContext _context;
+
+    public DecksController(AppDbContext context)
+    {
+        _context = context;
+    }
+
+    [HttpGet]
+    public async Task<ActionResult<List<UserDeck>>> GetDecks()
+    {
+        try
+        {
+            return Ok(await _context.UserDecks.OrderByDescending(d => d.UpdatedAt).ToListAsync());
+        }
+        catch (Exception ex)
+        {
+            Console.WriteLine($"[WARNING] Could not retrieve decks: {ex.Message}");
+            return Ok(new List<UserDeck>());
+        }
+    }
+
+    [HttpGet("{id:guid}")]
+    public async Task<ActionResult<UserDeck>> GetDeck(Guid id)
+    {
+        try
+        {
+            var deck = await _context.UserDecks.FindAsync(id);
+            if (deck == null) return NotFound();
+            return Ok(deck);
+        }
+        catch (Exception ex)
+        {
+            Console.WriteLine($"[WARNING] Could not retrieve deck: {ex.Message}");
+            return StatusCode(500);
+        }
+    }
+
+    [HttpPost]
+    public async Task<ActionResult<UserDeck>> CreateDeck(UserDeck deck)
+    {
+        try
+        {
+            deck.Id = Guid.NewGuid();
+            deck.UpdatedAt = DateTime.UtcNow;
+            _context.UserDecks.Add(deck);
+            await _context.SaveChangesAsync();
+            return Ok(deck);
+        }
+        catch (Exception ex)
+        {
+            Console.WriteLine($"[WARNING] Could not create deck: {ex.Message}");
+            return StatusCode(500, "Failed to save deck.");
+        }
+    }
+
+    [HttpPut("{id:guid}")]
+    public async Task<ActionResult<UserDeck>> UpdateDeck(Guid id, UserDeck deck)
+    {
+        try
+        {
+            var existing = await _context.UserDecks.FindAsync(id);
+            if (existing == null) return NotFound();
+
+            existing.Name = deck.Name;
+            existing.Cards = deck.Cards;
+            existing.Divers = deck.Divers;
+            existing.Notes = deck.Notes;
+            existing.Season = deck.Season;
+            existing.UpdatedAt = DateTime.UtcNow;
+
+            await _context.SaveChangesAsync();
+            return Ok(existing);
+        }
+        catch (Exception ex)
+        {
+            Console.WriteLine($"[WARNING] Could not update deck: {ex.Message}");
+            return StatusCode(500, "Failed to update deck.");
+        }
+    }
+
+    [HttpDelete("{id:guid}")]
+    public async Task<IActionResult> DeleteDeck(Guid id)
+    {
+        try
+        {
+            var deck = await _context.UserDecks.FindAsync(id);
+            if (deck == null) return NotFound();
+            _context.UserDecks.Remove(deck);
+            await _context.SaveChangesAsync();
+            return NoContent();
+        }
+        catch (Exception ex)
+        {
+            Console.WriteLine($"[WARNING] Could not delete deck: {ex.Message}");
+            return StatusCode(500);
+        }
+    }
+}
@@ -1,8 +1,10 @@
 using Chrono.Model;
+using Microsoft.AspNetCore.Authorization;
 using Microsoft.AspNetCore.Mvc;

 namespace Server.Controllers;

+[Authorize]
 [ApiController]
 [Route("api/[controller]")]
 public class NotesController : ControllerBase
@@ -0,0 +1,76 @@
+// <auto-generated />
+using System;
+using Microsoft.EntityFrameworkCore;
+using Microsoft.EntityFrameworkCore.Infrastructure;
+using Microsoft.EntityFrameworkCore.Migrations;
+using Microsoft.EntityFrameworkCore.Storage.ValueConversion;
+using Npgsql.EntityFrameworkCore.PostgreSQL.Metadata;
+using Server;
+
+#nullable disable
+
+namespace Server.Migrations
+{
+    [DbContext(typeof(AppDbContext))]
+    [Migration("20260703051336_AddUserDecks")]
+    partial class AddUserDecks
+    {
+        /// <inheritdoc />
+        protected override void BuildTargetModel(ModelBuilder modelBuilder)
+        {
+#pragma warning disable 612, 618
+            modelBuilder
+                .HasAnnotation("ProductVersion", "10.0.9")
+                .HasAnnotation("Relational:MaxIdentifierLength", 63);
+
+            NpgsqlModelBuilderExtensions.UseIdentityByDefaultColumns(modelBuilder);
+
+            modelBuilder.Entity("Chrono.Model.CardNote", b =>
+                {
+                    b.Property<string>("CardName")
+                        .HasColumnType("text");
+
+                    b.Property<string>("Note")
+                        .IsRequired()
+                        .HasColumnType("text");
+
+                    b.HasKey("CardName");
+
+                    b.ToTable("CardNotes");
+                });
+
+            modelBuilder.Entity("Server.Models.UserDeck", b =>
+                {
+                    b.Property<Guid>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("uuid");
+
+                    b.PrimitiveCollection<string>("Cards")
+                        .IsRequired()
+                        .HasColumnType("jsonb");
+
+                    b.PrimitiveCollection<string>("Divers")
+                        .IsRequired()
+                        .HasColumnType("jsonb");
+
+                    b.Property<string>("Name")
+                        .IsRequired()
+                        .HasColumnType("text");
+
+                    b.Property<string>("Notes")
+                        .HasColumnType("text");
+
+                    b.Property<string>("Season")
+                        .HasColumnType("text");
+
+                    b.Property<DateTime>("UpdatedAt")
+                        .HasColumnType("timestamp with time zone");
+
+                    b.HasKey("Id");
+
+                    b.ToTable("UserDecks");
+                });
+#pragma warning restore 612, 618
+        }
+    }
+}
@@ -0,0 +1,39 @@
+using System;
+using Microsoft.EntityFrameworkCore.Migrations;
+
+#nullable disable
+
+namespace Server.Migrations
+{
+    /// <inheritdoc />
+    public partial class AddUserDecks : Migration
+    {
+        /// <inheritdoc />
+        protected override void Up(MigrationBuilder migrationBuilder)
+        {
+            migrationBuilder.CreateTable(
+                name: "UserDecks",
+                columns: table => new
+                {
+                    Id = table.Column<Guid>(type: "uuid", nullable: false),
+                    Name = table.Column<string>(type: "text", nullable: false),
+                    Cards = table.Column<string>(type: "jsonb", nullable: false),
+                    Divers = table.Column<string>(type: "jsonb", nullable: false),
+                    Notes = table.Column<string>(type: "text", nullable: true),
+                    Season = table.Column<string>(type: "text", nullable: true),
+                    UpdatedAt = table.Column<DateTime>(type: "timestamp with time zone", nullable: false)
+                },
+                constraints: table =>
+                {
+                    table.PrimaryKey("PK_UserDecks", x => x.Id);
+                });
+        }
+
+        /// <inheritdoc />
+        protected override void Down(MigrationBuilder migrationBuilder)
+        {
+            migrationBuilder.DropTable(
+                name: "UserDecks");
+        }
+    }
+}
@@ -0,0 +1,110 @@
+// <auto-generated />
+using System;
+using Microsoft.EntityFrameworkCore;
+using Microsoft.EntityFrameworkCore.Infrastructure;
+using Microsoft.EntityFrameworkCore.Migrations;
+using Microsoft.EntityFrameworkCore.Storage.ValueConversion;
+using Npgsql.EntityFrameworkCore.PostgreSQL.Metadata;
+using Server;
+
+#nullable disable
+
+namespace Server.Migrations
+{
+    [DbContext(typeof(AppDbContext))]
+    [Migration("20260703120000_AddPasskeyCredentials")]
+    partial class AddPasskeyCredentials
+    {
+        /// <inheritdoc />
+        protected override void BuildTargetModel(ModelBuilder modelBuilder)
+        {
+#pragma warning disable 612, 618
+            modelBuilder
+                .HasAnnotation("ProductVersion", "10.0.9")
+                .HasAnnotation("Relational:MaxIdentifierLength", 63);
+
+            NpgsqlModelBuilderExtensions.UseIdentityByDefaultColumns(modelBuilder);
+
+            modelBuilder.Entity("Chrono.Model.CardNote", b =>
+                {
+                    b.Property<string>("CardName")
+                        .HasColumnType("text");
+
+                    b.Property<string>("Note")
+                        .IsRequired()
+                        .HasColumnType("text");
+
+                    b.HasKey("CardName");
+
+                    b.ToTable("CardNotes");
+                });
+
+            modelBuilder.Entity("Server.Models.PasskeyCredential", b =>
+                {
+                    b.Property<int>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("integer")
+                        .HasAnnotation("Npgsql:ValueGenerationStrategy", NpgsqlValueGenerationStrategy.IdentityByDefaultColumn);
+
+                    b.Property<string>("AaGuid")
+                        .IsRequired()
+                        .HasColumnType("text");
+
+                    b.Property<DateTime>("CreatedAt")
+                        .HasColumnType("timestamp with time zone");
+
+                    b.Property<byte[]>("CredentialId")
+                        .IsRequired()
+                        .HasColumnType("bytea");
+
+                    b.Property<byte[]>("PublicKey")
+                        .IsRequired()
+                        .HasColumnType("bytea");
+
+                    b.Property<long>("SignCount")
+                        .HasColumnType("bigint");
+
+                    b.Property<byte[]>("UserHandle")
+                        .IsRequired()
+                        .HasColumnType("bytea");
+
+                    b.HasKey("Id");
+
+                    b.ToTable("PasskeyCredentials");
+                });
+
+            modelBuilder.Entity("Server.Models.UserDeck", b =>
+                {
+                    b.Property<Guid>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("uuid");
+
+                    b.PrimitiveCollection<string>("Cards")
+                        .IsRequired()
+                        .HasColumnType("jsonb");
+
+                    b.PrimitiveCollection<string>("Divers")
+                        .IsRequired()
+                        .HasColumnType("jsonb");
+
+                    b.Property<string>("Name")
+                        .IsRequired()
+                        .HasColumnType("text");
+
+                    b.Property<string>("Notes")
+                        .HasColumnType("text");
+
+                    b.Property<string>("Season")
+                        .HasColumnType("text");
+
+                    b.Property<DateTime>("UpdatedAt")
+                        .HasColumnType("timestamp with time zone");
+
+                    b.HasKey("Id");
+
+                    b.ToTable("UserDecks");
+                });
+#pragma warning restore 612, 618
+        }
+    }
+}
@@ -0,0 +1,41 @@
+using System;
+using Microsoft.EntityFrameworkCore.Migrations;
+using Npgsql.EntityFrameworkCore.PostgreSQL.Metadata;
+
+#nullable disable
+
+namespace Server.Migrations
+{
+    /// <inheritdoc />
+    public partial class AddPasskeyCredentials : Migration
+    {
+        /// <inheritdoc />
+        protected override void Up(MigrationBuilder migrationBuilder)
+        {
+            migrationBuilder.CreateTable(
+                name: "PasskeyCredentials",
+                columns: table => new
+                {
+                    Id = table.Column<int>(type: "integer", nullable: false)
+                        .Annotation("Npgsql:ValueGenerationStrategy", NpgsqlValueGenerationStrategy.IdentityByDefaultColumn),
+                    CredentialId = table.Column<byte[]>(type: "bytea", nullable: false),
+                    PublicKey = table.Column<byte[]>(type: "bytea", nullable: false),
+                    SignCount = table.Column<long>(type: "bigint", nullable: false),
+                    UserHandle = table.Column<byte[]>(type: "bytea", nullable: false),
+                    AaGuid = table.Column<string>(type: "text", nullable: false),
+                    CreatedAt = table.Column<DateTime>(type: "timestamp with time zone", nullable: false)
+                },
+                constraints: table =>
+                {
+                    table.PrimaryKey("PK_PasskeyCredentials", x => x.Id);
+                });
+        }
+
+        /// <inheritdoc />
+        protected override void Down(MigrationBuilder migrationBuilder)
+        {
+            migrationBuilder.DropTable(
+                name: "PasskeyCredentials");
+        }
+    }
+}
@@ -1,4 +1,5 @@
 // <auto-generated />
+using System;
 using Microsoft.EntityFrameworkCore;
 using Microsoft.EntityFrameworkCore.Infrastructure;
 using Microsoft.EntityFrameworkCore.Storage.ValueConversion;
@@ -34,6 +35,72 @@ namespace Server.Migrations

                    b.ToTable("CardNotes");
                });
+
+            modelBuilder.Entity("Server.Models.PasskeyCredential", b =>
+                {
+                    b.Property<int>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("integer")
+                        .HasAnnotation("Npgsql:ValueGenerationStrategy", NpgsqlValueGenerationStrategy.IdentityByDefaultColumn);
+
+                    b.Property<string>("AaGuid")
+                        .IsRequired()
+                        .HasColumnType("text");
+
+                    b.Property<DateTime>("CreatedAt")
+                        .HasColumnType("timestamp with time zone");
+
+                    b.Property<byte[]>("CredentialId")
+                        .IsRequired()
+                        .HasColumnType("bytea");
+
+                    b.Property<byte[]>("PublicKey")
+                        .IsRequired()
+                        .HasColumnType("bytea");
+
+                    b.Property<long>("SignCount")
+                        .HasColumnType("bigint");
+
+                    b.Property<byte[]>("UserHandle")
+                        .IsRequired()
+                        .HasColumnType("bytea");
+
+                    b.HasKey("Id");
+
+                    b.ToTable("PasskeyCredentials");
+                });
+
+            modelBuilder.Entity("Server.Models.UserDeck", b =>
+                {
+                    b.Property<Guid>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("uuid");
+
+                    b.PrimitiveCollection<string>("Cards")
+                        .IsRequired()
+                        .HasColumnType("jsonb");
+
+                    b.PrimitiveCollection<string>("Divers")
+                        .IsRequired()
+                        .HasColumnType("jsonb");
+
+                    b.Property<string>("Name")
+                        .IsRequired()
+                        .HasColumnType("text");
+
+                    b.Property<string>("Notes")
+                        .HasColumnType("text");
+
+                    b.Property<string>("Season")
+                        .HasColumnType("text");
+
+                    b.Property<DateTime>("UpdatedAt")
+                        .HasColumnType("timestamp with time zone");
+
+                    b.HasKey("Id");
+
+                    b.ToTable("UserDecks");
+                });
 #pragma warning restore 612, 618
        }
    }
@@ -0,0 +1,12 @@
+namespace Server.Models;
+
+public class PasskeyCredential
+{
+    public int Id { get; set; }
+    public required byte[] CredentialId { get; set; }
+    public required byte[] PublicKey { get; set; }
+    public long SignCount { get; set; }
+    public required byte[] UserHandle { get; set; }
+    public string AaGuid { get; set; } = string.Empty;
+    public DateTime CreatedAt { get; set; } = DateTime.UtcNow;
+}
@@ -0,0 +1,12 @@
+namespace Server.Models;
+
+public class UserDeck
+{
+    public Guid Id { get; set; } = Guid.NewGuid();
+    public string Name { get; set; } = "";
+    public List<string> Cards { get; set; } = [];
+    public List<string> Divers { get; set; } = [];
+    public string? Notes { get; set; }
+    public string? Season { get; set; }
+    public DateTime UpdatedAt { get; set; } = DateTime.UtcNow;
+}
@@ -1,3 +1,5 @@
+using Fido2NetLib;
+using Microsoft.AspNetCore.Authentication.Cookies;
 using Microsoft.EntityFrameworkCore;
 using Server;
 using Server.Components;
@@ -11,6 +13,38 @@ builder.Services.AddEndpointsApiExplorer();
 builder.Services.AddRazorComponents().AddInteractiveServerComponents();
 builder.Services.AddTelerikBlazor();
 builder.Services.AddSingleton<CardRenderingService>();
+builder.Services.AddScoped<AnalyticsService>();
+builder.Services.AddHttpClient();
+
+builder.Services.AddDistributedMemoryCache();
+builder.Services.AddSession(options =>
+{
+    options.IdleTimeout = TimeSpan.FromMinutes(5);
+    options.Cookie.HttpOnly = true;
+    options.Cookie.IsEssential = true;
+    options.Cookie.SecurePolicy = CookieSecurePolicy.SameAsRequest;
+});
+
+builder.Services.AddAuthentication(CookieAuthenticationDefaults.AuthenticationScheme)
+    .AddCookie(options =>
+    {
+        options.LoginPath = "/login";
+        options.LogoutPath = "/logout";
+        options.ExpireTimeSpan = TimeSpan.FromDays(30);
+        options.SlidingExpiration = true;
+        options.Cookie.HttpOnly = true;
+        options.Cookie.SecurePolicy = CookieSecurePolicy.SameAsRequest;
+        options.Cookie.SameSite = SameSiteMode.Strict;
+    });
+builder.Services.AddAuthorization();
+
+builder.Services.AddFido2(options =>
+{
+    options.ServerDomain = builder.Configuration["Fido2:ServerDomain"]!;
+    options.ServerName = builder.Configuration["Fido2:ServerName"]!;
+    options.Origins = builder.Configuration.GetSection("Fido2:Origins").Get<HashSet<string>>()!;
+    options.TimestampDriftTolerance = 300_000;
+});

 var connectionString = builder.Configuration.GetConnectionString("DefaultConnection");
 builder.Services.AddDbContext<AppDbContext>(options =>
@@ -20,7 +54,6 @@ builder.Services.AddDbContext<AppDbContext>(options =>

 var app = builder.Build();

-// Apply migrations
 using (var scope = app.Services.CreateScope())
 {
    try
@@ -38,6 +71,9 @@ using (var scope = app.Services.CreateScope())
 if (!app.Environment.IsDevelopment()) app.UseExceptionHandler("/Error");

 app.UseStaticFiles();
+app.UseSession();
+app.UseAuthentication();
+app.UseAuthorization();
 app.UseAntiforgery();

 app.MapControllers();
@@ -6,6 +6,8 @@
    </ItemGroup>

    <ItemGroup>
+        <PackageReference Include="Fido2" Version="4.0.1"/>
+        <PackageReference Include="Fido2.AspNet" Version="4.0.1"/>
        <PackageReference Include="Microsoft.EntityFrameworkCore.Design" Version="10.0.9">
            <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
            <PrivateAssets>all</PrivateAssets>
@@ -5,5 +5,10 @@
      "Microsoft.AspNetCore": "Warning"
    }
  },
-  "AllowedHosts": "*"
+  "AllowedHosts": "*",
+  "Fido2": {
+    "ServerDomain": "localhost",
+    "ServerName": "Chrono CCG",
+    "Origins": [ "https://localhost:7001", "http://localhost:5000" ]
+  }
 }
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
6d486f49	ed95535e0a	Vibe passkey	2026-07-03 14:31:40 -04:00
6d486f49	e1cb1a81a3	...	2026-07-03 13:48:14 -04:00
6d486f49	b17f7e12db	...	2026-07-03 13:41:30 -04:00
6d486f49	8e4298404d	Vibe deck builder WIP	2026-07-03 12:26:41 -04:00