/* Announcer banners (announcer-ui.js). Upper third, clear of the fight around your hero; never takes clicks.
   Big: your own events, flag captures and match-wide calls. Small: everyone else's, in their team's colour. */
#announcer{--team:#ccff34;position:fixed;left:50%;top:calc(15% + env(safe-area-inset-top));z-index:38;width:max-content;max-width:calc(100vw - 32px);transform:translateX(-50%);pointer-events:none;text-align:center;
  font-family:var(--font-display);letter-spacing:.04em;line-height:.92;animation:announce-life var(--announce-ms,2000ms) linear both}
#announcer.alliance{--team:#80eaff}#announcer.horde{--team:#ff72b1}
#announcer b{display:block;font-weight:400;color:var(--team);text-shadow:-2px -2px 0 #0b0d12,2px -2px 0 #0b0d12,-2px 2px 0 #0b0d12,2px 2px 0 #0b0d12,5px 5px 0 #0b0d12}
#announcer span{display:inline-block;margin-top:6px;padding:2px 10px;background:#0b0d12e0;box-shadow:3px 3px 0 #000;font-family:var(--font-stencil);font-size:clamp(12px,1.8vw,17px);letter-spacing:.06em;color:#f3f1dc;text-transform:uppercase}
#announcer.big b{font-size:clamp(40px,8vw,96px);transform:rotate(-3deg);animation:announce-slam .42s cubic-bezier(.2,1.7,.4,1) both}
#announcer.small{top:calc(21% + env(safe-area-inset-top))}
#announcer.small b{font-size:clamp(22px,3.6vw,40px);transform:rotate(-2deg);animation:announce-drop .3s ease-out both}
/* Yours read as yours: toxic lime with a pink offset, whatever your team. */
#announcer.view-you b{color:#ccff34;text-shadow:-2px -2px 0 #0b0d12,2px -2px 0 #0b0d12,-2px 2px 0 #0b0d12,2px 2px 0 #0b0d12,6px 6px 0 #ff3993}
/* Flag captures get the hype: bigger, a burst behind, and a shake. */
#announcer.type-flag-captured b{font-size:clamp(48px,10vw,124px);animation:announce-slam .42s cubic-bezier(.2,1.7,.4,1) both,announce-shake .5s .42s ease-in-out 2}
#announcer.type-flag-captured::before{content:'';position:absolute;inset:-30% -12%;z-index:-1;background:radial-gradient(closest-side,color-mix(in srgb,var(--team) 55%,transparent),transparent 72%);animation:announce-burst .7s ease-out both}
#announcer.type-flag-captured.view-you::before{background:radial-gradient(closest-side,#ccff3399,#ff399355 55%,transparent 75%)}
#announcer[hidden]{display:none}
@keyframes announce-life{0%{opacity:0}6%{opacity:1}82%{opacity:1}100%{opacity:0}}
@keyframes announce-slam{0%{opacity:0;transform:scale(2.2) rotate(-9deg)}100%{opacity:1;transform:scale(1) rotate(-3deg)}}
@keyframes announce-drop{0%{opacity:0;transform:translateY(-14px) rotate(-2deg)}100%{opacity:1;transform:translateY(0) rotate(-2deg)}}
@keyframes announce-shake{0%,100%{transform:rotate(-3deg)}25%{transform:rotate(-5deg) translateX(-4px)}75%{transform:rotate(-1deg) translateX(4px)}}
@keyframes announce-burst{0%{opacity:0;transform:scale(.3)}40%{opacity:1}100%{opacity:.75;transform:scale(1)}}
/* Phones: below the kill feed, minimap and zoom bar, above your hero. */
@media(max-width:700px){#announcer,#announcer.small{top:calc(30% + env(safe-area-inset-top))}}
@media(prefers-reduced-motion:reduce){#announcer,#announcer b,#announcer::before{animation:none!important}}