/* ============================================================
   摸金小队 v2 — 和平精英风格 UI
   主题：暗色军旅 + 金色高亮
   ============================================================ */

* { margin:0; padding:0; box-sizing:border-box; }

:root {
  --bg-dark: #0a0e14;
  --bg-panel: rgba(10,14,24,0.92);
  --bg-card: rgba(20,26,38,0.88);
  --gold: #d4a843;
  --gold-light: #f0cc6a;
  --gold-dark: #a07820;
  --orange: #e86830;
  --red: #e03040;
  --green: #3cd070;
  --blue: #3a8fd4;
  --white: #e8e8e0;
  --gray: #7a8899;
  --gray-dark: #3a4455;
  --border: rgba(180,160,120,0.2);
  --font: 'Rajdhani', 'Microsoft YaHei', sans-serif;
  --radius: 6px;
  --shadow: 0 4px 24px rgba(0,0,0,0.5);
  --glow-gold: 0 0 12px rgba(212,168,67,0.4);
}

body {
  overflow:hidden; background:#000;
  font-family:var(--font); user-select:none;
  color:var(--white);
}

#gameCanvas { display:block; position:fixed; inset:0; width:100%; height:100%; }

/* ====== 主菜单（紧凑 PE 大厅风格） ====== */
#mainMenu {
  position:fixed; inset:0; z-index:100;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background: radial-gradient(ellipse at center, rgba(20,30,50,0.95) 0%, rgba(0,0,0,0.98) 100%);
  padding:16px; overflow-y:auto;
}
#mainMenu::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.02'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
#mainMenu h1 {
  font-size:36px; font-weight:700; letter-spacing:6px;
  background: linear-gradient(180deg, var(--gold-light) 0%, var(--gold) 50%, var(--gold-dark) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
  margin:0 0 2px; position:relative; z-index:1;
}
#mainMenu .subtitle {
  font-size:11px; color:var(--gray); letter-spacing:2px;
  margin-bottom:10px; position:relative; z-index:1;
  text-transform:uppercase;
}
#mainMenu .menu-shell {
  position:relative; z-index:1; width:min(420px, 96vw);
  display:flex; flex-direction:column; align-items:stretch; gap:8px;
}
#mainMenu .menu-row {
  display:grid; grid-template-columns:1fr 1fr; gap:8px;
}
#mainMenu .menu-row .menu-btn { width:100%; margin:0; }
#mainMenu .menu-primary { width:100%; margin:0; }
#mainMenu .user-bar {
  display:flex; align-items:center; justify-content:space-between;
  padding:6px 10px; background:rgba(0,0,0,0.35); border:1px solid var(--border);
  border-radius:8px; font-size:13px; margin:0;
}
#mainBalanceBar {
  margin:0 !important; padding:6px 12px !important; border-radius:8px !important;
  display:flex; align-items:center; justify-content:space-between;
}
#mainBalanceBar #mainBalance { font-size:16px !important; }
#teamAvatarBar {
  display:flex; gap:8px; justify-content:center; flex-wrap:wrap;
  min-height:0; padding:4px 0;
}
.team-avatar-slot {
  width:64px; display:flex; flex-direction:column; align-items:center; gap:3px;
}
.team-avatar-face {
  width:48px; height:48px; border-radius:50%;
  border:2px solid rgba(212,168,67,0.55);
  display:flex; align-items:center; justify-content:center;
  font-size:22px; position:relative;
  box-shadow:0 0 10px rgba(212,168,67,0.18);
}
.team-avatar-face.leader { border-color:#6ab4ff; box-shadow:0 0 10px rgba(106,180,255,0.35); }
.team-avatar-face.ready::after {
  content:'✓'; position:absolute; right:-2px; bottom:-2px;
  width:16px; height:16px; border-radius:50%; background:#2a8a44; color:#fff;
  font-size:10px; line-height:16px; text-align:center; border:1px solid #88cc66;
}
.team-avatar-name {
  font-size:10px; color:#c8d0d8; max-width:64px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  text-align:center;
}
.team-avatar-tag { font-size:9px; color:#6ab4ff; }
.menu-meta {
  display:flex; flex-wrap:wrap; gap:6px 12px; justify-content:center;
  font-size:11px; color:#7a8899; margin-top:2px;
}
.menu-hint {
  font-size:10px; color:#5a6a7a; line-height:1.45; text-align:center;
  max-width:400px; margin:0 auto;
}
.menu-version { font-size:10px; color:#555; text-align:center; margin-top:2px; }

/* 组队邀请弹窗 */
#teamInvitePopup {
  display:none; position:fixed; inset:0; z-index:400;
  background:rgba(5,8,15,0.72); align-items:center; justify-content:center;
  padding:16px; box-sizing:border-box;
}
#teamInvitePopup.show { display:flex; }
.team-invite-card {
  width:min(360px, 94vw); background:linear-gradient(165deg,#141c28,#1a2434);
  border:1px solid rgba(212,168,67,0.4); border-radius:12px;
  padding:22px 20px; box-shadow:0 16px 48px rgba(0,0,0,0.55);
  text-align:center;
}
.team-invite-card h3 { margin:0 0 8px; color:#d4a843; font-size:18px; letter-spacing:1px; }
.team-invite-card p { margin:0 0 14px; color:#aab4c0; font-size:13px; line-height:1.5; }
.team-invite-avatar {
  width:64px; height:64px; border-radius:50%; margin:0 auto 12px;
  border:2px solid #d4a843; display:flex; align-items:center; justify-content:center; font-size:28px;
}
.team-invite-actions { display:flex; gap:10px; }
.team-invite-actions .menu-btn { flex:1; margin:0; width:auto; padding:10px 0; font-size:14px; }

/* 准备室（选地图后） */
#readyRoomBar {
  display:none; width:100%; max-width:900px; margin:0 0 12px;
  background:rgba(12,18,28,0.92); border:1px solid rgba(106,180,255,0.28);
  border-radius:10px; padding:12px 14px; box-sizing:border-box;
}
#readyRoomBar .ready-head {
  display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap;
  margin-bottom:10px; font-size:13px; color:#b8c4d0;
}
#readyMembers { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
#readyActions { display:flex; gap:8px; justify-content:center; margin-top:12px; flex-wrap:wrap; }
#readyActions .menu-btn { width:auto; min-width:120px; margin:0; padding:10px 16px; font-size:14px; }

/* ====== 按钮 ====== */
.menu-btn {
  width:300px; padding:11px 0; margin:6px 0;
  font-family:var(--font); font-size:15px; font-weight:600; letter-spacing:1px;
  border:1px solid var(--gold-dark); background:rgba(212,168,67,0.06);
  color:var(--gold); cursor:pointer; border-radius:var(--radius);
  transition:all 0.2s; position:relative; z-index:1;
  text-transform:none;
}
.menu-btn:hover {
  background:rgba(212,168,67,0.15);
  border-color:var(--gold);
  box-shadow:var(--glow-gold);
  transform:translateY(-1px);
}
.menu-btn.secondary {
  border-color:var(--gray-dark); color:var(--gray);
  background:rgba(255,255,255,0.03);
}
.menu-btn.secondary:hover {
  border-color:var(--gray); color:var(--white);
  box-shadow:0 0 8px rgba(255,255,255,0.08);
}
.menu-btn:disabled, .menu-btn.disabled {
  opacity:0.45; cursor:not-allowed; transform:none !important; box-shadow:none !important;
}

/* ====== 设置面板 ====== */
#settingsPanel {
  position:fixed; inset:0; z-index:110;
  display:none; background:var(--bg-panel);
  flex-direction:column; align-items:center; justify-content:center;
}
#settingsPanel.active { display:flex; }
#settingsPanel h2 {
  font-size:28px; font-weight:600; letter-spacing:3px;
  color:var(--gold); margin-bottom:35px;
  text-transform:uppercase;
}
.setting-row {
  display:flex; align-items:center; justify-content:space-between;
  width:420px; padding:12px 0;
  border-bottom:1px solid rgba(255,255,255,0.04);
}
.setting-row label {
  color:var(--gray); font-size:15px; font-weight:500; letter-spacing:1px;
  text-transform:uppercase; width:110px;
}
.setting-row select, .setting-row input {
  padding:8px 14px; font-size:14px; font-family:var(--font);
  background:rgba(0,0,0,0.5); color:var(--white);
  border:1px solid var(--gray-dark); border-radius:4px;
  width:170px; outline:none; cursor:pointer;
}
.setting-row select:focus, .setting-row input:focus {
  border-color:var(--gold);
}
.setting-row input[type="range"] {
  -webkit-appearance:none; appearance:none; width:130px; height:4px;
  background:var(--gray-dark); border:none; border-radius:2px; padding:0;
}
.setting-row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance:none; appearance:none; width:18px; height:18px;
  background:var(--gold); border-radius:50%; cursor:pointer;
}
.setting-row input[type="range"]::-webkit-slider-thumb:hover { background:var(--gold-light); }
.fps-display {
  color:var(--gold); font-weight:700; font-size:15px; width:50px; text-align:right;
}

