/* ============================================================
   FORGENOX · SPACE SHOOTER — rounds.css
   ------------------------------------------------------------
   Оформление системы раундов 1..10: полоса прогресса раунда
   в HUD и крупный голографический баннер смены раунда.

   Размеры — от ширины экрана телефона (--u = 1% ширины),
   поэтому весь HUD масштабируется вместе с корпусом.
   ============================================================ */

/* ---------- HUD: счётчик раунда ---------- */
.hud__max {
  font-size: 0.5em;
  font-weight: 600;
  color: var(--text-faint);
  margin-left: calc(var(--u) * 0.5);
  letter-spacing: 0;
}

/* ---------- HUD: прогресс зачистки раунда (справа снизу) ---------- */
.hud__round {
  position: absolute; right: calc(var(--u) * 5); top: calc(var(--u) * 22);
  display: flex; flex-direction: column; align-items: flex-end; gap: calc(var(--u) * 1.6);
}
.hud__round .hud__k {
  display: flex; align-items: baseline; gap: calc(var(--u) * 1.4);
  font-size: calc(var(--u) * 2.4);
}
.hud__round b {
  color: var(--text-primary);
  font-weight: 700; font-size: calc(var(--u) * 2.8);
}
.hud__round .hpbar__fill { transform-origin: right center; }
.hpbar__fill--round {
  background: linear-gradient(270deg, var(--accent-3), var(--accent-2));
}

/* ---------- HUD: активный бонус (артефакт «ускоренный огонь») ---------- */
.hud__buff {
  position: absolute; left: 50%; top: calc(var(--u) * 24); transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 1.4);
  opacity: 0; transition: opacity 0.25s var(--ease-out);
}
.hud__buff.is-on { opacity: 1; }
.hud__buff .hud__k { color: var(--accent-3); }
.hpbar--sm { width: calc(var(--u) * 28); height: calc(var(--u) * 1.1); }
.hpbar__fill--buff {
  background: linear-gradient(90deg, var(--accent-3), var(--accent-2));
}

/* ---------- Баннер смены раунда ---------- */
.round-banner {
  position: absolute; inset: 0; z-index: 5;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: calc(var(--u) * 1);
  pointer-events: none;
  opacity: 0; transform: scale(0.94);
  transition: opacity 0.45s var(--ease-out), transform 0.6s var(--ease-out);
}
.round-banner.is-on { opacity: 1; transform: none; }

.round-banner__label {
  font-family: var(--mono);
  font-size: calc(var(--u) * 3.2);
  letter-spacing: 0.42em; text-transform: uppercase;
  color: var(--text-secondary);
  padding-left: 0.42em;
}
.round-banner__num {
  font-size: calc(var(--u) * 26);
  font-weight: 700; line-height: 0.9; letter-spacing: -0.05em;
  background: var(--sheen); background-size: 220% auto;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: holosheen 8s linear infinite;
}
.round-banner__hint {
  font-family: var(--mono);
  font-size: calc(var(--u) * 2.4); letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--text-faint);
}

/* ---------- HUD: активное оружие (артефакт-модификатор пуль) ---------- */
.hud__weapon {
  position: absolute; left: 50%; top: calc(var(--u) * 33); transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 1.4);
  opacity: 0; transition: opacity 0.25s var(--ease-out);
}
.hud__weapon.is-on { opacity: 1; }
.hud__weapon .hud__k { color: var(--accent-1); }
.hpbar__fill--weapon {
  background: linear-gradient(90deg, var(--accent-1), var(--accent-3));
}


/* ============================================================
   Бонусы-артефакты: индикатор уровня дронов и всплывающая
   подсказка «что подобрал» (цвет берётся из render.artifactColor).
   ============================================================ */

/* ---------- HUD: уровень дронов (артефакт DRONES) ---------- */
.hud__drone {
  font-family: var(--mono);
  font-size: calc(var(--u) * 2.2); letter-spacing: 0.14em;
  color: var(--accent-1);
  opacity: 0; transition: opacity 0.2s var(--ease-out);
}
.hud__drone.is-on { opacity: 1; }

/* ---------- Всплывающая подсказка о подобранном бонусе ---------- */
.pickup {
  position: absolute; left: 50%; top: calc(var(--u) * 41);
  transform: translate(-50%, 6px);
  display: flex; align-items: center; gap: calc(var(--u) * 1.8);
  padding: calc(var(--u) * 1.4) calc(var(--u) * 3.6);
  border: 1px solid var(--glass-border); border-radius: 999px;
  background: var(--glass-bg-strong);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity 0.3s var(--ease-out), transform 0.4s var(--ease-out);
}
.pickup.is-on { opacity: 1; transform: translate(-50%, 0); }
.pickup__dot {
  width: calc(var(--u) * 2.2); height: calc(var(--u) * 2.2);
  border-radius: 50%; background: var(--accent-1); flex: none;
}
.pickup__text {
  font-family: var(--mono);
  font-size: calc(var(--u) * 2.4); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent-1);
}