/* きょうのけいさん — 案A「こくばん」
 *
 * 場所は2つしかない。解く場（黒板）と、記録する場（ノート）。
 * 黒板は計算画面だけの持ち物。それ以外は方眼紙の上に白いカードを置いたプリントの質感にする。
 *
 * 色は山吹ひとつ。ボタンも、ごほうびの絵も、コンボも、全部この一色で通す。
 * 手描きの線画は単色なので、CSS マスクにして塗り替えている（2013年のピンクに縛られない）。
 */

/* Windows には丸ゴシックのシステムフォントが無い。子どもが読む画面で角ゴシックは硬いので自前ホストする。
   使う字だけに切り詰めてある（tools/subset_font.py）。 */
@font-face {
  font-family: "Zen Maru Gothic";
  src: url("../font/ZenMaruGothic-Medium.b4866830aa04.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Zen Maru Gothic";
  src: url("../font/ZenMaruGothic-Bold.f2865a02c645.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  /* 黒板の上でしか使わない色 */
  --board: #0e3a31;
  --board-ink: #f2f7f4;
  --board-dim: #9fc7b8;
  --board-msg: #e8b95c;
  --track: rgb(255 255 255 / 0.14);
  --time-fast: #e8b95c; /* 4秒まで */
  --time-good: #7fc3a8; /* 10秒まで */

  /* 紙の上の色 */
  --accent: #e0972f; /* 山吹。唯一の彩色。面（ボタン・棒グラフ・丸印）に使う */
  --accent-edge: #b6771f; /* 縁と、大きな文字（24px 以上）まで */
  --accent-text: #8a5a12; /* 小さい文字用。山吹のままだと白地で 2.4:1 しか出ない */
  --accent-soft: #fbf0dd;
  --accent-hover: #e9a63f; /* マウスを乗せたとき */
  --on-accent: #221501;

  --paper: #f2f5f3;
  --grid: #e6ece8; /* ノートの方眼。押せるものを埋もれさせない程度に薄くする */
  --card: #fff;
  --line: #dfe6e1; /* 仕切り線 */
  --edge: #c6d2cb; /* 押せるものの縁。方眼の上でも輪郭が立つ濃さにする */
  --edge-under: #d5ded8; /* 押せる白い面の下辺（＝沈む縁。これが有ると押せる） */
  --ink: #16231d;
  --ink-2: #4d5f56;
  --ink-3: #6f8177; /* 小さい字にも使う。方眼の上で 4.5:1 を切らない濃さ */

  /* にがて度は緑の濃さだけで表す。赤緑は使わない */
  --lv-hard: #0e3a31;
  --lv-mid: #8fbcac;
  --lv-easy: #dbe8e2;
  --on-lv-hard: #fff;
  --on-lv-mid: #0e3a31;
  --on-lv-easy: #0e3a31;

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --sh-1: 0 1px 2px rgb(0 0 0 / 0.05);
  --sh-2: 0 2px 6px rgb(0 0 0 / 0.05), 0 12px 32px rgb(0 0 0 / 0.07);

  --sans: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Yu Gothic Medium", "Meiryo", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
img { max-width: 100%; display: block; }

/* 押せるもの・入れるものは、書体も大きさも本文から継ぐ。
   ここで一度書けば、部品ごとに font-family: inherit と書かなくてよい。
   **ただし行の高さは継がない。** font: inherit は line-height まで持ってくるので、
   本文の 1.55 がキーの中に入り、けってい・けす・補助ボタンが 5〜7px ずつ伸びる
   （黒板はもう縮まないので、そのぶんページにスクロールが出る）。normal は button の既定値。 */
button, select, input, textarea { font: inherit; line-height: normal; }
button, select { cursor: pointer; }
button:disabled { cursor: default; }

/* ヘッダの高さを CSS に直書きしない（`calc(100vh - 51px)` のような定数は、
   字を大きくした瞬間に嘘になる）。柱を縦に積んで、残りを .body に伸ばさせる */
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 500;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  /* ダブルタップで拡大しない。キーを続けて2回押すのは「12」と入れているのであって、
     拡大したいのではない。**キーに付けても足りない** — 続けて押す指はキーの隙間（.keys の
     gap）にも当たり、そこは body が拾うので拡大が起きる。だから面の側に置く。
     **ピンチでの拡大は殺さない**（manipulation が止めるのはダブルタップだけ）。
     viewport に user-scalable=no を足す手もあるが、それは拡大そのものを禁じる話で、
     見えにくい子から拡大を取り上げることになる。 */
  touch-action: manipulation;
}

.hidden { display: none !important; }
.num { font-variant-numeric: tabular-nums; }

/* 見本データ（?debug=1）を表示中の帯。開発中しか出ない */
.demo-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 6px 12px;
  background: var(--board);
  color: var(--board-msg);
  font-size: 0.9rem;
  font-weight: 700;
}
.demo-bar a { color: var(--board-ink); }

/* 広告（アフィリエイト）の枠。学習画面には出さない（drill/_ads.html 参照）。
   中身を入れるまで何も描かれない。入れたら本文と分けて、控えめに見せる。
   高さの決まったバナー（例 728×90）を入れれば、読み込みで下がガタつかない */
.ad-region { margin: 26px auto 4px; max-width: 728px; text-align: center; }
.ad-region .label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  margin-bottom: 6px;
}
.ad-region a { display: inline-block; }
.ad-region img { max-width: 100%; height: auto; border-radius: var(--r-sm); }

