Adding Syndicate Pages

Chrono/Cloud/Components/Pages/Cards.razor

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

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;