Hand simulator and some data fixes

Chrono/.claude/settings.local.json

@@ -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 ' *)"
+    ]
+  }
+}

Chrono/Build/Program.cs

@@ -1,10 +1,10 @@
 using System.Text;
 using System.Text.RegularExpressions;
-using Chrono.Model;
+using Model;
 
 var repoRoot = Path.GetFullPath(Path.Combine(AppContext.BaseDirectory, "..", "..", "..", "..", ".."));
 var docsDir = Path.Combine(repoRoot, "chrono.docs");
-var webWwwRoot = Path.Combine(repoRoot, "Chrono", "Web", "wwwroot");
+var webWwwRoot = Path.Combine(repoRoot, "Chrono", "Standalone", "wwwroot");
 var generatedFile = Path.Combine(repoRoot, "Chrono", "Shared", "Generated", "Cards.g.cs");
 
 Console.WriteLine($"Repo root: {repoRoot}");
@@ -49,7 +49,7 @@ foreach (var file in mdFiles)
         Attack = ParseInt(yaml, "attack"),
         Health = ParseInt(yaml, "health"),
         Description = StripWikiLinks(yaml.GetValueOrDefault("description")),
-        Faction = StripWikiLink(yaml.GetValueOrDefault("faction")),
+        Syndicate = StripWikiLink(yaml.GetValueOrDefault("faction")),
         Set = StripWikiLink(yaml.GetValueOrDefault("set")),
         Speed = StripWikiLink(yaml.GetValueOrDefault("speed")),
         Archetypes = ParseList(yaml, "archetypes").Select(s => StripWikiLink(s) ?? "").Where(s => s != "").ToList(),
@@ -66,32 +66,13 @@ foreach (var file in mdFiles)
     cards.Add(card);
 }
 
-// Copy PNGs to wwwroot/cards
-var cardsDir = Path.Combine(webWwwRoot, "cards");
-Directory.CreateDirectory(cardsDir);
-
-var pngFiles = Directory.GetFiles(docsDir, "*.png", SearchOption.AllDirectories);
-var pngMap = pngFiles
-    .GroupBy(Path.GetFileName)
-    .ToDictionary(g => g.Key!, g => g.First(), StringComparer.OrdinalIgnoreCase);
-
-foreach (var card in cards)
-{
-    if (card.ImageFile == null) continue;
-    if (pngMap.TryGetValue(card.ImageFile, out var src))
-    {
-        var dst = Path.Combine(cardsDir, card.ImageFile);
-        File.Copy(src, dst, true);
-    }
-}
-
 // Generate C# source file
 Directory.CreateDirectory(Path.GetDirectoryName(generatedFile)!);
 using var writer = new StreamWriter(generatedFile, false, Encoding.UTF8);
 writer.WriteLine("// <auto-generated/>");
 writer.WriteLine("#nullable enable");
 writer.WriteLine();
-writer.WriteLine("namespace Chrono.Model;");
+writer.WriteLine("namespace Model;");
 writer.WriteLine();
 writer.WriteLine("public static class CardDatabase");
 writer.WriteLine("{");
@@ -109,7 +90,7 @@ for (var i = 0; i < cards.Count; i++)
     WriteNullProp(writer, "Attack", c.Attack, 3);
     WriteNullProp(writer, "Health", c.Health, 3);
     WriteStrProp(writer, "Description", c.Description, 3);
-    WriteStrProp(writer, "Faction", c.Faction, 3);
+    WriteStrProp(writer, "Syndicate", c.Syndicate, 3);
     WriteStrProp(writer, "Set", c.Set, 3);
     WriteStrProp(writer, "Speed", c.Speed, 3);
     WriteListProp(writer, "Archetypes", c.Archetypes, 3);
@@ -157,7 +138,7 @@ foreach (var file in deckFiles)
         Divers = ParseList(yaml, "divers").Select(s => StripWikiLink(s) ?? "").Where(s => s != "").ToList(),
         Description = StripWikiLinks(NullIfNa(yaml.GetValueOrDefault("description")))?.Replace("\r\n", "\n")
             .Replace("\r", "\n").Replace("\n\n", "\n").Replace("\n\n", "\n"),
-        Factions = ParseList(yaml, "factions").Select(s => StripWikiLink(s) ?? "").Where(s => s != "").ToList(),
+        Syndicates = ParseList(yaml, "factions").Select(s => StripWikiLink(s) ?? "").Where(s => s != "").ToList(),
         IsVisible = isVisible,
         DeckCode = deckCode,
         DeckType = yaml.GetValueOrDefault("deckType")
@@ -175,7 +156,7 @@ using var deckWriter = new StreamWriter(deckGeneratedFile, false, Encoding.UTF8)
 deckWriter.WriteLine("// <auto-generated/>");
 deckWriter.WriteLine("#nullable enable");
 deckWriter.WriteLine();
-deckWriter.WriteLine("namespace Chrono.Model;");
+deckWriter.WriteLine("namespace Model;");
 deckWriter.WriteLine();
 deckWriter.WriteLine("public static class DeckDatabase");
 deckWriter.WriteLine("{");
@@ -192,7 +173,7 @@ for (var i = 0; i < decks.Count; i++)
     WriteListProp(deckWriter, "Keycards", d.Keycards, 3);
     WriteListProp(deckWriter, "Divers", d.Divers, 3);
     WriteStrProp(deckWriter, "Description", d.Description, 3);
