/* ============================================================
   深潜 — 设计系统 v2
   战术风：近黑底 / 琥珀强调 / 直角切边 / 品质分级
   同一套令牌覆盖浏览器与手机两个版本
   ============================================================ */

:root {
  --c-void: #07080a;
  --c-bg: #0d0f11;
  --c-panel: #131619;
  --c-panel-2: #191d21;
  --c-raise: #21262b;
  --c-line: #2b3136;
  --c-line-hi: #3d454c;

  --c-text: #e9e6df;
  --c-text-2: #98a0a8;
  --c-text-3: #5f666e;

  --c-amber: #f0a733;
  --c-amber-2: #b8791a;
  --c-amber-soft: rgba(240, 167, 51, 0.14);

  --c-danger: #e0523f;
  --c-warn: #e8b53d;
  --c-ok: #5fb85a;
  --c-info: #4a9ec7;

  --r-common: #8a8f84;
  --r-uncommon: #5fa855;
  --r-rare: #4a8fc7;
  --r-epic: #9b6fd0;
  --r-legend: #e8a33d;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
  --r-sm: 2px; --r-md: 3px;

  --f-ui: "PingFang SC", "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
  --f-num: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--f-ui);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
#app { height: 100%; }

/* 细噪点 + 扫描线：低成本地拉开与"网页"的距离 */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
  opacity: 0.5;
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,0.16) 0 1px, transparent 1px 3px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
}

/* ---------- 排版 ---------- */
.eyebrow {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-text-3);
  font-weight: 600;
}
.num { font-family: var(--f-num); font-variant-numeric: tabular-nums; }
.hint { font-size: 12px; color: var(--c-text-3); line-height: 1.7; margin: 0; }

/* ---------- 面板 ---------- */
.panel {
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,0.022), transparent 120px), var(--c-panel);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
}
.panel::before, .panel::after {
  content: "";
  position: absolute;
  width: 9px; height: 9px;
  border: 1px solid var(--c-amber);
  opacity: 0.55;
  pointer-events: none;
}
.panel::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.panel::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

.panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  min-height: 36px; padding: 0 var(--s3);
  border-bottom: 1px solid var(--c-line);
  background: var(--c-panel-2);
}
.panel-head h3 {
  margin: 0; font-size: 11px; font-weight: 700;
  letter-spacing: 0.18em; color: var(--c-text-2);
}
.panel-body { padding: var(--s3); }

/* ---------- 按钮 ---------- */
button { font-family: inherit; }
.btn {
  font: inherit; font-size: 12px; font-weight: 600; letter-spacing: 0.12em;
  color: var(--c-text); background: var(--c-raise);
  border: 1px solid var(--c-line-hi); border-radius: var(--r-sm);
  padding: 9px 14px; cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.btn:hover:not(:disabled) { border-color: var(--c-amber); color: #fff; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: 0.32; cursor: default; }

.btn-primary {
  color: #14100a; background: linear-gradient(180deg, var(--c-amber), var(--c-amber-2));
  border-color: #f5c069; font-weight: 800;
}
.btn-primary:hover:not(:disabled) { filter: brightness(1.1); color: #14100a; }
.btn-danger { color: #ffd9d2; border-color: #7a3328; background: #3a1d18; }
.btn-danger:hover:not(:disabled) { border-color: var(--c-danger); color: #fff; }
.btn-ghost { background: transparent; border-color: var(--c-line); color: var(--c-text-2); }
.btn-block { width: 100%; }

.btn-deploy {
  width: 100%; height: 56px; font-size: 16px; letter-spacing: 0.3em;
  clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
  box-shadow: 0 0 26px rgba(240, 167, 51, 0.25);
}

/* ---------- 品质标签 ---------- */
.tag {
  display: inline-flex; align-items: center; gap: 5px;
  height: 20px; padding: 0 7px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.14em;
  border: 1px solid currentColor; border-radius: var(--r-sm);
}
.tag-common { color: var(--r-common); }
.tag-uncommon { color: var(--r-uncommon); }
.tag-rare { color: var(--r-rare); }
.tag-epic { color: var(--r-epic); }
.tag-legend { color: var(--r-legend); }

/* ---------- 物品格 ---------- */
.slot {
  position: relative;
  aspect-ratio: 1;
  display: grid; place-items: center;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.014) 0 5px, transparent 5px 10px),
    var(--c-panel-2);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: border-color 0.12s, filter 0.12s;
}
.slot.empty { cursor: default; }
.slot.filled {
  background: var(--c-panel-2);
  border-color: var(--q, var(--c-line));
  box-shadow: inset 3px 0 0 var(--q, transparent), inset 0 22px 26px -22px var(--q, transparent);
}
.slot.filled:hover { filter: brightness(1.25); }
.slot.selected {
  outline: 1px solid var(--c-amber); outline-offset: 1px;
  box-shadow: inset 3px 0 0 var(--q), 0 0 18px rgba(240, 167, 51, 0.3);
}
.slot canvas, .qslot canvas {
  display: block; max-width: 100%; max-height: 100%;
}
.slot .price {
  position: absolute; left: 5px; bottom: 2px;
  font-family: var(--f-num); font-size: 10px; color: var(--c-amber); opacity: 0.9;
}
/* 占格角标：只有大件才显示，提醒它会吃掉多少背包 */
.slot .vol-badge {
  position: absolute; right: 3px; top: 2px;
  font-family: var(--f-num); font-size: 10px; font-weight: 700;
  color: var(--c-text-2); background: rgba(8,10,12,0.8);
  padding: 0 4px; border: 1px solid var(--c-line);
}
.slot-grid { display: grid; grid-template-columns: repeat(var(--cols, 8), minmax(0, 1fr)); gap: 5px; }

/* ---------- 状态条 ---------- */
.vital { display: flex; align-items: center; gap: var(--s2); }
.vital-bar {
  position: relative; height: 7px;
  background: #0a0c0e; border: 1px solid var(--c-line); overflow: hidden;
}
.vital-bar > i {
  display: block; height: 100%; width: 100%;
  background: var(--vc, var(--c-ok));
  transition: width 0.18s linear;
}
.vital-bar.striped > i {
  background-image: repeating-linear-gradient(90deg, rgba(0,0,0,0.25) 0 3px, transparent 3px 7px);
}
.vital-bar.bad > i { background: var(--c-danger); }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: var(--c-void); }
::-webkit-scrollbar-thumb { background: var(--c-line); border: 2px solid var(--c-void); }
::-webkit-scrollbar-thumb:hover { background: var(--c-line-hi); }

/* ============================================================
   大厅：顶栏固定，下面四个页签换内容。
   ============================================================ */
.lobby {
  display: flex;
  flex-direction: column;
  height: 100%;

  background:
    radial-gradient(
      ellipse 72% 78% at 50% 42%,
      rgba(60, 66, 64, 0.22),
      rgba(24, 28, 29, 0.12) 48%,
      rgba(7, 8, 10, 0.82) 100%
    ),
    linear-gradient(
      112deg,
      rgba(255, 255, 255, 0.018),
      transparent 34%,
      rgba(240, 167, 51, 0.012) 68%,
      transparent
    ),
    url("../textures/dark-wall-grain.webp"),
    #080b0d;

  background-size:
    auto,
    auto,
    320px 320px,
    auto;

  background-blend-mode:
    normal,
    normal,
    soft-light,
    normal;
}
.topbar {
  position: relative;
  display: flex; align-items: center; gap: var(--s4);
  padding: 0 20px;
  padding-top: env(safe-area-inset-top);
  height: calc(56px + env(safe-area-inset-top));
  background: rgba(8,11,13,0.96); border-bottom: 1px solid #242a2d;
  box-shadow: 0 4px 18px rgba(0,0,0,0.45);
  flex: none;
}
/* 顶栏下缘一条从中间亮起来的琥珀线，和局内 HUD 的暖色调对上 */
.topbar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(240,167,51,0.42) 30% 70%, transparent);
}
/* 标题加一行副标，顶栏才不像网页导航的 logo 位 */
.brand { display: grid; gap: 3px; }
.brand b {
  font-size: 21px; font-weight: 900; letter-spacing: 0.26em;
  text-indent: 0.24em; color: var(--c-amber); line-height: 1;
  text-shadow: 0 0 14px rgba(240,167,51,0.24);
}
.brand small {
  font-size: 9px; letter-spacing: 0.2em; text-indent: 0.2em; color: var(--c-text-3);
}
.tabs {
  position: absolute; left: 50%; top: env(safe-area-inset-top);
  height: 56px; transform: translateX(-50%);
  display: flex; align-items: stretch; gap: 34px;
}
.tab {
  position: relative; min-width: 66px;
  font: inherit; font-size: 14px; font-weight: 700; letter-spacing: 0.2em;
  color: #a7a4a0; background: transparent;
  border: 0; border-bottom: 2px solid transparent;
  padding: 5px 8px 0; cursor: pointer;
}
.tab:hover { color: var(--c-text); }
.tab.on {
  color: #f0ece4; border-bottom-color: var(--c-amber);
  text-shadow: 0 0 12px rgba(255,255,255,0.14);
}
.tab.sm { padding: 4px 9px; font-size: 11px; letter-spacing: 0.1em; }

