/* ミッションのモード切り替え */
.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}

/* コピーとスキルコーチを同じ大きさのボタンに */
.bt-ai-copy,.bt-ai-help{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:40px;padding:0 18px;border-radius:999px;font-size:13.5px;font-weight:900;font-family:inherit;cursor:pointer;box-shadow:0 3px 0 rgba(0,0,0,.25);transform:none}
.bt-ai-copy{flex:none}
.bt-ai-copy span{margin:0}
@media (max-width:600px){.bt-ai-copy,.bt-ai-help{width:100%}}

/* 敵の一覧：戦闘画面の右上に小さく */
.bt-roster.in-stage{position:absolute;top:12px;right:14px;z-index:3;border:none;padding:0;gap:5px;flex-wrap:nowrap}
.bt-roster.in-stage .bt-rs{width:38px;height:38px;border-radius:9px;border-width:1.5px;background:rgba(255,255,255,.85)}
.bt-roster.in-stage .bt-rs span{min-width:16px;height:16px;font-size:9.5px;right:-5px;bottom:-5px;border-radius:8px}
.bt-roster.in-stage .bt-rs.opt::after{display:none}
.bt-roster.in-stage .bt-crown{font-size:12px;top:-8px;left:-5px}
.bt-hp{top:58px}
@media (max-width:600px){
  .bt-roster.in-stage{top:auto;bottom:0;left:0;right:0;justify-content:center;gap:6px;padding:8px 10px 9px;background:linear-gradient(180deg,rgba(10,16,40,0),rgba(10,16,40,.72) 45%);border-radius:0 0 14px 14px}
  .bt-roster.in-stage .bt-rs{width:30px;height:30px;border-radius:8px}
  .bt-roster.in-stage .bt-rs span{min-width:14px;height:14px;font-size:8.5px}
  .bt-stage .bt-taphint{bottom:54px}
  .bt-enemy{bottom:16%;height:66%}
}

/* AIのプロンプトとスキルコーチ：同じ大きさで横並び */
.bt-ai-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px;position:relative;z-index:1}
.bt-ai-btns .bt-ai-copy,.bt-ai-btns .bt-ai-help{width:100%;height:46px;margin:0;font-size:14px}
@media (max-width:600px){.bt-ai-btns{grid-template-columns:1fr}}

/* AIと進める：見出しを大きく、枠の縦幅を短く */
.bt-ai{padding:10px 14px 12px}
.bt-ai-main{gap:10px}
.bt-ai-orb{width:36px;height:36px}
.bt-ai-orb svg{width:20px;height:20px}
.bt-ai-tx b{font-size:21px;letter-spacing:.06em}
.bt-ai-tx small{font-size:12px;margin-top:0}
.bt-ai-sub{position:absolute;top:12px;right:14px;margin:0;z-index:2}
.bt-ai-btns{margin-top:10px}
.bt-ai-btns .bt-ai-copy,.bt-ai-btns .bt-ai-help{height:40px}
.bt-ai-panel{margin-top:8px}
@media (max-width:600px){.bt-ai-sub{position:static;margin-top:8px}.bt-ai-tx b{font-size:18px}}

.bt-say .task-go{margin-left:6px;font-size:14px;padding:3px 12px;vertical-align:2px}