-    WriteListProp(deckWriter, "Factions", d.Factions, 3);
+    WriteListProp(deckWriter, "Syndicates", d.Syndicates, 3);
     deckWriter.WriteLine($"            IsVisible = {(d.IsVisible ? "true" : "false")},");
     WriteStrProp(deckWriter, "DeckCode", d.DeckCode, 3);
     WriteStrProp(deckWriter, "DeckType", d.DeckType, 3);
@@ -229,19 +210,38 @@ foreach (var file in mdFiles)
         }
     }
 
-    var category = yaml.GetValueOrDefault("category") ?? Path.GetFileName(Path.GetDirectoryName(file)) ?? "";
+    var category = yaml.GetValueOrDefault("category");
+    if (category == null)
+    {
+        var parentDir = Path.GetFileName(Path.GetDirectoryName(file)) ?? "";
+        category = parentDir;
+    }
+
     if (excludedCategories.Contains(category)) continue;
 
     // Also exclude files that look like base templates
     var fileName = Path.GetFileName(file);
     if (fileName.StartsWith("_")) continue;
 
+    // Special handling for Syndicates and Syndicate Pairings
+    List<string>? syndicatesProp = null;
+    if (category == "Syndicate Pairings")
+    {
+        syndicatesProp = ParseList(yaml, "syndicates");
+    }
+    else if (category == "Syndicate" || category == "Faction")
+    {
+        syndicatesProp = [Path.GetFileNameWithoutExtension(file)];
+        category = "Syndicate"; // Normalize Faction to Syndicate
+    }
+
     docs.Add(new DocData
     {
         Title = Path.GetFileNameWithoutExtension(file),
         Category = category,
         Content = body,
-        Frontmatter = yaml
+        Frontmatter = yaml,
+        Syndicates = syndicatesProp
     });
 }
 
@@ -251,7 +251,7 @@ using var docWriter = new StreamWriter(docGeneratedFile, false, Encoding.UTF8);
 docWriter.WriteLine("// <auto-generated/>");
 docWriter.WriteLine("#nullable enable");
 docWriter.WriteLine();
-docWriter.WriteLine("namespace Chrono.Model;");
+docWriter.WriteLine("namespace Model;");
 docWriter.WriteLine();
 docWriter.WriteLine("public static class DocDatabase");
 docWriter.WriteLine("{");
@@ -267,6 +267,7 @@ for (var i = 0; i < docs.Count; i++)
     WriteProp(docWriter, "Category", d.Category, 3);
     WriteStrProp(docWriter, "Content", d.Content, 3);
     WriteDictProp(docWriter, "Frontmatter", d.Frontmatter, 3);
+    WriteListProp(docWriter, "Syndicates", d.Syndicates, 3);
     var comma = i < docs.Count - 1 ? "," : "";
     docWriter.WriteLine($"        }}{comma}");
 }

Chrono/Build/process_cards.py