/* ====== 模式选择 ====== */
#modeSelect {
  position:fixed; inset:0; z-index:105;
  display:none; background:var(--bg-panel);
  flex-direction:column; align-items:center; justify-content:center;
}
#modeSelect.active { display:flex; }
#modeSelect h2 {
  font-size:28px; font-weight:600; letter-spacing:3px;
  color:var(--gold); margin-bottom:35px; text-transform:uppercase;
}
.mode-card {
  width:360px; padding:24px; margin:8px 0;
  border:1px solid var(--gray-dark); border-radius:8px;
  cursor:pointer; transition:all 0.25s; text-align:center;
  background:rgba(255,255,255,0.02);
  position:relative; overflow:hidden;
}
.mode-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity:0; transition:opacity 0.25s;
}
.mode-card:hover { border-color:var(--gold); background:rgba(212,168,67,0.06); transform:translateY(-2px); }
.mode-card:hover::before { opacity:1; }
.mode-card h3 { font-size:22px; color:var(--gold); margin-bottom:6px; font-weight:600; letter-spacing:2px; }
.mode-card p { font-size:13px; color:var(--gray); }

/* ====== HUD ====== */
#hud {
  position:fixed; inset:0; z-index:50; pointer-events:none; display:none;
}
#hud.active { display:block; }

