/* ---------- 問題画面の見た目（10/31、「ホームはいいけど問題画面が変わらない」への対応） ----------

   ホーム画面（css/start.css）と同じ言葉で、問題画面を作り直す:
     クリーム色の地（#fffaf3）の上に、白い「問題のカード」（うす茶の線 #e4dccf、
     角丸）。主の色はオレンジ #ff8c42 に こい茶の字 #3b1d00（白字は 2.3:1 で読めない）。
     科目ごとに カードの上の線と 名札（チップ）の色を変える。

   ここは**見た目だけ**。出す問題・点・時間・記録・流れは一切変えない。JS が
   使っている id / class も変えない（上書きするだけ）。index.html では css/*.css の
   いちばん後ろに読むので、style.css・session-ui.css・choices.css・keypad-screens.css
   より勝つ。

   色（白地で 4.5:1 以上の字だけ使う）:
     本文 #2b2b2b ／ 補足 #5c5c5c ／ チップの字は科目ごとに濃い色
     正解 #1e7a3a（字）・#2e9e4f（線）・#e9f8ee（地）
     まちがい #b02a2a（字）・#d94848（線）・#fdecea（地）
     こたえを見せる（青） #2f6fb5・#eaf2ff・#bcd3fb */

#screen-play {
  --q-bg: #fffaf3;
  --q-paper: #ffffff;
  --q-line: #e4dccf;
  --q-line-soft: #efe7da;
  --q-surface: #f6f3ef;
  --q-ink: #2b2b2b;
  --q-muted: #5c5c5c;
  --q-accent: #ff8c42;
  --q-accent-ink: #3b1d00;
  --q-accent-deep: #e96f1f;
  --q-accent-text: #c2410c;  /* オレンジの字（白地で 4.6:1） */
  --q-accent-soft: #fff3e8;
  --q-good: #2e9e4f;
  --q-good-ink: #1e7a3a;
  --q-good-soft: #e9f8ee;
  --q-bad: #d94848;
  --q-bad-ink: #b02a2a;
  --q-bad-soft: #fdecea;
  --q-learn: #2f6fb5;
  --q-learn-ink: #1d4ed8;
  --q-learn-soft: #eaf2ff;
  --q-learn-line: #bcd3fb;
  --q-radius: 26px;
  /* 科目の色（カードの上の線・名札）。ブロックごとに下で上書きする。 */
  --subj: var(--q-accent);
  --subj-ink: var(--q-accent-text);
  --subj-soft: var(--q-accent-soft);

  background: var(--q-bg);
  color: var(--q-ink);
  position: relative; /* 低い画面で「こまったら」を右上に浮かせる土台（session-ui.css） */
}

/* 科目ごとの色。線（--subj）は何色でもよいが、字（--subj-ink）は白地で 4.5:1 以上。 */
#block-rika     { --subj: #2a9d8f; --subj-ink: #176b62; --subj-soft: #e6f6f3; }
#block-shakai   { --subj: #c97b2e; --subj-ink: #8a4a10; --subj-soft: #fbf0e2; }
#block-kanji    { --subj: #8b5cf6; --subj-ink: #5b3ab5; --subj-soft: #f1ecfd; }
#block-eigo     { --subj: #3b82f6; --subj-ink: #1d4ed8; --subj-soft: #eaf2ff; }
#block-case     { --subj: #0ea5a4; --subj-ink: #0f6b6a; --subj-soft: #e3f7f6; }
#block-chiri    { --subj: #4caf50; --subj-ink: #1e7a3a; --subj-soft: #e9f8ee; }
#block-kuku     { --subj: #ff8c42; --subj-ink: #c2410c; --subj-soft: #fff3e8; }
#block-kakezan  { --subj: #ff8c42; --subj-ink: #c2410c; --subj-soft: #fff3e8; }
#block-division { --subj: #ef6351; --subj-ink: #b02a2a; --subj-soft: #fdecea; }
#block-pattern  { --subj: #e0529b; --subj-ink: #a3195b; --subj-soft: #fdeaf3; }
#block-math     { --subj: #ff8c42; --subj-ink: #c2410c; --subj-soft: #fff3e8; }
#block-hissan   { --subj: #ff8c42; --subj-ink: #c2410c; --subj-soft: #fff3e8; }

#screen-play .rt {
  font-weight: 500;
  color: var(--q-muted);
}

/* ===== 上の帯・下の「こまったら」は紙の色に合わせるだけ ===== */
#screen-play .playbar-pause,
#screen-play .help-btn {
  border-color: var(--q-line);
  background: var(--q-paper);
  color: var(--q-muted);
}
#screen-play .playbar-pause:active,
#screen-play .help-btn:active {
  background: var(--q-accent-soft);
  border-color: var(--q-accent);
  filter: none;
}
#screen-play .playbar-pips .pip { background: #e8e1d6; }
#screen-play .playbar-bar { background: #e8e1d6; }
#screen-play .playbar-stop { border-color: var(--q-line); }
#screen-play .playbar-subject { color: var(--q-accent-text); }
#screen-play > .qtimer-track { background: #e8e1d6; }

/* ===== 問題のカード =====
   科目ごとの入れ物（.rika-play / .kanji-play / .eigo-play / .case-play、
   キーで答える科目は .left-pane、ちずは .chiri-side）を白いカードにする。
   上に科目の色の線。中身の並び（flex 縦・中央）は style.css のまま。 */
.subject-block.active {
  align-items: center;
}

.subject-block > .rika-play,
.subject-block > .kanji-play,
.subject-block > .eigo-play,
.subject-block > .case-play,
.subject-block > .kb-play,
.subject-block .play-main > .left-pane {
  position: relative;
  background: var(--q-paper);
  border: 3px solid var(--q-line);
  border-top: 8px solid var(--subj);
  border-radius: var(--q-radius);
  box-shadow: 0 4px 0 var(--q-line-soft);
  padding: clamp(14px, 2.4vmin, 24px) clamp(18px, 3vmin, 32px) clamp(16px, 2.6vmin, 26px);
  max-width: 1080px;
  width: 100%;
  min-height: 0;
}

/* .play-main（左＝問題のカード、右＝キー）。左のカードは残りの幅を全部使い、
   高さは行いっぱい（キーの列と同じ高さ）。 */