.acct { display: flex; align-items: center; gap: var(--s3); margin-left: auto; }
.acct .who { font-size: 12px; color: var(--c-text-2); max-width: 14ch; overflow: hidden; text-overflow: ellipsis; }
.gold { font-family: var(--f-num); font-weight: 700; color: var(--c-amber); }
.gold::before { content: "◈ "; opacity: 0.7; }
.gold.big { font-size: 24px; }
.btn-sm { padding: 5px 10px; font-size: 11px; letter-spacing: 0.08em; }
.offline-tag { font-size: 11px; }

.notice {
  flex: none; padding: 7px var(--s4); font-size: 12px;
  color: var(--c-danger); background: rgba(224, 82, 63, 0.1);
  border-bottom: 1px solid var(--c-line);
}
.lobby-body { flex: 1; min-height: 0; overflow: auto; padding: 16px 19px 18px; }
.pad { padding: var(--s4); }

/* ---- 出击 ---- */
/* 三栏不能等宽：主推的是主题挑战，战绩只是参考。
   等宽等重是后台看板的排法，玩家进来第一眼会不知道该点哪个。 */
.deploy {
  display: grid;
  /* minmax(0, …) 不能省：默认的 1fr 下限是内容最小宽度，
     窄屏上路线图和键位表会把整栏顶出屏幕。 */
  grid-template-columns: minmax(0, 1.24fr) minmax(0, 0.94fr) minmax(0, 0.82fr);
  gap: 17px;
  height: 100%;
  align-items: stretch;
}
.deploy > .panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  border: 0;

  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.032),
      rgba(255, 255, 255, 0.008) 84px,
      transparent 160px
    ),
    linear-gradient(
      135deg,
      rgba(25, 31, 32, 0.97),
      rgba(13, 17, 19, 0.97)
    );

  box-shadow:
    0 22px 42px rgba(0, 0, 0, 0.42),
    inset 0 1px rgba(92, 102, 104, 0.46),
    inset 1px 0 rgba(255, 255, 255, 0.025),
    inset -1px 0 rgba(0, 0, 0, 0.7),
    inset 0 -3px rgba(0, 0, 0, 0.72);
}

.deploy > .panel > .panel-body {
  flex: 1;
}

.deploy > .panel::before,
.deploy > .panel::after { width: 14px; height: 14px; opacity: 0.85; }
.deploy .panel-head {
  display: block; min-height: auto; padding: 36px 24px 4px;
  border: 0; background: transparent;
}
.deploy .panel-head::after {
  content: "";
  display: block;
  width: 64px;
  height: 2px;
  margin-top: 12px;

  background: linear-gradient(
    90deg,
    rgba(240, 167, 51, 0.75),
    transparent
  );
}

.deploy .panel-head h3 {
  font-size: 23px; line-height: 1; font-weight: 800;
  letter-spacing: 0.12em; color: #d9d5ce;
}
.deploy .panel-head > .eyebrow { display: none; }
.challenge-card .panel-head { padding-left: 37px; }
.deploy .panel-body { padding: 8px 21px 29px; }
.mode-card .panel-body { display: flex; flex-direction: column; gap: 14px; }
.mode-lead {
  min-height: 42px; margin: 0; font-size: 11px; line-height: 1.75;
  letter-spacing: 0.035em; color: #888d8d;
}
/* 三栏的导语统一高度，下面的场景卡 / 路线图 / 战绩才落在同一条基线上 */
.mode-card.hell {
  border: 0;

  box-shadow:
    0 22px 42px rgba(0, 0, 0, 0.42),
    inset 0 2px #5b2a24,
    inset 1px 0 rgba(255, 255, 255, 0.02),
    inset 0 -3px rgba(0, 0, 0, 0.72);
}

