@charset "UTF-8";
/* ==========================================================================
   钢铁裂变 STEEL RIFT · hud.css
   --------------------------------------------------------------------------
   职责：战斗内 HUD（等级 / 血条 / 经验 / 波次 / BOSS 血条 / 击杀 / 武器槽 / 提示条）
   约定：#hud 整体 pointer-events:none，只有 #btn-pause 恢复点击；
        所有面板沿用 base.css 的斜切角逻辑（--frame / --face / --glow-in）。
   目录：
     01 HUD 容器      02 顶部信息条    03 波次计时      04 BOSS 血条
     05 底部信息条    06 武器槽        07 提示条        08 关键帧
   ========================================================================== */

/* ==========================================================================
   01 HUD 容器
   ========================================================================== */
#hud {
  position: absolute;
  inset: 0;
  z-index: var(--z-hud);
  pointer-events: none; /* 整层透传触摸给画布 */
  color: var(--text);
  font-family: var(--font-ui);
  /* 画面上方任何内容都要读得清 */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}

/* ==========================================================================
   02 顶部：等级徽章 + 血条/经验 + 暂停
   ========================================================================== */
.hud-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 6px 6px 0;
}

/* 等级徽章：方形斜切 + 青色描边 */
.hud-lv {
  --cut: 8px;
  --frame: rgba(94, 242, 255, 0.72);
  --face: linear-gradient(180deg, rgba(13, 38, 51, 0.92) 0%, rgba(6, 14, 22, 0.94) 100%);
  --glow-in: inset 0 0 12px rgba(94, 242, 255, 0.16);
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  line-height: 1;
}

.hud-lv b,
#hud-level {
  font-family: var(--font-mono);
  font-size: var(--fs-xl);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #eafcff;
  text-shadow: 0 0 7px rgba(94, 242, 255, 0.65);
}

.hud-lv small {
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.24em;
  color: var(--cyan);
  opacity: 0.78;
}

.hud-bars {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-top: 3px;
}

.bar-hp {
  height: 13px;
}

.bar-xp {
  height: 5px;
  border-color: rgba(36, 49, 73, 0.9);
}

#hud-hp-fill {
  background: linear-gradient(180deg, #ff8a9c 0%, #ff3b5c 48%, #8b0f26 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

#hud-hp-text {
  font-size: var(--fs-xs);
  letter-spacing: 0.02em;
}

#hud-xp-fill {
  background: linear-gradient(180deg, #cdefff 0%, #5ec8ff 55%, #1c5fa8 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

/* 暂停键（唯一可点的 HUD 元素） */
#btn-pause {
  --cut: 7px;
  --frame: var(--line-hi);
  --frame-hi: var(--cyan);
  --face: linear-gradient(180deg, rgba(20, 30, 48, 0.9) 0%, rgba(9, 13, 21, 0.92) 100%);
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  min-height: 32px;
  pointer-events: auto;
}

/* 暂停图标：CSS 画两条竖线，不使用字符 */
.pause-glyph {
  position: relative;
  display: block;
  width: 11px;
  height: 12px;
}

.pause-glyph::before,
.pause-glyph::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--cyan);
  box-shadow: 0 0 5px rgba(94, 242, 255, 0.6);
  transition:
    background 0.14s ease,
    transform 0.08s ease;
}

.pause-glyph::before {
  left: 0;
}

.pause-glyph::after {
  right: 0;
}

#btn-pause:hover .pause-glyph::before,
#btn-pause:hover .pause-glyph::after {
  background: #eafcff;
}

#btn-pause:active .pause-glyph::before,
#btn-pause:active .pause-glyph::after {
  transform: translateY(1px);
}

/* ==========================================================================
   03 波次 + 计时（上方居中，等宽 + 大字距）
   ========================================================================== */
.hud-wave {
  --cut: 7px;
  --frame: rgba(58, 76, 109, 0.9);
  --face: linear-gradient(180deg, rgba(14, 21, 35, 0.82) 0%, rgba(7, 11, 18, 0.86) 100%);
  --glow-in: inset 0 0 10px rgba(94, 242, 255, 0.08);
  position: absolute;
  top: 46px; /* 让开 .hud-top 的 44px（6 padding + 38 徽章） */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: baseline;
  gap: 4px;
  padding: 3px 10px 4px;
  white-space: nowrap;
}