.subject-block .play-main {
  align-items: stretch;
  gap: clamp(16px, 3vw, 40px);
}
.subject-block .play-main > .left-pane {
  flex: 1 1 0;
  min-width: 0;
  justify-content: center;
}
.subject-block .play-main > .right-pane {
  align-self: center;
}

/* ===== 名札（科目のバナー・トピック） =====
   上の帯に科目名があるので、本文の「🔬 理科」は出さない。「新しい ○○」の
   ときだけ「new!」のチップとして出す（その状態は大事）。
   教えているかどうかは、各科目の印で見分ける:
     りか  .rika-teach.shown ／ しゃかい .shakai-teaching ／ かんじ .kanji-teach.shown
     えいご .choice-next（つぎへ）／ おおもじ .case-pair.shown */
#screen-play .phase-banner {
  display: inline-block;
  align-self: center;
  min-height: 0;
  padding: 4px 16px;
  border-radius: 999px;
  background: var(--subj-soft);
  color: var(--subj-ink);
  font-size: clamp(0.95rem, 2.4vmin, 1.2rem);
  font-weight: 800;
  line-height: 1.5;
  text-align: center;
}
#screen-play .phase-banner:empty { display: none; }
#screen-play .phase-banner .rt { color: inherit; opacity: 0.8; }

#screen-play .rika-play:not(.shakai-play):not(:has(.rika-teach.shown)) > .phase-banner,
#screen-play .shakai-play:not(.shakai-teaching) > .phase-banner,
#screen-play .kanji-play:not(:has(.kanji-teach.shown)) > .phase-banner,
#screen-play .eigo-play:not(:has(.choice-next)) > .phase-banner,
#screen-play .case-play:not(:has(.case-pair.shown)) > .phase-banner {
  display: none;
}

/* 毎問くり返す名札は出さない（「情報が多い」10/31）: 九九・わりざんは JS が
   .banner-plain を付ける（新しい問題のときだけ出る）。きまり・かけざんの筆算は
   いつも同じ文なので いつも消す。わりざんの「答えは？」の小さな行も、式と箱で
   分かるので消す（はじめての問いの .main は残す）。 */
#screen-play .phase-banner.banner-plain,
#screen-play #pattern-phase-banner,
#screen-play #kz-banner,
#block-division .div-prompt:not(.main) { display: none; }

/* 「新しい ○○」= オレンジの new! チップ（カードの上の線もオレンジに）。 */
#screen-play .rika-play:has(.rika-teach.shown) > .phase-banner,
#screen-play .shakai-play.shakai-teaching > .phase-banner,
#screen-play .kanji-play:has(.kanji-teach.shown) > .phase-banner,
#screen-play .eigo-play:has(.choice-next) > .phase-banner,
#screen-play .case-play:has(.case-pair.shown) > .phase-banner {
  background: var(--q-accent);
  color: var(--q-accent-ink);
  box-shadow: 0 3px 0 var(--q-accent-deep);
}
#screen-play .rika-play:has(.rika-teach.shown) > .phase-banner .rt,
#screen-play .shakai-play.shakai-teaching > .phase-banner .rt,
#screen-play .kanji-play:has(.kanji-teach.shown) > .phase-banner .rt,
#screen-play .eigo-play:has(.choice-next) > .phase-banner .rt,
#screen-play .case-play:has(.case-pair.shown) > .phase-banner .rt {
  color: #5a3a1a;
}
.subject-block > .rika-play:has(.rika-teach.shown),
.subject-block > .shakai-play.shakai-teaching,
.subject-block > .kanji-play:has(.kanji-teach.shown),
.subject-block > .eigo-play:has(.choice-next),
.subject-block > .case-play:has(.case-pair.shown) {
  border-top-color: var(--q-accent);
}

/* トピックの名札（りか・しゃかい・えいご）: うすい科目色のチップ。 */
#screen-play .rika-topic,
#screen-play .eigo-topic {
  opacity: 1;
  padding: 3px 14px;
  border-radius: 999px;
  background: var(--subj-soft);
  color: var(--subj-ink);
  font-size: clamp(0.9rem, 2.3vmin, 1.1rem);
  font-weight: 800;
  line-height: 1.5;
}
#screen-play .rika-topic:empty,
#screen-play .eigo-topic:empty { display: none; }

/* ===== 問いの字 ===== */
#screen-play .rika-prompt,
#screen-play .kanji-prompt,
#screen-play .case-prompt,
#screen-play .chiri-card,
#screen-play .kuku-fact,
#screen-play .div-fact,
#screen-play .div-prompt.main,
#screen-play .kuku-phrase,
#screen-play .hissan-prompt,
#screen-play .pattern-prompt,
#screen-play .kb-prompt,
#screen-play .operand-num {
  color: var(--q-ink);
}

/* 答えそのものを大きく出すところ（かんじの字・えいごのつづり・おおもじ）は
   オレンジのまま、少し濃く。大きな字なので 3:1 あれば読める（#d9601a = 3.6:1）。 */
#screen-play .kanji-word,
#screen-play .eigo-word,
#screen-play .case-big,
#screen-play .case-face {
  color: #d9601a;
}

/* 補足の字は うすい灰ではなく読める濃さの茶灰に。 */
#screen-play .chiri-prompt,
#screen-play .div-prompt,
#screen-play .chiri-yomi,
#screen-play .case-eq,
#screen-play .frame-plus,
#screen-play .hissan-cell.op,
#screen-play .kanji-teach-arrow {
  color: var(--q-muted);
}
#screen-play .chiri-stats,
#screen-play .hissan-note,
#screen-play .group-caption,
#screen-play .difficulty-tag {
  color: var(--q-accent-text);
}

/* ===== ひとこと（feedback）: 字だけでなく、小さなピルに =====
   正解＝緑の地、まちがい＝赤の地、再出題の しるし＝灰の地。空のときは何も出ない
   （高さは style.css / keypad-screens.css のまま、キーが動かない）。 */
#screen-play .feedback {
  color: var(--q-good-ink);
  font-weight: 800;
}
#screen-play .feedback.bad { color: var(--q-bad-ink); }
#screen-play .feedback.note { color: var(--q-muted); }

