/* きょうのけいさん — 案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;
  --on-accent: #221501;

  --paper: #f2f5f3;
  --grid: #e6ece8; /* ノートの方眼。押せるものを埋もれさせない程度に薄くする */
  --card: #fff;
  --line: #dfe6e1; /* 仕切り線 */
  --edge: #c6d2cb; /* 押せるものの縁。方眼の上でも輪郭が立つ濃さにする */
  --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; }

/* ヘッダの高さを 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;
}

.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); }

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

.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: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 4px 11px;
  border: none;
  border-radius: 999px;
  background: none;
  color: var(--ink-3);
  cursor: pointer;
}
.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 a,
.head .account button {
  font: inherit;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--accent-text);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

/* 計算中は他の画面へ誘わない。抜けるのは「やめる」だけ */
.head--focus { justify-content: space-between; 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; }

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

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

.card-title { font-size: 0.92rem; font-weight: 700; color: var(--ink-2); letter-spacing: 0.03em; }

/* ボタンは影ではなく下辺の縁で沈む。押せるものだと子どもにも分かる */
.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;
  font-family: inherit;
  cursor: pointer;
}

.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; }

/* 押せる白いカード。ただのカードと見分けがつくよう、下辺の縁で沈ませる */
.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 #d5ded8, 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); }

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

.badge.hard { background: var(--lv-hard); color: var(--on-lv-hard); }
.badge.mid { background: var(--lv-mid); color: var(--on-lv-mid); }
.badge.easy { background: var(--lv-easy); color: var(--on-lv-easy); }
.badge.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); }

/* レベル帯（初級/中級/上級）。おまかせが出す範囲を切り替える。
   山吹は「面」の色なので、選んでいる級を面で塗って強く見せる */
.levels { display: flex; gap: 8px; flex-wrap: wrap; }
.levels a {
  padding: 9px 26px;
  border-radius: 999px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--accent-text);
  background: var(--card);
  border: 1.5px solid var(--edge);
  text-decoration: none;
}
.levels a.on {
  background: var(--accent);
  border-color: var(--accent-edge);
  color: var(--on-accent);
  box-shadow: 0 2px 0 var(--accent-edge);
}

.bar { height: 9px; border-radius: 999px; background: var(--lv-easy); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: 999px; background: var(--accent); }

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

/* 手描きの線画は単色なので、マスクにして好きな色で塗る。
   これで 2013年のピンクに縛られなくなった */
.art {
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  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; }

.welcome { text-align: center; padding: 8px 0 4px; }
.welcome .t { font-size: 1.6rem; font-weight: 700; }
.welcome .s { color: var(--ink-2); font-size: 1rem; }

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

.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; }

/* 黒板。ノイズ質感も木枠もチョーク受け皿も無い。深い緑の面だけ */
.board {
  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;
}

/* 丸印の基準（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: 2rem; font-weight: 700; color: var(--board-dim); }
.board-head .msg { font-size: 1.05rem; font-weight: 700; color: var(--board-msg); }

/* 式はこの画面でいちばん大きな文字。枠を広げるのではなく、枠の中の字を大きくする */
.expr-wrap {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 黒板の要素のフォントサイズ。縦長と横長で別々に変えられる（横長は下の @media で上書き）。 */
.board {
  --fs-expr: clamp(3rem, 11vw, 5rem);   /* 問題式 */
  --fs-answer: clamp(4rem, 14vw, 8rem); /* 答え（右下） */
}

.expr {
  position: relative;
  z-index: 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; }

/* ごほうびの絵も丸印も、この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: 10%;
  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回まちがえ）は黄色 */

@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;
}

.tell { text-align: center; font-size: 1.05rem; color: var(--board-dim); padding-bottom: 6px; }

.board-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; 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: 15%;
  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%; }
}

.board-foot .said { font-size: clamp(3rem, 14vw, 4rem); font-weight: 700; color: var(--board-msg); }

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

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

