/* ================= 隋唐志 · 界面 ================= */
: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 h3{margin:0 0 3px;font:600 16px var(--serif);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}
.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}
.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:860px}
.startgrid{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:16px 22px}
.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:14px;border:1px solid #3a4a5c;background:#121a24;color:#9fb0c4;padding:9px 11px;
  font-size:11px;line-height:1.85;border-radius:4px}
.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}
.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}
}