/* =====================================================================
   おばけ算数 － 見た目（2/5）：プレー画面（盤面・v2・枠の問題・足あと道）
   ---------------------------------------------------------------------
   もとは1本の style.css でした。中身は1文字も変えず、行の順番も
   そのままで 5 本に分けただけです。
   ★ CSSは「後に書いたほうが勝つ」ので、index.html の <link> の
     並び順を入れ替えないでください。1→2→3→4→5 の順です。
   ===================================================================== */
:root{ --css-2-loaded:1; }

  /* =====================================================================
     盤面レイアウト（統合版）
     ---------------------------------------------------------------------
     #playArea は常に画面中央に「1つの箱」として配置する（left:50%+
     transform:translateX(-50%)を常にセットで維持し、左右非対称に
     ズラす時も必ずtransformを揃えて書く。これが崩れると中心がズレる）。

     縦持ち：#playArea を縦のFlexboxにして、おばけ→問題文→お皿の順に積む。
     横持ち：#playArea をCSS Gridにして、左列＝おばけ（縦方向に中央寄せで
     2行分を占有）、右列＝問題文とお皿を縦に並べる。おばけをposition:absolute
     で箱の外に逃がす方式は、箱自体もposition:absoluteだと入れ子の基準点が
     狂うため使わない。
     ===================================================================== */
  #playArea{position:absolute;left:50%;top:2%;transform:translateX(-50%);z-index:8;
    width:min(96vw,600px);height:66%;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:clamp(12px,3vw,24px);pointer-events:none;}
  #promptText{width:100%;text-align:center;
    display:flex;flex-direction:column;align-items:center;gap:3px;pointer-events:none;}
  .pline{font-weight:900;color:var(--ink);line-height:1.35;
    font-size:clamp(19px,5.4vw,26px);
    background:rgba(255,252,246,.93);border-radius:16px;padding:5px 14px;
    box-shadow:0 3px 0 rgba(60,45,110,.13);align-self:center;}
  .pline2{font-size:clamp(20px,5.8vw,28px);}

  /* =====================================================================
     プレー画面 v2（いまは第1章だけ。body.playV2 が付いたときだけ効く）
     ===================================================================== */
  /* ---- B. 問題文は白い2段カードではなく、おばけが話す1つの吹き出し ---- */
  body.playV2 .pbubble{position:relative;font-weight:900;color:var(--ink);
    line-height:1.3;font-size:clamp(20px,5.6vw,27px);
    background:rgba(255,252,246,.95);border-radius:20px;padding:9px 20px;
    box-shadow:0 4px 0 rgba(60,45,110,.14), 0 8px 18px rgba(20,12,40,.22);
    max-width:min(86vw,460px);text-align:center;}
  /* おばけが話しているように見せる短い尻尾。上向き（おばけは吹き出しの上にいる） */
  body.playV2 .pbubble::after{content:"";position:absolute;top:-9px;left:50%;
    transform:translateX(-50%);
    border-left:11px solid transparent;border-right:11px solid transparent;
    border-bottom:11px solid rgba(255,252,246,.95);}
  body.playV2 #promptText{gap:0;}

  /* ---- A. お皿を約72%へ。立体感と影も弱めて、お皿だけが目立たないようにする ---- */
  body.playV2 #stage.lay-one .plate{max-width:min(58vw,262px);height:min(22vw,110px);}
  body.playV2 #stage.lay-two .plate{max-width:min(33vw,182px);height:min(25vw,124px);}
  body.playV2 .plate{
    box-shadow:
      inset 0 0 0 3px rgba(154,116,64,.45),
      inset 0 2px 0 rgba(255,248,228,.6),
      inset 0 -6px 10px rgba(122,90,49,.22),
      0 6px 0 var(--plate-wood),
      0 8px 0 var(--plate-deep),
      0 12px 15px rgba(20,12,4,.32);}
  body.playV2 .plate.hot{
    box-shadow:
      inset 0 0 0 3px rgba(154,116,64,.45),
      inset 0 2px 0 rgba(255,248,228,.6),
      0 0 0 5px rgba(255,238,160,.9),
      0 6px 0 var(--plate-wood),
      0 8px 0 var(--plate-deep),
      0 12px 16px rgba(20,12,4,.32);}
  /* おばけと操作対象の距離を近づけ、同じ場面の中にいるように見せる */
  body.playV2 #plateWrap{padding-top:clamp(8px,2vw,14px);}
  body.playV2 #playArea{gap:clamp(6px,1.8vw,14px);}
  /* 操作領域の後ろだけを柔らかく暗くして、りんごを見やすくする */
  body.playV2 #zoneSource::before{content:"";position:absolute;inset:-6% -4%;
    z-index:-1;pointer-events:none;border-radius:44%;
    background:radial-gradient(ellipse at 50% 50%,
      rgba(16,10,34,.42) 0%, rgba(16,10,34,.22) 52%, rgba(16,10,34,0) 78%);}

  /* ---- E. りんごを置くたびの、おばけの小さな反応 ---- */
  /* 置くほど少しだけ明るくなる灯り。画像そのものには触れないので、
     既存の4状態（weak/awake/restored/full）の見た目と競合しない */
  #stepGlow{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);
    width:96%;aspect-ratio:1/1;border-radius:50%;pointer-events:none;z-index:0;
    background:radial-gradient(circle, rgba(255,236,180,.55) 0%, rgba(255,214,120,0) 66%);
    opacity:0;transition:opacity .45s ease;}
  body.playV2 #stepGlow{opacity:calc(var(--stepLit,0) * .85);}
  /* 置いた瞬間の、ごく小さな上下。大声で褒めない */
  @keyframes ghostStep{
    0%{transform:translateY(0)} 42%{transform:translateY(-6px)} 100%{transform:translateY(0)}
  }
  @keyframes ghostWait{   /* 最後の1個の前だけ、少し期待した反応 */
    0%{transform:translateY(0) scale(1)}
    35%{transform:translateY(-9px) scale(1.035)}
    100%{transform:translateY(0) scale(1)}
  }
  body.playV2 #ghostWrap.stepReact{animation:ghostStep .42s ease-out;}
  body.playV2 #ghostWrap.stepReact.lastOne{animation:ghostWait .58s ease-out;}
  @media (prefers-reduced-motion:reduce){
    body.playV2 #ghostWrap.stepReact,
    body.playV2 #ghostWrap.stepReact.lastOne{animation:none;}
  }
  #plateWrap{width:100%;display:flex;gap:min(4vw,26px);
    justify-content:center;align-items:flex-start;
    padding-top:clamp(20px,5vw,26px);
    pointer-events:auto;}
  /* zeroChoice / zeroCustom で hidden にしても、author側のdisplay:flexが勝たないようにする。 */
  #plateWrap[hidden]{display:none!important;}
  .plate{position:relative;flex:1 1 0;max-width:min(78vw,360px);
    height:min(30vw,150px);border-radius:50%;
    /* 上から：光のあたり／木目／おぼんの地色 */
    background:
      radial-gradient(ellipse at 50% 26%, rgba(255,250,236,.85) 0%, rgba(255,250,236,0) 58%),
      repeating-linear-gradient(178deg,
        rgba(150,116,66,.13) 0 1px, rgba(0,0,0,0) 1px 7px,
        rgba(150,116,66,.07) 7px 8px, rgba(0,0,0,0) 8px 15px),
      radial-gradient(ellipse at 50% 34%, var(--plate) 58%, var(--plate-rim) 100%);
    /* ふちの立ち上がりと、おぼんの厚み */
    box-shadow:
      inset 0 0 0 4px rgba(154,116,64,.55),
      inset 0 3px 0 rgba(255,248,228,.75),
      inset 0 -9px 14px rgba(122,90,49,.30),
      0 9px 0 var(--plate-wood),
      0 12px 0 var(--plate-deep),
      0 18px 22px rgba(20,12,4,.45);
    transition:box-shadow .18s, filter .18s;}
  #stage.lay-one .plate{max-width:min(78vw,360px);}

  /* ======================================================================
     numberFrame（frameFill問題）：5枠・10枠の共通盤面
     plateAはそのまま当たり判定・サイズの土台として使い、上にframeGridを重ねる。
     おぼんの木目は隠し、枠らしい見た目にする（白木の升目・角丸の輪郭）。
     ====================================================================== */
  /* 枠の問題でも、お盆の見た目は通常と同じにする。
     以前は半透明にして「枠」を強調していたが、背景が透けて見づらかった。 */
  /* z-index は お皿(#playArea=8) より上、操作アイテム(.item=10) より下。
     ここを1や2にすると、お皿の裏に隠れて影も点も見えなくなる。 */
  .frameGrid{position:absolute; left:0; top:0; z-index:9; pointer-events:none;}
  /* マス目は「お盆にあいた浅いくぼみ」くらいの弱さで常に見せる。
     点線の枠は出さない。5個ずつ2段に並ぶので、5のまとまりが目で分かる。 */
  .frameCell{position:absolute; box-sizing:border-box;
    border:0; border-radius:26%;
    background:radial-gradient(ellipse at 50% 42%,
      rgba(96,70,38,.26) 0%, rgba(96,70,38,.13) 68%, rgba(96,70,38,0) 100%);
    box-shadow:inset 0 0 0 2px rgba(126,96,54,.22),
               inset 0 2px 3px rgba(60,42,20,.16);}
  /* bare：手がかりを一切出さない状態（第10章＝集大成）。
     くぼみも消して、ただのお盆に見せる。置き場所としては生きている。
     ヒントで手がかりを出す段になると、JS が bare を外して段階的に見せる。 */
  .frameGrid.bare .frameCell{background:none; box-shadow:none;}
  /* 「あといくつ」の印。くぼみの上に重ねるので ::after を使い、
     マス目そのものの見た目（background）は壊さない。 */
  /* 点：抽象的な印。形は見せない */
  .frameCell.cue-dots::after{
    content:''; position:absolute; left:50%; top:50%; width:30%; height:30%;
    transform:translate(-50%,-50%); border-radius:50%;
    background:rgba(255,250,236,.72);
    box-shadow:0 0 8px rgba(255,240,200,.45);}
  /* 影：アイテムの形そのものを、うすい白抜きで見せる */
  .frameCell.cue-shadow::after{
    content:''; position:absolute; inset:14%;
    background-image:var(--item-shadow-img, none);
    background-size:contain; background-repeat:no-repeat; background-position:center;
    opacity:.30;
    filter:grayscale(1) brightness(2.6) contrast(.7)
           drop-shadow(0 0 3px rgba(255,248,228,.5));}
  /* 影の絵が用意できていないキャラでは、点にしておく（何も出ないのを防ぐ） */
  .frameCell.cue-shadow.noShadowImg::after{
    inset:auto; left:50%; top:50%; width:30%; height:30%;
    transform:translate(-50%,-50%); border-radius:50%;
    background-image:none; background-color:rgba(255,250,236,.72); opacity:1;
    filter:none; box-shadow:0 0 8px rgba(255,240,200,.45);}
  .frameNumeral{position:absolute; right:-6px; top:-10px; z-index:9;
    min-width:1.6em; padding:.15em .3em; border-radius:50%;
    background:rgba(40,28,14,.72); color:#FFF6DE; font-weight:900;
    font-size:clamp(16px, 4vw, 22px); text-align:center; line-height:1.3;
    box-shadow:0 3px 8px rgba(0,0,0,.35);}
  /* 見本（第2章Q5専用）：触れない点のまとまり。枠と対になる位置に置く */
  /* 見本（「これと おなじ かずに」の“これ”）。
     位置は JS が子どものお皿の真上へ置く。中身は点ではなく、実物と同じ絵。
     display:flex を書くと hidden 属性が効かなくなるため、必ず打ち消しを添える。 */
  .frameReference{position:absolute; z-index:9; pointer-events:none;
    display:flex; align-items:center; justify-content:center;
    flex-wrap:nowrap; gap:4%;
    padding:2.2% 3%; border-radius:999px;
    border:3px solid rgba(255,248,228,.55);
    background:rgba(40,28,14,.42);
    box-shadow:0 4px 14px rgba(0,0,0,.35);}
  .frameReference[hidden]{display:none;}
  .frameGrid[hidden], .frameNumeral[hidden]{display:none;}
  .frameReference .refItem{flex:0 0 auto; display:block; line-height:0;}
  .frameReference .refItem img, .frameReference .refItem svg{
    display:block; width:100%; height:100%;}

  #stage.lay-two .plate{max-width:min(44vw,250px);height:min(34vw,170px);}
  .plate.hot{filter:brightness(1.06);
    box-shadow:
      inset 0 0 0 4px rgba(154,116,64,.55),
      inset 0 3px 0 rgba(255,248,228,.75),
      0 0 0 6px rgba(255,238,160,.95),
      0 9px 0 var(--plate-wood),
      0 12px 0 var(--plate-deep),
      0 18px 24px rgba(20,12,4,.45);}
  .plate.flash{animation:plateFlash .6s ease-in-out 2;}
  @keyframes plateFlash{
    0%,100%{box-shadow:inset 0 0 0 4px rgba(154,116,64,.55), 0 9px 0 var(--plate-wood),
            0 12px 0 var(--plate-deep), 0 16px 20px rgba(20,12,4,.42)}
    50%    {box-shadow:inset 0 0 0 4px rgba(154,116,64,.55), 0 0 0 8px rgba(255,238,160,.95),
            0 9px 0 var(--plate-wood), 0 12px 0 var(--plate-deep), 0 16px 24px rgba(20,12,4,.42)}}
  /* 触れないお皿は、木の色を沈ませる */
  .plate.locked{
    background:
      repeating-linear-gradient(178deg,
        rgba(120,96,60,.12) 0 1px, rgba(0,0,0,0) 1px 7px),
      radial-gradient(ellipse at 50% 34%, #E3D6BC 58%, #BCA582 100%);
    filter:saturate(.7) brightness(.96);}
  .zlabel{position:absolute;left:50%;top:clamp(-24px,-5vw,-20px);transform:translateX(-50%);
    font-size:clamp(13px,3.6vw,17px);font-weight:900;color:#FFF3D6;
    text-shadow:0 2px 4px rgba(30,20,60,.6);white-space:nowrap;}
  .zcount{position:absolute;left:50%;bottom:-26px;transform:translateX(-50%);
    font-size:clamp(14px,3.8vw,18px);font-weight:900;color:var(--ink);
    background:rgba(255,252,246,.94);border-radius:12px;padding:2px 11px;
    box-shadow:0 2px 0 rgba(60,45,110,.14);white-space:nowrap;}
  #zoneSource{position:absolute;left:3%;right:3%;top:70%;height:22%;z-index:1;}

  /* 第11章「空っぽ」：生成した果物かごを、ブルーベリーの戻し先として見せる。 */
  body.zeroMake #zoneSource::after{
    content:"";position:absolute;inset:0;
    background:url('assets/fruit_basket_w2.webp') center/contain no-repeat;
    filter:drop-shadow(0 9px 10px rgba(4,11,35,.42));
    pointer-events:none;
  }
  body.zeroMake #zoneSource{z-index:2;}
  /* お皿とカゴを横並びにする。zoneSource自体がカゴの当たり判定になる。 */
  body.zeroMake #plateWrap{justify-content:flex-start;padding-left:4%;padding-right:0;}
  body.zeroMake #plateA{flex:0 0 min(44vw,225px);max-width:min(44vw,225px);height:min(22vw,108px);}
  body.zeroMake #zoneSource{left:55%;right:3%;top:51%;height:24%;}
  body.zeroMake #zoneSource::before{display:none;}

  /* 直接タップする大きな器（Q1・Q2・Q5・Q6） */
  .zeroQuestBoard{position:absolute;z-index:13;left:50%;top:68%;transform:translate(-50%,-50%);
    width:min(96vw,680px);min-height:30%;display:flex;align-items:center;justify-content:center;
    pointer-events:auto;}
  .zeroVesselRow{width:100%;display:flex;align-items:flex-end;justify-content:center;
    gap:clamp(10px,3vw,28px);padding:12px;}
  .zeroVessel{position:relative;width:clamp(88px,25vw,150px);height:clamp(76px,21vw,124px);
    border:0;border-radius:0;overflow:visible;padding:0;font-family:inherit;
    background:url('assets/blue_light_vessel_w2.webp') center/100% 100% no-repeat;
    filter:drop-shadow(0 9px 9px rgba(1,12,40,.46));touch-action:manipulation;}
  button.zeroVessel:active{transform:translateY(3px) scale(.97);}
  .vesselRim{display:none;}
  .vesselInside{position:absolute;z-index:2;left:13%;right:13%;top:11%;bottom:15%;display:flex;
    align-items:center;justify-content:center;gap:2px;flex-wrap:wrap;align-content:center;}
  .zeroBerry{display:inline-flex;width:clamp(31px,8vw,48px);height:clamp(31px,8vw,48px);
    border:0;background:none;padding:0;align-items:center;justify-content:center;touch-action:manipulation;}
  .zeroBerry svg{display:block;width:100%;height:100%;filter:drop-shadow(0 3px 3px rgba(9,23,76,.35));}
  button.zeroBerry:active{transform:scale(.88);}
  .zeroBadge{position:absolute;z-index:5;left:50%;top:46%;transform:translate(-50%,-50%) scale(.55);
    display:grid;place-items:center;width:clamp(48px,13vw,72px);height:clamp(48px,13vw,72px);
    border-radius:50%;background:rgba(246,253,255,.95);border:4px solid #5CC5FF;color:#1455C6;
    font-size:clamp(30px,8vw,48px);font-weight:900;opacity:0;box-shadow:0 0 22px rgba(88,211,255,.9);}
  .zeroBadge.reveal{opacity:1;transform:translate(-50%,-50%) scale(1);transition:opacity .25s,transform .38s cubic-bezier(.2,1.5,.4,1);}
  .zeroVessel.correct{filter:drop-shadow(0 0 7px rgba(155,240,255,.95)) drop-shadow(0 0 20px rgba(72,199,255,.92));}
  .zeroVessel.blueLight{animation:blueVesselLight .7s ease-in-out infinite alternate;}
  @keyframes blueVesselLight{to{filter:brightness(1.20) drop-shadow(0 0 24px rgba(75,207,255,.95));}}
  .zeroVessel.wrong{animation:zeroWrong .36s ease-in-out 2;}
  @keyframes zeroWrong{0%,100%{transform:translateX(0)}50%{transform:translateX(8px)}}
  .zeroQuestBoard.hintPulse .zeroVessel{animation:zeroHint 1.1s ease-in-out 1;}
  @keyframes zeroHint{50%{filter:brightness(1.18) drop-shadow(0 0 15px rgba(183,241,255,.82));}}
  .orderNumber{position:absolute;left:50%;bottom:-38px;transform:translateX(-50%);min-width:1.55em;
    padding:.08em .35em;border-radius:50%;background:rgba(248,253,255,.94);color:#164C9B;
    font-size:clamp(24px,6vw,36px);font-weight:900;box-shadow:0 4px 10px rgba(2,13,45,.35);}
  .zeroFinalWrap{position:relative;width:100%;display:flex;align-items:flex-end;justify-content:center;
    gap:clamp(24px,7vw,70px);padding:10px;}
  .zeroBasket{position:relative;width:clamp(126px,31vw,205px);height:clamp(72px,18vw,112px);
    display:flex;align-items:center;justify-content:center;padding:0;}
  .zeroBasket img{display:block;width:100%;height:100%;object-fit:contain;
    filter:drop-shadow(0 8px 8px rgba(4,11,35,.42));pointer-events:none;}
  .basketBerry{position:absolute;z-index:2;width:clamp(27px,6vw,42px);height:clamp(27px,6vw,42px);
    transform:translate(-50%,-50%);filter:drop-shadow(0 2px 3px rgba(9,23,76,.38));}
  .basketBerry svg{display:block;width:100%;height:100%;}
  .basketBerry.b1{left:40%;top:42%;}.basketBerry.b2{left:57%;top:42%;}.basketBerry.b3{left:49%;top:25%;}
  /* Q6はタップ移動ではなく、指で目的地まで運んで離す。 */
  .zeroBerry.zeroDragging,.zeroLight.zeroDragging{z-index:40;animation:none!important;
    transform:translate(var(--dragX,0),var(--dragY,0)) scale(1.10)!important;
    filter:brightness(1.12) drop-shadow(0 8px 9px rgba(2,13,45,.48));transition:none;}
  .zeroBerry.zeroAccepted,.zeroLight.zeroAccepted{pointer-events:none;z-index:40;animation:none!important;
    transform:translate(var(--dragX,0),var(--dragY,0)) scale(.45)!important;opacity:.72;
    transition:transform .22s cubic-bezier(.2,.75,.3,1),opacity .22s ease;}
  .zeroBerry.zeroReturning,.zeroLight.zeroReturning{z-index:40;animation:none!important;
    transform:translate(var(--dragX,0),var(--dragY,0)) scale(1)!important;
    transition:transform .18s ease-out;}
  .zeroBasket.dropReady{filter:brightness(1.12) drop-shadow(0 0 18px rgba(255,220,120,.92));}
  .zeroVessel.dropReady{filter:brightness(1.15) drop-shadow(0 0 22px rgba(104,227,255,.96));}
  /* stage直下に置き、あおばけちゃんの下で光らせる。 */
  .zeroLight{position:absolute;z-index:18;left:50%;top:42%;translate:-50% -50%;
    width:clamp(64px,15vw,94px);aspect-ratio:1;
    border:0;border-radius:50%;padding:0;background:none;touch-action:none;}
  .zeroLight[hidden]{display:none!important;}
  .zeroLight span{position:absolute;inset:13%;border-radius:50%;
    background:radial-gradient(circle at 38% 32%,#FFFFFF 0 6%,#CFFBFF 9%,#70E6FF 28%,#238DFF 58%,#1647C7 76%,rgba(22,71,199,0) 78%);
    box-shadow:0 0 12px #B8F7FF,0 0 30px rgba(64,203,255,.96),0 0 55px rgba(47,111,255,.72);}
  .zeroLight.ready{animation:zeroLightReady 1.1s ease-in-out infinite alternate;}
  @keyframes zeroLightReady{to{transform:translateY(-7px) scale(1.08);filter:brightness(1.15)}}
  .zeroLight.zeroHintPulse{filter:brightness(1.35);transform:scale(1.16);}
  @media (orientation:landscape) and (min-width:820px){
    .zeroQuestBoard{left:66%;top:71%;width:min(62vw,670px);min-height:34%;}
    .zeroVessel{width:clamp(105px,13vw,155px);height:clamp(88px,10vw,125px);}
    .zeroBerry{width:clamp(34px,4.3vw,49px);height:clamp(34px,4.3vw,49px);}
    body.zeroMake #plateWrap{padding-left:0;}
    body.zeroMake #plateA{flex-basis:min(23vw,235px);max-width:min(23vw,235px);height:min(12vw,115px);}
    body.zeroMake #zoneSource{left:67%;right:6%;top:50%;height:25%;}
    .zeroLight{left:28%;top:53%;}
  }
  @media (orientation:landscape) and (max-height:520px){
    .zeroQuestBoard{top:70%;}
    .zeroVessel{width:96px;height:78px;}.zeroBerry{width:30px;height:30px;}
    .orderNumber{bottom:-28px;font-size:22px;}
  }

  /* =====================================================================
     第12章「べとべとさん」：10と残りが見える足あと道
     ---------------------------------------------------------------------
     最初の10個は5個＋5個の二つの水たまりに分け、指を横へ滑らせると
     順番に光る。通常のお皿・アイテムは使わない。
     ===================================================================== */
  .footprintBoard{position:absolute;z-index:15;left:50%;top:70%;transform:translate(-50%,-50%);
    width:min(96vw,760px);min-height:clamp(150px,35vw,225px);padding:36px 10px 12px;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
    pointer-events:auto;touch-action:none;border-radius:28px;
    background:linear-gradient(180deg,rgba(6,30,66,.30),rgba(5,17,47,.54));
    border:1px solid rgba(114,222,255,.22);box-shadow:0 14px 34px rgba(0,9,38,.28);}
  .footGoal{position:absolute;left:50%;top:-24px;transform:translateX(-50%);z-index:5;
    display:flex;align-items:flex-end;gap:5px;color:#EAFBFF;font-weight:900;
    text-shadow:0 3px 8px rgba(0,8,36,.85);pointer-events:none;}
  .footGoalNumber{display:grid;place-items:center;width:clamp(56px,14vw,82px);aspect-ratio:1;
    border-radius:50%;font-size:clamp(31px,8vw,48px);line-height:1;color:#12529E;
    background:rgba(245,253,255,.96);border:4px solid #66D4FF;
    box-shadow:0 0 19px rgba(70,213,255,.72),0 6px 10px rgba(0,10,38,.35);}
  .footGoal small{font-size:clamp(15px,3.8vw,21px);padding-bottom:8px;white-space:nowrap;}
  .footprintTrack{position:relative;width:100%;height:clamp(72px,17vw,116px);
    display:grid;grid-template-columns:1fr 1fr 1fr;gap:clamp(5px,1.5vw,13px);
    align-items:center;padding:8px 10px;isolation:isolate;}
  .footprintTrack::before{content:"";position:absolute;z-index:-2;inset:1% 0 0;
    background:url('assets/betobetosan-footpath-base.webp') center/100% 82% no-repeat;
    opacity:.48;filter:saturate(.85) brightness(.88);transition:opacity .4s,filter .4s;}
  .footFive,.footExtras{position:relative;height:100%;display:grid;grid-template-columns:repeat(5,1fr);
    align-items:center;justify-items:center;gap:1px;padding:4px 3px 16px;border-radius:999px;
    background:rgba(28,94,142,.16);border:2px solid rgba(112,220,255,.12);
    transition:background .35s,border-color .35s,box-shadow .35s;}
  .footExtras{background:rgba(32,105,160,.08);border-color:rgba(112,220,255,.08);}
  .trailFoot{position:relative;z-index:2;width:clamp(22px,5.2vw,45px);height:clamp(36px,8vw,68px);
    display:flex;align-items:center;justify-content:center;border:0;padding:0;background:none;
    opacity:.42;filter:saturate(.60) brightness(.72);transform:translateY(0) scale(.92);
    transition:opacity .22s,filter .22s,transform .24s;touch-action:none;}
  .trailFoot img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;}
  .trailFoot:nth-child(even){transform:translateY(5px) scale(.92);}
  .trailFoot.lit{opacity:1;filter:saturate(1.13) brightness(1.18)
    drop-shadow(0 0 7px #8AF3FF) drop-shadow(0 0 16px rgba(40,171,255,.94));
    transform:translateY(-2px) scale(1.04);}
  .trailFoot.lit:nth-child(even){transform:translateY(3px) scale(1.04);}
  .trailFoot.hintNext{animation:footHint 1.05s ease-in-out 1;}
  @keyframes footHint{50%{opacity:1;filter:brightness(1.45) drop-shadow(0 0 17px #A8F7FF);transform:scale(1.16)}}
  .trailFoot.demoTrace{animation:footDemo 1s ease-in-out 1;}
  @keyframes footDemo{45%{opacity:.9;filter:brightness(1.35) drop-shadow(0 0 13px #8CEEFF);transform:translateY(-5px) scale(1.10)}}
  .groupMark{position:absolute;z-index:4;left:50%;bottom:-7px;transform:translateX(-50%) scale(.7);
    display:grid;place-items:center;min-width:34px;height:28px;padding:0 7px;border-radius:999px;
    color:#155291;background:rgba(241,253,255,.96);border:2px solid #62CEFA;
    font-size:18px;font-weight:900;opacity:0;box-shadow:0 0 15px rgba(74,211,255,.65);
    transition:opacity .25s,transform .32s cubic-bezier(.2,1.4,.35,1);}
  .footprintBoard.firstFiveDone .mark5,
  .footprintBoard.tenDone .mark10{opacity:1;transform:translateX(-50%) scale(1);}
  .footprintBoard.firstFiveDone .footFiveA,
  .footprintBoard.tenDone .footFiveB{background:rgba(49,160,204,.22);border-color:rgba(126,232,255,.55);
    box-shadow:0 0 18px rgba(44,182,255,.25);}
  .footprintBoard.tenDone .footprintTrack::before{opacity:.92;filter:saturate(1.08) brightness(1.12)
    drop-shadow(0 0 11px rgba(61,202,255,.74));}
  .footStructure{display:flex;align-items:center;justify-content:center;gap:7px;min-height:34px;
    color:#EAFBFF;font-weight:900;font-size:clamp(16px,4vw,22px);text-shadow:0 2px 6px rgba(0,8,36,.82);}
  .tenChip,.extraChip{padding:3px 10px;border-radius:999px;background:rgba(236,252,255,.92);
    color:#15559D;box-shadow:0 0 12px rgba(73,205,255,.28);opacity:.45;transition:opacity .35s,transform .35s;}
  .andWord{opacity:.55;}.footNow{font-size:clamp(12px,3vw,16px);opacity:.64;min-width:68px;text-align:left;}
  .footprintBoard.tenDone .tenChip,.footprintBoard.tenDone .extraChip,
  .footprintBoard.tenDone .andWord{opacity:1;transform:scale(1.04);}
  .footprintBoard.trailComplete{border-color:rgba(132,240,255,.62);
    box-shadow:0 0 28px rgba(62,199,255,.42),0 14px 34px rgba(0,9,38,.28);}
  .footprintBoard.bridgeReached::after{content:"";position:absolute;right:-3%;top:43%;width:18%;height:45%;
    background:radial-gradient(ellipse,rgba(255,229,137,.72),rgba(75,205,255,.30) 45%,transparent 72%);
    filter:blur(3px);pointer-events:none;}
  .footprintBoard.showTenGuide .footFive{border-color:rgba(117,226,255,.48);}

  /* 散らばり方が違っても、5＋5のまとまりは同じだと見せる。 */
  .footprintBoard.pattern-scattered .trailFoot:nth-child(2n){transform:translateY(9px) rotate(5deg) scale(.90);}
  .footprintBoard.pattern-scattered .trailFoot:nth-child(3n){transform:translateY(-8px) rotate(-5deg) scale(.90);}
  .footprintBoard.pattern-wide .footFive,.footprintBoard.pattern-wide .footExtras{gap:4px;background:rgba(27,91,139,.08);}
  .footprintBoard.pattern-wide .trailFoot:nth-child(odd){transform:translateY(-7px) scale(.90);}
  .footprintBoard.pattern-wide .trailFoot:nth-child(even){transform:translateY(9px) scale(.90);}
  .footprintBoard.pattern-scattered .trailFoot.lit,
  .footprintBoard.pattern-wide .trailFoot.lit{transform:translateY(-1px) rotate(0) scale(1.04);}

  @media (orientation:landscape) and (min-width:820px){
    .footprintBoard{left:66%;top:73%;width:min(64vw,790px);min-height:188px;padding-top:38px;}
    .footprintTrack{height:102px;}.trailFoot{width:clamp(34px,3.2vw,44px);height:clamp(52px,4.8vw,66px);}
    .footGoal{top:-25px;}
  }
  @media (orientation:landscape) and (max-height:520px){
    .footprintBoard{top:72%;min-height:138px;padding:25px 8px 5px;gap:2px;}
    .footprintTrack{height:72px;padding-top:2px;padding-bottom:2px;}
    .trailFoot{width:30px;height:44px;}.footGoal{top:-17px;}
    .footGoalNumber{width:46px;font-size:27px;border-width:3px;}.footGoal small{font-size:13px;}
    .footStructure{min-height:23px;font-size:14px;}.groupMark{height:22px;font-size:14px;bottom:-3px;}
  }
  @media (max-width:390px) and (orientation:portrait){
    .footprintBoard{top:72%;padding-left:5px;padding-right:5px;}
    .footprintTrack{gap:2px;padding-left:2px;padding-right:2px;}
    .trailFoot{width:22px;height:36px;}.footStructure{gap:4px;}
    .tenChip,.extraChip{padding:2px 7px;}.footNow{min-width:55px;font-size:11px;}
  }
  @media (prefers-reduced-motion:reduce){
    .trailFoot.hintNext,.trailFoot.demoTrace{animation:none;filter:brightness(1.35) drop-shadow(0 0 12px #8CEEFF);}
  }
  #lanterns{position:absolute;top:14px;left:50%;transform:translateX(-50%);z-index:20;display:flex;gap:16px;}
  .lan{width:34px;height:42px;position:relative;}
  #bookBtn{position:absolute;right:4%;top:12px;z-index:76;
    width:clamp(48px,11vw,58px);height:clamp(48px,11vw,58px);border:none;border-radius:50%;
    background:rgba(255,249,239,.92);box-shadow:0 4px 0 rgba(60,45,110,.25);
    display:flex;align-items:center;justify-content:center;padding:0;}
  #ghostWrap{width:var(--ghost-w);max-width:100%;flex:0 0 auto;
    animation:bob 3.4s ease-in-out infinite;}
  #teaser{position:fixed;right:8%;bottom:18%;z-index:95;width:110px;opacity:0;
    transition:opacity 1s, transform 1s;transform:translateY(30px);pointer-events:none;}
  #line{position:absolute;left:50%;bottom:2.5%;transform:translateX(-50%);z-index:65;
    background:rgba(255,255,255,.92);border-radius:20px;padding:8px 18px;
    font-weight:700;font-size:var(--line-fs);white-space:nowrap;color:var(--ink);
    box-shadow:0 4px 0 rgba(60,45,110,.12);opacity:0;transition:opacity .3s;pointer-events:none;}
  #line.show{opacity:1;}

  /* ---- タブレット縦：全体を大きく ---- */
  @media (min-width:700px) and (orientation:portrait){
    #lanterns{gap:26px;top:26px;}
    .lan{width:52px;height:64px;}
    #teaser{width:180px;bottom:20%;}
    #bookBtn{width:70px;height:70px;top:22px;}
    #playArea{top:2%;height:62%;gap:22px;width:min(90vw,780px);}
    .pline{font-size:clamp(26px,3.4vw,34px);padding:8px 22px;border-radius:22px;}
    .pline2{font-size:clamp(27px,3.6vw,36px);}
    #plateWrap{gap:36px;padding-top:34px;}
    #stage.lay-two .plate{max-width:min(40vw,340px);height:min(22vw,190px);}
    #stage.lay-one .plate{max-width:min(62vw,520px);height:min(17vw,160px);}
    #zoneSource{left:7%;right:7%;top:68%;height:23%;}
    .zcount{font-size:22px;bottom:-32px;padding:3px 14px;}
    .zlabel{font-size:22px;top:-32px;}
  }

  /* ---- 横向き：CSS Gridで左＝おばけ、右＝問題文とお皿の2列にする ---- */
  @media (orientation:landscape) and (min-width:820px){
    #stage{--apple:82px; --btn-size:112px; --ghost-w:min(24vw,240px);
           --line-fs:clamp(20px,2.4vw,28px); --num-fs:clamp(46px,5vw,64px);}
    #lanterns{left:50%;top:5%;gap:22px;}
    .lan{width:46px;height:57px;}
    #tree{height:22%;}
    #treeCrown{width:min(70vw,700px);}
    #line{bottom:2%;}
    #teaser{right:5%;bottom:24%;width:150px;}
    #bookBtn{width:62px;height:62px;right:2.5%;}

    #playArea{
      /* 箱全体は常に画面中央に固定する（left:50%とtransformは崩さない）。
         下の置き場(#zoneSource)と重ならないよう、縦の占有を抑えておく */
      top:6%;height:56%;
      width:min(88vw,760px);
      display:grid;
      grid-template-columns:minmax(150px,32%) 1fr;
      grid-template-rows:1fr auto;
      align-items:center;
      column-gap:clamp(16px,3vw,32px);
      row-gap:10px;
    }
    #ghostWrap{grid-column:1;grid-row:1 / span 2;justify-self:center;align-self:center;}
    #promptText{grid-column:2;grid-row:1;align-self:end;}
    #plateWrap{grid-column:2;grid-row:2;align-self:start;padding-top:20px;}
    .pline{font-size:clamp(20px,2.3vw,28px);}
    #stage.lay-two .plate{max-width:min(21vw,220px);height:min(15vw,150px);}
    #stage.lay-one .plate{max-width:min(40vw,400px);height:min(13vw,130px);}
    /* playAreaの下端(top+height=62%)より確実に下から始める */
    #zoneSource{left:34%;right:4%;top:68%;height:28%;}
  }

  /* ---- 小型スマホ縦：はみ出しを防ぐ ---- */
  @media (max-width:360px){
    #lanterns{gap:11px;}
    .lan{width:29px;height:36px;}
    #line{font-size:14px;padding:7px 14px;}
    .pline{font-size:17px;padding:4px 10px;}
    #stage.lay-two .plate{height:min(44vw,165px);}
    #zoneSource{top:71%;height:21%;}
  }

  /* ---- 縦が短い画面（アプリ内ブラウザ・小型端末） ---- */
  @media (max-height:820px) and (orientation:portrait){
    #stage{--ghost-w:min(34vw,150px);}
    #playArea{top:1%;height:68%;gap:clamp(8px,2vw,14px);}
    .pline{font-size:clamp(17px,4.8vw,22px);padding:4px 12px;border-radius:14px;}
    .pline2{font-size:clamp(18px,5.0vw,23px);}
    #plateWrap{padding-top:17px;}
    #stage.lay-one .plate{height:min(26vw,125px);}
    #stage.lay-two .plate{height:min(30vw,134px);}
    .zcount{bottom:-21px;font-size:14px;padding:2px 9px;}
    .zlabel{top:-18px;font-size:14px;}
  }

  /* ---- 横向きで縦が狭い場合（スマートフォン横持ち） ---- */
  @media (orientation:landscape) and (max-height:520px){
    #stage{--ghost-w:min(20vw,150px); --apple:56px; --btn-size:84px;}
    #playArea{top:4%;height:88%;width:min(92vw,640px);column-gap:14px;row-gap:6px;}
    .pline{font-size:clamp(15px,2vw,20px);padding:3px 10px;}
    .pline2{font-size:clamp(16px,2.1vw,21px);}
    #stage.lay-one .plate{max-width:min(36vw,300px);height:min(11vw,100px);}
    #stage.lay-two .plate{max-width:min(19vw,170px);height:min(12vw,106px);}
    .zcount{bottom:-18px;font-size:12px;}
    .zlabel{top:-16px;font-size:12px;}
    #zoneSource{left:32%;right:4%;top:60%;height:34%;}
  }

  /* ===== v008: 予告・バナー・行・キラキラの基本CSS（メディアクエリより前） ===== */
  
  #teaser.show{opacity:1;transform:translateY(0);animation:teaseBob 2.6s ease-in-out infinite 1s;}
  @keyframes teaseBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
  #teaser svg,#teaser img{width:100%;display:block;filter:drop-shadow(0 0 16px rgba(120,220,255,.6));}
  #teaser img.auto-sil{
    filter:brightness(0) drop-shadow(0 0 14px rgba(140,220,255,.55));
    opacity:.9;
  }
  #teaserQ{position:absolute;top:-26px;left:50%;transform:translateX(-50%);
    font-size:34px;font-weight:900;color:#8FE3FF;text-shadow:0 0 14px rgba(140,230,255,.8);}
  #teaserImg{width:100%;}
  #banner{position:fixed;inset:0;z-index:90;display:flex;flex-direction:column;
    align-items:center;justify-content:center;gap:22px;
    background:rgba(40,30,80,.5);backdrop-filter:blur(2px);
    opacity:0;pointer-events:none;transition:opacity .45s;}
  #banner.show{opacity:1;pointer-events:auto;}
  #bannerCard{padding:40px 30px 36px;text-align:center;
    display:flex;flex-direction:column;align-items:center;gap:14px;
    max-width:90vw;min-width:min(80vw,300px);
    transform:scale(.7);transition:transform .45s cubic-bezier(.3,1.5,.5,1);
    /* --- 古びた木の板（実素材の1枚絵）---------------------------------
       ふちが欠けた形なので、四角い影は付けられない。
       box-shadow ではなく filter:drop-shadow を使うと、絵の形どおりに影が落ちる。
       画像は assets/card-plank.webp（透過webp） */
    /* 下地の色は置かない。置くと、欠けたふちの透過部分まで塗ってしまう */
    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));
    min-height:min(28vh,210px);
    justify-content:center;
  }

  #banner.show #bannerCard{transform:scale(1);}
  #bannerIcon{font-size:52px;}
  #bannerTitle{font-size:25px;font-weight:900;color:#3F3218;
    text-shadow:0 1px 0 rgba(255,246,224,.7);}
  #bannerSub{font-size:15px;font-weight:700;color:#6B5637;}
  #line.show{opacity:1;}
  .spark{position:absolute;z-index:55;font-size:26px;pointer-events:none;animation:sparkFly 1.1s ease-out forwards;}
  @keyframes sparkFly{0%{opacity:1;transform:translate(0,0) scale(.6) rotate(0)}
    100%{opacity:0;transform:translate(var(--sx),var(--sy)) scale(1.35) rotate(140deg)}}

  @media (prefers-reduced-motion: reduce){ .gimg{animation:none;} }

  @keyframes flash{0%,100%{transform:scale(1)}50%{transform:scale(1.22)}}

  /* ---------- plate ---------- */

  #tree{position:absolute;left:0;right:0;bottom:0;height:29%;z-index:1;}
  #treeCrown{position:absolute;left:50%;bottom:-10%;transform:translateX(-50%);
    width:min(96vw,450px);height:110%;
    background:radial-gradient(ellipse at 50% 100%,#4F8F45 0%,#63A554 55%,#79B865 100%);
    border-radius:50% 50% 0 0;box-shadow:inset 0 14px 24px rgba(255,255,255,.16);}

  @keyframes applePulse{0%,100%{transform:scale(1)}50%{transform:scale(1.35)}}

  #teaserQ{position:absolute;top:-26px;left:50%;transform:translateX(-50%);
    font-size:34px;font-weight:900;color:#8FE3FF;text-shadow:0 0 14px rgba(140,230,255,.8);}

  .overlay{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;
    visibility:visible;background:rgba(45,35,85,.6);backdrop-filter:blur(3px);transition:opacity .4s;}
  /* opacityだけで隠すと、子要素でpointer-events:autoを指定したボタンが
     透明なまま手前に残り、別画面の操作を遮ることがある。非表示時は画面全体を
     hit-testから外し、深い森・水幻郷・全体マップの切替後も操作を残さない。 */
  .overlay.hidden{opacity:0;visibility:hidden;pointer-events:none!important;}
  .overlay.hidden *{pointer-events:none!important;}
  .card{padding:46px 30px 42px;display:flex;flex-direction:column;
    align-items:center;gap:16px;max-width:92vw;min-width:min(84vw,320px);text-align:center;
    /* --- 古びた木の板（実素材の1枚絵）---------------------------------
       ふちが欠けた形なので、四角い影は付けられない。
       box-shadow ではなく filter:drop-shadow を使うと、絵の形どおりに影が落ちる。
       画像は assets/card-plank.webp（透過webp） */
    /* 下地の色は置かない。置くと、欠けたふちの透過部分まで塗ってしまう */
    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));
    min-height:min(34vh,290px);
    justify-content:center;
  }

  .card h1{font-size:26px;font-weight:900;color:#3F3218;
    text-shadow:0 1px 0 rgba(255,246,224,.7);}
  .card p{font-size:15px;font-weight:700;color:#6B5637;line-height:1.7;}
  /* 板の上でも読めるよう、図鑑の番号だけ色を合わせる */
  .card .zno{color:#7A6242;}
  .bigBtn{border:none;border-radius:40px;background:var(--btn);box-shadow:0 7px 0 var(--btn-shadow);
    font-family:inherit;font-weight:900;font-size:clamp(18px,5vw,23px);color:#5A3A00;
    padding:15px clamp(20px,7vw,42px);white-space:nowrap;
    transition:transform .1s, box-shadow .1s;}
  .bigBtn:active{transform:translateY(5px);box-shadow:0 2px 0 var(--btn-shadow);}
  #miniGhost{width:105px;} #endGhost{width:110px;} #endGhost img{width:100%;display:block;} #miniGhost img{width:100%;display:block;filter:brightness(.75) saturate(.85);animation:bobSmall 2.6s ease-in-out infinite;}
  @keyframes bobSmall{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}