Leader board needs 5 finish games to be qualified

public/app.js

@@ -1324,14 +1324,29 @@ async function showLeaderboard() {
     const rows = await r.json();
     const tbody = $('lb-body');
     tbody.innerHTML = '';
-    rows.forEach((row, i) => {
+    let rank = 0, dividerDone = false;
+
+    rows.forEach(row => {
+      // Players below the minimum game count are listed after the ranking,
+      // under a divider, so a newcomer can see how close they are.
+      if (!row.ranked && !dividerDone) {
+        dividerDone = true;
+        const sep = document.createElement('tr');
+        sep.className = 'lb-divider';
+        sep.innerHTML = `<td colspan="8">Not yet ranked — needs ${
+          row.gamesToRank + row.games_played} games</td>`;
+        tbody.appendChild(sep);
+      }
+
       const tr = document.createElement('tr');
+      if (row.ranked) rank++;
+      else tr.className = 'lb-provisional';
       tr.innerHTML = `
-        <td>${i + 1}</td>
+        <td>${row.ranked ? rank : '—'}</td>
         <td>${escHtml(row.username)}</td>
         <td>${row.win_rate != null ? row.win_rate + '%' : '—'}</td>
         <td>${row.games_won}</td>
-        <td>${row.games_played}</td>
+        <td>${row.games_played}${row.ranked ? '' : ` <span class="lb-togo">+${row.gamesToRank}</span>`}</td>
         <td>${row.avg_score ?? '—'}</td>
         <td>${row.bids_won || 0}</td>
         <td>${row.shelemCount || 0}</td>

public/style.css

@@ -1304,3 +1304,14 @@ input:focus { border-color: var(--gold); }
   .overlay-box { padding: 18px 16px; }
   .bid-amount-display { font-size: 1.4rem; }
 }
+
+/* ── Leaderboard: players below the minimum game count ────────── */
+.lb-table tr.lb-divider td {
+  padding-top: 12px;
+  font-size: .7rem;
+  color: rgba(255,255,255,.4);
+  text-align: center;
+  border-bottom: 1px solid rgba(255,255,255,.12);
+}
+.lb-table tr.lb-provisional { opacity: .55; }
+.lb-togo { color: var(--gold); font-size: .72em; }