Hand simulator and some data fixes

Chrono/.claude/settings.local.json

@@ -8,7 +8,15 @@
       "Bash(awk '{print $NF}')",
       "Bash(dotnet test *)",
       "Bash(dotnet user-secrets *)",
-      "Bash(env)"
+      "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,10 +10,16 @@ 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}") = "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
 		Debug|Any CPU = Debug|Any CPU
@@ -108,8 +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
+		{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

@@ -1,8 +1,8 @@
-using Chrono.Model;
+using Cloud.Models;
 using Microsoft.EntityFrameworkCore;
-using Server.Models;
+using Model;
 
-namespace Server;
+namespace Cloud;
 
 public class AppDbContext : DbContext
 {
@@ -12,6 +12,7 @@ public class AppDbContext : DbContext
 
     public DbSet<CardNote> CardNotes { get; set; }
     public DbSet<UserDeck> UserDecks { get; set; }
+    public DbSet<PasskeyCredential> PasskeyCredentials { get; set; }
 
     protected override void OnModelCreating(ModelBuilder modelBuilder)
     {

Chrono/Cloud/AppDbContextFactory.cs

@@ -1,7 +1,7 @@
 using Microsoft.EntityFrameworkCore;
 using Microsoft.EntityFrameworkCore.Design;
 
-namespace Server;
+namespace Cloud;
 
 public class AppDbContextFactory : IDesignTimeDbContextFactory<AppDbContext>
 {

Chrono/Cloud/Cloud.csproj

@@ -6,6 +6,8 @@
     </ItemGroup>
 
     <ItemGroup>
+        <PackageReference Include="Fido2" Version="4.0.1"/>
+        <PackageReference Include="Fido2.AspNet" Version="4.0.1"/>
         <PackageReference Include="Microsoft.EntityFrameworkCore.Design" Version="10.0.9">
             <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
             <PrivateAssets>all</PrivateAssets>
@@ -14,13 +16,20 @@
             <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>
+        <RootNamespace>Cloud</RootNamespace>
     </PropertyGroup>
 
 </Project>

Chrono/Cloud/Components/App.razor

@@ -13,14 +13,17 @@
     <link href="/lib/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
     <link href="/_content/Telerik.UI.for.Blazor/css/kendo-theme-bootstrap/all.css" rel="stylesheet"/>
     <link href="/css/app.css" rel="stylesheet"/>
-    <link href="/Server.styles.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>
+<CascadingAuthenticationState>
     <Routes/>
+</CascadingAuthenticationState>
 <script src="_framework/blazor.web.js"></script>
 </body>
 

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,5 +1,5 @@
-@namespace Shared.Layout
 @inherits LayoutComponentBase
+@inject Shared.Services.CardPreviewService PreviewService
 <div class="page">
     <div class="sidebar">
         <NavMenu/>
@@ -10,6 +10,9 @@
         <article class="content px-4">
             <TelerikRootComponent>
                 @Body
+                <Shared.Components.CardPreview />
+                <Shared.Components.DocDetailModal Doc="@PreviewService.SelectedDoc" 
+                                                 OnClose="@(() => PreviewService.SelectDoc(null))" />
             </TelerikRootComponent>
         </article>
     </main>

Chrono/Cloud/Components/Layout/NavMenu.razor

@@ -1,5 +1,3 @@
-@namespace Shared.Layout
-
 <div class="top-row ps-3 navbar navbar-dark">
     <div class="container-fluid">
         <a class="navbar-brand" href="">
@@ -14,12 +12,12 @@
 <div class="@NavMenuCssClass nav-scrollable" @onclick="ToggleNavMenu">
     <nav class="nav flex-column">
         <div class="nav-item px-3">
-            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
+            <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="cards">
+            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
                 <i class="bi bi-collection-fill nav-icon"></i> Cards
             </NavLink>
         </div>
@@ -33,6 +31,11 @@
                 <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

Chrono/Cloud/Components/Pages/Cards.razor

@@ -1,6 +1,7 @@
+@page "/"
 @page "/cards"
+@using Chrono.Components
 @using Shared.Services
-@inject HttpClient Http
 @inject AnalyticsService AnalyticsService
 
 <PageTitle>Chrono CCG - Card Gallery</PageTitle>
@@ -28,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>
@@ -134,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>
@@ -200,7 +210,7 @@
     {
         allCards = CardDatabase.Cards;
         factions = allCards
-            .Select(c => c.Faction)
+            .Select(c => c.Syndicate)
             .Where(f => f != null)
             .Distinct()
             .OrderBy(f => f)
@@ -212,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)
         );
 
@@ -272,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/DeckBuilder.razor

@@ -1,9 +1,8 @@
 @page "/deck-builder"
 @page "/deck-builder/{Id:guid}"
 @rendermode InteractiveServer
-@using Chrono.Model
-@inject AppDbContext Db
 @inject NavigationManager Nav
+@inject AppDbContext Db
 
 <PageTitle>@(Id == null ? "New Deck" : "Edit Deck") - Chrono CCG</PageTitle>
 
@@ -11,8 +10,10 @@
     <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"/>
+    <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
@@ -42,13 +43,16 @@
             <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"'>
+            <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"'>
+            <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"'>
+            <button class="tab spell @(categoryFilter == "Spell" ? "active" : "")"
+                    @onclick='() => categoryFilter = "Spell"'>
                 <i class="bi bi-wand"></i> Spells
             </button>
         </div>
@@ -56,7 +60,8 @@
         <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..."/>
+                <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>
@@ -69,14 +74,22 @@
                     <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">
+        <div class="browser-grid" style="--grid-cols: @gridColumns">
             @foreach (var card in BrowserCards)
             {
                 var count = CountInDeck(card.Name);
                 var maxed = count >= 3;
-                <div class="browser-card @(count > 0 ? "in-deck" : "") @(maxed ? "maxed" : "")"
+                <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">
@@ -101,7 +114,8 @@
     <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")">
+            <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">
@@ -151,7 +165,8 @@
                     <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>
+                        <button class="count-btn" @onclick="() => AddCard(cardData)" disabled="@(group.Count >= 3)">+
+                        </button>
                     </div>
                 </div>
             }
@@ -175,6 +190,7 @@
                             <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>
@@ -209,7 +225,8 @@
         <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..."/>
+                <input @bind="diverSearch" @bind:event="oninput" class="form-control search-input"
+                       placeholder="Search..."/>
             </div>
         </div>
         <div class="diver-picker-grid">
@@ -239,6 +256,7 @@
     private string search = "";
     private string categoryFilter = "";
     private string factionFilter = "";
+    private int gridColumns = 4;
 
     private bool showDiverPicker;
     private int activeDiverSlot;
@@ -261,7 +279,7 @@
     private IEnumerable<CardData> BrowserCards => AllCards
         .Where(c => c.Category is "Agent" or "Spell" or "Immortalized")
         .Where(c => categoryFilter == "" || c.Category == categoryFilter)
-        .Where(c => factionFilter == "" || c.Faction == factionFilter)
+        .Where(c => factionFilter == "" || c.Syndicate == factionFilter)
         .Where(c => search == "" || c.MatchesSearch(search));
 
     private record DeckGroup(CardData Card, int Count);
@@ -279,8 +297,10 @@
         {
             var inDeck = deckCards.ToHashSet();
             var otherDiverSlot = activeDiverSlot == 0
-                ? (divers.Count > 1 ? divers[1] : null)
-                : (divers.Count > 0 ? divers[0] : null);
+                ? divers.Count > 1 ? divers[1] : null
+                : divers.Count > 0
+                    ? divers[0]
+                    : null;
 
             return AllCards
                 .Where(c => c.Category is "Agent" or "Spell" or "Immortalized")
@@ -302,17 +322,28 @@
                 var bucket = Math.Min(card.Cost ?? 0, 10);
                 result[bucket] = result.GetValueOrDefault(bucket) + 1;
             }
+
             return result;
         }
     }
 
-    private int CountInDeck(string name) => deckCards.Count(c => c == name);
+    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.Faction != null)
-            .Select(c => c.Faction!)
+            .Where(c => c.Syndicate != null)
+            .Select(c => c.Syndicate!)
             .Distinct()
             .OrderBy(f => f)
             .ToList();