@@ -1,133 +0,0 @@
-"""
-One-time script: Download card images from playchrono.com and add imageLink frontmatter.
-
-Usage:
-    python process_cards.py
-
-Requires a saved HTML copy of https://www.playchrono.com/collections/cards
-with the embedded JSON.parse('...') card data.
-"""
-import re
-import json
-import os
-import urllib.request
-import sys
-
-# Adjust these paths for your environment
-html_file = r"../playchrono_cards_page.html"
-docs_dir = r"../../chrono.docs"
-
-if not os.path.exists(html_file):
-    # Fallback: search for saved tool output
-    possible = [f for f in os.listdir(r"C:\Users\jonmc\.local\share\opencode\tool-output")
-                if f.startswith("tool_") and os.path.isfile(os.path.join(r"C:\Users\jonmc\.local\share\opencode\tool-output", f))]
-    if possible:
-        html_file = os.path.join(r"C:\Users\jonmc\.local\share\opencode\tool-output", possible[-1])
-
-with open(html_file, 'r', encoding='utf-8') as f:
-    html = f.read()
-
-start_marker = "JSON.parse('"
-idx = html.find(start_marker)
-if idx < 0:
-    print("ERROR: Could not find JSON.parse in HTML")
-    sys.exit(1)
-
-start = idx + len(start_marker)
-quote_end = html.find("')", start)
-if quote_end < 0:
-    print("ERROR: Could not find closing '")
-    sys.exit(1)
-
-raw_json_str = html[start:quote_end]
-
-json_str = raw_json_str.encode('utf-8').decode('unicode_escape')
-json_str = json_str.replace('\\/', '/')
-
-try:
-    cards = json.loads(json_str)
-except json.JSONDecodeError as e:
-    print(f"ERROR parsing JSON: {e}")
-    sys.exit(1)
-
-print(f"Found {len(cards)} cards")
-
-name_to_image = {}
-for card in cards:
-    name = card.get('name', '')
-    image_url = card.get('image_url', '')
-    if name and image_url:
-        name_to_image[name.lower()] = image_url
-    counterpart = card.get('counterpart')
-    if counterpart and isinstance(counterpart, dict):
-        cname = counterpart.get('name', '')
-        cimage = counterpart.get('image_url', '')
-        if cname and cimage:
-            name_to_image[cname.lower()] = cimage
-
-print(f"Built mapping for {len(name_to_image)} card names")
-
-md_files = [f for f in os.listdir(docs_dir) if f.endswith('.md')]
-print(f"Found {len(md_files)} markdown files")
-
-processed = 0
-downloaded = 0
-matched = 0
-for md_file in sorted(md_files):
-    filepath = os.path.join(docs_dir, md_file)
-
-    card_name = md_file[:-3]
-    card_name_lower = card_name.lower()
-
-    if card_name_lower not in name_to_image:
-        continue
-
-    matched += 1
-    image_url = name_to_image[card_name_lower]
-
-    png_filename = f"{card_name}.png"
-    png_filepath = os.path.join(docs_dir, png_filename)
-
-    if not os.path.exists(png_filepath):
-        try:
-            print(f"  DL: {png_filename}")
-            req = urllib.request.Request(image_url, headers={
-                'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/125.0.0.0 Safari/537.36'
-            })
-            with urllib.request.urlopen(req) as response:
-                with open(png_filepath, 'wb') as out:
-                    out.write(response.read())
-            downloaded += 1
-        except Exception as e:
-            print(f"  ERR: {png_filename} - {e}")
-            continue
-
-    with open(filepath, 'r', encoding='utf-8') as f:
-        content = f.read()
-
-    has_image_link = 'imageLink:' in content
-    img_ref = f"![[{png_filename}]]"
-    has_img_ref = img_ref in content
-
-    if has_image_link and has_img_ref:
-        continue
-
-    modified = content
-
-    if not has_image_link:
-        modified = modified.rstrip()
-        if modified.endswith('---'):
-            modified = modified[:-3] + f'imageLink: "[[{png_filename}]]"\n---'
-        else:
-            modified = modified + f'\nimageLink: "[[{png_filename}]]"\n'
-
-    if not has_img_ref:
-        modified = modified.rstrip() + f'\n\n\n{img_ref}\n'
-
-    with open(filepath, 'w', encoding='utf-8') as f:
-        f.write(modified)
-
-    processed += 1
-
-print(f"\nDone! Matched: {matched}, Downloaded: {downloaded}, Updated markdown: {processed}")
-print(f"Skipped (no card match): {len(md_files) - matched}")

Chrono/Chrono.sln

@@ -1,6 +1,6 @@
 
 Microsoft Visual Studio Solution File, Format Version 12.00
-Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Web", "Web\Web.csproj", "{18981096-443A-44BF-AE56-6499C2B03AEF}"
+Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Standalone", "Standalone\Standalone.csproj", "{18981096-443A-44BF-AE56-6499C2B03AEF}"
 EndProject
 Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Build", "Build\Build.csproj", "{36E3775C-0E28-4EAE-AE92-4FB493E3787F}"
 EndProject
@@ -10,11 +10,15 @@ Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Deploy", "Deploy\Deploy.csp
 EndProject
 Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Tests", "Tests\Tests.csproj", "{90F32056-6983-4224-8A8C-E797C71633F3}"
 EndProject
-Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Server", "Server\Server.csproj", "{BFB7B73F-EFDD-4DE8-89F2-E1CBE1B55C27}"
+Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Cloud", "Cloud\Cloud.csproj", "{BFB7B73F-EFDD-4DE8-89F2-E1CBE1B55C27}"
 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}"
+Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Markdown", "Markdown\Markdown.csproj", "{BA7A908C-FEF7-4AC7-ABCE-437259A6C34C}"
+EndProject
+Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "md", "md", "{A4C572E4-E709-4553-B42F-709BFFFE0A7E}"
+EndProject
+Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "shared", "shared", "{92ED656F-1D94-4348-97AD-B76094B14A8E}"
 EndProject
 Global
 	GlobalSection(SolutionConfigurationPlatforms) = preSolution
@@ -110,20 +114,28 @@ 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
+		{BA7A908C-FEF7-4AC7-ABCE-437259A6C34C}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{BA7A908C-FEF7-4AC7-ABCE-437259A6C34C}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{BA7A908C-FEF7-4AC7-ABCE-437259A6C34C}.Debug|x64.ActiveCfg = Debug|Any CPU
+		{BA7A908C-FEF7-4AC7-ABCE-437259A6C34C}.Debug|x64.Build.0 = Debug|Any CPU
+		{BA7A908C-FEF7-4AC7-ABCE-437259A6C34C}.Debug|x86.ActiveCfg = Debug|Any CPU
+		{BA7A908C-FEF7-4AC7-ABCE-437259A6C34C}.Debug|x86.Build.0 = Debug|Any CPU
+		{BA7A908C-FEF7-4AC7-ABCE-437259A6C34C}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{BA7A908C-FEF7-4AC7-ABCE-437259A6C34C}.Release|Any CPU.Build.0 = Release|Any CPU
+		{BA7A908C-FEF7-4AC7-ABCE-437259A6C34C}.Release|x64.ActiveCfg = Release|Any CPU
+		{BA7A908C-FEF7-4AC7-ABCE-437259A6C34C}.Release|x64.Build.0 = Release|Any CPU
+		{BA7A908C-FEF7-4AC7-ABCE-437259A6C34C}.Release|x86.ActiveCfg = Release|Any CPU
+		{BA7A908C-FEF7-4AC7-ABCE-437259A6C34C}.Release|x86.Build.0 = Release|Any CPU
 	EndGlobalSection
 	GlobalSection(SolutionProperties) = preSolution
 		HideSolutionNode = FALSE
 	EndGlobalSection
