/* ================================================================
   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 {
  position: relative;
  font: 700 12px 'Rajdhani', sans-serif; letter-spacing: .3em; text-transform: uppercase;
  color: #eef0f4; text-shadow: 0 1px 2px rgba(0, 0, 0, .75);
  white-space: nowrap; padding: 0 14px;
  animation: fb-medal-label 1.3s ease-out forwards;
}
/* Hairline caliper rules bracket the title: the DXED medal signature. */
.fb-medal span::before, .fb-medal span::after {
  content: ''; position: absolute; top: 50%; width: 9px; height: 1px;
  background: rgba(238, 240, 244, .5);
}
.fb-medal span::before { left: 0; } .fb-medal span::after { right: 0; }
/* Snap in 80 → lock → hold → out. Mechanical, no glow bloom. */
@keyframes fb-medal-pop {
  0%   { opacity: 0; transform: scale(.82); }
  8%   { opacity: 1; transform: scale(1.05); }
  16%  { transform: scale(1); }
  80%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(.98) translateY(-6px); }
}
@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); }
}