/* 风格规范板の値。色・字体・角丸・影はここだけ。ほかの CSS は変数だけを使う。 */
:root {
  --bg: #F6F1E7;
  --card: #FFFCF5;
  --white: #FFFFFF;
  --pip: #111111;
  --lvl-ink: #5C5248;
  --ink: #1E1A16;
  --body: #3B342D;
  --muted: #7A6E62;
  --note: #5C5248;
  /* 配色 ②「和紙と朱」（2026-11-12 站長「先改」）。強調は朱、盤は日本で見慣れた鮮やかな緑 */
  --accent: #D2462B;
  --accent-deep: #A9361F;
  --footer-bg: #1E1A16;
  /* 盤面は日本で見慣れた正の緑（2026-11-12 站長「換成 B」。第 1 位 yuki-lab の盤面 #00A000 と同じ） */
  --felt-a: #00A000;
  --felt-b: #00A000;
  --board-edge: #1E1A16;
  --grid-line: rgb(0 0 0 / .42);
  --turn: #FBE7E0;
  --last: #FF5A3C;           /* 最後の一手。画面の説明文「赤い点」と対応（変えるなら modes.js の legend も）*/
  --line: #EFE8DA;
  --rule: #E2D8C6;           /* 本文の区切り線（FAQ など）。--line より一段濃い */
  --lv0: #FFFFFF;
  --lv1: #DCD6CC;
  --lv2: #9A9086;
  --lv3: #4F4740;
  --lv4: #1E1A16;
  --footer: #E9E1D3;
  --footer-note: #A39684;
  --soft: #F2B7A8;
  --faint: #A39684;
  --font: "Zen Kaku Gothic New", sans-serif;
  /* 站名だけ丸ゴシック（ロゴ A 案、2026-11-13 站長「用 A 吧」） */
  --font-brand: "Zen Maru Gothic", "Zen Kaku Gothic New", sans-serif;
  --num: "Space Grotesk", sans-serif;
  --shadow-card: 0 12px 30px -18px rgb(0 0 0 / .35);
  --shadow-board: 0 40px 80px -30px rgb(0 0 0 / .6);
  --shadow-board-m: 0 20px 40px -20px rgb(0 0 0 / .6);
  --shadow-btn: 0 10px 24px -8px rgb(210 70 43 / .45);
  --shadow-panel: 0 30px 60px -20px rgb(0 0 0 / .55);
  --shadow-stone-b: 0 3px 5px rgb(0 0 0 / .45);
  --shadow-stone-w: 0 3px 5px rgb(0 0 0 / .35);
  --shadow-stone-b-m: 0 2px 3px rgb(0 0 0 / .45);
  --shadow-stone-w-m: 0 2px 3px rgb(0 0 0 / .35);
  --stone-b: radial-gradient(circle at 34% 28%, #4a4d52, #0d0e10 66%);
  --stone-w: radial-gradient(circle at 34% 28%, #ffffff, #e4e6e1 70%);
  --radius-card: 20px;
  --radius-panel: 24px;
  --radius-board: 28px;
  --radius-pill: 999px;
  --cell: min(76px, calc((100vw - 76px) / 8));
  --frame: 8px;
  --coord: calc(var(--cell) / 3);
  --board-size: calc(var(--cell) * 8 + (var(--frame) + var(--coord)) * 2);
  --coord-ink: rgb(255 255 255 / .5);
  --dot: rgb(255 255 255 / .4);
  --overlay: rgb(255 252 245 / .97);
  --overlay-result: rgb(255 252 245 / .97);
}
@media (max-width: 767px) {
  :root {
    --cell: min(76px, calc((100vw - 76px) / 8));
    --frame: 6px;
    --coord: 16px;
  }
}