/* ===== 灰区撤离 · 界面样式 ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }
:root{
  --bg:#0b0e10; --bg2:#12171a; --panel:#161c20; --panel2:#1d252a;
  --line:#2b353b; --txt:#d7e0e3; --dim:#7b8a90;
  --acc:#ffa53b; --acc2:#ff7a18; --grn:#5fd48a; --red:#e8503a; --blu:#57b6ff;
}
html,body{height:100%;}
body{
  background:var(--bg); color:var(--txt); overflow:hidden;
  font-family:"Segoe UI","Microsoft YaHei",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased; user-select:none;
}
#app{position:fixed; inset:0;}
.screen{position:absolute; inset:0; display:none; flex-direction:column; overflow:hidden;}
.screen.active{display:flex;}
.dim{color:var(--dim);}
.warn{color:var(--red);}
.rule{border:0; border-top:1px solid var(--line); margin:12px 0;}
.small{font-size:12px;}

/* ---------- 按钮 ---------- */
.btn{
  background:var(--panel2); color:var(--txt); border:1px solid var(--line);
  padding:8px 16px; border-radius:4px; cursor:pointer; font-size:14px;
  font-family:inherit; transition:.15s; letter-spacing:.5px;
}
.btn:hover{background:#263238; border-color:#41505a;}
.btn:active{transform:translateY(1px);}
.btn-lg{padding:12px 28px; font-size:16px;}
.btn-mini{padding:3px 10px; font-size:12px;}
.btn-block{display:block; width:100%; margin-top:10px;}
.btn-primary{background:#e07a00; border-color:#ffa53b; color:#1a1005; font-weight:700;}
.btn-primary:hover{background:#ffa53b;}
.btn-danger{background:#7d2418; border-color:#e8503a; color:#ffd9d2; font-weight:700;}
.btn-danger:hover{background:#a33120;}
.btn-ghost{background:transparent;}
.btn-primary:disabled,.btn-danger:disabled{opacity:.4; cursor:not-allowed;}

/* ---------- 主菜单 ---------- */
.menu-bg{
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 70% 30%, rgba(255,140,20,.16), transparent 55%),
    radial-gradient(circle at 20% 80%, rgba(60,120,180,.14), transparent 55%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.022) 0 2px, transparent 2px 9px),
    linear-gradient(160deg,#0d1114,#05070a 70%);
}
.menu-wrap{position:relative; margin:auto; text-align:center; padding:40px;}
.logo{
  font-size:88px; letter-spacing:22px; font-weight:900; text-indent:22px;
  color:#f2f6f7; text-shadow:0 0 42px rgba(255,150,40,.5), 0 6px 0 #2a1a08;
}
.logo-sub{color:var(--acc); letter-spacing:8px; margin-top:12px; font-size:14px;}
.menu-btns{margin-top:52px; display:flex; flex-direction:column; gap:14px; width:290px; margin-left:auto; margin-right:auto;}
.menu-foot{margin-top:44px; color:var(--dim); font-size:12px; letter-spacing:1px;}

/* ---------- 顶栏 ---------- */
.topbar{
  height:58px; flex:0 0 58px; display:flex; align-items:center; justify-content:space-between;
  padding:0 20px; background:linear-gradient(180deg,#171e22,#101518);
  border-bottom:1px solid var(--line);
}
.topbar-title{font-size:18px; letter-spacing:6px; font-weight:700;}
.topbar-right{display:flex; gap:10px; align-items:center;}
.stat-chip{background:#0e1316; border:1px solid var(--line); border-radius:4px; padding:5px 12px; font-size:13px;}
.stat-chip i{color:var(--dim); font-style:normal; margin-right:8px; font-size:12px;}
.stat-chip b{color:var(--acc);}

/* ---------- 面板 ---------- */
.panel{background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:16px;}
.panel-title{
  font-size:13px; letter-spacing:3px; color:var(--acc); margin-bottom:14px;
  text-transform:uppercase; display:flex; justify-content:space-between; align-items:center;
}
.panel-accent{border-color:#5a3a12; background:linear-gradient(180deg,#1c1710,#141210);}
.title-tools{display:flex; gap:8px;}
.hint{font-size:13px; line-height:1.8; color:#a9b6bb;}

/* ---------- 大厅 ---------- */
.topbar-title{display:flex; align-items:baseline; gap:14px;}
.topbar-sub{font-size:11.5px; letter-spacing:2px; color:var(--dim); font-weight:400;}
.stat-chip.hi b{color:var(--grn); font-family:Consolas,monospace; font-size:15px;}
.lobby-body{
  flex:1; display:grid; grid-template-columns:330px minmax(320px,1fr) minmax(340px,1.1fr);
  gap:16px; padding:16px; overflow:auto; align-items:start;
}
.panel-title.sub{
  margin:16px 0 10px; font-size:11.5px; letter-spacing:2px; color:#8fa0a7;
  border-top:1px solid var(--line); padding-top:12px;
}
.pill{
  background:#0f1417; border:1px solid var(--line); border-radius:12px;
  padding:2px 10px; font-size:11px; letter-spacing:1px; color:var(--acc);
  text-transform:none; font-weight:400;
}

/* 干员档案 */
.lobby-op .operator{margin-bottom:14px;}
.operator{display:flex; gap:14px; align-items:center;}
.op-avatar{
  width:82px; height:82px; flex:0 0 82px; border-radius:6px; border:1px solid var(--line);
  background:repeating-linear-gradient(45deg,#1b2429 0 8px,#151c20 8px 16px);
  display:flex; align-items:center; justify-content:center; color:var(--acc);
  letter-spacing:3px; font-size:13px; box-shadow:0 0 22px rgba(255,165,59,.10) inset;
}
.op-info{flex:1; min-width:0;}
.op-name{margin-bottom:6px; font-size:14px;}
.op-name b{color:var(--acc);}
.op-tag{font-size:11.5px; color:var(--dim); letter-spacing:1px;}
.op-rate{margin-bottom:12px;}
.op-rate-top{display:flex; justify-content:space-between; font-size:12px; color:var(--dim); margin-bottom:6px;}
.op-rate-top b{color:var(--acc); font-family:Consolas,monospace;}
.op-rate .bar{height:7px; border-radius:3px;}
.op-rate .bar i{
  display:block; height:100%; border-radius:3px;
  background:linear-gradient(90deg,#2f6f4a,#5fd48a); transition:width .3s;
}
.op-grid{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
.op-cell{
  background:#0f1417; border:1px solid var(--line); border-radius:4px;
  padding:8px 10px; display:flex; align-items:baseline; justify-content:space-between;
}
.op-cell i{font-style:normal; font-size:11px; color:var(--dim); letter-spacing:1px;}
.op-cell b{font-size:16px; font-family:Consolas,monospace; color:#e6eef0;}
.op-row{display:flex; justify-content:space-between; font-size:13px; padding:4px 0; border-bottom:1px dashed #222b30;}
.op-row span{color:var(--dim);}
.op-row b{color:#e6eef0;}
.op-row.wide{margin-top:10px; border-bottom:0; border-top:1px solid var(--line); padding-top:10px;}
.op-row.wide b{color:var(--grn); font-family:Consolas,monospace;}
.action-row{display:flex; gap:12px; margin-top:18px; flex-wrap:wrap;}
.action-row .btn{flex:1 1 130px;}

/* 配装缩略 */
.loadout-mini{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
.lm-cell{
  background:#0f1417; border:1px solid var(--line); border-radius:4px;
  padding:8px 10px; min-height:54px; display:flex; flex-direction:column; justify-content:center;
  border-left:3px solid transparent;
}
.lm-cell i{display:block; font-style:normal; color:var(--dim); font-size:11px; letter-spacing:1px;}
.lm-cell b{font-size:13px; display:block; margin-top:5px; line-height:1.3;}
.lm-cell.empty b{color:#4a5a61;}
.lm-cell.filled{background:#121a1e;}

/* 携带清单 */
.lobby-kit{display:grid; grid-template-columns:repeat(4,1fr); gap:8px;}
.kit-cell{
  background:#0f1417; border:1px solid var(--line); border-radius:4px;
  padding:8px; text-align:center;
}
.kit-cell i{display:block; font-style:normal; font-size:11px; color:var(--dim); letter-spacing:1px;}
.kit-cell b{display:block; font-size:17px; font-family:Consolas,monospace; color:var(--acc); margin:4px 0 2px;}
.kit-cell small{font-size:10px; color:var(--dim);}
.kit-cell.zero b{color:#4a5a61;}

/* 快速投放 */
.lobby-quick{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
.quick-map{
  background:#0f1417; border:1px solid var(--line); border-radius:4px;
  padding:9px 11px; text-align:left; cursor:pointer; color:var(--txt);
  font-family:inherit; transition:.15s; border-left:3px solid #6b767c;
}
.quick-map b{display:block; font-size:13px;}
.quick-map small{display:block; font-size:10.5px; color:var(--dim); margin-top:3px; letter-spacing:1px;}
.quick-map.t2{border-left-color:#4a90e2;}
.quick-map.t3{border-left-color:#e8503a;}
.quick-map:hover:not(:disabled){border-color:var(--acc); border-left-color:var(--acc); background:#151d21; transform:translateY(-2px);}
.quick-map:disabled{opacity:.38; cursor:not-allowed;}
.quick-map.nokey::after{content:"需钥匙"; float:right; font-size:10px; color:var(--acc);}

/* ---------- 仓库 ---------- */
.stash-body{flex:1; display:grid; grid-template-columns:270px 1fr 250px; gap:14px; padding:14px; overflow:hidden;}
.loadout-panel,.stats-panel{overflow:auto;}
.stash-panel{display:flex; flex-direction:column; overflow:hidden;}
.loadout-slots{display:flex; flex-direction:column; gap:7px;}
.slot{
  display:flex; align-items:center; gap:10px; background:#0f1417; border:1px solid var(--line);
  border-radius:4px; padding:7px 9px; min-height:46px; cursor:pointer; transition:.15s;
}
.slot:hover{border-color:#48575f;}
.slot .s-kind{font-size:10px; color:var(--dim); width:44px; flex:0 0 44px; letter-spacing:1px;}
.slot .s-body{flex:1; font-size:13px; overflow:hidden;}
.slot .s-body small{display:block; color:var(--dim); font-size:11px; margin-top:2px;}
.slot.empty .s-body{color:#4a5a61;}
.slot.filled{border-left:3px solid var(--acc);}
.carry-ammo{display:flex; flex-direction:column; gap:5px; font-size:12px; margin-bottom:10px;}
.carry-ammo .ca-row{display:flex; justify-content:space-between; background:#0f1417; border:1px solid var(--line); border-radius:3px; padding:4px 8px;}
.carry-ammo .ca-row b{color:var(--acc);}

.stash-grid{
  flex:1; overflow:auto; display:grid; gap:8px; align-content:start;
  grid-template-columns:repeat(auto-fill,minmax(132px,1fr)); padding-right:6px;
}
.icard{
  background:#0f1417; border:1px solid var(--line); border-radius:4px; padding:8px;
  cursor:pointer; position:relative; transition:.15s; min-height:74px; display:flex; flex-direction:column;
}
.icard:hover{border-color:var(--acc); transform:translateY(-2px); background:#151d21;}
.icard.sel{border-color:var(--acc); box-shadow:0 0 0 1px var(--acc) inset;}
.icard .ic-name{font-size:12.5px; line-height:1.35; margin-bottom:auto;}
.icard .ic-meta{font-size:11px; color:var(--dim); margin-top:6px; display:flex; justify-content:space-between;}
.icard .ic-val{color:var(--grn);}
.icard .ic-tag{
  position:absolute; top:-1px; right:-1px; font-size:10px; padding:1px 6px;
  border-bottom-left-radius:4px; background:#2b353b; color:#cfe;
}
/* 品质：白 → 蓝 → 紫 → 金 → 红 */
.r1 .ic-tag{background:#454d52; color:#e6ecef;}
.r2 .ic-tag{background:#16385e; color:#a9d4ff;}
.r3 .ic-tag{background:#3a1a5e; color:#d9b6ff;}
.r4 .ic-tag{background:#4d3a12; color:#ffdca8;}
.r5 .ic-tag{background:#5a1512; color:#ffb3a6;}
.r1{border-left:3px solid #6b767c !important;}
.r2{border-left:3px solid #4a90e2 !important;}
.r3{border-left:3px solid #a259e2 !important;}
.r4{border-left:3px solid #e8b33a !important;}
.r5{border-left:3px solid #e8503a !important;}
.icard.equipped{outline:1px dashed var(--acc);}
.stash-empty{grid-column:1/-1; color:var(--dim); text-align:center; padding:36px; font-size:13px;}

.item-detail{
  flex:0 0 auto; min-height:96px; margin-top:12px; border-top:1px solid var(--line);
  padding-top:12px; display:flex; gap:16px; align-items:flex-start; flex-wrap:wrap;
}
.item-detail .d-info{flex:1; min-width:220px;}
.item-detail .d-name{font-size:16px; margin-bottom:6px;}
.item-detail .d-desc{font-size:12.5px; color:var(--dim); line-height:1.7;}
.item-detail .d-stats{font-size:12px; color:#a9b6bb; margin-top:8px; line-height:1.7;}
.item-detail .d-stats b{color:var(--acc);}
.item-detail .d-acts{display:flex; gap:8px; flex-wrap:wrap;}

.tips{list-style:none; font-size:12.5px; color:#9fadb3; line-height:2;}
.tips li::before{content:"▸ "; color:var(--acc);}

/* ---------- 地图选择 ---------- */
.map-list{flex:1; display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:16px; padding:16px; overflow:auto;}
.map-card{
  border:1px solid var(--line); border-radius:6px; overflow:hidden; cursor:pointer;
  background:var(--panel); transition:.18s; display:flex; flex-direction:column;
}
.map-card:hover{border-color:var(--acc); transform:translateY(-3px);}
.map-card.sel{border-color:var(--acc); box-shadow:0 0 24px rgba(255,165,59,.22);}
.map-art{height:126px; position:relative; overflow:hidden;}
.map-art .ma-grid{position:absolute; inset:0; background:repeating-linear-gradient(0deg,rgba(0,0,0,.35) 0 1px,transparent 1px 22px),repeating-linear-gradient(90deg,rgba(0,0,0,.35) 0 1px,transparent 1px 22px);}
.map-art .ma-label{position:absolute; left:12px; bottom:8px; font-size:22px; letter-spacing:5px; color:#fff; text-shadow:0 2px 10px #000;}
.map-art .ma-tier{position:absolute; right:10px; top:10px; background:rgba(0,0,0,.55); padding:3px 10px; border-radius:3px; font-size:11px; letter-spacing:2px; color:var(--acc);}
.map-info{padding:14px; flex:1; display:flex; flex-direction:column; gap:8px;}
.map-info p{font-size:12.5px; color:var(--dim); line-height:1.7;}
.map-stats{display:grid; grid-template-columns:1fr 1fr; gap:6px; font-size:12px; margin-top:auto;}
.map-stats div{display:flex; justify-content:space-between; border-bottom:1px dashed #232c31; padding:3px 0;}
.map-stats span{color:var(--dim);}
.map-foot{
  flex:0 0 auto; display:flex; align-items:center; justify-content:space-between;
  gap:20px; padding:14px 20px; border-top:1px solid var(--line); background:#0e1316;
}
.map-warn{font-size:13px; color:var(--dim);}
.map-warn b{color:var(--acc);}

/* ---------- 通用小弹窗 ---------- */
.dialog-mask{
  position:fixed; inset:0; z-index:10001; display:flex; align-items:center; justify-content:center;
  background:rgba(4,7,9,.62);
}
.dialog-box{
  width:320px; background:#141b1f; border:1px solid #3d4b52; border-radius:7px; padding:16px;
  box-shadow:0 20px 60px rgba(0,0,0,.75);
}
.dlg-title{font-size:14px; letter-spacing:2px; color:var(--acc); margin-bottom:12px; text-align:center;}
.dlg-row{display:flex; gap:6px; align-items:center; margin-bottom:10px;}
.dlg-input{
  flex:1; width:100%; background:#0d1214; border:1px solid #3d4b52; border-radius:4px; color:#fff;
  font-family:Consolas,monospace; font-size:16px; text-align:center; padding:6px;
}
.dlg-range{width:100%; margin-bottom:8px;}
.dlg-hint{font-size:11px; color:var(--dim); text-align:center; margin-bottom:12px;}
.dlg-actions{display:flex; gap:8px; justify-content:flex-end;}

/* ---------- 账号界面 ---------- */
.auth-wrap{position:relative; margin:auto; text-align:center; padding:30px; width:min(460px,94vw);}
.auth-wrap .logo{font-size:56px; letter-spacing:14px; text-indent:14px;}
.auth-panel{margin-top:30px; text-align:left;}
.auth-row{display:flex; align-items:center; gap:12px; margin-bottom:12px; font-size:14px;}
.auth-row span{width:76px; color:var(--dim); flex:0 0 76px;}
.auth-row input{
  flex:1; background:#0d1214; border:1px solid #3d4b52; border-radius:4px; color:#fff;
  font-size:14px; padding:9px 11px; font-family:inherit;
}
.auth-row input:focus{outline:none; border-color:var(--acc);}
.auth-msg{min-height:20px; font-size:12.5px; color:var(--red); margin:4px 0 10px;}
.auth-msg.ok{color:var(--grn);}
.auth-actions{display:flex; flex-direction:column; gap:10px;}
.auth-hint{margin-top:14px; font-size:11.5px; color:var(--dim); line-height:1.7;}
.auth-list{margin-top:12px; display:flex; flex-wrap:wrap; gap:6px;}
.auth-chip{
  font-size:11.5px; padding:3px 10px; border:1px solid var(--line); border-radius:12px;
  color:#a9b6bb; cursor:pointer; background:#0f1417;
}
.auth-chip:hover{border-color:var(--acc); color:var(--acc);}

/* ---------- 设置面板 ---------- */
.settings-overlay{
  position:fixed; inset:0; z-index:10002; display:none; align-items:center; justify-content:center;
  background:rgba(4,7,9,.72); backdrop-filter:blur(2px);
}
.settings-overlay.show{display:flex;}
.settings-box{
  width:min(460px,94vw); background:#141b1f; border:1px solid #3d4b52; border-radius:8px;
  padding:20px; box-shadow:0 24px 70px rgba(0,0,0,.8);
}
.settings-box .slider{margin-bottom:14px;}
.settings-actions{display:flex; gap:10px; justify-content:flex-end;}
.settings-account{margin-top:12px; text-align:right;}
.settings-account b{color:var(--acc);}

/* ---------- 商城 ---------- */
.shop-body{flex:1; display:grid; grid-template-columns:220px 1fr; gap:14px; padding:14px; overflow:hidden;}
.shop-nav{overflow:auto;}
.shop-tabs{display:flex; flex-direction:column; gap:6px;}
.shop-tab{
  padding:9px 14px; border:1px solid var(--line); border-radius:4px; cursor:pointer;
  font-size:13.5px; background:#0f1417; transition:.14s;
}
.shop-tab:hover{border-color:#48575f;}
.shop-tab.on{border-color:var(--acc); background:#241b0e; color:var(--acc); font-weight:700;}
.shop-main{display:flex; flex-direction:column; overflow:hidden;}
.shop-grid{
  flex:1; overflow:auto; display:grid; gap:10px; align-content:start;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); padding-right:6px;
}
.shop-card{
  background:#0f1417; border:1px solid var(--line); border-radius:5px; padding:11px;
  display:flex; flex-direction:column; gap:6px; border-left-width:3px;
}
.shop-card .sc-name{font-size:14px; display:flex; justify-content:space-between; align-items:center; gap:8px;}
.shop-card .sc-tag{font-size:10px; padding:1px 6px; border-radius:3px; background:#2b353b; color:#cfe; white-space:nowrap;}
.shop-card .sc-desc{font-size:11.5px; color:var(--dim); line-height:1.6; min-height:32px;}
.shop-card .sc-stats{font-size:11.5px; color:#a9b6bb;}
.shop-card .sc-stats b{color:var(--acc);}
.shop-card .sc-row{display:flex; justify-content:space-between; align-items:center; margin-top:4px; gap:8px;}
.shop-card .sc-price{font-family:Consolas,monospace; font-size:15px; color:var(--grn);}
.shop-card .sc-price.poor{color:var(--red);}
.shop-card .sc-count{font-size:11px; color:var(--dim);}
.sc-qtyrow{display:flex; align-items:center; justify-content:space-between; gap:8px;}
.shop-qty{
  width:80px; background:#0d1214; border:1px solid #3d4b52; border-radius:4px; color:#fff;
  font-family:Consolas,monospace; font-size:14px; text-align:center; padding:4px;
}

/* ---------- 文档 / 设置 ---------- */
.doc{flex:1; overflow:auto; padding:24px 32px; max-width:900px; line-height:1.9; font-size:14px;}
.doc.narrow{max-width:560px;}
.doc h3{color:var(--acc); letter-spacing:3px; margin:20px 0 8px; font-size:14px;}
.doc h3:first-child{margin-top:0;}
.doc p{color:#a9b6bb;}
.keys{width:100%; border-collapse:collapse;}
.keys td{padding:6px 10px; border-bottom:1px solid #1d252a; font-size:13.5px;}
.keys td:first-child{width:150px; color:var(--acc); font-family:Consolas,monospace;}
.slider{display:flex; align-items:center; gap:14px; margin-bottom:16px; font-size:14px;}
.slider span{width:120px; color:var(--dim);}
.slider input[type=range]{flex:1;}
.slider b{width:56px; text-align:right; color:var(--acc); font-family:Consolas,monospace;}
.slider select{flex:1; background:var(--panel2); color:var(--txt); border:1px solid var(--line); padding:6px; border-radius:4px;}

/* ---------- 载入 ---------- */
#screen-loading{align-items:center; justify-content:center; background:#05070a;}
.loading-wrap{width:420px; text-align:center;}
.loading-title{letter-spacing:8px; color:var(--acc); margin-bottom:22px; font-size:16px;}
.loading-bar{height:4px; background:#1a2227; border-radius:2px; overflow:hidden;}
.loading-bar > div{height:100%; width:0; background:linear-gradient(90deg,#e07a00,#ffc46b); transition:width .2s;}
.loading-tip{margin-top:12px; color:var(--dim); font-size:12px; letter-spacing:2px;}

/* ---------- 战局 ---------- */
#screen-raid{background:#000;}
#game-canvas{position:absolute; inset:0; width:100%; height:100%; display:block;}
#hud{position:absolute; inset:0; pointer-events:none; font-family:"Segoe UI","Microsoft YaHei",sans-serif;}
#hud.hidden{display:none;}
#hud .btn{pointer-events:auto;}

.hud-top{
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  display:flex; gap:26px; padding:10px 26px;
  background:linear-gradient(180deg,rgba(8,11,13,.82),rgba(8,11,13,0));
}
.hud-top > div{text-align:center;}
.hud-top span{display:block; font-size:22px; font-weight:700; font-family:Consolas,monospace; letter-spacing:1px;}
.hud-top i{font-style:normal; font-size:10px; color:#93a3a9; letter-spacing:2px;}
.hud-timer span{color:var(--acc);}
.hud-timer.urgent span{color:var(--red); animation:blink 1s infinite;}
.hud-kills span{color:#e6eef0;} .hud-loot-total span{color:var(--grn);}
@keyframes blink{50%{opacity:.25;}}

.hud-compass{position:absolute; top:62px; left:50%; transform:translateX(-50%); width:340px; height:18px; overflow:hidden; opacity:.85;}
.compass-strip{height:100%; position:relative;}
.compass-strip .cs-tick{position:absolute; top:4px; font-size:10px; color:#b9c6cb; transform:translateX(-50%); letter-spacing:1px;}
.compass-strip .cs-tick.ew{font-size:12px; color:#fff; font-weight:700;}
.compass-mark{position:absolute; top:0; left:50%; width:2px; height:8px; background:var(--acc); transform:translateX(-50%);}

.hud-exit-list{position:absolute; top:96px; right:14px; display:flex; flex-direction:column; gap:6px; align-items:flex-end;}
.exit-item{background:rgba(10,14,16,.7); border-left:3px solid var(--grn); padding:5px 10px; font-size:12px; border-radius:2px;}
.exit-item b{color:var(--grn); margin-left:6px;}
.exit-item.locked{border-left-color:#8a6a2a;} .exit-item.locked b{color:#e0b45c;}
.exit-item.open{border-left-color:var(--blu);} .exit-item.open b{color:var(--blu);}

.crosshair{position:absolute; left:50%; top:50%; width:0; height:0; --gap:10px;}
.crosshair.hidden{display:none;}
.crosshair .ch{position:absolute; background:var(--ch,#7dff9b); box-shadow:0 0 3px rgba(0,0,0,.9);}
.crosshair .t{width:2px; height:9px; left:-1px; top:calc(-9px - var(--gap));}
.crosshair .b{width:2px; height:9px; left:-1px; top:var(--gap);}
.crosshair .l{width:9px; height:2px; top:-1px; left:calc(-9px - var(--gap));}
.crosshair .r{width:9px; height:2px; top:-1px; left:var(--gap);}
.crosshair .dot{width:2px; height:2px; left:-1px; top:-1px; opacity:.75;}
.hitmarker{
  position:absolute; left:50%; top:50%; width:22px; height:22px; margin:-11px 0 0 -11px; opacity:0;
  background:
    linear-gradient(45deg,transparent 44%,#fff 44% 56%,transparent 56%),
    linear-gradient(-45deg,transparent 44%,#fff 44% 56%,transparent 56%);
}
.hitmarker.show{opacity:1;}
.hitmarker.kill{filter:drop-shadow(0 0 6px #ff5b3a);}
.hud-aim{position:absolute; left:50%; top:calc(50% + 34px); transform:translateX(-50%); font-size:11px; color:var(--acc); opacity:0; transition:.15s;}
.hud-aim.on{opacity:.9;}

.hud-vitals{position:absolute; left:20px; bottom:20px; width:290px;}
.vital-row{display:flex; align-items:center; gap:8px; margin-bottom:7px;}
.vital-label{width:36px; font-size:11px; color:#a3b1b6; letter-spacing:1px;}
.vital-num{width:44px; text-align:right; font-family:Consolas,monospace; font-size:12px;}
.bar{flex:1; height:11px; background:rgba(10,14,16,.75); border:1px solid #2c373c; border-radius:2px; overflow:hidden;}
.bar-fill{height:100%; width:100%; transition:width .18s;}
.bar-hp .bar-fill{background:linear-gradient(90deg,#b8322a,#ef6a52);}
.bar-hp.low .bar-fill{background:linear-gradient(90deg,#7a1010,#e8503a); animation:blink .8s infinite;}
.bar-st .bar-fill{background:linear-gradient(90deg,#2f6f9e,#63c0f0);}
.bar-st.low .bar-fill{background:linear-gradient(90deg,#8a5a12,#e0a13a);}
.bar-ar .bar-fill{background:linear-gradient(90deg,#7a6a20,#e0c65c);}
.armor-row.off{opacity:.35;}

.hud-weapon{position:absolute; right:20px; bottom:20px; text-align:right; min-width:230px;}
.wp-name{font-size:15px; letter-spacing:2px; color:#e6eef0; margin-bottom:4px;}
.wp-ammo{font-family:Consolas,monospace; font-size:34px; line-height:1; color:#fff;}
.wp-ammo i{font-style:normal; color:#5f6f76; font-size:22px; margin:0 3px;}
.wp-ammo span#wp-reserve{font-size:20px; color:#93a3a9;}
.wp-ammo.empty span#wp-mag{color:var(--red);}
.wp-slots,.wp-items{display:flex; gap:8px; justify-content:flex-end; margin-top:8px;}
.wp-slot,.wp-item{font-size:11px; padding:3px 8px; background:rgba(10,14,16,.7); border:1px solid #2c373c; border-radius:3px; color:#8d9ba1;}
.wp-slot.on{border-color:var(--acc); color:var(--acc);}
.wp-item.usable{color:var(--grn); border-color:#2f5a3f;}
.wp-item.on{border-color:var(--acc); color:var(--acc); background:rgba(255,165,59,.14);}

.hud-prompt{
  position:absolute; left:50%; top:calc(50% + 64px); transform:translateX(-50%);
  background:rgba(10,14,16,.8); border:1px solid #38454b; border-radius:4px;
  padding:7px 16px; font-size:13px; letter-spacing:1px; display:none; white-space:nowrap;
}
.hud-prompt.show{display:block;}
.hud-prompt b{color:var(--acc);}

.hud-progress{
  position:absolute; left:50%; top:calc(50% + 108px); transform:translateX(-50%);
  width:280px; display:none; text-align:center;
}
.hud-progress.show{display:block;}
.hp-label{font-size:12px; letter-spacing:2px; margin-bottom:5px; color:#dfe8ea; text-shadow:0 1px 4px #000;}
.hp-bar{height:7px; background:rgba(10,14,16,.8); border:1px solid #38454b; border-radius:3px; overflow:hidden;}
.hp-bar > div{height:100%; width:0%; background:linear-gradient(90deg,#e07a00,#ffd08a);}

.hud-message{
  position:absolute; left:50%; top:26%; transform:translateX(-50%);
  font-size:34px; letter-spacing:12px; font-weight:800; text-align:center;
  text-shadow:0 4px 24px #000; opacity:0; transition:opacity .35s; white-space:nowrap;
}
.hud-message.show{opacity:1;}
.hud-toast-wrap{position:absolute; left:20px; top:50%; display:flex; flex-direction:column; gap:5px;}
.toast{background:rgba(10,14,16,.78); border-left:3px solid var(--grn); padding:5px 12px; font-size:12.5px; border-radius:2px; animation:slideIn .25s;}
.toast.loss{border-left-color:var(--red);}
.toast.info{border-left-color:var(--blu);}
@keyframes slideIn{from{opacity:0; transform:translateX(-14px);}}
.killfeed{position:absolute; right:20px; top:140px; display:flex; flex-direction:column; gap:4px; align-items:flex-end;}
.kf{background:rgba(10,14,16,.72); padding:4px 10px; font-size:12px; border-radius:2px; border-right:3px solid var(--red);}
.kf b{color:var(--acc);}

.dmg-vignette{position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .28s;
  background:radial-gradient(circle at 50% 50%, transparent 42%, rgba(200,20,10,.72) 100%);}
.flash-white{position:absolute; inset:0; pointer-events:none; background:#fff; opacity:0;}
.dmg-num{
  position:absolute; transform:translate(-50%,-50%); font-size:17px; font-weight:700;
  font-family:Consolas,monospace; color:#ffe9a8; text-shadow:0 2px 6px #000, 0 0 10px rgba(0,0,0,.9);
  transition:transform .8s ease-out, opacity .8s ease-out; pointer-events:none;
}
.dmg-num.head{color:#ffd05a; font-size:21px;}
.dmg-num.kill{color:#ff6a4a; font-size:20px; letter-spacing:2px;}
.dmg-dirs{position:absolute; inset:0;}
.dmg-arrow{position:absolute; left:50%; top:50%; width:0; height:0; margin:-30px 0 0 -30px;}
.dmg-arrow i{
  position:absolute; left:50%; top:-96px; margin-left:-16px; width:0; height:0;
  border-left:16px solid transparent; border-right:16px solid transparent; border-bottom:24px solid rgba(255,70,40,.9);
  animation:fadeAway 1.1s forwards;
}
@keyframes fadeAway{from{opacity:1;} to{opacity:0;}}

/* ---------- 战利品 / 背包面板 ---------- */
.loot-panel{
  position:absolute; inset:0; display:none; align-items:center; justify-content:center;
  pointer-events:none; background:radial-gradient(circle at 50% 50%, rgba(4,7,9,.55), rgba(4,7,9,.78));
}
.loot-panel.show{display:flex;}
.lp-box{
  pointer-events:auto; width:min(980px,94vw); max-height:88vh; display:flex; flex-direction:column;
  background:rgba(13,18,21,.97); border:1px solid #38454b; border-radius:8px;
  box-shadow:0 24px 70px rgba(0,0,0,.7); overflow:hidden;
}
.lp-cols{display:grid; grid-template-columns:1fr 1fr 260px; gap:1px; background:#242d32; overflow:hidden;}
.loot-panel.no-source .lp-cols{grid-template-columns:1fr 260px;}
.loot-panel.no-source .lp-source{display:none;}
.lp-note{font-size:11px; color:var(--grn); letter-spacing:1px;}
.lp-col{background:rgba(13,18,21,.97); padding:12px; display:flex; flex-direction:column; min-height:0;}
.lp-head{
  display:flex; justify-content:space-between; align-items:center; font-size:12px; letter-spacing:3px;
  color:var(--acc); padding-bottom:9px; margin-bottom:10px; border-bottom:1px solid #242d32;
}
.lp-head b{color:#e6eef0; letter-spacing:0; font-family:Consolas,monospace;}
.lp-grid{
  flex:1; min-height:150px; max-height:52vh; overflow:auto; display:grid; gap:7px; align-content:start;
  grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); padding-right:5px;
}
.lp-item{
  position:relative; background:#131a1e; border:1px solid #263136; border-radius:4px;
  padding:7px 9px; cursor:pointer; transition:.12s; min-height:62px; display:flex; flex-direction:column;
}
.lp-item:hover{border-color:var(--acc); background:#1a2227;}
.lp-item .li-name{font-size:12.5px; line-height:1.35; margin-bottom:auto;}
.lp-item .li-meta{font-size:11px; color:var(--dim); margin-top:6px; display:flex; justify-content:space-between;}
.lp-item .li-meta .v{color:var(--grn);}
.lp-item .li-tag{position:absolute; top:-1px; right:-1px; font-size:10px; padding:1px 6px; border-bottom-left-radius:4px; background:#2b353b; color:#cfe;}
.lp-item.r2 .li-tag{background:#16385e; color:#a9d4ff;}
.lp-item.r3 .li-tag{background:#3a1a5e; color:#d9b6ff;}
.lp-item.r4 .li-tag{background:#4d3a12; color:#ffdca8;}
.lp-item.r5 .li-tag{background:#5a1512; color:#ffb3a6;}
.lp-item.rer .li-meta .v{color:var(--dim);}
.lp-empty{grid-column:1/-1; color:#4f5f66; font-size:12.5px; text-align:center; padding:26px 0;}
.lp-actions{display:flex; gap:8px; margin-top:10px; justify-content:flex-end;}
.lp-foot{
  display:flex; gap:22px; justify-content:center; padding:9px; font-size:11.5px; color:var(--dim);
  background:#0d1214; border-top:1px solid #242d32;
}
.lp-foot b{color:var(--acc);}
.lp-secure{background:rgba(16,22,26,.97);}
.lp-secure .lp-head{color:var(--grn);}

/* ---------- 投掷提示 / 轮盘 ---------- */
.throw-hint{
  position:absolute; left:50%; top:calc(50% + 46px); transform:translateX(-50%);
  font-size:12px; letter-spacing:2px; color:#ffb347; text-shadow:0 2px 8px #000;
  display:none; white-space:nowrap;
}
.throw-hint.show{display:block;}

.radial{
  position:absolute; left:50%; top:50%; width:340px; height:340px; margin:-170px 0 0 -170px;
  display:none; align-items:center; justify-content:center;
}
.radial.show{display:flex;}
.radial-ring{
  position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(circle, rgba(12,17,20,.9) 34%, rgba(12,17,20,.72) 60%, rgba(12,17,20,.1) 100%);
  border:1px solid #3a474e; box-shadow:0 0 40px rgba(0,0,0,.7);
}
.radial-title{
  position:absolute; top:6px; left:50%; transform:translateX(-50%);
  font-size:12px; letter-spacing:4px; color:var(--acc); white-space:nowrap;
}
.radial-hint{
  position:absolute; bottom:6px; left:50%; transform:translateX(-50%);
  font-size:11px; color:var(--dim); white-space:nowrap;
}
.radial-items{position:absolute; inset:0;}
.radial-item{
  position:absolute; width:112px; margin-left:-56px; margin-top:-30px; text-align:center;
  background:rgba(20,27,31,.94); border:1px solid #2c373c; border-radius:6px; padding:7px 6px;
  transition:.1s;
}
.radial-item .ri-key{font-size:10px; color:var(--dim); letter-spacing:1px;}
.radial-item .ri-name{font-size:12.5px; margin-top:2px; line-height:1.3;}
.radial-item .ri-count{font-size:11px; color:var(--grn); margin-top:3px;}
.radial-item.sel{border-color:var(--acc); background:#2a2114; box-shadow:0 0 18px rgba(255,165,59,.4); transform:scale(1.08);}
.radial-item.empty{opacity:.35;}

/* ---------- 全局提示条 ---------- */
.notice-host{
  position:fixed; left:50%; top:74px; transform:translateX(-50%); z-index:10000;
  display:flex; flex-direction:column; gap:7px; align-items:center; pointer-events:none;
}
.notice{
  background:rgba(16,22,26,.96); border:1px solid #3a474e; border-left:3px solid var(--grn);
  color:var(--txt); font-size:13px; padding:8px 18px; border-radius:4px;
  box-shadow:0 10px 30px rgba(0,0,0,.6); transition:opacity .5s, transform .5s;
}
.notice.bad{border-left-color:var(--red); color:#ffd0c8;}
.notice.out{opacity:0; transform:translateY(-8px);}

/* ---------- 右键菜单 ---------- */
.ctx-menu{
  position:fixed; z-index:9999; min-width:150px; background:#141b1f; border:1px solid #3d4b52;
  border-radius:5px; padding:4px; box-shadow:0 12px 34px rgba(0,0,0,.75);
}
.ctx-item{
  padding:8px 14px; font-size:13px; border-radius:3px; cursor:pointer; color:var(--txt); white-space:nowrap;
}
.ctx-item:hover{background:#243036; color:#fff;}
.ctx-item.danger{color:#ffb3a6;}
.ctx-item.danger:hover{background:#5a2018; color:#fff;}
.ctx-item.disabled{color:#4f5f66; cursor:not-allowed;}
.ctx-item.disabled:hover{background:transparent; color:#4f5f66;}

/* ---------- 仓库背包 ---------- */
.pack-grid{
  display:grid; gap:6px; align-content:start; grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
  max-height:230px; overflow:auto; padding-right:4px; min-height:44px;
}
.pack-empty{grid-column:1/-1; color:#4f5f66; font-size:12px; text-align:center; padding:16px 0;}
.pack-hint{font-size:11px; color:var(--dim); margin-top:9px; line-height:1.6;}
.secure-grid{border:1px dashed #3a5a44; border-radius:4px; padding:5px; background:rgba(30,60,40,.14);}
.secure-grid .icard{border-left-color:var(--grn) !important;}

.hud-minimap{position:absolute; left:20px; top:20px; width:200px; height:200px; border:1px solid var(--line); border-radius:4px; overflow:hidden; background:rgba(6,9,11,.72);}
.hud-minimap canvas{display:block; width:200px; height:200px; opacity:.92;}
.mm-label{position:absolute; bottom:3px; right:6px; font-size:10px; color:#8d9ba1; letter-spacing:1px;}
.bigmap{
  position:absolute; inset:0; display:none; align-items:center; justify-content:center;
  background:rgba(3,5,7,.9); flex-direction:column;
}
.bigmap.show{display:flex;}
.bigmap canvas{background:#0c1114; border:1px solid var(--line); border-radius:6px; max-width:82vh; max-height:82vh;}
.bigmap-tip{margin-top:10px; font-size:12px; color:var(--dim); letter-spacing:2px;}

.pause-menu{
  position:absolute; inset:0; display:none; flex-direction:column; align-items:center; justify-content:center;
  background:rgba(4,6,8,.86); gap:14px;
}
.pause-menu.show{display:flex;}
.pause-menu h2{letter-spacing:10px; font-weight:800; color:var(--acc);}
.pause-menu .btn{width:280px; pointer-events:auto;}

/* ---------- 结算 ---------- */
#screen-result{background:radial-gradient(circle at 50% 20%, rgba(255,140,20,.10), transparent 60%), #080b0d; overflow:auto;}
.result-wrap{margin:auto; padding:36px; width:min(1000px,94vw);}
.result-title{font-size:52px; letter-spacing:16px; text-align:center; margin-bottom:8px;}
.result-title.ok{color:var(--grn); text-shadow:0 0 40px rgba(95,212,138,.35);}
.result-title.bad{color:var(--red); text-shadow:0 0 40px rgba(232,80,58,.35);}
.result-sub{text-align:center; color:var(--dim); letter-spacing:3px; margin-bottom:28px;}
.result-cols{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.result-list{max-height:320px; overflow:auto; font-size:13px;}
.result-list .rl-row{display:flex; justify-content:space-between; padding:5px 0; border-bottom:1px dashed #222b30;}
.result-list .rl-row span{color:#c3ced2;}
.result-list .rl-row b{color:var(--grn); font-family:Consolas,monospace;}
.result-list .rl-row.loss b{color:var(--red);}
.result-list .rl-empty{color:var(--dim); padding:20px 0; text-align:center;}
.result-summary{display:flex; gap:26px; justify-content:center; margin:26px 0; flex-wrap:wrap;}
.result-summary div{text-align:center;}
.result-summary b{display:block; font-size:22px; font-family:Consolas,monospace; color:var(--acc);}
.result-summary i{font-style:normal; font-size:11px; color:var(--dim); letter-spacing:2px;}
.result-wrap > .btn{display:block; margin:0 auto;}

@media (max-width:1400px){
  .lobby-body{grid-template-columns:320px 1fr;}
  .lobby-act{grid-column:1 / -1;}
  .lobby-quick{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:1200px){
  .lobby-body{grid-template-columns:1fr;}
  .lobby-quick{grid-template-columns:1fr 1fr;}
  .stash-body{grid-template-columns:1fr; overflow:auto;}
  .result-cols{grid-template-columns:1fr;}
}