/* ページのいちばん下。プライバシーポリシーへの入り口だけを置く。
   **子どもの邪魔をしないよう、いちばん小さく静かに**（読むのは大人のほう）。
   ただし 0.88rem＝14px より下げない（CLAUDE.md の約束）。 */
.site-foot {
  margin: 22px 0 4px;
  text-align: center;
  font-size: 0.88rem;
}
.site-foot a { color: var(--ink-3); }
@media (hover: hover) {
  .site-foot a:hover { color: var(--accent-text); }
}

/* ==================== 骨格 ==================== */

.head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: var(--card);
  border-bottom: 1px solid var(--line);
}

.head .logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
}

.head .logo img { width: 26px; height: 26px; }
.head .sp { flex: 1; }

/* 言語切換。JA / EN の2つを並べ、いまの言語を山吹で塗る */
.head .lang { display: inline-flex; gap: 2px; padding: 2px; background: var(--paper); border: 1px solid var(--line); border-radius: 999px; }
.head .lang button {
  font-size: 0.82rem;
  font-weight: 700;
  padding: 4px 11px;
  border: none;
  border-radius: 999px;
  background: none;
  color: var(--ink-3);
}
.head .lang button.on { background: var(--accent); color: var(--on-accent); }

/* 小さい字を作らない。子どもの画面なので、いちばん小さい字でも 0.9rem（14px）を下回らせない */
.head .account {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.92rem;
  color: var(--ink-2);
}

/* 字の大きさは .head .account から継ぐ（button も font: inherit で 0.92rem になる） */
.head .account a,
.head .account button {
  font-weight: 700;
  color: var(--accent-text);
  text-decoration: none;
  background: none;
  border: none;
  padding: 0;
}

/* 計算中は他の画面へ誘わない。抜けるのは「やめる」だけ。
   「あと n もん」を画面の中央に置くため、3列にして真ん中を auto にする
   （flex + space-between だと、右端に「やめる」と同じ幅の透明な札が要る） */
.head--focus {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  font-size: 1rem;
  color: var(--ink-2);
}
.head--focus a { color: var(--ink-2); text-decoration: none; font-weight: 700; }
.head--focus .progress { font-size: 1.15rem; font-weight: 700; color: var(--ink); }

.body { flex: 1; min-height: 0; display: grid; grid-template-columns: 190px minmax(0, 1fr); }
.body--wide { grid-template-columns: minmax(0, 1fr); }

.nav {
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: var(--card);
  border-right: 1px solid var(--line);
}

.nav a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 12px;
  border-radius: var(--r-sm);
  color: var(--ink-2);
  text-decoration: none;
  font-size: 1.05rem;
  font-weight: 700;
}

.nav a i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--line);
  flex: none;
}

.nav a.on { background: var(--accent-soft); color: var(--accent-text); }
.nav a.on i { background: var(--accent); }

/* 本文の地は方眼紙 */
.main {
  padding: 22px;
  min-width: 0;
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 22px 22px;
}

.wrap { max-width: 1080px; margin: 0 auto; }
.stack { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
/* 設定は縦に細い。器（.wrap 1080px）の左端に貼り付くと寂しいので、真ん中に置く */
.stack--narrow { max-width: 560px; margin: 0 auto; width: 100%; }
.grid { display: grid; gap: 14px; }
/* 2列は上配置（align-items:start）。片方が短くても引き伸ばさず、両列とも上端から並べる */
.g-7-5 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
.g-2 { grid-template-columns: 1fr 1fr; }
.g-3 { grid-template-columns: repeat(3, 1fr); }
.g-8 { grid-template-columns: repeat(8, 1fr); gap: 10px; }

/* ==================== 部品 ==================== */

/* 横一列で両端に寄せる。カードの見出し（左に題、右に数）と、画面の上のツールバーで使う。
   数字と題を「文字の足」で揃えたいときだけ --baseline */
.row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.row--baseline { align-items: baseline; }

/* 方眼紙の上に置くものは、白いだけでは浮かない。縁を濃いめにして輪郭を立てる */
.card {
  background: var(--card);
  border: 1px solid var(--edge);
  border-radius: var(--r-md);
  padding: 16px;
  box-shadow: var(--sh-1);
}

/* 押せるカード（きろく・コレクションへ飛ぶ）。リンクでも字は本文の色のまま */
.card[href] { text-decoration: none; color: inherit; }

/* 行の連なり（きろく）を入れるカード。行の罫線が下端まで来るので、下の余白だけ詰める。
   .card より詳細度を上げてあるのは、広い画面（@media 1400px）の padding ショートハンドに
   下の 4px まで巻き取られないため */
.card.card--table { padding-bottom: 4px; }

.card-title { font-size: 0.92rem; font-weight: 700; color: var(--ink-2); letter-spacing: 0.03em; }
/* 見出し行の右肩に置く数（「12 / 40」「3日れんぞく」）。小さい字なので accent-text */
.card-note { font-weight: 700; color: var(--accent-text); }

/* ボタンは影ではなく下辺の縁で沈む。押せるものだと子どもにも分かる */
.cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 26px 20px;
  border-radius: var(--r-lg);
  background: var(--accent);
  color: var(--on-accent);
  text-decoration: none;
  box-shadow: 0 3px 0 var(--accent-edge), var(--sh-1);
  text-align: center;
  border: none;
}

