/* 弈定三国 —— 界面原型（横屏，手机 / 平板自适应）
   视觉：墨漆半透明面板 + 细金线 + 宋体标题，大面积留白让底图（地图编辑器渲染）透出来 */
:root{
  --u:min(.2564vh,.1185vw,1.55px);           /* 设计基准 844×390 → 1u，平板放大上限 1.55 */
  --ink:#0f0d0b; --ink2:rgba(16,13,10,.72); --ink3:rgba(16,13,10,.5);
  --gold:#d9b46a; --gold2:#f3dca4; --goldD:#8a6a34; --line:rgba(217,180,106,.38); --line2:rgba(217,180,106,.16);
  --txt:#f1e6cf; --dim:#a99a7e; --red:#b8402e; --red2:#e0674e; --jade:#5fae8e;
  --wei:#4d7cc2; --shu:#4f9a5e; --wu:#c8553f; --qun:#9a7a4a; --han:#c9a23a; --jin:#8a6ab8;
  --serif:"Noto Serif SC","Source Han Serif SC","Songti SC","STSong","SimSun",serif;
  --sans:-apple-system,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --r:calc(var(--u)*10); --sh:0 calc(var(--u)*8) calc(var(--u)*24) rgba(0,0,0,.45);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}
html,body{height:100%;background:var(--ink);color:var(--txt);font:calc(var(--u)*12)/1.5 var(--sans);overflow:hidden;user-select:none;-webkit-user-select:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
#app{position:fixed;inset:0;overflow:hidden}
.bgwrap{position:absolute;inset:0;overflow:hidden}
.bg{position:absolute;inset:-4%;background:#2a3a2a center/cover no-repeat;transition:background-image .6s,transform 12s ease-out,filter .6s;transform:scale(1.04)}
.bg.drift{animation:drift 40s ease-in-out infinite alternate}
@keyframes drift{from{transform:scale(1.06) translate(-1.2%,.6%)}to{transform:scale(1.1) translate(1.2%,-.8%)}}
.veil{position:absolute;inset:0;transition:background .6s;background:linear-gradient(90deg,rgba(10,8,6,.78),rgba(10,8,6,.15) 45%,rgba(10,8,6,.35))}
main{position:absolute;inset:0;padding:max(calc(var(--u)*12),env(safe-area-inset-top)) max(calc(var(--u)*16),env(safe-area-inset-right)) max(calc(var(--u)*10),env(safe-area-inset-bottom)) max(calc(var(--u)*16),env(safe-area-inset-left))}
.scr{position:absolute;inset:inherit;padding:inherit;animation:in .38s cubic-bezier(.2,.8,.2,1)}
@keyframes in{from{opacity:0;transform:translateY(calc(var(--u)*8))}to{opacity:1;transform:none}}
.serif{font-family:var(--serif)}

/* ---------- 通用组件 ---------- */
.glass{background:linear-gradient(180deg,rgba(28,23,18,.82),rgba(14,12,9,.86));border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh),inset 0 1px 0 rgba(255,230,180,.08);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);position:relative}
.glass::before{content:"";position:absolute;inset:calc(var(--u)*3);border:1px solid var(--line2);border-radius:calc(var(--r) - var(--u)*3);pointer-events:none}
.corner{position:absolute;width:calc(var(--u)*10);height:calc(var(--u)*10);border:1.5px solid var(--gold);pointer-events:none}
.corner.tl{left:-1px;top:-1px;border-right:0;border-bottom:0;border-top-left-radius:var(--r)}.corner.tr{right:-1px;top:-1px;border-left:0;border-bottom:0;border-top-right-radius:var(--r)}
.corner.bl{left:-1px;bottom:-1px;border-right:0;border-top:0;border-bottom-left-radius:var(--r)}.corner.br{right:-1px;bottom:-1px;border-left:0;border-top:0;border-bottom-right-radius:var(--r)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:calc(var(--u)*5);height:calc(var(--u)*30);padding:0 calc(var(--u)*16);border-radius:calc(var(--u)*15);font-family:var(--serif);font-weight:700;letter-spacing:.12em;font-size:calc(var(--u)*12.5);transition:transform .12s,filter .2s}
.btn:active{transform:scale(.96)}
.btn.pri{color:#2a1608;background:linear-gradient(180deg,#f6e2ab,#d5a95a 55%,#b8893f);box-shadow:0 calc(var(--u)*3) calc(var(--u)*10) rgba(217,180,106,.3),inset 0 1px 0 rgba(255,255,255,.6)}
.btn.red{color:#fff2e0;background:linear-gradient(180deg,#d4573f,#9e2e1f);box-shadow:0 calc(var(--u)*3) calc(var(--u)*10) rgba(184,64,46,.35),inset 0 1px 0 rgba(255,220,200,.35)}
.btn.ghost{border:1px solid var(--line);color:var(--gold2);background:rgba(15,12,9,.55)}
.ib{width:calc(var(--u)*30);height:calc(var(--u)*30);border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);background:rgba(15,12,9,.6);color:var(--gold2);font-size:calc(var(--u)*13)}
.ib:active{transform:scale(.92)}
.back{display:inline-flex;align-items:center;gap:calc(var(--u)*6);height:calc(var(--u)*28);padding:0 calc(var(--u)*12) 0 calc(var(--u)*8);border-radius:calc(var(--u)*14);border:1px solid var(--line);background:rgba(15,12,9,.6);color:var(--gold2);font-family:var(--serif);font-size:calc(var(--u)*12)}
.back::before{content:"";width:calc(var(--u)*7);height:calc(var(--u)*7);border-left:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin-left:calc(var(--u)*3)}
.topbar{position:absolute;left:inherit;right:0;top:0;display:flex;align-items:center;gap:calc(var(--u)*10);padding:inherit;padding-bottom:0;z-index:5;pointer-events:none}
.topbar>*{pointer-events:auto}
.topbar h2{font-family:var(--serif);font-size:calc(var(--u)*17);letter-spacing:.2em;color:var(--gold2);font-weight:700;text-shadow:0 2px 8px rgba(0,0,0,.6)}
.topbar .sp{flex:1}
.res{display:flex;gap:calc(var(--u)*4);padding:calc(var(--u)*3);border-radius:calc(var(--u)*16);background:rgba(12,10,8,.62);border:1px solid var(--line2)}
.res span{display:flex;align-items:center;gap:calc(var(--u)*5);padding:0 calc(var(--u)*9) 0 calc(var(--u)*3);height:calc(var(--u)*22);font-weight:600;font-size:calc(var(--u)*11.5);font-variant-numeric:tabular-nums}
.res i{width:calc(var(--u)*17);height:calc(var(--u)*17);border-radius:50%;display:grid;place-items:center;font-style:normal;font-family:var(--serif);font-size:calc(var(--u)*9.5);font-weight:900;color:#2a1608;background:radial-gradient(circle at 35% 30%,#fbe7b4,#c99a48)}
.res i.f{background:radial-gradient(circle at 35% 30%,#e8f0c0,#9aae4a)}.res i.p{background:radial-gradient(circle at 35% 30%,#f6c4b4,#c0503a);color:#fff}
.chip{height:calc(var(--u)*24);padding:0 calc(var(--u)*11);border-radius:calc(var(--u)*12);border:1px solid var(--line2);background:rgba(15,12,9,.5);color:var(--dim);font-size:calc(var(--u)*11);display:inline-flex;align-items:center;gap:calc(var(--u)*4);white-space:nowrap}
.chip.on{color:#2a1608;background:linear-gradient(180deg,#f3dca4,#cfa457);border-color:transparent;font-weight:700}
.chip i{width:calc(var(--u)*7);height:calc(var(--u)*7);border-radius:50%;display:inline-block}
.tag{display:inline-block;padding:0 calc(var(--u)*6);border-radius:calc(var(--u)*4);font-size:calc(var(--u)*9.5);line-height:calc(var(--u)*16);border:1px solid currentColor;opacity:.9}
.hr{height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent);margin:calc(var(--u)*8) 0}
.scroll-x{display:flex;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}.scroll-x::-webkit-scrollbar,.scroll-y::-webkit-scrollbar{display:none}
.scroll-y{overflow-y:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.bar{height:calc(var(--u)*4);border-radius:2px;background:rgba(255,255,255,.1);overflow:hidden}.bar b{display:block;height:100%;border-radius:2px;background:linear-gradient(90deg,#c99a48,#f3dca4)}
#toast{position:absolute;left:50%;top:18%;transform:translate(-50%,-10px);opacity:0;transition:.25s;padding:calc(var(--u)*7) calc(var(--u)*16);border-radius:calc(var(--u)*16);background:rgba(12,10,8,.88);border:1px solid var(--line);color:var(--gold2);font-family:var(--serif);font-size:calc(var(--u)*12);pointer-events:none;z-index:50;white-space:nowrap}
#toast.on{opacity:1;transform:translate(-50%,0)}
#rot{display:none;position:fixed;inset:0;z-index:99;background:var(--ink);color:var(--gold2);font-family:var(--serif);font-size:20px;place-items:center;text-align:center;align-content:center}
#rot small{display:block;color:var(--dim);font-size:13px;margin-top:6px}
@media (orientation:portrait) and (max-width:700px){#rot{display:grid}}

/* ---------- 底部抽屉 / 弹层 ---------- */
.sheet{position:absolute;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;background:rgba(6,5,4,0);pointer-events:none;transition:background .3s}
.sheet.on{background:rgba(6,5,4,.55);pointer-events:auto}
.sheet-in{transform:translateY(calc(var(--u)*30)) scale(.97);opacity:0;transition:.32s cubic-bezier(.2,.8,.2,1)}
.sheet.on .sheet-in{transform:none;opacity:1}
.dlg{width:min(calc(var(--u)*460),88vw);padding:calc(var(--u)*18) calc(var(--u)*20);max-height:86vh;overflow:auto;scrollbar-width:none}
.dlg h3{font-family:var(--serif);font-size:calc(var(--u)*18);color:var(--gold2);letter-spacing:.15em;margin-bottom:calc(var(--u)*4)}
.dlg p{color:#d8cbb0;font-size:calc(var(--u)*12)}
.dlg .row{display:flex;gap:calc(var(--u)*8);justify-content:flex-end;margin-top:calc(var(--u)*14)}

/* ---------- 主菜单 ---------- */
.home .brand{position:absolute;left:calc(var(--u)*34);top:calc(var(--u)*36);max-width:40%}
.brand .seal{display:inline-grid;place-items:center;width:calc(var(--u)*30);height:calc(var(--u)*30);background:var(--red);color:#fbe9d0;font-family:var(--serif);font-weight:900;font-size:calc(var(--u)*11);line-height:1.05;border-radius:calc(var(--u)*3);transform:rotate(-4deg);margin-bottom:calc(var(--u)*10);box-shadow:0 2px 8px rgba(0,0,0,.4)}
.brand h1{font-family:var(--serif);font-weight:900;font-size:calc(var(--u)*50);line-height:1;letter-spacing:.06em;background:linear-gradient(180deg,#fff4d4,#e2bd72 55%,#a87a34);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 3px 10px rgba(0,0,0,.6))}
.brand h1 em{font-style:normal;font-size:.5em;vertical-align:.5em;margin:0 .1em;color:var(--gold)}
.brand .en{font-size:calc(var(--u)*9);letter-spacing:.6em;color:var(--dim);margin-top:calc(var(--u)*8);text-transform:uppercase}
.brand .motto{font-family:var(--serif);color:#e6d7b8;font-size:calc(var(--u)*12);letter-spacing:.3em;margin-top:calc(var(--u)*14);border-left:2px solid var(--red);padding-left:calc(var(--u)*10)}
.entries{position:absolute;right:calc(var(--u)*22);top:calc(var(--u)*54);bottom:calc(var(--u)*70);display:flex;gap:calc(var(--u)*12)}
.entry{width:calc(var(--u)*176);height:100%;border-radius:calc(var(--u)*14);overflow:hidden;position:relative;text-align:left;border:1px solid var(--line);box-shadow:var(--sh);transition:transform .25s,box-shadow .25s;isolation:isolate}
.entry:active{transform:scale(.97)}
.entry .pic{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform 6s ease-out;z-index:-2}
.entry:hover .pic{transform:scale(1.08)}
.entry::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,8,6,.05) 20%,rgba(10,8,6,.92) 80%)}
.entry.war::after{background:linear-gradient(180deg,rgba(60,12,8,.12) 10%,rgba(30,8,5,.94) 80%)}
.entry .num{position:absolute;top:calc(var(--u)*12);left:calc(var(--u)*14);font-family:var(--serif);font-size:calc(var(--u)*10);letter-spacing:.3em;color:var(--gold2);opacity:.8}
.entry .big{position:absolute;right:calc(var(--u)*12);top:calc(var(--u)*10);font-family:var(--serif);font-weight:900;font-size:calc(var(--u)*46);line-height:1;writing-mode:vertical-rl;letter-spacing:.08em;color:transparent;-webkit-text-stroke:1px rgba(243,220,164,.55)}
.entry .body{position:absolute;left:calc(var(--u)*14);right:calc(var(--u)*14);bottom:calc(var(--u)*14)}
.entry h3{font-family:var(--serif);font-size:calc(var(--u)*24);letter-spacing:.3em;color:#fff3d6;font-weight:900;text-shadow:0 2px 8px rgba(0,0,0,.6)}
.entry p{font-size:calc(var(--u)*10.5);color:#d4c6a8;margin:calc(var(--u)*4) 0 calc(var(--u)*9);line-height:1.45}
.entry .meta{display:flex;align-items:center;gap:calc(var(--u)*8);font-size:calc(var(--u)*10);color:var(--gold2)}
.entry .meta .bar{flex:1}
.entry .go{position:absolute;right:calc(var(--u)*14);bottom:calc(var(--u)*14);width:calc(var(--u)*28);height:calc(var(--u)*28);border-radius:50%;border:1px solid var(--gold);display:grid;place-items:center;color:var(--gold2)}
.dock{position:absolute;left:calc(var(--u)*30);bottom:calc(var(--u)*14);display:flex;gap:calc(var(--u)*6);padding:calc(var(--u)*5);border-radius:calc(var(--u)*20);background:rgba(12,10,8,.62);border:1px solid var(--line2);backdrop-filter:blur(6px)}
.dock button{display:flex;flex-direction:column;align-items:center;gap:1px;width:calc(var(--u)*52);padding:calc(var(--u)*4) 0;border-radius:calc(var(--u)*14);color:var(--dim);font-size:calc(var(--u)*9.5);transition:.2s}
.dock button b{font-family:var(--serif);font-size:calc(var(--u)*16);color:var(--gold2);font-weight:900;line-height:1.2}
.dock button .ic{width:calc(var(--u)*22);height:calc(var(--u)*22);color:var(--gold2);margin-bottom:calc(var(--u)*1);filter:drop-shadow(0 1px 3px rgba(0,0,0,.5))}
.dock button:active,.dock button.on{background:rgba(217,180,106,.14);color:var(--gold2)}
.news{position:absolute;right:calc(var(--u)*22);bottom:calc(var(--u)*18);display:flex;align-items:center;gap:calc(var(--u)*8);font-size:calc(var(--u)*10);color:var(--dim)}
.news b{color:var(--red2);font-weight:600}

/* ---------- 剧情 ---------- */
.chapters{position:absolute;left:0;right:0;top:calc(var(--u)*58);bottom:calc(var(--u)*16);padding:0 calc(var(--u)*30);gap:calc(var(--u)*12);align-items:stretch}
.chap{flex:none;width:calc(var(--u)*150);scroll-snap-align:center;border-radius:calc(var(--u)*12);overflow:hidden;position:relative;border:1px solid var(--line2);text-align:left;transition:transform .25s,border-color .25s,opacity .25s;isolation:isolate}
.chap .pic{position:absolute;inset:0;background-size:cover;background-position:center;z-index:-2;filter:saturate(.92)}
.chap::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,8,6,.1),rgba(10,8,6,.92) 70%)}
.chap.lock{opacity:.55}.chap.lock .pic{filter:grayscale(1) brightness(.6)}
.chap.cur{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),0 calc(var(--u)*6) calc(var(--u)*20) rgba(217,180,106,.25)}
.chap:active{transform:scale(.97)}
.chap .no{position:absolute;left:calc(var(--u)*12);top:calc(var(--u)*10);font-family:var(--serif);font-size:calc(var(--u)*30);font-weight:900;color:transparent;-webkit-text-stroke:1px rgba(243,220,164,.7);line-height:1}
.chap .yr{position:absolute;right:calc(var(--u)*10);top:calc(var(--u)*12);font-size:calc(var(--u)*9);color:var(--gold2);letter-spacing:.1em}
.chap .bd{position:absolute;left:calc(var(--u)*12);right:calc(var(--u)*12);bottom:calc(var(--u)*12)}
.chap h4{font-family:var(--serif);font-size:calc(var(--u)*17);letter-spacing:.2em;color:#fff3d6}
.chap p{font-size:calc(var(--u)*9.5);color:#cbbd9f;margin-top:calc(var(--u)*3);line-height:1.4;height:2.8em;overflow:hidden}
.chap .st{margin-top:calc(var(--u)*7);display:flex;justify-content:space-between;align-items:center;font-size:calc(var(--u)*10);color:var(--gold)}
.chap .por{display:flex;margin-top:calc(var(--u)*6)}.chap .por img{width:calc(var(--u)*20);height:calc(var(--u)*20);border-radius:50%;border:1px solid var(--gold);margin-right:calc(var(--u)*-5);background:#222}
/* 对白演出 */
.vn{position:absolute;inset:0}
.vn .chara{position:absolute;bottom:0;width:calc(var(--u)*230);height:calc(var(--u)*230);transition:.4s;filter:drop-shadow(0 8px 24px rgba(0,0,0,.6))}
.vn .chara img{width:100%;height:100%;object-fit:cover;border-radius:50% 50% 0 0;-webkit-mask:linear-gradient(180deg,#000 70%,transparent);mask:linear-gradient(180deg,#000 70%,transparent)}
.vn .chara.l{left:calc(var(--u)*30)}.vn .chara.r{right:calc(var(--u)*30)}.vn .chara.dim{filter:brightness(.45) drop-shadow(0 8px 24px rgba(0,0,0,.6));transform:scale(.94)}
.vn .box{position:absolute;left:calc(var(--u)*90);right:calc(var(--u)*90);bottom:calc(var(--u)*14);min-height:calc(var(--u)*92);padding:calc(var(--u)*14) calc(var(--u)*22)}
.vn .who{position:absolute;top:calc(var(--u)*-15);left:calc(var(--u)*22);padding:calc(var(--u)*3) calc(var(--u)*16);font-family:var(--serif);font-weight:900;letter-spacing:.2em;font-size:calc(var(--u)*13);color:#2a1608;background:linear-gradient(180deg,#f6e2ab,#c99a48);border-radius:calc(var(--u)*3)}
.vn .say{font-family:var(--serif);font-size:calc(var(--u)*14);line-height:1.75;color:#f3e6c8;min-height:3.5em}
.vn .nx{position:absolute;right:calc(var(--u)*16);bottom:calc(var(--u)*10);color:var(--gold);font-size:calc(var(--u)*10);animation:blink 1.2s infinite}
@keyframes blink{50%{opacity:.25}}
.vn .ctl{position:absolute;right:calc(var(--u)*16);top:calc(var(--u)*12);display:flex;gap:calc(var(--u)*6);z-index:3}
.vn .place{position:absolute;left:50%;top:calc(var(--u)*30);transform:translateX(-50%);text-align:center;font-family:var(--serif);color:var(--gold2);letter-spacing:.5em;font-size:calc(var(--u)*13);text-shadow:0 2px 10px #000;animation:fadeout 3.2s forwards}
.vn .place b{display:block;font-size:calc(var(--u)*26);letter-spacing:.3em;color:#fff3d6}
@keyframes fadeout{0%,70%{opacity:1}100%{opacity:0}}

/* ---------- 争霸：选势力 / 大地图 ---------- */
.factions{position:absolute;inset:calc(var(--u)*56) calc(var(--u)*30) calc(var(--u)*56);display:flex;gap:calc(var(--u)*12)}
.fac{flex:1;border-radius:calc(var(--u)*14);border:1px solid var(--line2);position:relative;overflow:hidden;text-align:left;transition:flex .4s cubic-bezier(.2,.8,.2,1),border-color .3s;isolation:isolate}
.fac.on{flex:1.7;border-color:var(--fc)}
.fac::before{content:"";position:absolute;inset:0;z-index:-2;background:radial-gradient(circle at 70% 30%,color-mix(in srgb,var(--fc) 55%,transparent),transparent 70%),linear-gradient(180deg,rgba(20,16,12,.6),rgba(10,8,6,.95));opacity:.55}
.fac.on::before{opacity:.85}
.fac .lord{position:absolute;right:calc(var(--u)*-30);top:calc(var(--u)*20);width:calc(var(--u)*240);max-width:110%;aspect-ratio:1;object-fit:cover;transform:scale(1.35);transform-origin:50% 45%;-webkit-mask:radial-gradient(circle at 50% 45%,#000 38%,transparent 62%);mask:radial-gradient(circle at 50% 45%,#000 38%,transparent 62%);z-index:-1;opacity:.95;transition:.4s;mix-blend-mode:normal}
.fac:not(.on) .lord{opacity:.72;filter:saturate(.75) brightness(.85)}
.fac .lord{transform:scale(1.12)!important;image-rendering:auto}   /* 第八十七期：头像用 512 档、减少二次放大，未选中卡片不再发灰发糊 */
.fac .ch{position:absolute;left:calc(var(--u)*14);top:calc(var(--u)*10);font-family:var(--serif);font-weight:900;font-size:calc(var(--u)*54);color:var(--fc);line-height:1;text-shadow:0 2px 14px rgba(0,0,0,.6)}
.fac .bd{position:absolute;left:0;bottom:0;right:0;padding:calc(var(--u)*30) calc(var(--u)*14) calc(var(--u)*14);background:linear-gradient(180deg,transparent,rgba(10,8,6,.88) 40%)}
.fac h4{font-family:var(--serif);font-size:calc(var(--u)*15);letter-spacing:.2em}
.fac p{font-size:calc(var(--u)*10);color:#cbbd9f;margin-top:calc(var(--u)*3);max-width:calc(var(--u)*170)}
.fac .stats{display:flex;gap:calc(var(--u)*10);margin-top:calc(var(--u)*6);font-size:calc(var(--u)*10);color:var(--gold2)}
.fac .diff{color:var(--dim)}
.footer{position:absolute;left:calc(var(--u)*30);right:calc(var(--u)*30);bottom:calc(var(--u)*14);display:flex;align-items:center;gap:calc(var(--u)*10)}
.footer .sp{flex:1}
.era{display:flex;gap:calc(var(--u)*6)}
/* 大地图 */
.pins{position:absolute;inset:0}
.pin{position:absolute;transform:translate(-50%,-100%);display:flex;flex-direction:column;align-items:center;transition:transform .2s}
.pin:active{transform:translate(-50%,-100%) scale(.92)}
.pin .flag{padding:calc(var(--u)*2) calc(var(--u)*8);border-radius:calc(var(--u)*3);background:rgba(12,10,8,.82);border:1px solid var(--fc);font-family:var(--serif);font-weight:700;font-size:calc(var(--u)*11);letter-spacing:.1em;white-space:nowrap;box-shadow:0 2px 8px rgba(0,0,0,.4)}
.pin .flag small{color:var(--dim);font-family:var(--sans);font-size:calc(var(--u)*8.5);margin-left:calc(var(--u)*4);letter-spacing:0}
.pin .stem{width:1px;height:calc(var(--u)*12);background:var(--fc)}
.pin .dot{width:calc(var(--u)*8);height:calc(var(--u)*8);border-radius:50%;background:var(--fc);box-shadow:0 0 0 calc(var(--u)*3) rgba(0,0,0,.25),0 0 calc(var(--u)*10) var(--fc)}
.pin.sel .flag{background:var(--fc);color:#fff}
.pin.mine .dot{animation:pulse 1.6s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 calc(var(--u)*7) rgba(255,255,255,0),0 0 calc(var(--u)*14) var(--fc)}}
.side{position:absolute;right:calc(var(--u)*16);top:calc(var(--u)*52);width:calc(var(--u)*212);padding:calc(var(--u)*14);transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .3s}
.side.off{transform:translateX(calc(var(--u)*240));opacity:0;pointer-events:none}
.side h3{font-family:var(--serif);font-size:calc(var(--u)*18);letter-spacing:.2em;color:var(--gold2);display:flex;align-items:center;gap:calc(var(--u)*8)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:calc(var(--u)*3) calc(var(--u)*10);font-size:calc(var(--u)*10.5);margin-top:calc(var(--u)*6)}
.kv dt{color:var(--dim)}.kv dd{color:#eadcbf;text-align:right;font-variant-numeric:tabular-nums}
.gov{display:flex;align-items:center;gap:calc(var(--u)*8);margin-top:calc(var(--u)*8);padding:calc(var(--u)*6);border-radius:calc(var(--u)*8);background:rgba(255,255,255,.04)}
.gov img{width:calc(var(--u)*34);height:calc(var(--u)*34);border-radius:50%;border:1px solid var(--gold)}
.gov b{font-family:var(--serif);font-size:calc(var(--u)*12.5)}.gov small{display:block;color:var(--dim);font-size:calc(var(--u)*9.5)}
.acts{display:grid;grid-template-columns:repeat(4,1fr);gap:calc(var(--u)*6);margin-top:calc(var(--u)*10)}
.act{display:flex;flex-direction:column;align-items:center;gap:calc(var(--u)*2);padding:calc(var(--u)*6) 0;border-radius:calc(var(--u)*8);border:1px solid var(--line2);background:rgba(255,255,255,.03);font-size:calc(var(--u)*9.5);color:var(--dim)}
.act b{font-family:var(--serif);font-size:calc(var(--u)*15);color:var(--gold2)}
.act:active{background:rgba(217,180,106,.15)}
.turn{position:absolute;left:50%;top:calc(var(--u)*12);transform:translateX(-50%);text-align:center;font-family:var(--serif);pointer-events:none}
.turn b{display:block;font-size:calc(var(--u)*15);letter-spacing:.3em;color:var(--gold2);text-shadow:0 2px 8px #000}
.turn small{font-size:calc(var(--u)*9.5);color:#cbbd9f;letter-spacing:.2em}
.minimap{position:absolute;left:calc(var(--u)*16);bottom:calc(var(--u)*14);width:calc(var(--u)*120);height:calc(var(--u)*70);border-radius:calc(var(--u)*8);border:1px solid var(--line);background:#1c2a2a center/cover;box-shadow:var(--sh);overflow:hidden}
.minimap i{position:absolute;border:1.5px solid var(--gold2);left:38%;top:30%;width:30%;height:36%;border-radius:2px}
.endturn{position:absolute;right:calc(var(--u)*16);bottom:calc(var(--u)*14)}
/* ---------- 战斗 ---------- */
.hexes{position:absolute;inset:0;width:100%;height:100%}
.hexes polygon{fill:rgba(255,248,220,.03);stroke:rgba(255,244,210,.22);stroke-width:1;transition:fill .2s}
.hexes polygon.mv{fill:rgba(110,190,255,.28);stroke:rgba(170,220,255,.8)}
.hexes polygon.at{fill:rgba(230,80,60,.3);stroke:rgba(255,140,120,.9)}
.unit{position:absolute;transform:translate(-50%,-78%);width:calc(var(--u)*40);text-align:center;transition:left .5s,top .5s}
.unit .tk{width:calc(var(--u)*34);height:calc(var(--u)*34);margin:0 auto;border-radius:50%;border:2px solid var(--fc);background:#222 center/cover;box-shadow:0 3px 10px rgba(0,0,0,.6);position:relative}
.unit .ty{position:absolute;right:calc(var(--u)*-6);bottom:calc(var(--u)*-3);width:calc(var(--u)*15);height:calc(var(--u)*15);border-radius:50%;background:var(--fc);color:#fff;font-family:var(--serif);font-weight:900;font-size:calc(var(--u)*8.5);display:grid;place-items:center;border:1px solid rgba(255,255,255,.7)}
.unit .hp{width:calc(var(--u)*30);height:calc(var(--u)*3);margin:calc(var(--u)*3) auto 0;background:rgba(0,0,0,.5);border-radius:2px;overflow:hidden}.unit .hp b{display:block;height:100%;background:#6fd36a}
.unit.en .hp b{background:#e0604a}
.unit .ring{position:absolute;left:50%;top:calc(var(--u)*30);width:calc(var(--u)*40);height:calc(var(--u)*14);transform:translateX(-50%);border-radius:50%;border:1.5px solid var(--gold2);animation:blink 1.4s infinite;pointer-events:none}
.unit.done .ring{display:none}.unit.done .tk{filter:grayscale(.6) brightness(.75)}
.unit.sel .tk{box-shadow:0 0 0 3px var(--gold2),0 0 18px var(--gold)}
.ucard{position:absolute;left:calc(var(--u)*16);bottom:calc(var(--u)*14);width:calc(var(--u)*250);padding:calc(var(--u)*10) calc(var(--u)*12);display:flex;gap:calc(var(--u)*10);transition:transform .3s,opacity .3s}
.ucard.off{transform:translateY(calc(var(--u)*30));opacity:0;pointer-events:none}
.ucard img{width:calc(var(--u)*52);height:calc(var(--u)*52);border-radius:calc(var(--u)*8);border:1px solid var(--gold)}
.ucard h4{font-family:var(--serif);font-size:calc(var(--u)*13.5);letter-spacing:.1em}
.ucard .ln{display:flex;align-items:center;gap:calc(var(--u)*6);font-size:calc(var(--u)*9.5);color:var(--dim);margin-top:calc(var(--u)*3)}
.ucard .ln .bar{flex:1}
.abtns{position:absolute;right:calc(var(--u)*16);bottom:calc(var(--u)*14);display:flex;gap:calc(var(--u)*8);align-items:flex-end}
.ab{width:calc(var(--u)*46);height:calc(var(--u)*46);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--serif);font-weight:900;font-size:calc(var(--u)*15);color:var(--gold2);background:radial-gradient(circle at 50% 30%,rgba(60,48,34,.95),rgba(16,13,10,.95));border:1px solid var(--gold);box-shadow:var(--sh),inset 0 0 0 calc(var(--u)*3) rgba(217,180,106,.12)}
.ab small{font-family:var(--sans);font-weight:400;font-size:calc(var(--u)*8);color:var(--dim)}
.ab.big{width:calc(var(--u)*58);height:calc(var(--u)*58);color:#fff2e0;background:radial-gradient(circle at 50% 30%,#d4573f,#7e2216);border-color:#f0a080}
.ab:disabled{opacity:.35}
.ab:active{transform:scale(.92)}
.banner{position:absolute;left:0;right:0;top:38%;text-align:center;pointer-events:none;opacity:0}
.banner.go{animation:ban 1.8s cubic-bezier(.2,.8,.2,1)}
.banner b{display:inline-block;padding:calc(var(--u)*8) calc(var(--u)*60);font-family:var(--serif);font-size:calc(var(--u)*24);letter-spacing:.5em;color:#fff3d6;background:linear-gradient(90deg,transparent,rgba(150,30,20,.88) 20%,rgba(150,30,20,.88) 80%,transparent)}
@keyframes ban{0%{opacity:0;transform:scaleX(.6)}15%,75%{opacity:1;transform:none}100%{opacity:0}}
.log{position:absolute;right:calc(var(--u)*16);top:calc(var(--u)*50);width:calc(var(--u)*170);font-size:calc(var(--u)*9.5);color:#d8cbb0;text-align:right;pointer-events:none}
.log div{margin-bottom:calc(var(--u)*3);text-shadow:0 1px 4px #000;animation:in .3s}
.dmg{position:absolute;transform:translate(-50%,-100%);font-family:var(--serif);font-weight:900;font-size:calc(var(--u)*18);color:#ff7a5a;text-shadow:0 2px 6px #000;animation:float 1s forwards;pointer-events:none}
@keyframes float{to{transform:translate(-50%,-220%);opacity:0}}

/* ---------- 图鉴 ---------- */
.codex{position:absolute;left:0;right:0;top:calc(var(--u)*50);bottom:0;display:flex;gap:calc(var(--u)*12);padding:0 calc(var(--u)*16) calc(var(--u)*12)}
.codex .left{flex:1;min-width:0;display:flex;flex-direction:column}
.filters{display:flex;gap:calc(var(--u)*6);margin-bottom:calc(var(--u)*8);flex:none}
.grid{flex:1;display:grid;grid-auto-rows:max-content;grid-template-columns:repeat(auto-fill,minmax(calc(var(--u)*68),1fr));gap:calc(var(--u)*8);align-content:start;padding-bottom:calc(var(--u)*8)}
.hc{position:relative;display:block;border-radius:calc(var(--u)*8);overflow:hidden;border:1px solid var(--line2);background:#1a1510;padding-bottom:calc(var(--u)*18);transition:transform .15s,border-color .2s}
.hc:active{transform:scale(.95)}
.hc.on{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
.hc img{width:100%;aspect-ratio:1;display:block;transform:scale(1.18);transform-origin:50% 40%}
.hc .nm{position:absolute;left:0;right:0;bottom:0;padding:calc(var(--u)*12) calc(var(--u)*4) calc(var(--u)*3);background:linear-gradient(180deg,transparent,rgba(10,8,6,.95) 55%);font-family:var(--serif);font-weight:700;font-size:calc(var(--u)*11);text-align:center}
.hc .nm::before{content:"";position:absolute;left:20%;right:20%;bottom:0;height:2px;background:var(--fc)}
.hc .tier{position:absolute;right:calc(var(--u)*4);top:calc(var(--u)*3);font-family:var(--serif);font-weight:900;font-size:calc(var(--u)*12)}
.t-S{color:#ffd36a;text-shadow:0 0 6px rgba(255,200,80,.7)}.t-A{color:#d79cff}.t-B{color:#8cc4ff}.t-C{color:#bbb}
.detail{width:calc(var(--u)*300);flex:none;padding:calc(var(--u)*14);display:flex;flex-direction:column;overflow:hidden}
.detail .hd{display:flex;gap:calc(var(--u)*12)}
.detail .hd img{width:calc(var(--u)*86);height:calc(var(--u)*86);border-radius:calc(var(--u)*10);border:1px solid var(--gold)}
.detail h3{font-family:var(--serif);font-size:calc(var(--u)*22);letter-spacing:.1em;line-height:1.1}
.detail h3 small{font-size:calc(var(--u)*11);color:var(--dim);margin-left:calc(var(--u)*6);letter-spacing:0}
.detail .sub{font-size:calc(var(--u)*10);color:var(--dim);margin-top:calc(var(--u)*4);display:flex;gap:calc(var(--u)*6);flex-wrap:wrap}
.stats4{display:grid;grid-template-columns:auto 1fr auto;gap:calc(var(--u)*4) calc(var(--u)*8);align-items:center;font-size:calc(var(--u)*10.5);margin-top:calc(var(--u)*8)}
.stats4 span{color:var(--dim);font-family:var(--serif)}.stats4 em{font-style:normal;font-variant-numeric:tabular-nums;color:var(--gold2);text-align:right;min-width:2em}
.sks{flex:1;margin-top:calc(var(--u)*6)}
.sk{display:flex;gap:calc(var(--u)*8);padding:calc(var(--u)*6) 0;border-top:1px solid var(--line2)}
.sk img{width:calc(var(--u)*32);height:calc(var(--u)*32);flex:none}
.sk b{font-family:var(--serif);font-size:calc(var(--u)*12)}.sk p{font-size:calc(var(--u)*9.5);color:#cbbd9f;line-height:1.4}
.aff{display:flex;gap:calc(var(--u)*4);margin-top:calc(var(--u)*6)}
.aff span{flex:1;text-align:center;padding:calc(var(--u)*2) 0;border-radius:calc(var(--u)*4);background:rgba(255,255,255,.05);font-size:calc(var(--u)*9)}
.aff span b{display:block;font-family:var(--serif);font-size:calc(var(--u)*12)}
.sc{position:relative;border-radius:calc(var(--u)*8);border:1px solid var(--line2);padding:calc(var(--u)*8) calc(var(--u)*4) calc(var(--u)*6);text-align:center;background:rgba(20,16,12,.7);transition:transform .15s}
.sc:active{transform:scale(.95)}.sc.on{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
.sc img{width:60%;aspect-ratio:1}.sc b{display:block;font-family:var(--serif);font-size:calc(var(--u)*11);margin-top:calc(var(--u)*3)}
.sc small{font-size:calc(var(--u)*8.5);color:var(--dim)}
.bigicon{width:calc(var(--u)*86);height:calc(var(--u)*86)}

/* 设置 */
.set{display:flex;justify-content:space-between;align-items:center;padding:calc(var(--u)*7) 0;border-top:1px solid var(--line2);font-size:calc(var(--u)*12)}
.sw{width:calc(var(--u)*36);height:calc(var(--u)*20);border-radius:calc(var(--u)*10);background:rgba(255,255,255,.12);position:relative;transition:.2s}
.sw::after{content:"";position:absolute;left:calc(var(--u)*2);top:calc(var(--u)*2);width:calc(var(--u)*16);height:calc(var(--u)*16);border-radius:50%;background:#ddd;transition:.2s}
.sw.on{background:var(--gold)}.sw.on::after{left:calc(var(--u)*18);background:#fff}

/* 第三十期：争霸 · 黄巾之乱（全国沙盘嵌入） */
.scr.hj184 .sandbox,.scr.conquest .sandbox{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:#0e0c09}
.scr.hj184 .topbar,.scr.conquest .topbar{left:auto;width:auto;right:calc(var(--u)*120)}
.scr.hj184 .turn,.scr.conquest .turn{top:calc(var(--u)*50)}
.scr.hj184 .endturn,.scr.conquest .endturn{bottom:auto;top:calc(var(--u)*92);right:calc(var(--u)*16)}
.scn-t{font-family:var(--serif);font-size:calc(var(--u)*10.5);color:#d9ccb0;letter-spacing:.08em;white-space:nowrap}.scn-t b{color:var(--gold2);font-size:calc(var(--u)*12)}
.era .chip.off{opacity:.45}
.era .chip .yr{color:#ffd26a}.era .chip.on .yr{color:#8a1a0c}

/* 第七十七期：真实玩法层（App 内全屏打开战役 / 争霸） */
#playL{position:fixed;inset:0;z-index:60;background:#0e0c09;display:none}#playL.on{display:block}
#playL iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
#playL .pback{position:absolute;left:calc(6px + env(safe-area-inset-left));top:calc(6px + env(safe-area-inset-top));z-index:2;border:1px solid rgba(232,194,122,.6);background:rgba(20,14,8,.78);color:#e8c27a;border-radius:10px;padding:3px 10px;font-size:12px;cursor:pointer}
#playL .pt{display:none!important;position:absolute;left:calc(70px + env(safe-area-inset-left));top:calc(9px + env(safe-area-inset-top));z-index:2;color:rgba(232,194,122,.7);font-size:11px;pointer-events:none}
/* 第八十期：主页动态背景（远景画 + 余晖 + 云雾 + 近景松崖 + 暗角；JS 驱动视差） */
.hfx{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.hfx .hl{position:absolute;will-change:transform}
.hfx .far{inset:-7%;background:#1a120a url(/ui/home.webp) center 40%/cover no-repeat}
.hfx .sun{left:62%;top:4%;width:46%;height:60%;background:radial-gradient(closest-side,rgba(255,214,140,.55),rgba(255,160,70,.18) 55%,rgba(255,140,60,0));mix-blend-mode:screen}
.hfx .mist{inset:-4%;width:108%;height:108%;mix-blend-mode:screen}
.hfx .near{right:-3%;bottom:-4%;height:96%;aspect-ratio:512/900;background:url(/ui/home_fg.webp) right bottom/contain no-repeat;filter:drop-shadow(0 0 18px rgba(0,0,0,.4))}
.hfx .vig{inset:0;background:radial-gradient(ellipse 85% 75% at 58% 42%,rgba(0,0,0,0) 55%,rgba(8,6,4,.55))}
#app.homebg .bg{opacity:0}
@media (prefers-reduced-motion:reduce){.hfx .mist{display:none}}

/* 第八十六期：关卡详情 · 将领按势力分组 */
.genrow{display:flex;align-items:flex-start;gap:calc(var(--u)*6);margin-top:calc(var(--u)*8);overflow-x:auto;overflow-y:hidden;padding-bottom:calc(var(--u)*4);-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.genrow .ggrp{display:flex;gap:calc(var(--u)*7);flex:none;align-items:flex-start;padding:calc(var(--u)*3) calc(var(--u)*6);border-radius:calc(var(--u)*10);border:1px solid color-mix(in srgb,var(--fc) 60%,transparent);background:color-mix(in srgb,var(--fc) 14%,transparent)}
.genrow .gf{writing-mode:vertical-rl;font-weight:700;color:var(--fc);font-size:calc(var(--u)*11);align-self:center;filter:brightness(1.4)}
.genrow .gg{text-align:center;flex:none;width:calc(var(--u)*42)}
.genrow .gg img{width:calc(var(--u)*38);height:calc(var(--u)*38);border-radius:50%;border:1px solid var(--fc);object-fit:cover}
.genrow .gg .serif{font-size:calc(var(--u)*9);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.genrow .gsep{flex:none;align-self:center;color:var(--gold);font-size:calc(var(--u)*14);opacity:.8}
body:has(#sheet.on) #sgSub{top:auto!important;bottom:calc(6px + env(safe-area-inset-bottom))!important}

/* 第八十八期：关卡详情 左我右敌 */
.genrow .gside{flex:none;align-self:center;writing-mode:vertical-rl;font-size:calc(var(--u)*9);letter-spacing:.2em;padding:calc(var(--u)*4) calc(var(--u)*2);border-radius:calc(var(--u)*6)}
.genrow .gside.me{color:#9fd59a;background:rgba(80,160,90,.14)}.genrow .gside.foe{color:#ef9a8a;background:rgba(190,70,60,.14)}
.genrow .ggrp+.ggrp{margin-left:calc(var(--u)*-1)}

/* 第八十九期：层内页面自带大号返回键时（配装页），隐藏外层浮动返回钮 */
#playL.nopb .pback{display:none}

/* 第九十期：将领图鉴台词字幕（本页自绘） */
#hcSub{position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom));transform:translate(-50%,8px);z-index:9999;max-width:min(620px,88vw);padding:calc(var(--u)*8) calc(var(--u)*18);border-radius:calc(var(--u)*10);background:rgba(14,10,6,.9);border:1px solid rgba(217,180,106,.6);color:#f3e6c4;font:calc(var(--u)*14)/1.5 var(--serif);text-align:center;pointer-events:none;opacity:0;transition:opacity .25s,transform .25s;box-shadow:0 6px 24px rgba(0,0,0,.55)}
#hcSub.on{opacity:1;transform:translate(-50%,0)}#hcSub b{margin-right:6px}
/* 第九十期：演义入口卡 —— 整幅单图（不平铺，不再上下重复） */
.entry .pic.one{background-repeat:no-repeat!important;background-size:cover!important}
/* ================= 第九十一期：养成（军爵 / 每日军令 / 强化）· 存档 · 设置 —— App 原生页（与将领页同一顶栏 + 左列表右详情）================= */
.dock button{position:relative}.dock .dot,.chip .rdot{position:absolute;top:calc(var(--u)*3);right:calc(var(--u)*10);width:calc(var(--u)*7);height:calc(var(--u)*7);border-radius:50%;background:#e8452c;box-shadow:0 0 0 1.5px rgba(12,10,8,.9)}
.chip{position:relative}.chip .rdot{top:calc(var(--u)*-2);right:calc(var(--u)*-2)}
.res i.x{background:radial-gradient(circle at 35% 30%,#d6e8ff,#5a7fc0);color:#fff}
.topbar .cloudb{height:calc(var(--u)*26);font-size:calc(var(--u)*11);letter-spacing:.08em}
.codex.grow .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(calc(var(--u)*66),1fr));gap:calc(var(--u)*7);align-content:start;flex:1;padding-bottom:calc(var(--u)*10)}
.rkhint{font-size:calc(var(--u)*10);color:var(--dim);margin:0 0 calc(var(--u)*6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hc .rk{position:absolute;left:calc(var(--u)*3);top:calc(var(--u)*3);padding:0 calc(var(--u)*4);border-radius:calc(var(--u)*4);font-family:var(--serif);font-size:calc(var(--u)*8.5);line-height:calc(var(--u)*13);background:rgba(10,8,6,.78);color:#cdbf9c;border:1px solid rgba(217,180,106,.35)}
.hc .rk.r1{color:#9fd08a}.hc .rk.r2{color:#8ec8ff}.hc .rk.r3{color:#d9a6ff}.hc .rk.r4{color:#ffd36a;border-color:#ffd36a}
.tag.rkt{color:#ffd36a}
.rkp{margin-top:calc(var(--u)*10);font-size:calc(var(--u)*10);color:var(--dim)}.rkp .bar,.task .bar{height:calc(var(--u)*6);border-radius:calc(var(--u)*3);background:rgba(255,255,255,.08);overflow:hidden;margin-bottom:calc(var(--u)*3)}
.rkp .bar b,.task .bar b{display:block;height:100%;background:linear-gradient(90deg,#b8893f,#ffd36a)}
.rkfx{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(var(--u)*6);margin-top:calc(var(--u)*10)}
.rkfx>div{border:1px solid var(--line2);border-radius:calc(var(--u)*8);padding:calc(var(--u)*6);text-align:center;background:rgba(0,0,0,.25)}
.rkfx b{display:block;font-family:var(--serif);font-size:calc(var(--u)*14);color:#8fe07a}.rkfx>div:nth-child(2) b{color:#ffb27a}.rkfx>div:nth-child(3) b{color:var(--gold2)}
.rkfx small{font-size:calc(var(--u)*8.5);color:var(--dim)}
.rkst{display:flex;flex-wrap:wrap;gap:calc(var(--u)*4) calc(var(--u)*10);margin-top:calc(var(--u)*9);font-size:calc(var(--u)*10);color:var(--dim)}.rkst b{color:#f3e2b8}
.rkgr{display:flex;align-items:center;gap:calc(var(--u)*6);margin-top:calc(var(--u)*10)}.rkgr .dim{flex:1;font-size:calc(var(--u)*10)}.rkgr .btn{height:calc(var(--u)*26);font-size:calc(var(--u)*11);padding:0 calc(var(--u)*10)}
.btn:disabled{opacity:.4;pointer-events:none}
.ladder{gap:calc(var(--u)*3);margin-top:auto;padding-top:calc(var(--u)*8)}.ladder span{flex:none;font-family:var(--serif);font-size:calc(var(--u)*9);padding:calc(var(--u)*2) calc(var(--u)*5);border-radius:calc(var(--u)*5);border:1px solid var(--line2);color:#7d7360}
.ladder span.got{color:#cdbf9c}.ladder span.cur{color:#2a1608;background:linear-gradient(180deg,#f3dca4,#cfa457);border-color:transparent;font-weight:700}
.codex.g-daily .left{gap:calc(var(--u)*10)}
.signp,.chestp,.tasks{padding:calc(var(--u)*12) calc(var(--u)*14)}
.signp h4,.chestp h4,.tasks h4{font-family:var(--serif);font-size:calc(var(--u)*14);color:var(--gold2);letter-spacing:.1em;margin-bottom:calc(var(--u)*8)}
.signp h4 small,.chestp h4 small,.tasks h4 small{font-size:calc(var(--u)*9);color:var(--dim);letter-spacing:0;margin-left:calc(var(--u)*6);font-family:inherit}
.sign7{display:grid;grid-template-columns:repeat(6,1fr) 1.4fr;gap:calc(var(--u)*5)}
.sign7 .sd{position:relative;border:1px solid var(--line2);border-radius:calc(var(--u)*8);padding:calc(var(--u)*5) calc(var(--u)*3);text-align:center;background:rgba(0,0,0,.28);min-height:calc(var(--u)*62)}
.sign7 .sd b{display:block;font-family:var(--serif);font-size:calc(var(--u)*10);color:var(--gold2)}.sign7 .sd span{display:block;font-size:calc(var(--u)*8.5);color:#cdbf9c;line-height:1.35;margin-top:calc(var(--u)*3)}
.sign7 .sd.cur{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),0 0 calc(var(--u)*12) rgba(255,210,120,.35)}.sign7 .sd.big{background:linear-gradient(180deg,rgba(184,64,46,.35),rgba(0,0,0,.3))}
.sign7 .sd.got{opacity:.55}.sign7 .sd i{position:absolute;inset:0;display:grid;place-items:center;font-style:normal;font-size:calc(var(--u)*26);color:#8fe07a;text-shadow:0 2px 6px #000}
.signp .row,.chestp{display:flex;align-items:center;gap:calc(var(--u)*10)}.signp .row{justify-content:flex-end;margin-top:calc(var(--u)*8)}
.chestp{justify-content:space-between}.chestp h4{margin:0}.chestp p{flex:1;font-size:calc(var(--u)*10.5);color:#cdbf9c}
.tasks{width:calc(var(--u)*340)}.tasks .tl{flex:1;display:flex;flex-direction:column;gap:calc(var(--u)*6)}
.task{display:flex;align-items:center;gap:calc(var(--u)*8);padding:calc(var(--u)*6) calc(var(--u)*8);border:1px solid var(--line2);border-radius:calc(var(--u)*8);background:rgba(0,0,0,.25)}
.task .ti{flex:1;min-width:0}.task .ti b{font-size:calc(var(--u)*11.5);color:#f3e2b8;font-weight:600}.task small{font-size:calc(var(--u)*9);color:var(--dim)}
.task em{font-style:normal;font-size:calc(var(--u)*10);color:var(--dim);font-variant-numeric:tabular-nums}.task.ok{border-color:var(--gold)}.task.got{opacity:.5}
.task .btn{height:calc(var(--u)*24);font-size:calc(var(--u)*10.5);padding:0 calc(var(--u)*10)}
.fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(calc(var(--u)*190),1fr));gap:calc(var(--u)*8);align-content:start;flex:1;padding-bottom:calc(var(--u)*10)}
.fc{padding:calc(var(--u)*9) calc(var(--u)*11);display:flex;flex-direction:column;gap:calc(var(--u)*3);border-color:color-mix(in srgb,var(--tc) 55%,transparent)}
.fc .ft{display:flex;justify-content:space-between;align-items:baseline}.fc .ft b{font-family:var(--serif);color:var(--tc);font-size:calc(var(--u)*13)}.fc .ft em{font-style:normal;color:#ffd36a;font-weight:700}.fc .ft em small{color:var(--dim);font-weight:400}
.fc .fd{font-size:calc(var(--u)*9);color:var(--dim)}.fc p{font-size:calc(var(--u)*9.5);color:#cdbf9c;flex:1;line-height:1.5}.fc .btn{height:calc(var(--u)*24);font-size:calc(var(--u)*10);align-self:flex-end}
/* 存档页：战役 / 争霸分页，横向卡片槽位 */
.savepg{position:absolute;left:0;right:0;top:calc(var(--u)*50);bottom:0;overflow-y:auto;padding:0 calc(var(--u)*20) calc(var(--u)*14);scrollbar-width:none}.savepg::-webkit-scrollbar{display:none}
.savepg section{margin-bottom:calc(var(--u)*12)}.savepg h3{font-family:var(--serif);font-size:calc(var(--u)*14);color:var(--gold2);letter-spacing:.12em;margin:calc(var(--u)*4) 0 calc(var(--u)*7)}
.savepg h3 small{font-size:calc(var(--u)*9.5);color:var(--dim);letter-spacing:0;margin-left:calc(var(--u)*8);font-family:inherit}
.svrow{display:grid;grid-template-columns:repeat(4,1fr);gap:calc(var(--u)*10)}
.svc{padding:calc(var(--u)*10) calc(var(--u)*12);min-height:calc(var(--u)*104);display:flex;flex-direction:column}
.svc .sh{display:flex;justify-content:space-between;align-items:baseline}.svc .sh b{font-family:var(--serif);color:var(--gold2);font-size:calc(var(--u)*12)}.svc .sh small{font-size:calc(var(--u)*9);color:var(--dim)}
.svc h4{margin-top:calc(var(--u)*6);font-size:calc(var(--u)*12);color:#f3e2b8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.svc p{font-size:calc(var(--u)*9.5);color:var(--dim);flex:1;line-height:1.45}
.svc.empty{opacity:.6}.svc .ops{display:flex;gap:calc(var(--u)*5);justify-content:flex-end;margin-top:calc(var(--u)*6)}.svc .btn{height:calc(var(--u)*24);font-size:calc(var(--u)*10);padding:0 calc(var(--u)*10)}.svc .btn.del{color:#e88a7a}
.svfoot{display:flex;align-items:center;gap:calc(var(--u)*8);flex-wrap:wrap;padding-top:calc(var(--u)*4)}.svfoot .btn{height:calc(var(--u)*26);font-size:calc(var(--u)*11)}.svfoot .dim{font-size:calc(var(--u)*9.5);color:var(--dim)}
/* 设置整页 */
.setpg{position:absolute;left:50%;top:calc(var(--u)*54);bottom:calc(var(--u)*14);width:min(calc(var(--u)*520),92%);transform:translateX(-50%);padding:calc(var(--u)*12) calc(var(--u)*18)}
.setpg .setin{height:100%}.setpg .set:first-child{border-top:0}
/* 云同步弹窗（cloud.js）：居中、与游戏同风格 */
dialog.sgcloud{position:fixed;inset:0;margin:auto}
/* 第九十二期：援军武将标注 */
.genrow .gg .rf{display:block;font-size:calc(var(--u)*7.5);color:#ffb27a;white-space:nowrap}

/* 第九十二期：游戏层（战场 / 争霸）左上角「返回」与 App 各页同尺寸 */
#playL .pback{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 18px 0 14px;border-radius:21px;border:1px solid rgba(217,180,106,.5);background:rgba(15,12,9,.72);color:#f3dca4;font:600 17px "Noto Serif SC","Songti SC",serif;left:calc(10px + env(safe-area-inset-left));top:calc(8px + env(safe-area-inset-top))}
#playL .pback::before{content:"";width:10px;height:10px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-left:4px}
/* 第九十四期：商店 */
.res i.g{background:radial-gradient(circle at 35% 30%,#fff2b8,#e0a62a);color:#3a2206}
.codex.shop .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(calc(var(--u)*76),1fr));gap:calc(var(--u)*7);align-content:start;flex:1;padding-bottom:calc(var(--u)*10)}
.hc .pz,.ec .pz,.ic2 .pz{display:block;font-size:calc(var(--u)*9);color:#ffd27a;text-align:center;font-variant-numeric:tabular-nums}
.codex.shop .hc{padding-bottom:calc(var(--u)*30)}.codex.shop .hc .nm{bottom:calc(var(--u)*13)}.codex.shop .hc .pz{position:absolute;left:0;right:0;bottom:calc(var(--u)*2)}
.hc.owned{opacity:.6}.hc.owned .pz{color:#8fd16a}
.ec,.ic2{display:flex;flex-direction:column;align-items:center;gap:calc(var(--u)*2);padding:calc(var(--u)*6) calc(var(--u)*3);border-radius:calc(var(--u)*8);border:1px solid var(--line2);background:#1a1510;transition:transform .15s,border-color .2s}
.ec:active,.ic2:active{transform:scale(.95)}.ec.on,.ic2.on{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
.ec img{width:calc(var(--u)*50);height:calc(var(--u)*50)}.ec b,.ic2 b{font-family:var(--serif);font-size:calc(var(--u)*10.5);text-align:center;line-height:1.2}
.ic2 .em{font-size:calc(var(--u)*34);line-height:1.15}.detail .bigem{width:calc(var(--u)*86);height:calc(var(--u)*86);display:grid;place-items:center;font-size:calc(var(--u)*52);border-radius:calc(var(--u)*10);border:1px solid var(--gold);background:rgba(0,0,0,.25)}
.buyrow{display:flex;align-items:center;gap:calc(var(--u)*8);margin-top:auto;padding-top:calc(var(--u)*10);border-top:1px solid var(--line2)}
.buyrow .price{flex:1;font-family:var(--serif);font-weight:900;font-size:calc(var(--u)*16);color:var(--gold2)}.buyrow .price.g{color:#ffd36a}

/* 第九十七期：刷将台 / 新手大礼包 / 游戏机制 / 关卡锁 */
.chap.lock{filter:grayscale(.85) brightness(.6)}.chap.lock .st span:first-child{color:#c9a87a}
.rcinfo{font-size:calc(var(--u)*9.5);color:var(--dim);margin-left:auto;align-self:center}
.rcb{padding:calc(var(--u)*3) calc(var(--u)*9);font-size:calc(var(--u)*10.5);white-space:nowrap}.rcb small{opacity:.75}
.filters .chip small{opacity:.8;font-size:.85em}
.codex.shop .grid.rcg{grid-template-columns:repeat(4,1fr)}.codex.shop .grid.rcB{grid-template-columns:repeat(5,1fr)}.codex.shop .grid.rcA{grid-template-columns:repeat(3,minmax(0,calc(var(--u)*120)))}.codex.shop .grid.rcS{grid-template-columns:repeat(2,minmax(0,calc(var(--u)*140)))}
.codex.shop .grid.rcA,.codex.shop .grid.rcS{justify-content:center}
.rclock{grid-column:1/-1;text-align:center;padding:calc(var(--u)*40) 0;font-family:var(--serif);font-size:calc(var(--u)*16);color:var(--gold2)}.rclock small{font-size:calc(var(--u)*11);color:var(--dim)}
.rctip h3{font-family:var(--serif);color:var(--gold2);margin-bottom:calc(var(--u)*6)}.rctip p{font-size:calc(var(--u)*11.5);line-height:1.75;color:#d8cbb0;margin-top:calc(var(--u)*4)}
.nbdlg{text-align:center}.nbdlg.wide{width:min(calc(var(--u)*600),94vw)}.nb .nbic{font-size:calc(var(--u)*44)}
.nbrw{display:flex;flex-wrap:wrap;gap:calc(var(--u)*6);justify-content:center;margin:calc(var(--u)*10) 0}.nbrw span{padding:calc(var(--u)*3) calc(var(--u)*9);border-radius:calc(var(--u)*8);background:rgba(255,255,255,.08);font-size:calc(var(--u)*11)}.nbrw span.g{background:rgba(255,200,80,.18);color:#ffd36a}
.nbfac{display:grid;grid-template-columns:repeat(5,1fr);gap:calc(var(--u)*8);margin-top:calc(var(--u)*12)}
.nbfac button{border:1px solid var(--fc);border-radius:calc(var(--u)*10);padding:calc(var(--u)*12) calc(var(--u)*4);background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(0,0,0,.3));display:flex;flex-direction:column;gap:calc(var(--u)*6);align-items:center}
.nbfac b{font-family:var(--serif);font-size:calc(var(--u)*26);color:var(--fc)}.nbfac small{font-size:calc(var(--u)*9);color:var(--dim);line-height:1.4}
.nbcards{display:grid;grid-template-columns:repeat(5,1fr);gap:calc(var(--u)*8);margin:calc(var(--u)*12) 0}.nbcards .hc{padding-bottom:calc(var(--u)*32)}.nbcards .hc .nm{bottom:calc(var(--u)*14)}
.nbcards .nbst{position:absolute;left:0;right:0;bottom:calc(var(--u)*2);font-size:calc(var(--u)*8.5);color:var(--dim);text-align:center}
.mechdlg{width:min(calc(var(--u)*640),94vw);display:flex;flex-direction:column;max-height:90vh}.mtabs{display:flex;gap:calc(var(--u)*5);flex-wrap:wrap;margin:calc(var(--u)*6) 0}
.mech{flex:1;min-height:0;overflow:auto;max-height:62vh;padding-right:calc(var(--u)*4)}
.mech .mc{background:rgba(255,255,255,.04);border:1px solid var(--line2);border-radius:calc(var(--u)*10);padding:calc(var(--u)*10) calc(var(--u)*12);margin-bottom:calc(var(--u)*8)}
.mech h4{font-family:var(--serif);color:var(--gold2);font-size:calc(var(--u)*13.5);margin-bottom:calc(var(--u)*6);display:flex;gap:calc(var(--u)*6);align-items:center}
.mech ul{padding-left:calc(var(--u)*16);margin:0}.mech li{font-size:calc(var(--u)*11.5);line-height:1.75;color:#d8cbb0}.mech li b,.mech b{color:#ffd27a}
.mech .mn{font-size:calc(var(--u)*11);color:var(--dim);margin:calc(var(--u)*4) 0;line-height:1.6}
.mech table.mt{width:100%;border-collapse:collapse;margin-top:calc(var(--u)*6);font-size:calc(var(--u)*10.5)}.mech .mt th{color:var(--gold);font-weight:600;text-align:left;border-bottom:1px solid var(--line2);padding:calc(var(--u)*3) calc(var(--u)*4)}
.mech .mt td{padding:calc(var(--u)*3) calc(var(--u)*4);border-bottom:1px solid rgba(255,255,255,.05);color:#e0d4bb}.mech .up{color:#8fd16a}.mech .dn{color:#e8906a}
/* ===== 第九十九期：主页右上角汇总资源栏 + 签到图标（位于演义 / 争霸上方） ===== */
.home .hres{position:absolute;right:calc(var(--u)*22);top:calc(var(--u)*12);display:flex;align-items:center;gap:calc(var(--u)*8);z-index:3}
.home .hres .res span{cursor:pointer}
.hsign{position:relative;display:flex;align-items:center;gap:calc(var(--u)*4);height:calc(var(--u)*30);padding:0 calc(var(--u)*10) 0 calc(var(--u)*7);border-radius:calc(var(--u)*16);background:linear-gradient(180deg,#b8432c,#7e2516);border:1px solid #f0b46a;color:#fff2d6;font-family:var(--serif);font-weight:700;font-size:calc(var(--u)*11.5);box-shadow:0 2px 8px rgba(0,0,0,.45)}
.hsign svg{width:calc(var(--u)*18);height:calc(var(--u)*18)}
.hsign.done{background:rgba(12,10,8,.62);border-color:var(--line2);color:var(--gold2)}
.hsign .dot{position:absolute;top:calc(var(--u)*-2);right:calc(var(--u)*-2);width:calc(var(--u)*9);height:calc(var(--u)*9);border-radius:50%;background:#e8452c;box-shadow:0 0 0 1.5px rgba(12,10,8,.9)}
.home .entries{top:calc(var(--u)*56)}
/* ===== 武将详情（新手选将 / 签到选将） ===== */
.nbdlg.hdwide{width:min(calc(var(--u)*640),94vw);text-align:left}
.hdlg h3{text-align:center}
.hdv{display:grid;grid-template-columns:calc(var(--u)*170) 1fr;gap:calc(var(--u)*14);margin-top:calc(var(--u)*8)}
.hdl{display:flex;flex-direction:column;align-items:center;gap:calc(var(--u)*5);text-align:center}
.hdl img{width:calc(var(--u)*120);height:calc(var(--u)*120);border-radius:calc(var(--u)*12);border:1px solid var(--gold);object-fit:cover}
.hdl h3{font-size:calc(var(--u)*17);margin:0}.hdl h3 small{font-size:.6em;color:var(--dim);margin-left:.4em;letter-spacing:0}
.hdl .sub{display:flex;gap:calc(var(--u)*4);flex-wrap:wrap;justify-content:center}
.hdl .aff{width:100%}
.hdts{font-size:calc(var(--u)*9.5)!important;color:var(--dim)!important;line-height:1.5}.hdts b{color:var(--gold2)}
.hdr{min-width:0;display:flex;flex-direction:column}
.hdr h4{font-family:var(--serif);color:var(--gold2);font-size:calc(var(--u)*12);margin:calc(var(--u)*10) 0 calc(var(--u)*2)}
.hdr .sks{max-height:calc(var(--u)*150);overflow:auto}
.nbcards.c3{grid-template-columns:repeat(3,1fr);max-width:calc(var(--u)*380);margin-left:auto;margin-right:auto}
/* ===== 月历签到 ===== */
.caldlg{width:min(calc(var(--u)*700),96vw)}
.scal{display:grid;grid-template-columns:1.35fr 1fr;gap:calc(var(--u)*14)}
.scal h3 small{font-size:.6em;color:var(--dim);letter-spacing:0;margin-left:.5em}
.cwk,.cgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:calc(var(--u)*3)}
.cwk span{text-align:center;font-size:calc(var(--u)*9.5);color:var(--dim);font-family:var(--serif)}
.cd{position:relative;aspect-ratio:1/.86;border-radius:calc(var(--u)*6);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07);display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.15}
.cd.emp{background:none;border:none}
.cd b{font-family:var(--serif);font-size:calc(var(--u)*11.5);color:#eadcbc}
.cd span{font-size:calc(var(--u)*7.5);color:#cdbf9c}
.cd em{position:absolute;left:calc(var(--u)*2);top:calc(var(--u)*1);font-style:normal;font-size:calc(var(--u)*7);color:#a8c070}
.cd.big{border-color:rgba(240,190,90,.45)}.cd.big span{color:#ffd27a}
.cd.today{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),0 0 10px rgba(240,190,90,.35)}
.cd.got{background:rgba(192,80,58,.28);border-color:rgba(232,120,90,.55)}
.cd.miss{opacity:.45}
.cd i{position:absolute;right:calc(var(--u)*2);bottom:calc(var(--u)*1);font-style:normal;font-size:calc(var(--u)*9);color:#8fd16a;font-weight:900}.cd i.x{color:#e8906a;font-size:calc(var(--u)*7.5)}
.cd u{position:absolute;right:calc(var(--u)*2);top:calc(var(--u)*1);text-decoration:none;font-family:var(--serif);font-weight:900;font-size:calc(var(--u)*9)}
.cnote{font-size:calc(var(--u)*9)!important;color:var(--dim)!important;margin-top:calc(var(--u)*6);line-height:1.5}
.scr2{display:flex;flex-direction:column}
.ctoday{background:rgba(255,255,255,.05);border:1px solid var(--line2);border-radius:calc(var(--u)*10);padding:calc(var(--u)*10)}
.ctoday small{display:block;color:var(--dim);font-size:calc(var(--u)*10)}.ctoday b{display:block;color:#ffd27a;font-size:calc(var(--u)*12);margin:calc(var(--u)*4) 0}
.ctoday .row{margin-top:calc(var(--u)*6)!important;justify-content:flex-start!important}
.scr2 h4{font-family:var(--serif);color:var(--gold2);font-size:calc(var(--u)*12.5);margin:calc(var(--u)*10) 0 calc(var(--u)*4)}
.cbar{height:calc(var(--u)*5);margin-bottom:calc(var(--u)*6)}
.mls{display:flex;flex-direction:column;gap:calc(var(--u)*5)}
.ml{display:flex;align-items:center;gap:calc(var(--u)*8);padding:calc(var(--u)*6) calc(var(--u)*8);border-radius:calc(var(--u)*9);background:rgba(255,255,255,.04);border:1px solid var(--line2);text-align:left}
.ml .mt{font-family:var(--serif);font-weight:900;font-size:calc(var(--u)*20);width:calc(var(--u)*26);text-align:center}
.ml div{flex:1;min-width:0}.ml b{display:block;font-size:calc(var(--u)*11.5);color:#eadcbc}.ml small{font-size:calc(var(--u)*9);color:var(--dim)}
.ml em{font-style:normal;font-size:calc(var(--u)*10);color:var(--dim);white-space:nowrap}
.ml.ready{border-color:#f0b46a;background:rgba(240,180,106,.12)}.ml.ready em{color:#ffd27a;font-weight:700}
.ml.got{opacity:.7}.ml.got em{color:#8fd16a}
@media (max-aspect-ratio:4/3){.scal{grid-template-columns:1fr}.hdv{grid-template-columns:1fr}}
/* 第九十九期：日历弹窗压缩高度（手机横屏 390px 高也能完整显示） */
.caldlg{position:relative;padding:calc(var(--u)*12) calc(var(--u)*14);max-height:94vh}
.caldlg .cx{position:absolute;right:calc(var(--u)*8);top:calc(var(--u)*6);width:calc(var(--u)*26);height:calc(var(--u)*26);border-radius:50%;background:rgba(255,255,255,.08);border:1px solid var(--line2);color:var(--gold2);font-size:calc(var(--u)*12)}
.caldlg h3{font-size:calc(var(--u)*15);margin-bottom:calc(var(--u)*2)}
.cgrid{gap:calc(var(--u)*2)}.cwk{gap:calc(var(--u)*2);margin-bottom:calc(var(--u)*2)}
.cd{aspect-ratio:auto;height:calc(var(--u)*41)}
.cd b{font-size:calc(var(--u)*10.5)}.cd span{font-size:calc(var(--u)*7)}
.cnote{margin-top:calc(var(--u)*4)}
.scr2{padding-top:calc(var(--u)*22)}
.ctoday{padding:calc(var(--u)*7) calc(var(--u)*9)}.ctoday b{font-size:calc(var(--u)*11);margin:calc(var(--u)*2) 0}
.ctoday .row{margin-top:calc(var(--u)*4)!important}.ctoday .btn{padding-top:calc(var(--u)*4);padding-bottom:calc(var(--u)*4)}
.scr2 h4{margin:calc(var(--u)*8) 0 calc(var(--u)*3)}
.mls{gap:calc(var(--u)*4)}.ml{padding:calc(var(--u)*4) calc(var(--u)*8)}.ml .mt{font-size:calc(var(--u)*17)}