/* ═══════════════════════════════════════════════
   裂境战纪 · 对战平台（登录 / 大厅 / 房间 / 对局 HUD）
   与观众端的纸感浅色不同：这里是"游戏客户端"，
   深墨底 + 铜金高光，和战场画面（深绿）连成一体。
   变量挂在 :root，因为 toast / 确认框是 app 之外的 body 子节点。
   ═══════════════════════════════════════════════ */

:root {
  --vs-bg: #0a0e0c;
  --vs-bg-2: #101614;
  --vs-card: #141b18;
  --vs-card-2: #18211d;
  --vs-line: rgba(255, 255, 255, .085);
  --vs-line-2: rgba(255, 255, 255, .045);
  --vs-ink: #e9ede7;
  --vs-ink-2: #b9c2ba;
  --vs-muted: #7f8b83;
  --vs-faint: #5d6862;
  --vs-gold: #cfa25a;
  --vs-gold-2: #f0d6a2;
  --vs-green: #4f9d78;
  --vs-red: #c4674f;
  --vs-blue: #6a9ec9;
  --vs-r: 12px;
}

/* ═══════════ 容器 ═══════════ */

.vs-app {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--vs-ink);
  background:
    radial-gradient(1100px 520px at 8% -12%, rgba(79, 157, 120, .16) 0%, transparent 62%),
    radial-gradient(900px 500px at 104% 4%, rgba(207, 162, 90, .13) 0%, transparent 58%),
    radial-gradient(760px 420px at 50% 118%, rgba(77, 112, 138, .14) 0%, transparent 62%),
    var(--vs-bg);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

/* 细网格：让深底有"作战沙盘"的质感，不抢内容 */
.vs-atmos {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .022) 1px, transparent 1px);
  background-size: 44px 44px, 44px 44px;
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 88%);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 88%);
}

/* ═══════════ 顶栏 ═══════════ */

.vs-top {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 20px;
  height: 62px;
  flex: 0 0 62px;
  padding: 0 20px;
  border-bottom: 1px solid var(--vs-line);
  background: linear-gradient(180deg, rgba(10, 14, 12, .92), rgba(10, 14, 12, .68));
  backdrop-filter: blur(14px);
}
.vs-brand { display: flex; align-items: center; gap: 10px; }
.vs-brand::before {
  content: "";
  width: 26px; height: 26px; flex: none;
  background: url(../../assets/art/logo-crest.png) center / contain no-repeat;
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, .7));
}
.vs-brand b {
  font-family: var(--serif);
  font-size: 17px;
  letter-spacing: .06em;
  color: #f6f1e4;
}
.vs-brand em {
  font-style: normal;
  font-size: 9.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--vs-gold);
  opacity: .85;
}

.vs-app.vs-auth-mode .vs-top { display: none; }
.vs-app.vs-auth-mode .vs-main { padding-top: 0; }
.vs-tabs { display: flex; align-items: center; gap: 4px; }
.vs-tabs button {
  height: 34px;
  padding: 0 15px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--vs-muted);
  border: 1px solid transparent;
  transition: color .16s, background .16s, border-color .16s;
}
.vs-tabs button:hover { color: var(--vs-ink-2); background: rgba(255, 255, 255, .04); }
.vs-tabs button.on {
  color: var(--vs-gold-2);
  background: rgba(207, 162, 90, .1);
  border-color: rgba(207, 162, 90, .28);
}

.vs-me { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.vs-me-btn {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 4px 12px 4px 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--vs-line);
  transition: background .16s, border-color .16s;
}
.vs-me-btn:hover { background: rgba(255, 255, 255, .08); border-color: rgba(207, 162, 90, .34); }
.vs-me-id { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.vs-me-id b { font-size: 13px; font-weight: 600; letter-spacing: .01em; }
.vs-me-id i { font-style: normal; }

.vs-icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 14px;
  color: var(--vs-muted);
  border: 1px solid var(--vs-line);
  background: rgba(255, 255, 255, .03);
  transition: color .16s, background .16s;
}
.vs-icon-btn:hover { color: var(--vs-ink); background: rgba(255, 255, 255, .08); }

/* 「回到首页」按钮：原来是个 38×38 的 ✕ 图标，玩家根本认不出那是"回家"，
   而且退出对战平台属于破坏性操作，藏在无文字图标里只会让人找不到出口。
   改成带字按钮，宽度自适应，颜色比普通图标按钮弱一档（不是主要动作）。 */
.vs-home-btn {
  width: auto;
  min-width: 38px;
  padding: 0 12px;
  font-size: 12.5px;
  letter-spacing: .02em;
  white-space: nowrap;
}

/* ═══════════ 主区 ═══════════ */

.vs-main {
  position: relative;
  z-index: 2;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 26px 24px 34px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .16) transparent;
}
.vs-main::-webkit-scrollbar { width: 8px; }
.vs-main::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .14); border-radius: 8px; }
/* 内容不足一屏时垂直居中，超出一屏时退回顶部（safe）：否则大厅/战绩页
   永远"贴着顶边、底下空一大片"，看起来像没渲染完。
   safe 关键字是关键——普通 center 在内容超长时会把顶部滚出可视区且拉不回来。 */