@@ -331,23 +362,27 @@
         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)
@@ -357,7 +392,10 @@
         showDiverPicker = true;
     }
 
-    private void CloseDiverPicker() => showDiverPicker = false;
+    private void CloseDiverPicker()
+    {
+        showDiverPicker = false;
+    }
 
     private void SelectDiver(string name)
     {
@@ -431,4 +469,5 @@
             isSaving = false;
         }
     }
+
 }

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

@@ -3,13 +3,14 @@
     display: flex;
     align-items: center;
     gap: 0.75rem;
-    padding: 0.75rem 1.25rem;
+    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 {
@@ -17,14 +18,36 @@
     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: 120px;
+    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 {
@@ -33,7 +56,7 @@
     gap: 0.35rem;
     font-size: 0.8rem;
     font-weight: 600;
-    padding: 0.3rem 0.7rem;
+    padding: 0.3rem 0.75rem;
     border-radius: 100px;
     white-space: nowrap;
 }
@@ -41,13 +64,13 @@
 .badge-valid {
     background: rgba(102, 187, 106, 0.15);
     color: #66bb6a;
-    border: 1px solid rgba(102, 187, 106, 0.3);
+    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.3);
+    border: 1px solid rgba(255, 171, 64, 0.35);
 }
 
 .save-toast {
@@ -56,8 +79,13 @@
     animation: fade-in 0.2s ease-out;
 }
 