.cta:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--accent-edge); }
.cta .b { font-size: 1.9rem; font-weight: 700; letter-spacing: 0.05em; }
.cta .s { font-size: 1.05rem; opacity: 0.95; }
.cta .h { font-size: 0.95rem; opacity: 0.82; }

/* もんだい画面の「はじめる」。上段のタブ（おまかせ / えらぶ）の右に小さく置く。
   ホームの主役サイズではなく、タブと同じくらいの高さに収める */
.cta--slim { padding: 9px 22px; font-size: 1rem; font-weight: 700; }

/* 押せる白いカード。ただのカードと見分けがつくよう、下辺の縁で沈ませる */
.quiet {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 16px;
  border-radius: var(--r-md);
  border: 1px solid var(--edge);
  background: var(--card);
  color: var(--ink);
  text-decoration: none;
  box-shadow: 0 2px 0 var(--edge-under), var(--sh-1);
  text-align: left;
}

.quiet:active { transform: translateY(2px); box-shadow: var(--sh-1); }
.quiet .t { font-size: 1.08rem; font-weight: 700; }
.quiet .s { font-size: 0.92rem; color: var(--ink-2); }
.quiet.alert { border-color: var(--accent); box-shadow: 0 2px 0 var(--accent-edge), var(--sh-1); }
.quiet.alert:active { box-shadow: var(--sh-1); }
.quiet.alert .t { color: var(--accent-text); }

/* 姉妹アプリ（漢字・ことわざ）の案内。相手ロゴを左に、名前と副題を右に横並べ */
.quiet.sister { flex-direction: row; align-items: center; gap: 12px; }
.sister-logo { flex: none; width: 32px; height: 32px; }
.sister-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
/* 2枚を縦に並べる器。広い幅は小カード直下（.sister-wide）、狭い幅は最下部（.sister-narrow）。
   既定（広い幅）は narrow を隠す。**3プロジェクトで同じ形** */
.sisters { display: grid; gap: 14px; }
.sisters.sister-narrow { display: none; }

.badge {
  display: inline-block;
  font-size: 0.88rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

/* にがて度の4段階。字で見せるのが .badge、色だけで見せるのが .lv（ヒートマップと凡例）。
   段階と色の対応は1か所にしか無い */
.badge.hard, .lv.hard { background: var(--lv-hard); color: var(--on-lv-hard); }
.badge.mid, .lv.mid { background: var(--lv-mid); color: var(--on-lv-mid); }
.badge.easy, .lv.easy { background: var(--lv-easy); color: var(--on-lv-easy); }
.badge.new, .lv.new { background: transparent; border: 1px dashed var(--edge); color: var(--ink-2); }

/* タブは方眼の上に直接置く。地の色（山吹の薄い面）と縁で、押せる帯だと分かるようにする */
.tabs {
  display: inline-flex;
  padding: 4px;
  gap: 3px;
  background: var(--accent-soft);
  border: 1px solid #ecd9b4;
  border-radius: 999px;
}

.tabs a {
  padding: 8px 22px;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--accent-text);
  text-decoration: none;
}

.tabs a.on { background: var(--card); box-shadow: var(--sh-1); color: var(--ink); }

/* レベル帯（初級/中級/上級）は .tabs で見せる（モード切替と同じセグメント）。
   山吹の塗り面は「はじめる」だけに残し、選択中の状態と動作を見分けやすくする */

