/* Fireball panel on New Launch_True cards (Launches page). v2 2026-10-23: FireFinder's flame art (flame-band.webp,
   from the Android app's fire_flame_horizon.png) fills the bottom of the panel and climbs with --heat (0..1).
   Colours = the app's EmberPalette. */
.lc.nl{border-color:rgba(240,108,11,.6);box-shadow:0 0 0 1px rgba(240,108,11,.18) inset,0 14px 34px -18px rgba(236,73,15,.7)}
.fbs{--heat:0;position:relative;overflow:hidden;display:flex;align-items:flex-start;gap:10px;margin:10px 0 4px;
  min-height:calc(150px + 70px * var(--heat));padding:12px 12px 40px;border-radius:12px;
  background:#0B0F10;border:1px solid #2A1A12;isolation:isolate}
.fbs-fire{position:absolute;inset:0;z-index:-1;pointer-events:none}
.fbs-f{position:absolute;left:-6%;right:-6%;bottom:-2px;height:calc(34% + 58% * var(--heat));
  background:url(/launches/flame-band.webp) center bottom / 100% 100% no-repeat;transform-origin:50% 100%;
  filter:saturate(calc(.55 + .6 * var(--heat))) brightness(calc(.6 + .55 * var(--heat)));
  animation:fbsFlick var(--fbspd,1.2s) ease-in-out infinite alternate}
.fbs-f2{transform:scaleX(-1);opacity:.55;left:-14%;right:2%;height:calc(28% + 52% * var(--heat));animation-name:fbsFlick2;animation-duration:calc(var(--fbspd,1.2s) * 1.3);animation-delay:-.5s}
.fbs-glow{position:absolute;left:0;right:0;bottom:0;height:70%;
  background:radial-gradient(ellipse 70% 90% at 50% 100%,rgba(236,73,15,calc(.12 + .4 * var(--heat))),transparent 70%);
  animation:fbsGlow calc(var(--fbspd,1.2s) * 1.6) ease-in-out infinite alternate}
.fbs::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;    /* keeps the text readable over the flames */
  background:linear-gradient(180deg,rgba(11,15,16,.92) 0%,rgba(11,15,16,.55) 42%,rgba(11,15,16,0) 70%)}
.fbs-t{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.fbs-k{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;font-size:10.5px;letter-spacing:.16em}
.fbs-k b{color:#F2A623;font-weight:800}
.fbs-k span{color:#C9A58A;letter-spacing:.06em;text-transform:uppercase}
.fbs-lab{margin-top:6px;font:800 10px/1 var(--mono,monospace);letter-spacing:.22em;text-transform:uppercase;color:#F2A623;opacity:.9}
.fbs-r{display:flex;gap:8px;align-items:baseline;white-space:nowrap;color:#C9A58A;font-size:12px}
.fbs-r b{display:inline-block;font-size:calc(26px + 10px * var(--heat));line-height:1.1;color:#F5E9DC;font-weight:800;
  text-shadow:0 0 calc(6px + 16px * var(--heat)) rgba(240,108,11,.85),0 1px 0 #000}
.fbs-r b.bump{animation:fbsBump .7s ease-out}
.fbs-s{font-size:11.5px;color:#F5E9DC;opacity:.85;text-shadow:0 1px 2px #000}
.fbs .fb-spark{flex:none;width:120px;height:36px;margin-top:4px;opacity:.95}
.fb-spark-l{fill:none;stroke:#F2A623;stroke-width:1.8;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round;filter:drop-shadow(0 0 3px rgba(240,108,11,.8))}
.fb-spark-a{fill:rgba(242,166,35,.14)}
@media (max-width:420px){.fbs .fb-spark{width:84px}}
@keyframes fbsFlick{0%{transform:scaleY(.94)}50%{transform:scaleY(1.04) translateX(-.6%)}100%{transform:scaleY(.98) translateX(.6%)}}
@keyframes fbsFlick2{0%{transform:scaleX(-1) scaleY(1.03)}100%{transform:scaleX(-1) scaleY(.92) translateX(1%)}}
@keyframes fbsGlow{from{opacity:.7}to{opacity:1}}
@keyframes fbsBump{0%{transform:scale(1.25);color:#fff3c4}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.fbs-f,.fbs-f2,.fbs-glow,.fbs-r b.bump{animation:none}}
/* live holder count on the card flashes when it moves (6 s updates) */
.lc .v-h.tick.up{animation:fbsTickUp 1.4s ease-out}
.lc .v-h.tick.dn{animation:fbsTickDn 1.4s ease-out}
@keyframes fbsTickUp{0%{color:#2BFF7A;text-shadow:0 0 10px rgba(43,255,122,.8)}100%{color:inherit;text-shadow:none}}
@keyframes fbsTickDn{0%{color:#E41818;text-shadow:0 0 10px rgba(228,24,24,.7)}100%{color:inherit;text-shadow:none}}
/* the key along the bottom of the flames (2026-10-24) */
.fbs-leg{position:absolute;left:10px;right:10px;bottom:8px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font:700 10.5px/1.2 var(--mono,monospace);color:#F5E9DC;pointer-events:none}
.fbs-leg>*{background:rgba(11,15,16,.72);border:1px solid rgba(240,108,11,.35);border-radius:999px;padding:3px 9px;
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);white-space:nowrap}
.fbs-meter{display:inline-flex;gap:3px;align-items:flex-end;padding:4px 8px!important}
.fbs-meter i{display:block;width:6px;border-radius:2px;background:rgba(245,233,220,.18)}
.fbs-meter i:nth-child(1){height:5px}.fbs-meter i:nth-child(2){height:7px}.fbs-meter i:nth-child(3){height:9px}.fbs-meter i:nth-child(4){height:11px}.fbs-meter i:nth-child(5){height:13px}
.fbs-meter i.on:nth-child(1){background:#F2A623}.fbs-meter i.on:nth-child(2){background:#F2A623}.fbs-meter i.on:nth-child(3){background:#F06C0B}
.fbs-meter i.on:nth-child(4){background:#EC490F}.fbs-meter i.on:nth-child(5){background:#E41818;box-shadow:0 0 6px #E41818}
.fbs-next{color:#F2A623}
.fbs-short{display:none}
@media (max-width:420px){.fbs-long{display:none}.fbs-short{display:inline}.fbs-leg{gap:5px}.fbs-leg>*{padding:3px 7px}}   /* phones: the short rule */