body {
  font-family: sans-serif;
  text-align: center;
  padding: 2rem;
  background: #eaeaea;
  color: #1c2541;
}

.app-title {
  margin: 0 0 1rem;
  font-size: 1.4rem;
  font-weight: bold;
}

/* 「おもちゃ」ではなく「実験」だと伝えるための一言（画面の目的を示す） */
.app-subtitle {
  margin: -0.4rem 0 1.2rem;
  font-size: 0.95rem;
  opacity: 0.8;
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  font-size: 0.9rem;
}

.tutorial-replay {
  font-family: inherit;
  font-size: 0.85rem;
  padding: 0.4rem 0.9rem;
  border: 1px solid #1c2541;
  border-radius: 6px;
  background: none;
  color: #1c2541;
  cursor: pointer;
}

.tutorial-replay:hover {
  background: #1c2541;
  color: #eaeaea;
}

/* 効果音のオン・オフ。ツールバー内、「使い方を見る」の隣。既存の枠線ボタン
   （tutorial-replay）と同じ見た目＝新しい配色は増やさない。主要ボタン
   （お題に挑戦）と競合しないよう一段控えめ（アイコンのみ・淡め）。
   縦サイズは align-self: stretch で「お題に挑戦」「使い方を見る」と同じ高さに
   揃える（縦 padding は持たせず、隣のボタンの高さに追従させる）。 */
.sound-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  padding: 0 0.5rem;
  margin: 0;
  border: 1px solid #1c2541;
  border-radius: 6px;
  background: none;
  color: #1c2541;
  cursor: pointer;
  opacity: 0.75;
  line-height: 0;
}

/* お題モード（PC）はツールバーに効果音トグルだけが残るため、隣に高さの基準が
   なくなる。単独になったときに潰れないよう最低高さを与える */
body.quiz-mode .sound-toggle {
  min-height: 1.9rem;
}

.sound-toggle svg {
  display: block;
}

/* スピーカー本体は塗り、波と×は線。すべて currentColor（＝#1c2541、hoverで#eaeaea）*/
.sound-toggle .spk {
  fill: currentColor;
}

.sound-toggle .waves path,
.sound-toggle .mute-x path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

/* オン＝波を表示・×を隠す / オフ（.muted）＝その逆 */
.sound-toggle:not(.muted) .mute-x {
  display: none;
}

.sound-toggle.muted .waves {
  display: none;
}

.sound-toggle:hover {
  background: #1c2541;
  color: #eaeaea;
  opacity: 1;
}

/* お題モード（design.md「お題モード」参照）。既存のボタン・ボックスの見た目
   （tutorial-replay/tutorial-next/change-log等）に合わせ、新しい配色は増やさない */
.quiz-start-button,
.quiz-exit-button {
  font-family: inherit;
  font-size: 0.8rem;
  padding: 0.35rem 0.8rem;
  border: 1px solid #1c2541;
  border-radius: 6px;
  background: none;
  color: #1c2541;
  cursor: pointer;
}

.quiz-start-button:hover,
.quiz-exit-button:hover {
  background: #1c2541;
  color: #eaeaea;
}

/* 「お題に挑戦」はこのアプリの主要体験なので塗りつぶしで目立たせる。色は既存の
   濃紺(#1c2541)＋地の薄グレー(#eaeaea)のみ＝色数は増やさない。tutorial-next /
   quiz-next-button と同じ塗り。「使い方を見る」「自由に触る」は枠線のまま補助扱い */
.quiz-start-button {
  background: #1c2541;
  color: #eaeaea;
  font-weight: bold;
  /* 「使い方を見る」と同じ大きさに揃える（差別化は塗り／位置／太字で行う） */
  padding: 0.4rem 0.9rem;
}

.quiz-start-button:hover {
  background: #eaeaea;
  color: #1c2541;
}

/* お題モード中は「使い方を見る」も隠す（幅を問わず）。「お題に挑戦」と同じ「非表示」
   の扱いに揃えるほか、チュートリアルは自由モードの操作前提で書かれており、お題中に
   開くとステップ3で「距離レバーを動かして…」と指示しても .levers-locked
   （pointer-events: none）で実際には動かせない、という実害があるため（2026-09-05）。
   効果音トグルはツールバーに残す（お題の自動再生でも音が出るのでミュートできるように）。
   スマホは縦の余白を空けるため、下の @media でツールバーごと隠す。 */
body.quiz-mode #quiz-start-button,
body.quiz-mode #tutorial-replay {
  display: none;
}

.quiz-panel,
.quiz-summary {
  max-width: 600px;
  margin: 0 auto 1rem;
  padding: 0.8rem 1rem;
  border: 2px solid #1c2541;
  border-radius: 6px;
  font-size: 0.9rem;
  text-align: left;
}

.quiz-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
}

