# Leaderboard Page Redesign Brief

You are designing **one** mockup of the swamp.club leaderboard at `/leaderboard`. Your output is a single self-contained `.html` file viewable in a browser by `file://` (no build step). Nineteen other agents are exploring different directions in parallel — **make your design distinct**.

The home page, extensions page, extension detail page, and profile page have already been redesigned in a calmer, mostly-mono cyberpunk language. The leaderboard is the next surface — and it is the most rhetorically charged one. It is where swamp.club says, in public, *who counts* and *what counts*.

## The shape of the problem

Today the leaderboard is a single all-time list: rank, username, score, events, paginated. One scalar. One direction. One time scope. It rewards entrenchment, hides momentum, and gives a newcomer nothing to chase that isn't a wall.

We want **four parallel ladders** on this page:

| Ladder | Window | What it honors |
|--------|--------|----------------|
| **ALL-TIME** | Lifetime | Archaeology. The museum. Founders sit here forever. |
| **SEASON** | Current 90-day league | The game. Re-runnable. T15 belongs to whoever wins this season. |
| **WEEK** | Last 7 days | Current form. Who is shipping right now. |
| **TODAY** | Last 24h | Right-now energy. Heatcheck. Newcomers can be #1 today. |

Your design must surface **all four** somehow. Side-by-side columns, tabs, an interleaved switcher, a primary-with-rails layout, a stacked accordion, four cards in a 2×2, a horizontal ribbon of mini-ladders, a vertical "today→all-time" zoom — any of these is fair game. **Pick a stance.** Hedging by showing all four with equal weight is also a stance — but commit to it.

## The voices in your head

You have been assigned a subset of the five game designers in `static/game-designers/` (see your individual agent prompt for which). Read those files carefully. They disagree with each other. They are not a chorus — they are a set of stances. Your design is a **synthesis or selection** from your assigned voices, not a checklist of all their bullet points.

The panel's `_REPORT.md` is the ten-thousand-foot view. Read it for context. The convergent verdicts they hit on:

1. **Seasons are the single biggest unaddressed flaw.** (Bex/Marcus/Adrián) — this is why we have four windows now.
2. **Tiers should unlock capability, not labels.** (Bex/Lina/Adrián) — surface this if it serves your design.
3. **Retroactive policy is undocumented and load-bearing.** (Hannah) — silence is not a policy.
4. **One number can't honor four playstyles.** (Adrián) — the leaderboard collapses writer / ci-bot / hand-shipper / lab-contributor onto one scalar. Maybe your design doesn't.

Your designers may also push *against* the brief. If Lina is in your set, she will tell you that ranking the factory ruins it; if she dominates your design, the leaderboard should perhaps not be a contest at all — maybe it is a *record of building*. Be willing to listen.

## Constraints