/* 空のときも ピルと同じ高さを取っておく: 出た瞬間に4択が下にずれない。 */
.rika-play > .feedback,
.kanji-play > .feedback,
.eigo-play > .feedback,
.case-play > .feedback,
.chiri-side > .feedback {
  min-height: calc(1.6em + 8px);
  line-height: 1.6;
}
.rika-play > .feedback:not(:empty),
.kanji-play > .feedback:not(:empty),
.eigo-play > .feedback:not(:empty),
.case-play > .feedback:not(:empty),
.chiri-side > .feedback:not(:empty) {
  display: inline-block;
  align-self: center;
  padding: 4px 20px;
  border-radius: 999px;
  background: var(--q-good-soft);
  line-height: 1.6;
  max-width: 100%;
}
.rika-play > .feedback.bad:not(:empty),
.kanji-play > .feedback.bad:not(:empty),
.eigo-play > .feedback.bad:not(:empty),
.case-play > .feedback.bad:not(:empty),
.chiri-side > .feedback.bad:not(:empty) {
  background: var(--q-bad-soft);
}
.rika-play > .feedback.note:not(:empty),
.kanji-play > .feedback.note:not(:empty),
.eigo-play > .feedback.note:not(:empty),
.case-play > .feedback.note:not(:empty),
.chiri-side > .feedback.note:not(:empty) {
  background: var(--q-surface);
}
/* りか・しゃかいは ふりがなのために line-height: 2 になっている。ピルの中では
   少し詰める（ルビの分は padding で取る）。 */
.rika-play > .feedback:not(:empty) { line-height: 1.9; }
.rika-play > .feedback { min-height: calc(1.9em + 8px); }

/* キーで答える科目の ひとこと は 2行ぶんの箱（keypad-screens.css）。その箱を
   そのまま色の地にする。 */
#block-division .feedback:not(:empty),
#block-kuku .feedback:not(:empty),
#block-kakezan .feedback:not(:empty),
#block-pattern .feedback:not(:empty),
#block-math .feedback:not(:empty),
#block-hissan .feedback:not(:empty) {
  border-radius: 18px;
  background: var(--q-good-soft);
  color: var(--q-good-ink);
  padding: 0 14px;
}
#block-division .feedback.bad:not(:empty),
#block-kuku .feedback.bad:not(:empty),
#block-kakezan .feedback.bad:not(:empty),
#block-pattern .feedback.bad:not(:empty),
#block-math .feedback.bad:not(:empty),
#block-hissan .feedback.bad:not(:empty) {
  background: var(--q-bad-soft);
  color: var(--q-bad-ink);
}

/* ===== 4択（js/choices.js の .choice）: 紙のカード =====
   線は うす茶、下に うすい影（紙が少し浮いている）。押した瞬間は オレンジの枠と
   うすいオレンジの地（縮めない: style.css の方針）。 */
#screen-play .choice {
  border: 3px solid var(--q-line);
  background: var(--q-paper);
  color: var(--q-ink);
  box-shadow: 0 4px 0 var(--q-line-soft);
  font-weight: 800;
}
#screen-play .choice:active {
  filter: none;
  background: var(--q-accent-soft);
  border-color: var(--q-accent);
  box-shadow: 0 4px 0 #ffd9b3;
}
#screen-play .choice.correct {
  border-color: var(--q-good);
  background: var(--q-good-soft);
  color: var(--q-good-ink);
  box-shadow: 0 4px 0 #c6e9d1;
}
#screen-play .choice.correct::before { color: var(--q-good); }
#screen-play .choice.wrong {
  border-color: var(--q-bad);
  background: var(--q-bad-soft);
  color: var(--q-bad-ink);
  box-shadow: 0 4px 0 #f5c6bf;
}
#screen-play .choice.wrong::before { color: var(--q-bad); }
#screen-play .choice.disabled { box-shadow: none; }
#screen-play .choices-arming .choice {
  border-color: var(--q-line-soft);
  color: #b9b2a6;
  box-shadow: none;
}
#screen-play .chiri-choices .choice .yomi { color: var(--q-muted); }

/* 教えるカードの「つぎへ」= ホームの「はじめる」と同じ主ボタン（オレンジに こい茶の字）。 */
#screen-play .choices .choice-next,
#screen-play .choice-next {
  background: var(--q-accent);
  border-color: var(--q-accent);
  color: var(--q-accent-ink);
  box-shadow: 0 5px 0 var(--q-accent-deep);
  font-weight: 900;
}
#screen-play .choice-next .rt { color: #5a3a1a; }
#screen-play .choice-next:not(:disabled):active {
  background: var(--q-accent);
  border-color: var(--q-accent);
  transform: translateY(3px);
  box-shadow: 0 2px 0 var(--q-accent-deep);
}
#screen-play .choice-next.waiting { opacity: 0.4; }

/* ===== 教えるカード（new!）: こたえを 科目色の枠の中に ===== */
#screen-play .rika-teach.shown,
#screen-play .kanji-teach.shown {
  padding: clamp(8px, 1.6vmin, 14px) clamp(20px, 4vmin, 40px);
  border-radius: 20px;
  background: var(--q-accent-soft);
  border: 2px dashed #ffc38f;
  max-width: 100%;
}
#screen-play .rika-teach-answer,
#screen-play .kanji-teach-yomi {
  color: #d9601a;
}
#screen-play .rika-teach-note {
  opacity: 1;
  color: var(--q-muted);
  font-weight: 700;
}
#screen-play .case-pair.shown {
  padding: clamp(6px, 1.4vmin, 12px) clamp(24px, 5vmin, 48px);
  border-radius: 20px;
  background: var(--q-accent-soft);
  border: 2px dashed #ffc38f;
}

/* こたえのカードが出ているあいだ、ひとこと（「答えは こっち」）は同じことなので
   見せない。場所は残す（4択が上にずれない）。高さの足りない画面では display: none
   にして場所も返す（下の @media）。 */
#screen-play .rika-play:has(.answer-card) > .feedback,
#screen-play .kanji-play:has(.answer-card) > .feedback,
#screen-play .eigo-play:has(.answer-card) > .feedback,
#screen-play .case-play:has(.answer-card) > .feedback,
#screen-play .chiri-side:has(.answer-card) > .feedback { visibility: hidden; }