.vs-main { display: flex; flex-direction: column; justify-content: safe center; }
.vs-main > * { width: 100%; max-width: 1180px; margin: 0 auto; }
/* 大厅与登录是"一屏定调"的页面，内容少时垂直居中；列表页靠上，符合扫读习惯 */
.vs-main[data-view="ladder"] > *,
.vs-main[data-view="auth"] > * { margin-block: auto; }

.vs-kicker {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--vs-gold);
  opacity: .9;
}
.vs-empty {
  padding: 18px 4px;
  font-size: 13px;
  color: var(--vs-faint);
  line-height: 1.7;
}
.vs-note {
  margin: 10px 0;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--vs-gold-2);
  background: rgba(207, 162, 90, .09);
  border: 1px solid rgba(207, 162, 90, .2);
}
.vs-tip {
  margin-top: 16px;
  font-size: 12px;
  color: var(--vs-faint);
  line-height: 1.7;
}
.vs-link {
  font-size: 12px;
  color: var(--vs-gold);
  padding: 4px 2px;
  transition: color .16s;
}
.vs-link:hover { color: var(--vs-gold-2); }
.vs-link.danger { color: var(--vs-red); }

/* ═══════════ 按钮 ═══════════ */

.vs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  padding: 0 18px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .01em;
  border: 1px solid var(--vs-line);
  background: rgba(255, 255, 255, .05);
  color: var(--vs-ink);
  transition: transform .12s, background .16s, border-color .16s, opacity .16s;
  white-space: nowrap;
}
.vs-btn:hover:not(:disabled) { background: rgba(255, 255, 255, .09); }
.vs-btn:active:not(:disabled) { transform: translateY(1px); }
.vs-btn.primary {
  color: #17120a;
  background: linear-gradient(180deg, #e2bc78, #cfa25a);
  border-color: rgba(255, 236, 200, .5);
  box-shadow: 0 2px 12px rgba(207, 162, 90, .22);
  font-weight: 600;
}
.vs-btn.primary:hover:not(:disabled) { background: linear-gradient(180deg, #edc886, #d8ac63); }
.vs-btn.ghost { background: transparent; color: var(--vs-ink-2); }
.vs-btn.ghost:hover:not(:disabled) { background: rgba(255, 255, 255, .06); color: var(--vs-ink); }
.vs-btn.big { min-height: 48px; padding: 0 26px; font-size: 15px; }
.vs-btn.small { min-height: 34px; padding: 0 13px; font-size: 12px; }
.vs-btn.tiny { min-height: 30px; padding: 0 10px; font-size: 11.5px; border-radius: 7px; }
.vs-btn.block { width: 100%; }
.vs-btn:disabled { opacity: .45; cursor: not-allowed; }
.vs-btn.queued {
  background: rgba(196, 103, 79, .16);
  border-color: rgba(196, 103, 79, .45);
  color: #f0c6ba;
}

/* ═══════════ 头像 / 段位 ═══════════ */

.vs-av {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  font-weight: 600;
  color: #0d1210;
  background: hsl(var(--av-h, 168) 46% 62%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28);
  letter-spacing: 0;
  user-select: none;
}
.vs-av-empty {
  background: rgba(255, 255, 255, .06);
  color: var(--vs-faint);
  font-size: 12px;
  box-shadow: inset 0 0 0 1px var(--vs-line);
}

.vs-tier-mini {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-style: normal;
  font-size: 10.5px;
  padding: 2px 7px;
  border-radius: 5px;
  border: 1px solid var(--vs-line);
  color: var(--vs-ink-2);
  background: rgba(255, 255, 255, .04);
  white-space: nowrap;
}
.vs-tier-mini::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: .9;
}
.vs-tier, .vs-tier-big {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.vs-tier { font-size: 12px; }
.vs-tier b { font-family: var(--mono); font-weight: 500; opacity: .8; }
.vs-tier-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.vs-tier-empty { color: var(--vs-faint); }

.vs-tier-iron { color: #8b98a3; }
.vs-tier-bronze { color: #bf7f45; }
.vs-tier-silver { color: #a8b6c0; }
.vs-tier-gold { color: #d8b05e; }
.vs-tier-platinum { color: #63c0b0; }
.vs-tier-diamond { color: #74aae8; }
.vs-tier-master { color: #ad8ae0; }
.vs-tier-king { color: #e0755c; }

/* ═══════════ 登录 / 注册 ═══════════ */

.vs-auth {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(340px, .95fr);
  gap: 52px;
  align-items: center;
  min-height: calc(100vh - 140px);
  padding: 10px 0 20px;
}
.vs-auth-art {
  position: relative;
  max-width: 520px;
  /* 登录页左边做成"半幅插画"：文字全部压在画面下方的暗部，
     上半部完整露出美术主体（军师 + 沙盘）。卡片太矮时美术只剩一条缝，
     看起来像加载失败的灰块。 */
  min-height: 560px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 34px 34px 30px;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .08);
  background: #0b100e;
  box-shadow: 0 28px 70px rgba(0, 0, 0, .5);
}
.vs-auth-art::before {
  content: "";
  position: absolute; inset: 0;
  background: url(../../assets/art/card-versus.jpg) center 62% / cover no-repeat;
  opacity: .95;
  filter: saturate(1) brightness(1.05);
}
.vs-auth-art::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(9, 13, 11, .18) 0%, rgba(9, 13, 11, .46) 26%, rgba(9, 13, 11, .84) 62%, rgba(9, 13, 11, .97) 100%),
    radial-gradient(70% 50% at 100% 0%, rgba(207, 162, 90, .14), transparent 62%);
}
.vs-auth-art > * { position: relative; z-index: 1; }
.vs-auth-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--vs-gold);
  margin-bottom: 18px;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .95);
}
.vs-auth-brand::before {
  content: "";
  width: 22px; height: 22px; flex: none;
  background: url(../../assets/art/logo-crest.png) center / contain no-repeat;
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, .8));
}
.vs-auth-art h1 {
  font-family: var(--serif);
  font-size: clamp(30px, 3.5vw, 46px);
  line-height: 1.2;
  letter-spacing: -.01em;
  color: #f6f2e6;
  margin-bottom: 16px;
}
.vs-auth-art p {
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--vs-muted);
  max-width: 440px;
}
.vs-auth-points {
  list-style: none;
  margin-top: 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.vs-auth-points li {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-left: 15px;
  position: relative;
}
.vs-auth-points li::before {
  content: "";
  position: absolute;
  left: 0; top: 7px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--vs-gold);
  opacity: .8;
}
.vs-auth-points b { font-size: 13px; font-weight: 600; color: var(--vs-ink); }
.vs-auth-points span { font-size: 12px; line-height: 1.6; color: var(--vs-muted); }

.vs-auth-card {
  width: 100%;
  max-width: 404px;
  justify-self: end;
  padding: 24px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(24, 33, 29, .92), rgba(17, 23, 20, .96));
  border: 1px solid var(--vs-line);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .05);
  backdrop-filter: blur(10px);
}
.vs-auth-tabs {
  display: flex;
  gap: 3px;
  padding: 3px;
  margin-bottom: 18px;
  border-radius: 10px;
  background: rgba(0, 0, 0, .3);
  border: 1px solid var(--vs-line-2);
}
.vs-auth-tabs button {
  flex: 1;
  height: 34px;
  border-radius: 7px;
  font-size: 12.5px;
  color: var(--vs-muted);
  transition: background .16s, color .16s;
}
.vs-auth-tabs button.on {
  color: var(--vs-ink);
  background: rgba(255, 255, 255, .08);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}