/* ---- 准星 ---- */
#crosshair {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:24px; height:24px; opacity:0.7;
}
#crosshair::before, #crosshair::after {
  content:''; position:absolute; background:rgba(255,255,255,0.85);
}
#crosshair::before { width:2px; height:16px; left:11px; top:4px; }
#crosshair::after { width:16px; height:2px; left:4px; top:11px; }

/* ---- 小地图 ---- */
.minimap {
  position:absolute; top:16px; right:16px;
  width:140px; height:140px;
  background:rgba(0,0,0,0.55); border:2px solid rgba(180,160,120,0.3);
  border-radius:8px; overflow:hidden;
}
.minimap canvas { width:100%; height:100%; }

/* ---- 击杀播报 ---- */
.kill-feed {
  position:absolute; top:16px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; gap:4px;
  align-items:center; pointer-events:none;
}
.kill-msg {
  padding:6px 16px; background:rgba(0,0,0,0.7);
  border-left:2px solid var(--orange); border-radius:3px;
  font-size:12px; color:var(--white); animation:killFade 3s forwards;
  letter-spacing:1px;
}
@keyframes killFade { 0%{opacity:1;transform:translateY(0)} 70%{opacity:0.8} 100%{opacity:0;transform:translateY(-10px)} }

/* ---- 队友 HUD ---- */
.team-hud-slot {
  display:flex; flex-wrap:wrap; align-items:center;
  gap:4px 8px; padding:4px 8px; margin-bottom:4px;
  background:rgba(10,14,24,0.85); border:1px solid rgba(180,160,120,0.25);
  border-radius:4px; font-family:var(--font); font-size:12px;
}
.team-hud-num {
  display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px; border-radius:50%;
  background:rgba(212,168,67,0.2); color:var(--gold);
  font-weight:700; font-size:12px; line-height:1;
}
.team-hud-name {
  color:var(--white); font-weight:600; flex:1; min-width:60px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.team-hud-hp {
  color:var(--gray); font-size:11px; min-width:30px; text-align:right;
}
.team-hud-bar {
  width:100%; height:3px; background:rgba(255,255,255,0.08);
  border-radius:2px; overflow:hidden;
}
.team-hud-fill {
  height:100%; border-radius:2px; transition:width 0.3s;
}

/* ---- 底部武器栏 ---- */
#weaponBar {
  position:absolute; bottom:24px; left:50%; transform:translateX(-50%);
  display:flex; gap:8px; align-items:center;
  background:rgba(0,0,0,0.65); border:1px solid rgba(255,255,255,0.1);
  border-radius:8px; padding:6px 12px;
}
.weapon-slot {
  width:48px; height:48px; border-radius:4px; border:1px solid rgba(255,255,255,0.1);
  position:relative; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,0.5);
  transition:all 0.15s;
}
.weapon-slot.active { border-color:var(--gold); background:rgba(212,168,67,0.1); }
.weapon-slot .slot-key {
  position:absolute; bottom:2px; right:4px;
  font-size:10px; color:var(--gray); font-weight:600;
}
.weapon-slot .slot-icon {
  font-size:20px; color:var(--white); letter-spacing:0;
}

