/* 吸血鬼幸存者（多人联机）浮层样式 */

.vs-overlay{
  position:fixed; inset:0; z-index:9999;
  display:none;
}
.vs-overlay.active{ display:block; }

.vs-mask{
  position:absolute; inset:0;
  background:rgba(0,0,0,.85);
  backdrop-filter:blur(2px);
}
.vs-stage{ position:absolute; inset:0; width:100%; height:100%; }
.vs-canvas{
  display:block;
  width:100%; height:100%;
  background:#0a0014;
  touch-action:none;
  -webkit-user-select:none; user-select:none;
  -webkit-tap-highlight-color:transparent;
}

/* 顶栏 HUD：标题左、stat 居中、关闭按钮右；高度统一 36px */
.vs-hud{
  position:absolute;
  top:env(safe-area-inset-top, 0); left:0; right:0;
  height:36px;
  display:flex; align-items:center; gap:6px;
  padding:0 8px;
  background:linear-gradient(180deg, rgba(0,0,0,.78), rgba(0,0,0,.15));
  z-index:5;
  pointer-events:none;
  font-family:system-ui, sans-serif;
}
.vs-hud-title{
  color:#f0abfc; font-weight:900; font-size:13px;
  text-shadow:0 2px 4px rgba(0,0,0,.6);
  display:flex; align-items:center; gap:4px;
  flex:0 0 auto;
}
.vs-multi-tag{
  font-size:10px; padding:1px 5px;
  background:rgba(236,72,153,.25);
  border:1px solid rgba(236,72,153,.6);
  border-radius:8px;
  color:#fbcfe8;
}
.vs-hud-spacer{ flex:1; }
.vs-hud-stat{
  display:flex; align-items:center; gap:3px;
  padding:2px 7px;
  background:rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.18);
  border-radius:12px;
  color:#fff; font-size:11px; font-weight:700;
  white-space:nowrap;
}
.vs-hud-stat .vs-stat-icon{ font-size:12px; }
.vs-hud-close{
  pointer-events:auto;
  width:28px; height:28px;
  border-radius:8px;
  background:rgba(0,0,0,.6);
  border:1px solid rgba(255,255,255,.25);
  color:#fff; font-size:18px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  padding:0;
  flex:0 0 auto;
}
.vs-hud-close:hover{ background:rgba(255,77,158,.4); }

