/* 4択の共通部品（js/choices.js）。10/31、デザインレビューの指摘から。

   りか・しゃかい・かんじ・えいご・おおもじ・ちず の4択を ここに1つにまとめる。
   前は科目ごとに .rika-choice / .kanji-choice / .eigo-choice / .case-choice /
   .chiri-choice が別々にあって、並び（1列・2×2・3+1）も大きさも色もバラバラ
   だった。決めごと:
     - 文字の4択は いつも 2×2。1つが 88px 以上の高さ（指の目標を大きく、
       読む順を 左上→右上→左下→右下 に）
     - 絵の4択（しゃかいの地図記号・えいごの絵文字）は 正方形を横に4つ
     - 色の意味は科目で変えない: 正解＝緑（○）、押した まちがい＝赤（✕）、
       ほか＝うすく。「答えを見せる」のカードは青
     - 出てから 0.6秒は うすくて押せない（押せる瞬間が見える） */

:root {
  --choice-line: #d9d2c7;
  --choice-learn: #2f6fb5;
  --choice-learn-bg: #eaf2ff;
  --choice-learn-line: #bcd3fb;
  --choice-good-bg: #e9f8ee;
  --choice-bad-bg: #fdecea;
}

.choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 2vmin, 18px) clamp(12px, 2.4vmin, 24px);
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  justify-items: stretch;
}

.choice {
  position: relative;
  font-family: inherit;
  font-size: clamp(1.3rem, 4.6vmin, 2.2rem);
  font-weight: 700;
  line-height: 1.25;
  min-height: clamp(88px, 14vh, 118px);
  padding: clamp(8px, 1.6vmin, 14px) clamp(44px, 6vmin, 60px);
  border-radius: 22px;
  border: 4px solid var(--choice-line);
  background: white;
  color: var(--ink);
  cursor: pointer;
  touch-action: manipulation;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow-wrap: anywhere;
  transition: opacity 0.25s ease, border-color 0.25s ease, color 0.25s ease, background 0.12s ease;
}
.choice:active { filter: brightness(0.92); }

/* ○ と ✕ は 左の余白に。文字は中央のまま（印の有無で文字が動かない）。 */
.choice::before {
  position: absolute;
  left: clamp(12px, 2vmin, 20px);
  top: 50%;
  transform: translateY(-50%);
  font-size: clamp(1.4rem, 4.4vmin, 2.2rem);
  font-weight: 800;
  line-height: 1;
}
.choice.correct {
  border-color: var(--good);
  background: var(--choice-good-bg);
  color: #1a7a3f;
}
.choice.correct::before { content: "○"; color: var(--good); }
.choice.wrong {
  border-color: var(--bad);
  background: var(--choice-bad-bg);
  color: #a73c2c;
  pointer-events: none;
  animation: choice-shake 0.35s;
}
.choice.wrong::before { content: "✕"; color: var(--bad); }
.choice.disabled {
  opacity: 0.3;
  pointer-events: none;
}
@keyframes choice-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-7px); }
  75% { transform: translateX(7px); }
}

/* 「まず読む」: 出てから 0.6秒は うすくて押せない。線と文字が ふっと濃くなるのが
   「押していい」の合図。 */
.choices-arming .choice {
  border-color: #efe9df;
  color: #b9b2a6;
  pointer-events: none;
}