.vs-auth-form label,
.vs-form label {
  display: block;
  margin-bottom: 13px;
  font-size: 11.5px;
  letter-spacing: .03em;
  color: var(--vs-muted);
}
.vs-app input,
.vs-app select,
.vs-modal input,
.vs-modal select,
.vs-modal-host input {
  display: block;
  width: 100%;
  height: 42px;
  margin-top: 6px;
  padding: 0 12px;
  border-radius: 9px;
  font-size: 13.5px;
  color: var(--vs-ink);
  background: rgba(0, 0, 0, .34);
  border: 1px solid var(--vs-line);
  transition: border-color .16s, background .16s, box-shadow .16s;
  appearance: none;
}
.vs-app select, .vs-modal select {
  background-image: linear-gradient(45deg, transparent 50%, var(--vs-muted) 50%), linear-gradient(135deg, var(--vs-muted) 50%, transparent 50%);
  background-position: calc(100% - 17px) 18px, calc(100% - 12px) 18px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 30px;
}
.vs-app input::placeholder, .vs-modal input::placeholder { color: var(--vs-faint); }
.vs-app input:focus, .vs-app select:focus,
.vs-modal input:focus, .vs-modal select:focus {
  outline: none;
  border-color: rgba(207, 162, 90, .55);
  background: rgba(0, 0, 0, .45);
  box-shadow: 0 0 0 3px rgba(207, 162, 90, .12);
}
.vs-app input:disabled { opacity: .5; }
.vs-field-extra { animation: vs-fade .18s ease both; }
.vs-auth-err {
  min-height: 17px;
  margin: 2px 0 10px;
  font-size: 12px;
  color: #e59a86;
  line-height: 1.5;
}
.vs-auth-foot {
  margin-top: 14px;
  font-size: 10.5px;
  line-height: 1.7;
  color: var(--vs-faint);
}

/* ═══════════ 天梯 ═══════════ */

.vs-ladder {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 316px;
  gap: 22px;
  align-items: start;
}

