/* Shared design scale. Theme colors retain the catalog's existing names. */
:root {
  --accent: #587f60;
  --paper: #f3f5ee;
  --ink: #34483b;
  --dim: #869789;
  --board: #c9d7bc;
  --edge: #a3b795;
  --slot: #e4ebd9;
  --card: #f8faee;
  --line: #dce4d5;
  --button: #fbfcf6;
  --glow: #becdad;

  --font-ui: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans CJK SC', 'Microsoft YaHei', sans-serif;
  --font-numeric: var(--font-ui);
  --text-xs: 11px;
  --text-sm: 13px;
  --text-md: 14px;
  --text-body: 16px;
  --text-title: 24px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --radius-control: 12px;
  --radius-card: 16px;
  --radius-panel: 24px;
  --radius-board: 20px;
  --radius-tile: 12px;
  --radius-pill: 999px;
  --control-height: 44px;
  --duration-ui: 160ms;
  --ease-ui: cubic-bezier(0.2, 0.7, 0.3, 1);

  --gap: 11px;
  --pad: 14px;
  --cell: calc((100% - 2 * var(--pad) - 3 * var(--gap)) / 4);
}

/* Resolve aliases here, where game.js applies each world's color palette. */
body {
  --ui-text: var(--ink);
  --ui-muted: color-mix(in srgb, var(--ink) 90%, var(--paper));
  --ui-border: color-mix(in srgb, var(--ink) 16%, var(--paper));
  --ui-border-strong: color-mix(in srgb, var(--ink) 65%, var(--paper));
  --ui-surface: var(--button);
  --ui-soft: var(--slot);
  --ui-accent: var(--ui-action);
  --ui-action: color-mix(in srgb, var(--accent) 75%, var(--ink));
  --ui-on-action: #fff;
  --shadow-control: 0 1px 2px color-mix(in srgb, var(--ink) 7%, transparent);
  --shadow-selection: 0 0 0 2px color-mix(in srgb, var(--ui-action) 12%, transparent);
  --shadow-panel: 0 24px 70px color-mix(in srgb, var(--ink) 22%, transparent);
  --shadow-board: inset 0 1px 0 #ffffffb3,
    0 6px 0 var(--edge),
    0 14px 20px -12px color-mix(in srgb, var(--ink) 28%, transparent);
  --shadow-slot: inset 0 1px 3px color-mix(in srgb, var(--edge) 18%, transparent);
  --shadow-tile: inset 0 1px 0 #fff,
    0 2px 0 color-mix(in srgb, var(--edge) 35%, var(--card)),
    0 4px 6px -3px color-mix(in srgb, var(--ink) 24%, transparent);
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ui-text); font: var(--text-body)/1.7 var(--font-ui); }
main { width: min(1080px, calc(100% - 32px)); margin: 32px auto 64px; }
.reading { max-width: 740px; }
a { color: var(--ui-action); text-underline-offset: 3px; }
nav { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-bottom: 32px; }
h1 { font-size: clamp(28px, 4vw, 40px); line-height: 1.25; margin: 16px 0; }
h2 { font-size: 20px; margin: 32px 0 12px; }
p, li { max-width: 78ch; }
.muted { color: var(--ui-muted); font-size: var(--text-sm); }
.card { background: var(--card); border: 1px solid var(--ui-border); border-radius: var(--radius-card); padding: 20px; margin: 20px 0; }
label { display: block; margin: 8px 0; }
input, select, button { min-height: var(--control-height); font: inherit; border-radius: var(--radius-control); border: 1px solid var(--ui-border-strong); padding: 8px 12px; }
input, select { background: var(--button); color: var(--ui-text); max-width: 100%; }
input[type=password] { width: min(100%, 480px); }
button { background: var(--ui-action); color: var(--ui-on-action); cursor: pointer; }
button:disabled { opacity: .65; cursor: wait; }
:focus-visible { outline: 3px solid var(--ui-action); outline-offset: 3px; }
.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.metric { margin: 0; }
.metric strong { display: block; font-size: 28px; line-height: 1.4; }
.table-wrap { overflow-x: auto; border: 1px solid var(--ui-border); border-radius: var(--radius-control); }
table { width: 100%; border-collapse: collapse; white-space: nowrap; font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
caption { padding: 12px; text-align: left; color: var(--ui-muted); }
th, td { text-align: right; padding: 10px 12px; border-bottom: 1px solid var(--ui-border); }
th:first-child, td:first-child { text-align: left; }
thead { background: var(--ui-soft); }
tr:last-child td { border: 0; }
.toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }
.toolbar label { margin: 0; }
.toolbar label span { display: block; }
[hidden] { display: none !important; }
@media (max-width: 480px) { main { margin-top: 20px; } .card { padding: 16px; } nav { gap: 8px 16px; } }