+	GlobalSection(NestedProjects) = preSolution
+		{BA7A908C-FEF7-4AC7-ABCE-437259A6C34C} = {A4C572E4-E709-4553-B42F-709BFFFE0A7E}
+		{36E3775C-0E28-4EAE-AE92-4FB493E3787F} = {92ED656F-1D94-4348-97AD-B76094B14A8E}
+		{90F32056-6983-4224-8A8C-E797C71633F3} = {92ED656F-1D94-4348-97AD-B76094B14A8E}
+		{30D8468D-01E1-4D8A-99AF-EE4A75A5E956} = {92ED656F-1D94-4348-97AD-B76094B14A8E}
+		{3358AF7A-603B-4BAC-A7F5-07978FB87843} = {92ED656F-1D94-4348-97AD-B76094B14A8E}
+		{E5E9A799-76C8-43B3-B9C2-3CAEC2B5E1DD} = {92ED656F-1D94-4348-97AD-B76094B14A8E}
+	EndGlobalSection
 EndGlobal

Chrono/Cloud/AppDbContext.cs

@@ -0,0 +1,28 @@
+using Cloud.Models;
+using Microsoft.EntityFrameworkCore;
+using Model;
+
+namespace Cloud;
+
+public class AppDbContext : DbContext
+{
+    public AppDbContext(DbContextOptions<AppDbContext> options) : base(options)
+    {
+    }
+
+    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");
+        });
+    }
+}

Chrono/Cloud/AppDbContextFactory.cs

@@ -0,0 +1,15 @@
+using Microsoft.EntityFrameworkCore;
+using Microsoft.EntityFrameworkCore.Design;
+
+namespace Cloud;
+
+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);
+    }
+}

Chrono/Cloud/Cloud.csproj

@@ -1,15 +1,35 @@
 <Project Sdk="Microsoft.NET.Sdk.Web">
 
+    <ItemGroup>
+        <ProjectReference Include="..\Shared\Shared.csproj"/>
+        <ProjectReference Include="..\Model\Model.csproj"/>
+    </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>
+        </PackageReference>
+        <PackageReference Include="Microsoft.EntityFrameworkCore.Tools" Version="10.0.9">
+            <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
+            <PrivateAssets>all</PrivateAssets>
+        </PackageReference>
+        <PackageReference Include="MudBlazor" Version="9.6.0"/>
+        <PackageReference Include="Npgsql.EntityFrameworkCore.PostgreSQL" Version="10.0.2"/>
+    </ItemGroup>
+
+    <ItemGroup>
+        <AdditionalFiles Include="Components\Layout\MainLayout.razor"/>
+        <AdditionalFiles Include="Components\Layout\NavMenu.razor"/>
+    </ItemGroup>
+
     <PropertyGroup>
         <TargetFramework>net10.0</TargetFramework>
         <Nullable>enable</Nullable>
         <ImplicitUsings>enable</ImplicitUsings>
-        <BlazorDisableThrowNavigationException>true</BlazorDisableThrowNavigationException>
+        <RootNamespace>Cloud</RootNamespace>
     </PropertyGroup>
 
-    <ItemGroup>
-        <ProjectReference Include="..\Model\Model.csproj"/>
-        <ProjectReference Include="..\Shared\Shared.csproj"/>
-    </ItemGroup>
-
 </Project>

Chrono/Cloud/Components/App.razor

@@ -1,23 +1,30 @@
-<!DOCTYPE html>
+<!DOCTYPE html>
 <html lang="en">
 
 <head>
     <meta charset="utf-8"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
+    <title>Chrono CCG</title>
     <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"/>
+    <link href="https://fonts.googleapis.com" rel="preconnect"/>
+    <link crossorigin href="https://fonts.gstatic.com" rel="preconnect"/>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet"/>
+    <link href="/lib/bootstrap-icons/bootstrap-icons.min.css" rel="stylesheet"/>
+    <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="/Cloud.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/>
-<ReconnectModal/>
-<script src="@Assets["_framework/blazor.web.js"]"></script>
+<CascadingAuthenticationState>
+    <Routes/>
+</CascadingAuthenticationState>
+<script src="_framework/blazor.web.js"></script>
 </body>
 
-</html>
+</html>

Chrono/Cloud/Components/CardDialog.razor

@@ -11,7 +11,7 @@
             {
                 <div class="detail-image">
                     <img src="@Card.ImagePath" alt="@Card.Name"
-                         onerror="this.style.display='none';this.parentElement.style.display='none'"/>
+                         onerror="this.src='@Card.SmallImagePath';this.onerror=null;"/>
                 </div>
             }
             <div class="detail-info">
@@ -38,11 +38,11 @@
                     </div>
                 </div>
 
-                @if (Card.Faction != null)
+                @if (Card.Syndicate != 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>
+                        <span class="field-value">@Card.Syndicate</span>
                     </div>
                 }
 

Chrono/Cloud/Components/CardDialog.razor.css

@@ -26,7 +26,7 @@
     border: 1px solid var(--border);
     border-radius: 16px;
     padding: 0;
