/* ミッションのモード切り替え */
.mmode{display:inline-flex;background:#f1e7cc;border:1px solid #e2cf95;border-radius:999px;padding:3px;gap:2px}
.mmode button{border:none;background:none;padding:6px 14px;border-radius:999px;font-weight:800;font-size:13px;color:#8a6a00;cursor:pointer;font-family:inherit}
.mmode button.on{background:linear-gradient(180deg,#ffe58a,#c9a93a);color:#3b2a00;box-shadow:0 2px 0 #8a6a00}
#sec-steps.visual #mSteps{display:none}
#sec-steps:not(.visual) #mBattle{display:none}

/* バトル画面 */
.bt{display:flex;flex-direction:column;gap:14px}
.bt-top{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.bt-mis{font-size:13px;font-weight:900;letter-spacing:.16em;color:#a0802c}
.bt-title{font-size:22px;font-weight:800;color:#2a1c08}
/* 舞台：章の場所の絵。敵は地面に立たせる */
.bt-stage{position:relative;overflow:hidden;border-radius:16px;height:clamp(300px,52vh,440px);border:2px solid #c9a93a;
  background:var(--scene) center 62%/cover no-repeat,#7cc25a;box-shadow:0 10px 24px rgba(30,60,30,.18)}
.bt-stage::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.08) 0%,rgba(0,0,0,0) 40%,rgba(0,0,0,.18) 100%);pointer-events:none}
.bt.boss .bt-stage{border-color:#e0703a}
.bt.boss .bt-stage::before{background:linear-gradient(180deg,rgba(255,140,60,.18),rgba(0,0,0,0) 45%,rgba(60,20,0,.28))}
.bt-stage::after{content:"";position:absolute;left:30%;right:30%;bottom:8%;height:7%;border-radius:50%;background:radial-gradient(ellipse,rgba(20,30,10,.45),transparent 70%);z-index:0}
.bt-enemy{position:absolute;left:50%;bottom:6%;top:auto;height:74%;width:auto;max-width:70%;object-fit:contain;transform:translateX(-50%);transform-origin:50% 100%;z-index:1;animation:btIdle 2.6s ease-in-out infinite;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.35)) saturate(1.05)}
@keyframes btIdle{0%,100%{transform:translateX(-50%) scaleY(1)}50%{transform:translateX(-50%) scaleY(1.03) translateY(-2%)}}
.bt-stage.appear .bt-enemy{animation:btAppear .7s cubic-bezier(.2,.9,.2,1),btIdle 2.6s ease-in-out .7s infinite}
@keyframes btAppear{0%{opacity:0;transform:translateX(-50%) translateY(12%) scale(.6);filter:brightness(3)}100%{opacity:1;transform:translateX(-50%) scale(1)}}
.bt-name{position:absolute;left:16px;top:14px;z-index:2;color:#fff;font-size:17px;font-weight:800;text-shadow:0 2px 4px rgba(20,40,80,.6);background:rgba(35,87,181,.75);padding:2px 12px;border-radius:999px}
.bt-name b{color:#ffe58a;margin-right:4px}
.bt-bosstag{font-size:12px;background:#e0473a;color:#fff;border-radius:999px;padding:1px 9px;margin-left:4px;vertical-align:2px}
.bt-hp{position:absolute;left:16px;right:16px;top:46px;z-index:2;display:flex;align-items:center;gap:10px}
.bt-hpbar{flex:1;display:flex;gap:4px;padding:3px;border-radius:6px;background:rgba(255,255,255,.75);border:1px solid rgba(35,87,181,.35)}
.bt-hpbar i{flex:1;height:12px;border-radius:3px;background:#dfe6f0;transition:background .4s,box-shadow .4s}
.bt-hpbar i.on{background:linear-gradient(180deg,#ff8a6a,#d8342a);box-shadow:0 0 6px rgba(255,90,60,.6)}
.bt-hp span{color:#1d3a6e;font-size:13px;font-weight:900;white-space:nowrap;background:rgba(255,255,255,.8);padding:1px 8px;border-radius:999px}
.bt-dmg{position:absolute;left:50%;top:38%;z-index:3;font-size:56px;font-weight:900;color:#ffe58a;text-shadow:0 3px 0 #7a3a2a,0 0 18px rgba(255,200,80,.8);opacity:0;pointer-events:none}
.bt-dmg.go{animation:btDmg 1s ease forwards}
@keyframes btDmg{0%{opacity:0;transform:translate(-50%,10px) scale(.7)}20%{opacity:1;transform:translate(-50%,0) scale(1.25)}100%{opacity:0;transform:translate(-50%,-60px) scale(1)}}
.bt-slash{position:absolute;left:20%;right:20%;top:50%;height:6px;z-index:2;background:linear-gradient(90deg,transparent,#fff,#ffe58a,transparent);transform:rotate(-24deg) scaleX(0);opacity:0;box-shadow:0 0 18px #ffe58a}
.bt-slash.go{animation:btSlash .35s ease-out}
@keyframes btSlash{0%{opacity:1;transform:rotate(-24deg) scaleX(0)}60%{opacity:1;transform:rotate(-24deg) scaleX(1)}100%{opacity:0;transform:rotate(-24deg) scaleX(1.1)}}
.bt-stage.hit{animation:btShake .45s ease}
.bt-stage.hit .bt-enemy{filter:brightness(2.2) saturate(.5) drop-shadow(0 6px 10px rgba(0,0,0,.35))}
@keyframes btShake{0%,100%{transform:none}20%{transform:translateX(-10px)}40%{transform:translateX(9px)}60%{transform:translateX(-6px)}80%{transform:translateX(4px)}}
.bt-stage.down .bt-enemy{opacity:.35;filter:grayscale(1);animation:none}
.bt-stage.dying .bt-enemy{animation:btDie 1.1s ease forwards}
@keyframes btDie{0%{opacity:1;filter:brightness(2.5)}40%{transform:translateX(-50%) scale(1.12)}100%{opacity:0;transform:translateX(-50%) translateY(-10%) scale(.5);filter:brightness(3) blur(4px)}}
.bt-clear{position:absolute;inset:0;z-index:4;display:grid;place-items:center;font-size:clamp(32px,7vw,54px);font-weight:900;color:#ffe58a;letter-spacing:.06em;
  text-shadow:0 3px 0 #6a4a10,0 0 26px rgba(255,200,80,.9);opacity:0;pointer-events:none}
.bt-stage.dying .bt-clear{animation:btClear 1.8s ease .3s forwards}
@keyframes btClear{0%{opacity:0;transform:scale(.6)}25%{opacity:1;transform:scale(1.1)}40%{transform:scale(1)}85%{opacity:1}100%{opacity:1}}
.bt-narr{margin:0}
.bt-say{margin:0;font-family:"Hiragino Mincho ProN","Yu Mincho",serif;font-size:18px;line-height:2;min-height:4em;color:#f4ecd8}
.bt-say b{color:#ffe58a}
.bt-say .hl{color:#ffe58a;border-bottom:2px solid #c9a93a;font-weight:800}
.bt-say .ext{display:inline-flex;padding:1px 10px;border-radius:999px;background:#2357b5;color:#fff;font-size:13px;font-weight:700;text-decoration:none;font-family:inherit}
.bt-warn{background:#fff3d6;border:1px solid #f0d78c;border-left:4px solid #e0a020;border-radius:10px;padding:10px 14px;font-size:15px;line-height:1.8;color:#5a3a08}
.bt-act{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.bt-atk{background:linear-gradient(180deg,#e0473a,#a8261c);box-shadow:0 4px 0 #6a140e}
.bt-atk:disabled{opacity:.6}
.bt-step{font-weight:800;color:#8a6a00}
.bt-undo{border:none;background:none;color:var(--muted);font-size:13px;text-decoration:underline;cursor:pointer;margin-left:auto}
.bt-roster{display:flex;gap:8px;flex-wrap:wrap;padding-top:6px;border-top:1px dashed #e2cf95}
.bt-rs{position:relative;width:54px;height:54px;border-radius:12px;border:2px solid #e2cf95;background:linear-gradient(180deg,#c9ecff,#e9f8d8);padding:2px;cursor:pointer;overflow:visible}
.bt-rs img{width:100%;height:100%;object-fit:contain}
.bt-rs span{position:absolute;right:-6px;bottom:-6px;min-width:20px;height:20px;border-radius:10px;background:#c9a93a;color:#3b2a00;font-size:11px;font-weight:900;display:grid;place-items:center;padding:0 4px}
.bt-rs.down img{filter:grayscale(1);opacity:.45}
.bt-rs.down span{background:#2c7a50;color:#fff}
.bt-rs.on{border-color:#e0473a;box-shadow:0 0 0 3px rgba(224,71,58,.25)}
.bt-crown{position:absolute;left:-6px;top:-10px;font-style:normal;color:#edc740;font-size:16px;text-shadow:0 1px 2px #000}
.bt-all{text-align:center;padding:30px 16px;border-radius:16px;background:linear-gradient(180deg,#8fd0ff,#e9f8d8);color:#1d3a2a;border:2px solid #c9a93a}
.bt-all-big{font-size:clamp(36px,8vw,60px);font-weight:900;color:#ffe58a;text-shadow:0 3px 0 #6a4a10,0 0 26px rgba(255,200,80,.8)}
.bt-all p{margin:6px 0;font-size:17px}
.bt-all .bt-all-sub{font-size:14px;color:#2d5a3c;margin-bottom:16px}
@media (prefers-reduced-motion:reduce){.bt-enemy,.bt-stage.appear .bt-enemy{animation:none}.bt-stage.hit{animation:none}}
@media (max-width:900px){.bt-title{font-size:18px}.bt-say{font-size:16px}.bt-stage{height:clamp(260px,46vh,360px)}}

/* 順番どおり：先のミッションには鍵 */
.bt-rs.lock img{filter:grayscale(1) blur(1.5px);opacity:.5}
.bt-rs.lock span{background:#8a94a6;color:#fff}
.bt-rs.nope{animation:btNope .4s ease}
@keyframes btNope{20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
.bt-rs.opt::after{content:"任意";position:absolute;left:50%;bottom:-16px;transform:translateX(-50%);font-size:10px;font-weight:800;color:#8a6a00;white-space:nowrap}
.bt-opt{font-size:11px;font-weight:900;color:#fff;background:#8a94a6;border-radius:999px;padding:1px 9px}
.opt-tag{font-size:11px;font-weight:900;color:#fff;background:#8a94a6;border-radius:999px;padding:1px 9px;margin-left:6px;letter-spacing:.04em}
.steps>li.lock .coin{background:radial-gradient(circle at 35% 30%,#f0f0f0,#b9c0cc);box-shadow:0 3px 0 #8a94a6;color:#6a7280;cursor:not-allowed}
.steps>li.nope .coin{animation:btNope .4s ease}

/* 敵をタップで攻撃 */
.bt-enemy.tap{cursor:pointer;-webkit-tap-highlight-color:transparent;outline:none}
.bt-enemy.tap:hover{filter:drop-shadow(0 6px 10px rgba(0,0,0,.35)) drop-shadow(0 0 14px rgba(255,229,138,.85)) brightness(1.06)}
.bt-enemy.tap:focus-visible{filter:drop-shadow(0 0 0 #fff) drop-shadow(0 0 10px #ffe58a) drop-shadow(0 0 4px #2357b5)}
.bt-enemy.tap:active{transform:translateX(-50%) scale(.97)}
.bt-taphint{position:absolute;left:50%;bottom:4%;transform:translateX(-50%);z-index:2;pointer-events:none;white-space:nowrap;
  background:rgba(35,87,181,.88);color:#fff;font-weight:800;font-size:15px;padding:6px 16px;border-radius:999px;border:2px solid #ffe58a;
  box-shadow:0 4px 12px rgba(0,0,0,.25);animation:btHint 1.6s ease-in-out infinite}
@keyframes btHint{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-5px)}}
.bt-back{background:linear-gradient(180deg,#6b7a92,#4a5770);box-shadow:0 4px 0 #2e3747}
.bt-back:disabled{opacity:.6}
@media (prefers-reduced-motion:reduce){.bt-taphint{animation:none}}
@media (max-width:900px){.bt-taphint{font-size:13px;padding:5px 12px}}

/* 薬草で回復 */
.bt-herb{position:absolute;left:8%;bottom:14%;width:64px;height:64px;z-index:3;pointer-events:none;animation:btHerb 1.15s cubic-bezier(.3,.7,.4,1) forwards;filter:drop-shadow(0 3px 4px rgba(0,0,0,.35))}
.bt-herb svg{width:100%;height:100%}
@keyframes btHerb{0%{opacity:0;transform:translate(0,30px) rotate(-30deg) scale(.6)}20%{opacity:1;transform:translate(0,0) rotate(-10deg) scale(1)}
  70%{opacity:1;transform:translate(calc(42cqw - 20px),-80px) rotate(20deg) scale(.9)}100%{opacity:0;transform:translate(calc(42cqw - 20px),-60px) rotate(30deg) scale(.2)}}
.bt-stage{container-type:inline-size}
.bt-stage.munch .bt-enemy{animation:btMunch .45s ease-in-out}
@keyframes btMunch{0%,100%{transform:translateX(-50%) scale(1)}25%{transform:translateX(-50%) scaleY(.94) scaleX(1.04)}50%{transform:translateX(-50%) scaleY(1.03)}75%{transform:translateX(-50%) scaleY(.95) scaleX(1.03)}}
.bt-stage.healing .bt-enemy{filter:drop-shadow(0 6px 10px rgba(0,0,0,.35)) drop-shadow(0 0 18px rgba(120,255,140,.9)) brightness(1.15)}
.bt-heal{position:absolute;left:50%;bottom:8%;width:40%;height:70%;transform:translateX(-50%);z-index:2;pointer-events:none}
.bt-heal i{position:absolute;bottom:0;width:10px;height:10px;border-radius:50%;background:radial-gradient(circle,#eaffd8,#6fe07a 60%,transparent 70%);opacity:0}
.bt-stage.healing .bt-heal i{animation:btSpark 1.3s ease-out forwards}
.bt-heal i:nth-child(1){left:10%;animation-delay:0s}.bt-heal i:nth-child(2){left:28%;animation-delay:.15s}.bt-heal i:nth-child(3){left:46%;animation-delay:.05s}
.bt-heal i:nth-child(4){left:62%;animation-delay:.25s}.bt-heal i:nth-child(5){left:78%;animation-delay:.1s}.bt-heal i:nth-child(6){left:90%;animation-delay:.3s}
@keyframes btSpark{0%{opacity:0;transform:translateY(0) scale(.6)}20%{opacity:1}100%{opacity:0;transform:translateY(-220px) scale(1.3)}}
.bt-healnum{position:absolute;left:50%;top:36%;z-index:3;font-size:44px;font-weight:900;color:#9dff9a;text-shadow:0 3px 0 #1e5a2a,0 0 16px rgba(120,255,140,.8);opacity:0;pointer-events:none;transform:translateX(-50%)}
.bt-stage.healing .bt-healnum{animation:btDmg 1.3s ease forwards}
.bt-hpbar i.regen{animation:btRegen 1s ease}
@keyframes btRegen{0%{background:#9dff9a;box-shadow:0 0 14px #6fe07a}100%{}}
@media (prefers-reduced-motion:reduce){.bt-herb,.bt-heal{display:none}}

/* 相棒（AI）と進める：守護者の語りの下 */
.bt-ai{position:relative;border-radius:16px;padding:14px 16px 10px;color:#eef3ff;overflow:hidden;
  background:radial-gradient(ellipse at 0% 0%,rgba(140,190,255,.35),transparent 55%),linear-gradient(135deg,#2a4f9e,#1d3672 60%,#22305e);
  border:2px solid #7fa8ef;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 8px 20px rgba(20,40,100,.22)}
.bt-ai::after{content:"";position:absolute;right:-30px;top:-30px;width:140px;height:140px;border-radius:50%;background:radial-gradient(circle,rgba(255,229,138,.25),transparent 65%);pointer-events:none}
.bt-ai-main{display:flex;align-items:center;gap:12px;flex-wrap:wrap;position:relative;z-index:1}
.bt-ai-orb{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#7fb0ff,#2f5fc8 60%,#1a3a8a);box-shadow:0 0 0 3px rgba(255,229,138,.35),0 0 16px rgba(127,176,255,.6);animation:btOrb 3s ease-in-out infinite}
.bt-ai-orb svg{width:26px;height:26px}
@keyframes btOrb{0%,100%{box-shadow:0 0 0 3px rgba(255,229,138,.35),0 0 12px rgba(127,176,255,.5)}50%{box-shadow:0 0 0 3px rgba(255,229,138,.55),0 0 22px rgba(127,176,255,.9)}}
.bt-ai-tx{flex:1;min-width:170px}
.bt-ai-tx b{display:block;font-size:17px;font-weight:900;letter-spacing:.04em;color:#fff}
.bt-ai-tx small{display:block;font-size:12.5px;color:#c9d8f5;margin-top:2px}
.bt-ai-copy{flex:none;border:none;border-radius:12px;padding:12px 20px;font-size:15px;font-weight:900;font-family:inherit;cursor:pointer;color:#3b2a00;
  background:linear-gradient(180deg,#ffe58a,#e0b53a);box-shadow:0 4px 0 #9a7410,0 6px 14px rgba(0,0,0,.25);transition:transform .1s}
.bt-ai-copy span{margin-right:4px}
.bt-ai-copy:active{transform:translateY(2px);box-shadow:0 2px 0 #9a7410}
.bt-ai-copy.ok{background:linear-gradient(180deg,#9be7a8,#3fae5a);color:#0e3a1a;box-shadow:0 4px 0 #1e6a32}
.bt-ai-sub{display:flex;gap:6px;margin-top:10px;position:relative;z-index:1}
.bt-ai-tog{border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.08);color:#dfe8fb;border-radius:999px;padding:4px 12px;font-size:12px;font-weight:700;cursor:pointer;font-family:inherit}
.bt-ai-tog.on{background:rgba(255,229,138,.2);border-color:#ffe58a;color:#ffe58a}
.bt-ai-panel{margin-top:10px;background:rgba(8,18,48,.45);border:1px solid rgba(255,255,255,.15);border-radius:10px;padding:10px 12px;position:relative;z-index:1}
.bt-ai-panel pre{margin:0;max-height:260px;overflow:auto;white-space:pre-wrap;font-size:12.5px;line-height:1.7;color:#e6eeff;font-family:ui-monospace,Menlo,monospace}
.bt-ai-panel ol{margin:0;padding-left:20px;font-size:13.5px;line-height:1.9}
.bt-ai-panel p{margin:6px 0 0;font-size:12px;color:#ffd7a0}
@media (max-width:600px){.bt-ai-copy{width:100%}.bt-ai-tx b{font-size:15px}}
@media (prefers-reduced-motion:reduce){.bt-ai-orb{animation:none}}
/* ビジュアルモードでは、下の「相棒と進める」は戦闘画面の中へ移す */
body.mm-visual #sec-ai{display:none}

.bt-ai-help{margin-left:auto;border:1px solid #06c755;background:#06c755;color:#fff;border-radius:999px;padding:4px 12px;font-size:12px;font-weight:800;cursor:pointer;font-family:inherit}
.bt-ai-help.ok{background:rgba(120,220,140,.2);border-color:#9be7a8;color:#c9f5d2}

.bt-ai-quest{border:1px solid rgba(255,229,138,.6);background:rgba(255,229,138,.14);color:#ffe58a;border-radius:999px;padding:4px 12px;font-size:12px;font-weight:800;cursor:pointer;font-family:inherit}
.bt-ai-quest.ok{background:rgba(120,220,140,.2);border-color:#9be7a8;color:#c9f5d2}
.bt-ai-sub{flex-wrap:wrap}