From 949aa6627aa612af1481759a9532ce6d529b7fb0 Mon Sep 17 00:00:00 2001
From: pavel444-byte <pavel.melnikov.kid.1993@gmail.com>
Date: Tue, 6 Oct 2026 15:21:49 +0500
Subject: [PATCH] Add player leaderboard and homepage preview

---
 README.md                                     |   13 +
 app/home-map.css                              |   69 ++
 app/layout.tsx                                |    3 +
 app/leaderboard.css                           | 1080 +++++++++++++++++
 app/leaderboard/loading.tsx                   |   24 +
 app/leaderboard/page.tsx                      |  217 ++++
 app/page.tsx                                  |   29 +-
 app/rounded-theme.css                         |  272 +++++
 components/Leaderboard.tsx                    |  203 ++++
 components/MapCard.tsx                        |   30 +-
 components/PixelArt.tsx                       |   56 +
 components/Results.tsx                        |    3 +
 components/Shell.tsx                          |    8 +-
 components/SiteNav.tsx                        |   31 +
 lib/leaderboard.ts                            |   36 +
 next-env.d.ts                                 |    4 +-
 package.json                                  |    1 +
 public/cursors/orbit-link.svg                 |    5 +
 public/cursors/orbit.svg                      |    5 +
 public/images/minecraft-map-background.png    |  Bin 0 -> 304 bytes
 scripts/test-leaderboard-sql.mjs              |  137 +++
 shared/database.ts                            |    9 +
 shared/leaderboard.ts                         |   54 +
 .../20261006093345_player_leaderboard.sql     |   61 +
 tests/leaderboard.test.ts                     |   41 +
 25 files changed, 2363 insertions(+), 28 deletions(-)
 create mode 100644 app/home-map.css
 create mode 100644 app/leaderboard.css
 create mode 100644 app/leaderboard/loading.tsx
 create mode 100644 app/leaderboard/page.tsx
 create mode 100644 app/rounded-theme.css
 create mode 100644 components/Leaderboard.tsx
 create mode 100644 components/PixelArt.tsx
 create mode 100644 components/SiteNav.tsx
 create mode 100644 lib/leaderboard.ts
 create mode 100644 public/cursors/orbit-link.svg
 create mode 100644 public/cursors/orbit.svg
 create mode 100644 public/images/minecraft-map-background.png
 create mode 100644 scripts/test-leaderboard-sql.mjs
 create mode 100644 shared/leaderboard.ts
 create mode 100644 supabase/migrations/20261006093345_player_leaderboard.sql
 create mode 100644 tests/leaderboard.test.ts

diff --git a/README.md b/README.md
index 4581576..1eaa61e 100644
--- a/README.md
+++ b/README.md
@@ -58,6 +58,17 @@ The build copies both JARs to their Git-visible download folders. Include those
 
 ## Checks
 
