/* Scoped to .fire-loading-overlay to prevent conflicts */
.fire-loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(39, 5, 55, 0.8); /* Semi-transparent gradient background */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1050; /* Above Bootstrap modals */
}

.fire-loading-overlay .campfire {
  position: relative;
  width: 400px; /* Reduced size for better fit */
  height: 400px;
  transform-origin: center center;
  transform: scale(0.6); /* Scaled down for responsiveness */
}

.fire-loading-overlay .log {
  position: absolute;
  width: 238px;
  height: 70px;
  border-radius: 32px;
  background: #781e20;
  overflow: hidden;
  opacity: 0.99;
}

.fire-loading-overlay .log:before {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  left: 35px;
  width: 8px;
  height: 8px;
  border-radius: 32px;
  background: #b35050;
  transform: translate(-50%, -50%);
  z-index: 3;
  box-shadow: 0 0 0 2.5px #781e20, 0 0 0 10.5px #b35050, 0 0 0 13px #781e20, 0 0 0 21px #b35050, 0 0 0 23.5px #781e20, 0 0 0 31.5px #b35050;
}

.fire-loading-overlay .streak {
  position: absolute;
  height: 2px;
  border-radius: 20px;
  background: #b35050;
}

/* Streak positioning (unchanged from original) */
.fire-loading-overlay .streak:nth-child(1) { top: 10px; width: 90px; }
.fire-loading-overlay .streak:nth-child(2) { top: 10px; left: 100px; width: 80px; }
.fire-loading-overlay .streak:nth-child(3) { top: 10px; left: 190px; width: 30px; }
.fire-loading-overlay .streak:nth-child(4) { top: 22px; width: 132px; }
.fire-loading-overlay .streak:nth-child(5) { top: 22px; left: 142px; width: 48px; }
.fire-loading-overlay .streak:nth-child(6) { top: 22px; left: 200px; width: 28px; }
.fire-loading-overlay .streak:nth-child(7) { top: 34px; left: 74px; width: 160px; }
.fire-loading-overlay .streak:nth-child(8) { top: 46px; left: 110px; width: 40px; }
.fire-loading-overlay .streak:nth-child(9) { top: 46px; left: 170px; width: 54px; }
.fire-loading-overlay .streak:nth-child(10) { top: 58px; left: 90px; width: 110px; }

.fire-loading-overlay .log {
  transform-origin: center center;
  box-shadow: 0 0 2px 1px rgba(0,0,0,0.15);
}

.fire-loading-overlay .log:nth-child(1) { bottom: 100px; left: 100px; transform: rotate(150deg) scaleX(0.75); z-index: 20; }
.fire-loading-overlay .log:nth-child(2) { bottom: 120px; left: 140px; transform: rotate(110deg) scaleX(0.75); z-index: 10; }
.fire-loading-overlay .log:nth-child(3) { bottom: 98px; left: 68px; transform: rotate(-10deg) scaleX(0.75); }
.fire-loading-overlay .log:nth-child(4) { bottom: 80px; left: 220px; transform: rotate(-120deg) scaleX(0.75); z-index: 26; }
.fire-loading-overlay .log:nth-child(5) { bottom: 75px; left: 210px; transform: rotate(-30deg) scaleX(0.75); z-index: 25; }
.fire-loading-overlay .log:nth-child(6) { bottom: 92px; left: 280px; transform: rotate(35deg) scaleX(0.85); z-index: 30; }
.fire-loading-overlay .log:nth-child(7) { bottom: 70px; left: 300px; transform: rotate(-30deg) scaleX(0.75); z-index: 20; }

.fire-loading-overlay .stick {
  position: absolute;
  width: 68px;
  height: 20px;
  border-radius: 10px;
  box-shadow: 0 0 2px 1px rgba(0,0,0,0.1);
  background: #781e20;
}

.fire-loading-overlay .stick:before {
  content: '';
  display: block;
  position: absolute;
  bottom: 100%;
  left: 30px;
  width: 6px;
  height: 20px;
  background: #781e20;
  border-radius: 10px;
  transform: translateY(50%) rotate(32deg);
}

.fire-loading-overlay .stick:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 20px;
  height: 20px;
  background: #b35050;
  border-radius: 10px;
}

.fire-loading-overlay .stick {
  transform-origin: center center;
}

