/* ================= 隋唐志 · 界面 ================= */
:root{
  --bg:#0e1218; --panel:#161c25; --panel2:#1b2330; --line:#2b3646;
  --gold:#d8a53a; --gold2:#f0c66b; --ink:#dbe1ea; --dim:#8693a6;
  --red:#d9534f; --green:#5fa36b; --blue:#5b8fc9;
  --serif:'Noto Serif SC','Source Han Serif SC','Songti SC','SimSun',serif;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  background:var(--bg); color:var(--ink);
  font:13px/1.6 system-ui,-apple-system,'Segoe UI','Microsoft YaHei',sans-serif;
  overflow:hidden;
}
button,input,select{font-family:inherit;font-size:inherit;color:inherit}
button{cursor:pointer;border:1px solid var(--line);background:var(--panel2);border-radius:4px;padding:5px 10px;transition:.15s}
button:hover{border-color:var(--gold);color:var(--gold2)}
button.primary{background:linear-gradient(180deg,#c8952f,#a9781f);border-color:#e6bd63;color:#1a1206;font-weight:700;padding:8px 28px;letter-spacing:4px}
button.primary:hover{filter:brightness(1.12);color:#1a1206}
button.ghost{background:transparent;padding:5px 9px;color:var(--dim);font-size:12px}
button.advance{background:linear-gradient(180deg,#2b3a4d,#1e2938);border-color:#4a5f79;color:var(--gold2);font-weight:600}
button.advance.alt{background:var(--panel2);color:var(--ink);border-color:var(--line);font-weight:400}
button.advance.active{background:var(--gold);color:#1a1206}
input,select{background:#0f151d;border:1px solid var(--line);border-radius:4px;padding:6px 8px;outline:none;width:100%}
input:focus,select:focus{border-color:var(--gold)}
::-webkit-scrollbar{width:7px;height:7px}
::-webkit-scrollbar-thumb{background:#344154;border-radius:4px}
::-webkit-scrollbar-track{background:transparent}

#app{display:flex;flex-direction:column;height:100vh}
/* ---------- 顶栏 ---------- */
#topbar{height:62px;flex:0 0 62px;display:flex;align-items:center;gap:16px;padding:0 14px;
  background:linear-gradient(180deg,#1a2230,#121820);border-bottom:1px solid #38455a;box-shadow:0 2px 12px #0007;z-index:5}
.brand{display:flex;align-items:center;gap:9px;flex:0 0 auto}
.brand b{font:700 19px/1 var(--serif);letter-spacing:3px;color:var(--gold2);display:block}
.brand small{font:10px/1.4 var(--serif);color:#7d8ca0;letter-spacing:5px}
.seal{width:34px;height:34px;display:grid;place-items:center;background:#a63c34;color:#ffe9c9;
  font:700 20px var(--serif);border-radius:3px;box-shadow:inset 0 0 0 2px #d8705f55}
.seal.big{width:52px;height:52px;font-size:31px;margin:0 auto 8px}
.datebox{flex:0 0 auto;border-left:1px solid var(--line);padding-left:15px}
#eraLine{font:600 16px var(--serif);color:var(--gold2);letter-spacing:1px}
.datebox .sub{font-size:11px;color:var(--dim)}
.chips{flex:1;display:flex;gap:5px;overflow:hidden;align-items:center;mask-image:linear-gradient(90deg,#000 92%,transparent)}
.chip{display:flex;align-items:center;gap:5px;padding:3px 8px;border:1px solid var(--line);border-radius:20px;
  font-size:11px;white-space:nowrap;background:#131a24}
.chip i{width:7px;height:7px;border-radius:50%;display:inline-block}
.chip b{color:var(--ink);font-weight:600}
.chip span{color:var(--dim)}
.topbtns{display:flex;gap:5px;align-items:center;flex:0 0 auto}
.topbtns .sep{width:1px;height:24px;background:var(--line);margin:0 3px}

/* ---------- 主体 ---------- */
main{flex:1;display:flex;min-height:0}
#left{flex:0 0 252px;background:var(--panel);border-right:1px solid var(--line);overflow-y:auto;padding:10px}
#right{flex:0 0 336px;background:var(--panel);border-left:1px solid var(--line);display:flex;flex-direction:column;min-height:0}
#center{flex:1;min-width:0;display:flex;flex-direction:column;background:#0b1017}
.panel-title{font:600 12px var(--serif);letter-spacing:6px;color:var(--gold);text-align:center;
  padding:3px 0 10px;border-bottom:1px solid var(--line);margin-bottom:10px}

/* ---------- 个人卡 ---------- */
.hero-name{display:flex;align-items:baseline;gap:8px;justify-content:center;margin:2px 0 2px}
.hero-name b{font:700 23px var(--serif);color:#f2dfb8;letter-spacing:2px}
.hero-name small{color:var(--dim);font-size:11px}
.hero-sub{text-align:center;color:var(--dim);font-size:11px;margin-bottom:10px}
.tagrow{display:flex;gap:5px;justify-content:center;flex-wrap:wrap;margin-bottom:12px}
.tag{font-size:10px;padding:2px 8px;border-radius:3px;border:1px solid var(--line);background:#1d2633;color:#b9c5d4}
.tag.gold{border-color:#7c6128;color:var(--gold2);background:#2a2315}
.tag.red{border-color:#7b3b38;color:#ed9a90;background:#2d1b1a}
.tag.green{border-color:#3d6b47;color:#a5d8ae;background:#18281d}
.stats{margin-bottom:12px}
.stat{display:flex;align-items:center;gap:7px;margin:5px 0;font-size:11px}
.stat .sn{width:30px;color:var(--dim);flex:0 0 auto}
.bar{flex:1;height:7px;background:#0d131b;border-radius:4px;overflow:hidden;border:1px solid #26313f}
.bar i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,#8a6d2c,#e0b457)}
.stat b{width:26px;text-align:right;color:var(--gold2);font-variant-numeric:tabular-nums}
.kv{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);margin-bottom:10px}
.kv>div{background:var(--panel2);padding:6px 8px}
.kv label{display:block;font-size:10px;color:var(--dim)}
.kv b{font:600 14px var(--serif);color:#e8d5ac;font-variant-numeric:tabular-nums}
.sect{font:600 11px var(--serif);letter-spacing:3px;color:var(--gold);margin:12px 0 6px;border-bottom:1px dashed #38455a;padding-bottom:3px}
.trait{display:inline-block;font-size:10px;background:#222c3a;border:1px solid #3a4a5f;color:#a9c0d8;padding:1px 6px;border-radius:3px;margin:2px 3px 2px 0}
.mini{font-size:11px;color:var(--dim);line-height:1.8}
.mini b{color:#cdd8e6}
.progress{height:6px;background:#0d131b;border-radius:4px;overflow:hidden;margin:5px 0}
.progress i{display:block;height:100%;background:linear-gradient(90deg,#5b8fc9,#9dc4ea)}

/* ---------- 地图 ---------- */
.mapwrap{flex:1;position:relative;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
#map{display:block;cursor:crosshair;background:#101720;box-shadow:0 0 40px #000a,0 0 0 1px #2a3546}
.maptip{position:absolute;pointer-events:none;background:#111922ee;border:1px solid #55667e;border-radius:5px;
  padding:7px 10px;font-size:11px;min-width:150px;z-index:4;box-shadow:0 6px 20px #000a}
.maptip b{font:600 14px var(--serif);color:var(--gold2)}
.maptip .mr{display:flex;justify-content:space-between;gap:12px;color:#aab8c9}
.maplegend{position:absolute;left:10px;bottom:8px;display:flex;gap:12px;align-items:center;
  background:#0d131cbb;border:1px solid #2c3848;border-radius:4px;padding:4px 9px;font-size:10px;color:var(--dim)}
.maplegend .dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:4px;vertical-align:-1px}
.dot.player{background:#ff7a5c}.dot.capital{background:#f0c66b}.dot.army{background:#7fd4ff}
.lg-note{color:#5f6c7e}
.selectcard{position:absolute;right:10px;top:10px;width:210px;background:#111922f2;border:1px solid #55667e;
  border-radius:5px;padding:10px;z-index:3;box-shadow:0 8px 24px #000b}
.selectcard{backdrop-filter:blur(2px)}
.selectcard h3{margin:0 0 3px;font:600 16px var(--serif);color:var(--gold2)}
.selectcard .sc-close{position:absolute;right:5px;top:4px;width:20px;height:20px;line-height:16px;
  padding:0;flex:none;font-size:15px;background:transparent;border:0;color:var(--dim);cursor:pointer}
.selectcard .sc-close:hover{color:var(--gold2)}
.selectcard .sc-sub{font-size:10px;color:var(--dim);margin-bottom:7px}
.selectcard .sc-row{display:flex;justify-content:space-between;font-size:11px;padding:2px 0;color:#b8c4d2}
.selectcard .sc-row b{color:#e4d7b8}
.selectcard .sc-btns{display:flex;gap:5px;margin-top:8px}
.selectcard button{flex:1;font-size:11px;padding:4px}
.hidden{display:none!important}
.ticker{height:26px;flex:0 0 26px;background:#131a24;border-top:1px solid var(--line);display:flex;align-items:center;
  padding:0 10px;font-size:11px;color:var(--dim);overflow:hidden;white-space:nowrap}
.ticker b{color:var(--gold2);margin-right:8px}

/* ---------- 右栏 ---------- */
.tabs{display:flex;flex:0 0 auto;border-bottom:1px solid var(--line);background:#121924}
.tabs button{flex:1;border:0;border-radius:0;background:transparent;color:var(--dim);padding:9px 2px;font-size:12px}
.tabs button:hover{color:var(--gold2);background:#1a2330}
.tabs button.on{color:var(--gold2);border-bottom:2px solid var(--gold);background:#1b2431;font-weight:600}
.tabbody{flex:1;overflow-y:auto;padding:10px}
.grp{margin-bottom:14px}
.grp h4{font:600 11px var(--serif);letter-spacing:3px;color:var(--gold);margin:0 0 7px;
  border-bottom:1px dashed #38455a;padding-bottom:4px;display:flex;justify-content:space-between}
.grp h4 small{color:var(--dim);font-weight:400;letter-spacing:0}
.taskgrid{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.taskbtn{text-align:left;padding:6px 8px;background:#19212d;border:1px solid #2c3848;border-radius:4px;position:relative}
.taskbtn:hover{border-color:var(--gold);background:#232c3a}
.taskbtn b{display:block;font-size:12px;color:#e2d7bd;font-weight:600}
.taskbtn small{display:block;font-size:10px;color:var(--dim);line-height:1.4}
.taskbtn .odds{position:absolute;right:6px;top:5px;font-size:10px;color:var(--green)}
.taskbtn:disabled{opacity:.38;cursor:not-allowed}
.taskbtn:disabled:hover{border-color:#2c3848;background:#19212d}
/* data-locked：可点击但给出不可用原因，避免「点了没反应」 */
button.locked,.locked{opacity:.46!important;cursor:not-allowed!important;filter:saturate(.55)}
button.locked:hover{border-color:#3a4658!important;background:#1b2430!important;transform:none!important}
.line{display:flex;gap:6px;align-items:center;margin:6px 0;font-size:11px}
.line label{width:56px;color:var(--dim);flex:0 0 auto}
.line input,.line select{flex:1;min-width:0;padding:4px 6px;font-size:11px}
.line .val{width:66px;text-align:right;color:var(--gold2);font-variant-numeric:tabular-nums}
.btnrow{display:flex;gap:5px;margin-top:8px;flex-wrap:wrap}
.btnrow button{flex:1;min-width:70px;font-size:11px;padding:6px 4px}
.meter{display:flex;align-items:center;gap:6px;margin:4px 0;font-size:11px}
.meter span{width:32px;color:var(--dim)}
.meter .bar{height:8px}
.meter b{width:34px;text-align:right;color:#cdd8e6;font-size:10px}
.cityline{display:flex;justify-content:space-between;padding:5px 7px;background:#19212d;border:1px solid #2a3544;
  border-radius:4px;margin-bottom:4px;font-size:11px;cursor:pointer}
.cityline:hover{border-color:var(--gold)}
.cityline b{color:#e2d7bd}
.cityline small{color:var(--dim)}
.frow{display:flex;justify-content:space-between;align-items:center;padding:6px 4px;border-bottom:1px solid #232e3c;font-size:11px}
.frow:last-child{border:0}
.frow .fname{display:flex;align-items:center;gap:6px}
.frow .fname i{width:9px;height:9px;border-radius:2px}
.frow .fname b{font-weight:600}
.frow .fnum{color:var(--dim);font-variant-numeric:tabular-nums}
.frow .fnum em{color:var(--gold2);font-style:normal}
/* 云端页 */
.tabs button{font-size:11px;padding:9px 0}
.cloudrow{display:flex;align-items:center;gap:5px;padding:5px 7px;background:#19212d;
  border:1px solid #2a3544;border-radius:4px;margin-bottom:5px;font-size:11px}
.cloudrow .cname{flex:1;color:#e2d7bd;font-weight:600}
.cloudrow small{color:var(--dim);font-size:10px}
.boardrow{display:grid;grid-template-columns:24px 1fr 42px 58px;gap:4px;padding:4px 6px;
  border-bottom:1px solid #232e3c;font-size:11px;color:#b8c4d2}
.boardrow b{color:#e2d7bd}
.boardrow.head{color:var(--gold);font-weight:600;border-bottom-color:#38455a}
#tabBody a{text-decoration:none}
/* ---------- 程序化武将头像 ---------- */
.hero-top{display:flex;gap:9px;align-items:flex-start;margin:2px 0 9px}
.hero-portrait{width:88px;height:106px;flex:0 0 88px;border-radius:4px;overflow:hidden;
  box-shadow:0 3px 12px #0008,0 0 0 1px #3a4a5e}
.hero-portrait svg,.avatar-sm svg,.avatar-xs svg,.offprev-p svg,
.hero-portrait .pwrap,.avatar-sm .pwrap,.avatar-xs .pwrap,.offprev-p .pwrap{width:100%;height:100%;display:block}
.hero-meta{flex:1;min-width:0;padding-top:3px}
.hero-meta .hero-name{justify-content:flex-start;margin:0 0 3px}
.hero-meta .hero-name b{font-size:20px}
.hero-meta .hero-sub{text-align:left;margin:0 0 2px;font-size:10.5px;line-height:1.55}
.avatar-sm{display:inline-block;width:20px;height:24px;vertical-align:-7px;border-radius:2px;
  overflow:hidden;margin-right:4px;box-shadow:0 0 0 1px #3a4a5e}
.avatar-xs{display:inline-block;width:17px;height:21px;vertical-align:-6px;border-radius:2px;
  overflow:hidden;margin-right:5px;box-shadow:0 0 0 1px #3a4a5e}
.offlist{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}
.offchip{display:inline-flex;align-items:center;gap:2px;background:#19212d;border:1px solid #2a3544;
  border-radius:3px;padding:2px 6px 2px 2px;font-size:10.5px;color:#cdd8e6}
.offchip small{color:var(--dim);font-size:9px;margin-left:2px}
.offprev{display:flex;gap:10px;align-items:center;margin-top:8px}
.offprev:empty{display:none}
.offprev-p{width:64px;height:77px;flex:0 0 64px;border-radius:4px;overflow:hidden;
  box-shadow:0 0 0 1px #3a4a5e}
.offprev-t{font-size:11px;color:#b8c4d2;line-height:1.7}
.offprev-t b{font:600 15px var(--serif);color:#f0dcb4}
.offprev-t span{color:var(--dim)}
.offprev-t small{color:#7e8fa4}
/* 古画绣像备选：原页为「左题赞 / 右立像」跨页，取右半上部人物 */
.pwrap{position:relative;width:100%;height:100%;overflow:hidden;isolation:isolate}
.pwrap .pimg{position:relative;z-index:1}
/* 古画线描本是黑白，用 color 混合模式罩染成朱/金/青/黛，避免黑白像 */
.ptint{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(155deg,#c25a34 0%,#d8a441 32%,#3d8478 66%,#33527f 100%);
  mix-blend-mode:color;opacity:.72}
.pimg{width:100%;height:100%;display:block;object-fit:cover;object-position:50% 32%;
  filter:saturate(1.06) contrast(1.06) brightness(1.02)}
.pmode{display:flex;gap:3px;justify-content:center;margin:-3px 0 9px}
.pmode button{font-size:10px;padding:2px 8px;color:var(--dim);background:transparent}
.pmode button.on{color:var(--gold2);border-color:var(--gold);background:#2a2719}
/* ---------- 战报 / 战斗特效 / 攻城工程 ---------- */
.battlebox{width:660px;padding:18px 20px 4px}
.bhead{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:1px solid var(--line);padding-bottom:8px}
.bhead h2{font:700 20px var(--serif);letter-spacing:3px;color:var(--gold2);margin:4px 0 0}
#btCanvas{width:100%;height:196px;margin:12px 0 8px;border:1px solid #3a4a5e;border-radius:4px;background:#0d141d}
.bmeta{font-size:11px;color:#aab8c8;line-height:1.8;background:#121a24;border:1px solid #2a3544;border-radius:4px;padding:7px 9px}
.bphases{margin-top:9px;max-height:190px;overflow-y:auto}
.bphase{padding:7px 9px;border:1px solid #2a3544;border-radius:4px;margin-bottom:6px;background:#161d27;font-size:11px;color:#b8c4d2;transition:.2s}
.bphase.on{border-color:var(--gold);background:#252318;box-shadow:0 0 12px #d8a53a22}
.bphase b{color:#e8d5ac;font:600 13px var(--serif)}
.bpow{float:right;color:var(--gold2);font-variant-numeric:tabular-nums}
.bskills{margin-top:4px}
.bskills span{display:inline-block;font-size:10px;background:#222c3a;border:1px solid #3a4a5f;color:#c8d8ea;padding:1px 6px;border-radius:3px;margin:2px 4px 0 0}
.bskills small{color:var(--dim)}
.enggrid{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.engbtn{text-align:left;padding:6px 8px;background:#19212d;border:1px solid #2c3848}
.engbtn b{display:block;font-size:11px;color:#e2d7bd}
.engbtn small{display:block;font-size:10px;color:var(--dim);line-height:1.4}
.engbtn.dim{opacity:.5}
.engcheck{display:grid;grid-template-columns:1fr 1fr;gap:3px 8px;font-size:11px}
.engcheck label{display:flex;align-items:center;gap:5px;color:#b8c4d2;cursor:pointer}
.engcheck input{width:auto;accent-color:var(--gold)}
.engcheck small{color:var(--dim);margin-left:auto}
/* ---------- 三国志式对话 + 军师提示 ---------- */
.dlgbox{width:780px;padding:14px 16px 10px}
.dlg-head{display:flex;align-items:baseline;gap:12px;border-bottom:1px solid var(--line);padding-bottom:7px;margin-bottom:10px}
.dlg-head b{font:600 16px var(--serif);color:var(--gold2);letter-spacing:3px}
.dlg-head button{margin-left:auto}
.dlg-stage{position:relative;height:330px;border:1px solid #3a4a5e;border-radius:5px;overflow:hidden;background:#101720}
.dlg-bg{position:absolute;inset:0;background-image:url('assets/classic/face_01.jpg');background-size:cover;
  background-position:center;opacity:.10;filter:sepia(.6) contrast(1.2)}
.dlg-portrait{position:absolute;left:0;top:0;bottom:0;width:210px;overflow:hidden;
  border-right:1px solid #4a5a6e;background:#141c26}
.dlg-portrait svg,.dlg-portrait .pimg,.dlg-portrait .pwrap{width:100%;height:100%;display:block;object-fit:cover;object-position:50% 22%}
.dlg-portrait:after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,transparent 58%,#101720 100%)}
.dlg-box{position:absolute;left:226px;right:14px;bottom:14px;top:14px;
  background:linear-gradient(180deg,#151d28ee,#101720f2);border:1px solid #6b5a35;border-radius:5px;
  padding:12px 14px;display:flex;flex-direction:column;box-shadow:inset 0 0 0 1px #0006}
.dlg-name{display:flex;align-items:baseline;gap:10px;border-bottom:1px dashed #4a5a6e;padding-bottom:6px}
.dlg-name span{font:600 18px var(--serif);color:#f0dcb4;letter-spacing:2px}
.dlg-name small{color:var(--dim);font-size:11px}
#dlgText{flex:1;margin:10px 2px;font:14px/2 var(--serif);color:#dfe6ef;letter-spacing:.5px}
.dlg-choices{display:flex;flex-direction:column;gap:5px;margin-bottom:8px}
.dlg-choices button{text-align:left;font-size:12px;padding:7px 11px;background:#1b2532;border-color:#46586e}
.dlg-choices button:hover{background:#2a2719;color:var(--gold2)}
.dlg-foot{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #2a3544;padding-top:8px}
#dlgProgress{font-size:11px;color:var(--dim)}
.dlg-foot button{padding:6px 20px;letter-spacing:2px;font-size:12px}
.hintdock{position:fixed;right:16px;bottom:104px;width:310px;z-index:45;animation:hintIn .3s ease}
@keyframes hintIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.hintcard{display:flex;gap:9px;align-items:flex-start;background:#18212df2;border:1px solid #6b5a35;
  border-radius:5px;padding:9px;box-shadow:0 8px 26px #000b}
.hint-pic{width:40px;height:50px;flex:0 0 40px;border-radius:3px;overflow:hidden;
  border:1px solid #4a5a6e;background:#101720}
.hint-pic svg,.hint-pic .pimg,.hint-pic .pwrap{width:100%;height:100%;display:block;object-fit:cover}
.hintcard>div{flex:1;min-width:0}
.hintcard b{display:block;font:600 12px var(--serif);color:var(--gold2);margin-bottom:2px}
.hintcard p{margin:0;font-size:11px;line-height:1.65;color:#c2cede}
.hintcard>button{align-self:flex-start;border:0;background:transparent;color:var(--dim);padding:0 3px;font-size:14px}
/* ---------- 三国志 13/14 风：金线、光晕、层次、动效 ---------- */
#topbar{background:linear-gradient(180deg,#1d2735 0%,#141c27 62%,#101720 100%);
  box-shadow:0 2px 14px #000a,inset 0 -1px 0 #d8a53a33}
#left,#right{background:linear-gradient(180deg,#181f2b,#141a24)}
.panel-title{background:linear-gradient(90deg,transparent,#d8a53a22,transparent);
  border-bottom:1px solid #6b5a35;color:#f0c66b;text-shadow:0 0 10px #d8a53a55}
.hero-portrait{box-shadow:0 0 0 1px #d8a53a77,0 4px 16px #000b,inset 0 0 20px #0005}
.tabs button.on{box-shadow:inset 0 2px 0 var(--gold),0 0 14px #d8a53a22}
button.primary{box-shadow:0 2px 10px #d8a53a33,inset 0 1px 0 #ffe9b055}
.dlg-portrait{box-shadow:inset -18px 0 34px #0007,0 0 26px #d8a53a22}
.dlg-portrait .pimg{object-position:50% 18%}
.dlg-name span{text-shadow:0 0 12px #d8a53a66}
.dlg-choices button{position:relative;overflow:hidden}
.dlg-choices button:hover{box-shadow:inset 3px 0 0 var(--gold),0 0 14px #d8a53a22}
.hintcard{border-left:3px solid var(--gold);backdrop-filter:blur(4px)}
#dlgText{animation:dlgIn .28s ease}
@keyframes dlgIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
#dlgTitle{text-shadow:0 0 14px #d8a53a55}
.warn{background:#2a1d1a;border:1px solid #6b3b32;color:#e8b4a4;padding:6px 8px;border-radius:4px;font-size:11px;margin:6px 0}
.info{background:#16252a;border:1px solid #34575f;color:#a8ccd6;padding:6px 8px;border-radius:4px;font-size:11px;margin:6px 0}
.olist{max-height:180px;overflow-y:auto}
.armyitem{background:#1a2029;border:1px solid #34435a;border-radius:4px;padding:6px 8px;margin-bottom:5px;font-size:11px}
.armyitem b{color:#9dc4ea}
.logitem{padding:4px 6px;border-bottom:1px solid #222c39;font-size:11px;color:#b7c3d1}
.logitem time{color:#62728a;margin-right:6px;font-variant-numeric:tabular-nums}
.logitem.player{color:#f0c66b}.logitem.war{color:#e79a8e}
.logitem.event{color:#9dc4ea}.logitem.task{color:#a8d4b0}.logitem.fail{color:#7e8a9b}

/* ---------- 底栏 ---------- */
#bottom{flex:0 0 92px;background:#101721;border-top:1px solid var(--line);padding:5px 12px;overflow-y:auto}
#logList{display:grid;grid-template-columns:repeat(2,1fr);gap:0 18px}
#logList .line{display:block;margin:1px 0;font-size:11px;color:#aab7c6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#logList .line span{color:#5d6c82;margin-right:7px}

/* ---------- 弹窗 ---------- */
.modal{position:fixed;inset:0;background:#05080cd9;display:none;align-items:center;justify-content:center;z-index:50;backdrop-filter:blur(3px)}
.modal.show{display:flex}
.modalbox{background:linear-gradient(180deg,#1c2532,#141b25);border:1px solid #5a6b82;border-radius:6px;
  box-shadow:0 20px 70px #000d,inset 0 0 0 1px #ffffff08;max-height:92vh;overflow-y:auto}
.modalhead{text-align:center;padding:22px 20px 12px;border-bottom:1px solid var(--line)}
.modalhead h1{font:700 28px var(--serif);letter-spacing:8px;color:var(--gold2);margin:0 0 4px}
.modalhead p{color:var(--dim);font-size:12px;margin:0;letter-spacing:1px}
.startbox{width:1080px}
.startgrid{display:grid;grid-template-columns:300px 1fr;gap:18px;padding:14px 20px}
.startcol label{display:block;font:600 11px var(--serif);letter-spacing:2px;color:var(--gold);margin:10px 0 5px}
.startcol label:first-child{margin-top:0}
.startcol label small{color:var(--dim);letter-spacing:0;font-weight:400}
.optionlist{display:flex;flex-direction:column;gap:5px;max-height:196px;overflow-y:auto;padding-right:3px}
.opt{border:1px solid #2e3a4a;background:#18212d;border-radius:4px;padding:7px 9px;cursor:pointer}
.opt:hover{border-color:#8a743c}
.opt.on{border-color:var(--gold);background:#2a2719;box-shadow:inset 0 0 0 1px #d8a53a33}
.opt b{font-size:12px;color:#e6d9bb}
.opt small{display:block;font-size:10px;color:var(--dim);line-height:1.45;margin-top:2px}
.origins{display:grid;grid-template-columns:1fr 1fr;max-height:none;overflow:visible}
.origins .opt{padding:6px 8px}
.startnote{margin-top:12px;border:1px solid #3a4a5c;background:#121a24;color:#9fb0c4;padding:9px 11px;
  font-size:10px;line-height:1.75;border-radius:4px}
/* ---- 英雄图鉴（开局选人） ---- */
.herocol{min-width:0}
#heroSearch{width:100%;box-sizing:border-box;margin-bottom:6px}
.herofilters{display:flex;gap:4px;overflow-x:auto;padding:2px 0 6px;scrollbar-width:thin}
.herofilters button{flex:0 0 auto;font-size:10px;padding:3px 8px;border:1px solid #3a4a5c;
  background:#18212d;color:#9fb0c4;border-radius:11px;cursor:pointer;white-space:nowrap}
.herofilters button:hover{border-color:#8a743c}
.herofilters button.on{background:#3a3018;border-color:var(--gold);color:var(--gold2)}
.herogrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:6px;
  max-height:300px;overflow-y:auto;padding:6px;border:1px solid #2e3a4a;border-radius:4px;background:#0f1721}
.herocard{border:1px solid #2e3a4a;background:#18212d;border-radius:4px;padding:5px 4px 6px;
  cursor:pointer;text-align:center;transition:.15s}
.herocard:hover{border-color:#8a743c;transform:translateY(-1px)}
.herocard.on{border-color:var(--gold);background:#2e2717;box-shadow:0 0 0 1px #d8a53a55,0 0 12px #d8a53a33}
.herocard .hp{width:100%;height:74px;overflow:hidden;border-radius:2px;background:#111a25}
.herocard .hp svg,.herocard .hp .pwrap{width:100%;height:100%;display:block}
.herocard .hp img{width:100%;height:100%;object-fit:cover}
.herocard b{display:block;font:600 11px var(--serif);color:#f0dcb4;margin-top:3px;line-height:1.2}
.herocard small{display:block;font-size:9px;color:#7f90a4;line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.herocard .hv{font-size:9px;color:#8fb0cf;margin-top:2px}
.hero-detail{display:flex;gap:11px;margin-top:8px;min-height:0;border:1px solid #3a4a5c;
  background:linear-gradient(135deg,#18222e,#121a24);border-radius:4px;padding:8px}
.hero-detail:empty{display:none}
.hd-pic{flex:0 0 88px;height:106px;overflow:hidden;border:1px solid #8a744a;border-radius:3px;background:#111a25}
.hd-pic svg,.hd-pic .pwrap{width:100%;height:100%;display:block}
.hd-pic img{width:100%;height:100%;object-fit:cover}
.hd-txt{flex:1;min-width:0;font-size:10px;line-height:1.6;color:#b8c6d6}
.hd-txt h4{margin:0 0 2px;font:700 15px var(--serif);color:var(--gold2);letter-spacing:1px}
.hd-txt .hd-title{color:#d8b878;font-size:10px;margin-bottom:3px}
.hd-txt .hd-stats{color:#9fc0dc;margin-bottom:3px}
.hd-txt .hd-bio{color:#9aa9bb;line-height:1.55;max-height:46px;overflow:hidden}
.hd-txt .hd-skills span{display:inline-block;border:1px solid #4b5f74;background:#1c2834;
  color:#c9dcae;border-radius:3px;padding:1px 5px;margin:2px 3px 0 0;font-size:9px}
@media (max-width:1100px){
  .startgrid{grid-template-columns:1fr}
  .herogrid{max-height:170px}
  .startnote{display:none}
}
.modalfoot{display:flex;justify-content:center;align-items:center;gap:16px;padding:12px 20px 18px;border-top:1px solid var(--line);margin-top:6px}
.chk{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--dim);cursor:pointer;letter-spacing:0}
.chk input{width:auto;accent-color:var(--gold)}
.eventbox{width:520px;padding:24px 28px 6px;position:relative}
.eventbox:before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(#c8952f,#7a4a2a)}
.evdate{font:11px var(--serif);letter-spacing:3px;color:var(--dim)}
.eventbox h2{font:700 23px var(--serif);letter-spacing:4px;color:var(--gold2);margin:6px 0 12px}
.eventbox p{font-size:13px;line-height:2;color:#c3cedd;margin:0 0 14px;min-height:60px}
.evfx{display:flex;flex-wrap:wrap;gap:5px;min-height:20px}
.evfx span{font-size:10px;border:1px solid #4b5f74;background:#1c2834;color:#a9c7e0;border-radius:3px;padding:2px 7px}
.evcount{font-size:11px;color:var(--dim)}
.helpbox{width:820px;padding:22px 26px 4px}
.confirmbox{width:420px;padding:22px 24px 6px;text-align:center}
.confirmbox h3{font-size:18px;margin:2px 0 12px;color:var(--gold2)}
.confirmbox p{font-size:13px;line-height:1.85;color:#cdd8e6;margin:0 0 6px;min-height:42px;display:flex;align-items:center;justify-content:center}
.helpbox h2{font:700 22px var(--serif);letter-spacing:6px;color:var(--gold2);text-align:center;margin:0 0 16px}
.helpgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px 20px}
.helpgrid h3{font:600 13px var(--serif);color:var(--gold);margin:0 0 4px;letter-spacing:2px}
.helpgrid p{font-size:11px;color:#aab8c8;line-height:1.85;margin:0}
.toast{position:fixed;left:50%;bottom:112px;transform:translateX(-50%) translateY(12px);background:#222c3ae8;
  border:1px solid #6b7d92;color:#eee2c6;padding:8px 18px;border-radius:4px;font-size:12px;opacity:0;
  pointer-events:none;transition:.25s;z-index:60;box-shadow:0 8px 26px #000a;max-width:70vw}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.bad{border-color:#a55a4c;color:#f0b7a9}
@media (max-width:1250px){
  #left{flex-basis:220px}#right{flex-basis:300px}
  .chips{display:none}
  .startbox,.helpbox{width:94vw}
}