/* 戻る：戦闘画面の左下 */
.bt-back.in-stage{position:absolute;left:14px;bottom:14px;z-index:4;border:1.5px solid rgba(255,255,255,.7);border-radius:10px;padding:8px 14px;font-size:14px;font-weight:900;font-family:inherit;color:#fff;cursor:pointer;
  background:linear-gradient(180deg,rgba(58,111,208,.95),rgba(35,87,181,.95));box-shadow:0 3px 0 #163a7c,0 4px 10px rgba(0,0,0,.3)}
.bt-back.in-stage:disabled{opacity:.6}
@media (max-width:600px){.bt-back.in-stage{bottom:56px;left:10px;padding:6px 11px;font-size:12.5px}}

/* 守護者の欄：ミッション名とタスクの一覧（全体が見えるように） */
.bt-mtitle{font-size:13px;font-weight:900;letter-spacing:.06em;color:#e0b53a;margin:0 0 6px}
.bt-tasks{list-style:none;margin:12px 0 0;padding:10px 0 0;border-top:1px dashed rgba(255,229,138,.3);display:flex;flex-direction:column;gap:6px}
.bt-tasks li{display:flex;align-items:flex-start;gap:8px;font-size:13.5px;line-height:1.6;color:#9fb0d6}
.bt-tasks li i{flex:none;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:11px;font-weight:900;background:rgba(255,255,255,.1);color:#c9d6f2;margin-top:2px}
.bt-tasks li.done{color:#7d8fb8;text-decoration:line-through;text-decoration-color:rgba(255,255,255,.3)}
.bt-tasks li.done i{background:#2f9a62;color:#fff}
.bt-tasks li.now{color:#fff;font-weight:700}
.bt-tasks li.now i{background:linear-gradient(180deg,#ffe58a,#e0b53a);color:#2a1c00}
.bt-say{min-height:0}

/* 守護者の欄：タスク一覧を整える（左の線と点を消す） */
.bt-tasks,.bt-tasks li{border:none!important;background:none!important}
.bt-tasks li::before,.bt-tasks li::after,.bt-tasks::before{display:none!important;content:none!important}
.bt-tasks li{padding:0!important}
/* 分かれ道：選択肢をボタンで */
.bt-choices{display:grid;gap:8px;margin-top:12px}
.bt-choice{display:flex;align-items:flex-start;gap:12px;text-align:left;width:100%;padding:12px 14px;border-radius:12px;cursor:pointer;font-family:inherit;color:#fff;
  background:rgba(255,255,255,.07);border:1.5px solid rgba(255,229,138,.45);transition:background .15s,transform .1s}
.bt-choice:hover{background:rgba(255,229,138,.14);transform:translateY(-1px)}
.bt-choice b{flex:none;width:32px;height:32px;border-radius:9px;display:grid;place-items:center;font-size:16px;font-weight:900;color:#2a1c00;background:linear-gradient(180deg,#ffe58a,#e0b53a);box-shadow:0 2px 0 #8a6410}
.bt-choice span{font-size:15px;font-weight:700;line-height:1.55}
.bt-choice small{display:block;font-size:12.5px;font-weight:600;color:#ffe58a;margin-top:2px}
.bt-choice.on{background:rgba(120,220,140,.18);border-color:#9be7a8}

/* 技で選ぶ：こうげき・ファイア・サンダー・ブリザード */
.bt-choice b{width:auto;height:auto;min-width:96px;padding:6px 10px;border-radius:10px;flex-direction:column;gap:2px;font-size:13px;letter-spacing:.04em}
.bt-choice b em{font-style:normal;font-size:20px;line-height:1}
.bt-choice span i{font-style:normal;display:inline-block;margin-right:8px;font-size:12px;font-weight:900;color:#2a1c00;background:#ffe58a;border-radius:6px;padding:0 7px}
.bt-choice.sp-fire b{background:linear-gradient(180deg,#ffb27a,#e5502a);color:#fff;box-shadow:0 2px 0 #8a2a10}
.bt-choice.sp-thunder b{background:linear-gradient(180deg,#fff27a,#e0b000);color:#2a1c00;box-shadow:0 2px 0 #8a6a00}
.bt-choice.sp-ice b{background:linear-gradient(180deg,#bfe8ff,#4aa6e0);color:#fff;box-shadow:0 2px 0 #1e5a8a}
.bt-choice.sp-fire{border-color:rgba(255,140,90,.6)}.bt-choice.sp-thunder{border-color:rgba(255,230,90,.6)}.bt-choice.sp-ice{border-color:rgba(130,200,255,.6)}
/* 技の演出：画面いっぱいの光 */
.bt-stage.spell::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;animation:spFlash .7s ease-out forwards}
.bt-stage.spell[data-sp="fire"]::after{background:radial-gradient(circle at 50% 55%,rgba(255,160,60,.9),rgba(255,60,20,.4) 40%,transparent 70%)}
.bt-stage.spell[data-sp="thunder"]::after{background:linear-gradient(180deg,rgba(255,255,200,.95),rgba(255,230,80,.35) 50%,transparent)}
.bt-stage.spell[data-sp="ice"]::after{background:radial-gradient(circle at 50% 55%,rgba(220,245,255,.95),rgba(80,170,240,.4) 45%,transparent 70%)}
.bt-stage.spell[data-sp="atk"]::after{background:none}
@keyframes spFlash{0%{opacity:0}25%{opacity:1}100%{opacity:0}}
@media (max-width:600px){.bt-choice b{min-width:78px}}

.bt-back.in-stage:disabled{opacity:.45;cursor:default;box-shadow:0 2px 0 #163a7c}

/* タスク：全体は番号の列、文章はいまのタスクだけ大きく */
.bt-steps{display:flex;align-items:center;gap:0;margin-top:14px}
.bt-steps i{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:11.5px;font-weight:900;color:#9fb0d6;background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.18)}
.bt-steps i.done{background:#2f9a62;border-color:#7be0a6;color:#fff}
.bt-steps i.cur{width:30px;height:30px;font-size:13px;color:#2a1c00;background:linear-gradient(180deg,#ffe58a,#e0b53a);border-color:#fff3c4;box-shadow:0 0 10px rgba(255,210,90,.6)}
.bt-steps s{flex:0 1 28px;height:2px;background:rgba(255,255,255,.2);text-decoration:none}
.bt-steps-tog{margin-left:auto;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.06);color:#c9d6f2;border-radius:999px;padding:3px 11px;font-size:12px;font-weight:700;cursor:pointer;font-family:inherit}
.bt-tasks[hidden]{display:none!important}
.bt-tasks{margin-top:10px!important}
.bt-say{font-size:19px;line-height:1.75}
@media (max-width:600px){.bt-say{font-size:16.5px}}

.bt-steps i{line-height:1!important;padding:0!important;margin:0!important;position:static!important;transform:none!important;text-indent:0!important;overflow:hidden}

/* タスク：1つの一覧に。いまのタスクだけ大きく、ほかは小さく1行 */
.bt-say:empty{display:none}
.bt-flow{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.bt-flow li{display:flex;align-items:flex-start;gap:10px;border:none;background:none;padding:0}
.bt-flow li::before{content:none!important;display:none!important}
.bt-flow i{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:11px;font-weight:900;line-height:1;margin-top:1px;color:#9fb0d6;background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.18)}
.bt-flow li.done,.bt-flow li.next{font-size:13px;color:#7d8fb8}
.bt-flow li.done span,.bt-flow li.next span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.bt-flow li.done i{background:#2f9a62;border-color:#7be0a6;color:#fff}
.bt-flow li.cur{margin:6px 0;padding:12px 14px;border-radius:12px;background:rgba(255,229,138,.1);border:1.5px solid rgba(255,229,138,.5);font-family:"Hiragino Mincho ProN","Yu Mincho",serif;font-size:19px;line-height:1.7;color:#fff}
.bt-flow li.cur i{width:28px;height:28px;font-size:13px;color:#2a1c00;background:linear-gradient(180deg,#ffe58a,#e0b53a);border-color:#fff3c4;margin-top:3px}
.bt-flow li.cur .hl{color:#ffe58a}
@media (max-width:600px){.bt-flow li.cur{font-size:16.5px;padding:10px 12px}}

/* 「AIと進める」の横に説明を並べる */
.bt-ai-tx{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 14px;padding-right:220px}
.bt-ai-tx small{flex:1 1 260px;min-width:0}
@media (max-width:900px){.bt-ai-tx{padding-right:0}}

/* AIと進める：見出しを大きく、補足は右に2行で */
.bt-ai-tx{align-items:center;gap:6px 28px}
.bt-ai-tx b{font-size:28px!important;letter-spacing:.06em;white-space:nowrap}
.bt-ai-tx small{flex:0 1 auto;font-size:12.5px;line-height:1.6;padding-left:16px;border-left:1px solid rgba(255,255,255,.25)}
@media (max-width:900px){.bt-ai-tx b{font-size:22px!important}.bt-ai-tx small br{display:none}.bt-ai-tx small{padding-left:0;border-left:none}}

/* AIと進める：守護者の欄の右上のふちに、左の名札と対になる細い帯として置く。中身は全幅で使う */
.bt-narr{position:relative;margin-top:24px;container-type:inline-size}
.bt-narr .bt-ai{position:absolute;top:-21px;right:16px;z-index:4;display:flex;align-items:center;gap:8px;width:auto;height:42px;margin:0;padding:0 6px;border-radius:999px;overflow:visible;border:1.5px solid #7fa6f0;box-shadow:0 6px 16px rgba(0,0,0,.35)}
.bt-narr .bt-ai::after{content:none}
.bt-narr .bt-ai-orb{width:30px;height:30px;box-shadow:0 0 0 2px rgba(255,229,138,.35)}
.bt-narr .bt-ai-orb svg{width:22px;height:22px}
.bt-ai-name{font-size:15px;font-weight:900;color:#fff;letter-spacing:.05em;white-space:nowrap;margin-right:2px}
.bt-narr .bt-ai-copy,.bt-narr .bt-ai-help{height:30px;width:auto;margin:0;padding:0 14px;font-size:13px;white-space:nowrap}
.bt-ai-q{flex:none;width:30px;height:30px;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.45);background:rgba(255,255,255,.1);color:#fff;font-size:14px;font-weight:900;cursor:pointer;font-family:inherit}
.bt-ai-q.on{background:#ffe58a;color:#2a1c00;border-color:#ffe58a}
.bt-narr .bt-ai-panel{position:absolute;right:0;top:calc(100% + 8px);width:min(440px,86vw);z-index:6;margin:0;padding:14px 16px;background:#16224a;border:1px solid rgba(255,255,255,.2);border-radius:12px;box-shadow:0 12px 26px rgba(0,0,0,.45);color:#eef3ff}
.bt-ai-ph{display:block;font-size:15px;margin-bottom:6px;color:#ffe58a}
.bt-narr .bt-ai-panel ol{font-size:14px;line-height:2}
.bt-ai-peek{margin-top:8px}
.bt-ai-peek summary{cursor:pointer;font-size:13px;font-weight:800;color:#bcd0f5}
.bt-ai-peek pre{margin:8px 0 0;max-height:240px;overflow:auto;white-space:pre-wrap;font-size:12.5px;line-height:1.7;background:rgba(0,0,0,.25);border-radius:8px;padding:8px 10px}
/* 幅がせまいときは、帯を欄の一番上に置き、ボタンを2つ並べる */
@container (max-width:920px){
  .bt-narr .bt-ai{position:relative;top:auto;right:auto;height:auto;flex-wrap:wrap;border-radius:14px;padding:8px 10px;margin:0 0 14px}
  .bt-ai-name{flex:1}
  .bt-narr .bt-ai-copy,.bt-narr .bt-ai-help{order:3;flex:1 1 40%;height:38px;padding:0 8px}
  .bt-narr .bt-ai-panel{left:0;right:0;width:auto}
}
@media (max-width:900px){.bt-narr{margin-top:14px}}
/* いまのタスク：金の枠の大きなカード。ほかのタスクは小さく */
.bt-flow li.cur{display:block;margin:8px 0;padding:12px 16px 14px;border-radius:14px;background:linear-gradient(180deg,rgba(255,229,138,.16),rgba(255,229,138,.06));border:2px solid #e0b53a;box-shadow:0 0 0 4px rgba(255,229,138,.10),0 8px 20px rgba(0,0,0,.25);animation:curGlow 2.4s ease-in-out infinite}
.cur-h{display:flex;align-items:center;gap:8px;margin-bottom:6px;font-family:inherit}
.bt-flow li.cur .cur-h i{width:26px;height:26px;margin:0;font-size:13px;color:#2a1c00;background:linear-gradient(180deg,#ffe58a,#e0b53a);border:1px solid #fff3c4}
.cur-h em{font-style:normal;font-size:14px;font-weight:900;letter-spacing:.08em;color:#ffe58a}
.cur-h small{margin-left:auto;font-size:13px;font-weight:800;color:#c9b77a}
.cur-t{display:grid;font-family:"Hiragino Mincho ProN","Yu Mincho",serif;font-size:22px;font-weight:700;line-height:1.7;color:#fffaf0}
.cur-t>span{grid-area:1/1}
.cur-ghost{visibility:hidden}
.cur-t .hl{color:#ffe58a}
@keyframes curGlow{50%{box-shadow:0 0 0 6px rgba(255,229,138,.18),0 8px 20px rgba(0,0,0,.25)}}
@media (max-width:600px){.cur-t{font-size:18px}.bt-flow li.cur{padding:10px 12px 12px}}
@media (prefers-reduced-motion:reduce){.bt-flow li.cur{animation:none}}
/* スマホ：いまのタスクを先に見せ、AIと進めるはタスクの下へ。攻撃の案内はステージの上に出して「戻る」と重ねない */
@container (max-width:920px){
  .bt-narr.done{display:flex;flex-direction:column}
  .bt-narr .bt-ai{order:9;margin:14px 0 0}
  .bt-narr .bt-ai-panel{top:auto;bottom:calc(100% + 8px)}
}
@media (max-width:600px){
  .bt-stage .bt-taphint{top:12px;bottom:auto}
  .bt-narr .bt-ai-copy,.bt-narr .bt-ai-help{font-size:12.5px;padding:0 6px;flex:1 1 44%}
}
.bt-narr.done{display:flex;flex-direction:column}
/* いまのタスクだけを出す（終わったタスク・あとのタスクは出さない。位置は「1 / 3」で分かる） */
.bt-flow li.done,.bt-flow li.next{display:none}

/* 全体像：QUESTのゴール → ミッションの流れ → このミッションの役目 → いまのタスク＋なぜ */
.bt-goal{display:flex;gap:12px;align-items:baseline;margin:0 0 10px;padding:10px 14px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,229,138,.25)}
.bt-goal b{flex:none;font-size:12.5px;font-weight:900;letter-spacing:.06em;color:#1d1400;background:#ffe58a;border-radius:999px;padding:2px 10px}
.bt-goal p{margin:0;font-size:15px;line-height:1.7;color:#f4ecd8;font-weight:700}
.bt-route{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-wrap:wrap;gap:6px 4px;align-items:center}
.bt-route li{display:flex;align-items:center;gap:5px;font-size:12.5px;color:#8d9cc0;padding:3px 10px 3px 4px;border-radius:999px;border:1px solid rgba(255,255,255,.12)}
.bt-route li::before{content:none!important}
.bt-route li+li{margin-left:14px;position:relative}
.bt-route li+li::after{content:"›";position:absolute;left:-12px;color:#5d6b8e;font-size:14px}
.bt-route i{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:10.5px;font-weight:900;background:rgba(255,255,255,.08);color:#9fb0d6}
.bt-route li.done{color:#9fd8b6}.bt-route li.done i{background:#2f9a62;color:#fff}
.bt-route li.cur{color:#ffe58a;border-color:#e0b53a;background:rgba(255,229,138,.12);font-weight:800}.bt-route li.cur i{background:#ffe58a;color:#2a1c00}
.bt-purpose{margin:4px 0 8px;font-size:15px;line-height:1.75;color:#dfe6f5}
.bt-purpose b{display:inline-block;margin-right:8px;font-size:12px;font-weight:900;color:#bcd0f5;border:1px solid rgba(188,208,245,.5);border-radius:999px;padding:0 9px;vertical-align:1px}
.cur-why{margin:10px 0 0;padding-top:9px;border-top:1px dashed rgba(255,229,138,.35);font-size:15px;line-height:1.7;color:#f0e2b0}
.cur-why b{margin-right:8px;font-size:12.5px;font-weight:900;color:#2a1c00;background:#e0b53a;border-radius:999px;padding:1px 9px}
@media (max-width:600px){.bt-goal{flex-direction:column;gap:6px}.bt-goal p,.bt-purpose,.cur-why{font-size:14px}.bt-route li{font-size:11.5px}}

/* スマホ：ミッションの流れは1行に。いまのミッションだけ名前を出し、ほかは番号の丸だけ */
@media (max-width:600px){
  .bt-route{flex-wrap:nowrap;gap:0;overflow:hidden}
  .bt-route li{padding:3px;border-color:transparent;flex:none}
  .bt-route li .rt{display:none}
  .bt-route li.cur{flex:1 1 auto;min-width:0;padding:3px 10px 3px 4px;border-color:#e0b53a}
  .bt-route li.cur .rt{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .bt-route li+li{margin-left:12px}
  .bt-route li+li::after{left:-10px}
}

/* 暗い守護者の欄の中の QUEST／MISSION の札 */
.bt-narr .qref{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.25);color:#fff}
.bt-narr a.qref:hover{background:rgba(255,255,255,.18)}
.bt-narr .qref i{color:#bcd0f5}

/* ガチャガチャを減らす：枠と札をやめ、強弱で見せる */
.bt-goal{display:block;margin:0 0 12px;padding:0;border:none;background:none;font-size:13px;line-height:1.6;color:#9fb0d6;font-weight:400}
.bt-mhead{display:flex;align-items:center;gap:12px;margin:0 0 2px}
.bt-mhead>span:first-child{font-size:13px;font-weight:900;letter-spacing:.08em;color:#e0b53a}
.bt-dots{display:flex;gap:5px}
.bt-dots i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.18)}
.bt-dots i.done{background:#4fc285}
.bt-dots i.cur{background:#ffe58a;box-shadow:0 0 0 3px rgba(255,229,138,.25)}
.bt-mname{margin:0 0 4px;font-size:22px;font-weight:900;color:#fff;letter-spacing:.02em}
.bt-purpose{margin:0 0 12px;font-size:14px;line-height:1.7;color:#aebbd8}
.bt-purpose b{display:none}
.bt-narr .bt-say{font-size:15px;line-height:1.7;color:#c9bfa6}
.cur-why{font-size:14px;color:#d9cba0}
@media (max-width:600px){.bt-mname{font-size:19px}}
.bt-purpose .qref b,.cur-why .qref b{border:none;padding:0;margin:0;vertical-align:baseline;font-size:inherit;font-weight:inherit;color:inherit;background:none}

/* 敵のセリフ：ステージの上の吹き出し。言い終えたら消える */
.bt-stage .bt-say{position:absolute;left:50%;top:14px;transform:translateX(-50%);z-index:3;width:max-content;max-width:min(560px,86%);margin:0;padding:8px 16px;border-radius:14px;background:rgba(12,18,40,.82);border:1px solid rgba(255,229,138,.5);color:#fff4d6;font-family:"Hiragino Mincho ProN","Yu Mincho",serif;font-size:15px;line-height:1.6;min-height:0;text-align:center;pointer-events:none;transition:opacity .6s}
.bt-stage .bt-say:empty{display:none}
.bt-stage .bt-say.gone{opacity:0}
@media (max-width:600px){.bt-stage .bt-say{font-size:13.5px;top:10px;padding:6px 12px}.bt-stage .bt-taphint{top:auto;bottom:54px}}
/* いまのタスク：手順は読みやすいゴシック体で。色付きの言葉は下線だけにして光らせない */
.cur-t{font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",Meiryo,sans-serif;font-size:20px;font-weight:700;line-height:1.75;letter-spacing:.01em}
.cur-t .hl{color:inherit;border-bottom:1.5px solid rgba(255,229,138,.55);font-weight:inherit}
.cur-h em{font-family:inherit;font-size:12.5px;letter-spacing:.06em}
.cur-h small{font-size:12.5px}
.cur-why{border-top:none;margin-top:10px;padding-top:0;font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",Meiryo,sans-serif;font-size:13.5px;color:#cbbf98}
.cur-why b{font-size:11.5px;padding:1px 8px}
@media (max-width:600px){.cur-t{font-size:17px}.cur-why{font-size:13px}.bt-mname{font-size:18px}.bt-purpose{font-size:13px}}
.bt-flow li.cur .cur-t .hl{color:inherit;border-bottom:1.5px solid rgba(255,229,138,.5)}
.bt-narr .bt-flow{margin-top:4px}
/* スマホ：攻撃の案内は右下に小さく出し、左下の「戻る」と重ねない */
@keyframes btHintR{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@media (max-width:600px){.bt-stage .bt-taphint{left:auto;right:10px;bottom:54px;top:auto;transform:none;animation:btHintR 1.6s ease-in-out infinite;font-size:12px;padding:5px 10px}}
.bt-narr .bt-flow li.cur{margin-top:2px}
.bt-narr .bt-purpose{margin-bottom:8px}
@media (max-width:600px){.bt-taphint .th-l{display:none}}
/* 押せない言葉は「」で囲むだけ（下線は押せるリンクだけに付ける） */
span.hl,.bt-flow li.cur .cur-t span.hl,.bt-say span.hl{border-bottom:none!important;text-decoration:none!important;color:inherit!important;background:none!important;padding:0!important;font-weight:inherit}
span.hl::before{content:"「"}span.hl::after{content:"」"}

/* はじめのプロンプト（左）と AIに投げる（右）を1つの帯に並べる */
.bt-ai-pair{display:flex;align-items:stretch;flex:none;border-radius:999px;overflow:hidden;box-shadow:0 3px 0 #9a7410}
.bt-ai-pair .bt-ai-base,.bt-ai-pair .bt-ai-copy{display:inline-flex;align-items:center;justify-content:center;gap:5px;height:30px;margin:0;padding:0 14px;border:none;border-radius:0;font-size:13px;font-weight:900;font-family:inherit;cursor:pointer;white-space:nowrap;box-shadow:none}
.bt-ai-pair .bt-ai-base{background:linear-gradient(180deg,#5b8be0,#2f5fc8);color:#fff;border-right:1px solid rgba(255,255,255,.35)}
.bt-ai-pair .bt-ai-copy{background:linear-gradient(180deg,#ffe99a,#e3b23a);color:#3b2a00;width:auto}
.bt-ai-pair .ok{background:linear-gradient(180deg,#9be7a8,#3fae5a)!important;color:#0e3a1a!important}
@container (max-width:920px){
  .bt-narr .bt-ai-pair{order:3;flex:1 1 100%;height:42px}
  .bt-narr .bt-ai-pair .bt-ai-base,.bt-narr .bt-ai-pair .bt-ai-copy{flex:1 1 50%;height:42px;padding:0 6px;font-size:13.5px}
  .bt-narr .bt-ai-help{order:4;flex:1 1 100%}
}

/* ミッションで開くページへのリンク（教材の説明にURLがあるとき） */
.bt-links{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.bt-links .ext{display:inline-flex;align-items:center;padding:6px 14px;border-radius:999px;background:#2357b5;color:#fff;font-size:14px;font-weight:800;text-decoration:none;border:1px solid #6f97e6}
.bt-links .ext:hover{background:#2f66cc}
/* 倒し終えたミッション：タスクは全部完了と伝える */
.bt-flow li.clear{display:block;padding:14px 16px;border-radius:12px;background:rgba(79,194,133,.14);border:1.5px solid rgba(79,194,133,.6);color:#bff0d3;font-weight:800;font-size:16px}
@container (max-width:920px){.bt-narr .bt-ai-pair .bt-ai-base,.bt-narr .bt-ai-pair .bt-ai-copy{min-width:0;flex:1 1 0;font-size:13px;padding:0 4px;gap:3px}}
@media (max-width:420px){.bt-narr .bt-ai-pair .bt-ai-base,.bt-narr .bt-ai-pair .bt-ai-copy{font-size:12px}}

/* ミッションの進み具合のゲージ：敵の画面のいちばん上 */
.bt-mgauge{position:absolute;left:16px;right:16px;top:12px;z-index:3;display:flex;align-items:center;gap:5px;padding:5px 10px;border-radius:999px;background:rgba(12,20,44,.55);backdrop-filter:blur(2px)}
.bt-mgauge i{flex:1;height:8px;border-radius:99px;background:rgba(255,255,255,.25)}
.bt-mgauge i.on{background:linear-gradient(180deg,#ffe58a,#e0b53a)}
.bt-mgauge i.cur{background:rgba(255,229,138,.35);box-shadow:0 0 0 1.5px #ffe58a inset}
.bt-mgauge b{flex:none;margin-left:6px;color:#ffe58a;font-size:13px;font-weight:900;font-variant-numeric:tabular-nums}
.bt-stage .bt-name{top:48px}
.bt-stage .bt-hp{top:84px}
@media (max-width:600px){.bt-mgauge{left:10px;right:10px;top:8px;padding:4px 8px}.bt-mgauge i{height:6px}.bt-stage .bt-name{top:38px}.bt-stage .bt-hp{top:70px}}
@media (min-width:601px){.bt-roster.in-stage{top:46px}}
@media (min-width:601px){.bt-stage .bt-hp{right:270px}}
.bt-all .bt-joke{font-size:14px;color:#7a5a12;margin:-4px 0 12px;font-style:italic}
.bt-tatoe{margin:-4px 0 14px;font-size:13.5px;line-height:1.7;color:#f3d98a;opacity:.92}
.bt-tatoe b{display:inline-block;margin-right:8px;padding:0 8px;border-radius:999px;background:rgba(243,217,138,.16);border:1px solid rgba(243,217,138,.45);font-size:11.5px;font-weight:700;letter-spacing:.06em}
/* 解説役のキャラクター「ホウ先生」 */
.hou{display:flex;align-items:flex-start;gap:10px;margin:-2px 0 16px}
.hou-face{flex:0 0 54px;width:54px;height:54px;border-radius:50%;background:radial-gradient(circle at 50% 40%,#fff8e6,#f1dfb6);border:2px solid #e3c063;display:grid;place-items:center;box-shadow:0 4px 12px rgba(0,0,0,.25);animation:houBob 3.2s ease-in-out infinite}
.hou-face svg{width:46px;height:46px}
@keyframes houBob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-3px) rotate(2deg)}}
.hou-bub{position:relative;flex:1;min-width:0;background:#fffaf0;color:#3b2a1a;border:1.5px solid #e3c063;border-radius:14px;padding:9px 13px 10px;font-size:14px;line-height:1.75;box-shadow:0 4px 12px rgba(0,0,0,.18)}
.hou-bub::before{content:"";position:absolute;left:-8px;top:18px;border:8px solid transparent;border-right-color:#e3c063;border-left:0}
.hou-bub b{display:block;font-size:12px;color:#8a5c33;letter-spacing:.08em;margin-bottom:2px}
.hou-intro{display:block;margin-bottom:4px;color:#8a5c33;font-size:13px}
@media (prefers-reduced-motion:reduce){.hou-face{animation:none}}
/* ホウ先生：Midjourneyの絵（丸い枠はやめて、体ごと見せる） */
.hou-face{flex:0 0 68px;width:68px;height:70px;border:none;background:none;box-shadow:none;border-radius:0;place-items:end center}
.hou-face img{width:68px;height:auto;filter:drop-shadow(0 4px 8px rgba(0,0,0,.35))}
.hou-face{flex:0 0 86px;width:86px;height:88px}
.hou-face img{width:86px}
@media (max-width:600px){.hou-face{flex-basis:68px;width:68px;height:70px}.hou-face img{width:68px}}

/* ミッション名・ホウ先生・いまのタスクを順にパッと出す */
.bt-pop{animation:btPop .35s cubic-bezier(.2,.8,.3,1.2) both}
.pop-wait .bt-pop{animation-play-state:paused}
@keyframes btPop{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.bt-pop{animation:none}}

/* 左下のコントローラー風「こうげき」ボタン */
.bt-pad{position:fixed;left:14px;bottom:18px;z-index:30;display:flex;flex-direction:column;align-items:center;gap:2px;padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent;
  opacity:0;transform:translateY(24px) scale(.85);pointer-events:none;transition:opacity .25s,transform .3s cubic-bezier(.2,.9,.3,1.4)}
.bt-pad:focus{outline:none}.bt-pad:focus-visible .pad-svg{outline:3px solid #ffd54a;outline-offset:3px;border-radius:20px}
.bt-pad.show{opacity:1;transform:none;pointer-events:auto}
.pad-svg{width:112px;height:auto;filter:drop-shadow(0 6px 10px rgba(0,0,0,.4))}
.pad-a{transform-origin:120px 40px;animation:padGlow 1.4s ease-in-out infinite}
@keyframes padGlow{50%{transform:scale(1.15)}}
.pad-lbl{display:flex;align-items:center;gap:5px;margin-top:-4px;padding:3px 10px 3px 4px;border-radius:999px;background:#1d1f2b;color:#fff;font:800 12px/1 system-ui,sans-serif;letter-spacing:.06em;box-shadow:0 3px 8px rgba(0,0,0,.35)}
.pad-lbl span{width:17px;height:17px;border-radius:50%;display:grid;place-items:center;background:#d0202f;font-size:10px}
.bt-pad.hit{animation:padHit .3s}
.bt-pad.hit .pad-a{animation:none;transform:scale(.8)}
@keyframes padHit{30%{transform:translate(-3px,2px)}60%{transform:translate(3px,-1px)}}
@media (max-width:760px){.bt-pad{bottom:calc(66px + env(safe-area-inset-bottom,0px));left:10px}.pad-svg{width:100px}}
@media (prefers-reduced-motion:reduce){.pad-a{animation:none}}

/* タスクの中の「ページを開く」ボタン */
.task-go.go-btn{display:flex;width:fit-content;max-width:calc(100% - 1.9em);box-sizing:border-box;align-items:center;gap:6px;margin:10px 0 8px;padding:8px 14px;border-radius:12px;background:linear-gradient(180deg,#ffe08a,#e7b93a);color:#2a2210!important;font-weight:800;font-size:14px!important;line-height:1.35;text-decoration:none!important;box-shadow:0 3px 0 #a87d16,0 6px 14px rgba(0,0,0,.3)}
.task-go.go-btn:active{transform:translateY(2px);box-shadow:0 1px 0 #a87d16}

/* 完了したミッションの「タスクに戻る」 */
.bt-flow li.clear{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.bt-redo{padding:8px 16px;border-radius:999px;border:1.5px solid rgba(255,255,255,.55);background:rgba(255,255,255,.08);color:#fff;font:700 14px/1.2 system-ui,sans-serif;cursor:pointer}
.bt-redo:hover{background:rgba(255,255,255,.18)}

/* 上の戻るボタンも「タスクに戻る」と同じ見た目にそろえる（丸い枠・半透明） */
.bt-back.in-stage{border-radius:999px;border:1.5px solid rgba(255,255,255,.6);background:rgba(20,26,40,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);box-shadow:0 3px 10px rgba(0,0,0,.3);font:700 14px/1.2 system-ui,sans-serif;padding:8px 16px}
.bt-back.in-stage:hover{background:rgba(20,26,40,.75)}
.bt-back.in-stage:disabled{opacity:.45;box-shadow:none}
@media (max-width:600px){.bt-back.in-stage{padding:6px 13px;font-size:13px}}
.task-go.go-btn.in-list{margin:8px 0 10px 1.9em}

/* ミッションの見出し：タイトルを大きく、すぐ下に「なぜ？」 */
.bt-narr .bt-mname{font-size:27px;line-height:1.4;margin:2px 0 8px}
.bt-why{margin:0 0 14px;font-size:14.5px;line-height:1.7;color:#d9cba0}
.bt-why b{display:inline-block;margin-right:8px;font-size:12px;font-weight:900;color:#2a1c00;background:#e0b53a;border-radius:999px;padding:1px 9px;vertical-align:1px}
@media (max-width:600px){.bt-narr .bt-mname{font-size:23px}.bt-why{font-size:13.5px}}
/* タイトルを目立たせる：大きな白い文字＋下に金色の線 */
.bt-narr .bt-mname{position:relative;margin:6px 0 16px;padding:0 0 12px;font-size:31px;line-height:1.4;letter-spacing:.03em;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.35)}
.bt-narr .bt-mname::after{content:"";position:absolute;left:0;bottom:0;width:64px;height:4px;border-radius:4px;background:linear-gradient(90deg,#ffe28a,#d49b1e)}
@media (max-width:600px){.bt-narr .bt-mname{font-size:26px}}

/* 敵の登場のセリフは、RPGのメッセージ窓のように下に出す（上の名前・HPに重ねない） */
.bt-stage .bt-say{top:auto;bottom:12px;left:12px;right:12px;transform:none;width:auto;max-width:none;text-align:left;padding:10px 16px;border-radius:10px;
  background:#0b1024;border:2px solid #f4ecd8;box-shadow:0 0 0 3px #0b1024,0 6px 16px rgba(0,0,0,.4);z-index:6;font-size:16px;line-height:1.7;color:#fff}
@media (max-width:600px){.bt-stage .bt-say{bottom:10px;left:10px;right:10px;font-size:14px;padding:8px 12px}}
.bt-stage:has(.bt-say:not(:empty):not(.gone)) :is(.bt-taphint,.bt-back,.bt-roster){visibility:hidden!important;opacity:0!important;pointer-events:none}
.bt-stage .bt-say{transition:opacity .4s}
.bt-stage .bt-say .bt-tip{display:block;margin-top:4px;color:#ffe58a;font-size:.9em}

/* ALL CLEAR：やったミッションを見直すボタン */
.bt-all-ms{margin:22px auto 0;max-width:460px;display:flex;flex-direction:column;gap:8px;text-align:left}
.bt-all-ms>b{font-size:13px;color:#5a4a20;letter-spacing:.06em;text-align:center}
.bt-all-m{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:12px;border:1.5px solid #c9a93a;background:rgba(255,255,255,.85);cursor:pointer;font:inherit;color:#2a2210;text-align:left}
.bt-all-m:hover{background:#fff}
.bt-all-m em{flex:none;font-style:normal;font-size:12px;font-weight:800;color:#7a5b00;background:#f6e6b0;border-radius:999px;padding:2px 10px}
.bt-all-m span{flex:1;font-weight:700;font-size:15px}
.bt-all-m i{flex:none;font-style:normal;color:#2357b5;font-weight:800}

/* 終わったミッションでは、やったタスクを ✓ 付きで読み返せるように並べる */
.bt-flow.all-done li.done{display:flex;align-items:flex-start;gap:10px;font-size:15px;line-height:1.7;color:#d5ddef;padding:10px 4px;border-top:1px dashed rgba(255,255,255,.15)}
.bt-flow.all-done li.done span{white-space:normal;overflow:visible}
.bt-flow.all-done li.done i{flex:none;margin-top:3px}

/* ===== 上の表示を小さく1か所にまとめ、敵はその下の空いた所にだけ描く（ゲージや名前で隠さない） ===== */
.bt-stage{--hud:90px;--foot:15%}
.bt-stage .bt-mgauge{top:8px;left:12px;right:12px;padding:3px 9px;gap:4px}
.bt-stage .bt-mgauge i{height:5px}
.bt-stage .bt-mgauge b{font-size:11.5px}
.bt-stage .bt-name{top:30px;left:12px;font-size:13px;padding:1px 10px;background:rgba(20,40,90,.7);text-shadow:none;line-height:1.6}
.bt-stage .bt-name b{margin-right:3px}
.bt-stage .bt-bosstag{font-size:9.5px;padding:0 7px;vertical-align:1px}
.bt-stage .bt-hp{top:56px;left:12px;right:12px;gap:6px}
.bt-stage .bt-hpbar{padding:2px;gap:3px}
.bt-stage .bt-hpbar i{height:6px}
.bt-stage .bt-hp span{font-size:10.5px;padding:0 6px}
/* 敵は「上の表示の下」から「下の一覧の上」までの中に収める */
.bt-stage .bt-enemy{top:var(--hud);bottom:auto;height:calc(100% - var(--hud) - var(--foot));max-width:78%}
/* 敵の一覧は、PCでも下の真ん中に（敵の横に重ねない） */
.bt-stage .bt-roster.in-stage{top:auto;bottom:0;left:0;right:0;justify-content:center;gap:6px;padding:8px 10px 9px;background:linear-gradient(180deg,rgba(10,16,40,0),rgba(10,16,40,.72) 45%);border-radius:0 0 14px 14px}
@media (min-width:601px){.bt-stage .bt-hp{right:12px}.bt-stage{--foot:17%}}
@media (max-width:600px){.bt-stage{--hud:86px;--foot:18%}}

/* ===== 右下の「AIと進める」（左下のコントローラーと対） ===== */
#aiDock{position:fixed;right:14px;bottom:18px;z-index:31;display:none;flex-direction:column;align-items:flex-end;gap:10px}
#aiDock.show{display:flex}
.aidk-fab{display:flex;flex-direction:column;align-items:center;gap:2px;border:0;background:none;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.aidk-orb{display:grid;place-items:center;width:62px;height:62px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#5b8cff,#1d3a8a);border:3px solid #e9e6df;box-shadow:0 6px 14px rgba(0,0,0,.35),inset 0 0 10px rgba(160,200,255,.5);animation:aidkBob 2.4s ease-in-out infinite}
.aidk-orb svg{width:38px;height:38px}
@keyframes aidkBob{50%{transform:translateY(-3px)}}
.aidk-lbl{display:flex;align-items:center;gap:5px;margin-top:-6px;padding:3px 10px 3px 4px;border-radius:999px;background:#1d1f2b;color:#fff;font:800 12px/1 system-ui,sans-serif;letter-spacing:.04em;box-shadow:0 3px 8px rgba(0,0,0,.35)}
.aidk-lbl span{width:17px;height:17px;border-radius:50%;display:grid;place-items:center;background:#2357b5;font-size:9px}
#aiDock.open .aidk-orb{animation:none;border-color:#ffe08a}
.aidk-panel{position:relative;width:min(92vw,380px);max-height:70vh;overflow:auto;border-radius:18px;box-shadow:0 14px 34px rgba(0,0,0,.4);animation:aidkIn .2s ease-out}
@keyframes aidkIn{from{opacity:0;transform:translateY(10px) scale(.97)}}
.aidk-x{position:absolute;top:8px;right:10px;z-index:2;width:28px;height:28px;border-radius:50%;border:1.5px solid rgba(255,255,255,.6);background:rgba(0,0,0,.25);color:#fff;font-size:16px;cursor:pointer}
#aiDock .bt-ai{position:relative!important;top:auto!important;right:auto!important;height:auto!important;display:block!important;margin:0!important;padding:14px 16px 14px!important;border-radius:18px!important;width:auto!important}
#aiDock .bt-ai .bt-ai-q{right:46px}
@media (max-width:760px){#aiDock{bottom:calc(66px + env(safe-area-inset-bottom,0px));right:10px}.aidk-orb{width:54px;height:54px}.aidk-orb svg{width:32px;height:32px}}
@media (prefers-reduced-motion:reduce){.aidk-orb{animation:none}}
#aiDock .bt-ai{display:grid!important;grid-template-columns:auto 1fr;align-items:center;column-gap:10px;row-gap:10px;padding:14px 16px 16px!important}
#aiDock .bt-ai .bt-ai-orb{grid-column:1;position:static}
#aiDock .bt-ai .bt-ai-name{grid-column:2;font-size:18px;margin:0}
#aiDock .bt-ai>:not(.bt-ai-orb):not(.bt-ai-name):not(.bt-ai-q){grid-column:1 / -1}
#aiDock .bt-ai .bt-ai-q{position:absolute!important;top:12px;right:48px;margin:0}
#aiDock .bt-ai-pair{display:flex;width:100%}
#aiDock .bt-ai-pair button{flex:1}
#aiDock.away{opacity:0;pointer-events:none;transform:translateY(20px)}
#aiDock{transition:opacity .25s,transform .25s}
#aiDock.open{opacity:1!important;pointer-events:auto!important;transform:none!important}

/* 右下のAIアイコン：相棒らしく（金の輪・きらめき・まばたき） */
.aidk-orb{position:relative;width:64px;height:64px;background:radial-gradient(circle at 35% 28%,#6f9bff,#2a3f9a 60%,#16205a);border:3px solid #ffd76a;box-shadow:0 0 0 3px #1d1f2b,0 8px 16px rgba(0,0,0,.4),0 0 18px rgba(110,170,255,.55)}
.aidk-orb svg{width:46px;height:46px;position:relative;z-index:1;filter:drop-shadow(0 2px 2px rgba(0,0,0,.35))}
.aidk-ring{position:absolute;inset:-7px;border-radius:50%;border:2px dashed rgba(255,215,106,.75);animation:adSpin 9s linear infinite}
@keyframes adSpin{to{transform:rotate(360deg)}}
.aidk-sp{position:absolute;font-style:normal;color:#ffe58a;text-shadow:0 0 6px #ffd24a;z-index:2;animation:adTw 1.8s ease-in-out infinite}
.aidk-sp.s1{top:-4px;right:-2px;font-size:13px}.aidk-sp.s2{bottom:4px;left:-6px;font-size:9px;animation-delay:.9s}
@keyframes adTw{0%,100%{opacity:.2;transform:scale(.7)}50%{opacity:1;transform:scale(1.1)}}
.aidk-eyes{transform-box:fill-box;transform-origin:center;animation:adBlink 4s infinite}
@keyframes adBlink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
.aidk-lbl{background:linear-gradient(180deg,#2a2d40,#15172a);border:1.5px solid #ffd76a}
@media (max-width:760px){.aidk-orb{width:58px;height:58px}.aidk-orb svg{width:40px;height:40px}}
@media (prefers-reduced-motion:reduce){.aidk-ring,.aidk-sp,.aidk-eyes{animation:none}}

/* AIアイコンは動かさない（絵は差し替え予定） */
.aidk-orb,.aidk-eyes,.aidk-star{animation:none!important}

/* 右下のAI：冒険者の相棒の絵を、青い玉の上に */
.aidk-orb img{position:relative;z-index:1;width:84%;height:auto;margin-top:6%;filter:drop-shadow(0 2px 3px rgba(0,0,0,.4))}
.aidk-orb{overflow:visible}

/* AIと進める：ボタンは1つ（いまのタスクをAIに聞く） */
.bt-ai-one{display:flex;flex-direction:column;align-items:center;gap:3px;width:100%;padding:12px 14px;border:0;border-radius:14px;cursor:pointer;font-family:inherit;
  background:linear-gradient(180deg,#ffe592,#e3a92a);color:#2a1a00;box-shadow:0 4px 0 #8a5a00,0 8px 16px rgba(0,0,0,.25)}
.bt-ai-one .b1{font-size:17px;font-weight:900}
.bt-ai-one small{font-size:11.5px;font-weight:700;color:#6b4300}
.bt-ai-one:active{transform:translateY(3px);box-shadow:0 1px 0 #8a5a00}
.bt-ai-one.ok{background:linear-gradient(180deg,#bff0cf,#6fd394);box-shadow:0 4px 0 #2f8a52}
#aiDock .bt-ai .bt-ai-one{grid-column:1 / -1}
.bt-ai-orb img{width:88%;height:auto;margin-top:8%}
.aidk-panel{flex:none}
/* 上のミッションの進み具合のバーは出さない（「ミッション 1 / 3」の札と同じ内容のため）。名前とHPを上につめる */
.bt-stage .bt-mgauge{display:none!important}
.bt-stage .bt-name{top:10px}
.bt-stage .bt-hp{top:36px}
.bt-stage{--hud:70px}
@media (max-width:600px){.bt-stage{--hud:66px}.bt-stage .bt-name{top:8px}.bt-stage .bt-hp{top:34px}}
body:not(.bt-allclear) #sec-check{display:none!important}