.fire-loading-overlay .stick:nth-child(1) { left: 158px; bottom: 164px; transform: rotate(-152deg) scaleX(0.8); z-index: 12; }
.fire-loading-overlay .stick:nth-child(2) { left: 180px; bottom: 30px; transform: rotate(20deg) scaleX(0.9); }
.fire-loading-overlay .stick:nth-child(3) { left: 400px; bottom: 38px; transform: rotate(170deg) scaleX(0.9); }
.fire-loading-overlay .stick:nth-child(3):before { display: none; }
.fire-loading-overlay .stick:nth-child(4) { left: 370px; bottom: 150px; transform: rotate(80deg) scaleX(0.9); z-index: 20; }
.fire-loading-overlay .stick:nth-child(4):before { display: none; }

.fire-loading-overlay .fire .flame {
  position: absolute;
  transform-origin: bottom center;
  opacity: 0.9;
}

.fire-loading-overlay .fire__red .flame {
  width: 48px;
  border-radius: 48px;
  background: #e20f00;
  box-shadow: 0 0 80px 18px rgba(226,15,0,0.4);
}

.fire-loading-overlay .fire__red .flame:nth-child(1) { left: 138px; height: 160px; bottom: 100px; animation: fire 2s 0.15s ease-in-out infinite alternate; }
.fire-loading-overlay .fire__red .flame:nth-child(2) { left: 186px; height: 240px; bottom: 100px; animation: fire 2s 0.35s ease-in-out infinite alternate; }
.fire-loading-overlay .fire__red .flame:nth-child(3) { left: 234px; height: 300px; bottom: 100px; animation: fire 2s 0.1s ease-in-out infinite alternate; }
.fire-loading-overlay .fire__red .flame:nth-child(4) { left: 282px; height: 360px; bottom: 100px; animation: fire 2s 0s ease-in-out infinite alternate; }
.fire-loading-overlay .fire__red .flame:nth-child(5) { left: 330px; height: 310px; bottom: 100px; animation: fire 2s 0.45s ease-in-out infinite alternate; }
.fire-loading-overlay .fire__red .flame:nth-child(6) { left: 378px; height: 232px; bottom: 100px; animation: fire 2s 0.3s ease-in-out infinite alternate; }
.fire-loading-overlay .fire__red .flame:nth-child(7) { left: 426px; height: 140px; bottom: 100px; animation: fire 2s 0.1s ease-in-out infinite alternate; }

.fire-loading-overlay .fire__orange .flame {
  width: 48px;
  border-radius: 48px;
  background: #ff9c00;
  box-shadow: 0 0 80px 18px rgba(255,156,0,0.4);
}

.fire-loading-overlay .fire__orange .flame:nth-child(1) { left: 138px; height: 140px; bottom: 100px; animation: fire 2s 0.05s ease-in-out infinite alternate; }
.fire-loading-overlay .fire__orange .flame:nth-child(2) { left: 186px; height: 210px; bottom: 100px; animation: fire 2s 0.1s ease-in-out infinite alternate; }
.fire-loading-overlay .fire__orange .flame:nth-child(3) { left: 234px; height: 250px; bottom: 100px; animation: fire 2s 0.35s ease-in-out infinite alternate; }
.fire-loading-overlay .fire__orange .flame:nth-child(4) { left: 282px; height: 300px; bottom: 100px; animation: fire 2s 0.4s ease-in-out infinite alternate; }
.fire-loading-overlay .fire__orange .flame:nth-child(5) { left: 330px; height: 260px; bottom: 100px; animation: fire 2s 0.5s ease-in-out infinite alternate; }
.fire-loading-overlay .fire__orange .flame:nth-child(6) { left: 378px; height: 202px; bottom: 100px; animation: fire 2s 0.35s ease-in-out infinite alternate; }
.fire-loading-overlay .fire__orange .flame:nth-child(7) { left: 426px; height: 110px; bottom: 100px; animation: fire 2s 0.1s ease-in-out infinite alternate; }

.fire-loading-overlay .fire__yellow .flame {
  width: 48px;
  border-radius: 48px;
  background: #ffeb6e;
  box-shadow: 0 0 80px 18px rgba(255,235,110,0.4);
}

