/* Match moment callout (js/match-moments.js): one centred headline with both
   portraits, distinct from the notice lane (#banner) so kills never compete
   with objective warnings. Placement lives here; every colour is a token. */
#matchMoment{
  position:absolute;top:118px;left:50%;transform:translateX(-50%) scale(.92);
  display:flex;flex-direction:column;align-items:center;gap:var(--hud-space-1);
  max-width:min(560px,calc(100vw - 32px));padding:var(--hud-space-1) var(--hud-space-4);
  text-align:center;pointer-events:none;z-index:9;opacity:0; /* above the tutorial box (8), below shop and touch warnings */
  transition:opacity var(--hud-motion-fast),transform 180ms cubic-bezier(.2,1.4,.4,1);
  --mm-ink:var(--hud-notice-ink);
}
#matchMoment[data-tone="mine"]{--mm-ink:var(--hud-accent);}
#matchMoment[data-tone="ally"]{--mm-ink:var(--hud-health);}
#matchMoment[data-tone="enemy"]{--mm-ink:var(--hud-danger);}
#matchMoment.in{opacity:1;transform:translateX(-50%) scale(1);}
#matchMoment .mmHead{
  font:var(--hud-weight-strong) var(--hud-title-lg)/var(--hud-leading-title) var(--hud-font-display);
  letter-spacing:.14em;color:var(--mm-ink);text-transform:uppercase;white-space:nowrap;
  text-shadow:var(--hud-title-shadow),0 0 18px color-mix(in srgb,var(--mm-ink) 55%,transparent);
}
#matchMoment[data-kind="kill"] .mmHead{font-size:var(--hud-text-count);letter-spacing:.2em;}
#matchMoment .mmLine{
  display:flex;align-items:center;gap:var(--hud-space-2);
  font:var(--hud-weight-label) var(--hud-text-sm)/var(--hud-leading) var(--hud-font-label);
  letter-spacing:var(--hud-tracking-label);text-transform:uppercase;text-shadow:var(--hud-title-shadow);
  background:var(--hud-surface-glass);border:var(--hud-border-hairline) solid var(--hud-border-subtle);
  padding:var(--hud-space-1) var(--hud-space-3);border-radius:var(--hud-radius);
}
#matchMoment .mmSide{display:inline-flex;align-items:center;gap:var(--hud-space-2);white-space:nowrap;}
#matchMoment .mmSide:has(.mmName:empty){display:none;}
#matchMoment .mmPortrait{display:inline-flex;}
#matchMoment .mmPortrait:empty{display:none;}
#matchMoment .heroPortrait{width:var(--hud-space-6);height:var(--hud-space-6);border-radius:var(--hud-radius);}
#matchMoment .mmArrow{color:var(--hud-text-muted);font-size:var(--hud-text-xs);}
#matchMoment .mmSub{
  font:var(--hud-weight-label) var(--hud-text-xs)/var(--hud-leading) var(--hud-font-label);
  letter-spacing:var(--hud-notice-tracking);text-transform:uppercase;color:var(--hud-text-muted);text-shadow:var(--hud-title-shadow);
}
#matchMoment .mmSub[hidden]{display:none;}
/* The sticker headline (assets/kill-callouts): it replaces the text headline once it has loaded, and
   stamps in with a small overshoot. The text stays for YOU KILLED, which has no sticker. */
#matchMoment .mmArt{display:none;height:132px;width:auto;max-width:min(440px,calc(100vw - 48px));object-fit:contain;}
#matchMoment[data-art="1"] .mmArt:not([hidden]){display:block;}
#matchMoment[data-art="1"]{top:150px;}  /* the sticker is taller than the text: clear the notice lane above */
#matchMoment[data-art="1"] .mmHead{display:none;}
#matchMoment.in[data-art="1"] .mmArt{animation:mmStamp 320ms cubic-bezier(.2,1.6,.4,1) both;}
@keyframes mmStamp{0%{transform:scale(1.5) rotate(-6deg);opacity:0;}60%{opacity:1;}100%{transform:scale(1) rotate(-2deg);}}
body.touch #matchMoment .mmArt{height:96px;}
body.inlobby #matchMoment{display:none;}
body.touch:not(.inlobby) #matchMoment{top:calc(var(--sat) + 100px);}
body.touch #matchMoment .mmHead{font-size:var(--hud-text-count);}
body.touch #matchMoment .mmLine{font-size:var(--hud-text-xs);}
@media (prefers-reduced-motion:reduce){
  #matchMoment{transform:translateX(-50%);transition:opacity var(--hud-motion-fast);}
  #matchMoment.in{transform:translateX(-50%);}
  #matchMoment.in[data-art="1"] .mmArt{animation:none;transform:rotate(-2deg);}
}
@media (max-height:500px){
  body.touch #matchMoment .mmArt{height:72px;}
}
/* Touch: the corner kill feed already names killer and victim, so the callout keeps the headline (and
   its streak/bounty line) and drops the portrait row that repeated the feed one band lower. */
body.touch #matchMoment .mmLine{display:none;}