/* 絵の4択（地図記号・絵文字）。正方形を横に4つ。入らなければ 2×2 に折れる。 */
.choices.choices-pics {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.choices.choices-pics .choice {
  width: clamp(96px, 19vmin, 150px);
  height: clamp(96px, 19vmin, 150px);
  min-height: 0;
  padding: clamp(8px, 1.6vmin, 14px);
  flex: 0 0 auto;
}
.choices.choices-pics .choice::before {
  left: 8px;
  top: 8px;
  transform: none;
  font-size: clamp(1.1rem, 3vmin, 1.5rem);
}
.choice.choice-pic {
  font-size: clamp(2.2rem, 10vmin, 4.4rem);
  line-height: 1;
}
.choice .shakai-choice-fig { width: 100%; height: 100%; }

/* 教えるカードの「つぎへ」: 4択と同じ枠に 1つだけ、主ボタンの色で。
   押せないあいだは うすい（style.css の button:disabled）。 */
.choices .choice-next {
  grid-column: 1 / -1;
  justify-self: center;
  min-width: min(100%, 360px);
  min-height: clamp(72px, 11vh, 96px);
  background: var(--accent);
  border-color: var(--accent);
  color: white;
  box-shadow: 0 5px 0 #d9742f;
}
.choices .choice-next:not(:disabled):active {
  filter: none;
  transform: translateY(3px);
  box-shadow: 0 2px 0 #d9742f;
}

/* ---------- こたえのカード（2回まちがえたあと） ----------
   4択の下に、流れの中に置く（選択肢に かぶせない）。青＝「答えを見せる」。
   進むのは「わかった！ つぎへ」を押したときだけ。 */
.answer-card {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2.4vmin, 24px);
  width: 100%;
  max-width: 860px;
  margin: clamp(6px, 1.2vmin, 12px) auto 0;
  padding: clamp(10px, 2vmin, 18px) clamp(14px, 2.6vmin, 26px);
  border-radius: 22px;
  border: 3px solid var(--choice-learn-line);
  background: var(--choice-learn-bg);
  color: #2b3a55;
  animation: answer-card-rise 0.25s ease;
}
@keyframes answer-card-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
.answer-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
}
.answer-card-head {
  font-size: clamp(1.1rem, 3.4vmin, 1.6rem);
  font-weight: 700;
  line-height: 1.4;
}
.answer-card-answer {
  font-size: clamp(1.5rem, 5vmin, 2.4rem);
  font-weight: 800;
  color: var(--choice-learn);
}
.answer-card-answer .shakai-choice-fig,
.answer-card-answer .shakai-teach-fig {
  height: clamp(48px, 9vh, 80px);
  width: auto;
  vertical-align: middle;
}
.answer-card-note {
  font-size: clamp(0.95rem, 2.8vmin, 1.25rem);
  font-weight: 700;
  line-height: 1.45;
}
/* 減点の文（連打）。こたえの文と つなげず、ひとことの頭に小さく赤で。 */
.answer-card-pen {
  display: block;
  font-size: clamp(0.8rem, 2.2vmin, 1rem);
  color: var(--bad);
}
.answer-card-again {
  font-size: clamp(0.8rem, 2.2vmin, 1rem);
  color: #5b6b8c;
  font-weight: 700;
}
.answer-card-next {
  flex: 0 0 auto;
  font-family: inherit;
  font-size: clamp(1.15rem, 3.6vmin, 1.7rem);
  font-weight: 800;
  padding: clamp(12px, 2.4vmin, 18px) clamp(18px, 3.4vmin, 32px);
  min-height: clamp(64px, 10vh, 80px);
  border-radius: 999px;
  border: 0;
  background: var(--choice-learn);
  color: white;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  box-shadow: 0 5px 0 #214f85;
  transition: opacity 0.25s ease, transform 0.1s ease;
}
.answer-card-next:disabled { opacity: 0.35; box-shadow: none; }
.answer-card-next:not(:disabled):active { transform: translateY(3px); box-shadow: 0 2px 0 #214f85; }
.answer-card-next.ready { animation: answer-card-ready 0.3s ease; }
@keyframes answer-card-ready {
  0% { transform: scale(1); }
  50% { transform: scale(1.06); }
  100% { transform: scale(1); }
}

/* カードが出ているあいだ、4択は少し詰める（iPad 横で カードが下に入るように）。 */
.choices-card-shown .choice { min-height: clamp(72px, 10vh, 96px); }

/* 再出題の しるし（feedback に出す。緑でも赤でもない）。 */
.feedback.note { color: #8a8378; }

/* ---------- ふりがな ----------
   熟語全体のルビ（{昆虫|こんちゅう}）で、ルビが漢字より長いとき、ブラウザは
   漢字の字間を広げる（「昆　虫」）。低学年は語の切れ目を見失うので、字間は
   広げず ルビを中央に乗せる。項目データは変えない。 */
.rika-play .ruby, .kanji-play .ruby, .eigo-play .ruby, .case-play .ruby,
.choice .ruby, .answer-card .ruby, .chiri-side .ruby {
  ruby-align: center;
}
.choice .rt, .answer-card .rt {
  font-size: 0.5em;
  font-weight: normal;
  letter-spacing: 0;
}

/* ---------- かんじ: 並びの CSS が無かった（左上に寄っていた） ---------- */
.kanji-play {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 2vh, 18px);
  width: 100%;
  flex: 1;
}

/* ---------- 科目ごとの微調整 ---------- */
/* おおもじ: 文字そのものが問題なので、4択の文字は大きく。 */
.case-choices .choice { font-size: clamp(2.2rem, 9vmin, 4rem); }
/* えいごの つづりの4択。 */
.eigo-choices .choice-word { letter-spacing: 0.04em; }
/* ちず: 左の細い欄（max-width 460px）に入る大きさ。漢字＋よみ の2段。 */
.chiri-choices.choices {
  display: none;
  max-width: 460px;
  gap: 10px;
}
.chiri-choices.choices.shown { display: grid; }
.chiri-choices .choice {
  flex-direction: column;
  gap: 2px;
  min-height: 76px;
  padding: 8px 30px; /* 左の欄は細いので、よみが折れにくい幅に（○✕ の印は left 8px） */
  line-height: 1.2;
}
.chiri-choices .choice .kanji { font-size: clamp(1.15rem, 3.4vmin, 1.6rem); font-weight: 800; white-space: nowrap; }
.chiri-choices .choice .yomi { font-size: clamp(0.7rem, 2vmin, 0.9rem); font-weight: 700; color: #6b6257; }
.chiri-choices .choice.correct .yomi { color: #1a7a3f; }
.chiri-choices .choice.wrong .yomi { color: #a73c2c; }
.chiri-choices .choice::before { left: 8px; font-size: 1.3rem; }
.chiri-side .answer-card { max-width: 460px; flex-direction: column; align-items: stretch; }
.chiri-side .answer-card-next { align-self: center; }

/* iPad たて（幅 820）: 2列のまま。1つが 380px くらい。 */
@media (max-width: 700px) {
  .choice { padding-left: 36px; padding-right: 36px; }
  .answer-card { flex-direction: column; align-items: stretch; }
  .answer-card-next { align-self: center; }
}

/* スマホ横（高さ500px未満）: 4つを1列に。 */
@media (max-height: 500px) {
  .choices { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .choice { min-height: 64px; font-size: clamp(1rem, 4.6vmin, 1.5rem); padding: 6px 28px; }
  .answer-card { padding: 8px 14px; gap: 10px; margin-top: 4px; }
  .answer-card-next { min-height: 48px; padding: 8px 18px; }
}

/* ---------- こたえのカードが出ているあいだ（iPad 横） ----------
   高さ 820 の横画面では、絵のある問い（しゃかいの方位・えいごの絵）に
   2×2 の4択とカードを足すと入りきらず、カードが画面の下に出た（画面は
   スクロールしない）。カードが出ているあいだだけ、絵と すき間を詰めて、
   feedback の行（「答えは こっち」—— カードに同じことが書いてある）を消す。
   たて（高さ 1180）は そのまま。 */
@media (max-height: 900px) {
  .rika-play:has(.answer-card),
  .kanji-play:has(.answer-card),
  .eigo-play:has(.answer-card),
  .case-play:has(.answer-card) {
    gap: clamp(3px, 0.8vh, 8px);
  }
  .rika-play:has(.answer-card) .feedback,
  .kanji-play:has(.answer-card) .feedback,
  .eigo-play:has(.answer-card) .feedback,
  .case-play:has(.answer-card) .feedback {
    display: none;
  }
  .rika-play:has(.answer-card) .shakai-fig { height: clamp(56px, 12vh, 100px); }
  .rika-play:has(.answer-card) .shakai-fig.shakai-uon { height: clamp(72px, 15vh, 124px); }
  .rika-play:has(.answer-card) .shakai-fig.shakai-kigou { height: clamp(48px, 10vh, 84px); }
  .rika-play:has(.answer-card) .rika-prompt { font-size: clamp(1.2rem, 4.4vmin, 2rem); }
  .kanji-play:has(.answer-card) .kanji-word { font-size: clamp(2.4rem, 11vmin, 5rem); }
  .eigo-play:has(.answer-card) .eigo-card { gap: 2px; }
  .eigo-play:has(.answer-card) .eigo-pic { font-size: clamp(2.4rem, 10vmin, 4.6rem); }
  .eigo-play:has(.answer-card) .eigo-word { font-size: clamp(1.8rem, 7vmin, 3.2rem); }
  .eigo-play:has(.answer-card) .eigo-say { padding: 4px 16px; font-size: 1.3rem; }
  .case-play:has(.answer-card) .case-big { font-size: clamp(4rem, 18vmin, 8rem); }
  .choices.choices-pics.choices-card-shown .choice {
    width: clamp(80px, 14vmin, 110px);
    height: clamp(80px, 14vmin, 110px);
  }
  .choices-card-shown .choice-pic { font-size: clamp(2rem, 7vmin, 3.2rem); }
  .answer-card { padding: clamp(8px, 1.4vmin, 14px) clamp(14px, 2.6vmin, 26px); }
}