/* KONISHI QUEST — バトル本編（正本: design_handoff_konishi_quest/design/Konishi Quest v2.dc.html） */
:root{
  --ink:#0c0f1a;--cream:#f4f1e8;--mint:#5ef2c2;--mag:#ff3d7f;--gold:#ffd166;
  --muted:#aab2d6;--dim:#5b628f;--line:#33385e;--claude:#b9a6ff;
  --jp:'DotGothic16',sans-serif;--head:'Dela Gothic One',sans-serif;--mono:'JetBrains Mono',monospace;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--ink);-webkit-font-smoothing:antialiased}
body{overflow-x:hidden;overflow-y:auto}
a{color:var(--mint);text-decoration:none}
a:hover{color:var(--gold)}
button{font:inherit;color:inherit}

@keyframes blink{50%{opacity:0}}
@keyframes floaty{50%{transform:translateY(-12px)}}
@keyframes popup{0%{transform:translate(-50%,0) scale(.6);opacity:0}15%{transform:translate(-50%,-20px) scale(1.25);opacity:1}100%{transform:translate(-50%,-120px) scale(1);opacity:0}}
@keyframes flash{from{opacity:.75}to{opacity:0}}
@keyframes slam{0%{transform:translate(-50%,-50%) scale(2.6) rotate(-8deg);opacity:0}18%{transform:translate(-50%,-50%) scale(1) rotate(-8deg);opacity:1}75%{opacity:1}100%{transform:translate(-50%,-50%) scale(1.05) rotate(-8deg);opacity:0}}
@keyframes titlein{from{letter-spacing:.6em;opacity:0}to{letter-spacing:.08em;opacity:1}}

/* ---------- 画面の骨組み ---------- */
.kq{position:relative;height:100vh;height:100dvh;min-height:520px;overflow:hidden;background:var(--ink);color:var(--cream);font-family:var(--jp);display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;gap:16px;padding:clamp(12px,2.4vh,22px) clamp(14px,2.4vw,32px) clamp(12px,2.6vh,26px);user-select:none;-webkit-user-select:none}
/* 舞台はオープニングと同じ夜の事務所（壁の時計は魔物になって離れた） */
.bg-office{position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,15,26,.78),rgba(12,15,26,.42) 38%,rgba(12,15,26,.5) 62%,rgba(12,15,26,.86)),url(/quest/img/bg_office.webp) 50% 42%/cover no-repeat;pointer-events:none}
.bg-glow{position:absolute;left:var(--boss-x,50%);top:46%;width:900px;height:900px;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(255,61,127,.26),transparent 60%);pointer-events:none;transition:opacity 1s}
.bg-glow.is-mint{background:radial-gradient(circle,rgba(94,242,194,.22),transparent 60%)}

/* 勇者（左手前の後ろ姿）。下半分は下段の窓の後ろに隠れる */
.hero-sprite{position:absolute;left:clamp(-70px,-1vw,0px);bottom:0;height:min(62vh,640px);aspect-ratio:839/1100;z-index:1;pointer-events:none;transition:transform .14s cubic-bezier(.2,.8,.2,1),filter .2s;animation:herobreath 4.2s ease-in-out infinite}
.hero-sprite img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:left bottom;opacity:0;transition:opacity .06s}
.hero-sprite img.is-on{opacity:1}
.hero-sprite.is-slash{transform:translate(28px,-6px)}
.hero-sprite.is-slash-big{transform:translate(70px,-18px) scale(1.04);filter:drop-shadow(0 0 22px rgba(255,209,102,.6))}
.hero-sprite.is-hurt{transform:translate(-14px,4px);filter:drop-shadow(0 0 24px rgba(255,61,127,.55))}
@keyframes herobreath{50%{translate:0 -4px}}

/* 窓の共通スタイル */
.win{position:relative;background:rgba(12,15,26,.94);border:3px solid var(--cream);border-radius:12px;box-shadow:0 0 0 3px var(--ink)}
.tab{position:absolute;top:-12px;left:12px;background:var(--mint);color:var(--ink);font:700 10px var(--mono);padding:2px 10px;clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%);letter-spacing:.14em;white-space:nowrap}
.btn-s{background:rgba(12,15,26,.9);border:2px solid var(--dim);color:var(--muted);border-radius:6px;cursor:pointer}
.btn-s:hover{border-color:var(--muted);color:var(--cream)}
.btn-s.mono{font:700 11px var(--mono);padding:6px 10px}
.btn-s.jp{font:12px var(--jp);padding:6px 12px}

