/* Fire button - see fire.js. The canvas paints the whole interior; this sheet
   seals it behind glass, keeps the label on top and readable, radiates the heat
   outward, and lets a click's embers escape through the top. Doubled attribute
   selectors win over each page's own button styles without !important. */
button[data-fire][data-fire]{position:relative;isolation:isolate;overflow:visible;color:#fff;border-color:transparent;background:#1a0603;
  box-shadow:0 0 12px rgba(255,86,10,.45),0 0 0 1px rgba(255,120,30,.55);animation:fire-radiate 1.4s ease-in-out infinite}
button[data-fire][data-fire]:hover,button[data-fire][data-fire].on{color:#fff;box-shadow:0 0 22px rgba(255,110,20,.72),0 0 0 1px rgba(255,180,70,.85)}
button[data-fire][data-fire]:active{transform:translateY(1px) scale(.985)}
@keyframes fire-radiate{50%{box-shadow:0 0 20px rgba(255,108,18,.7),0 0 0 1px rgba(255,160,60,.75)}}

[data-fire] > .fire-core{position:absolute;inset:0;z-index:0;overflow:hidden;border-radius:inherit;pointer-events:none;background:#1a0603}
[data-fire] > .fire-core canvas{position:absolute;inset:0;width:100%;height:100%;display:block;border-radius:inherit}
/* glass: a sheen across the top and a hot rim, so the fire reads as sealed in */
[data-fire] > .fire-core::after{content:'';position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(180deg,rgba(255,244,220,.2) 0%,rgba(255,244,220,.05) 30%,rgba(255,244,220,0) 46%);
  box-shadow:inset 0 0 0 1px rgba(255,176,82,.62),inset 0 1px 0 rgba(255,236,190,.55),inset 0 -8px 16px -6px rgba(0,0,0,.45)}

/* the label rides on top of the fire and stays legible */
[data-fire] > :not(.fire-core):not(.fire-burst){position:relative;z-index:2}
button[data-fire][data-fire] b,button[data-fire][data-fire] em{color:#fff;
  text-shadow:0 1px 0 rgba(50,0,0,.9),0 0 5px rgba(40,0,0,.9),0 0 14px rgba(255,120,30,.6)}
button[data-fire][data-fire] em{color:#ffe3c2}

/* embers a click knocks loose */
.fire-burst{position:absolute;left:0;right:0;top:0;height:0;z-index:3;pointer-events:none}
.fire-burst i{position:absolute;top:2px;left:var(--x);width:3px;height:3px;margin-left:-1.5px;border-radius:50%;background:#ffe2a0;
  box-shadow:0 0 6px 1px rgba(255,150,40,.95);animation:fire-ember var(--d) cubic-bezier(.16,1,.3,1) forwards}
@keyframes fire-ember{0%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.3)}}

/* no WebGL: a plain CSS fire, gradients and background-position only */
button.fire-css > .fire-core{background:radial-gradient(110% 80% at 50% 115%,#fff1b0 0%,#ffb020 20%,#ff5a0a 44%,#8a1604 74%,#1a0603 100%);
  background-size:100% 150%;animation:fire-css .9s ease-in-out infinite alternate}
@keyframes fire-css{to{background-position:0 18%}}

@media (prefers-reduced-motion:reduce){button[data-fire][data-fire],button.fire-css > .fire-core{animation:none}.fire-burst{display:none}}