+The public `/leaderboard` and homepage preview rank signed-in players by their
+best completed five-round expedition. Ties use average score, then games played.
+Difficulty filters, literal player-name search, and pagination run in Postgres;
+guest and incomplete games are excluded. Apply the `player_leaderboard` migration
+when updating an existing installation. The score query is server-only and does
+not expose session tokens, round locations, or contact information.
+
+`npm run test:leaderboard` verifies ranking and permissions in an isolated
+Postgres runtime. It uses the optional PGlite package already used for SQL checks
+(`npm install --prefix .data/sql-verification --no-save --package-lock=false @electric-sql/pglite@0.3.14`).
+
 Accounts support display names, email/password login and password recovery. See [account settings and Supabase configuration](docs/account-settings.md).
 
 ```sh
@@ -77,3 +88,5 @@ The renderer regression exercises the product's headless terrain worker with gra
 Plugin exports include generated Overworld surface terrain (up to 24 blocks below each column's top), vanilla block states, and biome identifiers. Buried opaque blocks are omitted. Each export is limited to 5 million retained blocks, 240 MiB of raw terrain JSON, and 50 MiB compressed. Start with a 128 × 128 area, check the preview, then increase coverage. Lighting is simplified; custom packs, entities, and dynamic block-entity visuals are not captured by the server exporter.
 
 The pixel heading font is VT323 by Peter Hull, distributed under the SIL Open Font License. Its license is in `public/fonts/OFL-VT323.txt`.
+
+The homepage uses Minecraft 1.21.11’s original `assets/minecraft/textures/map/map_background.png`, extracted unchanged from the cached vanilla client to `public/images/minecraft-map-background.png`. The texture belongs to Mojang; its pixel detail and transparent parchment edges are retained.
diff --git a/app/home-map.css b/app/home-map.css
new file mode 100644
index 0000000..317d604
--- /dev/null
+++ b/app/home-map.css
@@ -0,0 +1,69 @@
+/* Vanilla 1.21.11 map_background.png, rendered with its original alpha edges. */
+.card-map-content {
+  position: absolute;
+  inset: 0;
+}
+.home-page .minecraft-paper {
+  --map-paper-inset: 9.375%;
+  border: 0;
+  outline: 0;
+  clip-path: none;
+  background: url("/images/minecraft-map-background.png") center / 100% 100%
+    no-repeat;
+  box-shadow: none;
+  image-rendering: pixelated;
+  filter: drop-shadow(4px 6px 0 #04080c99);
+}
+.home-page .map-art-frame {
+  width: 320px;
+  height: 320px;
+  transform: none;
+  padding: 0;
+}
+.home-page .map-art-frame img {
+  position: absolute;
+  inset: var(--map-paper-inset);
+  width: 81.25%;
+  height: 81.25%;
+  display: block;
+  object-fit: contain;
+  image-rendering: pixelated;
+}
+.home-page .card-image .card-map-content {
+  inset: var(--map-paper-inset);
+}
+.home-page .minecraft-paper.card-image .card-map-content img {
+  object-fit: contain;
+}
+.home-page .map-card:hover .minecraft-paper img {
+  transform: none;
+}
+.home-page .minecraft-paper .card-type {
+  top: -16px;
+  left: 0;
+}
+.home-page .empty-map-art {
+  aspect-ratio: 1;
+  padding: 0;
+  transform: none;
+}
+.home-page .empty-map-art img {
+  position: absolute;
+  inset: var(--map-paper-inset);
+  width: 81.25%;
+  height: 81.25%;
+  object-fit: contain;
+  filter: none;
+}
+@media (max-width: 1000px) {
+  .home-page .map-art-frame {
+    width: 288px;
+    height: 288px;
+  }
+}
+@media (max-width: 700px) {
+  .home-page .map-art-frame {
+    width: 256px;
+    height: 256px;
+  }
+}
diff --git a/app/layout.tsx b/app/layout.tsx
index b15d324..1e8b4a2 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -4,6 +4,9 @@ import "./block-theme.css";
 import "./account.css";
 import "./map-theme.css";
 import "./workshop.css";
+import "./leaderboard.css";
+import "./home-map.css";
+import "./rounded-theme.css";
 export const metadata: Metadata = {
   title: {
     default: "MineGeo — Get lost in a familiar world",
diff --git a/app/leaderboard.css b/app/leaderboard.css
new file mode 100644
index 0000000..3178f09
--- /dev/null
+++ b/app/leaderboard.css
@@ -0,0 +1,1080 @@
+/* Quiet stone surfaces; pixel type and hard edges carry the Minecraft character. */
+:root {
+  --board-stone: #151e24;
+  --board-edge: #354149;
+  --board-gold: #d6b665;
+}
+body {
+  font-variant-numeric: tabular-nums;
+}
+h1,
+h2,
+h3 {
+  text-wrap: balance;
+}
+p {
+  text-wrap: pretty;
+}
+a,
+button {
+  transition:
+    color 160ms,
+    background-color 160ms,
+    border-color 160ms,
+    transform 160ms;
+}
+a:focus-visible,
+button:focus-visible,
+input:focus-visible {
+  outline: 2px solid var(--green);
+  outline-offset: 5px;
+}
+.site-header {
+  background: #0c1219;
+}
+.site-header nav a {
+  position: relative;
+  white-space: nowrap;
+}
+.site-header nav a[aria-current="page"] {
+  color: var(--green);
+}
+.site-header nav a[aria-current="page"]::after {
+  content: "";
+  position: absolute;
+  bottom: -10px;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: var(--green);
+}
+.header-account {
+  border-color: #526048;
+  border-bottom-color: #1d2917;
+  background: #23301f;
+  color: #c7d6bb;
+}
+.header-account:hover {
+  background: #31422a;
+}
+.home-page {
+  background-image: none;
+}
+.hero {
+  padding-top: 64px;
+  padding-bottom: 62px;
+  gap: 32px;
+  grid-template-columns: 1.15fr 1fr;
+}
+.hero h1 {
+  font-size: clamp(52px, 5.6vw, 76px);
+  line-height: 1;
+  margin-bottom: 24px;
+}
+.hero p {
+  max-width: 470px;
+  font-size: 14px;
+  line-height: 1.85;
+  color: #a7b1b7;
+}
+.status-label {
+  padding: 0;
+  border: 0;
+  background: none;
+  color: #96aa88;
+  letter-spacing: 1.6px;
+  font-size: 10px;
+  margin-bottom: 23px;
+}
+.hero-actions {
+  gap: 24px;
+  flex-wrap: wrap;
+}
+.hero-actions .text-link {
+  font-size: 11px;
+}
+.hero-notes {
+  margin-top: 27px;
+  gap: 12px;
+}
+.round-blocks {
+  display: flex;
+  gap: 4px !important;
+}
+.round-blocks i {
+  width: 8px;
+  height: 8px;
+  background: #749752;
+  border-top: 2px solid #99bc73;
+}
+.hero-art {
+  min-height: 346px;
+}
+.map-art-frame {
+  width: 310px;
+  height: 310px;
+  transform: rotate(-4deg);
+}
+.compass-art {
+  right: 5%;
+  top: 12px;
+  width: 58px;
+  height: 62px;
+  background: #1b2630;
+}
+.compass-art small {
+  left: 23px;
+}
+.floating-tag {
+  bottom: 1px;
+  background: #101923;
+  border-width: 1px;
+  padding: 9px 13px;
+}
+.grass-divider {
+  height: 15px;
+  border-top-width: 4px;
+  opacity: 0.85;
+}
+.grass-divider span {
+  height: 4px;
+}
+.world-stats {
+  margin-top: 0;
+  padding: 25px 0;
+  background: none;
+  border: 0;
+  border-bottom: 1px solid #2a353c;
+  box-shadow: none;
+}
+.world-stats > div {
+  padding-left: 20px;
+  gap: 12px;
+}
+.world-stats > div:first-child {
+  padding-left: 0;
+}
+.world-stats .stat-cube {
+  width: 16px;
+  height: 16px;
+  border-width: 1px;
+  box-shadow:
+    inset 2px 2px #ffffff20,
+    2px 2px #03070b;
+}
+.world-stats .stat-cube:not(.green-cube) {
+  background: #58656e;
+  border-color: #8a969c;
+}
+.world-stats strong {
+  font-size: 33px;
+}
+.world-stats span:not(.live-dot) {
+  font-size: 9px;
+  letter-spacing: 0.8px;
+  margin-top: 5px;
+}
+.home-page .catalog-section {
+  padding-top: 52px;
+  padding-bottom: 52px;
+}
+.home-page .map-card {
+  box-shadow: 0 3px #03070b;
+  border-width: 1px;
+}
+.home-page .card-body {
+  background: #141e28;
+  padding: 16px 13px;
+}
+.home-page .card-body .eyebrow {
+  font-size: 9px;
+}
+.home-page .card-body p {
+  font-size: 12px;
+  min-height: 36px;
+}
+.home-page .card-meta {
+  font-size: 10px;
+}
+.home-panels {
+  gap: 40px;
+  padding-top: 56px;
+}
+.home-panel {
+  background: none;
+  box-shadow: none;
+  border: 0;
+  padding: 0;
+}
+.home-panel + .home-panel {
+  padding-left: 36px;
+  border-left: 1px solid #2b3841;
+}
+.play-steps {
+  gap: 24px;
+}
+.play-steps li > span {
+  background: none;
+  border: 0;
+  padding: 0;
+  color: #8a9c7c;
+}
+.mode-row {
+  border-width: 1px;
+  box-shadow: inset 0 1px #ffffff06;
+  background: #151f29;
+}
+.contribute-banner {
+  background: #151f23;
+  border-width: 1px;
+  border-left: 4px solid #73984e;
+}
+.pixel-trophy {
+  width: 30px;
+  height: 30px;
+  flex-shrink: 0;
+}
+.player-avatar {
+  width: 36px;
+  height: 36px;
+  flex-shrink: 0;
+  background: #314034;
+  box-shadow: 2px 2px #03070b;
+}
+.home-leaderboard {
+  display: grid;
+  grid-template-columns: 0.85fr 1.5fr;
+  gap: 64px;
+  align-items: center;
+  padding-top: 38px;
+  padding-bottom: 48px;
+  border-top: 1px solid #29343d;
+}
+.leaderboard-kicker {
+  display: flex;
+  gap: 11px;
+  align-items: center;
+  margin-bottom: 20px;
+}
+.leaderboard-kicker .eyebrow {
+  margin: 0;
+  color: #c1af7f;
+}
+.leaderboard-preview-copy h2 {
+  font-size: 54px;
+  line-height: 0.98;
+  margin-bottom: 19px;
+}
+.leaderboard-preview-copy h2 span {
+  color: var(--green);
+}
+.leaderboard-preview-copy p {
+  color: #9ba8ad;
+  font-size: 13px;
+  line-height: 1.9;
+  margin-bottom: 26px;
+}
+.leaderboard-preview-copy .text-link {
+  color: #c8d8bd;
+}
+.leaderboard-preview-board,
+.rankings-board {
+  background: var(--board-stone);
+  border: 1px solid var(--board-edge);
+  border-top: 3px solid #566253;
+  box-shadow: 4px 4px #04080c;
+}
+.board-heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 18px 22px;
+}
+.board-heading > span:first-child {
+  font:
+    26px/1 MineGeoPixel,
+    monospace;
+}
+.board-heading > span:last-child {
+  color: #9ba8ad;
+  font-size: 10px;
+}
+.board-footnote {
+  padding: 12px 22px;
+  border-top: 1px solid #2e3a42;
+  font-size: 10px;
+  color: #92a092;
+}
+.leaderboard-table-wrap {
+  overflow-x: auto;
+}
+.leaderboard-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+  text-align: left;
+}
+.leaderboard-table th,
+.leaderboard-table td {
+  padding: 17px 22px;
+  border-top: 1px solid #2a353d;
+}
+.leaderboard-table thead {
+  background: #101920;
+}
+.leaderboard-table thead th {
+  color: #99a6ac;
+  font-size: 10px;
+  letter-spacing: 0.8px;
+  font-weight: 500;
+  text-transform: uppercase;
+  padding-top: 12px;
+  padding-bottom: 12px;
+}
+.leaderboard-table tbody th {
+  font-weight: 500;
+}
+.leaderboard-table tbody tr:hover {
+  background: #1a262c;
+}
+.leaderboard-table .rank-column {
+  width: 78px;
+  padding-right: 8px;
+}
+.rank-number {
+  font:
+    24px/1 MineGeoPixel,
+    monospace;
+  color: #88969d;
+}
+.rank-number.place-1 {
+  color: var(--board-gold);
+}
+.rank-number.place-2 {
+  color: #bec8cf;
+}
+.rank-number.place-3 {
+  color: #b69a80;
+}
+.leaderboard-player {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  min-width: 0;
+}
+.player-name {
+  overflow-wrap: anywhere;
+  min-width: 0;
+}
+.leaderboard-table .score-column {
+  text-align: right;
+  white-space: nowrap;
+}
+.score-column strong {
+  font:
+    25px/1 MineGeoPixel,
+    monospace;
+  color: #dce9d1;
+}
+.score-unit {
+  color: #8a9b89;
+  font-size: 10px;
+}
+.leaderboard-table .games-column,
+.leaderboard-table .average-column {
+  text-align: right;
+  color: #aeb9bf;
+  white-space: nowrap;
+}
+.compact .leaderboard-table th,
+.compact .leaderboard-table td {
+  padding: 13px 22px;
+}
+.compact .leaderboard-table .rank-column {
+  width: 58px;
+  padding-right: 0;
+}
+.compact .leaderboard-player {
+  gap: 12px;
+}
+.compact .player-avatar {
+  width: 30px;
+  height: 30px;
+}
+.compact .player-name {
+  font-size: 12px;
+}
+.your-row {
+  background: #213026;
+}
+.you-label {
+  margin-left: 9px;
+  font-size: 9px;
+  color: var(--green);
+  border: 1px solid #4f6841;
+  padding: 2px 4px;
+}
+.leaderboard-page {
+  padding-top: 32px;
+}
+.leaderboard-back {
+  font-size: 11px;
+  margin-bottom: 36px;
+}
+.leaderboard-intro {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 32px;
+}
+.leaderboard-intro h1 {
+  font-size: clamp(48px, 6.5vw, 76px);
+  margin: 12px 0 17px;
+}
+.leaderboard-intro .lead {
+  font-size: 14px;
+  line-height: 1.8;
+  margin-bottom: 0;
+}
+.intro-trophy {
+  width: 106px;
+  height: 106px;
+  margin-right: 32px;
+  filter: drop-shadow(6px 6px #04080c);
+}
+.leaderboard-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 20px;
+  margin: 38px 0 0;
+  padding-bottom: 14px;
+  border-bottom: 1px solid #354149;
+}
+.leaderboard-filters {
+  gap: 5px;
+  font-size: 12px;
+  flex-wrap: wrap;
+}
+.leaderboard-filters a {
+  padding: 8px 14px;
+  border: 1px solid transparent;
+}
+.leaderboard-filters a:hover {
+  color: #d9e8d0;
+  background: #18242c;
+}
+.leaderboard-filters a[aria-current="page"] {
+  color: #d7e8ca;
+  background: #243321;
+  border-color: #4c6340;
+  box-shadow: inset 0 2px #819c5a30;
+}
+.leaderboard-period {
+  color: #a4afa9;
+  font: 11px monospace;
+  white-space: nowrap;
+}
+.winners-podium {
+  display: grid;
+  grid-template-columns: 1fr 1.12fr 1fr;
+  align-items: end;
+  gap: 12px;
+  max-width: 850px;
+  margin: 42px auto 38px;
+}
+.podium-place {
+  text-align: center;
+  min-width: 0;
+  grid-row: 1;
+}
+.podium-1 {
+  grid-column: 2;
+}
+.podium-2 {
+  grid-column: 1;
+}
+.podium-3 {
+  grid-column: 3;
+}
+.podium-player {
+  padding: 0 12px 21px;
+}
+.podium-label {
+  display: block;
+  font: 9px/1.5 monospace;
+  color: #a7b4bc;
+  letter-spacing: 1.5px;
+  margin-bottom: 14px;
+}
+.podium-1 .podium-label {
+  color: var(--board-gold);
+}
+.podium-player .player-avatar {
+  width: 52px;
+  height: 52px;
+  margin: 0 auto 13px;
+}
+.podium-1 .player-avatar {
+  width: 64px;
+  height: 64px;
+  outline: 2px solid #9a814c;
+  outline-offset: 4px;
+  margin-bottom: 17px;
+}
+.podium-player h2 {
+  font-size: 28px;
+  overflow-wrap: anywhere;
+  line-height: 1;
+  margin-bottom: 8px;
+}
+.podium-player p {
+  font:
+    26px/1.2 MineGeoPixel,
+    monospace;
+  margin: 0;
+  color: #d8e4ce;
+}
+.podium-player p span {
+  font:
+    10px Arial,
+    sans-serif;
+  color: #839293;
+  white-space: nowrap;
+}
+.podium-block {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 20px;
+  height: 84px;
+  border: 1px solid #46545b;
+  border-top: 5px solid #66757b;
+  background:
+    repeating-linear-gradient(0deg, transparent 0 23px, #050a0d16 23px 24px),
+    #202d34;
+  box-shadow:
+    inset 5px 0 #ffffff04,
+    inset -5px 0 #050a0d40,
+    0 4px #04080c;
+}
+.podium-block > span {
+  font:
+    44px/1 MineGeoPixel,
+    monospace;
+  color: #94a3ad;
+  text-shadow: 2px 2px #101920;
+}
+.podium-1 .podium-block {
+  height: 112px;
+  border-color: #66734b;
+  border-top-color: #9caf73;
+  background-color: #2a3828;
+}
+.podium-1 .podium-block > span {
+  color: #c9d8aa;
+}
+.podium-1 .podium-block .pixel-trophy {
+  width: 38px;
+  height: 38px;
+}
+.podium-3 .podium-block {
+  height: 64px;
+  border-top-color: #7e7163;
+  background-color: #2d2d29;
+  border-color: #514c43;
+}
+.rankings-board {
+  margin-top: 32px;
+}
+.rankings-heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 24px;
+  padding: 22px;
+}
+.rankings-heading h2 {
+  font-size: 32px;
+  line-height: 1;
+  margin-bottom: 7px;
+}
+.rankings-heading p {
+  color: #99a6ad;
+  font-size: 11px;
+  margin: 0;
+}
+.leaderboard-search {
+  display: flex;
+  align-items: center;
+  max-width: 280px;
+  background: #0d161d;
+  border: 1px solid #3b4851;
+}
+.leaderboard-search input {
+  width: 100%;
+  min-width: 0;
+  border: 0;
+  background: none;
+  color: var(--text);
+  padding: 10px 12px;
+  font-size: 12px;
+}
+.leaderboard-search input::placeholder {
+  color: #87949b;
+}
+.leaderboard-search button {
+  padding: 10px 12px;
+  background: #202c34;
+  color: #b7c6ac;
+  border: 0;
+  border-left: 1px solid #3b4851;
+}
+.leaderboard-search button:hover {
+  background: #32452e;
+}
+.leaderboard-search button:active {
+  transform: translateY(1px);
+}
+.search-summary {
+  padding: 12px 22px;
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  font-size: 12px;
+  border-top: 1px solid #354149;
+}
+.search-summary > span {
+  overflow-wrap: anywhere;
+}
+.search-summary a {
+  color: var(--green);
+  flex-shrink: 0;
+}
+.leaderboard-pagination {
+  padding: 18px 22px;
+  border-top: 1px solid #354149;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 20px;
+  font-size: 11px;
+  color: #9faeb5;
+}
+.leaderboard-pagination nav {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  font-size: 11px;
+}
+.leaderboard-pagination nav a,
+.leaderboard-pagination nav > span {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+}
+.leaderboard-pagination nav [aria-disabled="true"] {
+  color: #7d8b94;
+}
+.page-number {
+  color: #d3decb;
+  font-family: monospace;
+  white-space: nowrap;
+}
+.leaderboard-rules {
+  display: grid;
+  grid-template-columns: 0.9fr 1.2fr;
+  gap: 60px;
+  border-top: 1px solid #2d3942;
+  margin-top: 44px;
+  padding-top: 30px;
+}
+.leaderboard-rules h2 {
+  font-size: 33px;
+  max-width: 310px;
+}
+.leaderboard-rules p {
+  font-size: 12px;
+  color: #a5b0b5;
+  line-height: 1.85;
+  margin-bottom: 12px;
+}
+.leaderboard-rules .text-link {
+  color: #c4d6b8;
+  margin-top: 5px;
+}
+.leaderboard-empty {
+  text-align: center;
+  padding: 48px 24px;
+}
+.leaderboard-empty > .pixel-trophy {
+  width: 45px;
+  height: 45px;
+  margin: 0 auto 18px;
+  opacity: 0.85;
+}
+.leaderboard-empty h2 {
+  font-size: 32px;
+  margin-bottom: 12px;
+}
+.leaderboard-empty p {
+  font-size: 12px;
+  max-width: 400px;
+  margin: 0 auto 24px;
+  color: #a5b0b5;
+  line-height: 1.8;
+}
+.leaderboard-preview-board .leaderboard-empty {
+  padding: 27px 18px;
+}
+.leaderboard-preview-board .leaderboard-empty > .pixel-trophy {
+  display: none;
+}
+.leaderboard-preview-board .leaderboard-empty h2 {
+  font-size: 28px;
+}
+.leaderboard-preview-board .leaderboard-empty .button {
+  font-size: 20px;
+}
+.leaderboard-skeleton {
+  border: 1px solid #354149;
+  background: var(--board-stone);
+  margin-top: 40px;
+}
+.leaderboard-skeleton > div {
+  padding: 24px;
+  display: grid;
+  grid-template-columns: 36px 1fr 110px;
+  gap: 24px;
+  border-bottom: 1px solid #354149;
+}
+.leaderboard-skeleton span {
+  height: 24px;
+  background: #29373e;
+  animation: board-pulse 1.5s ease-in-out infinite alternate;
+}
+@keyframes board-pulse {
+  to {
+    opacity: 0.4;
+  }
+}
+@media (max-width: 1000px) {
+  .site-header nav {
+    gap: 19px;
+    font-size: 21px;
+  }
+  .header-inner {
+    gap: 20px;
+  }
+  .hero {
+    padding-top: 48px;
+    padding-bottom: 48px;
+    gap: 18px;
+  }
+  .hero h1 {
+    font-size: 59px;
+  }
+  .map-art-frame {
+    width: 280px;
+    height: 280px;
+  }
+  .hero-art {
+    min-height: 318px;
+  }
+  .home-leaderboard {
+    gap: 30px;
+    grid-template-columns: 0.8fr 1.4fr;
+  }
+  .leaderboard-preview-copy h2 {
+    font-size: 46px;
+  }
+  .leaderboard-table th,
+  .leaderboard-table td {
+    padding-left: 16px;
+    padding-right: 16px;
+  }
+}
+@media (max-width: 700px) {
+  .header-inner nav {
+    font-size: 20px;
+    gap: 8px;
+  }
+  .site-header nav a[aria-current="page"]::after {
+    bottom: -6px;
+  }
+  .hero {
+    padding: 36px 22px 32px;
+  }
+  .hero h1 {
+    font-size: clamp(46px, 9vw, 62px);
+    margin-bottom: 20px;
+  }
+  .hero p {
+    font-size: 13px;
+  }
+  .hero-actions {
+    gap: 16px;
+  }
+  .hero-art {
+    min-height: 290px;
+    margin-top: 20px;
+  }
+  .map-art-frame {
+    width: 254px;
+    height: 254px;
+  }
+  .compass-art {
+    right: calc(50% - 144px);
+    top: 0;
+  }
+  .world-stats {
+    padding: 24px 0;
+    gap: 23px 16px;
+  }
+  .world-stats > div {
+    padding-left: 0;
+  }
+  .world-stats strong {
+    font-size: 30px;
+  }
+  .world-stats span:not(.live-dot) {
+    font-size: 8px;
+    letter-spacing: 0.4px;
+  }
+  .home-page .catalog-section {
+    padding-top: 34px;
+    padding-bottom: 34px;
+  }
+  .home-leaderboard {
+    grid-template-columns: 1fr;
+    gap: 25px;
+    margin: 0 20px;
+    padding: 30px 0 36px;
+  }
+  .leaderboard-preview-copy h2 {
+    font-size: 42px;
+    margin-bottom: 14px;
+  }
+  .leaderboard-preview-copy h2 br {
+    display: none;
+  }
+  .leaderboard-kicker {
+    margin-bottom: 14px;
+  }
+  .leaderboard-preview-copy p br {
+    display: none;
+  }
+  .leaderboard-preview-copy p {
+    margin-bottom: 15px;
+  }
+  .board-heading {
+    padding: 16px;
+  }
+  .board-heading > span:last-child {
+    font-size: 9px;
+  }
+  .compact .leaderboard-table th,
+  .compact .leaderboard-table td {
+    padding: 12px 13px;
+  }
+  .compact .leaderboard-table .rank-column {
+    width: 43px;
+    padding-right: 0;
+  }
+  .compact .leaderboard-player {
+    gap: 10px;
+  }
+  .compact .score-column strong {
+    font-size: 23px;
+  }
+  .board-footnote {
+    padding: 12px 13px;
+    font-size: 9px;
+  }
+  .home-panels {
+    padding-top: 32px;
+    gap: 32px;
+  }
+  .home-panel + .home-panel {
+    padding: 30px 0 0;
+    border: 0;
+    border-top: 1px solid #2b3841;
+  }
+  .home-page .card-body {
+    padding: 12px 10px;
+  }
+  .home-page .card-body p {
+    display: none;
+  }
+  .home-page .card-meta {
+    font-size: 9px;
+  }
+  .leaderboard-page {
+    padding-top: 24px;
+  }
+  .leaderboard-back {
+    margin-bottom: 26px;
+  }
+  .leaderboard-intro {
+    gap: 12px;
+    align-items: flex-start;
+  }
+  .leaderboard-intro h1 {
+    font-size: 46px;
+  }
+  .leaderboard-intro .lead {
+    font-size: 12px;
+  }
+  .intro-trophy {
+    width: 52px;
+    height: 52px;
+    margin: 28px 0 0;
+    filter: drop-shadow(3px 3px #04080c);
+  }
+  .leaderboard-toolbar {
+    margin-top: 26px;
+    gap: 8px;
+  }
+  .leaderboard-filters {
+    gap: 3px;
+    font-size: 11px;
+  }
+  .leaderboard-filters a {
+    padding: 7px 9px;
+  }
+  .leaderboard-period {
+    font-size: 9px;
+  }
+  .winners-podium {
+    gap: 6px;
+    margin: 32px auto 28px;
+  }
+  .podium-player {
+    padding: 0 3px 17px;
+  }
+  .podium-label {
+    font-size: 8px;
+    letter-spacing: 0.3px;
+    margin-bottom: 12px;
+  }
+  .podium-player .player-avatar {
+    width: 36px;
+    height: 36px;
+    margin-bottom: 12px;
+  }
+  .podium-1 .player-avatar {
+    width: 44px;
+    height: 44px;
+    margin-bottom: 14px;
+    outline-offset: 3px;
+  }
+  .podium-player h2 {
+    font-size: 23px;
+    margin-bottom: 7px;
+  }
+  .podium-player p {
+    font-size: 23px;
+  }
+  .podium-player p span {
+    display: block;
+    font-size: 9px;
+    margin-top: 5px;
+  }
+  .podium-block {
+    height: 61px;
+    gap: 9px;
+  }
+  .podium-block > span {
+    font-size: 34px;
+  }
+  .podium-1 .podium-block {
+    height: 83px;
+  }
+  .podium-1 .podium-block .pixel-trophy {
+    width: 23px;
+    height: 23px;
+  }
+  .podium-3 .podium-block {
+    height: 46px;
+  }
+  .rankings-board {
+    margin-top: 24px;
+  }
+  .rankings-heading {
+    padding: 18px 14px;
+    flex-wrap: wrap;
+    gap: 18px;
+  }
+  .rankings-heading h2 {
+    font-size: 29px;
+  }
+  .leaderboard-search {
+    max-width: none;
+    width: 100%;
+  }
+  .leaderboard-table th,
+  .leaderboard-table td {
+    padding: 14px 12px;
+  }
+  .leaderboard-table .rank-column {
+    width: 40px;
+    padding-right: 0;
+  }
+  .leaderboard-table .average-column {
+    display: none;
+  }
+  .leaderboard-table .games-column {
+    padding-left: 6px;
+    padding-right: 6px;
+  }
+  .leaderboard-player {
+    gap: 9px;
+  }
+  .leaderboard-table .player-avatar {
+    width: 28px;
+    height: 28px;
+  }
+  .leaderboard-table .player-name {
+    font-size: 11px;
+  }
+  .leaderboard-table .score-column strong {
+    font-size: 24px;
+  }
+  .score-unit {
+    display: none;
+  }
+  .you-label {
+    display: block;
+    margin: 4px 0 0;
+    width: fit-content;
+  }
+  .search-summary {
+    padding: 12px 14px;
+    font-size: 11px;
+  }
+  .leaderboard-pagination {
+    padding: 16px 14px;
+    flex-wrap: wrap;
+    gap: 15px;
+  }
+  .leaderboard-pagination nav {
+    width: 100%;
+    justify-content: space-between;
+    gap: 10px;
+  }
+  .leaderboard-rules {
+    grid-template-columns: 1fr;
+    gap: 8px;
+    margin-top: 36px;
+    padding-top: 26px;
+  }
+  .leaderboard-rules h2 {
+    font-size: 30px;
+    max-width: none;
+    margin-bottom: 12px;
+  }
+  .leaderboard-empty {
+    padding: 36px 18px;
+  }
+}
diff --git a/app/leaderboard/loading.tsx b/app/leaderboard/loading.tsx
new file mode 100644
index 0000000..d430ca3
--- /dev/null
+++ b/app/leaderboard/loading.tsx
@@ -0,0 +1,24 @@
+export default function LoadingLeaderboard() {
+  return (
+    <main
+      className="section page-content leaderboard-page"
+      aria-busy="true"
+      aria-label="Loading leaderboard"
+    >
+      <span className="eyebrow">THE EXPLORERS’ BOARD</span>
+      <h1>Every block counts.</h1>
+      <p className="lead" role="status">
+        Fetching the explorers’ scores…
+      </p>
+      <div className="leaderboard-skeleton" aria-hidden="true">
+        {Array.from({ length: 6 }, (_, index) => (
+          <div key={index}>
+            <span />
+            <span />
+            <span />
+          </div>
+        ))}
+      </div>
+    </main>
+  );
+}
diff --git a/app/leaderboard/page.tsx b/app/leaderboard/page.tsx
new file mode 100644
index 0000000..fcc6810
--- /dev/null
+++ b/app/leaderboard/page.tsx
@@ -0,0 +1,217 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import { ArrowLeft, ArrowRight, Search } from "lucide-react";
+import { Header, Footer } from "@/components/Shell";
+import {
+  LeaderboardEmpty,
+  LeaderboardTable,
+  WinnersPodium,
+} from "@/components/Leaderboard";
+import { PixelTrophy } from "@/components/PixelArt";
+import { leaderboard } from "@/lib/leaderboard";
+import { user } from "@/lib/supabase";
+import {
+  formatScore,
+  leaderboardDifficulties,
+  leaderboardFilters,
+  leaderboardHref,
+} from "@/shared/leaderboard";
+
+export const dynamic = "force-dynamic";
+export const metadata: Metadata = {
+  title: "Leaderboard",
+  description:
+    "Meet MineGeo’s top explorers. Compare the best five-round scores across easy, normal, and hard Minecraft expeditions.",
+};
+
+export default async function LeaderboardPage({
+  searchParams,
+}: {
+  searchParams: Promise<Record<string, string | string[] | undefined>>;
+}) {
+  const { difficulty, search, page } = leaderboardFilters(await searchParams);
+  const [data, account] = await Promise.all([
+    leaderboard({ difficulty, search, page }),
+    user(),
+  ]);
+  return (
+    <>
+      <Header />
+      <main className="section page-content leaderboard-page" id="main-content">
+        <Link href="/" className="text-link leaderboard-back">
+          <ArrowLeft size={14} /> Back to home
+        </Link>
+        <header className="leaderboard-intro">
+          <div>
+            <span className="eyebrow">THE EXPLORERS’ BOARD</span>
+            <h1>Every block counts.</h1>
+            <p className="lead">
+              The sharpest eyes in the Overworld.
+              <br />
+              Five rounds. 25,000 possible points. Where do you stand?
+            </p>
+          </div>
+          <PixelTrophy className="intro-trophy" />
+        </header>
+        <div className="leaderboard-toolbar">
+          <nav
+            className="leaderboard-filters"
+            aria-label="Filter leaderboard by difficulty"
+          >
+            {leaderboardDifficulties.map((value) => (
+              <Link
+                key={value}
+                href={leaderboardHref(value, search)}
+                aria-current={difficulty === value ? "page" : undefined}
+              >
+                {value === "all"
+                  ? "All difficulties"
+                  : value[0].toUpperCase() + value.slice(1)}
+              </Link>
+            ))}
+          </nav>
+          <span className="leaderboard-period">All time</span>
+        </div>
+        {data ? (
+          <>
+            {data.leaders.length > 0 && !search && data.page === 1 && (
+              <WinnersPodium leaders={data.leaders} />
+            )}
+            <section
+              className="rankings-board"
+              aria-labelledby="rankings-heading"
+            >
+              <div className="rankings-heading">
+                <div>
+                  <h2 id="rankings-heading">The rankings</h2>
+                  <p>
+                    {formatScore(data.total_players)}{" "}
+                    {data.total_players === 1 ? "explorer" : "explorers"} ·{" "}
+                    {formatScore(data.total_games)} completed{" "}
+                    {data.total_games === 1 ? "expedition" : "expeditions"}
+                  </p>
+                </div>
+                <form
+                  action="/leaderboard"
+                  className="leaderboard-search"
+                  role="search"
+                >
+                  {difficulty !== "all" && (
+                    <input type="hidden" name="difficulty" value={difficulty} />
+                  )}
+                  <label className="sr-only" htmlFor="player-search">
+                    Search players
+                  </label>
+                  <input
+                    key={`${difficulty}-${search}`}
+                    id="player-search"
+                    type="search"
+                    name="q"
+                    defaultValue={search}
+                    placeholder="Find an explorer…"
+                    maxLength={64}
+                  />
+                  <button type="submit" aria-label="Search players">
+                    <Search size={17} />
+                  </button>
+                </form>
+              </div>
+              {search && (
+                <div className="search-summary">
+                  <span>
+                    {formatScore(data.matching_players)}{" "}
+                    {data.matching_players === 1 ? "result" : "results"} for “
+                    {search}”
+                  </span>
+                  <Link href={leaderboardHref(difficulty)}>Clear search ×</Link>
+                </div>
+              )}
+              {data.entries.length ? (
+                <LeaderboardTable
+                  entries={data.entries}
+                  playerId={account?.id}
+                />
+              ) : (
+                <LeaderboardEmpty search={!!search} />
+              )}
+              {data.matching_players > 0 && (
+                <div className="leaderboard-pagination">
+                  <span>
+                    Showing {formatScore((data.page - 1) * 25 + 1)}–
+                    {formatScore(
+                      Math.min(data.page * 25, data.matching_players),
+                    )}{" "}
+                    of {formatScore(data.matching_players)}
+                  </span>
+                  <nav aria-label="Leaderboard pages">
+                    {data.page > 1 ? (
+                      <Link
+                        aria-label="Previous page"
+                        href={leaderboardHref(
+                          difficulty,
+                          search,
+                          data.page - 1,
+                        )}
+                      >
+                        <ArrowLeft size={15} /> Previous
+                      </Link>
+                    ) : (
+                      <span aria-disabled="true">
+                        <ArrowLeft size={15} /> Previous
+                      </span>
+                    )}
+                    <span className="page-number">
+                      {data.page} / {data.pages}
+                    </span>
+                    {data.page < data.pages ? (
+                      <Link
+                        aria-label="Next page"
+                        href={leaderboardHref(
+                          difficulty,
+                          search,
+                          data.page + 1,
+                        )}
+                      >
+                        Next <ArrowRight size={15} />
+                      </Link>
+                    ) : (
+                      <span aria-disabled="true">
+                        Next <ArrowRight size={15} />
+                      </span>
+                    )}
+                  </nav>
+                </div>
+              )}
+            </section>
+          </>
+        ) : (
+          <LeaderboardEmpty unavailable />
+        )}
+        <aside className="leaderboard-rules">
+          <div>
+            <span className="eyebrow">HOW THE BOARD WORKS</span>
+            <h2>A place earned, one guess at a time.</h2>
+          </div>
+          <div>
+            <p>
+              Your best completed expedition sets your rank. Ties are broken by
+              average score, then completed games. Difficulty filters rank only
+              games in that mode.
+            </p>
+            <p>
+              Log in before you play. All five rounds must be finished to count;
+              guest games stay off the board.
+            </p>
+            <Link href={account ? "/servers" : "/log-in"} className="text-link">
+              {account
+                ? "Start your next expedition"
+                : "Log in to join the board"}{" "}
+              <ArrowRight size={15} />
+            </Link>
+          </div>
+        </aside>
+      </main>
+      <Footer />
+    </>
+  );
+}
diff --git a/app/page.tsx b/app/page.tsx
index 709024e..db27212 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -11,20 +11,23 @@ import {
 import { Header, Footer } from "@/components/Shell";
 import { MapCard } from "@/components/MapCard";
 import { catalog } from "@/lib/catalog";
+import { leaderboard } from "@/lib/leaderboard";
+import { LeaderboardPreview } from "@/components/Leaderboard";
 export const dynamic = "force-dynamic";
 export default async function Home() {
-  const maps = await catalog();
+  const [maps, rankings] = await Promise.all([
+    catalog(),
+    leaderboard({ limit: 5 }),
+  ]);
   const servers = new Set(maps.map((map) => map.server_id)).size;
   const locations = maps.reduce((total, map) => total + map.panorama_count, 0);
   return (
     <>
       <Header />
-      <main className="home-page">
+      <main className="home-page" id="main-content">
         <section className="hero">
           <div className="hero-copy">
-            <div className="status-label">
-              <span className="live-dot" /> MINECRAFT · EXPLORE · GUESS
-            </div>
+            <div className="status-label">A MINECRAFT GUESSING GAME</div>
             <h1>
               Guess where you are
               <br />
@@ -40,10 +43,13 @@ export default async function Home() {
               <Link href="/servers" className="button primary">
                 Start exploring <ArrowRight size={18} />
               </Link>
-              <span className="hero-mode-note">3 difficulty levels</span>
+              <Link href="/leaderboard" className="text-link">
+                Meet the top explorers <ArrowRight size={14} />
+              </Link>
             </div>
             <div className="hero-notes">
-              <span className="mode-dots" aria-hidden="true">
+              <span className="round-blocks" aria-hidden="true">
+                <i />
                 <i />
                 <i />
                 <i />
@@ -53,10 +59,10 @@ export default async function Home() {
             </div>
           </div>
           <div className="hero-art" aria-label="Minecraft surface map">
-            <div className="map-art-frame">
+            <div className="map-art-frame minecraft-paper">
               <Image
                 src={maps[0]?.mapImage || "/images/example-map.webp"}
-                alt="A Minecraft surface map framed in parchment"
+                alt="A Minecraft surface map on the original Minecraft parchment texture"
                 width={1024}
                 height={1024}
                 loading="eager"
@@ -123,12 +129,12 @@ export default async function Home() {
           {maps.length ? (
             <div className="cards-grid">
               {maps.slice(0, 4).map((map, index) => (
-                <MapCard map={map} index={index} key={map.id} />
+                <MapCard map={map} index={index} key={map.id} minecraftPaper />
               ))}
             </div>
           ) : (
             <div className="first-map-panel">
-              <div className="empty-map-art" aria-hidden="true">
+              <div className="empty-map-art minecraft-paper" aria-hidden="true">
                 <Image
                   src="/images/example-map.webp"
                   alt=""
@@ -155,6 +161,7 @@ export default async function Home() {
             </div>
           )}
         </section>
+        <LeaderboardPreview data={rankings} />
         <section className="section home-panels">
           <article className="home-panel">
             <span className="eyebrow">HOW TO PLAY</span>
diff --git a/app/rounded-theme.css b/app/rounded-theme.css
new file mode 100644
index 0000000..6997212
--- /dev/null
+++ b/app/rounded-theme.css
@@ -0,0 +1,272 @@
+/* Soft charcoal panels around the original pixel artwork and Minecraft maps. */
+:root {
+  --bg: #080b10;
+  --panel: #1a222c;
+  --panel2: #222c37;
+  --line: #35404c;
+  --green: #8dce66;
+  --muted: #a1acb8;
+  --text: #eef1f4;
+  --board-stone: #1a222c;
+  --board-edge: #35404c;
+  --radius-panel: 16px;
+  --radius-control: 9px;
+}
+body {
+  background-image: radial-gradient(
+    ellipse at 80% 12%,
+    #25303d55,
+    transparent 55%
+  );
+}
+.site-header {
+  background: #0c1017;
+  border-bottom: 1px solid #2c3540;
+  box-shadow: none;
+}
+.hero {
+  grid-template-columns: 1.35fr 1fr;
+  padding-top: 52px;
+  padding-bottom: 52px;
+}
+.hero h1 {
+  font-size: clamp(48px, 4.4vw, 64px);
+  line-height: 1.05;
+}
+.hero h1 span {
+  color: var(--green);
+}
+.button {
+  border-radius: var(--radius-control);
+  background: #293542;
+  border: 1px solid #526071;
+  box-shadow:
+    inset 0 1px #ffffff14,
+    0 3px 8px #04070b55;
+  padding: 10px 20px;
+}
+.button.primary {
+  background: linear-gradient(#9ada72, #77b852);
+  border: 1px solid #a6df80;
+  color: #14200e;
+  box-shadow:
+    inset 0 1px #ddffc080,
+    0 3px 8px #04070b55;
+}
+.button.primary:hover {
+  background: linear-gradient(#ace783, #88c962);
+}
+.button:hover {
+  transform: translateY(-1px);
+}
+.button:active {
+  transform: translateY(1px);
+}
+/* .header-account deliberately retains its existing square, beveled styling. */
+.compass-art {
+  border-radius: 50%;
+  border: 1px solid #536170;
+  background: #202b36;
+  width: 62px;
+  height: 62px;
+  box-shadow:
+    inset 0 1px #ffffff15,
+    0 5px 14px #04070b66;
+}
+.floating-tag {
+  border-radius: var(--radius-control);
+  background: #171f29;
+  border-color: #35404c;
+  box-shadow: 0 4px 12px #04070b55;
+}
+.world-stats {
+  position: relative;
+  z-index: 1;
+  width: calc(100% - 56px);
+  max-width: 1104px;
+  margin: -9px auto 0;
+  padding: 23px 24px;
+  border: 1px solid #35404c;
+  border-radius: var(--radius-panel);
+  background: #1a222c;
+  box-shadow: 0 8px 24px #03060a55;
+}
+.world-stats > div {
+  border-color: #35404c;
+}
+.world-stats .stat-cube.gold-cube {
+  background: #cba950;
+  border-color: #edca74;
+}
+.world-stats .stat-cube.cyan-cube {
+  background: #60b8bb;
+  border-color: #94dcde;
+}
+.world-stats .stat-cube.red-cube {
+  background: #c16067;
+  border-color: #e98a91;
+}
+.map-card,
+.home-page .map-card {
+  border: 1px solid #35404c;
+  border-radius: var(--radius-panel);
+  background: #1a222c;
+  box-shadow: 0 4px 16px #03060a40;
+  overflow: hidden;
+}
+.map-card:hover {
+  border-color: #6c8b59;
+  transform: translateY(-3px);
+}
+.card-body,
+.home-page .card-body {
+  background: #1a222c;
+}
+.card-type,
+.card-number,
+.badge {
+  border-radius: 4px;
+}
+.leaderboard-preview-board,
+.rankings-board,
+.home-panel,
+.tool-card,
+.start-panel,
+.auth-card,
+.settings-card,
+.editor-panel,
+.report-dialog,
+.result-summary,
+.round-result,
+.empty-state,
+.first-map-panel {
+  border-radius: var(--radius-panel);
+  border: 1px solid var(--line);
+  background: var(--panel);
+  box-shadow: 0 5px 18px #03060a40;
+}
+.leaderboard-preview-board,
+.rankings-board {
+  overflow: hidden;
+}
+.leaderboard-table thead {
+  background: #131b24;
+}
+.home-panels {
+  gap: 24px;
+}
+.home-panel,
+.home-panel + .home-panel {
+  padding: 28px;
+  border: 1px solid var(--line);
+}
+.mode-row {
+  border-radius: var(--radius-control);
+  background: #202b36;
+  border-color: #3b4856;
+  box-shadow: none;
+}
+.mode-row:hover {
+  background: #293642;
+  border-color: #6c8b59;
+}
+.contribute-banner {
+  border-radius: var(--radius-panel);
+  background: #19251f;
+  border: 1px solid #435942;
+  box-shadow: none;
+}
+.leaderboard-filters a,
+.leaderboard-pagination a,
+.difficulty-options button,
+.filter-tabs button,
+.icon-button,
+.auth-tabs a {
+  border-radius: var(--radius-control);
+}
+.field input,
+.field textarea,
+.field select,
+.search-field,
+.leaderboard-search,
+.preview-toolbar select {
+  border-radius: var(--radius-control);
+}
+.draft-row,
+.token-box,
+.preview-tile,
+.leaderboard-rules article {
+  border-radius: var(--radius-control);
+}
+.player-avatar {
+  border-radius: 5px;
+  overflow: hidden;
+}
+/* Native vector cursors track directly, with normal text/drag cursors retained. */
+@media (hover: hover) and (pointer: fine) {
+  body {
+    cursor:
+      url("/cursors/orbit.svg") 14 14,
+      auto;
+  }
+  a,
+  button,
+  select,
+  summary,
+  label[for],
+  input[type="checkbox"],
+  input[type="radio"],
+  input[type="file"],
+  [role="button"] {
+    cursor:
+      url("/cursors/orbit-link.svg") 18 18,
+      pointer;
+  }
+  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
+  textarea,
+  [contenteditable="true"] {
+    cursor: text;
+  }
+  button:disabled,
+  [aria-disabled="true"] {
+    cursor: not-allowed;
+  }
+}
+@media (max-width: 1000px) {
+  .hero {
+    grid-template-columns: 1.15fr 1fr;
+  }
+  .hero h1 {
+    font-size: 54px;
+  }
+}
+@media (max-width: 700px) {
+  .hero {
+    grid-template-columns: 1fr;
+    padding: 36px 22px 32px;
+  }
+  .hero h1 {
+    font-size: clamp(43px, 10.8vw, 58px);
+  }
+  .world-stats {
+    width: calc(100% - 40px);
+    padding: 22px 18px;
+    gap: 24px 12px;
+  }
+  .world-stats strong {
+    font-size: 28px;
+  }
+  .home-panel,
+  .home-panel + .home-panel {
+    padding: 23px 20px;
+  }
+  .home-panels {
+    gap: 20px;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  a,
+  button {
+    transition: none;
+  }
+}
diff --git a/components/Leaderboard.tsx b/components/Leaderboard.tsx
new file mode 100644
index 0000000..0c5ce52
--- /dev/null
+++ b/components/Leaderboard.tsx
@@ -0,0 +1,203 @@
+import Link from "next/link";
+import { ArrowRight } from "lucide-react";
+import { PixelTrophy, PlayerAvatar } from "./PixelArt";
+import {
+  formatScore,
+  type LeaderboardData,
+  type LeaderboardEntry,
+} from "@/shared/leaderboard";
+
+export function LeaderboardEmpty({
+  unavailable = false,
+  search = false,
+}: {
+  unavailable?: boolean;
+  search?: boolean;
+}) {
+  return (
+    <div
+      className="leaderboard-empty"
+      role={unavailable ? "status" : undefined}
+    >
+      <PixelTrophy />
+      <h2>
+        {unavailable
+          ? "The scoreboard is taking a break."
+          : search
+            ? "No explorers found."
+            : "The first place is still open."}
+      </h2>
+      <p>
+        {unavailable
+          ? "We couldn’t load the scores. Try again in a moment."
+          : search
+            ? "Try another player name or clear your search."
+            : "Log in and finish five rounds to put your name on the board."}
+      </p>
+      {!search && (
+        <Link
+          href={unavailable ? "/leaderboard" : "/servers"}
+          className="button primary"
+        >
+          {unavailable ? "Reload scores" : "Play an expedition"}{" "}
+          <ArrowRight size={16} />
+        </Link>
+      )}
+    </div>
+  );
+}
+
+export function LeaderboardTable({
+  entries,
+  compact = false,
+  playerId,
+}: {
+  entries: LeaderboardEntry[];
+  compact?: boolean;
+  playerId?: string;
+}) {
+  return (
+    <div className={`leaderboard-table-wrap${compact ? " compact" : ""}`}>
+      <table className="leaderboard-table">
+        <caption className="sr-only">
+          Players ranked by best five-round score. Ties are broken by average
+          score, then games played.
+        </caption>
+        <thead>
+          <tr>
+            <th scope="col" className="rank-column">
+              Rank
+            </th>
+            <th scope="col">Explorer</th>
+            {!compact && (
+              <th scope="col" className="games-column">
+                Games
+              </th>
+            )}
+            {!compact && (
+              <th scope="col" className="average-column">
+                Average
+              </th>
+            )}
+            <th scope="col" className="score-column">
+              Best score
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          {entries.map((entry) => (
+            <tr
+              key={entry.player_id}
+              className={entry.player_id === playerId ? "your-row" : undefined}
+            >
+              <td className="rank-column">
+                <span
+                  className={`rank-number${entry.rank <= 3 ? ` place-${entry.rank}` : ""}`}
+                >
+                  {String(entry.rank).padStart(2, "0")}
+                </span>
+              </td>
+              <th scope="row">
+                <div className="leaderboard-player">
+                  <PlayerAvatar id={entry.player_id} />
+                  <span className="player-name">
+                    {entry.display_name}
+                    {entry.player_id === playerId && (
+                      <span className="you-label">You</span>
+                    )}
+                  </span>
+                </div>
+              </th>
+              {!compact && (
+                <td className="games-column">
+                  {formatScore(entry.games_played)}
+                </td>
+              )}
+              {!compact && (
+                <td className="average-column">
+                  {formatScore(entry.average_score)}
+                </td>
+              )}
+              <td className="score-column">
+                <strong>{formatScore(entry.best_score)}</strong>
+                <span className="score-unit"> pts</span>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+export function WinnersPodium({ leaders }: { leaders: LeaderboardEntry[] }) {
+  return (
+    <section className="winners-podium" aria-label="Top three explorers">
+      {leaders.map((entry, index) => (
+        <article
+          className={`podium-place podium-${index + 1}`}
+          key={entry.player_id}
+        >
+          <div className="podium-player">
+            <span className="podium-label">
+              {index === 0 ? "TOP EXPLORER" : `PLACE 0${index + 1}`}
+            </span>
+            <PlayerAvatar id={entry.player_id} />
+            <h2>{entry.display_name}</h2>
+            <p>
+              {formatScore(entry.best_score)} <span>/ 25,000</span>
+            </p>
+          </div>
+          <div className="podium-block" aria-hidden="true">
+            <span>0{index + 1}</span>
+            {index === 0 && <PixelTrophy />}
+          </div>
+        </article>
+      ))}
+    </section>
+  );
+}
+
+export function LeaderboardPreview({ data }: { data: LeaderboardData | null }) {
+  return (
+    <section
+      className="section home-leaderboard"
+      aria-labelledby="home-leaderboard-heading"
+    >
+      <div className="leaderboard-preview-copy">
+        <div className="leaderboard-kicker">
+          <PixelTrophy />
+          <span className="eyebrow">THE EXPLORERS’ BOARD</span>
+        </div>
+        <h2 id="home-leaderboard-heading">
+          Good eye.
+          <br /> <span>Great guess.</span>
+        </h2>
+        <p>
+          Five rounds to find your way.
+          <br /> One score to make your mark.
+        </p>
+        <Link className="text-link" href="/leaderboard">
+          See the full leaderboard <ArrowRight size={16} />
+        </Link>
+      </div>
+      <div className="leaderboard-preview-board">
+        <div className="board-heading">
+          <span>Top explorers</span>
+          <span>All difficulties · All time</span>
+        </div>
+        {data?.entries.length ? (
+          <LeaderboardTable entries={data.entries} compact />
+        ) : (
+          <LeaderboardEmpty unavailable={!data} />
+        )}
+        <div className="board-footnote">
+          Best expedition score ·{" "}
+          {data
+            ? `${formatScore(data.total_players)} ranked ${data.total_players === 1 ? "explorer" : "explorers"}`
+            : "Scores temporarily unavailable"}
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/components/MapCard.tsx b/components/MapCard.tsx
index 9c2e458..c249d8f 100644
--- a/components/MapCard.tsx
+++ b/components/MapCard.tsx
@@ -12,18 +12,28 @@ export type CardMap = {
   server?: { name: string } | undefined;
   bounds: { minX: number; minZ: number; maxX: number; maxZ: number };
 };
-export function MapCard({ map, index = 0 }: { map: CardMap; index?: number }) {
+export function MapCard({
+  map,
+  index = 0,
+  minecraftPaper = false,
+}: {
+  map: CardMap;
+  index?: number;
+  minecraftPaper?: boolean;
+}) {
   return (
     <Link className="map-card" href={`/servers/${map.id}`}>
-      <div className="card-image">
-        <Image
-          src={map.image || "/images/example-map.webp"}
-          alt={`${map.name} terrain`}
-          fill
-          loading={index < 3 ? "eager" : "lazy"}
-          unoptimized
-          sizes="(max-width: 640px) 100vw, 33vw"
-        />
+      <div className={`card-image${minecraftPaper ? " minecraft-paper" : ""}`}>
+        <div className="card-map-content">
+          <Image
+            src={map.image || "/images/example-map.webp"}
+            alt={`${map.name} terrain`}
+            fill
+            loading={index < 3 ? "eager" : "lazy"}
+            unoptimized
+            sizes="(max-width: 640px) 100vw, 33vw"
+          />
+        </div>
         <span className="card-type">
           {map.source === "plugin" ? "SERVER EXPORT" : "PLAYER CAPTURE"}
         </span>
diff --git a/components/PixelArt.tsx b/components/PixelArt.tsx
new file mode 100644
index 0000000..a51ee17
--- /dev/null
+++ b/components/PixelArt.tsx
@@ -0,0 +1,56 @@
+export function PixelTrophy({ className = "" }: { className?: string }) {
+  return (
+    <svg
+      className={`pixel-trophy ${className}`}
+      viewBox="0 0 24 24"
+      fill="none"
+      aria-hidden="true"
+      shapeRendering="crispEdges"
+    >
+      <path
+        fill="#735523"
+        d="M2 5h4V3h12v2h4v7h-2v2h-4v2h-2v3h4v3H6v-3h4v-3H8v-2H4v-2H2z"
+      />
+      <path
+        fill="#d6b665"
+        d="M6 3h12v9h-2v2h-2v2h-4v-2H8v-2H6zM10 16h4v3h-4zM6 19h12v2H6zM2 5h4v2H4v4h2v2H4v-2H2zM18 5h4v6h-2v2h-2v-2h2V7h-2z"
+      />
+      <path fill="#f0d891" d="M6 3h12v2H8v6H6zM6 19h12v1H6z" />
+      <path fill="#a1803c" d="M16 5h2v7h-2zM14 12h2v2h-2zM12 16h2v3h-2z" />
+    </svg>
+  );
+}
+
+// Generated markers, not player skins. No third-party avatar requests.
+export function PlayerAvatar({ id }: { id: string }) {
+  const seed = [...id].reduce(
+    (value, char) => (value * 31 + char.charCodeAt(0)) >>> 0,
+    0,
+  );
+  const hair = ["#654b39", "#333e44", "#95723e", "#694f59"][seed % 4];
+  const skin = ["#c99a77", "#a67b60", "#dab28d", "#875f4d"][(seed >>> 3) % 4];
+  const shirt = ["#68876a", "#697e91", "#a68a50", "#8b6e7f"][(seed >>> 5) % 4];
+  return (
+    <svg
+      className="player-avatar"
+      viewBox="0 0 8 8"
+      aria-hidden="true"
+      shapeRendering="crispEdges"
+    >
+      <path fill={shirt} d="M0 0h8v8H0z" />
+      <path fill={skin} d="M1 1h6v6H1z" />
+      <path
+        fill={hair}
+        d={
+          seed % 2
+            ? "M1 0h6v2H3v1H1zM6 2h1v2H6z"
+            : "M1 0h6v2H1zM1 2h1v2H1zM6 2h1v2H6z"
+        }
+      />
+      <path fill="#e6ded0" d="M2 3h1v1H2zM5 3h1v1H5z" />
+      <path fill="#3b4140" d="M3 3h1v1H3zM4 3h1v1H4z" />
+      <path fill="#825b49" d="M3 5h2v1H3z" />
+      <path fill={shirt} d="M0 7h8v1H0z" />
+    </svg>
+  );
+}
diff --git a/components/Results.tsx b/components/Results.tsx
index e4aab1b..accc57a 100644
--- a/components/Results.tsx
+++ b/components/Results.tsx
@@ -98,6 +98,9 @@ export function Results({ id }: { id: string }) {
             <Link className="button" href="/dashboard">
               My maps
             </Link>
+            <Link className="text-link" href="/leaderboard">
+              View leaderboard →
+            </Link>
           </div>
         </div>
       </div>
diff --git a/components/Shell.tsx b/components/Shell.tsx
index 6702954..c442b0e 100644
--- a/components/Shell.tsx
+++ b/components/Shell.tsx
@@ -3,17 +3,14 @@ import Link from "next/link";
 import { Compass, ArrowUpRight, Globe2 } from "lucide-react";
 import { user } from "@/lib/supabase";
 import { Brand } from "./Brand";
+import { SiteNav } from "./SiteNav";
 export async function Header() {
   const account = await user();
   return (
     <header className="site-header">
       <div className="header-inner">
         <Brand />
-        <nav aria-label="Main navigation">
-          <Link href="/servers">Play & maps</Link>
-          <Link href="/downloads">Downloads</Link>
-          <Link href="/about">Guide</Link>
-        </nav>
+        <SiteNav />
         <Link
           href={account ? "/dashboard" : "/log-in"}
           className="header-account"
@@ -36,6 +33,7 @@ export function Footer() {
           <Globe2 size={14} /> English
         </span>
         <Link href="/downloads">Tools & downloads</Link>
+        <Link href="/leaderboard">Leaderboard</Link>
         <Link href="/moderation">Moderation</Link>
       </div>
       <p className="disclaimer">
diff --git a/components/SiteNav.tsx b/components/SiteNav.tsx
new file mode 100644
index 0000000..4a0b81e
--- /dev/null
+++ b/components/SiteNav.tsx
@@ -0,0 +1,31 @@
+"use client";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+
+const links = [
+  ["/servers", "Play & maps"],
+  ["/leaderboard", "Leaderboard"],
+  ["/downloads", "Downloads"],
+  ["/about", "Guide"],
+] as const;
+
+export function SiteNav() {
+  const pathname = usePathname();
+  return (
+    <nav aria-label="Main navigation">
+      {links.map(([href, label]) => (
+        <Link
+          key={href}
+          href={href}
+          aria-current={
+            pathname === href || pathname.startsWith(`${href}/`)
+              ? "page"
+              : undefined
+          }
+        >
+          {label}
+        </Link>
+      ))}
+    </nav>
+  );
+}
diff --git a/lib/leaderboard.ts b/lib/leaderboard.ts
new file mode 100644
index 0000000..3544c46
--- /dev/null
+++ b/lib/leaderboard.ts
@@ -0,0 +1,36 @@
+import "server-only";
+import { admin, required } from "./supabase";
+import type {
+  LeaderboardData,
+  LeaderboardDifficulty,
+} from "@/shared/leaderboard";
+
+export async function leaderboard({
+  difficulty = "all",
+  search = "",
+  page = 1,
+  limit = 25,
+}: {
+  difficulty?: LeaderboardDifficulty;
+  search?: string;
+  page?: number;
+  limit?: number;
+} = {}): Promise<LeaderboardData | null> {
+  try {
+    return required(
+      await admin().rpc("player_leaderboard", {
+        p_difficulty: difficulty,
+        p_search: search,
+        p_page: page,
+        p_limit: limit,
+      }),
+    ) as unknown as LeaderboardData;
+  } catch (error) {
+    // A leaderboard outage must not take the map catalog or homepage offline.
+    console.error(
+      "Leaderboard query failed",
+      error instanceof Error ? error.message : "Unknown error",
+    );
+    return null;
+  }
+}
diff --git a/next-env.d.ts b/next-env.d.ts
index ce4e94a..a419cbe 100644
--- a/next-env.d.ts
+++ b/next-env.d.ts
@@ -1,7 +1,7 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/types/routes.d.ts";
-import "./.next/types/root-params.d.ts";
+import "./.next/dev/types/routes.d.ts";
+import "./.next/dev/types/root-params.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
diff --git a/package.json b/package.json
index a896771..502aeaa 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "repair:panoramas": "node scripts/repair-panoramas.mjs",
     "worker": "tsx worker/main.ts",
     "test": "tsx --test tests/*.test.ts",
+    "test:leaderboard": "node scripts/test-leaderboard-sql.mjs",
     "test:renderer": "node scripts/test-renderer.mjs",
     "render:map": "node scripts/render-map.mjs",
     "test:production": "node scripts/test-production.mjs",
diff --git a/public/cursors/orbit-link.svg b/public/cursors/orbit-link.svg
new file mode 100644
index 0000000..21964f3
--- /dev/null
+++ b/public/cursors/orbit-link.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36">
+  <circle cx="18" cy="18" r="14" fill="#8dce66" fill-opacity=".18" stroke="#080b10" stroke-width="4"/>
+  <circle cx="18" cy="18" r="14" fill="none" stroke="#b1e78b" stroke-width="2"/>
+  <circle cx="18" cy="18" r="3" fill="#b1e78b" stroke="#080b10" stroke-width="1"/>
+</svg>
diff --git a/public/cursors/orbit.svg b/public/cursors/orbit.svg
new file mode 100644
index 0000000..0f715f3
--- /dev/null
+++ b/public/cursors/orbit.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28">
+  <circle cx="14" cy="14" r="10" fill="#080b10" fill-opacity=".22" stroke="#080b10" stroke-width="4"/>
+  <circle cx="14" cy="14" r="10" fill="none" stroke="#b1e78b" stroke-width="1.5"/>
+  <circle cx="14" cy="14" r="2" fill="#eef1f4" stroke="#080b10" stroke-width="1"/>
+</svg>
diff --git a/public/images/minecraft-map-background.png b/public/images/minecraft-map-background.png
new file mode 100644
index 0000000000000000000000000000000000000000..e5fb6e3b1060f4cb38c458d1fba84d1f52eba002
GIT binary patch
literal 304
zcmeAS@N?(olHy`uVBq!ia0vp^4j|0L3?#3!&-4XSoB=)|u0Z<QzG*Ytb2i=CR}bVc
zmIV0)GdMiEkp|>k^>lFzskn9Y;>NDS20UyJ=J(b1^IZLXLPd(7sl2jl&Gp#h7d5*N
zTnxUJIo(ZD!e8{;1O6OOF)@acvRNl<**MJ4r|i#(H~aA9AN$iKHk-KkW2POLF*S0>
z5jNY5=3IN_g^y!ZGPFHf<hHfTZ2lss;^ZWIPU^v>f5)CiM6_h-i&d|zU$`~g>uva}
zy<7Sh+WqDD|DvwUVDHR36(>G1uJ}Glxki3{M2jEugtjfO7jF1cB*V3)bE>7SpAM^!
z&t$L0jXTsXIL*oojN|U`XYjLQes_I!wViIc=88m_2M1Oe0zJs!>FVdQ&MBb@0P`$-
A0ssI2

literal 0
HcmV?d00001

diff --git a/scripts/test-leaderboard-sql.mjs b/scripts/test-leaderboard-sql.mjs
new file mode 100644
index 0000000..54abc26
--- /dev/null
+++ b/scripts/test-leaderboard-sql.mjs
@@ -0,0 +1,137 @@
+// Isolated database only; no fixture accounts or scores enter the real board.
+import assert from "node:assert/strict";
+import { readFile, readdir } from "node:fs/promises";
+import { PGlite } from "../.data/sql-verification/node_modules/@electric-sql/pglite/dist/index.js";
+
+const db = new PGlite();
+try {
+  await db.exec(`create role anon; create role authenticated; create role service_role;
+    create schema auth; create table auth.users(id uuid primary key);
+    create function auth.uid() returns uuid language sql as $$ select null::uuid $$;
+    create schema storage; create table storage.buckets(id text primary key,name text,public boolean,file_size_limit bigint);`);
+  for (const file of (await readdir("supabase/migrations"))
+    .filter((file) => file.endsWith(".sql"))
+    .sort()) {
+    await db.exec(await readFile(`supabase/migrations/${file}`, "utf8"));
+  }
+  async function board(difficulty = "all", search = "", page = 1, limit = 25) {
+    return (
+      await db.query("select public.player_leaderboard($1,$2,$3,$4) as board", [
+        difficulty,
+        search,
+        page,
+        limit,
+      ])
+    ).rows[0].board;
+  }
+  assert.deepEqual((await board()).entries, []);
+  assert.equal((await board()).page, 1);
+  assert.equal((await board()).pages, 1);
+
+  const ids = [];
+  for (const name of ["Alice", "Bob", "Carol", "%_Miner"]) {
+    const id = (
+      await db.query(
+        "insert into auth.users values(gen_random_uuid()) returning id",
+      )
+    ).rows[0].id;
+    await db.query(
+      "insert into public.profiles(id,display_name) values($1,$2)",
+      [id, name],
+    );
+    ids.push(id);
+  }
+  const dataset = (
+    await db.query(
+      `insert into public.datasets(owner_id,name,source,bounds,state,panorama_count)
+    values($1,'Leaderboard fixture','plugin','{"minX":0,"minZ":0,"maxX":64,"maxZ":64}','published',5) returning id`,
+      [ids[0]],
+    )
+  ).rows[0].id;
+  const revision = (
+    await db.query(
+      "insert into public.revisions(dataset_id,asset_root,manifest) values($1,'fixture','{}') returning id",
+      [dataset],
+    )
+  ).rows[0].id;
+  async function game(
+    owner,
+    difficulty,
+    score,
+    current = 5,
+    missingResult = false,
+  ) {
+    const session = (
+      await db.query(
+        "insert into public.game_sessions(revision_id,owner_id,access_hash,difficulty,current_round) values($1,$2,'private-fixture-secret',$3,$4) returning id",
+        [revision, owner, difficulty, current],
+      )
+    ).rows[0].id;
+    for (let round = 0; round < 5; round++) {
+      await db.query(
+        "insert into public.game_rounds(session_id,round_number,viewpoint,result) values($1,$2,'{}',$3)",
+        [
+          session,
+          round,
+          missingResult && round === 4
+            ? null
+            : JSON.stringify({ score: score / 5 }),
+        ],
+      );
+    }
+  }
+  await game(ids[0], "easy", 19000);
+  await game(ids[0], "hard", 23000);
+  await game(ids[1], "easy", 21000);
+  await game(ids[1], "hard", 23000);
+  await game(ids[2], "easy", 20000);
+  await game(ids[2], "hard", 23000);
+  await game(ids[2], "hard", 23000);
+  await game(ids[3], "easy", 5000);
+  await game(null, "easy", 25000);
+  await game(ids[0], "normal", 25000, 4);
+  await game(ids[0], "normal", 25000, 5, true);
+
+  const all = await board();
+  assert.equal(all.total_players, 4);
+  assert.equal(all.total_games, 8);
+  assert.deepEqual(
+    all.entries.map((player) => player.display_name),
+    ["Carol", "Bob", "Alice", "%_Miner"],
+  );
+  assert.equal(all.entries[0].average_score, 22000);
+  assert.equal(all.entries[0].games_played, 3);
+  assert.deepEqual(
+    (await board("easy")).leaders.map((player) => player.display_name),
+    ["Bob", "Carol", "Alice"],
+  );
+  assert.equal((await board("normal")).total_players, 0);
+  assert.equal((await board("all", "alice")).entries[0].rank, 3);
+  assert.equal((await board("all", "%_")).matching_players, 1);
+  assert.equal((await board("all", "' OR 1=1--")).matching_players, 0);
+  assert.equal((await board("all", "missing")).pages, 1);
+  const last = await board("all", "", 999, 2);
+  assert.equal(last.page, 2);
+  assert.equal(last.pages, 2);
+  assert.deepEqual(
+    last.entries.map((player) => player.rank),
+    [3, 4],
+  );
+  assert.equal((await board("all", "", -1, 2)).page, 1);
+  assert.equal((await board("all", "", 1, 0)).entries.length, 1);
+  assert.equal((await board(null, null, null, null)).page, 1);
+  assert.equal(JSON.stringify(all).includes("private-fixture-secret"), false);
+  assert.equal(JSON.stringify(all).includes("viewpoint"), false);
+  for (const role of ["anon", "authenticated", "service_role"]) {
+    const result = await db.query(
+      "select has_function_privilege($1,'public.player_leaderboard(text,text,integer,integer)','execute') as allowed",
+      [role],
+    );
+    assert.equal(result.rows[0].allowed, role === "service_role");
+  }
+  console.log(
+    "Leaderboard SQL passed: empty board, completed games, guests, ranking ties, difficulty, literal search, pagination, and server-only permissions.",
+  );
+} finally {
+  await db.close();
+}
diff --git a/shared/database.ts b/shared/database.ts
index b648458..18c0bca 100644
--- a/shared/database.ts
+++ b/shared/database.ts
@@ -520,6 +520,15 @@ export type Database = {
       [_ in never]: never;
     };
     Functions: {
+      player_leaderboard: {
+        Args: {
+          p_difficulty?: string;
+          p_search?: string;
+          p_page?: number;
+          p_limit?: number;
+        };
+        Returns: Json;
+      };
       submit_content_report: {
         Args: {
           p_dataset: string;
diff --git a/shared/leaderboard.ts b/shared/leaderboard.ts
new file mode 100644
index 0000000..574ce04
--- /dev/null
+++ b/shared/leaderboard.ts
@@ -0,0 +1,54 @@
+export const leaderboardDifficulties = [
+  "all",
+  "easy",
+  "normal",
+  "hard",
+] as const;
+export type LeaderboardDifficulty = (typeof leaderboardDifficulties)[number];
+export type LeaderboardEntry = {
+  rank: number;
+  player_id: string;
+  display_name: string;
+  best_score: number;
+  average_score: number;
+  games_played: number;
+};
+export type LeaderboardData = {
+  entries: LeaderboardEntry[];
+  leaders: LeaderboardEntry[];
+  total_players: number;
+  total_games: number;
+  matching_players: number;
+  page: number;
+  pages: number;
+};
+
+export function leaderboardFilters(
+  params: Record<string, string | string[] | undefined>,
+) {
+  const difficulty =
+    leaderboardDifficulties.find((value) => value === params.difficulty) ??
+    "all";
+  const search =
+    typeof params.q === "string" ? params.q.trim().slice(0, 64) : "";
+  const rawPage = typeof params.page === "string" ? Number(params.page) : 1;
+  const page =
+    Number.isSafeInteger(rawPage) && rawPage > 0
+      ? Math.min(rawPage, 1_000_000)
+      : 1;
+  return { difficulty, search, page };
+}
+
+export function leaderboardHref(
+  difficulty: LeaderboardDifficulty,
+  search = "",
+  page = 1,
+) {
+  const params = new URLSearchParams();
+  if (difficulty !== "all") params.set("difficulty", difficulty);
+  if (search) params.set("q", search);
+  if (page > 1) params.set("page", String(page));
+  return `/leaderboard${params.size ? `?${params}` : ""}`;
+}
+
+export const formatScore = (score: number) => score.toLocaleString("en-US");
diff --git a/supabase/migrations/20261006093345_player_leaderboard.sql b/supabase/migrations/20261006093345_player_leaderboard.sql
new file mode 100644
index 0000000..2ca895f
--- /dev/null
+++ b/supabase/migrations/20261006093345_player_leaderboard.sql
@@ -0,0 +1,61 @@
+-- Read through the server only: never expose session secrets or round answers.
+create index game_sessions_leaderboard_idx
+  on public.game_sessions (difficulty, owner_id)
+  where current_round = 5 and owner_id is not null;
+
+create function public.player_leaderboard(
+  p_difficulty text default 'all',
+  p_search text default '',
+  p_page integer default 1,
+  p_limit integer default 25
+) returns jsonb
+language sql stable security invoker set search_path = '' as $$
+  with completed as (
+    select s.id, s.owner_id, sum((r.result->>'score')::integer) as score
+    from public.game_sessions s
+    join public.game_rounds r on r.session_id = s.id
+    where s.current_round = 5 and s.owner_id is not null
+      and (p_difficulty = 'all' or s.difficulty = p_difficulty)
+    group by s.id, s.owner_id
+    having count(*) = 5 and count(r.result) = 5
+  ), players as (
+    select p.id as player_id, p.display_name,
+      max(c.score) as best_score, avg(c.score) as average_score,
+      count(*) as games_played
+    from completed c join public.profiles p on p.id = c.owner_id
+    group by p.id, p.display_name
+  ), ranked as (
+    select row_number() over (
+      order by best_score desc, average_score desc, games_played desc, player_id
+    ) as rank, player_id, display_name, best_score,
+      round(average_score)::integer as average_score, games_played
+    from players
+  ), matched as (
+    select * from ranked
+    where strpos(lower(display_name), lower(left(trim(coalesce(p_search, '')), 64))) > 0
+  ), settings as (
+    select greatest(1, least(coalesce(p_limit, 25), 100)) as page_size
+  ), counts as (
+    select (select count(*) from matched) as matching_players,
+      greatest(1, ceil((select count(*) from matched)::numeric / settings.page_size)::integer) as pages
+    from settings
+  ), pagination as (
+    select *, greatest(1, least(coalesce(p_page, 1), pages)) as page
+    from counts cross join settings
+  ), entries as (
+    select * from matched order by rank
+    limit (select page_size from pagination)
+    offset (select (page - 1) * page_size from pagination)
+  )
+  select jsonb_build_object(
+    'entries', coalesce((select jsonb_agg(to_jsonb(e) order by rank) from entries e), '[]'::jsonb),
+    'leaders', coalesce((select jsonb_agg(to_jsonb(r) order by rank) from
+      (select * from ranked order by rank limit 3) r), '[]'::jsonb),
+    'total_players', (select count(*) from ranked),
+    'total_games', (select count(*) from completed),
+    'matching_players', matching_players, 'page', page, 'pages', pages
+  ) from pagination;
+$$;
+
+revoke all on function public.player_leaderboard(text, text, integer, integer) from public, anon, authenticated;
+grant execute on function public.player_leaderboard(text, text, integer, integer) to service_role;
diff --git a/tests/leaderboard.test.ts b/tests/leaderboard.test.ts
new file mode 100644
index 0000000..5e9d748
--- /dev/null
+++ b/tests/leaderboard.test.ts
@@ -0,0 +1,41 @@
+import { test } from "node:test";
+import assert from "node:assert/strict";
+import { leaderboardFilters, leaderboardHref } from "../shared/leaderboard";
+
+test("leaderboard filters constrain malformed and repeated query parameters", () => {
+  assert.deepEqual(
+    leaderboardFilters({ difficulty: "hard", q: "  Alex  ", page: "3" }),
+    { difficulty: "hard", search: "Alex", page: 3 },
+  );
+  for (const page of ["-4", "0", "Infinity", "2.5", "no", ["2", "3"]]) {
+    assert.equal(leaderboardFilters({ page }).page, 1);
+  }
+  assert.equal(
+    leaderboardFilters({ difficulty: ["hard", "easy"] }).difficulty,
+    "all",
+  );
+  assert.equal(
+    leaderboardFilters({ difficulty: "creative" }).difficulty,
+    "all",
+  );
+  assert.equal(
+    leaderboardFilters({ q: "x".repeat(100), page: "2000000" }).search.length,
+    64,
+  );
+  assert.equal(leaderboardFilters({ page: "2000000" }).page, 1_000_000);
+});
+
+test("leaderboard navigation preserves and encodes player searches", () => {
+  const link = new URL(
+    leaderboardHref("normal", "Alex & %_", 3),
+    "https://minegeo.test",
+  );
+  assert.equal(link.searchParams.get("difficulty"), "normal");
+  assert.equal(link.searchParams.get("q"), "Alex & %_");
+  assert.equal(link.searchParams.get("page"), "3");
+  assert.equal(leaderboardHref("all"), "/leaderboard");
+  assert.equal(
+    new URL(leaderboardHref("easy", "Alex"), link).searchParams.has("page"),
+    false,
+  );
+});