.mode-card.hell .panel-head::after {
  background: linear-gradient(90deg, #744038, transparent);
}
.mode-card .btn-deploy {
  margin-top: auto; height: 56px; font-size: 18px;
  border-width: 1px; clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px);
}
.mode-card.hell .btn-deploy {
  color: #ad5c45;
  background: linear-gradient(180deg, #4b211c, #301512);
  border-color: #923d32;
  box-shadow: inset 0 0 0 2px rgba(20,5,4,0.7), 0 0 18px rgba(120,35,24,0.2);
}
.mode-card.hell .btn-deploy:hover:not(:disabled) { color: #df866d; border-color: #c15343; }

.theme-row { display: flex; flex-direction: column; gap: 9px; }
/* 场景卡吃掉纵向余量：主推的选择就该占最多地方，也省掉一整块空面板 */
.challenge-card .theme-row { flex: 1; gap: 10px; margin-top: 4px; }
.challenge-card .theme { flex: 1; max-height: 158px; }
.theme {
  --accent: var(--c-amber);

  position: relative;
  min-height: 88px;
  display: grid;
  grid-template-columns: 104px 1fr;
  align-items: stretch;

  padding: 0;
  overflow: hidden;
  cursor: pointer;

  font: inherit;
  text-align: left;
  color: var(--c-text-2);

  border: 0;
  border-left: 3px solid var(--accent);

  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.024),
      rgba(255, 255, 255, 0.006)
    ),
    rgba(17, 22, 23, 0.76);

  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.03),
    inset 0 -1px rgba(0, 0, 0, 0.48);

  transition:
    transform 120ms ease,
    background 120ms ease;
}
.theme:hover {
  border-left-color: var(--accent);
  background: #1b2022;
  transform: translateX(2px);
}
.theme.on {
  color: var(--c-text);
  border-left-color: var(--accent);

  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--accent) 14%, transparent),
      rgba(28, 30, 27, 0.9) 72%
    );

  box-shadow:
    inset 0 1px color-mix(
      in srgb,
      var(--accent) 18%,
      transparent
    ),
    0 8px 18px rgba(0, 0, 0, 0.2);
}
.theme-art {
  position: relative; display: block; overflow: hidden;
  border-right: 1px solid rgba(255,255,255,0.08);
  background-color: #1a1d19;
}
.theme-art::before, .theme-art::after, .theme-art i {
  content: ""; position: absolute; display: block;
}
.theme-art.tomb {
  background:
    linear-gradient(35deg, transparent 40%, rgba(174,142,82,0.18) 41% 44%, transparent 45%),
    repeating-linear-gradient(45deg, rgba(130,105,65,0.11) 0 2px, transparent 2px 12px),
    #242219;
}
/* 卡片高度会随栏高变化，装饰一律按中线定位，不然会全部贴到卡片上沿 */
.theme-art.tomb::before {
  width: 48px; height: 48px; left: 27px; top: calc(50% - 24px);
  border: 3px double #756541; transform: rotate(45deg);
  box-shadow: inset 0 0 0 8px #171711, inset 0 0 0 10px #605332;
}
.theme-art.tomb::after {
  width: 18px; height: 18px; left: 42px; top: calc(50% - 9px);
  border: 2px solid #9a814d; transform: rotate(45deg);
}
.theme-art.palace {
  background:
    radial-gradient(circle at center, transparent 0 25px, rgba(100,134,122,0.38) 26px 27px, transparent 28px 37px, rgba(80,115,104,0.28) 38px 39px, transparent 40px),
    repeating-linear-gradient(90deg, rgba(101,137,126,0.07) 0 1px, transparent 1px 14px),
    #13211f;
}
.theme-art.palace::before {
  width: 46px; height: 46px; left: 28px; top: calc(50% - 23px);
  border: 1px solid #527b70; border-radius: 50%;
  box-shadow: inset 0 0 0 10px rgba(6,14,13,0.8);
}
.theme-art.palace::after {
  width: 3px; height: 3px; left: 50px; top: calc(50% - 1.5px);
  background: #83ae9f; border-radius: 50%; box-shadow: 0 0 8px #6b9a89;
}
.theme-art.lab {
  background:
    repeating-linear-gradient(0deg, transparent 0 14px, rgba(99,147,154,0.12) 15px),
    repeating-linear-gradient(90deg, transparent 0 20px, rgba(99,147,154,0.13) 21px),
    #142124;
}
.theme-art.lab::before {
  inset: 14px 12px;
  border: 2px solid #49676a;
  box-shadow: inset 18px 0 rgba(30,49,52,0.8), inset -18px 0 rgba(30,49,52,0.8);
}
.theme-art.lab::after {
  width: 20px; height: 35px; left: 41px; top: calc(50% - 17.5px);
  border: 1px solid #6f9296; background: rgba(4,12,14,0.7);
}
.theme-copy {
  display: flex; flex-direction: column; justify-content: center; gap: 7px;
  min-width: 0; padding: 11px 14px;
}
.theme .theme-copy b {
  display: block; font-size: 18px; line-height: 1; letter-spacing: 0.13em; color: #d9d4ca;
}
.theme .theme-copy > span { font-size: 11px; letter-spacing: 0.1em; color: #858a89; }

/* 出击前的携带确认。顺带填掉场景卡和按钮之间那块空白——
   一大片空着的面板看起来就像后台页没写完。 */
.carry-brief {
  padding-top: 14px;
  border-top: 1px solid rgba(61, 69, 76, 0.42);
}
.carry-brief-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
.carry-brief-head span:last-child { font-size: 10px; letter-spacing: 0.06em; color: #6c7373; }
.carry-brief-gear {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 11px;
}
.cb-gear {
  display: grid; justify-items: center; gap: 4px; min-width: 0;
}
.cb-gear .slot { width: 100%; max-width: 46px; cursor: default; }
.cb-gear small { font-size: 8px; letter-spacing: 0.2em; color: #666d6d; }
.cb-gear b {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 10px; font-weight: 600; color: #b0aca4;
}
.cb-gear.none b { color: #5d6464; }
.carry-brief-supply { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.cb-sup {
  display: flex; align-items: baseline; gap: 5px;
  padding: 4px 9px; font-size: 10px; letter-spacing: 0.06em; color: #8d9291;
  background: rgba(12, 17, 19, 0.6);
  box-shadow: inset 0 0 0 1px rgba(61, 69, 76, 0.42);
}
.cb-sup b { font-family: var(--f-num); font-size: 11px; color: var(--c-amber); }

/* 18 段刻度：地狱模式的长度一眼看得出来 */
/* .hell-progress { margin-top: 12px; }
.hell-track { display: flex; gap: 2px; }
.hell-track i {
  flex: 1; height: 25px; border: 1px solid #414747;
  background: linear-gradient(90deg, #262b2b, #333938);
}
.hell-track i.end {
  border-color: #9a4339;
  background: linear-gradient(90deg, #843329, #c3483a);
  box-shadow: 0 0 9px rgba(210,65,49,0.26);
}
.hell-scale { display: flex; gap: 2px; margin-top: 4px; }
.hell-scale span {
  flex: 1; min-width: 0; overflow: visible;
  font-family: var(--f-num); font-size: 7px; color: #626767; text-align: center;
  transform: scaleX(0.8);
} */


/* 地狱面板内部使用完整纵向空间 */
.mode-card.hell .panel-body {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 14px;
}

/* 整条下潜路线 */
.hell-progress {
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px 12px;
}

/* 地下井道 */
.hell-shaft {
  position: relative;

  width: min(340px, 100%);
  height: 100%;
  min-height: 390px;
  max-height: 520px;

  display: grid;
  grid-template-rows: repeat(18, 1fr);
}

/* 贯穿18层的主轴 */
.hell-shaft::before {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 52px;

  width: 1px;

  background: linear-gradient(
    180deg,
    #3d454c 0%,
    #3d454c 48%,
    #6b332c 82%,
    #e0523f 100%
  );

  box-shadow: 0 0 8px rgba(224, 82, 63, 0.08);
}

/* 单层刻度 */
.hell-floor {
  --floor-color: #8a8f84;

  position: relative;
  display: grid;
  grid-template-columns: 36px 32px minmax(0, 1fr);
  align-items: center;

  min-height: 0;
  color: #5f666e;
}

/* 每两层之间增加非常弱的场景分组线 */
.hell-floor:nth-child(even):not(:last-child)::after {
  content: "";
  position: absolute;
  left: 68px;
  right: 0;
  bottom: 0;

  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(61, 69, 76, 0.42),
    transparent
  );
}

/* 三个场景循环 */
.hell-floor.zone-0 {
  --floor-color: #d5a64e;
}

.hell-floor.zone-1 {
  --floor-color: #62c0a7;
}

.hell-floor.zone-2 {
  --floor-color: #79d4d0;
}

/* 层数 */
.floor-no {
  padding-right: 7px;

  font-family: var(--f-num);
  font-size: 9px;
  line-height: 1;
  text-align: right;
  color: #686f73;
}

/* 井道节点 */
.floor-node {
  position: relative;
  z-index: 1;

  width: 7px;
  height: 7px;
  margin-left: 13px;

  background: #171b1e;
  border: 1px solid var(--floor-color);
  transform: rotate(45deg);

  box-shadow: 0 0 0 3px #131719;
}

/* 场景名称 */
.floor-name {
  padding-left: 8px;

  overflow: hidden;
  white-space: nowrap;

  font-size: 9px;
  letter-spacing: 0.12em;
  color: color-mix(
    in srgb,
    var(--floor-color) 68%,
    #5f666e
  );
}

/* 难度门槛：掠夺者和保险箱登场的那一层 */
.hell-floor.milestone .floor-node {
  width: 9px;
  height: 9px;
  margin-left: 12px;

  border-color: #e8b53d;
  background: rgba(232, 181, 61, 0.22);

  box-shadow:
    0 0 0 3px #131719,
    0 0 9px rgba(232, 181, 61, 0.2);
}

/* 场景名保持本层的场景色，门槛标记单独用琥珀，两者一眼能分开 */
.floor-name em {
  font-style: normal;
  color: #b69038;
}

.floor-name .sep {
  font-style: normal;
  margin: 0 5px;
  color: #4a5058;
}

/* 最终第18层 */
.hell-floor.end {
  --floor-color: #e0523f;
}

.hell-floor.end .floor-no {
  color: #e0523f;
  font-weight: 700;
}

.hell-floor.end .floor-node {
  width: 12px;
  height: 12px;
  margin-left: 10px;

  background: #a6372b;
  border-color: #e0523f;

  box-shadow:
    0 0 0 3px #131719,
    0 0 12px rgba(224, 82, 63, 0.35);
}

.hell-floor.end .floor-name {
  color: #e0523f;
  font-size: 10px;
  font-weight: 700;
}

/* 战绩栏内容天然就少。与其把某一块拉长填满，不如让三块之间均匀留白，
   每块都保持自己该有的高度 —— 拉伸出来的行距比空白更难看。 */
.record-card .panel-body {
  display: flex; flex-direction: column; justify-content: space-between;
  padding-top: 0;
}
.run-count {
  display: flex; align-items: center; gap: 10px; margin-bottom: 5px;
}
.run-count::before, .run-count::after {
  content: ""; height: 1px; flex: 1; background: #32393b;
}
.run-count span {
  min-width: 86px; padding: 6px 14px; text-align: center;
  font-family: var(--f-num); font-size: 14px; color: #c4c1b9;
  background: linear-gradient(180deg, #202528, #111518);
  border: 1px solid #30373a;
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 8px 100%, 0 50%);
}
.record-card .best-grid { gap: 0; margin-bottom: 0; }
.record-card .best-cell {
  padding: 10px 5px 13px; background: transparent; border: 0;
  border-right: 1px solid #333a3c;
}
.record-card .best-cell:last-child { border-right: 0; }
.record-card .best-cell b { display: block; margin-top: 7px; color: var(--c-amber); font-size: 31px; }
.record-card .best-cell .eyebrow { color: #9a9993; font-size: 11px; letter-spacing: 0.1em; }
.brief-rules {
  display: flex; flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 8px 0;

  border: 0;
  border-top: 1px solid rgba(61, 69, 76, 0.42);
  border-bottom: 1px solid rgba(61, 69, 76, 0.25);

  background: rgba(7, 8, 10, 0.12);
}
.brief-rules li {
  position: relative;
  display: flex; align-items: center;
  padding: 13px 10px 13px 28px;

  border-bottom: 1px solid rgba(43, 49, 54, 0.42);

  color: #777e7d;
  font-size: 11px;
  line-height: 1.45;
  letter-spacing: 0.04em;
}
.brief-rules li:last-child { border-bottom: 0; }
.brief-rules li::before {
  content: "›"; position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  color: #525b5d; font-size: 18px;
}
.keycaps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;

  padding-top: 12px;

  border: 0;
  border-top: 1px solid rgba(61, 69, 76, 0.38);
}

.keycap {
  min-height: 53px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;

  padding: 5px 3px;
  border: 0;

  font-size: 9px;
  text-align: center;
  color: #777d7d;

  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.024),
      rgba(255, 255, 255, 0.006)
    ),
    rgba(12, 17, 19, 0.58);

  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.025),
    inset 0 -1px rgba(0, 0, 0, 0.5);
}

.keycap b { font-family: var(--f-num); color: #b9b7af; font-size: 12px; font-weight: 500; }

/* ---- 商店 ---- */
.shop, .gear, .records { display: flex; flex-direction: column; gap: var(--s3); max-width: 880px; margin: 0 auto; }
.shop-head {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s4); background: var(--c-panel-2); border: 1px solid var(--c-line);
}
.shop-head .hint { margin-left: auto; text-align: right; max-width: 42ch; }
.shop-list { display: flex; flex-direction: column; gap: 6px; }
.shop-row, .carry-row {
  display: flex; align-items: center; gap: var(--s3);
  padding: 8px 11px; background: var(--c-panel-2);
  border: 1px solid var(--c-line); border-left: 3px solid var(--q, var(--c-line));
}
.shop-row .slot, .carry-row .slot { width: 40px; flex: none; cursor: default; }
.shop-row .nm, .carry-row .nm { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.shop-row .nm b, .carry-row .nm b { font-size: 13px; }
.shop-row .cnt { font-size: 11px; color: var(--c-text-3); }
.shop-row .cnt b { font-family: var(--f-num); color: var(--c-text); }

/* ---- 装备 ---- */
.gear-slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s3); }
.gear-slot { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.gear-slot .slot { width: 100%; max-width: 76px; cursor: default; }
.gear-slot b { font-size: 11px; color: var(--c-text-2); }
.own-row { margin-bottom: var(--s3); }
.own-row:last-child { margin-bottom: 0; }
.own-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.own {
  font: inherit; cursor: pointer;
  display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 6px;
  color: var(--c-text-2); background: var(--c-panel-2); border: 1px solid var(--c-line);
}
.own:hover { border-color: var(--c-line-hi); color: var(--c-text); }
.own.on { border-color: var(--c-amber); color: var(--c-text); }
.own .slot { width: 30px; border: 0; background: none; cursor: pointer; }
.own span { font-size: 12px; }
.own.clear { padding: 6px 12px; color: var(--c-text-3); }

.carry-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--s3); }
.stepper { display: flex; align-items: center; gap: 9px; }
.stepper b { font-family: var(--f-num); font-size: 15px; min-width: 12px; text-align: center; }

