/* ============================================================
   烬火协议 · Ember Protocol — 全局样式基底
   设计语言：冷雨工业废墟 × 琥珀/青蓝战术 HUD
   规则：所有面板使用切角(clip-path)、1px 描边、扫描线纹理；
        正文最小 12px，触控目标 ≥ 44px；安全区变量集中在 :root。
   ============================================================ */

:root {
  --c-bg: #06090c;
  --c-bg-2: #0b1015;
  --c-panel: rgba(12, 18, 23, 0.86);
  --c-panel-2: rgba(17, 25, 32, 0.94);
  --c-line: rgba(140, 170, 185, 0.24);
  --c-line-hot: rgba(245, 162, 93, 0.55);
  --c-text: #dfe8ee;
  --c-text-dim: #8ba0ad;
  --c-text-mute: #5f7381;
  --c-amber: #f5a25d;
  --c-amber-2: #ffcf8a;
  --c-cyan: #58d2c8;
  --c-cyan-dim: #2c8f8c;
  --c-danger: #e4573d;
  --c-danger-2: #ff8a6a;
  --c-ok: #8fd66a;
  --c-gold: #e8c06a;

  --r-common: #9fb0bb;
  --r-uncommon: #7fd06a;
  --r-rare: #5aa9f0;
  --r-epic: #b47cf0;
  --r-legend: #f0a63c;

  --fs-micro: 10px;
  --fs-label: 11px;
  --fs-body: 13px;
  --fs-title: 15px;
  --fs-h: 22px;
  --fs-xl: 34px;
  --fs-xxl: 54px;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 18px;
  --sp-5: 26px;
  --sp-6: 40px;

  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);

  --font-ui: "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", "Hiragino Sans GB",
    system-ui, sans-serif;
  --font-tech: "Bahnschrift", "DIN Alternate", "Franklin Gothic Medium", "PingFang SC",
    "Microsoft YaHei", sans-serif;

  --z-world: 0;
  --z-fx: 40;
  --z-hud: 60;
  --z-menu: 80;
  --z-toast: 95;
  --z-boot: 100;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: 1.45;
  text-rendering: optimizeLegibility;
}

body {
  user-select: none;
  cursor: default;
}

#stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
}

#game-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: var(--z-world);
  touch-action: none;
}

/* ---------- 全屏反馈层 ---------- */

#fx-layer {
  position: fixed;
  inset: 0;
  z-index: var(--z-fx);
  pointer-events: none;
}

#fx-flash {
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
}

#fx-damage {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: radial-gradient(
    ellipse at center,
    rgba(180, 30, 12, 0) 38%,
    rgba(190, 40, 16, 0.32) 74%,
    rgba(120, 14, 4, 0.72) 100%
  );
  transition: opacity 220ms ease-out;
}

#fx-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at 50% 55%,
    rgba(0, 0, 0, 0) 52%,
    rgba(0, 0, 0, 0.34) 88%,
    rgba(0, 0, 0, 0.62) 100%
  );
  mix-blend-mode: multiply;
}

#fx-hitstop-scan {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(255, 255, 255, 0.05) 0 1px,
    rgba(0, 0, 0, 0) 1px 3px
  );
}

/* ---------- 启动画面 ---------- */

#boot {
  position: fixed;
  inset: 0;
  z-index: var(--z-boot);
  display: grid;
  place-content: center;
  gap: var(--sp-4);
  justify-items: center;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(245, 162, 93, 0.09), transparent 60%),
    linear-gradient(180deg, #05080b, #0a1116);
  transition: opacity 520ms ease, visibility 520ms;
}

#boot.boot--done {
  opacity: 0;
  visibility: hidden;
}

.boot-mark {
  font-family: var(--font-tech);
  font-size: var(--fs-xxl);
  font-weight: 600;
  letter-spacing: 0.24em;
  color: var(--c-text);
}

.boot-mark span {
  display: block;
  font-size: var(--fs-title);
  letter-spacing: 0.62em;
  color: var(--c-amber);
  text-align: center;
  margin-top: 6px;
}

.boot-bar {
  width: min(360px, 70vw);
  height: 2px;
  background: rgba(140, 170, 185, 0.18);
  overflow: hidden;
}

.boot-bar i {
  display: block;
  width: 34%;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--c-amber), transparent);
  animation: boot-slide 1.15s ease-in-out infinite;
}

@keyframes boot-slide {
  0% {
    transform: translateX(-120%);
  }
  100% {
    transform: translateX(320%);
  }
}

.boot-note {
  font-size: var(--fs-label);
  letter-spacing: 0.18em;
  color: var(--c-text-dim);
  text-transform: uppercase;
}

/* ---------- 通用件 ---------- */

#ui-root {
  position: fixed;
  inset: 0;
  z-index: var(--z-hud);
  pointer-events: none;
}

#ui-root .screen {
  pointer-events: auto;
}

.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
}

.screen[hidden] {
  display: none !important;
}

/* hidden 属性必须压过后面的 display 声明 */
[hidden] {
  display: none !important;
}

.panel {
  position: relative;
  background: var(--c-panel);
  border: 1px solid var(--c-line);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  backdrop-filter: blur(9px);
}

.panel--solid {
  background: var(--c-panel-2);
}

.panel__title {
  font-family: var(--font-tech);
  font-size: var(--fs-label);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-amber);
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--c-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
}

.panel__body {
  padding: var(--sp-3);
}

.micro {
  font-family: var(--font-tech);
  font-size: var(--fs-micro);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-text-mute);
}

.tech {
  font-family: var(--font-tech);
  letter-spacing: 0.06em;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

button:focus-visible,
[tabindex]:focus-visible {
  outline: 1px solid var(--c-amber);
  outline-offset: 2px;
}

.btn {
  position: relative;
  min-height: 34px;
  padding: 0 var(--sp-3);
  border: 1px solid var(--c-line);
  background: linear-gradient(180deg, rgba(40, 56, 66, 0.5), rgba(14, 20, 25, 0.7));
  color: var(--c-text);
  font-family: var(--font-tech);
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
  transition: border-color 140ms, background 140ms, transform 90ms;
}

.btn:hover:not(:disabled) {
  border-color: var(--c-line-hot);
  background: linear-gradient(180deg, rgba(70, 92, 106, 0.6), rgba(20, 28, 34, 0.8));
}

.btn:active:not(:disabled) {
  transform: translateY(1px);
}

.btn:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.btn--primary {
  border-color: rgba(245, 162, 93, 0.7);
  background: linear-gradient(180deg, rgba(245, 162, 93, 0.26), rgba(120, 62, 20, 0.32));
  color: var(--c-amber-2);
}

.btn--primary:hover:not(:disabled) {
  background: linear-gradient(180deg, rgba(245, 162, 93, 0.4), rgba(140, 74, 24, 0.4));
}

.btn--danger {
  border-color: rgba(228, 87, 61, 0.6);
  color: var(--c-danger-2);
}

.btn--ghost {
  background: none;
}

.btn--wide {
  width: 100%;
  justify-content: center;
}

.btn--big {
  min-height: 46px;
  font-size: var(--fs-body);
  letter-spacing: 0.2em;
}

/* 稀有度 */
.r-common {
  color: var(--r-common);
}
.r-uncommon {
  color: var(--r-uncommon);
}
.r-rare {
  color: var(--r-rare);
}
.r-epic {
  color: var(--r-epic);
}
.r-legend {
  color: var(--r-legend);
}

.bar {
  position: relative;
  height: 4px;
  background: rgba(140, 170, 185, 0.16);
  overflow: hidden;
}

.bar > i {
  position: absolute;
  inset: 0 auto 0 0;
  display: block;
  background: var(--c-cyan);
  transition: width 180ms linear;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

#diag-overlay {
  position: fixed;
  left: 0;
  top: 0;
  max-width: 380px;
  max-height: 60vh;
  overflow: hidden;
  z-index: 200;
  padding: 6px 8px;
  pointer-events: none;
  background: rgba(4, 8, 11, 0.82);
  border: 1px solid rgba(88, 210, 200, 0.4);
  color: #9fe8e0;
  font: 10px/1.35 ui-monospace, "Cascadia Mono", monospace;
  pointer-events: none;
  white-space: pre;
}

.scroll {
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(140, 170, 185, 0.4) transparent;
}

.scroll::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.scroll::-webkit-scrollbar-thumb {
  background: rgba(140, 170, 185, 0.28);
}

.scroll::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.03);
}

