/* 《浮生路》界面：漆器底（玄黑 / 墨蓝）+ 鎏金描边 + 朱红点缀；品质色 凡白 良绿 优蓝 珍紫 绝橙 传说红 仙金彩 */
@font-face{font-family:"FSL Kai";src:url("/static/font/wenkai.woff2") format("woff2");font-display:swap}
@font-face{font-family:"FSL Brush";src:url("/static/font/brush.woff2") format("woff2");font-display:swap}
:root{
  --ink0:#07090f;--ink1:#0d1322;--ink2:#141d33;--ink3:#1c2844;
  --gold:#d8b46a;--gold-hi:#f7e2a8;--gold-lo:#7d5e28;--gold-line:rgba(216,180,106,.55);
  --red:#b8321f;--red-hi:#e0553a;--jade:#5fd3b0;
  --text:#f1e7d0;--mute:#a79c86;--dim:#6f6755;
  --q0:#d9d6cf;--q1:#63c476;--q2:#4f97ea;--q3:#b067ea;--q4:#f29233;--q5:#ec4a3c;--q6:#f6d47a;
  --r:12px;--safe-b:env(safe-area-inset-bottom,0px);--safe-t:env(safe-area-inset-top,0px);
  --kai:"FSL Kai","LXGW WenKai","STKaiti","KaiTi","Noto Serif SC","Songti SC",serif;
  --brush:"FSL Brush","FSL Kai","STKaiti",serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--ink0);color:var(--text);font-family:var(--kai);font-size:15px;overflow:hidden;
  -webkit-user-select:none;user-select:none;overscroll-behavior:none}
input,textarea{font-family:inherit;-webkit-user-select:text;user-select:text}
button{font-family:inherit;cursor:pointer}
.hide{display:none!important}
#stage{position:relative;max-width:480px;height:100%;margin:0 auto;overflow:hidden;
  background:
    radial-gradient(120% 60% at 50% -10%,rgba(80,110,180,.22),transparent 60%),
    radial-gradient(90% 50% at 50% 110%,rgba(184,50,31,.16),transparent 60%),
    linear-gradient(180deg,var(--ink1),var(--ink0));}
#stage::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='80' viewBox='0 0 120 80'%3E%3Cg fill='none' stroke='%23d8b46a' stroke-width='1.2'%3E%3Cpath d='M10 50c0-10 14-14 20-6 4-10 20-10 22 2 10-2 14 10 6 14H14c-6 0-8-6-4-10z'/%3E%3Cpath d='M70 22c0-8 11-11 16-5 3-8 16-8 18 1 8-1 11 8 5 11H73c-5 0-6-4-3-7z'/%3E%3C/g%3E%3C/svg%3E");}

/* ---------- 通用面板 / 按钮 ---------- */
.panel{position:relative;border-radius:var(--r);padding:14px;
  background:linear-gradient(180deg,rgba(28,40,68,.92),rgba(13,19,34,.94));
  border:1px solid var(--gold-line);box-shadow:inset 0 0 0 1px rgba(0,0,0,.6),inset 0 1px 0 rgba(247,226,168,.12),0 6px 18px rgba(0,0,0,.35)}
