:root {
  --yellow: #f4de0d;
  --brown: #361c1d;
  --red: #d7171f;

  --bg: #ffffff;
  --surface: #ffffff;
  --glass: rgba(255, 255, 255, 0.86);
  --text: var(--brown);
  --text-muted: #6a5a5b;
  --text-subtle: rgba(54, 28, 29, 0.66);
  --line: #e3d7cf;
  --line-strong: rgba(54, 28, 29, 0.22);
  --hover: rgba(54, 28, 29, 0.05);
  --selected: rgba(54, 28, 29, 0.1);
  --accent: var(--red);
  --current: rgba(54, 28, 29, 0.18);
  --focus: var(--red);

  --nlink-blue: #316fe8;
  --nlink-yellow: #fec751;
  --nlink-lilac: #e6e6fa;

  --games-accent: #c98a00;

  --mine-sky: #fed647;
  --mine-well: #8c6a4c;
  --mine-ink: #3a2616;
  --mine-ink-dim: #5e4530;

  --tile-closed: url("/minesweeper/img/tiles/espresso/closed.png");
  --tile-open: url("/minesweeper/img/tiles/espresso/open.png");
  --tile-flagged: url("/minesweeper/img/tiles/espresso/flagged.png");
  --tile-mine: url("/minesweeper/img/tiles/espresso/mine.png");
  --tile-exploded: url("/minesweeper/img/tiles/espresso/exploded.png");
  --tile-1: url("/minesweeper/img/tiles/espresso/01.png");
  --tile-2: url("/minesweeper/img/tiles/espresso/02.png");
  --tile-3: url("/minesweeper/img/tiles/espresso/03.png");
  --tile-4: url("/minesweeper/img/tiles/espresso/04.png");
  --tile-5: url("/minesweeper/img/tiles/espresso/05.png");
  --tile-6: url("/minesweeper/img/tiles/espresso/06.png");
  --tile-7: url("/minesweeper/img/tiles/espresso/07.png");
  --tile-8: url("/minesweeper/img/tiles/espresso/08.png");
  --mine-bg: url("/minesweeper/img/bg-espresso.jpg");

  --measure: 36rem;

  --font-ui: "SUIT Variable", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --header-h: 64px;
  --gutter: clamp(16px, 4vw, 40px);
}

[lang="ja"] { --font-ui: "Noto Sans JP", "Hiragino Sans", "Yu Gothic UI", "Meiryo", "SUIT Variable", system-ui, sans-serif; }
[lang="zh-Hans"] { --font-ui: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "SUIT Variable", system-ui, sans-serif; }

@media (max-width: 767px) {
  :root { --header-h: 56px; }
}

njon-header {
  display: block;
  position: sticky;
  top: 0;
  z-index: 1000;
  height: var(--header-h);
}
njon-footer { display: block; min-height: 176px; }
@media (max-width: 767px) { njon-footer { min-height: 252px; } }
njon-toc, njon-notice { position: fixed; }

main, main * { scroll-margin-top: calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}