/* =====================================================================
   おばけ算数 － 見た目（5/5）：第10章専用と、ひとやすみ広場（いちばん最後に読む）
   ---------------------------------------------------------------------
   もとは1本の style.css でした。中身は1文字も変えず、行の順番も
   そのままで 5 本に分けただけです。
   ★ CSSは「後に書いたほうが勝つ」ので、index.html の <link> の
     並び順を入れ替えないでください。1→2→3→4→5 の順です。
   ===================================================================== */
:root{ --css-5-loaded:1; }

/* =====================================================================
   ここから下は 第10章（区切り章）専用スタイル
   （元は index.html の <style id="ch10Style"> にあったもの）
   前半の指定を上書きするので、順番を前へ移動させないこと
   ===================================================================== */
/* 第10章では既存の進捗ちょうちんを隠し、祭壇の3つの火が進捗を兼ねる */
  body.isJunction #lanterns{ display:none; }

  /* 第10章は3本の石柱がある専用祭壇。背景と火の座標を合わせるため中央配置にする */
  body.isJunction #stageBg{ background-position:center center; }
  body.isJunction #stageBg::after{
    content:''; position:absolute; inset:0; pointer-events:none;
    background:
      radial-gradient(120% 70% at 50% 108%, rgba(255,196,107,.16), rgba(255,196,107,0) 60%),
      linear-gradient(180deg, rgba(18,16,38,.12) 0%, rgba(18,16,38,.03) 45%, rgba(10,9,24,.24) 100%);
  }

  /* 祭壇画像（941×1672）と同じ縦横比で透明な座標面を重ねる。
     background-size:cover と同じ拡大をするため、縦横画面でも石柱から火がずれにくい。 */
  #ch10AltarFlames{
    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    z-index:7; display:none; pointer-events:none;
    width:max(100%, calc(100vh * .5628)); aspect-ratio:941 / 1672;
  }
  @supports (height:100dvh){
    #ch10AltarFlames{ width:max(100%, calc(100dvh * .5628)); }
  }
  body.isJunction #ch10AltarFlames{ display:block; }

  /* 点灯順：Q2＝左、Q4＝右、Q6＝奥中央。最後が中央なので完成感が出る */
  #ch10AltarFlames .altarFlame{
    position:absolute; width:6.2%; aspect-ratio:1;
    opacity:0; transform:translate(-50%,-50%) scale(.45);
    transition:opacity .48s ease, transform .58s cubic-bezier(.25,1.4,.45,1);
    filter:drop-shadow(0 0 12px rgba(255,184,70,.95));
  }
  #ch10AltarFlames .altarFlame[data-i="1"]{ left:22.6%; top:49.4%; }
  #ch10AltarFlames .altarFlame[data-i="2"]{ left:77.1%; top:49.4%; }
  #ch10AltarFlames .altarFlame[data-i="3"]{ left:50.0%; top:42.7%; }
  #ch10AltarFlames .altarFlame.on{
    opacity:1; transform:translate(-50%,-50%) scale(1);
  }
  /* 外側の炎。石柱そのものは背景画像に描かれているので、火だけを重ねる */
  #ch10AltarFlames .altarFlame::before{
    content:''; position:absolute; left:50%; bottom:8%; width:58%; height:76%;
    transform:translateX(-50%) rotate(45deg);
    border-radius:64% 36% 62% 38%;
    background:radial-gradient(circle at 66% 66%,
      #fffde9 0 13%, #ffe77c 25%, #ffb33f 54%, #ff7b31 76%, rgba(255,92,34,.2) 100%);
    box-shadow:0 0 10px rgba(255,224,126,.95), 0 0 24px rgba(255,153,55,.8);
    animation:altarFireFlicker 1.18s ease-in-out infinite alternate;
  }
  /* 炎の白い芯 */
  #ch10AltarFlames .altarFlame::after{
    content:''; position:absolute; left:50%; bottom:20%; width:20%; height:35%;
    transform:translateX(-50%); border-radius:55% 55% 45% 45%;
    background:linear-gradient(180deg,#fffef0 0%,#fff7b0 58%,rgba(255,236,120,0) 100%);
    filter:drop-shadow(0 0 4px rgba(255,255,220,.95));
  }
  #ch10AltarFlames .altarFlame.justLit{ animation:altarFlameIgnite .72s ease-out; }
  @keyframes altarFlameIgnite{
    0%{opacity:0;transform:translate(-50%,-50%) scale(.18);}
    42%{opacity:1;transform:translate(-50%,-50%) scale(1.32);}
    100%{opacity:1;transform:translate(-50%,-50%) scale(1);}
  }
  @keyframes altarFireFlicker{
    0%{transform:translateX(-50%) rotate(43deg) scale(.94,1.02);}
    100%{transform:translateX(-50%) rotate(47deg) scale(1.06,.96);}
  }
  @media (prefers-reduced-motion:reduce){
    #ch10AltarFlames .altarFlame{transition:none;}
    #ch10AltarFlames .altarFlame::before,
    #ch10AltarFlames .altarFlame.justLit{animation:none;}
  }

  /* 問題UIは上半分にまとめ、下にある祭壇と3本の石柱を見せる。
     ---------------------------------------------------------------------
     縦は justify-content:flex-start にして「上端を必ず固定」する。
     中央そろえのままだと、中身が箱より高い画面で上へはみ出し、
     祭壇の火まで覆ってしまうため。
     あわせて、第10章だけおばけを一回り小さくして縦の余裕を作る。 */
  body.isJunction #playArea{
    top:15%; height:53%;
    justify-content:flex-start;
  }
  body.isJunction #stage{ --ghost-w:min(28vw,124px); }
  @media (min-width:700px) and (orientation:portrait){
    body.isJunction #playArea{ top:15%; height:49%; }
    body.isJunction #stage{ --ghost-w:min(26vw,190px); }
  }
  @media (max-height:820px) and (orientation:portrait){
    body.isJunction #playArea{ top:15%; height:54%; }
    body.isJunction #stage{ --ghost-w:min(26vw,112px); }
  }
  /* 横向きは左＝おばけ／右＝問題の2列のまま。列の中で上下に分かれるので
     grid の配置は変えず、上端だけ下げる */
  @media (orientation:landscape) and (min-width:820px){
    body.isJunction #playArea{ top:18%; height:44%; }
    body.isJunction #stage{ --ghost-w:min(20vw,200px); }
  }
  /* iPad横向きの第10章専用。
     お皿と吹き出しは祭壇の中央へ置き、がしゃさんは
     左の火と奥中央の火の中間へ置く。 */
  @media (orientation:landscape) and (min-width:900px) and (max-width:1400px) and (min-height:600px){
    body.isJunction #playArea{
      top:18%; height:44%;
      width:100%;
      display:block;
    }
    /* がしゃさんの中心を画面幅36%へ。
       左の火（約23%）と奥中央の火（50%）のほぼ中間になる。 */
    body.isJunction #stage{ --ghost-w:min(14vw,170px); }
    body.isJunction #ghostWrap{
      position:absolute;
      left:36%; top:50%;
      translate:-50% -50%;
    }
    /* 吹き出しは祭壇の中央上。奥中央の火はその下に見える */
    body.isJunction #promptText{
      position:absolute;
      left:50%; top:4%;
      translate:-50% 0;
      width:min(54vw,620px);
      align-items:center;
    }
    /* お皿は中央の円形祭壇へ重ねる。左右の火より内側に収める */
    body.isJunction #plateWrap{
      position:absolute;
      left:50%; top:58%;
      translate:-50% 0;
      width:min(56vw,680px);
      justify-content:center;
      padding-top:0;
    }
    body.isJunction #stage.lay-one .plate{
      max-width:min(34vw,420px); height:min(11vw,136px);
    }
    body.isJunction #stage.lay-two .plate{
      max-width:min(15vw,205px); height:min(10vw,124px);
    }
    /* 下の操作アイテムは、右列基準ではなく祭壇の真下を中心に並べる */
    body.isJunction #zoneSource{
      left:18%; right:18%; top:68%; height:28%;
    }
    /* 右のおともは中央のお皿をふさがない右下へ */
    body.isJunction .ch10Buddy[data-slot="3"]{
      right:2%; top:56%;
    }
  }
  @media (orientation:landscape) and (max-height:520px){
    body.isJunction #playArea{ top:18%; height:74%; }
    body.isJunction #stage{ --ghost-w:min(17vw,124px); }
  }

  /* 通常章へ連れていく1体のおとも。救出対象より小さく、右上から応援する。
     第10章では専用の3体表示を使うため、この同行枠は必ず隠す。 */
  #activeCompanion{position:absolute;z-index:21;right:3%;top:15%;width:clamp(58px,15vw,82px);
    aspect-ratio:1;display:none;pointer-events:none;transform-origin:center bottom;
    animation:activeCompanionFloat 3.1s ease-in-out infinite;}
  #activeCompanion.show{display:block;}
  body.isJunction #activeCompanion{display:none!important;}
  #activeCompanion img{display:block;width:100%;height:100%;object-fit:contain;
    filter:drop-shadow(0 3px 6px rgba(0,0,0,.42)) drop-shadow(0 0 9px rgba(255,220,145,.45));}
  #activeCompanion span{position:absolute;left:50%;top:-10px;transform:translateX(-50%);
    padding:2px 7px;border-radius:999px;background:rgba(54,42,46,.82);color:#FFF1CF;
    font-size:10px;font-weight:900;white-space:nowrap;border:1px solid rgba(255,221,153,.28);}
  #activeCompanion.reactSmall{animation:activeCompanionHop .52s cubic-bezier(.3,1.4,.5,1) 1;}
  #activeCompanion.reactBig{animation:activeCompanionCheer .78s cubic-bezier(.3,1.4,.5,1) 1;}
  #activeCompanion.reactBig img{filter:drop-shadow(0 3px 6px rgba(0,0,0,.42)) drop-shadow(0 0 15px rgba(255,220,145,.95));}
  @keyframes activeCompanionFloat{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-7px) rotate(2deg)}}
  @keyframes activeCompanionHop{0%{transform:translateY(0) scale(1)}40%{transform:translateY(-12px) scale(1.08)}100%{transform:translateY(0) scale(1)}}
  @keyframes activeCompanionCheer{0%{transform:translateY(0) rotate(0) scale(1)}30%{transform:translateY(-22px) rotate(-9deg) scale(1.14)}60%{transform:translateY(0) rotate(7deg) scale(.98)}100%{transform:translateY(0) rotate(0) scale(1)}}
  @media (min-width:700px) and (orientation:portrait){
    #activeCompanion{width:104px;right:4%;top:16%;}
  }
  @media (orientation:landscape) and (min-width:820px){
    #activeCompanion{width:82px;right:2.5%;top:16%;}
  }
  @media (orientation:landscape) and (max-height:520px){
    #activeCompanion{width:56px;right:1.5%;top:17%;}
  }
  @media (prefers-reduced-motion:reduce){#activeCompanion{animation:none;}}

  /* いっしょに がんばっている なかまの3体。
     ステージごとに入れ替えず、最初から最後まで3体ともそこにいる。
     枠で囲わず、絵をそのまま置く。左右にゆっくりスイングさせる。 */
  .ch10Buddy{
    position:absolute; z-index:22; display:none;
    width:clamp(62px,16vw,84px); height:clamp(62px,16vw,84px);
    pointer-events:none;
    animation:buddySwing 3.4s ease-in-out infinite;
    transform-origin:50% 15%;      /* 上を支点にすると、ぶら下がって揺れて見える */
  }
  body.isJunction .ch10Buddy.show{ display:block; }
  .ch10Buddy img{ width:100%; height:100%; object-fit:contain; display:block;
    filter:drop-shadow(0 3px 6px rgba(0,0,0,.45)) drop-shadow(0 0 10px rgba(255,214,140,.45)); }

  /* 置き場所：左上／左下（お皿より下・看板のあたり）／右の真ん中
     2体目を1体目の真下に置くと、出題の吹き出しと重なってしまうため下げてある */
  .ch10Buddy[data-slot="1"]{ left:4%;  top:17%; }
  .ch10Buddy[data-slot="2"]{ left:4%;  top:62%; }
  .ch10Buddy[data-slot="3"]{ right:4%; top:38%; }
  /* 3体が同じ動きだと機械的なので、始まりをずらす */
  .ch10Buddy[data-slot="2"]{ animation-delay:-1.1s; animation-duration:3.8s; }
  .ch10Buddy[data-slot="3"]{ animation-delay:-2.2s; animation-duration:3.1s; }

  /* ふだんの揺れは、いることが分かる程度まで小さくする。
     大きく揺れ続けると「飾り」に見えて、応援に見えなくなる */
  @keyframes buddySwing{
    0%,100%{ transform:rotate(-3deg) translateX(-1.5px); }
    50%    { transform:rotate( 3deg) translateX( 1.5px); }
  }
  /* 反応するとき。animation を上書きするので、ふだんの揺れは自動で止まる */
  .ch10Buddy.cheer{ animation:buddyHop .52s cubic-bezier(.3,1.4,.5,1) 1; }
  .ch10Buddy.cheerBig{ animation:buddyCheer .78s cubic-bezier(.3,1.4,.5,1) 1; }
  .ch10Buddy.cheerBig img{ filter:drop-shadow(0 3px 6px rgba(0,0,0,.45))
                                  drop-shadow(0 0 16px rgba(255,214,140,.95)); }
  /* アイテムを置いたとき：小さくぴょこん */
  @keyframes buddyHop{
    0%  { transform:translateY(0) scale(1); }
    32% { transform:translateY(-11px) scale(1.05); }
    62% { transform:translateY(0) scale(.98); }
    80% { transform:translateY(-4px) scale(1.01); }
    100%{ transform:translateY(0) scale(1); }
  }
  /* 正解したとき・灯籠がともったとき：大きく跳ねて喜ぶ */
  @keyframes buddyCheer{
    0%  { transform:translateY(0) rotate(0) scale(1); }
    22% { transform:translateY(-26px) rotate(-11deg) scale(1.12); }
    46% { transform:translateY(0) rotate(9deg) scale(.96); }
    66% { transform:translateY(-14px) rotate(-7deg) scale(1.07); }
    84% { transform:translateY(0) rotate(4deg) scale(.99); }
    100%{ transform:translateY(0) rotate(0) scale(1); }
  }
  /* 右にいる子は、絵を左右反転して内側（お皿のほう）を向かせる。
     絵そのものは変えていない。表示だけの反転なので戻すのも1行 */
  .ch10Buddy[data-slot="3"] img{ transform:scaleX(-1); }
  @media (min-width:700px) and (orientation:portrait){
    .ch10Buddy{ width:104px; height:104px; }
    .ch10Buddy[data-slot="2"]{ top:64%; }
  }
  @media (orientation:landscape) and (min-width:820px){
    .ch10Buddy{ width:74px; height:74px; }
    .ch10Buddy[data-slot="1"]{ left:2%; top:20%; }
    .ch10Buddy[data-slot="2"]{ left:2%; top:60%; }
    .ch10Buddy[data-slot="3"]{ right:2%; top:34%; }
  }
  @media (orientation:landscape) and (max-height:520px){
    .ch10Buddy{ width:52px; height:52px; }
    .ch10Buddy[data-slot="1"]{ left:1.5%; top:20%; }
    .ch10Buddy[data-slot="2"]{ left:1.5%; top:58%; }
    .ch10Buddy[data-slot="3"]{ right:1.5%; top:34%; }
  }
  @media (prefers-reduced-motion:reduce){ .ch10Buddy{ animation:none; } }

  /* ---- 3体選択画面（図鑑と同じ言語：本・札・丸み・やわらかい光） ---- */
  #pickBackdrop{ position:absolute; inset:0; background:rgba(14,12,30,.72); }
  #pickPanel{
    position:relative; width:min(94vw,560px); max-height:86vh; display:flex; flex-direction:column;
    padding:42px 28px 36px; gap:12px;
    /* 他のカードと同じ古びた木の板。下地の色は置かない
       （置くと欠けたふちの透過部分まで塗ってしまう） */
    background:url('assets/card-plank.webp') no-repeat center/100% 100%;
    border-radius:0; box-shadow:none;
    filter:drop-shadow(0 10px 16px rgba(0,0,0,.55));
  }
  #pickTitle{ margin:0; text-align:center; font-size:clamp(16px,4.4vw,22px); line-height:1.5;
    color:#3F3218; font-weight:800; text-shadow:0 1px 0 rgba(255,246,224,.65); }
  #pickGrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; overflow:auto; padding:4px; }
  .pickCard{
    position:relative; background:#FFFDF6; border:3px solid transparent; border-radius:14px;
    padding:6px 4px 4px; cursor:pointer; transition:transform .12s ease, border-color .12s ease;
    box-shadow:0 2px 6px rgba(60,40,16,.35);
  }
  .pickCard img{ width:100%; aspect-ratio:1/1; object-fit:contain; display:block; }
  .pickCard .pname{ display:block; text-align:center; font-size:clamp(11px,2.8vw,14px); color:#5A5480; font-weight:700; }
  .pickCard.picked{ border-color:#FFB84D; transform:translateY(-3px); box-shadow:0 6px 16px rgba(255,184,77,.45); }
  .pickCard .pickNo{
    position:absolute; top:-8px; right:-8px; min-width:28px; height:28px; border-radius:50%;
    background:#FFB84D; color:#fff; font-weight:800; font-size:15px;
    display:flex; align-items:center; justify-content:center; box-shadow:0 2px 8px rgba(0,0,0,.3);
  }
  #pickFoot{ display:flex; justify-content:center; }
  #pickGoBtn{
    border:none; border-radius:999px; padding:12px 26px; font-size:clamp(15px,4vw,19px); font-weight:800;
    background:#FFB84D; color:#fff; box-shadow:0 4px 0 #D9913A; cursor:pointer; white-space:nowrap;
  }
  #pickGoBtn:disabled{ background:#D8D2C4; box-shadow:0 4px 0 #BDB7AA; color:#F3EFE6; cursor:default; }

  /* ---- がしゃさんの会話 ---- */
  #talkBackdrop{ position:absolute; inset:0; background:rgba(14,12,30,.74); }
  #talkPanel{
    position:relative; width:min(92vw,470px); display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:12px;
    padding:44px 30px 40px; min-height:min(34vh,280px);
    /* 他のカードと同じ古びた木の板。下地の色は置かない
       （置くと欠けたふちの透過部分まで塗ってしまう） */
    background:url('assets/card-plank.webp') no-repeat center/100% 100%;
    border-radius:0; box-shadow:none;
    filter:drop-shadow(0 10px 16px rgba(0,0,0,.55));
  }
  #talkGhost{ width:min(38vw,150px); display:block; }
  #talkGhost[hidden]{ display:none; }
  #talkText{ margin:0; text-align:center; white-space:pre-line; line-height:1.65;
             font-size:clamp(15px,4.2vw,20px); color:#3F3218; font-weight:800;
             text-shadow:0 1px 0 rgba(255,246,224,.65); }
  #talkNext{
    border:none; border-radius:999px; padding:10px 26px; font-size:clamp(14px,3.8vw,18px); font-weight:800;
    background:#8A7FB5; color:#fff; box-shadow:0 4px 0 #6B6390; cursor:pointer; white-space:nowrap;
  }
  .talkAltBtn{
    border:none; border-radius:999px; padding:10px 26px; font-size:clamp(14px,3.8vw,18px); font-weight:800;
    background:#F2EADA; color:#5A4A2A; box-shadow:0 4px 0 #C9B893; cursor:pointer; white-space:nowrap;
  }

  /* 図鑑の特別枠：文字を重ねず、灯籠のような やわらかい光で示す。
     絵の手前には何も置かない（絵が隠れないようにする） */
  .zslot.zspecial::before{
    content:''; position:absolute; left:50%; top:36%; transform:translate(-50%,-50%);
    width:82%; aspect-ratio:1/1; border-radius:50%; pointer-events:none; z-index:0;
    background:radial-gradient(circle,
      rgba(255,236,190,.85) 0%, rgba(255,205,120,.45) 42%, rgba(255,196,107,0) 72%);
    animation:zGlow 1.9s ease-in-out infinite;
  }
  /* 特別枠は、マスいっぱいまで大きく見せる（通常の約1.35倍）。
     幅と高さは他のマスと同じままにして transform だけで拡大する。
     こうしないとマスの高さが変わり、名前だけ下にずれてしまう。
     原点を下寄りにして、上へ伸ばす（名前に重ならないように） */
  .zslot.zspecial img{ position:relative; z-index:1;
    transform:scale(1.35); transform-origin:center 82%;
    animation:zGlowImg 1.9s ease-in-out infinite; }
  .zslot.zspecial .zname{ position:relative; z-index:1; letter-spacing:-.02em; }
  /* ゆっくり明るくなるのではなく、ランタンのように ちかちか 点滅させる */
  @keyframes zGlow{
    0%  { opacity:.18; transform:translate(-50%,-50%) scale(.90); }
    12% { opacity:1;   transform:translate(-50%,-50%) scale(1.14); }
    26% { opacity:.30; transform:translate(-50%,-50%) scale(.96); }
    40% { opacity:.95; transform:translate(-50%,-50%) scale(1.10); }
    58% { opacity:.22; transform:translate(-50%,-50%) scale(.92); }
    100%{ opacity:.18; transform:translate(-50%,-50%) scale(.90); }
  }
  @keyframes zGlowImg{
    0%  { filter:drop-shadow(0 0 2px rgba(255,214,140,.30)); }
    12% { filter:drop-shadow(0 0 9px rgba(255,214,140,1)) drop-shadow(0 0 20px rgba(255,196,107,.7)); }
    26% { filter:drop-shadow(0 0 3px rgba(255,214,140,.40)); }
    40% { filter:drop-shadow(0 0 8px rgba(255,214,140,.95)) drop-shadow(0 0 18px rgba(255,196,107,.6)); }
    58% { filter:drop-shadow(0 0 2px rgba(255,214,140,.32)); }
    100%{ filter:drop-shadow(0 0 2px rgba(255,214,140,.30)); }
  }
  /* 動きを控えたい設定の端末では光らせたまま点滅させない */
  @media (prefers-reduced-motion:reduce){
    .zslot.zspecial::before{ animation:none; opacity:.8; }
    .zslot.zspecial img{ animation:none;
      filter:drop-shadow(0 0 7px rgba(255,214,140,.9)); }
  }
  /* =====================================================================
     マップ上の区切り地点＝背景の最下部に描かれた「灯籠の広場」（憲法v3.6 7.5）
     ---------------------------------------------------------------------
     通常章のカードや地点枠は使わない。広場そのものが第10章のタップ領域で、
     中央にがしゃさんが座り、背景の3つの石台の上へ動的な灯籠を重ねる。
     位置はすべて広場に対する割合で持つので、端末が変わってもずれない。
     判定は c.type==='junction' のデータ駆動のまま（章番号は使わない）。
     「ボス」「戦う」に類する表現・対決構図は一切使わない。
     ===================================================================== */
  /* 祭壇は絵の実測に合わせる：横 x=.20〜.85（幅65%）、縦 y=.025〜.105（高さ8%）。
     マップ本体の縦横比は 1706:6280 なので、高さ8% ＝ 幅の 8*6280/1706 ≒ 29.45% にあたる。 */
  .mapRow.plazaRow{ width:65%; }
  .mapNode.junction{
    /* 祭壇全体がタップ領域。背景に描かれた石の壇とほぼ同じ大きさ・形にする */
    width:100%; min-height:0; aspect-ratio:65 / 29.45;
    justify-content:center; padding:0; }
  /* 通常章の丸い光暈と足もとの影は、広場が担うので使わない */
  .mapNode.junction .mapGlow{ display:none; }
  .mapNode.junction::after{ display:none; }

  /* ---- 祭壇そのもの（背景に描かれた円形の石畳に重ねる薄い光の層）----
     円形の石畳は帯の中でやや右寄り（絵の実測 x=.57 が中心）にある */
  .junctionPlaza{position:absolute; z-index:0; pointer-events:none;
    left:57%; top:62%; transform:translate(-50%,-50%);
    width:78%; height:88%; border-radius:50%;
    background:
      radial-gradient(ellipse at 50% 50%,
        var(--plaza-in,rgba(120,104,190,.20)) 0%,
        var(--plaza-mid,rgba(90,78,150,.12)) 54%,
        rgba(90,78,150,0) 78%);
    transition:background .5s ease, box-shadow .5s ease;}
  /* 広場の外周。現在地のときだけ、ここがゆっくり明滅する */
  .junctionPlaza::after{content:""; position:absolute; inset:7%;
    border-radius:50%; border:2px solid var(--plaza-edge,transparent);
    transition:border-color .5s ease;}

  /* ---- 座っているがしゃさんを広場の中央に。通常おばけの約1.35倍に見せる。
         手前の石台より奥に座るので、手前の灯籠は彼女より前に描かれる（z-index順）---- */
  .mapNode.junction .ghostImg{
    position:absolute; left:56%; top:58%; transform:translate(-50%,-50%);
    width:clamp(72px, calc(var(--mw,380px) * .216), 128px);
    height:clamp(72px, calc(var(--mw,380px) * .216), 128px);
    filter:drop-shadow(0 7px 8px rgba(0,0,0,.5));}
  /* 足もとの非常に薄い接地影。地面から浮いて見えないようにする */
  .junctionShadow{position:absolute; z-index:0; pointer-events:none;
    left:56%; top:90%; transform:translate(-50%,-50%);
    width:24%; height:10%; border-radius:50%;
    background:radial-gradient(ellipse, rgba(0,0,0,.32) 0%, rgba(0,0,0,0) 72%);}
  .mapNode.junction .ghostImg.silhouette{
    filter:brightness(0) drop-shadow(0 7px 8px rgba(0,0,0,.34));}

  /* ---- 祭壇に元から立っている3つの石の灯り台に重ねるともしび。
         位置は祭壇の帯に対する割合。新しく火を描き足すのではなく、
         絵の中の石灯籠・石柱の「火が入る場所」にちょうど重ねている ---- */
  /* マップ本体（#mapRoad）の直下に置く。inset:0 なので left/top の％が
     そのまま背景画像上の位置になる。おばけより後ろ（石灯籠は絵の中で奥）。 */
  .junctionLanterns{position:absolute; z-index:0; inset:0; pointer-events:none;}
  .junctionLanterns span{position:absolute;
    width:clamp(11px, calc(var(--mw,380px) * .031), 19px);
    height:clamp(15px, calc(var(--mw,380px) * .042), 26px);
    transform:translate(-50%,-100%);
    border-radius:44% 44% 30% 30%;
    /* 消えている状態＝冷たい石の色 */
    background:linear-gradient(180deg, rgba(150,146,178,.55) 0%, rgba(96,92,126,.5) 100%);
    box-shadow:none;
    transition:background .55s ease, box-shadow .55s ease, opacity .55s ease;
    opacity:.72;}
  .junctionLanterns span.lit{
    background:radial-gradient(ellipse at 50% 60%,
      #FFF6DA 0%, #FFDB92 38%, rgba(255,190,98,.72) 70%, rgba(255,178,80,.25) 100%);
    box-shadow:0 0 12px rgba(255,200,112,.85), 0 0 26px rgba(255,180,84,.45);
    opacity:1;}
  /* 背景画像そのものに対する位置。translate(-50%,-100%) なので、
     top が「台の天面に火が載る位置」になる。
       左の石柱   x=.448 天面 y=.0715
       右の石柱   x=.715 天面 y=.0730
       奥の石灯籠 x=.570 火袋 y=.0555
     3つめ（最後に灯る）を祭壇の中心にある石灯籠にすることで、
     全部そろったときに祭壇の芯へ火が入るように見える。 */
  .junctionLanterns span:nth-child(1){ left:44.8%; top:7.15%; }
  .junctionLanterns span:nth-child(2){ left:71.5%; top:7.30%; }
  .junctionLanterns span:nth-child(3){ left:57.0%; top:5.55%; }

  /* ---- 蛍・光の粒。クリア後にだけ少量ただよう ---- */
  .junctionFlies{position:absolute; z-index:1; inset:0; pointer-events:none; opacity:0;
    transition:opacity .6s ease;}
  .junctionFlies i{position:absolute; width:4px; height:4px; border-radius:50%;
    background:radial-gradient(circle, rgba(255,240,186,1) 0%, rgba(255,206,110,.45) 55%, rgba(255,206,110,0) 100%);
    animation:jFly 5.2s ease-in-out infinite;}
  .junctionFlies i:nth-child(1){ left:24%; top:40%; animation-delay:-.4s; }
  .junctionFlies i:nth-child(2){ left:70%; top:30%; animation-delay:-1.9s; animation-duration:6.1s; }
  .junctionFlies i:nth-child(3){ left:38%; top:66%; animation-delay:-3.2s; animation-duration:4.6s; }
  .junctionFlies i:nth-child(4){ left:62%; top:60%; animation-delay:-2.4s; animation-duration:5.8s; }
  @keyframes jFly{
    0%,100%{ transform:translate(0,0); opacity:.2; }
    30%    { transform:translate(5px,-9px); opacity:1; }
    62%    { transform:translate(-4px,-14px); opacity:.45; }
  }

  /* ---- 状態1：未解放 … 広場を薄い霧で包み、がしゃさんはかげ、灯籠は消灯 ---- */
  .mapNode.junction.locked .junctionPlaza{
    --plaza-in:rgba(104,94,158,.34); --plaza-mid:rgba(62,56,106,.30); }
  .mapNode.junction.locked .junctionFlies{ opacity:0; }

  /* ---- 状態2：現在地 … 外周が温かな光でゆっくり明滅。灯籠は基本的に消灯 ---- */
  .mapNode.junction.current .junctionPlaza{
    --plaza-in:rgba(255,196,107,.16); --plaza-mid:rgba(180,140,90,.12);
    --plaza-edge:rgba(255,200,110,.6);
    animation:plazaBreathe 3s ease-in-out infinite; }
  .mapNode.junction.current .junctionFlies{ opacity:.5; }
  @keyframes plazaBreathe{
    0%,100%{ box-shadow:0 0 16px 2px rgba(255,196,107,.24); }
    50%    { box-shadow:0 0 34px 8px rgba(255,196,107,.52); }
  }

  /* ---- 状態3：クリア済み … 3つとも点灯し、広場が琥珀色の光に包まれる ---- */
  .mapNode.junction.cleared .junctionPlaza{
    --plaza-in:rgba(255,214,140,.34); --plaza-mid:rgba(255,186,96,.18);
    box-shadow:0 0 30px 8px rgba(255,196,107,.38); }
  .mapNode.junction.cleared .junctionFlies{ opacity:1; }

  /* 動きを控えたい設定では明滅と浮遊を止める。
     止めても、灯籠の点灯とかげの有無だけで3状態を見分けられる */
  @media (prefers-reduced-motion:reduce){
    .mapNode.junction.current .junctionPlaza{ animation:none;
      box-shadow:0 0 24px 5px rgba(255,196,107,.46); }
    .junctionFlies i{ animation:none; opacity:.75; }
  }


/* ===== ここから下は「ひとやすみ広場」。v26で index.html の中に
   置いていたものを、v28でこのファイルの末尾へ移しました。 ===== */
  /* =====================================================================
     ひとやすみ広場（v26で追加）
     ---------------------------------------------------------------------
     公開中の最後の章を終えた子どもが行き止まりに感じないための終点画面。
     背景と焚き火は、あとで専用画像へ差し替えやすいように独立させてある。
       --rest-img       … 広場の背景。今はおとも広場と同じ絵を使う
       --rest-fire-img  … 焚き火の絵。定義すればCSSの描画より優先される
     このブロックは style.css より後に置いてあるので、いずれ style.css の
     末尾へそのまま移してよい（新規の名前だけなので既存へは影響しない）。
     ===================================================================== */
  :root{ --rest-img:var(--companion-img); }

  #restOverlay{z-index:122;align-items:stretch;justify-content:center;padding:0;
    overflow:hidden;background:#06122B;}
  #restBackdrop{position:absolute;inset:0;z-index:0;pointer-events:none;
    background-image:var(--rest-img);background-size:cover;background-position:center 54%;}
  #restBackdrop::after{content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(4,10,32,.74) 0%,rgba(4,10,32,.30) 26%,
                                       rgba(4,10,32,.18) 58%,rgba(6,8,26,.88) 100%);}
  #restPanel{position:relative;z-index:1;width:100%;height:100%;min-height:0;
    display:flex;flex-direction:column;align-items:center;
    padding:max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom));}

  #restWords{margin:0;padding:9px 18px;border-radius:18px;text-align:center;
    color:#FFF1C5;font-weight:900;line-height:1.5;
    font-size:clamp(15px,3.6vw,24px);
    background:linear-gradient(180deg,rgba(83,59,38,.86),rgba(48,35,31,.86));
    border:2px solid rgba(238,188,93,.52);box-shadow:0 5px 14px rgba(0,0,0,.34);
    text-shadow:0 2px 4px rgba(0,0,0,.78);}
  #restWords span{display:block;}
  #restWords span+span{font-size:.82em;color:#FFE6AE;margin-top:2px;}

  /* おばけと焚き火の場所。文字とボタンの間の余白いっぱいを使うので、
     どの画面サイズでも上下の要素とは重ならない。 */
  #restStage{position:relative;flex:1;min-height:0;width:min(96vw,1000px);margin:4px auto;}

  #restFire{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);z-index:2;
    width:clamp(46px,12%,116px);aspect-ratio:1;pointer-events:none;
    background-image:var(--rest-fire-img,none);background-size:contain;
    background-position:center bottom;background-repeat:no-repeat;}
  /* 専用画像が無い間の焚き火。丸い光と炎で表す（新規素材なしで成立させる） */
  #restFire::before{content:"";position:absolute;left:50%;bottom:6%;transform:translateX(-50%);
    width:230%;aspect-ratio:1;border-radius:50%;
    background:radial-gradient(circle,rgba(255,214,130,.52) 0 14%,rgba(255,150,60,.24) 34%,rgba(255,120,40,0) 70%);}
  #restFire::after{content:"";position:absolute;left:50%;bottom:8%;transform:translateX(-50%);
    width:62%;height:76%;border-radius:50% 50% 46% 46%/62% 62% 38% 38%;
    background:radial-gradient(ellipse at 50% 78%,#FFF6D8 0 16%,#FFD065 38%,#FF9A3C 66%,rgba(255,120,40,.12) 100%);
    filter:drop-shadow(0 0 12px rgba(255,166,74,.75));
    animation:restFlicker 2.6s ease-in-out infinite;}
  #restFire.hasImg::before,#restFire.hasImg::after{display:none;}
  @keyframes restFlicker{
    0%,100%{transform:translateX(-50%) scaleY(1)   scaleX(1);   opacity:.94;}
    38%    {transform:translateX(-50%) scaleY(1.10) scaleX(.94); opacity:1;}
    64%    {transform:translateX(-50%) scaleY(.94)  scaleX(1.05);opacity:.90;}
  }

  /* 枠の幅と高さを両方決め、絵は object-fit で内側へ収める。
     絵の縦横比がどれでも、隣のおばけへはみ出さない。 */
  .restGhost{position:absolute;transform:translate(-50%,-50%);pointer-events:none;}
  .restGhost img{width:100%;height:100%;display:block;
    object-fit:contain;object-position:center bottom;
    filter:drop-shadow(0 6px 12px rgba(0,0,0,.42));
    animation:restBob 3.4s ease-in-out infinite;animation-delay:var(--restDelay,0s);}
  .restGhost.back {width:clamp(34px,15%,110px);height:clamp(30px,16%,102px);z-index:1;opacity:.94;}
  .restGhost.back img{filter:drop-shadow(0 5px 10px rgba(0,0,0,.4)) brightness(.86) saturate(.92);}
  .restGhost.front{width:clamp(42px,19%,140px);height:clamp(40px,21%,130px);z-index:3;}
  @keyframes restBob{
    0%,100%{transform:translateY(0);}
    50%    {transform:translateY(-5px);}
  }
  @media (prefers-reduced-motion:reduce){
    #restFire::after,.restGhost img{animation:none;}
  }

  #restBtns{position:relative;z-index:4;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;width:min(94vw,560px);margin:0 auto;}
  #restBtns .restBtn{min-height:52px;padding:10px 8px;border-radius:16px;
    font-family:inherit;font-weight:900;font-size:clamp(12px,3.2vw,17px);
    color:#F7ECD2;background:linear-gradient(180deg,rgba(72,54,42,.90),rgba(44,33,30,.90));
    border:2px solid rgba(255,214,140,.30);box-shadow:0 5px 12px rgba(0,0,0,.38);
    text-shadow:0 2px 4px rgba(0,0,0,.7);cursor:pointer;}
  #restBtns .restBtn:active{transform:translateY(3px);box-shadow:0 2px 6px rgba(0,0,0,.38);}
  #restBtns .restBtn[hidden]{display:none;}

  /* 横長で高さが足りない端末では、文字とボタンを詰めて広場の高さを確保する */
  @media (orientation:landscape) and (max-height:560px){
    #restWords{font-size:clamp(13px,2.4vw,18px);padding:6px 14px;}
    #restBtns .restBtn{min-height:46px;}
  }
  @media (min-width:820px) and (orientation:landscape){
    #restBtns{grid-template-columns:repeat(4,minmax(0,1fr));width:min(94vw,860px);}
  }