.quiz-progress {
  margin: 0;
  font-weight: bold;
  font-size: 0.8rem;
  opacity: 0.7;
}

.quiz-question {
  margin: 0 0 0.7rem;
  font-weight: bold;
  /* 問題文は「条件」と「問い」の2文。間の \n を改行として見せる
     （狭い画面ではそれぞれの文がさらに折り返してよい） */
  white-space: pre-line;
}

/* グリッドにして2択・4択どちらも均等な大きさに揃える（2026-09-05）。
   従来は flex-wrap: wrap + flex: 1 1 auto で、ボタンの文字量に応じて幅が
   バラバラになり（タイプBの「できる」/「まだできない」）、4択（タイプA）は
   3個で折り返して4個目だけ単独で幅いっぱいに伸びていた（コンテンツ量に応じた
   自動折り返しのため）。2列グリッドなら2択は1行×2列、4択は自動折り返しで
   2行×2列になり、どちらも等幅・等サイズになる。狭い画面（下の
   @media max-width:700px）は横一列に戻すため display:flex で上書きする */
.quiz-choices {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
}

.quiz-choice-button {
  font-family: inherit;
  font-size: 0.85rem;
  padding: 0.5rem 0.6rem;
  border: 2px solid #1c2541;
  border-radius: 6px;
  background: #eaeaea;
  color: #1c2541;
  cursor: pointer;
}

.quiz-choice-button:hover:not(:disabled) {
  background: #1c2541;
  color: #eaeaea;
}

.quiz-choice-button.selected {
  background: #1c2541;
  color: #eaeaea;
}

.quiz-choice-button:disabled {
  cursor: default;
  opacity: 0.6;
}

.quiz-choice-button.selected:disabled {
  opacity: 1;
}

.quiz-hint {
  margin: 0.5rem 0 0;
  font-size: 0.8rem;
  opacity: 0.8;
}

.quiz-reveal {
  margin-top: 0.7rem;
  padding-top: 0.6rem;
  border-top: 1px dashed #1c2541;
}

.quiz-your-guess {
  margin: 0 0 0.3rem;
  font-size: 0.8rem;
  opacity: 0.8;
}

.quiz-reveal-text {
  margin: 0 0 0.7rem;
}

.quiz-next-button,
.quiz-restart-button,
.quiz-verify-button {
  font-family: inherit;
  font-size: 0.9rem;
  padding: 0.4rem 1rem;
  border: 2px solid #1c2541;
  border-radius: 6px;
  background: #1c2541;
  color: #eaeaea;
  cursor: pointer;
}

/* タイプB・Cの「確かめる」ボタン。既存の次へボタンと同じ見た目（新スタイルは
   増やさない）。空のヒント行の下に単独で出るので、上に少し間隔を空ける */
.quiz-verify-button {
  display: inline-block;
  margin-top: 0.5rem;
}

/* hidden 属性を効かせる（.quiz-verify-button の display 指定が [hidden] の
   display:none を上書きしてしまうため、明示的に打ち消す） */
.quiz-verify-button[hidden] {
  display: none;
}

/* 予想を選ぶ前は無効。選択済みの二択ボタン（濃紺の塗り）と区別できるよう、
   枠線だけの淡い見た目にして「まだ押せない」ことを示す */
.quiz-verify-button:disabled {
  background: transparent;
  color: #1c2541;
  opacity: 0.4;
  cursor: default;
}

.quiz-summary-title {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  font-weight: bold;
}

/* 対比表の小見出し。「まとめ」（1rem）より一段下の階層と分かるよう、本文より
   小さめ＋やや薄く。太字は残して「見出し」であることは示す */
.quiz-summary-results-heading {
  margin: 0 0 0.35rem;
  font-size: 0.8rem;
  font-weight: bold;
  opacity: 0.75;
}

/* 4問のまとめ表（空気 / あなたの予想 / 実際）。横スクロールが出ないよう、
   狭い画面ではフォントを詰める。念のため wrap 側に overflow-x を持たせる */
.quiz-summary-table-wrap {
  margin: 0 0 0.7rem;
  overflow-x: auto;
}

.quiz-summary-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.quiz-summary-table th,
.quiz-summary-table td {
  border: 1px solid #1c2541;
  padding: 0.3rem 0.4rem;
  text-align: center;
}

.quiz-summary-table thead th {
  font-weight: bold;
  background: rgba(28, 37, 65, 0.08);
}

/* 行見出し（「少ない (4.8)」など）は左寄せ・折り返さない */
.quiz-summary-table th[scope="row"] {
  text-align: left;
  font-weight: normal;
  white-space: nowrap;
}

/* まとめ表の問題セルは、タイプが混在すると1列目が長くなる。通常は full 表記、
   狭い画面（下の media query）では short 表記に差し替える（既存のフォント詰めと
   同じ考え方で、狭い画面向けの短縮を1段追加しただけ） */
.quiz-summary-table .q-short {
  display: none;
}

.quiz-summary-conclusion {
  margin: 0 0 0.7rem;
}

/* 正式用語（飽和水蒸気量）への橋渡し。破線で区切って「授業に持ち帰る一言」として
   置く。本文よりやや小さめ */
.quiz-summary-term {
  margin: 0 0 0.8rem;
  padding-top: 0.6rem;
  border-top: 1px dashed #1c2541;
  font-size: 0.85rem;
}

.quiz-summary-actions {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

/* お題中、水蒸気の量スライダーを操作不可にする（動かせると答えが変わって
   しまうため。design.md参照）。触れないことが見た目で分かるようグレーアウトする */
.levers-locked {
  opacity: 0.4;
  pointer-events: none;
}

/* レイアウト変更（2026-08-27）: マップ・距離レバー・水蒸気の量スライダーを
   縦1列に積む。「読む」計器（温度・水蒸気ゲージ）はマップ内蔵、「触る」レバーは
   マップ外・横向きにして、場所・向き・色の3点で区別する（design.md「UIの課題」参照） */
.app-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

#map {
  display: block;
  width: 100%;
  max-width: 600px;
}

/* マップ内の計器（情報パネル・水蒸気ゲージ）を載せる背景板。
   sky(#a3cfeb)の上でも文字と縦線が読めるよう、地の色を挟む */
.panel-plate {
  fill: #eaeaea;
  fill-opacity: 0.85;
  stroke: #1c2541;
  stroke-width: 1.5;
}

.gauge-label {
  font-size: 10px;
  fill: #1c2541;
}

/* 水滴になった量の見出し＋数値。0のときはJSがopacity=0にする（値そのものは
   CSSに書かない。JSのsetAttributeが上書きされないようにするため。design.md参照） */
#excess-readout {
  transition: opacity 0.3s ease;
}

/* 情報パネル（高さ・気温）は「上げると冷える」の途中経過で、生徒が読み取るべき
   最終出力ではない。主役の水蒸気ゲージより一段弱い字にして、視線の優先順位を
   ゲージ側へ寄せる（理科が苦手な人の「どの数字を見ればいいの?」への対応） */
.readout-sub {
  font-size: 10px;
  fill: #1c2541;
  fill-opacity: 0.75;
}

/* 高さが実単位ではない旨の注記。読めればよく、主張は最小でよい */
.readout-note {
  font-size: 8px;
  fill: #1c2541;
  fill-opacity: 0.6;
}

.readout-small {
  font-size: 9px;
  fill: #1c2541;
}

.readout-strong {
  font-size: 12px;
  fill: #1c2541;
  font-weight: bold;
}

/* ゲージ見出し「水蒸気の量」の下の行。段階のラベル＋数値（例「やや多い（9.4 g/m³）」）。
   最長「やや少ない（11.6 g/m³）」がplate内（x=-8 起点、幅112）に収まるよう8px。左寄せ */
.held-vapor-readout {
  font-size: 8px;
  fill: #1c2541;
  font-weight: bold;
}

.temp-strip-bg {
  fill: none;
  stroke: #1c2541;
  stroke-width: 1.5;
}

.temp-strip-fill {
  fill: #1c2541;
}

/* 水蒸気ゲージの反転（design.md参照）: 塗り=水蒸気の量（高さを変えても変わらない。
   水蒸気の量スライダーで4段階に切り替えられる）、点線=水蒸気の上限（可変。正式
   用語の「飽和水蒸気量」は3問後のまとめでだけ渡す。design.md「設計思想と実装の
   食い違いの是正」参照）。
   線が塗りの上端より下に来た分を、この白抜き＋輪郭線で示す。○が白く曇る雲の
   表現と同じ白を使うことで、色数を増やさずに「白＝あふれた分」という意味を
   繋げる */
.excess-band {
  fill: #ffffff;
  stroke: #1c2541;
  stroke-width: 1.5;
}

/* 「もう入らない領域」の斜線。点線（上限）より上を埋め、気温が下がるほど上から
   広がる。数字を読まなくても「入る場所が減っていく」ことが分かるようにするため
   （実ユーザーの「数字が多すぎる」「カゴなら分かる」への対応。design.md参照）。
   色は既存の濃紺のみ（新色なし）。赤系は「悪いこと」に見えるので使わない——
   雲ができるのは失敗ではない。y/heightはJSが更新するのでここには書かない */
.no-room-band {
  fill: url(#no-room-hatch);
}

.vapor-cap-line {
  stroke: #1c2541;
  stroke-width: 3;
  stroke-dasharray: 5 3;
}

/* お題タイプC の比較線（A・Bが雲になった高さの水平線）。上限の点線と同じ
   視覚言語＝濃紺の破線で「境目」を表す。色は増やさない。線が下にある方＝低い
   高さで雲になった方（＝水蒸気が多い方）。y座標・opacityはJSが入れる */
#quiz-cmp-lines {
  transition: opacity 0.25s ease;
  pointer-events: none;
}

.quiz-cmp-line {
  stroke: #1c2541;
}

/* A・Bの区別は色ではなく線の太さ・破線パターンでつける（色を増やさない。
   「正解の色を変える」＝予想が外れると『間違い』の印象が強くなるので採らない）。
   狭い画面でラベルが消えても、細い線＝A / 太い線＝B で見分けられる */
.quiz-cmp-line--a {
  stroke-width: 1.5;
  stroke-dasharray: 3 3;
}

.quiz-cmp-line--b {
  stroke-width: 3.5;
  stroke-dasharray: 9 4;
}

/* ラベルは両方とも線の左端に置く（左右に分けると判別しにくい、という指摘）。
   y は drawQuizCmpLine が線の高さ＋4 にして、線の左端に寄り添わせる */
.quiz-cmp-label {
  font-size: 12px;
  font-weight: bold;
  fill: #1c2541;
}

/* 自動再生中、いまA・Bどちらを上げているかを出す（先にAが上がることを
   分かりやすくする。実ユーザーの指摘）。cloud-flash の下・山頂より上の空き帯 */
.quiz-cmp-now {
  font-size: 13px;
  font-weight: bold;
  fill: #1c2541;
  text-anchor: middle;
  pointer-events: none;
}

/* お題タイプAの「高さの目安」（選択肢 10/25/50/75 が○の通り道のどこか）。
   色は増やさない（#eaeaea/#1c2541）。目印は薄色の中身＋濃紺の輪郭で、空でも
   山（濃紺）の上でも見える。数字は paint-order の薄い縁取りで同じく読める。
   タイプCの比較線（長い水平の破線）とは形（小さなリング）で区別 */
#quiz-height-guide {
  transition: opacity 0.25s ease;
  pointer-events: none;
}

.quiz-height-mark {
  fill: #eaeaea;
  stroke: #1c2541;
  stroke-width: 1.5;
}

.quiz-height-num {
  fill: #1c2541;
  stroke: #eaeaea;
  stroke-width: 2.5;
  paint-order: stroke;
  font-size: 9px;
  font-weight: bold;
}

/* 空の背景色。○の白いfill（雲）が#eaeaea背景だとほぼ見分けられなかったため追加
   （CLAUDE.mdの「色は4色まで」に対する例外として、空の色を1色追加している） */
.sky {
  fill: #a3cfeb;
}

.land {
  fill: #1c2541;
}

.mountains polygon {
  fill: #1c2541;
}

/* ○（空気の塊）はレバー操作の結果として自動で動く表示専用のグループ（直接
   ドラッグはしない）。位置はtransform(translate)で持たせる（cx/cyではなく。
   中の○本体・雲がそれぞれ独立した要素のため、グループ全体をまとめて動かす
   必要がある）。位置ジャンプをなめらかに見せるためのトランジション。
   ドラッグ中は#air-mass.draggingで無効化し、指に瞬時に追従させる（レバー
   操作の1:1追従が崩れないようにするため） */
#air-mass {
  pointer-events: none;
  transition: transform 0.3s ease;
}

#air-mass.dragging {
  transition: none;
}

#air-mass.dragging #air-mass-cloud {
  transition: none;
}

/* ○本体。雲ができても消えず常にそのまま残る（2026-08-27改訂。理科的にも、
   空気塊が消えて雲になるわけではなく、その中の水蒸気の一部が水滴になって
   雲を作るため。design.md参照）。あふれ量に左右されない固定の見た目なので、
   ここに値を書いてよい（JS側からは一切setAttributeしない要素）。
   fillはtransparent(none)ではなく.skyと同じ色で塗る: ○は距離レバーで
   斜面上を移動するため山（濃紺）と重なる瞬間があり、fill:noneだと輪郭線
   ごと山の色に溶けて見えなくなってしまう（2026-08-27発覚）。sky色なら
   空の上では透明に見えるのと同じ効果を保ちつつ、山の上でも判別できる */
#air-mass-base {
  fill: #a3cfeb;
  stroke: #1c2541;
  stroke-width: 2;
}

/* 雲（1本のpathで表現。円を複数重ねると内側にも輪郭線が出て「丸の集合」に
   見えてしまうため採用しなかった。design.md参照）。あふれ量が増えるにつれて
   ○の上に現れ、段階的に大きく育っていく。
   重要: ここにopacity/dの値を書かないこと。CSSの宣言はSVGのpresentation
   attribute（JSのsetAttributeが書き込む先）より常に優先されるため、
   ここで固定値を指定すると、JS側がどんな値をsetAttributeしても描画に反映
   されなくなる（2026-08-27に発覚したバグ。雲の実装(0d90f95)時点から
   存在していた。opacityでも同じ問題を起こさないよう、値そのものは
   書かずtransitionだけ指定する） */
#air-mass-cloud {
  fill: #ffffff;
  stroke: #1c2541;
  stroke-width: 2;
  transition: opacity 0.3s ease;
}

/* 雲ができた瞬間だけ軽く弾ませる（派手にしない。0.45秒で終わる小さなスケール変化）。
   注意: CSSのtransformはHTML側のtransform属性(translate(0,-10))を上書きするので、
   キーフレームにも同じtranslateを含めて位置がずれないようにしている。
   transform-boxを指定しないとSVGのtransform-originがビューポート基準になる */
#air-mass-cloud.pop {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: cloud-pop 0.45s ease-out;
}

@keyframes cloud-pop {
  0% {
    transform: translate(0px, -10px) scale(0.86);
  }
  60% {
    transform: translate(0px, -10px) scale(1.06);
  }
  100% {
    transform: translate(0px, -10px) scale(1);
  }
}

/* 雲ができた瞬間の一行（マップ上・固定位置）。因果の要点をその場・その瞬間に出す。
   色は既存の濃紺のみ。opacity/文言はJSが入れるのでここには書かない */
.cloud-flash {
  font-size: 16px;
  font-weight: bold;
  fill: #1c2541;
  text-anchor: middle;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

/* 2行目＝小さな補足（演出と説明を分ける）。1行目より一段弱い字。
   狭い画面ではマップの縮小で読めない大きさになるため、下の media query で隠す
   （その場合は1行目だけ＝design.md「数値の位置づけ」の指示どおり） */
.cloud-flash-sub {
  font-size: 11px;
  font-weight: normal;
  fill-opacity: 0.75;
}

.lift-arrow {
  fill: #eaeaea;
  stroke: #1c2541;
  stroke-width: 1.5;
  opacity: 0;
  pointer-events: none;
}

.lift-arrow.pulse {
  animation: lift-pulse 0.6s ease-out;
}

@keyframes lift-pulse {
  0% {
    opacity: 0.85;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-22px);
  }
}

/* 距離レバー・水蒸気の量スライダー: マップ外・横向き・全幅。「触るもの」は場所
   （マップの外）・向き（横）・つまみの3点で「読むもの」（マップ内の縦の計器）と
   区別する（design.md「UIの課題」参照） */
.levers {
  width: 100%;
  max-width: 600px;
  margin: 0.5rem auto 0;
}

.lever-caption {
  margin: 0 0 0.35rem;
  font-size: 0.85rem;
  line-height: 1.3;
}

.lever-svg {
  display: block;
  width: 100%;
  height: 40px;
  touch-action: none;
}

.lever-handle {
  fill: #eaeaea;
  stroke: #1c2541;
  stroke-width: 3;
  cursor: grab;
  touch-action: none;
}

.lever-handle:active {
  cursor: grabbing;
}

.gauge-track {
  fill: #eaeaea;
  stroke: #1c2541;
  stroke-width: 2;
}

.gauge-fill {
  fill: #1c2541;
}

/* 水蒸気の量スライダーの目盛り（4段階のスナップ位置を示す短い縦線） */
.vapor-level-tick {
  stroke: #1c2541;
  stroke-width: 1.5;
  opacity: 0.5;
}

/* 現在の段階の数値読み上げ。教科書の対応表の値（4.8/6.8/9.4/11.6）と
   そのまま照合できるようにする（design.md「水蒸気の量スライダー」参照） */
.vapor-level-readout {
  margin: 0.35rem 0 0;
  font-size: 0.8rem;
}

.change-log {
  max-width: 600px;
  margin: 1.5rem auto 0;
  padding: 0.8rem 1rem;
  border: 2px solid #1c2541;
  border-radius: 6px;
  font-size: 0.85rem;
  text-align: left;
}

.change-log-title {
  margin: 0 0 0.4rem;
  font-weight: bold;
}

#change-log-list {
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: 180px;
  overflow-y: auto;
}

#change-log-list li {
  margin-bottom: 0.3rem;
  opacity: 0;
  animation: log-fade-in 0.3s ease-out forwards;
}

/* ログが空のときの案内（resetChangeLog）。実ログと区別できるよう薄め＋斜体。
   フェードインアニメは使わず、その場に静かに置く */
#change-log-list li.change-log-hint {
  opacity: 0.55;
  font-style: italic;
  animation: none;
}

@keyframes log-fade-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.legend {
  max-width: 600px;
  margin: 1.5rem auto 0;
  padding: 0.8rem 1rem;
  border: 1px dashed #1c2541;
  border-radius: 6px;
  font-size: 0.8rem;
  text-align: left;
}

/* アコーディオンの見出しボタン（2026-09-05）。初見時の情報量を減らすため
   初期状態は閉じておく。既存の色（濃紺・地の薄グレー）以外は増やさない */
.legend-toggle {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-weight: bold;
  color: #1c2541;
  cursor: pointer;
  text-align: left;
}

/* 開閉のアイコンはCSSの疑似要素（▶固定）をaria-expandedに応じて回転させる
   だけで表現する。JS側でテキストを書き換える必要がない */
.legend-toggle::before {
  content: "▶";
  display: inline-block;
  margin-right: 0.4rem;
  font-size: 0.75em;
  transition: transform 0.15s ease;
}

.legend-toggle[aria-expanded="true"]::before {
  transform: rotate(90deg);
}

.legend-content {
  margin-top: 0.5rem;
}

.legend ul {
  margin: 0;
  padding-left: 1.2rem;
}

.legend li {
  margin-bottom: 0.2rem;
}

.tutorial-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
}

.tutorial-bubble {
  position: absolute;
  max-width: 260px;
  background: #eaeaea;
  border: 2px solid #1c2541;
  border-radius: 10px;
  padding: 0.8rem 1rem;
  font-size: 0.9rem;
  text-align: left;
  pointer-events: auto;
  box-shadow: 0 4px 14px rgba(28, 37, 65, 0.35);
}

.tutorial-step-label {
  margin: 0 0 0.3rem;
  font-size: 0.75rem;
  font-weight: bold;
  opacity: 0.7;
}

#tutorial-text {
  margin: 0;
  /* step1/step2は「結論」と「補足」の2文。間の \n を改行として見せる
     （狭い吹き出しなので各文はさらに折り返してよい） */
  white-space: pre-line;
}

.tutorial-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-top: 0.7rem;
}

