/* 街そだて 50 年 (/game/)。読み込むのは game.ejs だけ (extraHead)。規則は全部 .game の中に閉じる (サイトの他の面に効かせない)。
   要素の規則 (h2 / p / button …) は :where(.game) で詳細度を要素 1 つ分に保つ (部品の class の規則が勝つ)。
   見た目の様式 = A「設計者の製図台」: 紙 (生成り) の面・墨の枠・年の判の朱・型板に並ぶ道具・写真の上の模型の駒。
   ブラッシュアップ (W12): 読む順は 3 段 (今 / 勝負 / 様子)。方眼は測る所 (計器の帯・50 年の折れ線・盤面の額) だけで、字の下は無地の紙。
   線は 3 種 (墨の実線・年の判の二重枠・無効のボタンの点線)。色は 朱・墨・紙 + サイトの緑 (主ボタンと表示の切替の選択中だけ)。
   余白は 8 の倍数 (行の間 8・まとまりの間 16・カードの内側 16 / 1280 は 20)。
   色と字の大きさはサイトの変数 (assets/site.css の --bg --fg --accent --accent-fg --card --line --link --fs-h1〜--fs-sub) に乗る。
   ここで定義するのはゲームにしか無い色 (紙 / 罫 / 墨 / 朱 / 注意 / 良い / 図の 2 色 / 地形 / 盤面の絵) と、小さな字 12 px の 1 つだけ。
   ダークは [data-theme="dark"] が正 (base.ejs が localStorage の theme から付ける)・prefers-color-scheme は JS 無効の時の控え (中身は同じ)。
   字の大きさは 28 / 20 / 14 / 12 だけ (見出しの 16 は使わない)。字の色は本文の色と意味の色 (増える / 減る / 選択中・文の 良い = 青 / 損 = 赤・判の朱) だけ。
   字に影・グラデーション・ガラス風は使わない。影と 2〜3 階調は盤面の駒・カード・紋章・押せる型の縁だけ。 */
:root {
  --fs-game-small: .75rem;
  --warn: #9b3a2a; --ok: #2f6b3a;
  /* 文の中の 良い所 = 青 (紙の上で 8.3 : 1・リンクの青より濃い・下線なしの太さ 600 でリンクと分ける)・損 = --warn の赤。
     判の字 = 朱を濃くした --stamp-ink (紙の上で 5.1 : 1・枠は --stamp のまま) */
  --good: #21497a; --stamp-ink: #b0462e;
  /* 製図台: 紙 / 型板 / 罫 / 墨 / 朱 (墨と朱は線と紋章だけ・字には使わない) */
  --paper: #f8f4ea; --paper-2: #efe8d8; --plate: var(--paper-2);
  /* 罫と方眼は墨の濃淡 (青は使わない)。方眼は前の版の地との差の半分 */
  --rule: rgba(58, 68, 72, .32); --rule-soft: rgba(58, 68, 72, .05); --rule-mid: rgba(58, 68, 72, .2);
  --ink: #3a4448; --ink-soft: rgba(58, 68, 72, .45); --stamp: #c4553c;
  --edge: rgba(40, 46, 50, .28); --accent-edge: #2a4127;
  /* 地形と用途の薄色 (升の下地・不透明度 .35) */
  --t-sea: #2f7fc1; --t-water: #4aa3d8; --t-rice: #9ccc3c; --t-field: #c9a24a; --t-forest: #2e8b3e;
  --t-waste: #9a9a92; --t-town: #c49a6c; --t-road: #7c7f7a; --t-park: #4fb35a; --t-hill: #5a4a2a;
  /* 写真の上の物 (テーマで変えない) = 方眼の線 / 選択の印 / 届く範囲の下地 */
  --board-grid: rgba(222, 236, 248, .62); --focus: #ffd34d; --reach-under: rgba(250, 247, 238, .85);
  /* 重ね「おすすめ」の緑 (写真の上なのでライト / ダークで同じ) */
  --c-gain: #3f9e48;
  /* あなた = 朱・現実 = 墨 */
  --chart-me: var(--stamp); --chart-real: var(--ink);
  /* 案内の吹き出し = 紙の付箋 */
  --guide-bg: var(--paper); --guide-fg: var(--fg); --guide-line: var(--ink);
  /* 余白と角丸と線 (5 面で同じ値) */
  --r: 6px; --r-s: 5px; --gap: 10px; --bw: 1px;
  /* 画面の小さな絵 (道具のピクトグラム・取り消す / 遊び方 / ヒント) = 墨の線 + 2 階調 (ダークで変える) */
  --c-ink: #2f3a40; --c-pad: #fbf8f1;
  --ic-house-a: #f7dfd2; --ic-house-b: #e2a68c; --ic-tower-a: #e4ebf1; --ic-tower-b: #a9bccb;
  --ic-shop-a: #f7ecc9; --ic-shop-b: #e3c172; --ic-factory-a: #e6e9e7; --ic-factory-b: #b3bcbb;
  --ic-park-a: #ddedc9; --ic-park-b: #9cc37b; --ic-road-a: #f1ede3; --ic-road-b: #b8b2a6;
  --ic-reclaim-a: #f1e5c6; --ic-reclaim-b: #a6c9e2; --ic-grade-a: #efdfbd; --ic-grade-b: #cdae80;
  --ic-demolish-a: #f0e1d9; --ic-demolish-b: #c79f8f; --ic-hint-a: #fbeab0; --ic-hint-b: #fffaf0;
  /* 紋章 (称号 / 波) の紙と朱 */
  --em-paper: #fbf7ee; --em-stamp: #c4553c; --em-stamp-2: #f1c9bb;
  /* 盤面の駒 (art.svg v4) の色。空中写真の上の模型なのでライト / ダークで同じ。 */
  --k-ink: #2b2724; --k-shade: #1d1914;
  --k-lot: #efe6d1; --k-lot-2: #d8ccb1;
  --k-wall-1: #fbf7ee; --k-wall-2: #ece3cf; --k-wall-3: #cbbd9f; --k-door: #8a6a4c;
  --k-glass: #b7d0e1; --k-glass-2: #7f9db3;
  /* 屋根 3 色は彩度を 15 % 上げた (淡い範囲のまま) */
  --k-roof-r1: #f5ae8f; --k-roof-r2: #dc7f56; --k-roof-r3: #b05d43;
  --k-roof-s1: #bacad7; --k-roof-s2: #8ea5b8; --k-roof-s3: #6a8196;
  --k-roof-o1: #eed794; --k-roof-o2: #d2b161; --k-roof-o3: #a58949;
  --k-awn-1: #e39a83; --k-awn-2: #8db0cb; --k-awn-3: #e5c46c;
  --k-metal-1: #e6e9e5; --k-metal-2: #bcc3c1; --k-metal-3: #8e9898;
  --k-brick-1: #d99c80; --k-brick-2: #b5715a;
  --k-leaf-1: #bcd994; --k-leaf-2: #86b36a; --k-leaf-3: #5a894b; --k-trunk: #8a6a4c;
  --k-lawn-1: #d3e6b2; --k-lawn-2: #abcd8a; --k-lawn-3: #85ab68;
  --k-water-1: #d6e9f5; --k-water-2: #9ec8e3;
  --k-soil-1: #ecd9b2; --k-soil-2: #d5ba8b; --k-soil-3: #b19364;
  --k-conc-1: #e6e3da; --k-conc-2: #c4c0b4; --k-conc-3: #9c988d;
  --k-asph: #8d8981; --k-curb: #efe8d6; --k-lane: #fbf7ee; --k-rail: #6d665d;
  --k-stamp: #c4553c; --k-stamp-2: #f0c4b4; --k-caution: #e8b843; --k-caution-2: #c19226;
  /* 地形の模様の色 (v3 のまま) */
  --c-t-rice: #d4e6ad; --c-t-field: #ecd593; --c-t-forest: #b5d6a6; --c-t-waste: #dcd8cf;
  --c-t-hill: #e8cdab; --c-t-water: #b9d7ee; --c-t-town: #ebe5d9;
}
/* ダークの正 (下の prefers-color-scheme の控えと同じ中身を保つ) = 夜の製図台 */
[data-theme="dark"] {
  --warn: #e88a78; --ok: #8fd09a; --good: #9cc3ef; --stamp-ink: #e0866f;
  --paper: #1c1f19; --paper-2: #23271f; --plate: var(--paper-2);
  --rule: rgba(166, 180, 186, .32); --rule-soft: rgba(166, 180, 186, .045); --rule-mid: rgba(166, 180, 186, .2);
  --ink: #a6b4ba; --ink-soft: rgba(166, 180, 186, .4); --stamp: #e0866f;
  --edge: rgba(0, 0, 0, .55); --accent-edge: #5d7558;
  --chart-me: var(--stamp); --chart-real: var(--ink);
  --guide-bg: var(--paper); --guide-fg: var(--fg); --guide-line: var(--ink);
  --c-ink: #e6e9e2; --c-pad: #2a3029;
  --ic-house-a: #4a3a33; --ic-house-b: #7d5545; --ic-tower-a: #33404a; --ic-tower-b: #566b7b;
  --ic-shop-a: #4a4230; --ic-shop-b: #806c3c; --ic-factory-a: #3a4140; --ic-factory-b: #5e6867;
  --ic-park-a: #33452b; --ic-park-b: #557b44; --ic-road-a: #3b3933; --ic-road-b: #5f5b53;
  --ic-reclaim-a: #4a4332; --ic-reclaim-b: #3d5f78; --ic-grade-a: #4a3f2c; --ic-grade-b: #76603e;
  --ic-demolish-a: #47362f; --ic-demolish-b: #745446; --ic-hint-a: #6b5a23; --ic-hint-b: #a08b40;
  --em-paper: #23271f; --em-stamp: #e0866f; --em-stamp-2: #5a3329;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --warn: #e88a78; --ok: #8fd09a; --good: #9cc3ef; --stamp-ink: #e0866f;
    --paper: #1c1f19; --paper-2: #23271f; --plate: var(--paper-2);
    --rule: rgba(166, 180, 186, .32); --rule-soft: rgba(166, 180, 186, .045); --rule-mid: rgba(166, 180, 186, .2);
    --ink: #a6b4ba; --ink-soft: rgba(166, 180, 186, .4); --stamp: #e0866f;
    --edge: rgba(0, 0, 0, .55); --accent-edge: #5d7558;
    --chart-me: var(--stamp); --chart-real: var(--ink);
    --guide-bg: var(--paper); --guide-fg: var(--fg); --guide-line: var(--ink);
    --c-ink: #e6e9e2; --c-pad: #2a3029;
    --ic-house-a: #4a3a33; --ic-house-b: #7d5545; --ic-tower-a: #33404a; --ic-tower-b: #566b7b;
    --ic-shop-a: #4a4230; --ic-shop-b: #806c3c; --ic-factory-a: #3a4140; --ic-factory-b: #5e6867;
    --ic-park-a: #33452b; --ic-park-b: #557b44; --ic-road-a: #3b3933; --ic-road-b: #5f5b53;
    --ic-reclaim-a: #4a4332; --ic-reclaim-b: #3d5f78; --ic-grade-a: #4a3f2c; --ic-grade-b: #76603e;
    --ic-demolish-a: #47362f; --ic-demolish-b: #745446; --ic-hint-a: #6b5a23; --ic-hint-b: #a08b40;
    --em-paper: #23271f; --em-stamp: #e0866f; --em-stamp-2: #5a3329;
  }
}