/* ---- 记录 ---- */
.board-switch { display: flex; gap: 2px; }
.board { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.board th {
  text-align: left; padding: 6px 8px; font-size: 10px; font-weight: 700;
  letter-spacing: 0.14em; color: var(--c-text-3); border-bottom: 1px solid var(--c-line);
}
.board td { padding: 7px 8px; border-bottom: 1px solid var(--c-line); }
.board tbody tr:hover { background: var(--c-panel-2); }
.board td:not(:nth-child(2)) { font-family: var(--f-num); }
.board .rk { color: var(--c-text-3); width: 34px; }
.board tr:nth-child(-n+3) .rk { color: var(--c-amber); font-weight: 700; }

.gate { max-width: 420px; margin: 12vh auto 0; text-align: center; }
.gate h3 { margin: 0 0 var(--s2); font-size: 15px; letter-spacing: 0.12em; }
.gate .btn { margin-top: var(--s3); }

/* ---- 登录表单 ---- */
.dialog.auth { width: min(400px, 100%); }
.field { display: block; margin-bottom: var(--s3); }
.field span { display: block; margin-bottom: 5px; font-size: 10px; letter-spacing: 0.16em; color: var(--c-text-3); }
.field input {
  width: 100%; font: inherit; font-size: 13px; padding: 9px 11px;
  color: var(--c-text); background: var(--c-void);
  border: 1px solid var(--c-line); border-radius: var(--r-sm);
}
.field input:focus { outline: 0; border-color: var(--c-amber); }
.err { margin: 0; font-size: 12px; color: var(--c-danger); }

.best-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); }
.best-cell {
  padding: var(--s3) var(--s2); text-align: center;
  background: var(--c-panel-2); border: 1px solid var(--c-line);
}
.best-cell .eyebrow { display: block; margin-bottom: 6px; }
.best-cell b { font-size: 26px; font-weight: 700; }
.best-cell b small { font-size: 11px; color: var(--c-text-3); margin-left: 2px; }

