Agent displayed data makes more sense and fixed load screen

Chrono/Web/Pages/Agents.razor

@@ -17,7 +17,7 @@
                  Height="700px"
                  class="agents-grid">
         <GridColumns>
-            <GridColumn Title="Im." Width="30px">
+            <GridColumn Field="@nameof(CardData.HasImmortalize)"  Title="Im." Width="120px">
                 <Template>
                     @if (((CardData)context).HasImmortalize)
                     {
@@ -34,10 +34,10 @@
                     </div>
                 </Template>
             </GridColumn>
-            <GridColumn Field="@nameof(CardData.Cost)" Title="Cost" Width="60px"/>
+            <GridColumn Field="@nameof(CardData.Cost)" Title="Cost" Width="120px"/>
-            <GridColumn Field="@nameof(CardData.Faction)" Title="Faction" Width="110px"/>
+            <GridColumn Field="@nameof(CardData.Faction)" Title="Faction" Width="140px"/>
-            <GridColumn Field="@nameof(CardData.Attack)" Title="ATK" Width="60px"/>
+            <GridColumn Field="@nameof(CardData.Attack)" Title="ATK" Width="120px"/>
-            <GridColumn Field="@nameof(CardData.Health)" Title="HP" Width="60px"/>
+            <GridColumn Field="@nameof(CardData.Health)" Title="HP" Width="120px"/>
             <GridColumn Field="@nameof(CardData.Description)" Title="Description" Width="400px"/>
 
         </GridColumns>

Chrono/Web/Pages/Agents.razor.css

@@ -81,8 +81,21 @@
     color: var(--text-primary);
 }
 
-.agents-page ::deep .k-pager-nav {
+.agents-page ::deep .k-pager-wrap {
-    color: var(--text-secondary);
+    color: #e8e8f0;
+}
+
+.agents-page ::deep .k-pager-nav,
+.agents-page ::deep .k-pager-numbers,
+.agents-page ::deep .k-pager-numbers .k-link,
+.agents-page ::deep .k-pager-input,
+.agents-page ::deep .k-pager-info {
+    color: #e8e8f0;
+}
+
+.agents-page ::deep .k-pager-nav:hover,
+.agents-page ::deep .k-pager-numbers .k-link:hover {
+    color: #ffffff;
 }
 
 .agents-header {

Chrono/Web/wwwroot/css/app.css

@@ -116,3 +116,112 @@ a, .btn-link {
     border-color: var(--border);
     color: var(--text-secondary);
 }
+
+/* ── Loading Screen ── */
+.loading-screen {
+    position: fixed;
+    inset: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background: radial-gradient(ellipse at center, #141428 0%, #0b0b1a 100%);
+    gap: 0.75rem;
+    z-index: 9999;
+}
+
+.loading-content {
+    position: relative;
+    width: 5rem;
+    height: 5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 0.5rem;
+}
+
+.loading-ring {
+    width: 100%;
+    height: 100%;
+    transform: rotate(-90deg);
+    position: absolute;
+}
+
+.ring-track {
+    fill: none;
+    stroke: var(--border);
+    stroke-width: 5;
+}
+
+.ring-fill {
+    fill: none;
+    stroke: var(--accent);
+    stroke-width: 5;
+    stroke-linecap: round;
+    stroke-dasharray: 263.9;
+    stroke-dashoffset: calc(263.9 - (263.9 * var(--blazor-load-percentage, 0%)) / 100);
+    transition: stroke-dashoffset 0.2s ease;
+    filter: drop-shadow(0 0 6px var(--accent-glow));
+}
+
+.loading-icon {
+    font-size: 1.5rem;
+    color: var(--accent);
+    animation: loading-pulse 1.5s ease-in-out infinite;
+    z-index: 1;
+}
+
+@keyframes loading-pulse {
+    0%, 100% { transform: scale(1); opacity: 0.7; }
+    50% { transform: scale(1.15); opacity: 1; }
+}
+
+.loading-title {
+    font-size: 1.4rem;
+    font-weight: 700;
+    margin: 0;
+    letter-spacing: -0.02em;
+    background: linear-gradient(135deg, #e8e8f0 0%, #6c63ff 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+.loading-subtitle {
+    font-size: 0.8rem;
+    color: var(--text-muted);
+    margin: 0;
+    letter-spacing: 0.15em;
+    text-transform: uppercase;
+}
+
+.loading-bar {
+    width: 12rem;
+    margin-top: 0.5rem;
+}
+
+.loading-bar-track {
+    width: 100%;
+    height: 3px;
+    background: var(--border);
+    border-radius: 2px;
+    overflow: hidden;
+}
+
+.loading-bar-fill {
+    height: 100%;
+    width: calc(var(--blazor-load-percentage, 0%));
+    background: linear-gradient(90deg, var(--accent), #8b83ff);
+    border-radius: 2px;
+    transition: width 0.2s ease;
+}
+
+.loading-status {
+    font-size: 0.8rem;
+    color: var(--text-muted);
+    margin: 0;
+}
+
+.loading-status::after {
+    content: var(--blazor-load-percentage-text, "Loading...");
+}

Chrono/Web/wwwroot/index.html

@@ -21,11 +21,23 @@
 
 <body>
 <div id="app">
-    <svg class="loading-progress">
+    <div class="loading-screen">
-        <circle cx="50%" cy="50%" r="40%"/>
+        <div class="loading-content">
-        <circle cx="50%" cy="50%" r="40%"/>
+            <svg class="loading-ring" viewBox="0 0 100 100">
-    </svg>
+                <circle class="ring-track" cx="50" cy="50" r="42"/>
-    <div class="loading-progress-text"></div>
+                <circle class="ring-fill" cx="50" cy="50" r="42"/>
+            </svg>
+            <div class="loading-icon">✦</div>
+        </div>
+        <h1 class="loading-title">Chrono CCG</h1>
+        <p class="loading-subtitle">Card Gallery</p>
+        <div class="loading-bar">
+            <div class="loading-bar-track">
+                <div class="loading-bar-fill"></div>
+            </div>
+        </div>
+        <p class="loading-status"></p>
+    </div>
 </div>
 
 <div id="blazor-error-ui">