.vs-hero-card {
  position: relative;
  overflow: hidden;
  padding: 26px 26px 22px;
  border-radius: 18px;
  /* 三层：压深罩 → 美术 → 金色角光。罩子必须够厚，
     因为这张卡里塞着模式按钮和"开始匹配"，文字不能被背景吃掉。 */
  background:
    radial-gradient(600px 260px at 100% -20%, rgba(207, 162, 90, .16), transparent 60%),
    linear-gradient(180deg, rgba(13, 19, 16, .62) 0%, rgba(13, 19, 16, .74) 34%, rgba(10, 15, 13, .93) 88%),
    url(../../assets/art/vs-hero.jpg) center 30% / cover no-repeat;
  border: 1px solid var(--vs-line);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .05);
}
.vs-hero-card > * { position: relative; z-index: 1; }
.vs-hero-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.vs-hero-mode {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  padding: 3px 9px;
  border-radius: 999px;
  color: var(--vs-gold-2);
  background: rgba(207, 162, 90, .1);
  border: 1px solid rgba(207, 162, 90, .26);
}
.vs-hero-card h2 {
  font-family: var(--serif);
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.25;
  color: #f6f2e6;
  letter-spacing: -.005em;
}
.vs-hero-sub {
  margin-top: 8px;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--vs-muted);
}
.vs-mode-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin: 20px 0 18px;
}
.vs-mode {
  position: relative;
  text-align: left;
  padding: 12px 13px;
  min-height: 74px;
  border-radius: 11px;
  border: 1px solid var(--vs-line);
  background: rgba(255, 255, 255, .028);
  transition: border-color .16s, background .16s, transform .12s;
}
.vs-mode:hover { background: rgba(255, 255, 255, .055); }
.vs-mode.on {
  border-color: rgba(207, 162, 90, .5);
  background: rgba(207, 162, 90, .1);
  box-shadow: inset 0 0 0 1px rgba(207, 162, 90, .16);
}
.vs-mode b { display: block; font-size: 13px; font-weight: 600; margin-bottom: 3px; }
.vs-mode span { display: block; font-size: 11px; line-height: 1.5; color: var(--vs-muted); }
.vs-mode i {
  position: absolute;
  top: 9px; right: 9px;
  font-style: normal;
  font-size: 9.5px;
  padding: 1px 5px;
  border-radius: 4px;
  color: #17120a;
  background: var(--vs-gold);
  font-weight: 600;
}
.vs-queue-box { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.vs-queue-state { font-size: 12px; color: var(--vs-muted); display: flex; align-items: center; gap: 6px; }
.vs-queue-state b { color: var(--vs-ink); font-family: var(--mono); font-weight: 500; }
/* 三个模式各自排了多少人：这是"为什么排不到"的直接答案。
   以前只有"队列 1/2"，玩家看不出对手在排别的模式，只能反复取消重排。 */
.vs-queue-pools {
  flex-basis: 100%; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 11px; color: var(--vs-faint); margin-top: 2px;
}
.vs-queue-pools span {
  padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--vs-line-2); background: rgba(255, 255, 255, .02);
}
.vs-queue-pools span.on { border-color: color-mix(in srgb, var(--vs-gold) 45%, transparent); color: var(--vs-gold-2); }
.vs-queue-pools b { font-family: var(--mono); font-weight: 600; color: var(--vs-ink-2); }
.vs-queue-pools i { font-style: normal; opacity: .4; }
.vs-pulse {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--vs-green);
  box-shadow: 0 0 0 0 rgba(79, 157, 120, .55);
  animation: vs-pulse 1.6s infinite;
}
@keyframes vs-pulse {
  0% { box-shadow: 0 0 0 0 rgba(79, 157, 120, .5); }
  70% { box-shadow: 0 0 0 9px rgba(79, 157, 120, 0); }
  100% { box-shadow: 0 0 0 0 rgba(79, 157, 120, 0); }
}
.vs-hero-foot {
  margin-top: 16px;
  padding-top: 13px;
  border-top: 1px solid var(--vs-line-2);
  font-size: 11px;
  color: var(--vs-faint);
}

.vs-side { display: flex; flex-direction: column; gap: 14px; }
.vs-panel {
  padding: 16px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(22, 30, 27, .9), rgba(16, 22, 20, .94));
  border: 1px solid var(--vs-line);
}
.vs-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 13px;
  font-size: 11.5px;
  letter-spacing: .04em;
  color: var(--vs-muted);
}

.vs-tier-card { position: relative; overflow: hidden; }
.vs-tier-big {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin-bottom: 12px;
}
.vs-tier-big i {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 14px currentColor;
  align-self: center;
}
.vs-tier-big b { font-family: var(--serif); font-size: 26px; font-weight: 600; letter-spacing: .02em; }
.vs-tier-big span { font-family: var(--mono); font-size: 12px; color: var(--vs-muted); margin-left: auto; }
.vs-lp-bar {
  height: 4px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .07);
  overflow: hidden;
  margin-bottom: 15px;
}
.vs-lp-bar i {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--vs-gold), #efd7a6);
  transition: width .5s ease;
}
.vs-tier-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  text-align: center;
}
.vs-tier-stats div { display: flex; flex-direction: column; gap: 3px; }
.vs-tier-stats span { font-size: 10px; color: var(--vs-faint); }
.vs-tier-stats b { font-family: var(--mono); font-size: 13.5px; font-weight: 500; }

.vs-mini-list { display: flex; flex-direction: column; gap: 2px; }
.vs-mini-row {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 8px 6px;
  border-radius: 8px;
  font-size: 11.5px;
  color: var(--vs-ink-2);
}
.vs-mini-row + .vs-mini-row { border-top: 1px solid var(--vs-line-2); }
.vs-mini-row span { color: var(--vs-muted); }
.vs-mini-row i { font-style: normal; font-family: var(--mono); font-size: 11.5px; color: var(--vs-faint); }
.vs-mini-row i.up { color: var(--vs-green); }
.vs-mini-row i.down { color: var(--vs-red); }
.vs-rank {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--vs-muted);
  text-align: center;
}
.vs-rank.top { color: var(--vs-ink-2); }
.vs-rank.first { color: var(--vs-gold); }

/* ═══════════ 房间列表 ═══════════ */