.rulelist { margin: 0; padding-left: 16px; color: var(--c-text-2); font-size: 12.5px; line-height: 1.8; }
.rulelist li { margin-bottom: 11px; }
.rulelist b { color: var(--c-text); }

.stat {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 0; border-bottom: 1px solid var(--c-line); font-size: 12px;
}
.stat:last-child { border-bottom: 0; }
.stat span { color: var(--c-text-3); letter-spacing: 0.08em; }
.stat b { font-family: var(--f-num); font-weight: 600; }

/* ============================================================
   弹窗
   ============================================================ */
.modal {
  position: fixed; inset: 0; z-index: 1100;
  display: grid; place-items: center;
  padding: var(--s4);
  background: rgba(5, 6, 8, 0.72);
  backdrop-filter: blur(3px);
  animation: fade 0.14s ease-out;
}
@keyframes fade { from { opacity: 0; } }
.dialog {
  position: relative;
  width: min(560px, 100%);
  max-height: 88vh; overflow: auto;
  background: linear-gradient(180deg, #181c1f, var(--c-panel));
  border: 1px solid var(--c-line-hi);
  border-top: 2px solid var(--c-amber);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7);
  padding: var(--s5);
  animation: rise 0.16s ease-out;
}
@keyframes rise { from { transform: translateY(10px); opacity: 0; } }
.dialog h3 { margin: 0 0 var(--s3); font-size: 17px; letter-spacing: 0.14em; }
.dialog h3.ok { color: var(--c-ok); }
.dialog h3.bad { color: var(--c-danger); }
.dialog ul { margin: 0 0 var(--s4); padding-left: 18px; color: var(--c-text-2); font-size: 13px; line-height: 1.9; }
.dialog .foot { display: flex; gap: var(--s2); margin-top: var(--s4); }
.loot-title {
  display: flex; align-items: center; gap: 12px;
  margin: calc(var(--s5) * -1) calc(var(--s5) * -1) var(--s3);
  padding: 13px var(--s5);
  background: linear-gradient(90deg, rgba(240,167,51,0.12), transparent);
  border-bottom: 1px solid var(--c-line);
}
.loot-title h3 { margin: 2px 0 0; }
.loot-mark {
  width: 38px; height: 38px; display: grid; place-items: center;
  color: var(--c-amber); background: #111416;
  border: 1px solid var(--c-amber); font-size: 18px; font-weight: 800;
  box-shadow: inset 0 0 14px rgba(240,167,51,0.12);
}
.loot-list { display: flex; flex-direction: column; gap: 5px; margin: var(--s3) 0; }
.loot-row {
  display: flex; align-items: center; gap: var(--s3);
  padding: 7px 10px; background: var(--c-panel-2);
  border: 1px solid var(--c-line); border-left: 3px solid var(--q, var(--c-line));
  cursor: pointer;
}
.loot-row .nm { flex: 1; font-size: 13px; }
.loot-row .vol {
  font-family: var(--f-num); font-size: 11px; color: var(--c-text-3);
  padding: 1px 6px; border: 1px solid var(--c-line);
}
.loot-row .px { font-family: var(--f-num); font-size: 12px; color: var(--c-amber); min-width: 34px; text-align: right; }
.loot-row input { accent-color: var(--c-amber); width: 15px; height: 15px; }
.loot-list + .foot { flex-wrap: wrap; }
.loot-list + .foot .btn { flex: 1 1 auto; }
.result-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); margin: var(--s4) 0; }
.result-cell { padding: var(--s3); background: var(--c-panel-2); border: 1px solid var(--c-line); text-align: center; }
.result-cell .eyebrow { display: block; margin-bottom: 5px; }
.result-cell b { font-family: var(--f-num); font-size: 20px; }
.result-cell b small { font-size: 11px; color: var(--c-text-3); }
.tag.rec {
  margin-left: 5px; padding: 0 5px; font-size: 8px;
  border-color: var(--r-legend); background: var(--c-amber-soft);
}
.inv-block { margin-bottom: var(--s4); }
.inv-block .slot-grid { --cols: 6; }

/* ============================================================
   对局 HUD
   ============================================================ */
.raid-wrap { position: relative; width: 100%; height: 100%; overflow: hidden; background: #07080a; }
#raid { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }
/* 战斗画面里挂着系统箭头是最典型的网页感，鼠标就是准星 */
.raid-wrap:not(.touch) #raid { cursor: crosshair; }
.raid-wrap #raid { transition: filter 0.14s ease; }
.raid-wrap.paused #raid { filter: blur(2px) saturate(0.55) brightness(0.58); }

/* 画面后期：四角压暗 + 极细扫描线。
   一层很薄的镜头感就能把「网页里的画布」读成「游戏画面」，代价只有一个伪元素。 */
.raid-wrap::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(128% 108% at 50% 48%, transparent 45%, rgba(0,0,0,0.22) 78%, rgba(0,0,0,0.52) 100%),
    repeating-linear-gradient(0deg, rgba(0,0,0,0.06) 0 1px, transparent 1px 3px);
}