-.save-ok { color: #66bb6a; }
-.save-error { color: #ef5350; }
+.save-ok {
+    color: #66bb6a;
+}
+
+.save-error {
+    color: #ef5350;
+}
 
 /* ── Main Layout ── */
 .builder-layout {
@@ -73,28 +101,170 @@
     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.4rem;
-    padding: 0.75rem 1rem 0;
+    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.5rem 1rem;
+    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.5rem 1rem 1rem;
+    padding: 0.75rem 1rem 1rem;
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
-    gap: 0.6rem;
+    grid-template-columns: repeat(var(--grid-cols, 4), 1fr);
+    column-gap: 0.6rem;
+    row-gap: 1rem;
     align-content: start;
 }
 
@@ -105,41 +275,51 @@
     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);
-    box-shadow: 0 6px 20px rgba(108, 99, 255, 0.2);
-    border-color: rgba(108, 99, 255, 0.25);
+    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.4);
+    border-color: rgba(108, 99, 255, 0.5);
 }
 
 .browser-card.maxed {
-    opacity: 0.5;
+    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%;
-    aspect-ratio: 5 / 7;
+    height: calc(100% - 26px);
     overflow: hidden;
-    background: #111128;
+    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 {
@@ -148,37 +328,41 @@
     right: 0.3rem;
     background: var(--accent);
     color: white;
-    font-size: 0.7rem;
+    font-size: 0.68rem;
     font-weight: 700;
-    width: 1.4rem;
-    height: 1.4rem;
+    width: 1.35rem;
+    height: 1.35rem;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
-    border: 1px solid rgba(255,255,255,0.2);
+    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.45);
+    background: rgba(0, 0, 0, 0.5);
     display: flex;
     align-items: center;
     justify-content: center;
-    font-size: 1.2rem;
-    color: rgba(255,255,255,0.5);
+    font-size: 1.4rem;
+    color: rgba(255, 255, 255, 0.45);
 }
 
 .browser-card-name {
-    font-size: 0.72rem;
-    font-weight: 500;
-    padding: 0.3rem 0.4rem;
+    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 ── */
@@ -187,7 +371,6 @@
     flex-direction: column;
     overflow-y: auto;
     background: var(--bg-surface);
-    gap: 0;
 }
 
 .deck-status-bar {
@@ -199,20 +382,34 @@
     position: sticky;
     top: 0;
     z-index: 10;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
 }
 
 .card-count {
-    font-size: 1.1rem;
+    font-size: 1.05rem;
     font-weight: 700;
     display: flex;
     align-items: baseline;
     gap: 0.15rem;
 }
 
