/* キーで答える科目（わりざん・九九・かけざんのひっさん・きまり）の画面（10/31）。
   デザインレビュー（3-5）の直し。style.css の共通の部品（.answer-display・
   .feedback・.keypad）は ほかの画面も使うので、ここでは #block-* で囲って
   この4つの画面だけを変える。

   色の決まり（アプリ全体と同じ）:
     緑 = 正しい答え（正解したとき・答えを見せるとき）
     赤 = 本人が打った まちがい
     オレンジ = いま入るところ（アクセント） */

#block-division,
#block-kuku,
#block-kakezan,
#block-pattern {
  /* ヒントの字の色。アクセントのオレンジ（#ff8c42）は白地で 2.3:1 しかなく、
     小さい字だと読めない。同じ色みで 4.5:1 を超える濃さにする。 */
  --hint-ink: #b45309;
  --good-bg: #eaf7ea;
  --bad-bg: #fdeeee;
}

/* ---------- 答えの欄: 高さを固定する ----------
   数字を打つと欄の高さが変わり、その下のキー全体が 8px 下にずれていた
   （12-kuku-question.png → 12-kuku-correct.png）。連打の途中でキーが動くと
   押しまちがいになる。中身が空でも数字でも同じ高さにする。

   下線だけの欄は「意味のない灰色の線」に見えていた（fable 1-9）。わりざんの
   箱とそろえて、数字が入る「箱」にする。入る場所はいつも1つなので、いつも
   オレンジの枠（＝ここに入る）。 */
#block-kuku .answer-display,
#block-kakezan .answer-display,
#block-pattern .answer-display {
  height: 1.3em;
  min-height: 0;
  line-height: 1.3em;
  min-width: 3.2em;
  padding: 0 0.3em;
  border: 4px solid var(--accent);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 0 0 4px var(--accent-dim);
  font-variant-numeric: tabular-nums;
  /* 打った数字がいちばん大きく見えるように、字は欄いっぱいに */
  font-size: clamp(2.4rem, 7.4vmin, 3.6rem);
}

#block-kuku .answer-display.correct,
#block-kakezan .answer-display.correct,
#block-pattern .answer-display.correct {
  border-color: var(--good);
  box-shadow: 0 0 0 4px #c8e6c9;
  background: var(--good-bg);
  color: #2e7d32;
}

#block-kuku .answer-display.wrong,
#block-kakezan .answer-display.wrong,
#block-pattern .answer-display.wrong {
  border-color: var(--bad);
  box-shadow: 0 0 0 4px #f8caca;
  background: var(--bad-bg);
  color: #c62828;
}

/* ---------- ひとことの欄: 2行分の高さを取っておく ----------
   「ヒント: となりとの さを 見てみよう！」や「答えは 4 あまり 4！ 次は
   できるよ」は2行に折れる。そのたびにキーが 17px 下にずれていた。2行分を
   最初から取っておき、1行のときは まん中に出す。 */
#block-division .feedback,
#block-kuku .feedback,
#block-kakezan .feedback,
#block-pattern .feedback {
  height: 2.6em;
  min-height: 0;
  line-height: 1.3;
  font-size: clamp(1.05rem, 2.8vmin, 1.4rem);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  width: 100%;
  /* 緑の字は 白地で読める濃さに（#4caf50 は 2.8:1） */
  color: #2e7d32;
}

#block-division .feedback.bad,
#block-kuku .feedback.bad,
#block-kakezan .feedback.bad,
#block-pattern .feedback.bad {
  color: #c62828;
}

/* ---------- わりざん: 答えの箱 ----------
   .time-box には CSS が一つも無く、29×24px・13px の素のボタンだった
   （時計の科目を消したときに一緒に消えた。15-division-answer-boxes.png）。
   打った数字が画面でいちばん小さい字になり、「答え」と「あまり」の
   どちらに入るのかも見えなかった。九九の欄と同じ大きさの箱を並べ、
   いま入る箱をオレンジの太い枠＋点滅する棒で見せる。箱を押すと その箱に
   入る（engine-division.js の click）。

   ラベルは箱の上: grid で「ラベル→箱」を たてに並べ、あまりの組を右に足す。 */
#block-division .div-answer-row {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: auto auto;
  justify-content: center;
  align-items: end;
  column-gap: clamp(14px, 3vmin, 28px);
  row-gap: 4px;
  margin-bottom: 0;
}

#block-division .time-label {
  justify-self: center;
  /* ふりがなの有る「答え」と無い「あまり」で、箱の高さがずれないように
     ラベルの欄の高さをそろえる */
  height: 1.8em;
  display: flex;
  align-items: flex-end;
  font-size: clamp(1.05rem, 2.8vmin, 1.35rem);
  font-weight: 800;
  color: #555;
  line-height: 1.1;
}

#block-division .time-label .rt {
  font-size: 0.55em;
  font-weight: 700;
  color: #777;
}

#block-division .time-box {
  font-family: inherit;
  font-size: clamp(2.4rem, 7.4vmin, 3.6rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  min-width: 2.2em;
  height: 1.3em;
  line-height: 1;
  padding: 0 0.2em;
  border: 4px solid #cfcfcf;
  border-radius: 18px;
  background: #fff;
  cursor: pointer;
  touch-action: manipulation;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

/* 押したときは縮めずに暗くする（style.css の .big-button:active と同じ理由） */
#block-division .time-box:active {
  filter: brightness(0.95);
}