.hud-wave-tag {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.3em;
  color: var(--text-dim);
}

#hud-wave {
  font-family: var(--font-mono);
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--amber);
  text-shadow: 0 0 7px rgba(255, 176, 32, 0.5);
}

.hud-wave-sep {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--line-hi);
}

#hud-timer {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  letter-spacing: 0.08em;
  color: var(--text);
  opacity: 0.86;
}

#hud-timer-label { color: var(--text-dim); font-size: 10px; }
#hud-difficulty { border-left: 1px solid var(--line-hi); padding-left: 5px; color: var(--cyan); font-size: 10px; }
.boss-warning { min-height: 15px; color: #ffd166; font-size: 11px; letter-spacing: 0; text-align: center; }

/* ==========================================================================
   04 BOSS 血条（顶部居中，压迫感：血红描边 + 缓慢警示闪烁）
   ========================================================================== */
.hud-boss,
#hud-boss {
  --cut: 9px;
  --frame: rgba(255, 59, 92, 0.56);
  --face: linear-gradient(180deg, rgba(40, 6, 15, 0.9) 0%, rgba(12, 3, 7, 0.93) 100%);
  --glow-in: inset 0 0 14px rgba(255, 59, 92, 0.12);
  position: absolute;
  top: 76px; /* 排在波次条（46px 起）下方 */
  left: 50%;
  transform: translateX(-50%);
  width: 292px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 5px 9px 7px;
  animation: boss-pulse 2.2s ease-in-out infinite;
}

#hud-boss-name {
  font-family: var(--font-mono);
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #ffe2e8;
  text-shadow:
    0 0 9px rgba(255, 59, 92, 0.75),
    0 1px 0 #000;
  animation: boss-name 2.6s ease-in-out infinite;
}

.bar-boss {
  height: 9px;
  border-color: rgba(255, 59, 92, 0.5);
  box-shadow:
    inset 0 0 0 1px rgba(4, 6, 10, 0.9),
    inset 0 1px 4px rgba(0, 0, 0, 0.9);
}

/* 血条填充：危险斜条纹缓慢流动 + 高光 */
#hud-boss-fill {
  background-image:
    repeating-linear-gradient(
      115deg,
      rgba(255, 255, 255, 0.16) 0 3px,
      rgba(255, 255, 255, 0) 3px 9px
    ),
    linear-gradient(180deg, #ff7a92 0%, #ff2f4f 46%, #7d0a20 100%);
  background-size:
    18px 100%,
    100% 100%;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
  animation: boss-stripes 1.1s linear infinite;
}

/* ==========================================================================
   05 底部：击杀数 + 武器槽
   ========================================================================== */
.hud-bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  padding: 0 6px 6px;
}

.hud-kills {
  --cut: 7px;
  --frame: rgba(58, 76, 109, 0.85);
  --face: linear-gradient(180deg, rgba(14, 21, 35, 0.8) 0%, rgba(7, 11, 18, 0.85) 100%);
  --glow-in: inset 0 0 10px rgba(94, 242, 255, 0.07);
  display: flex;
  align-items: baseline;
  gap: 5px;
  padding: 3px 9px 4px;
}

#hud-kills {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #eafcff;
  text-shadow: 0 0 6px rgba(94, 242, 255, 0.4);
}

.hud-kills small {
  font-size: var(--fs-2xs);
  letter-spacing: 0.18em;
  color: var(--text-dim);
}

/* ==========================================================================
   06 武器槽（JS 生成 .wslot / .wslot-icon / .wslot-lv）
   ========================================================================== */
.hud-weapons,
#hud-weapons {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: nowrap;
}

.hud-weapons:empty,
#hud-weapons:empty {
  display: none;
}

