/* =====================================================================
   おばけ算数 － 見た目（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枚絵。横向き用と、スマホ縦用の縦長版 */
    --title-img:url('assets/title_bg.webp');
    --title-img-tall:url('assets/title_bg_tall.webp');
    --world-overview-img:url('assets/world_map_overview.webp');
    --companion-img:url('assets/companion_bg_departure_clearing.webp');
    --map-img:url('assets/map_bg_world01_deep_forest.webp');
    --map-img-w2:url('assets/map_bg_world02_suigenkyo.webp');
    --zukan-img:url('assets/zukan_bg.webp');
    /* プレー中の森の背景（ステージ進行で切り替える） */
    --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:none;
}

/* =====================================================================
   v23 共通設定 ── 音楽・効果音・読み上げを別々に切り替える
   ===================================================================== */
#settingsBtn{
  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);
  border:2px solid rgba(112,87,45,.32);
  border-radius:50%;
  background:rgba(255,249,239,.94);
  box-shadow:0 5px 0 rgba(60,45,110,.28),0 7px 18px rgba(12,8,38,.24);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:8px;
  touch-action:manipulation;
}
#settingsBtn svg{width:100%;height:100%;}
#settingsBtn:active{transform:translateY(4px);box-shadow:0 1px 0 rgba(60,45,110,.28);}

#settingsOverlay{z-index:133;background:rgba(25,18,62,.74);}
#settingsOverlay .settingsCard{
  width:min(90vw,500px);
  min-width:0;
  min-height:min(72vh,480px);
  padding:48px clamp(28px,7vw,54px) 42px;
  gap:18px;
}
.settingsList{width:100%;display:flex;flex-direction:column;gap:12px;}
.settingToggle{
  width:100%;
  min-height:62px;
  border:2px solid rgba(105,78,40,.22);
  border-radius:22px;
  padding:8px 10px 8px 18px;
  background:rgba(255,249,234,.93);
  box-shadow:0 4px 0 rgba(115,88,45,.24);
  color:#4A3F66;
  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(3px);box-shadow:0 1px 0 rgba(115,88,45,.24);}
.settingLabel{display:flex;align-items:center;gap:8px;text-align:left;}
.settingState{
  flex:0 0 auto;
  min-width:76px;
  border-radius:18px;
  padding:8px 12px;
  background:#9B93B2;
  color:#fff;
  text-align:center;
  font-size:.83em;
  box-shadow:inset 0 -3px 0 rgba(49,39,78,.2);
}
.settingToggle.on .settingState{background:#55B98A;box-shadow:inset 0 -3px 0 rgba(28,112,76,.28);}
.settingToggle.off .settingState{background:#8D86A5;}
#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(70vh,500px);padding:42px 56px 38px;}
  .settingToggle{min-height:68px;font-size:23px;}
}
  *{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)}}

  /* ---------- lanterns (progress) ---------- */
  
  
  .lan svg{width:100%;height:100%;display:block;}
  .lanGlass{fill:#4A4270;transition:fill .6s;}
  .lan.on .lanGlass{fill:#FFD86B;}
  .lan.on{filter:drop-shadow(0 0 12px rgba(255,216,107,.9));animation:lanPop .6s ease-out;}
  @keyframes lanPop{0%{transform:scale(1)}45%{transform:scale(1.45)}100%{transform:scale(1)}}

  /* ---------- 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));}
  /* 各状態の見え方は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)); }
  }