миграция на pixi

src/App.css

@@ -209,132 +209,9 @@
   user-select: none;
 }
 
-.health-bar {
-  position: absolute;
-  width: 28px;
-  height: 5px;
-  transform: translate(-50%, -100%);
-  background: rgba(0, 0, 0, 0.5);
-  border: 1px solid #1b1611;
-  z-index: 500;
-  pointer-events: none;
-}
-
-.health-bar__fill {
-  height: 100%;
-  background: #4caf50;
-  transition: none;
-}
-
-.entity {
-  position: absolute;
-  transform: translate(-50%, -50%);
-  pointer-events: none;
-}
-
-.entity.log-shadow {
-  width: 20px;
-  height: 10px;
-  margin: 8px 0px 0px 0px;
-  border-radius: 50%;
-  background: rgba(0, 0, 0, 0.35);
-  z-index: 0;
-}
-
-.entity.twig-shadow {
-  width: 18px;
-  height: 9px;
-  margin: 7px 0px 0px 0px;
-  border-radius: 50%;
-  background: rgba(0, 0, 0, 0.35);
-  z-index: 0;
-}
-
-.entity.tree-shadow {
-  width: 64px;
-  height: 32px;
-  border-radius: 50%;
-  margin: 26px 0px 0px -11px;
-  background: rgba(0, 0, 0, 0.35);
-  z-index: 0;
-}
-
-.entity.bush-shadow {
-  width: 40px;
-  height: 20px;
-  border-radius: 50%;
-  margin: 16px 0px 0px -6px;
-  background: rgba(0, 0, 0, 0.35);
-  z-index: 0;
-}
-
-.entity.character-shadow {
-  width: 48px;
-  height: 24px;
-  border-radius: 50%;
-  margin: 32px 0px 0px 0px;
-  background: rgba(0, 0, 0, 0.35);
-  z-index: 0;
-}
-
-.entity.rabbit-shadow {
-  width: 18px;
-  height: 9px;
-  border-radius: 50%;
-  margin: 32px 10px 0px 0px;
-  background: rgba(0, 0, 0, 0.35);
-  z-index: 0;
-}
-
-.entity.meat-shadow {
-  width: 18px;
-  height: 9px;
-  border-radius: 50%;
-  margin: 7px 0px 0px 0px;
-  background: rgba(0, 0, 0, 0.35);
-  z-index: 0;
-}
-
-.entity.tree {
-  pointer-events: auto;
-  cursor: pointer;
-  padding: 12px;
-  margin: -12px;
-}
-
-.entity.bush {
-  pointer-events: auto;
-  cursor: pointer;
-  padding: 8px;
-  margin: -8px;
-}
-
-.entity.rabbit {
-  pointer-events: auto;
-  cursor: pointer;
-  padding: 6px;
-  margin: -6px;
-}
-
-.entity.chopping svg {
-  animation: chop-shake 0.12s infinite;
-}
-
-.entity.character {
-  transition: none;
-}
-
-.entity.character.character--walking svg {
-  animation: walk-bob 0.3s infinite steps(2);
-}
-
-/* Same specificity as the walk-bob rule above (and placed after it), so the hit-shake still
- * shows on the brief flash even if the character happens to be walking at that exact moment. */
-.entity.character.chopping svg {
-  animation: chop-shake 0.12s infinite;
-}
-
-.day-night-overlay {
+/* Wraps the blood-moon banner and death screen, both absolutely positioned over the game canvas
+ * (see GameOverlays.ts) — pointer-events is re-enabled on .game-over-overlay below for its button. */
+.game-overlays {
   position: absolute;
   inset: 0;
   pointer-events: none;
@@ -366,6 +243,13 @@
   }
 }
 
+/* Author `display: flex` below otherwise wins the cascade over the UA stylesheet's
+ * `[hidden] { display: none }` (equal specificity, author beats user-agent) — without this, toggling
+ * the `hidden` IDL property (see GameOverlays.ts) wouldn't actually hide the element. */
+.game-over-overlay[hidden] {
+  display: none;
+}
+
 .game-over-overlay {
   position: absolute;
   inset: 0;
@@ -376,6 +260,7 @@
   align-items: center;
   justify-content: center;
   gap: 24px;
+  pointer-events: auto;
 }
 
 .game-over-overlay__message {
@@ -395,27 +280,3 @@
   flex-direction: column;
   gap: 4px;
 }
-
-@keyframes chop-shake {
-  0%, 100% {
-    transform: translate(0, 0) rotate(0deg);
-  }
-  25% {
-    transform: translate(-2px, 1px) rotate(-6deg);
-  }
-  50% {
-    transform: translate(1px, -2px) rotate(5deg);
-  }
-  75% {
-    transform: translate(-1px, 1px) rotate(-4deg);
-  }
-}
-
-@keyframes walk-bob {
-  0% {
-    transform: translateY(0);
-  }
-  100% {
-    transform: translateY(-3px);
-  }
-}