/* ============================================================
   战斗 HUD
   ============================================================ */
.hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  font-family: var(--font-ui);
}

.hud .panel {
  background: linear-gradient(180deg, rgba(10, 15, 19, 0.72), rgba(8, 12, 16, 0.58));
  border-color: rgba(140, 170, 185, 0.16);
  backdrop-filter: blur(4px);
}

.hud-tl {
  position: absolute;
  left: calc(16px + var(--safe-l));
  top: calc(14px + var(--safe-t));
  width: 230px;
  padding: 10px 12px 12px;
  display: grid;
  gap: 6px;
}

.hud-op { display: flex; align-items: baseline; justify-content: space-between; }
.hud-op__name { font-family: var(--font-tech); font-size: 16px; letter-spacing: 0.06em; }
.hud-op__role { color: var(--c-amber); }
.hud-op__mods { color: var(--c-text-mute); }

.bar__label {
  position: absolute;
  right: 4px;
  top: -14px;
  font-family: var(--font-tech);
  font-size: var(--fs-micro);
  letter-spacing: 0.12em;
  color: var(--c-text-dim);
}

.bar {
  position: relative;
  height: 8px;
  background: rgba(10, 14, 18, 0.72);
  border: 1px solid rgba(140, 170, 185, 0.2);
  overflow: visible;
}

