@font-face {
  font-family: 'Manrope';
  src: url('../fonts/Manrope.ttf') format('truetype');
  font-weight: 200 800;
  font-display: block;
}
:root, [data-theme="light"] {
  --bg: #fbfaf7;
  --ink: #101317;
  --muted: #3a4250;
  --line: #b9bec6;
  --panel: #efede6;
  --soft: #e3e0d6;
  --accent: #c2410c;
  --accent-ink: #ffffff;
  --accent-soft: #fbe3d4;
  --accent2: #0b5c8c;
  --accent2-soft: #d8e9f5;
  --good: #17703a;
  --good-soft: #d9f0e0;
  --bad: #b42318;
  --bad-soft: #fbe1de;
  --land: #ece3cc;
  --land-edge: #c9b994;
  --water: #5e9fd1;
  --water-edge: #2f6f9f;
  --bridge: #5b3a1e;
  --paper: #ffffff;
  --paper-line: #c7d8ea;
}
[data-theme="dark"] {
  --bg: #0c1016;
  --ink: #f5f2ea;
  --muted: #cfd5dd;
  --line: #4a5361;
  --panel: #19202a;
  --soft: #252d39;
  --accent: #ffb020;
  --accent-ink: #14100a;
  --accent-soft: #3d2d0c;
  --accent2: #6cc4ff;
  --accent2-soft: #12324a;
  --good: #5ad38a;
  --good-soft: #123522;
  --bad: #ff6b5b;
  --bad-soft: #3d1714;
  --land: #2a3340;
  --land-edge: #475468;
  --water: #1d5d91;
  --water-edge: #3f8bc9;
  --bridge: #e8b86e;
  --paper: #f6f3ea;
  --paper-line: #b9cde0;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }