/* =====================================================================
   おばけ算数 － 見た目（1/5）：ページ全体の土台・変数・共通ボタン・プレー背景
   ---------------------------------------------------------------------
   もとは1本の style.css でした。中身は1文字も変えず、行の順番も
   そのままで 5 本に分けただけです。
   ★ CSSは「後に書いたほうが勝つ」ので、index.html の <link> の
     並び順を入れ替えないでください。1→2→3→4→5 の順です。
   ===================================================================== */
:root{ --css-1-loaded:1; }

@charset "utf-8";
/* WORLD_MAP_BUILD: 20260802-STARTUP-AUDIO-CACHEFIX-V24
   =====================================================================
   おばけ算数 － 見た目（CSS）
   ---------------------------------------------------------------------
   index.html から切り出したものです。中身は一切変えていません。
   並び順も詳細度もそのままなので、後ろにあるものほど強く効きます。
   順番を入れ替えると表示が崩れます。

  このファイルは index.html と同じ場所（リポジトリ直下）に置いてください。
   url('assets/...') はこのCSSの場所を基準に解決されるため、
   置き場所を変えると画像が読めなくなります。

   構成
     前半 … 全画面共通・タイトル・プレー画面・マップ・図鑑
     後半 … 第10章（区切り章）専用。前半を上書きするので必ず後ろに置く
   ===================================================================== */

:root{
    --sky-top:#3E3566; --sky-mid:#6C5FA7; --sky-low:#B79BC9; --horizon:#F7CFA0;
    --grass:#7FBF6A; --grass-dark:#4F8F45;
    /* お皿＝木のおぼん。板の札や地図の木枠と同じ木の世界にそろえる */
    --plate:#F6E7C8; --plate-rim:#C9A971; --plate-wood:#9A7440; --plate-deep:#7A5A31;
    --btn:#FFB03A; --btn-shadow:#D68A1E;
    --ink:#4A3F66;
    /* オープニングの1枚絵。横向き（iPad横）用と、スマホ縦用の縦長版。
       「算数おばけ」v1.0.0 の正式素材。JSが実際に読めた方をここへ入れ直す */
    --title-img:url('assets/title-sansuu-obake-ipad-v1.png');
    --title-img-tall:url('assets/title-sansuu-obake-phone-v2.png');
    --world-overview-img:url('assets/world_map_overview.webp');
    --companion-img:url('assets/companion_bg_departure_clearing.webp');
    /* ファイル名は配信しているとおり（空白区切り）。以前はここに
       map_bg_world01_deep_forest.webp と書いていたが、その名前の実体は無く、
       毎回404になってから下の別名で読み直していた。絵は同じもの。 */
    --map-img:url('assets/map bg world01 deep forest.webp');
    --map-img-w2:url('assets/map_bg_world02_suigenkyo.webp');
    /* 図鑑は承認素材v1.0.1の3層構成へ移行した。3層のURLは、いまの画面の向きの
       分だけを index.html 側でCSS変数（--zk-room/--zk-paper/--zk-book）へ入れる。
       旧・図鑑1枚絵 assets/zukan bg.webp はリポジトリに残すが、参照しない。 */
    /* プレー中の森の背景（ステージ進行で切り替える）。
       ファイル名は配信しているとおり（空白区切り）。以前は stage_bg_1.webp の
       ように書いていたが、その名前の実体は無く、404のあと別名で読み直していた。
       指す絵は同じで、見え方は変わらない。 */
    --stage-bg-1:url('assets/stage bg 1.webp');
    --stage-bg-2:url('assets/stage bg 2.webp');
    --stage-bg-3:url('assets/stage bg 3.webp');
    --stage-bg-4:url('assets/stage_bg_4_altar.webp');
    --stage-bg-5:url('assets/stage_bg_5_suigenkyo_ch11.webp');
    --stage-bg-6:url('assets/stage_bg_6_suigenkyo_ch12.webp');
    --stage-bg-10:url('assets/ch20-moonlit-water-altar-approved-v1.png');
    --stage-bg:none;
}

/* =====================================================================
   v23 共通設定 ── 音楽と効果音を別々に切り替える
   （読み上げは廃止したので、切り替えは2項目になった）
   ===================================================================== */
/* 設定は左下に置いた小さな札。丸い白ボタンはやめ、他の札と同じ紙にする。
   紙・枠・押した手ごたえは共通の .markTag が持つので、ここは置き場所と大きさだけ */
#settingsBtn{
  /* 第1章Q2・第5章Q1などで下段の物と重なる既知の事象があるため、
     共通の .tagFlat が持つ min-height:56px には合わせず、いまの大きさを保つ */
  min-height:clamp(50px,11vw,60px);
  position:fixed;
  left:max(12px,env(safe-area-inset-left));
  bottom:max(14px,env(safe-area-inset-bottom));
  z-index:132;
  width:clamp(50px,11vw,60px);
  height:clamp(50px,11vw,60px);
  padding:9px;
  touch-action:manipulation;
}
#settingsBtn svg{width:100%;height:100%;}

#settingsOverlay{z-index:133;background:rgba(25,18,62,.74);}
#settingsOverlay .settingsCard{
  width:min(90vw,500px);
  min-width:0;
  /* 3項目だった頃の高さのままだと、2項目では下が間延びする。
     中身（見出し＋2項目＋もどる）に合う高さにしておく。 */
  min-height:min(56vh,372px);
  padding:44px clamp(28px,7vw,54px) 38px;
  gap:18px;
}
.settingsList{width:100%;display:flex;flex-direction:column;gap:12px;}
.settingToggle{
  width:100%;
  min-height:68px;
  /* ふちは他の札と同じ実線1本。旧 rgba(...,.22) は薄すぎて枠が見えなかった */
  border:2px solid var(--t-wood-800, #7A5A31);
  border-radius:var(--t-radius-m, 18px);
  padding:8px 10px 8px 20px;
  background:linear-gradient(180deg, var(--t-paper-050, #FAF5E8) 0%, var(--t-paper-100, #F2E6CC) 45%);
  box-shadow:0 5px 0 var(--t-wood-600, #9A7440), 0 8px 12px rgba(8,5,20,.4);
  color:var(--t-ink-900, #1F2D2A);
  font-family:inherit;
  font-weight:900;
  font-size:clamp(17px,4.7vw,22px);
  line-height:1.2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  touch-action:manipulation;
}
.settingToggle:active{transform:translateY(5px);
  box-shadow:0 0 0 var(--t-wood-600, #9A7440), 0 2px 5px rgba(8,5,20,.45);}
.settingLabel{display:flex;align-items:center;gap:8px;text-align:left;}
.settingState{
  flex:0 0 auto;
  min-width:88px;
  border-radius:14px;
  padding:9px 12px;
  border:2px solid #5A5470;
  background:#7E7791;
  color:#fff;
  text-align:center;
  font-size:.8em;
  font-weight:900;
}
/* ONは緑、OFFは灰。色だけでなく枠の濃さでも差が出るようにしてある */
.settingToggle.on .settingState{background:#2E9268;border-color:#1C6B4A;}
.settingToggle.off .settingState{background:#7E7791;border-color:#5A5470;}
#settingsClose{margin-top:2px;min-width:150px;}

@media (orientation:landscape) and (min-width:820px){
  #settingsBtn{width:62px;height:62px;left:max(18px,env(safe-area-inset-left));bottom:max(18px,env(safe-area-inset-bottom));}
  #settingsOverlay .settingsCard{min-height:min(52vh,396px);padding:38px 56px 34px;}
  .settingToggle{min-height:68px;font-size:23px;}
}

/* =====================================================================
   このアプリについて
   ---------------------------------------------------------------------
   せっていからだけ開く読みものの画面。おとなが読む文章なので、
   ゲーム画面より落ち着いた紙面にして、行間を広く取る。
   見出しと「もどる」は必ず画面に残し、あふれるのは本文だけにする。
   絵は使わず、夜・紙・木・灯りの既存トークンで組んでいる。
   ===================================================================== */
#aboutBtn{font-size:clamp(14px,3.8vw,17px);}
#aboutOverlay{
  z-index:134;                       /* せってい(133)より上に重ねる */
  background:rgba(21,17,46,.82);
  padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right))
          max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
}
.aboutCard{
  display:flex;
  flex-direction:column;
  gap:clamp(12px,2.4vh,20px);
  width:min(92vw,560px);
  /* 画面に収まる高さで止める。あふれた分は本文の中だけでスクロールさせる */
  max-height:min(86svh,720px);
  padding:clamp(20px,5vw,32px) clamp(18px,5vw,34px) clamp(18px,4vw,28px);
  border:2px solid var(--t-wood-800,#7A5A31);
  border-radius:var(--t-radius-l,24px);
  background:linear-gradient(180deg,var(--t-paper-050,#FAF5E8) 0%,var(--t-paper-100,#F2E6CC) 100%);
  box-shadow:0 6px 0 var(--t-wood-600,#9A7440), 0 14px 26px rgba(8,5,20,.5);
  text-align:left;
}
.aboutCard:focus{outline:none;}
.aboutCard:focus-visible{outline:var(--t-focus-ring,3px) solid var(--t-c-focus,#79B7C6);
  outline-offset:var(--t-focus-offset,2px);}
#aboutTitle{
  flex:0 0 auto;
  margin:0;
  font-size:clamp(19px,5.2vw,26px);
  font-weight:900;
  line-height:1.45;
  color:var(--t-ink-900,#1F2D2A);
  text-align:center;
}
/* 「大／切」のように語の途中で折れないよう、意味の切れ目でだけ改行させる。
   文字そのものは1文字も変えていない（spanは空要素で本文に足していない） */
#aboutTitle span{display:inline-block;}
/* 本文だけがスクロールする場所。body に touch-action:none があるので、
   ここでは縦方向の指の動きを通す。端まで来ても後ろへ送らない。 */
.aboutBody{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  touch-action:pan-y;
  -webkit-overflow-scrolling:touch;
  padding:2px 2px 2px 0;
  border-top:1px solid rgba(122,90,49,.28);
  border-bottom:1px solid rgba(122,90,49,.28);
}
.aboutBody:focus{outline:none;}
.aboutBody:focus-visible{outline:var(--t-focus-ring,3px) solid var(--t-c-focus,#79B7C6);
  outline-offset:2px;}
.aboutBody p{
  margin:0;
  padding:clamp(10px,2.2vh,14px) 0;
  font-size:clamp(15px,4vw,18px);
  line-height:1.95;
  letter-spacing:.02em;
  color:var(--t-ink-900,#1F2D2A);
}
.aboutBody p + p{border-top:1px solid rgba(122,90,49,.16);}

/* ---- 保護者の方へ｜学びの設計について ----
   上の5段落は子どもの世界の話、ここから下はおとなへ向けた説明。
   読み手が変わるので、太い区切り線と見出しではっきり分け、書体は
   ポリシー・規約と同じ落ち着いた角ゴシック（同梱の書体だけ／外部へは
   つながない）にそろえる。上の5段落の見た目には触れていない。 */
.aboutLearning{
  margin:clamp(14px,3vh,22px) 0 2px;
  padding-top:clamp(14px,3vh,20px);
  border-top:2px solid rgba(122,90,49,.34);
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic","YuGothic",Meiryo,sans-serif;
}
#aboutLearningTitle{
  margin:0 0 2px;
  font-size:clamp(17px,4.6vw,21px);
  font-weight:900;
  line-height:1.55;
  letter-spacing:.01em;
  color:var(--t-ink-900,#1F2D2A);
  text-wrap:balance;          /* 見出しの行を均す。未対応の端末では従来どおり折り返す */
}
.aboutLearning p{
  font-size:clamp(14.5px,3.8vw,17px);
  line-height:1.9;
}
/* 上の5段落との境目には太い線があるので、節の1段落目には細線を重ねない */
.aboutLearning > p:first-of-type{border-top:0;}
#aboutClose{flex:0 0 auto;align-self:center;}
@media (prefers-reduced-motion:reduce){
  #aboutOverlay{transition:none;}
}
/* 横向きで縦が短い端末は、余白と行間を詰めて本文の行数を稼ぐ */
@media (orientation:landscape) and (max-height:560px){
  .aboutCard{max-height:94svh;padding:14px 22px 12px;gap:10px;}
  #aboutTitle{font-size:clamp(17px,3.4vh,21px);}
  .aboutBody p{padding:8px 0;line-height:1.8;}
  #aboutLearningTitle{font-size:clamp(16px,3.2vh,19px);}
  .aboutLearning{margin-top:12px;padding-top:12px;}
}


/* =====================================================================
   プライバシーポリシー・利用規約
   ---------------------------------------------------------------------
   「このアプリについて」と同じ紙面を再利用し、長い本文だけをスクロールする。
   外部リンクには矢印を添え、見出しと戻る操作は画面内に残す。
   利用規約は同じ紙面・同じ書体を共有するので、id を並べて足すだけにする。
   ===================================================================== */
#privacyBtn,#termsBtn{font-size:clamp(14px,3.8vw,17px);}
#privacyOverlay,#termsOverlay{
  z-index:135;
  background:rgba(21,17,46,.82);
  padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right))
          max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
}
.privacyCard{
  width:min(94vw,680px);
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic","YuGothic",Meiryo,sans-serif;
}
#privacyTitle,#termsTitle{
  flex:0 0 auto;
  margin:0;
  font-size:clamp(18px,5vw,25px);
  font-weight:900;
  line-height:1.45;
  color:var(--t-ink-900,#1F2D2A);
  text-align:center;
}
#privacyTitle span,#termsTitle span{display:inline-block;}
.privacyBody{padding-right:clamp(4px,1.4vw,10px);}
.privacyBody .privacyMeta{font-weight:800;}
.privacyBody section{
  margin:0;
  padding:clamp(12px,2.6vh,18px) 0;
}
.privacyBody section + section{border-top:1px solid rgba(122,90,49,.22);}
.privacyBody h2{
  margin:0 0 4px;
  font-size:clamp(16px,4.3vw,20px);
  font-weight:900;
  line-height:1.6;
  color:var(--t-ink-900,#1F2D2A);
}
.privacyBody section p{padding:clamp(7px,1.6vh,10px) 0;}
.privacyBody ul{
  margin:2px 0 8px;
  padding-left:1.4em;
  font-size:clamp(15px,4vw,18px);
  line-height:1.9;
  letter-spacing:.02em;
  color:var(--t-ink-900,#1F2D2A);
}
.privacyBody li + li{margin-top:4px;}
.privacyExternalLink{
  display:inline-block;
  min-height:44px;
  padding:7px 2px;
  margin:-7px -2px;
  color:#245C87;
  font-weight:800;
  text-decoration:underline;
  text-decoration-thickness:2px;
  text-underline-offset:3px;
}
.privacyExternalLink::after{content:" ↗";font-size:.9em;text-decoration:none;}
.privacyExternalLink:focus-visible{
  outline:var(--t-focus-ring,3px) solid var(--t-c-focus,#79B7C6);
  outline-offset:var(--t-focus-offset,2px);
  border-radius:6px;
}
/* 規約本文からポリシーへ渡る内部リンク。外部ではないので矢印は付けず、
   色だけに頼らないよう下線を必ず残す。 */
.termsInlineLink{
  display:inline;
  padding:0;
  margin:0;
  border:0;
  background:none;
  font:inherit;
  color:#245C87;
  font-weight:800;
  text-decoration:underline;
  text-decoration-thickness:2px;
  text-underline-offset:3px;
  cursor:pointer;
}
.termsInlineLink:focus-visible{
  outline:var(--t-focus-ring,3px) solid var(--t-c-focus,#79B7C6);
  outline-offset:var(--t-focus-offset,2px);
  border-radius:6px;
}
#privacyClose,#termsClose{
  flex:0 0 auto;
  align-self:center;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic","YuGothic",Meiryo,sans-serif;
}
@media (prefers-reduced-motion:reduce){
  #privacyOverlay,#termsOverlay{transition:none;}
}
@media (orientation:landscape) and (max-height:560px){
  #privacyTitle,#termsTitle{font-size:clamp(17px,3.4vh,21px);}
  .privacyBody h2{font-size:clamp(15px,3.1vh,18px);}
}

/* 高さが短いiPhoneでも、設定の全項目と戻る操作を同時に収める。 */
@media (orientation:portrait) and (max-height:640px){
  #settingsOverlay .settingsCard{
    min-height:0;
    max-height:calc(100svh - 24px);
    padding:18px 24px 16px;
    gap:8px;
  }
  .settingsList{gap:8px;}
  .settingToggle{min-height:56px;}
  #aboutBtn,#privacyBtn,#termsBtn,#settingsClose{min-height:48px;}
}

/* =====================================================================
   画面の向きの案内（orientation gate）
   ---------------------------------------------------------------------
   スマホは たて、iPad・タブレットは よこ。合っていない向きのあいだだけ
   全面に出す。z-index は他のどの画面よりも上に置き、面が不透明なので
   下のゲームには指が届かない（触れなくする本体は index.html 側の inert）。
   絵は使わず、その場で描く。色は夜の空・紙の札・灯りにそろえる。
   ===================================================================== */
#orientGate{
  position:fixed;
  inset:0;
  z-index:900;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:max(20px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right))
          max(20px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));
  background:radial-gradient(128% 92% at 50% 40%, #3A3168 0%, #2B2450 56%, #1A1533 100%);
  touch-action:none;
}
#orientGate[hidden]{display:none;}
#orientGate .orientCard{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(16px,4.5vmin,30px);
  text-align:center;
}
/* 端末の絵。紙の札と同じ紙色・木の縁、光は灯りの色 */
#orientGate .orientDevice{
  display:block;
  width:clamp(96px,27vmin,180px);
  height:auto;
  overflow:visible;
  filter:drop-shadow(0 6px 10px rgba(10,6,26,.5));
}
#orientGate .orientDeviceBody{
  transform-box:view-box;
  transform-origin:80px 80px;
  animation:orientTurnToPortrait 2.8s ease-in-out infinite;
}
#orientGate[data-need="landscape"] .orientDeviceBody{animation-name:orientTurnToLandscape;}
/* スマホは よこ→たて、タブレットは たて→よこ に回して見せる */
@keyframes orientTurnToPortrait{
  0%,16%{transform:rotate(-90deg);} 54%,100%{transform:rotate(0deg);}}
@keyframes orientTurnToLandscape{
  0%,16%{transform:rotate(0deg);} 54%,100%{transform:rotate(90deg);}}
#orientGate .orientFrame{fill:var(--t-paper-050,#FAF5E8);stroke:var(--t-wood-600,#9A7440);stroke-width:5;}
#orientGate .orientScreen{fill:#3E3566;}
#orientGate .orientDot{fill:var(--t-wood-600,#9A7440);}
#orientGate .orientArrow{fill:none;stroke:var(--t-lantern-500,#F2B84B);stroke-width:7;stroke-linecap:round;}
#orientGate .orientHead{fill:var(--t-lantern-500,#F2B84B);}
#orientGate p{
  margin:0;
  font-weight:900;
  line-height:1.5;
  white-space:pre-line;
  letter-spacing:.04em;
  font-size:clamp(20px,5.8vmin,34px);
  color:#FFF3C9;
  text-shadow:0 4px 0 rgba(0,0,0,.25);
}
/* 動きを減らす設定では回さず、あるべき向きのまま見せる */
@media (prefers-reduced-motion:reduce){
  #orientGate .orientDeviceBody{animation:none;transform:rotate(0deg);}
  #orientGate[data-need="landscape"] .orientDeviceBody{transform:rotate(90deg);}
}
  *{margin:0;padding:0;box-sizing:border-box;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;}
  html,body{height:100%;overflow:hidden;overscroll-behavior:none;background:#3A3168;}
  /* 端末によっては押した後の枠線が細い線として残るため消しておく */
  button:focus{outline:none;} button:focus-visible{outline:3px solid rgba(255,226,142,.9);outline-offset:2px;}
  body{
    font-family:'Zen Maru Gothic','Hiragino Maru Gothic ProN',sans-serif;
    color:var(--ink); touch-action:none;
    background:linear-gradient(180deg,var(--sky-top) 0%,var(--sky-mid) 40%,var(--sky-low) 66%,var(--horizon) 78%,var(--grass) 78%,var(--grass-dark) 100%);
    transition:background 1.2s;
  }
  body[data-stage="2"]{--sky-top:#4A4278;--sky-mid:#8878BC;}
  body[data-stage="3"]{--sky-top:#5B5490;--sky-mid:#A793D2;--sky-low:#DCC4E0;}
  #stage{position:fixed;inset:0;overflow:hidden;
    --apple:62px; --btn-size:86px; --ghost-w:min(42vw,190px);
    --line-fs:clamp(15px,4vw,19px); --num-fs:clamp(34px,10vw,44px);}
  /* =====================================================================
     プレー中の森の背景
     ---------------------------------------------------------------------
     おばけ・相棒・問題文・お皿は、すべてこの上の別レイヤーに置いている。
     背景の絵にはおばけを描き込まないこと。
     切り替えは JS の STAGE_BACKGROUNDS（面の範囲→ファイル）だけで管理する。
     ===================================================================== */
  #stageBg{position:absolute;inset:0;z-index:0;pointer-events:none;
    background-image:var(--stage-bg);background-size:cover;
    background-position:center 42%;background-repeat:no-repeat;
    opacity:0;
    /* 第1〜9章では、3章ずつ同じ絵を中央の道へ寄るように短く拡大する。
       倍率は JS が章と stageIdx から求めるため、新しいセーブ項目は使わない。 */
    --journey-from:1;
    --journey-step-one:1;
    --journey-settle:1;
    --journey-scale:1;
    --journey-focus-x:50%;
    --journey-focus-y:56%;
    transform:scale(var(--journey-scale));
    transform-origin:var(--journey-focus-x) var(--journey-focus-y);
    transition:opacity .6s,
      transform .88s cubic-bezier(.22,.65,.33,1) .12s;
    backface-visibility:hidden;
    will-change:transform;
    /* 夜の色みへの補正。強さは面ごとに JS から差し替える */
    filter:saturate(var(--bg-sat,.75)) brightness(var(--bg-bright,.9)) contrast(1.06);
    isolation:isolate;}   /* ← 下の夜幕が背景の中だけで効くようにする（UIは暗くしない） */
  body.hasStageBg #stageBg{opacity:1;}

  /* 第1〜9章の連続前進。
     背景1の第1〜3章、背景2の第4〜6章、背景3の第7〜9章を、それぞれ
     100→160%、160→220%、220→280%の3章区間として進む。
     拡大の中心は道の消失点付近に固定する。
     各倍率は JS から CSS 変数へ渡すため、ここではアニメーションだけを担う。 */

  /* 一度に滑らかに拡大せず、二歩で「ズン、ズン」と奥へ進む。
     1段の60%まで進む→10%分だけ戻る→残り50%を進む比率にし、
     上下動は最大5pxに抑えて酔いにくくする。 */
  body.forestJourney.journeyPush #stageBg{
    transition:none;
    animation:forestJourneyPush 1.18s ease-in-out both;
  }
  @keyframes forestJourneyPush{
    0%{
      transform:translate3d(0,0,0) scale(var(--journey-from));
    }
    31%{
      transform:translate3d(0,5px,0) scale(var(--journey-step-one));
    }
    44%{
      transform:translate3d(0,-2px,0) scale(var(--journey-settle));
    }
    78%{
      transform:translate3d(0,4px,0) scale(var(--journey-scale));
    }
    100%{
      transform:translate3d(0,0,0) scale(var(--journey-scale));
    }
  }
  /* 途中再開では、現在地点へアニメーションせずに合わせる */
  body.journeySnap #stageBg{transition:none;}

  /* 端末の「動きを減らす」が有効なときは、位置だけ切り替えて移動を見せない */
  @media (prefers-reduced-motion:reduce){
    body.forestJourney #stageBg{transition:none;}
    body.forestJourney.journeyPush #stageBg{animation:none;}
  }

  /* 第11章：3:1の一枚絵を、左→中央→右へ2問ごとに送る。 */
  body.waterJourney #stageBg{
    background-size:auto 100%;
    background-position:var(--water-x,0%) center;
    transform:scale(1.015);
    transform-origin:center center;
    transition:opacity .6s,background-position 1.25s cubic-bezier(.22,.68,.32,1);
  }
  body.waterJourney.waterJourneyPush #stageBg{
    transition:none;
    animation:waterJourneyPush 1.28s cubic-bezier(.22,.68,.32,1) both;
  }
  @keyframes waterJourneyPush{
    0%{background-position:var(--water-from,0%) center;transform:translate3d(0,0,0) scale(1.015)}
    42%{transform:translate3d(0,4px,0) scale(1.022)}
    100%{background-position:var(--water-x,0%) center;transform:translate3d(0,0,0) scale(1.015)}
  }
  body.waterJourneySnap #stageBg{transition:none;}
  @media (prefers-reduced-motion:reduce){
    body.waterJourney #stageBg{transition:none;}
    body.waterJourney.waterJourneyPush #stageBg{animation:none;background-position:var(--water-x,0%) center;}
  }

  /* iPad横向きでは、縦長の背景画像が横長画面へ大きく切り取られる。
     画面中央を拡大すると道が外れて「ただアップした」ように見えるため、
     3枚それぞれの道の消失点へ拡大の中心を移す。スマホには適用しない。 */
  @media (orientation:landscape) and (min-width:900px) and (max-width:1400px) and (min-height:600px){
    /* 背景1：明るい森。画面下中央に見える一本道の奥 */
    body[data-journey-group="1"] #stageBg{
      --journey-focus-x:50%; --journey-focus-y:87%;
    }
    /* 背景2：深い森。中央下寄りの青い道の奥 */
    body[data-journey-group="2"] #stageBg{
      --journey-focus-x:50%; --journey-focus-y:72%;
    }
    /* 背景3：終わりの森。門ではなく、左へ曲がる道の奥 */
    body[data-journey-group="3"] #stageBg{
      --journey-focus-x:41%; --journey-focus-y:92%;
    }
  }

  /* ---- 夜幕（背景の中だけ）--------------------------------------------
     単純な黒ではなく、青紺を「乗算」で重ねている。乗算は暗いところほど
     強く沈み、明るいところは残るので、ランタンの暖色の灯りが消えずに
     相対的に浮き上がる。中央をうすく、外側を濃くして周辺減光も兼ねる。
     強さ（--night-strength）は面ごとに変える。
     -------------------------------------------------------------------- */
  #stageBg::before{content:"";position:absolute;inset:0;
    mix-blend-mode:multiply;opacity:var(--night-strength,.4);
    background:radial-gradient(128% 82% at 50% 44%,
      rgba(150,172,214,1) 0%,
      rgba(96,116,172,1) 46%,
      rgba(44,56,102,1) 100%);}

  /* 文字とおばけが背景に負けないよう、うっすら幕をかける */
  #stageBg::after{content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,
      rgba(14,12,32,.26) 0%, rgba(14,12,32,.06) 28%,
      rgba(14,12,32,.04) 64%, rgba(14,12,32,.24) 100%);}
  /* 森の絵と重なると邪魔になる飾りは隠す */
  body.hasStageBg #tree,
  body.hasStageBg .star{display:none;}
  /* 背景が濃いので、おばけの輪郭を強めて浮き上がらせる */
  body.hasStageBg #ghostImgs{filter:drop-shadow(0 12px 18px rgba(10,6,26,.6))
                                    drop-shadow(0 0 3px rgba(255,255,255,.35));}

  .star{position:absolute;border-radius:50%;background:#FFF3C9;animation:twinkle 3s ease-in-out infinite;}
  @keyframes twinkle{0%,100%{opacity:.2;transform:scale(.8)}50%{opacity:.9;transform:scale(1.15)}}

  /* =====================================================================
     共通UI：しおり札（.markTag）
     ---------------------------------------------------------------------
     絵本から垂れる紙のしおりを共通のボタン外形にする。
     ・完全なカプセル型にしない。角丸は弱め、下端に小さな尖りを付ける。
     ・細い二重枠と紙の質感で、丸い白ボタンとは別物に見せる。
     ・アイコンを白い丸背景へ閉じ込めない。文字とアイコンを一体で見せる。
     ・見た目を小さくしても、タップ領域は --t-tap-min を下回らせない。
     ・章名・キャラクター名では分岐しない。置き場所は各画面のidが決める。
     第1弾はプレー画面左上のマップだけに使い、他画面へは承認後に広げる。
     ===================================================================== */
  .markTag{
    --tag-w:clamp(54px, 13.5vw, 66px);
    --tag-paper-hi:var(--t-paper-050, #FAF5E8);
    --tag-paper-lo:var(--t-paper-100, #F2E6CC);
    /* ふちがいちばん濃く、木口（下の面）が中間、紙面がいちばん明るい。
       この3段にしないと、木の板の上でも夜の絵の上でも輪郭が沈む */
    --tag-edge:var(--t-wood-800, #7A5A31);
    --tag-slab:var(--t-wood-600, #9A7440);
    --tag-lift:5px;                     /* 木口の厚み＝押したときに沈む距離 */
    position:relative;box-sizing:border-box;
    width:var(--tag-w);min-width:var(--t-tap-min, 48px);
    min-height:var(--t-tap-min, 48px);
    border:0;padding:0;margin:0;
    font-family:var(--t-font-ui, inherit);
    background:none;-webkit-tap-highlight-color:transparent;
    cursor:pointer;
    filter:drop-shadow(0 3px 5px rgba(20,12,4,.42));
    transition:transform var(--t-dur-press, 90ms) var(--t-ease-standard, ease),
               box-shadow var(--t-dur-press, 90ms) var(--t-ease-standard, ease),
               filter var(--t-dur-press, 90ms) var(--t-ease-standard, ease);}
  /* 紙の本体。ふちは1本だけ。三重の内枠はふちがにごって輪郭が消えるのでやめた */
  .markTagInner{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:3px;padding:9px 4px 10px;
    border-radius:14px 14px 7px 7px;
    background:linear-gradient(180deg, var(--tag-paper-hi) 0%, var(--tag-paper-lo) 45%);
    box-shadow:inset 0 0 0 2px var(--tag-edge);}
  /* 下端の小さな尖り。札が「垂れている」ことを形で示す。
     縦型の札（プレー画面のマップなど）だけに付ける。
     文字が横に並ぶ平面版（.tagFlat）へ付けると、吹き出しの尻尾に見え、
     さらに文字の下端へかぶって読みにくくなるため出さない。 */
  .markTag:not(.tagFlat)::after{
    content:"";position:absolute;left:50%;bottom:-6px;
    width:13px;height:13px;transform:translateX(-50%) rotate(45deg);
    background:var(--tag-paper-lo);
    border-right:2px solid var(--tag-edge);
    border-bottom:2px solid var(--tag-edge);
    border-bottom-right-radius:3px;}
  .markTagIcon{display:block;width:clamp(22px, 5.8vw, 28px);height:auto;
    color:var(--t-wood-800, #7A5A31);}
  .markTagLabel{display:block;line-height:1.05;white-space:nowrap;
    font-weight:900;font-size:clamp(12px, 3.3vw, 15px);
    color:var(--t-c-text-on-paper, #1F2D2A);letter-spacing:.01em;}

  /* ---- 平面版＝積み木のボタン ----
     文字が横に並ぶ押しボタン。ふちを1本にし、下へ木口の面を1枚敷く。
     押すとその面まで本当に沈むので、6歳でも「押せた」ことが目で分かる。
     中身を自前で持つボタン用なので、.markTagInner で包み直さずに済み、
     既存のアイコン＋文字の組み立てや id をそのまま残せる。 */
  .markTag.tagFlat{
    width:auto;min-width:var(--t-tap-min, 48px);
    min-height:56px;
    display:flex;align-items:center;justify-content:center;gap:8px;
    padding:8px clamp(14px, 4vw, 22px);
    border-radius:var(--t-radius-m, 18px);
    background:linear-gradient(180deg, var(--tag-paper-hi) 0%, var(--tag-paper-lo) 45%);
    /* ふち1本＋木口の面＋地面へ落ちる影。filterの影とは二重にしない */
    box-shadow:inset 0 0 0 2px var(--tag-edge),
               0 var(--tag-lift) 0 var(--tag-slab),
               0 calc(var(--tag-lift) + 3px) 10px rgba(8,5,20,.42);
    filter:none;
    font-weight:900;line-height:1.15;
    color:var(--t-c-text-on-paper, #1F2D2A);}
  /* 平面版のアイコンは、丸い白背景へ入れず紙面へ直接置く */
  .markTag.tagFlat img{display:block;object-fit:contain;
    filter:drop-shadow(0 1px 2px rgba(60,44,20,.42));}
  .markTag.tagFlat img[hidden]{display:none;}

  /* 平面版の既定の文字。各画面のidで上書きできるよう、ここは弱めに置く */
  .markTag.tagFlat{font-size:clamp(16px, 4.3vw, 19px);}

  /* ---- 決定の札（旧 .bigBtn） ----
     「これで進む」一手だけに使う。紙にランタンの灯りが差した色にして、
     同じ列に並ぶ控えめな札より先に目が行くようにする。
     形は他の札と同じ。大きさ・色・沈む深さで役割を分ける。 */
  .markTag.tagFlat.tagPrimary{
    --tag-paper-hi:var(--t-lantern-300, #FFD77A);
    --tag-paper-lo:var(--btn, #FFB03A);
    --tag-edge:var(--t-lantern-700, #9A5B10);
    --tag-slab:var(--btn-shadow, #D68A1E);
    --tag-lift:6px;
    min-height:64px;
    padding:8px clamp(22px, 6vw, 36px);
    font-size:clamp(19px, 5.2vw, 24px);
    color:#5A3A00;
    /* 上端だけ光を受け、面は承認済みのボタン色そのまま */
    background:linear-gradient(180deg, var(--tag-paper-hi) 0%, var(--tag-paper-lo) 38%);
    /* 灯りが外へ少しにじむ。強い光にはしない */
    box-shadow:inset 0 0 0 3px var(--tag-edge),
               0 var(--tag-lift) 0 var(--tag-slab),
               0 calc(var(--tag-lift) + 4px) 14px rgba(8,5,20,.46),
               0 0 22px rgba(255,196,96,.30);}

  /* ---- 控えめな札（旧 .midBtn.subBtn、ひとりで いく など） ----
     選ばない側の答え。つやを消した平らな紙にして、前へ出ない。
     光っているものは押すもの、平らなものは選ばない側、と形だけで分かる。 */
  .markTag.tagFlat.tagQuiet{
    --tag-paper-hi:#DED6C4;
    --tag-paper-lo:#DED6C4;
    --tag-edge:#9C8F76;
    --tag-slab:#9C8F76;
    --tag-lift:4px;
    min-height:52px;
    font-size:clamp(14px, 3.8vw, 16px);
    color:#4A4436;}
  /* 控えめな札が選ばれている状態。決定の札と同じ灯りで示す */
  .markTag.tagFlat.tagQuiet.picked{
    --tag-paper-hi:var(--t-lantern-300, #FFD77A);
    --tag-paper-lo:var(--btn, #FFB03A);
    --tag-edge:var(--t-lantern-700, #9A5B10);
    --tag-slab:var(--btn-shadow, #D68A1E);
    color:#5A3A00;}

  /* 隠す指示は札の表示指定より後に置く。
     .tagFlat が display:flex を持つため、これがないと hidden が効かない */
  .markTag[hidden]{display:none;}
  /* まだ押せない札。灯りを落として、紙だけ残す。木口も薄くして沈まないようにする。
     決定の札（.tagPrimary）より後で効くよう、詳細度をそろえてある */
  .markTag.tagFlat:disabled,
  .markTag:disabled{--tag-paper-hi:#E6E1D6;--tag-paper-lo:#D6D0C2;--tag-edge:#A9A08C;
    --tag-slab:#A9A08C;--tag-lift:3px;
    color:#8C856F;cursor:default;
    filter:drop-shadow(0 2px 3px rgba(20,12,4,.28));}
  .markTag.tagFlat:disabled{filter:none;}
  .markTag:disabled:active{transform:none;}
  .markTag.tagFlat:disabled:active{
    box-shadow:inset 0 0 0 2px var(--tag-edge),
               0 var(--tag-lift) 0 var(--tag-slab),
               0 calc(var(--tag-lift) + 3px) 10px rgba(8,5,20,.42);}

  /* ---- 押した手ごたえ ----
     積み木（平面版）は木口の面まで着地する。
     つり下げ札（マップ）は置いてあるのではなく垂れているので、軽く揺れるだけ。 */
  .markTag.tagFlat:active{
    transform:translateY(var(--tag-lift));
    box-shadow:inset 0 0 0 2px var(--tag-edge),
               0 0 0 var(--tag-slab),
               0 2px 5px rgba(8,5,20,.5);}
  .markTag.tagFlat.tagPrimary:active{
    box-shadow:inset 0 0 0 3px var(--tag-edge),
               0 0 0 var(--tag-slab),
               0 2px 6px rgba(8,5,20,.55);}
  .markTag:not(.tagFlat):active{transform:translateY(3px);
    filter:drop-shadow(0 1px 3px rgba(20,12,4,.5));}
  .markTag:focus-visible{outline:var(--t-focus-ring, 3px) solid var(--t-c-focus, #79B7C6);
    outline-offset:var(--t-focus-offset, 2px);}
  @media (prefers-reduced-motion:reduce){
    .markTag{transition:none;}
  }

  /* ---------- lanterns (progress) ---------- */
  
  
  /* 共通UI：おばけランタン。
     ・進行表示は現行のまま（Q2後＝左、Q4後＝左＋中央、Q6後＝3個）。
       .lan[data-i] と .on の組み立ても点灯ロジックも変えていない。
     ・消灯でも外形が分かるようにする。完全な黒や透明にはしない。
       ガラスの中のおばけ火も、消えている間はうっすら見える。
     ・点灯は青白いおばけ火。まわりの光は弱くし、算数土台より目立たせない。
     ・章名・キャラクター名では分岐しない。 */
  .lan svg{width:100%;height:100%;display:block;overflow:visible;}
  .lan{
    /* 消灯時の色。夜の背景に沈ませすぎず、外形がはっきり残るようにする。
       ガラスの縁を明るく太くし、金具と台も見える明度まで上げる。 */
    --lanMetal:#6A6C92;
    --lanMetalEdge:#23233A;
    --lanWood:#8A6E4E;
    --lanGlassFill:rgba(30,44,84,.72);
    --lanGlassEdge:rgba(196,220,255,.88);
    --lanFlameFill:rgba(150,205,255,.30);
    --lanFlameEdge:rgba(180,220,255,.46);
    --lanEyeFill:rgba(215,238,255,.38);
    --lanGemFill:#B39A64;
    --lanShine:rgba(210,230,255,.30);
    /* 明るい背景でも暗い背景でも輪郭が消えないよう、外側へ暗い縁を落とす */
    filter:drop-shadow(0 1px 2px rgba(4,8,22,.85)) drop-shadow(0 0 3px rgba(4,8,22,.6));
    transition:filter .55s ease;}
  .lanRing{fill:none;stroke:var(--lanMetalEdge);stroke-width:2;}
  .lanCap{fill:var(--lanMetal);stroke:var(--lanMetalEdge);stroke-width:1.8;}
  .lanBase{fill:var(--lanWood);stroke:var(--lanMetalEdge);stroke-width:1.8;}
  .lanGem{fill:var(--lanGemFill);}
  .lanGlass{fill:var(--lanGlassFill);stroke:var(--lanGlassEdge);stroke-width:2.4;}
  .lanFlame{fill:var(--lanFlameFill);stroke:var(--lanFlameEdge);stroke-width:1.2;}
  .lanEye{fill:var(--lanEyeFill);}
  .lanShine{stroke:var(--lanShine);stroke-width:2.2;stroke-linecap:round;}
  /* 色の変化は静かに。点滅はさせない */
  .lanRing,.lanCap,.lanBase,.lanGem,.lanGlass,.lanFlame,.lanEye,.lanShine{
    transition:fill .55s ease, stroke .55s ease;}
  /* ---- 点灯 ---- */
  .lan.on{
    --lanMetal:#7C7FAE;
    --lanMetalEdge:#2C2C4A;
    --lanWood:#9A7A52;
    --lanGlassFill:rgba(96,168,246,.62);
    --lanGlassEdge:rgba(226,242,255,.98);
    --lanFlameFill:#DCF2FF;
    --lanFlameEdge:#FFFFFF;
    --lanEyeFill:rgba(30,58,116,.9);
    --lanGemFill:var(--t-lantern-300, #FFD77A);
    --lanShine:rgba(240,250,255,.8);
    /* ともった数がひと目で分かる明るさにする。
       近い光と、まわりへ広がる弱い光の二段にして、点滅はさせない。 */
    filter:drop-shadow(0 0 10px rgba(160,212,255,.95))
           drop-shadow(0 0 22px rgba(104,172,255,.55));
    animation:lanPop .5s var(--t-ease-standard, ease-out);}
  .lan.on .lanFlame{filter:drop-shadow(0 0 5px rgba(200,236,255,.95));}
  .lan.on .lanGlass{stroke-width:2.6;}
  /* 光がふわっと現れ、ほんの少しだけ大きくなって元へ戻る。発光は保持する */
  @keyframes lanPop{0%{transform:scale(1)}45%{transform:scale(1.12)}100%{transform:scale(1)}}
  @media (prefers-reduced-motion:reduce){
    .lan{transition:none;}
    .lan.on{animation:none;}
    .lanRing,.lanCap,.lanBase,.lanGem,.lanGlass,.lanFlame,.lanEye,.lanShine{
      transition:fill .2s linear, stroke .2s linear;}
  }

  /* ---------- ghost ---------- */
  @keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}
  #ghostWrap.excited{animation:hop .42s ease-in-out 2;}
  @keyframes hop{0%,100%{transform:translateY(0)}50%{transform:translateY(-30px)}}
  #ghostWrap.tilt{animation:tilt .6s ease-in-out 2;}
  @keyframes tilt{0%,100%{transform:rotate(0)}30%{transform:rotate(-8deg)}70%{transform:rotate(7deg)}}
  #ghostImgs{position:relative;width:100%;aspect-ratio:1/1;
    filter:drop-shadow(0 10px 14px rgba(30,20,60,.35));
    /* v74：向き。左右反転はこの入れ物だけに掛ける。
       #ghostWrap（bob/hop/tilt/ghostStep）も .gimg（ghostSway）も
       transform で動いているので、そこへ反転を書くと動きを奪う。
       影は横のずれが0なので、反転しても見た目は変わらない。 */
    transition:transform .28s var(--t-ease-standard, cubic-bezier(.20,.80,.20,1));}
  #ghostWrap[data-facing="flip"] #ghostImgs{transform:scaleX(-1);}
  @media (prefers-reduced-motion:reduce){
    #ghostImgs{transition:none;}
  }
  /* 各状態の見え方はJSからCSS変数として流し込む（キャラごとの分岐はCSSに書かない） */
  .gimg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
    opacity:0;pointer-events:none;
    --bright:1; --sat:1; --gscale:1; --gy:0px; --glow:0px; --alpha:1;
    --sway:0px; --swayS:1; --swayB:1; --swayD:5s; --glowc:rgba(255,255,255,0);
    transition:opacity .8s ease;
    animation:ghostSway var(--swayD) ease-in-out infinite;
    will-change:transform, filter;}
  #ghostImgs[data-stage="0"] .g0,
  #ghostImgs[data-stage="1"] .g1,
  #ghostImgs[data-stage="2"] .g2,
  #ghostImgs[data-stage="3"] .g3{opacity:var(--alpha);}
  @keyframes ghostSway{
    0%,100%{ transform:translateY(var(--gy)) scale(var(--gscale));
             filter:brightness(var(--bright)) saturate(var(--sat))
                    drop-shadow(0 0 var(--glow) var(--glowc)); }
    50%    { transform:translateY(calc(var(--gy) - var(--sway))) scale(calc(var(--gscale) * var(--swayS)));
             filter:brightness(calc(var(--bright) * var(--swayB))) saturate(var(--sat))
                    drop-shadow(0 0 calc(var(--glow) * 1.3) var(--glowc)); }
  }