fix fiamme

styles.css

@@ -760,50 +760,96 @@ body {
   color: rgba(255, 255, 255, 0.55);
 }
 
-/* fiammate dai due angoli in basso */
+/* canvas del fuoco a particelle (falò vero, disegnato in JS) */
+.shalom-fire {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1; /* dietro al leone (z-index 2) */
+  opacity: 0;
+  pointer-events: none;
+}
+.shalom-overlay.mode-fire .shalom-fire {
+  opacity: 1;
+}
+
+/* fuoco che lambisce il bordo inferiore: lingue di fiamma animate.
+   Ora fanno solo da base morbida sotto le particelle canvas. */
 .shalom-flames {
   position: absolute;
-  bottom: -6%;
-  width: 50vw;
-  height: 92vh;
+  bottom: 0;
+  height: 40vh;
+  width: 52vw;
   pointer-events: none;
   opacity: 0;
-  filter: blur(2px);
   mix-blend-mode: screen;
-  background:
-    radial-gradient(55% 42% at 50% 100%, rgba(255, 235, 140, 0.95), transparent 70%),
-    linear-gradient(0deg, #ff2d00 0%, #ff7a00 26%, #ffd23f 48%, rgba(255, 210, 63, 0) 74%);
+  z-index: 1;
 }
 .shalom-flames.left {
-  left: -8%;
-  transform-origin: bottom left;
+  left: 0;
 }
 .shalom-flames.right {
-  right: -8%;
-  transform-origin: bottom right;
+  right: 0;
+  transform: scaleX(-1); /* specchia così le due metà non sono identiche */
+}
+.shalom-flames::before,
+.shalom-flames::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  transform-origin: bottom center;
+  background-repeat: no-repeat;
+  background-position: bottom;
+  filter: blur(5px) contrast(1.5) brightness(1.08);
+  -webkit-mask: linear-gradient(0deg, #000 20%, rgba(0, 0, 0, 0.55) 55%, transparent 88%);
+  mask: linear-gradient(0deg, #000 20%, rgba(0, 0, 0, 0.55) 55%, transparent 88%);
+}
+.shalom-flames::before {
+  background-image:
+    radial-gradient(22% 58% at 18% 100%, rgba(255, 244, 190, 0.95), rgba(255, 120, 0, 0.55) 46%, transparent 72%),
+    radial-gradient(26% 74% at 42% 100%, rgba(255, 224, 130, 0.9), rgba(255, 80, 0, 0.5) 50%, transparent 74%),
+    radial-gradient(20% 60% at 66% 100%, rgba(255, 240, 170, 0.92), rgba(255, 100, 0, 0.52) 46%, transparent 72%),
+    radial-gradient(24% 76% at 86% 100%, rgba(255, 214, 110, 0.9), rgba(255, 70, 0, 0.5) 50%, transparent 74%);
+}
+.shalom-flames::after {
+  background-image:
+    radial-gradient(17% 70% at 30% 100%, rgba(255, 250, 210, 0.95), rgba(255, 140, 0, 0.55) 44%, transparent 70%),
+    radial-gradient(21% 84% at 54% 100%, rgba(255, 232, 150, 0.9), rgba(255, 90, 0, 0.5) 48%, transparent 72%),
+    radial-gradient(17% 66% at 78% 100%, rgba(255, 244, 180, 0.92), rgba(255, 110, 0, 0.52) 44%, transparent 70%);
 }
 .shalom-overlay.mode-fire .shalom-flames {
-  opacity: 1;
-  animation: flames 0.26s infinite alternate;
+  opacity: 0.5; /* base morbida: le particelle canvas fanno il grosso */
 }
-.shalom-overlay.mode-fire .shalom-flames.right {
-  animation-delay: 0.13s;
+.shalom-overlay.mode-fire .shalom-flames::before {
+  animation: flameA 0.42s infinite alternate;
 }
-@keyframes flames {
-  0% { transform: scaleY(1) scaleX(1) skewX(0deg); }
-  100% { transform: scaleY(1.14) scaleX(0.92) skewX(4deg); }
+.shalom-overlay.mode-fire .shalom-flames::after {
+  animation: flameB 0.31s infinite alternate;
+}
+@keyframes flameA {
+  0% { transform: scaleY(0.94) scaleX(1.02) translateY(0); opacity: 0.85; }
+  100% { transform: scaleY(1.2) scaleX(0.97) translateY(-3%); opacity: 1; }
+}
+@keyframes flameB {
+  0% { transform: scaleY(1.14) translateX(-1.5%); opacity: 0.7; }
+  100% { transform: scaleY(0.9) translateX(2%); opacity: 1; }
 }
 
 /* leone che irrompe */
 .shalom-lion {
   position: absolute;
-  top: 50%;
+  top: 48%;
   left: 50%;
-  width: min(46vw, 520px);
-  border-radius: 16px;
+  width: min(52vw, 580px);
+  z-index: 2;
+  /* sfuma i bordi dell'immagine così il fuoco si fonde col nero invece di
+     mostrare un riquadro rettangolare netto */
+  -webkit-mask: radial-gradient(ellipse 66% 66% at 50% 45%, #000 44%, transparent 74%);
+  mask: radial-gradient(ellipse 66% 66% at 50% 45%, #000 44%, transparent 74%);
   transform: translate(-50%, -50%) scale(0.2);
   opacity: 0;
-  filter: drop-shadow(0 0 40px #ff6a00);
+  filter: drop-shadow(0 0 55px #ff6a00);
 }
 .shalom-overlay.mode-fire .shalom-lion {
   animation: lionSlam 0.6s cubic-bezier(0.2, 1.5, 0.4, 1) forwards,