.hud { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.hud button { pointer-events: auto; }
/* HUD 不再靠一个个面板底色撑可读性：上下各压一道渐隐，读数直接浮在场景上。
   少掉八个方框，画面立刻从控制台变回游戏。 */
.hud::before, .hud::after {
  content: ""; position: absolute; left: 0; right: 0; height: 168px;
  pointer-events: none; z-index: -1;
}
.hud::before { top: 0; background: linear-gradient(180deg, rgba(4,5,7,0.72), transparent); }
.hud::after { bottom: 0; background: linear-gradient(0deg, rgba(4,5,7,0.76), transparent); }

/* 顶部正中只留计时：这是全局唯一需要随时扫一眼的数字 */
.hud-top {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; justify-content: center;
  padding-top: calc(8px + env(safe-area-inset-top));
}
.run-clock { display: grid; justify-items: center; gap: 2px; }
.run-clock .t {
  font-size: 30px; font-weight: 700; line-height: 1; letter-spacing: 0.05em; color: #f3efe6;
  text-shadow: 0 2px 10px rgba(0,0,0,0.95), 0 0 24px rgba(0,0,0,0.55);
}
.run-clock .lbl {
  font-size: 9px; letter-spacing: 0.34em; text-indent: 0.34em; color: var(--c-text-3);
  text-shadow: 0 1px 4px rgba(0,0,0,0.95);
}
.run-clock.urgent .t { color: #ff8f72; text-shadow: 0 2px 10px rgba(0,0,0,0.95), 0 0 26px rgba(224,82,63,0.5); }
.run-clock.urgent .lbl { color: var(--c-danger); }

.hud-tactics {
  position: absolute; width: 200px;
  left: max(18px, calc(env(safe-area-inset-left) + 18px));
  top: max(14px, calc(env(safe-area-inset-top) + 14px));
  text-shadow: 0 1px 4px rgba(0,0,0,0.95);
}
.tactics-place { display: flex; align-items: baseline; gap: 9px; }
.tactics-place .zone { font-size: 12px; letter-spacing: 0.18em; color: var(--c-text-2); }
.tactics-place .depth { font-size: 9px; letter-spacing: 0.14em; color: var(--c-text-3); }
.tactics-place .depth b { margin-left: 3px; font-size: 15px; font-weight: 700; color: var(--c-amber); }

.tactics-title { display: flex; align-items: baseline; gap: 9px; margin-top: 7px; }
.tactics-title span { font-size: 11px; letter-spacing: 0.12em; color: var(--c-text); }
.tactics-title b { font-size: 9px; letter-spacing: 0.14em; font-weight: 700; color: var(--c-ok); }
.tactics-title b.warn { color: var(--c-amber); }
/* 接敌时让状态词自己闪，不用再给整块信息加边框来强调 */
.tactics-title b.hot { color: var(--c-danger); animation: threatBlink 0.9s steps(2, end) infinite; }
@keyframes threatBlink { 50% { opacity: 0.3; } }

.tactics-row {
  display: flex; gap: 12px; margin-top: 6px;
  font-size: 10px; letter-spacing: 0.06em; color: var(--c-text-3);
}
.tactics-row b { font-family: var(--f-num); font-weight: 600; color: var(--c-text-2); }
.tactics-row .ready { color: var(--c-ok); }

.exit-guide { display: flex; align-items: center; gap: 7px; margin-top: 8px; }
.exit-guide i { width: 14px; font: 700 15px/1 var(--f-num); font-style: normal; color: var(--c-ok); text-align: center; }
.exit-guide small { font-size: 8px; letter-spacing: 0.22em; color: var(--c-text-3); }
.exit-guide b { font: 600 11px var(--f-num); color: var(--c-ok); }

.hud-vitals {
  position: absolute; width: 214px;
  left: max(18px, calc(env(safe-area-inset-left) + 18px));
  bottom: max(16px, calc(env(safe-area-inset-bottom) + 16px));
  text-shadow: 0 1px 4px rgba(0,0,0,0.95);
  transition: opacity 0.18s;
}
/* 角色走到读数底下时让路，否则玩家会看不见自己 */
.hud.shy .hud-vitals { opacity: 0.26; }
.hud-vitals .eyebrow { font-size: 8px; letter-spacing: 0.24em; }
.hp-block { display: flex; align-items: baseline; gap: 9px; }
/* 生命是最该一眼看到的东西，给它整个 HUD 里最大的字号 */
.hud-vitals .hp { font-size: 32px; font-weight: 700; line-height: 1; color: #f3efe6; }
.hud-vitals .hp small { font-size: 12px; font-weight: 400; color: var(--c-text-3); }
/* 只认血条那一根：背包条也会带 .bad，早先写成 .vital-bar.bad 时背包一满血量数字就变红 */
.hud-vitals:has(#hpbar.bad) .hp { color: #ff8f72; }

.hud-vitals .vital-bar {
  height: 9px; margin-top: 6px; border: none;
  background: rgba(6,8,10,0.7); box-shadow: inset 0 0 0 1px rgba(233,230,223,0.1);
}
/* 分格的血条比一条连续进度条更像游戏，也更容易一眼估出还剩几格 */
.hud-vitals .vital-bar::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(90deg, transparent 0 9px, rgba(6,8,10,0.85) 9px 11px);
}
.hud-vitals .vital-bar.striped > i { background-image: none; }
.hud-vitals .vital-bar > i { box-shadow: 0 0 12px rgba(95,184,90,0.4); }
.hud-vitals .vital-bar.bad > i { box-shadow: 0 0 12px rgba(224,82,63,0.5); }

.vital-sub { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin-top: 10px; }
.bag-block { flex: 1; min-width: 0; }
.bag-block .row { display: flex; align-items: baseline; justify-content: space-between; }
.bag-block .num { font-size: 11px; color: var(--c-text-2); }
.hud-vitals .bag-block .vital-bar { height: 6px; margin-top: 4px; }
.hud-vitals .bag-block .vital-bar::after {
  background: repeating-linear-gradient(90deg, transparent 0 6px, rgba(6,8,10,0.85) 6px 8px);
}
/* 背包满是「该撤了」，不是「要死了」，别用危险红把左下角整片染红 */
.hud-vitals .bag-block .vital-bar > i,
.hud-vitals .bag-block .vital-bar.bad > i {
  background: var(--c-amber); box-shadow: 0 0 10px rgba(240,167,51,0.45);
}
/* 战利品是这局的分数，随时看得见才有「再多捡一件」的动力 */
.loot-block { display: grid; justify-items: end; gap: 3px; }
.loot-block .num {
  font-size: 21px; font-weight: 700; line-height: 1; color: var(--c-amber);
  text-shadow: 0 0 18px rgba(240,167,51,0.35), 0 1px 4px rgba(0,0,0,0.95);
}

.status-icons { display: flex; gap: 5px; margin-top: 9px; min-height: 22px; }
.status-icons:empty { margin-top: 0; min-height: 0; }
.si {
  width: 22px; height: 22px; display: grid; place-items: center;
  color: #ff8f72; font-size: 9px;
  background: rgba(224,82,63,0.16); box-shadow: inset 0 0 0 1px rgba(224,82,63,0.5);
}

.hud-mini {
  position: absolute;
  right: max(18px, calc(env(safe-area-inset-right) + 18px));
  top: max(14px, calc(env(safe-area-inset-top) + 14px));
}
/* 小地图只留内描边和暗角。颜色含义写在 M 键的大地图里，HUD 上不留图例文字——
   常驻图例是报表的东西，游戏里没人会一直盯着看。 */
.hud-mini canvas { display: block; }
.hud-mini::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(233,230,223,0.16), inset 0 0 14px rgba(0,0,0,0.6);
}

.hud-weapon {
  position: absolute;
  right: max(18px, calc(env(safe-area-inset-right) + 18px));
  bottom: max(16px, calc(env(safe-area-inset-bottom) + 16px));
  display: flex; align-items: flex-end; gap: 12px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.95);
}
.wcard {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  padding: 0; background: none; border: none; box-shadow: none; text-align: right;
}
.wcard > canvas { flex: none; opacity: 0.85; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.8)); }
.wcard .winfo { min-width: 92px; }
.wcard .wn { font-size: 10px; letter-spacing: 0.16em; font-weight: 600; color: var(--c-text-2); }
.wcard .wa { font-family: var(--f-num); font-size: 11px; font-weight: 600; color: var(--c-text-3); }
.wcard .wa small { font-size: 9px; }
/* 弹药和生命同级：低头一眼就要知道还能不能继续开枪 */
.wcard .wammo {
  font-family: var(--f-num); font-size: 26px; font-weight: 700;
  line-height: 1; margin-top: 3px; color: #f3efe6;
}
.wcard .wammo small { font-size: 11px; font-weight: 400; color: var(--c-text-3); margin-left: 4px; }
.wcard .wammo.dry { color: #ff8f72; text-shadow: 0 0 20px rgba(224,82,63,0.45), 0 1px 4px rgba(0,0,0,0.95); }

/* 格子是游戏里本来就该有边的东西，这几处保留描边，但去掉网页味的实心底 */
.qslots { display: flex; gap: 4px; }
.qslot {
  position: relative; width: 46px; height: 46px; padding: 0;
  background: rgba(8,10,12,0.5); border: none; box-shadow: inset 0 0 0 1px rgba(233,230,223,0.12);
  display: grid; place-items: center; cursor: pointer;
}
.qslot:hover:not(:disabled) { box-shadow: inset 0 0 0 1px rgba(240,167,51,0.55); }
.qslot:disabled { opacity: 0.32; cursor: default; }
.qslot .k { position: absolute; left: 3px; top: 1px; font-family: var(--f-num); font-size: 9px; color: var(--c-text-3); }

.equip-hud { display: flex; align-items: flex-end; gap: 10px; }
.gear-chip {
  width: auto; height: auto; padding: 0; background: none; border: none;
  display: grid; justify-items: center; gap: 3px; color: var(--c-text);
}
.gear-chip canvas, .gear-chip .gear-empty { flex: none; width: 24px; opacity: 0.85; }
.gear-chip .gear-empty { text-align: center; color: var(--c-text-3); }
.gear-chip > span:last-child { min-width: 0; display: grid; justify-items: center; gap: 1px; }
.gear-chip small { font-size: 7px; letter-spacing: 0.2em; color: var(--c-text-3); }
.gear-chip b {
  max-width: 56px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 9px; font-weight: 600; color: var(--c-text-2);
}
.gear-chip.empty { opacity: 0.4; }

.hud-prompt {
  position: absolute; left: 50%; bottom: 118px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px;
  padding: 7px 16px; white-space: nowrap; border: none;
  background: rgba(8,10,12,0.55);
  box-shadow: inset 0 0 0 1px rgba(240,167,51,0.45), 0 0 30px rgba(240,167,51,0.12);
  animation: promptIn 0.16s ease-out;
}
@keyframes promptIn { from { opacity: 0; transform: translate(-50%, 7px); } }
.hud-prompt[hidden] { display: none; }
.hud-prompt.locked { box-shadow: inset 0 0 0 1px rgba(232,181,61,0.5), 0 0 30px rgba(232,181,61,0.1); }
/* 实心键帽：这是游戏提示最通用的写法，比一个描边小方块显眼得多 */
.hud-prompt .key {
  min-width: 22px; height: 22px; padding: 0 6px; display: grid; place-items: center;
  border: none; background: var(--c-amber); color: #0d0f11;
  font-family: var(--f-num); font-size: 11px; font-weight: 700;
}
.hud-prompt.locked .key { background: var(--c-warn); }
.hud-prompt .txt { font-size: 12px; letter-spacing: 0.1em; text-shadow: 0 1px 4px rgba(0,0,0,0.9); }

/* 换弹 / 用药 / 撤离共用的读条 */
.hud-cast {
  position: absolute; left: 50%; bottom: 180px; transform: translateX(-50%);
  width: 250px; padding: 0; background: none; border: none;
  text-shadow: 0 1px 4px rgba(0,0,0,0.95);
}
.hud-cast[hidden] { display: none; }
.hud-cast .cast-label {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 11px; letter-spacing: 0.14em; color: var(--c-text-2); margin-bottom: 5px;
}
.hud-cast .cast-label .num { font-family: var(--f-num); font-size: 12px; color: var(--c-amber); }
.hud-cast .cast-bar {
  height: 5px; border: none;
  background: rgba(6,8,10,0.8); box-shadow: inset 0 0 0 1px rgba(233,230,223,0.12);
}
.hud-cast .cast-bar i {
  display: block; height: 100%; width: 0; background: var(--c-amber);
  box-shadow: 0 0 12px rgba(240,167,51,0.5); transition: width 0.08s linear;
}
.hud-cast.exfil .cast-bar i { background: var(--c-ok); box-shadow: 0 0 12px rgba(95,184,90,0.5); }
.hud-cast.exfil .cast-label .num { color: var(--c-ok); }

.hud-toast {
  position: absolute; left: 50%; top: 78px; transform: translateX(-50%);
  padding: 6px 18px; border: none; color: #b9ecb4;
  background: rgba(8,10,12,0.5); box-shadow: inset 0 0 0 1px rgba(95,184,90,0.35);
  font-size: 11px; letter-spacing: 0.2em; text-shadow: 0 1px 4px rgba(0,0,0,0.9);
  transition: opacity 0.2s;
}
.hud-toast[hidden] { display: none; }

/* 桌面上这两个是键位提示而不是网页按钮：平时很淡，鼠标靠近才亮 */
.hud-tools {
  position: absolute; top: 132px;
  right: max(18px, calc(env(safe-area-inset-right) + 18px));
  display: flex; flex-direction: column; align-items: flex-end; gap: 7px;
}
.hud-tools button {
  display: flex; align-items: center; gap: 7px; padding: 0;
  background: none; border: none; border-radius: 0; cursor: pointer;
  font-size: 9px; letter-spacing: 0.18em; color: var(--c-text-3); opacity: 0.62;
  text-shadow: 0 1px 4px rgba(0,0,0,0.95);
  transition: opacity 0.15s, color 0.15s;
}
.hud-tools button i {
  font-style: normal; font-family: var(--f-num); font-size: 9px; font-weight: 700;
  padding: 2px 5px; color: var(--c-text-2); box-shadow: inset 0 0 0 1px rgba(233,230,223,0.22);
}
.hud-tools button:hover { opacity: 1; color: var(--c-text); }
.hud-tools button:hover i { color: var(--c-amber); box-shadow: inset 0 0 0 1px rgba(240,167,51,0.6); }

/* 开场标题卡：进关卡时黑幕带着层名淡出。
   一秒多的演出就能把「打开了一个网页」变成「进了一局游戏」，也顺手盖掉首帧的加载抖动。 */
.raid-intro {
  position: absolute; inset: 0; z-index: 6; pointer-events: none;
  display: grid; align-content: center; justify-items: center; gap: 7px;
  background: linear-gradient(180deg, rgba(4,5,7,0.94), rgba(4,5,7,0.78));
  animation: introVeil 2.6s ease-out forwards;
}
@keyframes introVeil {
  0%, 52% { opacity: 1; }
  100% { opacity: 0; visibility: hidden; }
}
.raid-intro span { animation: introText 2.6s ease-out both; }
.raid-intro .lv { font-size: 10px; letter-spacing: 0.5em; text-indent: 0.5em; color: var(--c-amber); }
.raid-intro .nm {
  font-size: 34px; font-weight: 700; letter-spacing: 0.32em; text-indent: 0.32em;
  color: #f3efe6; animation-delay: 0.1s;
}
.raid-intro .br {
  font-size: 11px; letter-spacing: 0.28em; text-indent: 0.28em;
  color: var(--c-text-3); animation-delay: 0.2s;
}
.raid-intro .br::before {
  content: ""; display: block; width: 54px; height: 1px; margin: 0 auto 11px;
  background: linear-gradient(90deg, transparent, var(--c-amber-2), transparent);
}
@keyframes introText {
  0% { opacity: 0; transform: translateY(9px); }
  22%, 68% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: none; }
}