-.count-denom { font-size: 0.8rem; font-weight: 400; color: var(--text-muted); }
-.count-ok { color: #66bb6a; }
-.count-over { color: #ef5350; }
-.count-under { color: var(--text-secondary); }
+.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 {
@@ -222,6 +419,7 @@
     padding: 0.75rem 1rem 0.5rem;
     border-bottom: 1px solid var(--border);
     height: 80px;
+    background: var(--bg-primary);
 }
 
 .curve-col {
@@ -243,23 +441,22 @@
 }
 
 .curve-count {
-    font-size: 0.6rem;
+    font-size: 0.58rem;
     color: var(--text-muted);
     height: 0.8rem;
     line-height: 1;
 }
 
 .curve-bar {
-    width: 100%;
-    background: var(--accent);
+    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.2s ease;
-    opacity: 0.8;
+    transition: height 0.25s ease;
 }
 
 .curve-label {
-    font-size: 0.6rem;
+    font-size: 0.58rem;
     color: var(--text-muted);
     margin-top: 2px;
 }
@@ -267,7 +464,7 @@
 /* ── Deck Card List ── */
 .deck-card-list {
     flex: 1;
-    padding: 0.5rem 0;
+    padding: 0.4rem 0;
 }
 
 .deck-empty {
@@ -275,35 +472,41 @@
     flex-direction: column;
     align-items: center;
     gap: 0.5rem;
-    padding: 2rem;
+    padding: 2.5rem 1rem;
     color: var(--text-muted);
-    font-size: 0.9rem;
+    font-size: 0.88rem;
+    opacity: 0.7;
 }
 
-.deck-empty i { font-size: 2rem; }
+.deck-empty i {
+    font-size: 2rem;
+}
 
 .deck-row {
     display: flex;
     align-items: center;
     gap: 0.5rem;
-    padding: 0.3rem 1rem;
-    border-bottom: 1px solid rgba(42, 42, 74, 0.5);
-    transition: background 0.15s ease;
+    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:hover {
+    background: var(--bg-hover);
+}
 
 .deck-row-img {
-    width: 28px;
-    height: 40px;
+    width: 26px;
+    height: 37px;
     object-fit: cover;
     border-radius: 3px;
     flex-shrink: 0;
+    opacity: 0.9;
 }
 
 .deck-row-name {
     flex: 1;
-    font-size: 0.82rem;
+    font-size: 0.8rem;
     font-weight: 500;
     color: var(--text-primary);
     white-space: nowrap;
@@ -313,42 +516,53 @@
 }
 
 .deck-row-cost {
-    font-size: 0.75rem;
+    font-size: 0.72rem;
     color: var(--gold);
-    font-weight: 600;
+    font-weight: 700;
     flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    gap: 0.15rem;
 }
 
 .deck-row-controls {
     display: flex;
     align-items: center;
-    gap: 0.25rem;
+    gap: 0.2rem;
     flex-shrink: 0;
 }
 
 .count-btn {
-    width: 1.5rem;
-    height: 1.5rem;
+    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.9rem;
+    font-size: 0.85rem;
     display: flex;
     align-items: center;
     justify-content: center;
-    transition: background 0.15s ease;
+    transition: all 0.12s ease;
     padding: 0;
 }
 
-.count-btn:hover:not(:disabled) { background: var(--bg-hover); border-color: var(--accent); }
-.count-btn:disabled { opacity: 0.35; cursor: not-allowed; }
+.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.85rem;
+    font-size: 0.82rem;
     font-weight: 700;
-    width: 1.2rem;
+    width: 1.1rem;
     text-align: center;
     color: var(--accent);
 }
@@ -358,13 +572,14 @@
     display: flex;
     align-items: center;
     gap: 0.4rem;
-    padding: 0.6rem 1rem 0.4rem;
-    font-size: 0.8rem;
+    padding: 0.55rem 0.75rem 0.4rem;
+    font-size: 0.72rem;
     font-weight: 700;
     text-transform: uppercase;
-    letter-spacing: 0.06em;
+    letter-spacing: 0.08em;
     color: var(--text-muted);
     border-top: 1px solid var(--border);
+    background: var(--bg-elevated);
 }
 
 .section-count {
@@ -372,21 +587,23 @@
     background: var(--bg-hover);
     padding: 0.1rem 0.5rem;
     border-radius: 100px;
-    font-size: 0.75rem;
+    font-size: 0.72rem;
 }
 
-.divers-section { padding-bottom: 0.5rem; }
+.divers-section {
+    padding-bottom: 0.5rem;
+}
 
 .diver-slot {
     display: flex;
     align-items: center;
     gap: 0.6rem;
-    margin: 0.25rem 1rem;
-    padding: 0.5rem 0.75rem;
+    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.85rem;
+    font-size: 0.83rem;
     transition: all 0.15s ease;
     color: var(--text-muted);
 }
@@ -394,19 +611,24 @@
 .diver-slot.empty:hover {
     border-color: var(--accent);
     color: var(--accent);
-    background: rgba(108, 99, 255, 0.05);
+    background: rgba(108, 99, 255, 0.06);
 }
 
 .diver-slot.filled {
     border-style: solid;
-    border-color: rgba(108, 99, 255, 0.3);
+    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: 28px;
-    height: 40px;
+    width: 26px;
+    height: 37px;
     object-fit: cover;
     border-radius: 3px;
     flex-shrink: 0;
@@ -415,7 +637,7 @@
 .diver-name {
     flex: 1;
     font-weight: 500;
-    font-size: 0.85rem;
+    font-size: 0.83rem;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -429,11 +651,16 @@
     padding: 0.2rem;
     display: flex;
     align-items: center;
-    font-size: 0.9rem;
+    font-size: 0.85rem;
     flex-shrink: 0;
+    border-radius: 4px;
+    transition: all 0.12s ease;
 }
 
-.diver-remove:hover { color: #ef5350; }
+.diver-remove:hover {
+    color: #ef5350;
+    background: rgba(239, 83, 80, 0.1);
+}
 
 /* ── Notes Section ── */
 .notes-section {
@@ -441,9 +668,9 @@
 }
 
 .notes-input {
-    margin: 0 1rem;
-    width: calc(100% - 2rem);
-    font-size: 0.85rem;
+    margin: 0 0.75rem;
+    width: calc(100% - 1.5rem);
+    font-size: 0.82rem;
     resize: vertical;
     min-height: 80px;
     background: var(--bg-primary);
@@ -451,7 +678,22 @@
     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%;
@@ -462,20 +704,33 @@
     border: 1px solid var(--border);
     border-radius: 16px;
     padding: 1.25rem;
-    width: 560px;
-    max-width: 92vw;
+    width: 580px;
+    max-width: 93vw;
     max-height: 80vh;
     display: flex;
     flex-direction: column;
     gap: 0.75rem;
-    box-shadow: 0 20px 60px rgba(0,0,0,0.6);
-    animation: detail-enter 0.2s ease-out;
+    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 {
@@ -498,13 +753,14 @@
     overflow: hidden;
     background: var(--bg-elevated);
     border: 2px solid transparent;
-    transition: border-color 0.15s ease, transform 0.15s ease;
+    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(-2px);
+    transform: translateY(-3px);
+    box-shadow: 0 6px 16px rgba(108, 99, 255, 0.25);
 }
 
 .diver-picker-card img {
@@ -516,13 +772,14 @@
 
 .diver-picker-card span {
     display: block;
-    font-size: 0.68rem;
+    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 ── */
@@ -546,4 +803,13 @@
     .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/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

@@ -1,6 +1,6 @@
 @page "/my-decks"
-@rendermode InteractiveServer
 @using Microsoft.EntityFrameworkCore
+@rendermode InteractiveServer
 @inject AppDbContext Db
 @inject NavigationManager Nav
 
@@ -99,11 +99,15 @@
     <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>
+        <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> }
+                @if (deleting)
+                {
+                    <span class="spinner-border spinner-border-sm me-1"></span>
+                }
                 Delete
             </button>
         </div>
@@ -178,4 +182,5 @@
             await LoadDecks();
         }
     }
+
 }

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

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

Chrono/Cloud/Components/_Imports.razor

@@ -1,17 +1,19 @@
 @using System.Net.Http
 @using System.Net.Http.Json
-@using Chrono.Model
+@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 Microsoft.AspNetCore.Components.Web.Virtualization
 @using static Microsoft.AspNetCore.Components.Web.RenderMode
 @using Microsoft.JSInterop
-@using Shared.Layout
 @using Shared.Pages
 @using Shared.Components
-@using Server.Components
-@using Server.Models
+@using Cloud.Components
+@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

@@ -1,9 +1,11 @@
+using Cloud.Models;
+using Microsoft.AspNetCore.Authorization;
 using Microsoft.AspNetCore.Mvc;
 using Microsoft.EntityFrameworkCore;
-using Server.Models;
 
-namespace Server.Controllers;
+namespace Cloud.Controllers;
 
+[Authorize]
 [ApiController]
 [Route("api/[controller]")]
 public class DecksController : ControllerBase

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

@@ -5,11 +5,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("20260703051336_AddUserDecks")]
@@ -39,7 +39,7 @@ namespace Server.Migrations
                     b.ToTable("CardNotes");
                 });
 