-    max-width: 720px;
+    max-width: 850px;
     width: 92vw;
     max-height: 88vh;
     overflow-y: auto;
@@ -76,13 +76,15 @@
 }
 
 .detail-image {
-    flex: 0 0 260px;
+    flex: 0 0 320px;
 }
 
 .detail-image img {
     width: 100%;
     border-radius: var(--radius);
     box-shadow: var(--shadow);
+    max-height: 80vh;
+    object-fit: contain;
 }
 
 /* ── No-image layout ── */

Chrono/Cloud/Components/Layout/MainLayout.razor

@@ -1,23 +1,19 @@
-@inherits LayoutComponentBase
-
+@inherits LayoutComponentBase
+@inject Shared.Services.CardPreviewService PreviewService
 <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>
-
+        <NavigationTracker/>
         <article class="content px-4">
-            @Body
+            <TelerikRootComponent>
+                @Body
+                <Shared.Components.CardPreview />
+                <Shared.Components.DocDetailModal Doc="@PreviewService.SelectedDoc" 
+                                                 OnClose="@(() => PreviewService.SelectDoc(null))" />
+            </TelerikRootComponent>
         </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>

Chrono/Cloud/Components/Layout/MainLayout.razor.css

@@ -75,24 +75,3 @@ main {
         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;
-}

Chrono/Cloud/Components/Layout/NavMenu.razor

@@ -1,29 +1,67 @@
-<div class="top-row ps-3 navbar navbar-dark">
+<div class="top-row ps-3 navbar navbar-dark">
     <div class="container-fluid">
-        <a class="navbar-brand" href="">Cloud</a>
+        <a class="navbar-brand" href="">
+            <i class="bi bi-hourglass-split me-2 text-warning"></i> Chrono CCG
+        </a>
+        <button title="Navigation menu" class="navbar-toggler" @onclick="ToggleNavMenu">
+            <span class="navbar-toggler-icon"></span>
+        </button>
     </div>
 </div>
 
-<input type="checkbox" title="Navigation menu" class="navbar-toggler"/>
-
-<div class="nav-scrollable" onclick="document.querySelector('.navbar-toggler').click()">
+<div class="@NavMenuCssClass nav-scrollable" @onclick="ToggleNavMenu">
     <nav class="nav flex-column">
+        <div class="nav-item px-3">
+            <NavLink class="nav-link" href="home">
+                <i class="bi bi-house-door-fill nav-icon"></i> Home
+            </NavLink>
+        </div>
         <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
+                <i class="bi bi-collection-fill nav-icon"></i> Cards
             </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 class="nav-link" href="agents">
+                <i class="bi bi-people-fill nav-icon"></i> Agents
             </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 class="nav-link" href="decks">
+                <i class="bi bi-journal-text nav-icon"></i> Decks
+            </NavLink>
+        </div>
+        <div class="nav-item px-3">
+            <NavLink class="nav-link" href="syndicates">
+                <i class="bi bi-diagram-2-fill nav-icon"></i> Syndicates
+            </NavLink>
+        </div>
+        <div class="nav-item px-3">
+            <NavLink class="nav-link" href="my-decks">
+                <i class="bi bi-pencil-square nav-icon"></i> My Decks
+            </NavLink>
+        </div>
+        <div class="nav-item px-3">
+            <NavLink class="nav-link" href="deck-builder">
+                <i class="bi bi-hammer nav-icon"></i> Deck Builder
+            </NavLink>
+        </div>
+        <div class="nav-item px-3">
+            <NavLink class="nav-link" href="docs">
+                <i class="bi bi-book-fill nav-icon"></i> Docs
             </NavLink>
         </div>
     </nav>
-</div>
+</div>
+
+@code {
+    private bool collapseNavMenu = true;
+
+    private string? NavMenuCssClass => collapseNavMenu ? "collapse" : null;
+
+    private void ToggleNavMenu()
+    {
+        collapseNavMenu = !collapseNavMenu;
+    }
+
+}

Chrono/Cloud/Components/Layout/NavMenu.razor.css

@@ -1,18 +1,5 @@
 .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);
+    background-color: rgba(255, 255, 255, 0.1);
 }
 
 .top-row {
@@ -24,26 +11,11 @@
     font-size: 1.1rem;
 }
 
-.bi {
-    display: inline-block;
-    position: relative;
-    width: 1.25rem;
-    height: 1.25rem;
+.nav-icon {
     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");
+    font-size: 1.05rem;
+    width: 1.25rem;
+    text-align: center;
 }
 
 .nav-item {
@@ -59,16 +31,13 @@
     padding-bottom: 1rem;
 }
 
-.nav-item ::deep .nav-link {
+.nav-item ::deep a {
     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 {
@@ -76,29 +45,21 @@
     color: white;
 }
 
-.nav-item ::deep .nav-link:hover {
+.nav-item ::deep a: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 */
+    .collapse {
         display: block;
+    }
 
-        /* Allow sidebar to scroll for tall menus */
+    .nav-scrollable {
         height: calc(100vh - 3.5rem);
         overflow-y: auto;
     }

Chrono/Cloud/Components/Layout/ReconnectModal.razor

@@ -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>

Chrono/Cloud/Components/Layout/ReconnectModal.razor.css

@@ -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;
-    }
-}

Chrono/Cloud/Components/Layout/ReconnectModal.razor.js

@@ -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();
-    }
-}

