/* ---------- Fire — side-view flame (ported as-is), centered on the burning tree.
   Size is unbounded and continuous, driven entirely by --fire-scale. ---------- */
.fire{
  position:absolute; --fire-scale:1;
  width:min(12vmin,108px); height:min(12vmin,108px);
  transform-origin:50% 50%;
  transform:translate(-50%,-50%) scale(var(--fire-scale));
  cursor:pointer;
  pointer-events:auto;
}
.fire.out{
  transition: opacity 0.4s ease, transform 0.4s ease;
  opacity:0; transform:translate(-50%,-50%) scale(0.3);
}
.fire .core{
  position:absolute; left:50%; bottom:0; width:70%; height:60%;
  transform:translateX(-50%);
  background: radial-gradient(ellipse at 50% 100%, rgba(255,214,130,0.95) 0%, rgba(255,120,30,0.8) 42%, rgba(255,60,0,0) 76%);
  animation: fireCoreFlicker 0.5s ease-in-out infinite alternate;
}
@keyframes fireCoreFlicker{
  0%{ transform:translateX(-50%) scale(1); opacity:0.88; }
  100%{ transform:translateX(-50%) scale(1.1); opacity:1; }
}
.fire .embers{ position:absolute; inset:0; }
.fire .ember{
  position:absolute; left:50%; bottom:6%; width:35%; height:35%;
  transform:translateX(-50%);
  background-image: radial-gradient(circle, rgba(255,178,70,0.95) 0%, rgba(255,96,24,0.6) 46%, rgba(255,60,0,0) 74%);
  border-radius:50%; opacity:0;
  animation: fireEmberRise 1.1s ease-in infinite;
}
.fire .ember:nth-child(1){ left:20%; width:30%; animation-delay:0s; }
.fire .ember:nth-child(2){ left:50%; width:40%; animation-delay:0.15s; }
.fire .ember:nth-child(3){ left:75%; width:28%; animation-delay:0.3s; }
.fire .ember:nth-child(4){ left:35%; width:36%; animation-delay:0.45s; }
.fire .ember:nth-child(5){ left:65%; width:32%; animation-delay:0.6s; }
@keyframes fireEmberRise{
  0%{ opacity:0; transform:translateX(-50%) translateY(0) scale(1); }
  20%{ opacity:0.9; }
  100%{ opacity:0; transform:translateX(-50%) translateY(-70px) scale(0.2); }
}

/* ---------- Hose water stream ---------- */
#hose-stream{
  position:absolute; left:0; top:0; height:7px; width:1px;
  transform-origin:0 50%; border-radius:6px; z-index:999998; pointer-events:none;
  background:linear-gradient(90deg, rgba(180,225,255,0.95), rgba(120,195,245,0.55));
  opacity:0; box-shadow:0 0 8px rgba(150,215,255,0.8);
}
#hose-stream.show{ opacity:0.9; animation:hosePulse 0.4s ease-in-out infinite alternate; }
@keyframes hosePulse{ 0%{ opacity:0.7; } 100%{ opacity:1; } }

/* ---------- Detection/fill-zone ring — shared by the fire detection radius and the tank fill zone ---------- */
.detect-ring{
  position:absolute; transform:translate(-50%,-50%);
  border-radius:50%; pointer-events:none; opacity:0;
  border:2px dashed rgba(255,255,255,0.6);
  z-index:16; transition:opacity 0.25s ease;
}
.detect-ring.show{
  opacity:1;
  animation: fireRingSpin 7s linear infinite;
}
@keyframes fireRingSpin{
  from{ transform:translate(-50%,-50%) rotate(0deg); }
  to{ transform:translate(-50%,-50%) rotate(360deg); }
}