-            modelBuilder.Entity("Server.Models.UserDeck", b =>
+            modelBuilder.Entity("Cloud.Models.UserDeck", b =>
                 {
                     b.Property<Guid>("Id")
                         .ValueGeneratedOnAdd()

Chrono/Cloud/Migrations/20260703051336_AddUserDecks.cs

@@ -3,7 +3,7 @@ using Microsoft.EntityFrameworkCore.Migrations;
 
 #nullable disable
 
-namespace Server.Migrations
+namespace Cloud.Migrations
 {
     /// <inheritdoc />
     public partial class AddUserDecks : Migration

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

@@ -4,11 +4,10 @@ using Microsoft.EntityFrameworkCore;
 using Microsoft.EntityFrameworkCore.Infrastructure;
 using Microsoft.EntityFrameworkCore.Storage.ValueConversion;
 using Npgsql.EntityFrameworkCore.PostgreSQL.Metadata;
-using Server;
 
 #nullable disable
 
-namespace Server.Migrations
+namespace Cloud.Migrations
 {
     [DbContext(typeof(AppDbContext))]
     partial class AppDbContextModelSnapshot : ModelSnapshot
@@ -36,7 +35,41 @@ namespace Server.Migrations
                     b.ToTable("CardNotes");
                 });
 
-            modelBuilder.Entity("Server.Models.UserDeck", b =>
+            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()

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

@@ -1,4 +1,4 @@
-namespace Server.Models;
+namespace Cloud.Models;
 
 public class UserDeck
 {

Chrono/Cloud/Program.cs

@@ -1,6 +1,7 @@
+using Cloud;
+using Cloud.Components;
+using Microsoft.AspNetCore.Authentication.Cookies;
 using Microsoft.EntityFrameworkCore;
-using Server;
-using Server.Components;
 using Shared.Pages;
 using Shared.Services;
 
@@ -11,9 +12,39 @@ 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 =>
@@ -23,7 +54,6 @@ builder.Services.AddDbContext<AppDbContext>(options =>
 
 var app = builder.Build();
 
-// Apply migrations
 using (var scope = app.Services.CreateScope())
 {
     try
@@ -41,6 +71,9 @@ using (var scope = app.Services.CreateScope())
 if (!app.Environment.IsDevelopment()) app.UseExceptionHandler("/Error");
 
 app.UseStaticFiles();
+app.UseSession();
+app.UseAuthentication();
+app.UseAuthorization();
 app.UseAntiforgery();
 
 app.MapControllers();

Chrono/Cloud/appsettings.json

@@ -0,0 +1,17 @@
+{
+  "Logging": {
+    "LogLevel": {
+      "Default": "Information",
+      "Microsoft.AspNetCore": "Warning"
+    }
+  },
+  "AllowedHosts": "*",
+  "Fido2": {
+    "ServerDomain": "localhost",
+    "ServerName": "Chrono CCG",
+    "Origins": [
+      "https://localhost:7001",
+      "http://localhost:5000"
+    ]
+  }
+}