feat: add KPI summary tiles above players table (#5)

public/css/shared.css

@@ -593,6 +593,77 @@ a:hover {
     margin-top: 2px;
 }
 
+/* ── KPI Tiles ────────────────────────────────── */
+
+.kpi-strip {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 14px;
+    margin-bottom: 16px;
+    list-style: none;
+    padding: 0;
+}
+
+.kpi-tile {
+    background: var(--paper);
+    border: 1px solid var(--line);
+    border-radius: var(--radius);
+    padding: 14px 16px;
+    display: flex;
+    gap: 12px;
+    box-shadow: var(--shadow-card);
+}
+
+.kpi-rail {
+    width: 3px;
+    align-self: stretch;
+    border-radius: 2px;
+    background: var(--ink-3);
+    flex-shrink: 0;
+}
+
+.kpi-rail.up {
+    background: var(--up);
+}
+
+.kpi-rail.down {
+    background: var(--down);
+}
+
+.kpi-body {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    min-width: 0;
+}
+
+.kpi-value {
+    font-family: var(--font-mono);
+    font-feature-settings: "tnum", "zero";
+    font-size: 28px;
+    font-weight: 600;
+    letter-spacing: -0.02em;
+    color: var(--ink);
+    line-height: 1;
+}
+
+.kpi-label {
+    font-size: 13px;
+    font-weight: 500;
+    color: var(--ink);
+}
+
+.kpi-sub {
+    font-size: 12px;
+    color: var(--ink-3);
+}
+
+@media (max-width: 880px) {
+    .kpi-strip {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
 /* ── Table Toolbar + Pill Toggle ─────────────── */
 
 .table-toolbar {