.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 {
  aspect-ratio: 1 / 1.05;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  border: 1px solid var(--edge);
  background: var(--card);
  box-shadow: 0 2px 0 #d5ded8;
  font-family: inherit;
  font-size: clamp(1.6rem, 4.6vw, 2.4rem);
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
}

.keys--choose .key { aspect-ratio: 2.1; font-size: clamp(1.9rem, 6vw, 2.7rem); }
.key:active { transform: translateY(2px); box-shadow: none; }

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

.key-clear {
  padding: 14px 30px;
  border-radius: var(--r-sm);
  border: 1px solid var(--edge);
  background: var(--card);
  color: var(--ink-2);
  font-family: inherit;
  font-size: 1.1rem;
  font-weight: 700;
  box-shadow: 0 2px 0 #d5ded8;
  cursor: pointer;
}

.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-family: inherit;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  box-shadow: 0 3px 0 var(--accent-edge);
  cursor: pointer;
}

.key-clear:active, .key-enter:active { transform: translateY(2px); box-shadow: none; }

/* 補助ボタンは罫線で切って、答える手の動線から外す。
   ただし「ボタンだと分かる」ことは譲らない。透明な地に薄い字だと、ただの文字に見える */
.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;
  border: 1px solid var(--edge);
  background: var(--card);
  color: var(--ink-2);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  box-shadow: 0 2px 0 #d5ded8;
  cursor: pointer;
}

.subs button:active { transform: translateY(2px); box-shadow: none; }
.subs button:disabled { opacity: 0.4; box-shadow: none; }

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

.summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--accent-soft);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  padding: 13px 15px;
  font-weight: 700;
}

.summary { font-size: 1.05rem; }
.summary a { color: var(--accent-text); text-decoration: 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 .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: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ink-2);
  cursor: pointer;
}

.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; }

.lv { display: block; }
.lv.hard { background: var(--lv-hard); }
.lv.mid { background: var(--lv-mid); }
.lv.easy { background: var(--lv-easy); }
.lv.new { background: transparent; border: 1px dashed var(--edge); }
.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; }
.cell .art { width: 62%; height: 62%; }
/* 取得済みのごほうびは元の色そのまま（<img>）。未取得の「？」だけ .art dim で塗る */
.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: inherit;
  font-size: 1rem;
  padding: 10px 12px;
  border: 1px solid var(--edge);
  border-radius: var(--r-sm);
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
}

.toggle { width: 46px; height: 26px; border-radius: 999px; background: var(--line); position: relative; flex: none; border: none; cursor: pointer; 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) {
  a, button, select, .toggle, .cell, .quiet, .card[href], label.pick { transition: background-color 0.12s, border-color 0.12s, box-shadow 0.12s, transform 0.12s, color 0.12s; }

  .cta:hover { background: #e9a63f; }
  .quiet:hover { border-color: var(--edge); 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); }
  .key-enter:hover { background: #e9a63f; }
  .subs button:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-text); }

  .nav a:hover { background: var(--accent-soft); color: var(--accent-text); }
  .nav a.on:hover { background: var(--accent-soft); }
  .tabs a:hover { color: var(--ink); }
  .levels a:hover:not(.on) { border-color: var(--accent); color: var(--accent-text); }
  .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); }
  .card[href]:hover { border-color: var(--edge); }
  .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); }

  .main { padding: 30px 36px; background-size: 26px 26px; }
  .grid { gap: 18px; }
  .card { padding: 20px; }

  /* 短い画面（トップなど）が上に貼り付かないようにする。
     はみ出すほど長い画面では safe が効いて、頭が切れずに上端から始まる */
  .main { display: grid; }

  /* 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; }

  /* 黒板も、広い画面では大きく取る */
  .column { max-width: 960px; }
  .board { min-height: 360px; }
  .expr { font-size: 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); }

  /* テンキーは 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; }
  .op-bottom { margin-top: auto; }

  /* 黒板は余った縦を吸わせる。キーパッドを下端に寄せた結果、黒板だけが上に浮いていた */
  .board { min-height: 200px; flex: 1; }
  .board-foot { min-height: 60px; }
}

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