/* ================= ミニ戦記 スタイル ================= */
:root{
  --bg:#141a28; --panel:#232c40; --panel2:#2c3750; --ink:#eef1f7; --muted:#9aa4b8; --line:#3a4560;
  --blue:rgba(59,125,221,.48); --red:rgba(214,64,64,.42); --green:rgba(60,190,115,.48); --dz:rgba(200,40,60,.22);
  --player:#3b6ed1; --enemy:#c0443a; --gold:#e0b44c;
  --pix:"DotGothic16","Zen Kaku Gothic New",monospace;
  --serif:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
}
*{box-sizing:border-box}
html{height:100%}
body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);
  font-family:"Zen Kaku Gothic New","Hiragino Sans","Noto Sans JP",system-ui,sans-serif;
  -webkit-tap-highlight-color:transparent;overscroll-behavior:none;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
.screen{display:none;min-height:100dvh}
.screen.on{display:block}
.wrap{max-width:520px;margin:0 auto;padding:8px 12px 16px}
button{flex:1;font:inherit;font-weight:700;font-size:15px;padding:9px 8px;border-radius:8px;
  border:2px solid var(--line);background:var(--panel2);color:var(--ink);cursor:pointer}
button:disabled{opacity:.4;cursor:default}
button.primary{background:var(--player);border-color:#5d8ff0;color:#fff}
button.primary.gold{background:var(--gold);border-color:#f3d07a;color:#2a1c0f}
button.ghost{background:transparent}
button.mini{flex:none;font-size:12px;padding:6px 9px;border-width:1.5px}
button.mini.on{background:rgba(200,40,60,.35);border-color:#e0606e}
button.wide{display:block;width:100%;margin-top:8px}
button:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.muted{color:var(--muted)} .small{font-size:12px}

/* ---------- タイトル ---------- */
#scr-title{position:relative;overflow:hidden}
.title-bg{position:absolute;inset:0;background-size:cover;background-position:center bottom;background-color:#1e2a48}
.title-bg.img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,12,24,.15) 0%,rgba(8,12,24,.05) 35%,rgba(8,12,24,.55) 60%,rgba(8,12,24,.85) 100%)}
.title-bg:not(.img){background:
  radial-gradient(ellipse at 50% 120%,rgba(224,180,76,.35),transparent 60%),
  linear-gradient(180deg,#0d1220 0%,#1e2a48 55%,#3b3046 100%)}
.title-bg:not(.img)::after{content:"";position:absolute;inset:0;background-image:radial-gradient(1px 1px at 20% 30%,#fff,transparent),radial-gradient(1px 1px at 70% 20%,#fff,transparent),radial-gradient(1.5px 1.5px at 40% 12%,#fff,transparent),radial-gradient(1px 1px at 85% 40%,#fff,transparent),radial-gradient(1px 1px at 10% 55%,#fff,transparent);opacity:.7}
.title-inner{position:relative;max-width:520px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:24px 16px}
.logo{text-align:center;padding:14px 22px;border-radius:16px;background:radial-gradient(ellipse at center,rgba(8,12,24,.6),rgba(8,12,24,0) 72%)}
.logo .l1{display:block;font-family:var(--serif);font-weight:800;font-size:56px;letter-spacing:.12em;color:#f6e7bf;
  text-shadow:0 2px 0 #7a5a20,0 0 6px rgba(0,0,0,.8),0 0 18px rgba(224,180,76,.55)}
.logo .l2{display:block;margin-top:6px;font-family:var(--serif);font-size:16px;letter-spacing:.2em;color:#d9c9a2}
.cast{display:flex;justify-content:center;gap:0;width:100%}
.cast .cm{position:relative;width:16%;aspect-ratio:120/104}
.cast .cm .spr{position:absolute;inset:0}
.tmenu{display:flex;flex-direction:column;gap:10px;width:min(300px,86%)}
.tmenu button{padding:12px}
.ver{font-size:11px;color:#8a93a8}

/* ---------- 会話 ---------- */
.talk{position:fixed;inset:0;z-index:200;display:none;user-select:none;-webkit-user-select:none}
.talk.show{display:block}
.tbg{position:absolute;inset:0;transition:background .5s}
.tbg[data-bg="field"]{background:linear-gradient(180deg,#6f9fd8 0%,#b8d8f0 45%,#88ad62 46%,#5d8243 100%)}
.tbg[data-bg="village"]{background:linear-gradient(180deg,#d7a46a 0%,#f0d0a0 40%,#8a9a58 41%,#5f6e3a 100%)}
.tbg[data-bg="castle"]{background:linear-gradient(180deg,#2c2a36 0%,#4a4656 50%,#6b6574 51%,#3b3742 100%)}
.tbg[data-bg="sky"]{background:linear-gradient(180deg,#f19a5a 0%,#f7c98a 40%,#9ab0d8 100%)}
.tbg[data-bg="dusk"]{background:linear-gradient(180deg,#3a2d5a 0%,#c0606a 50%,#f0a060 75%,#4a3a3a 76%,#2a2020 100%)}
.tbg[data-bg="night"]{background:linear-gradient(180deg,#0b1024 0%,#1d2850 60%,#1a2a22 61%,#0e1812 100%)}
.tbg[data-bg="none"]{background:rgba(10,14,24,.55)}
.tbg.img{background-size:cover;background-position:center}
.tbg.img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.45) 100%)}
.tbg[data-bg^="map"]{background-color:#222;background-size:cover;background-position:center;filter:blur(3px) brightness(.55) saturate(.85);transform:scale(1.06)}
.por{position:absolute;bottom:156px;width:min(38vw,180px);aspect-ratio:242/380;opacity:0;transition:opacity .25s,filter .25s,transform .25s;
  border:3px solid #c9a24a;border-radius:12px;overflow:hidden;background:linear-gradient(#3a4a78,#1c2749);
  box-shadow:0 0 0 2px #2a1c0f,0 8px 20px rgba(0,0,0,.5)}
/* ポートレートは切り出した画像全体をそのまま収める（拡大・切り抜きしない） */
.por img{display:block;width:100%;height:100%;object-fit:contain}
.por.L{left:max(2vw,calc(50% - 250px))} .por.R{right:max(2vw,calc(50% - 250px))}
.por.R img{transform:scaleX(-1)}
.por::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 2px rgba(255,240,200,.35);border-radius:9px;pointer-events:none}
.por.on{opacity:1}.por.dim{filter:brightness(.55)}
.por.empty{opacity:0}
.por.on:not(.dim){transform:translateY(-4px)}
.tbox{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);width:min(96vw,520px);min-height:124px;
  background:linear-gradient(#fbf4e2,#efe2c0);color:#2a1c0f;border:3px solid #7b5631;border-radius:12px;box-shadow:inset 0 0 0 2px #fff6dd,0 6px 18px rgba(0,0,0,.4);padding:22px 16px 14px}
.tname{position:absolute;top:-16px;left:14px;background:linear-gradient(#304272,#1c2749);color:#fff;font-weight:700;font-size:14px;padding:3px 14px;border-radius:8px;border:2px solid #d2aa5c}
.tbox.right .tname{left:auto;right:14px}
.ttext{font-size:16px;line-height:1.7;font-weight:700;white-space:pre-wrap;min-height:3.4em}
.tbox.narr{background:rgba(16,20,34,.88);color:#eef1f7;border-color:#4a5578;box-shadow:none;text-align:center}
.tbox.narr .ttext{font-weight:500}
.tnext{position:absolute;right:14px;bottom:6px;font-size:12px;color:#7b5631;opacity:0;animation:blink 1s infinite}
.talk.ready .tnext{opacity:1}.tbox.narr .tnext{color:#9aa4b8}
@keyframes blink{50%{opacity:.2}}
.tskip{position:absolute;top:calc(10px + env(safe-area-inset-top,0px));right:10px;flex:none;font-size:12px;padding:6px 10px;background:rgba(0,0,0,.35);color:#fff;border-color:rgba(255,255,255,.3)}
.ttitle{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;font-family:var(--serif);font-weight:800;
  font-size:22px;line-height:1.6;letter-spacing:.2em;color:#f6e7bf;background:rgba(8,10,18,.82);opacity:0;pointer-events:none;transition:opacity .4s}
.ttitle.show{opacity:1}
.ttitle::first-line{font-size:16px;color:#d9c9a2}

/* ---------- 出撃準備 ---------- */
.prep-head{text-align:center;padding:10px 0 6px}
.pt1{font-family:var(--serif);color:#d9c9a2;letter-spacing:.2em}
.pt2{font-family:var(--serif);font-weight:800;font-size:30px;letter-spacing:.12em;color:#f6e7bf;margin-bottom:8px}
.goalbox{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:8px 12px;text-align:left;font-size:13.5px;line-height:1.7}
.goalbox b{color:var(--gold)}
.pcount{margin:10px 0 4px;font-size:14px}
.prep-list{display:flex;flex-direction:column;gap:6px}
.pu{display:flex;align-items:center;gap:10px;background:var(--panel);border:2px solid var(--line);border-radius:10px;padding:6px 10px;cursor:pointer;opacity:.6}
.pu.on{opacity:1;border-color:#5d8ff0;background:linear-gradient(90deg,rgba(59,110,209,.25),var(--panel))}
.pu.forced{border-color:var(--gold)}
.pn{display:flex;flex-direction:column;flex:1;min-width:0;line-height:1.35}
.pchk{font-size:12px;font-weight:700;width:3em;text-align:center;color:var(--muted)}
.pu.on .pchk{color:#9fc0ff}.pu.forced .pchk{color:var(--gold)}
.prep-btns{display:flex;gap:8px;margin-top:12px}

/* ---------- 戦闘画面 ---------- */
header{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px;min-height:30px}
header .hl{min-width:0}
#chname{font-family:var(--serif);font-size:12px;color:#d9c9a2;letter-spacing:.1em}
#status{font-size:13px;font-weight:700;color:var(--muted);display:flex;gap:10px;align-items:baseline;white-space:nowrap;overflow:hidden}
#status b{color:var(--ink);font-family:var(--pix);font-size:16px}
#status .gl2{color:var(--gold);font-size:12px;overflow:hidden;text-overflow:ellipsis}
.hr{display:flex;align-items:center;gap:6px}
.board{--W:12;--H:14;position:relative;width:min(100%,max(250px,calc((100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 300px) * var(--W) / var(--H))));
  margin:0 auto;aspect-ratio:var(--W)/var(--H);border-radius:10px;overflow:hidden;
  border:4px solid #2c3a55;box-shadow:0 0 0 1px #0f1522,0 4px 14px rgba(0,0,0,.45);user-select:none;-webkit-user-select:none;touch-action:manipulation}
.tiles{position:absolute;inset:0;display:grid;grid-template-columns:repeat(var(--W),1fr);grid-template-rows:repeat(var(--H),1fr);
  background:#2a3a20 center/100% 100% no-repeat}
.tile{position:relative;cursor:pointer;box-shadow:inset 0 0 0 .5px rgba(40,50,20,.18)}
.tile::after{content:"";position:absolute;inset:0;pointer-events:none}
.tile.dz::after{background:var(--dz)}
.tile.mv::after{background:var(--blue)}
.tile.at::after{background:var(--red)}
.tile.tg::after{background:var(--red);box-shadow:inset 0 0 0 2px rgba(255,255,255,.7)}
.tile.focus::after{background:var(--red);box-shadow:inset 0 0 0 3px var(--gold)}
.tile.he::after{background:var(--green)}
.tile.htg::after{background:var(--green);box-shadow:inset 0 0 0 2px rgba(255,255,255,.75)}
.tile.hfocus::after{background:var(--green);box-shadow:inset 0 0 0 3px var(--gold)}
.tile.goal::before{content:"";position:absolute;inset:6%;border:2px dashed var(--gold);border-radius:4px;animation:blink 1.4s infinite;pointer-events:none}

/* ユニット */
@keyframes idle3{0%,33.2%{background-position:0 0}33.3%,66.5%{background-position:50% 0}66.6%,100%{background-position:100% 0}}
.spr.hd{background-image:var(--idle);background-size:300% 100%;background-position:0 0;background-repeat:no-repeat;animation:idle3 1.5s linear infinite}
.spr.hd .atk,.spr.hd .dmg{display:none;position:absolute;top:0;height:100%;background-repeat:no-repeat;background-size:100% 100%;pointer-events:none}
.spr.hd .dmg{left:0;width:100%}
.spr.hd.atking,.spr.hd.hurt{background-image:none;animation:none}
.spr.hd.atking .atk,.spr.hd.hurt .dmg{display:block}
.unit{position:absolute;width:calc(100%/var(--W));height:calc(100%/var(--H));
  transition:left var(--step,.18s) linear,top var(--step,.18s) linear,opacity .35s;pointer-events:none}
.unit::before{content:"";position:absolute;left:12%;right:12%;bottom:3%;height:20%;border-radius:50%;background:var(--tm);opacity:.75}
.unit.P{--tm:#3b7ddd}.unit.E{--tm:#d8483e}
.unit.boss::before{box-shadow:0 0 0 2px var(--gold)}
.unit.sel::before{background:var(--gold);opacity:1}
.unit .spr.hd{position:absolute;width:150%;height:130%;left:-25%;top:-36%}
.unit.done .spr{filter:grayscale(1) brightness(.72);animation-play-state:paused}
.unit.walk .spr.hd{background-image:var(--walk);animation-duration:.42s}
.unit.sel .spr{animation-duration:.8s}
.unit.dead{opacity:0}
.unit .hp{position:absolute;bottom:0;left:16%;right:16%;height:3px;background:rgba(0,0,0,.5);border-radius:2px;overflow:hidden}
.unit .hp i{display:block;height:100%;background:#5ee08a;transition:width .3s}
.unit.E .hp i{background:#ff8a7a}
.unit .mk{position:absolute;top:-30%;right:-6%;font-size:clamp(9px,2.6vw,13px);line-height:1;filter:drop-shadow(0 0 2px #000)}
.pop{position:absolute;width:calc(100%/var(--W));height:calc(100%/var(--H));display:flex;align-items:center;justify-content:center;white-space:nowrap;
  font-family:var(--pix);color:#fff;font-size:clamp(11px,3.4vw,17px);z-index:30;pointer-events:none;
  text-shadow:0 0 3px #000,0 0 3px #000;animation:float .9s forwards}
.pop.crit{color:var(--gold)} .pop.miss{color:#d8e2f2;font-size:clamp(10px,3vw,14px)}
.pop.heal{color:#7dffa8} .pop.exp{color:#9fd3ff;font-size:clamp(9px,2.8vw,13px)}
@keyframes float{from{transform:translateY(0);opacity:1}to{transform:translateY(-70%);opacity:0}}

.banner{position:absolute;left:0;right:0;top:42%;padding:10px 0;text-align:center;font-family:var(--pix);
  font-size:24px;letter-spacing:.2em;color:#fff;background:rgba(59,110,209,.88);opacity:0;
  transform:scaleY(0);transition:opacity .2s,transform .2s;z-index:45;pointer-events:none}
.banner.enemy{background:rgba(192,68,58,.9)}
.banner.title{background:rgba(16,20,34,.88);font-family:var(--serif);font-weight:800;color:#f6e7bf}
.banner.win{background:rgba(224,180,76,.92);color:#2a1c0f;font-size:30px}
.banner.show{opacity:1;transform:scaleY(1)}

/* 戦闘シーン */
.scene{position:absolute;inset:0;z-index:50;display:none;flex-direction:column;background:#10141f;opacity:0;transition:opacity .2s}
.scene.show{display:flex}.scene.vis{opacity:1}
.arena{position:relative;flex:1;overflow:hidden;
  background:linear-gradient(180deg,#4f7fc4 0%,#9cc4e8 52%,var(--gnd,#93b86c) 52%,var(--gnd2,#6f9150) 100%)}
.arena[data-bg="castle"]{background:linear-gradient(180deg,#2e2b38 0%,#4b4757 30%,#5d5868 52%,var(--gnd,#a8a092) 52%,var(--gnd2,#7e776b) 100%)}
.arena::before{content:"";position:absolute;left:0;right:0;top:52%;height:3px;background:rgba(0,0,0,.18)}
.fighter{position:absolute;bottom:13%;width:min(160px,42%);aspect-ratio:120/104}
.fighter.L{left:8%}.fighter.R{right:8%}
.fighter::before{content:"";position:absolute;left:18%;right:18%;bottom:0;height:9%;border-radius:50%;background:rgba(0,0,0,.25)}
.fighter .spr{position:absolute;inset:0}
.fighter.R .spr.hd{transform:scaleX(-1)}
.say{position:absolute;max-width:92%;transform:translate(-50%,-100%);background:#fffdf5;color:#2a1c0f;border:2px solid #2a1c0f;border-radius:9px;padding:4px 10px;font-weight:800;font-size:13px;white-space:nowrap;z-index:6;pointer-events:none}
.say::after{content:"";position:absolute;left:50%;bottom:-7px;margin-left:-5px;border:5px solid transparent;border-top-color:#2a1c0f;border-bottom:0}
.slash{position:absolute;width:34%;height:5px;background:#fff;border-radius:3px;box-shadow:0 0 10px #fff,0 0 4px #9fd3ff;pointer-events:none}
.arrow{position:absolute;width:30px;height:3px;margin-left:-15px;background:linear-gradient(90deg,#d9d2c0 0 18%,#7a5a36 18% 82%,#e8eef5 82%);pointer-events:none}
.arrow::after{content:"";position:absolute;right:-5px;top:-3px;border:4.5px solid transparent;border-left:6px solid #e8eef5}
.arrow.knife{width:18px;margin-left:-9px;background:linear-gradient(90deg,#3a2a2a 0 30%,#c8ccd6 30%)}
.arrow.axe{width:16px;height:16px;margin:-8px 0 0 -8px;background:radial-gradient(circle,#c8ccd6 0 40%,#7a5a36 42% 55%,transparent 57%);animation:spin .25s linear infinite}
.arrow.axe::after,.arrow.spear::after{display:none}
.arrow.spear{width:40px;margin-left:-20px;background:linear-gradient(90deg,#7a5a36 0 80%,#e8eef5 80%)}
@keyframes spin{to{rotate:360deg}}
.fireball{position:absolute;width:26px;height:26px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,#fff6c2 0 20%,#ffb340 45%,#e8461f 75%,transparent 76%);box-shadow:0 0 14px #ff7a2a}
.fireball.dark{background:radial-gradient(circle,#fff 0 18%,#c79bff 42%,#5a24b8 74%,transparent 76%);box-shadow:0 0 14px #9a5cff}
.burst{position:absolute;width:90px;height:90px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,240,180,.95) 0 25%,rgba(255,140,40,.8) 50%,rgba(220,60,20,0) 72%)}
.burst.dark{background:radial-gradient(circle,rgba(240,220,255,.95) 0 25%,rgba(150,80,255,.8) 50%,rgba(60,20,140,0) 72%)}
.bpop{position:absolute;transform:translateX(-50%);font-family:var(--pix);font-size:26px;color:#fff;white-space:nowrap;
  text-shadow:0 0 4px #000,0 0 4px #000;pointer-events:none;animation:float2 .9s forwards}
.bpop.crit{color:var(--gold);font-size:30px}.bpop.miss{color:#d8e2f2;font-size:20px}
@keyframes float2{from{margin-top:0;opacity:1}to{margin-top:-36px;opacity:0}}
.flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
.plates{display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:6px}
.plate{border-radius:8px;padding:6px 9px;color:#fff;font-size:11.5px;line-height:1.4}
.plate.E{background:linear-gradient(#b4483f,#782a24)}.plate.P{background:linear-gradient(#3f72d6,#284e9c)}
.plate .nm{font-family:var(--pix);font-size:15px}
.plate .wn{font-size:11px;opacity:.85}
.plate .hpl{display:flex;align-items:center;gap:6px;font-family:var(--pix);font-size:19px}
.plate .hb{flex:1;height:8px;background:rgba(0,0,0,.4);border-radius:4px;overflow:hidden}
.plate .hb i{display:block;height:100%;background:#7dffa8;transition:width .35s}
.plate .st{opacity:.9}

/* 経験値バー（FE風：戦闘のあと中央に出て、バーが伸びる） */
.expwin{position:absolute;left:0;right:0;top:27%;display:none;justify-content:center;z-index:54;pointer-events:none}
.expwin.show{display:flex}
.exbox{display:flex;align-items:center;gap:10px;width:min(78%,300px);padding:9px 14px;border-radius:10px;
  background:linear-gradient(#2c3a62,#18213c);border:3px solid var(--gold);box-shadow:0 0 0 2px #2a1c0f,0 6px 16px rgba(0,0,0,.5);
  animation:expin .18s ease-out}
@keyframes expin{from{transform:scaleY(.2);opacity:0}to{transform:none;opacity:1}}
.exl{font-family:var(--pix);font-size:16px;color:#ffe27a;letter-spacing:.06em}
.exb{flex:1;height:12px;border-radius:6px;background:#0c1222;border:1.5px solid #7d8cb8;overflow:hidden}
.exb i{display:block;height:100%;width:0;background:linear-gradient(#bfe6ff,#4aa6ee 55%,#2a7acc)}
.exn{min-width:2.2em;text-align:right;font-family:var(--pix);font-size:20px;color:#fff}
.exbox.full .exb i{background:linear-gradient(#fff6c8,#ffd54a 55%,#e0a020);box-shadow:0 0 10px #ffd54a}
.exbox.full .exn{color:#ffe27a}
.lvup{position:absolute;inset:0;display:none;align-items:center;justify-content:center;z-index:55;background:rgba(15,20,30,.45)}
.lvup.show{display:flex}
.lvcard{background:var(--panel);color:var(--ink);border:3px solid var(--gold);border-radius:12px;padding:14px 18px;min-width:62%}
.lvhead{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.lvtitle{color:var(--gold);font-family:var(--pix);font-size:19px}
.lvq{font-weight:700;font-size:13px;margin:-2px 0 8px}
.lvstats{display:grid;grid-template-columns:auto auto 1fr;gap:3px 14px;font-weight:700;font-size:15px;margin-bottom:8px}
.lvstats i{font-style:normal;color:#5fe08f}
.overlay{position:absolute;inset:0;display:none;align-items:center;justify-content:center;
  background:rgba(15,20,30,.8);z-index:60;text-align:center;color:#fff}
.overlay.show{display:flex}
.overlay h2{font-family:var(--serif);font-weight:800;font-size:34px;margin:0 0 6px;letter-spacing:.1em}
.overlay p{margin:0 0 16px}
.obtn{display:flex;flex-direction:column;gap:8px}
.overlay button{flex:none;padding:11px 28px;background:var(--gold);border-color:var(--gold);color:#1f2633}
.overlay button.sub{background:transparent;color:#fff;border-color:#fff}

.actions{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0;min-height:42px}
.actions button{flex:1 1 22%;min-width:0;font-size:14px;padding:9px 4px}
.info{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:8px 11px;height:200px;overflow-y:auto;font-size:13px}
.info.card{padding:0;border:none;background:none;overflow:visible}
.log{margin-top:8px;font-size:12.5px;color:var(--muted);line-height:1.6;min-height:4.8em}
.help{line-height:1.55;font-size:12.5px}

/* 顔アイコン */
.pt{position:relative;width:52px;height:52px;flex:none;border-radius:8px;overflow:hidden}
.pt.P{background:linear-gradient(#5d8fe0,#2f5bb0)}.pt.E{background:linear-gradient(#d0645a,#8a2f28)}
.pt .bust{position:absolute;inset:0;background-size:cover;background-position:center top}
.pt.s{width:38px;height:38px;margin-bottom:3px}

/* ステータスカード */
.sc{display:grid;grid-template-columns:84px 1fr;gap:6px;height:100%;padding:6px;border-radius:11px;color:#3d2a17;
  background:linear-gradient(160deg,#f3e6c9,#e6d2a8);border:3px solid #7b5631;box-shadow:inset 0 0 0 2px #f7ecd4}
.sc .pf{position:relative;display:flex;flex-direction:column;border-radius:7px;overflow:hidden;border:2px solid #7b5631}
.sc .pf.P{background:radial-gradient(circle at 50% 55%,#a9c6f4,#4a71bf 62%,#253f78)}
.sc .pf.E{background:radial-gradient(circle at 50% 55%,#efab9f,#a8463c 62%,#5c201b)}
.sc .nm{position:relative;z-index:1;padding:2px 2px 1px;text-align:center;color:#fff;font-family:var(--pix);font-size:14px;
  background:linear-gradient(#304272,#1c2749);border-bottom:2px solid #d2aa5c;white-space:nowrap;overflow:hidden}
.sc .pf.E .nm{background:linear-gradient(#702a24,#451510)}
.sc .fb{position:relative;flex:1;min-height:0}
/* 立ち絵（縦長の会話用ポートレート）を枠いっぱいに。顔が上寄りなので上端合わせ */
.sc .fig{position:absolute;inset:0;background-size:cover;background-position:center 8%}
.sc .tr{position:relative;z-index:1;background:rgba(0,0,0,.45);color:#fff;font-size:9.5px;font-weight:700;text-align:center;padding:1px 0;white-space:nowrap;overflow:hidden}
.sc .r{display:flex;flex-direction:column;gap:3px;min-width:0}
.sc .pl{background:#fbf3e2;border:1.5px solid #c8a873;border-radius:7px;padding:2px 7px}
.sc .num{font-family:var(--pix);color:#2a1c0f}
.sc .top{display:flex;align-items:center;gap:6px;font-weight:700;font-size:12.5px}
.sc .top .cls{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc .top .ep{font-size:10px;color:#9a6a3a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc .top .lv{margin-left:auto;white-space:nowrap}.sc .top .lv .num{font-size:15px}
.sc .hp{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:8px;row-gap:2px;padding:2px 7px}
.sc .hpl{display:flex;align-items:baseline;gap:3px;grid-row:span 2}
.sc .hpl small{font-weight:900;font-size:11px;color:#7b5631}
.sc .hpl .big{font-family:var(--pix);font-size:22px;line-height:1;color:#2a1c0f}
.sc .hpl .mx{font-family:var(--pix);font-size:13px;color:#6b5236}
.sc .gb{height:5px;border-radius:3px;background:#d9c5a0;overflow:hidden}
.sc .gb i{display:block;height:100%;background:#4cbf74}
.sc .gb.x i{background:#5ea8e8}
.sc .gl{display:flex;justify-content:space-between;font-size:9.5px;font-weight:700;color:#7b5631;line-height:1.1}
.sc .row{display:grid;gap:3px}
.sc .row.c4{grid-template-columns:repeat(4,1fr)}.sc .row.c8{grid-template-columns:repeat(8,1fr);gap:2px}
.sc .c{display:flex;flex-direction:column;align-items:center;padding:1px 0 2px;line-height:1.15}
.sc .row.c8 .c{padding:1px 0}
.sc .c span:first-child{font-size:9px;font-weight:700;color:#7b5631;white-space:nowrap}
.sc .c .num{font-size:14px}
.sc .items{display:grid;grid-template-columns:1fr 1fr;gap:0 8px;padding:2px 7px;font-size:11px;font-weight:700}
.sc .ii{display:flex;align-items:center;gap:3px;white-space:nowrap;overflow:hidden}
.sc .ii .us{margin-left:auto;font-family:var(--pix);color:#7b5631}
.sc .ii.eq{color:#1d4fb0}.sc .ii.eq::after{content:"E";font-family:var(--pix);font-size:9px;color:#fff;background:#7b5631;border-radius:3px;padding:0 3px;margin-left:3px;order:-1}
.sc .ii.ng{opacity:.45}

/* 戦闘予測 */
.fcwrap{display:grid;grid-template-columns:1fr auto 1fr;gap:6px;align-items:stretch}
.fc{border-radius:8px;padding:6px 8px;line-height:1.55}
.fc.P{background:rgba(59,125,221,.2)} .fc.E{background:rgba(201,74,74,.2)}
.fc b{display:block}
.fc .fw{font-size:11px;color:var(--gold)}
.vs{align-self:center;font-weight:900;color:var(--muted);text-align:center;font-size:12px}
.adv{color:#5fe08f;font-weight:700} .dis{color:#ff7a6e;font-weight:700}

/* 持ち物・交換 */
.items-menu,.trade{display:flex;flex-direction:column;gap:5px}
.itm{display:flex;align-items:center;gap:6px;width:100%;flex:none;text-align:left;font-size:13.5px;padding:7px 9px}
.itm .in{flex:1;white-space:nowrap}.itm .id{font-size:10.5px;color:var(--muted);white-space:nowrap}
.itm .us{font-family:var(--pix);min-width:2em;text-align:right}
.itm.eq{border-color:#5d8ff0}.itm.eq .in::after{content:" (装備)";font-size:11px;color:#9fc0ff}
.itm.ng{opacity:.5}
.tgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tcol{display:flex;flex-direction:column;gap:4px;min-width:0}
.th{display:flex;align-items:center;gap:6px;font-size:13px}
.tcol .itm{font-size:12px;padding:6px}

/* モーダル */
.modal{position:fixed;inset:0;z-index:300;display:none;align-items:center;justify-content:center;background:rgba(5,8,16,.7);padding:16px}
.modal.show{display:flex}
.mbox{width:min(440px,100%);max-height:90dvh;overflow-y:auto;background:var(--panel);border:2px solid var(--line);border-radius:14px;padding:14px}
.mbox h3{margin:0 0 10px;font-family:var(--serif);font-size:18px;color:#f6e7bf}
.slot{display:flex;align-items:center;gap:10px;width:100%;text-align:left;margin-bottom:6px;font-weight:500}
.slot .sn{font-family:var(--pix);font-size:22px;color:var(--gold);width:1.2em}
.slot .sd{line-height:1.45;font-size:13px}
.set{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:8px 0}
.set button{flex:none;width:7em}
.ulist{display:flex;flex-direction:column;gap:5px}
.ul{display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto;column-gap:8px;align-items:center;background:var(--panel2);border-radius:8px;padding:4px 8px}
.ul .pt{grid-row:span 2}.ul .un{display:flex;flex-direction:column}.ul .uh{font-family:var(--pix)}.ul .uw{grid-column:3;text-align:right;color:var(--muted)}

/* エンディング */
.endbox{text-align:center;padding:40px 8px}
.endbox h2{font-family:var(--serif);font-weight:800;font-size:34px;line-height:1.5;letter-spacing:.2em;color:#f6e7bf}
.endroster{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:16px 0}
.endroster>div{display:flex;flex-direction:column;align-items:center;font-size:13px}
.endbox button{display:block;width:min(280px,90%);margin:8px auto}

@media (prefers-reduced-motion: reduce){.unit,.banner{transition:none}.spr{animation:none}.pop,.bpop{animation:none}}
.ask{margin:4px 0 14px;line-height:1.7;font-weight:700}
.askb{display:flex;gap:8px}.askb button{flex:1}

/* ---------- 音量・サウンドトラック ---------- */
.tsub{display:flex;gap:10px}
.tsub button{padding:10px 6px;font-size:14px}
.set .volc{display:flex;align-items:center;gap:8px}
.set .volc button{width:auto;min-width:2.6em;font-size:16px;padding:4px 0}
.set .volc b{min-width:1.6em;text-align:center;font-family:var(--pix);font-size:18px;color:var(--gold)}
#scr-ost .prep-head .pt1{font-family:var(--serif);font-size:24px;color:#f6e7bf;letter-spacing:.12em}
#scr-ost .prep-head .small{line-height:1.6;margin-top:4px}
.ostwarn{display:flex;align-items:center;justify-content:space-between;gap:8px;background:rgba(192,68,58,.18);border:1px solid #c0443a;border-radius:10px;padding:8px 12px;margin:6px 0;font-size:13.5px}
.ostwarn[hidden]{display:none}
.nowp{background:var(--panel);border:2px solid var(--gold);border-radius:12px;padding:10px 12px;margin:8px 0 4px;position:sticky;top:0;z-index:2}
.nowt{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-height:1.5em}
.nowt b{font-family:var(--serif);font-size:16px;color:#f6e7bf}
.nowt .mode{font-size:11.5px;font-weight:700;padding:2px 8px;border-radius:99px;background:rgba(59,110,209,.3);color:#cfe0ff}
.nowt .mode.storm{background:rgba(192,68,58,.35);color:#ffd6d0}
.nowt .mode[hidden]{display:none}
.nowp .bar{height:6px;border-radius:3px;background:var(--panel2);margin:8px 0 4px;overflow:hidden}
.nowp .bar i{display:block;height:100%;background:var(--gold)}
.nowi{display:flex;justify-content:space-between;font-variant-numeric:tabular-nums}
.nowp #nowStop{margin-top:6px}
.nowp #nowStop[hidden]{display:none}
.osth{margin:14px 0 6px;font-size:14px;color:var(--gold);letter-spacing:.1em}
.ostlist{display:flex;flex-direction:column;gap:6px}
.ostrow{display:flex;align-items:center;gap:10px;background:var(--panel);border:2px solid var(--line);border-radius:10px;padding:7px 10px}
.ostrow.on{border-color:var(--gold);background:linear-gradient(90deg,rgba(224,180,76,.16),var(--panel))}
.ostrow .onum{font-family:var(--pix);font-size:16px;color:var(--gold);width:1.6em;flex:none}
.ostrow .otit{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.4}
.ostrow .otit b{font-size:14.5px}
.ostrow .seg{display:flex;gap:4px;flex:none}
.ostrow button.mini{min-width:3.4em}
.ostrow button.sel{background:var(--player);border-color:#5d8ff0;color:#fff}
.ostrow button.sel[data-m="storm"]{background:var(--enemy);border-color:#e0606e}
.segrid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.sebtn{font-size:12.5px;padding:9px 4px;font-weight:700;line-height:1.3}
.ostvol{margin-top:10px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:2px 12px}
.ostnote{margin-top:10px;text-align:center}
.seall{display:flex;align-items:center;gap:10px;margin:0 0 8px}
.sebtn .small{margin-left:3px;font-weight:400}