/*lansh: 全局样式变量, 与单机版同一视觉语言 */
:root{--bg-deep:#0a0c10;--bg-panel:#13161d;--bg-card:#1a1e27;--border:#2a3040;--border-light:#363d4f;--accent:#e8943a;--accent-dim:#8b5a2b;--danger:#d9443a;--danger-bright:#ff4d45;--success:#3cb878;--info:#4a90d9;--text:#c8cdd4;--text-dim:#6a7078;--text-bright:#e8ecf2;--hp:#4caf50;--hp-mid:#ff9800;--hp-low:#f44336;--gold:#ffd700;font-family:'Segoe UI',system-ui,-apple-system,sans-serif}
*{margin:0;padding:0;box-sizing:border-box}
body{width:100vw;height:100vh;overflow:hidden;background:var(--bg-deep);user-select:none;-webkit-user-select:none;position:relative;color:var(--text)}
.screen{position:absolute;inset:0;display:none;flex-direction:column;overflow:hidden;z-index:1}.screen.active{display:flex}
.toast{position:fixed;top:32px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,rgba(232,148,58,.95),rgba(196,122,37,.95));color:#000;padding:12px 32px;font-size:14px;font-weight:600;letter-spacing:2px;z-index:9999;opacity:0;transition:opacity .3s;pointer-events:none;white-space:nowrap;border-radius:4px;box-shadow:0 4px 20px rgba(232,148,58,.4)}.toast.show{opacity:1}
button{font-family:inherit}
/* 标题界面 */
#titleScreen{justify-content:center;align-items:center;background:radial-gradient(ellipse at 30% 20%,rgba(232,148,58,.08) 0%,transparent 50%),radial-gradient(ellipse at 70% 80%,rgba(74,144,217,.05) 0%,transparent 50%),linear-gradient(180deg,rgba(10,12,16,0) 0%,rgba(10,12,16,1) 70%),var(--bg-deep);text-align:center;gap:20px}
.title-logo-container{position:relative;margin-bottom:20px}.title-glow{position:absolute;inset:-40px;background:radial-gradient(circle,rgba(232,148,58,.15) 0%,transparent 70%);animation:pulse-glow-bg 3s ease-in-out infinite}@keyframes pulse-glow-bg{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.1)}}
.title-main{font-size:72px;font-weight:900;letter-spacing:16px;color:var(--text-bright);text-transform:uppercase;position:relative;text-shadow:0 0 40px rgba(232,148,58,.3)}.title-main span{color:var(--accent)}
.title-sub{font-size:15px;color:var(--text-dim);letter-spacing:12px;text-transform:uppercase;margin-top:8px}.title-version{font-size:11px;color:var(--text-dim);opacity:.35;margin-top:60px;letter-spacing:4px}
.btn-start{margin-top:50px;background:linear-gradient(135deg,var(--accent),#c47a25);color:#000;border:none;padding:20px 90px;font-size:22px;font-weight:700;letter-spacing:8px;cursor:pointer;clip-path:polygon(16px 0,100% 0,calc(100% - 16px) 100%,0 100%);transition:all .15s;position:relative;overflow:hidden}.btn-start::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s}.btn-start:hover::before{left:100%}.btn-start:hover{transform:scale(1.04);box-shadow:0 0 50px rgba(232,148,58,.6)}.btn-start:active{transform:scale(.97)}
.key-hint-bar{position:absolute;bottom:40px;display:flex;gap:16px;font-size:12px;color:var(--text-dim);letter-spacing:1px;flex-wrap:wrap;justify-content:center;padding:0 40px}.key-hint-bar span{background:rgba(26,30,39,.8);border:1px solid var(--border);padding:6px 14px;border-radius:4px}
/* 通用顶栏与金币 */
.hub-topbar{display:flex;justify-content:space-between;align-items:center;padding-bottom:18px;border-bottom:1px solid var(--border)}
.map-back{background:var(--bg-card);border:1px solid var(--border);color:var(--text-dim);padding:10px 22px;font-size:13px;cursor:pointer;letter-spacing:2px;transition:all .2s;border-radius:4px}.map-back:hover{border-color:var(--accent);color:var(--text-bright)}
.shop-btn{background:var(--bg-card);border:1px solid var(--border);color:var(--text-bright);padding:12px 28px;font-size:14px;font-weight:600;letter-spacing:3px;cursor:pointer;transition:all .2s;border-radius:4px}.shop-btn:hover{border-color:var(--accent);background:rgba(232,148,58,.1)}
.coins-display{background:linear-gradient(135deg,var(--bg-card),rgba(26,30,39,.8));border:1px solid var(--gold);padding:10px 22px;display:flex;align-items:center;gap:10px;font-size:14px;border-radius:6px;box-shadow:0 0 15px rgba(255,215,0,.1)}.coins-display .coin-icon{width:26px;height:26px;background:linear-gradient(135deg,var(--gold),#daa520);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:900;color:#5a3a00}.coins-display .amount{font-weight:700;font-size:20px;color:var(--gold)}
/* 战备大厅 */
#hubScreen{background:var(--bg-deep);padding:20px 36px;gap:0;overflow-y:auto}
.hub-main{flex:1;display:flex;align-items:flex-start;justify-content:center;gap:26px;padding-top:16px}
.hub-col{display:flex;flex-direction:column;gap:10px;min-width:270px}
.inv-section-title{font-size:11px;color:var(--accent);letter-spacing:3px;text-transform:uppercase;margin-bottom:4px;padding-bottom:6px;border-bottom:1px solid var(--border);font-weight:600}
.weapon-card{width:80px;height:80px;background:var(--bg-card);border:2px solid var(--border);border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:all .15s;font-size:30px;position:relative}.weapon-card:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:0 0 20px rgba(232,148,58,.25)}.weapon-card .wep-name{font-size:10px;color:var(--text-dim);margin-top:5px;letter-spacing:1px}.weapon-card.selected{border-color:var(--accent);box-shadow:0 0 25px rgba(232,148,58,.6);background:rgba(232,148,58,.1)}.weapon-card.locked{opacity:.35;cursor:not-allowed}.weapon-card.locked:hover{border-color:var(--border);transform:none;box-shadow:none}
.inv-slot{width:60px;height:60px;background:var(--bg-card);border:2px dashed var(--border-light);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:24px;transition:all .25s;position:relative;cursor:pointer}.inv-slot:hover{border-color:var(--accent);transform:scale(1.05)}.inv-slot.filled{border-style:solid;border-color:var(--success);background:rgba(60,184,120,.08)}.inv-slot.selected{border-color:var(--accent);box-shadow:0 0 18px rgba(232,148,58,.5);background:rgba(232,148,58,.1)}.inv-slot.locked{opacity:.3;cursor:not-allowed}.inv-slot .slot-label{position:absolute;bottom:-18px;font-size:10px;color:var(--text-dim);letter-spacing:1px;white-space:nowrap}
.hub-info-panel{background:var(--bg-card);border:1px solid var(--border);border-radius:8px;padding:12px;font-size:12px;color:var(--text-dim);line-height:1.7}
.skin-chip{width:56px;height:56px;border-radius:8px;border:2px solid var(--border);background:var(--bg-card);display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:20px;cursor:pointer;transition:all .15s;position:relative}.skin-chip:hover{border-color:var(--accent)}.skin-chip.equipped{border-color:var(--gold);box-shadow:0 0 14px rgba(255,215,0,.4)}.skin-chip .sk-name{font-size:9px;color:var(--text-dim);margin-top:2px}
.hub-bottom{padding-top:16px;display:flex;justify-content:center;border-top:1px solid var(--border)}
.btn-battle{background:linear-gradient(135deg,var(--danger),#b83030);color:#fff;border:none;padding:18px 100px;font-size:22px;font-weight:700;letter-spacing:8px;cursor:pointer;clip-path:polygon(14px 0,100% 0,calc(100% - 14px) 100%,0 100%);transition:all .15s}.btn-battle:hover{transform:scale(1.04);box-shadow:0 0 50px rgba(217,68,58,.5)}.btn-battle:active{transform:scale(.97)}.btn-battle.glow{animation:pulse-glow 2.5s ease-in-out infinite}@keyframes pulse-glow{0%,100%{box-shadow:0 0 25px rgba(217,68,58,.25)}50%{box-shadow:0 0 60px rgba(217,68,58,.55)}}
/* 商店界面 */
#shopScreen{background:var(--bg-deep);padding:20px 36px}
.shop-tabs{display:flex;gap:12px;margin:18px 0}
.shop-tab{background:var(--bg-card);border:1px solid var(--border);color:var(--text-dim);padding:12px 36px;font-size:15px;font-weight:600;letter-spacing:4px;cursor:pointer;border-radius:6px;transition:all .2s}.shop-tab.active{border-color:var(--accent);color:var(--accent);background:rgba(232,148,58,.08)}
.shop-grid{flex:1;display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;overflow-y:auto;padding-bottom:20px;align-content:start}
.shop-card{background:var(--bg-card);border:1px solid var(--border);border-radius:10px;padding:16px;display:flex;flex-direction:column;align-items:center;gap:8px;transition:all .2s}.shop-card:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:0 6px 20px rgba(0,0,0,.4)}
.shop-card .sc-icon{font-size:40px}.shop-card .sc-name{font-size:14px;color:var(--text-bright);font-weight:600;letter-spacing:1px}.shop-card .sc-desc{font-size:11px;color:var(--text-dim);text-align:center}
.shop-card .sc-price{font-size:15px;color:var(--gold);font-weight:700}
.shop-card .sc-btn{background:linear-gradient(135deg,var(--accent),#c47a25);color:#000;border:none;padding:8px 26px;font-size:13px;font-weight:700;letter-spacing:2px;cursor:pointer;border-radius:4px;transition:all .15s}.shop-card .sc-btn:hover{transform:scale(1.06)}.shop-card .sc-btn:disabled{background:var(--border);color:var(--text-dim);cursor:not-allowed;transform:none}
.shop-card .sc-owned{font-size:11px;color:var(--success);letter-spacing:2px}
.shop-card .sc-sell{background:transparent;border:1px solid var(--border-light);color:var(--text-dim);padding:6px 18px;font-size:11px;cursor:pointer;border-radius:4px}.shop-card .sc-sell:hover{border-color:var(--danger);color:var(--danger-bright)}
/* 地图选择界面 */
#mapScreen{background:var(--bg-deep);padding:20px 36px}
.map-title{font-size:22px;font-weight:700;color:var(--text-bright);letter-spacing:6px}
.map-container{flex:1;margin-top:16px;background:var(--bg-card);border:1px solid var(--border);border-radius:10px;position:relative;overflow:hidden}
#worldMapCanvas{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.map-point{position:absolute;width:42px;height:42px;background:linear-gradient(135deg,var(--accent),#c47a25);border-radius:50%;transform:translate(-50%,-50%);cursor:pointer;z-index:2;transition:all .2s;box-shadow:0 0 25px rgba(232,148,58,.5);animation:pulse-point 2.5s ease-in-out infinite;display:flex;align-items:center;justify-content:center;font-size:18px}.map-point:hover{transform:translate(-50%,-50%) scale(1.3);box-shadow:0 0 40px rgba(232,148,58,.7)}@keyframes pulse-point{0%,100%{box-shadow:0 0 16px rgba(232,148,58,.3)}50%{box-shadow:0 0 42px rgba(232,148,58,.75)}}
.map-point .mp-label{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:6px;white-space:nowrap;font-size:12px;color:var(--text-bright);text-shadow:0 0 4px rgba(0,0,0,.8)}
.location-detail{display:none;position:absolute;inset:0;background:rgba(10,12,16,.96);backdrop-filter:blur(8px);flex-direction:column;align-items:center;justify-content:center;z-index:10;text-align:center;gap:20px}.location-detail.show{display:flex}
.location-icon{font-size:64px}.location-name{font-size:40px;font-weight:900;color:var(--text-bright);letter-spacing:8px}
.location-risk{font-size:14px;color:var(--accent);letter-spacing:4px;padding:8px 28px;border:1px solid var(--accent-dim);border-radius:20px}
.location-desc{font-size:14px;color:var(--text-dim);letter-spacing:2px;max-width:440px;line-height:1.7}
.btn-deploy{background:linear-gradient(135deg,var(--accent),#c47a25);color:#000;border:none;padding:16px 64px;font-size:20px;font-weight:700;letter-spacing:6px;cursor:pointer;clip-path:polygon(12px 0,100% 0,calc(100% - 12px) 100%,0 100%);transition:all .15s}.btn-deploy:hover{transform:scale(1.05);box-shadow:0 0 35px rgba(232,148,58,.5)}
/* 战斗画面 */
#gameScreen{background:#000;overflow:hidden;position:relative}#gameCanvas{display:block;width:100%;height:100%}
#clickShield{position:absolute;inset:0;z-index:30;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(10,12,16,.75);cursor:pointer;gap:14px;backdrop-filter:blur(4px)}
#clickShield .cs-main{font-size:30px;font-weight:900;color:var(--text-bright);letter-spacing:8px}
#clickShield .cs-sub{font-size:13px;color:var(--text-dim);letter-spacing:3px}
.crosshair{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:5;pointer-events:none;--cgap:8px}
.ch-line{position:absolute;background:rgba(255,255,255,.9);box-shadow:0 0 3px rgba(0,0,0,.9)}
.ch-t{left:-1px;top:calc(-10px - var(--cgap));width:2px;height:9px}.ch-b{left:-1px;top:calc(1px + var(--cgap));width:2px;height:9px}
.ch-l{top:-1px;left:calc(-10px - var(--cgap));width:9px;height:2px}.ch-r{top:-1px;left:calc(1px + var(--cgap));width:9px;height:2px}
.ch-dot{position:absolute;left:-1px;top:-1px;width:2px;height:2px;background:rgba(255,255,255,.9)}
.hit-marker{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:none;z-index:6;pointer-events:none}.hit-marker.show{display:flex;gap:4px;animation:hit-pop .3s ease-out forwards}.hit-marker.gold .hit-line{background:var(--gold)}
.hit-line{width:5px;height:18px;background:#fff;transform-origin:center}.hit-line:nth-child(1){transform:rotate(-45deg)}.hit-line:nth-child(2){transform:rotate(45deg)}.hit-line:nth-child(3){transform:rotate(-135deg)}.hit-line:nth-child(4){transform:rotate(135deg)}@keyframes hit-pop{0%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.8)}}
#vignette{position:absolute;inset:0;z-index:8;pointer-events:none;background:radial-gradient(ellipse at center,transparent 40%,rgba(217,68,58,.55) 100%);opacity:0}
#scopeOverlay{position:absolute;inset:0;z-index:7;pointer-events:none;display:none;background:radial-gradient(circle at center,transparent 26%,rgba(0,0,0,.97) 27.5%)}
#scopeOverlay .sc-h{position:absolute;top:50%;left:20%;right:20%;height:1px;background:rgba(0,0,0,.8)}
#scopeOverlay .sc-v{position:absolute;left:50%;top:20%;bottom:20%;width:1px;background:rgba(0,0,0,.8)}
/* 可变焦瞄准镜倍率读数: 显示在镜内下方 */
#scopeOverlay .sc-zoom{position:absolute;left:50%;top:63%;transform:translateX(-50%);font-size:14px;font-weight:700;color:rgba(0,0,0,.85);letter-spacing:2px}
/* 红点瞄准镜覆盖层: 开镜时屏幕中心显示红点与外圈 */
#reddotOverlay{position:absolute;inset:0;z-index:7;pointer-events:none;display:none}
#reddotOverlay .rd-dot{position:absolute;left:50%;top:50%;width:5px;height:5px;transform:translate(-50%,-50%);border-radius:50%;background:#ff2a1a;box-shadow:0 0 6px 2px rgba(255,42,26,.75)}
#reddotOverlay .rd-ring{position:absolute;left:50%;top:50%;width:36px;height:36px;transform:translate(-50%,-50%);border-radius:50%;border:1px solid rgba(255,42,26,.3)}
#damageLayer{position:absolute;inset:0;z-index:6;pointer-events:none;overflow:hidden}
.dmg-num{position:absolute;font-size:16px;font-weight:900;color:#fff;text-shadow:0 0 6px rgba(0,0,0,.9);pointer-events:none;white-space:nowrap;transform:translate(-50%,-50%)}
.dmg-num.head{color:var(--gold);font-size:19px}.dmg-num.kill{color:var(--accent);font-size:22px;letter-spacing:2px}
/* HUD 左上: 玩家状态 */
.hud-topleft{position:absolute;top:20px;left:24px;z-index:10;display:flex;flex-direction:column;gap:8px}
.player-hp-bar{width:220px;height:12px;background:rgba(255,255,255,.1);border-radius:6px;overflow:hidden;border:1px solid rgba(255,255,255,.08)}
.hp-bar-fill{height:100%;background:var(--hp);border-radius:6px;transition:width .2s}.hp-bar-fill.mid{background:var(--hp-mid)}.hp-bar-fill.low{background:var(--hp-low)}
.hp-text{font-size:13px;color:var(--text-bright);font-weight:700;letter-spacing:1px;text-shadow:0 1px 3px rgba(0,0,0,.8)}
.fracture-tag{display:none;font-size:12px;color:var(--hp-low);font-weight:700;letter-spacing:2px;animation:blink-death .8s infinite}.fracture-tag.show{display:block}@keyframes blink-death{0%,100%{opacity:1}50%{opacity:.3}}
/* HUD 右上: 药品/队友/小地图 */
.hud-topright{position:absolute;top:20px;right:24px;z-index:10;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.meds-bar{display:flex;gap:8px}
.med-item{width:46px;height:46px;background:rgba(26,30,39,.92);border:2px solid var(--border);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:22px;position:relative;cursor:pointer;transition:all .2s}.med-item:hover{border-color:var(--success);transform:scale(1.08)}.med-item.empty{opacity:.35;cursor:not-allowed}.med-item.on-cooldown{opacity:.5}
.med-count{position:absolute;bottom:1px;right:4px;font-size:10px;color:var(--text);font-weight:700}.med-key{position:absolute;top:1px;left:4px;font-size:9px;color:var(--accent);font-weight:700}
#minimap{width:150px;height:150px;border:1px solid var(--border-light);border-radius:8px;background:rgba(10,12,16,.85)}
.kill-count{font-size:13px;color:var(--text-bright);letter-spacing:2px;background:rgba(10,12,16,.7);padding:6px 14px;border-radius:4px;border:1px solid var(--border)}.kill-count b{color:var(--accent);font-size:18px}
.teammate-panel{display:flex;flex-direction:column;gap:6px;background:rgba(10,12,16,.7);border:1px solid var(--border);border-radius:6px;padding:8px 12px}
.teammate-info{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--text)}
.teammate-name{font-weight:600;letter-spacing:1px;min-width:60px}.teammate-name.dead{color:var(--text-dim);text-decoration:line-through;opacity:.4}
.teammate-hp-bar{width:80px;height:5px;background:rgba(255,255,255,.1);border-radius:3px;overflow:hidden}.teammate-hp-fill{height:100%;background:var(--info);transition:width .3s;border-radius:3px}.teammate-hp-fill.danger{background:var(--hp-low)}
/* HUD 右下: 装备耐久 */
.hud-bottomright{position:absolute;bottom:24px;right:24px;z-index:10;display:flex;flex-direction:column;gap:8px;background:rgba(10,12,16,.75);border:1px solid var(--border);border-radius:8px;padding:10px 14px}
.equip-row{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--text)}
.equip-row .eq-icon{font-size:16px;width:22px;text-align:center}
.equip-row .eq-name{width:52px;letter-spacing:1px;color:var(--text-dim)}
.equip-dur-bar{width:90px;height:6px;background:rgba(255,255,255,.1);border-radius:3px;overflow:hidden}
.equip-dur-fill{height:100%;background:var(--hp);border-radius:3px;transition:width .3s}.equip-dur-fill.mid{background:var(--hp-mid)}.equip-dur-fill.low{background:var(--hp-low)}
/* 顶部中间 */
.wave-display{position:absolute;top:24px;left:50%;transform:translateX(-50%);z-index:12;font-size:15px;color:var(--accent);letter-spacing:3px;font-weight:700;text-shadow:0 0 15px rgba(232,148,58,.6);background:rgba(10,12,16,.7);padding:8px 24px;border-radius:20px;border:1px solid rgba(232,148,58,.3);white-space:nowrap}
.announce{position:absolute;top:32%;left:50%;transform:translate(-50%,-50%);z-index:14;font-size:44px;font-weight:900;color:var(--text-bright);letter-spacing:14px;text-shadow:0 0 40px rgba(232,148,58,.6);opacity:0;transition:opacity .4s;pointer-events:none;white-space:nowrap}
.game-event{position:absolute;bottom:180px;left:50%;transform:translateX(-50%);z-index:15;pointer-events:none;font-size:14px;color:var(--accent);letter-spacing:3px;font-weight:600;opacity:0;transition:opacity .3s;text-shadow:0 0 10px rgba(232,148,58,.5);white-space:nowrap}
.center-prompt{position:absolute;top:58%;left:50%;transform:translateX(-50%);z-index:13;font-size:16px;color:var(--text-bright);letter-spacing:3px;background:rgba(10,12,16,.8);border:1px solid var(--border-light);padding:10px 26px;border-radius:6px;display:none;pointer-events:none}.center-prompt.show{display:block}
.extract-panel{position:absolute;top:70px;left:50%;transform:translateX(-50%);z-index:12;display:none;flex-direction:column;align-items:center;gap:8px}.extract-panel.show{display:flex}
.extract-text{font-size:14px;color:var(--gold);letter-spacing:3px;font-weight:700;text-shadow:0 0 12px rgba(255,215,0,.6)}
.extract-bar{width:240px;height:8px;background:rgba(255,255,255,.1);border-radius:4px;overflow:hidden;border:1px solid rgba(255,215,0,.3)}
.extract-fill{height:100%;width:0;background:var(--gold);border-radius:4px;transition:width .1s linear}
/* 坦克状态与空袭冷却 */
#tankPanel{position:absolute;bottom:110px;left:50%;transform:translateX(-50%);z-index:11;display:none;flex-direction:column;align-items:center;gap:5px;background:rgba(10,12,16,.8);border:1px solid var(--border);border-radius:8px;padding:8px 20px}#tankPanel.show{display:flex}
#tankPanel .tp-text{font-size:12px;color:var(--accent);letter-spacing:2px}
#tankPanel .tp-bar{width:200px;height:8px;background:rgba(255,255,255,.1);border-radius:4px;overflow:hidden}
#tankPanel .tp-fill{height:100%;width:100%;background:var(--accent);border-radius:4px}
#airstrikeIcon{position:absolute;bottom:110px;right:24px;z-index:11;background:rgba(10,12,16,.75);border:1px solid var(--border);border-radius:8px;padding:8px 14px;font-size:12px;color:var(--text-dim);letter-spacing:1px;display:flex;align-items:center;gap:8px}
#airstrikeIcon.ready{color:var(--accent);border-color:var(--accent-dim)}
/* 底部武器栏 */
.hud-bottom{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);z-index:10;display:flex;align-items:center;gap:16px;background:rgba(10,12,16,.82);border:1px solid var(--border);border-radius:10px;padding:12px 22px;backdrop-filter:blur(8px)}
.weapon-bar{display:flex;gap:10px;align-items:center}
.wpn-slot{width:52px;height:42px;background:var(--bg-card);border:2px solid var(--border);border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:20px;cursor:pointer;transition:all .2s;position:relative}.wpn-slot:hover{border-color:var(--accent)}.wpn-slot.active{border-color:var(--accent);box-shadow:0 0 12px rgba(232,148,58,.35)}.wpn-slot.locked{opacity:.3;cursor:not-allowed}.wpn-slot .wpn-key{position:absolute;top:1px;left:4px;font-size:9px;color:var(--text-dim)}.wpn-slot .wpn-count{position:absolute;bottom:1px;right:4px;font-size:9px;color:var(--text)}
.ammo-display{display:flex;align-items:baseline;gap:3px;padding:0 14px;border-left:1px solid var(--border);border-right:1px solid var(--border)}
.ammo-current{font-size:34px;font-weight:900;color:#fff;font-variant-numeric:tabular-nums;text-shadow:0 0 10px rgba(255,255,255,.3)}.ammo-reserve{font-size:16px;color:var(--text-dim)}
.control-hints{display:flex;gap:10px;font-size:10px;color:var(--text-dim);letter-spacing:1px}.control-hints kbd{background:var(--bg-card);border:1px solid var(--border-light);border-radius:4px;padding:3px 8px;font-family:inherit;color:var(--text);font-size:10px}
#medCast{position:absolute;bottom:130px;left:50%;transform:translateX(-50%);z-index:11;display:none;flex-direction:column;align-items:center;gap:6px}#medCast.show{display:flex}
#medCast .mc-text{font-size:12px;color:var(--success);letter-spacing:2px}
#medCast .mc-bar{width:160px;height:6px;background:rgba(255,255,255,.1);border-radius:3px;overflow:hidden}
#medCast .mc-fill{height:100%;width:0;background:var(--success)}
/* 遮罩类: 暂停/死亡/结算/舔包/叙事 */
.event-overlay{position:absolute;inset:0;background:rgba(0,0,0,.85);display:none;flex-direction:column;align-items:center;justify-content:center;z-index:40;text-align:center;padding:40px;gap:16px}.event-overlay.show{display:flex}
.overlay-title{font-size:40px;font-weight:900;color:var(--danger-bright);letter-spacing:12px;text-shadow:0 0 35px rgba(255,77,69,.5)}.overlay-title.win{color:var(--success);text-shadow:0 0 35px rgba(60,184,120,.5)}
.overlay-subtitle{color:var(--text-dim);font-size:15px;letter-spacing:3px}
.overlay-stats{display:flex;gap:40px;margin:8px 0}.overlay-stat{display:flex;flex-direction:column;gap:6px}.overlay-stat .os-num{font-size:32px;font-weight:900;color:var(--text-bright)}.overlay-stat .os-label{font-size:12px;color:var(--text-dim);letter-spacing:2px}
.btn-overlay{background:var(--accent);color:#000;border:none;padding:15px 54px;font-size:17px;font-weight:700;letter-spacing:4px;cursor:pointer;clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);transition:all .15s}.btn-overlay:hover{transform:scale(1.05)}
.btn-overlay.secondary{background:var(--bg-card);color:var(--text);border:1px solid var(--border)}
.overlay-btns{display:flex;gap:16px}
/* 死亡画面身体状态 */
.body-status{display:flex;gap:26px;background:rgba(26,30,39,.6);border:1px solid var(--border);border-radius:10px;padding:16px 30px}
.body-part{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:12px;color:var(--text-dim)}
.body-part .bp-dot{width:26px;height:26px;border-radius:50%;border:2px solid var(--border-light)}
.body-part .bp-dot.ok{background:var(--hp)}.body-part .bp-dot.hurt{background:var(--hp-low)}.body-part .bp-dot.dead{background:#111;border-color:var(--hp-low)}
.killer-info{font-size:15px;color:var(--text);letter-spacing:2px}.killer-info b{color:var(--danger-bright)}
/* 撤离结算战利品清单 */
.loot-list{max-height:180px;overflow-y:auto;background:rgba(26,30,39,.6);border:1px solid var(--border);border-radius:8px;padding:10px 20px;min-width:320px;display:flex;flex-direction:column;gap:6px}
.loot-list .ll-row{display:flex;justify-content:space-between;font-size:13px;color:var(--text);gap:30px}
.loot-list .ll-row .ll-val{color:var(--gold)}
.loot-list .ll-empty{font-size:12px;color:var(--text-dim);text-align:center;padding:8px}
/* 舔包界面 */
#lootOverlay .loot-box{background:var(--bg-panel);border:1px solid var(--border-light);border-radius:12px;padding:26px 30px;display:flex;flex-direction:column;gap:16px;min-width:420px}
.loot-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.loot-item{background:var(--bg-card);border:1px solid var(--border);border-radius:8px;padding:12px;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;transition:all .15s}.loot-item:hover{border-color:var(--success);transform:scale(1.05)}.loot-item.taken{opacity:.3;cursor:not-allowed;transform:none}
.loot-item .li-icon{font-size:26px}.loot-item .li-name{font-size:11px;color:var(--text);letter-spacing:1px}.loot-item .li-val{font-size:10px;color:var(--gold)}
/* 叙事遮罩 */
#narrationOverlay{position:absolute;inset:0;z-index:100;background:rgba(0,0,0,.88);display:none;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:40px}
#narrationText{color:#e8d4a0;font-size:18px;line-height:1.9;text-align:center;max-width:620px;letter-spacing:2px;min-height:120px}
#narrationSkip{color:rgba(255,255,255,.3);font-size:12px;margin-top:20px;cursor:pointer;letter-spacing:2px}#narrationSkip:hover{color:rgba(255,255,255,.7)}
/*End lansh*/

/*lansh: 登录/注册界面 (暗色玻璃拟态卡片) */
#loginScreen{justify-content:center;align-items:center;background:radial-gradient(ellipse at 30% 20%,rgba(232,148,58,.08) 0%,transparent 50%),linear-gradient(180deg,rgba(10,12,16,0) 0%,rgba(10,12,16,1) 70%),var(--bg-deep)}
.login-card{width:380px;max-width:92vw;background:rgba(19,22,29,.72);border:1px solid var(--border-light);border-radius:14px;padding:34px 34px 28px;backdrop-filter:blur(10px);box-shadow:0 12px 48px rgba(0,0,0,.55),0 0 30px rgba(232,148,58,.06);display:flex;flex-direction:column;gap:14px;position:relative;z-index:1}
.login-title{font-size:22px;font-weight:800;color:var(--text-bright);letter-spacing:8px;text-align:center}
.login-sub{font-size:12px;color:var(--text-dim);letter-spacing:3px;text-align:center;margin-top:-8px}
.login-input{height:46px;background:var(--bg-deep);border:1px solid var(--border);border-radius:8px;color:var(--text-bright);font-size:15px;padding:0 16px;letter-spacing:1px;outline:none;transition:all .2s}
.login-input:focus{border-color:var(--accent);box-shadow:0 0 14px rgba(232,148,58,.3)}
.login-btn{height:48px;background:linear-gradient(135deg,var(--accent),#c47a25);color:#000;border:none;font-size:16px;font-weight:800;letter-spacing:6px;cursor:pointer;clip-path:polygon(12px 0,100% 0,calc(100% - 12px) 100%,0 100%);transition:all .15s}
.login-btn:hover{transform:scale(1.03);box-shadow:0 0 30px rgba(232,148,58,.45)}
.login-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.login-switch{font-size:13px;color:var(--info);text-align:center;cursor:pointer;letter-spacing:1px}
.login-switch:hover{color:var(--text-bright)}
.login-guest{font-size:12px;color:var(--text-dim);text-align:center;cursor:pointer;letter-spacing:2px;padding-top:8px;border-top:1px dashed var(--border)}
.login-guest:hover{color:var(--accent)}
.login-err{font-size:12px;color:var(--danger-bright);text-align:center;min-height:16px;letter-spacing:1px}
.login-userbar{display:flex;align-items:center;justify-content:space-between;background:var(--bg-card);border:1px solid var(--border);border-radius:8px;padding:10px 16px}
.login-userbar .lu-name{color:var(--accent);font-weight:700;letter-spacing:1px}
.login-userbar .lu-out{font-size:12px;color:var(--text-dim);cursor:pointer}
.login-userbar .lu-out:hover{color:var(--danger-bright)}
/* 登录失败抖动动画 */
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}
.login-card.shake{animation:shake .4s ease}
@media (max-width:640px){.login-card{padding:26px 20px}.login-input{height:48px;font-size:16px}}
/*End lansh*/

/*lansh: 联机大厅界面 */
#lobbyScreen{background:var(--bg-deep);padding:20px 36px;overflow:hidden}
.lobby-main{flex:1;display:flex;gap:26px;padding-top:16px;overflow:hidden}
.lobby-left{flex:1.4;display:flex;flex-direction:column;gap:10px;min-width:0}
.lobby-right{flex:1;display:flex;flex-direction:column;gap:10px;min-width:300px;overflow-y:auto}
.room-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding-right:4px}
.room-card{background:var(--bg-card);border:1px solid var(--border);border-radius:10px;padding:14px 18px;display:flex;align-items:center;gap:16px;cursor:pointer;transition:all .18s}
.room-card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 4px 20px rgba(0,0,0,.4)}
.room-card.full{opacity:.45;cursor:not-allowed}
.room-card .rc-icon{font-size:30px}
.room-card .rc-info{flex:1;min-width:0}
.room-card .rc-name{font-size:14px;color:var(--text-bright);font-weight:700;letter-spacing:1px}
.room-card .rc-sub{font-size:11px;color:var(--text-dim);margin-top:3px;letter-spacing:1px}
.room-card .rc-badge{font-size:11px;font-weight:700;padding:4px 12px;border-radius:4px;letter-spacing:1px}
.room-card .rc-badge.pve{color:var(--success);border:1px solid var(--success)}
.room-card .rc-badge.pvp{color:var(--danger-bright);border:1px solid var(--danger)}
.room-card .rc-count{font-size:16px;color:var(--accent);font-weight:800;letter-spacing:1px}
.room-empty{padding:60px 20px;text-align:center;color:var(--text-dim);font-size:13px;letter-spacing:2px;border:1px dashed var(--border);border-radius:10px}
/* 创建面板 */
.create-panel{background:var(--bg-card);border:1px solid var(--border);border-radius:10px;padding:16px;display:flex;flex-direction:column;gap:10px}
.cp-label{font-size:11px;color:var(--text-dim);letter-spacing:3px}
.cp-types{display:flex;gap:8px}
.cp-type{flex:1;background:var(--bg-deep);border:2px solid var(--border);border-radius:8px;padding:10px 6px;text-align:center;cursor:pointer;transition:all .15s}
.cp-type .ct-name{font-size:13px;color:var(--text-bright);font-weight:700;letter-spacing:1px}
.cp-type .ct-desc{font-size:10px;color:var(--text-dim);margin-top:4px}
.cp-type.sel{border-color:var(--accent);background:rgba(232,148,58,.08);box-shadow:0 0 14px rgba(232,148,58,.2)}
.cp-modes{display:flex;gap:6px;flex-wrap:wrap}
.cp-mode{background:var(--bg-deep);border:1px solid var(--border);border-radius:6px;padding:7px 12px;font-size:12px;color:var(--text-dim);cursor:pointer;letter-spacing:1px;transition:all .15s}
.cp-mode.sel{border-color:var(--accent);color:var(--accent)}
.cp-maps{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.cp-map{background:var(--bg-deep);border:2px solid var(--border);border-radius:8px;padding:10px 4px;text-align:center;cursor:pointer;transition:all .15s}
.cp-map .cm-icon{font-size:22px}
.cp-map .cm-name{font-size:10px;color:var(--text-dim);margin-top:4px;letter-spacing:1px}
.cp-map.sel{border-color:var(--accent);background:rgba(232,148,58,.08)}
/*End lansh*/

/*lansh: ============ 移动端触控层 ============ */
/* 默认隐藏: 仅触屏设备 (body.touch-mode) 且战斗界面激活时显示 */
#touchUI{display:none}
body.touch-mode #gameScreen.active #touchUI{display:block}
body.touch-mode #gameScreen{touch-action:none}

/* 左下: 虚拟摇杆热区 (浮动摇杆, 按下位置即底座中心) */
#stickZone{position:absolute;left:0;bottom:0;width:46%;height:62%;z-index:16;touch-action:none}
#stickBase{position:absolute;width:124px;height:124px;border-radius:50%;background:rgba(10,12,16,.4);border:2px solid rgba(232,148,58,.4);transform:translate(-50%,-50%);display:none;pointer-events:none}
#stickBase.on{display:block}
#stickNub{position:absolute;left:50%;top:50%;width:56px;height:56px;border-radius:50%;background:radial-gradient(circle at 35% 35%,rgba(232,148,58,.55),rgba(196,122,37,.35));border:2px solid var(--accent);transform:translate(-50%,-50%);box-shadow:0 0 18px rgba(232,148,58,.35)}
#stickBase.sprint #stickNub{border-color:#fff;box-shadow:0 0 26px rgba(232,148,58,.8)}

/* 战斗按钮通用: 圆形大触控热区, 半透明军事风 */
.tbtn{position:absolute;z-index:17;width:56px;height:56px;border-radius:50%;background:rgba(10,12,16,.55);border:2px solid rgba(232,148,58,.45);color:var(--text-bright);font-size:13px;font-weight:700;letter-spacing:1px;backdrop-filter:blur(4px);touch-action:none;user-select:none;-webkit-user-select:none;display:flex;align-items:center;justify-content:center;padding:0;transition:transform .1s,box-shadow .15s,border-color .15s}
.tbtn:active,.tbtn.on{border-color:var(--accent);box-shadow:0 0 22px rgba(232,148,58,.55)}
.tbtn:active{transform:scale(.92)}
.tbtn.on{background:rgba(232,148,58,.3)}

/* 开火主按钮: 右下 82px 红色系 */
#tbtnFire{right:calc(26px + env(safe-area-inset-right));bottom:calc(34px + env(safe-area-inset-bottom));width:82px;height:82px;font-size:16px;background:rgba(217,68,58,.28);border-color:rgba(217,68,58,.7)}
#tbtnFire:active{box-shadow:0 0 30px rgba(217,68,58,.8)}

/* 功能按钮组: 射击键左侧弧形排列 */
#tbtnJump{right:calc(126px + env(safe-area-inset-right));bottom:calc(30px + env(safe-area-inset-bottom))}
#tbtnReload{right:calc(152px + env(safe-area-inset-right));bottom:calc(100px + env(safe-area-inset-bottom))}
#tbtnAds{right:calc(96px + env(safe-area-inset-right));bottom:calc(158px + env(safe-area-inset-bottom))}
#tbtnCrouch{right:calc(26px + env(safe-area-inset-right));bottom:calc(140px + env(safe-area-inset-bottom))}
#tbtnWeapon{right:calc(30px + env(safe-area-inset-right));bottom:calc(216px + env(safe-area-inset-bottom));width:50px;height:50px;font-size:12px}

/* 暂停: 顶部中央小按钮 */
#tbtnPause{top:calc(14px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);width:44px;height:44px;font-size:13px;letter-spacing:0}
#tbtnPause:active{transform:translateX(-50%) scale(.92)}

/* 触屏 HUD 自适应: 隐藏键鼠提示, 压缩底部武器栏与小地图, 药品键位提示隐藏 */
body.touch-mode .control-hints{display:none}
body.touch-mode .med-key{display:none}
body.touch-mode .hud-bottom{transform:translateX(-50%) scale(.72);transform-origin:bottom center;bottom:calc(8px + env(safe-area-inset-bottom))}
body.touch-mode .hud-topright{top:calc(8px + env(safe-area-inset-top));right:calc(8px + env(safe-area-inset-right));gap:6px}
body.touch-mode #minimap{width:96px;height:96px}
body.touch-mode .hud-topleft{top:calc(8px + env(safe-area-inset-top));left:calc(10px + env(safe-area-inset-left))}
body.touch-mode .hud-bottomright{bottom:calc(8px + env(safe-area-inset-bottom));right:calc(226px + env(safe-area-inset-right));padding:6px 10px;gap:5px;font-size:11px}
body.touch-mode .wave-display{top:calc(64px + env(safe-area-inset-top));font-size:12px;padding:6px 16px}
/*End lansh*/

/*lansh: 房间准备界面 */
#roomScreen{background:var(--bg-deep);padding:20px 36px}
.room-main{flex:1;display:flex;flex-direction:column;align-items:center;gap:22px;padding-top:24px}
.room-mapinfo{display:flex;align-items:center;gap:16px;background:var(--bg-card);border:1px solid var(--border);border-radius:10px;padding:14px 30px}
.room-mapinfo .rm-icon{font-size:38px}
.room-mapinfo .rm-name{font-size:20px;font-weight:800;color:var(--text-bright);letter-spacing:4px}
.room-mapinfo .rm-sub{font-size:12px;color:var(--accent);letter-spacing:2px;margin-top:3px}
.room-mapinfo .rm-edit{background:var(--bg-deep);border:1px solid var(--border);color:var(--text-dim);padding:6px 14px;font-size:11px;cursor:pointer;border-radius:4px;letter-spacing:1px}
.room-mapinfo .rm-edit:hover{border-color:var(--accent);color:var(--accent)}
.room-slots{display:grid;grid-template-columns:repeat(2,minmax(240px,300px));gap:14px}
.room-slot{background:var(--bg-card);border:2px solid var(--border);border-radius:12px;padding:18px 22px;display:flex;align-items:center;gap:14px;min-height:76px;transition:all .2s}
.room-slot.empty{border-style:dashed;opacity:.5;justify-content:center;color:var(--text-dim);font-size:13px;letter-spacing:2px}
.room-slot .rs-avatar{width:46px;height:46px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:24px;background:var(--bg-deep);border:1px solid var(--border-light)}
.room-slot .rs-info{flex:1;min-width:0}
.room-slot .rs-name{font-size:14px;color:var(--text-bright);font-weight:700;letter-spacing:1px}
.room-slot .rs-state{font-size:11px;margin-top:4px;letter-spacing:2px;color:var(--text-dim)}
.room-slot .rs-state.ready{color:var(--success)}
.room-slot .rs-state.bot{color:var(--info)}
.room-slot.team-red{border-color:rgba(217,68,58,.5)}
.room-slot.team-blue{border-color:rgba(74,144,217,.5)}
.room-slot.me{border-color:var(--accent);box-shadow:0 0 18px rgba(232,148,58,.25)}
.room-slot .rs-owner{font-size:10px;color:var(--gold);letter-spacing:1px}
.room-btns{display:flex;gap:18px;margin-top:6px}
@media (max-width:720px){
  .lobby-main{flex-direction:column;overflow-y:auto}
  .room-slots{grid-template-columns:1fr;width:100%}
  #lobbyScreen,#roomScreen{padding:14px 16px;overflow-y:auto}
}
/*End lansh*/