/* The active-fire flame icon — the SINGLE CSS source for both the map markers and the latest-fires
   widget, so the white "new" halo is defined in exactly one place (mirrors web/src/fire-icon.js for
   the markup). Linked by both index.html and widget.html. Self-contained: no CSS variables, so it
   renders identically wherever it's dropped.

   Active fires are flame icons — shape distinguishes the fires layer from air-quality circles and
   hotspot dots; colour still encodes control status. */
.fire-flame-marker { background: none; border: none; }
.fire-flame { display: block; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.45)); }
.fire-flame.fire-out { opacity: 0.5; }
/* New fires (reported in the last 24h) get a white halo so they pop, without a new status colour
   that would clash with the warm severity palette. A solid directional ring (crisp white edge) plus
   stacked soft glows makes it read clearly at map scale, on both light land and dark water. */
.fire-flame.fire-new {
  filter:
    drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff)
    drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff)
    drop-shadow(0 0 2px #fff) drop-shadow(0 0 2px #fff) drop-shadow(0 0 2px #fff)
    drop-shadow(0 1px 1px rgba(0, 0, 0, 0.55));
}