/* ---------- 字と部品の土台 ---------- */
/* 行頭の「ー」と小書きの仮名を禁じる (line-break: strict)。数字の後ろなどの空白は game.js が text.js の glue で改行しない空白にする */
.game { position: relative; line-height: 1.6; padding-bottom: 8px; font-variant-numeric: tabular-nums; -webkit-font-smoothing: auto; line-break: strict; }
:where(.game) h2 { font-size: var(--fs-h2); line-height: 1.4; margin: 0 0 4px; border-left: 0; padding-left: 0; letter-spacing: .02em; }
/* 小見出しは 14 の太字 + 製図の菱形の印 + 墨の淡い罫 1 本 (16 は使わない) */
:where(.game) h3 { display: flex; align-items: center; gap: 7px; font-size: var(--fs-sub); font-weight: 600; letter-spacing: .06em;
  margin: 0 0 8px; padding-bottom: 4px; border-bottom: var(--bw) solid var(--rule); }
:where(.game) h3::before { content: ""; flex: none; width: 6px; height: 6px; border: 1.5px solid var(--stamp); transform: rotate(45deg); }
:where(.game) p { margin: 0 0 8px; }
:where(.game) strong { font-weight: 600; }
:where(.game) .fine { font-size: var(--fs-game-small); color: var(--fg); }
/* 押せる物 = 紙の型 + 墨の枠 + 下の縁 (押すと沈む) */
:where(.game) button { font: inherit; font-size: var(--fs-sub); font-weight: 600; color: var(--fg); background: var(--paper);
  border: var(--bw) solid var(--ink); border-radius: var(--r-s); padding: 8px 14px; cursor: pointer; min-height: 40px; line-height: 1.4;
  box-shadow: 0 2px 0 var(--ink); transition: transform .14s cubic-bezier(.3, .7, .4, 1), box-shadow .14s cubic-bezier(.3, .7, .4, 1), background-color .2s ease-out; }
:where(.game) button:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 0 0 var(--ink); }
/* 無効なボタンは字を薄くせず、枠を点線にして表す (灰の字は使わない・縁も消す) */
:where(.game) button:disabled { cursor: default; border-style: dashed; background: var(--bg); box-shadow: none; }
/* 主ボタン = サイトの緑 + 濃い縁 (二重の枠は年の判だけなので付けない) */
:where(.game) button.primary { background: var(--accent); color: var(--accent-fg); border-color: var(--accent-edge); box-shadow: 0 3px 0 var(--accent-edge); }
:where(.game) button.primary:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 0 0 var(--accent-edge); }
/* 無効の主ボタンは緑の地を使わない = 地は面の地 + 点線の枠 + 本文の字 (button.primary より後に置き、地も上書きする) */
:where(.game) button.primary:disabled { color: var(--fg); background: var(--bg); border-color: var(--fg); border-style: dashed; box-shadow: none; }
:where(.game) button:focus-visible, :where(.game) [role="button"]:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
/* 面を移るリンク (結果の「もう一度」・状態の無い面の「最初から遊ぶ」) = 右クリックや中クリックが効くよう <a> で書き、見た目はボタンと同じ */
:where(.game) a.btn { display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-sub); font-weight: 600; color: var(--fg); background: var(--paper);
  border: var(--bw) solid var(--ink); border-radius: var(--r-s); padding: 8px 14px; min-height: 40px; line-height: 1.4; text-decoration: none;
  box-shadow: 0 2px 0 var(--ink); transition: transform .14s cubic-bezier(.3, .7, .4, 1), box-shadow .14s cubic-bezier(.3, .7, .4, 1), background-color .2s ease-out; }
:where(.game) a.btn:active { transform: translateY(2px); box-shadow: 0 0 0 var(--ink); }
:where(.game) a.btn.primary { background: var(--accent); color: var(--accent-fg); border-color: var(--accent-edge); box-shadow: 0 3px 0 var(--accent-edge); }
:where(.game) a.btn.primary:active { transform: translateY(3px); box-shadow: 0 0 0 var(--accent-edge); }
:where(.game) a.btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.game .defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.game-note { font-weight: 600; }
.game-source { font-size: var(--fs-game-small); color: var(--fg); margin: 16px 0 0; padding-top: 10px; border-top: var(--bw) solid var(--line); }
/* 紙の面 = カード・手番の計画書・結果の表紙に共通。字の下は無地 (方眼は測る所だけ = 計器の帯・50 年の折れ線・盤面の額) */
.card, #s-turn .t-top, .start-body, #s-result { background-color: var(--paper); }
/* 方眼 8 px (測る所に敷く) */
.game { --grid-8: linear-gradient(var(--rule-soft) 1px, transparent 1px), linear-gradient(90deg, var(--rule-soft) 1px, transparent 1px); }
.card { border: var(--bw) solid var(--ink); border-radius: var(--r); padding: 16px; margin-bottom: 8px; box-shadow: 0 2px 0 var(--ink-soft); }

