/* Fire Canvas Layers */
 #fireCanvas1,
 #fireCanvas2 {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     pointer-events: none;
 }

 #fireCanvas1 {
     z-index: 1;
     opacity: 0.8;
 }

 #fireCanvas2 {
     z-index: 2;
     opacity: 0.6;
     filter: blur(1.5px);
     /* ลดลงนิดนึง */
 }

 /* Lightning Effects */
 .lightning {
     position: absolute;
     top: 0;
     left: 50%;
     width: 2px;
     height: 100%;
     background: linear-gradient(to bottom,
             rgba(255, 255, 255, 0) 0%,
             rgba(255, 200, 100, 1) 20%,
             rgba(255, 100, 0, 0.8) 40%,
             rgba(255, 255, 255, 0) 60%);
     opacity: 0;
     animation: lightning 8s ease-in-out infinite;
     z-index: 10;
     filter: blur(3px);
     box-shadow: 0 0 20px rgba(255, 200, 100, 0.8);
 }

 .lightning-2 {
     left: 30%;
     animation-delay: 4s;
 }

 @keyframes lightning {

     0%,
     90%,
     100% {
         opacity: 0;
     }

     91%,
     92% {
         opacity: 1;
     }

     93%,
     94% {
         opacity: 0;
     }

     95%,
     96% {
         opacity: 1;
     }

     97% {
         opacity: 0;
     }
 }

 /* Floating Particles */
 .particles-container {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     pointer-events: none;
     z-index: 2;
 }

 .floating-particle {
     position: absolute;
     bottom: 0;
     background: radial-gradient(circle,
             rgba(255, 140, 0, 1),
             rgba(255, 50, 0, 0.5),
             transparent);
     border-radius: 50%;
     animation: floatUpExplosive linear infinite;
     box-shadow: 0 0 10px rgba(255, 140, 0, 0.8);
     will-change: transform, opacity;
     /* 👈 ช่วยให้สมูทขึ้น */
 }

 @keyframes floatUpExplosive {
     0% {
         transform: translateY(0) translateX(0) scale(1) rotate(0deg);
         opacity: 0;
     }

     10% {
         opacity: 1;
     }

     50% {
         opacity: 0.8;
     }

     90% {
         opacity: 0.5;
     }

     100% {
         transform: translateY(-120vh) translateX(calc((var(--random, 0.5) - 0.5) * 200px)) scale(0.3) rotate(720deg);
         opacity: 0;
     }
 }