/* Battle numbers: one stable information anchor for every fighter.
   Direct damage and DOT totals are attached to the HP bar, never to sprite/body bounds, so heroes,
   normal foes, elites and oversized Anchors all place numbers identically. The short Playfair trial is
   reverted here: combat numbers use the original interface sans again. */
.battle .fighter .hp{
  position:relative;
  overflow:visible;
}

/* Keep the HP bar as the single placement anchor, but lift the number farther into the fighter's
   visual space so the hit reads over the character instead of hugging the vitals row. */
.battle .fighter .hp .num{
  top:auto!important;
  bottom:18px!important;
  left:50%!important;
}

.battle .fighter .hp .num[data-tone="hit"],
.battle .fighter .hp .num[data-tone="edge"],
.battle .fighter .hp .num[data-tone="weak"],
.battle .fighter .hp .num[data-tone="dot"]{
  font-family:var(--sans)!important;
  font-variant-numeric:tabular-nums;
}

/* HP ownership means every rank uses the same origin and the same raised offset. */
.battle .fighter[data-rank="boss"] .hp .num{
  top:auto!important;
  bottom:18px!important;
  left:50%!important;
}

.dotnum[data-dot-tick="1"]{
  position:absolute;
  left:50%!important;
  top:auto!important;
  bottom:18px!important;
  z-index:12;
  pointer-events:none;
  font-family:var(--sans)!important;
  font-variant-numeric:tabular-nums;
  font-size:19px;
  font-weight:800;
  line-height:1;
  letter-spacing:.01em;
  color:var(--dot-tint,#d85d52)!important;
  -webkit-text-stroke:.55px rgba(8,9,13,.78);
  text-shadow:-1px 0 #090b10,1px 0 #090b10,0 -1px #090b10,0 1px #090b10,
    0 0 10px color-mix(in srgb,var(--dot-tint,#d85d52) 52%,transparent),0 4px 10px #000d!important;
  transform:translate(-50%,0) scale(.9);
  opacity:0;
  animation:dot-tick-readable 880ms cubic-bezier(.2,.65,.3,1) forwards;
}
.dotnum[data-dot-tick="1"][data-rank="boss"]{font-size:22px}

@keyframes dot-tick-readable{
  0%{transform:translate(-50%,0) scale(.9);opacity:0}
  14%{transform:translate(-50%,-5px) scale(1.06);opacity:1}
  56%{transform:translate(-50%,-20px) scale(1);opacity:.98}
  100%{transform:translate(-50%,-42px) scale(.92);opacity:0}
}

@media (prefers-reduced-motion:reduce){
  .dotnum[data-dot-tick="1"]{animation:dot-tick-readable-reduced 650ms ease-out forwards}
  @keyframes dot-tick-readable-reduced{
    0%{transform:translate(-50%,0);opacity:0}
    18%,72%{transform:translate(-50%,0);opacity:1}
    100%{transform:translate(-50%,0);opacity:0}
  }
}