/* ---------- 最上段 (パンくず + 遊び方 / 音) と題 ---------- */
.bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 8px 0 0; }
.bar .breadcrumb { margin: 0; min-width: 0; }
.game-title { margin: 0 0 16px; padding-bottom: 8px; border-bottom: 2px solid var(--ink); letter-spacing: .04em; }
.bar-btns { display: flex; gap: 6px; flex: none; }
.game .small-btn { white-space: nowrap; min-height: 32px; padding: 4px 10px; font-size: var(--fs-game-small); font-weight: 600; display: inline-flex; align-items: center; gap: 5px; box-shadow: 0 1.5px 0 var(--ink); }
.small-btn .ico { width: 18px; height: 18px; }
.game .sound { min-height: 32px; padding: 4px 10px; font-size: var(--fs-game-small); font-weight: 600; }
.sound[aria-pressed="false"] { color: var(--fg); box-shadow: none; }

#app { position: relative; }
.load-error { color: var(--warn); font-weight: 600; }
.load-error code { font: inherit; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.actions .primary { flex: 1; }
/* 面が開く時は紙をめくるように (位置は動かさず、濃さだけ・案内の吹き出しの位置の計算を狂わせない) */
.face:not([hidden]) { animation: face-in .32s cubic-bezier(.2, .8, .2, 1); }
@keyframes face-in { from { opacity: 0; } to { opacity: 1; } }

/* ---------- はじめの面 ---------- */
/* 写真 = 製図台に貼った写真 (紙の台紙 + 墨の枠 + 角の留め紙) */
.start-photo { position: relative; padding: 6px; background: var(--paper); border: var(--bw) solid var(--ink); border-radius: 3px;
  box-shadow: 0 2px 0 var(--ink-soft), 0 14px 24px -18px var(--edge); }
.start-photo::before, .start-photo::after { content: ""; position: absolute; width: 46px; height: 14px; background: var(--paper-2);
  border: var(--bw) solid var(--rule-mid); opacity: .92; z-index: 1; }
.start-photo::before { left: -12px; top: 6px; transform: rotate(-38deg); }
.start-photo::after { right: -12px; bottom: 6px; transform: rotate(-38deg); }
.start-photo img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 1px; }
.start-body { margin-top: 16px; padding: 16px; border: var(--bw) solid var(--ink); border-radius: var(--r); box-shadow: 0 2px 0 var(--ink-soft); }
.start-body .primary { width: 100%; margin-top: 8px; min-height: 48px; font-size: var(--fs-sub); letter-spacing: .08em; }
/* きょうの街 = 判を押した札 */
.start-place { display: inline-block; font-weight: 600; padding: 2px 10px; margin: 0 0 8px; border: 2px solid var(--stamp); border-radius: 3px;
  transform: rotate(-1.2deg); transform-origin: left center; }
.start-place:empty { display: none; }
.goal-line { font-weight: 600; padding: 6px 0 6px 12px; border-left: 3px solid var(--stamp); background: var(--paper-2); }
/* 3 ステップ = 照合番号の丸 + 図 + 説明 (行は罫の実線で区切る・主ボタンとの間は 8 + 8 = 16) */
.steps { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 0; border-top: var(--bw) solid var(--ink); }
.steps li { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: var(--bw) solid var(--rule); }
.steps .snum { flex: none; width: 24px; height: 24px; display: grid; place-items: center; font-size: var(--fs-game-small); font-weight: 700;
  color: var(--fg); border: 1.5px solid var(--ink); border-radius: 50%; background: var(--paper); }