.tutorial-skip {
  font-family: inherit;
  font-size: 0.8rem;
  background: none;
  border: none;
  color: #1c2541;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}

.tutorial-next {
  font-family: inherit;
  font-size: 0.9rem;
  padding: 0.4rem 1rem;
  border: 2px solid #1c2541;
  border-radius: 6px;
  background: #1c2541;
  color: #eaeaea;
  cursor: pointer;
}

.tutorial-highlight {
  outline: 3px solid #1c2541;
  outline-offset: 4px;
  border-radius: 8px;
}

/* ==== スマホ表示（横幅が狭い画面）====
   ゲージがマップ内蔵になったことで、マップとレバーだけで「操作→結果」が
   1画面に収まるようになった（旧resultsPanelのsticky表示は不要になったため
   廃止）。狭い画面ではbodyのpaddingが横幅を圧迫するため縮める */
@media (max-width: 700px) {
  body {
    padding: 1.25rem 0.75rem;
  }

  .app-layout {
    gap: 0.4rem;
  }

  /* スマホ: 縦は align-self: stretch で「お題に挑戦」「使い方を見る」と同じ高さに
     揃える（縦paddingは持たせない）。横だけ少し広げてタップ幅を確保 */
  .sound-toggle {
    padding: 0 0.7rem;
  }

  /* 「雲ができた！」の一行が、スマホで縦に広げた情報パネル（.panel-plate の
     height を 64 に拡張済み。SVG座標で y=8〜72）と重なるため、スマホだけ下げる。
     <text> は CSS の y が効かないので transform: translateY で見た目の位置を
     ずらす（.info-panel text 等と同じ方式）。y=80→96 相当に下げてもグリフ下端は
     y≈99 で、山頂 y=120 より十分上に収まる */
  .cloud-flash {
    transform: translateY(16px);
  }

  /* マップ内文字サイズの引き上げ（2026-09-05・実ユーザー指摘）。SVGはviewBoxで
     座標系を固定しているため（CLAUDE.md参照）、フォントサイズはSVGのuser
     unit＝#mapの表示幅に対する相対値になる。#mapは横幅100%・max-width:600px
     なので、PC（600px幅・拡大率1.5）では読めていても、スマホ実表示幅330〜
     350px（拡大率0.825〜0.875）だと同じuser unit値が7〜9px相当まで縮む。
     ここでは各要素の余白（Playwright実測でオーバーフローしない上限）を
     確認した上で14pxに統一し、実表示で11〜12px程度を確保する:
       - .readout-sub（高さ・気温）: 情報パネルplate幅180に対し実測右端92px
         で余裕あり
       - .gauge-label（「水蒸気の量」見出し）: 同66px、vaporパネルplate幅
         100に対し余裕あり
       - .readout-small（「上限」「水滴になった量」見出し）: 実測右端が
         plate幅100に対し93〜94pxとやや近いが収まる
     .readout-note（注記）は情報パネルのplate幅を広げる別ルールで対応
     （下記）。.held-vapor-readout（水蒸気量の現在値）はラベル・数値を
     2行に分割したことで1行あたりの文字数が減り、14pxでも収まるように
     なったため同じく14pxにする（下記・index.html参照） */
  .readout-sub,
  .readout-small {
    font-size: 14px;
  }

  /* 情報パネルの注記（「※実際の高さ（m）ではありません」）は14pxだと
     元のplate幅180に収まらない（実測右端236px）ため、plateだけ広げる。
     245pxならvaporパネル（絶対x=284開始）の手前31pxで止まり重ならない。
     2026-09-05: 3行が窮屈という実機指摘を受け、高さも52→64に広げて
     行間の余白を確保した（下記の行送り変更とセット） */
  .info-panel .panel-plate {
    width: 245px;
    height: 64px;
  }

  .readout-note {
    font-size: 14px;
  }

  /* 情報パネル3行の行間・上下余白を広げる（2026-09-05・実機指摘「窮屈」）。
     文字サイズ（14px）は変えず、見た目の位置だけ下にずらす。index.htmlの
     並び順は text:nth-of-type(1)=高さ、(2)=注記、(3)=気温（<rect>は<text>
     ではないのでnth-of-typeのカウントに影響しない）。狙いはbaseline
     18/35/53（元のy属性15/27/43に対しそれぞれ+3/+8/+10）で、行間はおよそ
     17〜18（14px文字に対し行送り比1.25前後）。気温の横帯(.temp-strip-bg/
     -fill)も気温の行に合わせて追従させる（元のy=34は気温行y=43から-9の
     オフセット。新しい気温行53に合わせてy=44にする）。

     2026-09-06追記（実機指摘・1〜2行目の重なり）: 当初ここを`y: 18px`等の
     CSSプロパティで実装していたが、**<text>要素は<rect>と異なりCSSの`y`
     が実際の描画に反映されず、属性の`y`（15/27/43）が優先される**ため、
     文字サイズだけ14pxに拡大され行間（元のy属性の差=12/16）が追従せず、
     1〜2行目が重なって表示されていた（Playwrightで`getBBox()`ではなく
     `getBoundingClientRect()`で実描画位置を確認して発覚。前回の
     .gauge-labelと同じ原因）。`transform: translateY()`で見た目の位置を
     ずらす方式に修正した（ずらす量 = 目標baseline − 元のy属性） */
  .info-panel text:nth-of-type(1) {
    transform: translateY(3px);
  }

  .info-panel text:nth-of-type(2) {
    transform: translateY(8px);
  }

  .info-panel text:nth-of-type(3) {
    transform: translateY(10px);
  }

  .temp-strip-bg,
  .temp-strip-fill {
    y: 44px;
  }

  /* 見出し「水蒸気の量」と値（例「少ない」「(4.8 g/m³)」）のバランス調整
     （2026-09-05・実機指摘「値が見出しより大きく太くて不釣り合い」）。
     従来はどちらも14pxで、値だけ太字（.held-vapor-readout。PC基準では
     見出し10px・値8pxで差があったが、両方14pxに引き上げた際にサイズ差が
     消え、太字の値だけが目立っていた）。見出しを一回り大きく太字にして
     「見出し＞値」の関係を作り、値は太字を外して一段弱くする */
  .gauge-label {
    font-size: 16px;
    font-weight: bold;
    /* 2026-09-05追記: 16pxに引き上げた際、元のy=-8（10px基準）のままだと
       文字の上端がvaporパネルのplate上端（y=-20）を超えてはみ出す実機
       指摘があった。6px下にずらしてplate内に収める（スクリーンショットで
       確認）。ずらした分、直下のラベル・数値の2行（.held-vapor-readout）
       と間隔が詰まって重なって見えたため、そちらも合わせて8px下にずらし、
       トラック開始位置（script.jsのVAPOR_TRACK_TOP）も26→34に下げて
       間隔を確保した（下記「確認結果」参照）。CSSの`y`プロパティは
       <text>の実際の描画位置を変えない（<rect>等の図形と異なり、
       Chromiumがgeometry属性の`y`を優先する）ため、`transform`で見た目上の
       位置だけ動かす */
    transform: translateY(6px);
  }

  .held-vapor-readout {
    font-size: 13px;
    font-weight: normal;
    /* 見出しを6px下げたことで間隔が詰まったため、こちらも8px下げて
       見出しとの間隔を確保する（上記.gauge-labelのコメント参照） */
    transform: translateY(8px);
  }

  /* マップが縮小されて2行目の補足が読めない大きさになるので、狭い画面では
     1行目（見た現象そのまま）だけにする */
  .cloud-flash-sub {
    display: none;
  }

  /* まとめ表の1列目は短縮形に差し替える（タイプ混在で長くなるため） */
  .quiz-summary-table .q-full {
    display: none;
  }

  .quiz-summary-table .q-short {
    display: inline;
  }

  /* お題モード中のスマホ限定の縦詰め（design.md「お題モード」／PC表示は変えない）。
     お題パネル（219〜238px）が挿入されることでマップが押し下げられ、375×667で
     水蒸気の量ゲージ・距離レバー・水蒸気の量スライダーの読み上げが画面外に
     出てしまうため、以下で縦を回収する:
       A. サブタイトルを隠す（お題の質問文と一字一句同じ文言なので冗長）
       B. ツールバーごと隠す（PCでは効果音トグルだけ残すが、スマホは縦優先で全部隠す。
          お題中にミュートしたいときは「自由に触る」で一度戻る）
       C. お題パネルの余白を圧縮
       D. 選択肢を2×2から横一列4つに（正確なg数を画面内に残すための縦の余地を作る） */
  body.quiz-mode .app-subtitle,
  body.quiz-mode .toolbar {
    display: none;
  }

  /* C: お題パネル・まとめパネルの余白圧縮（パネルはお題中しか表示されないので
     media query だけで足り、body.quiz-mode で限定する必要はない） */
  .quiz-panel,
  .quiz-summary {
    padding: 0.45rem 0.7rem;
    margin-bottom: 0.5rem;
  }

  .quiz-header {
    margin-bottom: 0.3rem;
  }

  .quiz-question {
    margin-bottom: 0.3rem;
    /* 問題文が「条件」＋「問い」の2文になり縦に伸びたので、狭い画面では
       少し詰めて各文が1行に収まりやすくする（マップ以下が押し下がるのを防ぐ） */
    font-size: 0.82rem;
  }

  .quiz-hint {
    margin-top: 0.2rem;
  }

  /* D: 選択肢を横一列に。4つを375pxに収めるためフォントとパディングを詰める
     （「②25くらい」程度の短い文字列なら読める前提。ユーザー承認済み）。
     デフォルト（PC幅）は2列グリッドに変更したため、ここで display: flex に
     戻して横一列（2択・4択とも1行で均等割り）にする */
  .quiz-choices {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.4rem;
  }

  .quiz-choice-button {
    flex: 1 1 0;
    min-width: 0;
    font-size: 0.72rem;
    padding: 0.5rem 0.25rem;
    white-space: nowrap;
  }

  /* A〜D だけではマップ押し下げ分を吸収しきれず、水蒸気の量スライダーの
     読み上げ（正確なg数。予想の根拠として画面内に残したい）が667pxをはみ出す。
     お題中だけレバー周りの余白も詰めて、あと約35px回収する。これらの要素は
     お題外でも表示されるため body.quiz-mode で限定する（お題を抜ければ元に戻る） */
  body.quiz-mode .app-layout {
    gap: 0.2rem;
  }

  body.quiz-mode .levers {
    margin-top: 0.2rem;
  }

  body.quiz-mode .lever-caption {
    margin-bottom: 0.15rem;
    font-size: 0.8rem;
  }

  body.quiz-mode .vapor-level-readout {
    margin-top: 0.1rem;
  }

  /* 水蒸気の量スライダーはお題中ロック中（触らない）なので、つまみの
     タッチ範囲を気にせず高さを詰めてよい。距離レバーは主操作なので触らない */
  body.quiz-mode #vapor-level-lever {
    height: 30px;
  }

  /* まとめ表: 狭い画面でも横スクロールが出ないようフォントとパディングを詰める */
  .quiz-summary-table {
    font-size: 0.8rem;
  }

  .quiz-summary-table th,
  .quiz-summary-table td {
    padding: 0.28rem 0.3rem;
  }
}

/* iPhone SE 相当（狭い方）。横一列を維持しつつ「壊れずに動く」ことを目標に
   さらに詰める（CLAUDE.md「スマホは壊れずに動く」） */
@media (max-width: 360px) {
  /* iPhone SE 相当ではラベルの実効サイズが小さくなりすぎるので隠し、線だけ残す
     （細い線＝A / 太い線＝B のスタイル差で区別。再生中は #quiz-cmp-now が
     「A/B を上げています」で補う）。375px 以上ではラベルを表示する */
  .quiz-cmp-label {
    display: none;
  }

  .quiz-choices {
    gap: 0.25rem;
  }

  .quiz-choice-button {
    font-size: 0.68rem;
    padding: 0.45rem 0.1rem;
    letter-spacing: -0.03em;
  }

  .quiz-summary-table {
    font-size: 0.72rem;
  }

  .quiz-summary-table th,
  .quiz-summary-table td {
    padding: 0.24rem 0.22rem;
  }
}