Chrono/Cloud/Components/Pages/Cards.razor

@@ -1,5 +1,7 @@
+@page "/"
 @page "/cards"
-@inject HttpClient Http
+@using Chrono.Components
+@using Shared.Services
 @inject AnalyticsService AnalyticsService
 
 <PageTitle>Chrono CCG - Card Gallery</PageTitle>
@@ -27,7 +29,8 @@
             <i class="bi bi-person-fill"></i> Immortalized
         </button>
 
-        <div class="tab link-toggle @(agentLink ? "active" : "")" @onclick="ToggleAgentLink" title="Link Agents and Immortalized cards">
+        <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>
@@ -133,6 +136,14 @@
                         <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.IsSpell && !string.IsNullOrEmpty(card.Speed))
+                        {
+                            <div class="card-speed-badge" title="Speed">
+                                <i class="bi bi-wind"></i> @card.Speed
+                            </div>
+                        }
+
                         @if (card.IsImmortalized)
                         {
                             <div class="card-immortalize-badge" title="Immortalizes"><i class="bi bi-star-fill"></i>
@@ -173,8 +184,6 @@
     }
 </div>
 
-}
-
 @if (selectedCard != null)
 {
     <CardDialog Card="selectedCard" OnClose="CloseDetail" OnNavigate="SelectCard"/>
@@ -201,7 +210,7 @@
     {
         allCards = CardDatabase.Cards;
         factions = allCards
-            .Select(c => c.Faction)
+            .Select(c => c.Syndicate)
             .Where(f => f != null)
             .Distinct()
             .OrderBy(f => f)
@@ -213,7 +222,7 @@
         var primarySet = allCards.Where(c =>
             c.MatchesSearch(search) &&
             (categoryFilter == "" || c.Category == categoryFilter) &&
-            (factionFilter == "" || c.Faction == factionFilter) &&
+            (factionFilter == "" || c.Syndicate == factionFilter) &&
             (costFilter == "" || c.Cost?.ToString() == costFilter)
         );
 
@@ -273,6 +282,7 @@
                 seen.Add(card.Name);
             }
         }
+
         return result;
     }
 

Chrono/Cloud/Components/Pages/Cards.razor.css

@@ -477,6 +477,29 @@
     border: 1px solid rgba(255, 215, 0, 0.3);
 }
 
+.card-speed-badge {
+    position: absolute;
+    top: 0.4rem;
+    right: 0.4rem;
+    background: rgba(0, 0, 0, 0.75);
+    backdrop-filter: blur(4px);
+    color: #ce93d8; /* Match spell category color */
+    font-weight: 700;
+    font-size: 0.65rem;
+    padding: 0.2rem 0.5rem;
+    border-radius: 4px;
+    border: 1px solid rgba(206, 147, 216, 0.3);
+    z-index: 2;
+    line-height: 1;
+    display: flex;
+    align-items: center;
+    gap: 0.2rem;
+}
+
+.card-speed-badge i {
+    font-size: 0.75rem;
+}
+
 /* ── Card Label ── */
 .card-label {
     display: flex;

Chrono/Cloud/Components/Pages/Counter.razor

@@ -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++;
-    }
-
-}

Chrono/Cloud/Components/Pages/DeckBuilder.razor

@@ -0,0 +1,473 @@
+@page "/deck-builder"
+@page "/deck-builder/{Id:guid}"
+@rendermode InteractiveServer
+@inject NavigationManager Nav
+@inject AppDbContext Db
+
+<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.Syndicate == 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)
+    {
+        return _deckCounts.TryGetValue(name, out var c) ? c : 0;
+    }
+
+    protected override async Task OnParametersSetAsync()
+    {
+        factions = AllCards
+            .Where(c => c.Syndicate != null)
+            .Select(c => c.Syndicate!)
+            .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;
+        }
+    }
+
+}

Chrono/Cloud/Components/Pages/DeckBuilder.razor.css

