/* Leaderboard/profile additions — layered on styles.css, same palette vars.
   Kept separate so the shared stylesheet stays untouched by this feature. */

/* Live server banner: green dot = recent heartbeat, grey = stale/offline. */
.server-banner{display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:10px 16px;margin:18px 0 0;font-size:15px}
.server-banner .dot{width:10px;height:10px;border-radius:50%;background:var(--good);flex:none}
.server-banner.stale .dot{background:var(--muted)}
.server-banner .tail{margin-left:auto} /* push live/stale note to the far edge */

.lb-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.lb-head h2{margin:0}
.lb-search{background:#0c0d12;border:1px solid var(--line);border-radius:10px;
  color:var(--ink);padding:9px 12px;font:inherit;min-width:220px}
.lb-search:focus{outline:none;border-color:var(--accent2)}

/* Own table class rather than reusing .matrix: .matrix hard-codes a green
   third column (its free/premium layout), which is wrong for stat columns. */
.lb-table{width:100%;border-collapse:collapse;margin:14px 0 8px}
.lb-table th,.lb-table td{text-align:left;padding:9px 12px;
  border-bottom:1px solid var(--line);white-space:nowrap}
.lb-table thead th{color:var(--muted);font-weight:600;font-size:13px;
  text-transform:uppercase;letter-spacing:.04em}
.lb-table th.sortable{cursor:pointer;user-select:none}
.lb-table th.sortable:hover{color:var(--ink)}
.lb-table th.sortable.active{color:var(--accent)}
.lb-table th.sortable.active::after{content:" ↓"} /* rank direction is always desc */
.lb-table tbody tr:hover{background:rgba(90,209,255,.05)}
.lb-table td.rank{color:var(--muted)}
/* Tabular figures keep number columns from wobbling as values change. */
.lb-table td.num{font-variant-numeric:tabular-nums}
.lb-table a{color:var(--ink)}
.lb-table a:hover{color:var(--accent2)}

/* Profile view (?id=…) */
.profile-name{margin:14px 0 4px}
.profile-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:12px;margin-top:14px}
.stat-tile{background:#0c0d12;border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.stat-tile .label{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.04em}
.stat-tile .value{font-size:20px;font-weight:700;margin-top:2px}