/* こたえのカード（2回まちがえたあと）。青はそのまま（＝答えを見せる、の色）。 */
#screen-play .answer-card {
  border: 3px solid var(--q-learn-line);
  background: var(--q-learn-soft);
  box-shadow: 0 4px 0 #d6e4fb;
}
#screen-play .answer-card-answer { color: var(--q-learn-ink); }
#screen-play .answer-card-next {
  background: var(--q-learn);
  box-shadow: 0 5px 0 #214f85;
}

/* ===== キー（わりざん・九九・ひっさん・きまり）: 紙のキー =====
   白いキーに うす茶の線、下に影。数字は太く大きく。✓ はオレンジに こい茶の ✓。
   押したときは色だけ変える（縮めない: util.js の onKeyTap を参照）。 */
#screen-play .keypad {
  gap: clamp(8px, 1.8vmin, 14px);
}
#screen-play .key {
  border: 3px solid var(--q-line);
  border-radius: 20px;
  background: var(--q-paper);
  color: var(--q-ink);
  font-weight: 800;
  font-size: clamp(1.6rem, 4.6vmin, 2.3rem);
  box-shadow: 0 4px 0 var(--q-line-soft);
  transition: background 0.08s ease, border-color 0.08s ease;
}
#screen-play .key:active,
#screen-play .key.key-pressed {
  background: var(--q-accent-soft);
  border-color: var(--q-accent);
}
#screen-play .key-del {
  color: var(--q-muted);
  background: var(--q-surface);
}
#screen-play .key-del:active,
#screen-play .key-del.key-pressed {
  background: #ece6dd;
  border-color: var(--q-line);
}
#screen-play .key-enter {
  background: var(--q-accent);
  border-color: var(--q-accent);
  color: var(--q-accent-ink);
  box-shadow: 0 4px 0 var(--q-accent-deep);
  font-weight: 900;
}
#screen-play .key-enter:active,
#screen-play .key-enter.key-pressed {
  background: var(--q-accent-deep);
  border-color: var(--q-accent-deep);
}

/* 答えの欄（九九・ひっさん・きまり）: オレンジの箱のまま、まわりの輪をやわらかく。
   たしざん・ひきざん・ひっさん（style.css の下線だけの欄）も同じ箱に。 */
#block-kuku .answer-display,
#block-kakezan .answer-display,
#block-pattern .answer-display,
#block-math .answer-display,
#block-hissan .answer-display {
  height: 1.3em;
  min-height: 0;
  line-height: 1.3em;
  border: 4px solid var(--q-accent);
  border-radius: 18px;
  background: var(--q-paper);
  box-shadow: 0 0 0 4px #ffe3cc;
  color: var(--q-ink);
  font-variant-numeric: tabular-nums;
}
#block-math .answer-display,
#block-hissan .answer-display {
  font-size: clamp(2.4rem, 7.4vmin, 3.6rem);
}
#block-kuku .answer-display.correct,
#block-kakezan .answer-display.correct,
#block-pattern .answer-display.correct,
#block-math .answer-display.correct,
#block-hissan .answer-display.correct {
  border-color: var(--q-good);
  box-shadow: 0 0 0 4px #c6e9d1;
  background: var(--q-good-soft);
  color: var(--q-good-ink);
}
#block-kuku .answer-display.wrong,
#block-kakezan .answer-display.wrong,
#block-pattern .answer-display.wrong,
#block-math .answer-display.wrong,
#block-hissan .answer-display.wrong {
  border-color: var(--q-bad);
  box-shadow: 0 0 0 4px #f5c6bf;
  background: var(--q-bad-soft);
  color: var(--q-bad-ink);
}

/* わりざんの箱 */
#block-division .time-box {
  border-color: var(--q-line);
  background: var(--q-paper);
  box-shadow: 0 4px 0 var(--q-line-soft);
}
#block-division .time-box.active {
  border-color: var(--q-accent);
  box-shadow: 0 0 0 5px #ffe3cc;
}
#block-division .time-box.correct {
  border-color: var(--q-good);
  box-shadow: 0 0 0 5px #c6e9d1;
  background: var(--q-good-soft);
  color: var(--q-good-ink);
}
#block-division .time-box.wrong {
  border-color: var(--q-bad);
  box-shadow: 0 0 0 5px #f5c6bf;
  background: var(--q-bad-soft);
  color: var(--q-bad-ink);
}
#block-division .time-label { color: var(--q-muted); }
#block-division .time-label .rt { color: var(--q-muted); }

/* 九九の「つぎへ」・🔊 もういちど */
#screen-play .kuku-tap-hint {
  color: var(--q-accent-ink);
  background: var(--q-accent);
  box-shadow: 0 4px 0 var(--q-accent-deep);
}
#screen-play .kuku-tap-hint .rt { color: #5a3a1a; }
#screen-play .kuku-speak,
#screen-play .eigo-say {
  border: 3px solid var(--q-line);
  background: var(--q-paper);
  color: var(--q-ink);
  box-shadow: 0 3px 0 var(--q-line-soft);
}
#screen-play .kuku-speak:active,
#screen-play .eigo-say:active {
  filter: none;
  background: var(--q-accent-soft);
  border-color: var(--q-accent);
}

/* 円の配列（九九・わりざん）・ひっさん・きまりのマス: 線の色を紙に合わせる */
#screen-play .circle { border-color: #d9d2c7; }
#screen-play .circle.filled { background: var(--q-accent); border-color: var(--q-accent); }
#screen-play .kuku-split-row { color: var(--q-muted); }
#screen-play .kuku-split-row.sum { border-top-color: var(--q-line); }
#screen-play .hissan-cell.slot { border-color: #cfc7ba; }
#screen-play .hissan-rule { border-top-color: var(--q-ink); }
#screen-play .pattern-cell {
  border: 3px solid var(--q-line);
  box-shadow: 0 3px 0 var(--q-line-soft);
}
#screen-play .pattern-blank {
  border-style: dashed;
  border-color: var(--q-accent);
  color: var(--q-accent-text);
  box-shadow: none;
}
#screen-play .pattern-blank.filled {
  border-style: solid;
  border-color: var(--q-good);
  background: var(--q-good-soft);
  color: var(--q-good-ink);
}
#screen-play .pattern-rule { color: var(--q-good-ink); }

