@property --hue {
  initial-value: 0;
  inherits: false;
  syntax: '<number>';
}
@property --opacity {
  initial-value: 0;
  inherits: false;
  syntax: '<number>';
}
@property --scale {
  initial-value: 0;
  inherits: false;
  syntax: '<number>';
}
@property --offsetX {
  initial-value: 0;
  inherits: false;
  syntax: '<number>';
}
@property --offsetY {
  initial-value: 0;
  inherits: false;
  syntax: '<number>';
}
@property --randomnessX {
  initial-value: 0;
  inherits: false;
  syntax: '<number>';
}
@property --randomnessY {
  initial-value: 0;
  inherits: false;
  syntax: '<number>';
}

.damage {
  --hue: 0;
  --opacity: 0.75;
  --randomnessX: 0;
  --randomnessY: 0;
  --scale: 0.35;
  --background: hsl(var(--hue) 100% 12.5%);
  --foreground: hsl(var(--hue) 100% 50%);
  color: var(--foreground);
  font-size: calc(10px + (var(--magnitude) * 12px));
  opacity: var(--opacity);
  overflow-wrap: break-word;
  position: absolute;
  margin: 0;
  text-shadow:
    0px -1px 0px var(--background),
    1px 0px 0px var(--background),
    0px 1px 0px var(--background),
    -1px 0px 0px var(--background),
    0px -2px 0px var(--background),
    2px 0px 0px var(--background),
    0px 2px 0px var(--background),
    -2px 0px 0px var(--background)
  ;
  scale: var(--scale);
  translate:
    calc(-50% + (1px * var(--offsetX)) + var(--positionX))
    calc(-50% + (1px * var(--offsetY)) + var(--positionY))
  ;
  user-select: none;
  will-change: color, scale, opacity, translate, transform;
  p {
    margin: 0;
  }
}

.damages {
  font-family: Joystix, 'Courier New', Courier, monospace;
}