/* 玩家条：移到右上（HUD 下方），避免和左侧道具栏重叠 */
.vs-players-bar{
  position:absolute;
  top:calc(env(safe-area-inset-top, 0) + 40px);
  right:calc(env(safe-area-inset-right, 0) + 8px);
  z-index:4;
  display:flex; flex-direction:column;
  gap:3px;
  max-width:200px;
  pointer-events:none;
}
.vs-pbar{
  display:flex; align-items:center; gap:6px;
  padding:3px 8px;
  background:rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.15);
  border-radius:14px;
  font-size:11px; color:#fff;
}
.vs-pbar.me{ border-color:#fde047; }
.vs-pbar.dead{ opacity:0.5; }
.vs-pbar-dot{ width:8px; height:8px; border-radius:50%; flex:0 0 8px; }
.vs-pbar-name{ font-weight:700; max-width:80px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vs-pbar-bar{
  flex:1; min-width:40px; height:6px;
  background:rgba(255,255,255,.15);
  border-radius:4px; overflow:hidden;
  display:block; position:relative;
}
.vs-pbar-fill{ display:block; height:100%; background:#22c55e; }
.vs-pbar-hp{ font-size:10px; color:#cbd5e1; font-variant-numeric:tabular-nums; }

/* 左下虚拟摇杆 */
.vs-joystick{
  position:absolute;
  left:calc(env(safe-area-inset-left, 0) + 24px);
  bottom:calc(env(safe-area-inset-bottom, 0) + 28px);
  width:140px; height:140px;
  border-radius:50%;
  background:rgba(255,255,255,.05);
  border:2px dashed rgba(255,255,255,.18);
  z-index:6;
  touch-action:none;
  display:none;
}
.vs-joystick.show{ display:block; }
.vs-joystick-knob{
  position:absolute;
  left:50%; top:50%;
  width:60px; height:60px;
  margin-left:-30px; margin-top:-30px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #f0abfc, #a21caf);
  box-shadow:0 4px 12px rgba(0,0,0,.6), inset 0 -4px 8px rgba(0,0,0,.3);
  transition:transform .04s linear;
  pointer-events:none;
}
.vs-joystick-tip{
  position:absolute;
  left:0; right:0; top:-22px;
  text-align:center;
  font-size:11px; color:rgba(255,255,255,.55);
  font-weight:700; letter-spacing:1px;
  pointer-events:none;
}
@media (hover:hover) and (pointer:fine){
  .vs-joystick{ display:none !important; }
}

/* === 挑战模式切换（大厅） === */
.vs-mode-switch{
  display:flex; align-items:center; gap:6px;
  padding:8px 10px;
  background:rgba(0,0,0,.35);
  border:1px solid rgba(168,85,247,.35);
  border-radius:10px;
  margin-bottom:12px;
  flex-wrap:wrap;
}
.vs-mode-label{
  color:#a7f0ff; font-size:12px; font-weight:700;
  margin-right:4px;
}
.vs-mode-btn{
  flex:1; min-width:110px;
  padding:8px 10px;
  border-radius:8px;
  border:1.5px solid rgba(168,85,247,.4);
  background:rgba(255,255,255,.05);
  color:#c4b5fd;
  font-size:12px; font-weight:800;
  cursor:pointer;
  transition:all .15s;
  -webkit-tap-highlight-color:transparent;
}
.vs-mode-btn:hover,.vs-mode-btn:active{
  background:rgba(168,85,247,.15);
  border-color:#f0abfc;
}
.vs-mode-btn.active{
  background:linear-gradient(135deg, rgba(168,85,247,.35), rgba(236,72,153,.35));
  border-color:#fde047;
  color:#fde047;
  box-shadow:0 0 12px rgba(253,224,71,.35);
}

/* === 挑战模式切换 END === */

/* 经验条：移到屏幕底部（避免和顶部 HP 玩家条重叠） */
.vs-exp-bar{
  position:absolute;
  bottom:calc(env(safe-area-inset-bottom, 0) + 8px);
  left:50%; transform:translateX(-50%);
  width:min(640px, 86vw);
  height:16px;
  background:rgba(0,0,0,.65);
  border:1px solid rgba(168,85,247,.55);
  border-radius:9px;
  overflow:hidden;
  z-index:4;
  pointer-events:none;
}
.vs-exp-fill{
  height:100%;
  width:0%;
  background:linear-gradient(90deg, #22d3ee, #a855f7, #ec4899);
  transition:width .15s ease-out;
}
.vs-exp-text{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  color:#e0f2fe; font-size:10px; font-weight:900;
  text-shadow:0 1px 2px rgba(0,0,0,.9);
  letter-spacing:.5px;
}
.vs-hud-level{
  background:linear-gradient(135deg, rgba(168,85,247,.35), rgba(236,72,153,.35)) !important;
  border-color:#fde047 !important;
  color:#fde047 !important;
}
/* HP stat（顶部，自己的血量） */
.vs-hud-hp{
  background:linear-gradient(135deg, rgba(34,197,94,.32), rgba(34,197,94,.16)) !important;
  border-color:#86efac !important;
  color:#dcfce7 !important;
  font-variant-numeric:tabular-nums;
}
.vs-hud-hp.low{
  background:linear-gradient(135deg, rgba(251,146,60,.36), rgba(251,146,60,.18)) !important;
  border-color:#fdba74 !important;
  color:#fed7aa !important;
}
.vs-hud-hp.crit{
  background:linear-gradient(135deg, rgba(248,113,113,.55), rgba(220,38,38,.35)) !important;
  border-color:#fca5a5 !important;
  color:#fff5f5 !important;
  animation:vsHpPulse .55s ease-in-out infinite alternate;
}
@keyframes vsHpPulse{
  from{ box-shadow:0 0 0 0 rgba(248,113,113,.0); }
  to{ box-shadow:0 0 12px 2px rgba(248,113,113,.7); }
}

/* 受伤红屏遮罩（铺满 vs-stage） */
.vs-hurt-overlay{
  position:absolute; inset:0;
  pointer-events:none;
  background:radial-gradient(circle at 50% 50%, rgba(220,38,38,0) 35%, rgba(220,38,38,.85) 100%);
  opacity:0;
  z-index:7;
  transition:opacity .12s linear;
}

/* 整个舞台抖动用 transform（直接跳变，无 transition 避免拖尾） */

/* 玩家条往下挪规则已移除：经验条已搬到底部，玩家条用初始 top 即可 */

/* === 升级 3 选 1 弹窗 === */
.vs-lvl-picks{
  display:flex; flex-direction:column; gap:8px;
  margin-top:6px;
}
.vs-lvl-row{
  display:flex; align-items:center; gap:12px;
  padding:12px;
  background:rgba(253,224,71,.08);
  border:2px solid rgba(253,224,71,.4);
  border-radius:12px;
  cursor:pointer;
  transition:all .15s;
  -webkit-tap-highlight-color:transparent;
}
.vs-lvl-row:hover,.vs-lvl-row:active{
  background:rgba(253,224,71,.22);
  border-color:#fde047;
  transform:translateY(-1px) scale(1.02);
  box-shadow:0 6px 20px rgba(253,224,71,.35);
}
.vs-lvl-icon{ font-size:32px; flex:0 0 auto; line-height:1; }
.vs-lvl-info{ flex:1; min-width:0; }
.vs-lvl-name{ color:#fff; font-weight:900; font-size:15px; margin-bottom:2px; }
.vs-lvl-desc{ color:#fde047; font-size:11px; line-height:1.4; }

/* === 波次结算面板 === */
.vs-modal.vs-waveresult .vs-modal-box{
  text-align:center;
  border-color:#fde047;
  box-shadow:0 0 40px rgba(253,224,71,.5);
  animation:vs-wr-pop .35s ease-out;
}
@keyframes vs-wr-pop{
  from{ transform:scale(.8); opacity:0; }
  to{ transform:scale(1); opacity:1; }
}
.vs-modal.vs-waveresult .vs-modal-title{ font-size:28px; }
/* 失败结算面板（红色基调，使用 wr-pop 动画） */
.vs-modal.vs-defeat .vs-modal-box{
  text-align:center;
  border-color:#f87171;
  box-shadow:0 0 40px rgba(248,113,113,.5);
  animation:vs-wr-pop .35s ease-out;
}
.vs-modal.vs-defeat .vs-modal-title{ font-size:28px; }
.vs-wr-players{
  display:flex; flex-direction:column; gap:4px;
  margin:10px 0;
}
.vs-wr-row{
  display:flex; align-items:center; gap:8px;
  padding:6px 10px;
  background:rgba(255,255,255,.05);
  border-radius:8px;
  font-size:12px; color:#e2e8f0;
}
.vs-wr-row.me{ background:rgba(253,224,71,.12); }
.vs-wr-row.dead{ opacity:.55; }
.vs-wr-name{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:700; }
.vs-wr-state{ font-weight:900; }
.vs-wr-row.dead .vs-wr-state{ color:#ef4444; }
.vs-wr-row:not(.dead) .vs-wr-state{ color:#22c55e; }
.vs-wr-stats{ color:#94a3b8; font-size:10.5px; }

/* === 商店分区 === */
.vs-shop-section-title{
  margin:6px 0 6px;
  padding-bottom:4px;
  border-bottom:1px solid rgba(255,255,255,.08);
  font-size:12px; font-weight:900; color:#c4b5fd;
  display:flex; align-items:center; gap:6px;
}
.vs-shop-section-title .vs-shop-tag{ font-size:10px; padding:2px 8px; }
.vs-shop-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-bottom:10px;
}
@media (max-width:640px){
  .vs-shop-grid{ grid-template-columns:1fr; }
}

/* === 通用模态面板 === */
.vs-modal{
  position:absolute; inset:0;
  z-index:10;
  display:none;
  align-items:center; justify-content:center;
  background:rgba(8,2,20,.85);
  backdrop-filter:blur(4px);
  padding:20px;
}
.vs-modal.show{ display:flex; }
/* 升级弹窗优先级最高，盖过商店和波次结算 */
.vs-modal.vs-levelup{ z-index:60; }
.vs-modal.vs-waveresult{ z-index:20; }
.vs-modal-box{
  background:linear-gradient(180deg, #1e1b4b 0%, #0f0a2a 100%);
  border:2px solid #a855f7;
  border-radius:18px;
  padding:18px 20px;
  width:min(460px, 94vw);
  max-height:92vh;
  overflow-y:auto;
  box-shadow:0 0 40px rgba(168,85,247,.4);
  color:#e5e7eb;
}
.vs-modal-title{
  text-align:center;
  color:#f0abfc; font-weight:900; font-size:22px;
  margin-bottom:4px;
  text-shadow:0 2px 8px rgba(168,85,247,.4);
}
.vs-modal-sub{
  text-align:center;
  color:#c4b5fd; font-size:12px;
  margin-bottom:14px;
}
.vs-modal-actions{
  display:flex; gap:10px; justify-content:center;
  margin-top:14px;
}
.vs-btn{
  padding:10px 16px;
  border-radius:10px;
  border:none;
  font-size:14px; font-weight:900;
  color:#fff; cursor:pointer;
  min-width:120px;
}
.vs-btn.primary{
  background:linear-gradient(135deg, #a855f7, #ec4899);
  box-shadow:0 6px 18px rgba(168,85,247,.5);
}
.vs-btn.primary:disabled{
  opacity:0.55; cursor:not-allowed;
  background:linear-gradient(135deg, #6b7280, #4b5563);
  box-shadow:none;
}
/* "继续选择升级"按钮：金黄警示，呼吸闪烁 */
.vs-btn.vs-btn-pending{
  background:linear-gradient(135deg, #f59e0b, #fde047) !important;
  color:#3f1d00 !important;
  box-shadow:0 0 18px rgba(253,224,71,.7) !important;
  animation:vsBtnPending 1s ease-in-out infinite alternate;
}
@keyframes vsBtnPending{
  from{ box-shadow:0 0 8px rgba(253,224,71,.4); }
  to{ box-shadow:0 0 22px rgba(253,224,71,.95); }
}
.vs-btn.secondary{
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.25);
}
.vs-btn:active{ transform:scale(.97); }

/* === 角色选择 === */
.vs-char-list{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-bottom:14px;
}
.vs-char-row{
  display:flex; align-items:center; gap:10px;
  padding:12px;
  background:rgba(255,255,255,.05);
  border:1.5px solid rgba(168,85,247,.4);
  border-radius:12px;
  cursor:pointer;
  transition:all .15s;
  -webkit-tap-highlight-color:transparent;
}
.vs-char-row:hover,.vs-char-row:active{
  background:rgba(168,85,247,.18);
  border-color:#fde047;
  transform:translateY(-1px);
}
.vs-char-row.picked{
  background:rgba(253,224,71,.15);
  border-color:#fde047;
  box-shadow:0 0 18px rgba(253,224,71,.4);
}
.vs-char-icon{ font-size:28px; line-height:1; flex:0 0 auto; }
.vs-char-info{ flex:1; min-width:0; }
.vs-char-name{ color:#fff; font-weight:900; font-size:14px; margin-bottom:2px; }
.vs-char-desc{ color:#a5b4fc; font-size:10.5px; line-height:1.4; }

/* Lobby 名单 */
.vs-lobby-title{
  font-size:12px; color:#fde047; font-weight:900;
  margin:10px 0 4px;
  padding-bottom:4px;
  border-bottom:1px solid rgba(168,85,247,.3);
}
.vs-lobby-empty,.vs-empty{
  color:#64748b; font-size:11px;
  text-align:center; padding:8px;
}
.vs-lobby-row{
  display:flex; align-items:center; gap:6px;
  font-size:11px; color:#cbd5e1;
  padding:4px 6px;
  border-bottom:1px dashed rgba(255,255,255,.05);
}
.vs-lobby-row.me{ background:rgba(253,224,71,.08); border-radius:6px; }
.vs-dot{ width:8px; height:8px; border-radius:50%; flex:0 0 8px; }
.vs-lobby-name{ min-width:60px; max-width:100px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:700; }
.vs-lobby-char{ flex:1; color:#c4b5fd; font-size:10px; }
.vs-lobby-ready{ color:#22c55e; font-weight:700; font-size:10px; }

/* === 商店 === */
.vs-shop-list{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-bottom:12px;
}
.vs-shop-item{
  display:flex; align-items:center; gap:10px;
  background:rgba(255,255,255,.05);
  border:1.5px solid rgba(168,85,247,.4);
  border-radius:12px;
  padding:10px;
  cursor:pointer;
  transition:all .15s;
  -webkit-tap-highlight-color:transparent;
}
.vs-shop-item:hover:not(.sold):not(.disabled){
  background:rgba(168,85,247,.2);
  border-color:#fde047;
  transform:translateY(-1px);
}
.vs-shop-item.sold{ opacity:0.35; cursor:not-allowed; }
.vs-shop-item.disabled{ opacity:0.55; }
.vs-shop-icon{ font-size:28px; flex:0 0 auto; }
.vs-shop-info{ flex:1; min-width:0; }
.vs-shop-name{ color:#fff; font-weight:900; font-size:13px; display:flex; align-items:center; gap:6px; }
.vs-shop-tag{
  font-size:9px;
  padding:1px 5px; border-radius:5px;
  font-weight:700;
}
.vs-shop-tag.w{ background:rgba(239,68,68,.25); color:#fca5a5; border:1px solid rgba(239,68,68,.5); }
.vs-shop-tag.p{ background:rgba(59,130,246,.25); color:#93c5fd; border:1px solid rgba(59,130,246,.5); }
.vs-shop-price{ color:#fde047; font-size:11px; font-weight:700; margin-top:2px; }

.vs-shop-mine{
  padding:8px 10px;
  background:rgba(0,0,0,.35);
  border-radius:10px;
  margin-bottom:4px;
}
.vs-mine-title{ color:#a7f0ff; font-size:11px; font-weight:900; margin-bottom:4px; }
.vs-mine-list{ display:flex; flex-wrap:wrap; gap:4px; }
.vs-mine-chip{
  display:inline-flex; align-items:center;
  padding:3px 8px;
  border-radius:12px;
  font-size:10.5px; font-weight:700;
}
.vs-mine-chip.w{ background:rgba(239,68,68,.18); color:#fecaca; border:1px solid rgba(239,68,68,.4); }
.vs-mine-chip.p{ background:rgba(59,130,246,.18); color:#bfdbfe; border:1px solid rgba(59,130,246,.4); }

/* === 手机端适配 === */
@media (max-width:640px){
  .vs-hud-title{ font-size:13px; }
  .vs-hud-stat{ font-size:11px; padding:2px 7px; }
  .vs-players-bar{ max-width:200px; }
  .vs-pbar-name{ max-width:54px; }
  .vs-char-list{ grid-template-columns:1fr; }
  .vs-shop-list{ grid-template-columns:1fr; }
  .vs-modal-box{ padding:14px; }
  .vs-modal-title{ font-size:19px; }
  .vs-btn{ min-width:100px; font-size:13px; padding:10px 12px; }
}

@media (orientation:landscape) and (max-height:500px){
  .vs-joystick{
    width:110px; height:110px;
    bottom:calc(env(safe-area-inset-bottom, 0) + 12px);
    left:calc(env(safe-area-inset-left, 0) + 14px);
  }
  .vs-joystick-knob{ width:50px; height:50px; margin-left:-25px; margin-top:-25px; }
  .vs-players-bar{ top:calc(env(safe-area-inset-top, 0) + 38px); }
}

/* === 主动道具栏（左上角，wave 阶段显示，HUD 下方） === */
.vs-itembar{
  position:absolute;
  top:calc(env(safe-area-inset-top, 0) + 40px);
  left:calc(env(safe-area-inset-left, 0) + 8px);
  display:flex; flex-direction:row; flex-wrap:wrap; gap:6px;
  max-width:60vw;
  z-index:6;
}
.vs-item-btn{
  display:flex; align-items:center; gap:4px;
  padding:5px 7px;
  border-radius:10px;
  background:rgba(15,23,42,.85);
  border:1.5px solid rgba(168,85,247,.55);
  color:#fff;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  box-shadow:0 4px 10px rgba(0,0,0,.4);
}
.vs-item-btn:active{ transform:scale(.92); background:rgba(168,85,247,.4); }
.vs-item-emoji{ font-size:18px; line-height:1; }
.vs-item-cnt{ font-size:11px; font-weight:900; color:#fde047; }

/* Buff 倒计时（左侧，道具栏下方） */
.vs-buffs{
  position:absolute;
  top:calc(env(safe-area-inset-top, 0) + 80px);
  left:calc(env(safe-area-inset-left, 0) + 8px);
  display:flex; flex-direction:row; flex-wrap:wrap; gap:4px;
  z-index:6; pointer-events:none;
}
.vs-buff{
  padding:3px 8px;
  border-radius:10px;
  background:rgba(0,0,0,.6);
  font-size:11px; font-weight:900;
  color:#fff;
  border:1px solid rgba(255,255,255,.2);
}
.vs-buff.shield{ border-color:#7dd3fc; color:#a7f0ff; }
.vs-buff.magnet{ border-color:#38bdf8; color:#bae6fd; }

/* === 商店一屏自适应优化 === */
.vs-modal.vs-shop .vs-modal-box{
  width:min(720px, 96vw);
  max-height:calc(100vh - env(safe-area-inset-top, 0) - env(safe-area-inset-bottom, 0) - 16px);
  padding:14px 16px;
}
.vs-shop-list{ margin-bottom:8px; }
.vs-shop-grid{
  grid-template-columns:repeat(2, 1fr);
  gap:8px;
}
.vs-shop-section-title{
  display:flex; align-items:center; gap:6px;
  margin:8px 0 6px;
  font-size:12px;
  color:#a7f0ff;
  font-weight:900;
}
.vs-shop-section-hint{
  font-size:10px; color:#94a3b8; font-weight:400; margin-left:auto;
}

/* 商店物品 — 描述行 + 拥有徽章 */
.vs-shop-item{
  position:relative;
  padding:8px 10px;
}
.vs-shop-icon{ position:relative; }
.vs-shop-badge{
  position:absolute;
  top:-6px; right:-8px;
  padding:1px 5px;
  font-size:9px; font-weight:900;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.4);
  background:#0f172a;
  color:#fff;
  white-space:nowrap;
}
.vs-shop-badge.upg{ color:#fde047; border-color:#fde047; background:rgba(253,224,71,.15); }
.vs-shop-badge.cnt{ color:#22d3ee; border-color:#22d3ee; background:rgba(34,211,238,.15); }
.vs-shop-desc{
  color:#a5b4fc; font-size:10.5px; line-height:1.3;
  margin-top:1px; margin-bottom:1px;
  overflow:hidden;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}

/* 手机端：商店双区都缩成 2 列（不再单列），让一屏能看完 */
@media (max-width:640px){
  .vs-shop-grid{ grid-template-columns:repeat(2, 1fr); gap:6px; }
  .vs-shop-item{ padding:6px 8px; }
  .vs-shop-icon{ font-size:22px; }
  .vs-shop-name{ font-size:12px; }
  .vs-shop-desc{ font-size:9.5px; -webkit-line-clamp:2; }
  .vs-shop-price{ font-size:10px; }
  .vs-modal.vs-shop .vs-modal-box{ padding:10px 12px; }
  .vs-modal-title{ font-size:16px; margin-bottom:2px; }
  .vs-modal-sub{ font-size:11px; margin-bottom:8px; }
  .vs-itembar{ top:calc(env(safe-area-inset-top, 0) + 40px); max-width:62vw; }
  .vs-buffs{ top:calc(env(safe-area-inset-top, 0) + 78px); }
  .vs-item-emoji{ font-size:16px; }
}

/* === 物品品质（白/绿/紫/金） === */
/* 颜色变量：边框 + 微弱辉光 + 名字色 */
.vs-shop-item.q-normal{
  border-color:rgba(203,213,225,.55);
  background:linear-gradient(180deg, rgba(203,213,225,.10), rgba(255,255,255,.04));
}
.vs-shop-item.q-normal .vs-shop-name{ color:#e2e8f0; }
.vs-shop-item.q-green{
  border-color:rgba(34,197,94,.65);
  background:linear-gradient(180deg, rgba(34,197,94,.14), rgba(255,255,255,.04));
  box-shadow:0 0 8px rgba(34,197,94,.25) inset;
}
.vs-shop-item.q-green .vs-shop-name{ color:#86efac; }
.vs-shop-item.q-purple{
  border-color:rgba(168,85,247,.75);
  background:linear-gradient(180deg, rgba(168,85,247,.20), rgba(255,255,255,.04));
  box-shadow:0 0 10px rgba(168,85,247,.35) inset, 0 0 6px rgba(168,85,247,.35);
}
.vs-shop-item.q-purple .vs-shop-name{ color:#c4b5fd; }
.vs-shop-item.q-gold{
  border-color:#fde047;
  background:linear-gradient(180deg, rgba(253,224,71,.22), rgba(255,255,255,.04));
  box-shadow:0 0 12px rgba(253,224,71,.45) inset, 0 0 8px rgba(253,224,71,.55);
}
.vs-shop-item.q-gold .vs-shop-name{ color:#fef3c7; }

/* === 推荐物品发光特效（呼吸光 + ⭐ 角标） === */
.vs-shop-item.recommended{
  animation: vs-rec-pulse 1.6s ease-in-out infinite;
  position:relative;
}
.vs-shop-item.recommended::after{
  content:'';
  position:absolute; inset:-3px;
  border-radius:14px;
  pointer-events:none;
  border:2px solid #fde047;
  box-shadow:0 0 12px #fde047, 0 0 24px rgba(253,224,71,.45);
  animation: vs-rec-border 1.6s ease-in-out infinite;
}
.vs-shop-rec-tag{
  position:absolute; top:-8px; left:8px;
  padding:2px 8px;
  font-size:10px; font-weight:900;
  background:linear-gradient(135deg, #fde047, #f97316);
  color:#1a0f00;
  border-radius:10px;
  box-shadow:0 0 8px rgba(253,224,71,.7);
  z-index:1;
  white-space:nowrap;
}
@keyframes vs-rec-pulse{
  0%,100%{ transform:translateY(-1px) scale(1); }
  50%{ transform:translateY(-2px) scale(1.02); }
}
@keyframes vs-rec-border{
  0%,100%{ opacity:0.55; box-shadow:0 0 8px #fde047, 0 0 16px rgba(253,224,71,.3); }
  50%{ opacity:1; box-shadow:0 0 16px #fde047, 0 0 32px rgba(253,224,71,.7); }
}

/* === 大厅"等待加入" 区块 === */
.vs-lobby-wait{
  margin-top:8px;
  padding:10px 12px;
  background:linear-gradient(135deg, rgba(34,211,238,.15), rgba(168,85,247,.15));
  border:1.5px dashed #38bdf8;
  border-radius:10px;
  display:flex; align-items:center; justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}
.vs-lobby-wait-text{
  font-size:12px;
  color:#a7f0ff;
  font-weight:700;
  flex:1; min-width:160px;
}
.vs-lobby-wait-text #vs-lobby-countdown{
  display:inline-block;
  min-width:18px;
  padding:0 4px;
  color:#fde047;
  font-size:14px;
  font-weight:900;
}
.vs-lobby-startnow{
  padding:8px 18px !important;
  font-size:12px !important;
  min-width:auto !important;
}

/* === 观战横幅（中途加入时显示） === */
.vs-spectator{
  position:absolute;
  top:calc(env(safe-area-inset-top, 0) + 70px);
  left:50%;
  transform:translateX(-50%);
  display:flex; align-items:center; gap:10px;
  padding:10px 16px;
  background:linear-gradient(135deg, rgba(15,23,42,.92), rgba(30,41,59,.92));
  border:2px solid #38bdf8;
  border-radius:14px;
  box-shadow:0 0 20px rgba(56,189,248,.4);
  z-index:9;
  pointer-events:none;
  animation: vs-spec-glow 2s ease-in-out infinite;
}
.vs-spectator-icon{
  font-size:24px;
  filter:drop-shadow(0 0 6px #38bdf8);
}
.vs-spectator-title{
  font-size:13px; font-weight:900;
  color:#a7f0ff;
}
.vs-spectator-sub{
  font-size:11px;
  color:#cbd5e1;
  margin-top:1px;
}
@keyframes vs-spec-glow{
  0%,100%{ box-shadow:0 0 14px rgba(56,189,248,.4); }
  50%{ box-shadow:0 0 28px rgba(56,189,248,.8); }
}
@media (max-width:640px){
  .vs-spectator{ padding:7px 12px; gap:7px; }
  .vs-spectator-icon{ font-size:20px; }
  .vs-spectator-title{ font-size:12px; }
  .vs-spectator-sub{ font-size:10px; }
  .vs-lobby-wait{ padding:8px 10px; }
  .vs-lobby-wait-text{ font-size:11px; }
  .vs-shop-rec-tag{ font-size:9px; padding:1px 6px; top:-7px; left:6px; }
}