From 70ab51ba44ee4599110fd3354c4aeed6a00c9952 Mon Sep 17 00:00:00 2001
From: Frank Tovar <mail@franktovar.de>
Date: Tue, 3 Feb 2026 01:57:56 +0100
Subject: [PATCH] Give top results gold/silver/bronze treatment

---
 wwwroot/js/ui.js   |  5 ++++-
 wwwroot/styles.css | 11 +++++++++++
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/wwwroot/js/ui.js b/wwwroot/js/ui.js
index fa32148..838d74d 100644
--- a/wwwroot/js/ui.js
+++ b/wwwroot/js/ui.js
@@ -227,8 +227,11 @@ export function renderResults() {
     const tbody = table.querySelector("tbody");
     state.results.forEach((r, idx) => {
         const row = document.createElement("tr");
+        const podiumClass = idx === 0 ? "podium podium-1" : idx === 1 ? "podium podium-2" : idx === 2 ? "podium podium-3" : "";
+        row.className = podiumClass;
+        const medal = idx === 0 ? "🥇" : idx === 1 ? "🥈" : idx === 2 ? "🥉" : `${idx + 1}`;
         row.innerHTML = `
-      <td>${idx + 1}</td>
+      <td class="rank-cell"><span class="medal">${medal}</span></td>
       <td class="game-cell">
          ${r.screenshotUrl ? `<img class="thumb clickable-thumb" src="${r.screenshotUrl}" alt="${r.name}">` : ''}
          <div class="game-meta">
diff --git a/wwwroot/styles.css b/wwwroot/styles.css
index 36c9f89..6c63300 100644
--- a/wwwroot/styles.css
+++ b/wwwroot/styles.css
@@ -580,6 +580,17 @@ input[type="range"].full-slider::-moz-range-track {
     font-size: 12px;
     letter-spacing: 0.3px;
 }
+.results-table .rank-cell { width: 64px; text-align: center; }
+.medal { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 14px; font-size: 22px; font-weight: 800; color: #2c1c0d; background: #f1e5c7; box-shadow: inset 0 0 0 2px #e3d4bd, 0 6px 16px rgba(0,0,0,0.12); }
+.podium { position: relative; background: linear-gradient(135deg, rgba(255,255,255,0.96), rgba(255,255,255,0.85)); box-shadow: 0 8px 24px rgba(0,0,0,0.18); }
+.podium td { border-bottom: none; }
+.podium-1 { background: linear-gradient(135deg, #ffecb3, #ffd861); }
+.podium-1 .medal { background: linear-gradient(135deg, #ffd54f, #ffca28); box-shadow: inset 0 0 0 2px #f1b000, 0 8px 18px rgba(0,0,0,0.2); }
+.podium-2 { background: linear-gradient(135deg, #e3e6ed, #cfd6e6); }
+.podium-2 .medal { background: linear-gradient(135deg, #d7dbe5, #c2c7d2); box-shadow: inset 0 0 0 2px #9ea3b1, 0 8px 18px rgba(0,0,0,0.18); }
+.podium-3 { background: linear-gradient(135deg, #f0d0b0, #e2a96a); }
+.podium-3 .medal { background: linear-gradient(135deg, #f2b37a, #e08a4a); box-shadow: inset 0 0 0 2px #c56d2c, 0 8px 18px rgba(0,0,0,0.2); }
+.podium::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: 10px; box-shadow: inset 0 0 0 2px rgba(255,255,255,0.35); }
 .results-table .game-cell {
     display: flex;
     gap: 10px;