.bar > i { height: 100%; background: linear-gradient(90deg, #58d2c8, #8ef0ff); transition: width 120ms linear; }
.bar--hp > i { background: linear-gradient(90deg, #d8534a, #ff8a6a); }
.bar--armor > i { background: linear-gradient(90deg, #6f7f8c, #cfd8e0); }
.bar--shield > i { background: linear-gradient(90deg, #4a7fd8, #8ec8ff); }
.bar--wide { height: 6px; margin: 6px 0 0; }

.hud-tc {
  position: absolute;
  left: 50%;
  top: calc(12px + var(--safe-t));
  transform: translateX(-50%);
  width: min(420px, 46vw);
  display: grid;
  gap: 6px;
  justify-items: center;
}

.hud-obj { width: 100%; padding: 8px 12px 10px; display: grid; gap: 5px; }
.hud-obj__title { font-family: var(--font-tech); font-size: 15px; letter-spacing: 0.08em; }
.hud-obj__sub { color: var(--c-text-dim); }

.hud-alert {
  font-family: var(--font-tech);
  font-size: var(--fs-label);
  letter-spacing: 0.2em;
  color: var(--c-amber-2);
  background: rgba(20, 14, 8, 0.72);
  border: 1px solid rgba(245, 162, 93, 0.4);
  padding: 5px 12px;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 180ms, transform 180ms;
}

.hud-alert.is-show { opacity: 1; transform: translateY(0); }
.hud-alert.is-good { color: var(--c-ok); border-color: rgba(143, 214, 106, 0.45); background: rgba(12, 20, 10, 0.72); }
.hud-alert.is-bad { color: var(--c-danger-2); border-color: rgba(228, 87, 61, 0.5); background: rgba(22, 10, 8, 0.75); }

.hud-tr {
  position: absolute;
  right: calc(16px + var(--safe-r));
  top: calc(14px + var(--safe-t));
  width: 152px;
  padding: 8px 10px;
  display: grid;
  gap: 5px;
}

.hud-stat { display: flex; align-items: baseline; justify-content: space-between; }
.hud-stat b { font-family: var(--font-tech); font-size: 14px; letter-spacing: 0.06em; }

/* ============================================================
   ARENA STRIKE 缝合层
   iframe 承载整局对战（它自己渲染、自己锁鼠标），外面只保留
   烬火协议样式的目标卡、状态栏、技能条与撤出按钮。
   层级：iframe(30) < 本层(50) < #ui-root 菜单(60) < 提示/弹窗(95)
   ============================================================ */

.arena-frame {
  position: absolute;
  inset: 0;
  z-index: 30;
  width: 100%;
  height: 100%;
  border: 0;
  background: #05080a;
}

.arena-overlay {
  position: absolute;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  font-family: var(--font-ui);
  color: var(--c-text);
}

.arena-overlay > * { position: absolute; }

.arena-top {
  top: calc(var(--safe-t) + 12px);
  left: 50%;
  transform: translateX(-50%);
  width: min(420px, 42vw);
}

.arena-obj {
  display: grid;
  gap: 3px;
  padding: 7px 14px 9px;
  background: var(--c-panel);
  border: 1px solid var(--c-line);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}

.arena-obj__title { font-family: var(--font-tech); font-size: 14px; letter-spacing: 0.08em; color: var(--c-amber); }
.arena-obj__row { display: flex; align-items: baseline; gap: 6px; }
.arena-obj__row b { font-family: var(--font-tech); font-size: 22px; line-height: 1.1; }
.arena-obj__sub { color: var(--c-text-dim); }

.arena-pips { display: flex; gap: 4px; margin-top: 2px; }
.arena-pips i { width: 14px; height: 4px; background: rgba(140, 170, 185, 0.28); clip-path: polygon(2px 0, 100% 0, calc(100% - 2px) 100%, 0 100%); }
.arena-pips i.is-done { background: var(--c-ok); }
.arena-pips i.is-now { background: var(--c-amber); }

.arena-guide { display: flex; align-items: center; gap: 6px; margin-top: 3px; color: var(--c-cyan); font-family: var(--font-tech); font-size: 12px; }
.arena-guide i { display: inline-block; font-style: normal; transition: transform 120ms linear; }
.arena-guide .micro { color: var(--c-text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.arena-plate {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  padding: 4px 12px 5px;
  background: var(--c-panel);
  border: 1px solid var(--c-line-hot);
  border-left: 3px solid #8ec8ff;
  font-family: var(--font-tech);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: #cfe6ff;
}
.arena-plate[hidden] { display: none; }
.arena-plate .micro { color: var(--c-text-dim); }
.arena-plate b { color: #9fd8ff; }
.arena-plate > i { display: flex; gap: 3px; margin-left: auto; font-style: normal; }
.arena-plate > i > i { width: 14px; height: 5px; background: rgba(140, 170, 185, 0.28); clip-path: polygon(2px 0, 100% 0, calc(100% - 2px) 100%, 0 100%); }
.arena-plate > i > i.is-on { background: #8ec8ff; }
.arena-plate--deploy { border-left-color: var(--c-amber); }
.arena-plate--deploy b { color: var(--c-amber-2); }

/* ---------- 物品图标：底色 = 稀有度（白/绿/蓝/紫/金），上面压深色图标 ---------- */
.gi-plate {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 6px;
  background: var(--gi-bg, #e9eef2);
  display: grid;
  place-items: center;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.38), 0 1px 2px rgba(0, 0, 0, 0.35);
  align-self: center;
}
.gi-plate > img {
  width: 72%;
  height: 72%;
  filter: brightness(0) saturate(0) opacity(0.82);
  pointer-events: none;
}
.row--item:has(> .gi-plate) > .dot { display: none; }
.gi-plate--lg { width: 46px; height: 46px; border-radius: 8px; }
.gi-plate--sm { width: 26px; height: 26px; border-radius: 5px; }
.gi-plate--xl { width: 64px; height: 64px; border-radius: 10px; }

.arena-interact {
  left: 50%;
  bottom: calc(var(--safe-b) + 104px);
  transform: translateX(-50%);
  width: 240px;
  padding: 8px 12px 10px;
  background: var(--c-panel);
  border: 1px solid var(--c-line-hot);
  text-align: center;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.arena-interact b { display: block; font-family: var(--font-tech); font-size: 13px; letter-spacing: 0.08em; color: var(--c-amber-2); margin-bottom: 4px; }
.arena-interact .micro { color: var(--c-text-dim); }
.arena-interact[hidden] { display: none; }

.arena-vitals {
  left: calc(var(--safe-l) + 24px);
  bottom: calc(var(--safe-b) + 24px);
  display: grid;
  gap: 3px;
  min-width: 176px;
  padding: 8px 12px 9px;
  background: var(--c-panel);
  border: 1px solid var(--c-line);
  border-left: 3px solid var(--c-cyan-dim);
}

.arena-vital { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.arena-vital b { font-family: var(--font-tech); font-size: 15px; letter-spacing: 0.04em; }
.arena-vital #arena-hp { color: var(--c-danger-2); }
.arena-vital #arena-shield { color: #8ec8ff; }
.arena-vital #arena-armor { color: #cfd8e0; }
.arena-vital #arena-ammo { font-size: 13px; }

/* 左下角条状状态：生命 / 护甲 / 护盾 */
.arena-stat { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.arena-stat b { font-family: var(--font-tech); font-size: 15px; letter-spacing: 0.04em; }
.arena-stat #arena-hp { color: var(--c-danger-2); }
.arena-barline { height: 7px; margin: 2px 0 4px; }
.arena-barline > i { height: 100%; display: block; transition: width 120ms linear; }

/* 部位免伤板（头盔/护甲）：四个圆点，亮起数 = 还能免疫的子弹数 */
.plate-dots { display: flex; gap: 5px; margin: 1px 0 5px; }
.plate-dots > i {
  width: 9px; height: 9px; border-radius: 50%;
  border: 1px solid rgba(150, 180, 195, 0.35);
  background: rgba(12, 16, 20, 0.7);
  transition: background 140ms linear, box-shadow 140ms linear, border-color 140ms linear;
}
/* 亮：还能挡一发 */
.plate-dots > i.is-on {
  background: linear-gradient(180deg, #dff3ff, #8ec8ff);
  border-color: rgba(160, 210, 255, 0.9);
  box-shadow: 0 0 6px rgba(142, 200, 255, 0.75);
}
/* 已熄灭但可回亮（在带入型号范围内） */
.plate-dots > i.is-off { background: rgba(90, 110, 125, 0.35); border-color: rgba(140, 170, 185, 0.3); }
/* 超出带入型号：这块板本来就没有 */
.plate-dots > i.is-none { background: rgba(10, 14, 18, 0.5); border-color: rgba(90, 110, 125, 0.18); }

.arena-bag {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(520px, 74vw);
  max-height: min(70vh, 560px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  background: rgba(9, 13, 17, 0.94);
  border: 1px solid var(--c-line-hot);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
}
.arena-bag[hidden] { display: none; }
.arena-bag header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--c-line); padding-bottom: 6px; }
.arena-bag header b { font-family: var(--font-tech); font-size: 15px; letter-spacing: 0.08em; color: var(--c-amber-2); }
.arena-bag__list { overflow-y: auto; display: grid; gap: 4px; padding-right: 4px; }
.arena-bag__row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 4px 6px; background: rgba(20, 28, 34, 0.6); }
.arena-bag__row b { font-weight: 500; }
.arena-bag footer { border-top: 1px solid var(--c-line); padding-top: 6px; color: var(--c-text-dim); line-height: 1.6; }

/* ---------- 局内背包（重做）：左侧掉落物栏 + 右侧网格 ---------- */
/**
 * ⚠️ `.arena-overlay` 是整层 pointer-events:none 的"透传层"，每个可交互子元素都要自己开 auto。
 * 这里漏过一次：背包面板没开 auto，于是面板上的点击/拖拽全部穿透到 iframe 画布 ——
 * 表现为"背包里一点就开火、鼠标又被锁回去、按钮和拖动全都没反应"。
 */
.arena-bag { width: min(760px, 92vw); pointer-events: auto; }
/* 拖拽自己实现（pointer 事件），所以关掉浏览器自带的拖放/选中：
   否则拖一张物品图标会被原生拖放会话接管，指针事件直接中断 */
.arena-bag { user-select: none; -webkit-user-select: none; }
.arena-bag img, .arena-bag .gi-plate { -webkit-user-drag: none; user-select: none; }
.arena-drag-ghost {
  position: fixed;
  z-index: 60;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px 4px 4px;
  background: rgba(9, 13, 17, 0.92);
  border: 1px solid var(--c-amber);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  font-size: 12px;
  color: var(--c-amber-2);
  white-space: nowrap;
}
.arena-drag-ghost b { font-weight: 500; }
.arena-bag__body { display: grid; grid-template-columns: 210px 1fr 200px; gap: 12px; align-items: start; overflow: hidden; }
.arena-inspect {
  display: grid;
  gap: 6px;
  align-content: start;
  align-self: stretch;
  padding: 10px;
  background: rgba(17, 23, 29, 0.72);
  border: 1px solid var(--c-line);
  min-height: 150px;
}
.arena-inspect__empty { color: var(--c-text-dim); align-self: center; text-align: center; }
.arena-inspect__icon { justify-self: center; }
.arena-inspect__name { font-size: 14px; text-align: center; }
.arena-inspect__meta { text-align: center; color: var(--c-text-dim); }
.arena-inspect__value { font-size: 13px; color: var(--c-amber-2); text-align: center; font-family: var(--font-tech); }
.arena-inspect__desc { color: var(--c-text-dim); line-height: 1.5; border-top: 1px solid var(--c-line); padding-top: 6px; }
.arena-drops {
  display: grid;
  gap: 6px;
  align-content: start;
  min-height: 150px;
  padding: 8px;
  background: rgba(17, 23, 29, 0.72);
  border: 1px dashed var(--c-line);
}
.arena-drops.is-over { border-color: var(--c-amber); background: rgba(60, 44, 20, 0.5); }
.arena-drops__head { color: var(--c-text-dim); }
.arena-drops__head b { color: var(--c-amber-2); }
.arena-drops__list { display: grid; gap: 4px; max-height: 300px; overflow-y: auto; }
.arena-drop-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  background: rgba(24, 32, 38, 0.8);
  border: 1px solid transparent;
  cursor: grab;
}
.arena-drop-row:hover { border-color: var(--c-line-hot); }
.arena-drop-row b { font-weight: 500; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arena-drop-row .micro { margin-left: auto; }
.arena-drop-row__take { padding: 0 6px; font-size: 11px; }

.arena-bag__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 6px;
  max-height: min(52vh, 420px);
  overflow-y: auto;
  padding: 2px;
}
.arena-bag__grid.is-over { outline: 1px dashed var(--c-amber); outline-offset: 2px; }
.arena-cell {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 3px;
  padding: 7px 5px 6px;
  min-height: 92px;
  background: rgba(19, 26, 32, 0.85);
  border: 1px solid var(--c-line);
  cursor: grab;
}
.arena-cell.is-empty { background: rgba(12, 17, 21, 0.55); border-style: dashed; cursor: default; }
.arena-cell:hover { border-color: var(--c-line-hot); z-index: 5; }
.arena-cell.is-dragging { opacity: 0.45; }
.arena-cell__name { font-size: 11px; font-weight: 500; text-align: center; line-height: 1.25; }
.arena-cell__count { position: absolute; right: 4px; bottom: 4px; font-size: 11px; font-family: var(--font-tech); color: var(--c-amber-2); }
.arena-cell__drop {
  position: absolute;
  left: 4px;
  bottom: 4px;
  padding: 0 5px;
  font-size: 10px;
  line-height: 15px;
  background: rgba(40, 50, 58, 0.9);
  border: 1px solid var(--c-line);
  color: var(--c-text-dim);
  cursor: pointer;
}
.arena-cell__drop:hover { color: var(--c-amber-2); border-color: var(--c-amber); }
/* 悬停才浮出的详情（价值 / 稀有度 / 说明） */
.arena-cell__tip {
  display: none;
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  transform: translateX(-50%);
  width: 220px;
  z-index: 30;
  padding: 7px 9px;
  background: rgba(6, 10, 13, 0.97);
  border: 1px solid var(--c-amber);
  text-align: left;
  pointer-events: none;
  gap: 2px;
}
.arena-cell:hover .arena-cell__tip { display: grid; }
.arena-cell__tip b { font-size: 12px; color: var(--c-amber-2); }
.arena-cell__tip .micro { color: var(--c-text-dim); font-size: 11px; line-height: 1.45; }

.arena-kit {
  left: 50%;
  bottom: calc(var(--safe-b) + 24px);
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}

.arena-skill {
  position: relative;
  pointer-events: auto;
  width: 60px;
  height: 60px;
  padding: 0;
  display: grid;
  place-items: center;
  gap: 0;
  background: rgba(10, 16, 20, 0.86);
  border: 1px solid var(--c-line);
  color: var(--c-text-mute);
  cursor: pointer;
  overflow: hidden;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  transition: color 120ms linear, border-color 120ms linear;
}

.arena-skill b { font-family: var(--font-tech); font-size: 15px; line-height: 1; }
.arena-skill i { font-style: normal; font-size: 16px; line-height: 1; opacity: 0.75; }
.arena-skill em { position: absolute; right: 4px; top: 3px; font-family: var(--font-tech); font-style: normal; font-size: 11px; color: var(--c-amber-2); }
.arena-skill.is-ready em { display: none; }
.arena-skill span { font-size: var(--fs-micro); letter-spacing: 0.02em; opacity: 0.7; }
.arena-skill u {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0;
  background: rgba(88, 210, 200, 0.18);
  transition: height 120ms linear;
}
.arena-skill.is-ready { border-color: var(--c-line-hot); color: var(--c-amber-2); }
.arena-skill.is-ready i { opacity: 1; }
.arena-skill:active { transform: translateY(1px); }

.arena-actions {
  left: calc(var(--safe-l) + 24px);
  top: calc(var(--safe-t) + 16px);
  display: grid;
  gap: 6px;
  justify-items: start;
  max-width: 220px;
  padding: 8px 10px 9px;
  background: var(--c-panel);
  border: 1px solid var(--c-line);
  border-left: 3px solid var(--c-amber);
  pointer-events: auto;
}

.arena-actions .btn { padding: 6px 10px; font-size: var(--fs-label); }

.arena-hint { color: var(--c-text-dim); font-size: var(--fs-micro); line-height: 1.5; }

/* ---- 界面增强：物品搜索框（军械库 / 仓库 / 档案图鉴 / 装备准备） ---- */

.filterbar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
  padding: 5px 10px;
  background: var(--c-panel);
  border: 1px solid var(--c-line);
  border-left: 3px solid var(--c-cyan-dim);
  pointer-events: auto;
}

.filterbar__icon { color: var(--c-cyan); font-size: 14px; line-height: 1; }

.filterbar__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 5px 2px;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--c-text);
  font-family: var(--font-ui);
  font-size: var(--fs-body);
}

.filterbar__input::placeholder { color: var(--c-text-mute); }
.filterbar__input::-webkit-search-cancel-button { filter: invert(0.6); }
.filterbar__count { color: var(--c-text-dim); white-space: nowrap; }
.filterbar__clear { padding: 2px 9px; font-size: var(--fs-micro); }
.filterbar__empty { margin: 6px 2px 0; color: var(--c-danger-2); }

.row[hidden] { display: none !important; }
.tag--arena { border-color: rgba(88, 210, 200, 0.45); color: var(--c-cyan); }

/* ---- 瞄具面板（军械库 / 装备准备） ---- */

.panel--optics .scope-row { align-items: flex-start; gap: var(--sp-3); flex-wrap: wrap; }
.scope-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.scope-chip { font-size: var(--fs-label); padding: 4px 9px; }
.scope-chip.is-on { border: 1px solid var(--c-line-hot); color: var(--c-amber-2); padding: 4px 9px; }
.scope-now { color: var(--c-cyan); }

/* 宿主暂停界面打开时整层 HUD 让位：暂停页有独立的继续/放弃按钮 */
.arena-overlay.is-menu { display: none !important; }
/* 暂停时把 HUD 提到菜单之上，好让"继续对局"按钮点得到 */
.arena-overlay.is-paused { z-index: 91; }
.arena-overlay.is-paused .arena-actions { z-index: 93; }
.arena-overlay.is-paused::after {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 10px 20px;
  background: rgba(10, 16, 20, 0.86);
  border: 1px solid var(--c-line-hot);
  color: var(--c-amber-2);
  font-family: var(--font-tech);
  font-size: 15px;
  letter-spacing: 0.1em;
}

.arena-overlay.is-problem .arena-obj__sub { color: var(--c-danger-2); }
.arena-overlay.is-problem .arena-obj { border-color: rgba(228, 87, 61, 0.5); }

@media (max-width: 900px) {
  .arena-top { width: min(360px, 74vw); }
  .arena-skill { width: 52px; height: 52px; }
  .arena-actions { max-width: 150px; }
}
.hud-compass {
  position: relative;
  height: 20px;
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(140, 170, 185, 0.3);
  background: repeating-linear-gradient(90deg, rgba(140, 170, 185, 0.22) 0 1px, transparent 1px 12px);
}

.hud-compass i {
  position: absolute;
  top: 0;
  width: 1px;
  height: 100%;
  background: var(--c-amber);
}

.hud-compass b {
  position: absolute;
  transform: translateX(-50%);
  font-family: var(--font-tech);
  font-size: var(--fs-micro);
  color: var(--c-amber-2);
}

.hud-crosshair {
  --spread: 8;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
}

.ch {
  position: absolute;
  background: rgba(232, 240, 245, 0.9);
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.7);
}

.ch-t, .ch-b { width: 2px; height: 7px; left: -1px; }
.ch-l, .ch-r { height: 2px; width: 7px; top: -1px; }
.ch-t { top: calc(-1px - var(--spread) * 1px); }
.ch-b { top: calc(1px + var(--spread) * 1px - 7px); }
.ch-l { left: calc(-1px - var(--spread) * 1px); }
.ch-r { left: calc(1px + var(--spread) * 1px - 7px); }
.ch-dot { width: 2px; height: 2px; left: -1px; top: -1px; background: var(--c-amber-2); }

.hud-hitmark {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 22px;
  opacity: 0;
  color: #fff;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.8);
}

.hud-hitmark.is-head { color: var(--c-amber-2); }
.hud-hitmark.is-kill { color: var(--c-danger-2); font-size: 26px; }

.hud-prompt {
  position: absolute;
  left: 50%;
  top: calc(50% + 62px);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: rgba(8, 12, 16, 0.8);
  border: 1px solid var(--prompt-color, var(--c-cyan));
  border-left-width: 3px;
  font-size: var(--fs-body);
}

.hud-prompt b {
  font-family: var(--font-tech);
  color: var(--prompt-color, var(--c-cyan));
  border: 1px solid currentColor;
  padding: 0 5px;
  font-size: var(--fs-label);
}

.hud-dmgdir { position: absolute; left: 50%; top: 50%; }
.hud-dmgdir__pip {
  position: absolute;
  width: 26px;
  height: 4px;
  margin: -2px 0 0 -13px;
  background: linear-gradient(90deg, transparent, var(--c-danger-2), transparent);
  animation: dmg-fade 900ms ease-out forwards;
}

@keyframes dmg-fade { from { opacity: 0.9; } to { opacity: 0; } }

.hud-bl {
  position: absolute;
  left: calc(16px + var(--safe-l));
  bottom: calc(16px + var(--safe-b));
  padding: 10px 12px 8px;
  display: grid;
  gap: 8px;
  width: 300px;
}

.hud-abilities { display: flex; gap: 8px; }

.hud-ability {
  position: relative;
  width: 62px;
  height: 62px;
  border: 1px solid rgba(140, 170, 185, 0.28);
  background: linear-gradient(180deg, rgba(26, 34, 40, 0.85), rgba(10, 14, 18, 0.85));
  display: grid;
  place-items: center;
  overflow: hidden;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}

.hud-ability--ult { width: 74px; height: 74px; border-color: rgba(245, 162, 93, 0.5); }
.hud-ability.is-ready { border-color: var(--c-cyan); box-shadow: inset 0 0 12px rgba(88, 210, 200, 0.18); }
.hud-ability.is-active { border-color: var(--c-amber); box-shadow: inset 0 0 18px rgba(245, 162, 93, 0.3); }
.hud-ability__icon { font-size: 20px; color: var(--c-text); }
.hud-ability.is-ready .hud-ability__icon { color: var(--c-cyan); }
.hud-ability__key {
  position: absolute;
  top: 2px;
  left: 5px;
  font-family: var(--font-tech);
  font-size: var(--fs-micro);
  color: var(--c-text-mute);
  letter-spacing: 0.1em;
}

.hud-ability__name {
  position: absolute;
  bottom: 1px;
  width: 100%;
  text-align: center;
  font-size: 9px;
  color: var(--c-text-dim);
  letter-spacing: 0.04em;
}

.hud-ability__cd {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0;
  background: rgba(4, 7, 10, 0.72);
  transition: height 90ms linear;
}

.hud-stamina { width: 180px; }
.hud-stamina .bar { height: 4px; }
.hud-stamina .bar > i { background: linear-gradient(90deg, #7fd06a, #d8f5a0); }

.hud-br {
  position: absolute;
  right: calc(16px + var(--safe-r));
  bottom: calc(16px + var(--safe-b));
  padding: 10px 14px 12px;
  display: grid;
  gap: 4px;
  min-width: 210px;
  justify-items: end;
}

.hud-weapon { display: flex; align-items: baseline; gap: 10px; }
.hud-weapon span:first-child { font-family: var(--font-tech); font-size: 14px; letter-spacing: 0.06em; }
.hud-ammo { display: flex; align-items: baseline; gap: 4px; font-family: var(--font-tech); }
.hud-ammo b { font-size: 30px; letter-spacing: 0.02em; line-height: 1; }
.hud-ammo span { font-size: 14px; color: var(--c-text-dim); }
.hud-util { color: var(--c-text-mute); }

.hud-bc {
  position: absolute;
  left: calc(16px + var(--safe-l));
  bottom: calc(126px + var(--safe-b));
  width: 210px;
  padding: 8px 10px;
  display: grid;
  gap: 4px;
}

.hud-bc__list { display: grid; gap: 2px; }
.hud-bc__row { display: flex; justify-content: space-between; font-size: var(--fs-label); }
.hud-bc__row b { font-family: var(--font-tech); color: var(--c-text-dim); }

.hud-extract {
  position: absolute;
  left: 50%;
  bottom: calc(120px + var(--safe-b));
  transform: translateX(-50%);
  width: min(360px, 60vw);
  padding: 8px 12px;
  background: rgba(8, 14, 16, 0.78);
  border: 1px solid rgba(88, 210, 200, 0.5);
  display: grid;
  gap: 6px;
}

.hud-extract__label { font-family: var(--font-tech); letter-spacing: 0.16em; color: var(--c-cyan); text-align: center; }

.hud-loot {
  position: absolute;
  left: 50%;
  bottom: calc(62px + var(--safe-b));
  transform: translateX(-50%);
  font-family: var(--font-tech);
  font-size: 15px;
  letter-spacing: 0.1em;
  color: var(--c-gold);
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
}

.hud-killfeed {
  position: absolute;
  right: calc(16px + var(--safe-r));
  top: calc(150px + var(--safe-t));
  display: grid;
  gap: 3px;
  justify-items: end;
}

.hud-killfeed__row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  background: rgba(8, 12, 16, 0.66);
  border-right: 2px solid var(--c-danger);
  font-size: var(--fs-label);
}

.hud-killfeed__row.is-head { border-right-color: var(--c-amber); }
.hud-killfeed__killer { color: var(--c-cyan); }
.hud-killfeed__icon { color: var(--c-danger-2); }

/* 世界飘字与标记（DOM 承载，跟随 3D 位置） */
.world-popup {
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-tech);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #f2f7fa;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.85);
  pointer-events: none;
  will-change: transform, opacity;
}

.world-popup.n-damage--crit { color: var(--c-amber-2); font-size: 19px; }
.world-popup.n-damage--turret { color: var(--c-cyan); font-size: 13px; }
.world-popup.n-heal { color: var(--c-ok); }
.world-popup.n-pickup { color: var(--c-gold); font-size: 13px; }

.world-marker {
  position: absolute;
  left: 0;
  top: 0;
  font-size: 13px;
  color: var(--c-danger-2);
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.9);
  pointer-events: none;
  will-change: transform;
}

.world-marker::after {
  content: attr(data-dist);
  display: block;
  font-family: var(--font-tech);
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--c-text-dim);
  text-align: center;
}

.world-marker.mk-loot { color: var(--c-gold); }
.world-marker.mk-objective { color: var(--c-cyan); font-size: 15px; }
.world-marker.mk-exfil { color: var(--c-ok); font-size: 15px; }

/* ============================================================
   元界面（前哨基地 / 仓库 / 干员 / 合约 / 设置 …）
   ============================================================ */
.screens {
  display: grid;
  grid-template-columns: 214px 1fr;
  background:
    linear-gradient(90deg, rgba(6, 9, 12, 0.96) 0%, rgba(6, 9, 12, 0.82) 26%, rgba(6, 9, 12, 0.42) 55%, rgba(6, 9, 12, 0.22) 100%);
  pointer-events: auto;
  z-index: var(--z-menu);
  /* 菜单是整屏 grid：必须夹住高度，否则内容超出后会被画到屏幕外、滚不到（所有栏都滑不动） */
  overflow: hidden;
}

.screens__nav {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  min-height: 0;
  overflow-y: auto;
  padding: calc(18px + var(--safe-t)) 14px calc(18px + var(--safe-b)) calc(14px + var(--safe-l));
  border-right: 1px solid rgba(140, 170, 185, 0.14);
  background: linear-gradient(180deg, rgba(12, 17, 22, 0.9), rgba(8, 11, 15, 0.92));
}

.screens__brand {
  font-family: var(--font-tech);
  font-size: 19px;
  letter-spacing: 0.18em;
  color: var(--c-text);
}

.screens__brand span { display: block; margin-top: 3px; color: var(--c-amber); letter-spacing: 0.3em; }

.screens__nav nav { display: grid; gap: 4px; }

.screens__navbtn {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 0 12px;
  border-left: 2px solid transparent;
  background: transparent;
  color: var(--c-text-dim);
  font-size: var(--fs-body);
  letter-spacing: 0.06em;
  transition: background 140ms, color 140ms, border-color 140ms;
}

.screens__navbtn i { font-style: normal; font-size: 15px; color: var(--c-text-mute); }
.screens__navbtn:hover { background: rgba(60, 80, 92, 0.22); color: var(--c-text); }
.screens__navbtn.is-active { border-left-color: var(--c-amber); background: linear-gradient(90deg, rgba(245, 162, 93, 0.16), transparent); color: var(--c-amber-2); }
.screens__navbtn.is-active i { color: var(--c-amber); }

.screens__meta { margin-top: auto; display: grid; gap: 6px; padding-top: var(--sp-3); border-top: 1px solid rgba(140, 170, 185, 0.16); }
.screens__kv { display: flex; justify-content: space-between; align-items: baseline; }
.screens__kv b { font-family: var(--font-tech); }
.screens__op { display: grid; gap: 3px; }
.screens__op b { font-family: var(--font-tech); font-size: 14px; }
.screens__opbar { display: block; height: 3px; background: rgba(140, 170, 185, 0.2); }
.screens__opbar u { display: block; height: 100%; background: var(--c-amber); text-decoration: none; }

.screens__main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;          /* 关键：允许收缩，内容区才会真正溢出并出现滚动条 */
  padding: calc(16px + var(--safe-t)) calc(20px + var(--safe-r)) calc(16px + var(--safe-b)) 20px;
  gap: var(--sp-3);
}

.screens__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); }
.screens__head h1 { margin: 0; font-family: var(--font-tech); font-size: var(--fs-h); letter-spacing: 0.14em; }
.screens__head p { margin: 4px 0 0; color: var(--c-text-mute); }
.screens__wallet { display: flex; gap: var(--sp-4); align-items: flex-end; }
.wallet { display: grid; gap: 2px; justify-items: end; }
.wallet b { font-family: var(--font-tech); font-size: 17px; letter-spacing: 0.04em; }
.wallet__bar { display: block; width: 84px; height: 3px; background: rgba(140, 170, 185, 0.22); }
.wallet__bar u { display: block; height: 100%; background: linear-gradient(90deg, var(--c-amber), var(--c-gold)); text-decoration: none; }

.screens__content { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; display: grid; gap: var(--sp-3); align-content: start; }

/* ------------------------------------------------------------
   局内暂停页：左灵敏度 / 中继续+放弃（上下两栏）/ 右联机房间预留
   ------------------------------------------------------------ */
.screens.screens--pause {
  grid-template-columns: 1fr;
  grid-template-rows: minmax(0, 1fr);   /* 导航隐藏后让主栏独占整屏，暂停页才能真正居中 */
  z-index: 92;                 /* 高于 arena-overlay 的暂停态 */
  background:
    radial-gradient(ellipse at 50% 42%, rgba(24, 35, 42, 0.42), transparent 62%),
    linear-gradient(180deg, rgba(4, 7, 10, 0.88), rgba(4, 7, 10, 0.95));
  backdrop-filter: blur(3px);
}
.screens--pause .screens__nav,
.screens--pause .screens__head,
.screens--pause .screens__wallet,
.screens--pause .screens__meta { display: none; }
.screens--pause .screens__main {
  padding: calc(24px + var(--safe-t)) calc(28px + var(--safe-r)) calc(24px + var(--safe-b)) calc(28px + var(--safe-l));
}
.screens--pause .screens__content {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  width: 100%;
  min-height: 0;
  margin: 0 auto;
  padding-right: 0;
  overflow: auto;
}

.pausescreen { display: grid; gap: 18px; width: 100%; max-width: 1180px; margin: 0 auto; }
.pausescreen__head { display: grid; gap: 4px; text-align: center; }
.pausescreen__head .micro { letter-spacing: 0.26em; color: var(--c-text-mute); }
.pausescreen__head h2 { margin: 0; font-family: var(--font-tech); font-size: clamp(26px, 4vw, 42px); letter-spacing: 0.16em; }
.pausescreen__head p { margin: 0; color: var(--c-text-dim); }
.pausescreen__head p b { color: var(--c-amber); }

.pausescreen__grid {
  display: grid;
  grid-template-columns: minmax(240px, 1.05fr) minmax(230px, 0.92fr) minmax(160px, 0.63fr);
  gap: 14px;
  min-height: min(56vh, 520px);
}
.pausescreen__col {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 16px 18px;
  background: linear-gradient(160deg, rgba(15, 21, 26, 0.94), rgba(8, 12, 16, 0.9));
  border: 1px solid var(--c-line);
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
}
.pausescreen__cap {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  padding-bottom: 10px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(140, 170, 185, 0.16);
}
.pausescreen__cap b { font-family: var(--font-tech); letter-spacing: 0.12em; }
.pausescreen__cap .micro { color: var(--c-text-mute); }

.pausescreen__body { display: grid; gap: 6px; align-content: start; min-width: 0; }
.pausescreen__body .field > .micro { min-width: 0; }
/* 暂停页左栏偏窄：标签单独占一行，滑块才不会被浏览器的 range 最小宽度挤出面板 */
.pausescreen__body .field--range { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 8px; min-height: 0; padding: 3px 0; }
.pausescreen__body .field--range > .micro { grid-column: 1 / -1; }
.pausescreen__body .field--range input[type='range'] { min-width: 0; width: 100%; }
.pausescreen__body > .micro { margin: 10px 0 0; line-height: 1.55; color: var(--c-text-mute); }

.pausescreen__col--actions { padding: 0; border: 0; background: none; display: grid; grid-template-rows: 1fr 1fr; gap: 14px; }
.pauseact {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  padding: 22px 24px;
  text-align: left;
  background: linear-gradient(135deg, rgba(19, 27, 33, 0.95), rgba(10, 15, 19, 0.92));
  border: 1px solid var(--c-line);
  color: var(--c-text);
  cursor: pointer;
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  transition: border-color 150ms, background 150ms, transform 150ms;
}
.pauseact:hover { transform: translateY(-1px); }
.pauseact .micro { color: var(--c-text-mute); letter-spacing: 0.22em; }
.pauseact b { font-family: var(--font-tech); font-size: clamp(24px, 2.6vw, 34px); letter-spacing: 0.14em; }
.pauseact em { font-style: normal; font-size: var(--fs-micro); color: var(--c-text-dim); }
.pauseact--resume { border-color: rgba(245, 162, 93, 0.5); }
.pauseact--resume b { color: var(--c-amber-2); }
.pauseact--resume:hover { border-color: var(--c-amber); background: linear-gradient(135deg, rgba(52, 38, 24, 0.92), rgba(12, 17, 21, 0.92)); }
.pauseact--abandon { border-color: rgba(228, 87, 61, 0.3); }
.pauseact--abandon b { color: var(--c-danger-2); }
.pauseact--abandon:hover { border-color: var(--c-danger-2); background: linear-gradient(135deg, rgba(45, 22, 19, 0.92), rgba(12, 17, 21, 0.92)); }

.pausescreen__col--room { opacity: 0.62; }
.pausescreen__roomcode {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 120px;
  text-align: center;
  border: 1px dashed rgba(140, 170, 185, 0.2);
}
.pausescreen__roomcode b { font-family: var(--font-tech); font-size: 22px; letter-spacing: 0.3em; color: var(--c-text-dim); }
.pausescreen__roomcode p { margin: 0; max-width: 210px; line-height: 1.55; color: var(--c-text-mute); }

@media (max-width: 820px) {
  .pausescreen__grid { grid-template-columns: 1fr 1fr; min-height: 0; }
  .pausescreen__col--room { grid-column: 1 / -1; }
  .pausescreen__col--room .pausescreen__roomcode { min-height: 84px; }
}
@media (max-width: 620px) {
  .pausescreen__grid { grid-template-columns: 1fr; }
  .screens--pause .screens__main { padding: calc(16px + var(--safe-t)) calc(14px + var(--safe-r)) calc(16px + var(--safe-b)) calc(14px + var(--safe-l)); }
  .pausescreen__col--actions { min-height: 220px; }
}

.grid { display: grid; gap: var(--sp-3); }
.grid--facilities { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.grid--contracts { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }
.grid--operators { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
.twocol { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

/* 作战地图解锁总览：指挥中心 Lv.1~7 各解锁一张地图 */
.panel--maptiers { padding: var(--sp-3); }
.mapstrip { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

/* 同图多合约的切换标签（大厅一张地图只出一张卡） */
.contracttabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 var(--sp-2); }
.contracttab {
  padding: 4px 10px; font: var(--fs-label)/1.4 var(--font-ui);
  color: var(--c-text-dim); background: rgba(140, 170, 185, 0.06);
  border: 1px solid var(--c-line); border-radius: 999px; cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.contracttab:hover { color: var(--c-text); border-color: var(--c-line-hot); }
.contracttab.is-on { color: var(--c-bg); background: var(--c-amber); border-color: var(--c-amber); font-weight: 700; }
.mapchip {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--c-line);
  border-radius: 8px;
  background: var(--c-panel-2, rgba(255, 255, 255, 0.03));
}
.mapchip--on, .mapchip.is-on { border-color: var(--c-ok); }
.mapchip.is-off { opacity: 0.55; }
.mapchip__lv {
  font: 700 11px/1 var(--font-mono, monospace);
  padding: 4px 6px;
  border-radius: 5px;
  background: var(--c-line);
  color: var(--c-text);
}
.mapchip.is-on .mapchip__lv { background: var(--c-ok); color: #06110a; }
.mapchip b { font-size: 13px; }
.mapchip__state { font-size: 11px; opacity: 0.7; }
.mapchip.is-on .mapchip__state { color: var(--c-ok); opacity: 1; }

.card {
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-3);
  background: linear-gradient(180deg, rgba(14, 19, 25, 0.9), rgba(9, 13, 17, 0.86));
  border: 1px solid rgba(140, 170, 185, 0.18);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
}

.card > header { display: flex; align-items: flex-start; gap: 10px; justify-content: space-between; }
.card h3 { margin: 0; font-family: var(--font-tech); font-size: 16px; letter-spacing: 0.06em; }
.card h3 + p { margin: 2px 0 0; }
.card__icon { font-size: 20px; color: var(--c-amber); }
.card__level { display: flex; gap: 3px; }
.card__level i { width: 8px; height: 8px; background: rgba(140, 170, 185, 0.24); }
.card__level i.is-on { background: var(--c-amber); box-shadow: 0 0 6px rgba(245, 162, 93, 0.6); }
.card__desc { margin: 0; color: var(--c-text-dim); font-size: var(--fs-label); line-height: 1.5; }
.card__effect { display: grid; gap: 2px; padding: 6px 8px; background: rgba(88, 210, 200, 0.08); border-left: 2px solid var(--c-cyan-dim); }
.card__effect b { font-size: var(--fs-label); color: var(--c-cyan); font-weight: 500; }
.card__cost, .card__reward { display: flex; flex-wrap: wrap; gap: 5px; }
.card__meta { display: grid; gap: 2px; }
.card.is-locked { opacity: 0.62; }
.card.is-active { border-color: rgba(245, 162, 93, 0.55); box-shadow: inset 0 0 18px rgba(245, 162, 93, 0.12); }

.tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border: 1px solid rgba(140, 170, 185, 0.3);
  font-family: var(--font-tech);
  font-size: var(--fs-micro);
  letter-spacing: 0.08em;
  color: var(--c-text-dim);
}

.tag.is-ok { border-color: rgba(143, 214, 106, 0.5); color: var(--c-ok); }
.tag.is-bad { border-color: rgba(228, 87, 61, 0.45); color: var(--c-danger-2); }
.badge { padding: 3px 8px; font-family: var(--font-tech); font-size: var(--fs-label); border: 1px solid var(--c-line-hot); color: var(--c-amber-2); }

.objlist { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.objlist li { display: flex; align-items: center; gap: 8px; font-size: var(--fs-label); color: var(--c-text-dim); }
.objlist i {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  font-style: normal;
  font-size: var(--fs-micro);
  border: 1px solid rgba(140, 170, 185, 0.4);
  color: var(--c-text-dim);
}

.banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3);
  background: linear-gradient(90deg, rgba(20, 27, 33, 0.92), rgba(12, 17, 21, 0.86));
  border: 1px solid rgba(140, 170, 185, 0.2);
  border-left: 3px solid var(--c-amber);
}

.banner b { font-family: var(--font-tech); letter-spacing: 0.08em; }
.banner p { margin: 3px 0 0; color: var(--c-text-mute); }
.banner__actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.banner--deploy { border-left-color: var(--c-ok); }

.form { display: grid; gap: var(--sp-2); }
.field { display: flex; align-items: center; gap: var(--sp-2); justify-content: space-between; min-height: 34px; }
.field > .micro { min-width: 96px; }
.field select, .field input[type='range'] { flex: 1; }

select, input[type='range'] {
  min-height: 30px;
  background: rgba(10, 15, 19, 0.9);
  color: var(--c-text);
  border: 1px solid rgba(140, 170, 185, 0.28);
  font-family: var(--font-ui);
  font-size: var(--fs-label);
  padding: 4px 6px;
}

input[type='range'] { padding: 0; accent-color: var(--c-amber); }

.field--toggle { justify-content: flex-start; }
.field--toggle input { accent-color: var(--c-amber); width: 16px; height: 16px; }
.field--range b { font-family: var(--font-tech); min-width: 54px; text-align: right; color: var(--c-amber-2); }

.list { display: grid; gap: 6px; }
.row { display: flex; align-items: center; gap: var(--sp-2); padding: 7px 9px; background: rgba(14, 19, 24, 0.6); border: 1px solid rgba(140, 170, 185, 0.12); }
.row > div:first-child { flex: 1; min-width: 0; }
.row b { font-family: var(--font-tech); letter-spacing: 0.04em; }
.row p { margin: 2px 0 0; }
.row__actions { display: flex; gap: 5px; }
.row--item { align-items: flex-start; }
.row--bind { justify-content: space-between; }
.dot { width: 8px; height: 8px; flex: none; margin-top: 5px; }

.statgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 6px; }
.statgrid span { display: flex; flex-direction: column; gap: 2px; padding: 6px 8px; background: rgba(10, 14, 18, 0.6); border: 1px solid rgba(140, 170, 185, 0.14); font-size: var(--fs-micro); color: var(--c-text-mute); letter-spacing: 0.08em; }
.statgrid b { font-family: var(--font-tech); font-size: 15px; color: var(--c-text); }
.statgrid--big span { padding: 9px 10px; }
.statgrid--big b { font-size: 18px; }

.passive { display: grid; gap: 2px; padding: 6px 8px; background: rgba(88, 210, 200, 0.07); border-left: 2px solid var(--c-cyan-dim); }
.passive b { font-size: var(--fs-label); color: var(--c-cyan); }

.skills { display: grid; gap: 4px; }
.skillrow { display: flex; align-items: flex-start; gap: 8px; padding: 6px 8px; background: rgba(12, 17, 21, 0.66); border: 1px solid rgba(140, 170, 185, 0.14); }
.skillrow > b { width: 18px; font-family: var(--font-tech); color: var(--c-amber); }
.skillrow > i { font-style: normal; width: 20px; text-align: center; color: var(--c-text); }
.skillrow > div { flex: 1; }
.skillrow span { font-family: var(--font-tech); font-size: var(--fs-label); letter-spacing: 0.04em; }
.skillrow--ult { border-color: rgba(245, 162, 93, 0.4); background: rgba(245, 162, 93, 0.08); }

.binds { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 5px; }

.toast {
  padding: 7px 12px;
  background: rgba(10, 15, 19, 0.92);
  border: 1px solid rgba(140, 170, 185, 0.3);
  border-left-width: 3px;
  font-size: var(--fs-label);
  letter-spacing: 0.04em;
  color: var(--c-text);
  pointer-events: none;
}

.toast--ok { border-left-color: var(--c-ok); }
.toast--bad { border-left-color: var(--c-danger); }
.toast--info { border-left-color: var(--c-cyan); }

.screens__toasts {
  position: absolute;
  right: 18px;
  bottom: 18px;
  display: grid;
  gap: 6px;
  justify-items: end;
  z-index: var(--z-toast);
}

.screens__confirm {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(4, 7, 10, 0.66);
  z-index: var(--z-toast);
}

.confirm { display: grid; gap: var(--sp-3); padding: var(--sp-4); background: var(--c-panel-2); border: 1px solid var(--c-line-hot); max-width: 420px; }
.confirm p { margin: 0; line-height: 1.6; }
.confirm__actions { display: flex; gap: var(--sp-2); justify-content: flex-end; }

/* 结算界面 */
.results { display: grid; gap: var(--sp-3); }
.results__head { display: grid; gap: 4px; padding: var(--sp-3); border-left: 4px solid var(--c-ok); background: linear-gradient(90deg, rgba(20, 30, 22, 0.9), transparent); }
.results.is-loss .results__head { border-left-color: var(--c-danger); background: linear-gradient(90deg, rgba(32, 16, 14, 0.9), transparent); }
.results__head h2 { margin: 0; font-family: var(--font-tech); font-size: var(--fs-xl); letter-spacing: 0.16em; }
.results__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--sp-2); }
.results__stat { display: grid; gap: 3px; padding: var(--sp-2) var(--sp-3); background: rgba(12, 17, 22, 0.8); border: 1px solid rgba(140, 170, 185, 0.16); }
.results__stat b { font-family: var(--font-tech); font-size: 20px; }

/* 手机 / 窄屏：单列布局、放大触控目标 */
@media (max-width: 900px) {
  .screens { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .screens__nav { flex-direction: row; align-items: center; gap: var(--sp-2); overflow-x: auto; border-right: none; border-bottom: 1px solid rgba(140, 170, 185, 0.16); padding: 10px 12px; }
  .screens__brand { display: none; }
  .screens__nav nav { grid-auto-flow: column; gap: 4px; }
  .screens__navbtn { min-height: 40px; white-space: nowrap; border-left: none; border-bottom: 2px solid transparent; }
  .screens__navbtn.is-active { border-bottom-color: var(--c-amber); background: rgba(245, 162, 93, 0.12); }
  .screens__meta { display: none; }
  .hud-tl, .hud-tr { width: 168px; }
  .hud-bc { display: none; }
  .hud-bl, .hud-br { transform: scale(0.86); transform-origin: bottom left; }
  .hud-br { transform-origin: bottom right; }
}

@media (max-width: 620px) {
  .screens__head { flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
  .screens__wallet { align-items: center; gap: var(--sp-3); }
  .hud-tc { width: 72vw; }
  .hud-bl, .hud-br { transform: scale(0.72); }
}

/* ============================================================
   单挑（1v1）· 局内浮层
   层级：iframe(30) < 单挑浮层(52)，整层透传，不抢指针锁定
   ============================================================ */
.duel-overlay {
  position: absolute;
  inset: 0;
  z-index: 52;
  pointer-events: none;
  font-family: var(--font-ui);
  color: var(--c-text);
}
.duel-overlay[hidden] { display: none; }
.duel-overlay > * { position: absolute; }

.duel-hud {
  top: calc(var(--safe-t) + 12px);
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--sp-4);
  min-width: min(420px, 74vw);
  padding: 7px 18px 9px;
  background: var(--c-panel);
  border: 1px solid var(--c-line);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.duel-hud__side { display: grid; gap: 2px; }
.duel-hud__side .micro { color: var(--c-text-mute); letter-spacing: 0.2em; }
.duel-hud__side b { font-family: var(--font-tech); font-size: 26px; line-height: 1; color: var(--c-cyan); }
.duel-hud__side--foe { justify-items: end; }
.duel-hud__side--foe b { color: var(--c-danger-2); }
.duel-hud__mid { display: grid; justify-items: center; gap: 1px; }
.duel-hud__mid b { font-family: var(--font-tech); font-size: 18px; color: var(--c-amber); line-height: 1; }
.duel-hud__mid .micro { color: var(--c-text-dim); }

.duel-hud__room {
  top: calc(var(--safe-t) + 62px);
  left: 50%;
  transform: translateX(-50%);
  padding: 3px 12px 4px;
  background: var(--c-panel);
  border: 1px solid var(--c-line);
  color: var(--c-text-dim);
  letter-spacing: 0.12em;
}
.duel-hud__room b { color: var(--c-amber-2); font-family: var(--font-tech); letter-spacing: 0.24em; }

.duel-hud__net {
  top: calc(var(--safe-t) + 88px);
  left: 50%;
  transform: translateX(-50%);
  padding: 2px 10px 3px;
  background: var(--c-panel);
  border: 1px solid var(--c-line);
  color: var(--c-cyan);
  letter-spacing: 0.12em;
}

.duel-hud__hint {
  bottom: calc(var(--safe-b) + 14px);
  left: 50%;
  transform: translateX(-50%);
  color: var(--c-text-mute);
  letter-spacing: 0.14em;
}

/* 暂停覆盖层出现时把浮层压到菜单之下 */
.screens--pause ~ * .duel-overlay { z-index: 51; }

/* ============================================================
   单挑（1v1）· 大厅面板（创建/加入/房间等待/结算）
   ============================================================ */
.duel-hero { display: grid; gap: var(--sp-2); justify-items: center; text-align: center; padding: var(--sp-5) var(--sp-3); background: linear-gradient(180deg, rgba(245, 162, 93, 0.06), transparent); border: 1px solid var(--c-line); clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); }
.duel-hero h3 { margin: 0; font-family: var(--font-tech); font-size: var(--fs-xl); letter-spacing: 0.14em; }
.duel-hero p { margin: 0; color: var(--c-text-dim); line-height: 1.6; }

.duel-form { display: grid; gap: var(--sp-3); max-width: 520px; margin: 0 auto; width: 100%; }
.duel-input { display: flex; gap: var(--sp-2); align-items: center; }
.duel-input input { flex: 1; min-width: 0; height: 46px; padding: 0 14px; font-family: var(--font-tech); font-size: 20px; letter-spacing: 0.28em; color: var(--c-amber-2); background: rgba(9, 14, 18, 0.9); border: 1px solid var(--c-line); }
.duel-input input::placeholder { color: var(--c-text-mute); letter-spacing: 0.1em; }
.duel-input input:focus { outline: none; border-color: var(--c-line-hot); }

.duel-roomcard { display: grid; gap: var(--sp-3); justify-items: center; text-align: center; padding: var(--sp-5); background: var(--c-panel-2); border: 1px solid var(--c-line-hot); clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px); }
.duel-roomcard__code { display: grid; gap: 4px; justify-items: center; }
.duel-roomcard__code b { font-family: var(--font-tech); font-size: clamp(38px, 7vw, 64px); letter-spacing: 0.22em; color: var(--c-amber-2); text-shadow: 0 0 18px rgba(245, 162, 93, 0.25); }
.duel-roomcard__players { display: grid; gap: 6px; width: min(420px, 100%); }
.duel-slot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: 8px 14px; background: rgba(12, 17, 22, 0.8); border: 1px solid var(--c-line); }
.duel-slot span { color: var(--c-text-dim); }
.duel-slot b { font-family: var(--font-tech); letter-spacing: 0.06em; }
.duel-slot.is-empty b { color: var(--c-text-mute); }
.duel-slot.is-you b { color: var(--c-cyan); }
.duel-slot.is-foe b { color: var(--c-danger-2); }
.duel-roomcard__wait { color: var(--c-text-dim); }
.duel-roomcard__wait i { display: inline-block; font-style: normal; animation: duel-pulse 1.2s ease-in-out infinite; color: var(--c-amber); }
@keyframes duel-pulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }

.duel-rule { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.duel-rule li { display: flex; gap: 8px; align-items: baseline; color: var(--c-text-dim); line-height: 1.55; }
.duel-rule li::before { content: '▸'; color: var(--c-amber); }

.duel-result { display: grid; gap: var(--sp-4); justify-items: center; text-align: center; }
.duel-result__title { font-family: var(--font-tech); font-size: clamp(34px, 6vw, 62px); letter-spacing: 0.18em; }
.duel-result.is-win .duel-result__title { color: var(--c-ok); }
.duel-result.is-loss .duel-result__title { color: var(--c-danger-2); }
.duel-result__score { display: flex; align-items: baseline; gap: var(--sp-3); font-family: var(--font-tech); }
.duel-result__score b { font-size: 44px; }
.duel-result__score span { color: var(--c-text-mute); font-size: 18px; }

@media (max-width: 620px) {
  .duel-hud { min-width: 84vw; gap: var(--sp-3); padding: 6px 12px 8px; }
  .duel-hud__side b { font-size: 20px; }
  .duel-input { flex-wrap: wrap; }
  .duel-input input { width: 100%; }
}

/* 暂停页右侧的单挑房间栏：有真实房间号时不再压暗 */
.pausescreen__col--room.is-live { opacity: 1; border-color: var(--c-line-hot); }
.pausescreen__col--room .duel-pause-score { display: grid; gap: 2px; justify-items: center; margin-top: 4px; }
.pausescreen__col--room .duel-pause-score b { font-family: var(--font-tech); font-size: 26px; color: var(--c-amber-2); letter-spacing: 0.1em; }
.duel-roomcard__actions, .duel-result .banner__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: center; }