/* 画面の見た目。色は :root の変数でまとめて変えられる（前作の生成り・墨の系統を踏襲） */
:root{
  --paper:#e6e0d3; --paper2:#dcd4c3; --ink:#2b2621; --ink2:#5c534a; --line:#b9ae98;
  --bengara:#9c3b2a; --ai:#2f4b6e; --koke:#5d6b3b; --yamabuki:#b58a2a; --hai:#6b6660; --murasaki:#6b4a7e;
  --mizu:#5b8fb0; --midori:#4f8a5a;
  --card:#f3eee3; --shadow:rgba(40,30,20,.18);
  box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --paper:#1f1c19; --paper2:#2a2621; --ink:#e7e0d2; --ink2:#b6ad9c; --line:#4f483f; --card:#2c2723; --shadow:rgba(0,0,0,.5);
}}
:root[data-theme="dark"]{ --paper:#1f1c19; --paper2:#2a2621; --ink:#e7e0d2; --ink2:#b6ad9c; --line:#4f483f; --card:#2c2723; --shadow:rgba(0,0,0,.5); }
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--paper);color:var(--ink);font-family:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif;font-size:15px;line-height:1.6}
button{font:inherit;color:inherit;cursor:pointer}
.wrap{max-width:600px;margin:0 auto;padding:0 12px 110px}
h2{font-size:13px;font-weight:600;color:var(--ink2);margin:14px 0 6px;letter-spacing:.05em;display:flex;justify-content:space-between;align-items:baseline}
h2 small{font-weight:400;font-size:11px}

