@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600;700;900&family=M+PLUS+1p:wght@700;800&display=swap');
/* ── SAVE PNG BUTTON ── */
#btn-save-png{padding:7px 15px;border-radius:var(--rs);border:1.5px solid #38bdf8;background:#f0f9ff;color:#0369a1;font-family:'Noto Sans JP',sans-serif;font-size:13px;font-weight:600;cursor:pointer;transition:all .15s;flex-shrink:0;white-space:nowrap;display:flex;align-items:center;gap:5px;}
#btn-save-png:hover{background:#e0f2fe;border-color:#0284c7;}
#btn-save-png:disabled{opacity:.5;cursor:not-allowed;}
#save-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;z-index:99999;backdrop-filter:blur(3px);}
#save-overlay.hide{display:none;}
#save-overlay-inner{background:#fff;border-radius:12px;padding:24px 28px;text-align:center;font-family:'Noto Sans JP',sans-serif;box-shadow:0 8px 32px rgba(0,0,0,.2);}
#save-overlay-inner p{font-size:14px;font-weight:600;color:#18202e;margin-top:10px;}
:root{
  --bg:#f2f4f8;--sur:#fff;--sur2:#f7f8fb;
  --bd:#e1e6ef;--bd2:#cdd2dc;
  --tx:#18202e;--tx2:#58627a;--tx3:#96a0b5;
  --red:#c0392b;--grn:#16a34a;
  --wei:#2563eb;--wu:#dc2626;--shu:#16a34a;--oth:#7c3aed;
  --s5c:#d97706;--s4c:#e11d48;--s3c:#2563eb;
  --sh:0 1px 3px rgba(0,0,0,.07),0 3px 10px rgba(0,0,0,.05);
  --sh2:0 6px 24px rgba(0,0,0,.12),0 12px 40px rgba(0,0,0,.07);
  --r:10px;--rs:6px;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{background:var(--bg);font-family:'Noto Sans JP',sans-serif;color:var(--tx);min-height:100vh;font-size:14px;}

/* ── HEADER ── */
.hd{background:var(--sur);border-bottom:1px solid var(--bd);padding:0 12px;min-height:52px;display:flex;align-items:center;gap:8px;position:sticky;top:0;z-index:100;box-shadow:0 1px 4px rgba(0,0,0,.06);}
.logo{display:flex;align-items:center;gap:7px;font-family:'M PLUS 1p',sans-serif;font-weight:800;font-size:15px;color:var(--red);flex-shrink:0;}
.logo-b{background:var(--red);color:#fff;width:28px;height:28px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:900;flex-shrink:0;}
.nav{display:flex;gap:2px;margin-left:6px;flex-shrink:0;}
.nb{padding:6px 12px;border:none;border-radius:var(--rs);background:transparent;cursor:pointer;font-family:'Noto Sans JP',sans-serif;font-size:13px;font-weight:600;color:var(--tx2);transition:all .15s;white-space:nowrap;}
.nb.on{background:#64748b;color:#fff;box-shadow:0 2px 5px rgba(100,116,139,.3);}
.nb:hover:not(.on){background:var(--bg);color:var(--tx);}
@media(max-width:480px){
  .hd{padding:0 8px;gap:5px;}
  .logo{font-size:13px;gap:5px;}
  .logo-txt{display:none;}
  .nav{margin-left:2px;}
  .nb{padding:5px 9px;font-size:12px;}
}

/* ── PAGES ── */
.pg{display:none;}
.pg.on{display:block;}
.sh{background:var(--sur);border-bottom:1px solid var(--bd);padding:0 20px;display:flex;align-items:center;gap:10px;flex-wrap:nowrap;height:50px;box-sizing:border-box;}
.sh-t{font-size:14px;font-weight:700;}
.sh-s{font-size:11px;color:var(--tx3);}

/* ── PANEL ── */
.panel{background:var(--sur);border:1px solid var(--bd);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh);}
.ph{padding:11px 15px;border-bottom:1px solid var(--bd);display:flex;align-items:center;gap:8px;flex-wrap:wrap;cursor:pointer;user-select:none;}
.ph:hover{background:rgba(0,0,0,.03);}
.ph-toggle{margin-left:auto;font-size:16px;transition:transform .25s;color:var(--tx3);line-height:1;}
.panel-body{display:none;}
.panel-body.open{display:block;}
.panel-body:not(.open) .cgrid{min-height:0;}
.pt{font-size:13px;font-weight:700;flex-shrink:0;}
.pc{font-size:11px;color:var(--tx3);margin-left:6px;}

/* ── CHIPS ── */
.chips{display:flex;gap:4px;flex-wrap:wrap;}
.chip{padding:3px 9px;border-radius:20px;font-size:11px;font-weight:600;border:1.5px solid var(--bd);background:var(--sur);cursor:pointer;color:var(--tx2);transition:all .12s;user-select:none;}
.chip:hover{border-color:var(--red);color:var(--red);}
.chip.on{background:#64748b;border-color:#64748b;color:#fff;}
.chip.wei.on{background:var(--wei);border-color:var(--wei);}
.chip.wu.on{background:var(--wu);border-color:var(--wu);}
.chip.shu.on{background:var(--shu);border-color:var(--shu);}
.chip.oth.on{background:var(--oth);border-color:var(--oth);}
.chip.s5.on{background:var(--s5c);border-color:var(--s5c);}
.chip.s4.on{background:var(--s4c);border-color:var(--s4c);}
.chip.s3.on{background:var(--s3c);border-color:var(--s3c);}
.chip.tc.on{background:#d97706;border-color:#d97706;color:#fff;}
.chip.stt.on{background:#0891b2;border-color:#0891b2;color:#fff;}
.chip.stt-start.on{background:#0891b2;border-color:#0891b2;color:#fff;}
.chip.stt-active.on{background:#dc2626;border-color:#dc2626;color:#fff;}
.chip.stt-passive.on{background:#d97706;border-color:#d97706;color:#fff;}

/* ── CARD GRID ── */
.cgrid{padding:12px 14px;display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px;max-height:calc(100vh - 200px);min-height:200px;overflow-y:auto;}
.cgrid::-webkit-scrollbar{width:4px;}
.cgrid::-webkit-scrollbar-thumb{background:var(--bd2);border-radius:2px;}

/* ── RANK/FACTION TAGS ── */
.rtag{font-size:9px;font-weight:800;padding:1px 4px;border-radius:3px;display:inline-block;line-height:1.4;}
.rSS{background:#6d28d9;color:#fff;}.rSp{background:#be185d;color:#fff;}
.rS{background:#b45309;color:#fff;}.rA{background:#1d4ed8;color:#fff;}
.rB{background:#374151;color:#fff;}.rC{background:#6b7280;color:#fff;}
.ftag{font-size:9px;font-weight:700;padding:0;border-radius:3px;color:#fff;display:inline-flex;align-items:center;justify-content:center;line-height:1;width:22px;height:18px;flex-shrink:0;box-sizing:border-box;vertical-align:middle;}
.f魏{background:var(--wei);}.f呉{background:var(--wu);}.f蜀{background:var(--shu);}.f他{background:var(--oth);}
.styp{font-size:9px;font-weight:700;padding:1px 4px;border-radius:3px;display:inline-block;line-height:1.4;}
.sta{background:#fee2e2;color:#b91c1c;}.stp{background:#fef3c7;color:#92400e;}.sts{background:#cffafe;color:#0e7490;}
.slvtag{font-size:9px;font-weight:800;padding:1px 5px;border-radius:3px;display:inline-block;line-height:1.4;color:#fff;}
.slv5{background:var(--s5c);}.slv4{background:var(--s4c);}.slv3{background:var(--s3c);}
.stag{font-size:9px;font-weight:700;padding:1px 5px;border-radius:3px;display:inline-block;line-height:1.4;color:#fff;}
.s5t{background:var(--s5c);}.s4t{background:var(--s4c);}.s3t{background:var(--s3c);}

/* ── AVATAR (faction color) ── */
.av{display:flex;align-items:center;justify-content:center;font-family:'M PLUS 1p',sans-serif;font-weight:800;color:#fff;position:relative;overflow:hidden;flex-shrink:0;}
.av::after{content:'';position:absolute;inset:0;background:linear-gradient(150deg,rgba(255,255,255,.28) 0%,transparent 60%);pointer-events:none;}
.av.fWei{background:linear-gradient(135deg,#1e40af,#3b82f6);}
.av.fWu{background:linear-gradient(135deg,#991b1b,#ef4444);}
.av.fShu{background:linear-gradient(135deg,#14532d,#22c55e);}
.av.fOth{background:linear-gradient(135deg,#5b21b6,#a855f7);}
.av-lg{width:60px;height:60px;border-radius:10px;font-size:25px;border:2px solid transparent;transition:border-color .15s;}
.av-md{width:40px;height:40px;border-radius:8px;font-size:17px;}
.av-sm{width:34px;height:34px;border-radius:7px;font-size:14px;}

/* ── GENERAL CARD (roster) ── */
.gcard{border:2px solid var(--bd);border-radius:var(--rs);cursor:pointer;transition:all .15s;position:relative;background:var(--sur2);display:flex;flex-direction:column;align-items:center;padding:9px 5px 7px;user-select:none;}
.gcard:hover{border-color:var(--red);box-shadow:0 2px 10px rgba(192,57,43,.12);transform:translateY(-1px);}
.gcard.owned{border-color:var(--grn);background:#f0fdf4;}
.gcard.owned .av-lg{border-color:var(--grn);}
/* 所持済みカードのアバターホバーオーバーレイ */
.gc-av-wrap{position:relative;display:inline-block;border-radius:10px;flex-shrink:0;}
.gc-av-wrap::after{content:'';position:absolute;inset:0;border-radius:10px;background:rgba(0,0,0,0);transition:background .15s;pointer-events:none;}
.gcard.owned:hover .gc-av-wrap::after{background:rgba(0,0,0,.32);}
.gc-av-hint{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:18px;color:#fff;opacity:0;transition:opacity .15s;pointer-events:none;border-radius:10px;text-shadow:0 1px 4px rgba(0,0,0,.6);}
.gcard.owned:hover .gc-av-hint{opacity:1;}
.gc-name{font-size:10px;font-weight:700;text-align:center;line-height:1.3;margin-top:5px;}
.gc-meta{display:flex;gap:3px;align-items:center;margin-top:3px;flex-wrap:wrap;justify-content:center;}
.ck{position:absolute;top:4px;right:4px;width:15px;height:15px;border-radius:50%;background:var(--grn);display:none;align-items:center;justify-content:center;font-size:8px;color:#fff;font-weight:900;}
.gcard.owned .ck{display:flex;}
/* ── STAT RANK (所持一覧カード・アバター左上オーバーレイ) ── */
.gc-rank-col{
  position:absolute;top:9px;left:3px;z-index:3;
  display:flex;flex-direction:column;gap:2px;
  pointer-events:none;
}
.gc-rank-hd{font-size:6.5px;font-weight:700;color:#fff;background:#94a3b8;border-radius:3px;padding:0 3px;line-height:1.6;text-align:center;letter-spacing:.3px;}
.gc-rank-item{display:flex;flex-direction:row;align-items:center;gap:1px;border-radius:3px;padding:1px 2px;line-height:1.2;background:rgba(255,255,255,0.88);border:1px solid rgba(0,0,0,0.07);min-width:24px;}
.gc-rank-label{font-size:7px;font-weight:700;color:#58627a;flex-shrink:0;}
.gc-rank-num{font-size:7px;font-weight:800;flex:1;text-align:right;}
.gc-rank-label{font-size:7px;font-weight:700;color:#58627a;flex-shrink:0;}
.gc-rank-num{font-size:7px;font-weight:800;}
.gc-rank-item.rk-top{background:#fef3c7;border-color:#fde68a;}.gc-rank-item.rk-top .gc-rank-num{color:#b45309;}
.gc-rank-item.rk-mid{background:#f1f5f9;border-color:#e2e8f0;}.gc-rank-item.rk-mid .gc-rank-num{color:#58627a;}
.gc-rank-item.rk-low{background:#fff1f2;border-color:#fecdd3;}.gc-rank-item.rk-low .gc-rank-num{color:#be123c;}
/* 兵種適性表示（所持一覧カード） */
.gc-troops{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;margin-top:4px;width:100%;}
.gc-troop{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1px 1px;border-radius:3px;font-size:7px;font-weight:700;line-height:1.3;overflow:hidden;}
.gc-tname{color:var(--tx3);font-weight:600;font-size:6.5px;}
.gc-trank{font-weight:800;font-size:7.5px;}
.gc-troop.trS{background:#fef3c7;}.gc-troop.trS .gc-trank{color:#92400e;}
.gc-troop.trA{background:#ffe4e6;}.gc-troop.trA .gc-trank{color:#be123c;}
.gc-troop.trB{background:#dbeafe;}.gc-troop.trB .gc-trank{color:#1d4ed8;}
.gc-troop.trC{background:#dcfce7;}.gc-troop.trC .gc-trank{color:#15803d;}
/* 兵種適性表示（ドラッグカード） */
.dgc-troops{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;margin-top:3px;width:100%;}
.dgc-troop{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1px 1px;border-radius:3px;font-size:7px;font-weight:700;line-height:1.3;overflow:hidden;}
.dgc-tname{font-size:6px;font-weight:700;}
.dgc-trank{font-size:7px;font-weight:800;}
.dgc-troop.trS{background:#fef3c7;}.dgc-troop.trS .dgc-trank{color:#92400e;}
.dgc-troop.trA{background:#ffe4e6;}.dgc-troop.trA .dgc-trank{color:#be123c;}
.dgc-troop.trB{background:#dbeafe;}.dgc-troop.trB .dgc-trank{color:#1d4ed8;}
.dgc-troop.trC{background:#dcfce7;}.dgc-troop.trC .dgc-trank{color:#15803d;}
.dgc-troop.dgc-troop-hi{outline:1.5px solid #d97706;outline-offset:-1px;}

/* ── SKILL CARD (roster) ── */
.scard{border:2px solid var(--bd);border-radius:var(--rs);cursor:pointer;transition:all .15s;position:relative;background:var(--sur2);padding:8px 9px 7px;display:flex;flex-direction:column;gap:2px;}
.scard:hover{border-color:var(--red);box-shadow:0 2px 10px rgba(192,57,43,.12);}
.scard.owned{border-color:var(--grn);background:#f0fdf4;}
.scard.owned .ck{display:flex;}
.sc-name{font-size:10px;font-weight:700;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sc-row{display:flex;gap:3px;align-items:center;flex-wrap:wrap;}
.sc-desc{font-size:9px;color:var(--tx3);line-height:1.35;}
.sc-src{font-size:9px;color:var(--tx3);line-height:1.3;}
/* スキル所持一覧は広めの列幅 */
#sgrid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));}
#ggrid{grid-template-columns:repeat(auto-fill,minmax(165px,1fr));}

/* ── ROSTER BODY ── */
.rb{padding:16px 20px;display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start;}
@media(max-width:820px){.rb{grid-template-columns:1fr;}}

/* ── FORMATION BODY ── */
.fb{padding:16px 20px;display:grid;grid-template-columns:1fr;gap:16px;align-items:start;}
.fb > div{max-width:900px;width:100%;margin:0 auto;}

/* ── DRAG PANEL ── */
.dpanel{background:var(--sur);border:1px solid var(--bd);border-radius:var(--r);box-shadow:var(--sh);overflow:hidden;margin-bottom:14px;}
.dph{padding:9px 13px;border-bottom:1px solid var(--bd);background:var(--sur2);display:flex;align-items:center;gap:7px;flex-wrap:wrap;}
.dpt{font-size:12px;font-weight:700;}
.dgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:5px;padding:9px 11px;max-height:calc(65vh - 60px);min-height:140px;overflow-y:auto;}
#sdgrid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));}
#sdgrid .dgc{align-items:flex-start;padding:5px 7px;}
.dgrid::-webkit-scrollbar{width:3px;}
.dgrid::-webkit-scrollbar-thumb{background:var(--bd2);border-radius:2px;}

/* ── DRAG CARD ── */
.dgc{border:1.5px solid var(--bd);border-radius:var(--rs);padding:5px 3px;display:flex;flex-direction:column;align-items:center;gap:2px;cursor:grab;transition:all .15s;background:var(--sur2);user-select:none;}
.dgc:hover{border-color:var(--red);box-shadow:0 2px 8px rgba(192,57,43,.12);transform:translateY(-1px);}
.dgc:active{cursor:grabbing;}
.dgc.used{opacity:.38;cursor:not-allowed;pointer-events:none;}
.dgc.dragging{opacity:.2;}
.dgc-name{font-size:9px;font-weight:700;text-align:center;line-height:1.2;}

/* ── SQUADS ── */
.squads{display:flex;flex-direction:column;gap:13px;}
.empty-sq{background:var(--sur);border:2px dashed var(--bd2);border-radius:var(--r);padding:40px;text-align:center;color:var(--tx3);font-size:13px;}

.squad{background:var(--sur);border:1px solid var(--bd);border-radius:var(--r);box-shadow:var(--sh);overflow:hidden;animation:slin .22s ease;}
@keyframes slin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.sq-hd{background:var(--sur2);border-bottom:1px solid var(--bd);padding:8px 6px 8px 14px;display:flex;align-items:center;gap:8px;flex-wrap:nowrap;min-width:0;}
.sq-hd-center{flex:1;display:flex;align-items:center;gap:4px;flex-wrap:wrap;min-width:0;overflow:hidden;}
.sq-fac-badges{display:flex;gap:3px;align-items:center;}
.sq-nm{border:none;background:transparent;font-family:'Noto Sans JP',sans-serif;font-weight:700;font-size:13px;color:var(--tx);outline:none;width:90px;border-bottom:2px solid transparent;padding-bottom:1px;transition:border-color .15s;flex-shrink:0;}
.sq-nm:focus{border-bottom-color:var(--red);}
.sq-hdr{display:flex;align-items:center;gap:7px;flex-shrink:0;flex-wrap:nowrap;}
.cpill{background:var(--bg);border:1px solid var(--bd);border-radius:20px;padding:3px 6px;font-size:11px;color:var(--tx2);white-space:nowrap;flex-shrink:0;}
.cpill strong{color:var(--red);font-weight:700;}
.cpill.over{background:#fef2f2;border-color:#fca5a5;}
.cpill.over strong{color:#dc2626;}
.cost-warn{font-size:10px;font-weight:700;color:#dc2626;background:#fef2f2;border:1px solid #fca5a5;border-radius:4px;padding:1px 7px;white-space:nowrap;}
.bdel{background:none;border:1px solid var(--bd);border-radius:var(--rs);padding:3px 9px;font-size:11px;color:var(--tx3);cursor:pointer;transition:all .12s;flex-shrink:0;white-space:nowrap;}
.bdel:hover{border-color:#ef4444;color:#ef4444;background:#fef2f2;}

/* squad slots: horizontal scroll on small screens */
.sq-slots{display:grid;grid-template-columns:repeat(3,1fr);}
@media(max-width:600px){
  .sq-slots{grid-template-columns:1fr;}
  .sq-slot{border-right:none;border-bottom:1px solid var(--bd);}
  .sq-slot:last-child{border-bottom:none;}
}
.sq-slot{border-right:1px solid var(--bd);padding:3px 6px 6px;}
.sq-slot:last-child{border-right:none;}
.slbl{font-size:10px;font-weight:700;color:var(--tx3);letter-spacing:.4px;margin-bottom:3px;}

/* ── DROP ZONE ── */
.dz{border:2px dashed var(--bd2);border-radius:var(--rs);min-height:74px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;cursor:pointer;transition:all .15s;padding:7px;}
.dz:hover,.dz.over{border-color:var(--red);background:#fff7f7;}
.dz-ic{font-size:20px;color:var(--bd2);}
.dz-tx{font-size:10px;color:var(--tx3);}

/* ── PLACED GENERAL ── */
.placed{border:2px solid var(--bd);border-radius:var(--rs);padding:8px;background:var(--sur2);position:relative;overflow:hidden;min-width:0;}
.placed.over{border-color:var(--red);background:#fff7f7;}
.pg-top{display:flex;gap:7px;align-items:center;margin-bottom:7px;}
.pg-info{flex:1;min-width:0;}
.pg-nm{font-size:12px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pg-tags{display:flex;gap:3px;align-items:center;margin-top:3px;flex-wrap:wrap;}
.pg-rm{position:absolute;top:4px;right:4px;width:17px;height:17px;border-radius:50%;background:none;border:1px solid var(--bd);color:var(--tx3);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:9px;transition:all .12s;line-height:1;}
.pg-rm:hover{background:#ef4444;border-color:#ef4444;color:#fff;}

/* skill slots */
.skslots{display:flex;flex-direction:column;gap:3px;width:100%;min-width:0;}
.skrow{display:flex;gap:3px;align-items:stretch;width:100%;min-width:0;overflow:hidden;}
.skbadge{font-size:8px;font-weight:700;padding:0 4px;border-radius:3px;white-space:nowrap;flex-shrink:0;line-height:1;width:38px;text-align:center;box-sizing:border-box;display:flex;align-items:center;justify-content:center;}
.skbadge.fix{background:#f5f3ff;color:#5b21b6;border:1px solid #ddd6fe;}
.skbadge.lv5{background:var(--s5c);color:#fff;}
.skbadge.lv4{background:var(--s4c);color:#fff;}
.skbadge.lv3{background:var(--s3c);color:#fff;}
.skbadge.sk-free{background:#f1f5f9;color:#475569;border:1px solid #cbd5e1;}
.skbtn{flex:1;min-width:0;max-width:100%;width:100%;padding:3px 6px;border-radius:4px;font-size:9px;font-weight:600;border:1.5px dashed var(--bd2);background:var(--sur);cursor:pointer;color:var(--tx3);transition:all .12s;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:'Noto Sans JP',sans-serif;line-height:1.4;display:block;box-sizing:border-box;}
.skbtn:hover{border-color:var(--red);color:var(--red);background:#fff7f7;}
.skbtn.set{background:#f0fdf4;border-color:var(--grn);color:#15803d;border-style:solid;}
.skbtn.fix-sk{background:#fffbeb;border-color:#fbbf24;color:#92400e;border-style:solid;cursor:default;}

/* ── DRAG PANELS WRAPPER ── */
.dpanels{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px;align-items:start;}
@media(max-width:660px){.dpanels{grid-template-columns:1fr;}}

/* ── SKILL DROP ZONE in slot ── */
.sk-dz{flex:1;min-width:0;max-width:100%;padding:3px 6px;border-radius:4px;font-size:9px;font-weight:600;border:1.5px dashed var(--bd2);background:var(--sur);color:var(--tx3);cursor:pointer;text-align:left;transition:all .12s;line-height:1.6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;box-sizing:border-box;}
.sk-dz:hover,.sk-dz.over{border-color:var(--red);background:#fff7f7;color:var(--red);}
.sk-dz.set{background:#f0fdf4;border-color:var(--grn);color:#15803d;border-style:solid;}
.sk-dz.set:hover,.sk-dz.set.over{background:#dcfce7;border-color:#15803d;}
/* セット済みスキル：タイプ別背景色 */
.sk-dz.set.tp-start{background:#ecfeff;border-color:#0891b2;color:#0e7490;border-style:solid;}
.sk-dz.set.tp-start:hover{background:#cffafe;border-color:#0e7490;}
.sk-dz.set.tp-active{background:#fef2f2;border-color:#dc2626;color:#b91c1c;border-style:solid;}
.sk-dz.set.tp-active:hover{background:#fee2e2;border-color:#b91c1c;}
.sk-dz.set.tp-passive{background:#fffbeb;border-color:#d97706;color:#92400e;border-style:solid;}
.sk-dz.set.tp-passive:hover{background:#fef3c7;border-color:#b45309;}
/* 固有スキル：固有とわかるように */
.skbtn.fix-sk{background:#f0fdf4;border-color:var(--grn);color:#15803d;border-style:solid;cursor:default;}
/* 固有スキルをsk-dzと同じ見せ方にする */
.sk-dz.fix-sk{cursor:default;}
.sk-dz.fix-sk:hover{border-color:inherit;background:inherit;color:inherit;}

/* ── SKILL TOOLTIP ── */
.sk-tip-wrap{position:relative;flex:1;min-width:0;}
.sk-tip-wrap .sk-tip{
  display:none;position:fixed;z-index:9999;
  background:#1e293b;color:#f1f5f9;font-size:10px;line-height:1.55;
  padding:7px 10px;border-radius:7px;white-space:normal;width:220px;
  box-shadow:0 4px 16px rgba(0,0,0,.35);pointer-events:none;
}
.sk-tip-wrap .sk-tip::after{
  content:'';position:absolute;top:100%;left:14px;
  border:5px solid transparent;border-top-color:#1e293b;
}
.sk-tip-wrap:hover .sk-tip{display:block;}
.sk-tip-name{font-weight:700;font-size:11px;margin-bottom:3px;color:#fff;}
.sk-tip-type{font-size:9px;color:#94a3b8;margin-bottom:4px;}
.sk-tip-desc{color:#e2e8f0;}

/* ── COST TAG (replaces rank tag) ── */
.ctag{font-size:10px;font-weight:800;padding:0 5px;border-radius:3px;display:inline-flex;align-items:center;justify-content:center;line-height:1;height:18px;background:#1e293b;color:#fff;box-sizing:border-box;vertical-align:middle;}
.ctag-lg{font-size:9px;font-weight:800;padding:0;border-radius:3px;background:#1e293b;color:#fff;display:inline-flex;align-items:center;justify-content:center;line-height:1;height:18px;min-width:28px;padding:0 4px;}
.lv-tag{font-size:9px;font-weight:800;padding:0 4px;border-radius:3px;background:#e0f2fe;color:#0ea5e9;display:inline-flex;align-items:center;justify-content:center;line-height:1;height:18px;}

/* ── BUTTON ── */
.btn{padding:7px 15px;border-radius:var(--rs);border:1.5px solid transparent;cursor:pointer;font-family:'Noto Sans JP',sans-serif;font-size:13px;font-weight:600;transition:all .15s;}
.btn-pri{background:var(--red);color:#fff;border-color:var(--red);}
.btn-pri:hover{background:#a93226;}


/* ── MODAL ── */
.ov{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:flex-start;justify-content:center;padding-top:5vh;z-index:200;backdrop-filter:blur(3px);}
.ov.hide{display:none;}
.modal{background:var(--sur);border-radius:12px;box-shadow:var(--sh2);width:92%;max-width:720px;max-height:82vh;overflow:hidden;display:flex;flex-direction:column;}
.mhd{padding:15px 18px 11px;border-bottom:1px solid var(--bd);display:flex;align-items:center;justify-content:space-between;}
.mt{font-size:14px;font-weight:700;}
.mcl{width:26px;height:26px;border-radius:50%;border:1px solid var(--bd);background:none;cursor:pointer;font-size:14px;color:var(--tx2);display:flex;align-items:center;justify-content:center;transition:all .12s;line-height:1;}
.mcl:hover{background:var(--bg);}
.mb{padding:13px 18px;overflow-y:auto;}
.mfilter{padding:10px 18px 6px;border-bottom:1px solid var(--bd);display:flex;flex-direction:column;gap:4px;flex-shrink:0;}
.mfilter.hide{display:none;}
.mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:6px;}
/* スキル選択モーダル：scardと同じレイアウト */
.mi{border:2px solid var(--bd);border-radius:var(--rs);padding:8px 9px 7px;cursor:pointer;transition:all .12s;display:flex;flex-direction:column;align-items:center;gap:2px;background:var(--sur2);position:relative;}
.mi:hover{border-color:var(--red);box-shadow:0 2px 10px rgba(192,57,43,.12);}
.mi.na{opacity:.38;cursor:not-allowed;pointer-events:none;}
.mi-av{width:64px;height:64px;border-radius:8px;overflow:hidden;flex-shrink:0;margin-bottom:2px;display:flex;align-items:center;justify-content:center;}
.mi-av .av{width:100%!important;height:100%!important;border-radius:8px!important;}
.mi-nm{font-size:10px;font-weight:700;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mi-sub{font-size:9px;color:var(--tx3);line-height:1.35;}
.mi-del{padding:10px 16px;border-radius:999px;border:1.5px solid #fecaca;background:#fef2f2;font-family:'Noto Sans JP',sans-serif;font-size:13px;font-weight:700;color:#dc2626;cursor:pointer;transition:all .15s;display:inline-flex;align-items:center;justify-content:center;gap:5px;white-space:nowrap;flex-shrink:0;line-height:1.4;}
.mi-del:hover{background:#fee2e2;border-color:#dc2626;}

/* ── GHOST ── */
#gh{position:fixed;pointer-events:none;z-index:9999;background:var(--sur);border:2px solid var(--red);border-radius:var(--rs);padding:4px 9px;font-size:12px;font-weight:700;color:var(--tx);box-shadow:var(--sh2);opacity:.9;white-space:nowrap;transform:translate(-50%,-50%);display:none;}

.nomsg{font-size:11px;color:var(--tx3);text-align:center;padding:16px;grid-column:1/-1;}

/* ── SKILL STAT VIEW TOGGLE ── */
.tip-wrap{position:relative;display:inline-flex;align-items:center;}
.tip-wrap .tip-box{display:none;position:fixed;background:#1e293b;color:#f1f5f9;font-size:10px;white-space:nowrap;padding:5px 8px;border-radius:6px;z-index:9999;pointer-events:none;line-height:1.6;box-shadow:0 2px 8px rgba(0,0,0,.4);}
.tip-wrap:hover .tip-box,.tip-wrap.tip-on .tip-box{display:block;}
@media(max-width:600px){
  .fb{padding:10px 8px;}
  .dpanels{margin-top:10px;}
  .squad{overflow-x:hidden;}
  .sq-troop-bar{flex-wrap:wrap;gap:4px;padding:4px 10px;}
  .stat-row{flex-wrap:wrap;}
  /* スキル行：スマホで確実に収める */
  .skslots{gap:2px;width:100%;}
  .skrow{flex-wrap:nowrap;min-width:0;gap:2px;width:100%;overflow:hidden;}
  .skbadge{flex-shrink:0;width:28px;font-size:7px;padding:0 1px;}
  .sk-tip-wrap{flex:1;min-width:0;overflow:hidden;max-width:calc(100% - 32px);}
  .sk-dz{font-size:8px;padding:2px 4px;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;max-width:100%;}
  .sk-tip-wrap .sk-tip{width:190px;font-size:9px;left:0;right:auto;max-width:85vw;}
  .placed{overflow:hidden;min-width:0;padding:6px;}
  .pg-nm{font-size:11px;}
  .sq-hdr{flex-wrap:nowrap;gap:4px;}
  .cpill{font-size:10px;padding:2px 7px;}
  .bdel{padding:3px 7px;font-size:10px;}
  .dph{padding:7px 10px;}
  .dpanel{overflow:hidden;}
  .dgrid{padding:7px 8px;}
  .fb .panel,.fb .dpanel{overflow:hidden;}
}
.sq-statview-bar{display:flex;align-items:center;gap:6px;padding:3px 14px;border-bottom:1px solid var(--bd);background:#fffbeb;flex-wrap:wrap;}
.sq-statview-lbl{font-size:10px;font-weight:700;color:#92400e;white-space:nowrap;}
.sv-btn{padding:2px 11px;border-radius:4px;font-size:10px;font-weight:700;border:1.5px solid #e5d3b0;background:#fafaf8;cursor:pointer;color:#c9b99a;transition:all .12s;line-height:1.4;white-space:nowrap;}
.sv-btn:hover{background:#fef3c7;border-color:#d97706;color:#92400e;}
.sv-btn.on{background:#d97706;border-color:#d97706;color:#fff;box-shadow:0 2px 6px rgba(217,119,6,.4);}
.sv-note{font-size:9px;color:#92400e;opacity:.7;}
/* スキル影響後の能力値表示色 */
.stat-val.sv-3t{color:#d97706 !important;}
.stat-val.sv-all{color:#7c3aed !important;}
/* 差分バッジ */
.sv-diff{font-size:8px;font-weight:700;padding:0 3px;border-radius:3px;margin-left:2px;vertical-align:middle;}
.sv-diff.pos{background:#fef3c7;color:#92400e;}
.sv-diff.neg{background:#fee2e2;color:#b91c1c;}

/* ── TROOP TYPE SELECT（部隊単位） ── */
.sq-troop-bar{display:flex;align-items:center;gap:6px;padding:4px 14px;border-bottom:1px solid var(--bd);background:#fafbfd;}
.sq-troop-lbl{font-size:10px;font-weight:700;color:var(--tx3);white-space:nowrap;}
.tbtn{padding:2px 10px;border-radius:4px;font-size:10px;font-weight:700;border:1.5px solid var(--bd);background:var(--sur);cursor:pointer;color:var(--tx2);transition:all .12s;line-height:1.4;}
.tbtn:hover{border-color:#64748b;color:#334155;}
/* 兵種適性品質カラー（未選択時） */
.tbtn.q-gold{border-color:#eedcaa;color:#c8a060;background:#fffefc;}
.tbtn.q-red{border-color:#f8c0cc;color:#c890a0;background:#fffbfc;}
.tbtn.q-blue{border-color:#c0d4f8;color:#7898d0;background:#fafbff;}
.tbtn.q-green{border-color:#a8dfc0;color:#60a878;background:#fafffe;}
/* 兵種適性品質カラー（選択時）─ 未選択と同系色の濃い塗り */
.tbtn.on.q-gold{background:#d97706;border-color:#d97706;color:#fff;box-shadow:0 2px 6px rgba(217,119,6,.4);}
.tbtn.on.q-red{background:#e11d48;border-color:#e11d48;color:#fff;box-shadow:0 2px 6px rgba(225,29,72,.4);}
.tbtn.on.q-blue{background:#2563eb;border-color:#2563eb;color:#fff;box-shadow:0 2px 6px rgba(37,99,235,.4);}
.tbtn.on.q-green{background:#16a34a;border-color:#16a34a;color:#fff;box-shadow:0 2px 6px rgba(22,163,74,.4);}


/* 兵種適性ランク表示 */
.troop-ranks{display:flex;gap:2px;margin-top:3px;flex-wrap:wrap;}
.trank{font-size:9px;font-weight:800;padding:2px 5px;border-radius:3px;display:inline-flex;align-items:center;gap:1px;line-height:1.3;border:1.5px solid transparent;transition:all .15s;}
/* 非選択時（グレーアウト） */
.trank.dim{background:#f1f5f9;color:#94a3b8;border-color:#e2e8f0;}
/* 選択兵種に一致するランク（強調） */
.trank.hi-S{background:#d97706;color:#fff;border-color:#d97706;box-shadow:0 1px 4px rgba(217,119,6,.4);}
.trank.hi-A{background:#e11d48;color:#fff;border-color:#e11d48;box-shadow:0 1px 4px rgba(225,29,72,.4);}
.trank.hi-B{background:#2563eb;color:#fff;border-color:#2563eb;}
.trank.hi-C{background:#16a34a;color:#fff;border-color:#16a34a;}
/* 非選択時のデフォルト色（淡い） */
.trank.trS{background:#fef3c7;color:#92400e;border-color:#fde68a;}
.trank.trA{background:#ffe4e6;color:#be123c;border-color:#fecdd3;}
.trank.trB{background:#dbeafe;color:#1d4ed8;border-color:#bfdbfe;}
.trank.trC{background:#dcfce7;color:#15803d;border-color:#bbf7d0;}

/* ── FACTION BADGE（国バッジ） ── */
.fbadge{display:inline-flex;align-items:center;gap:1px;padding:2px 3px;border-radius:4px;font-size:9px;font-weight:700;border:2px solid transparent;transition:all .2s;line-height:1.4;}
/* 常時表示：揃っていない国はグレー枠のみ */
.fbadge.inactive{background:transparent;color:var(--tx3);border-color:var(--bd);opacity:.5;}
/* 揃い：国カラーで強調 */
.fbadge.fb-魏{background:var(--wei);border-color:var(--wei);color:#fff;}
.fbadge.fb-呉{background:var(--wu);border-color:var(--wu);color:#fff;}
.fbadge.fb-蜀{background:var(--shu);border-color:var(--shu);color:#fff;}
.fbadge.fb-他{background:var(--oth);border-color:var(--oth);color:#fff;}
/* 揃った瞬間アニメ */
.fbadge.unified{animation:fball .35s cubic-bezier(.34,1.56,.64,1);}
@keyframes fball{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
.fbadge .fstar{font-size:9px;}

/* ── SIEGE POWER PILL ── */
.sq-siege{display:inline-flex;align-items:center;gap:2px;background:var(--sur2);border:2px solid var(--bd);border-radius:4px;padding:2px 4px;font-size:9px;font-weight:700;color:var(--tx2);white-space:nowrap;flex-shrink:0;line-height:1.4;}
.sq-siege-lbl{font-size:8px;font-weight:600;color:var(--tx3);letter-spacing:.2px;}
.sq-siege-val{font-size:9px;font-weight:800;color:var(--tx2);}
.sq-march{display:inline-flex;align-items:center;gap:2px;background:var(--sur2);border:2px solid var(--bd);border-radius:4px;padding:2px 4px;font-size:9px;font-weight:700;color:var(--tx2);white-space:nowrap;flex-shrink:0;line-height:1.4;}
.sq-march-lbl{font-size:8px;font-weight:600;color:var(--tx3);letter-spacing:.2px;}
.sq-march-val{font-size:9px;font-weight:800;color:var(--tx2);}

/* ── STATS DISPLAY ── */
.stat-row{display:flex;gap:4px;flex-wrap:nowrap;margin-top:4px;width:100%;overflow:hidden;}
.stat-row::-webkit-scrollbar{display:none;}
.stat-item{display:flex;align-items:center;gap:2px;font-size:9px;font-weight:600;white-space:nowrap;}
.stat-lbl{color:var(--tx3);}
.stat-val{color:var(--tx);font-weight:700;}

/* ── ROSTER SECTION HEADER ── */
.section-hd{padding:10px 20px 6px;display:flex;align-items:center;gap:8px;}
.section-title{font-size:16px;font-weight:800;color:var(--tx);letter-spacing:.3px;}
.section-badge{font-size:11px;font-weight:700;background:var(--bg);border:1px solid var(--bd);border-radius:20px;padding:2px 10px;color:var(--tx2);}

/* ── SHOW LOW CHECKBOX ── */
.show-low-wrap{display:flex;align-items:center;gap:6px;margin-left:auto;}
.show-low-wrap label{display:flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:var(--tx2);cursor:pointer;user-select:none;}
.show-low-wrap input[type=checkbox]{width:14px;height:14px;accent-color:var(--red);cursor:pointer;}
.hidden-by-low{display:none!important;}

/* ── RANK SORT BUTTONS ── */
.rank-sort-wrap{display:flex;align-items:center;gap:4px;flex-wrap:wrap;width:100%;margin-top:5px;}
.rank-sort-label{font-size:10px;font-weight:700;color:var(--tx3);flex-shrink:0;}
.rank-sort-btn{padding:2px 9px;border-radius:20px;font-size:11px;font-weight:700;border:1.5px solid var(--bd);background:var(--sur);cursor:pointer;color:var(--tx2);transition:all .12s;user-select:none;font-family:'Noto Sans JP',sans-serif;}
.rank-sort-btn:hover{border-color:#64748b;color:#64748b;}
.rank-sort-btn.on{background:#64748b;border-color:#64748b;color:#fff;}
.rank-sort-btn.rst{border-color:var(--bd2);color:var(--tx3);}
.rank-sort-btn.rst:hover{border-color:var(--red);color:var(--red);}
.rank-sort-btn.rst.on{background:#64748b;border-color:#64748b;color:#fff;}
/* 兵種ソート・stat(武防計速)：グレー */
.rank-sort-btn.troop:hover,.rank-sort-btn.stat:hover{border-color:#64748b;color:#64748b;}
.rank-sort-btn.troop.on,.rank-sort-btn.stat.on{background:#64748b;border-color:#64748b;color:#fff;}
/* 始動：シアン */
.rank-sort-btn.stt-start:hover{border-color:#0891b2;color:#0891b2;}
.rank-sort-btn.stt-start.on{background:#0891b2;border-color:#0891b2;color:#fff;}
/* アクティブ：赤 */
.rank-sort-btn.stt-active:hover{border-color:#dc2626;color:#dc2626;}
.rank-sort-btn.stt-active.on{background:#dc2626;border-color:#dc2626;color:#fff;}
/* パッシブ：オレンジ */
.rank-sort-btn.stt-passive:hover{border-color:#d97706;color:#d97706;}
.rank-sort-btn.stt-passive.on{background:#d97706;border-color:#d97706;color:#fff;}

/* ── UPGRADE MODAL BUTTONS ── */
.upg-btn{padding:6px 14px;border-radius:20px;border:1.5px solid var(--bd);background:var(--sur);font-family:'Noto Sans JP',sans-serif;font-size:12px;font-weight:700;color:var(--tx2);cursor:pointer;transition:all .15s;}
.upg-btn:hover{border-color:#7c3aed;color:#7c3aed;}
.upg-sel-aw{background:linear-gradient(135deg,#7dd3fc,#e0f2fe)!important;border-color:#38bdf8!important;color:#0c4a6e!important;box-shadow:0 2px 8px rgba(14,165,233,.3);}
.upg-sel-en{background:linear-gradient(135deg,#5eead4,#ccfbf1)!important;border-color:#2dd4bf!important;color:#134e4a!important;box-shadow:0 2px 8px rgba(13,148,136,.3);}

/* ── AWAKENING / ENHANCE BADGES ── */
.aw-wrap{position:absolute;top:23px;right:4px;display:flex;flex-direction:column;gap:2px;align-items:flex-end;z-index:2;}
.aw-badge{font-size:8px;font-weight:800;padding:1px 5px;border-radius:10px;line-height:1.5;white-space:nowrap;display:flex;align-items:center;gap:1px;}
.aw-badge.aw{background:linear-gradient(135deg,#7dd3fc,#e0f2fe);color:#0c4a6e;box-shadow:0 1px 4px rgba(14,165,233,.3);}
.aw-badge.en{background:linear-gradient(135deg,#5eead4,#ccfbf1);color:#134e4a;box-shadow:0 1px 4px rgba(13,148,136,.3);}
/* gcard内バッジ */
.gcard .aw-wrap{top:23px;right:4px;}
/* placed内バッジ */
.placed .aw-wrap{top:25px;right:4px;}
/* slot upgrade info row */
.pg-upgrades{display:flex;gap:4px;flex-wrap:wrap;margin-top:3px;}

/* ── SLOT AVATAR BUTTON ── */
.slot-av-btn{position:relative;cursor:pointer;flex-shrink:0;border-radius:8px;display:inline-block;}
.slot-av-btn::after{content:'';position:absolute;inset:0;border-radius:8px;background:rgba(0,0,0,0);transition:background .15s;}
.slot-av-btn:hover::after{background:rgba(0,0,0,.32);}
.slot-av-hint{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:16px;color:#fff;opacity:0;transition:opacity .15s;pointer-events:none;border-radius:8px;text-shadow:0 1px 4px rgba(0,0,0,.6);}
.slot-av-btn:hover .slot-av-hint{opacity:1;}
.btn-reset{padding:5px 11px;border-radius:var(--rs);border:1.5px solid #fca5a5;background:#fff5f5;color:#c0392b;font-family:'Noto Sans JP',sans-serif;font-size:12px;font-weight:700;cursor:pointer;transition:all .15s;flex-shrink:0;white-space:nowrap;}
.btn-reset:hover{background:#fee2e2;border-color:#ef4444;}
.btn-own-all{margin-left:auto;padding:5px 11px;border-radius:var(--rs);border:1.5px solid #86efac;background:#f0fdf4;color:#15803d;font-family:'Noto Sans JP',sans-serif;font-size:12px;font-weight:700;cursor:pointer;transition:all .15s;flex-shrink:0;white-space:nowrap;}
.btn-own-all:hover{background:#dcfce7;border-color:#22c55e;}
@media(max-width:480px){
  .btn-reset{padding:5px 8px;font-size:11px;}
}

/* ── CHANGELOG FLOATING PANEL ── */
.btn-changelog-wrap{position:fixed;bottom:16px;right:16px;z-index:501;display:inline-flex;align-items:stretch;border-radius:20px;border:1.5px solid #93c5fd;background:#eff6ff;box-shadow:0 2px 10px rgba(37,99,235,.15);overflow:hidden;}
.btn-changelog{padding:7px 12px 7px 13px;border:none;background:transparent;color:#1d4ed8;font-family:'Noto Sans JP',sans-serif;font-size:12px;font-weight:700;cursor:pointer;transition:background .15s;white-space:nowrap;line-height:1;}
.btn-changelog:hover{background:rgba(219,234,254,.6);}
.btn-changelog-dismiss{padding:7px 10px 7px 8px;border:none;border-left:1px solid #bfdbfe;background:transparent;color:#93c5fd;font-size:11px;font-weight:700;cursor:pointer;transition:all .15s;line-height:1;display:flex;align-items:center;}
.btn-changelog-dismiss:hover{background:#fee2e2;color:#ef4444;}
.btn-changelog-wrap:hover{border-color:#3b82f6;box-shadow:0 4px 16px rgba(37,99,235,.22);}
.changelog-panel{position:fixed;bottom:54px;right:16px;width:320px;max-height:calc(70vh - 54px);background:#fff;border:1px solid var(--bd);border-radius:12px;box-shadow:0 8px 32px rgba(0,0,0,.14),0 2px 8px rgba(0,0,0,.08);display:flex;flex-direction:column;z-index:500;transition:opacity .2s,transform .2s;}
.changelog-panel.hide{opacity:0;pointer-events:none;transform:translateY(10px);}
.changelog-head{padding:11px 14px 10px;border-bottom:1px solid var(--bd);display:flex;align-items:center;gap:7px;flex-shrink:0;}
.changelog-head-icon{font-size:16px;line-height:1;}
.changelog-head-title{font-size:13px;font-weight:800;color:#18202e;flex:1;}
.changelog-close{width:24px;height:24px;border-radius:50%;border:1px solid var(--bd);background:var(--sur);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--tx3);transition:all .12s;flex-shrink:0;}
.changelog-close:hover{background:#fee2e2;border-color:#fca5a5;color:#ef4444;}
.changelog-body{overflow-y:auto;padding:12px 14px 14px;flex:1;}
.changelog-body::-webkit-scrollbar{width:4px;}
.changelog-body::-webkit-scrollbar-thumb{background:var(--bd2);border-radius:2px;}
.cl-entry{margin-bottom:14px;}
.cl-entry:last-child{margin-bottom:0;}
.cl-ver{display:inline-flex;align-items:center;gap:6px;margin-bottom:6px;}
.cl-ver-num{font-size:11px;font-weight:800;background:#1d4ed8;color:#fff;padding:1px 7px;border-radius:20px;}
.cl-ver-date{font-size:10px;color:var(--tx3);}
.cl-item{display:flex;gap:5px;align-items:flex-start;margin-bottom:3px;font-size:11px;line-height:1.6;color:var(--tx);}
.cl-badge{font-size:8px;font-weight:700;padding:1px 4px;border-radius:3px;white-space:nowrap;flex-shrink:0;margin-top:2px;}
.cl-badge.new{background:#dcfce7;color:#15803d;}
.cl-badge.fix{background:#fef3c7;color:#92400e;}
.cl-badge.change{background:#eff6ff;color:#1d4ed8;}
@media(max-width:400px){
  .changelog-panel{width:calc(100vw - 24px);right:12px;}
}

.reset-ov{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;z-index:9999;backdrop-filter:blur(4px);}
.reset-ov.hide{display:none;}
.reset-modal{background:#fff;border-radius:14px;box-shadow:0 8px 40px rgba(0,0,0,.18);width:92%;max-width:360px;padding:30px 28px 24px;text-align:center;animation:rmIn .22s cubic-bezier(.34,1.56,.64,1);}
@keyframes rmIn{from{opacity:0;transform:scale(.88)}to{opacity:1;transform:scale(1)}}
.reset-icon{font-size:44px;margin-bottom:12px;line-height:1;}
.reset-title{font-size:16px;font-weight:800;color:#18202e;margin-bottom:10px;}
.reset-desc{font-size:13px;color:#58627a;line-height:1.7;margin-bottom:22px;}
.reset-btns{display:flex;gap:10px;}
.reset-cancel{flex:1;padding:10px;border-radius:var(--rs);border:1.5px solid var(--bd);background:var(--sur);font-family:'Noto Sans JP',sans-serif;font-size:13px;font-weight:700;color:var(--tx2);cursor:pointer;transition:all .15s;}
.reset-cancel:hover{background:var(--bg);}
.reset-confirm{flex:1;padding:10px;border-radius:var(--rs);border:none;background:#dc2626;color:#fff;font-family:'Noto Sans JP',sans-serif;font-size:13px;font-weight:700;cursor:pointer;transition:all .15s;box-shadow:0 2px 8px rgba(220,38,38,.35);}
.reset-confirm:hover{background:#b91c1c;}