.bar { height: 9px; border-radius: 999px; background: var(--lv-easy); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
/* カードの中では見出し行の下に来る（.week / .stats / .thumbs と同じ間合い） */
.card .bar { margin-top: 10px; }

.legend { display: flex; align-items: center; gap: 6px; font-size: 0.9rem; color: var(--ink-2); flex-wrap: wrap; }

/* 手描きの線画は単色なので、マスクにして好きな色で塗る。
   これで 2013年のピンクに縛られなくなった。
   どの絵を塗るかは --art（テンプレートの style か、JS の paint() が渡す）。 */
.art {
  -webkit-mask: var(--art) center / contain no-repeat;
  mask: var(--art) center / contain no-repeat;
  background-color: var(--accent);
  flex: none;
}

.art.dim { background-color: var(--line); }

/* ==================== トップ ==================== */

.streak { display: flex; align-items: baseline; gap: 7px; }
.streak .n { font-size: 3rem; font-weight: 700; line-height: 1; color: var(--accent-edge); }
.streak .l { font-weight: 700; }

.week { display: flex; align-items: flex-end; gap: 6px; height: 42px; margin-top: 10px; }
.week i { flex: 1; background: var(--accent); border-radius: 3px 3px 0 0; display: block; min-height: 2px; }
.week i.off { background: transparent; border-bottom: 2px dotted var(--line); }

.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; margin-top: 10px; }
.stats div { display: flex; justify-content: space-between; align-items: baseline; font-size: 1rem; color: var(--ink-2); }
.stats b { font-size: 1.35rem; color: var(--ink); }

.thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 10px; }
.thumbs > div { aspect-ratio: 1; display: grid; place-items: center; background: var(--lv-easy); border-radius: var(--r-sm); }
.thumbs .art { width: 64%; height: 64%; }
.thumbs .more { background: transparent; border: 1px dashed var(--edge); color: var(--ink-2); font-size: 0.92rem; }

/* ==================== 計算画面 ==================== */

.column { width: 100%; max-width: 880px; margin: 0 auto; }

/* 計算画面は上寄せ。中央（align-items:center）にすると、けっていでキーパッドが隠れて
   列の高さが変わったとき、中央基準で黒板が上下にずれる。上寄せなら黒板は動かない。 */
.body--wide .main { display: flex; }
.body--wide .wrap { width: 100%; display: flex; align-items: flex-start; justify-content: center; padding-top: 22px; }

/* 黒板。ノイズ質感も木枠もチョーク受け皿も無い。深い緑の面だけ。
   中の文字の大きさはこの2つの変数で決まる。縦長と横長で別々に変えられる（下の @media で上書き）。 */
.board {
  --fs-expr: clamp(3rem, 11vw, 5rem);   /* 問題式 */
  --fs-answer: clamp(4rem, 14vw, 8rem); /* 答え（右下） */

  position: relative;
  border-radius: var(--r-lg);
  background: var(--board);
  color: var(--board-ink);
  padding: 16px 20px 14px;
  display: flex;
  flex-direction: column;
  min-height: 300px;
  box-shadow: 0 8px 26px rgb(14 58 49 / 0.24);
  overflow: hidden;
}

/* 出題中の面。出し入れは .hidden（display:none !important）に任せるので、
   ここに display を書いても JS 側から消せる（＝JS が style.display を触らなくてよい） */
.board-view { flex: 1; display: flex; flex-direction: column; }

/* 丸印の基準（4秒＝はなまる / 10秒＝まる）を見せる。元アプリでは隠れていた */
.timebar {
  display: flex;
  height: 6px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--track);
  flex: none;
}

.timebar i {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: 999px;
  background: var(--time-good);
  transition: width 0.1s linear;
}

.timebar i.fast { background: var(--time-fast); }

.board-head { display: flex; justify-content: space-between; align-items: baseline; margin-top: 10px; }
.board-head .n { font-size: 1.6rem; font-weight: 700; color: var(--board-dim); }
.board-head .msg { font-size: 1.05rem; font-weight: 700; color: var(--board-msg); }

/* 式はこの画面でいちばん大きな文字。枠を広げるのではなく、枠の中の字を大きくする。
   余った縦は式が吸う（flex:1）。z-index は右下のごほうびの絵（.mark = 0）より前に出すため */
.expr {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.1em;
  white-space: nowrap;
  font-size: var(--fs-expr);
  font-weight: 700;
  line-height: 1;
  padding: 10px 0;
}

.expr img { width: 0.62em; height: auto; flex: none; }
.expr .equal { width: 0.5em; } /* ＝ だけは細いので、記号の幅を詰める */

/* ごほうびの絵も丸印も、この1枚（<img>）。色は画像に焼いてあるので塗らない（マスクを使わない）。
   答えといっしょに黒板の右下へ置く。位置は CSS だけ（JS の実測はしない）。 */
.mark {
  position: absolute;
  right: 5%;
  bottom: 5%;
  z-index: 0;
  width: clamp(160px, 44vw, 280px);
  height: auto;
  object-fit: contain;
  pointer-events: none;
  animation: mark-pop 0.24s ease-out;
}

/* 答えは式に書き込まず、右下に大きく出す（元アプリと同じ）。ごほうび／丸の上に重なる。 */
.answer {
  position: absolute;
  right: 15%;
  bottom: 8%;
  z-index: 1; /* 数字は絵より前。絵に潰させない */
  font-size: var(--fs-answer);
  font-weight: 700;
  line-height: 1;
  color: var(--board-ink);
}
.answer.told { color: var(--board-msg); } /* 教えた答え（こたえを みる／2回まちがえ）は黄色 */