/* 触控控件：默认隐藏，仅粗指针设备显示 */
.mobile-controls { display: none; }
.rotate-tip { display: none; }

/* ============================================================
   手机版
   ============================================================ */
@media (max-width: 900px) {
  .topbar { flex-wrap: wrap; height: auto; gap: var(--s2); padding: 8px var(--s3); }
  .brand { font-size: 14px; }
  .tabs {
    position: static; order: 3; width: 100%; height: auto;
    transform: none; gap: 2px;
  }
  .tab { flex: 1; padding: 8px 4px; font-size: 11px; letter-spacing: 0.08em; }
  .lobby-body { padding: var(--s3); padding-bottom: calc(var(--s3) + env(safe-area-inset-bottom)); }
  /* 单列时高度交还给内容，面板一个接一个往下排 */
  .deploy { grid-template-columns: minmax(0, 1fr); height: auto; }
  .deploy > .panel { min-height: 500px; }
  /* 桌面上场景卡靠拉伸吃掉栏内余量，单列时没有余量可吃，用自然高度 */
  .challenge-card .theme-row { flex: none; }
  .challenge-card .theme { flex: none; max-height: none; }
  .record-card .panel-body { justify-content: flex-start; gap: 16px; }
  .shop-head { flex-wrap: wrap; }
  .shop-head .hint { margin-left: 0; text-align: left; max-width: none; }
  .gear-slots { grid-template-columns: repeat(2, 1fr); }
  .best-cell b { font-size: 21px; }
  .board th:nth-child(4), .board td:nth-child(4) { display: none; }
}