@@ -0,0 +1,815 @@
+/* ── 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;
+    }
+}

Chrono/Cloud/Components/Pages/Error.razor

@@ -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;
-    }
-
-}

Chrono/Cloud/Components/Pages/Home.razor

@@ -1,7 +0,0 @@
-@page "/"
-
-<PageTitle>Home</PageTitle>
-
-<h1>Hello, world!</h1>
-
-Welcome to your new app.

Chrono/Cloud/Components/Pages/Index.razor

@@ -1,3 +1,3 @@
-@page "/test"
+@page "/test"
 <h1>Test Page</h1>
 <p>This is a test page.</p>

Chrono/Cloud/Components/Pages/Login.razor

@@ -0,0 +1,110 @@
+@page "/login"
+@rendermode InteractiveServer
+@attribute [AllowAnonymous]
+@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("/", 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("/", true);
+        }
+        catch (Exception ex)
+        {
+            _error = ex.Message;
+        }
+        finally
+        {
+            _busy = false;
+        }
+    }
+
+    private record StatusResponse(bool Enrolled, bool Authenticated);
+
+}

Chrono/Cloud/Components/Pages/Login.razor.css

@@ -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;
+}

Chrono/Cloud/Components/Pages/MyDecks.razor

@@ -0,0 +1,186 @@
+@page "/my-decks"
+@using Microsoft.EntityFrameworkCore
+@rendermode InteractiveServer
+@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();
+        }
+    }
+
+}

Chrono/Cloud/Components/Pages/MyDecks.razor.css

@@ -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;
+}

Chrono/Cloud/Components/Pages/NotFound.razor

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

Chrono/Cloud/Components/Pages/Weather.razor

@@ -1,5 +0,0 @@
-@page "/weather"
-@using Shared.Pages
-@attribute [StreamRendering]
-
-<Decks></Decks>

Chrono/Cloud/Components/RedirectToLogin.razor

@@ -0,0 +1,10 @@
+@inject NavigationManager Nav
+
+@code {
+
+    protected override void OnInitialized()
+    {
+        Nav.NavigateTo("/login", true);
+    }
+
+}

Chrono/Cloud/Components/Routes.razor

@@ -1,9 +1,11 @@
-@using Shared.Pages
-@using NotFound = Cloud.Components.Pages.NotFound
-<Router AppAssembly="typeof(Program).Assembly" AdditionalAssemblies="new[] { typeof(Home).Assembly }"
-        NotFoundPage="typeof(NotFound)">
+<Router AppAssembly="@typeof(Program).Assembly"
+        AdditionalAssemblies="new[] { typeof(Home).Assembly, typeof(Syndicates).Assembly, typeof(Agents).Assembly }">
     <Found Context="routeData">
-        <RouteView RouteData="routeData" DefaultLayout="typeof(MainLayout)"/>
-        <FocusOnNavigate RouteData="routeData" Selector="h1"/>
+        <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)">
+            <NotAuthorized>
+                <RedirectToLogin/>
+            </NotAuthorized>
+        </AuthorizeRouteView>
+        <FocusOnNavigate RouteData="@routeData" Selector="h1"/>
     </Found>
-</Router>
+</Router>

Chrono/Cloud/Components/_Imports.razor

@@ -1,11 +1,19 @@
-@using System.Net.Http
+@using System.Net.Http
 @using System.Net.Http.Json
+@using Microsoft.AspNetCore.Authorization
+@using Microsoft.AspNetCore.Components.Authorization
+@using Model
 @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 static Microsoft.AspNetCore.Components.Web.RenderMode
 @using Microsoft.JSInterop
-@using Cloud
+@using Shared.Pages
+@using Shared.Components
 @using Cloud.Components
-@using Cloud.Components.Layout
+@using Cloud.Models
+@using Telerik.Blazor
+@using Telerik.Blazor.Components
+@using Telerik.DataSource
+@using Cloud.Components.Layout

Chrono/Cloud/Controllers/AuthController.cs

@@ -0,0 +1,220 @@
+using System.Security.Claims;
+using Cloud.Models;
+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;
+
+namespace Cloud.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 AppDbContext _db;
+
+    private readonly IFido2 _fido2;
+
+    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." });
+    }
+}

Chrono/Cloud/Controllers/DecksController.cs

@@ -0,0 +1,110 @@
+using Cloud.Models;
+using Microsoft.AspNetCore.Authorization;
+using Microsoft.AspNetCore.Mvc;
+using Microsoft.EntityFrameworkCore;
+
+namespace Cloud.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);
+        }
+    }
+}

Chrono/Cloud/Controllers/NotesController.cs

@@ -1,8 +1,10 @@
-using Chrono.Model;
+using Microsoft.AspNetCore.Authorization;
 using Microsoft.AspNetCore.Mvc;
+using Model;
 
-namespace Server.Controllers;
+namespace Cloud.Controllers;
 
+[Authorize]
 [ApiController]
 [Route("api/[controller]")]
 public class NotesController : ControllerBase

Chrono/Cloud/Migrations/20260618210058_InitialCreate.Designer.cs

@@ -4,11 +4,11 @@ using Microsoft.EntityFrameworkCore.Infrastructure;
 using Microsoft.EntityFrameworkCore.Migrations;
 using Microsoft.EntityFrameworkCore.Storage.ValueConversion;
 using Npgsql.EntityFrameworkCore.PostgreSQL.Metadata;
-using Server;
+using Cloud;
 
 #nullable disable
 
-namespace Server.Migrations
+namespace Cloud.Migrations
 {
     [DbContext(typeof(AppDbContext))]
     [Migration("20260618210058_InitialCreate")]

Chrono/Cloud/Migrations/20260618210058_InitialCreate.cs

@@ -2,7 +2,7 @@
 
 #nullable disable
 
-namespace Server.Migrations
+namespace Cloud.Migrations
 {
     /// <inheritdoc />
     public partial class InitialCreate : Migration

Chrono/Cloud/Migrations/20260703051336_AddUserDecks.Designer.cs

@@ -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 Cloud;
+
+#nullable disable
+
+namespace Cloud.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("Cloud.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
+        }
+    }
+}

Chrono/Cloud/Migrations/20260703051336_AddUserDecks.cs

@@ -0,0 +1,39 @@
+using System;
+using Microsoft.EntityFrameworkCore.Migrations;
+
+#nullable disable
+
+namespace Cloud.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");
+        }
+    }
+}

Chrono/Cloud/Migrations/20260703120000_AddPasskeyCredentials.Designer.cs

@@ -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 Cloud;
+
+#nullable disable
+
+namespace Cloud.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("Cloud.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("Cloud.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
+        }
+    }
+}

Chrono/Cloud/Migrations/20260703120000_AddPasskeyCredentials.cs

@@ -0,0 +1,41 @@
+using System;
+using Microsoft.EntityFrameworkCore.Migrations;
+using Npgsql.EntityFrameworkCore.PostgreSQL.Metadata;
+
+#nullable disable
+
+namespace Cloud.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");
+        }
+    }
+}

Chrono/Cloud/Migrations/AppDbContextModelSnapshot.cs

@@ -0,0 +1,106 @@
+// <auto-generated />
+using System;
+using Microsoft.EntityFrameworkCore;
+using Microsoft.EntityFrameworkCore.Infrastructure;
+using Microsoft.EntityFrameworkCore.Storage.ValueConversion;
+using Npgsql.EntityFrameworkCore.PostgreSQL.Metadata;
+
+#nullable disable
+
+namespace Cloud.Migrations
+{
+    [DbContext(typeof(AppDbContext))]
+    partial class AppDbContextModelSnapshot : ModelSnapshot
+    {
+        protected override void BuildModel(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("Cloud.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("Cloud.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
+        }
+    }
+}

Chrono/Cloud/Models/PasskeyCredential.cs

@@ -0,0 +1,12 @@
+namespace Cloud.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;
+}

Chrono/Cloud/Models/UserDeck.cs

@@ -0,0 +1,12 @@
+namespace Cloud.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;
+}

Chrono/Cloud/Program.cs

@@ -1,28 +1,84 @@
+using Cloud;
 using Cloud.Components;
+using Microsoft.AspNetCore.Authentication.Cookies;
+using Microsoft.EntityFrameworkCore;
+using Shared.Pages;
+using Shared.Services;
 
 var builder = WebApplication.CreateBuilder(args);
 
-// Add services to the container.
-builder.Services.AddRazorComponents()
-    .AddInteractiveServerComponents();
+builder.Services.AddControllers();
+builder.Services.AddEndpointsApiExplorer();
+builder.Services.AddRazorComponents().AddInteractiveServerComponents();
+builder.Services.AddTelerikBlazor();
+builder.Services.AddSingleton<CardRenderingService>();
+builder.Services.AddScoped<CardPreviewService>();
+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 =>
+{
+    if (!string.IsNullOrEmpty(connectionString)) options.UseNpgsql(connectionString);
+});
 
 var app = builder.Build();
 
-// Configure the HTTP request pipeline.
-if (!app.Environment.IsDevelopment())
+using (var scope = app.Services.CreateScope())
 {
-    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();
+    try
+    {
+        var db = scope.ServiceProvider.GetRequiredService<AppDbContext>();
+        if (!string.IsNullOrEmpty(connectionString)) db.Database.Migrate();
+    }
+    catch (Exception ex)
+    {
+        Console.WriteLine(
+            $"[WARNING] Database migration failed: {ex.Message}. The application will continue without a database connection.");
+    }
 }
 
-app.UseStatusCodePagesWithReExecute("/not-found", createScopeForStatusCodePages: true);
-app.UseHttpsRedirection();
+if (!app.Environment.IsDevelopment()) app.UseExceptionHandler("/Error");
 
+app.UseStaticFiles();
+app.UseSession();
+app.UseAuthentication();
+app.UseAuthorization();
 app.UseAntiforgery();
 
-app.MapStaticAssets();
+app.MapControllers();
 app.MapRazorComponents<App>()
-    .AddInteractiveServerRenderMode();
+    .AddInteractiveServerRenderMode()
+    .AddAdditionalAssemblies(typeof(Home).Assembly);
 
 app.Run();

Chrono/Cloud/Properties/launchSettings.json

@@ -1,11 +1,11 @@
-{
+{
   "$schema": "https://json.schemastore.org/launchsettings.json",
   "profiles": {
     "http": {
       "commandName": "Project",
       "dotnetRunMessages": true,
-      "launchBrowser": true,
-      "applicationUrl": "http://localhost:5230",
+      "launchBrowser": false,
+      "applicationUrl": "http://localhost:5256",
       "environmentVariables": {
         "ASPNETCORE_ENVIRONMENT": "Development"
       }
@@ -13,8 +13,8 @@
     "https": {
       "commandName": "Project",
       "dotnetRunMessages": true,
-      "launchBrowser": true,
-      "applicationUrl": "https://localhost:7086;http://localhost:5230",
+      "launchBrowser": false,
+      "applicationUrl": "https://localhost:7266;http://localhost:5256",
       "environmentVariables": {
         "ASPNETCORE_ENVIRONMENT": "Development"
       }

Chrono/Cloud/appsettings.json

@@ -5,5 +5,13 @@
       "Microsoft.AspNetCore": "Warning"
     }
   },
-  "AllowedHosts": "*"
+  "AllowedHosts": "*",
+  "Fido2": {
+    "ServerDomain": "localhost",
+    "ServerName": "Chrono CCG",
+    "Origins": [
+      "https://localhost:7001",
+      "http://localhost:5000"
+    ]
+  }
 }

Chrono/Cloud/wwwroot/app.css

@@ -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;
-}