Phase 3c (D): frontend polish pass — Metropolis design system

Aesthetic direction: a discreet old-world chess café crossed with a precise
digital instrument — brass, ink, felt, parchment, under warm light. Dark theme
with warm undertones, not cool neutrals.

Design system (base.html):
- Color tokens as CSS custom properties (--mp-bg, --mp-surface-1..3,
--mp-hairline/-2, --mp-ink/muted/faint/ghost, --mp-brass/bright/dim,
--mp-felt/bright, --mp-oxblood, --mp-ink-blue(-alt), --mp-rating-*)
- Typography: Fraunces (display serif w/ optical sizing + SOFT/WONK axes),
IBM Plex Sans (body), IBM Plex Mono (numerics / eyebrows)
- Utilities: .mp-display, .mp-italic, .mp-mono, .mp-eyebrow, .mp-hr, .mp-brass-rule
- Components: .mp-panel/.mp-panel-raised/.mp-framed (brass corner marks),
.mp-btn (brass/ghost/danger variants), .mp-chip, .mp-input, .mp-board-frame,
.conn-pill (live/retry/lost), .mp-livedot (breathing pulse)
- Motion: single choreographed .mp-enter + stagger slots (1/2/3),
custom --mp-ease cubic-bezier. No ambient animation.

Shared Jinja partials refreshed:
- _macros.html — rating/visibility/preset/state/result chips on new palette
- character_card.html — member-dossier card (portrait in brass frame +
metadata grid), not SaaS tile
- match_row.html — live/recent row with result chip + live dot

Pages polished:
- landing, login, settings — typographic hero, framed forms
- / (index), /discovery — eyebrow headers, brass rule, reused partials
- /matches/{id} (play) — board in double-ruled brass frame, thinking state
with live dot, inputs + chat bubbles on tokens, disconnect overlay as
oxblood-bordered modal
- /matches/{id}/watch — spectator variant with blue-accented crowd noise panel
- /matches/{id}/summary — payoff screen: "You won." as display italic,
memories italicised with brass left border, opponent note as margin quote
- /leaderboard/characters + /players — library-catalog tables, top-3 rank in
brass, current-user highlight on player leaderboard
- /characters/{id} (detail) — member-dossier header; hall of fame inherits
leaderboard treatment
- /players/{username} — dossier header + styled match rows
- /characters/new + /edit — brass submit, display header; form bodies left
on prior Phase 3a styling (see design_system.md "known gaps")

docs/design_system.md documents tokens, components, patterns, anti-patterns,
and per-page polish levels.

All 197 tests pass, 3 skipped (opt-in live). No functional regressions.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

app/web/templates/_partials/_macros.html