/* ---- 弹药显示 ---- */
.ammo-display {
  position:absolute; bottom:30px; right:180px;
  font-size:38px; font-weight:700; color:var(--white);
  text-shadow:0 2px 6px rgba(0,0,0,0.8);
  letter-spacing:2px;
  font-variant-numeric:tabular-nums;
}

/* ---- 武器名 ---- */
.weapon-name {
  position:absolute; bottom:72px; right:180px;
  font-size:13px; font-weight:600; color:var(--gray);
  text-transform:uppercase; letter-spacing:2px;
}

/* ---- 血条 ---- */
#healthContainer {
  position:absolute; bottom:30px; left:24px;
  display:flex; flex-direction:column; gap:4px;
}
.health-bar {
  width:220px; height:8px; background:rgba(0,0,0,0.5);
  border-radius:4px; overflow:hidden; border:1px solid rgba(255,255,255,0.08);
}
.health-fill {
  height:100%; border-radius:3px; transition:width 0.3s;
  background:linear-gradient(90deg, var(--red), var(--orange));
}
.health-label {
  font-size:11px; color:var(--gray); letter-spacing:1px;
  display:flex; justify-content:space-between;
}
.health-label .hp-value { color:var(--white); font-weight:600; }

/* ---- 护甲条 ---- */
.armor-bar {
  width:220px; height:6px; background:rgba(0,0,0,0.5);
  border-radius:3px; overflow:hidden; border:1px solid rgba(255,255,255,0.06);
}
.armor-fill {
  height:100%; border-radius:2px; transition:width 0.3s;
  background:linear-gradient(90deg, var(--blue), #5ab8f0);
}

/* ---- 辐射倒计时 ---- */
#radiationHUD {
  position:absolute; top:56px; left:50%; transform:translateX(-50%);
  font-size:16px; font-weight:600; letter-spacing:1px;
  text-shadow:0 0 8px rgba(0,0,0,0.8);
}
#radiationHUD.danger { color:var(--red); animation:radPulse 0.5s infinite; }
@keyframes radPulse { 0%,100%{opacity:1} 50%{opacity:0.5} }

/* ---- 撤离提示 ---- */
#extractionPrompt {
  position:absolute; top:50%; left:50%; transform:translate(-50%,20px);
  font-size:16px; font-weight:600; color:var(--green);
  text-shadow:0 0 12px rgba(0,0,0,0.9);
  text-align:center; letter-spacing:1px;
}

/* ---- 急救包 HUD ---- */
#medkitHUD {
  position:absolute; top:80px; right:20px;
  background:rgba(10,14,24,0.85); border:1px solid rgba(200,60,60,0.4);
  border-radius:6px; padding:6px 14px;
  font-size:15px; color:#f08080; letter-spacing:1px;
  text-shadow:0 0 6px rgba(200,60,60,0.5);
  display:flex; align-items:center; gap:8px;
}
#medkitCount {
  font-size:18px; font-weight:700; color:#fff;
  background:rgba(200,60,60,0.3); padding:2px 10px; border-radius:4px;
}

/* ---- 互动提示 ---- */
.prompt {
  position:absolute; bottom:100px; left:50%; transform:translateX(-50%);
  font-size:14px; font-weight:600; color:var(--gold-light);
  text-shadow:0 0 10px rgba(0,0,0,0.8);
  animation:promptPulse 1.5s infinite; letter-spacing:1px;
}
@keyframes promptPulse { 0%,100%{opacity:1} 50%{opacity:0.5} }

/* ---- FPS 计数器 ---- */
.fps-counter {
  position:absolute; top:16px; left:50%; transform:translateX(-50%);
  font-size:11px; font-weight:600; color:var(--gold);
  letter-spacing:1px; background:rgba(0,0,0,0.5);
  padding:2px 10px; border-radius:3px;
}

/* ---- 服务器信息 ---- */
.server-info {
  position:absolute; top:16px; left:16px;
  font-size:11px; color:var(--gray); letter-spacing:1px;
}

/* ====== 死亡画面 ====== */
#deathScreen {
  position:fixed; inset:0; z-index:120;
  display:none; background:rgba(8,4,4,0.92);
  flex-direction:column; align-items:center; justify-content:center;
}
#deathScreen.active { display:flex; }
#deathScreen h2 {
  font-size:42px; font-weight:700; color:var(--red);
  letter-spacing:6px; margin-bottom:24px; text-transform:uppercase;
}
#deathScreen .stats {
  font-size:15px; color:var(--gray); margin-bottom:35px;
  text-align:center; line-height:2.2; letter-spacing:1px;
}
#deathScreen .stats span { color:var(--gold); font-weight:600; }