.wslot {
  --cut: 6px;
  --frame: rgba(94, 242, 255, 0.5);
  --face: linear-gradient(180deg, rgba(16, 40, 52, 0.86) 0%, rgba(7, 14, 20, 0.9) 100%);
  --glow-in: inset 0 0 9px rgba(94, 242, 255, 0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
}

/* 几何炮塔图标：底座方块 + 上伸炮管 */
.wslot-icon {
  position: relative;
  display: block;
  width: 14px;
  height: 14px;
}

.wslot-icon::before {
  content: "";
  position: absolute;
  left: 2px;
  bottom: 1px;
  width: 10px;
  height: 7px;
  background: linear-gradient(180deg, rgba(94, 242, 255, 0.6) 0%, rgba(94, 242, 255, 0.2) 100%);
  box-shadow: inset 0 0 0 1px rgba(94, 242, 255, 0.85);
}

.wslot-icon::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 0;
  width: 3px;
  height: 8px;
  background: var(--cyan);
  box-shadow: 0 0 5px rgba(94, 242, 255, 0.6);
}

/* 等级角标 */
.wslot-lv {
  position: absolute;
  right: -3px;
  bottom: -3px;
  z-index: 1;
  min-width: 11px;
  height: 11px;
  padding: 0 2px;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: 700;
  line-height: 11px;
  text-align: center;
  text-shadow: none;
  color: var(--ink);
  background: var(--cyan);
  box-shadow:
    0 0 0 1px var(--ink),
    0 0 6px rgba(94, 242, 255, 0.6);
}

/* ==========================================================================
   07 提示条（屏幕中下方，带入场动画）
   ========================================================================== */
.toast,
#toast {
  --cut: 8px;
  --frame: rgba(94, 242, 255, 0.7);
  --face: linear-gradient(180deg, rgba(10, 26, 36, 0.9) 0%, rgba(6, 12, 18, 0.92) 100%);
  --glow-in: inset 0 0 12px rgba(94, 242, 255, 0.16);
  position: absolute;
  left: 50%;
  bottom: 112px;
  transform: translateX(-50%);
  max-width: 284px;
  padding: 5px 14px 6px;
  font-family: var(--font-mono);
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: 0.18em;
  color: #eafcff;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  animation: toast-in 0.3s cubic-bezier(0.2, 0.9, 0.3, 1) backwards;
}

/* 语气变体（JS 可选加类，不加也完全可用）
   选择器同时写 id 形态，避免被上面的 #toast 规则压过 */
#toast.t-warn,
.toast.t-warn {
  --frame: rgba(255, 176, 32, 0.75);
  --face: linear-gradient(180deg, rgba(40, 28, 6, 0.9) 0%, rgba(14, 10, 4, 0.92) 100%);
  --glow-in: inset 0 0 12px rgba(255, 176, 32, 0.16);
  color: #fff2d8;
}

#toast.t-danger,
.toast.t-danger {
  --frame: rgba(255, 59, 92, 0.78);
  --face: linear-gradient(180deg, rgba(42, 7, 16, 0.9) 0%, rgba(14, 3, 7, 0.92) 100%);
  --glow-in: inset 0 0 12px rgba(255, 59, 92, 0.18);
  color: #ffe2e8;
}

#toast.t-good,
.toast.t-good {
  --frame: rgba(93, 255, 155, 0.72);
  --face: linear-gradient(180deg, rgba(7, 38, 24, 0.9) 0%, rgba(4, 14, 9, 0.92) 100%);
  --glow-in: inset 0 0 12px rgba(93, 255, 155, 0.16);
  color: #ddffe9;
}

/* ==========================================================================
   08 关键帧
   ========================================================================== */
/* 提示条：从下方顶入，结束态与基础 transform 一致 */
@keyframes toast-in {
  from {
    opacity: 0;
    transform: translate(-50%, 10px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

/* BOSS 面板呼吸式警示（内发光由 ::after 的 --glow-in 负责，这里只脉冲外沿） */
@keyframes boss-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 rgba(255, 59, 92, 0);
  }
  50% {
    box-shadow: 0 0 11px rgba(255, 59, 92, 0.34);
  }
}

/* BOSS 名字缓慢闪烁 */
@keyframes boss-name {
  0%,
  100% {
    opacity: 1;
  }
  46% {
    opacity: 0.62;
  }
  54% {
    opacity: 1;
  }
}

/* BOSS 血条斜纹流动 */
@keyframes boss-stripes {
  from {
    background-position:
      0 0,
      0 0;
  }
  to {
    background-position:
      18px 0,
      0 0;
  }
}