Adapt + improve all public pages to the atom design system

Extended the same design-system treatment to the public site, faithful
to AtomCMS's "atom" theme. New src/components/public/ui.tsx provides the
signature atom building blocks + a scoped CSS layer:
- ContentCard: surface card with a primary-tinted header (icon circle +
  title + subtitle) and padded body — the atom content-card, used as
  every page's header and section wrapper.
- StatBlock / stat-grid, EmptyState, OnlineBadge (online/offline pill),
  RankBadge (medals for the top 3), and responsive .card-grid helpers.

Swept ~45 public pages (home/community/rankings hand-built as the
reference; the rest via parallel agents that read the schema and
preserved every query, server action, auth gate and field name):
heroes → ContentCard headers, lists → card-grids in ContentCards,
"no X" → EmptyState, status → OnlineBadge/RankBadge. The leaderboard
gained Credits/Diamonds/Duckets tabs (usersCurrency).

Behaviour unchanged. Verified on the prod server against amx_test: 15+
public pages render the content-cards/grids with real data, no errors;
computed styles confirm the tinted header, icon circle, medal + online
pills. Fixed an undefined --color-golden ref. tsc 0, vitest 49/49,
next build 0.

src/app/leaderboard/page.tsx

@@ -1,4 +1,5 @@
 import Link from "next/link";
+import { ContentCard, EmptyState, RankBadge } from "@/components/public/ui";
 import { avatarImageUrl } from "@/lib/format";
 import { prisma } from "@/lib/prisma";
 import { siteSettings } from "@/lib/services/site-settings";
@@ -80,13 +81,14 @@ export default async function LeaderboardPage({
   ]);
 
   return (
-    <main>
-      <h1>Leaderboard</h1>
-      <p className="muted" style={{ marginTop: 0 }}>
-        Top 20 players by {activeTab.label.toLowerCase()}.
-      </p>
+    <main style={{ display: "grid", gap: "1.5rem" }}>
+      <ContentCard
+        icon="📊"
+        title="Leaderboard"
+        subtitle={`Top 20 players by ${activeTab.label.toLowerCase()}`}
+      />
 
-      <div className="nav" style={{ gap: "0.5rem", marginBottom: "1.25rem" }}>
+      <div className="nav" style={{ gap: "0.5rem" }}>
         {TABS.map((t) => (
           <Link
             key={t.key}
@@ -98,11 +100,9 @@ export default async function LeaderboardPage({
         ))}
       </div>
 
-      <div className="card">
+      <ContentCard padded={rows.length === 0}>
         {rows.length === 0 ? (
-          <p className="muted" style={{ margin: 0 }}>
-            No rankings to show yet.
-          </p>
+          <EmptyState icon="📊">No rankings to show yet.</EmptyState>
         ) : (
           <table>
             <thead>
@@ -121,7 +121,9 @@ export default async function LeaderboardPage({
                 });
                 return (
                   <tr key={`${row.username}-${i}`}>
-                    <td style={{ fontWeight: 800 }}>{i + 1}</td>
+                    <td>
+                      <RankBadge position={i + 1} />
+                    </td>
                     <td>
                       {/* eslint-disable-next-line @next/next/no-img-element */}
                       <img
@@ -149,7 +151,7 @@ export default async function LeaderboardPage({
             </tbody>
           </table>
         )}
-      </div>
+      </ContentCard>
     </main>
   );
 }