/* CSOL2 经典躲猫猫 HUD：金色/黑底，贴近公开评测截图的布局与配色。
   切图放在本目录；缺块用 CSS 仿。禁止每帧 innerHTML。 */
#hns-root {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 8;
  pointer-events: none;
  font-family: "Microsoft YaHei", "Segoe UI", Tahoma, sans-serif;
  color: #f5e6b8;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}
#hns-root[hidden] { display: none !important; }

#hns-blackout {
  position: absolute;
  inset: 0;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  transform: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 24px;
  background: #000;
  border: none;
  pointer-events: none;
  z-index: 40;
}
#hns-root:not(.is-blackout) #hns-blackout { display: none; }
#hud-root.is-hns-blackout #web-hud-top,
#hud-root.is-hns-blackout #web-hud-bottom,
#hud-root.is-hns-blackout #web-hud-loadout,
#hud-root.is-hns-blackout #web-killcards {
  visibility: hidden;
  pointer-events: none;
}
#hns-blackout-title {
  font-size: calc(14px * var(--hy, 1));
  letter-spacing: 0.2em;
  color: #f5d76e;
}
#hns-blackout-timer {
  font-size: calc(28px * var(--hy, 1));
  font-weight: 800;
  color: #fff7d0;
  line-height: 1.1;
}
#hns-blackout-hint {
  font-size: calc(13px * var(--hy, 1));
  color: #c8b56a;
}

#hns-slots {
  position: absolute;
  left: 50%;
  top: calc(58 * var(--hy));
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(4 * var(--hy));
  pointer-events: auto;
  z-index: 10;
}
#hns-root.is-second.is-slots #hns-slots {
  top: calc(68 * var(--hy));
}
#hns-root:not(.is-slots) #hns-slots { display: none; }
#hns-slots-caption {
  font-size: calc(8 * var(--hy));
  color: #f5d76e;
  letter-spacing: 0.14em;
}
#hns-root.is-spinning #hns-slots-caption { color: #ffe08a; }
.hns-slot-row {
  display: flex;
  gap: calc(10 * var(--hx));
}
.hns-slot {
  min-width: calc(72 * var(--hy));
  padding: calc(6 * var(--hy)) calc(8 * var(--hx)) calc(8 * var(--hy));
  border: 2px solid #d4a017;
  background: linear-gradient(180deg, rgba(40, 28, 8, 0.92), rgba(12, 8, 2, 0.92));
  color: #f5e6b8;
  cursor: pointer;
  text-align: center;
  box-shadow: 0 0 12px rgba(212, 160, 23, 0.35);
}
.hns-slot:hover { border-color: #ffe08a; }
#hns-root.is-spinning .hns-slot {
  pointer-events: none;
  cursor: default;
}
#hns-root.is-spinning .hns-slot-art {
  filter: blur(1.4px) brightness(1.15);
}
.hns-slot-key {
  display: block;
  font-size: calc(7 * var(--hy));
  color: #d4a017;
  margin-bottom: calc(4 * var(--hy));
}
.hns-slot-art,
.hns-prop-art {
  display: block;
  background-color: rgba(0, 0, 0, 0.4);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: 1px solid rgba(212, 160, 23, 0.4);
}
.hns-slot-art {
  width: calc(56 * var(--hy));
  height: calc(44 * var(--hy));
  margin: 0 auto calc(5 * var(--hy));
}
.hns-slot-name {
  display: block;
  font-size: calc(9 * var(--hy));
  font-weight: 800;
}

#hns-topchip,
#hns-alive {
  display: none !important;
}

#hns-hider-tray {
  position: absolute;
  top: auto;
  left: auto;
  right: calc(12 * var(--hy));
  bottom: calc(62 * var(--hy));
  width: max-content;
  height: max-content;
  display: none;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(5 * var(--hy));
  pointer-events: none;
  z-index: 11;
}
#hns-root.is-hider:not(.is-blackout) #hns-hider-tray { display: flex; }