.vs-rooms-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.vs-rooms-head h2 {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  margin-top: 6px;
  color: #f4f0e4;
}
.vs-rooms-actions { display: flex; gap: 9px; flex-wrap: wrap; }
.vs-room-list { display: flex; flex-direction: column; gap: 8px; }
.vs-room-row {
  display: grid;
  grid-template-columns: 18px minmax(0, 1.6fr) 78px 88px 62px;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  border-radius: 12px;
  text-align: left;
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--vs-line);
  transition: background .16s, border-color .16s, transform .12s;
}
.vs-room-row:hover {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(207, 162, 90, .35);
}
.vs-room-lock { text-align: center; }
.vs-lock-tag {
  display: inline-block;
  font-style: normal;
  font-size: 9.5px;
  letter-spacing: .04em;
  padding: 1px 5px;
  border-radius: 4px;
  color: var(--vs-gold-2);
  background: rgba(207, 162, 90, .14);
  border: 1px solid rgba(207, 162, 90, .26);
  vertical-align: middle;
}
.vs-room-name { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.vs-room-name b { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs-room-name i { font-style: normal; font-size: 11px; color: var(--vs-faint); }
.vs-room-meta { font-size: 11.5px; color: var(--vs-muted); font-family: var(--mono); }
.vs-room-cta { font-size: 12px; color: var(--vs-gold); text-align: right; }

/* ═══════════ 房间内 ═══════════ */

.vs-room-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.vs-room-title { flex: 1; min-width: 0; }
.vs-room-title h2 {
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 600;
  color: #f4f0e4;
  display: flex;
  align-items: center;
  gap: 7px;
}
.vs-room-title span { font-size: 11.5px; color: var(--vs-faint); }
.vs-room-title span b { font-family: var(--mono); color: var(--vs-ink-2); font-weight: 500; letter-spacing: .04em; }

.vs-seats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}
.vs-seat {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .035);
  border: 1px solid var(--vs-line);
  transition: border-color .16s, background .16s;
}
.vs-seat.self {
  border-color: rgba(207, 162, 90, .45);
  background: rgba(207, 162, 90, .07);
}
.vs-seat.empty { opacity: .62; }
.vs-seat-id { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.vs-seat-id b { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs-seat-id span { font-size: 10.5px; color: var(--vs-muted); }
.vs-ready {
  margin-left: auto;
  font-size: 10.5px;
  padding: 3px 8px;
  border-radius: 6px;
  color: var(--vs-faint);
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--vs-line-2);
  white-space: nowrap;
}
.vs-ready.on { color: #bfe4d1; background: rgba(79, 157, 120, .16); border-color: rgba(79, 157, 120, .34); }
.vs-ready.ai { color: var(--vs-faint); }
.vs-seat-kick {
  position: absolute;
  top: 6px; right: 6px;
  width: 22px; height: 22px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  font-size: 10px;
  color: var(--vs-faint);
  opacity: 0;
  transition: opacity .16s, background .16s;
}
.vs-seat:hover .vs-seat-kick { opacity: 1; }
.vs-seat-kick:hover { background: rgba(196, 103, 79, .2); color: #f0c6ba; }

.vs-room-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 16px;
  align-items: start;
}
.vs-room-chat { display: flex; flex-direction: column; min-height: 300px; }
.vs-chat {
  flex: 1;
  min-height: 180px;
  max-height: 320px;
  overflow-y: auto;
  padding-right: 4px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.vs-chat-row { display: flex; gap: 8px; font-size: 12.5px; line-height: 1.6; }
.vs-chat-row b { color: var(--vs-gold); font-weight: 500; flex: 0 0 auto; }
.vs-chat-row span { color: var(--vs-ink-2); word-break: break-word; }
.vs-chat-form { display: flex; gap: 8px; margin-top: 12px; }
.vs-chat-form input { margin-top: 0; flex: 1; height: 38px; }

.vs-kv { display: flex; flex-direction: column; gap: 1px; }
.vs-kv > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  font-size: 12px;
}
.vs-kv > div + div { border-top: 1px solid var(--vs-line-2); }
.vs-kv dt { color: var(--vs-faint); }
.vs-kv dd { color: var(--vs-ink); font-family: var(--mono); }
.vs-room-actions { display: flex; flex-direction: column; gap: 9px; margin-top: 14px; }
.vs-room-actions .vs-form-hint { margin: 0; text-align: center; }
.vs-room-lock { font-size: 12px; }

/* ═══════════ 排行榜 / 战绩 ═══════════ */

.vs-page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.vs-page-head h2 {
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 600;
  margin-top: 6px;
  color: #f4f0e4;
}
.vs-table {
  max-width: 980px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--vs-line);
  background: rgba(255, 255, 255, .022);
}
.vs-tr {
  display: grid;
  grid-template-columns: 48px minmax(0, 2.1fr) minmax(88px, .9fr) minmax(64px, .62fr) minmax(60px, .58fr) minmax(52px, .52fr);
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  font-size: 12.5px;
  color: var(--vs-ink-2);
}
.vs-tr + .vs-tr { border-top: 1px solid var(--vs-line-2); }
.vs-tr.me { background: rgba(207, 162, 90, .08); }
.vs-th {
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--vs-faint);
  background: rgba(0, 0, 0, .22);
}
.vs-rank-num { font-family: var(--mono); font-weight: 600; color: var(--vs-muted); }
.vs-rank-num.top1 { color: #e5c580; }
.vs-rank-num.top2 { color: #c3cdd4; }
.vs-rank-num.top3 { color: #c79770; }
.vs-td-user { display: flex; align-items: center; gap: 9px; min-width: 0; }
.vs-td-user b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 0 0 auto; }
.vs-bio {
  font-style: normal;
  font-size: 11px;
  color: var(--vs-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  padding-left: 2px;
}

.vs-his-list { display: flex; flex-direction: column; gap: 7px; }
.vs-his-row {
  max-width: 980px;
  display: grid;
  grid-template-columns: 46px 62px 100px 128px minmax(0, 1fr) 74px;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  font-size: 12px;
  color: var(--vs-ink-2);
  border-radius: 11px;
  background: rgba(255, 255, 255, .028);
  border: 1px solid var(--vs-line);
}
.vs-his-mode { color: var(--vs-gold); font-size: 11.5px; }
.vs-his-row i { font-style: normal; font-family: var(--mono); text-align: right; color: var(--vs-faint); }
.vs-his-row i.up { color: var(--vs-green); }
.vs-his-row i.down { color: var(--vs-red); }

/* ═══════════ 模态层 ═══════════ */

.vs-layer {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: none;
  place-items: center;
  padding: 20px;
}
.vs-layer.on { display: grid; }
.vs-layer-bg {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(6, 9, 8, .72);
  backdrop-filter: blur(6px);
  animation: vs-fade .18s ease both;
}
.vs-modal {
  position: relative;
  width: min(560px, 100%);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  padding: 22px;
  border-radius: 16px;
  background: linear-gradient(180deg, #1a2420, #121815);
  border: 1px solid var(--vs-line);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .05);
  animation: vs-pop .2s cubic-bezier(.2, .9, .3, 1.2) both;
  color: var(--vs-ink);
}
.vs-modal-sm { width: min(392px, 100%); }
.vs-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.vs-modal-head h3 {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .01em;
}
.vs-modal-text { font-size: 12.5px; line-height: 1.75; color: var(--vs-muted); margin-bottom: 14px; }
.vs-modal-actions { display: flex; gap: 9px; justify-content: flex-end; margin-top: 18px; }
.vs-form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.vs-form-row:has(> label:nth-child(3)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vs-form-hint { font-size: 11px; line-height: 1.65; color: var(--vs-faint); margin-top: -3px; }

.vs-avatar-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 7px;
  margin: 6px 0 4px;
}
.vs-av-pick {
  display: grid;
  place-items: center;
  padding: 4px;
  border-radius: 10px;
  border: 1px solid transparent;
  transition: border-color .16s, background .16s;
}
.vs-av-pick:hover { background: rgba(255, 255, 255, .06); }
.vs-av-pick.on { border-color: rgba(207, 162, 90, .6); background: rgba(207, 162, 90, .1); }

.vs-profile-top {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--vs-line-2);
}
.vs-profile-top > div { flex: 1; min-width: 0; }
.vs-profile-top b { display: block; font-size: 15px; font-weight: 600; }
.vs-profile-top span { display: block; font-size: 11px; color: var(--vs-faint); margin-top: 3px; font-family: var(--mono); }
.vs-profile-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--vs-line-2);
  font-size: 10.5px;
  color: var(--vs-faint);
  line-height: 1.6;
}