/* 上部 */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--paper);border-bottom:1px solid var(--line);padding:8px 0 6px}
.top .row{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.day{font-size:20px;font-weight:600}
.day small{font-size:12px;font-weight:400;color:var(--ink2);margin-left:6px}
.gauge{display:flex;align-items:center;gap:8px;font-size:12px;margin-top:4px}
.gauge .nm{width:5.5em;color:var(--ink2)}
.gauge .boxes{display:flex;gap:2px}
.gauge i{display:block;width:14px;height:10px;border:1px solid var(--line);background:var(--paper2)}
.gauge i.s{background:var(--mizu);border-color:var(--mizu)}
.gauge i.e{background:var(--midori);border-color:var(--midori)}
.gauge i.b{background:linear-gradient(90deg,var(--mizu) 50%,var(--midori) 50%)}
.gauge b{margin-left:2px}
.alert{margin-top:6px;padding:6px 10px;border:1px solid var(--bengara);border-radius:3px;font-size:13px;color:var(--bengara);background:var(--card)}
.alert b{font-size:16px}

/* エリア盤面 */
.areas{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:6px}
@media (max-width:420px){.areas{grid-template-columns:repeat(3,1fr)}}
.area{background:var(--card);border:1px solid var(--line);border-radius:4px;padding:6px 7px;text-align:left;min-height:74px;display:flex;flex-direction:column;gap:2px;position:relative}
.area .no{font-size:10px;color:var(--ink2)}
.area .nm{font-weight:600;font-size:14px;line-height:1.2}
.area .lv{font-size:10px;color:var(--ink2)}
.area .bar{height:6px;background:var(--paper2);border:1px solid var(--line);border-radius:2px;overflow:hidden;position:relative;margin-top:auto}
.area .bar i{position:absolute;left:0;top:0;bottom:0;background:var(--mizu)}
.area .bar em{position:absolute;left:0;top:0;bottom:0;border-right:2px solid var(--midori);opacity:.8}
.area.unknown{opacity:.55;border-style:dashed}
.area.cleared-S{border-color:var(--mizu)}
.area.cleared-E{border-color:var(--midori);opacity:.75}
.area.cleared-both{border-color:var(--yamabuki)}
.area.cleared-E .bar i{background:var(--midori)}
.area.cleared-both .bar i{background:linear-gradient(90deg,var(--mizu),var(--midori))}
.area .flag{position:absolute;right:5px;top:5px;font-size:10px;padding:0 4px;border-radius:2px;color:#fff;background:var(--hai)}
.area .flag.s{background:var(--mizu)}
.area .flag.e{background:var(--midori)}
.area .flag.b{background:var(--yamabuki)}
.area .flag.boss{background:var(--bengara)}
.area .flag.lost{background:var(--bengara)}
.area .sq{font-size:10px;color:var(--ai)}

/* 隊 */
.squads{display:flex;flex-direction:column;gap:8px}
.squad{background:var(--card);border:1px solid var(--line);border-radius:4px;padding:8px 10px;text-align:left;width:100%}
.squad.need{border-color:var(--bengara)}
.squad .h{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.squad .h b{font-size:15px}
.squad .h span{font-size:12px;color:var(--ink2)}
.squad .fc{font-size:12px;color:var(--ink2);margin-top:2px}
.squad .fc b{color:var(--ink)}
.squad .fc .hz1{color:var(--koke)} .squad .fc .hz2{color:var(--yamabuki)} .squad .fc .hz3{color:var(--bengara)}
.chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.chip{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--line);border-radius:3px;padding:2px 6px;font-size:12px;background:var(--paper);white-space:nowrap}
.chip .r{display:inline-block;width:1.4em;text-align:center;color:#fff;border-radius:2px;font-size:10px;line-height:1.5}
.chip .r.front{background:var(--bengara)} .chip .r.back{background:var(--ai)} .chip .r.heal{background:var(--koke)} .chip .r.scout{background:var(--murasaki)} .chip .r.aid{background:var(--yamabuki)}
.chip .lv{color:var(--ink2);font-size:11px}
.chip .nk{font-size:10px;color:var(--ink2)}
.chip.low .nk{color:var(--bengara)}
.chip.hurt{opacity:.6;text-decoration:line-through}
.chip.dead{border-color:var(--bengara);color:var(--bengara)}
.chip.split{border-style:dashed;opacity:.7}
.chip.unjoined{border-style:dotted;opacity:.75}
.chip.on{background:var(--ink);color:var(--paper)}
.chip.on .lv,.chip.on .nk{color:var(--paper);opacity:.8}
button.chip{cursor:pointer}
.castle .chips{margin-top:2px}

/* 日報 */
.log{font-size:13px;color:var(--ink2);border-top:1px solid var(--line);padding-top:8px;margin-top:10px}
.log p{margin:0 0 5px}
.log p.hi{color:var(--ink)}
.log p .d{display:inline-block;width:3.6em;color:var(--ink2);font-size:11px}
.log p.say{color:var(--ink)}
.log p.say .mini{width:20px;height:20px;display:inline-block;vertical-align:middle;margin-right:3px}
.log p.say b{font-weight:600;margin-right:2px}
.quote{font-size:15px;line-height:1.7;margin:8px 0 4px;padding:8px 10px;border-left:3px solid var(--line)}
.voices{margin:8px 0 4px;padding:8px 10px;background:var(--card);border:1px solid var(--line);border-radius:4px}
.voices h2{margin:0 0 6px;font-size:14px}
.voice{display:flex;gap:8px;align-items:flex-start;padding:4px 0;border-top:1px dashed var(--line);font-size:13px;cursor:pointer}
.voice:first-of-type{border-top:0}
.voice .mini{width:28px;height:28px;flex:0 0 28px;border-radius:50%;object-fit:cover;object-position:top;border:1px solid var(--line);background:var(--paper2)}
.voice .mini.noimg{display:inline-flex;align-items:flex-end;justify-content:center;overflow:hidden}
.voice .mini .sil{width:70%;height:auto;fill:var(--ink2);opacity:.5}
.voice b{font-weight:600;margin-right:2px}
.voice .vd{display:inline-block;color:var(--ink2);font-size:11px;margin-right:4px}
.voice.hi div{color:var(--bengara)}

/* 下部の帯 */
.bar{position:fixed;left:0;right:0;bottom:0;background:var(--paper);border-top:1px solid var(--line);padding:8px 12px calc(8px + env(safe-area-inset-bottom,0px));z-index:5}
.bar .in{max-width:600px;margin:0 auto;display:flex;align-items:center;gap:8px}
.bar .left{flex:1;font-size:12px;color:var(--ink2);line-height:1.4}
.btn{background:var(--ink);color:var(--paper);border:0;border-radius:3px;padding:10px 14px;font-size:15px}
.btn.sec{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn.warn{background:var(--bengara);color:#fff}
.btn:disabled{opacity:.4;cursor:default}
.btn:focus-visible,.area:focus-visible,.squad:focus-visible,.chip:focus-visible{outline:2px solid var(--bengara);outline-offset:2px}

/* シート */
.ov{position:fixed;inset:0;background:rgba(20,15,10,.55);display:none;z-index:20;align-items:flex-end;justify-content:center}
.ov.on{display:flex}
.sheet{background:var(--paper);width:100%;max-width:600px;border-radius:8px 8px 0 0;padding:16px 16px calc(20px + env(safe-area-inset-bottom,0px));max-height:88%;overflow:auto}
.sheet h3{margin:0 0 4px;font-size:20px}
.sheet .kind{font-size:12px;color:var(--ink2)}
.sheet p{margin:8px 0}
.acts{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.acts .btn{text-align:left}
.acts .btn small{display:block;font-size:12px;opacity:.8}
.pick{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:8px}
.pick .btn{text-align:left;padding:8px 10px;font-size:14px}
.pick .btn.on{background:var(--ai);color:#fff}
.opts{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.opts .btn{padding:6px 10px;font-size:13px}
.opts .btn.on{background:var(--ai);color:#fff;border-color:var(--ai)}
.sheet table{border-collapse:collapse;width:100%;font-size:13px;margin:8px 0}
.sheet td,.sheet th{border-bottom:1px solid var(--line);padding:4px 6px;text-align:left}
.sheet th{color:var(--ink2);font-weight:400;font-size:12px}
.note{font-size:12px;color:var(--ink2)}

/* 開始・冒頭・終了 */
.start{padding:36px 0 0}
.start h1{font-size:28px;line-height:1.25;margin:0 0 4px;font-weight:800}
.start .sub{color:var(--ink2);margin:0 0 20px;font-size:14px}
.first{border:1px solid var(--bengara);border-radius:4px;padding:14px;margin:0 0 20px;background:var(--card)}
.first h2{margin:0 0 6px}
.first p{font-size:13px;color:var(--ink2);margin:0 0 10px}
.howto{margin-top:10px;font-size:13px}
.howto summary{cursor:pointer;color:var(--ai)}
.howto ol{margin:8px 0 0;padding-left:1.4em;color:var(--ink2);line-height:1.7}
.draft{padding:24px 0 0}
.draft h1{font-size:22px;margin:0 0 10px}
.draft .cols{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.draft .col{border:1px solid var(--line);border-radius:4px;padding:8px;background:var(--card);min-height:300px}
.draft .col h4{margin:0 0 6px;font-size:13px;color:var(--ink2);font-weight:600}
.draft .col.e h4{color:var(--midori)} .draft .col.s h4{color:var(--mizu)}
.draft .nm{display:block;font-size:14px;padding:1px 0}
.draft .nm.gone{opacity:.35;text-decoration:line-through}
.draft .nm.new{color:var(--midori);font-weight:600}
.draft .nm.refuse{color:var(--bengara);font-weight:600}
.draft .say{min-height:3.2em;margin:10px 0;font-size:15px}
.end h1{font-size:26px;margin:20px 0 8px}
.end .tag{display:inline-block;padding:2px 8px;border:1px solid var(--line);font-size:12px;margin-right:6px}
.novel{display:block;padding:10px;border:1px solid var(--line);border-radius:4px;background:var(--card);color:var(--ink2);text-decoration:none;font-size:13px;margin-top:12px}
.novel span{text-decoration:underline}
.btn.xshare{background:#111;color:#fff}
a.btn{display:block;text-decoration:none;text-align:center}

/* 立ち絵 */
.chip .mini{width:22px;height:22px;border-radius:50%;object-fit:cover;object-position:top;border:1px solid var(--line);background:var(--paper2);display:inline-block;flex:0 0 22px}
.chip .mini.noimg{display:inline-flex;align-items:flex-end;justify-content:center;overflow:hidden}
.chip .mini .sil{width:70%;height:auto;fill:var(--ink2);opacity:.5}
.chip.on .mini{border-color:var(--paper)}
.phead{display:flex;gap:12px;align-items:flex-start;margin-bottom:6px}
.phead h1{margin-top:4px}
.bigface{flex:0 0 96px;width:96px;aspect-ratio:4/5;object-fit:cover;object-position:top;border:1px solid var(--line);border-radius:3px;background:var(--paper2)}
.bigface.noimg{display:flex;align-items:flex-end;justify-content:center;overflow:hidden;background:linear-gradient(var(--paper2),var(--line))}
.bigface .sil{width:70%;height:auto;fill:var(--ink2);opacity:.45}
.draft .phead .say{flex:1;margin:0}

/* 資質の枠 */
.mini.r-gold,.bigface.r-gold{border:2px solid #b8912f;box-shadow:0 0 0 1px #e9d38a inset}
.mini.r-silver,.bigface.r-silver{border:2px solid #a8a79f;box-shadow:0 0 0 1px #e8e6df inset}
.mini.r-wood,.bigface.r-wood{border:2px solid #8f6a3e}
.draft .nm.rk-gold::before{content:"◆";color:#b8912f;margin-right:3px;font-size:11px}
.draft .nm.rk-silver::before{content:"◇";color:#a8a79f;margin-right:3px;font-size:11px}
.draft .nm.rk-wood::before{content:"・";color:#8f6a3e;margin-right:3px;font-size:11px}

/* ドラフト：呼ぶ側と呼ばれた側 */
.draft .callrow{display:flex;align-items:center;gap:8px;margin:6px 0}
.draft .callrow figure{margin:0;text-align:center}
.draft .callrow figure .bigface{width:84px;height:105px}
.draft .callrow .caller .bigface{width:56px;height:70px;opacity:.85}
.draft .callrow figcaption{font-size:11px;color:var(--ink2)}
.draft .callrow .called figcaption{color:var(--midori);font-weight:600}
.draft .callrow .called.refuse figcaption{color:var(--bengara)}
.draft .callrow .arrow{font-size:20px;color:var(--ink2)}
.draft .callrow .say{flex:1}
.chips.unj .chip{opacity:.8;border-style:dotted}

/* ---------- カード（試作） ---------- */
.card{--tc:var(--hai);position:relative;border:3px solid var(--line);border-radius:8px;background:var(--card);overflow:hidden;box-shadow:0 2px 6px var(--shadow);max-width:360px;margin:0 auto 10px}
.card.r-gold{border-color:#c9a23a;box-shadow:0 0 0 1px #8a6a1c inset,0 2px 8px var(--shadow)}
.card.r-silver{border-color:#a9adb3;box-shadow:0 0 0 1px #6f747a inset,0 2px 6px var(--shadow)}
.card.r-wood{border-color:#8b6a48;box-shadow:0 0 0 1px #5e4630 inset,0 2px 6px var(--shadow)}
.card.t-blade{--tc:#9c3b2a} .card.t-spear{--tc:#a0572a} .card.t-bow{--tc:#5d6b3b} .card.t-black{--tc:#3b2f4e}
.card.t-white{--tc:#7d8f9c} .card.t-holy{--tc:#b58a2a} .card.t-pray{--tc:#a2405e} .card.t-dance{--tc:#c0567a}
.card.t-scout{--tc:#6b4a7e} .card.t-folk{--tc:#6b6660}
.card .band{display:flex;align-items:center;gap:6px;padding:5px 8px;background:var(--tc);color:#fff;font-size:13px}
.card .band .mark{font-size:18px;line-height:1;width:22px;text-align:center}
.card .band .jobname{font-weight:600;letter-spacing:.05em}
.card .band .role{font-size:11px;padding:0 5px;border-radius:2px;background:rgba(255,255,255,.22);color:#fff}
.card .band .lvbig{margin-left:auto;font-size:11px}
.card .band .lvbig b{font-size:20px;margin-left:2px}
.card .pic{position:relative;aspect-ratio:4/5;background:var(--paper2);border-bottom:2px solid var(--tc)}
.card .pic img,.card .pic .noimg{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.card .pic .noimg{display:flex;align-items:center;justify-content:center}
.card .pic .noimg .sil{width:50%;fill:var(--line)}
.card .gtoggle{position:absolute;right:6px;bottom:6px;font:inherit;font-size:12px;padding:3px 8px;border-radius:12px;border:1px solid #fff;background:rgba(0,0,0,.55);color:#fff;cursor:pointer}
.card .nm{padding:6px 10px 2px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.card .nm b{font-size:18px;letter-spacing:.05em}
.card .nm small{color:var(--ink2);font-size:12px}
.card .rows{padding:2px 10px 10px;font-size:13px}
.card .row2{display:flex;align-items:center;flex-wrap:wrap;gap:6px;padding:3px 0;border-top:1px dotted var(--line)}
.card .lab{font-size:11px;color:var(--ink2);min-width:2.5em}
.card .apt{display:inline-flex;align-items:center;gap:3px;font-size:11px;padding:1px 6px;border-radius:3px;border:1px solid var(--line);color:var(--ink2);opacity:.6}
.card .apt.used{opacity:1;color:var(--ink);border-color:var(--ink2)}
.card .apt b{font-size:15px}
.card .apt.a-S b{color:#b8860b} .card .apt.a-A b{color:#9c3b2a} .card .apt.a-B b{color:#2f4b6e} .card .apt.a-C b{color:var(--ink)} .card .apt.a-D b{color:var(--hai)}
.card .pw{margin-left:auto} .card .pw b{font-size:17px;color:var(--tc)}
.card .el{font-size:11px;padding:0 6px;border-radius:9px;color:#fff;background:var(--hai)}
.card .el.e-火{background:#c0452d} .card .el.e-風{background:#4f8a5b} .card .el.e-水{background:#2f6ea0} .card .el.e-光{background:#c6a13a;color:#2b2310} .card .el.e-闇{background:#3d3550}
.card .cbar{display:inline-block;width:56px;height:6px;border-radius:3px;background:var(--paper2);overflow:hidden;vertical-align:middle}
.card .cbar span{display:block;height:100%}
.card .cbar.naka span{background:var(--koke)} .card .cbar.ensen span{background:var(--bengara)}
.card .num{font-size:12px;margin-right:6px}
.card .hist{display:flex;flex-wrap:wrap;gap:4px;padding:5px 0;border-top:1px dotted var(--line)}
.card .hist span{font-size:11px;padding:1px 6px;border:1px solid var(--line);border-radius:3px;color:var(--ink2)}
.card .hist b{margin-left:3px;color:var(--ink)}
.card .none{color:var(--ink2);font-size:12px}
.card .vq{margin-top:4px;padding:6px 8px;background:var(--paper2);border-left:3px solid var(--tc);font-size:13px;line-height:1.6}
.card .vq small{display:block;text-align:right;color:var(--ink2);font-size:11px}
.card .tag{font-size:11px;padding:0 5px;border-radius:2px;background:var(--hai);color:#fff;margin-left:4px}
.card .tag.st{background:var(--bengara)}
.cardgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px;margin:10px 0}
.cardgrid>div{cursor:pointer}
.card.small{border-width:2px;border-radius:6px;margin:0;max-width:none}
.card.small .band{padding:3px 5px;font-size:11px;gap:3px}
.card.small .band .mark{font-size:13px;width:14px}
.card.small .band .jobname{font-size:10px}
.card.small .band .role{display:none}
.card.small .band .lvbig b{font-size:14px}
.card.small .nm{padding:3px 5px 0}
.card.small .nm b{font-size:13px}
.card.small .nm small{display:none}
.card.small .mini-row{padding:0 5px 5px;font-size:11px;color:var(--ink2)}
.card.small .mini-row b{color:var(--tc);font-size:13px}
@media (min-width:640px){
  .card:not(.small){max-width:600px;display:grid;grid-template-columns:240px 1fr;grid-template-areas:"band band" "pic nm" "pic rows"}
  .card:not(.small) .band{grid-area:band} .card:not(.small) .pic{grid-area:pic;border-bottom:0;border-right:2px solid var(--tc)}
  .card:not(.small) .nm{grid-area:nm;padding-top:10px} .card:not(.small) .rows{grid-area:rows}
  .card:not(.small) .pic{align-self:start}
}

/* ---------- 編成：隊の六枠と細長い札（試作） ---------- */
.slots{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin:10px 0 4px}
.slot{position:relative;cursor:pointer;min-width:0}
.slot .card.small .mini-row{display:none}
.slot .sx{position:absolute;right:3px;top:22px;font-size:10px;padding:0 4px;border-radius:2px;background:rgba(0,0,0,.55);color:#fff;opacity:0;transition:opacity .15s}
.slot:hover .sx{opacity:1}
.slot.empty{border:2px dashed var(--line);border-radius:6px;aspect-ratio:4/6.2;display:flex;align-items:center;justify-content:center;color:var(--ink2);font-size:12px;cursor:default}
.slotsum{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:13px;margin-bottom:6px}
.slotsum .rc{display:inline-flex;align-items:center;gap:3px}
.slotsum .rc .r{display:inline-block;width:1.4em;text-align:center;color:#fff;border-radius:2px;font-size:11px}
.slotsum .rc.zero{opacity:.45}
.slotsum .rc.need{opacity:1;color:var(--bengara);font-weight:600}
.slotsum .r.front{background:var(--bengara)} .slotsum .r.back{background:var(--ai)} .slotsum .r.heal{background:var(--koke)} .slotsum .r.scout{background:var(--murasaki)} .slotsum .r.aid{background:var(--yamabuki)}
.slotsum .cnt{margin-left:auto;font-weight:600}
.slotsum .warn{color:var(--bengara);font-size:12px}
.pfilter{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px;margin:4px 0 6px}
.pfilter .opts{margin-top:0}
.pfilter .btn{padding:4px 9px;font-size:12px;min-width:2.4em}
.strips{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:6px}
.strip{--tc:var(--hai);display:flex;align-items:stretch;border:1px solid var(--line);border-left:6px solid var(--tc);border-radius:5px;background:var(--card);min-height:56px;overflow:hidden}
.strip.t-blade{--tc:#9c3b2a} .strip.t-spear{--tc:#a0572a} .strip.t-bow{--tc:#5d6b3b} .strip.t-black{--tc:#3b2f4e}
.strip.t-white{--tc:#7d8f9c} .strip.t-holy{--tc:#b58a2a} .strip.t-pray{--tc:#a2405e} .strip.t-dance{--tc:#c0567a}
.strip.t-scout{--tc:#6b4a7e} .strip.t-folk{--tc:#6b6660}
.strip.on{border-color:var(--tc);box-shadow:0 0 0 2px var(--tc) inset;background:var(--paper2)}
.strip.dim{opacity:.7}
.strip .sbody{flex:1;display:flex;align-items:center;gap:8px;padding:6px 8px;border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer;min-width:0}
.strip .smark{color:var(--tc);font-size:16px;width:16px;text-align:center;flex:0 0 16px}
.strip .sface{width:42px;height:42px;flex:0 0 42px;border-radius:4px;object-fit:cover;object-position:top;border:2px solid var(--line);background:var(--paper2)}
.strip .sface.r-gold{border-color:#c9a23a} .strip .sface.r-silver{border-color:#a9adb3} .strip .sface.r-wood{border-color:#8b6a48}
.strip .sface.noimg{display:inline-flex;align-items:flex-end;justify-content:center;overflow:hidden}
.strip .sface .sil{width:70%;fill:var(--ink2);opacity:.5}
.strip .sname{display:flex;flex-direction:column;min-width:0;flex:1}
.strip .sname b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.strip .sname small{font-size:11px;color:var(--ink2);white-space:nowrap}
.strip .snum{display:flex;flex-direction:column;align-items:flex-end;font-size:17px;font-weight:600;line-height:1.1}
.strip .snum small{font-size:10px;font-weight:400;color:var(--ink2);margin-right:1px;display:inline}
.strip .snum em{font-style:normal;font-size:11px;font-weight:400;color:var(--ink2)}
.strip .smarks{display:flex;flex-direction:column;gap:2px;align-items:flex-end}
.strip .sm{font-size:10px;padding:0 4px;border-radius:2px;color:#fff;background:var(--hai);white-space:nowrap}
.strip .sm.hurt,.strip .sm.ens{background:var(--bengara)} .strip .sm.low{background:var(--yamabuki)} .strip .sm.wait{background:var(--ai)}
.strip .scheck{color:var(--tc);font-size:18px;font-weight:700}
.strip .sinfo{flex:0 0 40px;border:0;border-left:1px solid var(--line);background:none;color:var(--ink2);font-size:17px;cursor:pointer}
.strip .sinfo:hover,.strip .sinfo:focus-visible{background:var(--paper2);color:var(--ink)}
@media (max-width:520px){
  .slots{grid-template-columns:repeat(3,1fr)}
  .strips{grid-template-columns:1fr}
}
.topbtns{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.gauge{flex-wrap:wrap;row-gap:4px}
.strip.full .sbody{cursor:not-allowed;opacity:.55}
@media (max-width:520px){
  .slots{grid-template-columns:repeat(6,1fr);gap:4px}
  .slot .card.small{border-width:2px}
  .slot .card.small .band{padding:2px 3px;justify-content:space-between}
  .slot .card.small .band .jobname{display:none}
  .slot .card.small .band .lvbig{font-size:0} .slot .card.small .band .lvbig b{font-size:12px}
  .slot .card.small .band .mark{font-size:11px;width:auto}
  .slot .card.small .pic{aspect-ratio:1/1}
  .slot .card.small .nm{padding:2px 2px 3px;justify-content:center}
  .slot .card.small .nm b{font-size:10px;letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .slot.empty{aspect-ratio:auto;min-height:92px}
  .slot .sx{display:none}
}
.strip .smarks{flex-direction:row;flex-wrap:wrap;gap:3px;margin-top:2px;align-items:center}
.strips{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.card.small .band .jobname{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card.small .band .lvbig{margin-left:0;white-space:nowrap}

/* ---------- 本画面の隊：小さいカードで構成員を見せる（試作） ---------- */
.tcards{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;margin:6px 0 4px}
.tc .card.small .mini-row{display:flex;flex-wrap:wrap;align-items:center;gap:2px 4px;padding:0 5px 4px}
.tc .card.small .tag{margin-left:0;font-size:10px;padding:0 3px}
.mini-row .mpw{white-space:nowrap}
@media (max-width:520px){
  .tcards{gap:4px}
  .tc .card.small .band{padding:2px 3px;justify-content:space-between}
  .tc .card.small .band .jobname{display:none}
  .tc .card.small .band .lvbig{font-size:0} .tc .card.small .band .lvbig b{font-size:12px}
  .tc .card.small .band .mark{font-size:11px;width:auto}
  .tc .card.small .pic{aspect-ratio:1/1}
  .tc .card.small .nm{padding:2px 2px 2px;justify-content:center}
  .tc .card.small .nm b{font-size:10px;letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .tc .card.small .mini-row{justify-content:center;padding:0 2px 3px}
  .tc .card.small .mini-row .mpw{display:none}
}
.tc .card.small .band .jobname,.slot .card.small .band .jobname{display:none}
.tc .card.small .band,.slot .card.small .band{justify-content:space-between}
.tc .card.small .pic{aspect-ratio:1/1}

/* ---------- 絵つきのログと「この間に起きたこと」 ---------- */
.logev{display:flex;gap:10px;align-items:flex-start;margin:4px 0 8px}
.logev .logimg{flex:0 0 26%;width:26%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:top;border:1px solid var(--line);border-radius:4px;background:var(--paper2)}
.logev .logimg.still{aspect-ratio:auto;flex-basis:40%;width:40%}
.logev p{margin:0;flex:1;min-width:0}
.logev.big .logimg{flex-basis:36%;width:36%}
.logev.big .logimg.still{flex-basis:100%;width:100%}
.logev.big{flex-wrap:wrap}
.logev.big p{font-size:14px;color:var(--ink)}
.log.fresh{border-top:0;padding-top:4px;margin-top:4px}
.log.fresh p.hi{font-weight:600}
@media (max-width:520px){ .logev.big .logimg{flex-basis:30%;width:30%} }

/* ---------- イベント場面 ---------- */
.scene{max-width:560px;margin:0 auto;padding:12px 0 40px}
.scene-h{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;color:var(--ink2);letter-spacing:.1em;margin-bottom:10px}
.scene-h span:first-child{font-size:16px;color:var(--ink);font-weight:600}
.scene-pic{width:100%;aspect-ratio:4/3;background:var(--paper2);border:1px solid var(--line);border-radius:6px;overflow:hidden;display:flex;justify-content:center}
.scene-img{height:100%;width:auto;max-width:100%;object-fit:cover;object-position:top}
.scene-img.still{width:100%;height:100%}
.scene-roster{margin:0}
.scene-text{font-size:16px;line-height:2;padding:18px 6px;min-height:7em;color:var(--ink)}
.scene .acts{margin-top:8px}
.fx{width:100%;aspect-ratio:4/3;border-radius:6px;border:1px solid var(--line);overflow:hidden;position:relative}
.fx.dark{background:#1a1714}
.fx.bloom{background:linear-gradient(#cfe3f5,#eaf2f8)}
.fx.bloom svg{width:100%;height:100%}
.fx.bloom line{stroke:#2f6ea0;stroke-width:1.5;stroke-linecap:round;opacity:0;transform-origin:100px 100px;animation:ray 2.4s ease-out forwards}
.fx.bloom circle{fill:none;stroke:#2f6ea0;stroke-width:2;opacity:0;transform-origin:100px 100px;animation:ring 2.4s ease-out forwards}
.fx.bloom .c2{animation-delay:.3s;stroke:#5d9bd0} .fx.bloom .c3{animation-delay:.6s;stroke:#8fbfe6}
@keyframes ring{0%{transform:scale(.2);opacity:0}20%{opacity:.9}100%{transform:scale(7);opacity:0}}
@keyframes ray{0%{transform:scale(0);opacity:0}25%{opacity:.8}100%{transform:scale(1.1);opacity:0}}
.fx.meteor{background:radial-gradient(ellipse at 50% 120%,#2b2a3a,#0d0d16 70%)}
.fx.meteor .st{position:absolute;width:2px;height:2px;border-radius:50%;background:#fff;opacity:.8}
.fx.meteor .s1{left:18%;top:22%} .fx.meteor .s2{left:70%;top:15%} .fx.meteor .s3{left:45%;top:40%;opacity:.5} .fx.meteor .s4{left:85%;top:50%;opacity:.6}
.fx.meteor .streak{position:absolute;left:-20%;top:10%;width:40%;height:2px;background:linear-gradient(90deg,transparent,#fff);transform:rotate(25deg);animation:streak 3s ease-in infinite}
.fx.meteor .streak.two{top:35%;width:25%;animation-delay:1.6s;opacity:.7}
@keyframes streak{0%{transform:translate(0,0) rotate(25deg);opacity:0}10%{opacity:1}60%{transform:translate(220%,100%) rotate(25deg);opacity:0}100%{opacity:0}}
@media (prefers-reduced-motion: reduce){ .fx *{animation:none!important;opacity:.7} }
.draft .callrow.wrap{flex-wrap:wrap}
.draft .callrow.wrap .called .bigface{width:64px;height:80px}
.draft .callrow.wrap figure.refuse .bigface{filter:grayscale(.6);opacity:.7}
.draft .callrow.wrap figure.refuse figcaption{color:var(--bengara)}
.draft-hall{width:100%;aspect-ratio:3/1;overflow:hidden;border-radius:6px;border:1px solid var(--line);margin-bottom:10px;background:var(--paper2)}
.draft-hall img{width:100%;height:100%;object-fit:cover;object-position:center 60%}
.end-still{width:100%;aspect-ratio:4/3;overflow:hidden;border-radius:6px;border:1px solid var(--line);margin:16px 0 4px;background:var(--paper2)}
.end-still img{width:100%;height:100%;object-fit:cover}
.novel.book{display:flex;align-items:center;gap:14px;color:var(--ink)}
.novel.book img{width:84px;height:auto;flex:0 0 84px;border:1px solid var(--line);border-radius:3px}
.novel.book span{font-size:14px;font-weight:600}
.portal{text-align:center;font-size:13px;margin:10px 0 4px}
.portal a{color:var(--ink2);text-decoration:underline}