/* ---------- 上段：パーティ ---------- */
.top{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;transition:transform .06s}
.top.is-hurt{transform:translate(8px,4px)}
.party{display:flex;gap:10px;flex:1 1 auto;min-width:0}
.pm{position:relative;flex:0 1 196px;min-width:0;background:rgba(12,15,26,.9);border:3px solid var(--cream);border-radius:12px;box-shadow:0 0 0 3px var(--ink);padding:14px 12px 10px;display:flex;flex-direction:column;gap:6px}
.pm .tab{letter-spacing:.1em}
.pm-h{display:flex;justify-content:space-between;align-items:center;gap:8px}
.pm-face{width:34px;height:34px;flex:none;border-radius:50%;object-fit:cover;background:#1b1f38;box-shadow:0 0 0 2px var(--line)}
.pm-face:not([src]){visibility:hidden}
.pm-name{flex:1;min-width:0;font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pm-lv{font:700 11px var(--mono);color:var(--gold);white-space:nowrap}
.pm-stat{display:flex;align-items:center;gap:6px;font:700 10px var(--mono);color:var(--muted)}
.pm-stat>span:first-child{width:28px;flex:none}
.pm-bar{flex:1;height:6px;background:#262a48}
.pm-bar i{display:block;height:100%;transition:width .5s}
.pm-val{color:var(--cream)}
.pm-note{font-size:11px;color:var(--muted);line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hud{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:none;margin-left:auto}
.hud-btns{display:flex;gap:8px;align-items:center}
.hud-exp{display:flex;align-items:baseline;gap:10px}
.hud-exp b{font:700 11px var(--mono);color:var(--gold);letter-spacing:.2em}
.hud-exp span{font:400 clamp(22px,3vw,34px) var(--head);color:var(--gold)}
.hud-stats{font:700 11px var(--mono);color:var(--muted)}

/* ---------- 中段：敵 ---------- */
.stage{position:relative;z-index:1;min-height:0;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(4px,1.4vh,14px)}
.intent{position:relative;background:var(--cream);color:var(--ink);border-radius:10px;padding:10px 18px;display:flex;align-items:center;gap:14px;box-shadow:6px 6px 0 var(--mag)}
.intent-ico{width:48px;height:48px;margin:-12px -4px -12px -8px;object-fit:contain;filter:drop-shadow(0 2px 3px rgba(12,15,26,.35))}
.intent-ico:not([src]){display:none}
.intent-tag{font:700 10px var(--mono);background:var(--mag);color:#fff;padding:3px 7px;border-radius:3px}
.intent-txt{font-size:18px}
.intent-hurt{font:700 12px var(--mono);color:#b3204f;white-space:nowrap}
.intent::after{content:"";position:absolute;left:50%;bottom:-9px;width:16px;height:16px;background:var(--cream);transform:translateX(-50%) rotate(45deg)}
.boss-name{font:700 12px var(--mono);letter-spacing:.22em;color:var(--cream);margin-top:10px;transition:color .8s;text-shadow:0 1px 6px var(--ink)}
/* 魔物の絵は、中段の空いている高さいっぱいに収める */
.boss-area{position:relative;flex:1 1 0;min-height:84px;width:100%;display:flex;align-items:center;justify-content:center}
.boss-float{position:relative;height:100%;display:flex;align-items:center;justify-content:center;animation:floaty 3.2s ease-in-out infinite}
.boss-shake{position:relative;height:100%;display:flex;align-items:center;justify-content:center;transition:transform .06s}
.boss-shake.is-hit{transform:translateX(-18px) skewX(-6deg) scale(.96)}
.boss-shake.is-hit-guard{transform:translateX(-8px) scale(.99)}
.boss-shake.is-hit-big{transform:translateX(-34px) rotate(-5deg) skewX(-10deg) scale(.92)}
.boss-shake.is-hit-big .boss-img,.boss-shake.is-hit-guard .boss-img{animation:hitflash .24s steps(3) 1}
.boss-shake.is-transform .boss-img{animation:transformpop .7s cubic-bezier(.2,1.6,.4,1)}
.boss-shake.is-frozen .boss-img{animation:none;filter:grayscale(1) brightness(1.4) drop-shadow(0 0 30px #fff)}
@keyframes transformpop{0%{transform:scale(1.18);filter:brightness(3)}100%{transform:scale(1);filter:drop-shadow(0 0 26px rgba(255,61,127,.35))}}
.boss-img{display:block;height:100%;max-height:560px;width:auto;max-width:100%;object-fit:contain;transform-origin:50% 35%;filter:drop-shadow(0 0 26px rgba(255,61,127,.35));animation:breathe 3.6s ease-in-out infinite}
.boss-shake.is-hit .boss-img{animation:hitflash .24s steps(3) 1}
.is-cleared .boss-img{filter:drop-shadow(0 0 30px rgba(94,242,194,.4))}
/* 仲間になったら、小さくなって勇者の側へ寄る（仲間にする動画の終わりと合わせる） */
.boss-area{transition:transform .9s cubic-bezier(.3,1.3,.5,1)}
@media (min-width:1000px){ .is-cleared .boss-area{transform:translateX(-14%) scale(.72)} }
.is-cleared .boss-name{color:var(--mint)}
@keyframes breathe{50%{transform:scale(1.012,1.028)}}
@keyframes hitflash{0%{filter:brightness(3) saturate(.2)}50%{filter:brightness(1.6)}100%{filter:drop-shadow(0 0 26px rgba(255,61,127,.35))}}
/* 垂れの雫（時計の下から落ちる） */
.boss-drips{position:absolute;left:32%;right:32%;bottom:4%;height:1px;pointer-events:none}
.boss-drips i{position:absolute;top:0;width:9px;height:13px;margin-left:-4px;border-radius:50% 50% 50% 50%/62% 62% 38% 38%;background:linear-gradient(#ff8fb5,#ff3d7f);box-shadow:0 0 8px rgba(255,61,127,.6);opacity:0;animation:drip 2.6s cubic-bezier(.55,0,1,.45) infinite}
.boss-drips i:nth-child(1){left:8%;animation-delay:.2s}
.boss-drips i:nth-child(2){left:30%;animation-delay:1.3s}
.boss-drips i:nth-child(3){left:52%;animation-delay:.7s}
.boss-drips i:nth-child(4){left:71%;animation-delay:1.9s}
.boss-drips i:nth-child(5){left:90%;animation-delay:1.05s}
.is-cleared .boss-drips i{background:linear-gradient(#fff5e6,#e9dccd);box-shadow:none;animation-duration:5.2s}
@keyframes drip{0%{opacity:0;transform:translateY(-6px) scale(.6)}15%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(90px) scale(.8,1.2)}}
.hp{width:min(520px,70%);display:flex;flex-direction:column;gap:6px}
.hp-h{display:flex;justify-content:space-between;font:700 12px var(--mono)}
.hp-h span:first-child{color:var(--mag)}
.hp-bar{height:14px;background:#1b1f38;border:2px solid var(--cream);padding:2px;border-radius:3px}
.hp-bar i{display:block;height:100%;background:var(--mag);transition:width .7s cubic-bezier(.3,1.5,.5,1)}
.pops{position:absolute;inset:0;pointer-events:none}
.pop{position:absolute;top:34%;font:400 64px var(--head);color:var(--gold);text-shadow:4px 4px 0 var(--ink),0 0 30px rgba(255,209,102,.6);animation:popup 1.3s cubic-bezier(.2,.8,.2,1) forwards;white-space:nowrap}
.pop.is-just{font-size:84px;color:var(--mint);text-shadow:5px 5px 0 var(--ink),0 0 36px rgba(94,242,194,.7)}
.pop.is-miss{font-size:48px;color:var(--muted);text-shadow:3px 3px 0 var(--ink)}

/* タイミング判定 */
.timing{position:absolute;left:50%;bottom:4px;transform:translateX(-50%);width:min(620px,86%);background:rgba(12,15,26,.95);border:3px solid var(--cream);border-radius:12px;box-shadow:0 0 0 3px var(--ink),0 0 40px rgba(255,209,102,.25);padding:18px 22px;display:flex;flex-direction:column;gap:12px;cursor:pointer}
.timing-h{display:flex;justify-content:space-between;gap:10px;font:700 11px var(--mono);color:var(--gold);letter-spacing:.14em}
.timing-h span:last-child{color:var(--muted);white-space:nowrap}
/* 判定バー＝勇者のメジャー（金の刃に目盛り。黄黒のゲートの中で止める） */
.track{position:relative;height:38px;border-radius:3px;overflow:hidden;box-shadow:0 0 0 2px var(--ink),0 0 22px rgba(255,209,102,.35);
  background:repeating-linear-gradient(90deg,rgba(12,15,26,.9) 0 2px,transparent 2px 10%) 0 0/100% 62% no-repeat,
    repeating-linear-gradient(90deg,rgba(12,15,26,.65) 0 1px,transparent 1px 2%) 0 0/100% 34% no-repeat,
    linear-gradient(#ffe7a3,#ffd166 55%,#d9a13a)}
.zone{position:absolute;top:0;bottom:0;background:repeating-linear-gradient(45deg,var(--ink) 0 8px,var(--gold) 8px 16px);box-shadow:inset 0 0 0 2px var(--ink)}
.zone-just{position:absolute;top:0;bottom:0;background:var(--mint);opacity:.92;box-shadow:inset 0 0 0 2px rgba(12,15,26,.6)}
.cur{position:absolute;top:-4px;bottom:-4px;width:4px;margin-left:-2px;background:#fff;box-shadow:0 0 0 2px var(--ink),0 0 12px #fff}
.cur::before{content:"";position:absolute;left:50%;top:-2px;border:7px solid transparent;border-top-color:#fff;transform:translateX(-50%)}
.cur.is-stop{background:var(--mag);box-shadow:0 0 0 2px var(--ink),0 0 14px var(--mag)}
.cur.is-stop::before{border-top-color:var(--mag)}
.timing-hint{font-size:13px;color:var(--muted)}

/* ---------- ミニゲーム（振り分け・照合） ---------- */
.mini{position:absolute;left:50%;bottom:4px;transform:translateX(-50%);width:min(680px,94%);z-index:3;background:rgba(12,15,26,.96);border:3px solid var(--cream);border-radius:12px;box-shadow:0 0 0 3px var(--ink),0 0 40px rgba(94,242,194,.22);padding:14px 18px;display:flex;flex-direction:column;gap:10px}
.mini-time{height:6px;background:#1b1f38;border-radius:3px;overflow:hidden}
.mini-time i{display:block;height:100%;width:100%;background:var(--gold);transition:background .3s}
.mini-time i.is-low{background:var(--mag)}
/* 振り分け：書類を1枚ずつ3つの箱へ */
.sort-desk{position:relative;min-height:112px;display:flex;align-items:center;justify-content:center}
.doc{width:min(250px,70%);background:var(--cream);color:var(--ink);border-radius:6px;padding:10px 14px;box-shadow:5px 5px 0 rgba(0,0,0,.4);animation:docin .22s cubic-bezier(.2,.9,.3,1.3)}
.doc h4{margin:0 0 6px;font:700 11px var(--mono);letter-spacing:.2em;color:#5b628f}
.doc dl{display:grid;grid-template-columns:48px 1fr;gap:4px 10px;margin:0;font-size:14px}
.doc dt{color:#5b628f}
.doc dd{margin:0;min-height:1.3em}
.doc dd.blank{border:2px dashed var(--mag);border-radius:3px;background:rgba(255,61,127,.08)}
.doc.is-pdf{display:flex;align-items:center;gap:12px;width:min(340px,86%)}
.doc.is-pdf b{font:400 16px var(--jp);word-break:break-all}
.pdf-ico{flex:none;width:40px;height:50px;border-radius:4px;background:#d64545;color:#fff;font:700 11px var(--mono);display:flex;align-items:flex-end;justify-content:center;padding-bottom:6px;clip-path:polygon(0 0,72% 0,100% 22%,100% 100%,0 100%)}
.doc-prev{position:absolute;left:0;top:0;font:700 11px var(--mono);color:var(--gold);background:rgba(255,209,102,.1);border:1px solid rgba(255,209,102,.4);border-radius:4px;padding:3px 8px}
@keyframes docin{from{transform:translateY(-26px) rotate(-6deg) scale(.9);opacity:0}to{transform:none;opacity:1}}
.mini-dots{display:flex;gap:7px;justify-content:center}
.mini-dots i{width:10px;height:10px;border-radius:50%;background:#262a48}
.mini-dots i.is-now{background:var(--cream)}
.mini-dots i.is-ok{background:var(--mint)}
.mini-dots i.is-ng{background:var(--mag)}
.bins{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.bin{background:rgba(27,31,56,.8);border:2px solid var(--line);border-radius:8px;padding:8px 6px;display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;transition:background .15s,border-color .15s}
.bin:hover{border-color:var(--muted)}
.bin b{font:700 14px var(--mono);color:var(--gold)}
.bin span{font-size:16px;color:var(--cream)}
.bin.is-ok{border-color:var(--mint);background:rgba(94,242,194,.2)}
.bin.is-ng{border-color:var(--mag);background:rgba(255,61,127,.2);animation:ng .25s}
@keyframes ng{25%{translate:-5px 0}75%{translate:5px 0}}
/* 照合：左右の表を見比べて、ちがう行を選ぶ */
.match{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sheet{background:var(--cream);color:var(--ink);border-radius:6px;padding:8px 10px;display:flex;flex-direction:column;gap:2px}
.sheet h4{margin:0 0 4px;font:700 11px var(--jp);color:#5b628f}
.sheet .r{display:grid;grid-template-columns:64px 1fr;align-items:baseline;padding:3px 6px;border-radius:4px;font-size:14px}
.sheet .r span{color:#5b628f;font-size:12px}
.sheet .r b{font:400 15px var(--jp);font-variant-numeric:tabular-nums}
.sheet.is-dst .r{cursor:pointer}
.sheet.is-dst .r:hover{background:rgba(94,242,194,.25)}
.sheet.is-dst .r.is-cur{background:var(--mint);box-shadow:inset 3px 0 0 var(--ink)}
.sheet .r.is-hint{animation:hintglow .8s ease-out}
.sheet .r.is-wrong{background:rgba(255,61,127,.28);box-shadow:inset 3px 0 0 var(--mag)}
@keyframes hintglow{0%,60%{background:#b9a6ff;box-shadow:0 0 14px #b9a6ff}100%{background:transparent}}

/* 空き枠えらび・工程ならべ の共通：お題 */
.ask{font-size:15px;color:var(--cream);text-align:center}
.ask b{color:var(--gold);font-weight:400;font-size:17px}
/* 空き枠えらび（会議室の時間割） */
.rooms{display:grid;grid-template-columns:auto repeat(4,1fr);gap:4px;align-items:stretch}
.rooms>b{font:700 12px var(--mono);color:var(--muted);text-align:center;padding:2px 0;border-radius:4px}
.rooms>b.is-want{color:var(--ink);background:var(--gold)}
.rooms>span{font-size:13px;color:var(--muted);display:flex;align-items:center;padding-right:6px;white-space:nowrap}
.slot{border-radius:5px;padding:7px 4px;text-align:center;font-size:12px;opacity:.55;transition:background .15s}
.slot.is-booked{background:rgba(255,61,127,.22);color:#ffc2d6;border:1px solid rgba(255,61,127,.45)}
.slot.is-free{background:rgba(244,241,232,.08);color:var(--muted);border:1px dashed var(--dim)}
.slot.is-want{opacity:1;cursor:pointer}
.slot.is-want.is-free{background:rgba(244,241,232,.16)}
.slot.is-cur{box-shadow:0 0 0 3px var(--mint);transform:scale(1.04)}
.slot.is-hint{animation:hintglow .8s ease-out}
.slot.is-got{opacity:1;background:var(--mint);color:var(--ink);border-color:var(--mint)}
.slot.is-double{opacity:1;background:var(--mag);color:#fff;border-color:var(--mag);animation:ng .25s}
/* 工程ならべ（1週間の工程） */
.week{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.day{position:relative;background:rgba(244,241,232,.1);border:2px solid var(--line);border-radius:7px;padding:6px 2px 8px;display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;min-height:74px}
.day span{font-size:12px;color:var(--muted)}
.day b{font:400 18px var(--head);color:var(--cream)}
.day em{font-style:normal;font-size:12px;padding:1px 6px;border-radius:3px;background:var(--gold);color:var(--ink)}
.day em.off{background:var(--mag);color:#fff}
.day em.rain{background:#7aa7ff;color:var(--ink)}
.day em.pour{background:var(--mint)}
.day.is-done{cursor:default;opacity:.75}
.day.is-cur{border-color:var(--mint);box-shadow:0 0 0 2px var(--mint);transform:translateY(-3px)}
.day.is-warn::after{content:"×";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:400 44px var(--head);color:rgba(255,61,127,.75);pointer-events:none}
.day.is-answer{border-color:var(--mint);background:rgba(94,242,194,.22)}
.day.is-wrongday{border-color:var(--mag);background:rgba(255,61,127,.25);animation:ng .25s}

/* ---------- 下段：コマンド＋メッセージ ---------- */
.bottom{position:relative;z-index:2;display:grid;grid-template-columns:minmax(220px,300px) minmax(0,1fr);gap:16px;align-items:stretch}
.bottom.is-skills{grid-template-columns:minmax(300px,440px) minmax(0,1fr)}
.cmd{padding:18px 10px 10px;display:flex;flex-direction:column;gap:2px}
.it{display:flex;gap:10px;align-items:center;padding:clamp(2px,.6vh,6px) 10px;border-radius:6px;cursor:pointer;color:var(--cream);font-size:clamp(14px,min(1.5vw,2.6vh),18px)}
.it-mark{width:14px;flex:none}
.it-ico{width:26px;height:26px;margin:-3px 0;flex:none;object-fit:contain;filter:drop-shadow(0 0 4px rgba(255,209,102,.35))}
.it.is-off .it-ico{opacity:.35;filter:grayscale(1)}
.it-label{flex:1}
.it-sub{font-size:12px;color:#8a92bd;white-space:nowrap}
.it.is-off{color:var(--dim)}
.it.is-hl .it-sub{color:var(--gold)}
.it.is-on{background:var(--mint);color:var(--ink)}
.it.is-on .it-sub{color:var(--ink)}
.it.is-on.is-hl .it-sub{color:#b3204f}
.it.is-on.is-off{background:#3a3f66}
.msg{padding:clamp(12px,2vh,20px) clamp(16px,2vw,28px);min-height:clamp(84px,15vh,132px);font-size:clamp(15px,min(1.7vw,2.9vh),21px);line-height:1.75;white-space:pre-wrap}
.msg-next{position:absolute;right:20px;bottom:12px;color:var(--mint);animation:blink 1s steps(1) infinite}

/* ---------- 演出レイヤ ---------- */
.fx{position:absolute;inset:0;z-index:15;pointer-events:none;background:#fff;animation:flash .28s ease-out forwards}
.fx.is-mint{background:radial-gradient(circle at 60% 45%,#fff,var(--mint) 60%);animation-duration:.4s}
.fx.is-dim{background:#aab2d6;animation-duration:.18s;opacity:.35}
.fx.is-hurt{background:var(--mag)}
.slam{position:absolute;left:50%;top:40%;z-index:16;pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:4px;animation:slam 1.4s cubic-bezier(.2,.9,.2,1) forwards}
.slam b{font:400 96px/1 var(--head);text-shadow:6px 6px 0 var(--ink);font-weight:400;white-space:nowrap}
.slam span{font:700 18px var(--mono);background:var(--mag);color:#fff;padding:4px 14px;letter-spacing:.2em;white-space:nowrap}

/* 技が決まる：技の絵が魔物に叩き込まれ、金の輪が広がる／反撃：手下が勇者へ飛びかかる */
.fx-skill{position:absolute;width:190px;height:190px;margin:-95px 0 0 -95px;z-index:17;object-fit:contain;pointer-events:none;filter:drop-shadow(0 0 18px rgba(255,209,102,.7));animation:skillhit .7s cubic-bezier(.2,.9,.2,1) forwards}
.fx-ring{position:absolute;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;border:4px solid var(--gold);z-index:16;pointer-events:none;animation:ring .6s ease-out forwards}
.fx-minion{position:absolute;width:210px;height:210px;margin:-105px 0 0 -105px;z-index:17;object-fit:contain;pointer-events:none;filter:drop-shadow(0 0 16px rgba(255,61,127,.65));animation:minionatk .95s cubic-bezier(.5,0,.6,1) forwards}
@keyframes skillhit{0%{transform:scale(2.3) rotate(-18deg);opacity:0}28%{transform:scale(1) rotate(0);opacity:1}100%{transform:scale(.68);opacity:0}}
@keyframes ring{from{transform:scale(.4);opacity:1}to{transform:scale(7);opacity:0}}
@keyframes minionatk{0%{transform:translate(0,0) scale(.3);opacity:0}25%{transform:translate(0,-12px) scale(1.06);opacity:1}45%{transform:translate(0,-6px) scale(1)}100%{transform:translate(var(--dx,-300px),var(--dy,120px)) scale(.9) rotate(-14deg);opacity:0}}

/* ---------- 攻撃の演出 ---------- */
/* 当たった瞬間に、魔物と勇者の動きだけを止める（ヒットストップ）。閃光・斬撃・文字・飛び散るものは止めない */
.kq.is-hitstop :is(.boss-float,.boss-img,.boss-drips i,.hero-sprite){animation-play-state:paused!important}
.kq.is-hitstop .boss-shake,.kq.is-hitstop .hero-sprite{transition-duration:0s!important}
/* 画面ごと揺らす */
.kq.cam-s{animation:cams .22s linear}
.kq.cam-m{animation:camm .3s linear}
.kq.cam-l{animation:caml .4s linear}
@keyframes cams{25%{translate:3px -2px}50%{translate:-3px 2px}75%{translate:2px 1px}}
@keyframes camm{15%{translate:8px -5px}35%{translate:-7px 4px}55%{translate:5px 3px}75%{translate:-3px -2px}}
@keyframes caml{10%{translate:16px -9px}25%{translate:-14px 8px}40%{translate:11px 6px}55%{translate:-8px -5px}70%{translate:5px 3px}85%{translate:-2px -1px}}
/* 斬撃の線 */
.fx-slash{position:absolute;width:min(1100px,110vw);height:12px;margin:-6px 0 0 calc(min(1100px,110vw) / -2);z-index:17;pointer-events:none;border-radius:50%;
  background:linear-gradient(90deg,transparent,rgba(255,209,102,.2) 12%,#fff 48%,#ffd166 58%,rgba(255,209,102,.2) 88%,transparent);
  box-shadow:0 0 18px #ffd166,0 0 42px rgba(255,209,102,.7);transform:rotate(var(--a)) scaleX(0);animation:slashline .5s cubic-bezier(.1,.9,.2,1) forwards}
.fx-slash.is-mint{background:linear-gradient(90deg,transparent,rgba(94,242,194,.25) 12%,#fff 48%,#5ef2c2 58%,rgba(94,242,194,.25) 88%,transparent);box-shadow:0 0 18px #5ef2c2,0 0 48px rgba(94,242,194,.8)}
.fx-slash.is-claude{background:linear-gradient(90deg,transparent,rgba(185,166,255,.25) 12%,#fff 48%,#b9a6ff 58%,rgba(185,166,255,.25) 88%,transparent);box-shadow:0 0 18px #b9a6ff,0 0 48px rgba(185,166,255,.8)}
.fx-slash.is-graze{height:4px;width:min(560px,70vw);margin-left:calc(min(560px,70vw) / -2);opacity:.7;box-shadow:0 0 10px #ffd166}
.fx-slash.is-huge{height:26px;width:200vw;margin:-13px 0 0 -100vw;box-shadow:0 0 30px #fff,0 0 80px #ffd166;animation-duration:.8s}
@keyframes slashline{0%{transform:rotate(var(--a)) scaleX(0) scaleY(1.6);opacity:1}25%{transform:rotate(var(--a)) scaleX(1) scaleY(1);opacity:1}100%{transform:rotate(var(--a)) scaleX(1.05) scaleY(.15);opacity:0}}
/* 飛び散るもの */
.pt{position:absolute;z-index:17;pointer-events:none;animation:ptfly .9s cubic-bezier(.15,.7,.35,1) forwards}
.pt-spark{width:14px;height:3px;margin:-1px 0 0 -7px;background:linear-gradient(90deg,#fff,#ffd166);border-radius:2px;box-shadow:0 0 8px #ffd166;animation-duration:.55s}
.pt-paper{width:22px;height:28px;margin:-14px 0 0 -11px;background:repeating-linear-gradient(#f4f1e8 0 5px,#b9b5a8 5px 6px);box-shadow:0 0 6px rgba(255,61,127,.6);animation:ptfall 1.05s cubic-bezier(.2,.6,.4,1) forwards}
.pt-shard{width:18px;height:18px;margin:-9px 0 0 -9px;background:linear-gradient(135deg,#ffe7a3,#b98a2e);clip-path:polygon(50% 0,100% 70%,20% 100%);filter:drop-shadow(0 0 4px rgba(255,209,102,.7))}
.pt-goo{width:14px;height:17px;margin:-8px 0 0 -7px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:linear-gradient(#ff8fb5,#ff3d7f);box-shadow:0 0 8px rgba(255,61,127,.7);animation:ptfall 1s cubic-bezier(.3,.3,.6,1) forwards}
@keyframes ptfly{0%{transform:translate(0,0) rotate(0) scale(1.2);opacity:1}100%{transform:translate(var(--dx),var(--dy)) rotate(var(--r)) scale(.6);opacity:0}}
@keyframes ptfall{0%{transform:translate(0,0) rotate(0);opacity:1}35%{transform:translate(calc(var(--dx) * .6),calc(var(--dy) * .7)) rotate(calc(var(--r) * .4));opacity:1}100%{transform:translate(var(--dx),calc(var(--dy) + 220px)) rotate(var(--r));opacity:0}}
/* 弱点：マゼンタの輪／暴走中の「弾かれた」火花の輪 */
.fx-ring.is-weak{border-color:var(--mag);border-width:6px;box-shadow:0 0 24px var(--mag)}
.fx-guard{position:absolute;width:150px;height:150px;margin:-75px 0 0 -75px;z-index:16;pointer-events:none;border-radius:50%;border:3px dashed rgba(255,209,102,.9);animation:guard .5s ease-out forwards}
@keyframes guard{from{transform:scale(.6) rotate(0);opacity:1}to{transform:scale(1.5) rotate(40deg);opacity:0}}
/* 段階が変わったときの横断幕 */
.fx-banner{position:absolute;left:0;right:0;top:32%;z-index:18;pointer-events:none;display:flex;align-items:center;justify-content:center;gap:16px;padding:14px 20px;
  background:linear-gradient(90deg,transparent,rgba(12,15,26,.94) 12%,rgba(12,15,26,.94) 88%,transparent);border-top:2px solid var(--mag);border-bottom:2px solid var(--mag);animation:banner 1.9s cubic-bezier(.2,.9,.2,1) forwards}
.fx-banner span{font:700 13px var(--mono);letter-spacing:.24em;color:var(--ink);background:var(--mag);padding:3px 10px;white-space:nowrap}
.fx-banner b{font:400 clamp(16px,2.4vw,26px) var(--jp);color:var(--cream);font-weight:400}
@keyframes banner{0%{transform:translateX(-40%) scaleY(.2);opacity:0}14%{transform:none;opacity:1}82%{transform:none;opacity:1}100%{transform:translateX(30%);opacity:0}}
/* 決め技：暗転と、黄黒の判定ゲートの帯 */
.fx-dim{position:absolute;inset:0;z-index:14;pointer-events:none;background:radial-gradient(circle at 60% 45%,rgba(12,15,26,.35),rgba(12,15,26,.88) 70%);animation:dim 2.3s ease forwards}
@keyframes dim{0%{opacity:0}15%{opacity:1}80%{opacity:1}100%{opacity:0}}
.fx-band{position:absolute;left:-10%;right:-10%;top:44%;height:clamp(40px,7vh,70px);z-index:18;pointer-events:none;transform-origin:0 50%;
  background:repeating-linear-gradient(45deg,var(--ink) 0 26px,var(--gold) 26px 52px);box-shadow:0 0 0 3px var(--ink),0 0 60px rgba(255,209,102,.6);
  display:flex;align-items:center;justify-content:center;animation:band 2s cubic-bezier(.1,.9,.2,1) forwards}
.fx-band span{background:var(--ink);color:var(--gold);padding:6px 22px;font:700 clamp(14px,2vw,24px) var(--mono);letter-spacing:.3em;white-space:nowrap}
@keyframes band{0%{transform:rotate(-12deg) scaleX(0)}12%{transform:rotate(-12deg) scaleX(1)}80%{transform:rotate(-12deg) scaleX(1);opacity:1}100%{transform:rotate(-12deg) scaleX(1);opacity:0}}
/* Claude 連携：星の精が仲間の枠から飛んできて、魔物の前でくるりと回る */
.fx-claude{position:absolute;width:120px;height:120px;margin:-60px 0 0 -60px;z-index:17;object-fit:contain;pointer-events:none;filter:drop-shadow(0 0 18px #b9a6ff);animation:claudefly 1.35s cubic-bezier(.3,.8,.3,1) forwards}
@keyframes claudefly{0%{transform:translate(0,0) scale(.3) rotate(0);opacity:0}15%{opacity:1}55%{transform:translate(var(--dx),var(--dy)) scale(1.1) rotate(300deg);opacity:1}75%{transform:translate(var(--dx),var(--dy)) scale(1) rotate(360deg)}100%{transform:translate(var(--dx),calc(var(--dy) - 60px)) scale(.6) rotate(400deg);opacity:0}}
/* Claude のゲージが満タン：仲間の枠が紫に光る */
.pm.is-ready{border-color:#b9a6ff;box-shadow:0 0 0 3px var(--ink),0 0 22px rgba(185,166,255,.7);animation:readyglow 1.2s ease-in-out infinite}
@keyframes readyglow{50%{box-shadow:0 0 0 3px var(--ink),0 0 34px rgba(185,166,255,.95)}}
.pm.is-ready .pm-val{color:#b9a6ff}

/* 手下：暴走中は速く */
.fx-minion.is-fast{animation-duration:.7s}

/* 短い動画（戦闘開始・仲間にする） */
.cut{position:absolute;inset:0;z-index:40;background:var(--ink);opacity:0;transition:opacity .25s;cursor:pointer}
.cut.is-on{opacity:1}
.cut video{width:100%;height:100%;object-fit:cover;display:block}
.cut-skip{position:absolute;right:16px;bottom:16px;font:700 11px var(--mono);letter-spacing:.1em;color:var(--muted);background:rgba(12,15,26,.8);border:2px solid var(--dim);border-radius:6px;padding:6px 10px}

/* ---------- タイトル ---------- */
.title{position:absolute;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(12px,3vh,28px);padding:24px;text-align:center;
  /* オープニングの最後のコマをそのまま背景に（動画が終わってメニューに替わっても場面が続く） */
  background:radial-gradient(ellipse at 50% 42%,rgba(12,15,26,.46),rgba(12,15,26,.82) 72%),url(/quest/opening-poster.jpg) 42% 40%/cover no-repeat,var(--ink)}
.title-eyebrow{font:700 12px var(--mono);color:var(--mint);letter-spacing:.4em}
.title-logo{font:400 clamp(40px,min(7vw,12vh),104px)/1 var(--head);white-space:nowrap;text-align:center;text-shadow:5px 0 var(--mag),-5px 0 var(--mint);animation:titlein 1.2s cubic-bezier(.2,.8,.2,1) both}
.title-sub{font-size:20px;color:var(--gold)}
.title-menu{margin-top:4px;width:320px;max-width:100%;padding:12px 10px;display:flex;flex-direction:column;gap:2px}
.title-menu .it{padding:8px 12px;font-size:19px}
.title-keys{font:500 11px var(--mono);color:var(--dim);animation:blink 1.4s steps(1) infinite}
.title-note{font-size:12px;color:var(--dim)}
.title-tools{position:absolute;right:16px;top:16px;display:flex;gap:8px;align-items:center}
/* 表示の切り替え（まじめ ／ RPG） */
.mode-sw{display:inline-flex;border:2px solid var(--dim);border-radius:999px;padding:2px;gap:2px;background:rgba(12,15,26,.9)}
.mode-sw a{padding:3px 12px;border-radius:999px;font:700 11px var(--mono);letter-spacing:.06em;color:var(--muted)}
.mode-sw a:hover{color:var(--cream)}
.mode-sw a[aria-current]{background:var(--mint);color:var(--ink)}
.mode-back{text-decoration:none}

/* ---------- 結果 ---------- */
.result{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(12,15,26,.9)}
.result-card{position:relative;width:min(620px,90%);max-height:calc(100% - 32px);overflow:auto;background:rgba(12,15,26,.97);border:3px solid var(--cream);border-radius:14px;box-shadow:0 0 0 3px var(--ink),0 0 60px rgba(94,242,194,.25);padding:clamp(18px,3.4vh,32px) 36px;display:flex;flex-direction:column;gap:clamp(6px,1.4vh,14px)}
.result-h{font:400 clamp(26px,5vh,36px) var(--head);color:var(--mint);text-align:center;letter-spacing:.08em}
.rows{display:flex;flex-direction:column;border-top:2px dashed var(--line)}
.row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:clamp(4px,1vh,10px) 0;border-bottom:2px dashed var(--line)}
.row span{font-size:clamp(14px,2.4vh,17px);color:var(--muted)}
.row b{font:400 clamp(18px,3.6vh,26px) var(--head);white-space:nowrap}
.rank{position:absolute;right:10px;top:8px;width:104px;height:104px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#ff5a4a;background:url(/quest/img/stamp.webp) center/contain no-repeat;transform:rotate(-12deg);animation:stamp .34s cubic-bezier(.3,1.6,.5,1) both;filter:drop-shadow(0 0 10px rgba(255,90,74,.35))}
.rank span{font:700 10px var(--mono);letter-spacing:.18em;margin-top:6px}
.rank b{font:400 50px/1 var(--head)}
@keyframes stamp{from{transform:rotate(-12deg) scale(1.8);opacity:0}to{transform:rotate(-12deg) scale(1);opacity:1}}
.result-menu{display:flex;flex-direction:column;gap:2px;margin-top:6px}
.result-menu .it{padding:8px 12px;font-size:18px}

/* ---------- パネル（ずかん・デモ・なかま） ---------- */
.panel{position:absolute;right:16px;top:16px;bottom:16px;width:min(460px,calc(100% - 32px));z-index:30;overflow:auto;background:rgba(12,15,26,.98);border:3px solid var(--mint);border-radius:14px;box-shadow:0 0 0 3px var(--ink),0 0 50px rgba(94,242,194,.25);padding:24px;display:flex;flex-direction:column;gap:16px;user-select:text;-webkit-user-select:text}
.panel-h{display:flex;justify-content:space-between;align-items:center;gap:12px}
.panel-h h2{margin:0;font:400 22px var(--head);color:var(--mint)}
.panel-x{background:none;border:2px solid var(--dim);color:var(--muted);font:700 11px var(--mono);padding:4px 8px;border-radius:4px;cursor:pointer;flex:none}
.panel-x:hover{color:var(--cream);border-color:var(--muted)}
.book{display:flex;flex-direction:column;gap:12px}
.book-lead{font-size:13px;color:var(--muted);line-height:1.7;margin:0}
.bk{position:relative;border:2px solid var(--line);border-radius:10px;padding:14px;display:flex;gap:12px;align-items:flex-start}
.bk-mon{width:76px;height:76px;flex:none;object-fit:contain;filter:drop-shadow(0 0 8px rgba(255,61,127,.35));transition:filter .4s}
.bk.is-done .bk-mon{filter:grayscale(.85) brightness(.8)}
.bk-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.bk.is-done{background:rgba(94,242,194,.06)}
.bk-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.bk-h span{font-size:17px;color:var(--mag)}
.bk-h b{font:700 13px var(--mono);color:var(--gold);white-space:nowrap}
.bk-desc{font-size:13px;color:#dfe3ff;line-height:1.6}
.bk-weak{font-size:13px;color:var(--mint);display:flex;align-items:center;gap:6px}
.bk-weak img{width:24px;height:24px;object-fit:contain}
.bk-proof{font-size:12px;color:var(--muted)}
.bk-stamp{position:absolute;right:10px;bottom:10px;font:700 10px var(--mono);color:var(--mint);border:1.5px solid var(--mint);padding:2px 6px;border-radius:3px;transform:rotate(-8deg);opacity:0}
.bk.is-done .bk-stamp{opacity:1}
.rules-h{font:700 11px var(--mono);color:var(--gold);letter-spacing:.15em;margin-top:6px}
.rule{display:flex;flex-direction:column;gap:3px;border-left:3px solid var(--mag);padding-left:12px}
.rule b{font-size:15px;font-weight:400}
.rule span{font-size:12px;color:var(--muted);line-height:1.7}
.book-foot{font-size:11px;color:var(--dim);line-height:1.7}
.book-out{font-size:13px}
.demo{display:flex;flex-direction:column;gap:14px;font-size:16px;line-height:1.8}
.demo img{width:100%;border-radius:8px;border:2px solid var(--line);display:block}
.demo p{margin:0}
.demo .sub{color:var(--muted);font-size:14px}
.cta{background:var(--mint);color:var(--ink);padding:14px 18px;border-radius:8px;font:400 18px var(--head);text-align:center}
.cta:hover{background:var(--gold);color:var(--ink)}
.demo .gas{font-size:14px}
.join{display:flex;flex-direction:column;gap:12px}
.join p{margin:0;font-size:16px;line-height:1.8}
.term{display:grid;grid-template-columns:84px 1fr;gap:10px;font-size:14px;border-bottom:2px dashed var(--line);padding-bottom:8px}
.term span{color:var(--muted)}
.cta-gold{background:var(--gold);color:var(--ink);padding:12px 16px;border-radius:8px;font:400 16px var(--head)}
.cta-gold:hover{background:var(--mint);color:var(--ink)}
.cta-line{border:2px solid var(--gold);color:var(--gold);padding:10px 16px;border-radius:8px;font-size:16px}

[hidden]{display:none!important}

/* ---------- 背の低い画面（高さ520pxまで崩さない） ---------- */
@media (max-height:700px){
  .kq{gap:10px}
  .pm{padding:10px 10px 8px;gap:4px}
  .pm-note{display:none}
  .hud{gap:3px}
  .hud-exp span{font-size:22px}
  .stage{gap:4px}
  .intent{padding:6px 14px}
  .intent-txt{font-size:15px}
  .boss-name{margin-top:4px}
  .it{padding:1px 10px}
  .cmd{padding:16px 10px 8px}
  .msg{min-height:72px}
  .timing{padding:12px 18px;gap:8px}
  .pm-face{width:28px;height:28px}
}
@media (max-height:700px) and (min-width:761px){
  .bottom.is-skills{grid-template-columns:minmax(560px,720px) minmax(0,1fr)}
  .bottom.is-skills #cmd-items{display:grid;grid-template-columns:1fr 1fr;column-gap:6px}
  .bottom.is-skills .it-sub{font-size:10px}
}

/* 広い画面では魔物を右へ寄せ、左手前の勇者と向き合わせる */
@media (min-width:1000px){
  .kq{--boss-x:60%}
  .stage{padding-left:clamp(0px,20vw,420px)}
}
@media (max-width:999px){ .hero-sprite{display:none} }

/* ---------- 幅の狭い画面 ---------- */
@media (max-width:760px){
  .kq{gap:10px;padding:10px 12px 12px;min-height:640px}
  .bottom,.bottom.is-skills{grid-template-columns:minmax(0,1fr);gap:12px}
  .bottom .msg{order:-1;min-height:clamp(64px,10vh,110px);padding:10px 14px;font-size:14px}
  .cmd{padding:16px 8px 8px}
  .it{padding:3px 10px;font-size:14px}
  .top{gap:10px}
  .pm{padding:12px 8px 8px;gap:4px}
  .pm-name{font-size:14px}
  .pm-face{width:24px;height:24px}
  .pm-h{gap:5px}
  .pm-lv{display:none}
  .pm-note{display:none}
  .hud{flex:1 1 100%;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:4px 10px;margin-left:0}
  .hud-btns{grid-row:span 2}
  .hud-exp{justify-self:end}
  .hud-exp span{font-size:20px}
  .hud-stats{justify-self:end;font-size:10px}
  .btn-s.jp{font-size:11px;padding:5px 8px}
  .stage{gap:4px}
  .boss-name{margin-top:6px;font-size:11px}
  .hp{width:88%}
  .intent{padding:6px 12px;gap:8px;flex-wrap:wrap;justify-content:center}
  .intent-txt{font-size:14px}
  .timing{padding:12px 14px;gap:8px;width:94%}
  .mini{padding:10px 10px;gap:8px}
  .sort-desk{min-height:100px;padding-top:28px}
  .doc dl{font-size:13px}
  .bin span{font-size:13px}
  .match{gap:6px}
  .sheet{padding:6px}
  .sheet .r{grid-template-columns:56px 1fr;padding:2px 4px}
  .sheet .r span{font-size:11px}
  .rooms>span{font-size:11px;padding-right:3px}
  .slot{padding:6px 2px;font-size:10px}
  .rooms>b{font-size:10px}
  .week{gap:3px}
  .day{min-height:64px;padding:4px 1px 6px}
  .day b{font-size:15px}
  .day em{font-size:10px;padding:1px 3px}
  .ask{font-size:13px}
  .sheet .r b{font-size:13px}
  .timing-h{font-size:10px;letter-spacing:.06em}
  .pop{font-size:44px}
  .slam b{font-size:64px}
  .title-logo{font-size:clamp(24px,7vw,104px)}
  .title-sub{font-size:16px}
  .result-card{padding:20px 18px}
  .rank{width:64px;height:64px;right:8px;top:8px}
  .rank b{font-size:34px}
  .panel{right:8px;top:8px;bottom:8px;width:calc(100% - 16px);padding:18px}
}

/* 動きを減らす設定：装飾のループを止める（判定カーソルは操作なので残す） */
@media (prefers-reduced-motion:reduce){
  .boss-float,.boss-img,.boss-drips i,.hero-sprite,.title-keys{animation:none}
  .fx-slash,.fx-band,.fx-banner{animation-duration:.01s}
  .title-logo{animation-duration:.01s}
  .fx{animation-duration:.12s;opacity:.3}
}