/* きまりの 形の選択肢（romaji.css の .choice-btn）: 紙のカード */
#screen-play .pattern-choices .choice-btn {
  border: 3px solid var(--q-line);
  background: var(--q-paper);
  border-radius: 18px;
  box-shadow: 0 4px 0 var(--q-line-soft);
}
#screen-play .pattern-choices .choice-btn:active {
  background: var(--q-accent-soft);
  border-color: var(--q-accent);
}

/* ===== ちず: 左の欄がカード、地図はクリームの上にそのまま ===== */
.subject-block .chiri-main > .chiri-side {
  background: var(--q-paper);
  border: 3px solid var(--q-line);
  border-top: 8px solid var(--subj);
  border-radius: var(--q-radius);
  box-shadow: 0 4px 0 var(--q-line-soft);
  padding: clamp(14px, 2.4vmin, 22px) clamp(14px, 2.4vmin, 22px) clamp(16px, 2.6vmin, 24px);
  justify-content: center;
  align-self: stretch;
}
#screen-play .chiri-pref { stroke: var(--q-bg); }
/* 地図は 帯・こまったら・余白を引いた高さに収める（前は 80vh で 19px はみ出していた）。 */
#screen-play .chiri-svg { max-height: min(80vh, calc(100dvh - 210px)); }
#screen-play .chiri-inset-frame { stroke: #d9d2c7; }

/* ===== 科目の区切りカード・まとめ は session-ui.css のまま（すでに同じ色） ===== */

/* おおもじ は flex: 1 が無かったので、カードの中で上に寄る。ほかと同じく まん中に。 */
.subject-block > .case-play {
  flex: 1;
  justify-content: center;
}

/* ===== 画面の大きさ ===== */

/* iPad よこ（1180×820）: 高さが足りない。絵のある問い（しゃかいの方位・雨温図）
   と 2×2 の4択を足すと、前から 110px はみ出していた（10/31 の実測 929/820）。
   本文の「🏯 社会」を消したぶんに加えて、すき間・絵・4択の高さを少し詰める。 */
@media (orientation: landscape) and (min-height: 501px) and (max-height: 900px) {
  .subject-block > .rika-play,
  .subject-block > .kanji-play,
  .subject-block > .eigo-play,
  .subject-block > .case-play {
    gap: clamp(6px, 1.4vh, 14px);
    padding-top: clamp(10px, 1.6vmin, 16px);
    padding-bottom: clamp(10px, 1.6vmin, 16px);
  }
  #screen-play .rika-prompt { line-height: 1.7; }
  #screen-play .rika-play > .feedback { font-size: clamp(1.05rem, 2.6vmin, 1.4rem); }
  #screen-play .shakai-fig { height: clamp(84px, 16.5vh, 150px); }
  /* キーの列（答えの箱＋ひとこと＋4段のキー）が 640px に入るように */
  #screen-play .key { padding: clamp(0.4em, 1.8vmin, 0.6em) 0; }
  #screen-play .shakai-fig.shakai-uon { height: clamp(110px, 25vh, 220px); }
  #screen-play .shakai-fig.shakai-kigou { height: clamp(72px, 15vh, 130px); }
  #screen-play .choices:not(.choices-pics) .choice { min-height: clamp(80px, 12.5vh, 110px); }
  #screen-play .choices:not(.choices-pics).choices-card-shown .choice { min-height: clamp(60px, 8.5vh, 84px); }
  #screen-play .answer-card { padding: 8px 22px; }

  /* こたえのカードが出ているあいだ（choices.css の max-height: 900px の詰めと同じ。
     上の #screen-play 付きの規則に負けないよう、ここでもう一度書く）。 */
  #screen-play .rika-play:has(.answer-card) > .feedback,
  #screen-play .kanji-play:has(.answer-card) > .feedback,
  #screen-play .eigo-play:has(.answer-card) > .feedback,
  #screen-play .case-play:has(.answer-card) > .feedback { display: none; }
  #screen-play .rika-play:has(.answer-card) .shakai-fig { height: clamp(56px, 11vh, 96px); }
  #screen-play .rika-play:has(.answer-card) .shakai-fig.shakai-uon { height: clamp(72px, 14vh, 120px); }
  #screen-play .rika-play:has(.answer-card) .shakai-fig.shakai-kigou { height: clamp(48px, 9vh, 80px); }
  #screen-play .rika-play:has(.answer-card) { gap: clamp(3px, 0.8vh, 8px); }
  #screen-play .kanji-play:has(.answer-card),
  #screen-play .eigo-play:has(.answer-card),
  #screen-play .case-play:has(.answer-card) { gap: clamp(3px, 0.8vh, 8px); }
  #screen-play .answer-card { margin-top: 0; }
}

/* iPad たて（820×1180）: 横幅が足りないぶん、カードの横の余白を詰める。 */
@media (orientation: portrait) and (min-width: 701px) {
  .subject-block > .rika-play,
  .subject-block > .kanji-play,
  .subject-block > .eigo-play,
  .subject-block > .case-play,
  .subject-block .play-main > .left-pane {
    padding-left: clamp(12px, 2vmin, 20px);
    padding-right: clamp(12px, 2vmin, 20px);
  }
  .subject-block .play-main { gap: clamp(12px, 2vw, 24px); }
  /* 820px 幅では こたえのカードの横並び（文＋ボタン）が窮屈で、こたえが途中で折れた。縦に積む。 */
  #screen-play .answer-card { flex-direction: column; align-items: stretch; }
  #screen-play .answer-card-next { align-self: center; }
  /* 絵のある問い（しゃかい）＋2×2＋縦に積んだカード は 1180px でも 50px 足りない。
     ひとことの場所を返し、絵と すき間を詰める。 */
  #screen-play .rika-play:has(.answer-card) > .feedback,
  #screen-play .kanji-play:has(.answer-card) > .feedback,
  #screen-play .eigo-play:has(.answer-card) > .feedback,
  #screen-play .case-play:has(.answer-card) > .feedback { display: none; }
  #screen-play .rika-play:has(.answer-card) { gap: clamp(6px, 1.2vh, 12px); }
  #screen-play .rika-play:has(.answer-card) .shakai-fig { height: clamp(72px, 15vh, 150px); }
  #screen-play .rika-play:has(.answer-card) .shakai-fig.shakai-uon { height: clamp(96px, 20vh, 200px); }
  #screen-play .choices:not(.choices-pics).choices-card-shown .choice { min-height: clamp(72px, 9vh, 100px); }
}