- **Read first:** `~/git/swamp-crm/PHILOSOPHY.md` (the product principles), `~/git/swamp-club/scoring-design.md` (how scores are computed), `~/git/swamp-club/static/game-designers/_REPORT.md` (the panel's synthesis), and the specific designer files assigned to you. Your design should be answerable to those texts.
- **Standalone HTML.** Inline `<style>` and `<script>`. No external build. Tailwind CDN is OK; chart libraries are not — draw SVG by hand if you want graphs.
- **Fonts:** Orbitron (display), Chakra Petch (HUD/body), JetBrains Mono (data). Load from Google Fonts.
- **Color tokens** (use sparingly):
  - Background: `#0a0a0a` body, `#080808` / `rgba(0,0,0,0.4)` panels
  - Green primary: `#39ff14` / `#4ade80` / `#86efac`
  - Cyan accent: `#22d3ee` / `#67e8f9`
  - Magenta: `#ff00ff` / `#e879f9`
  - Amber: `#fbbf24` / `#f59e0b`
  - HUD-muted: `#9ca3af`, HUD-label: `#d1d5db`
- **No glitch noise on bulk content.** Glitch on the page title is fine; do not glitch table rows, ranks, scores, or charts.
- **Mock data:** Use the exact dataset in `_DATA.md`. Embed it inline. Do not invent additional operatives, scores, or fields.
- **Top-N only.** No search input. No "find me" form. The leaderboard is a display, not a directory. You may still highlight the **viewer** (`swamplord_42`, rank 14 all-time) if your design wants a "you are here" reticle.
- **One signature visual.** A leaderboard is mostly rows of names. Pick one moment in your design where the rows yield to a chart, a constellation, a tier ribbon, a histogram, a sparkline strip, a phase diagram — something that earns its weight. Don't make every section signature; make one.

## Information you have to work with

Per-row fields (see `_DATA.md` for exact values):

- `username`, `displayName`, `isFounder`, `memberSince`
- `score` (all-time canonical), `tier` (1–15), `tierName`
- `seasonScore`, `weekScore`, `dayScore` — points gained in each window
- `seasonRank`, `weekRank`, `dayRank` — rank within that window
- `prevSeasonRank` — rank delta from previous season
- `streak` (consecutive days signed in)
- `totalEvents`, `activeDaysLifetime`
- `extensionCount`, `writingCount`, `topPullsExtension` (string + pull count)
- `topBadge` (one badge string for compact display)
- `commCapeStatus` — Hannah's "comp cape": non-zero contribution across publish + writing + pull + streak + lab. `true`/`false`.

Population aggregates:

- `populationSize` (1248)
- `medianScore`, `p90Score`, `p99Score`
- `seasonStart`, `seasonEnd`, `seasonDayIndex` (which day of the 90-day league we're on)
- `now` (the wall-clock the dataset is anchored to)

Tier ladder (15 tiers) is in the data block. Use it for distance-to-next, tier bands on charts, etc.

## Deliverable

A single HTML file at `~/git/keeb.dev/app/leaderboard-design/<N>.html` where `<N>` is your assigned slot (1–20). At the very top of `<body>`, include this fixed banner:

```html
<div style="position:fixed;top:0;left:0;right:0;background:#000;color:#39ff14;font-family:monospace;font-size:11px;padding:6px 12px;border-bottom:1px solid #39ff14;z-index:9999;display:flex;justify-content:space-between;">
  <span>LEADERBOARD-MOCK / DESIGN N — &lt;short name&gt;</span>
  <a href="index.html" style="color:#22d3ee;">← back to index</a>
</div>
```

Replace `N` + short name with your assigned number + a 2–4 word label (e.g. "LEADERBOARD-MOCK / DESIGN 7 — Four Ladders Crossfade"). Add `padding-top: 36px` to the body so content isn't hidden behind it.

The file must work standalone via `file://`. No external imports beyond Google Fonts. Embed all data inline.

## Slot assignments (so you know what others are doing)

Each slot is assigned a subset of designers. Singles for purity, pairs for tension, triples/full panel for synthesis.

| N | Designer subset | Suggested center of gravity |
|--:|------------------|------------------------------|
|  1 | PoE                              | Transparency / infinite top / leagues |
|  2 | Diablo                           | Dopamine drops / seasonal mercy / power fantasy |
|  3 | RuneScape                        | Prestige-from-years / breadth / comp cape |
|  4 | WoW                              | The leaderboard *is* the game / parse culture / class roles |
|  5 | Satisfactory                     | The reward is the factory / anti-leaderboard |
|  6 | PoE + Diablo                     | Two voices on resets and chase items |
|  7 | PoE + RuneScape                  | Inspectability vs. the grind that stamps time |
|  8 | PoE + WoW                        | Public-data culture: poe.ninja meets WarcraftLogs |
|  9 | PoE + Satisfactory               | Transparency vs. "don't rank what you love" |
| 10 | Diablo + RuneScape               | Seasonal resets vs. prestige permanence |
| 11 | Diablo + WoW                     | The two competitive cultures fighting over what counts |
| 12 | Diablo + Satisfactory            | Loot-drop dopamine vs. the joy of the factory |
| 13 | RuneScape + WoW                  | Comp cape vs. cutting-edge title |
| 14 | RuneScape + Satisfactory         | Both long-haul voices — quiet, slow, deep |
| 15 | WoW + Satisfactory               | Parse culture vs. don't-rank-the-factory |
| 16 | PoE + Diablo + RuneScape         | Three takes on what a "level" means |
| 17 | PoE + WoW + RuneScape            | Transparency + parse culture + time-stamping |
| 18 | Diablo + WoW + Satisfactory      | The most contradictory trio |
| 19 | Diablo + RuneScape + Satisfactory| Loot vs. grind vs. don't-rank |
| 20 | All five                          | Full panel synthesis. The hardest brief. |

## What success looks like

- A stranger lands on the leaderboard and immediately reads: *who is winning right now, who is winning forever, and where do I fit*.
- The four windows (ALL-TIME / SEASON / WEEK / TODAY) don't feel like four separate tables glued together. They feel like four lenses on one population.
- The signature visual would not feel out of place pinned to a designer's wall.
- A reader of the game-designer panel could point to your design and say *that is what Adrián was talking about*, or *that is Lina pushing back on the brief*.
- Your design has a clear point of view. Don't hedge by including everything. The leaderboard is not a database dump — it is a verdict about what we honor.