/* 救世主 / 经典生化 HUD。--hy 已是长度，禁止再乘 px。 */
#savior-root {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 9;
  pointer-events: none;
  font-family: "Microsoft YaHei", "Segoe UI", Tahoma, sans-serif;
  color: #d8f5de;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}
#savior-root[hidden] { display: none !important; }

#savior-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(ellipse at center, transparent 42%, rgba(18, 48, 22, 0.35) 100%),
    linear-gradient(180deg, rgba(40, 90, 40, 0.12), transparent 28%, rgba(20, 60, 20, 0.18) 100%);
  mix-blend-mode: multiply;
  transition: opacity 0.35s ease;
}
#savior-overlay.is-on { opacity: 1; }

#savior-count {
  position: absolute;
  left: 50%;
  top: 18%;
  transform: translateX(-50%);
  text-align: center;
  z-index: 12;
}
#savior-root:not(.is-countdown):not(.is-wait) #savior-count { display: none; }
#savior-root.is-wait #savior-count-num { color: #ffd76a; }
#savior-count-num {
  font-size: calc(64 * var(--hy, 1px));
  font-weight: 800;
  line-height: 1;
  color: #7cff8a;
  letter-spacing: 0.04em;
}
#savior-root.is-countdown #savior-count-num {
  animation: savior-count-pulse 1s ease-in-out infinite;
}
#savior-count-hint {
  margin-top: calc(8 * var(--hy, 1px));
  font-size: calc(16 * var(--hy, 1px));
  color: #e8f8c8;
  letter-spacing: 0.18em;
}

#savior-top { display: none !important; }

#hud-root.is-savior .k-bot {
  background-image: none !important;
  opacity: 0;
}
#hud-root.is-savior .k-money { display: none !important; }

#savior-root.is-spec #savior-meters { display: none !important; }
#savior-meters {
  position: absolute;
  left: 50%;
  bottom: 0;
  top: auto;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(2 * var(--hy, 1px));
  width: calc(224 * var(--hy, 1px));
  height: calc(56 * var(--hy, 1px));
  z-index: 5;
}
#savior-morale {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(3 * var(--hy, 1px));
  padding: calc(4 * var(--hy, 1px)) calc(8 * var(--hy, 1px));
  background: rgba(8, 14, 10, 0.62);
  border: 1px solid rgba(255, 215, 106, 0.4);
  border-radius: 2px;
  width: 100%;
  box-sizing: border-box;
}
#savior-root.is-zombie #savior-morale { display: none; }
#savior-morale-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(8 * var(--hy, 1px));
  width: 100%;
}
#savior-morale-label {
  font-size: calc(12 * var(--hy, 1px));
  color: #ffd76a;
  letter-spacing: 0.08em;
  font-weight: 700;
  white-space: nowrap;
}
#savior-morale-hint {
  font-size: calc(11 * var(--hy, 1px));
  color: #ffe9a8;
  letter-spacing: 0.04em;
  font-weight: 700;
  white-space: nowrap;
}
#savior-morale-pips {
  display: flex;
  gap: calc(4 * var(--hy, 1px));
}
.savior-morale-pip {
  width: calc(16 * var(--hy, 1px));
  height: calc(10 * var(--hy, 1px));
  border: 1px solid rgba(255, 215, 106, 0.55);
  background: rgba(0, 0, 0, 0.45);
}
.savior-morale-pip.is-on {
  background: #ffd76a;
  box-shadow: 0 0 6px rgba(255, 215, 106, 0.7);
}

#savior-rage {
  display: flex;
  flex-direction: column;
  gap: calc(3 * var(--hy, 1px));
  width: 100%;
  padding: calc(4 * var(--hy, 1px)) calc(10 * var(--hy, 1px));
  background: rgba(8, 10, 10, 0.62);
  border: 1px solid rgba(255, 80, 80, 0.45);
  border-radius: 2px;
  box-sizing: border-box;
}
#savior-root:not(.is-zombie) #savior-rage { display: none; }
#savior-rage-track {
  height: calc(10 * var(--hy, 1px));
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 80, 80, 0.45);
}
#savior-rage-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #7a1010, #ff4d4d);
}
#savior-rage-txt {
  font-size: calc(12 * var(--hy, 1px));
  color: #ffb0b0;
  font-weight: 700;
  letter-spacing: 0.06em;
}