/* まちがえた答えは薄く沈める。**「✕」のような記号は出さない** — ✕ は かけ算の × と同じ字なので、
   式のすぐ下に同じ大きさで並ぶと「7 × 8 … × 12」と読めてしまう。元アプリも ✕ は出していない。
   まちがいの合図は**丸が出ないこと**＋音＋振動で、色はその補助（理由は docs/decisions.md）。 */
.answer.wrong { color: var(--board-dim); }

@keyframes mark-pop {
  from { transform: scale(0.55); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.board-msg {
  flex: 1;
  display: grid;
  place-items: center;
  text-align: center;
  white-space: pre-line;
  font-size: clamp(1.5rem, 6vw, 2.4rem);
  font-weight: 700;
}

/* 「あとで もういちど でるよ」。**式の上**に置く（テンプレートの並び順）。
   式の下は右下のこたえ（.answer = 黒板の高さの 10% 上・最大 8rem）の領域で、黒板が狭いと
   中央寄せのこの文が こたえ に食い込む（縦長 390px で 33x19px 重なっていた）。
   上の帯には「あと n もん」と時間しか無く、こたえも丸も絶対に来ない。 */
.tell { text-align: center; font-size: 1.05rem; color: var(--board-dim); padding-top: 6px; }

/* 右下は こたえ と ごほうびの絵（どちらも絶対配置）の場所。min-height はその席取り */
.board-foot { display: flex; align-items: flex-end; min-height: 100px; }

/* コンボはチョーク棒（立体風の多色画像）をやめて、点で表す */
.dots { display: flex; align-items: center; gap: 5px; }
.dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--board-dim); opacity: 0.3; display: block; }
.dots i.on { opacity: 1; background: var(--accent); }
.dots b { margin-left: 6px; color: var(--accent); font-size: 1.2rem; }

/* 重ね描きのサブ画像（55コンボの3枚だけが持つ）。ごほうび本体は .mark（こたえの上）なので、
   ぶつからないよう黒板の左上へ逃がす。こちらも黒板基準の % で、元の色そのまま */
.board .sub {
  position: absolute;
  left: 10%;
  top: 20%;
  max-width: 22%;
  max-height: 22%;
  object-fit: contain;
  z-index: 2;
}

/* 横長：黒板の横幅が余るので、式は中央のまま字間を広げ、ごほうびは少し小さく右へ寄せる。
   フォントサイズは変数を横長用に上書き（縦長は上の .board のまま）。 */
@media (min-width: 900px) {
  .board {
    --fs-expr: clamp(3.6rem, 7vw, 7rem);   /* 横長：問題式 */
    --fs-answer: clamp(4rem, 14vw, 8rem);  /* 横長：答え（変えたければここ） */
  }
  .expr { gap: 0.55em; }
  .mark { width: clamp(150px, 32vw, 220px); right: 3%; }
}

/* 休憩の面。黒板いっぱいに重ねて、下の式・答え・丸をまとめて覆う（不透明）。
   **流れに入れない（絶対配置）ことが要点。** 流れに入れると、らくがき（黒板幅の 26%＝広い画面では
   200px 超）が黒板を押し広げて、休憩に入った瞬間に黒板の高さが変わる。絶対配置なら中身が何 px でも
   黒板の高さに関与しない。inset:0 は黒板の padding box いっぱいなので、内側の余白は自分で持つ。 */
.board-rest {
  position: absolute;
  inset: 0;
  padding: inherit; /* 黒板と同じ内側の余白。直に書くと、黒板の padding を変えたとき嘘になる */
  display: flex;
  flex-direction: column;
  background: var(--board);
  z-index: 3; /* .mark(0) / .answer(1) / .sub(2) より前 */
}

.doodle { width: 26%; margin-left: auto; aspect-ratio: 1; opacity: 0.5; background-color: var(--board-dim); }

/* ---- 黒板の下。キーパッド・「さいかい」・サブのボタンが出入りする ---- */

/* **ここの高さは動かさない。** 縦が余ると黒板（.board{flex:1}）が吸うので、休憩でキーパッドを
   消すと、そのぶん黒板が伸びてしまう（スマホで 363px → 632px になっていた）。
   3つを同じ場所に重ね、行の高さはキーパッドとサブのボタンに据え置かせる。だから休憩中も
   この2つは**消さない**（.vanish ＝ 場所は空けたまま見えなくするだけ）。 */
.op-bottom {
  display: grid;
  grid-template-rows: auto auto; /* 1段目＝キーパッド / 2段目＝こたえを みる・きゅうけい */
}

.op-bottom .keypad { grid-area: 1 / 1; }
.op-bottom .subs { grid-area: 2 / 1; }
.op-bottom .cta { grid-area: 1 / 1 / 3 / 2; place-self: center; width: 220px; max-width: 100%; }

/* 場所を空けたまま見えなくする。display:none と違い、行の高さを保つ */
.vanish { visibility: hidden; }

/* ---- キーパッド。黒板と同じ幅・同じ左右端に揃える ---- */