/* ===== スマホ幅（iPhone たて、700px 以下） =====
   カードは中身の高さだけ（上に詰める）。上に空きができる「まん中寄せ」はやめる:
   こたえのカードが下に足されても 問いと4択は動かない。.play-main は縦に積まれる
   （style.css）: カードは上、キーは下。 */
@media (max-width: 700px) {
  #screen-play { padding: max(8px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); gap: 8px; }
  .subject-block.active { justify-content: flex-start; }
  .subject-block > .rika-play,
  .subject-block > .kanji-play,
  .subject-block > .eigo-play,
  .subject-block > .case-play,
  .subject-block > .kb-play,
  .subject-block .play-main > .left-pane,
  .subject-block .chiri-main > .chiri-side {
    flex: 0 0 auto;
    width: 100%;
    max-width: none;
    justify-content: flex-start;
    gap: clamp(6px, 1.2dvh, 12px);
    padding: 12px 12px 14px;
    border-width: 2px;
    border-top-width: 6px;
    border-radius: 20px;
    box-shadow: 0 3px 0 var(--q-line-soft);
  }
  .subject-block .chiri-main > .chiri-side { align-self: auto; }
  .subject-block .play-main { gap: 10px; }
  .subject-block .play-main > .right-pane { align-self: center; width: 100%; max-width: 420px; gap: 6px; }

  #screen-play .phase-banner,
  #screen-play .rika-topic,
  #screen-play .eigo-topic { font-size: 0.9rem; padding: 2px 12px; }
  #screen-play .rika-prompt { font-size: clamp(1.15rem, 5.6vw, 1.6rem); line-height: 1.75; }
  #screen-play .kanji-prompt, #screen-play .case-prompt { font-size: clamp(1rem, 4.4vw, 1.3rem); }
  #screen-play .kanji-word { font-size: clamp(3rem, 20vw, 5rem); }
  #screen-play .eigo-word { font-size: clamp(2rem, 11vw, 3.4rem); }
  #screen-play .eigo-pic { font-size: clamp(3rem, 18vw, 5rem); }
  #screen-play .case-big { font-size: clamp(4.5rem, 30vw, 8rem); }
  #screen-play .case-face { font-size: clamp(3.5rem, 22vw, 6rem); }
  #screen-play .shakai-fig { height: clamp(80px, 20dvh, 150px); max-width: 100%; }
  #screen-play .shakai-fig.shakai-uon { height: clamp(100px, 26dvh, 190px); }
  #screen-play .shakai-fig.shakai-kigou { height: clamp(64px, 15dvh, 110px); }
  .rika-play > .feedback, .kanji-play > .feedback, .eigo-play > .feedback, .case-play > .feedback, .chiri-side > .feedback {
    font-size: 1.05rem;
    min-height: calc(1.8em + 6px);
  }
  .rika-play > .feedback:not(:empty), .kanji-play > .feedback:not(:empty), .eigo-play > .feedback:not(:empty), .case-play > .feedback:not(:empty), .chiri-side > .feedback:not(:empty) {
    padding: 3px 14px;
    line-height: 1.8;
  }
  #screen-play .choices { gap: 8px 10px; }
  #screen-play .choice {
    min-height: clamp(64px, 11dvh, 96px);
    font-size: clamp(1.15rem, 5.6vw, 1.6rem);
    padding: 8px 8px 8px 30px;
    border-radius: 18px;
    box-shadow: 0 3px 0 var(--q-line-soft);
  }
  #screen-play .choice::before { left: 8px; font-size: 1.3rem; }
  #screen-play .choices.choices-pics .choice { width: clamp(64px, 20vw, 96px); height: clamp(64px, 20vw, 96px); padding: 6px; }
  #screen-play .choice-pic { font-size: clamp(2rem, 11vw, 3.4rem); }
  #screen-play .choices-card-shown .choice { min-height: 52px; }
  #screen-play .choices .choice-next { min-height: 56px; font-size: 1.3rem; }
  #screen-play .rika-teach.shown, #screen-play .kanji-teach.shown { padding: 6px 16px; }
  #screen-play .rika-teach-answer { font-size: clamp(1.4rem, 7vw, 2.2rem); }
  #screen-play .rika-teach-note { font-size: 0.95rem; }
  #screen-play .answer-card { padding: 10px 14px; gap: 6px; margin-top: 0; border-radius: 18px; }
  #screen-play .answer-card-head { font-size: 1.05rem; }
  #screen-play .answer-card-answer { font-size: clamp(1.3rem, 6.5vw, 1.9rem); }
  #screen-play .answer-card-note { font-size: 0.92rem; }
  #screen-play .answer-card-next { min-height: 50px; padding: 8px 22px; font-size: 1.15rem; }

  /* キーで答える科目: 問いのカードを小さく、キーは 3列×4段を 44px 以上で */
  #screen-play .kuku-fact, #screen-play .div-fact { font-size: clamp(1.8rem, 10vw, 2.8rem); }
  #screen-play .kuku-phrase.main, #screen-play .div-prompt.main { font-size: clamp(1.2rem, 6vw, 1.8rem); }
  #screen-play .key { min-height: 52px; font-size: clamp(1.4rem, 7vw, 2rem); padding: 0.3em 0; border-radius: 16px; border-width: 2px; box-shadow: 0 3px 0 var(--q-line-soft); }
  #screen-play .keypad { gap: 8px; }
  #block-kuku .answer-display, #block-kakezan .answer-display, #block-pattern .answer-display, #block-math .answer-display, #block-hissan .answer-display, #block-division .time-box {
    font-size: clamp(1.8rem, 9vw, 2.6rem);
    border-width: 3px;
  }
  #block-division .feedback, #block-kuku .feedback, #block-kakezan .feedback, #block-pattern .feedback, #block-math .feedback, #block-hissan .feedback { font-size: 0.95rem; height: 2.4em; }
  #screen-play .kuku-tap-hint { font-size: 1.05rem; }

  /* ちず: 地図は幅いっぱい、高さは残り */
  #screen-play .chiri-svg { max-width: 100%; max-height: calc(100dvh - 300px); }
  #screen-play .chiri-card { font-size: clamp(1.3rem, 7vw, 2rem); }

  /* こたえのカードが出ているあいだは ひとこと（同じことが書いてある）を消す */
  #screen-play .rika-play:has(.answer-card) > .feedback,
  #screen-play .kanji-play:has(.answer-card) > .feedback,
  #screen-play .eigo-play:has(.answer-card) > .feedback,
  #screen-play .case-play:has(.answer-card) > .feedback,
  #screen-play .chiri-side:has(.answer-card) > .feedback { display: none; }
}