#hns-stars {
  position: static;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  width: max-content;
  gap: calc(3 * var(--hy));
}
.hns-stars-label {
  font-size: calc(8 * var(--hy));
  font-weight: 700;
  color: #f5d76e;
  letter-spacing: 0.14em;
  line-height: 1.2;
}
.hns-stars-row {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  gap: calc(3 * var(--hy));
  padding: calc(3 * var(--hy)) calc(6 * var(--hy));
  background: rgba(0, 0, 0, 0.42);
}
.hns-star {
  width: 14px;
  height: 14px;
  background: no-repeat center / contain;
  opacity: 0.35;
}
.hns-star.is-on { opacity: 1; }

#hns-frenzy,
#hns-frenzy-label,
#hns-frenzy-track,
#hns-frenzy-bar {
  display: none !important;
}

#hns-prop {
  position: absolute;
  top: auto;
  right: auto;
  left: calc(12 * var(--hy));
  bottom: calc(62 * var(--hy));
  width: max-content;
  display: flex;
  align-items: center;
  gap: calc(6 * var(--hy));
  font-size: calc(10 * var(--hy));
  color: #f5d76e;
}
.hns-prop-art {
  width: calc(22 * var(--hy));
  height: calc(22 * var(--hy));
  flex: 0 0 auto;
}
#hns-root:not(.is-hider) #hns-prop,
#hns-root.is-blackout #hns-prop { display: none; }

#hns-hints {
  position: static;
  top: auto;
  left: auto;
  right: auto;
  bottom: auto;
  width: max-content;
  font-size: calc(8 * var(--hy));
  color: #d8c889;
  text-align: right;
  white-space: nowrap;
}
#hns-root:not(.is-hider) #hns-hints,
#hns-root.is-blackout #hns-hints { display: none; }
#hns-hints .hns-lock {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 4px;
  vertical-align: -2px;
  background: no-repeat center / contain;
}

#hns-frozen {
  position: absolute;
  left: 50%;
  bottom: 28%;
  transform: translateX(-50%);
  padding: 6px 16px;
  border: 1px solid #d4a017;
  background: rgba(0, 0, 0, 0.55);
  color: #f5d76e;
  letter-spacing: 0.2em;
}
#hns-root:not(.is-frozen) #hns-frozen { display: none; }

#hns-final {
  position: absolute;
  left: 50%;
  top: 32%;
  transform: translateX(-50%);
  width: min(780px, 90%);
  text-align: center;
  pointer-events: none;
  z-index: 40;
}
#hns-root:not(.is-final-banner) #hns-final { display: none; }
#hns-root.is-final-banner #hns-final { display: block; }
#hns-final-title {
  font-size: calc(42 * var(--hy));
  font-weight: 800;
  line-height: 1.05;
  color: #ffe08a;
  letter-spacing: 0.08em;
  text-shadow: 0 0 22px rgba(255, 160, 0, 0.75), 0 4px 10px #000;
}
#hns-final-sub {
  margin-top: calc(8 * var(--hy));
  font-size: calc(12 * var(--hy));
  font-weight: 400;
  line-height: 1.45;
  color: #f5e6b8;
  letter-spacing: 0.04em;
  text-shadow: 0 2px 6px #000;
}

#hns-event { display: none !important; }

#hns-second {
  position: absolute;
  top: calc(46 * var(--hy));
  left: 50%;
  transform: translateX(-50%);
  color: #fff3c4;
  font-size: calc(12 * var(--hy));
  letter-spacing: 0.08em;
  text-align: center;
  white-space: nowrap;
  z-index: 13;
  pointer-events: none;
}
#hns-root:not(.is-second) #hns-second { display: none; }

#hns-like {
  position: absolute;
  left: 50%;
  bottom: 18%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid #d4a017;
  background: rgba(0, 0, 0, 0.6);
  pointer-events: auto;
  cursor: pointer;
  color: #f5e6b8;
}
#hns-root:not(.is-like) #hns-like { display: none; }
#hns-root.is-like #hns-hider-tray,
#hns-root.is-like #hns-hints,
#hns-root.is-like #hns-prop { display: none; }
#hns-like-ico {
  width: 18px;
  height: 18px;
  background: no-repeat center / contain;
}

#hud-root.is-hns-hider .web-hud-loadout { display: none !important; }
#hud-root.is-hns-hider .k-ammo-wrap {
  visibility: hidden;
  pointer-events: none;
}

.sb-root.is-hns .sb-hns-prop {
  width: 92px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sb-root.is-hns .sb-hns-star,
.sb-root.is-hns .sb-hns-like { width: 36px; text-align: center; }