.keypad { display: flex; flex-direction: column; gap: 9px; margin-top: 16px; }

.display {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 20px;
  border-radius: var(--r-md);
  background: var(--ink);
  color: #fff;
  font-size: 2.4rem;
  font-weight: 700;
}

.keys { display: grid; gap: 8px; }
.keys--type { grid-template-columns: repeat(10, 1fr); }
.keys--choose { grid-template-columns: repeat(4, 1fr); }

/* 押せる白い面。数字キー・「けす」・補助ボタンは、地も縁も同じ。違うのは形と字の大きさだけ */
.key, .key-clear, .subs button {
  border: 1px solid var(--edge);
  background: var(--card);
  box-shadow: 0 2px 0 var(--edge-under);
  font-weight: 700;
}

/* 数字は的の大きさぶんだけ大きく書く。小さい字は押し間違いのもと */
.key {
  aspect-ratio: 1 / 1.05;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  font-size: clamp(1.6rem, 4.6vw, 2.4rem);
  color: var(--ink);
}

.keys--choose .key { aspect-ratio: 2.1; font-size: clamp(1.9rem, 6vw, 2.7rem); }

/* 「けす」と「けってい」は左右の端まで引き離す。
   確定は取り返しがつかないので、指が数字から流れて当たる位置に置かない */
.key-row { display: flex; align-items: center; }

.key-clear {
  padding: 14px 30px;
  border-radius: var(--r-sm);
  color: var(--ink-2);
  font-size: 1.1rem;
}

.key-enter {
  margin-left: auto;
  width: 42%;
  padding: 15px 0;
  border-radius: var(--r-sm);
  border: none;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  box-shadow: 0 3px 0 var(--accent-edge);
}

/* 補助ボタンは罫線で切って、答える手の動線から外す。
   ただし「ボタンだと分かる」ことは譲らない。透明な地に薄い字だと、ただの文字に見える */
.subs { display: flex; justify-content: center; gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }

.subs button {
  padding: 11px 22px;
  border-radius: 999px;
  color: var(--ink-2);
  font-size: 1rem;
}

/* 押すと、沈む縁のぶんだけ本当に沈む */
.key:active, .key-clear:active, .key-enter:active, .subs button:active {
  transform: translateY(2px);
  box-shadow: none;
}

/* 押せないときは沈む縁を外して薄くする。「押せるものは下辺の縁で沈む」ので、
   **縁が無い＝押せない**が見た目の合図になる。けっていは、送っている間・正解のあと・
   2回まちがえて正解を見せている間は効かない。山吹のまま出していると、
   押しても何も起きないボタンを押させることになる。 */
.key-enter:disabled, .subs button:disabled { opacity: 0.4; box-shadow: none; }

/* ==================== もんだい ==================== */

.type-card { display: flex; flex-direction: column; gap: 6px; }
.type-card .top { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.type-card .name { font-weight: 700; font-size: 1.05rem; }
.type-card .meta { font-size: 0.92rem; color: var(--ink-2); }
.type-card .today { font-size: 0.92rem; color: var(--accent-text); font-weight: 700; }
.type-card.new { background: transparent; border-style: dashed; box-shadow: none; }
.type-card.new .name { color: var(--ink-2); }

/* ラベルは行いっぱいに伸ばす。縮めるとチェックボックスを押せる幅がその分だけ狭まる */
.type-card .top .pick { flex: 1; }
.type-card .pick { display: flex; align-items: center; gap: 8px; }
.type-card input[type="checkbox"] { width: 20px; height: 20px; flex: none; }

.mode-toggle {
  border: 1px solid var(--edge);
  background: var(--card);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ink-2);
}

.mode-toggle.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-text); }

/* ==================== きろく ==================== */

.chart { position: relative; height: 100px; margin-top: 12px; }
.chart .lines { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; }
.chart .lines i { border-top: 1px dashed var(--line); display: block; }
.chart .bars { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 3px; }
.chart .bars i { flex: 1; background: var(--lv-easy); border-radius: 2px 2px 0 0; display: block; }
.chart .bars i.now { background: var(--accent); }
.chart .bars i.off { background: transparent; border-bottom: 2px dotted var(--line); }