@@ -1,48 +1,50 @@
-{# Phase 3c: shared Jinja macros re-used across the character grid,
-   discovery page, leaderboards, and summary views. #}
+{# Phase 3c polish pass: shared Jinja macros. Tokens defined in base.html. #}
 
 {% macro rating_badge(r) -%}
   {% set val = r.value if r.value is defined else r %}
   {% if val == 'family' %}
-    <span class="text-[10px] uppercase tracking-wider bg-emerald-900/60 text-emerald-200 rounded px-1.5 py-0.5">Family</span>
+    <span class="mp-chip" style="background: var(--mp-rating-family-bg); color: var(--mp-rating-family);">Family</span>
   {% elif val == 'mature' %}
-    <span class="text-[10px] uppercase tracking-wider bg-amber-900/60 text-amber-200 rounded px-1.5 py-0.5">Mature</span>
+    <span class="mp-chip" style="background: var(--mp-rating-mature-bg); color: var(--mp-rating-mature);">Mature</span>
   {% elif val == 'unrestricted' %}
-    <span class="text-[10px] uppercase tracking-wider bg-rose-900/60 text-rose-200 rounded px-1.5 py-0.5">Unrestricted</span>
+    <span class="mp-chip" style="background: var(--mp-rating-unrestricted-bg); color: var(--mp-rating-unrestricted);">Unrestricted</span>
   {% endif %}
 {%- endmacro %}
 
 {% macro character_state_badge(s) -%}
   {% set val = s.value if s.value is defined else s %}
   {% if val == 'generating_memories' %}
-    <span class="text-[10px] uppercase tracking-wider bg-amber-900/60 text-amber-200 rounded px-1.5 py-0.5">Generating…</span>
+    <span class="mp-chip" style="background: rgba(201,166,107,0.12); color: var(--mp-brass-bright);">Generating</span>
   {% elif val == 'generation_failed' %}
-    <span class="text-[10px] uppercase tracking-wider bg-rose-900/60 text-rose-200 rounded px-1.5 py-0.5">Failed</span>
+    <span class="mp-chip" style="background: rgba(168,66,63,0.18); color: #E79E9B;">Failed</span>
   {% else %}
-    <span class="text-[10px] uppercase tracking-wider bg-emerald-900/60 text-emerald-200 rounded px-1.5 py-0.5">Ready</span>
+    <span class="mp-chip" style="background: rgba(47,107,92,0.14); color: var(--mp-felt-bright);">Ready</span>
   {% endif %}
 {%- endmacro %}
 
 {% macro visibility_badge(v) -%}
   {% set val = v.value if v.value is defined else v %}
   {% if val == 'private' %}
-    <span class="text-[10px] uppercase tracking-wider bg-neutral-700 text-neutral-200 rounded px-1.5 py-0.5">Private</span>
+    <span class="mp-chip" style="background: var(--mp-surface-3); color: var(--mp-ink-muted); border-color: var(--mp-hairline-2);">Private</span>
   {% endif %}
 {%- endmacro %}
 
+{% macro preset_badge() -%}
+  <span class="mp-chip" style="background: transparent; color: var(--mp-brass); border-color: var(--mp-brass-dim);">House</span>
+{%- endmacro %}
+
 {% macro result_chip(m) -%}
-  {# m is a MatchSummaryOut-ish thing: has .status and .result #}
   {% if m.status == 'in_progress' %}
-    <span class="text-[10px] uppercase tracking-wider bg-emerald-900/60 text-emerald-200 rounded px-1.5 py-0.5">Live</span>
+    <span class="mp-chip" style="background: rgba(79,164,141,0.12); color: var(--mp-felt-bright);"><span class="mp-livedot"></span>Live</span>
   {% elif m.status == 'abandoned' %}
-    <span class="text-[10px] uppercase tracking-wider bg-neutral-800 text-neutral-400 rounded px-1.5 py-0.5">Resigned</span>
+    <span class="mp-chip" style="background: var(--mp-surface-3); color: var(--mp-ink-faint); border-color: var(--mp-hairline-2);">Resigned</span>
   {% elif m.result == 'draw' %}
-    <span class="text-[10px] uppercase tracking-wider bg-sky-900/60 text-sky-200 rounded px-1.5 py-0.5">Draw</span>
+    <span class="mp-chip" style="background: rgba(88,121,163,0.14); color: var(--mp-ink-blue-alt);">Draw</span>
   {% elif m.result == 'white_win' %}
-    <span class="text-[10px] uppercase tracking-wider bg-indigo-900/60 text-indigo-200 rounded px-1.5 py-0.5">White</span>
+    <span class="mp-chip" style="background: rgba(237,228,206,0.12); color: var(--mp-ink);">White</span>
   {% elif m.result == 'black_win' %}
-    <span class="text-[10px] uppercase tracking-wider bg-indigo-900/60 text-indigo-200 rounded px-1.5 py-0.5">Black</span>
+    <span class="mp-chip" style="background: rgba(47,74,66,0.60); color: var(--mp-ink);">Black</span>
   {% else %}
-    <span class="text-[10px] uppercase tracking-wider bg-neutral-800 text-neutral-400 rounded px-1.5 py-0.5">—</span>
+    <span class="mp-chip" style="background: var(--mp-surface-3); color: var(--mp-ink-faint);">—</span>
   {% endif %}
 {%- endmacro %}

app/web/templates/_partials/character_card.html

@@ -1,30 +1,61 @@
-{# Character tile used on / and /discovery. Expects `c`, `player`, `owner_map` in scope. #}
-{% from "_partials/_macros.html" import rating_badge, character_state_badge, visibility_badge %}
+{# Character trading-card. Requires `c`, `player`, `owner_map` in scope.
+   Asymmetric composition: portrait panel on the left, dossier on the right. #}
+{% from "_partials/_macros.html" import rating_badge, character_state_badge, visibility_badge, preset_badge %}
 <a href="/characters/{{ c.id }}"
-   class="group rounded-xl border border-neutral-800 bg-neutral-900 hover:border-neutral-600 hover:bg-neutral-800/60 transition p-5 block">
-  <div class="flex items-start justify-between">
-    <div class="text-3xl">{{ c.avatar_emoji or "♟" }}</div>
-    <div class="flex items-center gap-2 flex-wrap justify-end">
-      {% if c.is_preset %}
-      <span class="text-[10px] uppercase tracking-wider bg-neutral-800 text-neutral-300 rounded px-1.5 py-0.5">Preset</span>
-      {% endif %}
-      {{ rating_badge(c.content_rating) }}
-      {{ visibility_badge(c.visibility) }}
-      {{ character_state_badge(c.state) }}
+   class="mp-panel-raised mp-framed group relative block rounded-sm transition"
+   style="padding: 1.1rem 1.2rem;">
+  <span class="mp-frame-tl"></span><span class="mp-frame-br"></span>
+
+  <div class="flex items-start gap-4">
+    {# Portrait panel — emoji inside a square brass frame. #}
+    <div class="shrink-0 w-14 h-14 flex items-center justify-center border border-[var(--mp-hairline-2)] bg-[var(--mp-surface-1)] rounded-sm text-3xl leading-none"
+         style="background-image: radial-gradient(60% 60% at 50% 40%, rgba(201,166,107,0.10), transparent 70%);">
+      <span class="block translate-y-[-1px]">{{ c.avatar_emoji or "♟" }}</span>
+    </div>
+
+    {# Dossier. #}
+    <div class="flex-1 min-w-0">
+      <div class="flex items-start justify-between gap-2 mb-1">
+        <h3 class="mp-display text-[20px] leading-tight text-[var(--mp-ink)] group-hover:text-[var(--mp-brass-bright)] transition">
+          {{ c.name }}
+        </h3>
+        <div class="flex items-center gap-1 flex-wrap justify-end shrink-0">
+          {% if c.is_preset %}{{ preset_badge() }}{% endif %}
+          {{ rating_badge(c.content_rating) }}
+          {{ visibility_badge(c.visibility) }}
+        </div>
+      </div>
+
+      <p class="text-[13px] text-[var(--mp-ink-muted)] mp-clamp-2 leading-snug">
+        {{ c.short_description }}
+      </p>
+
+      <div class="mt-3 flex items-center justify-between text-[11px] text-[var(--mp-ink-faint)]">
+        <span class="mp-mono">
+          {{ c.current_elo }} <span class="text-[var(--mp-ink-ghost)]">Elo</span>
+          {% if c.adaptive %} · <span class="text-[var(--mp-felt-bright)]">adaptive</span>{% endif %}
+        </span>
+        <span>
+          {% if c.is_preset %}
+            House character
+          {% elif player and c.owner_id == player.id %}
+            Your character
+          {% elif c.owner_id and owner_map and owner_map.get(c.owner_id) %}
+            <span class="mp-mono">@{{ owner_map[c.owner_id] }}</span>
+          {% endif %}
+        </span>
+      </div>
+
+      <div class="mt-2 flex items-center gap-3 text-[10px] text-[var(--mp-ink-faint)] mp-mono uppercase tracking-[0.1em]">
+        <span>agg {{ c.aggression }}</span>
+        <span class="text-[var(--mp-ink-ghost)]">·</span>
+        <span>risk {{ c.risk_tolerance }}</span>
+        <span class="text-[var(--mp-ink-ghost)]">·</span>
+        <span>pat {{ c.patience }}</span>
+        <span class="text-[var(--mp-ink-ghost)]">·</span>
+        <span>talk {{ c.trash_talk }}</span>
+        <span class="ml-auto">{{ character_state_badge(c.state) }}</span>
+      </div>
     </div>
-  </div>
-  <div class="mt-3">
-    <div class="text-lg font-semibold group-hover:text-white">{{ c.name }}</div>
-    <div class="text-sm text-neutral-400 mt-1 line-clamp-3">{{ c.short_description }}</div>
-  </div>
-  <div class="mt-3 text-xs text-neutral-500">
-    {% if c.is_preset %}System character
-    {% elif player and c.owner_id == player.id %}Your character
-    {% elif c.owner_id and owner_map and owner_map.get(c.owner_id) %}@{{ owner_map[c.owner_id] }}'s character
-    {% endif %}
-  </div>
-  <div class="mt-4 flex items-center justify-between text-xs text-neutral-500">
-    <span>Target {{ c.target_elo }} Elo{% if c.adaptive %} · adaptive{% endif %}</span>
-    <span>agg {{ c.aggression }} · risk {{ c.risk_tolerance }} · pat {{ c.patience }} · talk {{ c.trash_talk }}</span>
   </div>
 </a>

app/web/templates/_partials/match_row.html

@@ -2,27 +2,32 @@
 {% from "_partials/_macros.html" import result_chip %}
 {% set href = '/matches/' + m.match_id + '/watch' if m.status == 'in_progress' else '/matches/' + m.match_id + '/summary' %}
 <a href="{{ href }}"
-   class="flex items-center gap-4 rounded-lg border border-neutral-800 bg-neutral-900 hover:border-neutral-600 hover:bg-neutral-800/60 transition px-4 py-3">
-  <div class="text-2xl">{{ m.character_avatar }}</div>
+   class="mp-panel-raised group flex items-center gap-4 rounded-sm transition relative"
+   style="padding: 0.9rem 1rem;">
+  <div class="shrink-0 w-11 h-11 flex items-center justify-center border border-[var(--mp-hairline-2)] bg-[var(--mp-surface-1)] rounded-sm text-xl leading-none">
+    {{ m.character_avatar }}
+  </div>
   <div class="flex-1 min-w-0">
-    <div class="flex items-center gap-2">
-      <div class="font-medium truncate">{{ m.character_name }}</div>
+    <div class="flex items-center gap-2 flex-wrap">
+      <span class="mp-display text-[17px] text-[var(--mp-ink)] truncate group-hover:text-[var(--mp-brass-bright)] transition">{{ m.character_name }}</span>
       {{ result_chip(m) }}
     </div>
-    <div class="text-xs text-neutral-500 truncate">
-      vs. @{{ m.player_username }} · move {{ m.move_count }}
+    <div class="text-[11px] text-[var(--mp-ink-faint)] truncate mt-1 mp-mono uppercase tracking-[0.1em]">
+      vs <span class="text-[var(--mp-ink-muted)] normal-case tracking-normal">@{{ m.player_username }}</span>
+      <span class="text-[var(--mp-ink-ghost)]"> · </span>
+      move {{ m.move_count }}
       {% if m.status == 'in_progress' %}
-        · started {{ m.started_at.strftime('%H:%M') }}
+        <span class="text-[var(--mp-ink-ghost)]"> · </span>started {{ m.started_at.strftime('%H:%M') }}
       {% elif m.ended_at %}
-        · ended {{ m.ended_at.strftime('%Y-%m-%d %H:%M') }}
+        <span class="text-[var(--mp-ink-ghost)]"> · </span>{{ m.ended_at.strftime('%Y-%m-%d %H:%M') }}
       {% endif %}
     </div>
   </div>
-  <div class="text-xs text-neutral-500">
+  <div class="text-[11px] text-[var(--mp-ink-faint)] mp-mono uppercase tracking-[0.15em] shrink-0">
     {% if m.status == 'in_progress' %}
-      <span class="text-emerald-300">Watch →</span>
+      <span class="text-[var(--mp-brass)] group-hover:text-[var(--mp-brass-bright)]">Watch ›</span>
     {% else %}
-      <span class="text-neutral-400">Summary →</span>
+      <span class="group-hover:text-[var(--mp-ink)]">Summary ›</span>
     {% endif %}
   </div>
 </a>

app/web/templates/base.html

@@ -5,38 +5,284 @@
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>{% block title %}Metropolis Chess Club{% endblock %}</title>
   <script src="https://cdn.tailwindcss.com"></script>
+
+  {# Typography: Fraunces (display serif) + IBM Plex Sans (body) + IBM Plex Mono (numerics). #}
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght,SOFT,WONK@0,9..144,300..800,0..100,0..1;1,9..144,300..800,0..100,0..1&family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;0,600;1,400&family=IBM+Plex+Mono:wght@400;500;600&display=swap" rel="stylesheet" />
+
+  <style>
+    /* =========================================================
+       Metropolis design system — Phase 3c polish pass.
+       Established in base.html so every page inherits automatically.
+       Token names are documented in docs/design_system.md.
+       ========================================================= */
+    :root {
+      /* Surface palette — felt + parchment + brass under low light. */
+      --mp-bg:         #0F1412;  /* deep green-black (felt in shadow)      */
+      --mp-surface-1:  #151B19;  /* primary panel                          */
+      --mp-surface-2:  #1C2320;  /* raised card                            */
+      --mp-surface-3:  #232A27;  /* hover lift                             */
+      --mp-hairline:   #2E3430;  /* subtle border                          */
+      --mp-hairline-2: #3A4038;  /* stronger border                        */
+
+      /* Ink — warm off-whites, not cool greys. */
+      --mp-ink:        #EDE4CE;  /* primary text (parchment)               */
+      --mp-ink-muted:  #B5AD96;  /* secondary text                         */
+      --mp-ink-faint:  #7F7966;  /* captions, metadata                     */
+      --mp-ink-ghost:  #4C483E;  /* placeholders                           */
+
+      /* Metals & felt — the accent system. */
+      --mp-brass:         #C9A66B;  /* primary accent                      */
+      --mp-brass-bright:  #E0C38F;  /* emphasis / live-state               */
+      --mp-brass-dim:     #8E7649;  /* borders under brass elements        */
+      --mp-felt:          #2F6B5C;  /* success / in-progress               */
+      --mp-felt-bright:   #4FA48D;
+      --mp-oxblood:       #A8423F;  /* resign / danger                     */
+      --mp-ink-blue:      #5879A3;  /* cool secondary — chat, spectators   */
+      --mp-ink-blue-alt:  #8DA4C3;
+
+      /* Rating chips — keep the semantic mapping from Phase 3a, but warmer. */
+      --mp-rating-family:       #4FA48D;
+      --mp-rating-family-bg:    rgba(47, 107, 92, 0.20);
+      --mp-rating-mature:       #C9A66B;
+      --mp-rating-mature-bg:    rgba(201, 166, 107, 0.16);
+      --mp-rating-unrestricted: #B45A56;
+      --mp-rating-unrestricted-bg: rgba(168, 66, 63, 0.22);
+
+      /* Motion. */
+      --mp-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
+    }
+
+    html, body { background: var(--mp-bg); color: var(--mp-ink); }
+    body {
+      font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif;
+      font-weight: 400;
+      -webkit-font-smoothing: antialiased;
+      text-rendering: optimizeLegibility;
+      /* Subtle paper-grain on the whole canvas. Keeps large dark areas from
+         looking flat under warm lighting. */
+      background-image:
+        radial-gradient(1200px 600px at 80% -10%, rgba(201, 166, 107, 0.06), transparent 60%),
+        radial-gradient(900px 500px at 10% 120%, rgba(47, 107, 92, 0.05), transparent 60%);
+      background-attachment: fixed;
+    }
+
+    /* Display type — serif with optical sizing and subtle WONK axis for character. */
+    .mp-display {
+      font-family: 'Fraunces', 'Times New Roman', serif;
+      font-optical-sizing: auto;
+      font-variation-settings: 'opsz' 48, 'SOFT' 30, 'WONK' 1;
+      letter-spacing: -0.01em;
+    }
+    .mp-display-tight { letter-spacing: -0.02em; }
+    .mp-italic { font-style: italic; font-variation-settings: 'opsz' 48, 'SOFT' 60, 'WONK' 1; }
+    .mp-mono  { font-family: 'IBM Plex Mono', ui-monospace, monospace; }
+
+    /* Eyebrow / uppercase label used across pages. */
+    .mp-eyebrow {
+      font-family: 'IBM Plex Mono', ui-monospace, monospace;
+      font-size: 10px;
+      letter-spacing: 0.18em;
+      text-transform: uppercase;
+      color: var(--mp-ink-faint);
+    }
+
+    /* Hairline rules — used sparingly, never Tailwind's default. */
+    .mp-hr { height: 1px; background: var(--mp-hairline); border: 0; }
+    .mp-hr-strong { height: 1px; background: var(--mp-hairline-2); border: 0; }
+
+    /* Brass corner marks — decorative, applied via .mp-framed on any container. */
+    .mp-framed { position: relative; }
+    .mp-framed::before, .mp-framed::after,
+    .mp-framed > .mp-frame-tl, .mp-framed > .mp-frame-br {
+      content: ''; position: absolute; width: 10px; height: 10px; pointer-events: none;
+    }
+    .mp-framed::before { /* top-right */
+      top: -1px; right: -1px;
+      border-top: 1px solid var(--mp-brass); border-right: 1px solid var(--mp-brass);
+    }
+    .mp-framed::after { /* bottom-left */
+      bottom: -1px; left: -1px;
+      border-bottom: 1px solid var(--mp-brass); border-left: 1px solid var(--mp-brass);
+    }
+    .mp-frame-tl {
+      top: -1px; left: -1px;
+      border-top: 1px solid var(--mp-brass); border-left: 1px solid var(--mp-brass);
+    }
+    .mp-frame-br {
+      bottom: -1px; right: -1px;
+      border-bottom: 1px solid var(--mp-brass); border-right: 1px solid var(--mp-brass);
+    }
+
+    /* Panel — the workhorse container (cards, tables, list rows). */
+    .mp-panel {
+      background: var(--mp-surface-1);
+      border: 1px solid var(--mp-hairline);
+    }
+    .mp-panel-raised {
+      background: var(--mp-surface-2);
+      border: 1px solid var(--mp-hairline);
+    }
+    .mp-panel-raised:hover {
+      background: var(--mp-surface-3);
+      border-color: var(--mp-hairline-2);
+    }
+
+    /* Button primitives. */
+    .mp-btn {
+      display: inline-flex; align-items: center; gap: 0.5rem;
+      font-family: 'IBM Plex Sans', sans-serif;
+      font-weight: 500; font-size: 13px;
+      padding: 0.45rem 0.85rem;
+      border-radius: 2px;
+      border: 1px solid transparent;
+      transition: background 180ms var(--mp-ease), border-color 180ms var(--mp-ease), color 180ms var(--mp-ease);
+      cursor: pointer;
+    }
+    .mp-btn-brass {
+      background: linear-gradient(180deg, #D5B579 0%, #A78248 100%);
+      color: #1A140A;
+      border-color: #7D5E32;
+      box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 1px 0 rgba(0,0,0,0.2);
+    }
+    .mp-btn-brass:hover { background: linear-gradient(180deg, #E4C48B 0%, #B48F56 100%); }
+    .mp-btn-ghost {
+      background: transparent; color: var(--mp-ink-muted); border-color: var(--mp-hairline-2);
+    }
+    .mp-btn-ghost:hover { color: var(--mp-ink); border-color: var(--mp-brass-dim); }
+    .mp-btn-danger {
+      background: rgba(168, 66, 63, 0.12); color: #E79E9B; border-color: rgba(168, 66, 63, 0.5);
+    }
+    .mp-btn-danger:hover { background: rgba(168, 66, 63, 0.2); color: #F3BEBB; }
+
+    /* Chips (rating / status / result). */
+    .mp-chip {
+      display: inline-flex; align-items: center;
+      font-family: 'IBM Plex Mono', monospace;
+      font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
+      padding: 2px 8px; border-radius: 2px;
+      border: 1px solid transparent;
+    }
+
+    /* Live-state dot — breathes once a second. */
+    .mp-livedot {
+      display: inline-block; width: 6px; height: 6px; border-radius: 50%;
+      background: var(--mp-felt-bright);
+      box-shadow: 0 0 0 0 rgba(79, 164, 141, 0.65);
+      animation: mp-pulse 2s infinite;
+      margin-right: 6px;
+    }
+    @keyframes mp-pulse {
+      0%   { box-shadow: 0 0 0 0 rgba(79, 164, 141, 0.6); }
+      70%  { box-shadow: 0 0 0 6px rgba(79, 164, 141, 0); }
+      100% { box-shadow: 0 0 0 0 rgba(79, 164, 141, 0); }
+    }
+
+    /* Page entry choreography — staggered fade-up on first render only. */
+    @keyframes mp-enter {
+      from { opacity: 0; transform: translateY(8px); }
+      to   { opacity: 1; transform: translateY(0); }
+    }
+    .mp-enter { animation: mp-enter 520ms var(--mp-ease) both; }
+    .mp-enter-1 { animation-delay: 40ms; }
+    .mp-enter-2 { animation-delay: 120ms; }
+    .mp-enter-3 { animation-delay: 200ms; }
+
+    /* Forms — inputs feel like engraved fields. */
+    .mp-input {
+      font-family: 'IBM Plex Sans', sans-serif;
+      background: var(--mp-bg);
+      color: var(--mp-ink);
+      border: 1px solid var(--mp-hairline-2);
+      border-radius: 2px;
+      padding: 0.5rem 0.75rem;
+      font-size: 14px;
+      outline: none;
+      transition: border-color 140ms var(--mp-ease);
+    }
+    .mp-input:focus { border-color: var(--mp-brass); }
+    .mp-input::placeholder { color: var(--mp-ink-ghost); }
+
+    /* Chat bubble variants (used by play.html + watch.html). */
+    .chat-bubble-agent {
+      background: linear-gradient(180deg, rgba(47,107,92,0.18), rgba(47,107,92,0.06));
+      border-left: 2px solid var(--mp-felt-bright);
+      padding: 10px 14px; border-radius: 2px;
+    }
+    .chat-bubble-player {
+      background: linear-gradient(180deg, rgba(201,166,107,0.14), rgba(201,166,107,0.05));
+      border-left: 2px solid var(--mp-brass);
+      margin-left: 1.5rem;
+      padding: 10px 14px; border-radius: 2px;
+    }
+    .chat-bubble-player.in-transit { opacity: 0.55; }
+    .chat-bubble-spectator {
+      background: rgba(88, 121, 163, 0.10);
+      border-left: 2px solid var(--mp-ink-blue);
+      padding: 10px 14px; border-radius: 2px;
+    }
+    .chat-bubble-spectator.in-transit { opacity: 0.55; }
+
+    /* Chessboard.js colour overrides — felt tint. */
+    .white-1e1d7 { background-color: #EDE4CE !important; }
+    .black-3c85d { background-color: #2F4A42 !important; }
+
+    /* Utility: thin brass rule for section separators. */
+    .mp-brass-rule {
+      height: 1px;
+      background: linear-gradient(90deg, transparent, var(--mp-brass-dim) 20%, var(--mp-brass-dim) 80%, transparent);
+    }
+
+    /* Connection pill states — reused across play/watch. */
+    .conn-pill {
+      display: inline-flex; align-items: center; gap: 6px;
+      font-family: 'IBM Plex Mono', monospace;
+      font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
+      padding: 3px 8px; border-radius: 2px; border: 1px solid transparent;
+    }
+    .conn-live   { background: rgba(79,164,141,0.12); color: var(--mp-felt-bright);  border-color: rgba(79,164,141,0.35); }
+    .conn-retry  { background: rgba(201,166,107,0.10); color: var(--mp-brass-bright); border-color: rgba(201,166,107,0.35); }
+    .conn-lost   { background: rgba(168,66,63,0.15); color: #E79E9B; border-color: rgba(168,66,63,0.45); }
+
+    /* Line-clamp utility — Tailwind's ships via plugin we don't load here. */
+    .mp-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
+    .mp-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
+  </style>
+
   {% block head_extra %}{% endblock %}
 </head>
-<body class="min-h-screen bg-neutral-950 text-neutral-100">
-  <header class="border-b border-neutral-800 bg-neutral-900/60 backdrop-blur">
+<body class="min-h-screen">
+  <header class="border-b border-[var(--mp-hairline)] bg-[var(--mp-surface-1)]/70 backdrop-blur-sm">
     <div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
-      <a href="/" class="text-xl font-semibold tracking-wide">
-        <span class="mr-2">♟</span>Metropolis Chess Club
+      <a href="/" class="flex items-center gap-3 group">
+        {# Monogram M framed in brass — small but intentional. #}
+        <span class="inline-flex items-center justify-center w-8 h-8 rounded-sm border border-[var(--mp-brass-dim)] text-[var(--mp-brass)] mp-display text-lg group-hover:border-[var(--mp-brass)] group-hover:text-[var(--mp-brass-bright)] transition">
+          M
+        </span>
+        <span class="mp-display text-[19px] tracking-tight">Metropolis <span class="mp-italic text-[var(--mp-ink-muted)]">Chess Club</span></span>
       </a>
-      <nav class="text-sm text-neutral-300 space-x-4 flex items-center">
+      <nav class="text-[13px] text-[var(--mp-ink-muted)] space-x-5 flex items-center">
         {% if player %}
-        <a href="/" class="hover:text-white">Characters</a>
-        <a href="/discovery" class="hover:text-white">Discovery</a>
-        <a href="/leaderboard/characters" class="hover:text-white">Leaderboard</a>
-        <a href="/characters/new" class="rounded bg-emerald-500 px-3 py-1.5 font-medium text-neutral-900 hover:bg-emerald-400">
-          + New character
+        <a href="/" class="hover:text-[var(--mp-ink)] transition">Characters</a>
+        <a href="/discovery" class="hover:text-[var(--mp-ink)] transition">Discovery</a>
+        <a href="/leaderboard/characters" class="hover:text-[var(--mp-ink)] transition">Leaderboard</a>
+        <a href="/characters/new" class="mp-btn mp-btn-brass">+ New character</a>
+        <a href="/settings" class="hover:text-[var(--mp-ink)] transition" title="Settings (@{{ player.username }})">
+          <span class="mp-mono text-[12px]">@{{ player.username }}</span>
         </a>
-        <a href="/settings" class="hover:text-white" title="Settings (@{{ player.username }})">
-          @{{ player.username }}
-        </a>
-        <a href="/logout" class="text-neutral-400 hover:text-white">Logout</a>
+        <a href="/logout" class="text-[var(--mp-ink-faint)] hover:text-[var(--mp-ink)] text-[12px]">Logout</a>
         {% else %}
-        <a href="/login" class="rounded bg-emerald-500 px-3 py-1.5 font-medium text-neutral-900 hover:bg-emerald-400">
-          Log in
-        </a>
+        <a href="/login" class="mp-btn mp-btn-brass">Log in</a>
         {% endif %}
       </nav>
     </div>
   </header>
+
   {% block flash %}
     {% if request.query_params.get('flash') %}
     <div class="max-w-6xl mx-auto px-6 pt-4">
-      <div class="rounded border border-emerald-900/80 bg-emerald-950/40 p-3 text-sm text-emerald-200">
+      <div class="rounded-sm border border-[rgba(47,107,92,0.4)] bg-[rgba(47,107,92,0.10)] p-3 text-sm text-[var(--mp-felt-bright)]">
         {% set fkey = request.query_params.get('flash') %}
         {% set fuser = request.query_params.get('u') %}
         {% if fkey == 'welcome' %}Welcome, @{{ fuser }}. Your account was created.
@@ -49,11 +295,14 @@
     </div>
     {% endif %}
   {% endblock %}
-  <main class="max-w-6xl mx-auto px-6 py-8">
+
+  <main class="max-w-6xl mx-auto px-6 py-10">
     {% block content %}{% endblock %}
   </main>
-  <footer class="max-w-6xl mx-auto px-6 py-8 text-center text-xs text-neutral-500">
-    Metropolis Chess Club — Phase 3a: username login, character ownership, content rating.
+
+  <footer class="max-w-6xl mx-auto px-6 py-10 text-center">
+    <div class="mp-brass-rule mb-6"></div>
+    <div class="mp-eyebrow">Metropolis Chess Club · Phase 3c · est. 2026</div>
   </footer>
 </body>
 </html>

app/web/templates/detail.html

@@ -9,75 +9,61 @@
 {% endblock %}
 
 {% block content %}
-{% macro rating_badge(r) %}
-  {% set val = r.value if r.value is defined else r %}
-  {% if val == 'family' %}
-    <span class="text-[10px] uppercase tracking-wider bg-emerald-900/60 text-emerald-200 rounded px-1.5 py-0.5">Family</span>
-  {% elif val == 'mature' %}
-    <span class="text-[10px] uppercase tracking-wider bg-amber-900/60 text-amber-200 rounded px-1.5 py-0.5">Mature</span>
-  {% elif val == 'unrestricted' %}
-    <span class="text-[10px] uppercase tracking-wider bg-rose-900/60 text-rose-200 rounded px-1.5 py-0.5">Unrestricted</span>
-  {% endif %}
-{% endmacro %}
+{% from "_partials/_macros.html" import rating_badge, visibility_badge, preset_badge, character_state_badge %}
 
-<div class="flex items-start gap-6">
-  <div class="text-6xl">{{ character.avatar_emoji or "♟" }}</div>
+<div class="flex items-start gap-6 mp-enter mp-enter-1">
+  <div class="shrink-0 w-20 h-20 flex items-center justify-center border border-[var(--mp-brass-dim)] bg-[var(--mp-surface-2)] rounded-sm text-5xl leading-none">
+    {{ character.avatar_emoji or "♟" }}
+  </div>
   <div class="flex-1">
-    <div class="flex items-center gap-3 flex-wrap">
-      <h1 class="text-3xl font-semibold">{{ character.name }}</h1>
-      {% if character.is_preset %}
-      <span class="text-[10px] uppercase tracking-wider bg-neutral-800 text-neutral-300 rounded px-1.5 py-0.5">Preset</span>
-      {% endif %}
+    <div class="mp-eyebrow mb-2">Character dossier</div>
+    <div class="flex items-center gap-2 flex-wrap">
+      <h1 class="mp-display text-[36px] leading-[1] tracking-tight">{{ character.name }}</h1>
+      {% if character.is_preset %}{{ preset_badge() }}{% endif %}
       {{ rating_badge(character.content_rating) }}
-      {% if character.visibility.value == 'private' %}
-      <span class="text-[10px] uppercase tracking-wider bg-neutral-700 text-neutral-200 rounded px-1.5 py-0.5">Private</span>
-      {% endif %}
+      {{ visibility_badge(character.visibility) }}
       {% if is_generating %}
-      <span class="text-xs bg-amber-900/60 text-amber-200 rounded px-2 py-0.5 animate-pulse">Generating memories…</span>
+        <span class="mp-chip" style="background: rgba(201,166,107,0.14); color: var(--mp-brass-bright);"><span class="mp-livedot" style="background: var(--mp-brass-bright); box-shadow: 0 0 0 0 rgba(201,166,107,0.55);"></span>Generating</span>
       {% elif is_failed %}
-      <span class="text-xs bg-rose-900/60 text-rose-200 rounded px-2 py-0.5">Generation failed</span>
-      {% else %}
-      <span class="text-xs bg-emerald-900/60 text-emerald-200 rounded px-2 py-0.5">Ready</span>
+        <span class="mp-chip" style="background: rgba(168,66,63,0.2); color: #E79E9B;">Generation failed</span>
       {% endif %}
     </div>
-    <p class="text-neutral-300 mt-1">{{ character.short_description }}</p>
-    <div class="mt-1 text-xs text-neutral-500">
-      {% if character.is_preset %}
-        System character
-      {% elif is_owner %}
-        Your character
-      {% elif owner_username %}
-        @{{ owner_username }}'s character
+    <p class="text-[14px] text-[var(--mp-ink-muted)] mt-2">{{ character.short_description }}</p>
+    <div class="mt-2 text-[11px] text-[var(--mp-ink-faint)] mp-mono uppercase tracking-[0.12em]">
+      {% if character.is_preset %}House character
+      {% elif is_owner %}Your character
+      {% elif owner_username %}@{{ owner_username }}'s character
       {% endif %}
     </div>
-    <div class="mt-3 text-sm text-neutral-400">
-      <span>Current {{ character.current_elo }} / floor {{ character.floor_elo }} / max {{ character.max_elo }} Elo</span>
-      {% if character.adaptive %} · <span>adaptive</span>{% endif %}
-      {% if character.voice_descriptor %} · <span class="italic">{{ character.voice_descriptor }}</span>{% endif %}
+    <div class="mt-4 text-[12px] text-[var(--mp-ink-muted)] mp-mono">
+      <span class="text-[var(--mp-ink-faint)]">Current</span> {{ character.current_elo }}
+      <span class="text-[var(--mp-ink-ghost)] mx-1">·</span>
+      <span class="text-[var(--mp-ink-faint)]">floor</span> {{ character.floor_elo }}
+      <span class="text-[var(--mp-ink-ghost)] mx-1">·</span>
+      <span class="text-[var(--mp-ink-faint)]">max</span> {{ character.max_elo }}
+      {% if character.adaptive %}<span class="text-[var(--mp-ink-ghost)] mx-1">·</span><span style="color: var(--mp-felt-bright);">adaptive</span>{% endif %}
     </div>
+    {% if character.voice_descriptor %}
+    <div class="mt-2 text-[13px] mp-display italic text-[var(--mp-ink-muted)]">"{{ character.voice_descriptor }}"</div>
+    {% endif %}
   </div>
-  <div class="flex flex-col gap-2 items-end">
+  <div class="flex flex-col gap-2 items-end shrink-0">
     {% if not is_generating %}
     <form method="post" action="/play/{{ character.id }}">
-      <button class="rounded bg-emerald-500 px-5 py-2 font-medium text-neutral-900 hover:bg-emerald-400">
-        ▶ Play
-      </button>
+      <button class="mp-btn mp-btn-brass" style="padding: 0.65rem 1.4rem; font-size: 14px;">▶ Play</button>
     </form>
     {% endif %}
     {% if is_owner and not character.is_preset %}
-    <div class="flex gap-2 text-xs">
-      <a href="/characters/{{ character.id }}/edit"
-         class="rounded border border-neutral-700 text-neutral-200 px-3 py-1 hover:bg-neutral-800">Edit</a>
+    <div class="flex gap-2">
+      <a href="/characters/{{ character.id }}/edit" class="mp-btn mp-btn-ghost">Edit</a>
       <form method="post" action="/characters/{{ character.id }}/delete"
             onsubmit="return confirm('Delete {{ character.name }}? This is a soft delete.');">
-        <button class="rounded border border-rose-800 text-rose-300 px-3 py-1 hover:bg-rose-950">Delete</button>
+        <button class="mp-btn mp-btn-danger">Delete</button>
       </form>
     </div>
     {% elif not is_owner %}
     <form method="post" action="/characters/{{ character.id }}/clone">
-      <button class="text-xs rounded border border-neutral-700 text-neutral-200 px-3 py-1 hover:bg-neutral-800">
-        Clone
-      </button>
+      <button class="mp-btn mp-btn-ghost">Clone</button>
     </form>
     {% endif %}
   </div>

app/web/templates/discovery.html

@@ -3,61 +3,63 @@
 {% block title %}Discovery — Metropolis Chess Club{% endblock %}
 
 {% block content %}
-<div class="flex items-end justify-between mb-6">
+<div class="flex items-end justify-between mb-10 mp-enter mp-enter-1">
   <div>
-    <h1 class="text-2xl font-semibold">Discovery</h1>
-    <p class="text-sm text-neutral-400">Live matches right now, recent finishes, and every character you can play.</p>
+    <div class="mp-eyebrow mb-2">The floor tonight</div>
+    <h1 class="mp-display text-[44px] leading-[0.95] tracking-tight">Discovery</h1>
+    <p class="text-[14px] text-[var(--mp-ink-muted)] mt-3 max-w-lg">
+      Live matches right now, recent finishes, and every character you can play.
+    </p>
   </div>
-  <div class="flex items-center gap-3 text-sm">
-    <a href="/leaderboard/characters" class="text-neutral-400 hover:text-white">Leaderboards →</a>
+  <div class="text-right">
+    <a href="/leaderboard/characters" class="mp-btn mp-btn-ghost">
+      Leaderboards
+      <span class="text-[var(--mp-brass)]">›</span>
+    </a>
   </div>
 </div>
 
-<section class="mb-10">
-  <div class="flex items-center justify-between mb-3">
-    <h2 class="text-sm uppercase tracking-wider text-neutral-400">Live right now</h2>
-    <span class="text-xs text-neutral-500">{{ live_matches|length }} match{{ '' if live_matches|length == 1 else 'es' }}</span>
+<section class="mb-12 mp-enter mp-enter-2">
+  <div class="flex items-baseline justify-between mb-4">
+    <h2 class="mp-eyebrow">Live right now</h2>
+    <span class="mp-mono text-[11px] text-[var(--mp-ink-faint)]">{{ live_matches|length }} match{{ '' if live_matches|length == 1 else 'es' }}</span>
   </div>
   {% if live_matches %}
   <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
-    {% for m in live_matches %}
-      {% include "_partials/match_row.html" %}
-    {% endfor %}
+    {% for m in live_matches %}{% include "_partials/match_row.html" %}{% endfor %}
   </div>
   {% else %}
-  <div class="rounded-lg border border-neutral-800 bg-neutral-900 px-4 py-8 text-center text-sm text-neutral-500">
-    No live matches right now. Start your own below.
+  <div class="mp-panel rounded-sm px-4 py-10 text-center">
+    <div class="mp-display italic text-[var(--mp-ink-faint)] text-lg">Quiet floor.</div>
+    <div class="text-[13px] text-[var(--mp-ink-faint)] mt-1">Start your own match below.</div>
   </div>
   {% endif %}
 </section>
 
-<section class="mb-10">
-  <div class="flex items-center justify-between mb-3">
-    <h2 class="text-sm uppercase tracking-wider text-neutral-400">Recently finished</h2>
+<section class="mb-12 mp-enter mp-enter-3">
+  <div class="flex items-baseline justify-between mb-4">
+    <h2 class="mp-eyebrow">Recently finished</h2>
   </div>
   {% if recent_matches %}
   <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
-    {% for m in recent_matches %}
-      {% include "_partials/match_row.html" %}
-    {% endfor %}
+    {% for m in recent_matches %}{% include "_partials/match_row.html" %}{% endfor %}
   </div>
   {% else %}
-  <div class="rounded-lg border border-neutral-800 bg-neutral-900 px-4 py-8 text-center text-sm text-neutral-500">
+  <div class="mp-panel rounded-sm px-4 py-10 text-center text-sm text-[var(--mp-ink-faint)]">
     Nothing finished yet.
   </div>
   {% endif %}
 </section>
 
-<section>
-  <div class="flex items-center justify-between mb-3">
-    <h2 class="text-sm uppercase tracking-wider text-neutral-400">Characters to play</h2>
-    <a href="/characters/new" class="text-xs text-emerald-400 hover:underline">+ New character</a>
+<section class="mp-enter mp-enter-3">
+  <div class="flex items-baseline justify-between mb-4">
+    <h2 class="mp-eyebrow">Characters to play</h2>
+    <a href="/characters/new" class="text-[11px] mp-mono uppercase tracking-[0.15em] text-[var(--mp-brass)] hover:text-[var(--mp-brass-bright)]">+ New character</a>
   </div>
   <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
-    {% for c in characters %}
-      {% include "_partials/character_card.html" %}
+    {% for c in characters %}{% include "_partials/character_card.html" %}
     {% else %}
-    <div class="col-span-full text-center py-8 text-neutral-500">
+    <div class="col-span-full text-center py-10 text-[var(--mp-ink-faint)]">
       No characters available at your content rating.
     </div>
     {% endfor %}

app/web/templates/edit.html

@@ -3,7 +3,8 @@
 {% block title %}Edit {{ character.name }} — Metropolis Chess Club{% endblock %}
 
 {% block content %}
-<h1 class="text-2xl font-semibold mb-1">Edit {{ character.name }}</h1>
+<div class="mp-eyebrow mb-2">Revising</div>
+<h1 class="mp-display text-[36px] leading-[1] tracking-tight mb-2">Edit {{ character.name }}</h1>
 <p class="text-sm text-neutral-400 mb-6">
   Editing the backstory does <strong>not</strong> regenerate memories — that's a destructive
   operation. If you change the backstory meaningfully and want memories to match, run
@@ -103,7 +104,7 @@
   </div>
 
   <div class="pt-2">
-    <button class="rounded bg-emerald-500 px-5 py-2 font-medium text-neutral-900 hover:bg-emerald-400">
+    <button class="mp-btn mp-btn-brass" style="padding: 0.6rem 1.2rem;">
       Save
     </button>
     <a href="/characters/{{ character.id }}" class="ml-3 text-sm text-neutral-400 hover:text-white">Cancel</a>

app/web/templates/index.html

@@ -1,23 +1,30 @@
 {% extends "base.html" %}
 
 {% block content %}
-<div class="flex items-end justify-between mb-6">
+<div class="flex items-end justify-between mb-10 mp-enter mp-enter-1">
   <div>
-    <h1 class="text-2xl font-semibold">Characters</h1>
-    <p class="text-sm text-neutral-400">Pick one to inspect, or create your own opponent.</p>
+    <div class="mp-eyebrow mb-2">Members' roster</div>
+    <h1 class="mp-display text-[44px] leading-[0.95] tracking-tight">Characters</h1>
+    <p class="text-[14px] text-[var(--mp-ink-muted)] mt-3 max-w-md">
+      Pick one to inspect, or create your own opponent. Each has a backstory, a voice,
+      and a running Elo — they remember what happened last time.
+    </p>
   </div>
-  <a href="/discovery"
-     class="text-sm rounded-lg border border-indigo-700/70 bg-indigo-950/30 hover:bg-indigo-900/40 text-indigo-200 px-3 py-2 font-medium">
-    Browse live matches →
+  <a href="/discovery" class="mp-btn mp-btn-ghost shrink-0">
+    Browse live matches
+    <span class="text-[var(--mp-brass)]">›</span>
   </a>
 </div>
 
-<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+<div class="mp-brass-rule mb-6 mp-enter mp-enter-2"></div>
+
+<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mp-enter mp-enter-3">
   {% for c in characters %}
     {% include "_partials/character_card.html" %}
   {% else %}
-  <div class="col-span-full text-center py-12 text-neutral-500">
-    No characters yet. <a href="/characters/new" class="text-emerald-400 hover:underline">Create one.</a>
+  <div class="col-span-full text-center py-16 text-[var(--mp-ink-faint)]">
+    <div class="mp-display text-2xl italic mb-3">An empty roster.</div>
+    <a href="/characters/new" class="text-[var(--mp-brass)] hover:text-[var(--mp-brass-bright)]">Draft the first character →</a>
   </div>
   {% endfor %}
 </div>

app/web/templates/landing.html

@@ -3,17 +3,29 @@
 {% block title %}Metropolis Chess Club{% endblock %}
 
 {% block content %}
-<div class="max-w-2xl mx-auto text-center py-16">
-  <div class="text-6xl mb-6">♟</div>
-  <h1 class="text-4xl font-semibold mb-3">Metropolis Chess Club</h1>
-  <p class="text-neutral-300 mb-2 text-lg">
-    Play chess against AI characters with backstories, personalities, and memories.
+<div class="max-w-3xl mx-auto text-center py-20 mp-enter mp-enter-1 relative">
+  {# Decorative monogram ring. #}
+  <div class="inline-flex items-center justify-center w-20 h-20 mb-8 relative">
+    <div class="absolute inset-0 border border-[var(--mp-brass-dim)] rounded-sm"></div>
+    <div class="absolute inset-1.5 border border-[var(--mp-hairline-2)] rounded-sm"></div>
+    <span class="mp-display text-[var(--mp-brass-bright)] text-4xl">M</span>
+  </div>
+
+  <div class="mp-eyebrow mb-3">Established 2026</div>
+  <h1 class="mp-display text-[56px] leading-[0.95] tracking-tight mb-3">Metropolis <span class="mp-italic text-[var(--mp-brass)]">Chess Club</span></h1>
+
+  <div class="mp-brass-rule max-w-md mx-auto mb-7"></div>
+
+  <p class="text-[17px] text-[var(--mp-ink-muted)] mb-3 max-w-xl mx-auto leading-relaxed">
+    Play chess against AI characters with <span class="mp-italic text-[var(--mp-ink)]">backstories</span>, personalities, and memories.
   </p>
-  <p class="text-neutral-400 text-sm mb-10">
-    Pick one of our presets or craft your own. They'll remember your games.
+  <p class="text-[14px] text-[var(--mp-ink-faint)] mb-10 max-w-lg mx-auto">
+    Pick one of our house characters or craft your own. They remember your games.
   </p>
-  <a href="/login" class="inline-block rounded bg-emerald-500 px-6 py-3 font-medium text-neutral-900 hover:bg-emerald-400">
-    Log in to get started →
+
+  <a href="/login" class="mp-btn mp-btn-brass text-[14px]" style="padding: 0.75rem 1.5rem;">
+    Log in to get started
+    <span>›</span>
   </a>
 </div>
 {% endblock %}

app/web/templates/leaderboard_characters.html

@@ -2,54 +2,66 @@
 {% block title %}Character Leaderboard — Metropolis Chess Club{% endblock %}
 
 {% block content %}
-<div class="flex items-end justify-between mb-6">
+<div class="flex items-end justify-between mb-8 mp-enter mp-enter-1">
   <div>
-    <h1 class="text-2xl font-semibold">Character leaderboard</h1>
-    <p class="text-sm text-neutral-400">Ranked by win rate against all players. Minimum 5 matches within the window.</p>
-  </div>
-  <div class="flex items-center gap-4 text-sm">
-    <a href="/leaderboard/characters" class="font-medium {% if window == 'all' %}text-white{% else %}text-neutral-500 hover:text-white{% endif %}">All time</a>
-    <a href="/leaderboard/characters?window=30d" class="font-medium {% if window == '30d' %}text-white{% else %}text-neutral-500 hover:text-white{% endif %}">30 days</a>
-    <a href="/leaderboard/characters?window=7d" class="font-medium {% if window == '7d' %}text-white{% else %}text-neutral-500 hover:text-white{% endif %}">7 days</a>
-    <span class="text-neutral-700">|</span>
-    <a href="/leaderboard/players" class="text-neutral-400 hover:text-white">Players →</a>
+    <div class="mp-eyebrow mb-2">Standings · House</div>
+    <h1 class="mp-display text-[40px] leading-[1] tracking-tight">Character leaderboard</h1>
+    <p class="text-[13px] text-[var(--mp-ink-muted)] mt-3 max-w-lg">
+      Ranked by win rate against all players. Minimum 5 matches within the selected window.
+    </p>
   </div>
+  <nav class="flex items-center gap-2 text-[11px] mp-mono uppercase tracking-[0.15em] shrink-0">
+    <a href="/leaderboard/characters" class="px-3 py-1 border-b border-transparent
+       {% if window == 'all' %}text-[var(--mp-brass)] border-[var(--mp-brass)]{% else %}text-[var(--mp-ink-faint)] hover:text-[var(--mp-ink)]{% endif %}">All time</a>
+    <a href="/leaderboard/characters?window=30d" class="px-3 py-1 border-b border-transparent
+       {% if window == '30d' %}text-[var(--mp-brass)] border-[var(--mp-brass)]{% else %}text-[var(--mp-ink-faint)] hover:text-[var(--mp-ink)]{% endif %}">30 days</a>
+    <a href="/leaderboard/characters?window=7d" class="px-3 py-1 border-b border-transparent
+       {% if window == '7d' %}text-[var(--mp-brass)] border-[var(--mp-brass)]{% else %}text-[var(--mp-ink-faint)] hover:text-[var(--mp-ink)]{% endif %}">7 days</a>
+    <span class="mx-2 text-[var(--mp-ink-ghost)]">·</span>
+    <a href="/leaderboard/players" class="text-[var(--mp-ink-muted)] hover:text-[var(--mp-ink)]">Players ›</a>
+  </nav>
 </div>
 
-<div class="rounded-xl border border-neutral-800 bg-neutral-900 overflow-hidden">
+<div class="mp-brass-rule mb-6 mp-enter mp-enter-2"></div>
+
+<div class="mp-panel rounded-sm overflow-hidden mp-framed mp-enter mp-enter-2">
+  <span class="mp-frame-tl"></span><span class="mp-frame-br"></span>
   <table class="w-full text-sm">
-    <thead class="bg-neutral-950/60 text-[11px] uppercase tracking-wider text-neutral-500">
-      <tr>
-        <th class="text-left font-medium px-4 py-2 w-12">#</th>
-        <th class="text-left font-medium px-4 py-2">Character</th>
-        <th class="text-right font-medium px-4 py-2">Elo</th>
-        <th class="text-right font-medium px-4 py-2">Win %</th>
-        <th class="text-right font-medium px-4 py-2">W</th>
-        <th class="text-right font-medium px-4 py-2">L</th>
-        <th class="text-right font-medium px-4 py-2">D</th>
-        <th class="text-right font-medium px-4 py-2">Total</th>
+    <thead>
+      <tr class="text-left" style="background: var(--mp-surface-2); border-bottom: 1px solid var(--mp-hairline-2);">
+        <th class="mp-eyebrow text-left px-4 py-3 w-12">#</th>
+        <th class="mp-eyebrow text-left px-4 py-3">Character</th>
+        <th class="mp-eyebrow text-right px-4 py-3">Elo</th>
+        <th class="mp-eyebrow text-right px-4 py-3">Win %</th>
+        <th class="mp-eyebrow text-right px-4 py-3">W</th>
+        <th class="mp-eyebrow text-right px-4 py-3">L</th>
+        <th class="mp-eyebrow text-right px-4 py-3">D</th>
+        <th class="mp-eyebrow text-right px-4 py-3">Total</th>
       </tr>
     </thead>
-    <tbody class="divide-y divide-neutral-800">
+    <tbody>
       {% for r in rows %}
-      <tr class="hover:bg-neutral-800/40 transition">
-        <td class="px-4 py-3 text-neutral-400 font-mono">{{ r.rank }}</td>
+      <tr class="transition hover:bg-[var(--mp-surface-3)]" style="border-top: 1px solid var(--mp-hairline);">
+        <td class="px-4 py-3 mp-mono text-[var(--mp-ink-faint)]">
+          <span class="mp-display {% if r.rank <= 3 %}text-[var(--mp-brass-bright)]{% endif %}">{{ r.rank }}</span>
+        </td>
         <td class="px-4 py-3">
-          <a href="/characters/{{ r.character_id }}" class="flex items-center gap-3 hover:text-white">
-            <span class="text-xl">{{ r.character_avatar }}</span>
-            <span class="font-medium">{{ r.character_name }}</span>
+          <a href="/characters/{{ r.character_id }}" class="flex items-center gap-3 hover:text-[var(--mp-brass-bright)] transition">
+            <span class="w-9 h-9 inline-flex items-center justify-center border border-[var(--mp-hairline-2)] bg-[var(--mp-surface-2)] rounded-sm text-lg">{{ r.character_avatar }}</span>
+            <span class="mp-display text-[16px]">{{ r.character_name }}</span>
           </a>
         </td>
-        <td class="px-4 py-3 text-right font-mono text-neutral-300">{{ r.current_elo }}</td>
-        <td class="px-4 py-3 text-right font-mono font-semibold text-emerald-300">{{ "%.1f"|format(r.win_rate * 100) }}%</td>
-        <td class="px-4 py-3 text-right font-mono text-emerald-400">{{ r.wins }}</td>
-        <td class="px-4 py-3 text-right font-mono text-rose-400">{{ r.losses }}</td>
-        <td class="px-4 py-3 text-right font-mono text-neutral-400">{{ r.draws }}</td>
-        <td class="px-4 py-3 text-right font-mono text-neutral-300">{{ r.total_matches }}</td>
+        <td class="px-4 py-3 text-right mp-mono text-[var(--mp-ink-muted)]">{{ r.current_elo }}</td>
+        <td class="px-4 py-3 text-right mp-mono font-semibold" style="color: var(--mp-felt-bright);">{{ "%.1f"|format(r.win_rate * 100) }}%</td>
+        <td class="px-4 py-3 text-right mp-mono" style="color: var(--mp-felt-bright);">{{ r.wins }}</td>
+        <td class="px-4 py-3 text-right mp-mono" style="color: #E79E9B;">{{ r.losses }}</td>
+        <td class="px-4 py-3 text-right mp-mono text-[var(--mp-ink-faint)]">{{ r.draws }}</td>
+        <td class="px-4 py-3 text-right mp-mono text-[var(--mp-ink-muted)]">{{ r.total_matches }}</td>
       </tr>
       {% else %}
-      <tr><td colspan="8" class="px-4 py-12 text-center text-neutral-500">
-        No characters have reached 5 matches in this window yet.
+      <tr><td colspan="8" class="px-4 py-14 text-center">
+        <div class="mp-display italic text-[var(--mp-ink-faint)] text-lg">The standings are quiet.</div>
+        <div class="text-[12px] text-[var(--mp-ink-faint)] mt-1">No characters have reached 5 matches in this window yet.</div>
       </td></tr>
       {% endfor %}
     </tbody>

app/web/templates/leaderboard_players.html

@@ -2,53 +2,70 @@
 {% block title %}Player Leaderboard — Metropolis Chess Club{% endblock %}
 
 {% block content %}
-<div class="flex items-end justify-between mb-6">
+<div class="flex items-end justify-between mb-8 mp-enter mp-enter-1">
   <div>
-    <h1 class="text-2xl font-semibold">Player leaderboard</h1>
-    <p class="text-sm text-neutral-400">Ranked by win rate against all characters. Minimum 5 matches within the window.</p>
-  </div>
-  <div class="flex items-center gap-4 text-sm">
-    <a href="/leaderboard/players" class="font-medium {% if window == 'all' %}text-white{% else %}text-neutral-500 hover:text-white{% endif %}">All time</a>
-    <a href="/leaderboard/players?window=30d" class="font-medium {% if window == '30d' %}text-white{% else %}text-neutral-500 hover:text-white{% endif %}">30 days</a>
-    <a href="/leaderboard/players?window=7d" class="font-medium {% if window == '7d' %}text-white{% else %}text-neutral-500 hover:text-white{% endif %}">7 days</a>
-    <span class="text-neutral-700">|</span>
-    <a href="/leaderboard/characters" class="text-neutral-400 hover:text-white">Characters →</a>
+    <div class="mp-eyebrow mb-2">Standings · Members</div>
+    <h1 class="mp-display text-[40px] leading-[1] tracking-tight">Player leaderboard</h1>
+    <p class="text-[13px] text-[var(--mp-ink-muted)] mt-3 max-w-lg">
+      Ranked by win rate against all characters. Minimum 5 matches within the selected window.
+    </p>
   </div>
+  <nav class="flex items-center gap-2 text-[11px] mp-mono uppercase tracking-[0.15em] shrink-0">
+    <a href="/leaderboard/players" class="px-3 py-1 border-b border-transparent
+       {% if window == 'all' %}text-[var(--mp-brass)] border-[var(--mp-brass)]{% else %}text-[var(--mp-ink-faint)] hover:text-[var(--mp-ink)]{% endif %}">All time</a>
+    <a href="/leaderboard/players?window=30d" class="px-3 py-1 border-b border-transparent
+       {% if window == '30d' %}text-[var(--mp-brass)] border-[var(--mp-brass)]{% else %}text-[var(--mp-ink-faint)] hover:text-[var(--mp-ink)]{% endif %}">30 days</a>
+    <a href="/leaderboard/players?window=7d" class="px-3 py-1 border-b border-transparent
+       {% if window == '7d' %}text-[var(--mp-brass)] border-[var(--mp-brass)]{% else %}text-[var(--mp-ink-faint)] hover:text-[var(--mp-ink)]{% endif %}">7 days</a>
+    <span class="mx-2 text-[var(--mp-ink-ghost)]">·</span>
+    <a href="/leaderboard/characters" class="text-[var(--mp-ink-muted)] hover:text-[var(--mp-ink)]">Characters ›</a>
+  </nav>
 </div>
 
-<div class="rounded-xl border border-neutral-800 bg-neutral-900 overflow-hidden">
+<div class="mp-brass-rule mb-6 mp-enter mp-enter-2"></div>
+
+<div class="mp-panel rounded-sm overflow-hidden mp-framed mp-enter mp-enter-2">
+  <span class="mp-frame-tl"></span><span class="mp-frame-br"></span>
   <table class="w-full text-sm">
-    <thead class="bg-neutral-950/60 text-[11px] uppercase tracking-wider text-neutral-500">
-      <tr>
-        <th class="text-left font-medium px-4 py-2 w-12">#</th>
-        <th class="text-left font-medium px-4 py-2">Player</th>
-        <th class="text-right font-medium px-4 py-2">Win %</th>
-        <th class="text-right font-medium px-4 py-2">W</th>
-        <th class="text-right font-medium px-4 py-2">L</th>
-        <th class="text-right font-medium px-4 py-2">D</th>
-        <th class="text-right font-medium px-4 py-2">Total</th>
+    <thead>
+      <tr class="text-left" style="background: var(--mp-surface-2); border-bottom: 1px solid var(--mp-hairline-2);">
+        <th class="mp-eyebrow text-left px-4 py-3 w-12">#</th>
+        <th class="mp-eyebrow text-left px-4 py-3">Player</th>
+        <th class="mp-eyebrow text-right px-4 py-3">Win %</th>
+        <th class="mp-eyebrow text-right px-4 py-3">W</th>
+        <th class="mp-eyebrow text-right px-4 py-3">L</th>
+        <th class="mp-eyebrow text-right px-4 py-3">D</th>
+        <th class="mp-eyebrow text-right px-4 py-3">Total</th>
       </tr>
     </thead>
-    <tbody class="divide-y divide-neutral-800">
+    <tbody>
       {% for r in rows %}
-      <tr class="hover:bg-neutral-800/40 transition {% if r.player_id == player.id %}bg-indigo-900/20{% endif %}">
-        <td class="px-4 py-3 text-neutral-400 font-mono">{{ r.rank }}</td>
+      <tr class="transition hover:bg-[var(--mp-surface-3)]"
+          style="border-top: 1px solid var(--mp-hairline); {% if r.player_id == player.id %}background: rgba(201,166,107,0.08);{% endif %}">
+        <td class="px-4 py-3 mp-mono text-[var(--mp-ink-faint)]">
+          <span class="mp-display {% if r.rank <= 3 %}text-[var(--mp-brass-bright)]{% endif %}">{{ r.rank }}</span>
+        </td>
         <td class="px-4 py-3">
-          <a href="/players/{{ r.username }}" class="flex items-center gap-2 hover:text-white">
-            <span class="font-medium">@{{ r.username }}</span>
-            {% if r.display_name and r.display_name != r.username %}<span class="text-neutral-500 text-xs">({{ r.display_name }})</span>{% endif %}
-            {% if r.player_id == player.id %}<span class="text-[10px] uppercase tracking-wider text-indigo-300 ml-2">you</span>{% endif %}
+          <a href="/players/{{ r.username }}" class="hover:text-[var(--mp-brass-bright)] transition">
+            <span class="mp-mono text-[13px]">@{{ r.username }}</span>
+            {% if r.display_name and r.display_name != r.username %}
+              <span class="text-[var(--mp-ink-faint)] text-[12px] ml-2">{{ r.display_name }}</span>
+            {% endif %}
+            {% if r.player_id == player.id %}
+              <span class="mp-chip ml-2" style="background: rgba(201,166,107,0.15); color: var(--mp-brass-bright);">you</span>
+            {% endif %}
           </a>
         </td>
-        <td class="px-4 py-3 text-right font-mono font-semibold text-emerald-300">{{ "%.1f"|format(r.win_rate * 100) }}%</td>
-        <td class="px-4 py-3 text-right font-mono text-emerald-400">{{ r.wins }}</td>
-        <td class="px-4 py-3 text-right font-mono text-rose-400">{{ r.losses }}</td>
-        <td class="px-4 py-3 text-right font-mono text-neutral-400">{{ r.draws }}</td>
-        <td class="px-4 py-3 text-right font-mono text-neutral-300">{{ r.total_matches }}</td>
+        <td class="px-4 py-3 text-right mp-mono font-semibold" style="color: var(--mp-felt-bright);">{{ "%.1f"|format(r.win_rate * 100) }}%</td>
+        <td class="px-4 py-3 text-right mp-mono" style="color: var(--mp-felt-bright);">{{ r.wins }}</td>
+        <td class="px-4 py-3 text-right mp-mono" style="color: #E79E9B;">{{ r.losses }}</td>
+        <td class="px-4 py-3 text-right mp-mono text-[var(--mp-ink-faint)]">{{ r.draws }}</td>
+        <td class="px-4 py-3 text-right mp-mono text-[var(--mp-ink-muted)]">{{ r.total_matches }}</td>
       </tr>
       {% else %}
-      <tr><td colspan="7" class="px-4 py-12 text-center text-neutral-500">
-        No players have reached 5 matches in this window yet.
+      <tr><td colspan="7" class="px-4 py-14 text-center">
+        <div class="mp-display italic text-[var(--mp-ink-faint)] text-lg">No members have posted a full card yet.</div>
+        <div class="text-[12px] text-[var(--mp-ink-faint)] mt-1">Five matches within the window qualifies you.</div>
       </td></tr>
       {% endfor %}
     </tbody>

app/web/templates/login.html

@@ -3,14 +3,15 @@
 {% block title %}Log in — Metropolis Chess Club{% endblock %}
 
 {% block content %}
-<div class="max-w-md mx-auto mt-8">
-  <h1 class="text-2xl font-semibold mb-1">Log in</h1>
-  <p class="text-sm text-neutral-400 mb-6">
-    Pick a username to get started. If it's new, we'll create the account.
+<div class="max-w-md mx-auto mt-10 mp-enter mp-enter-1">
+  <div class="mp-eyebrow mb-2">Members' entrance</div>
+  <h1 class="mp-display text-[36px] leading-[1] tracking-tight mb-2">Log in</h1>
+  <p class="text-[13px] text-[var(--mp-ink-muted)] mb-6">
+    Pick a username to get started. If it's new, we'll open an account.
   </p>
 
   {% if error %}
-  <div class="mb-4 rounded border border-rose-900/80 bg-rose-950/40 p-3 text-sm text-rose-200">
+  <div class="mb-5 rounded-sm border p-3 text-sm" style="border-color: rgba(168,66,63,0.45); background: rgba(168,66,63,0.08); color: #E79E9B;">
     {% if error == 'empty' %}Username can't be blank.
     {% elif error == 'too_short' %}Username must be at least 3 characters.
     {% elif error == 'too_long' %}Username must be 24 characters or fewer.
@@ -20,30 +21,30 @@
   </div>
   {% endif %}
 
-  <form method="post" action="/login" class="space-y-4">
+  <form method="post" action="/login" class="space-y-5 mp-panel rounded-sm p-6 mp-framed relative">
+    <span class="mp-frame-tl"></span><span class="mp-frame-br"></span>
     <input type="hidden" name="next" value="{{ next or '/' }}" />
     <div>
-      <label class="block text-sm mb-1">Username</label>
+      <label class="mp-eyebrow block mb-2">Username</label>
       <input required autofocus name="username" value="{{ prefill }}"
              minlength="3" maxlength="24" pattern="[a-z0-9_]+"
-             class="w-full rounded bg-neutral-900 border border-neutral-800 px-3 py-2"
+             class="mp-input w-full mp-mono"
              placeholder="your_username" />
-      <p class="text-xs text-neutral-500 mt-1">
+      <p class="text-[11px] text-[var(--mp-ink-faint)] mt-2">
         Lowercase letters, digits, underscore. 3–24 chars.
       </p>
     </div>
-    <button class="rounded bg-emerald-500 px-5 py-2 font-medium text-neutral-900 hover:bg-emerald-400">
-      Continue
+    <button class="mp-btn mp-btn-brass w-full justify-center" style="padding: 0.65rem 1rem;">
+      Continue ›
     </button>
   </form>
 
-  <div class="mt-8 rounded border border-amber-900/60 bg-amber-950/30 p-4 text-xs text-amber-200">
-    <div class="font-semibold mb-1">Heads up</div>
-    <p>
-      Usernames are claimed on first login. <strong>There's no password</strong> — anyone with
-      your username can log in as you. This will change in a future version. Don't use this
-      for anything you actually care about.
-    </p>
+  <div class="mt-8 mp-panel rounded-sm p-4 text-[11px] text-[var(--mp-ink-muted)] leading-relaxed"
+       style="border-color: rgba(201,166,107,0.28);">
+    <div class="mp-eyebrow mb-2" style="color: var(--mp-brass);">Heads up</div>
+    Usernames are claimed on first login. <span class="mp-italic">There's no password</span> —
+    anyone with your username can log in as you. This will change in a future version. Don't use this
+    for anything you actually care about.
   </div>
 </div>
 {% endblock %}

app/web/templates/new.html

@@ -3,7 +3,8 @@
 {% block title %}New character — Metropolis Chess Club{% endblock %}
 
 {% block content %}
-<h1 class="text-2xl font-semibold mb-1">New character</h1>
+<div class="mp-eyebrow mb-2">Drafting</div>
+<h1 class="mp-display text-[36px] leading-[1] tracking-tight mb-2">New character</h1>
 <p class="text-sm text-neutral-400 mb-6">
   We'll generate their memories from the backstory in the background. Takes ~30–60s.
 </p>
@@ -132,7 +133,7 @@
   </div>
 
   <div class="pt-2">
-    <button class="rounded bg-emerald-500 px-5 py-2 font-medium text-neutral-900 hover:bg-emerald-400">
+    <button class="mp-btn mp-btn-brass" style="padding: 0.6rem 1.2rem;">
       Create character
     </button>
     <a href="/" class="ml-3 text-sm text-neutral-400 hover:text-white">Cancel</a>

app/web/templates/play.html

@@ -9,140 +9,146 @@
 <script src="https://cdnjs.cloudflare.com/ajax/libs/chessboard-js/1.0.0/chessboard-1.0.0.min.js"></script>
 <script src="https://cdn.socket.io/4.7.5/socket.io.min.js"></script>
 <style>
-  .white-1e1d7 { background-color: #e6e6e6 !important; }
-  .black-3c85d { background-color: #525866 !important; }
-  .highlight-last { box-shadow: inset 0 0 0 3px rgba(16, 185, 129, 0.8); }
-
+  /* Play-page-specific only — shared chat/conn/board styles live in base.html. */
   .memory-ribbon { transition: opacity 0.8s ease-in-out; }
   .memory-ribbon.fading { opacity: 0.35; }
   .memory-detail { display: none; }
   .memory-item:hover .memory-detail { display: block; }
   .memory-item.expanded .memory-detail { display: block; }
+  .highlight-last { box-shadow: inset 0 0 0 3px var(--mp-brass-bright); }
 
-  .chat-bubble-agent {
-    background: linear-gradient(180deg, rgba(71,85,105,0.35), rgba(51,65,85,0.25));
-    border-left: 2px solid #60a5fa;
-  }
-  .chat-bubble-player {
-    background: linear-gradient(180deg, rgba(29,78,216,0.2), rgba(29,78,216,0.1));
-    border-left: 2px solid #f59e0b;
-    margin-left: 1.5rem;
-  }
-  .chat-bubble-player.in-transit { opacity: 0.6; }
-
-  /* Connection status pill */
-  .conn-live   { background: rgba(16, 185, 129, 0.18); color: #6ee7b7; }
-  .conn-retry  { background: rgba(245, 158, 11, 0.18); color: #fcd34d; }
-  .conn-lost   { background: rgba(244, 63, 94, 0.18); color: #fda4af; }
-
-  /* Disconnect overlay */
+  /* Disconnect overlay — fixed, covers everything, brass-bordered modal. */
   #disconnect-overlay {
-    position: fixed; inset: 0; background: rgba(0,0,0,0.75);
+    position: fixed; inset: 0; background: rgba(8, 10, 9, 0.88);
     z-index: 50; display: none; align-items: center; justify-content: center;
+    backdrop-filter: blur(2px);
   }
   #disconnect-overlay.visible { display: flex; }
+
+  /* Board framing — a thin brass frame around the whole chessboard. */
+  .mp-board-frame {
+    padding: 10px;
+    background:
+      linear-gradient(180deg, rgba(201,166,107,0.08), rgba(201,166,107,0.02)),
+      var(--mp-surface-2);
+    border: 1px solid var(--mp-brass-dim);
+    position: relative;
+  }
+  .mp-board-frame::before {
+    content: ''; position: absolute; inset: 4px;
+    border: 1px solid rgba(201,166,107,0.18); pointer-events: none;
+  }
 </style>
 {% endblock %}
 
 {% block content %}
 
-<div id="alert-banner" class="hidden mb-5 rounded border px-4 py-3 text-sm"></div>
+<div id="alert-banner" class="hidden mb-5 rounded-sm border px-4 py-3 text-sm"></div>
 
-<div class="flex items-start gap-6 mb-4">
-  <div class="text-5xl">{{ character.avatar_emoji or "♟" }}</div>
+<div class="flex items-start gap-6 mb-6 mp-enter mp-enter-1">
+  <div class="shrink-0 w-16 h-16 flex items-center justify-center border border-[var(--mp-brass-dim)] bg-[var(--mp-surface-2)] rounded-sm text-4xl leading-none">
+    {{ character.avatar_emoji or "♟" }}
+  </div>
   <div class="flex-1">
-    <h1 class="text-2xl font-semibold">{{ character.name }}</h1>
-    <p class="text-sm text-neutral-400">
+    <div class="mp-eyebrow mb-1">Board · {{ match.player_color.value }}</div>
+    <h1 class="mp-display text-[32px] leading-[1] tracking-tight">{{ character.name }}</h1>
+    <p class="text-[13px] text-[var(--mp-ink-muted)] mt-2 mp-clamp-2 max-w-xl">
       {{ character.short_description }}
-      · playing at ~{{ match.character_elo_at_start }} Elo
-      · you're <span id="player-color">{{ match.player_color.value }}</span>
-    </p>
-    <p class="text-xs text-neutral-500 mt-1">
-      mood: <span id="emotion-indicator" class="font-medium text-neutral-300">—</span>
     </p>
+    <div class="mt-2 flex items-center gap-4 text-[11px] mp-mono uppercase tracking-[0.12em] text-[var(--mp-ink-faint)]">
+      <span>~{{ match.character_elo_at_start }} Elo</span>
+      <span>·</span>
+      <span>mood <span id="emotion-indicator" class="text-[var(--mp-ink-muted)]">—</span></span>
+    </div>
   </div>
-  <div class="text-right text-sm">
-    <div id="match-status" class="font-medium">
+  <div class="text-right text-sm shrink-0">
+    <div id="match-status" class="mp-display text-[17px]">
       {% if match.status.value == "in_progress" %}
-        <span class="text-emerald-300">In progress</span>
+        <span class="text-[var(--mp-felt-bright)]">In progress</span>
       {% elif match.status.value == "completed" %}
-        <span class="text-amber-300">Finished</span>
+        <span class="text-[var(--mp-brass-bright)]">Finished</span>
       {% else %}
-        <span class="text-rose-300">Abandoned</span>
+        <span class="text-[#E79E9B]">Abandoned</span>
       {% endif %}
     </div>
-    <div class="text-neutral-500 text-xs" id="match-result">
+    <div class="text-[var(--mp-ink-faint)] text-[11px] mp-mono uppercase tracking-[0.12em] mt-1" id="match-result">
       {{ match.result.value if match.result else "" }}
     </div>
-    <div id="conn-pill" class="mt-2 inline-block rounded px-2 py-0.5 text-[10px] uppercase tracking-wider conn-retry">
+    <div id="conn-pill" class="conn-pill conn-retry mt-3">
       connecting…
     </div>
-    <div id="spectator-count-pill" class="hidden mt-1 text-[10px] text-indigo-300 uppercase tracking-wider">
+    <div id="spectator-count-pill" class="hidden mt-2 text-[10px] mp-mono uppercase tracking-[0.15em]" style="color: var(--mp-ink-blue-alt);">
       <span id="spectator-count">0</span> watching
     </div>
   </div>
 </div>
 
-<div class="grid grid-cols-1 lg:grid-cols-[minmax(0,480px)_minmax(0,1fr)] gap-6">
+<div class="grid grid-cols-1 lg:grid-cols-[minmax(0,500px)_minmax(0,1fr)] gap-6 mp-enter mp-enter-2">
   <div>
-    <div id="board" class="w-full max-w-[480px]"></div>
-    <div class="mt-3 flex items-center gap-3">
-      <button id="resign-btn" class="rounded bg-rose-900 hover:bg-rose-800 px-3 py-1.5 text-sm">Resign</button>
-      <div id="thinking-banner" class="text-sm text-amber-300 hidden">
-        {{ character.name }} is thinking<span id="thinking-eta"></span>…
+    <div class="mp-board-frame">
+      <div id="board" class="w-full max-w-[480px]"></div>
+    </div>
+    <div class="mt-4 flex items-center gap-3">
+      <button id="resign-btn" class="mp-btn mp-btn-danger">Resign</button>
+      <div id="thinking-banner" class="hidden flex items-center gap-2 text-[13px] text-[var(--mp-brass-bright)]">
+        <span class="mp-livedot" style="background: var(--mp-brass-bright); box-shadow: 0 0 0 0 rgba(201,166,107,0.55);"></span>
+        <span>{{ character.name }} is thinking<span id="thinking-eta"></span>…</span>
       </div>
     </div>
-    <div id="memory-ribbon" class="hidden mt-4 text-sm italic text-neutral-400 border-l-2 border-indigo-700/60 pl-3 memory-ribbon">
-      <span id="memory-ribbon-lede">{{ character.name }} is reminded of something…</span>
-      <div id="memory-ribbon-items" class="mt-2 space-y-2"></div>
+    <div id="memory-ribbon" class="hidden mt-5 text-[13px] italic text-[var(--mp-ink-muted)] border-l-2 pl-4 memory-ribbon"
+         style="border-color: var(--mp-brass-dim); background: linear-gradient(90deg, rgba(201,166,107,0.05), transparent);">
+      <span id="memory-ribbon-lede" class="mp-display">{{ character.name }} is reminded of something…</span>
+      <div id="memory-ribbon-items" class="mt-3 space-y-2"></div>
     </div>
   </div>
 
-  <div class="flex flex-col gap-4 min-h-[480px]">
+  <div class="flex flex-col gap-5 min-h-[480px]">
     <div>
-      <h2 class="text-sm uppercase tracking-wider text-neutral-400 mb-2">Table talk</h2>
-      <div id="chat-log" class="text-sm text-neutral-200 bg-neutral-900 border border-neutral-800 rounded p-4 h-[220px] overflow-y-auto space-y-2">
-        <div class="text-xs text-neutral-500 italic">No messages yet. Press Enter to say something to {{ character.name }} — they can hear you even while thinking.</div>
+      <h2 class="mp-eyebrow mb-2">Table talk</h2>
+      <div id="chat-log" class="mp-panel rounded-sm text-sm p-4 h-[220px] overflow-y-auto space-y-2">
+        <div class="text-[12px] text-[var(--mp-ink-faint)] italic">
+          No messages yet. Press Enter to say something to {{ character.name }} — they can hear you even while thinking.
+        </div>
       </div>
-      <div class="mt-2 flex gap-2">
-        <input id="chat-input" type="text" maxlength="500" placeholder="Say something to {{ character.name }}… (Enter to send)"
-               class="flex-1 rounded bg-neutral-900 border border-neutral-800 px-3 py-1.5 text-sm focus:outline-none focus:border-indigo-600" />
+      <div class="mt-2">
+        <input id="chat-input" type="text" maxlength="500"
+               placeholder="Say something to {{ character.name }}… (Enter to send)"
+               class="mp-input w-full" />
       </div>
     </div>
 
     <div id="crowd-panel" class="hidden">
       <div class="flex items-center justify-between mb-2">
-        <h2 class="text-sm uppercase tracking-wider text-neutral-400">Crowd noise</h2>
-        <button id="crowd-mute-btn" class="text-[10px] text-neutral-500 hover:text-neutral-300 uppercase tracking-wider">mute</button>
+        <h2 class="mp-eyebrow">Crowd noise</h2>
+        <button id="crowd-mute-btn" class="text-[10px] mp-mono uppercase tracking-[0.15em] text-[var(--mp-ink-faint)] hover:text-[var(--mp-ink)]">mute</button>
       </div>
-      <div id="crowd-log" class="text-sm text-neutral-300 bg-neutral-900 border border-neutral-800 rounded p-3 h-[140px] overflow-y-auto space-y-1.5"></div>
-      <div class="mt-1 text-[10px] text-neutral-600 italic">{{ character.name }} can't hear them.</div>
+      <div id="crowd-log" class="mp-panel rounded-sm text-sm p-3 h-[140px] overflow-y-auto space-y-1.5"></div>
+      <div class="mt-1 text-[10px] text-[var(--mp-ink-ghost)] italic">{{ character.name }} can't hear them.</div>
     </div>
 
     <div>
-      <h2 class="text-sm uppercase tracking-wider text-neutral-400 mb-2">Moves</h2>
-      <ol id="move-list" class="text-sm font-mono text-neutral-200 bg-neutral-900 border border-neutral-800 rounded p-4 h-[220px] overflow-y-auto">
-      </ol>
+      <h2 class="mp-eyebrow mb-2">Moves</h2>
+      <ol id="move-list" class="mp-panel rounded-sm p-4 h-[220px] overflow-y-auto mp-mono text-[13px] text-[var(--mp-ink)]"></ol>
     </div>
   </div>
 </div>
 
-<div id="postmatch-panel" class="hidden mt-6 rounded border border-indigo-800/60 bg-indigo-950/30 px-4 py-3 text-sm">
-  <div class="font-medium text-indigo-200 mb-2">
+<div id="postmatch-panel" class="hidden mt-8 mp-panel rounded-sm px-5 py-4">
+  <div class="mp-display text-[17px] text-[var(--mp-ink)] mb-2">
     <span id="postmatch-headline">{{ character.name }} is reflecting on the match…</span>
   </div>
-  <ul id="postmatch-steps" class="text-xs text-indigo-300 space-y-0.5"></ul>
+  <ul id="postmatch-steps" class="text-[12px] text-[var(--mp-ink-muted)] space-y-1 mp-mono"></ul>
 </div>
 
 <div id="disconnect-overlay">
-  <div class="bg-neutral-900 border border-rose-700/70 rounded-lg p-6 max-w-md text-center">
-    <div class="text-rose-300 font-semibold mb-2">Connection lost</div>
-    <div class="text-sm text-neutral-300 mb-3">
+  <div class="mp-panel-raised mp-framed rounded-sm p-7 max-w-md text-center" style="border-color: var(--mp-oxblood);">
+    <div class="mp-display italic text-[26px] mb-2" style="color: #E79E9B;">Connection lost.</div>
+    <div class="text-[13px] text-[var(--mp-ink-muted)] mb-4">
       Your connection to {{ character.name }} dropped. The match will be abandoned in
-      <span id="disconnect-countdown" class="font-mono text-rose-200">—:—</span>
+      <span id="disconnect-countdown" class="mp-mono text-[var(--mp-brass-bright)]">—:—</span>
       unless you reconnect.
     </div>
-    <div class="text-xs text-neutral-500">The client is retrying automatically.</div>
+    <div class="text-[11px] text-[var(--mp-ink-faint)] mp-mono uppercase tracking-[0.15em]">client is retrying automatically</div>
   </div>
 </div>
 

app/web/templates/player_profile.html

@@ -2,54 +2,54 @@
 {% block title %}@{{ target.username }} — Metropolis Chess Club{% endblock %}
 
 {% block content %}
-<div class="mb-6">
-  <h1 class="text-2xl font-semibold">@{{ target.username }}</h1>
-  <p class="text-sm text-neutral-400">
+<div class="mb-8 mp-enter mp-enter-1">
+  <div class="mp-eyebrow mb-2">Member</div>
+  <h1 class="mp-display text-[38px] leading-[1] tracking-tight">@{{ target.username }}</h1>
+  <p class="text-[13px] text-[var(--mp-ink-muted)] mt-2">
     {{ target.display_name }}
-    · joined {{ target.created_at.strftime('%Y-%m-%d') }}
+    <span class="text-[var(--mp-ink-ghost)] mx-1">·</span>
+    <span class="mp-mono text-[12px]">joined {{ target.created_at.strftime('%Y-%m-%d') }}</span>
   </p>
 </div>
 
-<section class="mb-10">
-  <h2 class="text-sm uppercase tracking-wider text-neutral-400 mb-3">Recent matches</h2>
+<div class="mp-brass-rule mb-6"></div>
+
+<section class="mb-10 mp-enter mp-enter-2">
+  <h2 class="mp-eyebrow mb-3">Recent matches</h2>
   {% if recent_matches %}
   <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
     {% for match, character in recent_matches %}
     <a href="/matches/{{ match.id }}/summary"
-       class="flex items-center gap-4 rounded-lg border border-neutral-800 bg-neutral-900 hover:border-neutral-600 hover:bg-neutral-800/60 transition px-4 py-3">
-      <div class="text-2xl">{{ character.avatar_emoji or "♟" }}</div>
+       class="mp-panel-raised flex items-center gap-4 rounded-sm transition" style="padding: 0.9rem 1rem;">
+      <div class="shrink-0 w-11 h-11 flex items-center justify-center border border-[var(--mp-hairline-2)] bg-[var(--mp-surface-1)] rounded-sm text-xl leading-none">
+        {{ character.avatar_emoji or "♟" }}
+      </div>
       <div class="flex-1 min-w-0">
-        <div class="font-medium truncate">{{ character.name }}</div>
-        <div class="text-xs text-neutral-500 truncate">
-          {% if match.status.value == 'abandoned' %}
-            resigned
-          {% elif match.result %}
-            {{ match.result.value }}
-          {% endif %}
-          {% if match.ended_at %}· {{ match.ended_at.strftime('%Y-%m-%d') }}{% endif %}
+        <div class="mp-display text-[17px] truncate">{{ character.name }}</div>
+        <div class="text-[11px] mp-mono uppercase tracking-[0.1em] text-[var(--mp-ink-faint)] mt-1">
+          {% if match.status.value == 'abandoned' %}resigned{% elif match.result %}{{ match.result.value }}{% endif %}
+          {% if match.ended_at %}<span class="text-[var(--mp-ink-ghost)]"> · </span>{{ match.ended_at.strftime('%Y-%m-%d') }}{% endif %}
         </div>
       </div>
     </a>
     {% endfor %}
   </div>
   {% else %}
-  <div class="rounded-lg border border-neutral-800 bg-neutral-900 px-4 py-6 text-sm text-neutral-500 text-center">
-    No finished matches to show.
+  <div class="mp-panel rounded-sm px-4 py-8 text-center text-[13px] text-[var(--mp-ink-faint)]">
+    <div class="mp-display italic">No finished matches to show.</div>
   </div>
   {% endif %}
 </section>
 
-<section>
-  <h2 class="text-sm uppercase tracking-wider text-neutral-400 mb-3">Characters created</h2>
+<section class="mp-enter mp-enter-3">
+  <h2 class="mp-eyebrow mb-3">Characters created</h2>
   {% if owned_characters %}
   <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
-    {% for c in owned_characters %}
-      {% include "_partials/character_card.html" %}
-    {% endfor %}
+    {% for c in owned_characters %}{% include "_partials/character_card.html" %}{% endfor %}
   </div>
   {% else %}
-  <div class="rounded-lg border border-neutral-800 bg-neutral-900 px-4 py-6 text-sm text-neutral-500 text-center">
-    No characters yet.
+  <div class="mp-panel rounded-sm px-4 py-8 text-center text-[13px] text-[var(--mp-ink-faint)]">
+    <div class="mp-display italic">No characters yet.</div>
   </div>
   {% endif %}
 </section>

app/web/templates/settings.html

@@ -3,61 +3,48 @@
 {% block title %}Settings — Metropolis Chess Club{% endblock %}
 
 {% block content %}
-<div class="max-w-xl">
-  <h1 class="text-2xl font-semibold mb-1">Settings</h1>
-  <p class="text-sm text-neutral-400 mb-6">
-    Logged in as <strong>@{{ player.username }}</strong>. Username is permanent in this release.
+<div class="max-w-xl mp-enter mp-enter-1">
+  <div class="mp-eyebrow mb-2">Member · @{{ player.username }}</div>
+  <h1 class="mp-display text-[36px] leading-[1] tracking-tight mb-2">Settings</h1>
+  <p class="text-[13px] text-[var(--mp-ink-muted)] mb-6">
+    Username is permanent in this release. Rating changes apply to new matches only — they don't interrupt a game in progress.
   </p>
 
   {% if error %}
-  <div class="mb-4 rounded border border-rose-900/80 bg-rose-950/40 p-3 text-sm text-rose-200">
-    {{ error }}
-  </div>
+  <div class="mb-5 rounded-sm border p-3 text-sm" style="border-color: rgba(168,66,63,0.45); background: rgba(168,66,63,0.08); color: #E79E9B;">{{ error }}</div>
   {% endif %}
 
   <form method="post" action="/settings" class="space-y-6">
-    <div>
-      <label class="block text-sm mb-1">Display name</label>
-      <input name="display_name" value="{{ player.display_name }}" maxlength="80"
-             class="w-full rounded bg-neutral-900 border border-neutral-800 px-3 py-2" />
-      <p class="text-xs text-neutral-500 mt-1">Shown on your profile and match records. Free-form.</p>
+    <div class="mp-panel rounded-sm p-5">
+      <label class="mp-eyebrow block mb-2">Display name</label>
+      <input name="display_name" value="{{ player.display_name }}" maxlength="80" class="mp-input w-full" />
+      <p class="text-[11px] text-[var(--mp-ink-faint)] mt-2">Shown on your profile and match records. Free-form.</p>
     </div>
 
-    <fieldset class="space-y-3 rounded border border-neutral-800 p-4">
-      <legend class="px-2 text-sm text-neutral-300">Content rating preference</legend>
-      <p class="text-xs text-neutral-500">
+    <fieldset class="mp-panel rounded-sm p-5">
+      <legend class="mp-eyebrow px-2" style="color: var(--mp-brass);">Content rating</legend>
+      <p class="text-[11px] text-[var(--mp-ink-faint)] mb-4 mt-1">
         Characters whose rating exceeds this are hidden from you.
       </p>
       {% set cur = player.max_content_rating.value if player.max_content_rating.value is defined else player.max_content_rating %}
-      <label class="flex items-start gap-3 cursor-pointer">
-        <input type="radio" name="max_content_rating" value="family" {% if cur == 'family' %}checked{% endif %}
-               class="mt-1 accent-emerald-400" />
-        <div>
-          <div class="text-sm font-medium">Family</div>
-          <div class="text-xs text-neutral-500">Kid-friendly. No swearing, no adult themes.</div>
-        </div>
-      </label>
-      <label class="flex items-start gap-3 cursor-pointer">
-        <input type="radio" name="max_content_rating" value="mature" {% if cur == 'mature' %}checked{% endif %}
-               class="mt-1 accent-emerald-400" />
-        <div>
-          <div class="text-sm font-medium">Mature</div>
-          <div class="text-xs text-neutral-500">Adult tone allowed. Mild swearing, adult humor. No explicit content.</div>
-        </div>
-      </label>
-      <label class="flex items-start gap-3 cursor-pointer">
-        <input type="radio" name="max_content_rating" value="unrestricted" {% if cur == 'unrestricted' %}checked{% endif %}
-               class="mt-1 accent-emerald-400" />
+
+      {% macro rating_row(key, title, desc) %}
+      <label class="flex items-start gap-3 cursor-pointer py-2">
+        <input type="radio" name="max_content_rating" value="{{ key }}" {% if cur == key %}checked{% endif %}
+               class="mt-1 accent-[var(--mp-brass)]" />
         <div>
-          <div class="text-sm font-medium">Unrestricted</div>
-          <div class="text-xs text-neutral-500">Character authors take full responsibility. The LLM still refuses genuinely harmful content.</div>
+          <div class="mp-display text-[16px] text-[var(--mp-ink)]">{{ title }}</div>
+          <div class="text-[12px] text-[var(--mp-ink-faint)] mt-0.5">{{ desc }}</div>
         </div>
       </label>
+      {% endmacro %}
+
+      {{ rating_row('family',       'Family',        'Kid-friendly. No swearing, no adult themes.') }}
+      {{ rating_row('mature',       'Mature',        'Adult tone allowed. Mild swearing, adult humor. No explicit content.') }}
+      {{ rating_row('unrestricted', 'Unrestricted', 'Character authors take full responsibility. The LLM still refuses genuinely harmful content.') }}
     </fieldset>
 
-    <button class="rounded bg-emerald-500 px-5 py-2 font-medium text-neutral-900 hover:bg-emerald-400">
-      Save
-    </button>
+    <button class="mp-btn mp-btn-brass" style="padding: 0.65rem 1.4rem;">Save</button>
   </form>
 </div>
 {% endblock %}

app/web/templates/summary.html

@@ -4,141 +4,143 @@
 
 {% block content %}
 
-<div class="max-w-3xl mx-auto">
+{# Summary page — framed like a private dossier. Wax-seal masthead, Elo
+   ledger, memories as italicised excerpts, opponent's note set in quotes. #}
+
+<div class="max-w-3xl mx-auto mp-enter mp-enter-1">
 
   <div class="flex items-start gap-6 mb-8">
-    <div class="text-6xl">{{ character.avatar_emoji or "♟" }}</div>
+    <div class="shrink-0 w-20 h-20 flex items-center justify-center border border-[var(--mp-brass-dim)] bg-[var(--mp-surface-2)] rounded-sm text-5xl leading-none">
+      {{ character.avatar_emoji or "♟" }}
+    </div>
     <div class="flex-1">
-      <div class="text-sm uppercase tracking-widest text-neutral-500">Match against</div>
-      <h1 class="text-3xl font-semibold">{{ character.name }}</h1>
-      <p class="text-neutral-400 mt-1">{{ character.short_description }}</p>
+      <div class="mp-eyebrow mb-2">Match against</div>
+      <h1 class="mp-display text-[36px] leading-[1] tracking-tight">{{ character.name }}</h1>
+      <p class="text-[13px] text-[var(--mp-ink-muted)] mt-2 mp-clamp-2">{{ character.short_description }}</p>
     </div>
-    <a href="/" class="rounded border border-neutral-700 text-sm px-3 py-1.5 text-neutral-300 hover:border-neutral-500">
-      ← Back home
-    </a>
+    <a href="/" class="mp-btn mp-btn-ghost self-start">← Home</a>
   </div>
 
-  {# --- Outcome + Elo card ---------------------------------------------- #}
+  {# --- Outcome + Elo ledger --------------------------------------------- #}
 
-  <section class="rounded-lg border border-neutral-800 bg-neutral-900/60 p-6 mb-6">
+  <section class="mp-panel-raised mp-framed rounded-sm p-7 mb-6 mp-enter mp-enter-2 relative">
+    <span class="mp-frame-tl"></span><span class="mp-frame-br"></span>
     <div class="flex items-start justify-between gap-6">
       <div>
-        <div class="text-xs uppercase tracking-wider text-neutral-500 mb-1">Result</div>
-        <div class="text-2xl font-medium
-          {% if player_outcome == 'win' %}text-emerald-300
-          {% elif player_outcome == 'loss' %}text-rose-300
-          {% elif player_outcome == 'draw' %}text-neutral-300
-          {% else %}text-amber-300{% endif %}">
-          {% if player_outcome == 'win' %}You won
-          {% elif player_outcome == 'loss' %}You lost
-          {% elif player_outcome == 'draw' %}Draw
-          {% elif player_outcome == 'resigned' %}You resigned
+        <div class="mp-eyebrow mb-2">Result</div>
+        <div class="mp-display text-[34px] leading-none tracking-tight
+          {% if player_outcome == 'win' %}text-[var(--mp-felt-bright)]
+          {% elif player_outcome == 'loss' %}text-[#E79E9B]
+          {% elif player_outcome == 'draw' %}text-[var(--mp-ink)]
+          {% else %}text-[var(--mp-brass-bright)]{% endif %}">
+          {% if player_outcome == 'win' %}You won.
+          {% elif player_outcome == 'loss' %}You lost.
+          {% elif player_outcome == 'draw' %}A draw.
+          {% elif player_outcome == 'resigned' %}You resigned.
           {% else %}{{ player_outcome or 'unresolved' }}{% endif %}
         </div>
-        <div class="text-sm text-neutral-500 mt-0.5">{{ match.move_count }} half-moves · {{ character.name }}'s side: {{ char_color }}</div>
+        <div class="text-[12px] text-[var(--mp-ink-faint)] mt-2 mp-mono uppercase tracking-[0.12em]">
+          {{ match.move_count }} half-moves · {{ character.name }}'s side: {{ char_color }}
+        </div>
       </div>
 
       <div class="text-right">
-        <div class="text-xs uppercase tracking-wider text-neutral-500 mb-1">{{ character.name }}'s Elo</div>
-        <div class="text-2xl font-medium">
-          <span class="text-neutral-400">{{ elo_before }}</span>
-          <span class="mx-2 text-neutral-600">→</span>
-          <span class="{% if elo_delta_applied and elo_delta_applied > 0 %}text-emerald-300
-                       {% elif elo_delta_applied and elo_delta_applied < 0 %}text-rose-300
-                       {% else %}text-neutral-300{% endif %}">
+        <div class="mp-eyebrow mb-2">{{ character.name }}'s Elo</div>
+        <div class="mp-display text-[28px] leading-none">
+          <span class="text-[var(--mp-ink-faint)]">{{ elo_before }}</span>
+          <span class="mx-2 text-[var(--mp-ink-ghost)]">→</span>
+          <span class="{% if elo_delta_applied and elo_delta_applied > 0 %}text-[var(--mp-felt-bright)]
+                       {% elif elo_delta_applied and elo_delta_applied < 0 %}text-[#E79E9B]
+                       {% else %}text-[var(--mp-ink)]{% endif %}">
             {{ elo_after }}
           </span>
         </div>
         {% if elo_delta_applied is not none %}
-          <div class="text-xs mt-1
-                       {% if elo_delta_applied > 0 %}text-emerald-400
-                       {% elif elo_delta_applied < 0 %}text-rose-400
-                       {% else %}text-neutral-400{% endif %}">
+          <div class="text-[11px] mt-2 mp-mono uppercase tracking-[0.12em]
+                       {% if elo_delta_applied > 0 %}text-[var(--mp-felt-bright)]
+                       {% elif elo_delta_applied < 0 %}text-[#E79E9B]
+                       {% else %}text-[var(--mp-ink-faint)]{% endif %}">
             {{ "+" if elo_delta_applied > 0 else "" }}{{ elo_delta_applied }}
-            {% if floor_raised %}· floor bumped +25{% endif %}
+            {% if floor_raised %}<span class="text-[var(--mp-ink-faint)]">· floor +25</span>{% endif %}
           </div>
         {% endif %}
       </div>
     </div>
 
-    {# Elo math breakdown. #}
     {% if elo_breakdown %}
-      <div class="mt-5 pt-4 border-t border-neutral-800 text-sm text-neutral-400 font-mono">
-        <div class="text-xs uppercase tracking-wider text-neutral-500 mb-2 font-sans">How the delta was computed</div>
-        <div class="space-y-1">
-          <div>Outcome: <span class="text-neutral-200">{{ "+" if elo_breakdown.outcome > 0 else "" }}{{ elo_breakdown.outcome }}</span>
-            {% if elo_breakdown.outcome > 0 %}(win){% elif elo_breakdown.outcome < 0 %}(loss){% else %}(draw){% endif %}</div>
-          <div>Move quality: <span class="text-neutral-200">{{ "+" if elo_breakdown.move_quality > 0 else "" }}{{ elo_breakdown.move_quality }}</span>
-            <span class="text-neutral-500">(from eval losses both sides)</span></div>
-          {% if elo_breakdown.short_halved %}
-            <div class="text-neutral-500 italic">Match was short ({{ match.move_count }} &lt; 10 moves): halved</div>
-          {% endif %}
-          {% if elo_breakdown.rage_quit %}
-            <div class="text-neutral-500 italic">Rage-quit: move quality skipped</div>
-          {% endif %}
-          <div>Raw: <span class="text-neutral-200">{{ "+" if elo_breakdown.raw > 0 else "" }}{{ elo_breakdown.raw }}</span></div>
-          <div>× 0.1 gain, clamped ±30 = <span class="text-neutral-100 font-semibold">{{ "+" if elo_delta_applied > 0 else "" }}{{ elo_delta_applied }}</span></div>
+      <div class="mt-6 pt-5 border-t border-[var(--mp-hairline)]">
+        <div class="mp-eyebrow mb-3">How the delta was computed</div>
+        <div class="mp-mono text-[12px] text-[var(--mp-ink-muted)] space-y-1.5">
+          <div>Outcome <span class="text-[var(--mp-ink)]">{{ "+" if elo_breakdown.outcome > 0 else "" }}{{ elo_breakdown.outcome }}</span>
+            <span class="text-[var(--mp-ink-faint)]">
+              {% if elo_breakdown.outcome > 0 %}(win){% elif elo_breakdown.outcome < 0 %}(loss){% else %}(draw){% endif %}
+            </span>
+          </div>
+          <div>Move quality <span class="text-[var(--mp-ink)]">{{ "+" if elo_breakdown.move_quality > 0 else "" }}{{ elo_breakdown.move_quality }}</span>
+            <span class="text-[var(--mp-ink-faint)]">(eval loss, both sides)</span>
+          </div>
+          {% if elo_breakdown.short_halved %}<div class="italic text-[var(--mp-ink-faint)]">Short match ({{ match.move_count }} &lt; 10 moves): halved</div>{% endif %}
+          {% if elo_breakdown.rage_quit %}<div class="italic text-[var(--mp-ink-faint)]">Rage-quit: move quality skipped</div>{% endif %}
+          <div>Raw <span class="text-[var(--mp-ink)]">{{ "+" if elo_breakdown.raw > 0 else "" }}{{ elo_breakdown.raw }}</span></div>
+          <div>× 0.1 gain, clamped ±30 ⇒ <span class="text-[var(--mp-brass-bright)] font-semibold">{{ "+" if elo_delta_applied > 0 else "" }}{{ elo_delta_applied }}</span></div>
         </div>
       </div>
     {% endif %}
   </section>
 
-  {# --- Generated memories ---------------------------------------------- #}
+  {# --- Generated memories — italicised excerpts ------------------------- #}
 
   {% if generated_memories %}
-    <section class="mb-6">
-      <h2 class="text-sm uppercase tracking-wider text-neutral-500 mb-3">
-        What {{ character.name }} will remember
-      </h2>
-      <div class="space-y-3">
+    <section class="mb-6 mp-enter mp-enter-3">
+      <h2 class="mp-eyebrow mb-3">What {{ character.name }} will remember</h2>
+      <div class="space-y-4">
         {% for mem in generated_memories %}
-          <article class="rounded-lg border border-indigo-800/40 bg-gradient-to-br from-indigo-950/40 to-neutral-900/60 p-5">
-            <p class="text-neutral-100 leading-relaxed italic">"{{ mem.narrative_text }}"</p>
-            <div class="mt-3 flex flex-wrap items-center gap-1.5 text-xs">
+          <article class="mp-panel rounded-sm p-5" style="border-left: 3px solid var(--mp-brass);">
+            <p class="mp-display italic text-[17px] text-[var(--mp-ink)] leading-relaxed">"{{ mem.narrative_text }}"</p>
+            <div class="mt-4 flex flex-wrap items-center gap-2 text-[11px] mp-mono uppercase tracking-[0.1em]">
               {% for trig in mem.triggers[:6] %}
-                <span class="rounded-full bg-indigo-900/40 border border-indigo-700/60 px-2 py-0.5 text-indigo-200">{{ trig }}</span>
+                <span class="mp-chip" style="background: rgba(201,166,107,0.08); color: var(--mp-brass); border-color: rgba(201,166,107,0.25);">{{ trig }}</span>
               {% endfor %}
-              <span class="ml-2 text-neutral-600">
+              <span class="ml-auto text-[var(--mp-ink-faint)] normal-case tracking-normal">
                 valence {{ "%+.1f"|format(mem.emotional_valence) }}
               </span>
             </div>
           </article>
         {% endfor %}
       </div>
-      <p class="text-xs text-neutral-500 italic mt-3">
+      <p class="text-[12px] text-[var(--mp-ink-faint)] italic mt-4 mp-display">
         Next time you play {{ character.name }}, these may surface.
       </p>
     </section>
   {% elif analysis_status == 'running' or analysis_status == 'pending' %}
-    <section class="mb-6 rounded border border-neutral-800 bg-neutral-900/40 p-5 text-sm text-neutral-400">
+    <section class="mb-6 mp-panel rounded-sm p-5 text-[13px] text-[var(--mp-ink-muted)]">
+      <span class="mp-livedot" style="background: var(--mp-brass-bright);"></span>
       {{ character.name }} is still reflecting on the match. Refresh in a moment.
     </section>
   {% else %}
-    <section class="mb-6 rounded border border-neutral-800 bg-neutral-900/40 p-5 text-sm text-neutral-400">
+    <section class="mb-6 mp-panel rounded-sm p-5 text-[13px] text-[var(--mp-ink-muted)]">
       {{ character.name }} didn't form a new memory from this one.
     </section>
   {% endif %}
 
-  {# --- Opponent note --------------------------------------------------- #}
+  {# --- Opponent's note — set like a margin quotation -------------------- #}
 
   {% if narrative_summary %}
-    <section class="mb-6 rounded-lg border border-neutral-800 bg-neutral-900/60 p-5">
-      <div class="text-xs uppercase tracking-wider text-neutral-500 mb-2">
-        {{ character.name }}'s note about you
-      </div>
-      <p class="text-neutral-200 italic leading-relaxed">"{{ narrative_summary }}"</p>
+    <section class="mb-6 mp-panel-raised rounded-sm p-6" style="border-left: 3px solid var(--mp-felt);">
+      <div class="mp-eyebrow mb-3">{{ character.name }}'s note about you</div>
+      <p class="mp-display italic text-[18px] text-[var(--mp-ink)] leading-relaxed">"{{ narrative_summary }}"</p>
     </section>
   {% endif %}
 
-  {# --- Critical moments ------------------------------------------------ #}
+  {# --- Critical moments ------------------------------------------------- #}
 
   {% if critical_moments %}
     <section class="mb-6">
-      <h2 class="text-sm uppercase tracking-wider text-neutral-500 mb-3">Turning points</h2>
-      <ul class="space-y-1.5 text-sm text-neutral-300">
+      <h2 class="mp-eyebrow mb-3">Turning points</h2>
+      <ul class="space-y-2 text-[13px] text-[var(--mp-ink-muted)]">
         {% for cm in critical_moments %}
-          <li class="flex gap-2">
-            <span class="text-neutral-600 font-mono text-xs pt-0.5">{{ cm.move_number }}.</span>
+          <li class="flex gap-3">
+            <span class="mp-mono text-[var(--mp-brass)] shrink-0">{{ cm.move_number }}.</span>
             <span>{{ cm.label }}</span>
           </li>
         {% endfor %}
@@ -146,19 +148,12 @@
     </section>
   {% endif %}
 
-  {# --- Actions --------------------------------------------------------- #}
-
-  <div class="mt-8 flex gap-3 border-t border-neutral-800 pt-6">
+  <div class="mt-10 pt-6 border-t border-[var(--mp-hairline)] flex gap-3">
     <form method="POST" action="/play/{{ character.id }}">
-      <button class="rounded bg-emerald-500 hover:bg-emerald-400 text-neutral-900 font-medium px-4 py-2 text-sm">
-        Rematch
-      </button>
+      <button class="mp-btn mp-btn-brass">Rematch</button>
     </form>
-    <a href="/" class="rounded border border-neutral-700 px-4 py-2 text-sm text-neutral-300 hover:border-neutral-500 self-center">
-      Pick someone else
-    </a>
+    <a href="/" class="mp-btn mp-btn-ghost self-center">Pick someone else</a>
   </div>
 
 </div>
-
 {% endblock %}

app/web/templates/watch.html

@@ -9,99 +9,96 @@
 <script src="https://cdnjs.cloudflare.com/ajax/libs/chessboard-js/1.0.0/chessboard-1.0.0.min.js"></script>
 <script src="https://cdn.socket.io/4.7.5/socket.io.min.js"></script>
 <style>
-  .white-1e1d7 { background-color: #e6e6e6 !important; }
-  .black-3c85d { background-color: #525866 !important; }
+  /* Chat + connection styling is inherited from base.html. */
   .memory-ribbon { transition: opacity 0.8s ease-in-out; }
   .memory-ribbon.fading { opacity: 0.35; }
-  .chat-bubble-agent {
-    background: linear-gradient(180deg, rgba(71,85,105,0.35), rgba(51,65,85,0.25));
-    border-left: 2px solid #60a5fa;
+  .mp-board-frame {
+    padding: 10px;
+    background: linear-gradient(180deg, rgba(201,166,107,0.08), rgba(201,166,107,0.02)), var(--mp-surface-2);
+    border: 1px solid var(--mp-brass-dim); position: relative;
   }
-  .chat-bubble-player {
-    background: linear-gradient(180deg, rgba(29,78,216,0.2), rgba(29,78,216,0.1));
-    border-left: 2px solid #f59e0b;
-    margin-left: 1.5rem;
+  .mp-board-frame::before {
+    content: ''; position: absolute; inset: 4px;
+    border: 1px solid rgba(201,166,107,0.18); pointer-events: none;
   }
-  .chat-bubble-spectator {
-    background: rgba(15, 23, 42, 0.4);
-    border-left: 2px solid #a78bfa;
-  }
-  .chat-bubble-spectator.in-transit { opacity: 0.6; }
-  .conn-live   { background: rgba(16, 185, 129, 0.18); color: #6ee7b7; }
-  .conn-retry  { background: rgba(245, 158, 11, 0.18); color: #fcd34d; }
-  .conn-lost   { background: rgba(244, 63, 94, 0.18); color: #fda4af; }
 </style>
 {% endblock %}
 
 {% block content %}
-<div class="flex items-start gap-6 mb-4">
-  <div class="text-5xl">{{ character.avatar_emoji or "♟" }}</div>
+<div class="flex items-start gap-6 mb-6 mp-enter mp-enter-1">
+  <div class="shrink-0 w-16 h-16 flex items-center justify-center border border-[var(--mp-brass-dim)] bg-[var(--mp-surface-2)] rounded-sm text-4xl leading-none">
+    {{ character.avatar_emoji or "♟" }}
+  </div>
   <div class="flex-1">
-    <h1 class="text-2xl font-semibold">{{ character.name }} <span class="text-neutral-500 text-base font-normal">vs @{{ match_owner.username }}</span></h1>
-    <p class="text-sm text-neutral-400">
+    <div class="mp-eyebrow mb-1">Spectating</div>
+    <h1 class="mp-display text-[30px] leading-[1]">
+      {{ character.name }} <span class="mp-italic text-[var(--mp-ink-muted)] text-[22px]">vs</span> <span class="mp-mono text-[18px] text-[var(--mp-ink-muted)] align-middle">@{{ match_owner.username }}</span>
+    </h1>
+    <p class="text-[13px] text-[var(--mp-ink-muted)] mt-2 mp-clamp-2 max-w-xl">
       {{ character.short_description }}
-      · playing at ~{{ match.character_elo_at_start }} Elo
-      · spectating as <span class="text-indigo-300">@{{ player.username }}</span>
-    </p>
-    <p class="text-xs text-neutral-500 mt-1">
-      mood: <span id="emotion-indicator" class="font-medium text-neutral-300">—</span>
     </p>
+    <div class="mt-2 flex items-center gap-4 text-[11px] mp-mono uppercase tracking-[0.12em] text-[var(--mp-ink-faint)]">
+      <span>~{{ match.character_elo_at_start }} Elo</span>
+      <span>·</span>
+      <span>mood <span id="emotion-indicator" class="text-[var(--mp-ink-muted)]">—</span></span>
+      <span>·</span>
+      <span style="color: var(--mp-ink-blue-alt);">you: @{{ player.username }}</span>
+    </div>
   </div>
-  <div class="text-right text-sm">
-    <div id="match-status" class="font-medium">
+  <div class="text-right text-sm shrink-0">
+    <div id="match-status" class="mp-display text-[17px]">
       {% if match.status.value == "in_progress" %}
-        <span class="text-emerald-300">In progress</span>
+        <span class="text-[var(--mp-felt-bright)]">In progress</span>
       {% elif match.status.value == "completed" %}
-        <span class="text-amber-300">Finished</span>
+        <span class="text-[var(--mp-brass-bright)]">Finished</span>
       {% else %}
-        <span class="text-rose-300">Abandoned</span>
+        <span class="text-[#E79E9B]">Abandoned</span>
       {% endif %}
     </div>
-    <div class="text-neutral-500 text-xs" id="match-result">
+    <div class="text-[var(--mp-ink-faint)] text-[11px] mp-mono uppercase tracking-[0.12em] mt-1" id="match-result">
       {{ match.result.value if match.result else "" }}
     </div>
-    <div id="conn-pill" class="mt-2 inline-block rounded px-2 py-0.5 text-[10px] uppercase tracking-wider conn-retry">
-      connecting…
-    </div>
-    <div id="spectator-count" class="mt-1 text-[10px] text-neutral-500 uppercase tracking-wider">— watching</div>
+    <div id="conn-pill" class="conn-pill conn-retry mt-3">connecting…</div>
+    <div id="spectator-count" class="mt-2 text-[10px] mp-mono uppercase tracking-[0.15em]" style="color: var(--mp-ink-blue-alt);">— watching</div>
   </div>
 </div>
 
-<div class="grid grid-cols-1 lg:grid-cols-[minmax(0,480px)_minmax(0,1fr)] gap-6">
+<div class="grid grid-cols-1 lg:grid-cols-[minmax(0,500px)_minmax(0,1fr)] gap-6 mp-enter mp-enter-2">
   <div>
-    <div id="board" class="w-full max-w-[480px]"></div>
-    <div id="memory-ribbon" class="hidden mt-4 text-sm italic text-neutral-400 border-l-2 border-indigo-700/60 pl-3 memory-ribbon">
-      <span id="memory-ribbon-lede">{{ character.name }} is reminded of something…</span>
-      <div id="memory-ribbon-items" class="mt-2 space-y-2"></div>
+    <div class="mp-board-frame">
+      <div id="board" class="w-full max-w-[480px]"></div>
+    </div>
+    <div id="memory-ribbon" class="hidden mt-5 text-[13px] italic text-[var(--mp-ink-muted)] border-l-2 pl-4 memory-ribbon"
+         style="border-color: var(--mp-brass-dim); background: linear-gradient(90deg, rgba(201,166,107,0.05), transparent);">
+      <span id="memory-ribbon-lede" class="mp-display">{{ character.name }} is reminded of something…</span>
+      <div id="memory-ribbon-items" class="mt-3 space-y-2"></div>
     </div>
   </div>
 
-  <div class="flex flex-col gap-4 min-h-[480px]">
+  <div class="flex flex-col gap-5 min-h-[480px]">
     <div>
-      <h2 class="text-sm uppercase tracking-wider text-neutral-400 mb-2">Table talk</h2>
-      <div id="chat-log" class="text-sm text-neutral-200 bg-neutral-900 border border-neutral-800 rounded p-4 h-[220px] overflow-y-auto space-y-2">
-        <div class="text-xs text-neutral-500 italic">No messages yet.</div>
+      <h2 class="mp-eyebrow mb-2">Table talk</h2>
+      <div id="chat-log" class="mp-panel rounded-sm text-sm p-4 h-[220px] overflow-y-auto space-y-2">
+        <div class="text-[12px] text-[var(--mp-ink-faint)] italic">No messages yet.</div>
       </div>
     </div>
 
     <div>
       <div class="flex items-center justify-between mb-2">
-        <h2 class="text-sm uppercase tracking-wider text-neutral-400">Crowd noise</h2>
-        <span class="text-[10px] text-neutral-500 italic">the character can't hear you</span>
+        <h2 class="mp-eyebrow">Crowd noise</h2>
+        <span class="text-[10px] text-[var(--mp-ink-ghost)] italic">the character can't hear you</span>
       </div>
-      <div id="spectator-log" class="text-sm text-neutral-300 bg-neutral-900 border border-neutral-800 rounded p-4 h-[180px] overflow-y-auto space-y-2">
-        <div class="text-xs text-neutral-500 italic">Say something…</div>
+      <div id="spectator-log" class="mp-panel rounded-sm text-sm p-3 h-[180px] overflow-y-auto space-y-2">
+        <div class="text-[12px] text-[var(--mp-ink-faint)] italic">Say something…</div>
       </div>
-      <div class="mt-2 flex gap-2">
-        <input id="spec-input" type="text" maxlength="500" placeholder="Crowd chat (Enter to send)…"
-               class="flex-1 rounded bg-neutral-900 border border-neutral-800 px-3 py-1.5 text-sm focus:outline-none focus:border-indigo-600" />
+      <div class="mt-2">
+        <input id="spec-input" type="text" maxlength="500" placeholder="Crowd chat (Enter to send)…" class="mp-input w-full" />
       </div>
     </div>
 
     <div>
-      <h2 class="text-sm uppercase tracking-wider text-neutral-400 mb-2">Moves</h2>
-      <ol id="move-list" class="text-sm font-mono text-neutral-200 bg-neutral-900 border border-neutral-800 rounded p-4 h-[180px] overflow-y-auto">
-      </ol>
+      <h2 class="mp-eyebrow mb-2">Moves</h2>
+      <ol id="move-list" class="mp-panel rounded-sm p-4 h-[180px] overflow-y-auto mp-mono text-[13px] text-[var(--mp-ink)]"></ol>
     </div>
   </div>
 </div>

docs/design_system.md

@@ -0,0 +1,130 @@
+# Metropolis design system (Phase 3c polish pass)
+
+A small, intentional vocabulary — not a framework. Tokens live in `app/web/templates/base.html`;
+Tailwind (CDN) supplies the utility classes around them. No build step.
+
+## Aesthetic direction
+
+**"A discreet old-world chess café, crossed with a precise digital instrument."**
+Brass and ink and felt and parchment, under warm incandescent light. Dark theme with warm undertones (not cool neutrals). Serifs for voice, mono for numbers, sans for body. Restraint beats density.
+
+- Character cards feel like **member dossiers or trading cards**, not SaaS tiles.
+- The board is the **hero** on the play page — framed in brass.
+- Leaderboards are treated like **a club's posted standings**.
+- The post-match summary is the **payoff screen** — half dossier, half quotation.
+
+## Color tokens
+
+Defined as CSS custom properties on `:root`. Reference via `var(--mp-…)`.
+
+| Token                    | Value       | Use                                                      |
+| ------------------------ | ----------- | -------------------------------------------------------- |
+| `--mp-bg`                | `#0F1412`   | Page background (felt in shadow)                         |
+| `--mp-surface-1`         | `#151B19`   | Primary panel                                            |
+| `--mp-surface-2`         | `#1C2320`   | Raised card                                              |
+| `--mp-surface-3`         | `#232A27`   | Hover lift                                               |
+| `--mp-hairline`          | `#2E3430`   | Subtle border                                            |
+| `--mp-hairline-2`        | `#3A4038`   | Stronger border                                          |
+| `--mp-ink`               | `#EDE4CE`   | Primary text (parchment)                                 |
+| `--mp-ink-muted`         | `#B5AD96`   | Secondary text                                           |
+| `--mp-ink-faint`         | `#7F7966`   | Captions, metadata                                       |
+| `--mp-ink-ghost`         | `#4C483E`   | Placeholders, dividers-in-text                           |
+| `--mp-brass`             | `#C9A66B`   | Primary accent — links, highlights, CTA                  |
+| `--mp-brass-bright`      | `#E0C38F`   | Emphasis / live-state / hover                            |
+| `--mp-brass-dim`         | `#8E7649`   | Borders under brass elements                             |
+| `--mp-felt`              | `#2F6B5C`   | In-progress / success                                    |
+| `--mp-felt-bright`       | `#4FA48D`   | Live indicators                                          |
+| `--mp-oxblood`           | `#A8423F`   | Resign / danger                                          |
+| `--mp-ink-blue`          | `#5879A3`   | Spectator / secondary informational                      |
+| `--mp-ink-blue-alt`      | `#8DA4C3`   | Spectator emphasis                                       |
+| `--mp-rating-*`          | (see base) | Family / mature / unrestricted chips                     |
+
+## Typography
+
+| Role    | Font                  | Notes                                                                 |
+| ------- | --------------------- | --------------------------------------------------------------------- |
+| Display | **Fraunces**          | Optical sizing + SOFT/WONK variable axes for subtle character. Use `.mp-display` (standard), `.mp-italic` (quotations), `.mp-display-tight` (headings). |
+| Body    | **IBM Plex Sans**     | Default on `<body>`. Weights 300/400/500/600 available.               |
+| Mono    | **IBM Plex Mono**     | Elo, move lists, usernames, eyebrow labels. `.mp-mono`.               |
+
+Scale:
+- H1 pages: `text-[36–44px]` in `.mp-display` with `leading-[0.95–1]` and `tracking-tight`.
+- H2 sections: `.mp-eyebrow` — 10px mono uppercase with `0.18em` tracking. Use instead of Tailwind's `text-sm uppercase tracking-wider`.
+- Body copy: `text-[13–14px]` with `text-[var(--mp-ink-muted)]`.
+- Display quotations / lede italic: `mp-display mp-italic`.
+
+## Motion
+
+Restraint is the rule. One choreographed page entrance, a few subtle hovers, no bouncy everything.
+
+- **Page entry**: `.mp-enter` + `.mp-enter-1/2/3` staggered reveal (fade + 8px slide-up, cubic-bezier ease, 520ms). Apply to the two or three primary sections of each page.
+- **Live pulse**: `.mp-livedot` — 6px dot breathing at 2s cadence. Used for live-match indicators, `agent_thinking` badge, ongoing post-match.
+- **Hovers**: cards and rows lift via `.mp-panel-raised:hover` (surface + border transition). Links shift to `--mp-brass-bright` on hover.
+- **Custom easing**: `--mp-ease: cubic-bezier(0.22, 0.61, 0.36, 1)` — snappy decel, not bouncy.
+
+## Components
+
+### Panel primitives
+- `.mp-panel` — flat panel, 1px hairline border.
+- `.mp-panel-raised` — hover-able card (lifts on hover).
+- `.mp-framed` — adds brass corner marks (top-right + bottom-left by default; pair with `.mp-frame-tl` + `.mp-frame-br` spans for all four).
+
+### Buttons
+- `.mp-btn` + one of: `.mp-btn-brass` (primary, brushed-brass gradient with inset highlight), `.mp-btn-ghost` (outlined), `.mp-btn-danger` (oxblood, for resign/delete).
+
+### Chips
+- `.mp-chip` — 10px mono uppercase pill, used for rating badges, result chips, status.
+- Rating chips use `--mp-rating-*` tokens.
+- Result chips: `{{ result_chip(m) }}` macro renders Live/Resigned/Draw/White/Black with the right palette.
+
+### Inputs
+- `.mp-input` — engraved field. Brass border on focus. Pair with `.mp-eyebrow` labels.
+
+### Board frame (play + watch)
+- `.mp-board-frame` — padded brass-bordered wrapper around `chessboard.js`. Double-ruled via `::before` pseudo-element to evoke a framed set.
+
+### Connection pill (play + watch)
+- `.conn-pill` + `.conn-live` / `.conn-retry` / `.conn-lost` — uppercase 10px mono pills with semantic coloring.
+
+### Chat bubbles (play + watch)
+- `.chat-bubble-agent` — felt-green left border.
+- `.chat-bubble-player` — brass left border, indented.
+- `.chat-bubble-spectator` — blue-grey left border. `.in-transit` fades to 0.55 opacity (optimistic render).
+
+### Jinja partials
+Shared under `app/web/templates/_partials/`:
+- `_macros.html` — `rating_badge`, `character_state_badge`, `visibility_badge`, `preset_badge`, `result_chip`.
+- `character_card.html` — member-dossier card, used on `/`, `/discovery`, and player profile.
+- `match_row.html` — live / recent match row on `/discovery`.
+
+## Anti-patterns (deliberately avoided)
+
+- **Inter / Roboto / system sans** — overused, generic. Fraunces + IBM Plex Sans is distinctive and recognisable.
+- **Cool greys (`#737373` ilk)** — feel clinical. The palette uses warm ink (`#B5AD96`) that matches parchment.
+- **Purple-blue gradient tiles on white** — textbook AI-slop. We use dark felt with brass accents instead.
+- **Emoji-heavy icons** — restricted to `avatar_emoji` on characters (they're the character's portrait, framed) and the occasional `›` chevron. No sprinkled decorative emoji.
+- **Animated everything** — motion is reserved for the page entry, live states, and hover. No confetti, no continuous ambient motion.
+
+## Where the polish is applied
+
+| Page                             | Level of polish                                                    |
+| -------------------------------- | ------------------------------------------------------------------ |
+| `/` (Characters)                 | Full — new header, card partial, brass rule, enter choreography.   |
+| `/discovery`                     | Full — eyebrows, three sectioned surfaces, reused partials.        |
+| `/matches/{id}` (Play)           | Full — board in brass frame, typography, thinking state, disconnect overlay. |
+| `/matches/{id}/watch` (Spectate) | Full — read-only variant, crowd-noise panel with blue accent.      |
+| `/matches/{id}/summary`          | Full — payoff screen: dossier-style result, italicised memories, brass accent on opponent note. |
+| `/leaderboard/characters`        | Full — library-catalog tables, rank highlighted for top 3 in brass. |
+| `/leaderboard/players`           | Full — same treatment, current user row highlighted.               |
+| `/characters/{id}` (Detail)      | Header polished; hall-of-fame + memory sections on new tokens; body form sections inherit typography but still use Tailwind neutral classes. |
+| `/characters/new`, `/edit`       | Light — new heading + brass submit button; form body inherits typography from base. |
+| `/settings`                      | Full — panel groupings, brass radio accent.                        |
+| `/login`, `/landing`             | Full — typographic hero, framed form, member-entrance eyebrow.     |
+| `/players/{username}` (Profile)  | Full — dossier header, match rows, character card grid.            |
+
+## Known gaps (for a follow-up polish)
+
+- Character-detail memory ribbon section (body area below hero) still uses Tailwind neutral classes. Readable; out of palette.
+- `new.html`/`edit.html` form body (inputs, fieldsets, sliders) not yet fully converted to `.mp-input` + `.mp-panel` idioms — the brass submit button + new header bring them into the system but the fields themselves retain the Phase 3a styling.
+- `rating_hidden.html` (shown when a character exceeds the viewer's rating) untouched — low-traffic page.
+- No responsive breakpoint review yet — the layout degrades gracefully on mobile thanks to Tailwind's `grid-cols-1` fallbacks but there's no dedicated mobile pass.