/* iPhone SE たて（375×667）: 上の块をさらに詰める。キーは 46px、地図は残りの高さ。 */
@media (max-width: 700px) and (max-height: 700px) {
  #screen-play { gap: 6px; }
  .subject-block > .rika-play,
  .subject-block > .kanji-play,
  .subject-block > .eigo-play,
  .subject-block > .case-play,
  .subject-block > .kb-play,
  .subject-block .play-main > .left-pane,
  .subject-block .chiri-main > .chiri-side { padding: 8px 10px 10px; gap: 5px; }
  .subject-block .play-main { gap: 6px; }
  .subject-block .play-main > .right-pane { gap: 4px; }
  #screen-play .keypad { gap: 6px; }
  #screen-play .key { min-height: 46px; padding: 0.2em 0; font-size: clamp(1.3rem, 6vw, 1.8rem); }
  #screen-play .kuku-fact, #screen-play .div-fact { font-size: clamp(1.6rem, 9vw, 2.4rem); }
  #screen-play .kuku-split-row { font-size: 0.95rem; padding: 0; }
  #block-kuku .answer-display, #block-kakezan .answer-display, #block-pattern .answer-display, #block-math .answer-display, #block-hissan .answer-display, #block-division .time-box {
    font-size: clamp(1.5rem, 8vw, 2.2rem);
  }
  #block-division .time-label { height: 1.5em; font-size: 0.95rem; }
  #block-division .feedback, #block-kuku .feedback, #block-kakezan .feedback, #block-pattern .feedback, #block-math .feedback, #block-hissan .feedback { height: 2.2em; font-size: 0.9rem; }
  #screen-play .hissan-grid { --hcell: clamp(30px, 10vw, 40px); gap: 4px; }
  #screen-play .hissan-cell { font-size: clamp(1.2rem, 6vw, 1.8rem); }
  #screen-play .hissan-prompt { margin-bottom: 0; }
  #screen-play .choice { min-height: clamp(56px, 9dvh, 80px); }
  #screen-play .chiri-card { font-size: clamp(1.15rem, 6vw, 1.6rem); }
  #screen-play .chiri-stats { font-size: 0.9rem; min-height: 0; }
  #screen-play .chiri-prompt { font-size: 0.95rem; }
  #screen-play .chiri-svg { max-height: calc(100dvh - 380px); }
}

/* ===== 低い画面（iPhone よこ、高さ 500px 以下） =====
   style.css の max-height: 500px の詰め（キー・4択を1列）に合わせて、ここで足した
   大きさ（キーの字・余白・ピル）を戻す。「こまったら」は右下に浮かせてある（session-ui.css）。 */