/* 匹配成功 */
.vs-count {
  font-family: var(--mono);
  font-size: 20px;
  font-weight: 600;
  color: var(--vs-gold);
}
.vs-found-list { display: flex; flex-direction: column; gap: 7px; }
.vs-found-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .035);
  border: 1px solid var(--vs-line-2);
  font-size: 12.5px;
}
.vs-found-row b { font-weight: 600; }
.vs-found-row span { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--vs-muted); }

/* ═══════════ 结算 ═══════════ */

.vs-modal-host {
  position: fixed;
  inset: 0;
  z-index: 90;
  /* 挂在 body 上，必须自己声明配色：否则继承观众端的深墨字，深底上等于隐形 */
  color: var(--vs-ink);
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(6, 9, 8, .74);
  backdrop-filter: blur(7px);
  opacity: 0;
  transition: opacity .22s ease;
}
.vs-modal-host.in { opacity: 1; }
.vs-result-host { background: rgba(6, 9, 8, .82); }
.vs-result {
  width: min(440px, 100%);
  padding: 26px;
  color: var(--vs-ink);
  border-radius: 18px;
  text-align: center;
  background:
    radial-gradient(420px 200px at 50% -30%, rgba(207, 162, 90, .22), transparent 62%),
    linear-gradient(180deg, #1b2622, #111715);
  border: 1px solid var(--vs-line);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .6);
  animation: vs-pop .26s cubic-bezier(.2, .9, .3, 1.2) both;
}
.vs-result-kicker {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--vs-gold);
}
.vs-result h2 {
  font-family: var(--serif);
  font-size: 40px;
  line-height: 1.1;
  margin: 10px 0 6px;
  color: #f7f2e4;
}
.vs-result-sub { font-size: 12.5px; color: var(--vs-muted); min-height: 18px; }
.vs-result-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 20px 0 18px;
  padding: 14px 8px;
  border-radius: 12px;
  background: rgba(0, 0, 0, .28);
  border: 1px solid var(--vs-line-2);
}
.vs-result-grid > div { display: flex; flex-direction: column; gap: 5px; }
.vs-result-grid span { font-size: 10px; color: var(--vs-faint); }
.vs-result-grid b { font-family: var(--mono); font-size: 17px; font-weight: 600; }
.vs-delta.up { color: var(--vs-green); }
.vs-delta.down { color: var(--vs-red); }
.vs-result-actions { display: flex; gap: 9px; justify-content: center; }
.vs-result-note { margin-top: 14px; font-size: 10.5px; color: var(--vs-faint); }

