/* 游戏画布与战斗 HUD */
#game-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

#hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  padding: calc(8px + var(--safe-top)) calc(10px + var(--safe-right)) calc(8px + var(--safe-bottom)) calc(10px + var(--safe-left));
}
#hud button { pointer-events: auto; }

#hud-top-left {
  position: absolute;
  top: calc(10px + var(--safe-top));
  left: calc(12px + var(--safe-left));
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.bar-wrap { display: flex; align-items: center; gap: 7px; font-size: 11px; }
.bar-label { width: 34px; color: var(--color-text-dim); letter-spacing: 0.1em; }
.bar {
  width: clamp(110px, 16vw, 190px);
  height: 10px;
  background: rgba(10, 16, 30, 0.8);
  border: 1px solid rgba(125, 146, 173, 0.35);
  border-radius: 5px;
  overflow: hidden;
}
.bar > div { height: 100%; border-radius: 4px; transition: width 0.15s ease-out; }
#hp-fill { width: 100%; background: linear-gradient(90deg, #ff3860, #ff7a5c); box-shadow: 0 0 8px rgba(255,56,96,0.7); }
#hp-fill.low { animation: hp-low-pulse 0.6s ease-in-out infinite; }
@keyframes hp-low-pulse {
  0%, 100% { filter: brightness(1); box-shadow: 0 0 8px rgba(255,56,96,0.7); }
  50% { filter: brightness(1.7); box-shadow: 0 0 18px rgba(255,40,70,1); }
}
.bar.xp { height: 7px; }
#xp-fill { width: 0%; background: linear-gradient(90deg, #1fbf9f, var(--color-xp)); box-shadow: 0 0 8px rgba(58,255,216,0.6); }
.bar.heat { height: 7px; }
#heat-fill { width: 0%; background: linear-gradient(90deg, #ffb36b, #ff6a00); box-shadow: 0 0 8px rgba(255,140,58,0.7); }
#hp-text, #level-text { font-size: 11px; color: var(--color-text); min-width: 46px; }

#hud-top-center {
  position: absolute;
  top: calc(8px + var(--safe-top));
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}
#wave-text { font-size: clamp(13px, 2vh, 17px); letter-spacing: 0.25em; color: var(--color-pulse); text-shadow: var(--glow-pulse); }
#wave-timer { font-size: clamp(11px, 1.6vh, 14px); color: var(--color-text-dim); margin-top: 2px; }

#boss-bar-wrap { margin-top: 6px; width: clamp(200px, 36vw, 420px); }
#boss-name { font-size: 12px; letter-spacing: 0.3em; color: var(--color-danger); text-shadow: 0 0 10px rgba(255,34,85,0.8); margin-bottom: 3px; }
.bar.boss { width: 100%; height: 12px; border-color: rgba(255, 34, 85, 0.5); }
#boss-fill { width: 100%; background: linear-gradient(90deg, #ff2255, #b46bff); box-shadow: 0 0 12px rgba(255,34,85,0.8); }

#hud-top-right {
  position: absolute;
  top: calc(10px + var(--safe-top));
  right: calc(12px + var(--safe-right));
  display: flex;
  align-items: center;
  gap: 7px;
}
.stat-chip {
  padding: 5px 10px;
  background: rgba(13, 20, 36, 0.8);
  border: 1px solid rgba(125, 146, 173, 0.3);
  border-radius: 7px;
  font-size: clamp(11px, 1.6vh, 14px);
}
#energy-chip { color: var(--color-energy); border-color: rgba(255, 210, 58, 0.4); }

#hud-slots {
  position: absolute;
  left: calc(10px + var(--safe-left));
  bottom: calc(10px + var(--safe-bottom));
  opacity: 0.9;
}
#slots-svg { width: clamp(84px, 12vh, 120px); height: auto; display: block; }

#announce {
  position: absolute;
  top: 22%;
  left: 50%;
  transform: translateX(-50%);
  font-size: clamp(18px, 3.4vh, 30px);
  letter-spacing: 0.3em;
  white-space: nowrap;
  text-shadow: 0 0 18px currentColor;
  animation: announceIn 0.3s ease-out;
  pointer-events: none;
}
@keyframes announceIn {
  from { opacity: 0; transform: translateX(-50%) scale(1.4); }
  to { opacity: 1; transform: translateX(-50%) scale(1); }
}
#announce.fade { transition: opacity 0.5s; opacity: 0; }

/* 虚拟摇杆 */
#joystick-zone {
  position: absolute;
  left: 0; bottom: 0;
  width: 45%; height: 55%;
  pointer-events: auto;
}
#joystick-base {
  position: absolute;
  width: 110px; height: 110px;
  border: 2px solid rgba(53, 200, 255, 0.4);
  border-radius: 50%;
  background: rgba(13, 20, 36, 0.4);
  display: none;
  transform: translate(-50%, -50%);
}
#joystick-knob {
  position: absolute;
  left: 50%; top: 50%;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(53,200,255,0.85), rgba(29,143,208,0.6));
  box-shadow: var(--glow-pulse);
  transform: translate(-50%, -50%);
}

#btn-overclock {
  position: absolute;
  right: calc(22px + var(--safe-right));
  bottom: calc(30px + var(--safe-bottom));
  width: clamp(72px, 11vh, 96px);
  height: clamp(72px, 11vh, 96px);
  border-radius: 50%;
  border: 2px solid var(--color-thermal);
  background: radial-gradient(circle, rgba(255,140,58,0.25), rgba(13,20,36,0.75));
  color: var(--color-thermal);
  font-size: clamp(14px, 2vh, 18px);
  letter-spacing: 0.2em;
  text-shadow: var(--glow-thermal);
  pointer-events: auto;
}
#btn-overclock.active {
  background: radial-gradient(circle, rgba(255,140,58,0.75), rgba(255,106,0,0.4));
  color: #fff;
  box-shadow: 0 0 26px rgba(255, 140, 58, 0.9);
}

/* 开发调试面板（?debug=1） */
#debug-panel {
  position: absolute;
  left: calc(10px + var(--safe-left));
  top: 90px;
  z-index: 30;
  padding: 8px 10px;
  background: rgba(4, 8, 14, 0.78);
  border: 1px solid rgba(58, 255, 216, 0.35);
  border-radius: 8px;
  font-size: 11px;
  line-height: 1.55;
  color: #3affd8;
  pointer-events: none;
  white-space: pre;
}
#debug-panel .dp-sub { color: #7d92ad; }