#savior-status {
  position: absolute;
  left: calc(16 * var(--hx, 1px));
  bottom: calc(4 * var(--hy, 1px));
  font-size: calc(13 * var(--hy, 1px));
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--hy, 1px));
}
#savior-role {
  color: #9dffb0;
  font-weight: 700;
  letter-spacing: 0.12em;
  font-size: calc(16 * var(--hy, 1px));
}
#savior-root.is-savior #savior-role { color: #ffd76a; }
#savior-root.is-zombie #savior-role { color: #ff6b6b; }
#savior-name {
  color: #131313;
  background: #ffd76a;
  font-weight: 800;
  letter-spacing: 0.08em;
  white-space: nowrap;
  padding: 0 calc(8 * var(--hy, 1px));
  line-height: calc(18 * var(--hy, 1px));
  border-radius: 2px;
  width: fit-content;
}
#savior-hazmat { color: #7ad7ff; }
#savior-skill { color: #f0d0d0; }
#savior-root.is-savior #savior-skill {
  color: #ffe9a8;
  font-weight: 700;
  letter-spacing: 0.06em;
}
#savior-root:not(.is-zombie):not(.is-savior) #savior-skill { display: none; }

#savior-skill-pick {
  position: absolute;
  left: 50%;
  bottom: calc(118 * var(--hy, 1px));
  transform: translateX(-50%);
  z-index: 12;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(6 * var(--hy, 1px));
  pointer-events: auto;
}
#savior-skill-pick[hidden] { display: none; }
#savior-skill-pick-title {
  color: #ffd76a;
  font-weight: 800;
  letter-spacing: 0.08em;
  font-size: calc(14 * var(--hy, 1px));
}
#savior-skill-pick button {
  min-width: calc(168 * var(--hx, 1px));
  border: 1px solid rgba(255, 215, 106, 0.45);
  background: rgba(12, 10, 8, 0.82);
  color: #ffe9a8;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: calc(26 * var(--hy, 1px));
  cursor: pointer;
}
#savior-skill-pick button:hover { background: rgba(80, 50, 10, 0.9); }

#savior-hit {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(48 * var(--hy, 1px));
  height: calc(48 * var(--hy, 1px));
  margin: calc(-24 * var(--hy, 1px)) 0 0 calc(-24 * var(--hy, 1px));
  opacity: 0;
  pointer-events: none;
  z-index: 20;
}
#savior-hit-mark {
  position: absolute;
  inset: 0;
}
#savior-hit-mark::before,
#savior-hit-mark::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 12%;
  width: calc(3 * var(--hy, 1px));
  height: 76%;
  background: #ff2a2a;
  box-shadow: 0 0 8px #ff2a2a;
}
#savior-hit-mark::before { transform: translateX(-50%) rotate(45deg); }
#savior-hit-mark::after { transform: translateX(-50%) rotate(-45deg); }
#savior-hit.is-head #savior-hit-mark::before,
#savior-hit.is-head #savior-hit-mark::after {
  background: #ffd76a;
  box-shadow: 0 0 10px #ffd76a;
  width: calc(4 * var(--hy, 1px));
}
#savior-hit-dmg {
  position: absolute;
  left: 50%;
  top: calc(-18 * var(--hy, 1px));
  transform: translateX(-50%);
  font-size: calc(16 * var(--hy, 1px));
  font-weight: 800;
  color: #ff4d4d;
  white-space: nowrap;
}
#savior-hit.is-head #savior-hit-dmg { color: #ffd76a; }
#savior-hit.is-on { animation: savior-hit-flash 0.28s ease-out; }

