/* brawl_fx: damage numbers that slam in, bounce and rise, on the game clock (brawl.js scrubs the paused animation) */
.bw-num.gt { font: 98px Bangers; letter-spacing: 1.5px; color: #ffd84a; -webkit-text-stroke: 9px #1c0800; paint-order: stroke fill;
  text-shadow: 0 5px 0 #000, 0 0 22px rgba(255, 110, 0, .75); animation-name: bwfxNum; animation-timing-function: linear; animation-fill-mode: both; z-index: 3; white-space: nowrap; }
.bw-num.gt.big { font-size: 118px; color: #ffae2a; -webkit-text-stroke-width: 8px; text-shadow: 0 6px 0 #000, 0 0 30px rgba(255, 80, 0, .9); }
.bw-num.gt.crit { font-size: 128px; color: #ff5a2a; -webkit-text-stroke: 8px #fff2a0; text-shadow: 0 0 0 #000, 0 7px 0 #3a0000, 0 0 34px rgba(255, 40, 0, .95); }
.bw-num.gt.hurt { font-size: 44px; color: #ff4a3a; -webkit-text-stroke-width: 6px; text-shadow: 0 4px 0 #000; }
@keyframes bwfxNum {
  0% { transform: translate(-50%, -50%) skewX(-10deg) scale(2.6); opacity: 0; }
  4% { transform: translate(-50%, -50%) skewX(-10deg) scale(1.5); opacity: 1; }
  7% { transform: translate(-50%, -50%) skewX(-10deg) scale(.86); opacity: 1; }
  13% { transform: translate(-50%, -78%) skewX(-10deg) scale(1.14); opacity: 1; }
  20% { transform: translate(-50%, -62%) skewX(-10deg) scale(1); opacity: 1; }
  70% { transform: translate(-50%, -105%) skewX(-10deg) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -170%) skewX(-10deg) scale(.9); opacity: 0; }
}
/* brawl_fx: the contact flash, a full-screen white pop that is hottest on the blow's spot (scrubbed on the game clock) */
.bwfx-flash { position: fixed; inset: 0; pointer-events: none; z-index: 2; mix-blend-mode: screen;
  background: radial-gradient(circle at var(--x) var(--y), #fff 0, rgba(255, 252, 235, .7) 40px, rgba(255, 250, 230, .45) 200px, rgba(255, 250, 230, .3) 70%);
  animation-name: bwfxFlash; animation-timing-function: linear; animation-fill-mode: both; }
@keyframes bwfxFlash { 0% { opacity: var(--a); } 25% { opacity: calc(var(--a) * .8); } 100% { opacity: 0; } }
/* brawl_fx: the combo counter, a heavy slanted gold number that slams bigger on every hit, with a HITS tag and a draining bar */
.bw .bw-combo { transform: skewX(-10deg); }
.bw .bw-combo b { font: 118px/0.9 Bangers; letter-spacing: 2px; color: #ffe04a; -webkit-text-stroke: 8px #2a0a00; paint-order: stroke fill;
  background: linear-gradient(180deg, #fffbe0 0%, #ffe04a 38%, #ff8a10 72%, #e83a08 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  text-shadow: none; filter: drop-shadow(0 6px 0 #000) drop-shadow(0 0 16px rgba(255, 110, 0, .8)); }
.bw .bw-combo small { display: block; font: 34px Bangers; letter-spacing: 6px; color: #fff; -webkit-text-stroke: 5px #2a0a00; paint-order: stroke fill; text-shadow: 0 3px 0 #000; margin-top: -4px; }
.bw .bw-combo small::after { content: ""; display: block; height: 7px; margin: 4px 0 0 auto; width: 150px; border: 2px solid #2a0a00; border-radius: 2px;
  background: linear-gradient(90deg, #ff5a10, #ffe04a); box-shadow: 0 2px 0 #000; }
.bw .bw-combo.bump b { animation: bwfxCombo .22s ease-out; }
@keyframes bwfxCombo { 0% { transform: scale(1.55) rotate(-4deg); } 45% { transform: scale(.92); } 100% { transform: scale(1); } }