/* ====== 聊天 ====== */
.chat-messages {
  position:fixed; bottom:100px; left:50%; transform:translateX(-50%);
  max-height:200px; overflow-y:auto; font-size:13px; color:rgba(255,255,255,0.7);
  display:flex; flex-direction:column; gap:2px; z-index:60;
  pointer-events:none; width:420px;
}
.chat-msg {
  animation:chatFade 5s forwards; padding:2px 10px;
  background:rgba(0,0,0,0.5); border-radius:3px;
  letter-spacing:0.5px;
}
@keyframes chatFade { 0%{opacity:1} 80%{opacity:1} 100%{opacity:0} }

#chat {
  position:fixed; bottom:36px; left:50%; transform:translateX(-50%);
  z-index:60; display:none; pointer-events:all;
}
#chat.active { display:flex; }
#chat input {
  width:340px; padding:10px 16px; font-size:14px; font-family:var(--font);
  background:rgba(0,0,0,0.7); color:var(--white);
  border:1px solid var(--gray-dark); border-radius:4px;
  outline:none; letter-spacing:0.5px;
}
#chat input:focus { border-color:var(--gold); }

/* ====== 瞄准镜叠加层 ====== */
#scopeOverlay { position:fixed; inset:0; z-index:55; pointer-events:none; }

/* ====== 仓库面板 ====== */
#warehousePanel {
  position:fixed; inset:0; z-index:110;
  display:none; background:var(--bg-panel);
  flex-direction:column; align-items:center;
  padding:30px 20px; overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
#warehousePanel.active { display:flex; }
#warehousePanel h2 {
  font-size:28px; font-weight:600; letter-spacing:3px;
  color:var(--gold); margin-bottom:20px;
  text-transform:uppercase;
}

/* 仓库装备区（独立全屏面板，必须可滚动；body 为 overflow:hidden） */
#warehouseEquipmentPanel {
  position:fixed; inset:0; z-index:120;
  display:none; background:var(--bg-panel);
  flex-direction:column; align-items:center;
  padding:30px 20px 60px;
  overflow-y:auto; overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  box-sizing:border-box;
}
#warehouseEquipmentPanel.active { display:flex; }
#warehouseEquipmentPanel h2 {
  font-size:28px; font-weight:600; letter-spacing:3px;
  color:var(--gold); margin-bottom:20px;
  text-transform:uppercase;
  flex-shrink:0;
}
#warehouseEquipmentPanel > div {
  width:100%; max-width:640px;
  padding-bottom:40px;
}
#warehouseEquipmentPanel .wh-eq-btn {
  background:rgba(212,168,67,0.15);
  border:1px solid rgba(212,168,67,0.4);
  color:#d4a843; padding:4px 12px; border-radius:4px;
  cursor:pointer; font-size:12px; font-family:var(--font);
  pointer-events:auto; touch-action:manipulation;
}
#warehouseEquipmentPanel .wh-eq-btn:hover {
  background:rgba(212,168,67,0.28);
}
#warehouseEquipmentPanel .wh-eq-btn.switch {
  background:rgba(58,143,212,0.15);
  border-color:rgba(58,143,212,0.45);
  color:#6ab0e8;
}
#warehouseEquipmentPanel .wh-eq-btn-off {
  background:rgba(255,80,80,0.15);
  border:1px solid rgba(255,80,80,0.3);
  color:#ff8080; padding:3px 10px; border-radius:4px;
  cursor:pointer; font-size:12px; font-family:var(--font);
  pointer-events:auto; touch-action:manipulation;
}
.wh-balance-bar {
  display:flex; align-items:center; gap:4px;
  padding:12px 24px; margin-bottom:20px;
  background:rgba(212,168,67,0.08); border:1px solid rgba(212,168,67,0.2);
  border-radius:8px; font-size:14px;
}
.wh-filters {
  display:flex; gap:8px; margin-bottom:20px; flex-wrap:wrap; justify-content:center;
}
.wh-filter-btn {
  padding:6px 18px; font-size:13px; font-family:var(--font);
  background:rgba(255,255,255,0.04); color:var(--gray);
  border:1px solid var(--gray-dark); border-radius:4px;
  cursor:pointer; transition:all 0.2s; letter-spacing:1px;
}
.wh-filter-btn:hover { color:var(--white); border-color:var(--gray); }
.wh-filter-btn.active {
  background:rgba(212,168,67,0.15); color:var(--gold);
  border-color:var(--gold); box-shadow:var(--glow-gold);
}
.wh-grid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
  gap:12px; width:100%; max-width:900px; margin-bottom:20px;
}
.wh-item {
  padding:14px; border-radius:8px; border:1px solid;
  display:flex; flex-direction:column; gap:6px; text-align:center;
  transition:transform 0.2s; position:relative;
}
.wh-item:hover { transform:translateY(-2px); }
.wh-item-icon { font-size:32px; line-height:1; margin-bottom:4px; }
.wh-item-name { font-size:14px; font-weight:600; color:var(--white); }
.wh-item-tier { font-size:12px; font-weight:600; letter-spacing:0.5px; }
.wh-item-tag { font-size:11px; font-weight:600; margin-top:2px; }
.wh-item-btns {
  display:flex; gap:6px; margin-top:8px;
}
.wh-btn {
  flex:1; padding:6px 8px; font-size:12px; font-family:var(--font);
  border:1px solid; border-radius:4px; cursor:pointer;
  transition:all 0.15s; letter-spacing:0.5px;
}
.wh-btn-sell {
  background:rgba(80,160,80,0.15); color:#6abc6a;
  border-color:rgba(80,160,80,0.4);
}
.wh-btn-sell:hover { background:rgba(80,160,80,0.3); }
.wh-btn-keep {
  background:rgba(212,168,67,0.1); color:var(--gold);
  border-color:rgba(212,168,67,0.3);
}
.wh-btn-keep:hover { background:rgba(212,168,67,0.25); }
.wh-btn-unkeep {
  background:rgba(120,120,120,0.1); color:var(--gray);
  border-color:rgba(120,120,120,0.3);
}
.wh-btn-unkeep:hover { background:rgba(120,120,120,0.2); }