.steps svg { width: 88px; height: 30px; flex: none; }
.steps svg text { font-size: var(--fs-game-small); fill: var(--fg); font-weight: 600; }
.steps .bar-me { fill: var(--chart-me); stroke: var(--ink); stroke-width: 1; } .steps .bar-real { fill: url(#pt-real) var(--chart-real); stroke: var(--ink); stroke-width: 1; }
.steps .s-arrow { stroke: var(--ink); stroke-width: 1.2; fill: none; }
.help .steps li { background: transparent; }

/* ---------- 盤面 (写真を製図台に貼り、上に方眼の線と模型の駒) ---------- */
.board-wrap { position: relative; width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: 3px;
  box-shadow: 0 0 0 var(--bw) var(--ink), 0 14px 22px -16px var(--edge); }
/* 手番と答え合わせの盤面 = 方眼の額 8 px (写真の幅は前と同じ = 額は外へ 8 px はみ出す) + 写真の縁に墨の線 1 本 */
.turn .board-wrap { --mat: 8px; width: calc(100% + 2 * var(--mat)); margin: 0 calc(-1 * var(--mat)); border: var(--mat) solid transparent; border-radius: 4px;
  background-color: var(--paper); background-image: var(--grid-8); background-size: 8px 8px; background-origin: border-box; }
.turn .board-wrap::after { content: ""; position: absolute; inset: 0; border: var(--bw) solid var(--ink); pointer-events: none; z-index: 1; }
.turn .floats { top: 8px; }
.board { display: block; width: 100%; height: 100%; touch-action: none; user-select: none; -webkit-user-select: none;
  border-radius: 3px; background: var(--card); }
.board .photo { transition: opacity .8s cubic-bezier(.4, 0, .2, 1); pointer-events: none; -webkit-user-drag: none; }
.board .gridline { stroke: var(--board-grid); stroke-width: .018; }
.board .cell rect.tint { opacity: .35; }
.board .cell .hill { fill: url(#hatch); opacity: .5; pointer-events: none; }
.board .cell use { pointer-events: none; transition: opacity .3s cubic-bezier(.4, 0, .2, 1); }
.board .cell.dim use { opacity: .25; }
.board .cell.lit use { opacity: 1; }
.board .cell:focus { outline: none; }
/* 選択の印 = 角のトンボ (四隅だけの線・トンボはここだけ・太さ 1 段上)。マウスの下見の升 (.peek = rect.hit と同じ寸法) も同じ印 */
.board .cell:focus-visible rect.hit, .board .peek { stroke: var(--focus); stroke-width: .11; stroke-dasharray: .3 .62; stroke-dashoffset: .15; }
.board rect.hit { fill: transparent; }
/* 今の道具を置けないマス = 斜線の薄い帳 (どのマスかは game.js の paintNogo が engine の canPlace で決める) */
.board .nogo { fill: url(#pt-nogo); pointer-events: none; }
.board:not(.play) .nogo { display: none; }
.board.hide-mine .mine { opacity: 0; }
.board.hide-mine rect.tint, .board.hide-mine .cell .hill { opacity: 0; }
.board .real-tint { opacity: .55; }
.board.final rect.tint, .board.final .cell .hill { opacity: 0; }
.board .cell.shake { animation: shake .32s cubic-bezier(.36, .07, .19, .97); transform-box: fill-box; transform-origin: center; }
@keyframes shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-.09px); } 40% { transform: translateX(.08px); } 60% { transform: translateX(-.05px); } 80% { transform: translateX(.03px); } }
/* 置いた時 = 駒が上から降りて少し弾み、紙の上に輪が広がる (余韻) */
.board .cell.drop use.mine { animation: drop .44s cubic-bezier(.2, .9, .25, 1.25) both; transform-box: fill-box; transform-origin: 50% 85%; }
@keyframes drop { 0% { transform: translateY(-.32px) scale(1.08); opacity: 0; } 45% { opacity: 1; } 100% { transform: none; opacity: 1; } }
.board .place-ring { fill: none; stroke: var(--focus); stroke-width: .05; pointer-events: none; transform-box: fill-box; transform-origin: center;
  animation: ring .56s cubic-bezier(.2, .7, .3, 1) forwards; }
@keyframes ring { from { transform: scale(.86); opacity: .95; } to { transform: scale(1.3); opacity: 0; } }
/* 取り消した時 = 駒が持ち上がって消える */
.board .lift { pointer-events: none; transform-box: fill-box; transform-origin: 50% 85%; animation: lift .3s cubic-bezier(.5, 0, .75, 0) forwards; }
@keyframes lift { from { transform: none; opacity: 1; } to { transform: translateY(-.28px) scale(1.06); opacity: 0; } }
/* 答え合わせで住まいが灯る時の小さな弾み */
.review .board .cell.lit use.mine { animation: lit-pop .34s cubic-bezier(.3, 1.5, .5, 1); transform-box: fill-box; transform-origin: 50% 85%; }
@keyframes lit-pop { from { transform: scale(.9); } to { transform: none; } }
.hatch-line { stroke: var(--t-hill); stroke-width: .05; }
.photo-label { margin-top: 4px; }

.t-sea { fill: var(--t-sea); } .t-water { fill: var(--t-water); } .t-rice { fill: var(--t-rice); }
.t-field { fill: var(--t-field); } .t-forest { fill: var(--t-forest); } .t-waste { fill: var(--t-waste); }
.t-town { fill: var(--t-town); } .t-road { fill: var(--t-road); } .t-park { fill: var(--t-park); }
.t-none { fill: transparent; }

/* 道路 = 墨の縁 + 縁石 + 舗装 + 中央の破線 (隣とつながる帯) */
.board .road-ink { stroke: var(--k-ink); stroke-width: .54; fill: none; stroke-linecap: butt; }
.board .road-ink-cap { stroke: var(--k-ink); stroke-width: .54; fill: none; stroke-linecap: round; }
.board .road-edge { stroke: var(--k-curb); stroke-width: .5; fill: none; stroke-linecap: butt; }
.board .road-edge-cap { stroke: var(--k-curb); stroke-width: .5; fill: none; stroke-linecap: round; }
.board .road-body { stroke: var(--k-asph); stroke-width: .4; fill: none; stroke-linecap: butt; }
.board .road-cap { stroke: var(--k-asph); stroke-width: .4; fill: none; stroke-linecap: round; }
.board .road-lane { stroke: var(--k-lane); stroke-width: .035; fill: none; stroke-dasharray: .12 .1; }
.board.hide-mine .roads { opacity: 0; }
/* 絵が読めた時は、地形を色の面でなく模様で描く。常時の印: 丘と森は墨の細い線だけ (濃さは art.svg の線・面は 1)・川と海・街は淡い色 + 墨の縁・平地の田・畑・荒地は .3 */
.art .board .cell rect.tint.t-rice { fill: url(#pt-rice); opacity: .3; }
.art .board .cell rect.tint.t-field { fill: url(#pt-field); opacity: .3; }
.art .board .cell rect.tint.t-forest { fill: url(#pt-forest); opacity: 1; }
.art .board .cell rect.tint.t-waste { fill: url(#pt-waste); opacity: .3; }
.art .board .cell rect.tint.t-water, .art .board .cell rect.tint.t-sea { fill: url(#pt-water); opacity: .5; }
.art .board .cell rect.tint.t-town { fill: url(#pt-town); opacity: .35; }
.art .board .cell rect.tint.t-road { fill: none; }
.art .board .cell .hill { fill: url(#pt-hill); opacity: 1; }

/* 重ね: 常時の印 = 丘・川と海・森・1976 年の住宅 (建物の無い town の升) = 印の無いマスが平地。
   平地の田・畑・荒地の模様と、置いた建物の下の地の模様は「地形」の時と、団地 / 造成 / 埋め立てを選んだ時だけ */
.board:not(.show-terrain) .cell rect.tint:not(.t-water):not(.t-sea):not(.t-forest):not(.t-town), .board:not(.show-terrain) .cell rect.tint.built { visibility: hidden; }
/* ヒントと初回の染め = 淡い緑の塗り 3 段 (濃さの差だけ・線なし・写真が透ける)。盤面の斜線は「今の道具を置けない所」の 1 種だけにする */
.gain { fill: var(--c-gain); }
.gain.g1 { opacity: .22; } .gain.g2 { opacity: .36; } .gain.g3 { opacity: .5; }
.board .gains .gain { animation: gain-in .4s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes gain-in { from { opacity: 0; } }
.board.hide-mine .gains, .board.final .gains { display: none; }
#s-turn:not(.hint-on) .gains, #s-turn:not(.hint-on) .lg-gain { display: none; }
/* 届く範囲 = 計画区域の境界の実線 (サイトの緑・下に紙の色の縁) */
.reach-under { fill: none; stroke: var(--reach-under); stroke-width: .13; stroke-linecap: square; }
.reach-line { fill: none; stroke: var(--accent); stroke-width: .06; stroke-linecap: square; }
.board.hide-mine .reach, .board.final .reach { display: none; }
/* 道につながっていない建物の印 (絵が無い時の丸) */
.unlinked-dot { fill: var(--warn); stroke: var(--bg); stroke-width: .04; }
.board.hide-mine .marks, .board.final .marks { display: none; }
/* 升に乗せて止まった時の下見 (マウスだけ・game.js の HOVER_MS の後) = 半透明の駒 + 四隅のトンボ */
.board .ghost { opacity: .55; pointer-events: none; }
.board .peek { fill: none; pointer-events: none; }
/* 案内の目印 = 実線の枠が脈打つ (トンボは選択中のマスだけ) */
.pulse-cell { fill: none; stroke: var(--focus); stroke-width: .09; pointer-events: none;
  transform-box: fill-box; transform-origin: center; animation: pulse 1.1s cubic-bezier(.45, 0, .55, 1) infinite alternate; }
@keyframes pulse { from { transform: scale(1.12); opacity: 1; } to { transform: scale(.96); opacity: .7; } }

/* ズームのボタン (盤面の右上・紙の小さな型) */
.zoom-ctl { position: absolute; top: 6px; right: 6px; z-index: 2; display: flex; flex-direction: column; gap: 5px; }
.game .zoom-ctl button { min-height: 32px; min-width: 40px; padding: 2px 6px; background: var(--paper); font-size: var(--fs-game-small); box-shadow: 0 1.5px 0 var(--ink); }
.game .zoom-ctl button:disabled { background: var(--paper); box-shadow: none; }
.zoom-ctl .zoom-full { display: none; }
@media (min-width: 960px) { .zoom-ctl .zoom-full { display: block; } }
.board.zoomed { cursor: grab; }
#game:fullscreen { background: var(--bg); overflow: auto; }

/* ---------- 手番の面: 計画書 (年の判・波の文・年表の縮尺・計器) ---------- */
#s-turn .t-top { border: var(--bw) solid var(--ink); border-radius: var(--r); padding: 16px; margin-bottom: 8px; box-shadow: 0 2px 0 var(--ink-soft); }
.card.wave { padding: 8px 16px; margin-bottom: 8px; }
#s-turn .t-top .card.wave { background: none; border: 0; border-radius: 0; padding: 0; margin: 0; box-shadow: none; }
.wave p { margin: 0; line-height: 1.5; }
/* (a) 今の段の 1 行目 = 年の判 + 波の文 */
.wave .wave-line { display: grid; grid-template-columns: auto 1fr; column-gap: 16px; align-items: center; font-size: var(--fs-body); font-weight: 400; }
.wave-sep { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* 年と波の見出し = 判 (朱の二重の枠・少し傾ける) */
.wave .wave-head { display: inline-grid; grid-template-columns: auto auto; align-items: baseline; justify-content: center; column-gap: 2px;
  padding: 3px 8px 4px; border: 2px solid var(--stamp); border-radius: 4px; box-shadow: inset 0 0 0 2px var(--paper), inset 0 0 0 3px var(--stamp);
  font-size: var(--fs-game-small); font-weight: 600; line-height: 1.2; text-align: center; transform: rotate(-2deg); background: var(--paper); color: var(--stamp-ink); }
.wave .wave-head #turn-year { font-size: var(--fs-h2); font-weight: 700; letter-spacing: .02em; }
.wave .wave-head #wave-short { grid-column: 1 / -1; }
.wave .wave-head #wave-short:empty { display: none; }
#s-turn .wave-head.stamp-in { animation: stamp-in .42s cubic-bezier(.2, 1.3, .4, 1) both; }
@keyframes stamp-in { from { transform: rotate(-9deg) scale(1.35); opacity: 0; } to { transform: rotate(-2deg); opacity: 1; } }
/* 波の続き (#wave-more) = 年表の帯 → 理由の行 → 次の波の文。要素は 1 つで、game.js が置き場所だけ変える:
   1280 = 情報欄の年の判の直下 ((a) と (b) の間)・390 = 取り消す / 10 年進める の後の別のカード (下の帯の直下に来た時だけカードの形)。
   理由の行と次の波の文は本文の大きさ・枠も色の帯も付けない */
.wave-more { margin: 16px 0 0; }
#s-turn .t-bottom > .wave-more { margin: 8px 0 0; padding: 16px; border: var(--bw) solid var(--ink); border-radius: var(--r); background-color: var(--paper); box-shadow: 0 2px 0 var(--ink-soft); }
.wave-more p { margin: 8px 0 0; font-size: var(--fs-body); line-height: 1.5; color: var(--fg); }
/* 年表 = 縮尺の帯 1 本 (過ぎた波は墨・今の波は朱・先の波は罫の色・高さは前の 6 割)・字は 12 px */
.timeline { list-style: none; margin: 0; padding: 0; display: flex; gap: 2px; font-size: var(--fs-game-small); line-height: 1.5; }
.timeline li { position: relative; flex: 1; min-width: 0; text-align: center; white-space: nowrap; overflow: hidden; padding-top: 8px; }
.timeline li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--rule); border-radius: 1px; transition: background-color .5s ease-out; }
.timeline li.past::before { background: var(--ink); }
.timeline li.now::before { background: var(--stamp); }
.timeline li.now { font-weight: 600; }

/* (b) 勝負の段: 人口の計器 (帯の中に方眼・目盛り 4 本 = 20 % ごと)。2 本の印は太さと長さで分ける:
   現実 = 帯の上下に 4 px ずつ出る 2 px の線 + 帯の下の三角 (上の「お手本 N 人」の字の行に入れない)・お手本 = 帯の中だけの 1 px の線 */
.goal { margin: 16px 0 0; padding: 0; }
.goal-bar { position: relative; height: 16px; border: var(--bw) solid var(--ink); border-radius: 2px; overflow: visible;
  background-color: var(--paper); background-image: repeating-linear-gradient(90deg, transparent 0 calc(20% - 1px), var(--rule) calc(20% - 1px) 20%), var(--grid-8);
  background-size: 100% 100%, 8px 8px, 8px 8px; }
.goal-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--chart-me); border-right: var(--bw) solid var(--ink);
  transition: width .6s cubic-bezier(.2, .8, .2, 1); }
.goal-mark { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--chart-real); }
.goal-mark::before { content: ""; position: absolute; left: 50%; top: 100%; margin-left: -4px; border: 4px solid transparent; border-bottom-color: var(--chart-real); border-top-width: 0; }
/* 3 つの数字 (あなた / 現実 / 残り予算) だけ 20 px の等幅。名前と単位は 12 px。計器の読みのように 3 列 (名前の下に数字) */
.goal-nums { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; column-gap: 8px; margin: 8px 0 0; font-size: var(--fs-game-small); line-height: 1.3; color: var(--fg); }
.goal-nums > span { display: flex; flex-direction: column; white-space: nowrap; }
.goal-nums > span.g-budget { align-items: flex-end; }
.goal-nums strong { font-size: var(--fs-game-small); color: var(--fg); font-weight: 600; transition: color .5s ease-out; }
.goal-nums strong > span { font-size: var(--fs-h2); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.goal-nums .g-me strong { color: var(--fg); }
.goal-nums .g-me strong.bump-up { color: var(--ok); transition: none; }
.goal-nums .g-me strong.bump-down { color: var(--warn); transition: none; }
.goal-nums .short strong { color: var(--warn); }
/* 残り予算の小さな計器 (字の下の帯・字の行は増やさない) */
.goal-nums .g-budget { position: relative; }
.goal-nums .g-budget::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 3px; border-radius: 1px;
  background: linear-gradient(90deg, var(--ink) 0 calc(var(--budget-k, 1) * 100%), var(--rule-mid) calc(var(--budget-k, 1) * 100%) 100%); }
/* (c) 様子の段 = 暮らしやすさ / 仕事 / 道なし / 駅前 を本文の大きさで 1 行 (「 / 」区切り・箱にしない・幅が足りなければ区切りで折り返す) */
.goal-state { margin: 16px 0 0; font-size: var(--fs-body); line-height: 1.5; color: var(--fg); }
.goal-sat { margin: 0; white-space: nowrap; }
.goal-sat [data-k="sat"] { font-weight: 600; }
.goal-line { font-weight: 600; }
/* お手本の印 (帯の中だけの 1 px の線・本文の色) と字 (棒の上・端で切れないよう JS が内側に寄せる) */
.pace-row { position: relative; height: 16px; margin-bottom: 4px; font-size: var(--fs-game-small); line-height: 16px; }
.pace-row[hidden], .pace-mark[hidden] { display: none; }
.pace-label { position: absolute; top: 0; white-space: nowrap; color: var(--fg); }
.pace-mark { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--fg); }
/* 街の今 (様子の段の 2 つ目から・1 語の状態 + 数。満額は青・損は赤 = .tone-good / .tone-bad・駅前は定員以下なら墨) */
.city-now { margin: 0; }
.city-now:not([hidden])::before { content: "\00a0/ "; }
.city-now > span { white-space: nowrap; }
.city-now[hidden] { display: none; }
.city-now .num { font-weight: 600; }
.city-now .num.over { color: var(--warn); font-weight: 600; }

/* 表示の切替 = つながった 3 枚 + ヒントのボタン (情報欄の外 = 390 は道具の直後・1280 は盤面の下の 1 行) */
.ov-chips { display: flex; gap: 0; margin: 0 0 8px; }
#s-turn .t-bottom > .ov-chips { margin: 8px 0; } /* 390 = 道具の型板と道具の説明の行の間 (行の間 8) */
.game .ov-chips button { min-height: 30px; padding: 2px 10px; font-size: var(--fs-game-small); font-weight: 600; border-radius: 0; box-shadow: none; margin-left: -1px; }
.game .ov-chips button:first-child { border-radius: 4px 0 0 4px; margin-left: 0; }
.game .ov-chips button[data-ov="none"] { border-radius: 0 4px 4px 0; }
.ov-chips button[aria-pressed="true"] { background: var(--accent); color: var(--accent-fg); border-color: var(--accent-edge); position: relative; z-index: 1; }
.game .ov-chips .hint-btn { margin-left: 8px; border-radius: 4px; display: inline-flex; align-items: center; gap: 4px; padding-left: 6px; box-shadow: 0 1.5px 0 var(--ink); }
.game .ov-chips .hint-btn:disabled { box-shadow: none; }
.hint-btn .ico { width: 16px; height: 16px; flex: none; }
.board-foot .ov-chips { margin: 0 0 0 auto; }

/* 手番の下の帯 (道具と 2 つのボタン)。画面の下に固定しない = 流れの中 (下に出る広告に覆われ続けないため・DESIGN-prod §2) */
#s-turn .t-bottom { margin-top: 8px; }
#s-turn .t-bottom .actions { margin-top: 8px; }
#s-turn .t-bottom .actions button { min-height: 42px; padding: 4px 12px; }
/* 道具 = 型板 (紙の 2 段目の地・墨の枠 1 本) に並ぶ 9 つの型。選んだ型は朱の枠で浮く (影 1 つ) */
.tools { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; padding: 8px;
  background-color: var(--plate); border: var(--bw) solid var(--ink); border-radius: 8px; }
/* 1 行目に名前、2 行目に絵と費用 (390 の 1 枠 66 px に 4 字の名前が収まる形)。 */
.game .tool { display: grid; grid-template-columns: 28px 1fr; grid-template-areas: "n n" "i c"; align-items: center;
  column-gap: 3px; row-gap: 1px; padding: 3px 4px 4px; text-align: left; min-width: 0; min-height: 40px;
  font-size: var(--fs-game-small); font-weight: 600; line-height: 1.3; background: var(--paper); border-color: var(--ink); border-radius: 6px;
  box-shadow: 0 2px 0 var(--ink-soft); }
.tool svg { grid-area: i; width: 28px; height: 28px; }
.tool .tw { display: contents; }
.tool .tn { grid-area: n; white-space: nowrap; }
.tool .tc { grid-area: c; justify-self: end; color: var(--fg); white-space: nowrap; font-weight: 600; padding: 0 2px; line-height: 1.4; }
/* 選んだ型 = 朱の枠 (2 px) と影 1 つ */
.game .tool[aria-pressed="true"] { border-color: var(--stamp); box-shadow: inset 0 0 0 1px var(--stamp), 0 6px 10px -4px var(--edge); transform: translateY(-2px); }
.game .tool:active:not(:disabled) { transform: translateY(0); box-shadow: 0 0 0 var(--ink-soft); }
.tool.cant .tc { color: var(--warn); }
.tool.pulse { outline: 3px solid var(--focus); outline-offset: 1px; animation: pulse-ring 1s cubic-bezier(.45, 0, .55, 1) infinite alternate; }
/* 帯の上端の 1 行 = 選んだ道具の説明 (置けない時だけ 1.5 秒 理由に置き換わる)。 */
.reason { margin: 0 0 8px; min-height: 34px; font-size: var(--fs-game-small); line-height: 1.4; color: var(--fg); }
.reason .why { color: var(--warn); font-size: var(--fs-sub); font-weight: 600; }
.reason .tname { color: var(--fg); font-weight: 700; white-space: nowrap; margin-right: 2px; }
/* 内訳 = 箱にしない本文の 1 文 (人口の増減は太字・良い所は青・損は赤 + 括弧の数・最後に「→ 次に効く 1 手」は墨) */
.explain { margin: 0 0 8px; font-size: var(--fs-body); line-height: 1.5; }
.explain:empty { display: none; }
/* 文の色の約束 (内訳 / 様子の行 / 答え合わせ / 結果)。青は下線なしの太さ 600 でリンクと分ける。赤も同じ太さ */
.game .tone-good { color: var(--good); font-weight: 600; }
.game .tone-bad { color: var(--warn); font-weight: 600; }
/* 1 字ずつ流す (game.js の flowParts): 見える方は全文を組んだまま字を visibility で出す = 高さと折れ目が変わらない。
   読み上げは .vh の全文 (一度に入る)・見える方は aria-hidden */
.game .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.game .flow .ch.off { visibility: hidden; }
.explain.pulse { outline: 3px solid var(--focus); outline-offset: 2px; animation: pulse-ring 1s cubic-bezier(.45, 0, .55, 1) infinite alternate; }
#btn-end.pulse { outline: 3px solid var(--focus); outline-offset: 2px; animation: pulse-ring 1s cubic-bezier(.45, 0, .55, 1) infinite alternate; }
@keyframes pulse-ring { from { outline-color: var(--focus); } to { outline-color: transparent; } }
/* 取り消すのボタンの絵 (字の左) */
#btn-undo { display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
#btn-undo .ico { width: 18px; height: 18px; flex: none; }
@media (min-width: 960px) { #btn-undo .ico { width: 20px; height: 20px; } }

/* 置いた時に浮かぶ字 = 紙の小さな札 (上がって、少し留まって、消える) */
.board-col { position: relative; }
.floats { position: absolute; left: 0; top: 0; width: 100%; height: 0; pointer-events: none; z-index: 3; }
.float { position: absolute; transform: translate(-50%, -50%); font-weight: 700; font-size: var(--fs-sub); color: var(--ok);
  background: var(--paper); border: var(--bw) solid var(--ink); border-radius: 3px; padding: 0 6px; white-space: nowrap; box-shadow: 0 2px 0 var(--ink-soft);
  animation: floatup .9s cubic-bezier(.2, .8, .2, 1) forwards; }
.float.neg { color: var(--warn); }
@keyframes floatup { 0% { opacity: 0; margin-top: 6px; } 18% { opacity: 1; margin-top: -8px; } 70% { opacity: 1; margin-top: -16px; } 100% { opacity: 0; margin-top: -24px; } }

/* 盤面の下の行: 写真の年代と地形の凡例 (常時の印 / 「地形」の時は 7 項目) とヒントの凡例 */
.board-foot { display: flex; flex-wrap: wrap; align-items: center; column-gap: 16px; row-gap: 8px; margin-top: 8px; }
.board-foot .photo-label { margin: 0; }
.mini-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; column-gap: 8px; row-gap: 2px; font-size: var(--fs-game-small); color: var(--fg); }
.mini-legend li { display: inline-flex; align-items: center; gap: 3px; }
.mini-legend svg { width: 10px; height: 10px; border: var(--bw) solid var(--ink); background: var(--t-waste); } /* 模様は明るい色なので中間の灰の上に (gallery と同じ見せ方) */
.mini-legend .lg { fill: var(--card); }
.mini-legend .lg.t-none { fill: none; } /* 印なし 平地 = 模様の無い小片 */
.art .mini-legend .lg.lg-nogo { fill: url(#pt-nogo); }
.art .mini-legend .lg.t-rice { fill: url(#pt-rice); } .art .mini-legend .lg.t-field { fill: url(#pt-field); }
.art .mini-legend .lg.t-forest { fill: url(#pt-forest); } .art .mini-legend .lg.t-waste { fill: url(#pt-waste); }
.art .mini-legend .lg.t-hill { fill: url(#pt-hill); } .art .mini-legend .lg.t-water { fill: url(#pt-water); }
.art .mini-legend .lg.t-town { fill: url(#pt-town); }
.mini-legend .lg-gain { gap: 2px; }
.mini-legend .lg-gain svg { background: var(--paper); }
.terrain-legend[hidden] { display: none; }
/* この手番に置いた物の数 (1280 だけ) */
.placed { display: none; }
.side-legend { display: none; }

/* ---------- 答え合わせ ---------- */
.review .card h2 { display: inline-flex; align-items: baseline; gap: 2px; padding: 2px 10px 3px; margin: 0 0 8px; border: 2px solid var(--stamp); border-radius: 4px;
  box-shadow: inset 0 0 0 2px var(--paper), inset 0 0 0 3px var(--stamp); transform: rotate(-2deg); transform-origin: left center; }
.review .card h2.stamp-in { animation: stamp-in .42s cubic-bezier(.2, 1.3, .4, 1) both; }
#review-pop { font-size: var(--fs-h2); font-weight: 700; }
.review .card > p:nth-of-type(1) { margin-bottom: 4px; }
#rv-facts, #rv-wave, #rv-pace { margin-bottom: 8px; }
#rv-facts[hidden], #rv-wave[hidden], #rv-pace[hidden] { display: none; }
.seg { display: flex; gap: 0; margin-top: 16px; }
.game .seg button { flex: 1; border-radius: 0; box-shadow: none; }
.game .seg button:first-child { border-radius: 5px 0 0 5px; }
.game .seg button:last-child { border-radius: 0 5px 5px 0; border-left: 0; }
.seg button[aria-pressed="true"] { background: var(--accent); color: var(--accent-fg); border-color: var(--accent-edge); }
.reveal { animation: fadein .6s cubic-bezier(.2, .8, .2, 1); padding: 16px; border: var(--bw) solid var(--ink); border-radius: var(--r); background: var(--paper); box-shadow: 0 2px 0 var(--ink-soft); }
.reveal[hidden] { display: none; }
/* 出来事 = 引出線つきの注記 */
.facts { list-style: none; margin: 0; padding: 0; }
.facts li { position: relative; margin-bottom: 6px; padding-left: 20px; animation: fact-in .45s cubic-bezier(.2, .8, .2, 1) both; }
.facts li::before { content: ""; position: absolute; left: 0; top: .78em; width: 12px; border-top: var(--bw) solid var(--ink); }
.facts li::after { content: ""; position: absolute; left: 11px; top: calc(.78em - 2.5px); width: 5px; height: 5px; border-radius: 50%; background: var(--stamp); }
@keyframes fact-in { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
.up { color: var(--ok); font-weight: 600; }
.down { color: var(--warn); font-weight: 600; }
/* 答え合わせの人口の差は文の約束 (上 = 青 / 下 = 赤)。情報欄の数の bump (上げ 緑 / 下げ 赤) は今のまま */
#review-diff.up { color: var(--good); }

/* ---------- 結果の面 = 計画書の表紙 (二重の枠・称号の判・方眼のグラフ) ---------- */
#s-result { padding: 16px; border: var(--bw) solid var(--ink); border-radius: var(--r); box-shadow: 0 2px 0 var(--ink-soft), 0 18px 30px -24px var(--edge); }
#s-result .card { background: transparent; background-image: none; box-shadow: none; border-color: var(--rule); }
.result h2 { margin-top: 4px; }
.result-head { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; padding-bottom: 8px; margin-bottom: 16px; border-bottom: 2px solid var(--ink); }
.result-best { font-size: var(--fs-game-small); font-weight: 600; color: var(--fg); padding: 0 8px; border: var(--bw) solid var(--stamp); border-radius: 3px; }
.result-best[hidden], .start-best[hidden], #result-lesson[hidden] { display: none; }
/* 称号 = 朱の判 (紋章) + 名前 */
.result-name { display: flex; align-items: center; gap: 12px; font-weight: 600; margin: 0 0 16px; }
.result-name:empty { display: none; }
.result-name .em { flex: none; width: 56px; height: 56px; transform: rotate(-10deg); animation: seal .5s cubic-bezier(.2, 1.4, .4, 1) .15s both; }
@keyframes seal { from { transform: rotate(-24deg) scale(1.7); opacity: 0; } to { transform: rotate(-10deg); opacity: 1; } }
.result-name .nm { padding: 4px 12px; border: 2px solid var(--stamp); border-radius: 3px; background: var(--paper); }
.result-lesson { margin: 0 0 16px; padding: 6px 0 6px 12px; border-left: 3px solid var(--stamp); background: var(--paper-2); }
.result-tomorrow { font-weight: 600; margin-top: 16px; padding-top: 8px; border-top: var(--bw) solid var(--rule); }
.result-grid { display: grid; gap: 16px; }
.result-grid .card { margin: 0; }
/* グラフの枠は罫 1 本。方眼は 50 年の折れ線の背景だけ */
.chart { margin-bottom: 8px; border: var(--bw) solid var(--rule); border-radius: 2px; background-color: var(--paper); }
#chart-line { background-image: var(--grid-8); background-size: 8px 8px; }
.chart svg { display: block; width: 100%; height: auto; }
.chart text { font-size: var(--fs-game-small); fill: var(--fg); }
.chart .lbl { fill: var(--fg); font-weight: 600; }
.chart .tick { stroke: var(--rule); stroke-width: 1; }
.chart .bar-me { fill: var(--chart-me); stroke: var(--ink); stroke-width: 1; }
.chart .bar-real { fill: url(#pt-real) var(--chart-real); stroke: var(--ink); stroke-width: 1; }
/* 棒が長くて数の字が外に入らない時だけ、棒の内側の右端に敷く紙色の板 (字は墨のまま・ダークは墨側の紙色の板に白系の字) */
.chart .lbl-plate { fill: var(--paper); stroke: none; }
.chart .line-me { stroke: var(--chart-me); stroke-width: 2.5; fill: none; stroke-linejoin: round; }
.chart .dot-me { fill: var(--paper); stroke: var(--chart-me); stroke-width: 2; }
.chart .line-real { stroke: var(--chart-real); stroke-width: 2; fill: none; } /* 現実の線も実線 (色 = 墨 で あなたの朱と分ける・点線は無効のボタンだけ) */
.pair { display: grid; gap: 16px; margin: 16px 0; }
/* 2 枚の写真 = 台紙に貼った写真 + 札の名前 */
.pair figure { margin: 0; padding: 6px 6px 4px; background: var(--paper); border: var(--bw) solid var(--ink); border-radius: 3px; box-shadow: 0 2px 0 var(--ink-soft); }
.pair .board-wrap { box-shadow: 0 0 0 var(--bw) var(--ink); }
.pair figcaption { font-size: var(--fs-game-small); font-weight: 600; color: var(--fg); margin-top: 4px; text-align: center; letter-spacing: .04em; }
/* 共有の文 = 切り取り線の紙片 */
.share-out { background: var(--paper); border: var(--bw) solid var(--ink); border-radius: 2px; padding: 8px; margin-top: 8px; user-select: all; }

/* ---------- 案内の吹き出し = 朱の帯の付箋 ---------- */
.guide { position: fixed; z-index: 5; max-width: 300px; background: var(--guide-bg); color: var(--guide-fg);
  border: var(--bw) solid var(--guide-line); border-left: 4px solid var(--stamp); border-radius: var(--r);
  padding: 8px 10px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; pointer-events: none;
  box-shadow: 0 2px 0 var(--ink-soft), 0 14px 26px -12px var(--edge); animation: guide-in .3s cubic-bezier(.2, .9, .3, 1.15); }
@keyframes guide-in { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
.guide p { margin: 0; font-weight: 600; }
.guide button { pointer-events: auto; }
.game .guide button { min-height: 32px; padding: 4px 9px; font-size: var(--fs-game-small); font-weight: 600; background: var(--paper); color: var(--guide-fg); border-color: var(--guide-line); box-shadow: 0 1.5px 0 var(--ink); }
.guide-btns { display: flex; gap: 6px; }
/* 10 年ごとの作戦 3 手 = 案内と同じ付箋を盤面の左上の内側に (位置は game.js の placePlan が盤面から決める) */
.guide.plan-pop { position: absolute; flex-direction: column; align-items: flex-start; gap: 4px; max-width: 320px; }
.plan-pop .plan-rows { margin: 0; }
.plan-pop .guide-btns { margin-top: 4px; }
.plan-rows { margin: 4px 0 0; padding-left: 1.4em; font-size: var(--fs-body); line-height: 1.5; color: var(--fg); }
.plan-rows li::marker { color: var(--fg); font-weight: 600; }
.plan-rows li.plan-rest { list-style: none; }
.wave-more .plan-head { font-weight: 600; }

/* ---------- 遊び方の面 = 仕様書 ---------- */
.help-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 16px; padding-bottom: 8px; border-bottom: 2px solid var(--ink); }
.help-head h2 { margin: 0; }
.help-grid { display: grid; gap: var(--gap); }
.help-col .card:last-child { margin-bottom: 0; }
.help-col { display: grid; gap: var(--gap); align-content: start; }
.help .card { margin: 0; }
.rules { margin: 0; padding-left: 1.2em; }
.rules li { margin-bottom: 4px; }
.rules li::marker { color: var(--fg); }
.tool-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.tool-list li { display: grid; grid-template-columns: 34px 1fr; column-gap: 8px; align-items: start; }
.tool-list svg { width: 34px; height: 34px; padding: 2px; margin-top: 1px; background: var(--paper); border: var(--bw) solid var(--ink); border-radius: 5px; }
.tool-list .tl-name { font-weight: 600; }
.legend { list-style: none; margin: 0 0 6px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.legend li { display: flex; align-items: center; gap: 6px; font-size: var(--fs-game-small); }
.legend svg { width: 28px; height: 28px; flex: none; border: var(--bw) solid var(--ink); border-radius: 3px; }
.legend .sw { opacity: .7; }
.legend .t-hill-sw { fill: var(--card); } .legend .hill-sw { fill: url(#hatch); }
.art .legend .sw.t-rice { fill: url(#pt-rice); } .art .legend .sw.t-field { fill: url(#pt-field); }
.art .legend .sw.t-forest { fill: url(#pt-forest); } .art .legend .sw.t-waste { fill: url(#pt-waste); }
.art .legend .sw.t-water { fill: url(#pt-water); } .art .legend .sw.t-town { fill: url(#pt-town); }
.art .legend .hill-sw { fill: url(#pt-hill); }
/* 森と丘の印は墨の細い線だけなので、凡例の小片は模型の紙 (--k-lot・ライト / ダークで同じ) の上に描く (ダークの紙や中間の灰の上では線が沈む) */
.art .legend svg:has(> .sw.t-forest), .art .mini-legend svg:has(> .lg.t-forest), .art .mini-legend svg:has(> .lg.t-hill) { background: var(--k-lot); }
.art .legend .t-hill-sw { fill: var(--k-lot); }
.art .legend .sw { opacity: 1; }
.waves { width: 100%; max-width: none; border-collapse: collapse; }
.waves th, .waves td { border: 0; border-top: var(--bw) solid var(--rule); padding: 8px 4px; vertical-align: top; text-align: left; font-weight: 400; background: transparent; }
.waves tr:first-child th, .waves tr:first-child td { border-top: 0; }
.waves th { white-space: nowrap; font-weight: 600; width: 4.5em; }

/* ---------- 390 (960 未満) ---------- */
@media (max-width: 959px) {
  .start-photo img { aspect-ratio: 16 / 10; }
  /* 盤面の下は写真の年代の 1 行だけ (道具を地図の直下に) */
  #s-turn .board-foot { display: block; margin-top: 8px; font-size: var(--fs-game-small); line-height: 1.6; }
  /* 表示の切替は道具の直後の 1 行 */
  #s-turn .t-bottom > .ov-chips button { min-height: 32px; padding: 2px 12px; }
  /* 凡例は切替の直後 (切替と凡例は組) = 地形の凡例 → ヒントの凡例 (4 秒) を字の行のように流す (項目の途中では折れない)。
     常時の 6 項目も「地形」の時の 8 項目も 2 行・高さは 2 行分を取っておき、切替やヒントで下の行が跳ねない */
  #s-turn .t-bottom > .side-legend { display: block; margin: 0 0 8px; min-height: 3.2em; font-size: var(--fs-game-small); line-height: 1.6; }
  #s-turn .side-legend .mini-legend { display: inline; }
  #s-turn .side-legend .mini-legend li { display: inline-flex; vertical-align: top; margin-right: 8px; white-space: nowrap; }
  /* 道具 5 列 × 2 段 (1 枠 66 px に 絵 28 + 費用 4 字が収まる詰め方) */
  .tools { gap: 4px; padding: 8px; }
  .game .tool { padding: 4px 2px; column-gap: 2px; }
  .tool .tc { padding: 0; }
  /* 390 は縦が足りないので、内訳が出ている間は道具の説明の行と入れ替える */
  #s-turn.has-explain .reason:not(:has(.why)) { display: none; }
  /* 置けない理由 (.why・1.5 秒) が出ている間は内訳と入れ替える (凡例は切替の直後へ移ったので、理由の行のすぐ後が内訳)。
     理由の行の高さは入れ替える前の内訳の高さ (1 行 21 / 2 行 42・game.js の showReason が --explain-h に測る) に揃えて、縦に跳ねない */
  #s-turn.has-explain .reason:has(.why) ~ .explain { display: none; }
  #s-turn.has-explain .reason:has(.why) { min-height: var(--explain-h, 34px); }
}

/* ---------- 1280 (960 以上) = 盤面 + 右の列 ---------- */
@media (min-width: 960px) {
  /* 盤面の 1 辺 = 画面の高さから ゲームの最上段の行 / 余白 / 写真の年代と表示の切替の行 / 方眼の額 (上下 8) を引いた分 (右の列 380 を残す・600〜1000)。
     面の幅はサイトの本文の幅 (960) より広いので、この面だけ本文の枠を盤面 + 右の列に合わせる */
  :root { --side: clamp(600px, min(100vh - 152px, 100vw - 380px - 56px), 1000px); }
  .content:has(> #game) { max-width: calc(var(--side) + 380px + 56px); } /* 56 = 盤面と右の列の間 24 + 本文の左右の余白 16 × 2 */
  .turn:not([hidden]) { display: grid; grid-template-columns: var(--side) 380px; grid-template-rows: auto 1fr;
    grid-template-areas: "board top" "board bottom"; column-gap: 24px; align-items: start; }
  .turn .t-top { grid-area: top; } .turn .board-col { grid-area: board; } .turn .t-bottom { grid-area: bottom; }
  #s-turn .t-bottom { margin: 0; }
  .start:not([hidden]) { display: grid; grid-template-columns: 600px 1fr; gap: 28px; align-items: center; }
  .start-body { margin-top: 0; padding: 20px; }
  .result-grid { grid-template-columns: 1fr 1fr; }
  .pair { grid-template-columns: 1fr 1fr; }
  #s-result { padding: 24px; }
  #s-turn .t-top, .card, .reveal { padding: 20px; }
  .card.wave { padding: 8px 20px; }
  .help-grid { grid-template-columns: 1fr 1fr; }
  /* 道具は 1 列に絵 48 px + 名前 + 費用 */
  .game .tool { grid-template-columns: 1fr; grid-template-areas: "i" "n" "c"; justify-items: center; text-align: center; row-gap: 2px; padding: 5px 2px 6px; }
  .tool svg { width: 48px; height: 48px; }
  .tool .tc { justify-self: center; }
  .placed { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; row-gap: 4px; margin: 16px 0 0; padding-top: 8px; border-top: var(--bw) solid var(--rule); font-size: var(--fs-game-small); color: var(--fg); }
  .placed .pl { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
  .placed svg { width: 18px; height: 18px; }
  .side-legend { display: block; margin-top: 8px; }
  .wave .wave-head { padding: 4px 12px; }
  #s-turn .tools { gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- 題の印 (h1「街そだて」の右の「50 年」) ---------- */
/* 情報欄の年の判 (.wave-head) と同じ作り = 朱の二重枠・わずかな傾き・紙の地。判なので字も朱 (字は紙の上で 4.5 以上の --stamp-ink・枠は --stamp)。
   字の大きさは --fs-sub (新しい大きさを作らない)。題の字と縦の中央を揃え、左の間は 12 px (読み上げは span の前の空白で「街そだて 50 年」)。 */
.game-title { display: flex; align-items: center; }
.game-title .title-stamp { flex: none; margin-left: 12px; padding: 2px 8px; border: 2px solid var(--stamp); border-radius: 3px;
  box-shadow: inset 0 0 0 2px var(--paper), inset 0 0 0 3px var(--stamp); background: var(--paper);
  color: var(--stamp-ink); font-size: var(--fs-sub); font-weight: 700; line-height: 1.2; white-space: nowrap; transform: rotate(-2deg); }

/* ---------- 盤面の街の説明と広告の枠 (DESIGN §3 / §4・骨組み = game.ejs と partials/game-ad.ejs) ---------- */
/* 街の説明 = 面と広告の枠の間の内容 (中身は game.js)。箱は game.js が面を描いた後に開く (#game[data-ads])・状態の無い答え合わせ / 結果の面では閉じたまま。
   高さは <ins> 自身に予約 (390 は 280・広い画面は 250・両脇は 600)・広告が来なかった枠 (data-ad-status="unfilled") は箱ごと閉じる。
   ADS_PREVIEW=1 の build の点線の箱 (.game-ad-dummy) も同じ高さ・字は本文の大きさと墨 */
.game-town, .game-more { margin: 16px 0 0; }
.game-town p:last-child, .game-more p:last-child { margin-bottom: 0; }
.game-ad { display: none; }
#game[data-ads] .game-ad { display: block; }
#game[data-ads] .game-ad:has(> ins.adsbygoogle[data-ad-status="unfilled"]) { display: none; }
.game-ad-main { margin: 24px 0 0; padding-top: 8px; border-top: var(--bw) solid var(--line); }
.game-ad ins.adsbygoogle { display: block; min-height: 280px; }
.game-ad ins.adsbygoogle[data-ad-status="unfilled"] { display: none; }
.game-ad-dummy { display: flex; align-items: center; justify-content: center; min-height: 280px; border: var(--bw) dashed var(--ink); font-size: var(--fs-body); color: var(--fg); }
.game-side { display: none; }
@media (min-width: 960px) {
  .game-ad-main ins.adsbygoogle, .game-ad-main .game-ad-dummy { min-height: 250px; }
  /* 両脇の板 = #app (position: relative) の左右・面と同じ上端・sticky にしない・盤面と面は縮めない。
     盤面 / 右の列との間は 150 px (Google の規約の遊びの要素からの距離)・画面の端との間は 24 px・幅は 300 px まで。
     160 px 未満しか取れない幅では中身を出さない (板は幅 0 で画面の内側に残り、game.js が広告を頼まずに外す) */
  .game-side { display: block; position: absolute; top: 0; container-type: inline-size;
    --ad-gap: 150px; --ad-out: 24px;
    width: clamp(0px, (100vw - 100%) / 2 - var(--ad-gap) - var(--ad-out), 300px); }
  .game-side-left { right: calc(100% + min(var(--ad-gap), max(0px, (100vw - 100%) / 2 - var(--ad-out)))); }
  .game-side-right { left: calc(100% + min(var(--ad-gap), max(0px, (100vw - 100%) / 2 - var(--ad-out)))); }
  .game-side .game-ad ins.adsbygoogle, .game-side .game-ad-dummy { min-height: 600px; }
  @container (max-width: 159.98px) { #game[data-ads] .game-side .game-ad { display: none; } }
}