/* ================================================================
   DXED Arena — combat feedback layer (hitmarkers / XP / medals).
   Companion to feedback.js. Everything is pointer-transparent and
   anchored to the reticle so the eye never has to leave the fight.
   ================================================================ */

/* ── PNG hitmarkers — replace the CSS cross on special hits ── */
#fbHitmarker {
  position: absolute; left: 50%; top: 50%; width: 0; height: 0;
  pointer-events: none;
  transform: scale(var(--hud-scale, 1));
}
#fbHitmarker img { position: absolute; will-change: transform, opacity; }
.fb-hm-main {
  width: 68px; height: 68px; left: -34px; top: -34px;
  opacity: 0;
}
.fb-hm-main.big { width: 84px; height: 84px; left: -42px; top: -42px; }
.fb-hm-main.show { animation: fb-hm-pop .34s cubic-bezier(.22, .9, .32, 1) forwards; }
/* 100% → 115% → 100% over the first ~80ms, then a fast fade. */
@keyframes fb-hm-pop {
  0%   { opacity: 1; transform: scale(1); }
  12%  { opacity: 1; transform: scale(1.15); }
  24%  { opacity: 1; transform: scale(1); }
  55%  { opacity: .9; }
  100% { opacity: 0; transform: scale(.94); }
}

/* Stacked special badges (wallbang / longshot on a kill) orbit the
   confirm instead of covering it. */
.fb-hm-badge {
  width: 40px; height: 40px; opacity: 0;
  animation: fb-hm-badge .58s ease-out forwards;
}
.fb-hm-badge.s0 { left: 30px;  top: -58px; }
.fb-hm-badge.s1 { left: -70px; top: -58px; }
.fb-hm-badge.s2 { left: 30px;  top: 22px; }
@keyframes fb-hm-badge {
  0%   { opacity: 0; transform: scale(.6); }
  18%  { opacity: 1; transform: scale(1.12); }
  32%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(.96) translateY(-6px); }
}

/* Burst weapons / shotgun: expanding multi-hit ring under the marker. */
.fb-hm-multi {
  width: 96px; height: 96px; left: -48px; top: -48px; opacity: 0;
  animation: fb-hm-multi .4s ease-out forwards;
}
@keyframes fb-hm-multi {
  0%   { opacity: .9; transform: scale(.62); }
  60%  { opacity: .55; transform: scale(1.05); }
  100% { opacity: 0; transform: scale(1.22); }
}

/* ── XP popups — spawn just above the crosshair, float up, fade ── */
#fbXp {
  position: absolute; left: 50%; bottom: calc(50% + 44px);
  width: 0; pointer-events: none;
  transform: scale(var(--hud-scale, 1));
  transform-origin: bottom center;
}
.fb-xp-burst {
  position: absolute; bottom: 0; left: 0;
  display: flex; flex-direction: column; align-items: center;
  transform: translateX(-50%);
  transition: bottom .18s ease-out;
}
/* An older burst still fading gets nudged up so bursts never overlap. */
.fb-xp-burst.bump { bottom: 64px; }
.fb-xp {
  height: 40px; opacity: 0; will-change: transform, opacity;
  animation: fb-xp-float .85s cubic-bezier(.2, .7, .3, 1) forwards;
}
.fb-xp.bonus { height: 31px; }
@keyframes fb-xp-float {
  0%   { opacity: 0; transform: translateY(8px) scale(.9); }
  14%  { opacity: 1; transform: translateY(0) scale(1.04); }
  24%  { transform: translateY(-2px) scale(1); }
  60%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-26px) scale(.97); }
}

/* ── Kill medals — centered above the reticle, queued one at a time ── */
#fbMedal {
  position: fixed; left: 50%; top: calc(50% - 148px);
  width: 0; height: 0; pointer-events: none; z-index: 2000;
  transform: scale(var(--hud-scale, 1));
}
.fb-medal {
  position: absolute; left: 0; top: 0; transform: translate(-50%, -100%);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.fb-medal img {
  width: 104px; height: 104px; will-change: transform, opacity, filter;
  animation: fb-medal-pop 1.3s cubic-bezier(.2, .9, .3, 1) forwards;
}
.fb-medal span {
  font: 800 12.5px 'Inter', sans-serif; letter-spacing: 2.5px; text-transform: uppercase;
  color: #f2f6fc; text-shadow: 0 1px 4px rgba(0, 0, 0, .9), 0 0 12px rgba(255, 70, 76, .45);
  white-space: nowrap;
  animation: fb-medal-label 1.3s ease-out forwards;
}
/* Scale in 70 → 110 → 100 with a glow pulse, hold, fade after ~1s. */
@keyframes fb-medal-pop {
  0%   { opacity: 0; transform: scale(.7); filter: drop-shadow(0 0 0 rgba(255, 84, 90, 0)); }
  10%  { opacity: 1; transform: scale(1.1); filter: drop-shadow(0 0 22px rgba(255, 84, 90, .85)); }
  20%  { transform: scale(1); filter: drop-shadow(0 0 12px rgba(255, 84, 90, .5)); }
  34%  { filter: drop-shadow(0 0 18px rgba(255, 84, 90, .7)); }
  48%  { filter: drop-shadow(0 0 8px rgba(255, 84, 90, .35)); }
  78%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.06) translateY(-8px); }
}
@keyframes fb-medal-label {
  0%   { opacity: 0; transform: translateY(5px); }
  16%  { opacity: 1; transform: translateY(0); }
  78%  { opacity: 1; }
  100% { opacity: 0; }
}

/* Small screens: keep the reticle area clear. */
@media (max-width: 760px) {
  .fb-hm-main { width: 54px; height: 54px; left: -27px; top: -27px; }
  .fb-hm-main.big { width: 66px; height: 66px; left: -33px; top: -33px; }
  .fb-medal img { width: 84px; height: 84px; }
  .fb-xp { height: 33px; }
  .fb-xp.bonus { height: 26px; }
  #fbMedal { top: calc(50% - 120px); }
}