/* ====== 装备区 ====== */
#equipmentPanel {
  position:fixed; inset:0; z-index:60; display:none;
  background:rgba(5,8,15,0.97);
  flex-direction:column; align-items:center;
  padding:40px 20px; overflow-y:auto;
}
#equipmentPanel.active { display:flex; }
#equipmentPanel h2 {
  color:var(--gold); font-size:28px; letter-spacing:6px;
  text-transform:uppercase; margin-bottom:8px;
  text-shadow:0 0 20px rgba(212,168,67,0.3);
}
.eq-balance-bar {
  display:flex; align-items:center; gap:4px;
  padding:10px 28px; margin-bottom:24px;
  background:rgba(212,168,67,0.08); border:1px solid rgba(212,168,67,0.2);
  border-radius:8px; font-size:15px;
}
.eq-section {
  width:100%; max-width:640px; margin-bottom:24px;
  padding:16px 20px; border-radius:8px;
  background:rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.06);
}
.eq-section h3 { color:var(--gold); font-size:16px; margin-bottom:2px; letter-spacing:2px; }
.eq-grid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));
  gap:8px;
}
.eq-card {
  background:rgba(20,26,38,0.8); border:1px solid rgba(255,255,255,0.08);
  border-radius:6px; padding:10px; text-align:center; cursor:pointer;
  transition:all 0.2s; position:relative;
}
.eq-card:hover { border-color:var(--gold); background:rgba(212,168,67,0.06); }
.eq-card.selected { border-color:var(--gold); border-width:2px; box-shadow:0 0 10px rgba(212,168,67,0.25); }
.eq-card.owned { border-color:rgba(60,208,112,0.3); background:rgba(60,208,112,0.05); }
.eq-card .eq-icon { font-size:24px; margin-bottom:4px; }
.eq-card .eq-name { color:var(--white); font-size:13px; font-weight:600; }
.eq-card .eq-desc { color:var(--gray); font-size:11px; margin:3px 0; }
.eq-card .eq-price { color:var(--gold); font-size:12px; font-weight:600; }
.eq-card .eq-reduction { color:var(--green); font-size:11px; }
.eq-card .eq-owned-tag {
  position:absolute; top:4px; right:6px; font-size:10px;
  color:var(--green); font-weight:700;
}

/* 变卖物品级边框 */
.loot-item.loot-gold { border-width:2px; box-shadow:0 0 12px rgba(212,168,67,0.3); }
.loot-item.loot-red { border-width:2px; box-shadow:0 0 8px rgba(204,51,51,0.2); }
.loot-item.loot-purple { border-width:1px; }

/* 背包等级边框 */
.bp-slot.bp-gold { border-width:2px; }
.bp-slot.bp-red { border-width:2px; }
.bp-slot.bp-purple { border-width:1px; }

/* ====== 响应式 ====== */
@media (max-width:768px) {
  #mainMenu h1 { font-size:36px; letter-spacing:4px; }
  .menu-btn { width:240px; font-size:15px; }
  .setting-row { width:320px; }
  .mode-card { width:300px; }
  .ammo-display { font-size:28px; right:150px; }
}