#savior-toast {
  position: absolute;
  left: 50%;
  top: 62%;
  transform: translateX(-50%);
  padding: calc(6 * var(--hy, 1px)) calc(14 * var(--hy, 1px));
  background: rgba(8, 20, 12, 0.72);
  border: 1px solid rgba(124, 255, 138, 0.45);
  color: #e8ffe8;
  font-size: calc(15 * var(--hy, 1px));
  opacity: 0;
}
#savior-toast[hidden] { display: none !important; }
#savior-toast.is-on { animation: savior-toast-in 1.6s ease; }

#savior-radar {
  position: absolute;
  right: calc(14 * var(--hx, 1px));
  top: calc(52 * var(--hy, 1px));
  width: calc(92 * var(--hy, 1px));
  z-index: 6;
}
#savior-radar[hidden] { display: none !important; }
#savior-radar-label {
  font-size: calc(10 * var(--hy, 1px));
  color: #9dffb0;
  text-align: center;
  margin-bottom: calc(3 * var(--hy, 1px));
  letter-spacing: 0.12em;
  font-weight: 700;
}
#savior-radar-pad {
  position: relative;
  width: calc(92 * var(--hy, 1px));
  height: calc(92 * var(--hy, 1px));
  border-radius: 50%;
  border: 1px solid rgba(124, 255, 138, 0.55);
  background:
    radial-gradient(circle at center, rgba(20, 40, 22, 0.15) 0 4px, transparent 5px),
    rgba(6, 12, 8, 0.62);
  overflow: hidden;
}
#savior-radar-pad::before,
#savior-radar-pad::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: rgba(124, 255, 138, 0.28);
}
#savior-radar-pad::before {
  width: 1px;
  height: 100%;
  transform: translate(-50%, -50%);
}
#savior-radar-pad::after {
  width: 100%;
  height: 1px;
  transform: translate(-50%, -50%);
}
.savior-radar-dot {
  position: absolute;
  width: calc(8 * var(--hy, 1px));
  height: calc(8 * var(--hy, 1px));
  margin: calc(-4 * var(--hy, 1px)) 0 0 calc(-4 * var(--hy, 1px));
  border-radius: 50%;
  background: #7cff8a;
  box-shadow: 0 0 8px #7cff8a;
}
.savior-radar-dot[hidden] { display: none !important; }

.savior-box-mark {
  position: absolute;
  z-index: 8;
  transform: translate(-50%, -100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}
.savior-box-mark[hidden] { display: none !important; }
.savior-box-ico {
  width: calc(18 * var(--hy, 1px));
  height: calc(18 * var(--hy, 1px));
  background: #7cff8a;
  transform: rotate(45deg);
  box-shadow: 0 0 14px rgba(124, 255, 138, 1);
  animation: savior-box-pulse 1.1s ease-in-out infinite;
}
.savior-box-mark.is-edge .savior-box-ico {
  background: #ffe66a;
  box-shadow: 0 0 12px rgba(255, 230, 106, 0.95);
}
.savior-box-dist {
  margin-top: calc(6 * var(--hy, 1px));
  font-size: calc(11 * var(--hy, 1px));
  color: #c8ffd0;
  font-weight: 700;
  text-shadow: 0 1px 3px #000;
}
.savior-box-dist::before {
  content: "补给 ";
}

@keyframes savior-box-pulse {
  0%, 100% { opacity: 1; transform: rotate(45deg) scale(1); }
  50% { opacity: 0.55; transform: rotate(45deg) scale(1.18); }
}

@keyframes savior-count-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.06); opacity: 0.85; }
}
@keyframes savior-hit-flash {
  0% { opacity: 1; transform: scale(1.2); }
  100% { opacity: 0; transform: scale(1); }
}
@keyframes savior-toast-in {
  0% { opacity: 0; transform: translateX(-50%) translateY(6px); }
  12% { opacity: 1; transform: translateX(-50%) translateY(0); }
  80% { opacity: 1; }
  100% { opacity: 0; }
}