.heat { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.heat-row { display: flex; align-items: center; gap: 8px; }
.heat-row .nm { width: 58px; flex: none; font-size: 0.92rem; color: var(--ink-2); }
.heat-row .cells { display: flex; gap: 4px; flex: 1; }
.heat-row .cells i { flex: 1; height: 20px; border-radius: 4px; display: block; }

/* 色の対応は .badge と共通（部品の節を見る）。ここは形だけ */
.lv { display: block; }
.legend .lv { width: 14px; height: 14px; border-radius: 3px; }

.rows .r {
  display: grid;
  grid-template-columns: 1.6fr repeat(5, 1fr) 44px;
  align-items: center;
  padding: 12px 6px;
  border-bottom: 1px solid var(--line);
  font-size: 1rem;
}

.rows .r:last-child { border-bottom: none; }
.rows .r.hd { font-size: 0.9rem; color: var(--ink-2); border-bottom: 1px solid var(--ink-3); padding-bottom: 7px; }
.rows .r > span:not(:first-child) { text-align: right; }
.rows .r .art { width: 30px; height: 30px; margin-left: auto; }
.rows .month { grid-column: 1 / -1; font-size: 0.9rem; color: var(--ink-2); font-weight: 700; }

.empty { padding: 28px 10px; text-align: center; color: var(--ink-2); }

/* ==================== コレクション ==================== */

.cell {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  background: var(--card);
  border: 1px solid var(--edge);
  border-radius: var(--r-md);
  box-shadow: var(--sh-1);
  position: relative;
}

.cell.unknown { background: transparent; border-style: dashed; box-shadow: none; }
/* 取得済みのごほうびは元の色そのまま（<img>）。未取得の「？」だけ .art dim で塗る */
.cell .art, .cell img { width: 62%; height: 62%; object-fit: contain; }
.cell .sub { position: absolute; left: 6%; top: 6%; width: 30%; height: 30%; }

/* ==================== 設定 ==================== */

.set-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

.set-row:last-child { border-bottom: none; }
.set-row .t { font-size: 1.08rem; font-weight: 700; }
.set-row .s { font-size: 0.92rem; color: var(--ink-2); }

.set-row select {
  font-size: 1rem;
  padding: 10px 12px;
  border: 1px solid var(--edge);
  border-radius: var(--r-sm);
  background: var(--card);
  color: var(--ink);
}

.toggle { width: 46px; height: 26px; border-radius: 999px; background: var(--line); position: relative; flex: none; border: none; padding: 0; }
.toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: var(--sh-1); transition: left 0.12s; }
.toggle.on { background: var(--accent); }
.toggle.on::after { left: 23px; }

/* ==================== マウスを乗せたとき ====================
   hover はマウスがある端末だけ。タッチ端末で hover が「押しっぱなし」に
   見えて残るのを防ぐため、(hover: hover) で囲う。押し込みの :active は別に持たせてある */
@media (hover: hover) {
  /* .toggle / .quiet / .card[href] は button か a なので、ここに並べ直さなくてよい */
  a, button, select, .cell, label.pick { transition: background-color 0.12s, border-color 0.12s, box-shadow 0.12s, transform 0.12s, color 0.12s; }

  .cta:hover { background: var(--accent-hover); }
  .quiet:hover { box-shadow: 0 4px 0 #cdd8d1, var(--sh-1); transform: translateY(-1px); }
  .quiet.alert:hover { box-shadow: 0 4px 0 var(--accent-edge), var(--sh-1); }

  .key:hover, .key-clear:hover { background: var(--accent-soft); border-color: var(--accent); }

  /* 押せないものは明るくしない。:hover は :active と違って、無効なボタンにも効いてしまう
     （＝薄くしたそばから、マウスを乗せるだけで生きているように見える） */
  .key-enter:not(:disabled):hover { background: var(--accent-hover); }
  .subs button:not(:disabled):hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-text); }

  .nav a:hover { background: var(--accent-soft); color: var(--accent-text); }
  .tabs a:hover { color: var(--ink); }
  .head .lang button:hover:not(.on) { color: var(--ink); }
  .head .account a:hover, .head .account button:hover { text-decoration: underline; }

  .toggle:hover { background: #cfd8d2; }
  .toggle.on:hover { background: var(--accent-edge); }

  .cell:hover { border-color: var(--accent); box-shadow: 0 3px 10px rgb(224 151 47 / 0.2); }
  .mode-toggle:hover { border-color: var(--accent); color: var(--accent-text); }
  select:hover { border-color: var(--accent); }
}

/* ==================== 広いとき ====================
   フル HD（1920）で、1080px の中身が画面の真ん中にぽつんと浮いていた。
   字を一回り大きくし、器を広げ、短い画面は上下の真ん中に置く */

@media (min-width: 1400px) {
  html { font-size: 17px; } /* rem で組んであるので、これだけで全体が上がる */

  .body { grid-template-columns: 220px minmax(0, 1fr); }

  /* 計算画面はナビが無い1カラム。すぐ上の .body を、ここで打ち消し直す。
     同じ詳細度なので、あとに書いたほうが勝つ（この罠に一度はまっている） */
  .body--wide { grid-template-columns: minmax(0, 1fr); }

  /* display:grid は、短い画面（トップなど）が上に貼り付かないようにするため。
     はみ出すほど長い画面では safe が効いて、頭が切れずに上端から始まる */
  .main { display: grid; padding: 30px 36px; background-size: 26px 26px; }
  .grid { gap: 18px; }
  .card { padding: 20px; }

  /* grid の子は margin:auto があると「中身の幅」に縮む（stretch されない）。
     width を明示しないと、きろくや設定のカードが痩せる */
  .wrap { width: 100%; max-width: 1280px; }

  /* 「はじめる」は、この画面でいちばん押されるもの。柱いっぱいに引き伸ばす。
     ただし伸びすぎると、ただの大きな面になる。上限を切っておく */
  .cta--hero { flex: 1; max-height: 360px; justify-content: center; padding: 40px 24px; }
  .cta--hero .b { font-size: 2.4rem; }

  /* 黒板も、広い画面では大きく取る。字の大きさは変数で（.expr に直に書かない） */
  .column { max-width: 960px; }
  .board { min-height: 360px; --fs-expr: clamp(3rem, 11vw, 6rem); }
}

