#combat-flash,#damage-direction{position:fixed;pointer-events:none;z-index:5;inset:0;opacity:0}
#combat-flash{background:radial-gradient(ellipse at 50% 70%,transparent 20%,#ffb76b20 100%);transition:opacity .07s}
#combat-flash.shield{background:radial-gradient(ellipse,transparent 38%,#60c9ff48 100%)}
#combat-flash.down{background:radial-gradient(ellipse,transparent 44%,#ffcc7352 100%)}
#damage-direction{inset:50% auto auto 50%;width:190px;height:190px;margin:-95px;border:4px solid transparent;border-top-color:#ff7464;border-radius:50%;filter:drop-shadow(0 0 5px #f33a);transition:opacity .1s}
#hitmarker{transition:opacity .07s,scale .08s;scale:var(--hit-scale,1)}
#damage-number{color:var(--damage-color,#ffd38d);text-shadow:0 2px 5px #17232a;transition:opacity .13s;white-space:nowrap}
#combat-status{position:absolute;left:50%;top:calc(50% + 42px);translate:-50% 0;font:700 13px sans-serif;letter-spacing:.1em;color:#a8eaff;text-shadow:0 2px 4px #182c37;opacity:0;pointer-events:none;transition:opacity .12s}
#crosshair{transition:width .07s,height .07s;--spread:0px;width:calc(24px + var(--spread));height:calc(24px + var(--spread))}
#crosshair i:nth-child(1),#crosshair i:nth-child(2){left:calc(50% - 1px)}
#crosshair i:nth-child(3),#crosshair i:nth-child(4){top:calc(50% - 1px)}
#crosshair span{left:calc(50% - 1px);top:calc(50% - 1px)}
@media(prefers-reduced-motion:reduce){#hitmarker{transition:opacity .07s}#crosshair{transition:none}}