/* 触屏通用尺寸 */
@media (pointer: coarse) {
  .btn { min-height: 40px; }
  .qslot { width: 56px; height: 56px; }
}

/* 摇杆与动作键：由 raid.js 判定触屏后给 .raid-wrap 加 .touch 才显示。
   判定只有一处，且能用 ?touch=1 强制开启做验证。 */
.raid-wrap.touch .mobile-controls {
  display: block; position: absolute; inset: 0; pointer-events: none; z-index: 5;
}
.raid-wrap.touch .joystick {
  position: absolute;
  left: max(20px, env(safe-area-inset-left));
  bottom: max(18px, env(safe-area-inset-bottom));
  width: 118px; height: 118px;
  pointer-events: auto; touch-action: none;
}
.raid-wrap.touch .joystick-ring {
  position: absolute; inset: 0;
  border: 2px solid rgba(233,230,223,0.2); border-radius: 50%;
  background: radial-gradient(circle, rgba(233,230,223,0.05) 0 44%, rgba(8,10,12,0.5) 45%);
  box-shadow: inset 0 0 24px rgba(0,0,0,0.5);
}
.raid-wrap.touch .joystick-knob {
  position: absolute; left: 50%; top: 50%;
  width: 50px; height: 50px; transform: translate(-50%, -50%);
  border-radius: 50%; border: 2px solid rgba(240,167,51,0.6);
  background: rgba(33,38,43,0.92); box-shadow: 0 6px 16px rgba(0,0,0,0.5);
}
.raid-wrap.touch .mobile-actions {
  position: absolute;
  right: max(20px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom));
  display: flex; align-items: flex-end; gap: 14px; pointer-events: auto;
}
.raid-wrap.touch .touch-action {
  border-radius: 50%; padding: 0; font-weight: 800; letter-spacing: 0.1em;
  color: #fff4d4; touch-action: none; cursor: pointer;
}
.raid-wrap.touch .touch-action.interact {
  width: 62px; height: 62px; font-size: 11px;
  border: 2px solid var(--c-ok); background: rgba(95,184,90,0.18); color: #cdf0c9;
}
.raid-wrap.touch .touch-action.reload {
  width: 54px; height: 54px; font-size: 10px;
  border: 2px solid var(--c-amber); background: rgba(240,167,51,0.16); color: #f3d9a4;
}
.raid-wrap.touch .touch-action.med {
  width: 54px; height: 54px; font-size: 9px;
  display: grid; place-content: center;
  border: 2px solid #79c99a; background: rgba(78,165,112,0.18); color: #c9f2d7;
}
.raid-wrap.touch .touch-action.med small,
.raid-wrap.touch .touch-action.dodge small { display: block; font: 700 9px var(--f-num); min-height: 10px; }
.raid-wrap.touch .touch-action.dodge {
  width: 54px; height: 54px; font-size: 9px;
  display: grid; place-content: center;
  border: 2px solid #78a9d2; background: rgba(74,119,160,0.18); color: #d4eaff;
}
.raid-wrap.touch .touch-action:disabled { opacity: 0.35; filter: grayscale(0.5); }
.raid-wrap.touch .touch-action.fire {
  width: 86px; height: 86px; font-size: 13px;
  border: 2px solid #c8724f;
  background: radial-gradient(circle at 35% 30%, #a35a3f, #52281f);
  box-shadow: 0 0 0 7px rgba(200, 114, 84, 0.1);
}
.raid-wrap.touch .touch-action:active { transform: scale(0.93); filter: brightness(1.2); }

/* 动作键占住右下角，武器卡与快捷栏让到左下 */
.raid-wrap.touch .hud-weapon {
  right: auto; left: 150px;
  bottom: max(18px, env(safe-area-inset-bottom));
  flex-direction: row-reverse;
}
.raid-wrap.touch .equip-hud { display: none; }
.raid-wrap.touch .qslots { display: none; }
.raid-wrap.touch .wcard { gap: 8px; }
.raid-wrap.touch .wcard .winfo { min-width: 74px; }
.raid-wrap.touch .wcard .wammo { font-size: 21px; }
/* 横屏只有 390 高，左右各留一竖列、中间画面全部让出来。
   战术读数跟到小地图下面，和右上角的地图信息归成一堆。 */
.raid-wrap.touch .hud-tactics {
  left: auto; width: 178px; text-align: right;
  right: max(18px, calc(env(safe-area-inset-right) + 18px));
  top: max(122px, calc(env(safe-area-inset-top) + 122px));
}
.raid-wrap.touch .tactics-place,
.raid-wrap.touch .tactics-title,
.raid-wrap.touch .tactics-row,
.raid-wrap.touch .exit-guide { justify-content: flex-end; }
.raid-wrap.touch .hud-vitals {
  bottom: auto; top: max(46px, calc(env(safe-area-inset-top) + 40px));
  width: 172px;
}
.raid-wrap.touch .hud-vitals .hp { font-size: 22px; }
.raid-wrap.touch .loot-block .num { font-size: 16px; }
.raid-wrap.touch .hud-prompt { bottom: max(122px, calc(env(safe-area-inset-bottom) + 118px)); }
/* 横屏底部正中是摇杆与动作键之间的空档，读条放这里不挡任何操作 */
.raid-wrap.touch .hud-cast { bottom: max(22px, env(safe-area-inset-bottom)); width: 232px; }
/* 触屏上这两个是真按钮，挪到左上角顶栏，别和右侧那一列信息抢地方 */
.raid-wrap.touch .hud-tools {
  right: auto; flex-direction: row; align-items: center; gap: 12px;
  left: max(18px, calc(env(safe-area-inset-left) + 18px));
  top: max(10px, calc(env(safe-area-inset-top) + 10px));
}
.raid-wrap.touch .hud-tools button { opacity: 0.85; }

/* 横屏高度紧张时进一步压缩 */
@media (orientation: landscape) and (max-height: 460px) {
  .raid-wrap.touch .hud-vitals { width: 158px; top: max(44px, calc(env(safe-area-inset-top) + 38px)); }
  .raid-wrap.touch .hud-vitals .hp { font-size: 19px; }
  .raid-wrap.touch .run-clock .t { font-size: 20px; }
  .raid-wrap.touch .hud-mini canvas { width: 136px; height: 74px; }
  .raid-wrap.touch .joystick { width: 104px; height: 104px; }
  .raid-wrap.touch .joystick-knob { width: 44px; height: 44px; }
  .raid-wrap.touch .touch-action.fire { width: 76px; height: 76px; }
  .raid-wrap.touch .touch-action.interact { width: 56px; height: 56px; }
  .raid-wrap.touch .touch-action.reload { width: 48px; height: 48px; font-size: 9px; }
  .raid-wrap.touch .touch-action.med,
  .raid-wrap.touch .touch-action.dodge { width: 48px; height: 48px; }
  .raid-wrap.touch .mobile-actions { gap: 8px; }
  .raid-wrap.touch .hud-tactics { width: 162px; top: max(96px, calc(env(safe-area-inset-top) + 96px)); }
  .raid-wrap.touch .hud-cast { width: 200px; }
  .raid-wrap.touch .qslot { width: 46px; height: 46px; }
  .raid-wrap.touch .wcard .wammo { font-size: 18px; }
}

/* 竖屏进入对局时提示旋转 */
@media (orientation: portrait) {
  .raid-wrap.touch > *:not(.rotate-tip) { visibility: hidden; }
  .raid-wrap.touch .rotate-tip {
    display: grid; place-items: center;
    position: absolute; inset: 0; z-index: 100;
    color: var(--c-amber); font-size: 16px; letter-spacing: 0.16em;
    background: #0d0f11; visibility: visible;
  }
}