/* ==================== 狭いとき ==================== */

@media (max-width: 900px) {
  .body { grid-template-columns: 1fr; }

  /* サイドナビ → 下部タブバー。指が自然に届く場所へ */
  .nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    flex-direction: row;
    border-right: none;
    border-top: 1px solid var(--line);
    padding: 8px 4px calc(8px + env(safe-area-inset-bottom));
    z-index: 20;
  }

  /* タブは5つ。「コレクション」の6文字が収まる上限がこの大きさ */
  .nav a { flex: 1; flex-direction: column; gap: 4px; padding: 4px 1px; font-size: 0.75rem; background: none; white-space: nowrap; }
  .nav a.on { background: none; }

  /* 字を大きくしたぶん、ヘッダが2行に折り返す。アプリ名を畳んでアイコンだけにする */
  .head { padding: 10px 12px; gap: 6px; }
  .head .logo .name { display: none; }
  .head .account { gap: 8px; white-space: nowrap; min-width: 0; }

  .main { padding: 14px 14px 90px; }
  .g-7-5, .g-3, .g-2 { grid-template-columns: 1fr; }
  .g-8 { grid-template-columns: repeat(4, 1fr); }

  /* 1カラムのときはバナーを最下部（.sister-narrow）に出す。小カード直下の版は隠す */
  .sisters.sister-wide { display: none; }
  .sisters.sister-narrow { display: grid; }

  /* テンキーは 5列×2段。10キー1行だと 1つ 37px にしかならず、指の的として小さすぎる */
  .keys--type { grid-template-columns: repeat(5, 1fr); }
  .keys--type .key { font-size: 1.85rem; }
  .keys--choose .key { aspect-ratio: 1.7; } /* 文字を大きくしたので、平たすぎると窮屈になる */

  /* 計算中はタブバーを出さない（集中モード） */
  .body--wide .main { padding-bottom: 14px; }
  .body--wide .wrap { align-items: stretch; }
  .body--wide .column { display: flex; flex-direction: column; }

  /* 黒板は余った縦を吸うが、**頭は押さえる**。
     吸わせないと、キーパッドを下端に寄せた結果として黒板だけが上に浮く。
     一方で吸わせ放題にすると、こんどは**キーパッドの種類で黒板の高さが変わる**
     （縦長 390px で テンキー 363px / えらぶ 460px。えらぶのほうがキーパッドが低いぶん、
     黒板がそれを吸って伸びる）。上限を付けて、どちらでも 22rem に揃える。
     px ではなく rem。利用者が字を大きくしたら、上限も一緒に大きくなってほしい。
     横長は黒板の高さが中身で決まる（flex:1 ではない）ので、この上限は当たらない。 */
  .board { min-height: 200px; max-height: 22rem; flex: 1; }
  .board-foot { min-height: 60px; }
}

/* ==================== 縦が短いとき ====================
   ノート PC（1366×768 は、ブラウザの UI を引くと実効 660px 前後）で、黒板とキーパッドが
   縦に収まらずスクロールが出ていた。**計算画面でページが動くと、解いている手が狂う。**

   黒板は中身が丈を決めている（PC 幅で 327px）。`min-height` を下げても `flex:1` を足しても
   縮まないのはこのため — 縮めるには**中の席取りを詰めるしかない**。ここでしか詰めないので、
   縦に余裕のある画面の見た目は変わらない。 */
@media (max-height: 780px) {
  /* 右下（こたえ・ごほうび）の席取り。狭い画面と同じ 60px に揃える */
  .board-foot { min-height: 60px; }

  /* 式は黒板の主役なので、削るのは最後。それでも横長の 7vw は、縦が短いと大きすぎる */
  .board { --fs-expr: clamp(2.4rem, 5vw, 4rem); }

  /* 押した数が読めれば足りる。ここは的ではない（押すのは下のキー） */
  .display { height: 52px; }

  /* 指の的の大きさを決めているのは**幅**（10列なら 1280px で 85px）。丈だけ詰めても、
     押し間違いは増えない。4択（.keys--choose .key）は元から平たいので、こちらは当たらない */
  .key { aspect-ratio: 1 / 0.75; }

  .keypad { gap: 7px; margin-top: 12px; }
  .subs { margin-top: 10px; padding-top: 10px; }

  /* 画面の縁の余白。この画面の主役は黒板とキーパッドで、余白ではない */
  .body--wide .main { padding-top: 12px; padding-bottom: 12px; }
  .body--wide .wrap { padding-top: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}