.panel.corner::before,.panel.corner::after{content:"";position:absolute;width:14px;height:14px;border:2px solid var(--gold);pointer-events:none}
.panel.corner::before{left:4px;top:4px;border-right:0;border-bottom:0;border-top-left-radius:6px}
.panel.corner::after{right:4px;bottom:4px;border-left:0;border-top:0;border-bottom-right-radius:6px}
.ttl{font-family:var(--brush);font-size:22px;letter-spacing:4px;color:var(--gold-hi);text-align:center;margin:4px 0 12px;
  text-shadow:0 0 12px rgba(216,180,106,.35),0 2px 0 #000}
.ttl small{display:block;font-family:var(--kai);font-size:12px;letter-spacing:1px;color:var(--mute);text-shadow:none;margin-top:2px}
.sec{display:flex;align-items:center;gap:8px;color:var(--gold);font-size:15px;margin:16px 2px 8px;letter-spacing:2px}
.sec::before,.sec::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--gold-line),transparent)}
.mute{color:var(--mute)}.dim{color:var(--dim)}.gold{color:var(--gold-hi)}.red{color:var(--red-hi)}.up{color:#ff6b5a}.down{color:#5fd39a}
.row{display:flex;align-items:center;gap:8px}.grow{flex:1}.center{text-align:center}.sm{font-size:12px}.xs{font-size:11px}
.btn{position:relative;border:1px solid var(--gold);border-radius:10px;padding:9px 16px;font-size:15px;color:var(--gold-hi);letter-spacing:1px;
  background:linear-gradient(180deg,#26324f,#141c30);box-shadow:inset 0 1px 0 rgba(247,226,168,.25),0 3px 0 #05070c,0 4px 10px rgba(0,0,0,.4);
  transition:transform .08s,filter .15s}
.btn:active{transform:translateY(2px);box-shadow:inset 0 1px 0 rgba(247,226,168,.2),0 1px 0 #05070c}
.btn.red{color:#fff3dc;background:linear-gradient(180deg,#d9523a,#8f2213);border-color:#f0c078;text-shadow:0 1px 0 rgba(0,0,0,.4)}
.btn.gold{color:#3a2508;background:linear-gradient(180deg,#fbe7ad,#d4a852 55%,#a8782c);border-color:#fff1c4;text-shadow:0 1px 0 rgba(255,255,255,.4);font-weight:700}
.btn.sm{padding:5px 10px;font-size:13px;border-radius:8px}
.btn.block{display:block;width:100%}
.btn:disabled,.btn.off{filter:grayscale(.85) brightness(.65);pointer-events:none}
.pill{display:inline-flex;align-items:center;gap:3px;padding:1px 8px;border-radius:20px;font-size:11px;border:1px solid currentColor;line-height:18px}
.badge-red{position:absolute;right:-4px;top:-4px;min-width:8px;height:8px;border-radius:50%;background:#ff4a3a;box-shadow:0 0 6px #ff4a3a}
.bar{height:6px;border-radius:4px;background:rgba(255,255,255,.08);overflow:hidden}
.bar>i{display:block;height:100%;background:linear-gradient(90deg,var(--gold-lo),var(--gold-hi));border-radius:4px;transition:width .5s}

/* ---------- 顶部资源条 ---------- */
#top{position:absolute;left:0;right:0;top:0;z-index:20;padding:calc(6px + var(--safe-t)) 10px 6px;
  background:linear-gradient(180deg,rgba(7,9,15,.97),rgba(13,19,34,.9));border-bottom:1px solid var(--gold-line);
  box-shadow:0 2px 12px rgba(0,0,0,.5)}
#top .who{display:flex;align-items:center;gap:8px}
#top .ava{width:38px;height:38px;border-radius:50%;border:2px solid var(--gold);background:radial-gradient(circle at 50% 35%,#3a4a70,#0d1322);
  display:grid;place-items:center;font-family:var(--brush);font-size:20px;color:var(--gold-hi);flex:none;overflow:hidden}
#top .nm{font-size:15px;color:var(--gold-hi);white-space:nowrap}
#top .rep{font-size:11px;color:var(--mute);display:flex;align-items:center;gap:6px}
#top .rep .bar{width:70px;height:4px}
.vip{display:inline-block;font-style:italic;font-weight:800;font-size:12px;padding:0 7px;border-radius:4px;line-height:18px;
  color:#3a2508;background:linear-gradient(180deg,#fff0bf,#d6a54a);border:1px solid #fff5d0;letter-spacing:.5px;font-family:Georgia,serif}
.vip.v0{color:#9a917e;background:#252c3d;border-color:#3b4560}
#top .pw{margin-left:auto;text-align:right;line-height:1.1}
#top .pw b{display:block;font-size:17px;color:var(--gold-hi);font-family:Georgia,var(--kai)}
#top .pw span{font-size:11px;color:var(--mute)}
.res{display:flex;gap:6px;margin-top:6px}
.res>div{flex:1;display:flex;align-items:center;gap:4px;padding:2px 6px 2px 2px;border-radius:14px;background:rgba(0,0,0,.45);
  border:1px solid rgba(216,180,106,.28);font-size:13px;min-width:0;position:relative}
.res>div b{font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:Georgia,var(--kai)}
.res .plus{margin-left:auto;width:16px;height:16px;border-radius:50%;background:linear-gradient(#e46a4d,#9b2a18);color:#fff;
  font-size:14px;line-height:15px;text-align:center;flex:none;border:1px solid #f5c98a}
.ico{width:20px;height:20px;flex:none;border-radius:50%;display:inline-block;position:relative}
.ico.silver{background:radial-gradient(circle at 35% 30%,#fff,#c9ccd6 40%,#7c8394);box-shadow:inset 0 -2px 2px rgba(0,0,0,.3)}
.ico.silver::after{content:"";position:absolute;inset:6px 4px;border-radius:40%;border:1.5px solid rgba(60,66,80,.55);border-top:0}
.ico.jade{border-radius:6px;transform:rotate(45deg) scale(.78);background:linear-gradient(135deg,#bff7e6,#3fc49c 50%,#137a5c);box-shadow:0 0 6px rgba(95,211,176,.6)}
.ico.sta{background:radial-gradient(circle at 40% 35%,#ffe28a,#f09a2a 60%,#a04e10);clip-path:polygon(50% 0,62% 36%,100% 38%,70% 60%,80% 100%,50% 76%,20% 100%,30% 60%,0 38%,38% 36%)}
.ico.token{border-radius:3px;background:linear-gradient(180deg,#f2d48c,#b0782c);box-shadow:inset 0 0 0 2px #7a4d15}
.ico.token::after{content:"令";position:absolute;inset:0;font-size:12px;line-height:20px;text-align:center;color:#5a2c0a;font-weight:700}

/* ---------- 主区 / 底部导航 ---------- */
#main{position:absolute;left:0;right:0;top:var(--top-h,96px);bottom:calc(64px + var(--safe-b));overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;padding:12px 12px 24px}
#main.full{padding:0}
#nav{position:absolute;left:0;right:0;bottom:0;z-index:20;height:calc(64px + var(--safe-b));padding-bottom:var(--safe-b);display:flex;
  background:linear-gradient(0deg,#05070c,#111a2e);border-top:1px solid var(--gold-line);box-shadow:0 -4px 14px rgba(0,0,0,.6)}
#nav button{flex:1;border:0;background:none;color:var(--mute);font-size:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;position:relative}
#nav button i{width:30px;height:30px;display:grid;place-items:center;font-style:normal;font-family:var(--brush);font-size:19px;color:#8e8471;
  border-radius:50%;border:1px solid rgba(216,180,106,.25);background:radial-gradient(circle,#1d2742,#0b0f1a);transition:.2s}
#nav button.on{color:var(--gold-hi)}
#nav button.on i{color:#3a2508;background:radial-gradient(circle at 50% 35%,#fff0bf,#d4a852 60%,#8f6222);border-color:#fff1c4;
  box-shadow:0 0 14px rgba(247,226,168,.5);transform:translateY(-4px) scale(1.08)}
#nav .badge-red{right:calc(50% - 18px);top:6px}

/* ---------- 主界面场景 ---------- */
.scene{position:relative;width:100%;aspect-ratio:9/16;border-radius:0;overflow:hidden;background:#0b1020}
.scene>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.scene .ph{position:absolute;inset:0;background:
  radial-gradient(60% 30% at 70% 18%,rgba(247,226,168,.22),transparent 70%),
  linear-gradient(180deg,#1a2a4a 0%,#243a5e 35%,#3b3a52 55%,#1a1a26 72%,#0b0d14 100%)}
.scene .ph::before{content:"";position:absolute;left:0;right:0;bottom:22%;height:30%;
  background:
   linear-gradient(170deg,transparent 40%,#0f1422 41%) 0 0/50% 100% no-repeat,
   linear-gradient(190deg,transparent 40%,#0f1422 41%) 100% 0/50% 100% no-repeat;opacity:.9}
.scene .ph::after{content:attr(data-name);position:absolute;right:14px;bottom:14px;font-family:var(--brush);font-size:14px;color:rgba(247,226,168,.35);letter-spacing:4px;writing-mode:vertical-rl}
.home{position:relative;height:100%}
.home .scene{position:absolute;inset:0;height:100%;aspect-ratio:auto}
.home .over{position:absolute;inset:0;padding:12px;display:flex;flex-direction:column;gap:10px;pointer-events:none}
.home .over>*{pointer-events:auto}
.quick{display:flex;flex-direction:column;gap:12px;position:absolute;right:10px;top:12px}
.qbtn{position:relative;width:56px;display:flex;flex-direction:column;align-items:center;gap:2px;border:0;background:none;color:var(--gold-hi);font-size:11px;text-shadow:0 1px 2px #000}
.qbtn i{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-family:var(--brush);font-size:20px;
  background:radial-gradient(circle at 50% 35%,#34466f,#0d1322 70%);border:2px solid var(--gold);box-shadow:0 0 10px rgba(216,180,106,.35),inset 0 0 8px rgba(0,0,0,.6)}
.qbtn.hot i{border-color:#ffd27a;animation:glow 1.6s ease-in-out infinite;color:#fff1c4;background:radial-gradient(circle at 50% 35%,#d9523a,#6b160b 75%)}
@keyframes glow{50%{box-shadow:0 0 22px rgba(255,190,90,.85),inset 0 0 8px rgba(0,0,0,.5)}}
.taskbar{margin-top:auto;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;
  background:linear-gradient(90deg,rgba(10,14,26,.94),rgba(20,29,51,.9));border:1px solid var(--gold-line)}
.taskbar .tk{flex:1;min-width:0}
.taskbar .tk b{display:block;font-size:14px;color:var(--gold-hi);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.taskbar .tk span{font-size:11px;color:var(--mute)}
.seal{font-family:var(--brush);color:#fff2da;background:var(--red);border-radius:4px;padding:2px 5px;font-size:13px;box-shadow:0 0 0 1px #f0c078 inset}
.bubble{position:absolute;left:14px;right:80px;bottom:90px;display:flex;align-items:flex-end;gap:8px;animation:bubIn .35s ease-out}
.bubble .fa{width:54px;height:72px;flex:none;border-radius:8px;overflow:hidden;border:1.5px solid var(--q,var(--gold))}
.bubble .tx{position:relative;padding:9px 12px;border-radius:12px;background:rgba(247,236,210,.96);color:#2a1f10;font-size:14px;line-height:1.5;
  box-shadow:0 4px 14px rgba(0,0,0,.5);border:1px solid #d8b46a}
.bubble .tx b{display:block;font-size:12px;color:var(--red)}
.bubble .tx::before{content:"";position:absolute;left:-7px;bottom:12px;border:7px solid transparent;border-right-color:rgba(247,236,210,.96);border-left:0}
@keyframes bubIn{from{opacity:0;transform:translateY(10px) scale(.96)}}

/* ---------- 立绘（portrait.js）：图 / 占位剪影 + 分档动效 ---------- */
.por{position:relative;aspect-ratio:3/4;overflow:hidden;background:#0b1020;--q:var(--q0);container-type:inline-size}
.por>.pimg,.por>.pcv,.por>.pvid,.por>.pfx{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.por>.pfx{pointer-events:none;z-index:2}
.por>em{position:absolute;right:6%;top:6%;z-index:3;writing-mode:vertical-rl;font-style:normal;font-family:var(--brush);letter-spacing:3px;
  color:color-mix(in srgb,var(--q) 70%,#fff);font-size:clamp(13px,11cqw,34px);text-shadow:0 2px 6px #000;pointer-events:none}
.por.t0>.pimg{animation:breath0 3.2s ease-in-out infinite;transform-origin:50% 100%}
.por.t1>.pimg,.por.t2>.pimg,.por.t3>.pimg,.por.t4>.pimg,.por.t5>.pimg{animation:breath1 3s ease-in-out infinite,nod 7s ease-in-out infinite;transform-origin:50% 100%}
@keyframes breath0{50%{transform:scale(1.003)}}
@keyframes breath1{50%{transform:scale(1.006)}}
@keyframes nod{0%,88%,100%{rotate:0deg}93%{rotate:-.5deg}}
.por.flow::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:inherit;padding:2px;
  background:conic-gradient(from var(--ang,0deg),transparent 0 70%,#fff3c4 80%,var(--q) 88%,transparent 95%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:spin 3s linear infinite}
.por.enter4{animation:enter4 1.5s cubic-bezier(.2,.9,.3,1)}
.por.enter4::before{content:"";position:absolute;inset:-20%;z-index:5;pointer-events:none;background:radial-gradient(circle,rgba(255,240,200,.95),rgba(255,200,120,.4) 35%,transparent 65%);animation:flash 1.2s ease-out forwards}
@keyframes enter4{0%{opacity:0;transform:scale(1.18);filter:brightness(2.6) blur(6px)}45%{opacity:1;filter:brightness(1.6) blur(0)}100%{transform:none;filter:none}}
.grand{position:absolute;inset:0;z-index:120;background:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;animation:fadeIn .3s}
.grand.out{animation:fadeOut .45s forwards}
@keyframes fadeOut{to{opacity:0}}
.grand-light{position:absolute;left:50%;top:44%;width:30px;height:30px;margin:-15px;border-radius:50%;background:radial-gradient(circle,#fff,#ffe6a8 30%,rgba(255,200,100,0) 70%);
  animation:grandLight 1.6s cubic-bezier(.3,.8,.4,1) forwards}
@keyframes grandLight{0%{transform:scale(0)}40%{transform:scale(30);opacity:1}100%{transform:scale(40);opacity:.25}}
.grand-rays{position:absolute;inset:-60%;background:repeating-conic-gradient(rgba(255,230,160,.18) 0 6deg,transparent 6deg 15deg);animation:spin2 16s linear infinite;opacity:0;animation-delay:.6s;animation-fill-mode:forwards}
.grand-rays{animation:spin2 16s linear infinite,raysIn .8s .6s forwards}
@keyframes raysIn{to{opacity:1}}
.grand-por{position:relative;width:74%;border-radius:14px;overflow:hidden;box-shadow:0 0 60px rgba(255,220,150,.6);animation:walkOut 1.8s .5s cubic-bezier(.2,.8,.3,1) both}
@keyframes walkOut{0%{opacity:0;transform:scale(.55) translateY(20px);filter:brightness(4) blur(10px)}60%{opacity:1;filter:brightness(1.5) blur(0)}100%{transform:none;filter:none}}
.grand-name{position:relative;margin-top:14px;font-family:var(--brush);font-size:30px;letter-spacing:8px;color:var(--gold-hi);text-shadow:0 0 16px #ffb84a;animation:inkIn 1s 1.6s both}
.grand-line{position:relative;margin:8px 24px 0;font-size:17px;color:#fff6e0;text-align:center;line-height:1.8;animation:inkIn 1s 2.1s both}
/* ---------- 门客卡 ---------- */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.mk{position:relative;border-radius:12px;padding:3px;background:linear-gradient(160deg,color-mix(in srgb,var(--q) 90%,#fff),color-mix(in srgb,var(--q) 55%,#000));
  box-shadow:0 0 calc(var(--glow,0) * 1px) color-mix(in srgb,var(--q) 80%,transparent),0 4px 10px rgba(0,0,0,.5);transition:transform .12s}
.mk:active{transform:scale(.97)}
.mk[data-q="2"]{--glow:6}.mk[data-q="3"]{--glow:10}.mk[data-q="4"]{--glow:14}.mk[data-q="5"]{--glow:18}
.mk[data-q="5"],.mk[data-q="6"]{animation:pulse 2.4s ease-in-out infinite}
.mk[data-q="6"]{--glow:22;background:conic-gradient(from var(--ang,0deg),#ffe9a8,#ff9b6b,#f5e07a,#8fe3ff,#e7a6ff,#ffe9a8);animation:spin 4s linear infinite,pulse 2.4s ease-in-out infinite}
@property --ang{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes spin{to{--ang:360deg}}
@keyframes pulse{50%{box-shadow:0 0 calc(var(--glow) * 1.6px) color-mix(in srgb,var(--q) 90%,transparent),0 4px 10px rgba(0,0,0,.5)}}
.mk .in{border-radius:9px;overflow:hidden;background:var(--ink1);position:relative}
.mk .por{border-radius:9px 9px 0 0}
.bubble .fa .por{height:100%}
.mk .tags{position:absolute;left:6px;top:6px;display:flex;flex-direction:column;gap:4px;z-index:2}
.qtag{font-family:var(--brush);font-size:13px;min-width:22px;padding:1px 4px;text-align:center;border-radius:4px;color:#1a1208;
  background:linear-gradient(180deg,color-mix(in srgb,var(--q) 60%,#fff),var(--q));box-shadow:0 1px 3px rgba(0,0,0,.6)}
.ctag{font-size:10px;padding:0 4px;border-radius:3px;border:1px solid;background:rgba(0,0,0,.6);text-align:center;line-height:16px}
.ctag.c凡人{color:#e8dcc0}.ctag.c术士{color:#8ad3ff}.ctag.c修士{color:#f7d67a}
.mk .lv{position:absolute;right:6px;top:6px;z-index:2;font-family:Georgia,serif;font-size:12px;color:#fff;background:rgba(0,0,0,.65);border-radius:10px;padding:0 7px;border:1px solid rgba(255,255,255,.2)}
.mk .ft{padding:6px 8px 7px;background:linear-gradient(180deg,#141d33,#0b0f1a)}
.mk .ft b{display:block;font-size:16px;color:color-mix(in srgb,var(--q) 55%,#fff);letter-spacing:1px}
.mk .ft .four{display:flex;justify-content:space-between;font-size:11px;color:var(--mute);margin-top:2px;font-family:Georgia,var(--kai)}
.mk .ft .pw{font-size:11px;color:var(--gold)}
.mk .job{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(0deg,rgba(0,0,0,.8),transparent);font-size:11px;padding:10px 6px 3px;text-align:center;color:var(--gold-hi)}

/* ---------- 全屏层 / 弹窗 ---------- */
.layer{position:absolute;inset:0;z-index:50;display:flex;flex-direction:column;background:rgba(3,5,10,.72);backdrop-filter:blur(3px);animation:fadeIn .2s}
.layer.solid{background:linear-gradient(180deg,var(--ink1),var(--ink0))}
@keyframes fadeIn{from{opacity:0}}
.sheet{margin:auto 14px;max-height:86%;overflow-y:auto;animation:popIn .25s cubic-bezier(.2,1.3,.4,1)}
@keyframes popIn{from{opacity:0;transform:scale(.88)}}
.xbtn{position:absolute;right:10px;top:10px;width:30px;height:30px;border-radius:50%;border:1px solid var(--gold);background:#0d1322;color:var(--gold-hi);font-size:16px;z-index:3}
.lhead{display:flex;align-items:center;padding:calc(10px + var(--safe-t)) 12px 8px;gap:8px;border-bottom:1px solid var(--gold-line);background:rgba(7,9,15,.9)}
.lhead .t{flex:1;text-align:center;font-family:var(--brush);font-size:22px;color:var(--gold-hi);letter-spacing:4px}
.lhead .back{width:34px;height:34px;border-radius:50%;border:1px solid var(--gold);background:#0d1322;color:var(--gold-hi);font-size:18px}
.lbody{flex:1;overflow-y:auto;padding:12px 12px calc(20px + var(--safe-b))}

/* 门客详情 */
.md-top{position:relative}
.md-top .por{border-radius:14px;border:2px solid var(--q);box-shadow:0 0 24px color-mix(in srgb,var(--q) 55%,transparent)}
.md-top .nameplate{position:absolute;left:10px;bottom:10px;right:10px;display:flex;align-items:flex-end;gap:8px}
.md-top .nameplate b{font-family:var(--brush);font-size:30px;color:#fff;text-shadow:0 0 12px var(--q),0 2px 4px #000;letter-spacing:3px}
.md-say{position:absolute;left:12px;right:12px;top:14px;z-index:4}
.attr4{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;text-align:center}
.attr4>div{padding:6px 0;border-radius:8px;background:rgba(0,0,0,.35);border:1px solid rgba(216,180,106,.2)}
.attr4 b{display:block;font-size:17px;font-family:Georgia,var(--kai);color:var(--gold-hi)}
.attr4 span{font-size:11px;color:var(--mute)}
.skins{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px}
.skin{flex:none;width:92px;border-radius:10px;padding:2px;background:var(--st,#555);position:relative}
.skin .por{border-radius:8px}
.skin .nm{font-size:12px;text-align:center;padding:3px 2px;color:#fff;background:rgba(0,0,0,.7);border-radius:0 0 8px 8px}
.skin.lock{filter:grayscale(1) brightness(.55)}
.skin.on::after{content:"穿戴中";position:absolute;right:-4px;top:-6px;font-size:10px;padding:0 5px;border-radius:6px;background:var(--red);color:#fff;border:1px solid #f0c078}
.skin[data-t="普通"]{--st:linear-gradient(160deg,#cfcfcf,#6b6b6b)}.skin[data-t="稀有"]{--st:linear-gradient(160deg,#78e08c,#1f6b33)}
.skin[data-t="史诗"]{--st:linear-gradient(160deg,#cf8cff,#5a1f8f)}.skin[data-t="传说"]{--st:linear-gradient(160deg,#ffab5e,#a4361a)}
.skin[data-t="典藏"]{--st:conic-gradient(#ffe9a8,#ff9b6b,#f5e07a,#8fe3ff,#e7a6ff,#ffe9a8)}
.skin[data-t="原皮"]{--st:linear-gradient(160deg,#d8b46a,#5a4119)}
.chatbox{display:flex;gap:6px;margin-top:8px}
.chatbox input{flex:1;min-width:0;border-radius:10px;border:1px solid var(--gold-line);background:rgba(0,0,0,.4);color:var(--text);padding:8px 10px;font-size:14px}

/* ---------- 表单 ---------- */
.field{display:block;margin:10px 0}
.field span{display:block;font-size:13px;color:var(--mute);margin-bottom:4px}
.field input{width:100%;border-radius:10px;border:1px solid var(--gold-line);background:rgba(0,0,0,.45);color:var(--text);padding:11px 12px;font-size:16px;outline:none}
.field input:focus{border-color:var(--gold-hi);box-shadow:0 0 0 3px rgba(216,180,106,.15)}
.tabs{display:flex;border-bottom:1px solid var(--gold-line);margin-bottom:8px}
.tabs button{flex:1;border:0;background:none;color:var(--mute);font-size:16px;padding:10px;letter-spacing:3px;border-bottom:2px solid transparent}
.tabs button.on{color:var(--gold-hi);border-color:var(--gold)}

/* 登录页 */
.gate{position:absolute;inset:0;overflow-y:auto;display:flex;flex-direction:column;align-items:center;padding:calc(40px + var(--safe-t)) 20px 30px}
.logo{font-family:var(--brush);font-size:68px;line-height:1;letter-spacing:6px;
  background:linear-gradient(180deg,#fff5d6 10%,#e9c577 45%,#9b6b25 80%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 18px rgba(216,180,106,.45)) drop-shadow(0 3px 0 #000);margin-top:6vh}
.logo-sub{letter-spacing:8px;color:var(--mute);margin:10px 0 28px;font-size:13px}
.logo-sub::before,.logo-sub::after{content:"◆";color:var(--red-hi);margin:0 8px;font-size:9px;vertical-align:middle}
.gate .panel{width:100%;max-width:360px}
.origin{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.origin button{text-align:left;border-radius:10px;border:1px solid var(--gold-line);background:rgba(0,0,0,.35);color:var(--text);padding:10px;font-size:12px;line-height:1.5}
.origin button b{display:block;font-size:16px;color:var(--gold-hi);margin-bottom:2px}
.origin button.on{border-color:var(--gold-hi);background:linear-gradient(180deg,rgba(184,50,31,.4),rgba(40,14,10,.6));box-shadow:0 0 12px rgba(216,180,106,.3)}

/* 序章 */
.prologue{position:absolute;inset:0;z-index:60;background:#000}
.prologue .scene{position:absolute;inset:0;height:100%;aspect-ratio:auto;transition:filter 1s}
.prologue .txt{position:absolute;left:0;right:0;bottom:0;padding:40px 26px calc(46px + var(--safe-b));
  background:linear-gradient(0deg,rgba(0,0,0,.92) 55%,transparent);font-size:18px;line-height:2;letter-spacing:1px;min-height:40%}
.prologue .txt p{margin:0;animation:inkIn 1.2s ease-out both}
@keyframes inkIn{from{opacity:0;filter:blur(6px);transform:translateY(6px)}}
.prologue .who{position:absolute;left:50%;bottom:34%;width:58%;transform:translateX(-50%);animation:fadeIn 1s}
.prologue .who .por{border-radius:12px;border:1px solid var(--gold-line);box-shadow:0 0 40px rgba(0,0,0,.8)}
.prologue .tap{position:absolute;right:20px;bottom:calc(16px + var(--safe-b));font-size:12px;color:var(--mute);animation:blink 1.4s infinite}
.prologue .skip{position:absolute;right:14px;top:calc(14px + var(--safe-t));z-index:3;border:1px solid rgba(255,255,255,.3);background:rgba(0,0,0,.4);color:#ccc;border-radius:14px;padding:3px 12px;font-size:12px}
@keyframes blink{50%{opacity:.3}}

/* 行情 */
.goods{display:flex;flex-direction:column;gap:8px}
.good{display:grid;grid-template-columns:1fr auto;gap:4px 10px;padding:10px 12px;border-radius:10px;background:rgba(0,0,0,.3);border:1px solid rgba(216,180,106,.2)}
.good b{font-size:16px;color:var(--gold-hi)}
.good .pr{font-family:Georgia,var(--kai);font-size:18px;text-align:right}
.good .ops{grid-column:1/-1;display:flex;gap:6px;align-items:center}
.rumor{padding:8px 10px;border-left:3px solid var(--red);background:rgba(184,50,31,.12);margin:6px 0;font-size:13px;border-radius:0 8px 8px 0}

/* 商号 */
.coffer{text-align:center;padding:18px 14px}
.coffer .box{width:120px;height:86px;margin:4px auto 10px;position:relative;border-radius:10px 10px 14px 14px;
  background:linear-gradient(180deg,#7a2a14,#3e1206);border:2px solid var(--gold);box-shadow:0 0 18px rgba(216,180,106,.3),inset 0 -8px 12px rgba(0,0,0,.5)}
.coffer .box::before{content:"";position:absolute;left:-6px;right:-6px;top:-10px;height:24px;border-radius:10px 10px 4px 4px;background:linear-gradient(180deg,#9b3a1e,#5a1a0a);border:2px solid var(--gold)}
.coffer .box::after{content:"";position:absolute;left:50%;top:22px;width:18px;height:22px;margin-left:-9px;border-radius:4px;background:linear-gradient(#fbe7ad,#b58535)}
.coffer .amt{font-size:28px;font-family:Georgia,var(--kai);color:var(--gold-hi);text-shadow:0 0 10px rgba(216,180,106,.5)}
.shop{display:flex;gap:10px;align-items:center;padding:10px;border-radius:12px;background:rgba(0,0,0,.3);border:1px solid rgba(216,180,106,.22);margin-bottom:8px}
.shop .sig{width:44px;height:58px;flex:none;border-radius:6px;background:linear-gradient(180deg,#1b1208,#3b2410);border:2px solid var(--gold);
  writing-mode:vertical-rl;font-family:var(--brush);color:var(--gold-hi);font-size:17px;display:grid;place-items:center;letter-spacing:2px}
.shop.lock{opacity:.5}

/* 寻访 */
.loc{position:relative;border-radius:12px;overflow:hidden;margin-bottom:10px;border:1px solid var(--gold-line);min-height:96px}
.loc .scene{position:absolute;inset:0;aspect-ratio:auto;height:100%}
.loc .cv{position:relative;padding:14px;background:linear-gradient(90deg,rgba(7,9,15,.92),rgba(7,9,15,.35));display:flex;align-items:center;gap:10px;min-height:96px}
.loc b{font-family:var(--brush);font-size:22px;color:var(--gold-hi);letter-spacing:3px}
.loc.lock{filter:grayscale(1) brightness(.6)}

/* 招贤 */
.gacha-hero{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--gold);aspect-ratio:9/10}
.gacha-hero .scene{position:absolute;inset:0;aspect-ratio:auto;height:100%}
.gacha-hero .cv{position:absolute;left:0;right:0;bottom:0;padding:16px;background:linear-gradient(0deg,rgba(7,9,15,.95),transparent)}
.pity{display:flex;gap:6px;margin-top:8px}
.pity>div{flex:1;text-align:center;font-size:11px;color:var(--mute);background:rgba(0,0,0,.4);border-radius:8px;padding:5px 0;border:1px solid rgba(216,180,106,.2)}
.pity b{display:block;font-size:15px;color:var(--gold-hi);font-family:Georgia,var(--kai)}
.draw{position:absolute;inset:0;z-index:70;background:radial-gradient(circle at 50% 40%,#1c2844,#03050a 70%);display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden}
.draw .scroll{width:86%;height:12px;border-radius:6px;background:linear-gradient(90deg,#7a4d15,#f7e2a8,#7a4d15);box-shadow:0 0 30px rgba(247,226,168,.7);animation:unroll .7s ease-out forwards}
@keyframes unroll{0%{transform:scaleX(0)}70%{transform:scaleX(1);height:12px}100%{transform:scaleX(1);height:0;opacity:0}}
.draw .cards{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;width:94%;padding:10px}
.draw .cards.one{grid-template-columns:1fr;width:58%}
.dcard{perspective:600px;aspect-ratio:3/4.6}
.dcard .fl{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.3,1.4,.5,1)}
.dcard.open .fl{transform:rotateY(180deg)}
.dcard .bk,.dcard .fr{position:absolute;inset:0;backface-visibility:hidden;border-radius:8px;overflow:hidden}
.dcard .bk{background:linear-gradient(135deg,#6b160b,#2a0703);border:1.5px solid var(--gold);display:grid;place-items:center;font-family:var(--brush);color:var(--gold);font-size:18px}
.dcard .fr{transform:rotateY(180deg);border:2px solid var(--q);box-shadow:0 0 14px var(--q);background:#0b1020;display:flex;flex-direction:column}
.dcard .fr .por{flex:1;aspect-ratio:auto}
.dcard .fr b{font-size:12px;text-align:center;padding:2px 0;color:#fff;background:rgba(0,0,0,.75);white-space:nowrap;overflow:hidden}
.cards.one .dcard .fr b{font-size:20px;font-family:var(--brush)}
.dcard .new{position:absolute;left:-3px;top:-5px;z-index:3;font-size:10px;background:var(--red);color:#fff;border-radius:4px;padding:0 4px;border:1px solid #f0c078;display:none}
.dcard.open .new{display:block}
.dcard.big.open{animation:bigHit .6s}
@keyframes bigHit{30%{transform:scale(1.25)}}
.flash{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle,rgba(255,230,160,.95),rgba(255,180,60,.3) 40%,transparent 70%);animation:flash .9s ease-out forwards;z-index:5}
@keyframes flash{from{opacity:1;transform:scale(.4)}to{opacity:0;transform:scale(2)}}
.rays{position:absolute;inset:-50%;background:repeating-conic-gradient(rgba(247,226,168,.14) 0 8deg,transparent 8deg 20deg);animation:spin2 12s linear infinite;pointer-events:none}
@keyframes spin2{to{transform:rotate(360deg)}}

/* 充值 */
.quota{padding:12px 14px}
.quota .big{font-size:26px;color:var(--gold-hi);font-family:Georgia,var(--kai)}
.dfirst{position:relative;overflow:hidden;background:linear-gradient(135deg,rgba(184,50,31,.55),rgba(60,14,8,.85));border-color:#f0c078}
.dfirst .streak{display:flex;gap:4px;margin-top:8px}
.dfirst .streak i{flex:1;height:6px;border-radius:3px;background:rgba(255,255,255,.15)}
.dfirst .streak i.on{background:linear-gradient(90deg,#fbe7ad,#d4a852)}
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.tier{position:relative;border-radius:12px;padding:12px 4px 8px;text-align:center;border:1px solid var(--gold-line);
  background:linear-gradient(180deg,#1f2c4c,#0d1322);box-shadow:inset 0 1px 0 rgba(247,226,168,.18);color:var(--text)}
.tier:active{transform:scale(.96)}
.tier .gem{width:34px;height:34px;margin:4px auto 8px;border-radius:8px;transform:rotate(45deg);
  background:linear-gradient(135deg,#dafff3,#3fc49c 45%,#0d5e46);box-shadow:0 0 16px rgba(95,211,176,.7)}
.tier .j{font-size:15px;color:#bff7e6;font-family:Georgia,var(--kai)}
.tier .p{margin-top:6px;border-radius:14px;padding:3px 0;background:linear-gradient(180deg,#d9523a,#8f2213);color:#fff3dc;border:1px solid #f0c078;font-size:14px}
.tier .dbl{position:absolute;right:-4px;top:-6px;font-size:10px;padding:1px 5px;border-radius:6px;color:#fff;background:linear-gradient(180deg,#ff6a4d,#b8321f);border:1px solid #ffe0a0;box-shadow:0 0 8px rgba(255,100,60,.6)}
.tier.off{filter:grayscale(.9) brightness(.6);pointer-events:none}
.paying{display:grid;place-items:center;gap:14px}
.spin{width:44px;height:44px;border-radius:50%;border:3px solid rgba(216,180,106,.25);border-top-color:var(--gold-hi);animation:spin2 .8s linear infinite}
.arrive{position:absolute;inset:0;z-index:80;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle,#123a33,#02060a 70%);overflow:hidden}
.arrive .gembig{width:110px;height:110px;border-radius:22px;transform:rotate(45deg);background:linear-gradient(135deg,#eafff8,#3fc49c 45%,#0a5a42);
  box-shadow:0 0 60px rgba(95,211,176,.9),0 0 120px rgba(95,211,176,.5);animation:gemIn .7s cubic-bezier(.2,1.5,.4,1)}
@keyframes gemIn{from{transform:rotate(45deg) scale(0)}}
.arrive .num{margin-top:40px;font-size:44px;font-family:Georgia,var(--kai);color:#dffff4;text-shadow:0 0 20px rgba(95,211,176,.9)}
.arrive .cap{font-family:var(--brush);font-size:28px;letter-spacing:6px;color:var(--gold-hi);margin-top:6px}
.drop{position:absolute;top:-20px;width:12px;height:12px;border-radius:3px;transform:rotate(45deg);background:linear-gradient(135deg,#dafff3,#3fc49c);animation:drop linear forwards}
@keyframes drop{to{transform:translateY(110vh) rotate(405deg)}}
.vipup{margin-top:18px;padding:8px 18px;border-radius:20px;background:linear-gradient(90deg,transparent,rgba(247,226,168,.25),transparent);color:var(--gold-hi);font-size:16px;animation:inkIn .8s .6s both}

/* 列表 */
.list>div{padding:10px 4px;border-bottom:1px solid rgba(216,180,106,.12)}
.rank{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;margin-bottom:6px;background:rgba(0,0,0,.3);border:1px solid rgba(216,180,106,.15)}
.rank.me{border-color:var(--gold);background:linear-gradient(90deg,rgba(184,50,31,.35),rgba(0,0,0,.3))}
.rank .no{width:30px;text-align:center;font-family:Georgia,serif;font-size:18px;color:var(--mute)}
.rank .no.n1{color:#ffd76a;text-shadow:0 0 8px #ffb84a}.rank .no.n2{color:#dfe6f2}.rank .no.n3{color:#e3a36a}
.morebox{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.morebox button{border-radius:12px;border:1px solid var(--gold-line);background:linear-gradient(180deg,#1f2c4c,#0d1322);color:var(--text);padding:14px 4px 10px;font-size:13px;position:relative}
.morebox button i{display:block;font-style:normal;font-family:var(--brush);font-size:26px;color:var(--gold-hi);margin-bottom:4px}
.switch{position:relative;width:46px;height:26px;border-radius:13px;background:#2a3350;border:1px solid var(--gold-line);flex:none;transition:.2s}
.switch::after{content:"";position:absolute;left:2px;top:2px;width:20px;height:20px;border-radius:50%;background:#8e8471;transition:.2s}
.switch.on{background:linear-gradient(90deg,#8f2213,#d9523a)}
.switch.on::after{left:22px;background:var(--gold-hi)}
input[type=range]{width:100%;accent-color:var(--gold)}

/* 提示 / 飘字 */
#toast{position:absolute;left:50%;top:calc(110px + var(--safe-t));transform:translateX(-50%);z-index:100;display:flex;flex-direction:column;gap:6px;align-items:center;pointer-events:none;width:90%}
#toast>div{padding:8px 16px;border-radius:20px;background:rgba(7,9,15,.92);border:1px solid var(--gold);color:var(--gold-hi);font-size:14px;text-align:center;
  box-shadow:0 4px 14px rgba(0,0,0,.5);animation:toastIn .25s,toastOut .4s 2.2s forwards}
#toast>div.err{border-color:var(--red-hi);color:#ffb6a8}
@keyframes toastIn{from{opacity:0;transform:translateY(-8px)}}
@keyframes toastOut{to{opacity:0;transform:translateY(-8px)}}
.float{position:absolute;z-index:110;pointer-events:none;font-family:Georgia,var(--kai);font-weight:700;font-size:20px;color:var(--gold-hi);text-shadow:0 0 8px rgba(0,0,0,.9),0 0 10px rgba(216,180,106,.8);animation:floatUp 1.2s ease-out forwards}
.float.crit{font-size:34px;color:#ffdf6a;text-shadow:0 0 14px #ff7a2a,0 2px 0 #7a2a0a}
@keyframes floatUp{0%{opacity:0;transform:translateY(8px) scale(.6)}15%{opacity:1;transform:translateY(0) scale(1.15)}100%{opacity:0;transform:translateY(-70px) scale(1)}}
.coin{position:absolute;z-index:105;width:16px;height:16px;border-radius:50%;pointer-events:none;background:radial-gradient(circle at 35% 30%,#fff,#e0c170 45%,#8a6320);box-shadow:0 0 6px rgba(255,210,120,.8)}
.bump{animation:bump .4s}
@keyframes bump{40%{transform:scale(1.25);color:#fff}}
.shake{animation:shake .45s}
@keyframes shake{20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}
.empty{text-align:center;color:var(--dim);padding:30px 0}
.lock-tip{padding:30px 10px;text-align:center;color:var(--mute)}
.lock-tip b{display:block;font-family:var(--brush);font-size:26px;color:var(--gold);margin-bottom:8px;letter-spacing:4px}

/* 游客入口 / 衙门 / 圣旨 / 案子 / 首充礼包 */
.guest-btn{margin-top:18px;width:100%;max-width:360px;font-size:18px;padding:14px;letter-spacing:4px;animation:glow 1.8s ease-in-out infinite}
.yamen-card{position:relative;align-self:flex-start;margin-top:4px;width:calc(100% - 76px);padding:10px 12px 12px;border-radius:12px;
  background:linear-gradient(180deg,rgba(60,14,8,.9),rgba(20,10,10,.85));border:1px solid #f0c078;box-shadow:0 6px 20px rgba(0,0,0,.55)}
.plaque{display:inline-block;font-family:var(--brush);font-size:20px;letter-spacing:6px;color:#3a2508;padding:2px 14px;border-radius:4px;
  background:linear-gradient(180deg,#fbe7ad,#c99a45);border:2px solid #7a4d15;box-shadow:0 2px 0 #3a2508}
.ym{flex:1;text-align:center;background:rgba(0,0,0,.35);border-radius:8px;padding:5px 0;border:1px solid rgba(240,192,120,.25)}
.ym b{display:block;font-size:18px;color:var(--gold-hi);font-family:Georgia,var(--kai)}.ym span{font-size:11px;color:#e9cfa6}
.promote-ready{position:absolute;right:10px;top:10px;font-family:var(--brush);color:#fff1c4;background:var(--red);border:1px solid #ffd27a;border-radius:6px;padding:1px 8px;animation:glow 1.4s infinite}
.docs{display:flex;gap:14px;align-items:center}
.docs .stack{position:relative;width:62px;height:70px;flex:none}
.docs .stack i{position:absolute;left:4px;bottom:4px;width:48px;height:58px;border-radius:3px;background:linear-gradient(180deg,#f3e6c8,#d8c29a);border:1px solid #8a6a3a;box-shadow:0 2px 3px rgba(0,0,0,.4)}
.docs .stack i::after{content:"";position:absolute;left:8px;right:8px;top:10px;height:28px;background:repeating-linear-gradient(180deg,#7a5a2a 0 1px,transparent 1px 6px);opacity:.5}
.case{display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:10px;background:rgba(0,0,0,.3);border:1px solid rgba(216,180,106,.22);margin-bottom:8px;font-size:14px;line-height:1.6}
.case.done{opacity:.6}
.case-text{font-size:16px;line-height:1.9;padding:10px 12px;border-radius:8px;background:rgba(243,230,200,.08);border-left:3px solid var(--gold)}
.edict{border-radius:8px;padding:16px 18px;background:linear-gradient(180deg,#f7e6b0,#e4c171);color:#3a2508;border:3px double #8a5a1a;box-shadow:inset 0 0 20px rgba(120,70,10,.35)}
.edict .ed-t{font-family:var(--brush);font-size:30px;text-align:center;letter-spacing:12px;color:#8f2213}
.edict .ed-b{margin-top:8px;line-height:2;font-size:16px}.edict b{color:#8f2213;font-size:18px}
.firstpay{background:linear-gradient(135deg,rgba(200,140,40,.5),rgba(70,30,6,.9));border-color:#ffd27a}
.dfirst .streak i.ms{height:10px;margin-top:-2px;background:rgba(255,210,122,.35)}.dfirst .streak i.ms.on{background:#ffd27a}
.ico.zj{border-radius:4px;background:linear-gradient(180deg,#e05a3c,#8f2213);box-shadow:inset 0 0 0 2px #f0c078}
.ico.zj::after{content:"绩";position:absolute;inset:0;font-size:12px;line-height:20px;text-align:center;color:#fff1c4;font-weight:700}
.ico.ls{border-radius:3px;transform:rotate(45deg) scale(.7);background:linear-gradient(135deg,#e8f6ff,#7fc4ff 50%,#2a5f9e);box-shadow:0 0 6px rgba(127,196,255,.7)}
.ell{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prologue .pg{position:absolute;left:16px;top:calc(18px + var(--safe-t));font-size:11px;color:rgba(255,255,255,.4)}
.res{gap:4px}
.res>div{font-size:12px;padding:2px 4px 2px 2px;gap:3px}
.res .ico{width:18px;height:18px}
.res .plus{width:15px;height:15px;font-size:13px;line-height:14px}
.logo-sub{letter-spacing:4px}
#stage::before{opacity:.045}
[data-q="0"]{--q:var(--q0)}[data-q="1"]{--q:var(--q1)}[data-q="2"]{--q:var(--q2)}[data-q="3"]{--q:var(--q3)}
[data-q="4"]{--q:var(--q4)}[data-q="5"]{--q:var(--q5)}[data-q="6"]{--q:var(--q6)}
.mk .por>em{top:22%}
.mk.gone{filter:grayscale(.9) brightness(.7)}
.hy-take{position:absolute;left:50%;bottom:64px;transform:translateX(-50%);z-index:5;white-space:nowrap}
.loom-row{display:flex;align-items:center;gap:10px;padding:8px;border-radius:10px;background:rgba(0,0,0,.3);border:1px solid rgba(216,180,106,.18);margin-bottom:8px}
.loom-row .fa{width:44px;height:58px;flex:none;border-radius:6px;overflow:hidden;border:1.5px solid var(--q)}
.loom-row .fa .por{height:100%}
.cl-h{margin:10px 0 4px;color:var(--gold);font-size:14px;letter-spacing:2px}
ul.cl{margin:0;padding-left:18px;font-size:14px;line-height:1.8}
ul.cl li{margin-bottom:4px}
.pill.red{color:#fff;background:var(--red);border-color:#f0c078}
.grid2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid3{grid-template-columns:repeat(3,minmax(0,1fr))}
.mk,.mk .ft{min-width:0}
.mk .ft .four{gap:2px;flex-wrap:wrap}
.res>div{flex:1 1 0}
.res>div:nth-child(-n+2){flex-grow:1.4}
.lbody>.scene:first-child{aspect-ratio:auto;height:190px;border-radius:12px;border:1px solid var(--gold-line)}
/* 元宝图标占位（官场阶段的充值货币） */
.ico.ingot{border-radius:0;background:none}
.ico.ingot::before{content:"";position:absolute;left:1px;right:1px;bottom:3px;height:9px;border-radius:2px 2px 9px 9px;background:linear-gradient(180deg,#fff0b0,#e0a93a 60%,#9a6414);box-shadow:0 0 5px rgba(255,200,90,.6)}
.ico.ingot::after{content:"";position:absolute;left:6px;right:6px;top:4px;height:9px;border-radius:50% 50% 30% 30%;background:radial-gradient(circle at 45% 35%,#fff6cf,#f0c457 55%,#b07a1e)}
.tier .gem.ingot{transform:none;border-radius:6px 6px 20px 20px;width:44px;height:24px;margin:12px auto 10px;background:linear-gradient(180deg,#fff0b0,#e0a93a 60%,#9a6414);box-shadow:0 0 16px rgba(255,200,90,.7)}
/* 顶部资源条：银两、元宝给宽一点，体力、招贤令窄一点，数字不再被截 */
.res>div:nth-child(1){flex-grow:1.3}.res>div:nth-child(2){flex-grow:1.7}.res>div:nth-child(3){flex-grow:1.2}
.res>div:nth-child(4),.res>div:nth-child(5){flex-grow:.9}
.res>div b{letter-spacing:-.3px}
.arrive.yb{background:radial-gradient(circle,#3a2a0e,#07050a 70%)}
.arrive .gembig.ingot{transform:none;width:150px;height:80px;border-radius:14px 14px 60px 60px;background:linear-gradient(180deg,#fff4c4,#e8b447 55%,#9a6414);box-shadow:0 0 60px rgba(255,200,90,.9),0 0 120px rgba(255,180,60,.5);animation:ybIn .7s cubic-bezier(.2,1.5,.4,1)}
@keyframes ybIn{from{transform:scale(0)}}
.arrive.yb .num{color:#fff3cf;text-shadow:0 0 20px rgba(255,200,90,.9)}
.drop.gold{background:linear-gradient(135deg,#fff3c4,#e0a93a)}
.res>div:nth-child(2){flex-grow:1.5}.res>div:nth-child(3){flex-grow:1.15}.res>div:nth-child(4){flex-grow:.75}.res>div:nth-child(5){flex-grow:1.05}

/* ================= 界面皮肤图（static/img/ui/<界>/，有图才生效，没图就是上面的 CSS） ================= */
.ico.img{border-radius:0;object-fit:contain;background:none;box-shadow:none;transform:none}
html.ui-page-bg #stage{background-image:var(--ui-page-bg);background-size:cover;background-position:center}
html.ui-panel-bg .panel{background-image:var(--ui-panel-bg),linear-gradient(180deg,rgba(28,40,68,.92),rgba(13,19,34,.94));background-size:512px,auto}
html.ui-panel-border .panel{border:22px solid transparent;border-image:var(--ui-panel-border) 60 fill / 22px stretch;box-shadow:none;padding:6px}
html.ui-panel-border .panel.corner::before,html.ui-panel-border .panel.corner::after{display:none}
html.ui-title .ttl{background:var(--ui-title) center top/100% 54px no-repeat;padding:13px 20px 0;margin:4px 10px 12px}
html.ui-title .ttl small{margin-top:16px}      /* 副标题落在卷轴条下面，不挤在条里 */
html.ui-lhead .lhead{background:var(--ui-lhead) center/100% 100% no-repeat;border-bottom:0}
html.ui-btn .btn{border:0;background:var(--ui-btn) center/100% 100% no-repeat;box-shadow:none}
html.ui-btn-main .btn.red,html.ui-btn-main .btn.gold{border:0;background:var(--ui-btn-main) center/100% 100% no-repeat;box-shadow:none}
html.ui-round .qbtn i{border:0;background:var(--ui-round) center/contain no-repeat;box-shadow:none}
html.ui-top #top{background:var(--ui-top) center bottom/100% 100% no-repeat;border-bottom:0}
html.ui-res .res>div{border:0;background:var(--ui-res) center/100% 100% no-repeat}
html.ui-nav #nav{background:var(--ui-nav) center top/100% 100% no-repeat;border-top:0}
#nav button i.img{border:0;background:var(--n) center/contain no-repeat;color:transparent;box-shadow:none;width:40px;height:40px}
#nav button.on i.img{background-image:var(--n-on);transform:translateY(-4px) scale(1.08)}
html.ui-ava #top .ava{position:relative;border:0;overflow:visible}
html.ui-ava #top .ava::after{content:"";position:absolute;inset:-6px;background:var(--ui-ava) center/contain no-repeat;pointer-events:none}
html.ui-sheet .sheet.panel{border:40px solid transparent;border-image:var(--ui-sheet) 100 fill / 40px stretch;background:none;padding:4px}
/* 对话气泡 600×300：上右各切 60，下切 80、左切 100（左下角的尾巴整块落在角里，不被拉伸）；底是深色，字用浅色 */
html.ui-bubble .bubble .tx{border-style:solid;border-color:transparent;border-width:12px 12px 22px 26px;border-image:var(--ui-bubble) 60 60 80 100 fill / 12px 12px 22px 26px stretch;background:none;box-shadow:none;padding:0 2px 0 0;color:var(--text)}
html.ui-bubble .bubble .tx b{color:var(--gold-hi)}
html.ui-bubble .bubble .tx::before{display:none}
html.ui-edict .edict{background:var(--ui-edict) center/100% 100% no-repeat;border:0;box-shadow:none;padding:18% 12% 20%;aspect-ratio:1080/1600;display:flex;flex-direction:column;justify-content:center}
html.ui-line .sec::before,html.ui-line .sec::after{height:14px;background:var(--ui-line) center/100% 100% no-repeat}
/* 卡框：各品质一张 600×800 中间透明的图盖在门客卡上 */
.mk::after{content:none}
html.ui-frame-0 .mk[data-q="0"]::after{content:"";background-image:var(--ui-frame-0)}
html.ui-frame-1 .mk[data-q="1"]::after{content:"";background-image:var(--ui-frame-1)}
html.ui-frame-2 .mk[data-q="2"]::after{content:"";background-image:var(--ui-frame-2)}
html.ui-frame-3 .mk[data-q="3"]::after{content:"";background-image:var(--ui-frame-3)}
html.ui-frame-4 .mk[data-q="4"]::after{content:"";background-image:var(--ui-frame-4)}
html.ui-frame-5 .mk[data-q="5"]::after{content:"";background-image:var(--ui-frame-5)}
html.ui-frame-6 .mk[data-q="6"]::after{content:"";background-image:var(--ui-frame-6)}
.mk::after{position:absolute;left:0;right:0;top:0;aspect-ratio:3/4;z-index:4;pointer-events:none;background:center/100% 100% no-repeat}
/* 商号招牌（1200×400 横匾）和店铺外观（16:9） */
.shop .sig.img{writing-mode:horizontal-tb;width:120px;height:40px;border:0;background:none;padding:0}
.shop .sig.img img{width:100%;height:100%;object-fit:contain}
.shop[data-look]{background:linear-gradient(90deg,rgba(7,9,15,.92) 30%,rgba(7,9,15,.55)),var(--look) center/cover}

/* ================= v0.3：主线剧情 / 剿匪 / 活动 / 跑商 / 红颜养成 / 付费项目 ================= */
.wticker{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:10px;background:rgba(7,9,15,.78);border:1px solid rgba(216,180,106,.25);font-size:12px;min-width:0}
.wticker b{color:var(--gold)}
.taskbar[data-story]{cursor:pointer}
/* 剧情 */
.story{position:absolute;inset:0;z-index:65;background:#000;overflow:hidden;animation:fadeIn .3s}
.story .scene{position:absolute;inset:0;height:100%;aspect-ratio:auto;opacity:.75}
.story .skip{position:absolute;right:14px;top:calc(14px + var(--safe-t));z-index:3;border:1px solid rgba(255,255,255,.3);background:rgba(0,0,0,.45);color:#ccc;border-radius:14px;padding:3px 12px;font-size:12px}
.st-ch{position:absolute;left:16px;top:calc(14px + var(--safe-t));z-index:2;font-family:var(--brush);font-size:20px;color:var(--gold-hi);letter-spacing:2px;text-shadow:0 2px 6px #000}
.st-ch small{display:block;font-family:var(--kai);font-size:13px;color:#e9dcc0;letter-spacing:1px}
.st-box{position:absolute;left:12px;right:12px;bottom:calc(46px + var(--safe-b));display:flex;align-items:flex-end;gap:10px;animation:inkIn .5s}
.st-box .sp-por{width:34%;flex:none;border-radius:12px;overflow:hidden;border:2px solid var(--q,var(--gold));box-shadow:0 0 24px rgba(0,0,0,.8)}
.st-box .sp-ava{width:64px;height:64px;flex:none;border-radius:50%;border:2px solid var(--gold);display:grid;place-items:center;font-family:var(--brush);font-size:30px;color:var(--gold-hi);background:radial-gradient(circle at 50% 35%,#3a4a70,#0d1322)}
.st-tx{flex:1;min-width:0;padding:12px 14px;border-radius:12px;background:rgba(7,9,15,.9);border:1px solid var(--gold-line);font-size:16px;line-height:1.85}
.st-tx b{display:block;color:var(--gold-hi);font-size:14px;margin-bottom:2px}
.st-tx p{margin:0}
.st-box.narr .st-tx{background:linear-gradient(0deg,rgba(0,0,0,.92),rgba(0,0,0,.7));border-color:transparent;font-size:17px;letter-spacing:1px;color:#f4ead3}
.story .tap{position:absolute;right:20px;bottom:calc(16px + var(--safe-b));font-size:12px;color:var(--mute);animation:blink 1.4s infinite}
.st-goal{position:absolute;left:14px;right:14px;bottom:calc(40px + var(--safe-b));animation:popIn .3s}
/* 剿匪 */
.team{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.tm{text-align:center;font-size:11px;min-width:0}
.tm .fa{border-radius:8px;overflow:hidden;border:1.5px solid var(--q)}
.tm b{display:block;font-size:12px;color:var(--gold-hi);margin-top:2px}.tm span{color:var(--mute)}
.jf-ch{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:10px;background:rgba(0,0,0,.3);border:1px solid rgba(216,180,106,.2);margin-bottom:6px}
.jf-ch.lock{opacity:.5}
.pips{display:flex;gap:4px}.pips i{width:12px;height:12px;border-radius:3px;background:rgba(255,255,255,.12);border:1px solid rgba(216,180,106,.3)}
.pips i.boss{border-radius:50%}.pips i.on{background:linear-gradient(#fbe7ad,#b58535)}.pips i.cur{border-color:var(--red-hi);box-shadow:0 0 6px var(--red-hi)}
.pill.gold{color:var(--gold-hi)}.pill.mute{color:var(--mute)}
.battle{position:absolute;inset:0;z-index:70;background:#05070c;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;animation:fadeIn .3s}
.battle>.scene{position:absolute;inset:0;height:100%;aspect-ratio:auto;opacity:.45}
.bt-top,.bt-bot{position:relative;padding:calc(16px + var(--safe-t)) 16px 16px}
.bt-bot{padding-bottom:calc(24px + var(--safe-b))}
.bt-name{text-align:center;font-family:var(--brush);font-size:22px;color:var(--gold-hi);letter-spacing:3px}
.bt-enemy{text-align:center;margin-top:14px}
.bt-foe{width:120px;height:120px;margin:0 auto 10px;border-radius:50%;display:grid;place-items:center;font-family:var(--brush);font-size:64px;color:#ffd2c4;
  background:radial-gradient(circle at 50% 35%,#7a2a14,#2a0703 70%);border:3px solid #c0412a;box-shadow:0 0 30px rgba(224,85,58,.6)}
.bt-hp{height:10px;border-radius:5px;background:rgba(255,255,255,.1);overflow:hidden;margin:6px auto;max-width:320px}
.bt-hp i{display:block;height:100%;background:linear-gradient(90deg,#8f2213,#e0553a);transition:width .25s}
.bt-hp.me i{background:linear-gradient(90deg,#7d5e28,#f7e2a8)}
.bt-team{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.bt-mk{text-align:center;min-width:0}.bt-mk .fa{border-radius:8px;overflow:hidden;border:1.5px solid var(--q)}.bt-mk b{font-size:11px;display:block;color:var(--gold-hi)}
.bt-res{position:absolute;left:10%;right:10%;top:34%;z-index:3;padding:18px;border-radius:14px;text-align:center;background:rgba(7,9,15,.94);border:1px solid var(--gold);animation:popIn .3s}
.bt-big{font-family:var(--brush);font-size:48px;letter-spacing:10px;color:var(--gold-hi);text-shadow:0 0 18px #ffb84a}
.bt-big.lose{color:#9aa3b5;text-shadow:none}
/* 招贤页签 / 跑商 */
.gtabs{margin-bottom:10px}
.route .cv{min-height:88px}
.route b{font-size:20px}
/* 红颜 */
.gifts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:8px}
.gifts .btn{padding:6px 2px;display:flex;flex-direction:column;align-items:center;gap:1px;font-size:11px;letter-spacing:0}
.gifts .btn b{font-size:13px;white-space:nowrap}.gifts .btn b em{font-style:normal;font-size:11px;color:var(--jade)}.gifts .btn span{font-size:11px;color:var(--mute)}
.kid-ava{width:40px;height:40px;flex:none;border-radius:50%;display:grid;place-items:center;font-family:var(--brush);font-size:20px;color:var(--gold-hi);background:radial-gradient(circle,#3a4a70,#0d1322);border:1.5px solid var(--gold)}
/* 活动 */
.signgrid{display:grid;grid-template-columns:repeat(10,1fr);gap:4px;margin-top:10px}
.signgrid i{font-style:normal;text-align:center;font-size:11px;line-height:24px;border-radius:5px;background:rgba(255,255,255,.07);color:var(--dim)}
.signgrid i.on{background:linear-gradient(#fbe7ad,#b58535);color:#3a2508}
.signgrid i.big{box-shadow:0 0 0 1.5px var(--red-hi) inset;font-weight:700}
.boxes{display:flex;justify-content:space-between;gap:6px}
.dbox{flex:1;border:0;background:none;color:var(--mute);font-size:11px;display:flex;flex-direction:column;align-items:center;gap:2px}
.dbox i{width:34px;height:26px;border-radius:5px 5px 8px 8px;background:linear-gradient(#5a4a30,#2a2014);border:1.5px solid #7d5e28}
.dbox.ready i{background:linear-gradient(#e0553a,#8f2213);border-color:#ffd27a;animation:glow 1.4s infinite}
.dbox.got{opacity:.5}
.qdays{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;margin:8px 0}
.qdays button{border:1px solid var(--gold-line);background:rgba(0,0,0,.35);color:var(--text);border-radius:8px;padding:5px 0;font-size:10px;display:flex;flex-direction:column;align-items:center}
.qdays button b{font-size:11px;font-weight:400;color:var(--gold)}.qdays button.on{background:linear-gradient(180deg,rgba(184,50,31,.55),rgba(60,14,8,.85));border-color:#f0c078}
.qdays button.lock{opacity:.45}
/* 付费项目 */
.cards2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.card2{padding:12px;display:flex;flex-direction:column}
.card2 .xs{min-height:44px}
.fund{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:8px}
.fund>div{padding:6px;border-radius:8px;background:rgba(0,0,0,.3);border:1px solid rgba(216,180,106,.15);text-align:center;font-size:11px;display:flex;flex-direction:column;gap:2px;align-items:center}
.fund>div b{color:var(--gold-hi);font-size:13px}.fund>div.ok{border-color:var(--gold)}.fund>div.got{opacity:.5}