diff --git a/README.md b/README.md
index 8ab396f..e43d4ea 100644
--- a/README.md
+++ b/README.md
@@ -46,6 +46,7 @@ La estructura relacional incluye usuarios, sesiones, salas/partidas, eventos, me
 
 ```sh
 npm run check
+npm run design:check
 npm test
 npm run build
 ```
@@ -74,4 +75,4 @@ Modalidades casuales, sin reloj, ranking, torneos, bots, espectadores ni penaliz
 
 Antes de abrir registro público quedan verificación y recuperación por correo (requieren proveedor SMTP), moderación/bloqueo/reportes, gestión de cuentas y políticas de conservación de datos. La versión está instalada en la VM con PostgreSQL y systemd. El acceso público requiere conectar DNS y el proxy HTTPS a juegoland.imaginacion.com; consulta deploy/server-status.md.
 
-La guía de instalación está en [deploy/README.md](deploy/README.md). La dirección visual y el prompt para otra herramienta están en [docs/design.md](docs/design.md).
+La guía de instalación está en [deploy/README.md](deploy/README.md). La dirección visual y el prompt para otra herramienta están en [docs/design.md](docs/design.md). Los tokens, sus roles y la política de estilos están en [docs/design-system.md](docs/design-system.md). La auditoría `design:check` detecta valores de tipografía, espaciado y radios escritos a mano y variables CSS sin definir; también se ejecuta antes de activar un despliegue.
diff --git a/deploy/deploy-native.ps1 b/deploy/deploy-native.ps1
index bb3cae8..3c09ee4 100644
--- a/deploy/deploy-native.ps1
+++ b/deploy/deploy-native.ps1
@@ -26,6 +26,7 @@ local_address=$(ip -4 -o addr show scope global | awk '{split($4,a,"/");print a[
 test -n "$local_address"
 runuser -u mesa -- env HOME=/var/lib/mesa-abierta npm config set local-address "$local_address" --location=user
 runuser -u mesa -- env HOME=/var/lib/mesa-abierta NODE_OPTIONS=--dns-result-order=ipv4first npm ci --local-address="$local_address" --no-audit --no-fund
+runuser -u mesa -- npm run design:check
 runuser -u mesa -- npm run check
 runuser -u mesa -- npm test -- --maxWorkers=1
 runuser -u mesa -- npm run build
diff --git a/deploy/server-status.md b/deploy/server-status.md
index f8dad78..419497f 100644
--- a/deploy/server-status.md
+++ b/deploy/server-status.md
@@ -1,6 +1,6 @@
 # Servidor de Juegoland
 
-Versión 20261004-08. Web, API y WebSockets en mesa-game, 0.0.0.0:3000.
+Versión 20261004-10. Web, API y WebSockets en mesa-game, 0.0.0.0:3000.
 El proxy Nginx existente de la red apunta a http://192.168.18.155:3000.
 Nginx y el antiguo servicio mesa-web están deshabilitados en la VM.
 
@@ -12,4 +12,6 @@ El popup breve llega abierto en el HTML del servidor y pasa a modal nativo al in
 El despliegue conserva los archivos inmutables del cliente anterior para que las pestañas abiertas puedan seguir cargando sus componentes.
 Damas mantiene la ficha seleccionada durante capturas encadenadas y permite recorrido diagonal largo de las damas. Las partidas existentes siguen disponibles.
 
+La interfaz consume `src/tokens.css`: tipografía proporcional de 16 a 18 px, espaciados, radios, sombras y colores de claro/oscuro y de las tres paletas. Los estilos globales se concentran en `src/app.css`; la geometría de los tableros permanece en sus componentes. `npm run design:check` se ejecuta durante el despliegue. Se revisaron catálogo, perfil, menús, invitaciones, avatar y salas en el navegador integrado, con anchos de 390, 565, 1440 y 3818 px. Los nombres y datos de partidas comparten escala en catálogo, perfil y panel lateral; la navegación inferior se ajustó a su altura real.
+
 PostgreSQL permanece en loopback, con base y rol dedicados. Credenciales y datos existentes se conservan. APT y npm operan por IPv4. Copias diarias activas a las 03:15 Europe/Madrid.
diff --git a/docs/design-system.md b/docs/design-system.md
new file mode 100644
index 0000000..9814e39
--- /dev/null
+++ b/docs/design-system.md
@@ -0,0 +1,33 @@
+# Sistema visual de Juegoland
+
+La identidad la llevan el logo multicolor y los tableros. La interfaz acompaña con una sola familia, controles legibles y alineaciones compartidas. Esta consolidación mantiene las paletas existentes; concentra sus valores y retira las correcciones CSS duplicadas.
+
+## Tokens
+
+`src/tokens.css` define los valores compartidos. La base clara conserva fondo #f5f7fc, superficie #ffffff, texto #202c41, texto secundario #58677e, acento #0759d9 y borde #dde4f0. Los modos claro, oscuro y sistema y las paletas azul, bosque y violeta consumen los mismos nombres semánticos.
+
+Manrope se usa para títulos y texto. El cuerpo aumenta gradualmente de 16 a 18 px con el ancho disponible; los demás roles derivan de él. Un título de tarjeta usa `--type-subtitle`, una sección `--type-section`, el nombre de una partida `--type-body` y sus datos `--type-secondary`. El texto auxiliar usa `--type-detail`. El cambio de ancho no cambia estos roles.
+
+Los espaciados siguen una base de 4 px: 4, 8, 12, 16, 20, 24, 32, 40, 48 y 64. Hay 2 px para separaciones pequeñas. Los radios distinguen controles, tarjetas, paneles y diálogos; las sombras distinguen controles, tarjetas y capas flotantes.
+
+## Composición
+
+El catálogo alinea título, descripción, datos y acción dentro de cada tarjeta. Las partidas pendientes y las salas comparten tamaños de nombre y metadatos. El texto de lectura se limita a 70 caracteres de ancho. En una sala, el tablero ocupa el espacio disponible y los controles y el chat mantienen una escala de interfaz propia.
+
+```text
+Escritorio                         Móvil
+menú | contenido alineado          cabecera
+     | tarjetas y partidas         tarjeta
+     |                            tarjeta
+diálogo centrado                   diálogo con márgenes laterales
+```
+
+La marca y los tableros concentran el color y el detalle. Los controles comparten alineación, foco visible y tamaño táctil. Las animaciones de juego conservan sus reglas y respetan movimiento reducido.
+
+## Mantenimiento
+
+`src/app.css` contiene los estilos globales consolidados en el orden necesario para preservar la cascada. Los estilos locales de Svelte consumen los mismos tokens. No se crean hojas de correcciones superpuestas.
+
+Las coordenadas SVG, el recorrido de los tableros, los puntos y caras del dado y la geometría de las ilustraciones son valores de dibujo: se mantienen en sus componentes. Los puntos de ruptura permanecen como condiciones CSS explícitas, porque las variables CSS no se pueden usar directamente en las condiciones de `@media`.
+
+Antes de publicar: ejecutar `npm run design:check`, las comprobaciones del proyecto y revisar catálogo, perfil, diálogos y sala en móvil y escritorio, tanto en claro como en oscuro. La auditoría exige tokens para tamaños, familia, peso, interlineado y espaciado tipográfico; también revisa márgenes, rellenos, separaciones, radios y referencias a variables CSS.
diff --git a/package-lock.json b/package-lock.json
index 8ece67a..aa8a281 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21,6 +21,7 @@
         "@sveltejs/vite-plugin-svelte": "^7.3.1",
         "@types/node": "^24.0.0",
         "@types/pg": "^8.15.5",
+        "postcss": "8.5.28",
         "prettier": "^3.9.9",
         "prettier-plugin-svelte": "^4.1.1",
         "svelte": "^5.57.1",
diff --git a/package.json b/package.json
index 9673dc0..0e8d2ed 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "build": "vite build",
     "preview": "vite preview --host 127.0.0.1",
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json && tsc --project tsconfig.server.json --noEmit",
+    "design:check": "node scripts/check-design-tokens.mjs",
     "test": "vitest run",
     "start": "node --env-file-if-exists=.env server/production.mjs",
     "db:migrate": "node --env-file-if-exists=.env scripts/migrate.mjs"
@@ -32,6 +33,7 @@
     "@sveltejs/vite-plugin-svelte": "^7.3.1",
     "@types/node": "^24.0.0",
     "@types/pg": "^8.15.5",
+    "postcss": "8.5.28",
     "prettier": "^3.9.9",
     "prettier-plugin-svelte": "^4.1.1",
     "svelte": "^5.57.1",
diff --git a/scripts/check-design-tokens.mjs b/scripts/check-design-tokens.mjs
new file mode 100644
index 0000000..3a2b8af
--- /dev/null
+++ b/scripts/check-design-tokens.mjs
@@ -0,0 +1,98 @@
+import { readdir, readFile } from 'node:fs/promises';
+import { join } from 'node:path';
+import postcss from 'postcss';
+
+const problems = [];
+let checked = 0;
+const definitions = new Set();
+const references = [];
+const drawingFiles = new Set(['GameArt.svelte', 'ParchisMap.svelte']);
+const drawingSelector =
+  /\.(?:chess-piece|checker-piece|coordinate|parchis-token|dice-face|dice-cube|dice-stage|dice-shadow|face-\d|dice-cup|cup-shadow|throw-scene|go-target)\b/;
+
+async function inspect(path, css) {
+  const file = path.split(/[\\/]/).at(-1);
+  if (file === 'tokens.css' || drawingFiles.has(file)) return;
+  const parsed = postcss.parse(css, { from: path });
+  parsed.walkDecls((d) => {
+    let inKeyframes = false;
+    for (let parent = d.parent; parent; parent = parent.parent)
+      if (parent.type === 'atrule' && /keyframes$/.test(parent.name))
+        inKeyframes = true;
+    const selector = d.parent.type === 'rule' ? d.parent.selector : '';
+    if (
+      inKeyframes ||
+      drawingSelector.test(selector) ||
+      (file === 'Dice.svelte' && /^i(?:[.:]|$)/.test(selector)) ||
+      d.prop.startsWith('--')
+    )
+      return;
+    checked++;
+    const value = d.value.replace(/\b0(?:px|rem)\b/g, '0');
+    const absoluteSize = /\b\d+(?:\.\d+)?(?:px|rem)\b/;
+    if (
+      (d.prop === 'font-size' || d.prop === 'font') &&
+      !value.includes('var(') &&
+      !/^(?:0|inherit|initial|unset)$/.test(value)
+    )
+      problems.push(
+        `${path}:${d.source.start.line} — ${selector}: use a type token for ${d.prop}`,
+      );
+    if (
+      /^(?:font-weight|line-height|letter-spacing|font-family)$/.test(d.prop) &&
+      !value.includes('var(') &&
+      !/^(?:inherit|initial|unset|normal)$/.test(value)
+    )
+      problems.push(
+        `${path}:${d.source.start.line} — ${selector}: use a typography token for ${d.prop}`,
+      );
+    if (
+      /^(?:padding|margin)(?:-.+)?$|^(?:gap|row-gap|column-gap)$/.test(
+        d.prop,
+      ) &&
+      absoluteSize.test(value)
+    )
+      problems.push(
+        `${path}:${d.source.start.line} — ${selector}: use a spacing token for ${d.prop}`,
+      );
+    if (d.prop === 'border-radius' && absoluteSize.test(value))
+      problems.push(
+        `${path}:${d.source.start.line} — ${selector}: use a radius token`,
+      );
+  });
+}
+function collect(path, source) {
+  for (const match of source.matchAll(/(--[\w-]+)\s*:/g))
+    definitions.add(match[1]);
+  for (const match of source.matchAll(/style:(--[\w-]+)/g))
+    definitions.add(match[1]);
+  for (const match of source.matchAll(/var\((--[\w-]+)\s*\)/g))
+    references.push({ path, name: match[1] });
+}
+async function scan(directory) {
+  for (const entry of await readdir(directory, { withFileTypes: true })) {
+    const path = join(directory, entry.name);
+    if (entry.isDirectory()) await scan(path);
+    else if (entry.name.endsWith('.css')) {
+      const source = await readFile(path, 'utf8');
+      collect(path, source);
+      await inspect(path, source);
+    } else if (entry.name.endsWith('.svelte')) {
+      const source = await readFile(path, 'utf8');
+      collect(path, source);
+      const style = source.match(/<style[^>]*>([\s\S]*?)<\/style>/);
+      if (style) await inspect(path, style[1]);
+    }
+  }
+}
+await scan('src');
+for (const { path, name } of references)
+  if (!definitions.has(name))
+    problems.push(`${path} — undefined CSS variable ${name}`);
+if (problems.length) {
+  console.error(problems.join('\n'));
+  process.exitCode = 1;
+} else
+  console.log(
+    `Design tokens: ${checked} UI declarations checked; no hardcoded type, spacing or radius values.`,
+  );
diff --git a/src/app.css b/src/app.css
index 5a793d6..bac42d9 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1,42 +1,8 @@
-@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&family=Manrope:wght@400;500;600;650;700;750;800&display=swap');
-/* Theme tokens also serve as the integration point for future palettes. */
+/* Global interface rules. Shared values belong in tokens.css. */
 :root {
-  color-scheme: light;
-  --text: #202c41;
-  --background: #f5f7fc;
-  --surface: #ffffff;
-  --soft: #edf2fa;
-  --hero: #e8efff;
-  --accent: #0759d9;
-  --accent-hover: #0046b8;
-  --accent-text: #0759c4;
-  --secondary: #58677e;
-  --border: #dde4f0;
-  --danger-bg: #fff0ec;
-  --danger-text: #a32a27;
-  --shadow: #10274a1c;
-}
-:root[data-palette='forest'] { --accent:#14744f; --accent-hover:#0c5c3d; --accent-text:#116942; --hero:#e4f2e9; }
-:root[data-palette='violet'] { --accent:#7742bf; --accent-hover:#62329f; --accent-text:#6836af; --hero:#f0e9fc; }
-:root[data-theme='dark'] {
-  color-scheme: dark;
-  --text:#e8edf7; --background:#101827; --surface:#192438; --soft:#223149; --hero:#1c3052;
-  --accent:#397aee; --accent-hover:#2b69d3; --accent-text:#9bbeff; --secondary:#adbbd0; --border:#34445d;
-  --danger-bg:#442b32; --danger-text:#ffb5a9; --shadow:#0006;
-}
-:root[data-theme='dark'][data-palette='forest'] { --accent:#177f5a; --accent-hover:#106e4b; --accent-text:#7adab1; --hero:#183a30; }
-:root[data-theme='dark'][data-palette='violet'] { --accent:#8554d1; --accent-hover:#7744c5; --accent-text:#d2b4ff; --hero:#30244c; }
-:root {
-  font-family: 'DM Sans', system-ui, sans-serif;
   color: var(--text);
   background: var(--background);
   font-synthesis: none;
-  --green: var(--accent);
-  --green-dark: var(--accent-hover);
-  --muted: var(--secondary);
-  --line: var(--border);
-  --paper: var(--surface);
-  --terracotta: #bc7255;
 }
 * {
   box-sizing: border-box;
@@ -75,14 +41,6 @@ a {
 button {
   color: inherit;
 }
-button:focus-visible,
-a:focus-visible,
-input:focus-visible,
-select:focus-visible,
-textarea:focus-visible {
-  outline: 3px solid #b88f59;
-  outline-offset: 4px;
-}
 button svg,
 a svg {
   flex-shrink: 0;
@@ -93,50 +51,26 @@ h3,
 p {
   margin: 0;
 }
-h1,
-h2,
-h3 {
-  font-family: 'Manrope', 'DM Sans', sans-serif;
-}
-h2 {
-  font-size: 23px;
-  letter-spacing: -0.8px;
-  font-weight: 750;
-}
-h3 {
-  font-size: 19px;
-  letter-spacing: -0.45px;
-}
 p {
-  line-height: 1.65;
-}
-.muted {
-  color: var(--muted);
-}
-.small {
-  font-size: 13px;
+  line-height: var(--leading-relaxed);
 }
 .eyebrow {
-  font-size: 10px;
-  letter-spacing: 1.8px;
-  font-weight: 700;
-  color: #93998c;
+  font-weight: var(--weight-bold);
   display: block;
-  margin-bottom: 9px;
+  margin-bottom: var(--space-2);
 }
 .accent-dot {
-  color: var(--terracotta);
+  color: var(--art-terracotta);
 }
 .app-shell {
   display: flex;
   min-height: 100vh;
 }
 .sidebar {
-  width: 230px;
+  width: var(--layout-sidebar);
   flex-shrink: 0;
-  background: #fffefa;
-  border-right: 1px solid var(--line);
-  padding: 35px 22px 20px;
+  border-right: 1px solid var(--border);
+  padding: var(--space-8) var(--space-5) var(--space-5);
   position: fixed;
   inset: 0 auto 0 0;
   display: flex;
@@ -145,274 +79,217 @@ p {
 }
 .brand {
   display: flex;
-  align-items: center;
-  gap: 11px;
-  margin: 0 7px 55px;
-  font-family: 'Manrope', sans-serif;
-  font-size: 23px;
-  font-weight: 800;
-  letter-spacing: -1px;
-  line-height: 1.04;
+  font-family: var(--font-ui);
+  font-size: var(--type-section);
+  font-weight: var(--weight-heavy);
+  line-height: var(--leading-none);
 }
 .brand-mark {
   width: 42px;
   height: 45px;
-  border-radius: 13px;
-  background: var(--green);
-  color: #fffefa;
-  font-size: 35px;
+  border-radius: var(--radius-control);
+  background: var(--accent);
+  color: var(--secondary);
+  font-size: var(--symbol-small);
   display: grid;
   place-items: center;
   position: relative;
-  letter-spacing: -2px;
-  padding-bottom: 7px;
+  letter-spacing: var(--tracking-heading);
+  padding-bottom: var(--space-2);
 }
 .brand-mark > span {
-  font-size: 15px;
+  font-size: var(--symbol-small);
   position: absolute;
   right: 7px;
   bottom: 3px;
-  line-height: 1;
+  line-height: var(--leading-none);
 }
 .brand-line {
   display: block;
 }
 .brand-dot {
-  color: var(--terracotta);
+  color: var(--art-terracotta);
 }
 .sidebar-label {
-  font-size: 9px;
-  color: #a0a396;
-  letter-spacing: 1.3px;
-  font-weight: 700;
-  margin: 0 13px 15px;
+  font-weight: var(--weight-bold);
+  margin: 0 var(--space-3) var(--space-4);
 }
 .sidebar nav {
   display: grid;
-  gap: 7px;
+  gap: var(--space-2);
 }
 .sidebar nav a {
   display: flex;
   align-items: center;
-  gap: 12px;
-  padding: 13px 14px;
-  border-radius: 8px;
-  font-size: 13px;
-  color: #82877c;
-  font-weight: 550;
+  gap: var(--space-3);
+  padding: var(--space-3) var(--space-3);
+  border-radius: var(--radius-sm);
+  color: var(--secondary);
+  font-weight: var(--weight-medium);
   transition:
-    background 0.15s,
-    color 0.15s;
+    background var(--duration-normal),
+    color var(--duration-normal);
 }
 .sidebar nav a.active {
-  background: #eaf0e7;
-  color: var(--green);
-  font-weight: 700;
-}
-.sidebar nav a:hover {
-  background: #f0f2eb;
-  color: var(--green);
+  font-weight: var(--weight-bold);
 }
 .sidebar-invite {
-  border: 1px solid #e7e5d7;
-  background: #f5f4ed;
-  border-radius: 11px;
-  padding: 18px;
-  margin: 42px 3px 20px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-control);
+  padding: var(--space-4);
+  margin: var(--space-10) var(--space-half) var(--space-5);
   position: relative;
   overflow: hidden;
 }
 .invite-ornament {
-  font-family: Georgia, serif;
-  color: #a1ac96;
-  font-size: 40px;
+  font-family: var(--font-ui);
+  color: var(--secondary);
+  font-size: var(--symbol-medium);
   display: block;
-  margin-bottom: 8px;
-  line-height: 1;
-}
-.sidebar-invite strong {
-  font-size: 13px;
+  margin-bottom: var(--space-2);
+  line-height: var(--leading-none);
 }
 .sidebar-invite p {
-  font-size: 11px;
-  color: #929587;
-  margin: 7px 0 12px;
+  margin: var(--space-2) 0 var(--space-3);
 }
 .sidebar-invite a {
   display: flex;
   align-items: center;
-  gap: 6px;
-  color: #657858;
-  font-size: 11px;
-  font-weight: 700;
+  gap: var(--space-1);
+  font-weight: var(--weight-bold);
 }
 .sidebar-bottom {
   margin-top: auto;
-  padding-top: 30px;
+  padding-top: var(--space-8);
 }
 .sidebar-bottom > p {
   text-align: center;
-  color: #9a9e91;
-  font-size: 10px;
-  margin-top: 10px;
+  font-size: var(--type-detail);
+  margin-top: var(--space-2);
 }
 .user-card {
   display: flex;
   align-items: center;
-  gap: 10px;
-  border-top: 1px solid var(--line);
-  padding: 17px 3px 10px;
+  gap: var(--space-2);
+  border-top: 1px solid var(--border);
+  padding: var(--space-4) var(--space-half) var(--space-2);
 }
 .avatar {
   width: 39px;
   height: 39px;
-  border-radius: 50%;
+  border-radius: var(--radius-round);
   display: grid;
   place-items: center;
-  background: #ebd9b9;
-  color: #816845;
-  font-size: 12px;
-  font-weight: 700;
-  flex-shrink: 0;
+  font-size: var(--type-detail);
+  font-weight: var(--weight-bold);
 }
 .user-card strong {
-  font-size: 12px;
   display: block;
 }
 .user-card small {
-  font-size: 10px;
-  color: #8a9083;
   display: block;
-  margin-top: 3px;
+  margin-top: var(--space-half);
 }
 .logout {
   border: 0;
   background: none;
   display: flex;
   align-items: center;
-  gap: 7px;
-  margin-left: 49px;
-  color: #979c91;
-  font-size: 10px;
-  padding: 4px 0;
+  gap: var(--space-2);
+  margin-left: var(--space-12);
+  padding: var(--space-1) 0;
 }
 .main-shell {
-  margin-left: 230px;
-  width: calc(100% - 230px);
+  margin-left: var(--layout-sidebar);
+  width: calc(100% - var(--layout-sidebar));
 }
 .topbar {
   height: 83px;
-  border-bottom: 1px solid var(--line);
+  border-bottom: 1px solid var(--border);
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 0 46px;
-  gap: 24px;
-  background: #f7f6f2;
+  padding: 0 var(--space-12);
+  gap: var(--space-6);
 }
 .header-search {
   display: flex;
   align-items: center;
-  gap: 10px;
-  color: #9ca296;
+  gap: var(--space-2);
   max-width: 370px;
   width: 100%;
 }
 .header-search input {
   background: transparent;
   border: 0;
-  padding: 9px 0;
-  color: #536151;
+  padding: var(--space-2) 0;
   width: 100%;
-  font-size: 12px;
+  font-size: var(--type-body);
   outline-offset: 0;
 }
-.header-search input::placeholder {
-  color: #949b8e;
-}
 .search-hint {
-  border: 1px solid #dcdfd5;
-  border-radius: 5px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
   width: 24px;
   height: 24px;
-  font-size: 16px;
+  font-size: var(--type-body);
   text-align: center;
 }
 .header-right {
   display: flex;
   align-items: center;
-  gap: 22px;
+  gap: var(--space-5);
   white-space: nowrap;
 }
 .connection {
-  font-size: 11px;
-  color: #929989;
+  font-size: var(--type-secondary);
   display: flex;
   align-items: center;
-  gap: 7px;
+  gap: var(--space-2);
 }
 .connection i {
   height: 6px;
   width: 6px;
-  border-radius: 50%;
-  background: #c0c5b7;
+  border-radius: var(--radius-round);
+  background: var(--soft);
 }
 .connection i.online {
-  background: #77a078;
+  background: var(--success);
 }
 .small-avatar {
   height: 33px;
   width: 33px;
-  font-size: 10px;
+  font-size: var(--type-detail);
 }
 .header-login {
   display: flex;
   align-items: center;
-  gap: 9px;
-  font-size: 12px;
-  font-weight: 700;
-  color: var(--green);
+  gap: var(--space-2);
+  font-size: var(--type-body);
+  font-weight: var(--weight-bold);
+  color: var(--accent);
 }
 main {
-  max-width: 1440px;
+  max-width: var(--layout-content);
   margin: auto;
-  padding: 34px 46px 40px;
+  padding: var(--space-8) var(--space-12) var(--space-10);
   min-height: calc(100vh - 153px);
 }
 .button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: 9px;
-  font-size: 12px;
-  font-weight: 650;
-  padding: 13px 19px;
-  border-radius: 7px;
+  gap: var(--space-2);
   border: 1px solid transparent;
   transition:
-    background 0.15s,
-    transform 0.15s;
+    background var(--duration-normal),
+    transform var(--duration-normal);
 }
 .button:hover:not(:disabled) {
   transform: translateY(-1px);
 }
 .button.primary {
-  background: var(--green);
-  color: #fffefa;
-  box-shadow: 0 4px 8px #254d2f09;
-}
-.button.primary:hover:not(:disabled) {
-  background: var(--green-dark);
-}
-.button.secondary {
-  background: var(--paper);
-  border-color: #dfe3d7;
-  color: var(--green);
-}
-.button.danger {
-  background: #f6e8e2;
-  border-color: #eccfc3;
-  color: #a55840;
+  box-shadow: var(--shadow-control);
 }
 .full {
   width: 100%;
@@ -420,70 +297,56 @@ main {
 .icon-button {
   border: 0;
   background: none;
-  padding: 8px;
-  display: grid;
-  place-items: center;
-  border-radius: 5px;
-}
-.icon-button:hover {
-  background: #f1f2eb;
 }
 .hero {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  border-radius: 13px;
-  background: #eeefe6;
+  border-radius: var(--radius-control);
   min-height: 319px;
-  padding: 36px 40px;
+  padding: var(--space-8) var(--space-10);
   position: relative;
   overflow: hidden;
-  border: 1px solid #e5e8dc;
+  border: 1px solid var(--border);
 }
 .hero-copy {
   z-index: 2;
   max-width: 64%;
 }
 .hero-eyebrow {
-  font-size: 9px;
-  letter-spacing: 2px;
-  font-weight: 700;
-  color: #70806a;
+  font-size: var(--type-detail);
+  letter-spacing: var(--tracking-label);
+  font-weight: var(--weight-bold);
   display: flex;
   align-items: center;
-  gap: 8px;
-  margin-bottom: 17px;
+  gap: var(--space-2);
+  margin-bottom: var(--space-4);
 }
 .hero-eyebrow > span {
   width: 5px;
   height: 5px;
-  border-radius: 50%;
-  background: #92a37f;
+  border-radius: var(--radius-round);
+  background: var(--soft);
 }
 .hero h1 {
-  font-size: 44px;
-  line-height: 1.13;
-  letter-spacing: -2px;
-  color: #253c2c;
-  font-weight: 750;
-  margin-bottom: 17px;
+  font-size: var(--type-display);
+  line-height: var(--leading-heading);
+  letter-spacing: var(--tracking-heading);
+  font-weight: var(--weight-display);
+  margin-bottom: var(--space-4);
 }
 .hero h1 em {
-  font-family: Georgia, serif;
-  font-weight: normal;
-  color: #708967;
+  font-family: var(--font-ui);
+  font-weight: inherit;
+  font-style: normal;
 }
 .hero-copy > p {
-  font-size: 12px;
-  color: #858e7c;
-  line-height: 1.8;
-  margin-bottom: 21px;
+  line-height: var(--leading-relaxed);
+  margin-bottom: var(--space-5);
 }
 .hero-caption {
-  font-size: var(--type-secondary);
-  color: #909886;
   display: block;
-  margin-top: 12px;
+  margin-top: var(--space-3);
 }
 .hero-visual {
   width: 310px;
@@ -491,7 +354,7 @@ main {
   position: relative;
   flex-shrink: 0;
   align-self: center;
-  margin-right: 2px;
+  margin-right: var(--space-half);
 }
 .hero-board {
   position: absolute;
@@ -504,39 +367,35 @@ main {
   z-index: 3;
   display: flex;
   align-items: center;
-  gap: 12px;
-  padding: 13px 18px;
-  border-radius: 9px;
-  background: #fffefa;
-  box-shadow: 0 6px 25px #40513c12;
+  gap: var(--space-3);
+  padding: var(--space-3) var(--space-4);
+  border-radius: var(--radius-sm);
+  box-shadow: var(--shadow-card);
   transform: rotate(3deg);
 }
 .hero-note > span {
-  font-family: Georgia, serif;
-  font-size: 28px;
-  color: #7d9173;
+  font-family: var(--font-ui);
+  font-size: var(--symbol-small);
 }
 .hero-note strong {
   display: block;
-  font-size: 11px;
+  font-size: var(--type-detail);
 }
 .hero-note small {
   display: block;
-  font-size: 9px;
-  color: #9ca191;
-  margin-top: 3px;
+  font-size: var(--type-detail);
+  margin-top: var(--space-half);
 }
 .hero-star {
   position: absolute;
   right: -8px;
   top: 8px;
-  color: #a0b394;
-  font-size: 40px;
+  font-size: var(--symbol-medium);
 }
 .hero-loop {
   position: absolute;
-  border: 1px solid #d7decb;
-  border-radius: 50%;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-round);
   width: 300px;
   height: 300px;
   left: -5px;
@@ -551,68 +410,58 @@ main {
 .welcome-strip {
   display: flex;
   align-items: center;
-  gap: 11px;
-  font-size: var(--type-body);
-  color: #929989;
-  padding: 21px 3px 29px;
+  gap: var(--space-3);
+  padding: var(--space-5) var(--space-half) var(--space-8);
 }
 .welcome-spark {
-  color: #b39469;
+  color: var(--secondary);
   display: grid;
   place-items: center;
 }
 .live-count {
   margin-left: auto;
-  font-size: var(--type-secondary);
-  color: #809078;
   white-space: nowrap;
   display: flex;
-  gap: 7px;
+  gap: var(--space-2);
   align-items: center;
 }
 .live-count i {
   width: 5px;
   height: 5px;
-  background: #7b9e72;
-  border-radius: 50%;
+  background: var(--soft);
+  border-radius: var(--radius-round);
 }
 .section-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  gap: 18px;
-  margin-bottom: 22px;
+  gap: var(--space-4);
+  margin-bottom: var(--space-5);
 }
 .filter-tabs {
   display: flex;
-  gap: 4px;
-  background: #efefe8;
-  border-radius: 7px;
-  padding: 4px;
+  gap: var(--space-1);
+  border-radius: var(--radius-sm);
+  padding: var(--space-1);
 }
 .filter-tabs button {
   border: 0;
   background: none;
-  font-size: 10px;
-  padding: 7px 12px;
-  border-radius: 5px;
-  color: #909685;
-  font-weight: 550;
+  padding: var(--space-2) var(--space-3);
+  border-radius: var(--radius-sm);
+  font-weight: var(--weight-medium);
 }
 .filter-tabs button.chosen {
-  background: #fffefa;
-  box-shadow: 0 1px 4px #00000008;
-  color: #486641;
+  box-shadow: var(--shadow-control);
 }
 .game-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
-  gap: 20px;
+  gap: var(--space-5);
 }
 .game-card {
-  border-radius: 11px;
-  border: 1px solid #e4e6dd;
-  background: var(--paper);
+  border-radius: var(--radius-control);
+  border: 1px solid var(--border);
   overflow: hidden;
   transition:
     transform 0.2s,
@@ -620,7 +469,7 @@ main {
 }
 .game-card:hover {
   transform: translateY(-4px);
-  box-shadow: 0 12px 28px #263b2410;
+  box-shadow: var(--shadow-card);
 }
 .art-wrap {
   position: relative;
@@ -629,78 +478,66 @@ main {
   position: absolute;
   top: 15px;
   left: 15px;
-  border: 1px solid #ffffff90;
-  background: #ffffffa1;
+  border: 1px solid var(--glass-border);
+  background: var(--glass-surface);
   backdrop-filter: blur(5px);
-  padding: 5px 9px;
-  border-radius: 5px;
-  font-size: var(--type-detail);
-  color: #77816e;
+  padding: var(--space-1) var(--space-2);
+  border-radius: var(--radius-sm);
+  color: var(--secondary);
   z-index: 3;
 }
 .game-card-body {
-  padding: 19px 19px 0;
+  padding: var(--space-5) var(--space-5) 0;
 }
 .game-title {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 6px;
+  gap: var(--space-1);
 }
 .game-title h3 {
-  font-size: var(--type-subtitle);
-  font-weight: 750;
+  font-weight: var(--weight-display);
 }
 .difficulty {
-  font-size: var(--type-detail);
-  color: #97a08e;
-  background: #f0f2ea;
-  border-radius: 4px;
-  padding: 4px 6px;
+  border-radius: var(--radius-xs);
+  padding: var(--space-1) var(--space-1);
 }
 .game-card-body > p {
-  font-size: 11px;
-  color: #8c9584;
-  margin-top: 6px;
+  margin-top: var(--space-1);
 }
 .game-meta {
   display: flex;
   justify-content: space-between;
-  gap: 8px;
-  font-size: 9px;
-  color: #959d8d;
-  margin: 17px 0;
+  gap: var(--space-2);
+  margin: var(--space-4) 0;
 }
 .game-meta span {
   display: flex;
   align-items: center;
-  gap: 5px;
+  gap: var(--space-1);
 }
 .card-bottom {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  border-top: 1px solid #eceee5;
-  padding: 14px 0;
+  border-top: 1px solid var(--border);
+  padding: var(--space-3) 0;
 }
 .game-play {
   display: flex;
-  gap: 8px;
+  gap: var(--space-2);
   align-items: center;
   background: none;
   border: 0;
-  font-size: 11px;
-  color: var(--green);
-  font-weight: 700;
+  font-weight: var(--weight-bold);
   padding: 0;
 }
 .card-bottom > a {
-  color: #b1b8a8;
-  padding: 2px;
+  padding: var(--space-half);
 }
 .lobby-section,
 .continue-section {
-  margin-top: 37px;
+  margin-top: var(--space-10);
 }
 .lobby-section .section-header {
   align-items: flex-end;
@@ -708,12 +545,10 @@ main {
 .join-code {
   display: flex;
   align-items: center;
-  gap: 8px;
-  border: 1px solid #e0e3d8;
-  background: #fffefa;
-  border-radius: 7px;
-  padding: 8px 11px;
-  color: #929b87;
+  gap: var(--space-2);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  padding: var(--space-2) var(--space-3);
 }
 .join-code input {
   width: 133px;
@@ -721,23 +556,18 @@ main {
   border: 0;
   background: none;
   outline-offset: 1px;
-  font-size: var(--type-body);
-}
-.join-code input::placeholder {
-  color: #a1a693;
 }
 .join-code button {
   border: 0;
   background: none;
-  color: var(--green);
+  color: var(--accent);
   padding: 0;
   display: grid;
   place-items: center;
 }
 .lobby-table {
-  background: #fffefa;
-  border: 1px solid #e4e6dd;
-  border-radius: 10px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-control);
   overflow: hidden;
 }
 .lobby-table-head,
@@ -745,20 +575,16 @@ main {
   display: grid;
   grid-template-columns: 2fr 1fr 1.2fr 0.6fr;
   align-items: center;
-  gap: 15px;
-  padding: 14px 22px;
+  gap: var(--space-4);
+  padding: var(--space-3) var(--space-5);
 }
 .lobby-table-head {
-  font-size: var(--type-secondary);
-  letter-spacing: 1.1px;
-  color: #a0a895;
-  border-bottom: 1px solid #eceee4;
-  background: #fbfcf7;
+  border-bottom: 1px solid var(--border);
 }
 .lobby-row {
-  padding-top: 17px;
-  padding-bottom: 17px;
-  border-bottom: 1px solid #eff0e8;
+  padding-top: var(--space-4);
+  padding-bottom: var(--space-4);
+  border-bottom: 1px solid var(--border);
 }
 .lobby-row:last-child {
   border-bottom: 0;
@@ -766,40 +592,31 @@ main {
 .lobby-game {
   display: flex;
   align-items: center;
-  gap: 11px;
   min-width: 0;
 }
 .room-symbol {
-  font-family: Georgia, serif;
-  font-size: 27px;
-  background: #edf1e7;
+  font-family: var(--font-ui);
+  font-size: var(--symbol-small);
+  background: var(--soft);
   width: 40px;
   height: 40px;
-  border-radius: 8px;
+  border-radius: var(--radius-sm);
   display: grid;
   place-items: center;
-  color: #768a68;
+  color: var(--secondary);
   flex-shrink: 0;
 }
-.room-symbol.damas {
-  background: #f5eddf;
-  color: #a58b65;
-}
+.room-symbol.damas,
 .room-symbol.parchis {
-  background: #eeeaf4;
-  color: #9481a5;
+  background: var(--soft);
+  color: var(--secondary);
 }
 .lobby-game strong {
   display: block;
-  font-size: var(--type-body);
-  font-weight: 600;
   overflow-wrap: anywhere;
 }
 .lobby-game small {
   display: block;
-  font-size: var(--type-secondary);
-  color: #a0a693;
-  margin-top: 5px;
 }
 .player-stack {
   display: flex;
@@ -808,165 +625,132 @@ main {
 .mini-avatar {
   width: 25px;
   height: 25px;
-  border: 2px solid #fffefa;
-  border-radius: 50%;
+  border: 2px solid var(--border);
+  border-radius: var(--radius-round);
   display: grid;
   place-items: center;
-  background: #e6dac4;
-  color: #8c7957;
-  font-size: 9px;
-  margin-left: -6px;
+  font-size: var(--type-detail);
+  margin-left: calc(-1 * var(--space-1));
 }
 .mini-avatar:first-child {
   margin-left: 0;
 }
 .mini-avatar:nth-child(2) {
-  background: #d6e3d2;
-  color: #738970;
+  background: var(--soft);
+  color: var(--secondary);
 }
 .player-stack small {
-  font-size: var(--type-secondary);
-  color: #a1a891;
-  margin-left: 7px;
+  margin-left: var(--space-2);
 }
 .status-badge {
   display: inline-flex;
   align-items: center;
-  gap: 5px;
-  font-size: var(--type-secondary);
-  color: #8b9a7e;
+  gap: var(--space-1);
 }
 .status-badge i {
   width: 5px;
   height: 5px;
-  border-radius: 50%;
-  background: #95ab84;
+  border-radius: var(--radius-round);
+  background: var(--soft);
 }
 .lobby-join {
   display: flex;
   align-items: center;
   justify-content: flex-end;
-  gap: 6px;
-  font-size: var(--type-body);
-  color: #526e48;
+  gap: var(--space-1);
   background: none;
   border: 0;
-  font-weight: 600;
+  font-weight: var(--weight-semibold);
   white-space: nowrap;
 }
 .empty-lobby {
   text-align: center;
-  padding: 32px 20px 36px;
+  padding: var(--space-8) var(--space-5) var(--space-8);
 }
 .empty-lobby h3 {
-  font-size: var(--type-subtitle);
-  margin-bottom: 7px;
+  margin-bottom: var(--space-2);
 }
 .empty-lobby p {
-  font-size: var(--type-body);
-  color: #a0a590;
-  margin-bottom: 17px;
+  margin-bottom: var(--space-4);
 }
 .empty-symbol {
-  font-size: 33px;
-  color: #a4b197;
-  margin-bottom: 11px;
+  font-size: var(--symbol-small);
+  color: var(--secondary);
+  margin-bottom: var(--space-3);
 }
 .empty-panel {
   text-align: center;
-  padding: 40px;
-  border: 1px dashed #d6dece;
-  border-radius: 10px;
-  color: #889579;
+  padding: var(--space-10);
+  border: 1px dashed var(--border);
+  border-radius: var(--radius-control);
 }
 .empty-panel h3 {
-  margin: 10px;
+  margin: var(--space-2);
 }
 .empty-panel p {
-  margin-bottom: 15px;
-  font-size: 13px;
+  margin-bottom: var(--space-4);
+  font-size: var(--type-detail);
 }
 .bottom-note {
   display: flex;
   align-items: center;
-  gap: 17px;
-  padding: 25px 0 0;
-  margin-top: 27px;
-  border-top: 1px solid var(--line);
+  gap: var(--space-4);
+  padding: var(--space-6) 0 0;
+  margin-top: var(--space-6);
+  border-top: 1px solid var(--border);
 }
 .bottom-note > span {
-  font-family: Georgia, serif;
-  font-size: 41px;
-  color: #abaf99;
-}
-.bottom-note strong {
-  font-size: var(--type-body);
-  color: #76836a;
+  font-family: var(--font-ui);
+  font-size: var(--symbol-medium);
 }
 .bottom-note p {
-  font-size: var(--type-secondary);
-  color: #9ba28e;
-  margin-top: 4px;
+  margin-top: var(--space-1);
 }
 .bottom-note > a {
   margin-left: auto;
   display: flex;
-  gap: 8px;
+  gap: var(--space-2);
   align-items: center;
-  font-size: var(--type-body);
-  color: #7d8e6e;
   white-space: nowrap;
 }
 .continue-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
-  gap: 12px;
+  gap: var(--space-3);
 }
 .continue-card {
   display: flex;
   align-items: center;
-  gap: 12px;
-  background: #fffefa;
-  border: 1px solid #e5e8da;
-  border-radius: 9px;
-  padding: 14px;
-}
-.continue-card strong {
-  display: block;
-  font-size: var(--type-body);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
 }
+.continue-card strong,
 .continue-card small {
   display: block;
-  font-size: var(--type-secondary);
-  color: #8d9781;
-  margin-top: 5px;
 }
 .continue-card > svg {
   margin-left: auto;
-  color: var(--green);
+  color: var(--accent);
 }
 .site-footer {
-  max-width: 1440px;
+  max-width: var(--layout-content);
   margin: auto;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 12px;
-  padding: 21px 46px 25px;
-  font-size: var(--type-secondary);
-  color: #a7ad9c;
-  border-top: 1px solid var(--line);
+  padding: var(--space-5) var(--space-12) var(--space-6);
+  border-top: 1px solid var(--border);
 }
 .site-footer a {
   display: flex;
   align-items: center;
-  gap: 7px;
+  gap: var(--space-2);
 }
 .service-alert {
-  padding: 12px 45px;
-  background: #fff0d9;
-  color: #9a6937;
-  font-size: 12px;
+  padding: var(--space-3) var(--space-12);
+  background: var(--surface);
+  color: var(--secondary);
+  font-size: var(--type-detail);
   display: flex;
   justify-content: space-between;
 }
@@ -978,319 +762,263 @@ main {
 .modal-backdrop {
   position: fixed;
   inset: 0;
-  background: #263a2d55;
+  background: var(--overlay);
   backdrop-filter: blur(4px);
-  z-index: 50;
+  z-index: var(--layer-menu);
   display: grid;
   place-items: center;
-  padding: 20px;
+  padding: var(--space-5);
 }
 .modal {
-  background: #fffefa;
-  border-radius: 14px;
-  padding: 29px;
-  max-width: 460px;
-  width: 100%;
-  box-shadow: 0 25px 90px #26362b40;
-  max-height: 90vh;
   overflow: auto;
 }
 .modal-head {
-  display: flex;
   justify-content: space-between;
-  align-items: flex-start;
-  margin-bottom: 24px;
-  gap: 12px;
-}
-.modal h2 {
-  font-size: 22px;
 }
 form label {
-  font-size: 11px;
-  color: #78846d;
-  font-weight: 600;
-  display: grid;
-  gap: 7px;
-  margin-bottom: 17px;
+  margin-bottom: var(--space-4);
 }
-form input,
-form select,
-form textarea {
-  border: 1px solid #dfe5d5;
-  border-radius: 7px;
-  background: #fffefa;
-  padding: 12px 13px;
-  color: #354932;
+form input {
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: var(--surface);
+  padding: var(--space-3) var(--space-3);
+  color: var(--text);
   min-width: 0;
   width: 100%;
-  font-size: 12px;
+  font-size: var(--type-detail);
 }
 form input::placeholder {
-  color: #a3ad98;
+  color: var(--text);
 }
 .form-row {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: 15px;
+  gap: var(--space-4);
 }
 .variant-note {
   display: flex;
   align-items: center;
-  gap: 7px;
-  background: #f0f3e9;
-  padding: 10px;
-  border-radius: 7px;
-  color: #7f916c;
-  font-size: 11px;
-  margin: -5px 0 18px;
+  gap: var(--space-2);
+  padding: var(--space-2);
+  border-radius: var(--radius-sm);
+  color: var(--secondary);
+  font-size: var(--type-detail);
+  margin: calc(-1 * var(--space-1)) 0 var(--space-4);
 }
 .form-error {
-  color: #af6347;
-  background: #f9ede5;
-  border-radius: 7px;
-  padding: 11px 14px;
-  font-size: 12px;
-  margin: 15px 0;
+  border-radius: var(--radius-sm);
+  padding: var(--space-3) var(--space-3);
+  font-size: var(--type-detail);
+  margin: var(--space-4) 0;
 }
 .modal .full {
-  margin-top: 20px;
+  margin-top: var(--space-5);
 }
 .auth-layout {
   display: grid;
   grid-template-columns: 1fr 1fr;
   max-width: 900px;
-  margin: 28px auto;
-  background: #fffefa;
-  border: 1px solid var(--line);
-  border-radius: 16px;
+  margin: var(--space-6) auto;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-card);
   overflow: hidden;
 }
 .auth-art {
-  background: #edf0e5;
-  padding: 45px 35px;
+  padding: var(--space-12) var(--space-8);
   display: flex;
   flex-direction: column;
   justify-content: center;
   min-height: 580px;
 }
 .auth-art h1 {
-  font-size: 34px;
-  letter-spacing: -1.4px;
-  line-height: 1.15;
-  margin: 20px 0 14px;
+  font-size: var(--type-display);
+  letter-spacing: var(--tracking-heading);
+  line-height: var(--leading-heading);
+  margin: var(--space-5) 0 var(--space-3);
 }
 .auth-art p {
-  font-size: 12px;
-  color: #87977a;
+  font-size: var(--type-detail);
 }
 .auth-art .art-box {
   height: 220px;
-  margin-top: 25px;
+  margin-top: var(--space-6);
 }
 .auth-form {
-  padding: 38px 35px;
+  padding: var(--space-10) var(--space-8);
 }
 .auth-form h2 {
-  font-size: 25px;
-  margin: 22px 0 7px;
+  font-size: var(--type-section);
+  margin: var(--space-5) 0 var(--space-2);
 }
 .auth-form > p {
-  font-size: 12px;
-  color: #9ba58f;
-  margin-bottom: 22px;
+  margin-bottom: var(--space-5);
 }
 .auth-tabs {
   display: flex;
-  border-bottom: 1px solid var(--line);
-  gap: 20px;
+  border-bottom: 1px solid var(--border);
+  gap: var(--space-5);
 }
 .auth-tabs button {
   background: none;
   border: 0;
   border-bottom: 2px solid transparent;
-  padding: 0 0 12px;
-  font-size: 12px;
-  color: #a0a88e;
+  padding: 0 0 var(--space-3);
+  font-size: var(--type-detail);
 }
 .auth-tabs button.chosen {
-  border-color: var(--green);
-  color: var(--green);
-  font-weight: 700;
+  border-color: var(--accent);
+  color: var(--accent);
+  font-weight: var(--weight-bold);
 }
 .auth-note {
-  font-size: 10px;
-  color: #98a489;
-  margin-top: 15px;
+  margin-top: var(--space-4);
   text-align: center;
 }
 .page-heading {
-  margin-bottom: 30px;
+  margin-bottom: var(--space-8);
 }
 .page-heading h1 {
-  font-size: 33px;
-  letter-spacing: -1.2px;
+  font-size: var(--type-heading);
+  letter-spacing: var(--tracking-heading);
 }
 .page-heading p {
-  font-size: 13px;
-  color: #919d83;
-  margin-top: 9px;
+  font-size: var(--type-detail);
+  margin-top: var(--space-2);
 }
 .profile-header {
   display: flex;
   align-items: center;
-  gap: 20px;
-  background: #edf0e5;
-  border: 1px solid #e3e8da;
-  border-radius: 13px;
-  padding: 26px 30px;
-  margin-bottom: 24px;
+  gap: var(--space-5);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-control);
+  padding: var(--space-6) var(--space-8);
+  margin-bottom: var(--space-6);
 }
 .profile-header .avatar {
   width: 68px;
   height: 68px;
-  font-size: 22px;
+  font-size: var(--type-subtitle);
 }
 .profile-header h1 {
-  font-size: 28px;
-  letter-spacing: -1px;
+  font-size: var(--type-heading);
+  letter-spacing: var(--tracking-heading);
 }
 .profile-header p {
-  font-size: 12px;
-  color: #8d9b7d;
-  margin-top: 6px;
+  font-size: var(--type-detail);
+  margin-top: var(--space-1);
 }
 .stats-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
-  gap: 15px;
-  margin-bottom: 32px;
+  gap: var(--space-4);
+  margin-bottom: var(--space-8);
 }
 .stat-card {
-  border: 1px solid var(--line);
-  background: #fffefa;
-  border-radius: 10px;
-  padding: 21px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-control);
+  padding: var(--space-5);
 }
 .stat-card span {
-  font-size: 11px;
-  color: #95a187;
+  font-size: var(--type-detail);
 }
 .stat-card strong {
-  font-family: 'Manrope', sans-serif;
-  font-size: 31px;
+  font-family: var(--font-ui);
+  font-size: var(--type-heading);
   display: block;
-  margin: 9px 0;
-  color: #3f5b34;
+  margin: var(--space-2) 0;
 }
 .stat-card small {
-  font-size: 10px;
-  color: #a3ae95;
+  font-size: var(--type-detail);
 }
 .history-item {
-  padding: 19px 22px;
-  border-bottom: 1px solid var(--line);
+  padding: var(--space-5) var(--space-5);
+  border-bottom: 1px solid var(--border);
   display: flex;
   align-items: center;
-  gap: 15px;
+  gap: var(--space-4);
 }
 .history-item:last-child {
   border-bottom: 0;
 }
 .history-item strong {
-  font-size: 12px;
+  font-size: var(--type-body);
 }
 .history-item small {
   display: block;
-  font-size: 10px;
-  color: #9aa58a;
-  margin-top: 5px;
+  margin-top: var(--space-1);
 }
 .result-tag {
   margin-left: auto;
-  font-size: 11px;
-  padding: 6px 10px;
-  border-radius: 5px;
-  background: #f0f1e8;
-  color: #909b7e;
+  font-size: var(--type-detail);
+  padding: var(--space-1) var(--space-2);
+  border-radius: var(--radius-sm);
 }
 .result-tag.win {
-  background: #e6f0df;
-  color: #5c854a;
-}
-.result-tag.loss {
-  background: #f5e8df;
-  color: #b0805b;
+  background: var(--soft);
 }
 .help-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
-  gap: 20px;
+  gap: var(--space-5);
 }
 .help-card {
-  background: #fffefa;
-  border: 1px solid var(--line);
-  border-radius: 11px;
-  padding: 25px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-control);
+  padding: var(--space-6);
 }
 .help-card h2 {
-  margin-bottom: 8px;
-  font-size: 22px;
+  margin-bottom: var(--space-2);
+  font-size: var(--type-section);
 }
 .help-card .variant-note {
-  margin: 13px 0;
+  margin: var(--space-3) 0;
 }
 .help-card ol {
-  padding-left: 20px;
-  font-size: 12px;
-  color: #8a987c;
-  line-height: 1.8;
+  padding-left: var(--space-5);
+  line-height: var(--leading-relaxed);
 }
 .help-card li {
-  padding: 5px 0;
+  padding: var(--space-1) 0;
 }
 .help-intro {
-  background: #eaf0e3;
-  border-radius: 12px;
-  padding: 25px 28px;
-  margin-bottom: 25px;
+  border-radius: var(--radius-control);
+  padding: var(--space-6) var(--space-6);
+  margin-bottom: var(--space-6);
 }
 .help-intro h2 {
-  font-size: 23px;
-  margin-bottom: 9px;
+  font-size: var(--type-section);
+  margin-bottom: var(--space-2);
 }
 .help-intro p {
-  font-size: 13px;
-  color: #869779;
   max-width: 720px;
 }
 .room-page-heading {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 15px;
-  margin-bottom: 25px;
+  gap: var(--space-4);
+  margin-bottom: var(--space-6);
 }
 .room-page-heading h1 {
-  font-size: 28px;
-  letter-spacing: -1px;
+  font-size: var(--type-subtitle);
+  letter-spacing: var(--tracking-heading);
 }
 .room-page-heading p {
-  font-size: 11px;
-  color: #9aa68a;
-  margin-top: 5px;
+  font-size: var(--type-detail);
+  margin-top: var(--space-1);
 }
 .breadcrumb {
   display: flex;
   align-items: center;
-  gap: 7px;
-  font-size: 11px;
-  color: #99a48c;
-  margin-bottom: 20px;
+  gap: var(--space-2);
+  font-size: var(--type-detail);
+  margin-bottom: var(--space-5);
 }
 .room-layout {
   display: grid;
   grid-template-columns: minmax(0, 1fr) 285px;
-  gap: 24px;
+  gap: var(--space-6);
   align-items: start;
 }
 .play-area {
@@ -1299,51 +1027,48 @@ form input::placeholder {
 .player-banner {
   display: flex;
   align-items: center;
-  gap: 10px;
-  padding: 12px 0;
+  gap: var(--space-2);
+  padding: var(--space-3) 0;
 }
 .player-banner strong {
-  font-size: 12px;
+  font-size: var(--type-detail);
 }
 .player-banner small {
-  font-size: 10px;
-  color: #98a888;
+  font-size: var(--type-detail);
   display: block;
-  margin-top: 3px;
+  margin-top: var(--space-half);
 }
 .player-banner .avatar {
   width: 34px;
   height: 34px;
-  font-size: 10px;
+  font-size: var(--type-detail);
 }
 .turn-indicator {
-  font-size: 10px;
+  font-size: var(--type-detail);
   margin-left: auto;
-  border-radius: 5px;
-  background: #e8f0df;
-  color: #7b9864;
-  padding: 6px 10px;
+  border-radius: var(--radius-sm);
+  padding: var(--space-1) var(--space-2);
 }
 .board-container {
-  background: #ece8dc;
-  padding: 14px;
-  border-radius: 12px;
-  border: 1px solid #dddcca;
+  background: var(--soft);
+  padding: var(--space-3);
+  border-radius: var(--radius-control);
+  border: 1px solid var(--border);
   max-width: 570px;
   margin: auto;
 }
 .board-grid {
   display: grid;
   grid-template-columns: repeat(8, 1fr);
-  border: 1px solid #acb797;
-  box-shadow: 0 3px 8px #35462b19;
+  border: 1px solid var(--border);
+  box-shadow: var(--shadow-card);
 }
 .board-square {
   aspect-ratio: 1;
   border: 0;
   border-radius: 0;
   position: relative;
-  background: #f1eddf;
+  background: var(--board-light);
   display: grid;
   place-items: center;
   padding: 0;
@@ -1351,17 +1076,17 @@ form input::placeholder {
   overflow: hidden;
 }
 .board-square.dark {
-  background: #7f9871;
+  background: var(--board-dark);
 }
 .board-square.selected {
-  background: #d4bb68;
+  background: var(--board-selected);
 }
 .board-square.target::after {
   content: '';
   width: 19%;
   height: 19%;
-  background: #294b35a0;
-  border-radius: 50%;
+  background: var(--board-target);
+  border-radius: var(--radius-round);
   position: absolute;
   z-index: 3;
 }
@@ -1369,7 +1094,7 @@ form input::placeholder {
   width: 85%;
   height: 85%;
   background: none;
-  border: 4px solid #234732aa;
+  border: 4px solid var(--board-target-border);
 }
 .chess-piece {
   font-family: 'Segoe UI Symbol', 'DejaVu Sans', serif;
@@ -1425,44 +1150,42 @@ form input::placeholder {
 .board-note {
   display: flex;
   justify-content: space-between;
-  gap: 10px;
-  color: #97a48a;
-  font-size: 10px;
-  margin: 14px 0;
+  gap: var(--space-2);
+  font-size: var(--type-detail);
+  margin: var(--space-3) 0;
 }
 .room-panel {
-  background: #fffefa;
-  border: 1px solid var(--line);
-  border-radius: 11px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-control);
   overflow: hidden;
 }
 .room-tabs {
   display: flex;
-  border-bottom: 1px solid var(--line);
-  padding: 0 16px;
+  border-bottom: 1px solid var(--border);
+  padding: 0 var(--space-4);
 }
 .room-tabs button {
   border: 0;
   background: none;
   flex: 1;
-  font-size: 11px;
-  color: #a0ac91;
-  padding: 15px 0;
+  font-size: var(--type-detail);
+  color: var(--secondary);
+  padding: var(--space-4) 0;
   border-bottom: 2px solid transparent;
 }
 .room-tabs button.active {
-  color: var(--green);
-  border-color: var(--green);
-  font-weight: 600;
+  color: var(--accent);
+  border-color: var(--accent);
+  font-weight: var(--weight-semibold);
 }
 .chat-messages {
   height: 310px;
   overflow: auto;
   overscroll-behavior: contain;
-  padding: 18px 16px;
+  padding: var(--space-4) var(--space-4);
   display: flex;
   flex-direction: column;
-  gap: 13px;
+  gap: var(--space-3);
 }
 .chat-message {
   max-width: 95%;
@@ -1472,189 +1195,160 @@ form input::placeholder {
   align-self: flex-end;
 }
 .chat-message strong {
-  font-size: 9px;
-  color: #8c9e78;
-  margin-bottom: 4px;
-  display: block;
+  margin-bottom: var(--space-1);
 }
 .chat-message p {
-  font-size: 11px;
-  color: #6e835a;
   white-space: pre-wrap;
   overflow-wrap: anywhere;
-  background: #f0f3e9;
-  padding: 9px 11px;
-  border-radius: 0 8px 8px 8px;
-  line-height: 1.5;
+  padding: var(--space-2) var(--space-3);
+  border-radius: 0 var(--radius-sm) var(--radius-sm) var(--radius-sm);
 }
 .chat-message.mine p {
-  background: #e4ecdc;
-  border-radius: 8px 0 8px 8px;
+  border-radius: var(--radius-sm) 0 var(--radius-sm) var(--radius-sm);
 }
 .chat-message time {
-  font-size: 8px;
-  color: #b0bba0;
   display: block;
   text-align: right;
-  margin-top: 4px;
+  margin-top: var(--space-1);
 }
 .chat-empty {
   text-align: center;
-  font-size: 11px;
-  color: #a4b096;
+  font-size: var(--type-detail);
   margin: auto;
 }
 .chat-form {
   display: flex;
-  gap: 6px;
-  padding: 13px;
-  border-top: 1px solid var(--line);
-  background: #fbfcf7;
+  gap: var(--space-1);
+  padding: var(--space-3);
+  border-top: 1px solid var(--border);
 }
 .chat-form input {
-  font-size: 11px;
-  padding: 9px;
+  padding: var(--space-2);
   flex: 1;
   min-width: 0;
 }
 .chat-form button {
   border: 0;
-  background: var(--green);
-  border-radius: 6px;
-  color: white;
+  border-radius: var(--radius-sm);
   display: grid;
   place-items: center;
-  padding: 9px;
+  padding: var(--space-2);
 }
 .room-rules {
-  padding: 18px;
-  font-size: 11px;
-  color: #91a07e;
-  line-height: 1.8;
+  padding: var(--space-4);
   min-height: 310px;
 }
 .room-rules li {
-  margin-bottom: 10px;
+  margin-bottom: var(--space-2);
 }
 .room-rules ol {
-  padding-left: 17px;
+  padding-left: var(--space-4);
 }
 .event-list {
-  padding: 15px;
+  padding: var(--space-4);
   max-height: 370px;
   overflow: auto;
 }
 .event-list > div {
   display: flex;
-  gap: 9px;
-  padding: 9px 0;
-  border-bottom: 1px solid #f0f2e9;
-  font-size: 11px;
-  color: #8b9b78;
+  gap: var(--space-2);
+  padding: var(--space-2) 0;
+  border-bottom: 1px solid var(--border);
+  font-size: var(--type-detail);
+  color: var(--secondary);
 }
 .event-list span {
-  color: #a7b397;
   width: 20px;
 }
 .event-list small {
   margin-left: auto;
-  font-size: 9px;
-  color: #a9b89a;
+  font-size: var(--type-detail);
 }
 .waiting-card {
-  background: #edf0e5;
-  border: 1px solid #e1e7d7;
-  border-radius: 13px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-control);
   text-align: center;
-  padding: 40px 25px;
+  padding: var(--space-10) var(--space-6);
 }
 .waiting-card h2 {
-  font-size: 25px;
-  margin: 15px 0 9px;
+  font-size: var(--type-section);
+  margin: var(--space-4) 0 var(--space-2);
 }
 .waiting-card > p {
-  font-size: 12px;
-  color: #91a17e;
-  margin-bottom: 25px;
+  font-size: var(--type-detail);
+  margin-bottom: var(--space-6);
 }
 .waiting-symbol {
-  font-family: Georgia, serif;
-  font-size: 45px;
-  color: #6d8a58;
+  font-family: var(--font-ui);
+  font-size: var(--type-display);
 }
 .waiting-players {
   display: flex;
   justify-content: center;
-  gap: 25px;
-  margin: 25px 0 30px;
+  gap: var(--space-6);
+  margin: var(--space-6) 0 var(--space-8);
   flex-wrap: wrap;
 }
 .waiting-player {
   display: grid;
   justify-items: center;
-  gap: 8px;
+  gap: var(--space-2);
   width: 84px;
 }
 .waiting-player .avatar {
   width: 52px;
   height: 52px;
-  font-size: 16px;
+  font-size: var(--type-body);
 }
 .waiting-player strong {
-  font-size: 11px;
+  font-size: var(--type-detail);
   overflow-wrap: anywhere;
 }
 .waiting-player small {
-  font-size: 9px;
-  color: #9bab87;
+  font-size: var(--type-detail);
 }
 .avatar.empty {
   background: none;
-  border: 1px dashed #bdc9ab;
-  color: #a2b78b;
+  border: 1px dashed var(--border);
+  color: var(--secondary);
 }
 .room-code {
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 10px;
-  background: #fffefa;
-  border: 1px dashed #ccd8b8;
-  border-radius: 7px;
-  padding: 12px;
-  margin: 0 auto 25px;
+  gap: var(--space-2);
+  border: 1px dashed var(--border);
+  border-radius: var(--radius-sm);
+  padding: var(--space-3);
+  margin: 0 auto var(--space-6);
   max-width: 270px;
-  font-size: 15px;
-  letter-spacing: 2px;
-  color: #78935e;
+  font-size: var(--type-secondary);
+  letter-spacing: var(--tracking-label);
 }
 .room-code button {
   background: none;
   border: 0;
-  color: #97aa80;
+  color: var(--secondary);
 }
 .result-banner {
-  padding: 23px;
-  background: #e7eedb;
-  border: 1px solid #ccd8b5;
-  border-radius: 10px;
+  padding: var(--space-6);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-control);
   text-align: center;
-  margin-bottom: 20px;
+  margin-bottom: var(--space-5);
 }
 .result-banner h2 {
-  font-size: 23px;
-  margin-bottom: 7px;
+  font-size: var(--type-section);
+  margin-bottom: var(--space-2);
 }
 .result-banner p {
-  font-size: 12px;
-  color: #90a078;
-  margin-bottom: 15px;
+  font-size: var(--type-detail);
+  margin-bottom: var(--space-4);
 }
 .parchis-board {
-  background: #fffefa;
-  border: 1px solid var(--line);
-  border-radius: 13px;
-  padding: 20px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-control);
+  padding: var(--space-5);
   position: relative;
 }
 .parchis-map {
@@ -1665,28 +1359,26 @@ form input::placeholder {
 .parchis-controls {
   display: flex;
   align-items: center;
-  gap: 14px;
-  padding: 16px 0;
+  gap: var(--space-3);
 }
 .parchis-controls p {
   flex: 1;
-  font-size: 13px;
-  color: #5c6855;
-  line-height: 1.5;
+  font-size: var(--type-detail);
+  line-height: var(--leading-body);
 }
 .parchis-controls .big-die {
-  font-size: 42px;
-  line-height: 1;
-  color: #5c7451;
+  font-size: var(--type-display);
+  line-height: var(--leading-none);
+  color: var(--secondary);
 }
 .parchis-controls .button {
-  font-size: 12px;
-  padding: 12px 14px;
+  font-size: var(--type-detail);
+  padding: var(--space-3) var(--space-3);
 }
 @media (max-width: 600px) {
   .parchis-controls {
     flex-wrap: wrap;
-    gap: 8px;
+    gap: var(--space-2);
   }
   .parchis-controls .button {
     margin-left: auto;
@@ -1696,8 +1388,8 @@ form input::placeholder {
   width: 100%;
   aspect-ratio: 1;
   position: relative;
-  border-radius: 50%;
-  background: radial-gradient(circle, #f5f5ed 0 56%, transparent 57%);
+  border-radius: var(--radius-round);
+  background: radial-gradient(circle, var(--soft) 0 56%, transparent 57%);
   max-width: 550px;
   margin: auto;
 }
@@ -1708,15 +1400,15 @@ form input::placeholder {
   display: flex;
   align-items: center;
   justify-content: center;
-  border: 1px solid #dfe7d2;
-  border-radius: 3px;
-  background: #f9faf5;
-  color: #b1bd9d;
-  font-size: 6px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-xs);
+  background: var(--soft);
+  color: var(--secondary);
+  font-size: var(--type-detail);
 }
 .track-cell.safe {
-  background: #e6eddc;
-  color: #83966b;
+  background: var(--soft);
+  color: var(--secondary);
 }
 .parchis-token {
   background: var(--piece-color);
@@ -1748,42 +1440,40 @@ form input::placeholder {
   text-align: center;
 }
 .big-die {
-  font-family: Georgia, serif;
-  font-size: 54px;
-  color: #667e50;
-  line-height: 1;
+  font-family: var(--font-ui);
+  font-size: var(--type-display);
+  color: var(--secondary);
+  line-height: var(--leading-none);
 }
 .parchis-center p {
-  font-size: 11px;
-  color: #9baa86;
-  margin: 10px 0;
+  font-size: var(--type-detail);
+  color: var(--secondary);
+  margin: var(--space-2) 0;
 }
 .parchis-center .button {
-  padding: 10px;
-  font-size: 10px;
+  padding: var(--space-2);
+  font-size: var(--type-detail);
 }
 .parchis-homes {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
-  gap: 13px;
-  margin-top: 18px;
+  gap: var(--space-3);
+  margin-top: var(--space-4);
 }
 .parchis-home {
-  border: 1px solid #e4e9da;
-  background: #fafbf6;
-  border-radius: 8px;
-  padding: 11px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  padding: var(--space-3);
 }
 .parchis-home strong {
-  font-size: 12px;
-  color: #5c6855;
+  font-size: var(--type-detail);
   display: block;
-  margin-bottom: 9px;
+  margin-bottom: var(--space-2);
 }
 .home-pieces {
   display: flex;
   align-items: center;
-  gap: 9px;
+  gap: var(--space-2);
   flex-wrap: wrap;
 }
 .home-pieces .parchis-token {
@@ -1793,8 +1483,7 @@ form input::placeholder {
   font-size: 16px;
 }
 .home-pieces small {
-  font-size: 12px;
-  color: #5c6855;
+  font-size: var(--type-detail);
 }
 @media (max-width: 600px) {
   .parchis-homes {
@@ -1802,76 +1491,74 @@ form input::placeholder {
   }
 }
 .promotion {
-  background: #fffefa;
-  border: 1px solid #d6dfca;
-  padding: 18px;
-  border-radius: 9px;
-  margin: 10px 0;
+  border: 1px solid var(--border);
+  padding: var(--space-4);
+  border-radius: var(--radius-sm);
+  margin: var(--space-2) 0;
 }
 .promotion p {
-  font-size: 12px;
-  margin-bottom: 10px;
+  font-size: var(--type-detail);
+  margin-bottom: var(--space-2);
 }
 .promotion button {
-  border: 1px solid #d6dfca;
-  background: #edf1e7;
-  padding: 8px 15px;
-  border-radius: 5px;
-  margin-right: 8px;
+  border: 1px solid var(--border);
+  padding: var(--space-2) var(--space-4);
+  border-radius: var(--radius-sm);
+  margin-right: var(--space-2);
 }
 .mobile-brand {
   display: none;
 }
 @media (min-width: 1550px) {
   main {
-    padding-top: 42px;
+    padding-top: var(--space-10);
   }
   .hero {
     min-height: 350px;
   }
   .hero h1 {
-    font-size: 50px;
+    font-size: var(--type-display);
   }
   .hero-visual {
-    margin-right: 40px;
+    margin-right: var(--space-10);
   }
 }
 @media (max-width: 1200px) {
   .sidebar {
-    width: 205px;
-    padding: 30px 16px;
+    width: var(--layout-sidebar-medium);
+    padding: var(--space-8) var(--space-4);
   }
   .main-shell {
-    margin-left: 205px;
-    width: calc(100% - 205px);
+    margin-left: var(--layout-sidebar-medium);
+    width: calc(100% - var(--layout-sidebar-medium));
   }
   main {
-    padding: 28px 28px;
+    padding: var(--space-6) var(--space-6);
   }
   .topbar {
-    padding: 0 28px;
+    padding: 0 var(--space-6);
   }
   .hero {
-    padding: 30px;
+    padding: var(--space-8);
     min-height: 290px;
   }
   .hero h1 {
-    font-size: 38px;
+    font-size: var(--type-display);
   }
   .hero-visual {
     width: 245px;
   }
   .hero-copy > p {
-    font-size: 11px;
+    font-size: var(--type-detail);
   }
   .game-grid {
-    gap: 14px;
+    gap: var(--space-3);
   }
   .game-card-body {
-    padding: 16px 14px 0;
+    padding: var(--space-4) var(--space-3) 0;
   }
   .game-meta {
-    font-size: 8px;
+    font-size: var(--type-secondary);
   }
   .game-title h3 {
     font-size: var(--type-subtitle);
@@ -1884,20 +1571,20 @@ form input::placeholder {
   }
   .room-layout {
     grid-template-columns: minmax(0, 1fr) 250px;
-    gap: 18px;
+    gap: var(--space-4);
   }
   .site-footer {
-    padding-left: 28px;
-    padding-right: 28px;
+    padding-left: var(--space-6);
+    padding-right: var(--space-6);
   }
 }
 @media (max-width: 1000px) {
   .sidebar {
     width: 76px;
-    padding: 30px 12px;
+    padding: var(--space-8) var(--space-3);
   }
   .brand {
-    margin: 0 3px 40px;
+    margin: 0 var(--space-half) var(--space-10);
   }
   .brand > span:not(.brand-mark) {
     display: none;
@@ -1914,17 +1601,17 @@ form input::placeholder {
   }
   .sidebar nav a {
     justify-content: center;
-    padding: 14px;
+    padding: var(--space-3);
   }
   .main-shell {
-    margin-left: 76px;
+    margin-left: var(--space-20);
     width: calc(100% - 76px);
   }
   .hero-copy {
     max-width: 63%;
   }
   .hero h1 {
-    font-size: 39px;
+    font-size: var(--type-display);
   }
   .hero-visual {
     width: 270px;
@@ -1933,35 +1620,35 @@ form input::placeholder {
     grid-template-columns: minmax(0, 1fr) 265px;
   }
   .stats-grid {
-    gap: 10px;
+    gap: var(--space-2);
   }
   .stat-card {
-    padding: 17px;
+    padding: var(--space-4);
   }
   .auth-layout {
     max-width: 760px;
   }
   .auth-form {
-    padding: 30px 25px;
+    padding: var(--space-8) var(--space-6);
   }
 }
 @media (max-width: 760px) {
   .topbar {
     height: 67px;
-    padding: 0 23px;
+    padding: 0 var(--space-6);
   }
   .connection {
     display: none;
   }
   main {
-    padding: 25px 23px;
+    padding: var(--space-6) var(--space-6);
   }
   .hero {
-    padding: 28px;
+    padding: var(--space-6);
     min-height: 300px;
   }
   .hero h1 {
-    font-size: 34px;
+    font-size: var(--type-display);
   }
   .hero-copy {
     max-width: 70%;
@@ -1969,7 +1656,7 @@ form input::placeholder {
   .hero-visual {
     width: 175px;
     height: 220px;
-    margin-right: -30px;
+    margin-right: calc(-1 * var(--space-8));
     opacity: 0.85;
   }
   .hero-board {
@@ -1980,7 +1667,7 @@ form input::placeholder {
     display: none;
   }
   .hero-star {
-    font-size: 27px;
+    font-size: var(--symbol-small);
   }
   .hero-loop {
     width: 220px;
@@ -1997,22 +1684,20 @@ form input::placeholder {
   .section-header {
     align-items: flex-start;
     flex-wrap: wrap;
-    gap: 13px;
+    gap: var(--space-3);
   }
   .game-grid {
     grid-template-columns: 1fr;
-    gap: 17px;
+    gap: var(--space-4);
   }
   .game-card {
     display: grid;
     grid-template-columns: 180px 1fr;
   }
   .game-card-body {
-    padding: 18px 20px 0;
-  }
-  .art-wrap {
-    height: 100%;
+    padding: var(--space-4) var(--space-5) 0;
   }
+  .art-wrap,
   .art-wrap .game-art {
     height: 100%;
   }
@@ -2020,23 +1705,21 @@ form input::placeholder {
     font-size: var(--type-subtitle);
   }
   .game-meta {
-    font-size: 10px;
+    font-size: var(--type-secondary);
   }
   .card-bottom {
-    padding: 14px 0;
+    padding: var(--space-3) 0;
   }
   .lobby-table-head,
   .lobby-row {
     grid-template-columns: 1fr auto;
-    gap: 12px;
-    padding: 15px;
+    gap: var(--space-3);
+    padding: var(--space-4);
   }
   .lobby-table-head span:nth-child(2),
   .lobby-table-head span:nth-child(3),
   .lobby-row .player-stack,
-  .lobby-row .status-badge {
-    display: none;
-  }
+  .lobby-row .status-badge,
   .lobby-table-head span:nth-child(4) {
     display: none;
   }
@@ -2046,9 +1729,9 @@ form input::placeholder {
   }
   .welcome-strip {
     font-size: var(--type-body);
-    padding-top: 18px;
-    padding-bottom: 27px;
-    gap: 8px;
+    padding-top: var(--space-4);
+    padding-bottom: var(--space-6);
+    gap: var(--space-2);
   }
   .welcome-strip > span:nth-child(2) {
     max-width: 70%;
@@ -2059,9 +1742,7 @@ form input::placeholder {
   .continue-grid {
     grid-template-columns: 1fr;
   }
-  .bottom-note > a {
-    display: none;
-  }
+  .bottom-note > a,
   .site-footer > span:nth-child(2) {
     display: none;
   }
@@ -2080,7 +1761,7 @@ form input::placeholder {
     min-height: 0;
   }
   .room-page-heading h1 {
-    font-size: 24px;
+    font-size: var(--type-subtitle);
   }
   .chess-piece {
     font-size: clamp(28px, 7vw, 58px);
@@ -2091,17 +1772,17 @@ form input::placeholder {
   }
   .auth-art {
     min-height: 0;
-    padding: 27px;
+    padding: var(--space-6);
   }
   .auth-art h1 {
-    font-size: 27px;
-    margin: 12px 0;
+    font-size: var(--type-display);
+    margin: var(--space-3) 0;
   }
   .auth-art .art-box {
     display: none;
   }
   .auth-form {
-    padding: 28px;
+    padding: var(--space-6);
   }
   .stats-grid {
     grid-template-columns: repeat(2, 1fr);
@@ -2110,10 +1791,10 @@ form input::placeholder {
     grid-template-columns: 1fr;
   }
   .profile-header {
-    padding: 23px;
+    padding: var(--space-6);
   }
   .board-container {
-    padding: 10px;
+    padding: var(--space-2);
   }
 }
 @media (max-width: 500px) {
@@ -2122,12 +1803,13 @@ form input::placeholder {
     top: auto;
     bottom: 0;
     width: 100%;
-    height: 64px;
-    padding: 0;
-    background: #fffefaf5;
+    height: calc(
+      var(--size-navigation-mobile) + env(safe-area-inset-bottom, 0px)
+    );
+    padding: 0 0 env(safe-area-inset-bottom, 0px);
     backdrop-filter: blur(12px);
     border-right: 0;
-    border-top: 1px solid var(--line);
+    border-top: 1px solid var(--border);
   }
   .brand {
     display: none;
@@ -2141,15 +1823,20 @@ form input::placeholder {
   }
   .sidebar nav a {
     width: 30%;
-    padding: 8px;
+    padding: var(--space-2);
     display: flex;
     flex-direction: column;
-    gap: 3px;
-    border-radius: 6px;
+    gap: var(--space-half);
+    border-radius: var(--radius-sm);
   }
-  .sidebar nav a span {
-    display: block;
-    font-size: 8px;
+  .app-shell:not(.match-shell) .sidebar nav a span {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: calc(var(--type-secondary) * var(--leading-compact) * 2);
+    font-size: var(--type-secondary);
+    line-height: var(--leading-compact);
+    text-align: center;
   }
   .sidebar nav a svg {
     width: 18px;
@@ -2158,49 +1845,40 @@ form input::placeholder {
   .main-shell {
     margin-left: 0;
     width: 100%;
-    padding-bottom: 64px;
+    padding-bottom: calc(
+      var(--size-navigation-mobile) + env(safe-area-inset-bottom, 0px)
+    );
   }
   .topbar {
-    padding: 0 19px;
     height: 62px;
   }
   .header-search {
     max-width: 220px;
   }
   .header-search input {
-    font-size: 11px;
+    font-size: var(--type-body);
   }
   .header-search .search-hint {
     display: none;
   }
-  .header-right {
-    gap: 0;
-  }
-  .header-login {
-    font-size: 11px;
-  }
   .header-search input::placeholder {
-    font-size: 10px;
+    font-size: var(--type-body);
   }
   main {
-    padding: 20px 19px 26px;
+    padding: var(--space-5) var(--space-5) var(--space-6);
   }
   .hero {
-    padding: 26px 22px;
+    padding: var(--space-6) var(--space-5);
     min-height: 300px;
   }
   .hero-copy {
     max-width: 100%;
   }
   .hero h1 {
-    font-size: 35px;
+    font-size: var(--type-display);
     position: relative;
     z-index: 2;
   }
-  .hero-copy > p {
-    font-size: 10px;
-    max-width: 210px;
-  }
   .hero-visual {
     position: absolute;
     right: -70px;
@@ -2210,18 +1888,17 @@ form input::placeholder {
     pointer-events: none;
   }
   .hero-eyebrow {
-    font-size: 8px;
-    letter-spacing: 1.3px;
+    font-size: var(--type-detail);
+    letter-spacing: var(--tracking-label);
   }
   .hero-caption {
     font-size: var(--type-secondary);
   }
   .hero .button {
-    font-size: 11px;
+    font-size: var(--type-secondary);
   }
   .welcome-strip > span:nth-child(2) {
     max-width: 62%;
-    font-size: var(--type-body);
   }
   .welcome-spark {
     display: none;
@@ -2233,7 +1910,7 @@ form input::placeholder {
     grid-template-columns: 130px 1fr;
   }
   .game-card-body {
-    padding: 15px 13px 0;
+    padding: var(--space-4) var(--space-3) 0;
   }
   .game-title h3 {
     font-size: var(--type-subtitle);
@@ -2241,24 +1918,17 @@ form input::placeholder {
   .difficulty {
     display: none;
   }
-  .game-card-body > p {
-    font-size: 10px;
-  }
   .game-meta {
     flex-wrap: wrap;
     justify-content: flex-start;
-    font-size: 8px;
-    gap: 7px;
-    margin: 13px 0;
-  }
-  .game-play {
-    font-size: 10px;
+    gap: var(--space-2);
+    margin: var(--space-3) 0;
   }
   .game-category {
     left: 9px;
     top: 10px;
     font-size: var(--type-detail);
-    padding: 4px 6px;
+    padding: var(--space-1) var(--space-1);
   }
   .game-card .art-wrap {
     min-height: 175px;
@@ -2277,7 +1947,7 @@ form input::placeholder {
     font-size: var(--type-subtitle);
   }
   .bottom-note > span {
-    font-size: 32px;
+    font-size: var(--symbol-small);
   }
   .bottom-note strong {
     font-size: var(--type-body);
@@ -2286,28 +1956,28 @@ form input::placeholder {
     font-size: var(--type-secondary);
   }
   .site-footer {
-    padding: 20px;
+    padding: var(--space-5);
     font-size: var(--type-secondary);
   }
   .form-row {
-    gap: 10px;
+    gap: var(--space-2);
   }
   .modal {
-    padding: 23px;
+    padding: var(--space-6);
   }
   .modal h2 {
-    font-size: 20px;
+    font-size: var(--type-section);
   }
   .room-page-heading {
     align-items: flex-start;
     flex-direction: column;
   }
   .room-page-heading .button {
-    padding: 9px 12px;
+    padding: var(--space-2) var(--space-3);
   }
   .board-container {
-    padding: 8px;
-    border-radius: 8px;
+    padding: var(--space-2);
+    border-radius: var(--radius-sm);
   }
   .coordinate {
     font-size: 7px;
@@ -2319,57 +1989,57 @@ form input::placeholder {
     box-shadow: 0 2px #292f25;
   }
   .board-note {
-    font-size: 9px;
+    font-size: var(--type-detail);
   }
   .waiting-card {
-    padding: 25px 15px;
+    padding: var(--space-6) var(--space-4);
   }
   .waiting-card h2 {
-    font-size: 22px;
+    font-size: var(--type-section);
   }
   .waiting-players {
-    gap: 14px;
+    gap: var(--space-3);
   }
   .waiting-player {
     width: 65px;
   }
   .profile-header {
-    gap: 15px;
-    padding: 20px;
+    gap: var(--space-4);
+    padding: var(--space-5);
   }
   .profile-header h1 {
-    font-size: 24px;
+    font-size: var(--type-heading);
   }
   .profile-header .avatar {
     width: 52px;
     height: 52px;
-    font-size: 17px;
+    font-size: var(--type-body);
   }
   .history-item {
-    padding: 15px;
-    gap: 10px;
+    padding: var(--space-4);
+    gap: var(--space-2);
   }
   .history-item .room-symbol {
     width: 33px;
     height: 33px;
-    font-size: 24px;
+    font-size: var(--symbol-small);
   }
   .history-item strong {
-    font-size: 11px;
+    font-size: var(--type-body);
   }
   .history-item small {
-    font-size: 9px;
+    font-size: var(--type-secondary);
   }
   .result-tag {
-    font-size: 9px;
-    padding: 5px 7px;
+    font-size: var(--type-detail);
+    padding: var(--space-1) var(--space-2);
   }
   .parchis-board {
-    padding: 10px;
+    padding: var(--space-2);
   }
   .parchis-center .button {
-    padding: 8px;
-    font-size: 9px;
+    padding: var(--space-2);
+    font-size: var(--type-detail);
   }
 }
 @media (prefers-reduced-motion: reduce) {
@@ -2387,87 +2057,2212 @@ dialog.modal {
   margin: auto;
 }
 dialog.modal::backdrop {
-  background: #263a2d55;
+  background: var(--overlay);
   backdrop-filter: blur(4px);
 }
-
-.hero-copy > p {
-  font-size: 13px;
-  color: #65735d;
+.game-card-body .difficulty {
+  color: var(--secondary);
 }
-.hero-caption {
-  font-size: var(--type-secondary);
-  color: #6d795f;
+@media (max-width: 500px) {
+  .hero-copy > p {
+    font-size: var(--type-detail);
+    max-width: 235px;
+  }
+  .game-meta {
+    font-size: var(--type-secondary);
+  }
+  .game-card-body > p,
+  .game-play,
+  .welcome-strip > span:nth-child(2) {
+    font-size: var(--type-body);
+  }
 }
-.welcome-strip {
-  color: #66755b;
-  font-size: var(--type-body);
+/* Surfaces, themes and player presentation. */
+.brand {
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--space-2);
+  margin: 0 0 var(--space-10);
+  letter-spacing: var(--tracking-body);
 }
-.eyebrow {
-  color: #647358;
+.brand-logo {
+  display: block;
+  width: 100%;
+  height: auto;
+  aspect-ratio: 897 / 214;
+  object-fit: cover;
+  background: transparent;
+  border-radius: 0;
 }
-.game-card-body > p {
-  color: #68755f;
-  font-size: 12px;
+.brand small {
+  color: var(--secondary);
+  font: var(--weight-medium) var(--type-detail) var(--font-ui);
+  letter-spacing: var(--tracking-label);
+  margin-left: var(--space-1);
 }
-.game-meta {
-  color: #67755c;
-  font-size: 10px;
+.mobile-logo {
+  display: none;
 }
-.game-play {
-  font-size: 12px;
+.sidebar,
+.game-card,
+.hero-note,
+.join-code,
+.lobby-table,
+.continue-card,
+.modal,
+.auth-layout,
+.stat-card,
+.help-card,
+.room-panel,
+.parchis-board,
+.promotion,
+.room-code {
+  background: var(--surface);
+  border-color: var(--border);
 }
-.sidebar nav a:not(.active) {
-  color: #64705c;
+.topbar {
+  background: var(--background);
 }
-.muted,
-.page-heading p {
-  color: #67755d;
+.sidebar-invite,
+.filter-tabs,
+.difficulty {
+  background: var(--soft);
+  border-color: var(--border);
 }
-.game-card-body .difficulty {
-  color: #64725c;
+.lobby-table-head {
+  background: var(--soft);
 }
-.help-card ol,
-.help-intro p,
-.room-rules {
-  color: #657557;
+.chat-form,
+.variant-note {
+  background: var(--soft);
+  border-color: var(--border);
 }
-.chat-empty,
-.empty-lobby p {
-  color: #69765e;
+.parchis-home {
+  background: var(--soft);
 }
-.hero-eyebrow {
-  color: #627356;
+.promotion button {
+  background: var(--soft);
+  border-color: var(--border);
+}
+.hero,
+.auth-art,
+.profile-header,
+.help-intro,
+.waiting-card,
+.result-banner {
+  background: var(--hero);
+  border-color: var(--border);
 }
-.auth-form > p,
-.auth-art p {
-  color: #67785b;
+.sidebar nav a.active,
+.sidebar nav a:hover,
+.turn-indicator {
+  background: var(--soft);
+  color: var(--accent-text);
+}
+.hero h1 {
+  color: var(--text);
+}
+.hero h1 em,
+.hero-note > span,
+.game-play,
+.lobby-join,
+.bottom-note > a,
+.sidebar-invite a,
+.waiting-symbol,
+.room-code,
+.hero-star {
+  color: var(--accent-text);
 }
+.hero-loop {
+  border-color: var(--border);
+}
+.sidebar-label,
+.eyebrow,
+.sidebar nav a:not(.active),
+.sidebar-invite p,
+.sidebar-bottom > p,
+.user-card small,
+.logout,
+.header-search,
+.header-search input::placeholder,
+.connection,
+.hero-eyebrow,
+.hero-copy > p,
+.hero-caption,
+.hero-note small,
+.welcome-strip,
 .live-count,
-.connection {
-  color: #68795c;
+.filter-tabs button,
+.game-card-body > p,
+.difficulty,
+.game-meta,
+.card-bottom > a,
+.join-code,
+.join-code input::placeholder,
+.lobby-table-head,
+.lobby-game small,
+.player-stack small,
+.status-badge,
+.empty-lobby p,
+.empty-panel,
+.bottom-note > span,
+.bottom-note strong,
+.bottom-note p,
+.continue-card small,
+.site-footer,
+.muted,
+.auth-art p,
+.auth-form > p,
+.auth-tabs button,
+.auth-note,
+.page-heading p,
+.profile-header p,
+.stat-card span,
+.stat-card small,
+.history-item small,
+.help-card ol,
+.help-intro p,
+.room-page-heading p,
+.breadcrumb,
+.player-banner small,
+.board-note,
+.chat-empty,
+.chat-message time,
+.room-rules,
+.event-list,
+.event-list span,
+.event-list small,
+.waiting-card > p,
+.waiting-player small,
+.result-banner p,
+.parchis-controls p,
+.parchis-home strong,
+.home-pieces small {
+  color: var(--secondary);
 }
-.welcome-strip .live-count {
-  font-size: var(--type-secondary);
+.header-search input,
+.modal input,
+.auth-form input,
+.chat-form input {
+  color: var(--text);
+}
+input:not([type='range']),
+select,
+textarea {
+  background: var(--surface);
+  border-color: var(--border);
+  color: var(--text);
+}
+input::placeholder,
+textarea::placeholder {
+  color: var(--secondary);
+  opacity: 0.8;
+}
+.button.secondary,
+.icon-button:hover,
+.filter-tabs button.chosen {
+  background: var(--surface);
+  border-color: var(--border);
+  color: var(--accent-text);
+}
+.button.primary,
+.chat-form button {
+  background: var(--accent);
+  color: var(--on-accent);
+}
+.button.primary:hover:not(:disabled) {
+  background: var(--accent-hover);
+}
+.button.danger,
+.form-error {
+  color: var(--danger-text);
+  background: var(--danger-bg);
+  border-color: var(--danger-text);
+}
+.card-bottom,
+.lobby-table-head,
+.lobby-row,
+.event-list > div {
+  border-color: var(--border);
+}
+.stat-card strong {
+  color: var(--text);
+}
+.stat-card:nth-child(2) strong,
+.result-tag.win {
+  color: var(--accent-text);
+}
+.result-tag {
+  color: var(--secondary);
+  background: var(--soft);
+}
+.result-tag.loss {
+  color: var(--danger-text);
+  background: var(--danger-bg);
+}
+.avatar,
+.mini-avatar {
+  background: var(--soft);
+  color: var(--accent-text);
+  border-color: var(--surface);
+}
+.settings-trigger {
+  border: 1px solid var(--border);
+  background: var(--surface);
+  color: var(--secondary);
+  transition:
+    background var(--duration-normal),
+    transform var(--duration-normal),
+    color var(--duration-normal);
+}
+.settings-trigger:hover {
+  color: var(--accent-text);
+  background: var(--soft);
+  transform: translateY(-1px);
+}
+.settings-popover {
+  position: fixed;
+  inset: 68px 28px auto auto;
+  margin: 0;
+  width: 310px;
+  max-width: calc(100vw - 24px);
+  border: 1px solid var(--border);
+  color: var(--text);
+  background: var(--surface);
+  box-shadow: var(--shadow-popover);
+}
+.settings-popover:popover-open {
+  animation: panel-enter var(--duration-normal) var(--ease-ui);
+}
+.settings-popover > strong {
+  display: block;
+  font: var(--weight-display) var(--type-body) var(--font-ui);
+  margin-bottom: var(--space-5);
+}
+.settings-label {
+  display: block;
+  font-weight: var(--weight-semibold);
+  color: var(--secondary);
+  margin: var(--space-4) 0 var(--space-2);
+}
+.theme-options,
+.palette-options {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: var(--space-2);
+}
+.theme-options button,
+.palette-options button {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-2);
+  padding: var(--space-3) var(--space-1);
+  min-width: 0;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-control);
+  background: var(--surface);
+  color: var(--secondary);
+}
+.theme-options button.chosen,
+.palette-options button.chosen {
+  background: var(--soft);
+  border-color: var(--accent-text);
+  color: var(--accent-text);
+  box-shadow: var(--shadow-control);
+}
+.palette-options i {
+  width: 22px;
+  height: 22px;
+  border-radius: var(--radius-round);
+  box-shadow: var(--shadow-selection);
+}
+.sound-toggle {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-3);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-control);
+  color: var(--accent-text);
+  background: var(--soft);
+  font-size: var(--type-detail);
+  margin-bottom: var(--space-5);
+}
+.sound-popover label {
+  display: flex;
+  justify-content: space-between;
+  color: var(--secondary);
+  font-weight: var(--weight-medium);
+}
+.sound-popover input[type='range'] {
+  width: 100%;
+  padding: 0;
+  margin: var(--space-4) 0 var(--space-5);
+  accent-color: var(--accent);
+}
+.sound-popover p {
+  margin-top: var(--space-3);
+  color: var(--secondary);
+}
+.sound-popover .speech-option {
+  justify-content: flex-start;
+  align-items: center;
+  gap: var(--space-2);
+  margin: 0 0 var(--space-5);
+  line-height: var(--leading-body);
+}
+.speech-option input {
+  width: 16px;
+  height: 16px;
+  margin: 0;
+  accent-color: var(--accent);
+}
+.modal.dice-overlay {
+  width: 560px;
+  max-width: calc(100vw - 24px);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-dialog);
+  padding: var(--space-10) var(--space-8) var(--space-6);
+  text-align: center;
+  background: radial-gradient(
+    ellipse at 50% 36%,
+    var(--hero),
+    var(--surface) 70%
+  );
+}
+.dice-overlay::backdrop {
+  background: var(--overlay);
+  backdrop-filter: blur(7px);
+}
+.dice-overlay h2 {
+  font-size: var(--type-section);
+  max-width: var(--size-popover);
+  margin: auto;
+}
+.text-button {
+  background: transparent;
+  color: var(--accent-text);
+  border: 0;
+  font-size: var(--type-detail);
+  padding: var(--space-2) 0;
+}
+.pin-input {
+  font-size: var(--type-section);
+  letter-spacing: var(--tracking-pin);
+}
+.guest-notice {
+  padding: var(--space-3);
+  background: var(--soft);
+  border-radius: var(--radius-control);
+  margin-bottom: var(--space-5);
+  font-size: var(--type-detail);
+}
+.modal .button.full + .button.full {
+  margin-top: var(--space-2);
+}
+.avatar[class*='player-color'],
+.mini-avatar[class*='player-color'] {
+  color: var(--player-ink);
+  background: var(--player-soft);
+}
+.chat-message strong {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  color: var(--player-ink);
+}
+.chat-avatar {
+  display: grid;
+  place-items: center;
+  height: 23px;
+  width: 23px;
+  background: var(--player-soft);
+  color: var(--player-ink);
+  font-size: var(--type-detail);
+}
+.chat-message p {
+  color: var(--text);
+  background: var(--player-soft);
+  border-inline-start: 3px solid var(--player-solid);
+}
+.chat-message.mine p {
+  color: var(--text);
+  background: var(--player-soft);
+  border-inline-start: 3px solid var(--player-solid);
+  font-size: var(--type-detail);
+}
+.chat-message {
+  animation: panel-enter 0.2s var(--ease-ui);
+}
+.parchis-controls {
+  background: var(--soft);
+  border-radius: var(--radius-card);
+  padding: var(--space-4);
+  margin: var(--space-4) 0;
+}
+.parchis-home {
+  border-color: var(--border);
+}
+.home-pieces .parchis-token:not(:disabled) {
+  outline: 2px solid var(--accent-text);
+  outline-offset: 3px;
+}
+@keyframes panel-enter {
+  from {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@media (max-width: 1000px) and (min-width: 501px) {
+  .brand {
+    width: 64px;
+    align-items: center;
+    margin: 0 auto var(--space-10);
+  }
+  .brand-logo {
+    min-width: 64px;
+  }
+  .brand small {
+    display: none;
+  }
 }
 @media (max-width: 500px) {
-  .hero-copy > p {
-    font-size: 12px;
-    max-width: 235px;
+  .sidebar {
+    background: var(--surface);
   }
-  .game-meta {
-    font-size: 10px;
+  .mobile-logo {
+    display: block;
+    width: 155px;
+    flex-shrink: 0;
+  }
+  .topbar .header-search {
+    display: none;
   }
-  .game-card-body > p {
-    font-size: 11px;
+  .topbar {
+    justify-content: space-between;
+    gap: var(--space-2);
+    padding: 0 var(--space-4);
   }
-  .game-play {
-    font-size: 11px;
+  .header-right {
+    gap: var(--space-2);
   }
-  .sidebar nav a span {
-    font-size: 10px;
+  .settings-popover {
+    inset: 65px 12px auto auto;
   }
-  .welcome-strip > span:nth-child(2) {
+  .header-login {
     font-size: var(--type-body);
+    gap: var(--space-1);
+  }
+  .settings-trigger {
+    width: 34px;
+    height: 34px;
+    border-radius: var(--radius-control);
+  }
+}
+/* Table viewport and game layout. */
+/* The table has its own viewport; platform navigation opens on demand. */
+.match-shell {
+  height: 100dvh;
+  overflow: hidden;
+}
+.match-shell .main-shell {
+  margin: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.match-shell .topbar {
+  flex: 0 0 52px;
+  padding: 0 var(--space-4);
+  gap: var(--space-3);
+  background: var(--surface);
+}
+.match-shell .mobile-logo {
+  display: block;
+  margin-right: auto;
+}
+.match-shell .header-right {
+  gap: var(--space-3);
+}
+.match-shell .header-right .small-avatar {
+  display: none;
+}
+.match-shell main {
+  flex: 1;
+  min-height: 0;
+  width: 100%;
+  max-width: none;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+}
+.match-shell .site-footer,
+.match-shell .sidebar:not(:popover-open) {
+  display: none;
+}
+.match-shell .sidebar:popover-open {
+  display: flex;
+  position: fixed;
+  margin: 0;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-panel);
+  box-shadow: var(--shadow-popover);
+  z-index: var(--layer-menu);
+  overflow: auto;
+  animation: panel-enter var(--duration-normal) var(--ease-ui);
+}
+.match-shell .sidebar .brand {
+  display: flex;
+  width: 100%;
+  margin: 0 0 var(--space-6);
+  align-items: flex-start;
+}
+.match-shell .sidebar .brand-logo {
+  width: 100%;
+}
+.match-shell .sidebar .brand small,
+.match-shell .sidebar-label,
+.match-shell .sidebar nav a span,
+.match-shell .sidebar-bottom {
+  display: block;
+}
+.match-shell .sidebar nav {
+  width: 100%;
+}
+.match-shell .sidebar nav a {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  flex-direction: row;
+}
+.match-shell .sidebar-invite {
+  margin-top: var(--space-4);
+}
+.match-shell .settings-popover {
+  top: 58px;
+}
+.match-room {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  background: radial-gradient(
+    ellipse at 50% 40%,
+    var(--soft),
+    var(--background) 75%
+  );
+}
+.match-room .room-page-heading {
+  margin: 0;
+  flex-shrink: 0;
+  border-bottom: 1px solid var(--border);
+}
+.room-page-heading > div:first-child {
+  min-width: 0;
+}
+.match-room .room-page-heading .eyebrow {
+  letter-spacing: var(--tracking-label);
+}
+.match-room .room-page-heading h1 {
+  letter-spacing: var(--tracking-heading);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.match-turn {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-2) var(--space-3);
+  background: var(--player-soft);
+  color: var(--player-ink);
+  border-radius: var(--radius-panel);
+  font-size: var(--type-detail);
+  font-weight: var(--weight-semibold);
+  white-space: nowrap;
+}
+.match-turn i,
+.panel-players i {
+  display: block;
+  width: 7px;
+  height: 7px;
+  border-radius: var(--radius-round);
+  background: var(--player-solid);
+  flex-shrink: 0;
+}
+.room-tools {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  margin-left: auto;
+}
+.match-room .room-tools .button {
+  padding: var(--space-2) var(--space-3);
+  margin: 0;
+  font-size: var(--type-detail);
+}
+.room-tools .icon-button {
+  width: 34px;
+  height: 34px;
+  display: grid;
+  place-items: center;
+  padding: 0;
+}
+.panel-trigger b {
+  background: var(--accent);
+  color: var(--on-accent);
+  border-radius: var(--radius-panel);
+  font-size: var(--type-detail);
+  padding: var(--space-half) var(--space-1);
+}
+.match-room .room-layout {
+  flex: 1;
+  min-height: 0;
+  display: block;
+  position: relative;
+  transition: padding-right var(--duration-normal) var(--ease-ui);
+}
+.match-room .play-area {
+  height: 100%;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  container-type: size;
+}
+.match-room .parchis-board {
+  padding: 0;
+  border: 0;
+  background: transparent;
+}
+.board-surface {
+  min-width: 0;
+  min-height: 0;
+  display: grid;
+  place-items: center;
+  container-type: size;
+}
+.match-room .parchis-map {
+  width: min(100cqw, 100cqh);
+  height: min(100cqw, 100cqh);
+  max-width: 100%;
+  max-height: 100%;
+  filter: drop-shadow(var(--shadow-board));
+}
+.match-room .parchis-controls {
+  margin: 0;
+  align-items: stretch;
+}
+.match-room .parchis-controls p {
+  font-size: var(--type-detail);
+  flex: none;
+}
+.table-players {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  border-top: 1px solid var(--border);
+  padding-top: var(--space-3);
+}
+.table-player {
+  display: grid;
+  grid-template-columns: 25px minmax(0, 1fr);
+  align-items: center;
+  column-gap: var(--space-2);
+  opacity: 0.7;
+}
+.table-player.playing {
+  opacity: 1;
+}
+.table-player .mini-avatar {
+  grid-row: span 2;
+  width: 25px;
+  height: 25px;
+  margin: 0;
+  border: 0;
+  font-size: var(--type-detail);
+  background: var(--player-soft);
+  color: var(--player-ink);
+}
+.table-player strong {
+  font-size: var(--type-secondary);
+  color: var(--player-ink);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.table-player small {
+  font-size: var(--type-detail);
+  color: var(--secondary);
+}
+.piece-shortcuts {
+  display: flex;
+  gap: var(--space-2);
+  align-items: center;
+  flex-wrap: wrap;
+}
+.piece-shortcuts > span {
+  width: 100%;
+  color: var(--secondary);
+}
+.piece-shortcuts .parchis-token {
+  width: 32px;
+  height: 32px;
+  font-size: 13px;
+}
+.match-room .board-note {
+  font-size: var(--type-detail);
+  margin: var(--space-2) 0 0;
+  height: 20px;
+  flex-shrink: 0;
+  justify-content: center;
+}
+.match-room .board-note > span:last-child,
+.match-room .parchis-board + .board-note {
+  display: none;
+}
+.match-room .board-container {
+  padding: var(--space-2);
+  margin: auto;
+  max-width: none;
+  aspect-ratio: 1;
+  flex-shrink: 0;
+}
+.match-room .board-grid {
+  height: 100%;
+  grid-template-rows: repeat(8, minmax(0, 1fr));
+}
+.match-room .chess-piece {
+  font-size: clamp(16px, 8cqmin, 80px);
+}
+.match-room .board-square {
+  aspect-ratio: auto;
+}
+.match-room .promotion {
+  position: absolute;
+  bottom: 15px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 10;
+}
+.match-room .room-panel:not(:popover-open) {
+  display: none;
+}
+.match-room .room-panel:popover-open {
+  display: flex;
+  flex-direction: column;
+  width: var(--size-popover);
+  max-width: calc(100vw - 24px);
+  position: fixed;
+  inset: 124px 18px 14px auto;
+  height: auto;
+  margin: 0;
+  z-index: 20;
+  background: var(--surface);
+  border-radius: var(--radius-panel);
+  box-shadow: var(--shadow-popover);
+  animation: panel-enter var(--duration-normal) var(--ease-ui);
+}
+.panel-heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--space-3) var(--space-4) var(--space-2);
+}
+.panel-players {
+  display: flex;
+  gap: var(--space-2) var(--space-3);
+  flex-wrap: wrap;
+  padding: 0 var(--space-4) var(--space-2);
+}
+.panel-players span {
+  display: flex;
+  align-items: center;
+  gap: var(--space-1);
+  color: var(--player-ink);
+}
+.match-room .room-tabs {
+  flex-shrink: 0;
+}
+.match-room .chat-messages,
+.match-room .room-rules,
+.match-room .event-list {
+  height: auto;
+  min-height: 0;
+  flex: 1;
+  overflow: auto;
+}
+.match-room .chat-form {
+  flex-shrink: 0;
+}
+.match-room .waiting-card {
+  overflow: auto;
+}
+.match-room .result-banner {
+  padding: var(--space-3) var(--space-5);
+  margin: 0;
+  display: flex;
+  gap: var(--space-3);
+  align-items: center;
+  flex-wrap: wrap;
+}
+.match-room .result-banner .empty-symbol {
+  display: none;
+}
+.match-room .result-banner h2 {
+  font-size: var(--type-section);
+}
+.match-room .result-banner p {
+  font-size: var(--type-detail);
+}
+.match-room .result-banner .button {
+  padding: var(--space-2) var(--space-3);
+  margin: 0;
+}
+.match-room .form-error {
+  margin: var(--space-2) var(--space-4) 0;
+  flex-shrink: 0;
+}
+@media (min-width: 850px) {
+  .match-room .room-layout:has(.room-panel:popover-open) {
+    padding-right: calc(var(--size-popover) + var(--space-8));
+  }
+  .match-room .room-layout:has(.room-panel:popover-open) .parchis-board {
+    grid-template-columns: minmax(0, 1fr) 180px;
+    gap: var(--space-3);
+  }
+}
+@media (min-width: 850px) and (max-width: 1199px) {
+  .match-room .room-layout:has(.room-panel:popover-open) .parchis-controls {
+    width: 100%;
+  }
+  .match-room
+    .room-layout:has(.room-panel:popover-open)
+    .parchis-controls
+    > .eyebrow,
+  .match-room .room-layout:has(.room-panel:popover-open) .table-players {
+    display: none;
+  }
+  .match-room .room-layout:has(.room-panel:popover-open) .dice-widget {
+    grid-row: span 2;
+  }
+}
+@media (max-width: 800px) and (orientation: portrait) {
+  .match-room .parchis-controls .dice-widget .dice-face {
+    padding: 6px;
+    gap: 2px;
+    border-radius: 6px;
+  }
+  .match-room .parchis-controls .button {
+    font-size: var(--type-detail);
+    padding: var(--space-2);
+  }
+  .match-room .piece-shortcuts {
+    gap: var(--space-1);
+  }
+  .match-room .piece-shortcuts > span {
+    width: auto;
+  }
+}
+@media (max-width: 650px) {
+  .match-shell .connection {
+    font-size: 0;
+    gap: 0;
+  }
+  .match-room .room-page-heading {
+    grid-template-columns: minmax(0, 1fr) auto;
+  }
+  .match-room .room-page-heading > div:first-child {
+    grid-row: 1;
+    grid-column: 1;
+  }
+  .match-room .room-tools {
+    grid-row: 1;
+    grid-column: 2;
+  }
+  .match-turn {
+    padding: var(--space-1) 0;
+    font-size: var(--type-detail);
+    grid-row: 2;
+    grid-column: 1 / -1;
+    width: 100%;
+    background: transparent;
+  }
+  .room-tools {
+    gap: var(--space-1);
+  }
+  .room-tools .fullscreen-trigger,
+  .panel-trigger > span {
+    display: none;
+  }
+  .match-room .room-panel:popover-open {
+    width: var(--size-popover);
+  }
+  .match-room .board-note {
+    font-size: var(--type-detail);
+    height: auto;
+  }
+}
+@media (orientation: landscape) and (max-height: 520px) {
+  .match-room .parchis-board {
+    gap: var(--space-3);
+    grid-template-columns: minmax(0, 1fr) 180px;
+  }
+  .match-room .parchis-controls .dice-widget .dice-stage {
+    --edge: 36px;
+    --depth: 18px;
+    width: 48px;
+    height: 60px;
+  }
+  .match-room .parchis-controls .button {
+    padding: var(--space-2);
+    font-size: var(--type-detail);
+  }
+}
+/* Shared interface components and responsive arrangements. */
+/* One type and spacing scale for navigation, forms and game controls. */
+body {
+  font: var(--weight-regular) var(--type-body)/var(--leading-body)
+    var(--font-ui);
+}
+h1,
+h2,
+h3 {
+  font-family: var(--font-ui);
+  line-height: var(--leading-heading);
+  letter-spacing: var(--tracking-heading);
+}
+h2,
+.modal h2 {
+  font-size: var(--type-section);
+  font-weight: var(--weight-display);
+}
+h3 {
+  font-size: var(--type-subtitle);
+}
+.small,
+.muted.small,
+.auth-note,
+.modal .auth-note {
+  font-size: var(--type-secondary);
+  line-height: var(--leading-relaxed);
+}
+.eyebrow,
+.sidebar-label {
+  font-size: var(--type-detail);
+  line-height: var(--leading-compact);
+  letter-spacing: var(--tracking-label);
+}
+.button {
+  min-height: var(--size-control);
+  font-size: var(--type-secondary);
+  line-height: var(--leading-compact);
+  padding: var(--space-2) var(--space-4);
+  border-radius: var(--radius-control);
+  font-weight: var(--weight-semibold);
+}
+.icon-button,
+.settings-trigger {
+  width: var(--size-control);
+  height: var(--size-control);
+  min-width: var(--size-control);
+  min-height: var(--size-control);
+  display: inline-grid;
+  place-items: center;
+  padding: 0;
+  border-radius: var(--radius-control);
+}
+button:focus-visible,
+a:focus-visible,
+input:focus-visible,
+select:focus-visible,
+textarea:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 3px;
+}
+.modal h2:focus {
+  outline: none;
+}
+.modal {
+  width: calc(100vw - var(--space-8));
+  max-width: var(--size-modal);
+  padding: var(--space-6);
+  border-radius: var(--radius-dialog);
+  border: 1px solid var(--border);
+  box-shadow: var(--shadow-dialog);
+  max-height: calc(100dvh - var(--space-8));
+}
+.modal-head {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-4);
+  margin-bottom: var(--space-5);
+}
+.modal-head > div {
+  min-width: 0;
+  flex: 1;
+}
+.modal-head .icon-button {
+  flex-shrink: 0;
+}
+.modal .eyebrow {
+  margin: 0 0 var(--space-2);
+}
+.modal > p {
+  font-size: var(--type-body);
+  line-height: var(--leading-relaxed);
+}
+.modal label,
+form label {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  align-items: stretch;
+  margin: 0 0 var(--space-5);
+  font-size: var(--type-secondary);
+  font-weight: var(--weight-semibold);
+  color: var(--text);
+}
+.modal input:not([type='checkbox']):not([type='range']),
+.modal select {
+  display: block;
+  width: 100%;
+  min-width: 0;
+  min-height: var(--size-field);
+  padding: var(--space-3) var(--space-3);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-control);
+  background: var(--surface);
+  color: var(--text);
+  font-size: var(--type-body);
+  line-height: var(--leading-body);
+  font-weight: var(--weight-regular);
+}
+.modal textarea {
+  display: block;
+  width: 100%;
+  min-width: 0;
+  padding: var(--space-3) var(--space-3);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-control);
+  background: var(--surface);
+  color: var(--text);
+  font-size: var(--type-body);
+  line-height: var(--leading-body);
+  font-weight: var(--weight-regular);
+}
+form input:not([type='checkbox']):not([type='range']),
+form select {
+  display: block;
+  width: 100%;
+  min-width: 0;
+  min-height: var(--size-field);
+  padding: var(--space-3) var(--space-3);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-control);
+  background: var(--surface);
+  color: var(--text);
+  font-size: var(--type-body);
+  line-height: var(--leading-body);
+  font-weight: var(--weight-regular);
+}
+form textarea {
+  display: block;
+  width: 100%;
+  min-width: 0;
+  padding: var(--space-3) var(--space-3);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-control);
+  background: var(--surface);
+  color: var(--text);
+  font-size: var(--type-body);
+  line-height: var(--leading-body);
+  font-weight: var(--weight-regular);
+}
+.modal textarea,
+form textarea {
+  resize: vertical;
+  min-height: 112px;
+}
+.modal input[readonly] {
+  background: var(--soft);
+  text-overflow: ellipsis;
+}
+.modal .form-row {
+  gap: var(--space-3);
+}
+.modal .form-row .button {
+  width: 100%;
+}
+.modal .auth-note {
+  margin: var(--space-4) 0 0;
+  overflow-wrap: anywhere;
+}
+.share-form {
+  display: flex;
+  flex-direction: column;
+  margin-top: var(--space-6);
+}
+.share-form .button.full {
+  margin-top: 0;
+  width: 100%;
+}
+.modal .button.full {
+  font-size: var(--type-body);
+}
+.match-room .dice-overlay .button {
+  min-height: var(--size-field);
+  font-size: var(--type-body);
+  padding: var(--space-3) var(--space-4);
+}
+.match-room .dice-overlay .dice-announcement p {
+  font-size: var(--type-body);
+  line-height: var(--leading-body);
+}
+.settings-popover {
+  font-size: var(--type-secondary);
+  padding: var(--space-6);
+  border-radius: var(--radius-panel);
+}
+.sound-popover {
+  width: var(--size-popover);
+  max-height: calc(100dvh - 80px);
+  overflow: auto;
+}
+.sound-popover .audio-preview-label {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: var(--space-2);
+  margin-top: var(--space-5);
+  font-size: var(--type-secondary);
+}
+.sound-popover select {
+  min-height: var(--size-control);
+  width: 100%;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-control);
+  padding: var(--space-2) var(--space-3);
+  margin-top: var(--space-2);
+  font-size: var(--type-body);
+  background: var(--surface);
+  color: var(--text);
+}
+.audio-samples {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--space-2);
+  margin-top: var(--space-3);
+}
+.audio-samples button {
+  min-height: var(--size-control);
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: var(--space-2);
+  padding: var(--space-2) var(--space-3);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-control);
+  background: var(--soft);
+  color: var(--accent-text);
+  font-size: var(--type-secondary);
+}
+.settings-label,
+.sound-popover label,
+.sound-popover p {
+  font-size: var(--type-secondary);
+  line-height: var(--leading-body);
+}
+.theme-options button,
+.palette-options button {
+  min-height: 76px;
+  font-size: var(--type-secondary);
+}
+.sidebar nav a,
+.user-card strong,
+.sidebar-invite strong {
+  font-size: var(--type-body);
+}
+.user-card small,
+.sidebar-invite p,
+.sidebar-invite a,
+.logout {
+  font-size: var(--type-secondary);
+  line-height: var(--leading-body);
+}
+.game-meta,
+.lobby-game small,
+.filter-tabs button,
+.help-card ol,
+.history-item small {
+  font-size: var(--type-secondary);
+}
+.game-card-body > p,
+.game-play,
+.welcome-strip,
+.join-code input,
+.empty-lobby p,
+.lobby-join,
+.lobby-game strong,
+.continue-card strong,
+.bottom-note strong,
+.bottom-note > a {
+  font-size: var(--type-body);
+  line-height: var(--leading-body);
+}
+.lobby-game strong,
+.continue-card strong {
+  font-weight: var(--weight-bold);
+}
+.lobby-table-head,
+.hero-caption,
+.live-count,
+.welcome-strip .live-count,
+.player-stack small,
+.status-badge,
+.continue-card small,
+.bottom-note p,
+.site-footer {
+  font-size: var(--type-secondary);
+  line-height: var(--leading-body);
+}
+.section-header h2 {
+  font-size: var(--type-section);
+  line-height: var(--leading-heading);
+}
+.game-title h3 {
+  font-size: var(--type-subtitle);
+  line-height: var(--leading-heading);
+}
+.game-category,
+.difficulty,
+.game-card-body .difficulty {
+  font-size: var(--type-detail);
+  line-height: var(--leading-compact);
+}
+.empty-lobby h3 {
+  font-size: var(--type-subtitle);
+}
+.lobby-table-head {
+  letter-spacing: var(--tracking-body);
+  font-weight: var(--weight-semibold);
+}
+.lobby-game small,
+.continue-card small {
+  margin-top: var(--space-1);
+}
+.lobby-game,
+.continue-card {
+  gap: var(--space-4);
+}
+.lobby-game > span:last-child,
+.continue-card > div {
+  min-width: 0;
+}
+.continue-card {
+  min-height: 88px;
+  padding: var(--space-4) var(--space-5);
+}
+.continue-card strong {
+  overflow-wrap: anywhere;
+}
+.lobby-row {
+  min-height: 96px;
+}
+.lobby-join {
+  min-height: var(--size-control);
+}
+.lobby-row .mini-avatar {
+  width: 32px;
+  height: 32px;
+  font-size: var(--type-secondary);
+}
+.site-footer {
+  flex-wrap: wrap;
+  gap: var(--space-4) var(--space-6);
+}
+.hero-copy > p,
+.help-intro p,
+.auth-form > p {
+  font-size: var(--type-body);
+}
+.match-shell .main-shell {
+  padding-bottom: 0;
+}
+.match-shell .topbar {
+  height: 60px;
+  flex-basis: 60px;
+}
+.match-shell .mobile-logo {
+  width: 156px;
+}
+.match-shell .header-right .connection {
+  font-size: var(--type-detail);
+}
+.match-shell .sidebar:popover-open {
+  inset: 68px auto auto 12px;
+  width: min(320px, calc(100vw - 24px));
+  height: auto;
+  max-height: calc(100dvh - 80px);
+  padding: var(--space-6);
+  gap: 0;
+}
+.match-shell .sidebar .brand {
+  padding-right: var(--space-12);
+  margin-bottom: var(--space-6);
+}
+.close-platform-menu {
+  position: absolute;
+  top: 20px;
+  right: 16px;
+}
+.match-shell .sidebar-label {
+  margin: 0 var(--space-3) var(--space-3);
+  font-size: var(--type-detail);
+}
+.match-shell .sidebar nav {
+  height: auto;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: var(--space-1);
+}
+.match-shell .sidebar nav a {
+  width: 100%;
+  padding: var(--space-3);
+  min-height: var(--size-field);
+  font-size: var(--type-body);
+  gap: var(--space-3);
+}
+.match-shell .sidebar nav a span {
+  font-size: inherit;
+  line-height: var(--leading-body);
+  white-space: nowrap;
+}
+.match-shell .sidebar nav a svg {
+  width: 22px;
+  height: 22px;
+}
+.match-shell .sidebar-invite {
+  display: none;
+}
+.match-shell .sidebar-bottom {
+  margin-top: var(--space-5);
+  padding-top: 0;
+}
+.match-shell .sidebar .brand small {
+  font-size: var(--type-secondary);
+}
+.match-shell .sidebar .user-card {
+  padding: var(--space-4) 0;
+}
+.match-shell .sidebar .user-card > span:last-child {
+  min-width: 0;
+}
+.match-shell .sidebar .user-card strong {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.match-shell .sidebar .logout {
+  margin: 0;
+  min-height: var(--size-control);
+  padding: var(--space-2) 0;
+}
+.match-room .room-page-heading {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--space-2) var(--space-5);
+  gap: var(--space-6);
+}
+.match-room .room-page-heading > div:first-child {
+  display: block;
+  min-width: 0;
+}
+.match-room .room-page-heading .eyebrow {
+  font-size: var(--type-detail);
+  line-height: var(--leading-compact);
+  margin: 0 0 var(--space-1);
+}
+.title-turn-row {
+  display: flex;
+  align-items: baseline;
+  gap: var(--space-4);
+  min-width: 0;
+}
+.match-room .room-page-heading h1 {
+  font-size: var(--type-subtitle);
+  line-height: var(--leading-heading);
+  max-width: none;
+  margin: 0;
+}
+.match-room .match-turn {
+  font-size: var(--type-secondary);
+  line-height: var(--leading-body);
+  padding: var(--space-1) var(--space-3);
+  width: auto;
+  flex-shrink: 0;
+}
+.match-room .room-tools {
+  align-items: center;
+  gap: var(--space-2);
+  flex-shrink: 0;
+}
+.match-room .room-tools .icon-button {
+  width: var(--size-control);
+  height: var(--size-control);
+}
+.match-room .room-tools > .button {
+  min-height: var(--size-control);
+  padding: var(--space-2) var(--space-3);
+  font-size: var(--type-secondary);
+}
+.panel-trigger.has-unread {
+  color: var(--accent-text);
+  border-color: var(--accent);
+  background: var(--soft);
+}
+.panel-trigger {
+  position: relative;
+}
+.panel-trigger.has-unread b {
+  display: grid;
+  place-items: center;
+  min-width: 20px;
+  min-height: 20px;
+  font-size: var(--type-detail);
+  line-height: var(--leading-none);
+}
+.chat-notice {
+  position: fixed;
+  top: 146px;
+  right: 16px;
+  width: var(--size-popover);
+  max-width: calc(100vw - 24px);
+  display: flex;
+  align-items: flex-start;
+  padding: var(--space-3);
+  gap: var(--space-2);
+  border: 1px solid var(--border);
+  border-left: 4px solid var(--player-solid);
+  border-radius: var(--radius-card);
+  background: var(--surface);
+  box-shadow: var(--shadow-popover);
+  z-index: var(--layer-notice);
+  animation: panel-enter var(--duration-normal) var(--ease-ui);
+}
+.chat-notice-open {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-3);
+  flex: 1;
+  min-width: 0;
+  border: 0;
+  background: transparent;
+  padding: var(--space-1);
+  text-align: left;
+  color: var(--text);
+}
+.chat-notice-open > span:last-child {
+  min-width: 0;
+}
+.chat-notice-icon {
+  flex-shrink: 0;
+  width: var(--size-avatar-small);
+  height: var(--size-avatar-small);
+  display: grid;
+  place-items: center;
+  border-radius: var(--radius-control);
+  background: var(--player-soft);
+  color: var(--player-ink);
+}
+.chat-notice strong {
+  display: block;
+  font-size: var(--type-secondary);
+  color: var(--player-ink);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.chat-notice-text {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  font-size: var(--type-secondary);
+  line-height: var(--leading-body);
+  margin-top: var(--space-1);
+  overflow-wrap: anywhere;
+}
+.chat-notice small {
+  display: block;
+  font-size: var(--type-detail);
+  margin-top: var(--space-2);
+  color: var(--accent-text);
+}
+.chat-notice > .icon-button {
+  flex-shrink: 0;
+}
+.match-room .room-layout {
+  padding: var(--space-4);
+}
+.match-room .parchis-board,
+.match-room .table-game {
+  --control-width: clamp(220px, 23cqmin, 360px);
+  --table-gap: clamp(16px, 2cqmin, 32px);
+  --board-size: min(
+    100cqh,
+    calc(100cqw - var(--control-width) - var(--table-gap))
+  );
+  display: grid;
+  flex: 1;
+  min-height: 0;
+  grid-template-columns: minmax(0, var(--board-size)) var(--control-width);
+  grid-template-rows: minmax(0, 1fr);
+  gap: var(--table-gap);
+  justify-content: center;
+}
+.match-room .board-surface {
+  align-self: center;
+  height: var(--board-size);
+  width: 100%;
+}
+.match-room .game-map {
+  display: block;
+  width: min(100cqw, 100cqh);
+  height: min(100cqw, 100cqh);
+  max-width: 100%;
+  max-height: 100%;
+  filter: drop-shadow(var(--shadow-board));
+}
+.match-room .parchis-controls,
+.match-room .game-controls {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+  padding: var(--space-5);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-panel);
+  background: var(--surface);
+  align-self: center;
+  box-shadow: var(--shadow-card);
+  min-width: 0;
+}
+.match-room .parchis-controls > .eyebrow,
+.game-controls > .eyebrow {
+  font-size: var(--type-detail);
+  margin: 0;
+  letter-spacing: var(--tracking-label);
+}
+.match-room .parchis-controls .dice-instruction,
+.game-controls > p {
+  font-size: var(--type-body);
+  line-height: var(--leading-body);
+}
+.last-roll-caption {
+  display: none;
+}
+.match-room .parchis-controls .dice-widget,
+.game-controls .dice-widget {
+  flex-direction: column;
+  gap: var(--space-3);
+}
+.match-room .parchis-controls .dice-widget .button,
+.game-controls .dice-widget .button {
+  min-height: var(--size-control);
+  font-size: var(--type-secondary);
+  padding: var(--space-2) var(--space-3);
+}
+.dice-widget .dice-result small {
+  font-size: var(--type-secondary);
+  line-height: var(--leading-body);
+  max-width: 220px;
+}
+.match-room .table-player strong {
+  font-size: var(--type-secondary);
+}
+.match-room .table-player small,
+.piece-shortcuts > span {
+  font-size: var(--type-detail);
+}
+.match-room .piece-shortcuts .parchis-token {
+  width: 44px;
+  height: 44px;
+  font-size: 16px;
+}
+.match-room .waiting-card {
+  flex: 1;
+  min-height: 0;
+  width: 100%;
+  max-width: 680px;
+  margin: 0 auto;
+  height: auto;
+  padding: var(--space-6);
+  text-align: left;
+  background: var(--surface);
+  border-radius: var(--radius-panel);
+}
+.match-room .waiting-card h2 {
+  font-size: var(--type-subtitle);
+  margin: 0 0 var(--space-2);
+}
+.match-room .waiting-card > p {
+  font-size: var(--type-secondary);
+  margin: 0 0 var(--space-4);
+}
+.match-room .waiting-card .room-code {
+  margin: 0;
+  font-size: var(--type-body);
+  padding: var(--space-2) var(--space-3);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.match-room .waiting-card .room-code button {
+  width: var(--size-control);
+  height: var(--size-control);
+}
+.match-room .waiting-players {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--space-3);
+  margin: var(--space-5) 0;
+}
+.match-room .waiting-player {
+  width: auto;
+  min-width: 0;
+  display: grid;
+  grid-template-columns: 40px minmax(0, 1fr);
+  column-gap: var(--space-2);
+  row-gap: var(--space-half);
+  justify-items: start;
+  align-items: center;
+}
+.match-room .waiting-player .avatar {
+  grid-row: 1/3;
+  width: 40px;
+  height: 40px;
+  font-size: var(--type-secondary);
+}
+.match-room .waiting-player strong {
+  font-size: var(--type-secondary);
+  width: 100%;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+.match-room .waiting-player small {
+  font-size: var(--type-detail);
+}
+.match-room .waiting-card > .button {
+  width: 100%;
+}
+.match-room .room-panel:popover-open {
+  top: 144px;
+}
+.panel-heading strong {
+  font-size: var(--type-body);
+}
+.panel-players span,
+.chat-message time {
+  font-size: var(--type-detail);
+}
+.match-room .room-tabs button {
+  font-size: var(--type-secondary);
+  min-height: var(--size-field);
+}
+.chat-message strong {
+  font-size: var(--type-secondary);
+}
+.chat-message p {
+  font-size: var(--type-body);
+  line-height: var(--leading-body);
+}
+.chat-form input {
+  font-size: var(--type-body);
+  min-height: var(--size-control);
+}
+.chat-form button {
+  width: var(--size-control);
+  min-height: var(--size-control);
+}
+.room-rules,
+.event-list {
+  font-size: var(--type-secondary);
+  line-height: var(--leading-relaxed);
+}
+.panel-pending {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  padding: var(--space-4);
+}
+.pending-heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-2);
+  margin-bottom: var(--space-3);
+}
+.pending-heading strong {
+  font-size: var(--type-body);
+}
+.panel-pending > .button {
+  width: 100%;
+  margin-top: var(--space-4);
+}
+.profile-pending {
+  margin: var(--space-8) 0;
+}
+.profile-header .button {
+  margin-top: var(--space-4);
+}
+.profile-header > div {
+  min-width: 0;
+}
+.profile-header h1 {
+  overflow-wrap: anywhere;
+}
+.avatar,
+.mini-avatar,
+.chat-avatar {
+  overflow: hidden;
+  flex-shrink: 0;
+}
+.chat-avatar {
+  border-radius: var(--radius-round);
+}
+.avatar[class*='player-color'],
+.table-player .mini-avatar,
+.chat-message .chat-avatar {
+  box-shadow: 0 0 0 2px var(--player-solid);
+}
+.match-room .board-container {
+  width: min(100cqw, calc(100cqh - 34px), 1100px);
+}
+.table-game + .board-note {
+  display: none;
+}
+.go-scores small,
+.game-controls .muted,
+.game-controls .button {
+  font-size: var(--type-secondary);
+}
+.go-scores strong {
+  font-size: var(--type-body);
+}
+.oca-note {
+  color: var(--secondary);
+  font-size: var(--type-secondary);
+}
+@media (min-width: 850px) and (max-width: 1199px) {
+  .match-room .room-layout:has(.room-panel:popover-open) .parchis-board {
+    --board-size: min(100cqw, calc(100cqh - 150px));
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-rows: minmax(0, var(--board-size)) auto;
+    align-content: center;
+  }
+  .match-room .room-layout:has(.room-panel:popover-open) .parchis-controls {
+    display: grid;
+    grid-template-columns: 240px minmax(0, 1fr);
+    padding: var(--space-3);
+    gap: var(--space-2) var(--space-4);
+  }
+  .match-room .room-layout:has(.room-panel:popover-open) .dice-widget {
+    flex-direction: row;
+    gap: var(--space-3);
+  }
+}
+@media (max-width: 800px) and (orientation: portrait) {
+  .match-room .parchis-board,
+  .match-room .table-game {
+    --board-size: min(100cqw, calc(100cqh - 184px));
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-rows: minmax(0, var(--board-size)) auto;
+    align-content: start;
+    gap: var(--space-3);
+  }
+  .match-room .board-surface {
+    align-self: start;
+  }
+  .match-room .parchis-controls {
+    display: grid;
+    grid-template-columns: minmax(132px, 44%) minmax(0, 1fr);
+    padding: var(--space-3);
+    gap: var(--space-2) var(--space-3);
+    align-self: start;
+    width: 100%;
+  }
+  .match-room .parchis-controls > .eyebrow {
+    display: none;
+  }
+  .match-room .parchis-controls .dice-widget {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+    grid-row: auto;
+  }
+  .match-room .parchis-controls .dice-widget .dice-stage {
+    width: 60px;
+    height: 64px;
+    --edge: 36px;
+    --depth: 18px;
+  }
+  .dice-widget .dice-result small {
+    font-size: var(--type-detail);
+    max-width: 140px;
+  }
+  .match-room .parchis-controls .dice-instruction {
+    font-size: var(--type-secondary);
+    align-self: center;
+  }
+  .match-room .table-players,
+  .match-room .parchis-controls .dice-widget:has(> button) .dice-result,
+  .match-room .parchis-controls .dice-result small {
+    display: none;
+  }
+  .match-room .parchis-controls:not(:has(.dice-widget > button)) {
+    grid-template-columns: 64px minmax(0, 1fr);
+  }
+  .match-room .last-roll-caption {
+    display: block;
+    font-size: var(--type-detail);
+    margin-bottom: var(--space-1);
+    color: var(--secondary);
+  }
+  .match-room .parchis-controls .dice-widget {
+    align-self: center;
+  }
+  .match-room .piece-shortcuts {
+    grid-column: 1 / -1;
+    flex-wrap: nowrap;
+    justify-content: center;
+  }
+  .match-room .piece-shortcuts > span {
+    display: none;
+  }
+  .match-room .game-controls {
+    width: 100%;
+    padding: var(--space-3);
+    gap: var(--space-2);
+  }
+  .match-room .go-table {
+    --board-size: min(100cqw, calc(100cqh - 212px));
+  }
+  .match-room .go-table.scoring {
+    --board-size: min(100cqw, calc(100cqh - 268px));
+  }
+  .match-room .go-table .game-controls > .eyebrow {
+    display: none;
+  }
+  .match-room .go-table .game-controls > p {
+    font-size: var(--type-secondary);
+  }
+  .match-room .go-scores {
+    flex-direction: row;
+    justify-content: space-between;
+  }
+  .match-room .oca-controls {
+    display: grid;
+    grid-template-columns: 44% minmax(0, 1fr);
+  }
+  .oca-controls > .eyebrow {
+    display: none;
+  }
+  .match-room .oca-controls .dice-widget {
+    grid-row: auto;
+    align-self: center;
+  }
+  .match-room .oca-controls .dice-widget:has(> button) .dice-result {
+    display: none;
+  }
+  .match-room .oca-controls .dice-stage {
+    width: 60px;
+    height: 64px;
+    --edge: 36px;
+    --depth: 18px;
+  }
+  .match-room .oca-controls .dice-stage .dice-face {
+    padding: 6px;
+    gap: 2px;
+    border-radius: 6px;
+  }
+  .match-room .oca-controls .dice-result small {
+    display: none;
+  }
+  .match-room .oca-controls:not(:has(.dice-widget > button)) {
+    grid-template-columns: 64px minmax(0, 1fr);
+  }
+  .match-room .oca-controls .oca-instruction {
+    font-size: var(--type-secondary);
+    align-self: center;
+  }
+  .match-room .oca-controls .oca-note {
+    grid-column: 1/-1;
+    font-size: var(--type-detail);
+  }
+}
+@media (max-width: 650px) {
+  .match-shell .topbar {
+    padding: 0 var(--space-3);
+    gap: var(--space-2);
+  }
+  .match-shell .mobile-logo {
+    width: 136px;
+  }
+  .match-shell .header-right .connection {
+    display: none;
+  }
+  .match-shell .header-right {
+    gap: var(--space-2);
+  }
+  .match-room .room-page-heading {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--space-3);
+    padding: var(--space-3);
+  }
+  .match-room .title-turn-row {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: var(--space-1);
+  }
+  .match-room .room-page-heading h1 {
+    font-size: var(--type-subtitle);
+    max-width: none;
+    white-space: normal;
+    overflow-wrap: anywhere;
+  }
+  .match-room .match-turn {
+    padding: 0;
+    font-size: var(--type-secondary);
+    white-space: normal;
+    background: none;
+  }
+  .match-room .room-tools {
+    gap: var(--space-1);
+    margin-left: 0;
+  }
+  .match-room .panel-trigger {
+    width: var(--size-control);
+    padding: 0;
+  }
+  .match-room .panel-trigger.has-unread b {
+    position: absolute;
+    top: -4px;
+    right: -4px;
+  }
+  .chat-notice {
+    top: 166px;
+    right: 12px;
+  }
+  .match-room .room-layout {
+    padding: var(--space-2) var(--space-3) var(--space-3);
+  }
+  .match-room .room-panel:popover-open {
+    inset: 180px 8px 8px auto;
+  }
+  dialog.modal:not(.dice-overlay) {
+    inset: auto var(--space-4) var(--space-4);
+    width: calc(100% - var(--space-8));
+    margin: 0 auto;
+    padding: var(--space-6);
+    max-height: calc(100dvh - var(--space-8));
+    border-radius: var(--radius-dialog);
+  }
+  .modal h2 {
+    font-size: var(--type-section);
+  }
+  .modal .form-row {
+    grid-template-columns: 1fr;
+  }
+  .modal .button {
+    font-size: var(--type-body);
+  }
+  .settings-popover {
+    top: 68px;
+  }
+}
+@media (max-width: 370px) {
+  .match-shell .mobile-logo {
+    width: 112px;
+  }
+  .match-room .room-tools {
+    flex-wrap: wrap;
+    max-width: 92px;
+  }
+}
+@media (min-width: 1800px) and (min-height: 900px) {
+  .match-room .parchis-board,
+  .match-room .table-game {
+    --control-width: clamp(280px, 24cqmin, 400px);
+  }
+}
+@media (orientation: landscape) and (max-height: 520px) {
+  .match-shell .topbar {
+    height: 52px;
+    flex-basis: 52px;
+  }
+  .match-room .room-page-heading {
+    padding: var(--space-1) var(--space-3);
+  }
+  .match-room .room-page-heading .eyebrow {
+    display: none;
+  }
+  .match-room .room-page-heading h1 {
+    font-size: var(--type-subtitle);
+  }
+  .match-room .parchis-board,
+  .match-room .table-game {
+    --control-width: 220px;
+  }
+  .match-room .parchis-controls,
+  .match-room .game-controls {
+    padding: var(--space-3);
+    gap: var(--space-2);
+    max-height: 100%;
+    overflow: auto;
+  }
+  .match-room .parchis-controls > .eyebrow,
+  .match-room .table-players {
+    display: none;
+  }
+  .match-room .parchis-controls .dice-widget {
+    flex-direction: row;
+    gap: var(--space-2);
+  }
+  .dice-widget .dice-result small {
+    font-size: var(--type-detail);
+  }
+  .match-room .parchis-controls .dice-instruction {
+    font-size: var(--type-secondary);
+  }
+}
+/* Entry notice. */
+.entry-notice {
+  position: fixed;
+  inset: 0;
+  margin: auto;
+  z-index: var(--layer-dialog);
+  width: min(var(--size-notice), calc(100vw - var(--space-8)));
+  max-width: var(--size-notice);
+  padding: var(--space-8);
+}
+.entry-notice h2 {
+  margin: 0 0 var(--space-5);
+  font-size: var(--type-section);
+}
+.entry-notice p {
+  font-size: var(--type-body);
+  line-height: var(--leading-relaxed);
+  margin: 0 0 var(--space-4);
+  color: var(--secondary);
+}
+.entry-notice .terms-author {
+  color: var(--text);
+}
+.terms-read {
+  display: inline-block;
+  font-size: var(--type-body);
+  font-weight: var(--weight-semibold);
+  color: var(--accent);
+  margin: 0 0 var(--space-5);
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+.entry-notice .terms-check {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: var(--space-3);
+  margin: 0 0 var(--space-4);
+  color: var(--text);
+  font-size: var(--type-body);
+  line-height: var(--leading-body);
+  font-weight: var(--weight-semibold);
+}
+.terms-check input {
+  flex: 0 0 22px;
+  width: 22px;
+  height: 22px;
+  margin: var(--space-half) 0 0;
+  padding: 0;
+  accent-color: var(--accent);
+}
+.entry-notice .terms-cookie {
+  font-size: var(--type-secondary);
+  line-height: var(--leading-body);
+}
+.terms-actions {
+  display: flex;
+  gap: var(--space-3);
+  justify-content: flex-end;
+  margin-top: var(--space-6);
+}
+.terms-actions .button {
+  font-size: var(--type-body);
+}
+.terms-actions a[aria-disabled='true'] {
+  pointer-events: none;
+  opacity: 0.5;
+}
+.terms-page {
+  width: min(100%, 760px);
+  margin: 0 auto;
+  padding: var(--space-10) var(--space-8);
+}
+.terms-page h1 {
+  font-size: var(--type-heading);
+  margin: 0 0 var(--space-6);
+}
+.terms-page h2 {
+  font-size: var(--type-section);
+  margin: var(--space-8) 0 var(--space-3);
+}
+.terms-page p {
+  font-size: var(--type-body);
+  line-height: var(--leading-relaxed);
+  margin-bottom: var(--space-4);
+  color: var(--secondary);
+}
+.terms-page .terms-introduction {
+  color: var(--text);
+}
+.terms-page .terms-version {
+  font-size: var(--type-secondary);
+  margin-top: var(--space-8);
+}
+.terms-page .button {
+  margin: 0 var(--space-2) var(--space-3) 0;
+  font-size: var(--type-body);
+}
+.site-footer .footer-author {
+  max-width: var(--measure-note);
+}
+:where(.hero-copy > p, .help-intro p, .auth-form > p, .entry-notice p) {
+  max-inline-size: var(--measure-copy);
+}
+@media (max-width: 600px) {
+  .entry-notice {
+    padding: var(--space-6);
+  }
+  .terms-page {
+    padding: var(--space-6) var(--space-5);
+  }
+  .terms-actions {
+    flex-direction: column-reverse;
+  }
+  .terms-actions .button {
+    width: 100%;
   }
 }
diff --git a/src/appearance.css b/src/appearance.css
deleted file mode 100644
index 54fdbe7..0000000
--- a/src/appearance.css
+++ /dev/null
@@ -1,570 +0,0 @@
-.brand {
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 9px;
-  margin: 0 0 38px;
-  letter-spacing: 0;
-}
-.brand-logo {
-  display: block;
-  width: 100%;
-  height: auto;
-  aspect-ratio: 897 / 214;
-  object-fit: cover;
-  background: transparent;
-  border-radius: 0;
-}
-.brand small {
-  color: var(--secondary);
-  font:
-    500 10px 'DM Sans',
-    sans-serif;
-  letter-spacing: 0.3px;
-  margin-left: 6px;
-}
-.mobile-logo {
-  display: none;
-}
-.sidebar,
-.game-card,
-.hero-note,
-.join-code,
-.lobby-table,
-.continue-card,
-.modal,
-.auth-layout,
-.stat-card,
-.help-card,
-.room-panel,
-.parchis-board,
-.promotion,
-.room-code {
-  background: var(--surface);
-  border-color: var(--border);
-}
-.topbar {
-  background: var(--background);
-}
-.sidebar-invite,
-.filter-tabs,
-.difficulty,
-.lobby-table-head,
-.chat-form,
-.variant-note,
-.parchis-home,
-.promotion button {
-  background: var(--soft);
-  border-color: var(--border);
-}
-.hero,
-.auth-art,
-.profile-header,
-.help-intro,
-.waiting-card,
-.result-banner {
-  background: var(--hero);
-  border-color: var(--border);
-}
-.sidebar nav a.active,
-.sidebar nav a:hover,
-.turn-indicator {
-  background: var(--soft);
-  color: var(--accent-text);
-}
-.hero h1 {
-  color: var(--text);
-}
-.hero h1 em,
-.hero-note > span,
-.game-play,
-.lobby-join,
-.bottom-note > a,
-.sidebar-invite a,
-.waiting-symbol,
-.room-code,
-.hero-star {
-  color: var(--accent-text);
-}
-.hero-loop {
-  border-color: var(--border);
-}
-.sidebar-label,
-.eyebrow,
-.sidebar nav a:not(.active),
-.sidebar-invite p,
-.sidebar-bottom > p,
-.user-card small,
-.logout,
-.header-search,
-.header-search input::placeholder,
-.connection,
-.hero-eyebrow,
-.hero-copy > p,
-.hero-caption,
-.hero-note small,
-.welcome-strip,
-.live-count,
-.filter-tabs button,
-.game-card-body > p,
-.difficulty,
-.game-meta,
-.card-bottom > a,
-.join-code,
-.join-code input::placeholder,
-.lobby-table-head,
-.lobby-game small,
-.player-stack small,
-.status-badge,
-.empty-lobby p,
-.empty-panel,
-.bottom-note > span,
-.bottom-note strong,
-.bottom-note p,
-.continue-card small,
-.site-footer,
-.muted,
-.modal label,
-.auth-art p,
-.auth-form > p,
-.auth-tabs button,
-.auth-note,
-.page-heading p,
-.profile-header p,
-.stat-card span,
-.stat-card small,
-.history-item small,
-.help-card ol,
-.help-intro p,
-.room-page-heading p,
-.breadcrumb,
-.player-banner small,
-.board-note,
-.chat-empty,
-.chat-message time,
-.room-rules,
-.event-list,
-.event-list span,
-.event-list small,
-.waiting-card > p,
-.waiting-player small,
-.result-banner p,
-.parchis-controls p,
-.parchis-home strong,
-.home-pieces small {
-  color: var(--secondary);
-}
-.header-search input,
-.modal input,
-.modal select,
-.modal textarea,
-.auth-form input,
-.chat-form input {
-  color: var(--text);
-}
-input:not([type='range']),
-select,
-textarea {
-  background: var(--surface);
-  border-color: var(--border);
-  color: var(--text);
-}
-input::placeholder,
-textarea::placeholder {
-  color: var(--secondary);
-  opacity: 0.8;
-}
-.button.secondary,
-.icon-button:hover,
-.filter-tabs button.chosen {
-  background: var(--surface);
-  border-color: var(--border);
-  color: var(--accent-text);
-}
-.button.primary,
-.chat-form button {
-  background: var(--accent);
-  color: #fff;
-}
-.button.primary:hover:not(:disabled) {
-  background: var(--accent-hover);
-}
-.button.danger,
-.form-error {
-  color: var(--danger-text);
-  background: var(--danger-bg);
-  border-color: var(--danger-text);
-}
-.card-bottom,
-.lobby-table-head,
-.lobby-row,
-.event-list > div {
-  border-color: var(--border);
-}
-.stat-card strong {
-  color: var(--text);
-}
-.stat-card:nth-child(2) strong,
-.result-tag.win {
-  color: var(--accent-text);
-}
-.result-tag {
-  color: var(--secondary);
-  background: var(--soft);
-}
-.result-tag.loss {
-  color: var(--danger-text);
-  background: var(--danger-bg);
-}
-.avatar,
-.mini-avatar {
-  background: var(--soft);
-  color: var(--accent-text);
-  border-color: var(--surface);
-}
-.settings-trigger {
-  display: grid;
-  place-items: center;
-  width: 38px;
-  height: 38px;
-  padding: 0;
-  border: 1px solid var(--border);
-  border-radius: 12px;
-  background: var(--surface);
-  color: var(--secondary);
-  transition:
-    background 0.15s,
-    transform 0.15s,
-    color 0.15s;
-}
-.settings-trigger:hover {
-  color: var(--accent-text);
-  background: var(--soft);
-  transform: translateY(-1px);
-}
-.settings-popover {
-  position: fixed;
-  inset: 68px 28px auto auto;
-  margin: 0;
-  width: 310px;
-  max-width: calc(100vw - 24px);
-  padding: 22px;
-  border: 1px solid var(--border);
-  border-radius: 18px;
-  color: var(--text);
-  background: var(--surface);
-  box-shadow: 0 16px 54px var(--shadow);
-}
-.settings-popover:popover-open {
-  animation: panel-enter 0.18s ease-out;
-}
-.settings-popover > strong {
-  display: block;
-  font:
-    750 18px 'Manrope',
-    sans-serif;
-  margin-bottom: 20px;
-}
-.settings-label {
-  display: block;
-  font-size: 12px;
-  font-weight: 600;
-  color: var(--secondary);
-  margin: 18px 0 9px;
-}
-.theme-options,
-.palette-options {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 7px;
-}
-.theme-options button,
-.palette-options button {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  padding: 12px 4px;
-  min-width: 0;
-  border: 1px solid var(--border);
-  border-radius: 11px;
-  background: var(--surface);
-  color: var(--secondary);
-  font-size: 11px;
-}
-.theme-options button.chosen,
-.palette-options button.chosen {
-  background: var(--soft);
-  border-color: var(--accent-text);
-  color: var(--accent-text);
-  box-shadow: 0 0 0 1px var(--accent-text);
-}
-.palette-options i {
-  width: 22px;
-  height: 22px;
-  border-radius: 50%;
-  box-shadow: inset 0 0 0 2px #fff6;
-}
-.sound-toggle {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 12px;
-  border: 1px solid var(--border);
-  border-radius: 10px;
-  color: var(--accent-text);
-  background: var(--soft);
-  font-size: 13px;
-  margin-bottom: 20px;
-}
-.sound-popover label {
-  display: flex;
-  justify-content: space-between;
-  color: var(--secondary);
-  font-size: 12px;
-  font-weight: 500;
-}
-.sound-popover input[type='range'] {
-  width: 100%;
-  padding: 0;
-  margin: 16px 0 22px;
-  accent-color: var(--accent);
-}
-.sound-popover p {
-  font-size: 12px;
-  margin-top: 12px;
-  color: var(--secondary);
-}
-.sound-popover .speech-option {
-  justify-content: flex-start;
-  align-items: center;
-  gap: 9px;
-  margin: 0 0 20px;
-  line-height: 1.5;
-}
-.speech-option input {
-  width: 16px;
-  height: 16px;
-  margin: 0;
-  accent-color: var(--accent);
-}
-.modal.dice-overlay {
-  width: 560px;
-  max-width: calc(100vw - 24px);
-  border: 1px solid var(--border);
-  border-radius: 28px;
-  padding: 38px 30px 28px;
-  text-align: center;
-  background: radial-gradient(
-    ellipse at 50% 36%,
-    var(--hero),
-    var(--surface) 70%
-  );
-}
-.dice-overlay::backdrop {
-  background: #081126b8;
-  backdrop-filter: blur(7px);
-}
-.dice-overlay h2 {
-  font-size: 24px;
-  max-width: 360px;
-  margin: auto;
-}
-.text-button {
-  background: transparent;
-  color: var(--accent-text);
-  border: 0;
-  font-size: 12px;
-  padding: 10px 0;
-}
-.pin-input {
-  font-size: 23px;
-  letter-spacing: 12px;
-}
-.guest-notice {
-  padding: 12px;
-  background: var(--soft);
-  border-radius: 10px;
-  margin-bottom: 20px;
-  font-size: 12px;
-}
-.modal .button.full + .button.full {
-  margin-top: 10px;
-}
-.player-color-0 {
-  --player-ink: #775800;
-  --player-soft: #fff3ce;
-  --player-solid: #b88925;
-}
-.player-color-1 {
-  --player-ink: #165ba1;
-  --player-soft: #e6f1ff;
-  --player-solid: #397bba;
-}
-.player-color-2 {
-  --player-ink: #aa3938;
-  --player-soft: #ffecea;
-  --player-solid: #b95f56;
-}
-.player-color-3 {
-  --player-ink: #217146;
-  --player-soft: #e6f5eb;
-  --player-solid: #568264;
-}
-.player-color-4 {
-  --player-ink: #30343b;
-  --player-soft: #e8eaed;
-  --player-solid: #30343b;
-}
-.player-color-5 {
-  --player-ink: #985023;
-  --player-soft: #fff0e1;
-  --player-solid: #ad702f;
-}
-.player-color-6 {
-  --player-ink: #703cad;
-  --player-soft: #f2eaff;
-  --player-solid: #8654b8;
-}
-.player-color-7 {
-  --player-ink: #536070;
-  --player-soft: #eaf0f4;
-  --player-solid: #7d8794;
-}
-[data-theme='dark'] .player-color-0 {
-  --player-ink: #f3cd67;
-  --player-soft: #393326;
-}
-[data-theme='dark'] .player-color-1 {
-  --player-ink: #95c6ff;
-  --player-soft: #243650;
-}
-[data-theme='dark'] .player-color-2 {
-  --player-ink: #ffb4ad;
-  --player-soft: #402d36;
-}
-[data-theme='dark'] .player-color-3 {
-  --player-ink: #92ddb1;
-  --player-soft: #203d35;
-}
-[data-theme='dark'] .player-color-4 {
-  --player-ink: #e1e4e9;
-  --player-soft: #30343b;
-}
-[data-theme='dark'] .player-color-5 {
-  --player-ink: #ffc290;
-  --player-soft: #3b3029;
-}
-[data-theme='dark'] .player-color-6 {
-  --player-ink: #d9b8ff;
-  --player-soft: #352a49;
-}
-[data-theme='dark'] .player-color-7 {
-  --player-ink: #c1ccd6;
-  --player-soft: #303c48;
-}
-.avatar[class*='player-color'],
-.mini-avatar[class*='player-color'] {
-  color: var(--player-ink);
-  background: var(--player-soft);
-}
-.chat-message strong {
-  display: flex;
-  align-items: center;
-  gap: 7px;
-  color: var(--player-ink);
-  font-size: 11px;
-}
-.chat-avatar {
-  display: grid;
-  place-items: center;
-  height: 23px;
-  width: 23px;
-  border-radius: 8px;
-  background: var(--player-soft);
-  color: var(--player-ink);
-  font-size: 11px;
-}
-.chat-message p,
-.chat-message.mine p {
-  color: var(--text);
-  background: var(--player-soft);
-  border-inline-start: 3px solid var(--player-solid);
-  font-size: 13px;
-}
-.chat-message time {
-  font-size: 10px;
-}
-.chat-message {
-  animation: panel-enter 0.2s ease-out;
-}
-.parchis-controls {
-  background: var(--soft);
-  border-radius: 16px;
-  padding: 18px;
-  margin: 16px 0;
-}
-.parchis-home {
-  border-color: var(--border);
-}
-.home-pieces .parchis-token:not(:disabled) {
-  outline: 2px solid var(--accent-text);
-  outline-offset: 3px;
-}
-@keyframes panel-enter {
-  from {
-    opacity: 0;
-    transform: translateY(6px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-@media (max-width: 1000px) and (min-width: 501px) {
-  .brand {
-    width: 64px;
-    align-items: center;
-    margin: 0 auto 38px;
-  }
-  .brand-logo {
-    min-width: 64px;
-  }
-  .brand small {
-    display: none;
-  }
-}
-@media (max-width: 500px) {
-  .sidebar {
-    background: var(--surface);
-  }
-  .mobile-logo {
-    display: block;
-    width: 155px;
-    flex-shrink: 0;
-  }
-  .topbar .header-search {
-    display: none;
-  }
-  .topbar {
-    justify-content: space-between;
-    gap: 10px;
-    padding: 0 16px;
-  }
-  .header-right {
-    gap: 8px;
-  }
-  .settings-popover {
-    inset: 65px 12px auto auto;
-  }
-  .header-login {
-    font-size: 11px;
-    gap: 4px;
-  }
-  .settings-trigger {
-    width: 34px;
-    height: 34px;
-    border-radius: 10px;
-  }
-}
diff --git a/src/design.css b/src/design.css
deleted file mode 100644
index b1b3369..0000000
--- a/src/design.css
+++ /dev/null
@@ -1,1116 +0,0 @@
-/* One type and spacing scale for navigation, forms and game controls. */
-:root {
-  --font-ui: 'Manrope', system-ui, sans-serif;
-  --font-title: var(--font-ui);
-  --type-detail: 12px;
-  --type-secondary: 14px;
-  --type-body: 16px;
-  --type-subtitle: 20px;
-  --type-section: 24px;
-  --type-heading: 28px;
-  --space-1: 4px;
-  --space-2: 8px;
-  --space-3: 12px;
-  --space-4: 16px;
-  --space-5: 24px;
-  --space-6: 32px;
-  font-size: var(--type-body);
-}
-body {
-  font: 400 var(--type-body)/1.5 var(--font-ui);
-}
-h1,
-h2,
-h3 {
-  font-family: var(--font-title);
-  line-height: 1.25;
-  letter-spacing: -0.025em;
-}
-h2,
-.modal h2 {
-  font-size: var(--type-section);
-  font-weight: 750;
-}
-h3 {
-  font-size: var(--type-subtitle);
-}
-.small,
-.muted.small,
-.auth-note,
-.modal .auth-note {
-  font-size: var(--type-secondary);
-  line-height: 1.55;
-}
-.eyebrow,
-.sidebar-label {
-  font-size: var(--type-detail);
-  line-height: 1.4;
-  letter-spacing: 0.1em;
-}
-.button {
-  min-height: 44px;
-  font-size: var(--type-secondary);
-  line-height: 1.4;
-  padding: 10px 16px;
-  border-radius: 12px;
-  font-weight: 650;
-}
-.icon-button,
-.settings-trigger {
-  width: 44px;
-  height: 44px;
-  min-width: 44px;
-  min-height: 44px;
-  display: inline-grid;
-  place-items: center;
-  padding: 0;
-  border-radius: 12px;
-}
-button:focus-visible,
-a:focus-visible,
-input:focus-visible,
-select:focus-visible,
-textarea:focus-visible {
-  outline: 2px solid var(--accent);
-  outline-offset: 3px;
-}
-.modal h2:focus {
-  outline: none;
-}
-.modal {
-  width: calc(100vw - 32px);
-  max-width: 520px;
-  padding: 28px;
-  border-radius: 24px;
-  border: 1px solid var(--border);
-  box-shadow: 0 24px 80px var(--shadow);
-  max-height: calc(100dvh - 32px);
-}
-.modal-head {
-  display: flex;
-  align-items: flex-start;
-  gap: 16px;
-  margin-bottom: 20px;
-}
-.modal-head > div {
-  min-width: 0;
-  flex: 1;
-}
-.modal-head .icon-button {
-  flex-shrink: 0;
-}
-.modal .eyebrow {
-  margin: 0 0 8px;
-}
-.modal > p {
-  font-size: var(--type-body);
-  line-height: 1.55;
-}
-.modal label,
-form label {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  align-items: stretch;
-  margin: 0 0 20px;
-  font-size: var(--type-secondary);
-  font-weight: 600;
-  color: var(--text);
-}
-.modal input:not([type='checkbox']):not([type='range']),
-.modal select,
-.modal textarea,
-form input:not([type='checkbox']):not([type='range']),
-form select,
-form textarea {
-  display: block;
-  width: 100%;
-  min-width: 0;
-  min-height: 48px;
-  padding: 12px 14px;
-  border: 1px solid var(--border);
-  border-radius: 12px;
-  background: var(--surface);
-  color: var(--text);
-  font-size: var(--type-body);
-  line-height: 1.5;
-  font-weight: 400;
-}
-.modal textarea,
-form textarea {
-  resize: vertical;
-  min-height: 112px;
-}
-.modal input[readonly] {
-  background: var(--soft);
-  text-overflow: ellipsis;
-}
-.modal .form-row {
-  gap: 12px;
-}
-.modal .form-row .button {
-  width: 100%;
-}
-.modal .auth-note {
-  margin: 16px 0 0;
-  overflow-wrap: anywhere;
-}
-.share-form {
-  display: flex;
-  flex-direction: column;
-  margin-top: 24px;
-}
-.share-form .button.full {
-  margin-top: 0;
-  width: 100%;
-}
-.modal .button.full {
-  font-size: var(--type-body);
-}
-.match-room .dice-overlay .button {
-  min-height: 48px;
-  font-size: var(--type-body);
-  padding: 12px 18px;
-}
-.match-room .dice-overlay .dice-announcement p {
-  font-size: var(--type-body);
-  line-height: 1.5;
-}
-.settings-popover {
-  font-size: var(--type-secondary);
-  padding: 24px;
-  border-radius: 20px;
-}
-.sound-popover {
-  width: 360px;
-  max-height: calc(100dvh - 80px);
-  overflow: auto;
-}
-.sound-popover .audio-preview-label {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  gap: 8px;
-  margin-top: 20px;
-  font-size: 14px;
-}
-.sound-popover select {
-  min-height: 44px;
-  width: 100%;
-  border: 1px solid var(--border);
-  border-radius: 10px;
-  padding: 8px 12px;
-  margin-top: 8px;
-  font-size: 16px;
-  background: var(--surface);
-  color: var(--text);
-}
-.audio-samples {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 8px;
-  margin-top: 12px;
-}
-.audio-samples button {
-  min-height: 44px;
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  gap: 8px;
-  padding: 8px 12px;
-  border: 1px solid var(--border);
-  border-radius: 10px;
-  background: var(--soft);
-  color: var(--accent-text);
-  font-size: 14px;
-}
-.settings-label,
-.sound-popover label,
-.sound-popover p {
-  font-size: var(--type-secondary);
-  line-height: 1.5;
-}
-.theme-options button,
-.palette-options button {
-  min-height: 76px;
-  font-size: var(--type-secondary);
-}
-.sidebar nav a {
-  font-size: var(--type-body);
-}
-.user-card strong,
-.sidebar-invite strong {
-  font-size: var(--type-body);
-}
-.user-card small,
-.sidebar-invite p,
-.sidebar-invite a,
-.logout {
-  font-size: var(--type-secondary);
-  line-height: 1.5;
-}
-.game-meta,
-.lobby-game small,
-.filter-tabs button,
-.help-card ol,
-.history-item small {
-  font-size: var(--type-secondary);
-}
-.game-card-body > p,
-.game-play,
-.welcome-strip,
-.join-code input,
-.empty-lobby p,
-.lobby-join,
-.lobby-game strong,
-.continue-card strong,
-.bottom-note strong,
-.bottom-note > a {
-  font-size: var(--type-body);
-  line-height: 1.5;
-}
-.lobby-game strong,
-.continue-card strong {
-  font-weight: 700;
-}
-.lobby-table-head,
-.hero-caption,
-.live-count,
-.welcome-strip .live-count,
-.player-stack small,
-.status-badge,
-.continue-card small,
-.bottom-note p,
-.site-footer {
-  font-size: var(--type-secondary);
-  line-height: 1.5;
-}
-.section-header h2 {
-  font-size: var(--type-section);
-  line-height: 1.25;
-}
-.game-title h3 {
-  font-size: var(--type-subtitle);
-  line-height: 1.3;
-}
-.game-category,
-.difficulty,
-.game-card-body .difficulty {
-  font-size: var(--type-detail);
-  line-height: 1.4;
-}
-.empty-lobby h3 {
-  font-size: var(--type-subtitle);
-}
-.lobby-table-head {
-  letter-spacing: 0;
-  font-weight: 600;
-}
-.lobby-game small,
-.continue-card small {
-  margin-top: 4px;
-}
-.lobby-game,
-.continue-card {
-  gap: 16px;
-}
-.lobby-game > span:last-child,
-.continue-card > div {
-  min-width: 0;
-}
-.continue-card {
-  min-height: 88px;
-  padding: 16px 20px;
-}
-.continue-card strong {
-  overflow-wrap: anywhere;
-}
-.lobby-row {
-  min-height: 96px;
-}
-.lobby-join {
-  min-height: 44px;
-}
-.lobby-row .mini-avatar {
-  width: 32px;
-  height: 32px;
-  font-size: var(--type-secondary);
-}
-.site-footer {
-  flex-wrap: wrap;
-  gap: 16px 24px;
-}
-.hero-copy > p,
-.help-intro p,
-.auth-form > p {
-  font-size: var(--type-body);
-}
-.match-shell .main-shell {
-  padding-bottom: 0;
-}
-.match-shell .topbar {
-  height: 60px;
-  flex-basis: 60px;
-}
-.match-shell .mobile-logo {
-  width: 156px;
-}
-.match-shell .header-right .connection {
-  font-size: var(--type-detail);
-}
-.match-shell .sidebar:popover-open {
-  inset: 68px auto auto 12px;
-  width: min(320px, calc(100vw - 24px));
-  height: auto;
-  max-height: calc(100dvh - 80px);
-  padding: 24px;
-  gap: 0;
-}
-.match-shell .sidebar .brand {
-  padding-right: 48px;
-  margin-bottom: 24px;
-}
-.close-platform-menu {
-  position: absolute;
-  top: 20px;
-  right: 16px;
-}
-.match-shell .sidebar-label {
-  margin: 0 12px 12px;
-  font-size: var(--type-detail);
-}
-.match-shell .sidebar nav {
-  height: auto;
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  gap: 4px;
-}
-.match-shell .sidebar nav a {
-  width: 100%;
-  padding: 12px;
-  min-height: 48px;
-  font-size: var(--type-body);
-  gap: 12px;
-}
-.match-shell .sidebar nav a span {
-  font-size: inherit;
-  line-height: 1.5;
-  white-space: nowrap;
-}
-.match-shell .sidebar nav a svg {
-  width: 22px;
-  height: 22px;
-}
-.match-shell .sidebar-invite {
-  display: none;
-}
-.match-shell .sidebar-bottom {
-  margin-top: 20px;
-  padding-top: 0;
-}
-.match-shell .sidebar .brand small {
-  font-size: var(--type-secondary);
-}
-.match-shell .sidebar .user-card {
-  padding: 16px 0;
-}
-.match-shell .sidebar .user-card > span:last-child {
-  min-width: 0;
-}
-.match-shell .sidebar .user-card strong {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.match-shell .sidebar .logout {
-  margin: 0;
-  min-height: 44px;
-  padding: 8px 0;
-}
-.match-room .room-page-heading {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  align-items: center;
-  justify-content: space-between;
-  padding: 10px 20px;
-  gap: 24px;
-}
-.match-room .room-page-heading > div:first-child {
-  display: block;
-  min-width: 0;
-}
-.match-room .room-page-heading .eyebrow {
-  font-size: var(--type-detail);
-  line-height: 1.4;
-  margin: 0 0 4px;
-}
-.title-turn-row {
-  display: flex;
-  align-items: baseline;
-  gap: 16px;
-  min-width: 0;
-}
-.match-room .room-page-heading h1 {
-  font-size: var(--type-subtitle);
-  line-height: 1.25;
-  max-width: none;
-  margin: 0;
-}
-.match-room .match-turn {
-  font-size: var(--type-secondary);
-  line-height: 1.5;
-  padding: 6px 12px;
-  width: auto;
-  flex-shrink: 0;
-}
-.match-room .room-tools {
-  align-items: center;
-  gap: 8px;
-  flex-shrink: 0;
-}
-.match-room .room-tools .icon-button {
-  width: 44px;
-  height: 44px;
-}
-.match-room .room-tools > .button {
-  min-height: 44px;
-  padding: 10px 14px;
-  font-size: var(--type-secondary);
-}
-.panel-trigger.has-unread {
-  color: var(--accent-text);
-  border-color: var(--accent);
-  background: var(--soft);
-}
-.panel-trigger {
-  position: relative;
-}
-.panel-trigger.has-unread b {
-  display: grid;
-  place-items: center;
-  min-width: 20px;
-  min-height: 20px;
-  font-size: var(--type-detail);
-  line-height: 1;
-}
-.chat-notice {
-  position: fixed;
-  top: 146px;
-  right: 16px;
-  width: 380px;
-  max-width: calc(100vw - 24px);
-  display: flex;
-  align-items: flex-start;
-  padding: 12px;
-  gap: 8px;
-  border: 1px solid var(--border);
-  border-left: 4px solid var(--player-solid);
-  border-radius: 16px;
-  background: var(--surface);
-  box-shadow: 0 12px 40px var(--shadow);
-  z-index: 35;
-  animation: panel-enter 0.18s ease-out;
-}
-.chat-notice-open {
-  display: flex;
-  align-items: flex-start;
-  gap: 12px;
-  flex: 1;
-  min-width: 0;
-  border: 0;
-  background: transparent;
-  padding: 4px;
-  text-align: left;
-  color: var(--text);
-}
-.chat-notice-open > span:last-child {
-  min-width: 0;
-}
-.chat-notice-icon {
-  flex-shrink: 0;
-  width: 36px;
-  height: 36px;
-  display: grid;
-  place-items: center;
-  border-radius: 12px;
-  background: var(--player-soft);
-  color: var(--player-ink);
-}
-.chat-notice strong {
-  display: block;
-  font-size: var(--type-secondary);
-  color: var(--player-ink);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.chat-notice-text {
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
-  overflow: hidden;
-  font-size: var(--type-secondary);
-  line-height: 1.5;
-  margin-top: 4px;
-  overflow-wrap: anywhere;
-}
-.chat-notice small {
-  display: block;
-  font-size: var(--type-detail);
-  margin-top: 8px;
-  color: var(--accent-text);
-}
-.chat-notice > .icon-button {
-  flex-shrink: 0;
-}
-.match-room .room-layout {
-  padding: 16px;
-}
-.match-room .parchis-board,
-.match-room .table-game {
-  --control-width: clamp(220px, 23cqmin, 360px);
-  --table-gap: clamp(16px, 2cqmin, 32px);
-  --board-size: min(
-    100cqh,
-    calc(100cqw - var(--control-width) - var(--table-gap))
-  );
-  display: grid;
-  flex: 1;
-  min-height: 0;
-  grid-template-columns: minmax(0, var(--board-size)) var(--control-width);
-  grid-template-rows: minmax(0, 1fr);
-  gap: var(--table-gap);
-  justify-content: center;
-}
-.match-room .board-surface {
-  align-self: center;
-  height: var(--board-size);
-  width: 100%;
-}
-.match-room .game-map {
-  display: block;
-  width: min(100cqw, 100cqh);
-  height: min(100cqw, 100cqh);
-  max-width: 100%;
-  max-height: 100%;
-  filter: drop-shadow(0 8px 18px var(--shadow));
-}
-.match-room .parchis-controls,
-.match-room .game-controls {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-  padding: 20px;
-  border: 1px solid var(--border);
-  border-radius: 20px;
-  background: var(--surface);
-  align-self: center;
-  box-shadow: 0 6px 24px var(--shadow);
-  min-width: 0;
-}
-.match-room .parchis-controls > .eyebrow,
-.game-controls > .eyebrow {
-  font-size: var(--type-detail);
-  margin: 0;
-  letter-spacing: 0.08em;
-}
-.match-room .parchis-controls .dice-instruction,
-.game-controls > p {
-  font-size: var(--type-body);
-  line-height: 1.5;
-}
-.last-roll-caption {
-  display: none;
-}
-.match-room .parchis-controls .dice-widget,
-.game-controls .dice-widget {
-  flex-direction: column;
-  gap: 12px;
-}
-.match-room .parchis-controls .dice-widget .button,
-.game-controls .dice-widget .button {
-  min-height: 44px;
-  font-size: var(--type-secondary);
-  padding: 10px 14px;
-}
-.dice-widget .dice-result small {
-  font-size: var(--type-secondary);
-  line-height: 1.45;
-  max-width: 220px;
-}
-.match-room .table-player strong {
-  font-size: var(--type-secondary);
-}
-.match-room .table-player small,
-.piece-shortcuts > span {
-  font-size: var(--type-detail);
-}
-.match-room .piece-shortcuts .parchis-token {
-  width: 44px;
-  height: 44px;
-  font-size: 16px;
-}
-.match-room .waiting-card {
-  flex: 1;
-  min-height: 0;
-  width: 100%;
-  max-width: 680px;
-  margin: 0 auto;
-  height: auto;
-  padding: 24px;
-  text-align: left;
-  background: var(--surface);
-  border-radius: 20px;
-}
-.match-room .waiting-card h2 {
-  font-size: var(--type-subtitle);
-  margin: 0 0 8px;
-}
-.match-room .waiting-card > p {
-  font-size: var(--type-secondary);
-  margin: 0 0 16px;
-}
-.match-room .waiting-card .room-code {
-  margin: 0;
-  font-size: var(--type-body);
-  padding: 8px 12px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-.match-room .waiting-card .room-code button {
-  width: 44px;
-  height: 44px;
-}
-.match-room .waiting-players {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 12px;
-  margin: 20px 0;
-}
-.match-room .waiting-player {
-  width: auto;
-  min-width: 0;
-  display: grid;
-  grid-template-columns: 40px minmax(0, 1fr);
-  column-gap: 10px;
-  row-gap: 2px;
-  justify-items: start;
-  align-items: center;
-}
-.match-room .waiting-player .avatar {
-  grid-row: 1/3;
-  width: 40px;
-  height: 40px;
-  font-size: var(--type-secondary);
-}
-.match-room .waiting-player strong {
-  font-size: var(--type-secondary);
-  width: 100%;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-}
-.match-room .waiting-player small {
-  font-size: var(--type-detail);
-}
-.match-room .waiting-card > .button {
-  width: 100%;
-}
-.match-room .room-panel:popover-open {
-  top: 144px;
-}
-.panel-heading strong {
-  font-size: var(--type-body);
-}
-.panel-players span,
-.chat-message time {
-  font-size: var(--type-detail);
-}
-.match-room .room-tabs button {
-  font-size: var(--type-secondary);
-  min-height: 48px;
-}
-.chat-message strong {
-  font-size: var(--type-secondary);
-}
-.chat-message p {
-  font-size: var(--type-body);
-  line-height: 1.5;
-}
-.chat-form input {
-  font-size: var(--type-body);
-  min-height: 44px;
-}
-.chat-form button {
-  width: 44px;
-  min-height: 44px;
-}
-.room-rules,
-.event-list {
-  font-size: var(--type-secondary);
-  line-height: 1.55;
-}
-.panel-pending {
-  flex: 1;
-  min-height: 0;
-  overflow: auto;
-  padding: 16px;
-}
-.pending-heading {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  margin-bottom: 12px;
-}
-.pending-heading strong {
-  font-size: var(--type-body);
-}
-.panel-pending > .button {
-  width: 100%;
-  margin-top: 16px;
-}
-.profile-pending {
-  margin: 32px 0;
-}
-.profile-header .button {
-  margin-top: 16px;
-}
-.profile-header > div {
-  min-width: 0;
-}
-.profile-header h1 {
-  overflow-wrap: anywhere;
-}
-.avatar,
-.mini-avatar,
-.chat-avatar {
-  overflow: hidden;
-  flex-shrink: 0;
-}
-.chat-avatar {
-  border-radius: 50%;
-}
-.avatar[class*='player-color'],
-.table-player .mini-avatar,
-.chat-message .chat-avatar {
-  box-shadow: 0 0 0 2px var(--player-solid);
-}
-.match-room .board-container {
-  width: min(100cqw, calc(100cqh - 34px), 1100px);
-}
-.table-game + .board-note {
-  display: none;
-}
-.go-scores small,
-.game-controls .muted {
-  font-size: var(--type-secondary);
-}
-.game-controls .button {
-  font-size: var(--type-secondary);
-}
-.go-scores strong {
-  font-size: var(--type-body);
-}
-.oca-note {
-  color: var(--secondary);
-  font-size: var(--type-secondary);
-}
-@media (min-width: 850px) and (max-width: 1199px) {
-  .match-room .room-layout:has(.room-panel:popover-open) .parchis-board {
-    --board-size: min(100cqw, calc(100cqh - 150px));
-    grid-template-columns: minmax(0, 1fr);
-    grid-template-rows: minmax(0, var(--board-size)) auto;
-    align-content: center;
-  }
-  .match-room .room-layout:has(.room-panel:popover-open) .parchis-controls {
-    display: grid;
-    grid-template-columns: 240px minmax(0, 1fr);
-    padding: 12px;
-    gap: 8px 16px;
-  }
-  .match-room .room-layout:has(.room-panel:popover-open) .dice-widget {
-    flex-direction: row;
-    gap: 12px;
-  }
-}
-@media (max-width: 800px) and (orientation: portrait) {
-  .match-room .parchis-board,
-  .match-room .table-game {
-    --board-size: min(100cqw, calc(100cqh - 184px));
-    grid-template-columns: minmax(0, 1fr);
-    grid-template-rows: minmax(0, var(--board-size)) auto;
-    align-content: start;
-    gap: 12px;
-  }
-  .match-room .board-surface {
-    align-self: start;
-  }
-  .match-room .parchis-controls {
-    display: grid;
-    grid-template-columns: minmax(132px, 44%) minmax(0, 1fr);
-    padding: 14px;
-    gap: 8px 12px;
-    align-self: start;
-    width: 100%;
-  }
-  .match-room .parchis-controls > .eyebrow {
-    display: none;
-  }
-  .match-room .parchis-controls .dice-widget {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    grid-row: auto;
-  }
-  .match-room .parchis-controls .dice-widget .dice-stage {
-    width: 60px;
-    height: 64px;
-    --edge: 36px;
-    --depth: 18px;
-  }
-  .dice-widget .dice-result small {
-    font-size: var(--type-detail);
-    max-width: 140px;
-  }
-  .match-room .parchis-controls .dice-instruction {
-    font-size: var(--type-secondary);
-    align-self: center;
-  }
-  .match-room .table-players {
-    display: none;
-  }
-  .match-room .parchis-controls .dice-widget:has(> button) .dice-result {
-    display: none;
-  }
-  .match-room .parchis-controls .dice-result small {
-    display: none;
-  }
-  .match-room .parchis-controls:not(:has(.dice-widget > button)) {
-    grid-template-columns: 64px minmax(0, 1fr);
-  }
-  .match-room .last-roll-caption {
-    display: block;
-    font-size: var(--type-detail);
-    margin-bottom: 4px;
-    color: var(--secondary);
-  }
-  .match-room .parchis-controls .dice-widget {
-    align-self: center;
-  }
-  .match-room .piece-shortcuts {
-    grid-column: 1 / -1;
-    flex-wrap: nowrap;
-    justify-content: center;
-  }
-  .match-room .piece-shortcuts > span {
-    display: none;
-  }
-  .match-room .game-controls {
-    width: 100%;
-    padding: 14px;
-    gap: 8px;
-  }
-  .match-room .go-table {
-    --board-size: min(100cqw, calc(100cqh - 212px));
-  }
-  .match-room .go-table.scoring {
-    --board-size: min(100cqw, calc(100cqh - 268px));
-  }
-  .match-room .go-table .game-controls > .eyebrow {
-    display: none;
-  }
-  .match-room .go-table .game-controls > p {
-    font-size: var(--type-secondary);
-  }
-  .match-room .go-scores {
-    flex-direction: row;
-    justify-content: space-between;
-  }
-  .match-room .oca-controls {
-    display: grid;
-    grid-template-columns: 44% minmax(0, 1fr);
-  }
-  .oca-controls > .eyebrow {
-    display: none;
-  }
-  .match-room .oca-controls .dice-widget {
-    grid-row: auto;
-    align-self: center;
-  }
-  .match-room .oca-controls .dice-widget:has(> button) .dice-result {
-    display: none;
-  }
-  .match-room .oca-controls .dice-stage {
-    width: 60px;
-    height: 64px;
-    --edge: 36px;
-    --depth: 18px;
-  }
-  .match-room .oca-controls .dice-stage .dice-face {
-    padding: 6px;
-    gap: 2px;
-    border-radius: 6px;
-  }
-  .match-room .oca-controls .dice-result small {
-    display: none;
-  }
-  .match-room .oca-controls:not(:has(.dice-widget > button)) {
-    grid-template-columns: 64px minmax(0, 1fr);
-  }
-  .match-room .oca-controls .oca-instruction {
-    font-size: var(--type-secondary);
-    align-self: center;
-  }
-  .match-room .oca-controls .oca-note {
-    grid-column: 1/-1;
-    font-size: var(--type-detail);
-  }
-}
-@media (max-width: 650px) {
-  .match-shell .topbar {
-    padding: 0 12px;
-    gap: 8px;
-  }
-  .match-shell .mobile-logo {
-    width: 136px;
-  }
-  .match-shell .header-right .connection {
-    display: none;
-  }
-  .match-shell .header-right {
-    gap: 8px;
-  }
-  .match-room .room-page-heading {
-    display: flex;
-    align-items: flex-start;
-    gap: 12px;
-    padding: 12px;
-  }
-  .match-room .title-turn-row {
-    align-items: flex-start;
-    flex-direction: column;
-    gap: 6px;
-  }
-  .match-room .room-page-heading h1 {
-    font-size: 18px;
-    max-width: none;
-    white-space: normal;
-    overflow-wrap: anywhere;
-  }
-  .match-room .match-turn {
-    padding: 0;
-    font-size: var(--type-secondary);
-    white-space: normal;
-    background: none;
-  }
-  .match-room .room-tools {
-    gap: 4px;
-    margin-left: 0;
-  }
-  .match-room .panel-trigger {
-    width: 44px;
-    padding: 0;
-  }
-  .match-room .panel-trigger.has-unread b {
-    position: absolute;
-    top: -4px;
-    right: -4px;
-  }
-  .chat-notice {
-    top: 166px;
-    right: 12px;
-  }
-  .match-room .room-layout {
-    padding: 8px 12px 12px;
-  }
-  .match-room .room-panel:popover-open {
-    inset: 180px 8px 8px auto;
-  }
-  dialog.modal:not(.dice-overlay) {
-    inset: auto 8px 8px;
-    width: calc(100% - 16px);
-    margin: 0 auto;
-    padding: 24px;
-    max-height: calc(100dvh - 24px);
-    border-radius: 24px;
-  }
-  .modal h2 {
-    font-size: 24px;
-  }
-  .modal .form-row {
-    grid-template-columns: 1fr;
-  }
-  .modal .button {
-    font-size: var(--type-body);
-  }
-  .settings-popover {
-    top: 68px;
-  }
-}
-@media (max-width: 370px) {
-  .match-shell .mobile-logo {
-    width: 112px;
-  }
-  .match-room .room-tools {
-    flex-wrap: wrap;
-    max-width: 92px;
-  }
-}
-@media (min-width: 1800px) and (min-height: 900px) {
-  :root {
-    --type-detail: 14px;
-    --type-secondary: 16px;
-    --type-body: 18px;
-    --type-subtitle: 24px;
-    --type-section: 28px;
-    --type-heading: 32px;
-  }
-  .match-room .parchis-board,
-  .match-room .table-game {
-    --control-width: clamp(280px, 24cqmin, 400px);
-  }
-}
-@media (orientation: landscape) and (max-height: 520px) {
-  .match-shell .topbar {
-    height: 52px;
-    flex-basis: 52px;
-  }
-  .match-room .room-page-heading {
-    padding: 6px 12px;
-  }
-  .match-room .room-page-heading .eyebrow {
-    display: none;
-  }
-  .match-room .room-page-heading h1 {
-    font-size: 18px;
-  }
-  .match-room .parchis-board,
-  .match-room .table-game {
-    --control-width: 220px;
-  }
-  .match-room .parchis-controls,
-  .match-room .game-controls {
-    padding: 12px;
-    gap: 8px;
-    max-height: 100%;
-    overflow: auto;
-  }
-  .match-room .parchis-controls > .eyebrow,
-  .match-room .table-players {
-    display: none;
-  }
-  .match-room .parchis-controls .dice-widget {
-    flex-direction: row;
-    gap: 8px;
-  }
-  .dice-widget .dice-result small {
-    font-size: var(--type-detail);
-  }
-  .match-room .parchis-controls .dice-instruction {
-    font-size: var(--type-secondary);
-  }
-}
diff --git a/src/lib/components/AvatarPicker.svelte b/src/lib/components/AvatarPicker.svelte
index c9f922d..58ede22 100644
--- a/src/lib/components/AvatarPicker.svelte
+++ b/src/lib/components/AvatarPicker.svelte
@@ -150,27 +150,27 @@
   .avatar-copy {
     font-size: var(--type-secondary);
     color: var(--secondary);
-    margin: 12px 0 20px;
+    margin: var(--space-3) 0 var(--space-5);
   }
   .avatar-preview {
     width: 80px;
     height: 80px;
-    margin: 0 auto 20px;
-    font-size: 28px;
+    margin: 0 auto var(--space-5);
+    font-size: var(--type-heading);
   }
   .avatar-options {
     display: grid;
     grid-template-columns: repeat(4, minmax(0, 1fr));
-    gap: 12px;
-    margin-bottom: 20px;
+    gap: var(--space-3);
+    margin-bottom: var(--space-5);
   }
   .avatar-options button {
     border: 2px solid transparent;
     display: grid;
     place-items: center;
     background: transparent;
-    border-radius: 16px;
-    padding: 4px;
+    border-radius: var(--radius-card);
+    padding: var(--space-1);
     min-height: 64px;
   }
   .avatar-options button.selected {
@@ -181,28 +181,28 @@
     width: 64px;
     height: 64px;
     max-width: 100%;
-    border-radius: 50%;
+    border-radius: var(--radius-round);
   }
   .avatar-tools {
     display: grid;
     grid-template-columns: 1fr 1fr;
-    gap: 8px;
+    gap: var(--space-2);
   }
   .avatar-tools .button {
     font-size: var(--type-secondary);
-    padding: 10px;
+    padding: var(--space-2);
   }
   .avatar-hint {
     font-size: var(--type-detail);
     color: var(--secondary);
-    margin: 12px 0 20px;
+    margin: var(--space-3) 0 var(--space-5);
   }
   input[type='file'] {
     display: none;
   }
   @media (max-width: 380px) {
     .avatar-options {
-      gap: 8px;
+      gap: var(--space-2);
     }
     .avatar-options img {
       width: 52px;
diff --git a/src/lib/components/CellInfo.svelte b/src/lib/components/CellInfo.svelte
index 66a38fa..fef90df 100644
--- a/src/lib/components/CellInfo.svelte
+++ b/src/lib/components/CellInfo.svelte
@@ -51,21 +51,21 @@
     color: var(--text);
     border: 1px solid var(--border);
     border-top: 3px solid var(--accent);
-    border-radius: 14px;
-    box-shadow: 0 8px 30px var(--shadow);
-    padding: 16px;
+    border-radius: var(--radius-card);
+    box-shadow: var(--shadow-popover);
+    padding: var(--space-4);
     z-index: 5;
     display: flex;
     flex-wrap: wrap;
     align-items: flex-start;
-    gap: 8px;
+    gap: var(--space-2);
     pointer-events: auto;
   }
   .cell-info.danger {
-    border-top-color: #c3403a;
+    border-top-color: var(--danger-text);
   }
   .cell-info.advantage {
-    border-top-color: #308052;
+    border-top-color: var(--success);
   }
   .cell-info > div {
     flex: 1;
@@ -76,25 +76,25 @@
     color: var(--secondary);
   }
   .cell-info.danger span {
-    color: var(--danger);
+    color: var(--danger-text);
   }
   .cell-info.advantage span {
-    color: var(--player-ink, #308052);
+    color: var(--success);
   }
   h3 {
     font-size: var(--type-body);
-    line-height: 1.4;
-    margin: 4px 0 0;
+    line-height: var(--leading-compact);
+    margin: var(--space-1) 0 0;
   }
   p {
     width: 100%;
     font-size: var(--type-secondary);
-    line-height: 1.5;
+    line-height: var(--leading-body);
     margin: 0;
     color: var(--secondary);
   }
   .icon-button {
     flex-shrink: 0;
-    margin: -8px -8px 0 0;
+    margin: calc(-1 * var(--space-2)) calc(-1 * var(--space-2)) 0 0;
   }
 </style>
diff --git a/src/lib/components/Dialog.svelte b/src/lib/components/Dialog.svelte
index 440b4bb..3423fda 100644
--- a/src/lib/components/Dialog.svelte
+++ b/src/lib/components/Dialog.svelte
@@ -49,8 +49,8 @@
   .dialog-fallback-backdrop {
     position: fixed;
     inset: 0;
-    z-index: 1000;
-    background: #263a2d55;
+    z-index: var(--layer-backdrop);
+    background: var(--overlay);
     backdrop-filter: blur(4px);
   }
 </style>
diff --git a/src/lib/components/Dice.svelte b/src/lib/components/Dice.svelte
index 87f6e71..71d576c 100644
--- a/src/lib/components/Dice.svelte
+++ b/src/lib/components/Dice.svelte
@@ -276,7 +276,7 @@
   .dice-widget {
     display: flex;
     align-items: center;
-    gap: 24px;
+    gap: var(--space-6);
   }
   .dice-result {
     display: flex;
@@ -286,8 +286,8 @@
   }
   .dice-result small {
     color: var(--secondary);
-    font-size: var(--type-secondary, 14px);
-    line-height: 1.4;
+    font-size: var(--type-secondary);
+    line-height: var(--leading-compact);
     max-width: 160px;
     text-align: center;
     overflow-wrap: anywhere;
@@ -474,21 +474,19 @@
       alternate;
   }
   .dropping .large {
-    animation: drop-die var(--roll-duration, 800ms) ease-out;
+    animation: drop-die var(--roll-duration, 800ms) var(--ease-ui);
   }
   .dice-announcement {
     min-height: 95px;
   }
   .dice-announcement > strong {
     display: block;
-    font:
-      800 52px 'Manrope',
-      sans-serif;
+    font: 800 var(--type-display) var(--font-ui);
     color: var(--accent-text);
-    line-height: 1.2;
+    line-height: var(--leading-heading);
   }
   .dice-announcement p {
-    font-size: 14px;
+    font-size: var(--type-secondary);
     color: var(--secondary);
   }
   .shake-button {
@@ -508,28 +506,28 @@
     z-index: 30;
     display: flex;
     align-items: center;
-    gap: 14px;
+    gap: var(--space-3);
     width: 390px;
     max-width: calc(100vw - 24px);
-    padding: 12px 18px;
+    padding: var(--space-3) var(--space-4);
     border: 1px solid var(--border);
-    border-radius: 18px;
+    border-radius: var(--radius-panel);
     background: var(--surface);
     color: var(--text);
-    box-shadow: 0 12px 50px var(--shadow);
-    animation: notice-enter 0.2s ease-out;
+    box-shadow: var(--shadow-popover);
+    animation: notice-enter 0.2s var(--ease-ui);
     pointer-events: none;
   }
   .dice-notice > div {
     min-width: 0;
   }
   .dice-notice strong {
-    font-size: var(--type-body, 16px);
+    font-size: var(--type-body);
   }
   .dice-notice p {
-    font-size: var(--type-secondary, 14px);
-    line-height: 1.5;
-    margin-top: 5px;
+    font-size: var(--type-secondary);
+    line-height: var(--leading-body);
+    margin-top: var(--space-1);
     color: var(--secondary);
   }
   .dice-notice button {
@@ -582,7 +580,7 @@
   }
   @media (max-width: 500px) {
     .dice-widget {
-      gap: 12px;
+      gap: var(--space-3);
     }
     .dice-result small {
       max-width: 90px;
diff --git a/src/lib/components/GoBoard.svelte b/src/lib/components/GoBoard.svelte
index 68e82b6..100bb42 100644
--- a/src/lib/components/GoBoard.svelte
+++ b/src/lib/components/GoBoard.svelte
@@ -198,47 +198,55 @@
     cursor: pointer;
     outline: none;
   }
-  .go-map g[role='button'] { outline:none; }
+  .go-map g[role='button'] {
+    outline: none;
+  }
   .allowed:hover .intersection,
   .allowed:focus-visible .intersection {
     fill: #ffffff33;
-    stroke: #0759d9;
+    stroke: var(--accent);
     stroke-width: 3;
   }
   .go-scores {
     display: flex;
     flex-direction: column;
-    gap: 14px;
+    gap: var(--space-3);
   }
   .go-scores > div {
     display: grid;
     grid-template-columns: 20px minmax(0, 1fr);
-    gap: 3px 8px;
+    gap: var(--space-half) var(--space-2);
     align-items: center;
   }
   .go-scores i {
     width: 20px;
     height: 20px;
-    border-radius: 50%;
-    background: #20252e;
-    border: 1px solid #858b96;
+    border-radius: var(--radius-round);
+    background: var(--stone-dark);
+    border: 1px solid var(--stone-border);
     grid-row: span 2;
   }
   .go-scores i.white {
-    background: #f5f6f8;
+    background: var(--stone-light);
   }
   .go-scores strong {
-    font-size: var(--type-secondary,14px);
-    white-space:nowrap;
-    overflow:hidden;
-    text-overflow:ellipsis;
+    font-size: var(--type-secondary);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
   .go-scores small {
-    font-size: var(--type-detail,12px);
+    font-size: var(--type-detail);
     color: var(--secondary);
   }
-  @media(max-width:800px) and (orientation:portrait) {
-    .go-scores { flex-direction:row; gap:12px; }
-    .go-scores>div { flex:1; min-width:0; }
+  @media (max-width: 800px) and (orientation: portrait) {
+    .go-scores {
+      flex-direction: row;
+      gap: var(--space-3);
+    }
+    .go-scores > div {
+      flex: 1;
+      min-width: 0;
+    }
   }
 </style>
diff --git a/src/lib/components/Invitation.svelte b/src/lib/components/Invitation.svelte
index 7f8d960..f2038cd 100644
--- a/src/lib/components/Invitation.svelte
+++ b/src/lib/components/Invitation.svelte
@@ -162,26 +162,26 @@
     display: grid;
     grid-template-columns: minmax(0, 1fr) 44px;
     align-items: start;
-    gap: 16px;
-    margin: 0 0 24px;
+    gap: var(--space-4);
+    margin: 0 0 var(--space-6);
   }
   h2 {
-    margin: 6px 0 0;
-    font-size: 24px;
-    line-height: 1.25;
-    letter-spacing: -0.5px;
+    margin: var(--space-1) 0 0;
+    font-size: var(--type-section);
+    line-height: var(--leading-heading);
+    letter-spacing: var(--tracking-heading);
   }
   .invitation-game {
     display: grid;
     grid-template-columns: 96px minmax(0, 1fr);
-    gap: 16px;
+    gap: var(--space-4);
     align-items: center;
-    margin: 0 0 24px;
+    margin: 0 0 var(--space-6);
   }
   .invitation-art {
     width: 96px;
     height: 96px;
-    border-radius: 16px;
+    border-radius: var(--radius-card);
     overflow: hidden;
   }
   .invitation-art :global(.game-art) {
@@ -192,35 +192,35 @@
   }
   .invitation-details {
     display: grid;
-    gap: 4px;
+    gap: var(--space-1);
     min-width: 0;
   }
   .invitation-details strong {
-    font-size: 18px;
-    line-height: 1.4;
+    font-size: var(--type-subtitle);
+    line-height: var(--leading-compact);
     overflow-wrap: anywhere;
   }
   .invitation-details span {
-    font-size: 14px;
-    line-height: 1.5;
+    font-size: var(--type-secondary);
+    line-height: var(--leading-body);
     color: var(--secondary);
   }
   .invitation-message {
-    margin: 0 0 24px;
-    padding: 16px;
+    margin: 0 0 var(--space-6);
+    padding: var(--space-4);
     border-left: 3px solid var(--accent);
-    border-radius: 0 12px 12px 0;
+    border-radius: 0 var(--radius-control) var(--radius-control) 0;
     background: var(--soft);
     color: var(--text);
-    font-size: 16px;
-    line-height: 1.5;
+    font-size: var(--type-body);
+    line-height: var(--leading-body);
     white-space: pre-wrap;
     overflow-wrap: anywhere;
   }
   .invitation-note {
-    margin: 0 0 16px;
-    font-size: 16px;
-    line-height: 1.5;
+    margin: 0 0 var(--space-4);
+    font-size: var(--type-body);
+    line-height: var(--leading-body);
     color: var(--secondary);
   }
   @media (max-width: 600px) {
@@ -230,7 +230,7 @@
     .invitation-art {
       width: 80px;
       height: 80px;
-      border-radius: 12px;
+      border-radius: var(--radius-control);
     }
     .invitation-art :global(.game-art) {
       transform: scale(0.421053);
diff --git a/src/lib/components/OcaBoard.svelte b/src/lib/components/OcaBoard.svelte
index d38b41f..20566c4 100644
--- a/src/lib/components/OcaBoard.svelte
+++ b/src/lib/components/OcaBoard.svelte
@@ -265,7 +265,7 @@
   }
   .cell-enlargement {
     pointer-events: none;
-    filter: drop-shadow(0 8px 10px #27365250);
+    filter: drop-shadow(var(--shadow-board));
   }
   .cell-enlargement > rect {
     stroke: var(--accent);
@@ -290,10 +290,10 @@
   }
   .bonus,
   .goal {
-    animation: arrive-jump var(--arrival-duration) ease-out;
+    animation: arrive-jump var(--arrival-duration) var(--ease-ui);
   }
   .penalty {
-    animation: arrive-shake var(--arrival-duration) ease-out;
+    animation: arrive-shake var(--arrival-duration) var(--ease-ui);
   }
   @keyframes arrive-jump {
     30% {
diff --git a/src/lib/components/PendingGames.svelte b/src/lib/components/PendingGames.svelte
index 8fc2ca6..8d92588 100644
--- a/src/lib/components/PendingGames.svelte
+++ b/src/lib/components/PendingGames.svelte
@@ -46,17 +46,17 @@
   }
   .pending-games-list {
     display: grid;
-    gap: 8px;
+    gap: var(--space-2);
   }
   .pending-game {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    gap: 12px;
-    padding: 16px;
+    gap: var(--space-3);
+    padding: var(--space-4);
     background: var(--surface);
     border: 1px solid var(--border);
-    border-radius: 12px;
+    border-radius: var(--radius-control);
     color: var(--text);
     text-decoration: none;
   }
@@ -71,24 +71,24 @@
   .pending-game strong {
     display: block;
     font-size: var(--type-body);
-    line-height: 1.4;
+    line-height: var(--leading-compact);
     overflow-wrap: anywhere;
   }
   .pending-game small {
     display: block;
     font-size: var(--type-secondary);
     color: var(--secondary);
-    margin-top: 6px;
+    margin-top: var(--space-1);
   }
   .pending-status {
     display: block;
-    font-size: var(--type-detail);
+    font-size: var(--type-secondary);
     color: var(--secondary);
-    margin-top: 6px;
+    margin-top: var(--space-1);
   }
   .pending-status.your-turn {
     color: var(--accent-text);
-    font-weight: 700;
+    font-weight: var(--weight-bold);
   }
   .pending-empty {
     font-size: var(--type-secondary);
diff --git a/src/lib/components/PlayerColorChooser.svelte b/src/lib/components/PlayerColorChooser.svelte
index 4446713..177baf7 100644
--- a/src/lib/components/PlayerColorChooser.svelte
+++ b/src/lib/components/PlayerColorChooser.svelte
@@ -55,34 +55,34 @@
 
 <style>
   .color-chooser {
-    margin: 24px 0;
+    margin: var(--space-6) 0;
     text-align: left;
   }
   h3 {
     font-size: var(--type-body);
-    margin-bottom: 12px;
+    margin-bottom: var(--space-3);
   }
   .color-options {
     display: grid;
     grid-template-columns: repeat(4, minmax(0, 1fr));
-    gap: 8px;
+    gap: var(--space-2);
   }
   .color-options button {
     display: flex;
     align-items: center;
     justify-content: center;
-    gap: 8px;
-    padding: 12px;
-    min-height: 48px;
+    gap: var(--space-2);
+    padding: var(--space-3);
+    min-height: var(--size-field);
     border: 1px solid var(--border);
-    border-radius: 12px;
+    border-radius: var(--radius-control);
     background: var(--surface);
     color: var(--text);
     font-size: var(--type-secondary);
   }
   .color-options button.chosen {
     border-color: var(--accent);
-    box-shadow: inset 0 0 0 1px var(--accent);
+    box-shadow: var(--shadow-selection);
   }
   .color-options button:disabled {
     opacity: 0.35;
@@ -92,25 +92,25 @@
     display: inline-block;
     width: 20px;
     height: 20px;
-    border-radius: 50%;
+    border-radius: var(--radius-round);
     flex-shrink: 0;
-    box-shadow: inset 0 0 0 2px #ffffff70;
+    box-shadow: var(--shadow-selection);
   }
   .color-hint,
   .automatic-color p {
     font-size: var(--type-secondary);
     color: var(--secondary);
-    margin-top: 12px;
+    margin-top: var(--space-3);
   }
   .automatic-color {
     display: flex;
     align-items: center;
     flex-wrap: wrap;
-    gap: 8px;
+    gap: var(--space-2);
   }
   .automatic-color p {
     width: 100%;
-    margin-top: 4px;
+    margin-top: var(--space-1);
   }
   @media (max-width: 650px) {
     .color-options {
diff --git a/src/lib/components/RoomExit.svelte b/src/lib/components/RoomExit.svelte
index 2b99b9d..bbe7a5c 100644
--- a/src/lib/components/RoomExit.svelte
+++ b/src/lib/components/RoomExit.svelte
@@ -145,50 +145,50 @@
   .modal-head {
     display: flex;
     align-items: flex-start;
-    gap: 16px;
+    gap: var(--space-4);
     justify-content: space-between;
-    margin: 0 0 24px;
+    margin: 0 0 var(--space-6);
   }
   h2 {
-    margin: 6px 0 0;
-    font-size: 24px;
-    line-height: 1.25;
+    margin: var(--space-1) 0 0;
+    font-size: var(--type-section);
+    line-height: var(--leading-heading);
   }
   h3 {
     margin: 0;
-    font-size: 18px;
-    line-height: 1.4;
+    font-size: var(--type-subtitle);
+    line-height: var(--leading-compact);
   }
   .exit-choice {
     display: grid;
-    gap: 12px;
+    gap: var(--space-3);
   }
   .exit-choice p {
     margin: 0;
-    font-size: 16px;
-    line-height: 1.5;
+    font-size: var(--type-body);
+    line-height: var(--leading-body);
     color: var(--secondary);
   }
   .inactivity-choice {
-    margin-top: 24px;
-    padding-top: 24px;
+    margin-top: var(--space-6);
+    padding-top: var(--space-6);
     border-top: 1px solid var(--border);
   }
   .exit-choice .exit-status {
-    font-size: 14px;
+    font-size: var(--type-secondary);
     color: var(--accent-text);
   }
   .expiry-note {
     display: flex;
     align-items: flex-start;
-    gap: 8px;
-    margin: 24px 0 0;
+    gap: var(--space-2);
+    margin: var(--space-6) 0 0;
     color: var(--secondary);
-    font-size: 14px;
-    line-height: 1.5;
+    font-size: var(--type-secondary);
+    line-height: var(--leading-body);
   }
   .expiry-note :global(svg) {
     flex: 0 0 16px;
-    margin-top: 3px;
+    margin-top: var(--space-half);
   }
 </style>
diff --git a/src/lib/components/ThemeControls.svelte b/src/lib/components/ThemeControls.svelte
index ce74afb..070366a 100644
--- a/src/lib/components/ThemeControls.svelte
+++ b/src/lib/components/ThemeControls.svelte
@@ -2,7 +2,7 @@
   import { appearance, saveAppearance, type Mode, type Palette } from '../theme.svelte';
   import Icon from './Icon.svelte';
   const modes:{id:Mode;label:string;icon:string}[]=[{id:'light',label:'Claro',icon:'sun'},{id:'dark',label:'Oscuro',icon:'moon'},{id:'system',label:'Sistema',icon:'monitor'}];
-  const palettes:{id:Palette;label:string;color:string}[]=[{id:'blue',label:'Azul',color:'#4263df'},{id:'forest',label:'Bosque',color:'#247761'},{id:'violet',label:'Violeta',color:'#8756ca'}];
+  const palettes:{id:Palette;label:string;color:string}[]=[{id:'blue',label:'Azul',color:'var(--palette-blue)'},{id:'forest',label:'Bosque',color:'var(--palette-forest)'},{id:'violet',label:'Violeta',color:'var(--palette-violet)'}];
 </script>
 <div class="theme-control">
   <button class="settings-trigger" popovertarget="appearance-settings" aria-label="Cambiar apariencia" title="Apariencia"><Icon name={appearance.mode==='dark'?'moon':'sun'} size={19}/></button>
diff --git a/src/match.css b/src/match.css
deleted file mode 100644
index c07e64c..0000000
--- a/src/match.css
+++ /dev/null
@@ -1,601 +0,0 @@
-/* The table has its own viewport; platform navigation opens on demand. */
-.match-shell {
-  height: 100dvh;
-  overflow: hidden;
-}
-.match-shell .main-shell {
-  margin: 0;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-}
-.match-shell .topbar {
-  height: 52px;
-  flex: 0 0 52px;
-  padding: 0 18px;
-  gap: 14px;
-  background: var(--surface);
-}
-.match-shell .mobile-logo {
-  display: block;
-  width: 128px;
-  margin-right: auto;
-}
-.match-shell .header-right {
-  gap: 12px;
-}
-.match-shell .header-right .small-avatar {
-  display: none;
-}
-.match-shell main {
-  flex: 1;
-  min-height: 0;
-  width: 100%;
-  max-width: none;
-  margin: 0;
-  padding: 0;
-  overflow: hidden;
-}
-.match-shell .site-footer {
-  display: none;
-}
-.match-shell .sidebar:not(:popover-open) {
-  display: none;
-}
-.match-shell .sidebar:popover-open {
-  display: flex;
-  position: fixed;
-  inset: 60px auto 12px 12px;
-  margin: 0;
-  height: auto;
-  width: 260px;
-  padding: 24px;
-  border: 1px solid var(--border);
-  border-radius: 18px;
-  box-shadow: 0 16px 54px var(--shadow);
-  z-index: 50;
-  overflow: auto;
-  animation: panel-enter 0.18s ease-out;
-}
-.match-shell .sidebar .brand {
-  display: flex;
-  width: 100%;
-  margin: 0 0 24px;
-  align-items: flex-start;
-}
-.match-shell .sidebar .brand-logo {
-  width: 100%;
-}
-.match-shell .sidebar .brand small,
-.match-shell .sidebar-label,
-.match-shell .sidebar nav a span,
-.match-shell .sidebar-invite,
-.match-shell .sidebar-bottom {
-  display: block;
-}
-.match-shell .sidebar nav {
-  display: block;
-  width: 100%;
-}
-.match-shell .sidebar nav a {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  flex-direction: row;
-  gap: 10px;
-  padding: 14px 12px;
-  font-size: 13px;
-}
-.match-shell .sidebar-bottom {
-  margin-top: auto;
-  padding-top: 18px;
-}
-.match-shell .sidebar-invite {
-  margin-top: 18px;
-}
-.match-shell .settings-popover {
-  top: 58px;
-}
-.match-room {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-  background: radial-gradient(
-    ellipse at 50% 40%,
-    var(--soft),
-    var(--background) 75%
-  );
-}
-.match-room .room-page-heading {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  margin: 0;
-  padding: 10px 20px;
-  flex-shrink: 0;
-  border-bottom: 1px solid var(--border);
-}
-.room-page-heading > div:first-child {
-  min-width: 0;
-}
-.match-room .room-page-heading .eyebrow {
-  font-size: 9px;
-  line-height: 1;
-  letter-spacing: 1px;
-}
-.match-room .room-page-heading h1 {
-  font-size: 17px;
-  letter-spacing: -0.4px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 36vw;
-}
-.match-turn {
-  display: flex;
-  align-items: center;
-  gap: 7px;
-  padding: 8px 12px;
-  background: var(--player-soft);
-  color: var(--player-ink);
-  border-radius: 20px;
-  font-size: 12px;
-  font-weight: 650;
-  white-space: nowrap;
-}
-.match-turn i,
-.panel-players i {
-  display: block;
-  width: 7px;
-  height: 7px;
-  border-radius: 50%;
-  background: var(--player-solid);
-  flex-shrink: 0;
-}
-.room-tools {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  margin-left: auto;
-}
-.match-room .room-tools .button {
-  padding: 9px 12px;
-  margin: 0;
-  font-size: 12px;
-}
-.room-tools .icon-button {
-  width: 34px;
-  height: 34px;
-  display: grid;
-  place-items: center;
-  padding: 0;
-}
-.panel-trigger b {
-  background: var(--accent);
-  color: white;
-  border-radius: 20px;
-  font-size: 10px;
-  padding: 2px 6px;
-}
-.match-room .room-layout {
-  flex: 1;
-  min-height: 0;
-  display: block;
-  position: relative;
-  padding: 12px 18px 8px;
-  transition: padding-right 0.18s ease-out;
-}
-.match-room .play-area {
-  height: 100%;
-  min-height: 0;
-  display: flex;
-  flex-direction: column;
-  container-type: size;
-}
-.match-room .parchis-board {
-  flex: 1;
-  min-height: 0;
-  padding: 0;
-  border: 0;
-  background: transparent;
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) 210px;
-  gap: 24px;
-}
-.board-surface {
-  min-width: 0;
-  min-height: 0;
-  display: grid;
-  place-items: center;
-  container-type: size;
-}
-.match-room .parchis-map {
-  width: min(100cqw, 100cqh);
-  height: min(100cqw, 100cqh);
-  max-width: 100%;
-  max-height: 100%;
-  filter: drop-shadow(0 10px 18px var(--shadow));
-}
-.match-room .parchis-controls {
-  margin: 0;
-  padding: 20px 16px;
-  border: 1px solid var(--border);
-  border-radius: 20px;
-  align-self: center;
-  display: flex;
-  align-items: stretch;
-  flex-direction: column;
-  gap: 14px;
-  box-shadow: 0 4px 24px var(--shadow);
-}
-.match-room .parchis-controls .dice-widget {
-  flex-direction: column;
-  gap: 10px;
-}
-.match-room .parchis-controls p {
-  font-size: 12px;
-  flex: none;
-}
-.table-players {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  border-top: 1px solid var(--border);
-  padding-top: 14px;
-}
-.table-player {
-  display: grid;
-  grid-template-columns: 25px minmax(0, 1fr);
-  align-items: center;
-  column-gap: 8px;
-  opacity: 0.7;
-}
-.table-player.playing {
-  opacity: 1;
-}
-.table-player .mini-avatar {
-  grid-row: span 2;
-  width: 25px;
-  height: 25px;
-  margin: 0;
-  border: 0;
-  font-size: 10px;
-  background: var(--player-soft);
-  color: var(--player-ink);
-}
-.table-player strong {
-  font-size: 11px;
-  color: var(--player-ink);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.table-player small {
-  font-size: 10px;
-  color: var(--secondary);
-}
-.piece-shortcuts {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-  flex-wrap: wrap;
-}
-.piece-shortcuts > span {
-  width: 100%;
-  font-size: 10px;
-  color: var(--secondary);
-}
-.piece-shortcuts .parchis-token {
-  width: 32px;
-  height: 32px;
-  font-size: 13px;
-}
-.match-room .board-note {
-  font-size: 11px;
-  margin: 8px 0 0;
-  height: 20px;
-  flex-shrink: 0;
-  justify-content: center;
-}
-.match-room .board-note > span:last-child {
-  display: none;
-}
-.match-room .parchis-board + .board-note {
-  display: none;
-}
-.match-room .board-container {
-  padding: 8px;
-  margin: auto;
-  max-width: none;
-  width: min(100cqw, calc(100cqh - 34px));
-  aspect-ratio: 1;
-  flex-shrink: 0;
-}
-.match-room .board-grid {
-  height: 100%;
-  grid-template-rows: repeat(8, minmax(0, 1fr));
-}
-.match-room .chess-piece {
-  font-size: clamp(16px, 8cqmin, 80px);
-}
-.match-room .board-square {
-  aspect-ratio: auto;
-}
-.match-room .promotion {
-  position: absolute;
-  bottom: 15px;
-  left: 50%;
-  transform: translateX(-50%);
-  z-index: 10;
-}
-.match-room .room-panel:not(:popover-open) {
-  display: none;
-}
-.match-room .room-panel:popover-open {
-  display: flex;
-  flex-direction: column;
-  width: 310px;
-  max-width: calc(100vw - 24px);
-  position: fixed;
-  inset: 124px 18px 14px auto;
-  height: auto;
-  margin: 0;
-  z-index: 20;
-  background: var(--surface);
-  border-radius: 18px;
-  box-shadow: 0 6px 30px var(--shadow);
-  animation: panel-enter 0.18s ease-out;
-}
-.panel-heading {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 14px 16px 8px;
-}
-.panel-heading strong {
-  font-size: 14px;
-}
-.panel-players {
-  display: flex;
-  gap: 8px 12px;
-  flex-wrap: wrap;
-  padding: 0 16px 10px;
-}
-.panel-players span {
-  display: flex;
-  align-items: center;
-  gap: 5px;
-  color: var(--player-ink);
-  font-size: 10px;
-}
-.match-room .room-tabs {
-  flex-shrink: 0;
-}
-.match-room .chat-messages,
-.match-room .room-rules,
-.match-room .event-list {
-  height: auto;
-  min-height: 0;
-  flex: 1;
-  overflow: auto;
-}
-.match-room .chat-form {
-  flex-shrink: 0;
-}
-.match-room .waiting-card {
-  height: 100%;
-  max-width: 800px;
-  margin: auto;
-  overflow: auto;
-  padding: 24px;
-}
-.match-room .result-banner {
-  padding: 12px 20px;
-  margin: 0;
-  display: flex;
-  gap: 12px;
-  align-items: center;
-  flex-wrap: wrap;
-}
-.match-room .result-banner .empty-symbol {
-  display: none;
-}
-.match-room .result-banner h2 {
-  font-size: 15px;
-}
-.match-room .result-banner p {
-  font-size: 12px;
-}
-.match-room .result-banner .button {
-  padding: 8px 12px;
-  margin: 0;
-}
-.match-room .form-error {
-  margin: 8px 18px 0;
-  flex-shrink: 0;
-}
-@media (min-width: 850px) {
-  .match-room .room-layout:has(.room-panel:popover-open) {
-    padding-right: 346px;
-  }
-  .match-room .room-layout:has(.room-panel:popover-open) .parchis-board {
-    grid-template-columns: minmax(0, 1fr) 180px;
-    gap: 12px;
-  }
-}
-@media (min-width: 850px) and (max-width: 1199px) {
-  .match-room .room-layout:has(.room-panel:popover-open) .parchis-board {
-    grid-template-columns: minmax(0, 1fr);
-    grid-template-rows: minmax(0, 1fr) auto;
-  }
-  .match-room .room-layout:has(.room-panel:popover-open) .parchis-controls {
-    width: 100%;
-    padding: 10px 14px;
-    display: grid;
-    grid-template-columns: 180px minmax(0, 1fr);
-    gap: 6px 14px;
-  }
-  .match-room
-    .room-layout:has(.room-panel:popover-open)
-    .parchis-controls
-    > .eyebrow,
-  .match-room .room-layout:has(.room-panel:popover-open) .table-players {
-    display: none;
-  }
-  .match-room .room-layout:has(.room-panel:popover-open) .dice-widget {
-    flex-direction: row;
-    grid-row: span 2;
-  }
-}
-@media (max-width: 800px) and (orientation: portrait) {
-  .match-room .parchis-board {
-    grid-template-columns: minmax(0, 1fr);
-    grid-template-rows: minmax(0, 1fr) auto;
-    gap: 10px;
-  }
-  .match-room .parchis-controls {
-    width: 100%;
-    padding: 10px 12px;
-    display: grid;
-    grid-template-columns: auto minmax(0, 1fr);
-    gap: 6px 12px;
-    align-self: stretch;
-  }
-  .match-room .parchis-controls > .eyebrow {
-    display: none;
-  }
-  .match-room .parchis-controls .dice-widget {
-    flex-direction: row;
-    gap: 8px;
-    grid-row: span 2;
-  }
-  .match-room .parchis-controls .dice-widget .dice-stage {
-    width: 54px;
-    height: 65px;
-    --edge: 36px;
-    --depth: 18px;
-  }
-  .match-room .parchis-controls .dice-widget .dice-face {
-    padding: 6px;
-    gap: 2px;
-    border-radius: 6px;
-  }
-  .match-room .parchis-controls .button {
-    font-size: 11px;
-    padding: 10px;
-  }
-  .match-room .parchis-controls .dice-instruction {
-    font-size: 11px;
-    align-self: center;
-  }
-  .match-room .table-players {
-    display: none;
-  }
-  .match-room .piece-shortcuts {
-    gap: 6px;
-  }
-  .match-room .piece-shortcuts > span {
-    width: auto;
-  }
-}
-@media (max-width: 650px) {
-  .match-shell .topbar {
-    padding: 0 12px;
-    gap: 10px;
-  }
-  .match-shell .header-right {
-    gap: 8px;
-  }
-  .match-shell .connection {
-    font-size: 0;
-    gap: 0;
-  }
-  .match-shell .mobile-logo {
-    width: 114px;
-  }
-  .match-room .room-page-heading {
-    padding: 8px 12px;
-    gap: 6px 8px;
-    display: grid;
-    grid-template-columns: minmax(0, 1fr) auto;
-  }
-  .match-room .room-page-heading > div:first-child {
-    grid-row: 1;
-    grid-column: 1;
-  }
-  .match-room .room-tools {
-    grid-row: 1;
-    grid-column: 2;
-  }
-  .match-room .room-page-heading h1 {
-    font-size: 14px;
-    max-width: 45vw;
-  }
-  .match-turn {
-    padding: 5px 0;
-    font-size: 11px;
-    grid-row: 2;
-    grid-column: 1 / -1;
-    width: 100%;
-    background: transparent;
-  }
-  .room-tools {
-    gap: 4px;
-  }
-  .room-tools .fullscreen-trigger {
-    display: none;
-  }
-  .match-room .panel-trigger {
-    padding: 8px;
-  }
-  .panel-trigger > span {
-    display: none;
-  }
-  .match-room .room-layout {
-    padding: 10px 8px 8px;
-  }
-  .match-room .room-panel:popover-open {
-    inset: 142px 8px 8px auto;
-    width: 340px;
-  }
-  .match-room .board-note {
-    font-size: 10px;
-    height: auto;
-  }
-}
-@media (orientation: landscape) and (max-height: 520px) {
-  .match-shell .topbar {
-    height: 44px;
-    flex-basis: 44px;
-  }
-  .match-room .room-page-heading {
-    padding: 5px 12px;
-  }
-  .match-room .parchis-board {
-    gap: 12px;
-    grid-template-columns: minmax(0, 1fr) 180px;
-  }
-  .match-room .parchis-controls {
-    padding: 10px 12px;
-    gap: 8px;
-  }
-  .match-room .table-players {
-    display: none;
-  }
-  .match-room .parchis-controls .dice-widget {
-    flex-direction: row;
-    gap: 8px;
-  }
-  .match-room .parchis-controls .dice-widget .dice-stage {
-    --edge: 36px;
-    --depth: 18px;
-    width: 48px;
-    height: 60px;
-  }
-  .match-room .parchis-controls .button {
-    padding: 8px;
-    font-size: 10px;
-  }
-}
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index c42c1ed..c95f6d9 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -11,11 +11,8 @@
   import BrandMark from '#lib/components/BrandMark.svelte';
   import AvatarImage from '#lib/components/AvatarImage.svelte';
   import { brand } from '../../shared/brand.mjs';
+  import '../tokens.css';
   import '../app.css';
-  import '../appearance.css';
-  import '../match.css';
-  import '../design.css';
-  import '../terms.css';
   import TermsConsent from '#lib/components/TermsConsent.svelte';
   import { terms } from '../../shared/terms.mjs';
   let { children, data } = $props();
diff --git a/src/terms.css b/src/terms.css
deleted file mode 100644
index 0029171..0000000
--- a/src/terms.css
+++ /dev/null
@@ -1,114 +0,0 @@
-.entry-notice {
-  position: fixed;
-  inset: 0;
-  margin: auto;
-  z-index: 1001;
-  width: min(600px, calc(100vw - 32px));
-  max-width: 600px;
-  padding: 32px;
-}
-.entry-notice h2 {
-  margin: 0 0 20px;
-  font-size: 24px;
-}
-.entry-notice p {
-  font-size: 16px;
-  line-height: 1.55;
-  margin: 0 0 16px;
-  color: var(--muted);
-}
-.entry-notice .terms-author {
-  color: var(--text);
-}
-.terms-read {
-  display: inline-block;
-  font-size: 16px;
-  font-weight: 650;
-  color: var(--green);
-  margin: 0 0 20px;
-  text-decoration: underline;
-  text-underline-offset: 3px;
-}
-.entry-notice .terms-check {
-  display: flex;
-  flex-direction: row;
-  align-items: flex-start;
-  gap: 12px;
-  margin: 0 0 16px;
-  color: var(--text);
-  font-size: 16px;
-  line-height: 1.5;
-  font-weight: 600;
-}
-.terms-check input {
-  flex: 0 0 22px;
-  width: 22px;
-  height: 22px;
-  margin: 2px 0 0;
-  padding: 0;
-  accent-color: var(--green);
-}
-.entry-notice .terms-cookie {
-  font-size: 14px;
-  line-height: 1.5;
-}
-.terms-actions {
-  display: flex;
-  gap: 12px;
-  justify-content: flex-end;
-  margin-top: 24px;
-}
-.terms-actions .button {
-  font-size: 16px;
-}
-.terms-actions a[aria-disabled='true'] {
-  pointer-events: none;
-  opacity: 0.5;
-}
-.terms-page {
-  width: min(100%, 760px);
-  margin: 0 auto;
-  padding: 40px 32px;
-}
-.terms-page h1 {
-  font-size: 28px;
-  margin: 0 0 24px;
-}
-.terms-page h2 {
-  font-size: 20px;
-  margin: 32px 0 12px;
-}
-.terms-page p {
-  font-size: 16px;
-  line-height: 1.65;
-  margin-bottom: 16px;
-  color: var(--muted);
-}
-.terms-page .terms-introduction {
-  color: var(--text);
-}
-.terms-page .terms-version {
-  font-size: 14px;
-  margin-top: 32px;
-}
-.terms-page .button {
-  margin: 0 8px 12px 0;
-  font-size: 16px;
-}
-.site-footer .footer-author {
-  max-width: 42ch;
-}
-@media (max-width: 600px) {
-  .entry-notice {
-    padding: 24px;
-  }
-  .terms-page {
-    padding: 24px 20px;
-  }
-  .terms-actions {
-    flex-direction: column-reverse;
-  }
-  .terms-actions .button {
-    width: 100%;
-  }
-}
diff --git a/src/tokens.css b/src/tokens.css
new file mode 100644
index 0000000..0126e17
--- /dev/null
+++ b/src/tokens.css
@@ -0,0 +1,247 @@
+/* The only source of shared UI values. Board artwork keeps its own geometry. */
+@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;750;800&display=swap');
+
+:root {
+  color-scheme: light;
+  font-size: 100%;
+  --font-ui: 'Manrope', system-ui, sans-serif;
+  --font-title: var(--font-ui);
+  --type-body: clamp(1rem, 0.95rem + 0.1vw, 1.125rem);
+  --type-detail: calc(var(--type-body) * 0.8125);
+  --type-secondary: calc(var(--type-body) * 0.875);
+  --type-subtitle: calc(var(--type-body) * 1.25);
+  --type-section: calc(var(--type-body) * 1.5);
+  --type-heading: calc(var(--type-body) * 1.75);
+  --type-display: clamp(2rem, 1.4rem + 2vw, 3rem);
+  --leading-none: 1;
+  --leading-heading: 1.25;
+  --leading-compact: 1.4;
+  --leading-body: 1.5;
+  --leading-relaxed: 1.6;
+  --tracking-body: 0;
+  --tracking-heading: -0.025em;
+  --tracking-label: 0.06em;
+  --tracking-pin: 0.65em;
+  --weight-regular: 400;
+  --weight-medium: 500;
+  --weight-semibold: 600;
+  --weight-bold: 700;
+  --weight-display: 750;
+  --weight-heavy: 800;
+
+  --space-half: 0.125rem;
+  --space-1: 0.25rem;
+  --space-2: 0.5rem;
+  --space-3: 0.75rem;
+  --space-4: 1rem;
+  --space-5: 1.25rem;
+  --space-6: 1.5rem;
+  --space-8: 2rem;
+  --space-10: 2.5rem;
+  --space-12: 3rem;
+  --space-14: 3.5rem;
+  --space-16: 4rem;
+  --space-20: 5rem;
+  --space-24: 6rem;
+
+  --radius-xs: 0.25rem;
+  --radius-sm: 0.5rem;
+  --radius-control: 0.75rem;
+  --radius-card: 1rem;
+  --radius-panel: 1.25rem;
+  --radius-dialog: 1.5rem;
+  --radius-round: 50%;
+  --radius-pill: 999px;
+  --stroke-1: 1px;
+  --stroke-2: 2px;
+  --stroke-3: 3px;
+  --size-control: 2.75rem;
+  --size-field: 3rem;
+  --size-avatar: 2.5rem;
+  --size-avatar-small: 2rem;
+  --size-avatar-large: 5rem;
+  --size-modal: 32.5rem;
+  --size-notice: 37.5rem;
+  --size-popover: 22.5rem;
+  --size-menu: 20rem;
+  --size-navigation-mobile: 5.5rem;
+  --layout-sidebar: 15rem;
+  --layout-sidebar-medium: 12.8125rem;
+  --layout-sidebar-compact: 5.125rem;
+  --layout-content: 90rem;
+  --layout-gutter: clamp(var(--space-4), 3vw, var(--space-10));
+  --measure-copy: 70ch;
+  --measure-note: 48ch;
+  --duration-fast: 150ms;
+  --duration-normal: 200ms;
+  --duration-slow: 300ms;
+  --ease-ui: ease-out;
+  --layer-menu: 50;
+  --layer-notice: 35;
+  --layer-backdrop: 1000;
+  --layer-dialog: 1001;
+  --symbol-small: 2rem;
+  --symbol-medium: 2.5rem;
+  --symbol-large: 3rem;
+  --symbol-hero: 8rem;
+
+  --text: #202c41;
+  --background: #f5f7fc;
+  --surface: #ffffff;
+  --soft: #edf2fa;
+  --hero: #e8efff;
+  --accent: #0759d9;
+  --accent-hover: #0046b8;
+  --accent-text: #0759c4;
+  --on-accent: #ffffff;
+  --secondary: #58677e;
+  --border: #dde4f0;
+  --danger-bg: #fff0ec;
+  --danger-text: #a32a27;
+  --success: #217146;
+  --success-bg: #e6f5eb;
+  --glass-surface: #ffffffb8;
+  --glass-border: #ffffff90;
+  --overlay: #10274a55;
+  --overlay-strong: #081126b8;
+  --shadow-color: #10274a1c;
+  --palette-blue: #0759d9;
+  --palette-forest: #14744f;
+  --palette-violet: #7742bf;
+  --art-terracotta: #bc7255;
+  --board-light: #f1eddf;
+  --board-dark: #7f9871;
+  --board-selected: #d4bb68;
+  --board-target: #294b35a0;
+  --board-target-border: #234732aa;
+  --stone-dark: #20252e;
+  --stone-light: #f5f6f8;
+  --stone-border: #858b96;
+  --shadow-control: 0 var(--space-1) var(--space-2) var(--shadow-color);
+  --shadow-card: 0 var(--space-3) var(--space-8) var(--shadow-color);
+  --shadow-popover: 0 var(--space-4) var(--space-14) var(--shadow-color);
+  --shadow-dialog: 0 var(--space-6) var(--space-20) var(--shadow-color);
+  --shadow-board: 0 var(--space-2) var(--space-5) var(--shadow-color);
+  --shadow-selection: inset 0 0 0 var(--stroke-2) var(--glass-border);
+}
+
+:root[data-palette='forest'] {
+  --accent: #14744f;
+  --accent-hover: #0c5c3d;
+  --accent-text: #116942;
+  --hero: #e4f2e9;
+}
+:root[data-palette='violet'] {
+  --accent: #7742bf;
+  --accent-hover: #62329f;
+  --accent-text: #6836af;
+  --hero: #f0e9fc;
+}
+:root[data-theme='dark'] {
+  color-scheme: dark;
+  --text: #e8edf7;
+  --background: #101827;
+  --surface: #192438;
+  --soft: #223149;
+  --hero: #1c3052;
+  --accent: #397aee;
+  --accent-hover: #2b69d3;
+  --accent-text: #9bbeff;
+  --secondary: #adbbd0;
+  --border: #34445d;
+  --danger-bg: #442b32;
+  --danger-text: #ffb5a9;
+  --success: #92ddb1;
+  --success-bg: #203d35;
+  --glass-surface: #192438df;
+  --glass-border: #34445daa;
+  --overlay: #0008;
+  --shadow-color: #0006;
+}
+:root[data-theme='dark'][data-palette='forest'] {
+  --accent: #177f5a;
+  --accent-hover: #106e4b;
+  --accent-text: #7adab1;
+  --hero: #183a30;
+}
+:root[data-theme='dark'][data-palette='violet'] {
+  --accent: #8554d1;
+  --accent-hover: #7744c5;
+  --accent-text: #d2b4ff;
+  --hero: #30244c;
+}
+
+/* Player identities remain distinct in either theme. */
+
+.player-color-0 {
+  --player-ink: #775800;
+  --player-soft: #fff3ce;
+  --player-solid: #b88925;
+}
+.player-color-1 {
+  --player-ink: #165ba1;
+  --player-soft: #e6f1ff;
+  --player-solid: #397bba;
+}
+.player-color-2 {
+  --player-ink: #aa3938;
+  --player-soft: #ffecea;
+  --player-solid: #b95f56;
+}
+.player-color-3 {
+  --player-ink: #217146;
+  --player-soft: #e6f5eb;
+  --player-solid: #568264;
+}
+.player-color-4 {
+  --player-ink: #30343b;
+  --player-soft: #e8eaed;
+  --player-solid: #30343b;
+}
+.player-color-5 {
+  --player-ink: #985023;
+  --player-soft: #fff0e1;
+  --player-solid: #ad702f;
+}
+.player-color-6 {
+  --player-ink: #703cad;
+  --player-soft: #f2eaff;
+  --player-solid: #8654b8;
+}
+.player-color-7 {
+  --player-ink: #536070;
+  --player-soft: #eaf0f4;
+  --player-solid: #7d8794;
+}
+[data-theme='dark'] .player-color-0 {
+  --player-ink: #f3cd67;
+  --player-soft: #393326;
+}
+[data-theme='dark'] .player-color-1 {
+  --player-ink: #95c6ff;
+  --player-soft: #243650;
+}
+[data-theme='dark'] .player-color-2 {
+  --player-ink: #ffb4ad;
+  --player-soft: #402d36;
+}
+[data-theme='dark'] .player-color-3 {
+  --player-ink: #92ddb1;
+  --player-soft: #203d35;
+}
+[data-theme='dark'] .player-color-4 {
+  --player-ink: #e1e4e9;
+  --player-soft: #30343b;
+}
+[data-theme='dark'] .player-color-5 {
+  --player-ink: #ffc290;
+  --player-soft: #3b3029;
+}
+[data-theme='dark'] .player-color-6 {
+  --player-ink: #d9b8ff;
+  --player-soft: #352a49;
+}
+[data-theme='dark'] .player-color-7 {
+  --player-ink: #c1ccd6;
+  --player-soft: #303c48;
+}