/* 覚える画面だけ縦中央寄せ(justify-content: center)にしていたため、
   答える画面と**絵の位置が123pxずれていた**。間違い探しで見比べる対象が動くのは致命的
   (2026-08-31、実機で指摘され実測)。上から積んで、文の高さを揃えて位置を合わせる */
.bangs-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  padding: 4px 4px;
}

/* 上の文の行数で絵の位置が動かないよう、高さを固定する。
   「よく見ておいてください」は2行、「どうしますか?」は1行になりがち */
.bangs-instruction, .bangs-question {
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
  min-height: 2.6em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bangs-timer {
  font-size: 40px;
  font-weight: 800;
  color: var(--accent);
  margin: 0;
  font-variant-numeric: tabular-nums;
}

/* ---- 彼女(SVG) ---- */
.bangs-avatar {
  /* 選択肢が6つになった(切った/伸びたを分けたため)。1画面に収めるために絵を詰める。
     実測で 175px なら6つ目の下端が627px(画面664px)に収まる。
     見比べる場面(答え合わせの2枚並べ)は別サイズなので、そちらは縮まない */
  width: 107px;
  height: 160px;
  margin: 0 auto;
}

.bangs-avatar.is-small {
  /* 比較表示はプレイヤーが唯一「学習」する場面。ここを小さくすると、
     ただでさえ弱い前髪の信号がさらに半減する(2026-08-22のレビュー) */
  width: 140px;
  height: 210px;
}

.bangs-avatar .avatar-svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* まばたき。アニメ調の顔は、止まっていると急に人形っぽく見えるので入れている */
.avatar-eyes {
  transform-origin: 100px 94px;
  animation: avatar-blink 5.2s infinite;
}

@keyframes avatar-blink {
  0%, 88%, 100% { transform: scaleY(1); }
  90% { transform: scaleY(0.06); }
  92% { transform: scaleY(1); }
  94% { transform: scaleY(0.06); }
  96% { transform: scaleY(1); }
}

/* 比較の2体が同時に瞬くと、見てほしい前髪から視線が目に持っていかれる */
.bangs-compare figure:last-child .avatar-eyes { animation-delay: -1.7s; }

@media (prefers-reduced-motion: reduce) {
  .avatar-eyes { animation: none; }
}

/* ---- 判定フェーズ ---- */
.bangs-judge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.bangs-choices {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.bangs-choice {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  min-height: 48px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  text-align: left;
}

.bangs-choice:disabled { opacity: 0.65; }

.bangs-choice.is-correct {
  border-color: var(--good);
  background: var(--good-soft);
  opacity: 1;
}

.bangs-choice.is-wrong {
  border-color: var(--bad);
  background: var(--bad-soft);
  opacity: 1;
}

/* ---- 答え合わせ ---- */
.bangs-feedback {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.bangs-verdict {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
}

.bangs-verdict.is-correct { color: var(--good); }
.bangs-verdict.is-wrong { color: var(--bad); }

.bangs-compare {
  display: flex;
  gap: 12px;
  width: 100%;
  justify-content: center;
}

.bangs-compare figure {
  margin: 0;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 8px 4px 4px;
  flex: 1;
  max-width: 150px;
}

.bangs-compare figcaption {
  font-size: 12px;
  color: var(--ink-soft);
  font-weight: 600;
}

.bangs-tease {
  margin: 0;
  font-size: 13.5px;
  color: var(--ink-soft);
  text-align: center;
}

/* 横画面ではキャラを小さくする。縦のまま出すとカウントダウンが折り返しの下に落ちる */
@media (orientation: landscape) and (max-height: 500px) {
  .bangs-avatar { width: 112px; height: 168px; }
  .bangs-avatar.is-small { width: 84px; height: 126px; }
  .bangs-timer { font-size: 28px; }
}

/* 6択でも1画面に収める。46pxはタップ下限44pxを満たす */
.bangs-choice {
  min-height: 46px;
}

/* 相手の反応。正解・不正解ではなく機嫌で返すので、赤緑だけでは足りない */
.bangs-verdict {
  font-size: 15.5px;
  line-height: 1.6;
}

/* 怒られたら、絵ごと揺れる。文字1行だけだと「怒られた」が伝わらない
   (2026-08-31、実機で「絵自体で怒ってほしい、なんならシェイクも」) */
.bangs-avatar.is-angry {
  animation: bangs-shake 0.42s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

@keyframes bangs-shake {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-7px) rotate(-1.5deg); }
  30% { transform: translateX(6px) rotate(1.5deg); }
  45% { transform: translateX(-5px) rotate(-1deg); }
  60% { transform: translateX(4px) rotate(1deg); }
  80% { transform: translateX(-2px); }
}

/* 動きを止める設定の人には揺らさない。ただし怒っている顔は残る */
@media (prefers-reduced-motion: reduce) {
  .bangs-avatar.is-angry { animation: none; }
}

/* 反応の文を大きく、絵の上に出す。6つのボタンの下に埋もれていた */
.bangs-verdict {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.6;
  margin: 2px 0 0;
}