/* ═══════════ toast ═══════════ */

.vs-toasts {
  position: fixed;
  left: 50%;
  bottom: 34px;
  transform: translateX(-50%);
  z-index: 120;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}
.vs-toast {
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 12.5px;
  color: var(--vs-ink);
  background: rgba(22, 30, 27, .96);
  border: 1px solid var(--vs-line);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .4);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .22s ease, transform .22s ease;
  max-width: min(520px, 88vw);
  text-align: center;
}
/* 重复计数角标：同一条提示在短时间内重复时只留一条，次数挂在右侧。
   没有它，一次「同步异常」循环就会刷出十几条一模一样的横条糊住半个屏幕。 */
.vs-toast { display: flex; align-items: center; gap: 8px; justify-content: center; }
.vs-toast-n {
  flex: 0 0 auto;
  font-style: normal;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  padding: 1px 5px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .1);
  opacity: .85;
}
.vs-toast.in { opacity: 1; transform: translateY(0); }
.vs-toast-ok { border-color: rgba(79, 157, 120, .45); color: #c8e8d8; }
.vs-toast-warn { border-color: rgba(207, 162, 90, .45); color: var(--vs-gold-2); }
.vs-toast-bad { border-color: rgba(196, 103, 79, .5); color: #f0c1b3; }

@keyframes vs-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes vs-pop {
  from { opacity: 0; transform: translateY(10px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ═══════════ 对局 HUD ═══════════ */

.vs-hud {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 45;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 7px 10px 7px 8px;
  border-radius: 999px;
  background: rgba(10, 14, 12, .82);
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
  backdrop-filter: blur(14px);
  color: var(--vs-ink);
  font-size: 12px;
  max-width: calc(100vw - 24px);
}
.vs-hud-seat { display: flex; align-items: center; gap: 9px; padding-right: 2px; }
.vs-hud-id { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.vs-hud-id b { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.vs-hud-id span { font-size: 10px; color: var(--vs-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 190px; }
.vs-hud-seat::before {
  content: "";
  width: 3px;
  align-self: stretch;
  border-radius: 3px;
  background: var(--fc, #888);
}
.vs-hud-stats {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 12px;
  border-left: 1px solid rgba(255, 255, 255, .1);
  border-right: 1px solid rgba(255, 255, 255, .1);
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--vs-ink-2);
}
.vs-hud-actions { display: flex; align-items: center; gap: 8px; }
.vs-net { font-size: 10.5px; color: var(--vs-muted); font-family: var(--mono); white-space: nowrap; }
.vs-net[data-state="on"] { color: var(--vs-green); }
.vs-net[data-state="off"] { color: var(--vs-gold); }
.vs-hud .vs-btn.tiny { color: var(--vs-ink-2); }

/* 对局中：收起观众端的顶栏与两侧栏，把画面完整让给战场 */
/* 顶栏用 display:none 会从网格里彻底消失，剩下 .main 变成第一行；
   所以这里必须改成"只有一行"，否则 .main 会落进 0 高度的行里，战场直接塌成 0。 */
body.vs-live #arena { grid-template-rows: minmax(0, 1fr); }
body.vs-live .topbar { display: none; }
body.vs-live .rail { display: none; }
body.vs-live .main { grid-template-columns: minmax(0, 1fr); }
body.vs-live .stage { height: 100%; }
/* 观众端的评分榜 / 时间轴 / 解说条在对局里都是干扰项，本席信息由 .vs-hud 负责 */
body.vs-live .stage-hud,
body.vs-live .tl,
body.vs-live .lower-third { display: none; }
/* 小地图不能丢：改成右下角浮层，不占布局空间 */
body.vs-live .rail.rail-right {
  display: block;
  position: fixed;
  right: 12px;
  bottom: 12px;
  width: 132px;
  height: auto;
  z-index: 44;
  background: transparent;
  border: none;
  pointer-events: none;
}
body.vs-live .rail-right > * { display: none; }
body.vs-live .rail-right > .mini-wrap { display: block; padding: 0; }
body.vs-live .rail-right .mini-legend { display: none; }
body.vs-live .rail-right #minimap {
  border-color: rgba(255, 255, 255, .16);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
}

/* ═══════════ 响应式 ═══════════ */

@media (max-width: 1040px) {
  .vs-ladder { grid-template-columns: minmax(0, 1fr); }
  .vs-side { flex-direction: row; flex-wrap: wrap; }
  .vs-side > .vs-panel { flex: 1 1 260px; }
}

@media (max-width: 860px) and (min-height: 561px) {
  .vs-auth { grid-template-columns: minmax(0, 1fr); gap: 26px; min-height: 0; padding: 8px 0 24px; }
  .vs-auth-art { max-width: none; }
  .vs-auth-card { justify-self: stretch; max-width: none; }
  .vs-room-cols { grid-template-columns: minmax(0, 1fr); }
  .vs-form-row, .vs-form-row:has(> label:nth-child(3)) { grid-template-columns: minmax(0, 1fr); }
  .vs-room-row { grid-template-columns: 16px minmax(0, 1fr) 60px 62px; }
  .vs-room-row .vs-room-cta { display: none; }
  .vs-tr { grid-template-columns: 34px minmax(0, 1fr) 100px 56px; }
  .vs-tr > span:nth-child(5), .vs-tr > span:nth-child(6) { display: none; }
  .vs-his-row { grid-template-columns: 40px 54px minmax(0, 1fr) 66px; }
  .vs-his-row > span:nth-child(4), .vs-his-row > span:nth-child(5) { display: none; }
  .vs-avatar-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* 横屏手机基准（844×390 及同量级短屏）：压缩间距，不缩可读字号 */
@media (max-height: 560px) {
  .vs-top { height: 48px; flex-basis: 48px; padding: 0 12px; gap: 10px; }
  .vs-brand b { font-size: 14px; }
  .vs-brand em { display: none; }
  .vs-tabs button { height: 30px; padding: 0 10px; font-size: 12px; }
  .vs-me-btn { min-height: 36px; padding: 2px 9px 2px 3px; }
  .vs-icon-btn { width: 34px; height: 34px; }
  .vs-main { padding: 12px 12px 16px; }

  .vs-auth {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
    gap: 18px;
    min-height: 0;
    padding: 4px 0 12px;
    align-items: center;
  }
  .vs-auth-art h1 { font-size: 24px; margin-bottom: 8px; }
  .vs-auth-art p { font-size: 12px; line-height: 1.6; }
  .vs-auth-points { display: none; }
  .vs-auth-card { padding: 16px; max-width: none; }
  .vs-app input, .vs-app select, .vs-modal input { height: 38px; }
  .vs-auth-form label, .vs-form label { margin-bottom: 9px; }
  .vs-btn.big { min-height: 42px; font-size: 14px; }

  .vs-hero-card { padding: 16px; border-radius: 14px; }
  .vs-hero-card h2 { font-size: 20px; }
  .vs-hero-sub { font-size: 11.5px; }
  .vs-mode-row { margin: 12px 0; gap: 7px; }
  .vs-mode { padding: 8px 10px; min-height: 0; }
  .vs-mode span { display: none; }
  .vs-hero-foot { margin-top: 10px; padding-top: 9px; }
  .vs-side { flex-direction: row; }
  .vs-panel { padding: 12px; }
  .vs-rooms-head { margin-bottom: 10px; }
  .vs-rooms-head h2 { font-size: 17px; }
  .vs-room-row { padding: 10px 12px; }
  .vs-seats { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 7px; margin-bottom: 10px; }
  .vs-seat { padding: 9px; }
  .vs-room-head { margin-bottom: 10px; gap: 10px; }
  .vs-room-title h2 { font-size: 17px; }
  .vs-modal { padding: 16px; }
  .vs-modal-head { margin-bottom: 10px; }
  .vs-result { padding: 18px; }
  .vs-result h2 { font-size: 30px; }
  .vs-result-grid { margin: 12px 0; padding: 10px 6px; }
  .vs-toasts { bottom: 16px; }

  .vs-hud {
    top: 8px;
    gap: 8px;
    padding: 5px 8px 5px 6px;
    font-size: 11px;
  }
  .vs-hud-id b { max-width: 100px; font-size: 11.5px; }
  .vs-hud-id span { font-size: 9px; }
  .vs-hud-stats { gap: 8px; padding: 0 8px; font-size: 10.5px; }
  .vs-hud-actions .vs-net { display: none; }
  body.vs-live .rail.rail-right { width: 104px; right: 8px; bottom: 8px; }
}

/* 竖屏手机：对战平台按"横屏为标准"，但登录仍要能用 */
@media (max-width: 620px) and (min-height: 561px) {
  .vs-top { flex-wrap: wrap; height: auto; flex-basis: auto; padding: 10px 12px; gap: 8px; }
  .vs-tabs { order: 3; width: 100%; }
  .vs-tabs button { flex: 1; }
  .vs-main { padding: 14px 12px 24px; }
  .vs-ladder { gap: 12px; }
  .vs-mode-row { grid-template-columns: minmax(0, 1fr); }
  .vs-avatar-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .vs-result-grid { grid-template-columns: repeat(2, 1fr); }
  .vs-td-user { gap: 6px; }
  .vs-hud { top: auto; bottom: 10px; }
}

/* 深色端同款行内复选框 */
.vs-chk,
label.vs-chk {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--vs-line);
  border-radius: 9px;
  background: rgba(255, 255, 255, .03);
  font-size: 12.5px;
  color: var(--vs-ink-2);
  cursor: pointer;
  user-select: none;
}
.vs-chk:hover { border-color: rgba(255, 255, 255, .18); }
.vs-chk input { accent-color: var(--vs-gold); width: 14px; height: 14px; cursor: pointer; }
.vs-chk:has(input:checked) {
  border-color: rgba(207, 162, 90, .55);
  background: rgba(207, 162, 90, .1);
  color: var(--vs-gold-2);
}