/* =========================================================
 * 向僵尸开炮 —— 样式
 * 风格：低饱和灰蓝 + 深色末日 + Q版卡通
 * 参考配色：bg #2C1C0C / #493B2E，accent #745C3C，主界面灰蓝 #1a2637
 * ========================================================= */
:root{
  --bg:#121a26; --bg2:#1a2637; --bg3:#222f42;
  --soil:#2c1c0c; --soil2:#493b2e; --acc:#745c3c;
  --gold:#ffd76a; --gold2:#f0a020;
  --red:#ff4d6d; --green:#5fd07a; --blue:#5cd8ff; --pp:#c08cff;
  --txt:#e8eef8; --txt2:#a9b6d8; --txt3:#6b7899;
  --line:rgba(120,150,190,.22);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;height:100%;overflow:hidden;
  background:#0a0e16;color:var(--txt);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  user-select:none;-webkit-user-select:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input{font-family:inherit}

#app{position:relative;width:100%;height:100%;max-width:430px;margin:0 auto;
  overflow:hidden;background:var(--bg);box-shadow:0 0 40px rgba(0,0,0,.6)}
.screen{position:absolute;inset:0;display:none;flex-direction:column}
.screen.on{display:flex}

/* ============ 加载 ============ */
#loading{align-items:center;justify-content:center;
  background:radial-gradient(ellipse at 50% 40%,#22303f,#0d131c)}
.ld-logo{font-size:64px;animation:ldPop 1.2s ease-in-out infinite}
@keyframes ldPop{0%,100%{transform:scale(1) rotate(-6deg)}50%{transform:scale(1.14) rotate(6deg)}}
.ld-title{margin-top:12px;font-size:26px;font-weight:800;letter-spacing:6px;
  background:linear-gradient(180deg,#fff,var(--gold) 55%,#ff8a3c);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 3px 8px rgba(0,0,0,.7))}
.ld-sub{margin-top:6px;font-size:11px;color:var(--txt2);letter-spacing:3px}
.ld-bar{margin-top:26px;width:170px;height:5px;border-radius:3px;background:rgba(255,255,255,.12);overflow:hidden}
.ld-bar i{display:block;height:100%;width:0;border-radius:3px;
  background:linear-gradient(90deg,var(--gold2),var(--gold));transition:width .3s}
.ld-txt{margin-top:10px;font-size:11px;color:var(--txt3)}

/* ============ 登录 ============ */
#login{align-items:center;justify-content:center;padding:20px}
.lg-bg{position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 30%,rgba(90,120,170,.28),transparent 60%),
             linear-gradient(180deg,#1a2637,#0d131c)}
.lg-box{position:relative;width:100%;max-width:320px;padding:24px 20px;border-radius:16px;
  background:rgba(20,30,46,.9);border:1px solid var(--line);
  box-shadow:0 12px 40px rgba(0,0,0,.6)}
.lg-title{text-align:center;font-size:25px;font-weight:800;letter-spacing:4px;
  background:linear-gradient(180deg,#fff,var(--gold) 55%,#ff8a3c);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.lg-slogan{text-align:center;font-size:10px;color:var(--txt3);letter-spacing:2px;margin-top:4px}
.lg-field{margin-top:16px}
.lg-field label{display:block;font-size:11px;color:var(--txt2);margin-bottom:6px;letter-spacing:1px}
.lg-field input{width:100%;padding:11px 12px;border-radius:9px;font-size:14px;
  background:rgba(10,16,28,.85);border:1px solid var(--line);color:var(--txt);outline:none}
.lg-field input:focus{border-color:var(--gold)}
.lg-gender{display:flex;gap:10px}
.gd{flex:1;padding:10px;border-radius:9px;background:rgba(10,16,28,.85);
  border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;gap:3px}
.gd i{font-size:22px;font-style:normal}
.gd span{font-size:11px;color:var(--txt2)}
.gd.on{border-color:var(--gold);background:rgba(255,215,106,.1)}
.gd.on span{color:var(--gold);font-weight:700}
.lg-btn{width:100%;margin-top:20px;padding:14px;border-radius:11px;font-size:16px;font-weight:800;letter-spacing:4px;
  color:#2a1a00;background:linear-gradient(180deg,#ffe9a0,var(--gold2) 55%,#e08c14);
  box-shadow:0 6px 18px rgba(240,160,32,.35)}
.lg-btn:active{transform:scale(.97)}
.lg-tip{margin-top:12px;text-align:center;font-size:10px;color:var(--txt3)}
.lg-net{margin-top:6px;text-align:center;font-size:10px;color:var(--txt3)}

/* ============ 基地主界面 ============ */
#home{background:linear-gradient(180deg,#1a2637 0%,#20304a 45%,#2c1c0c 100%)}
.hm-bg{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 18%,rgba(120,160,220,.18),transparent 55%),
             radial-gradient(circle at 15% 70%,rgba(116,92,60,.3),transparent 40%)}
.hm-bg::after{content:'';position:absolute;inset:0;opacity:.5;
  background:repeating-linear-gradient(0deg,transparent 0 38px,rgba(255,255,255,.02) 38px 39px)}

.hm-top{position:relative;display:flex;align-items:center;gap:10px;padding:10px 12px;
  background:linear-gradient(180deg,rgba(10,16,28,.9),transparent)}
.hm-av{position:relative;width:44px;height:44px;border-radius:50%;flex:0 0 auto;
  background:linear-gradient(135deg,#2c3c55,#1a2637);border:2px solid var(--gold);
  display:flex;align-items:center;justify-content:center;box-shadow:0 0 12px rgba(255,215,106,.3)}
.hm-av i{font-size:24px;font-style:normal;display:block;width:100%;height:100%;border-radius:50%}
.hm-av em{position:absolute;right:-6px;bottom:-4px;font-style:normal;font-size:9px;font-weight:800;
  background:var(--gold);color:#2a1a00;padding:1px 4px;border-radius:4px}
.hm-mid{flex:1;min-width:0}
.hm-nm{font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hm-pw{display:flex;align-items:center;gap:4px;margin-top:2px}
.hm-pw span{font-size:10px}
.hm-pw b{font-size:13px;color:var(--gold);font-weight:800}
.hm-cur{display:flex;flex-direction:column;gap:3px;align-items:flex-end}
.cu{display:flex;align-items:center;gap:4px;padding:3px 8px;border-radius:11px;
  background:rgba(10,16,28,.75);border:1px solid var(--line)}
.cu i{font-size:11px;font-style:normal}
.cu b{font-size:11px;font-weight:700;font-variant-numeric:tabular-nums}

.hm-main{position:relative;display:flex;gap:10px;padding:8px 12px 4px}
.hm-go{flex:1;padding:14px 10px;border-radius:14px;text-align:left;
  background:linear-gradient(135deg,rgba(116,92,60,.9),rgba(44,28,12,.92));
  border:1.5px solid var(--gold);box-shadow:0 6px 20px rgba(0,0,0,.5);
  position:relative;overflow:hidden}
.hm-go::after{content:'';position:absolute;top:0;left:-60%;width:35%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.18),transparent);
  animation:goShine 3.6s ease-in-out infinite}
@keyframes goShine{0%{left:-60%}55%,100%{left:140%}}
.go-t{font-size:15px;font-weight:800;letter-spacing:2px;color:var(--gold)}
.go-l{font-size:11px;color:#fff;margin-top:5px;font-weight:700}
.go-s{font-size:10px;color:var(--txt2);margin-top:2px}
.hm-go:active{transform:scale(.98)}
.hm-side{display:flex;flex-direction:column;gap:8px;flex:0 0 74px}
.hm-sbtn{flex:1;padding:8px;border-radius:12px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:2px;
  background:rgba(20,30,46,.9);border:1px solid var(--line)}
.hm-sbtn i{font-size:18px;font-style:normal}
.hm-sbtn span{font-size:10px;color:var(--txt2)}
.hm-sbtn:active{transform:scale(.94)}

.hm-sec{position:relative;padding:10px 14px 6px;font-size:11px;color:var(--txt2);letter-spacing:3px}
.hm-base{position:relative;flex:1;display:grid;grid-template-columns:repeat(3,1fr);
  gap:9px;padding:0 12px;align-content:start;overflow-y:auto}
.bs{padding:12px 6px;border-radius:12px;text-align:center;position:relative;
  background:linear-gradient(160deg,rgba(34,47,66,.92),rgba(18,26,38,.95));
  border:1px solid var(--line);box-shadow:0 3px 10px rgba(0,0,0,.35)}
.bs i{display:block;font-size:26px;font-style:normal;margin-bottom:4px}
.bs b{display:block;font-size:12px;font-weight:700}
.bs span{display:block;font-size:9px;color:var(--txt3);margin-top:2px;line-height:1.3}
.bs:active{transform:scale(.95)}
.bs .dot{position:absolute;top:6px;right:8px;width:7px;height:7px;border-radius:50%;
  background:var(--red);box-shadow:0 0 6px var(--red)}

.hm-nav{position:relative;display:flex;padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px));
  background:linear-gradient(0deg,rgba(10,16,28,.98),rgba(10,16,28,.7));
  border-top:1px solid var(--line)}
.hn{flex:1;display:flex;flex-direction:column;align-items:center;gap:1px;padding:4px 0}
.hn i{font-size:19px;font-style:normal;filter:drop-shadow(0 2px 3px rgba(0,0,0,.5))}
.hn span{font-size:9.5px;color:var(--txt2)}
.hn.on i{filter:drop-shadow(0 0 7px var(--gold))}
.hn.on span{color:var(--gold);font-weight:700}
.hn:active{transform:scale(.9)}

/* ============ 战斗 ============ */
#battle{background:#0d131c}
#battle canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
.bt-top{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:8px;
  padding:8px 10px;background:linear-gradient(180deg,rgba(8,12,20,.9),transparent);z-index:5}
.bt-ic{width:32px;height:32px;border-radius:50%;background:rgba(10,16,28,.8);
  border:1px solid var(--line);font-size:13px;flex:0 0 auto}
.bt-info{flex:1;text-align:center}
.bt-lv{font-size:13px;font-weight:800;letter-spacing:1px;text-shadow:0 2px 4px #000}
.bt-wv{font-size:10px;color:var(--gold);text-shadow:0 1px 3px #000}
.bt-timer{font-size:12px;font-variant-numeric:tabular-nums;color:var(--txt2);flex:0 0 auto;
  text-shadow:0 1px 3px #000}

.bt-xp{position:absolute;top:44px;left:10px;z-index:5;display:flex;align-items:center;gap:6px}
.xp-n{font-size:10px;color:var(--gold);font-weight:700;text-shadow:0 1px 3px #000}
.xp-n b{font-size:12px}
.xp-bar{width:92px;height:6px;border-radius:3px;background:rgba(10,16,28,.85);
  border:1px solid rgba(255,255,255,.15);overflow:hidden}
.xp-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#5ce88a,#9fe8b8);transition:width .2s}

.bt-st{position:absolute;top:44px;right:10px;z-index:5;display:flex;flex-direction:column;gap:3px;align-items:flex-end}
.bt-st div{display:flex;align-items:center;gap:3px;font-size:10px;text-shadow:0 1px 3px #000}
.bt-st i{font-style:normal}
.bt-st b{font-weight:700;font-variant-numeric:tabular-nums}

.bt-skill{position:absolute;right:8px;bottom:96px;z-index:6;display:flex;flex-direction:column;gap:7px}
.sk{position:relative;width:48px;height:48px;border-radius:12px;overflow:hidden;
  background:linear-gradient(150deg,rgba(40,58,86,.94),rgba(16,26,42,.96));
  border:1.5px solid rgba(120,160,220,.35);box-shadow:0 3px 10px rgba(0,0,0,.55);
  display:flex;align-items:center;justify-content:center}
.sk i{font-size:24px;font-style:normal}
.sk .lv{position:absolute;right:1px;bottom:0;font-size:8px;font-weight:800;color:var(--gold);
  text-shadow:0 1px 2px #000}
.sk .cd{position:absolute;inset:0;background:rgba(6,10,20,.78);display:flex;
  align-items:center;justify-content:center;font-size:14px;font-weight:800;color:#fff}
.sk .cost{position:absolute;left:0;right:0;bottom:0;font-size:8px;text-align:center;
  background:rgba(6,10,20,.8);color:var(--blue)}
.sk.ready{border-color:var(--gold);box-shadow:0 0 12px rgba(255,215,106,.5)}
.sk:active{transform:scale(.9)}

.bt-energy{position:absolute;right:8px;bottom:52px;z-index:6;width:52px;text-align:center}
.en-bar{height:44px;width:14px;margin:0 auto;border-radius:7px;overflow:hidden;position:relative;
  background:rgba(10,16,28,.85);border:1px solid var(--line)}
.en-bar i{position:absolute;left:0;right:0;bottom:0;height:0;
  background:linear-gradient(0deg,#5cd8ff,#c08cff);transition:height .2s}
.en-t{font-size:9px;color:var(--txt2);margin-top:3px;text-shadow:0 1px 2px #000}

.bt-build{position:absolute;left:8px;bottom:52px;z-index:6;display:flex;flex-direction:column;gap:5px}
.bb{width:44px;height:38px;border-radius:9px;background:rgba(16,26,42,.9);
  border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px}
.bb i{font-size:15px;font-style:normal}
.bb b{font-size:8px;color:var(--gold);font-weight:700}
.bb:active{transform:scale(.92)}

/* ============ 面板 ============ */
#panel{position:absolute;inset:0;z-index:50;display:none}
#panel.on{display:block}
.pn-mask{position:absolute;inset:0;background:rgba(4,8,16,.7)}
.pn-box{position:absolute;left:0;right:0;bottom:0;top:56px;border-radius:16px 16px 0 0;
  background:linear-gradient(180deg,#1c2739,#141d2c);border-top:1px solid var(--line);
  display:flex;flex-direction:column;box-shadow:0 -8px 30px rgba(0,0,0,.6);
  animation:pnUp .22s ease-out}
@keyframes pnUp{from{transform:translateY(30px);opacity:.6}to{transform:translateY(0);opacity:1}}
.pn-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px 8px;
  border-bottom:1px solid var(--line)}
.pn-head b{font-size:15px;font-weight:800;letter-spacing:2px}
.pn-x{width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.08);font-size:13px}
.pn-tabs{display:flex;gap:6px;padding:8px 12px;overflow-x:auto;flex:0 0 auto}
.pn-tabs::-webkit-scrollbar{display:none}
.pt{flex:0 0 auto;padding:6px 13px;border-radius:14px;font-size:11.5px;
  background:rgba(255,255,255,.06);border:1px solid var(--line);color:var(--txt2)}
.pt.on{background:linear-gradient(135deg,var(--gold),var(--gold2));color:#2a1a00;font-weight:800;border-color:transparent}
.pn-body{flex:1;overflow-y:auto;padding:10px 12px calc(16px + env(safe-area-inset-bottom,0px))}
.pn-body::-webkit-scrollbar{width:3px}
.pn-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:2px}

/* 通用卡片 */
.card{margin-bottom:10px;padding:11px 12px;border-radius:12px;
  background:linear-gradient(160deg,rgba(34,47,66,.9),rgba(18,26,38,.92));
  border:1px solid var(--line)}
.card-t{font-size:12.5px;font-weight:800;letter-spacing:1px;margin-bottom:8px;
  display:flex;justify-content:space-between;align-items:center}
.card-t .sub{font-size:10px;color:var(--txt3);font-weight:400}
.kv{display:flex;justify-content:space-between;align-items:center;padding:5px 0;font-size:12px;
  border-bottom:1px dashed rgba(120,150,190,.12)}
.kv:last-child{border-bottom:none}
.kv span{color:var(--txt2)}
.kv b{font-weight:700}
.empty{text-align:center;padding:26px 10px;color:var(--txt3);font-size:12px}
.empty .ic{font-size:32px;display:block;margin-bottom:8px;opacity:.5}
.btn{padding:8px 14px;border-radius:9px;font-size:12px;font-weight:700;
  background:rgba(255,255,255,.08);border:1px solid var(--line)}
.btn.c{background:linear-gradient(135deg,var(--gold),var(--gold2));color:#2a1a00;border-color:transparent}
.btn.d{background:rgba(255,77,109,.16);color:#ff8fa4;border-color:rgba(255,77,109,.3)}
.btn.blk{display:block;width:100%;margin-top:8px}
.btn.sm{padding:5px 10px;font-size:11px}
.btn:active{transform:scale(.96)}
.btn:disabled{opacity:.4}
.grid{display:grid;gap:8px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.g6{grid-template-columns:repeat(6,1fr)}
.item{display:flex;align-items:center;gap:9px;padding:8px;border-radius:10px;
  background:rgba(255,255,255,.04);border:1px solid var(--line);margin-bottom:6px}
.item .ic{width:38px;height:38px;border-radius:9px;flex:0 0 auto;display:flex;
  align-items:center;justify-content:center;font-size:20px;background:rgba(10,16,28,.7)}
.item .info{flex:1;min-width:0}
.item .nm{font-size:12.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item .sub{font-size:10px;color:var(--txt3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item .act{flex:0 0 auto}
.tag{display:inline-block;padding:1px 6px;border-radius:8px;font-size:9px;font-weight:700;margin-right:3px}
.tag.y{background:rgba(255,215,106,.18);color:var(--gold)}
.tag.b{background:rgba(92,216,255,.15);color:var(--blue)}
.tag.g{background:rgba(95,208,122,.15);color:var(--green)}
.tag.r{background:rgba(255,77,109,.16);color:#ff8fa4}
.tag.p{background:rgba(192,140,255,.16);color:var(--pp)}
.lbl{font-size:10px;color:var(--txt3);line-height:1.6;margin-top:6px}
.bar{height:7px;border-radius:4px;background:rgba(10,16,28,.8);overflow:hidden;margin-top:5px;
  border:1px solid rgba(255,255,255,.1)}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold2),var(--gold))}

/* 装备格 */
.eqgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px}
.eq{position:relative;aspect-ratio:1;border-radius:11px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:2px;
  background:linear-gradient(150deg,rgba(34,47,66,.9),rgba(14,22,36,.95));
  border:1.5px solid var(--line)}
.eq i{font-size:22px;font-style:normal}
.eq b{font-size:9px;color:var(--txt2)}
.eq .q{position:absolute;left:3px;top:2px;font-size:8px;font-weight:800;padding:0 3px;border-radius:3px}
.eq .f{position:absolute;right:3px;top:2px;font-size:9px;font-weight:800;color:var(--gold)}
.eq .gem{position:absolute;right:3px;bottom:2px;font-size:11px}
.eq.on{border-color:var(--gold);box-shadow:0 0 10px rgba(255,215,106,.25)}
.eq:active{transform:scale(.94)}

/* ============ 三选一 ============ */
#choice{position:absolute;inset:0;z-index:60;display:none;align-items:center;justify-content:center;padding:16px}
#choice.on{display:flex}
.ch-mask{position:absolute;inset:0;background:rgba(4,8,16,.82)}
.ch-box{position:relative;width:100%;max-width:340px;animation:chIn .26s ease-out}
@keyframes chIn{from{transform:scale(.86);opacity:0}to{transform:scale(1);opacity:1}}
.ch-t{text-align:center;font-size:20px;font-weight:800;letter-spacing:5px;color:var(--gold);
  text-shadow:0 3px 10px rgba(0,0,0,.8)}
.ch-sub{text-align:center;font-size:11px;color:var(--txt2);margin:6px 0 14px}
.ch-cards{display:flex;flex-direction:column;gap:10px}
.ccard{display:flex;align-items:center;gap:11px;padding:12px;border-radius:13px;text-align:left;
  background:linear-gradient(120deg,rgba(34,47,66,.96),rgba(16,24,38,.98));
  border:1.5px solid var(--line);box-shadow:0 5px 16px rgba(0,0,0,.5);
  animation:ccIn .3s backwards}
.ccard:nth-child(1){animation-delay:.02s}
.ccard:nth-child(2){animation-delay:.08s}
.ccard:nth-child(3){animation-delay:.14s}
@keyframes ccIn{from{transform:translateX(-16px);opacity:0}to{transform:translateX(0);opacity:1}}
.ccard i{width:46px;height:46px;border-radius:11px;flex:0 0 auto;display:flex;align-items:center;
  justify-content:center;font-size:26px;background:rgba(10,16,28,.8);font-style:normal}
.ccard .ci{flex:1;min-width:0}
.ccard .cn{font-size:14px;font-weight:800;display:flex;align-items:center;gap:6px}
.ccard .cd2{font-size:10.5px;color:var(--txt2);margin-top:4px;line-height:1.45}
.ccard .cl{font-size:10px;color:var(--gold);margin-top:3px}
.ccard:active{transform:scale(.97)}
.ch-refresh{width:100%;margin-top:12px;padding:10px;border-radius:10px;font-size:11.5px;
  background:rgba(255,255,255,.07);border:1px solid var(--line);color:var(--txt2)}

/* ============ 结算 ============ */
#result{position:absolute;inset:0;z-index:60;display:none;align-items:center;justify-content:center;padding:20px}
#result.on{display:flex}
.rs-mask{position:absolute;inset:0;background:rgba(4,8,16,.85)}
.rs-box{position:relative;width:100%;max-width:320px;padding:22px 18px;border-radius:16px;
  background:linear-gradient(170deg,#22303f,#141d2c);border:1px solid var(--line);
  box-shadow:0 14px 40px rgba(0,0,0,.7);text-align:center;animation:chIn .3s}
.rs-t{font-size:22px;font-weight:800;letter-spacing:4px}
.rs-t.win{color:var(--gold);text-shadow:0 0 18px rgba(255,215,106,.5)}
.rs-t.lose{color:#ff8fa4}
.rs-lv{font-size:12px;color:var(--txt2);margin:6px 0 14px}
.rs-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:16px}
.rs-i{padding:9px;border-radius:10px;background:rgba(10,16,28,.7);border:1px solid var(--line)}
.rs-i .v{font-size:15px;font-weight:800;color:var(--gold)}
.rs-i .l{font-size:9.5px;color:var(--txt3);margin-top:2px}
.rs-btns{display:flex;flex-direction:column;gap:8px}
.rs-b{padding:11px;border-radius:10px;font-size:13px;font-weight:700;
  background:rgba(255,255,255,.08);border:1px solid var(--line)}
.rs-b.c{background:linear-gradient(135deg,var(--gold),var(--gold2));color:#2a1a00;border-color:transparent}
.rs-b.d{background:rgba(255,77,109,.15);color:#ff8fa4}
.rs-b:active{transform:scale(.97)}

/* ============ 暂停 ============ */
#pause{position:absolute;inset:0;z-index:60;display:none;align-items:center;justify-content:center;padding:20px}
#pause.on{display:flex}
.ps-mask{position:absolute;inset:0;background:rgba(4,8,16,.8)}
.ps-box{position:relative;width:100%;max-width:260px;padding:20px;border-radius:14px;
  background:linear-gradient(170deg,#22303f,#141d2c);border:1px solid var(--line);text-align:center}
.ps-t{font-size:17px;font-weight:800;letter-spacing:3px;margin-bottom:14px}
.ps-b{display:block;width:100%;padding:11px;margin-top:8px;border-radius:10px;font-size:13px;font-weight:700;
  background:rgba(255,255,255,.08);border:1px solid var(--line)}
.ps-b.c{background:linear-gradient(135deg,var(--gold),var(--gold2));color:#2a1a00;border-color:transparent}
.ps-b.d{background:rgba(255,77,109,.15);color:#ff8fa4}

/* ============ Toast ============ */
#toasts{position:absolute;left:0;right:0;top:70px;z-index:80;display:flex;
  flex-direction:column;align-items:center;gap:6px;pointer-events:none}
.toast{padding:7px 14px;border-radius:16px;font-size:12px;font-weight:700;
  background:rgba(10,16,28,.94);border:1px solid var(--line);
  box-shadow:0 4px 14px rgba(0,0,0,.5);animation:tIn .2s, tOut .3s 1.7s forwards;max-width:88%;text-align:center}
.toast.ok{border-color:rgba(95,208,122,.5);color:var(--green)}
.toast.err{border-color:rgba(255,77,109,.5);color:#ff8fa4}
.toast.boss{border-color:rgba(255,77,109,.8);color:var(--red);font-size:14px;
  background:rgba(40,10,18,.95);animation:tIn .2s, tOut .4s 2.4s forwards}
@keyframes tIn{from{transform:translateY(-10px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes tOut{to{transform:translateY(-8px);opacity:0}}

/* 通用 */
.row{display:flex;gap:8px;align-items:center}
.sec-t{font-size:11px;color:var(--txt2);letter-spacing:2px;margin:12px 0 7px}
.hr{height:1px;background:var(--line);margin:10px 0}
.pill{display:inline-block;padding:2px 8px;border-radius:10px;font-size:10px;font-weight:700}

/* =========================================================
 * 摇杆 / 换弹 / 战斗 HUD（资料 06 操作方案）
 * ========================================================= */
.joy{position:absolute;left:18px;bottom:24px;width:112px;height:112px;border-radius:50%;
  background:rgba(10,16,28,.42);border:2px solid rgba(120,150,190,.35);
  touch-action:none;z-index:12;backdrop-filter:blur(2px)}
.joy i{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;
  border-radius:50%;background:linear-gradient(160deg,rgba(255,215,106,.9),rgba(240,160,32,.75));
  box-shadow:0 2px 10px rgba(0,0,0,.4);pointer-events:none;transition:transform .05s}

.bt-reload{position:absolute;right:18px;bottom:30px;width:74px;height:74px;border-radius:50%;
  background:rgba(10,16,28,.55);border:2px solid var(--line);z-index:12;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px}
.bt-reload i{font-size:22px;font-style:normal}
.bt-reload span{font-size:11px;font-weight:800;color:var(--gold)}
.bt-reload em{position:absolute;left:0;bottom:0;height:4px;width:0;background:var(--gold);
  border-radius:0 0 6px 6px;font-style:normal;transition:width .06s}
.bt-reload.reloading{opacity:.6}

.bt-skills{position:absolute;right:16px;top:132px;display:flex;flex-direction:column;gap:6px;z-index:11}
.bt-skills .bs{width:38px;height:38px;border-radius:9px;background:rgba(10,16,28,.6);
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
  font-size:17px;position:relative}
.bt-skills .bs u{position:absolute;right:1px;bottom:0;font-size:8px;color:var(--gold);
  text-decoration:none;font-weight:800}

.bt-hp{position:absolute;left:12px;right:12px;top:52px;z-index:11}
.hpbar{position:relative;height:16px;border-radius:8px;background:rgba(10,16,28,.7);
  border:1px solid var(--line);overflow:hidden}
.hpbar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#5fd07a,#7be8a0);transition:width .12s}
.hpbar b{position:absolute;left:0;right:0;top:0;font-size:10px;line-height:16px;text-align:center;
  color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.8);font-weight:700}
.shbar{height:5px;margin-top:3px;border-radius:3px;background:rgba(10,16,28,.6);overflow:hidden}
.shbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#5cd8ff,#a8e8ff);transition:width .12s}

.bt-stats{position:absolute;left:12px;top:96px;display:flex;gap:10px;font-size:11px;
  color:var(--txt2);z-index:11;text-shadow:0 1px 3px rgba(0,0,0,.7)}
.bt-stats b{color:var(--gold)}

.bt-tip{position:absolute;left:0;right:0;bottom:6px;text-align:center;font-size:9.5px;
  color:rgba(200,215,240,.5);z-index:10;pointer-events:none}

.bt-top{position:absolute;left:10px;right:10px;top:8px;display:flex;justify-content:space-between;
  align-items:center;z-index:11;font-size:12px}
.bt-top .bt-l,.bt-top .bt-r{display:flex;gap:8px;align-items:center;
  background:rgba(10,16,28,.6);padding:4px 10px;border-radius:12px;border:1px solid var(--line)}
.bt-top button{font-size:14px;padding:0 2px}

/* 基地：养成入口 10 项 */
.hm-nav{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;padding:6px 6px calc(6px + env(safe-area-inset-bottom))}
.hm-nav .hn{padding:6px 2px}
.hm-nav .hn i{font-size:19px}
.hm-nav .hn span{font-size:9.5px}

.hm-acts{display:flex;gap:8px;padding:0 12px 8px}
.ha{flex:1;padding:10px 6px;border-radius:11px;background:rgba(27,38,55,.85);
  border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;gap:2px}
.ha i{font-size:20px;font-style:normal}
.ha b{font-size:13px}
.ha span{font-size:9.5px;color:var(--txt3)}
.ha.go{background:linear-gradient(160deg,rgba(255,215,106,.22),rgba(240,160,32,.12));border-color:rgba(255,215,106,.45)}
.ha.go b{color:var(--gold)}

.hm-base{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;padding:0 12px 10px}
.bs{padding:9px;border-radius:11px;background:rgba(27,38,55,.85);border:1px solid var(--line);
  position:relative;text-align:left}
.bs i{font-size:19px;font-style:normal}
.bs b{font-size:12px;display:block;margin-top:1px}
.bs span{font-size:9.5px;color:var(--txt3);display:block}
.bs .dot{position:absolute;right:7px;top:7px;width:7px;height:7px;border-radius:50%;
  background:var(--green);box-shadow:0 0 6px var(--green)}

/* 关卡格子 */
.lvgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.lvc{padding:7px 2px;border-radius:9px;background:rgba(10,16,28,.6);border:1px solid var(--line);
  text-align:center;position:relative}
.lvc b{display:block;font-size:13px}
.lvc .st{font-size:8px;color:var(--gold);letter-spacing:1px;height:10px}
.lvc.lock{opacity:.38}
.lvc.cur{border-color:var(--gold);background:rgba(255,215,106,.12)}
.lvc.boss b{color:var(--red)}