/* ====== 手机触屏按钮 ====== */
.tbtn {
  position:absolute;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:600; text-align:center;
  border:2px solid; pointer-events:auto;
  user-select:none; -webkit-user-select:none;
  touch-action:none;
  backdrop-filter:blur(2px);
  text-shadow:0 1px 2px rgba(0,0,0,0.8);
  cursor:pointer;
}
.tbtn:active { transform:scale(0.9); opacity:0.8; }
.tbtn.active { opacity:0.5; border-color:#d4a843; }

/* ====== 登录界面 ====== */
#loginScreen {
  position:fixed; inset:0; z-index:500;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(ellipse at center, #0d1320 0%, #060810 100%);
}
.login-box {
  display:flex; flex-direction:column; align-items:center;
  padding:48px 56px; min-width:380px;
  background:rgba(15,20,32,0.95);
  border:1px solid rgba(212,168,67,0.25);
  border-radius:12px;
  box-shadow:0 8px 40px rgba(0,0,0,0.6), 0 0 60px rgba(212,168,67,0.05);
  position:relative; overflow:hidden;
}
.login-box::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
}
.login-box h1 {
  font-size:36px; color:var(--gold); letter-spacing:4px;
  text-shadow:0 0 20px rgba(212,168,67,0.3);
  margin-bottom:4px;
}
.login-box .subtitle {
  font-size:11px; color:var(--gray); letter-spacing:2px;
  text-transform:uppercase; margin-bottom:30px;
}
.login-tabs {
  display:flex; gap:0; margin-bottom:24px;
  border:1px solid rgba(212,168,67,0.2); border-radius:8px; overflow:hidden;
}
.login-tab {
  padding:8px 32px; border:none; background:none;
  color:var(--gray); font-size:14px; cursor:pointer;
  transition:all 0.2s; font-family:inherit;
}
.login-tab.active {
  background:rgba(212,168,67,0.15);
  color:var(--gold);
}
.login-box input {
  width:280px; padding:12px 16px; margin-bottom:14px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:8px; color:var(--white);
  font-size:15px; font-family:inherit;
  transition:border-color 0.2s;
}
.login-box input:focus {
  outline:none; border-color:var(--gold);
  background:rgba(255,255,255,0.06);
}
.login-box input::placeholder { color:#4a5260; }
.login-msg {
  min-height:20px; font-size:13px; margin-bottom:12px;
  text-align:center;
}
.login-msg.error { color:var(--red); }
.login-msg.success { color:var(--green); }
.login-msg.loading { color:var(--gray); }
.login-box .menu-btn { width:280px; margin-top:4px; }

/* 用户信息栏 */
.user-bar {
  display:flex; align-items:center; gap:12px;
  margin-top:6px; padding:6px 16px;
  background:rgba(255,255,255,0.03);
  border-radius:6px; font-size:13px;
  position:relative; z-index:2;
}
.user-label { color:var(--gray); }
/* 用户头像按钮 */
.user-avatar-btn {
  margin-left:auto; position:relative; z-index:2;
  cursor:pointer;
}
.user-avatar-face {
  width:36px; height:36px; border-radius:50%;
  border:2px solid rgba(212,168,67,0.4);
  display:flex; align-items:center; justify-content:center;
  font-size:18px; transition:all 0.2s;
  box-shadow:0 0 8px rgba(212,168,67,0.2);
}
.user-avatar-btn:hover .user-avatar-face {
  border-color:var(--gold); box-shadow:0 0 14px rgba(212,168,67,0.4);
}
/* 账号下拉菜单 */
.account-dropdown {
  position:absolute; top:48px; right:8px;
  background:rgba(14,18,28,0.96); border:1px solid rgba(180,160,120,0.3);
  border-radius:6px; padding:4px 0; min-width:140px;
  box-shadow:0 6px 24px rgba(0,0,0,0.6); z-index:100;
}
.account-drop-item {
  padding:9px 18px; font-size:13px; color:var(--white);
  cursor:pointer; transition:background 0.15s; font-family:var(--font);
}
.account-drop-item:hover {
  background:rgba(212,168,67,0.12);
}
.account-drop-danger {
  color:#e06060; border-top:1px solid rgba(255,255,255,0.06);
}
.account-drop-danger:hover {
  background:rgba(255,80,80,0.12);
}
/* ========== 皮肤选择 ========== */
.skin-card {
  position:relative;
  background:rgba(255,255,255,0.03);
  border:2px solid rgba(255,255,255,0.06);
  border-radius:10px;
  padding:12px 8px 8px;
  cursor:pointer;
  text-align:center;
  transition:all 0.2s;
}
.skin-card:hover {
  background:rgba(212,168,67,0.06);
  border-color:rgba(212,168,67,0.3);
  transform:translateY(-2px);
}
.skin-card.selected {
  border-color:var(--gold);
  background:rgba(212,168,67,0.1);
  box-shadow:0 0 16px rgba(212,168,67,0.2);
}
.skin-preview {
  width:100%; height:80px; border-radius:6px;
  margin-bottom:8px; position:relative; overflow:hidden;
}
.skin-preview::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:50%;
  background:linear-gradient(transparent, rgba(0,0,0,0.3));
}
.skin-icon { font-size:28px; margin-bottom:2px; }
.skin-name { color:#aab; font-size:12px; font-weight:600; }
.skin-check {
  position:absolute; top:6px; right:6px;
  width:22px; height:22px; border-radius:11px;
  background:var(--gold); color:#111;
  font-size:13px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}

/* ========================================
   手机端触屏点击优化（修复按钮要点好几次）
   ======================================== */

/* 所有按钮、卡片、可点击元素：禁用浏览器双击缩放延迟，允许 tap 高亮 */
button,
.menu-btn,
.mode-card,
.skin-card,
.map-card,
.wh-filter-btn,
.wh-item,
.bp-slot,
.login-tab,
.wh-equip-btn,
.tbtn,
.logout-btn,
.eq-item,
.wh-eq-row {
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(212,168,67,0.3);
  -webkit-touch-callout: none;
}

/* 链接、输入框也优化 */
a, input, select, label {
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(255,255,255,0.15);
}

/* 全局禁用文字选中（游戏界面不需要选中文字，避免长按弹出菜单） */
* {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* 但输入框允许选中 */
input, textarea {
  -webkit-user-select: text;
  user-select: text;
}

/* 按钮 active 反馈（手机按下时立即变色，反馈更快） */
button:active,
.menu-btn:active,
.mode-card:active,
.skin-card:active,
.map-card:active,
.wh-filter-btn:active,
.whItem:active,
.eq-item:active,
.wh-equip-btn:active {
  transform: scale(0.96);
  opacity: 0.85;
  transition: transform 0.05s, opacity 0.05s;
}

/* 手机端按钮加大可点击区域（44px 是苹果推荐的最小触控尺寸） */
@media (max-width: 900px) {
  .menu-btn {
    min-height: 48px;
    padding: 14px 0;
    font-size: 16px;
  }
  .login-tab {
    min-height: 44px;
    padding: 10px 24px;
  }
  .logout-btn {
    min-height: 44px;
    padding: 8px 16px;
  }
}



/* ====== 主页面大厅聊天 ====== */
#lobbyChatPanel {
  width: min(420px, 96vw);
  margin: 10px auto 0;
  background: rgba(8,12,20,0.92);
  border: 1px solid rgba(212,168,67,0.28);
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  z-index: 2;
}
.lobby-chat-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 12px; border-bottom:1px solid rgba(255,255,255,0.06);
}
.lobby-chat-title { color:#d4a843; font-size:13px; font-weight:700; }
.lobby-chat-sub { color:#7a8899; font-size:11px; }
.lobby-chat-messages {
  height: 160px; overflow-y:auto; padding:8px 10px;
  display:flex; flex-direction:column; gap:6px;
  background: rgba(0,0,0,0.25);
}
.lobby-chat-item {
  font-size:12px; line-height:1.45; padding:4px 8px; border-radius:6px;
  background: rgba(255,255,255,0.04); word-break: break-word;
}
.lobby-chat-item.self { background: rgba(212,168,67,0.08); }
.lobby-chat-name { color:#8ec8ff; font-weight:700; }
.lobby-chat-item.self .lobby-chat-name { color:#f0cc6a; }
.lobby-chat-sep { color:#8899aa; }
.lobby-chat-text { color:#e8e8e0; }
.lobby-chat-input-row {
  display:flex; gap:8px; padding:8px;
  border-top:1px solid rgba(255,255,255,0.06);
}
#lobbyChatInput {
  flex:1; padding:8px 10px; border-radius:6px;
  border:1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.45); color:#e8e8e0;
  outline:none; font-size:13px;
}
#lobbyChatInput:focus { border-color: rgba(212,168,67,0.55); }
.lobby-chat-input-row .menu-btn {
  width:auto; padding:8px 14px; margin:0; font-size:12px;
}