refactor: damage scaling

app/react/components/dom/damage.jsx

@@ -39,11 +39,18 @@ function Damage({
         '--randomnessX': randomness.x,
         '--randomnessY': randomness.y,
         '--shimmer': damageTypeMap[damage.type],
+        '--uiScale': scale,
         rotate: `${randomness.radians}rad`,
         zIndex,
       }}
     >
-      <p>{Math.abs(amount)}</p>
+      <p
+        style={{
+          scale: `${scale}`,
+        }}
+      >
+        {Math.abs(amount)}
+      </p>
     </div>
   );
 }

app/react/components/dom/damage.module.css

@@ -13,6 +13,11 @@
   inherits: false;
   syntax: '<number>';
 }
+@property --uiScale {
+  initial-value: 0;
+  inherits: false;
+  syntax: '<number>';
+}
 @property --shimmer {
   initial-value: '';
   inherits: false;
@@ -54,7 +59,7 @@
     var(--shimmer) 300ms infinite cubic-bezier(0.87, 0, 0.13, 1)
   ;
   color: var(--foreground);
-  font-size: calc(10px + (var(--magnitude) * 12px));
+  font-size: calc(5px + (var(--magnitude) * 6px));
   opacity: var(--opacity);
   overflow-wrap: break-word;
   position: absolute;
@@ -86,8 +91,8 @@
     --offsetY: 0;
   }
   33%, 91.6% {
-    --offsetX: calc(80 * var(--randomnessX));
-    --offsetY: calc(-1 * (10 + var(--randomnessY) * 90));
+    --offsetX: calc(20 * var(--uiScale) * var(--randomnessX));
+    --offsetY: calc(-1 * (10 + var(--randomnessY) * 22.5 * var(--uiScale)));
   }
 }