.fire-loading-overlay .fire__yellow .flame:nth-child(1) { left: 186px; height: 140px; bottom: 100px; animation: fire 2s 0.6s ease-in-out infinite alternate; }
.fire-loading-overlay .fire__yellow .flame:nth-child(2) { left: 234px; height: 172px; bottom: 120px; animation: fire 2s 0.4s ease-in-out infinite alternate; }
.fire-loading-overlay .fire__yellow .flame:nth-child(3) { left: 282px; height: 240px; bottom: 100px; animation: fire 2s 0.38s ease-in-out infinite alternate; }
.fire-loading-overlay .fire__yellow .flame:nth-child(4) { left: 330px; height: 200px; bottom: 100px; animation: fire 2s 0.22s ease-in-out infinite alternate; }
.fire-loading-overlay .fire__yellow .flame:nth-child(5) { left: 378px; height: 142px; bottom: 100px; animation: fire 2s 0.18s ease-in-out infinite alternate; }

.fire-loading-overlay .fire__white .flame {
  width: 48px;
  border-radius: 48px;
  background: #fef1d9;
  box-shadow: 0 0 80px 18px rgba(254,241,217,0.4);
}

.fire-loading-overlay .fire__white .flame:nth-child(1) { left: 156px; width: 32px; height: 100px; bottom: 100px; animation: fire 2s 0.22s ease-in-out infinite alternate; }
.fire-loading-overlay .fire__white .flame:nth-child(2) { left: 181px; width: 32px; height: 120px; bottom: 100px; animation: fire 2s 0.42s ease-in-out infinite alternate; }
.fire-loading-overlay .fire__white .flame:nth-child(3) { left: 234px; height: 170px; bottom: 100px; animation: fire 2s 0.32s ease-in-out infinite alternate; }
.fire-loading-overlay .fire__white .flame:nth-child(4) { left: 282px; height: 210px; bottom: 100px; animation: fire 2s 0.8s ease-in-out infinite alternate; }
.fire-loading-overlay .fire__white .flame:nth-child(5) { left: 330px; height: 170px; bottom: 100px; animation: fire 2s 0.85s ease-in-out infinite alternate; }
.fire-loading-overlay .fire__white .flame:nth-child(6) { left: 378px; width: 32px; height: 110px; bottom: 100px; animation: fire 2s 0.64s ease-in-out infinite alternate; }
.fire-loading-overlay .fire__white .flame:nth-child(7) { left: 408px; width: 32px; height: 100px; bottom: 100px; animation: fire 2s 0.32s ease-in-out infinite alternate; }

.fire-loading-overlay .spark {
  position: absolute;
  width: 6px;
  height: 20px;
  background: #fef1d9;
  border-radius: 18px;
  z-index: 50;
  transform-origin: bottom center;
  transform: scaleY(0);
}

.fire-loading-overlay .spark:nth-child(1) { left: 160px; bottom: 212px; animation: spark 1s 0.4s linear infinite; }
.fire-loading-overlay .spark:nth-child(2) { left: 180px; bottom: 240px; animation: spark 1s 1s linear infinite; }
.fire-loading-overlay .spark:nth-child(3) { left: 208px; bottom: 320px; animation: spark 1s 0.8s linear infinite; }
.fire-loading-overlay .spark:nth-child(4) { left: 310px; bottom: 400px; animation: spark 1s 2s linear infinite; }
.fire-loading-overlay .spark:nth-child(5) { left: 360px; bottom: 380px; animation: spark 1s 0.75s linear infinite; }
.fire-loading-overlay .spark:nth-child(6) { left: 390px; bottom: 320px; animation: spark 1s 0.65s linear infinite; }
.fire-loading-overlay .spark:nth-child(7) { left: 400px; bottom: 280px; animation: spark 1s 1s linear infinite; }
.fire-loading-overlay .spark:nth-child(8) { left: 430px; bottom: 210px; animation: spark 1s 1.4s linear infinite; }

@keyframes fire {
  0% { transform: scaleY(1); }
  28% { transform: scaleY(0.7); }
  38% { transform: scaleY(0.8); }
  50% { transform: scaleY(0.6); }
  70% { transform: scaleY(0.95); }
  82% { transform: scaleY(0.58); }
  100% { transform: scaleY(1); }
}

@keyframes spark {
  0%, 35% { transform: scaleY(0) translateY(0); opacity: 0; }
  50% { transform: scaleY(1) translateY(0); opacity: 1; }
  70% { transform: scaleY(1) translateY(-10px); opacity: 1; }
  75% { transform: scaleY(1) translateY(-10px); opacity: 0; }
  100% { transform: scaleY(0) translateY(0); opacity: 0; }
}