@media (max-height: 500px) {
  #screen-play { padding: max(4px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(4px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); gap: 4px; }
  .subject-block > .rika-play,
  .subject-block > .kanji-play,
  .subject-block > .eigo-play,
  .subject-block > .case-play,
  .subject-block > .kb-play,
  .subject-block .play-main > .left-pane,
  .subject-block .chiri-main > .chiri-side {
    padding: 6px 12px 8px;
    border-width: 2px;
    border-top-width: 5px;
    border-radius: 18px;
    box-shadow: none;
  }
  .subject-block > .rika-play,
  .subject-block > .kanji-play,
  .subject-block > .eigo-play,
  .subject-block > .case-play { gap: clamp(3px, 1dvh, 6px); }
  /* スマホ横（幅 700px 以下でもある）: style.css は .play-main を縦に積むが、
     高さ 390px では入らない。左に問い・右にキー のまま。ちずも左右のまま。 */
  .subject-block .play-main { flex-direction: row; gap: 12px; align-items: stretch; }
  .subject-block .play-main > .left-pane { flex: 1 1 0; width: auto; max-width: none; gap: 4px; justify-content: center; }
  .subject-block .play-main > .right-pane { width: min(380px, 44vw); max-width: none; align-self: center; }
  .subject-block .chiri-main > .chiri-side { flex: 0 1 clamp(240px, 38vw, 400px); max-width: clamp(240px, 38vw, 400px); width: auto; align-self: stretch; justify-content: center; }
  .subject-block .chiri-main > .right-pane { flex: 1 1 auto; width: auto; max-width: none; }
  #screen-play .chiri-svg { max-width: 100%; }
  .subject-block.active { justify-content: center; }
  .subject-block > .rika-play,
  .subject-block > .kanji-play,
  .subject-block > .eigo-play,
  .subject-block > .case-play { flex: 1; justify-content: center; }
  #screen-play .rika-play:has(.answer-card) > .feedback,
  #screen-play .kanji-play:has(.answer-card) > .feedback,
  #screen-play .eigo-play:has(.answer-card) > .feedback,
  #screen-play .case-play:has(.answer-card) > .feedback,
  #screen-play .chiri-side:has(.answer-card) > .feedback { display: none; }
  /* 九九の分解・ひっさんのマスは 390px の高さに入る大きさに */
  #screen-play .kuku-phrase { font-size: clamp(0.95rem, 5dvh, 1.3rem); min-height: 0; }
  #screen-play .kuku-split-row { font-size: 0.95rem; padding: 0; }
  #screen-play .kuku-split-row.sum { margin-top: 2px; padding-top: 3px; }
  #screen-play .kuku-reading { font-size: 0.95rem; min-height: 0; }
  #screen-play .hissan-prompt { font-size: clamp(0.95rem, 5dvh, 1.3rem); margin-bottom: 0; min-height: 0; }
  #screen-play .hissan-grid { --hcell: clamp(30px, 9dvh, 44px); gap: 3px; }
  #screen-play .hissan-cell { font-size: clamp(1.1rem, 5.5dvh, 1.8rem); }
  #screen-play .hissan-cell.carry { font-size: 0.85rem; }
  #screen-play .hissan-note { margin-top: 2px; font-size: 0.85rem; min-height: 0; }
  #screen-play .div-hint { margin-top: 4px; font-size: 0.85rem; }
  #screen-play .pattern-cell { min-width: 34px; height: 34px; font-size: 1rem; }
  #screen-play .pattern-prompt { font-size: clamp(0.95rem, 5dvh, 1.2rem); margin-bottom: 2px; }
  .subject-block .play-main > .right-pane { gap: 4px; width: min(380px, 44vw); }
  #screen-play .phase-banner,
  #screen-play .rika-topic,
  #screen-play .eigo-topic { font-size: 0.8rem; padding: 1px 10px; line-height: 1.4; }
  #screen-play .rika-prompt { font-size: clamp(1rem, 5.4dvh, 1.4rem); line-height: 1.6; }
  #screen-play .kanji-prompt, #screen-play .case-prompt { font-size: clamp(0.9rem, 4.4dvh, 1.2rem); }
  #screen-play .kanji-word { font-size: clamp(2.2rem, 16dvh, 4rem); }
  #screen-play .eigo-word { font-size: clamp(1.6rem, 10dvh, 3rem); }
  #screen-play .eigo-pic { font-size: clamp(2rem, 16dvh, 4rem); }
  #screen-play .eigo-say { padding: 2px 14px; font-size: 1.1rem; box-shadow: none; }
  #screen-play .case-big { font-size: clamp(3rem, 24dvh, 6rem); }
  #screen-play .case-face { font-size: clamp(2.4rem, 18dvh, 4.5rem); }
  #screen-play .case-pair.shown { padding: 2px 20px; }
  .rika-play > .feedback, .kanji-play > .feedback, .eigo-play > .feedback, .case-play > .feedback, .chiri-side > .feedback {
    font-size: 0.95rem;
    min-height: calc(1.6em + 4px);
  }
  .rika-play > .feedback:not(:empty), .kanji-play > .feedback:not(:empty), .eigo-play > .feedback:not(:empty), .case-play > .feedback:not(:empty), .chiri-side > .feedback:not(:empty) {
    padding: 2px 12px;
    line-height: 1.6;
  }
  #screen-play .choices { gap: 6px 8px; }
  #screen-play .choice {
    min-height: 48px;
    font-size: clamp(0.95rem, 4.4dvh, 1.3rem);
    padding: 4px 6px 4px 26px;
    border-radius: 14px;
    border-width: 2px;
    box-shadow: none;
  }
  #screen-play .choice::before { left: 6px; font-size: 1.1rem; }
  #screen-play .choices.choices-pics .choice { width: clamp(56px, 15dvh, 80px); height: clamp(56px, 15dvh, 80px); padding: 4px; }
  #screen-play .choice-pic { font-size: clamp(1.6rem, 8dvh, 2.6rem); }
  #screen-play .choices-card-shown .choice { min-height: 44px; }
  #screen-play .choices .choice-next { min-height: 48px; font-size: 1.15rem; box-shadow: 0 3px 0 var(--q-accent-deep); }
  #screen-play .rika-teach.shown, #screen-play .kanji-teach.shown { padding: 2px 14px; gap: 0; }
  #screen-play .rika-teach-answer { font-size: clamp(1.2rem, 7dvh, 1.8rem); }
  #screen-play .rika-teach-note { font-size: 0.85rem; line-height: 1.3; }
  #screen-play .kanji-teach-row { font-size: clamp(1rem, 5dvh, 1.4rem); }
  #screen-play .answer-card { padding: 4px 12px; gap: 8px; margin-top: 0; border-radius: 14px; flex-direction: row; align-items: center; border-width: 2px; }
  #screen-play .answer-card-body { gap: 1px; }
  #screen-play .answer-card-head { font-size: 0.95rem; line-height: 1.3; }
  #screen-play .answer-card-answer { font-size: clamp(1.1rem, 6dvh, 1.6rem); }
  #screen-play .answer-card-note { font-size: 0.85rem; line-height: 1.3; }
  #screen-play .answer-card-again { font-size: 0.75rem; }
  #screen-play .answer-card-next { min-height: 44px; padding: 6px 16px; font-size: 1rem; align-self: center; }
  #screen-play .kuku-fact, #screen-play .div-fact { font-size: clamp(1.6rem, 10dvh, 2.6rem); }
  #screen-play .kuku-phrase.main, #screen-play .div-prompt.main { font-size: clamp(1.1rem, 6dvh, 1.6rem); }
  #screen-play .kuku-speak { padding: 4px 12px; font-size: 0.85rem; box-shadow: none; }
  #screen-play .kuku-tap-hint { font-size: 0.95rem; padding: 0.4em 1em 0.3em; }
  #screen-play .keypad { gap: 5px; }
  #screen-play .key { min-height: 44px; font-size: clamp(1.1rem, 5dvh, 1.6rem); padding: 0.15em 0; border-radius: 12px; border-width: 2px; box-shadow: 0 2px 0 var(--q-line-soft); }
  #block-kuku .answer-display, #block-kakezan .answer-display, #block-pattern .answer-display, #block-math .answer-display, #block-hissan .answer-display, #block-division .time-box {
    font-size: clamp(1.4rem, 6dvh, 2.2rem);
    border-width: 3px;
    box-shadow: 0 0 0 3px #ffe3cc;
  }
  #block-division .time-label { height: 1.4em; font-size: 0.85rem; }
  #block-division .feedback, #block-kuku .feedback, #block-kakezan .feedback, #block-pattern .feedback, #block-math .feedback, #block-hissan .feedback { height: 2.2em; font-size: 0.85rem; }
  #screen-play .chiri-svg { max-height: calc(100dvh - 70px); }
  #screen-play .chiri-card { font-size: clamp(1.1rem, 7dvh, 1.8rem); }
}

@media (prefers-reduced-motion: reduce) {
  #screen-play .choice-next:not(:disabled):active { transform: none; }
}