#block-division .time-box.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 5px var(--accent-dim);
}

/* いま入る箱が空のときは、点滅する棒を出す（数字はここに入る、の合図）。
   空でない箱は数字そのものが見えるので棒は出さない。 */
#block-division .time-box.active:empty::after {
  content: "";
  width: 4px;
  height: 0.9em;
  border-radius: 2px;
  background: var(--accent);
  animation: kp-caret 1s steps(1) infinite;
}

@keyframes kp-caret {
  50% { opacity: 0; }
}

/* 正解・答えを見せる＝緑（正しい答え）。まちがい＝赤（本人が打った数）。
   いまの箱のオレンジより後ろに書いて、色を上書きする。 */
#block-division .time-box.correct {
  border-color: var(--good);
  box-shadow: 0 0 0 5px #c8e6c9;
  background: var(--good-bg);
  color: #2e7d32;
}

#block-division .time-box.wrong {
  border-color: var(--bad);
  box-shadow: 0 0 0 5px #f8caca;
  background: var(--bad-bg);
  color: #c62828;
  animation: shake 0.35s;
}

#block-division .time-box.correct::after,
#block-division .time-box.wrong::after {
  display: none;
}

/* ---------- ヒント・足場の字を読める濃さに ----------
   レビュー 3-5「ヒントの文字色（オレンジ 2.31:1）だけ濃くする」。 */
#block-division .div-hint,
#block-kuku .kuku-reading,
#block-kuku .kuku-row-label {
  color: var(--hint-ink);
}

#block-division .div-hint {
  font-size: clamp(1rem, 2.8vmin, 1.3rem);
}

#block-division .div-prompt {
  color: #7a5c3e;
}

#block-division .div-ladder .dl-label,
#block-division .div-ladder .dl-more {
  color: #666;
}

#block-kuku .kuku-split-row.sum {
  color: var(--hint-ink);
}

/* きまり: 「+2 +2」は きまりそのもの（答えより大事）なのに 0.8rem だった */
#block-pattern .pattern-step-cell {
  font-size: clamp(0.95rem, 2.6vmin, 1.2rem);
}

#block-pattern .step-up {
  color: var(--hint-ink);
}

#block-pattern .pattern-blank {
  color: var(--hint-ink);
}

#block-pattern .pattern-blank.filled {
  color: #2e7d32;
}

#block-pattern .pattern-prompt {
  font-size: clamp(1.1rem, 3.2vmin, 1.5rem);
}

/* ---------- 九九: 「つぎへ」をボタンの形に ----------
   灰色の小さい字（#aaa, 1rem）で、どこをタップするのか分からなかった
   （レビュー 3-5）。押せるのはブロック全体（engine-kuku.js）なので
   これ自体は飾りだが、「押すと進む」が見て分かる形にする。 */
#block-kuku .kuku-tap-hint {
  font-size: clamp(1.1rem, 3vmin, 1.4rem);
  font-weight: 800;
  color: #fff;
  background: var(--accent);
  border-radius: 999px;
  padding: 0.55em 1.3em 0.4em;
  box-shadow: 0 3px 0 #d96f2b;
  line-height: 1.3;
}

#block-kuku .kuku-tap-hint .rt {
  font-size: 0.55em;
  color: #fff;
}

/* ---------- iPad たて（820×1180） ----------
   左（問題）と右（キー）を よこに並べたまま、左が中身の幅で広がって
   いたので、たてでは画面からはみ出していた: 「17 × 17 = ?」の「1」と
   ✓ キーの右はしが切れて見えなかった（10/31 の実測）。たて画面は幅が
   足りないので、キーの欄を 44vw に、左を残りの幅にして、問題の字も
   幅に合わせて少し小さくする。スマホ幅（700px 以下）は style.css が
   たて1列にしているので、ここでは触らない。 */
@media (orientation: portrait) and (min-width: 701px) {
  #block-division .left-pane,
  #block-kuku .left-pane,
  #block-kakezan .left-pane,
  #block-pattern .left-pane {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
    /* 「考え／よう」のように言葉の途中で折れないよう、空白のところで折る */
    word-break: keep-all;
    overflow-wrap: anywhere;
  }

  #block-division .right-pane,
  #block-kuku .right-pane,
  #block-kakezan .right-pane,
  #block-pattern .right-pane {
    width: min(400px, 44vw);
  }

  #block-kuku .kuku-fact {
    font-size: clamp(2rem, 7vw, 3.4rem);
  }

  #block-division .div-fact {
    font-size: clamp(2rem, 7vw, 3.4rem);
  }
}

/* ---------- 低い画面（iPhone よこなど） ----------
   style.css の @media (max-height: 500px) と同じく、欄を詰める。 */
@media (max-height: 500px) {
  #block-kuku .answer-display,
  #block-kakezan .answer-display,
  #block-pattern .answer-display,
  #block-division .time-box {
    font-size: clamp(1.6rem, 5.5vh, 3rem);
    border-width: 3px;
  }

  #block-division .time-label {
    height: 1.6em;
    font-size: 0.9rem;
  }

  #block-division .feedback,
  #block-kuku .feedback,
  #block-kakezan .feedback,
  #block-pattern .feedback {
    font-size: clamp(0.85rem, 3.4vh, 1.1rem);
  }
}