/* ---------- Living banner effects (ui/card.js bannerFx) ----------
   Every piece moves only by transform and opacity (no blur filters, no animated backgrounds), so dozens of them stay
   smooth. Soft edges come from gradients instead. */
.bfx { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.bp { position: absolute; display: block; font-style: normal; }
.bp::before { content: ""; position: absolute; display: block; }

/* Columns fall (or rise) the banner's height; rows cross its width. */
.bp-col { left: var(--x); top: 0; height: 100%; width: 0; animation: bp-fall var(--t) linear var(--d) infinite; }
.bp-row { left: 0; top: var(--y); width: 100%; height: 0; animation: bp-cross var(--t) linear var(--d) infinite; }
@keyframes bp-fall { 0% { transform: translate(0, -14%); } 100% { transform: translate(var(--sx), 108%); } }
@keyframes bp-rise { 0% { transform: translate(0, 108%); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(var(--sx), -14%); opacity: 0; } }
@keyframes bp-cross { from { transform: translateX(-12%); } to { transform: translateX(112%); } }
@keyframes bp-sway { from { transform: translateX(-5px) rotate(-12deg); } to { transform: translateX(5px) rotate(12deg); } }
@keyframes bp-spin { to { transform: rotate(360deg); } }
@keyframes bp-tumble { 0% { transform: rotate3d(1, .6, .3, 0deg) translateX(-4px); } 50% { transform: rotate3d(1, .6, .3, 180deg) translateX(4px); } 100% { transform: rotate3d(1, .6, .3, 360deg) translateX(-4px); } }
@keyframes bp-glow { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }

/* ---------- Light: a bloom round the source, and slow rays fanning out of it ---------- */
.bl-bloom { inset: 0; mix-blend-mode: screen; background: radial-gradient(circle var(--r) at var(--x) var(--y), var(--c), transparent 72%);
  animation: bl-breathe 6s ease-in-out infinite alternate; }
@keyframes bl-breathe { from { opacity: .45; } to { opacity: .8; } }
.bl-rays { inset: 0; mix-blend-mode: screen; transform-origin: var(--x) var(--y);
  background: repeating-conic-gradient(from 0deg at var(--x) var(--y), rgba(255, 255, 255, 0) 0deg 5deg, var(--c) 11deg, rgba(255, 255, 255, 0) 17deg 26deg);
  -webkit-mask-image: radial-gradient(circle 260px at var(--x) var(--y), #000, rgba(0, 0, 0, .35) 45%, transparent 80%);
  mask-image: radial-gradient(circle 260px at var(--x) var(--y), #000, rgba(0, 0, 0, .35) 45%, transparent 80%);
  animation: bl-rays var(--t) ease-in-out var(--d) infinite alternate; }
.bl-rays.top { -webkit-mask-image: linear-gradient(180deg, #000, rgba(0, 0, 0, .4) 60%, transparent); mask-image: linear-gradient(180deg, #000, rgba(0, 0, 0, .4) 60%, transparent); }
@keyframes bl-rays { from { transform: rotate(-3deg); opacity: .16; } to { transform: rotate(3deg); opacity: .38; } }

/* The sun: a white-hot disc in its corona, slow-turning rays, and lens flares across the banner */
.bp-sun { left: var(--x); top: var(--y); width: 58px; height: 58px; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(circle, #fff 0 22%, var(--c) 34%, rgba(255, 220, 140, .35) 48%, transparent 70%); animation: bp-glow 4s ease-in-out infinite; }
.bp-sun::before { inset: -110%; border-radius: 50%; mix-blend-mode: screen;
  background: repeating-conic-gradient(rgba(255, 255, 255, 0) 0deg 6deg, rgba(255, 248, 220, .16) 12deg, rgba(255, 255, 255, 0) 18deg 30deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 18%, transparent); mask-image: radial-gradient(closest-side, #000 18%, transparent);
  animation: bp-spin 50s linear infinite; }
.bp-flare { left: var(--x); top: var(--y); width: var(--w); height: var(--w); translate: -50% -50%; border-radius: 50%; mix-blend-mode: screen; opacity: .3;
  background: radial-gradient(circle, var(--c) 0 35%, transparent 70%); animation: bp-glow 4s ease-in-out infinite; }
.bp-flare.ring { background: radial-gradient(circle, transparent 50%, var(--c) 62%, transparent 74%); opacity: .25; }

/* A light sweeping across, like a shine on metal */
.bp-sheen { top: 0; bottom: 0; left: 0; width: 40%; mix-blend-mode: screen;
  background: linear-gradient(100deg, transparent 15%, rgba(255, 255, 255, .12) 40%, rgba(255, 255, 255, .42) 50%, rgba(255, 255, 255, .12) 60%, transparent 85%);
  animation: bp-sheen var(--t) ease-in-out var(--d) infinite; }
@keyframes bp-sheen { 0% { transform: translateX(-120%) skewX(-14deg); } 50%, 100% { transform: translateX(300%) skewX(-14deg); } }

/* ---------- Fire: a looping film of real flame (ui/card.js fireSheet: --n frames stacked, played with steps()) ----------
   Two films: a taller, dimmer one behind (mirrored, out of step) and the main one, over a soft glow at the root. */
.bp-fire { left: 0; right: 0; bottom: 0; height: var(--h); overflow: hidden; isolation: isolate; }
.bp-fire::before { left: -10%; right: -10%; bottom: 0; height: 60%;
  background: radial-gradient(ellipse 60% 100% at 50% 100%, var(--c1), transparent 70%); opacity: .4; animation: bp-glow 1.6s ease-in-out infinite; }
.bp-fire .fw { position: absolute; left: 0; right: 0; bottom: -2px; height: calc(100% + 2px); overflow: hidden; mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(transparent, #000 18%); mask-image: linear-gradient(transparent, #000 18%); } /* (fades in at the top: the frame above can bleed in by a pixel) */
.bp-fire .fw.back { height: 135%; opacity: .55; transform: scaleX(-1); }
.bp-fire .fl { position: absolute; left: 0; right: 0; top: 0; height: calc(100% * var(--n)); will-change: transform;
  background: var(--f) var(--ox) 0 / auto 100% repeat-x; animation: bp-film var(--t) steps(var(--n)) var(--d) infinite; }
@keyframes bp-film { to { transform: translateY(-100%); } }
.bp-heat { left: 0; right: 0; bottom: 0; height: 60%; background: radial-gradient(ellipse at 50% 120%, rgba(255, 220, 80, .6), rgba(255, 90, 20, .3) 45%, transparent 70%);
  animation: bp-glow var(--t) ease-in-out var(--d) infinite; }

/* Embers: sparks glowing white-hot to orange, flickering as they drift up */
.bp-embers { animation-name: bp-rise; animation-timing-function: ease-out; }
.bp-embers::before { width: calc(3px * var(--s)); height: calc(7px * var(--s)); border-radius: 50%;
  background: radial-gradient(ellipse at 50% 35%, #fffbe0 0 25%, #ffb03a 45%, rgba(255, 80, 0, 0) 72%);
  box-shadow: 0 0 calc(6px * var(--s)) calc(1px * var(--s)) rgba(255, 120, 20, .55); animation: bp-ember 1.4s ease-in-out infinite alternate; }
@keyframes bp-ember { 0% { transform: translateX(-4px) rotate(-14deg); opacity: 1; } 50% { opacity: .5; } 100% { transform: translateX(5px) rotate(14deg); opacity: .95; } }

/* Ghost fire: teardrops of cold flame, flickering */
.bp-wisps { animation-name: bp-rise; }
.bp-wisps::before { width: calc(13px * var(--s)); height: calc(20px * var(--s)); border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  background: radial-gradient(circle at 50% 70%, #fff 0 9%, #8affe0 26%, rgba(70, 150, 255, .35) 52%, transparent 72%); animation: bp-flicker .5s ease-in-out infinite alternate; }
@keyframes bp-flicker { from { transform: scale(1, 1); } to { transform: scale(.88, 1.12); } }

/* ---------- Sky ---------- */
.bp-snow::before { width: calc(5px * var(--s)); height: calc(5px * var(--s)); border-radius: 50%; background: radial-gradient(circle, #fff 0 38%, rgba(255, 255, 255, .5) 58%, transparent 72%);
  animation: bp-sway 3s ease-in-out infinite alternate; }
.bp-snow.near::before { width: calc(11px * var(--s)); height: calc(11px * var(--s)); opacity: .8; }
.bp-rain { animation-name: bp-rain; }
.bp-rain::before { width: 1.2px; height: calc(18px * var(--s)); background: linear-gradient(transparent, rgba(210, 230, 255, .85)); transform: rotate(14deg); }
@keyframes bp-rain { 0% { transform: translate(0, -20%); } 100% { transform: translate(-30px, 110%); } }
.bp-splash { left: var(--x); bottom: 4%; width: 10px; height: 3px; margin-left: -5px; border-radius: 50%; border: 1px solid rgba(210, 230, 255, .75);
  animation: bp-splash var(--t) ease-out var(--d) infinite; }
@keyframes bp-splash { 0% { transform: scale(.1); opacity: 1; } 35% { transform: scale(1.5); opacity: 0; } 100% { opacity: 0; } }
.bp-mist { left: -20%; width: 140%; top: var(--y); height: 60%; translate: 0 -50%;
  background: radial-gradient(ellipse 28% 50% at 22% 50%, rgba(225, 232, 255, .3), transparent 70%), radial-gradient(ellipse 32% 45% at 66% 55%, rgba(225, 232, 255, .26), transparent 70%);
  animation: bp-mist var(--t) ease-in-out var(--d) infinite alternate; }
.bp-mist.fog { height: 80%; }
@keyframes bp-mist { from { transform: translateX(-7%); } to { transform: translateX(7%); } }
/* Clouds: puffs lit from above, shaded below */
.bp-cloud::before { width: calc(120px * var(--s)); height: calc(40px * var(--s));
  background: radial-gradient(closest-side, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0)) 16% 70% / 40% 78% no-repeat,
    radial-gradient(closest-side, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0)) 44% 30% / 46% 100% no-repeat,
    radial-gradient(closest-side, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0)) 76% 62% / 42% 82% no-repeat,
    radial-gradient(closest-side, rgba(150, 160, 200, .45), rgba(150, 160, 200, 0)) 50% 100% / 92% 46% no-repeat; }
.bp-cloud.dark::before { background: radial-gradient(closest-side, rgba(110, 116, 145, .95), rgba(110, 116, 145, 0)) 16% 70% / 40% 78% no-repeat,
    radial-gradient(closest-side, rgba(125, 130, 160, .95), rgba(125, 130, 160, 0)) 44% 30% / 46% 100% no-repeat,
    radial-gradient(closest-side, rgba(100, 105, 135, .9), rgba(100, 105, 135, 0)) 76% 62% / 42% 82% no-repeat,
    radial-gradient(closest-side, rgba(20, 22, 36, .7), rgba(20, 22, 36, 0)) 50% 100% / 92% 46% no-repeat; }
.bp-wind::before { width: calc(60px * var(--s)); height: 1.5px; border-radius: 2px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .8), transparent); }
.bp-wind { animation-timing-function: ease-in; }
/* Lightning: a forked bolt and the sky lighting up round it */
.bp-flash { inset: 0; opacity: 0; background: radial-gradient(ellipse 45% 110% at var(--lx) 0%, rgba(225, 232, 255, .5), rgba(170, 185, 255, .12) 55%, transparent 80%);
  animation: bp-flash var(--t) steps(1) var(--d) infinite; }
.bp-flash svg { position: absolute; top: 0; height: 100%; width: 60px; overflow: visible; }
@keyframes bp-flash { 0% { opacity: 1; } 3% { opacity: .15; } 6% { opacity: .95; } 11%, 100% { opacity: 0; } }
/* Aurora: curtains of light, streaked top to bottom */
.bp-aurora { left: -10%; width: 120%; top: var(--y); height: 62%; mix-blend-mode: screen; border-radius: 50% 50% 40% 40% / 30% 30% 70% 70%;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0) 0 5px, rgba(255, 255, 255, .25) 6px, rgba(255, 255, 255, 0) 9px),
    linear-gradient(90deg, transparent, rgba(60, 255, 180, .6) 22%, rgba(150, 90, 255, .55) 52%, rgba(60, 200, 255, .55) 78%, transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 40%, rgba(0, 0, 0, .8) 62%, transparent); mask-image: linear-gradient(180deg, transparent, #000 40%, rgba(0, 0, 0, .8) 62%, transparent);
  animation: bp-aurora var(--t) ease-in-out var(--d) infinite alternate; }
@keyframes bp-aurora { from { transform: translateX(-7%) skewX(-14deg) scaleY(.8); opacity: .65; } to { transform: translateX(7%) skewX(14deg) scaleY(1.15); opacity: 1; } }

/* Stars: points with a halo, the bigger ones with a cross flare */
.bp-twinkle { left: var(--x); top: var(--y); animation: bp-twinkle var(--t) ease-in-out var(--d) infinite; }
.bp-twinkle::before { width: calc(2.6px * var(--s)); height: calc(2.6px * var(--s)); border-radius: 50%; background: #fff; box-shadow: 0 0 calc(4px * var(--s)) calc(1px * var(--s)) rgba(200, 220, 255, .75); }
.bp-twinkle.x::after { content: ""; position: absolute; width: calc(15px * var(--s)); height: calc(15px * var(--s)); left: calc(-6.2px * var(--s)); top: calc(-6.2px * var(--s));
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .85), transparent) center / 100% 1px no-repeat,
    linear-gradient(0deg, transparent, rgba(255, 255, 255, .85), transparent) center / 1px 100% no-repeat; }
@keyframes bp-twinkle { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.6); opacity: .4; } }
/* Glints: four-pointed stars that flash on and turn */
.bp-sparkle { left: var(--x); top: var(--y); animation: bp-pop var(--t) ease-in-out var(--d) infinite; }
.bp-sparkle::before { width: calc(20px * var(--s)); height: calc(20px * var(--s)); left: calc(-10px * var(--s)); top: calc(-10px * var(--s));
  background: radial-gradient(circle, #fff 0 7%, transparent 9%), radial-gradient(circle, var(--c), transparent 30%),
    linear-gradient(90deg, transparent, var(--c) 50%, transparent) center / 100% 1.6px no-repeat, linear-gradient(0deg, transparent, var(--c) 50%, transparent) center / 1.6px 100% no-repeat; }
.bp-sparkle.glint::before { mix-blend-mode: screen; }
@keyframes bp-pop { 0%, 100% { transform: scale(0) rotate(0); opacity: 0; } 50% { transform: scale(1) rotate(45deg); opacity: 1; } }
/* Shooting stars and comets: a glowing head on a long fading tail */
.bp-shoot { left: var(--x); top: var(--y); width: 96px; height: 2px; opacity: 0; border-radius: 2px; transform: rotate(18deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .15) 35%, var(--c)); animation: bp-shoot var(--t) ease-in var(--d) infinite; }
.bp-shoot::before { right: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: radial-gradient(circle, #fff 0 25%, var(--c) 45%, transparent 72%); }
.bp-shoot.comet { width: 150px; height: 3px; }
.bp-shoot.comet::before { right: -7px; top: -5.5px; width: 14px; height: 14px; }
@keyframes bp-shoot { 0%, 88% { opacity: 0; translate: 0 0; } 91% { opacity: 1; } 100% { opacity: 0; translate: 160px 52px; } }
/* Star dust: tiny coloured motes drifting across space */
.bp-stardust::before { width: calc(2.4px * var(--s)); height: calc(2.4px * var(--s)); border-radius: 50%; background: var(--c); box-shadow: 0 0 calc(5px * var(--s)) var(--c);
  animation: bp-bob 3s ease-in-out infinite alternate; }
@keyframes bp-bob { from { transform: translateY(-4px); } to { transform: translateY(4px); } }

/* ---------- Space ---------- */
.cbanner.cb-space { background: #06050f; }
.cb-neb { position: absolute; inset: -14%; background: center / cover no-repeat; animation: cb-neb 70s ease-in-out infinite alternate; }
@keyframes cb-neb { from { transform: translate(-5%, -3%) scale(1); } to { transform: translate(5%, 3%) scale(1.08); } }
/* A spiral galaxy, tilted, turning slowly */
.bp-galaxy { left: var(--x); top: var(--y); width: var(--w); aspect-ratio: 1; translate: -50% -50%; rotate: -18deg; scale: 1 .42; mix-blend-mode: screen; }
.bp-galaxy::before { inset: 0; background: var(--g) center / contain no-repeat; animation: bp-spin 80s linear infinite; }
/* A planet: lit from the top left, with its atmosphere glowing and a ring */
.bp-planet { left: var(--x); top: var(--y); width: var(--w); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  background: repeating-linear-gradient(168deg, rgba(255, 255, 255, .07) 0 3px, transparent 3px 8px), radial-gradient(circle at 32% 30%, var(--p1), var(--p2) 45%, var(--p3) 78%, #05040a);
  box-shadow: 0 0 18px 3px var(--pa), inset -10px -8px 16px rgba(0, 0, 0, .55), inset 3px 3px 6px rgba(255, 255, 255, .25); animation: bp-float 9s ease-in-out infinite alternate; }
.bp-planet::before { left: -48%; right: -48%; top: 36%; height: 30%; border-radius: 50%; transform: rotate(-16deg);
  border: 2.5px solid; border-color: rgba(255, 240, 220, .2) rgba(255, 240, 220, .55) rgba(255, 240, 220, .75) rgba(255, 240, 220, .55);
  box-shadow: 0 0 6px rgba(255, 240, 220, .35); }
@keyframes bp-float { from { transform: translateY(-3px); } to { transform: translateY(3px); } }
/* Bodies circling a point on a tilted orbit */
.bp-orbit { left: var(--x); top: var(--y); width: var(--w); aspect-ratio: 1; translate: -50% -50%; rotate: -14deg; scale: 1 .32; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .22); box-shadow: 0 0 10px var(--c), inset 0 0 10px var(--c); }
.bp-orbit b { position: absolute; inset: 0; animation: bp-spin var(--t) linear var(--d, 0s) infinite; }
.bp-orbit b::before { content: ""; position: absolute; left: 50%; top: -6px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%;
  background: radial-gradient(circle, #fff 0 22%, var(--c) 42%, transparent 70%); }
.bp-orbit b.far::before { scale: .6; opacity: .7; }
/* A pulsar: a blazing star throwing out rings */
.bp-pulsar { left: var(--x); top: var(--y); width: 0; height: 0; }
.bp-pulsar::before { width: 46px; height: 46px; left: -23px; top: -23px; mix-blend-mode: screen;
  background: radial-gradient(circle, #fff 0 9%, var(--c) 18%, transparent 52%), linear-gradient(90deg, transparent, var(--c) 50%, transparent) center / 100% 2px no-repeat,
    linear-gradient(0deg, transparent, var(--c) 50%, transparent) center / 2px 100% no-repeat; animation: bp-glow 2.2s ease-in-out infinite; }
.bp-pulsar b { position: absolute; width: 40px; height: 40px; left: -20px; top: -20px; border-radius: 50%; border: 2px solid var(--c); opacity: 0;
  animation: bp-ring var(--t) ease-out var(--d) infinite; }
@keyframes bp-ring { 0% { transform: scale(.2); opacity: .9; } 100% { transform: scale(4.5); opacity: 0; } }

/* ---------- Falling and floating things ---------- */
.bp-petals::before { width: calc(9px * var(--s)); height: calc(6px * var(--s)); border-radius: 80% 0 80% 0; background: linear-gradient(135deg, #fff5f9, #ffc2df 45%, #f47fb4);
  box-shadow: inset -1px -1px 2px rgba(180, 40, 100, .35); animation: bp-tumble 2.6s linear infinite; }
.bp-leaves::before { width: calc(11px * var(--s)); height: calc(7px * var(--s)); border-radius: 0 90% 0 90%;
  background: linear-gradient(135deg, transparent 47%, rgba(0, 0, 0, .25) 50%, transparent 53%), linear-gradient(135deg, var(--h), var(--h2)); animation: bp-tumble 3.2s linear infinite; }
.bp-feathers::before { width: calc(5px * var(--s)); height: calc(15px * var(--s)); border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%;
  background: linear-gradient(90deg, #e3eefc, #fff 45%, #cdd9ea 50%, #fff 55%, #e3eefc); animation: bp-sway 2.4s ease-in-out infinite alternate; }
.bp-coins::before { width: calc(12px * var(--s)); height: calc(12px * var(--s)); border-radius: 50%; border: 1px solid #7a5205;
  background: radial-gradient(circle at 35% 30%, #fffbe0, #ffd84a 40%, #b07800); box-shadow: 0 0 6px rgba(255, 216, 74, .5); animation: bp-coin .9s linear infinite; }
@keyframes bp-coin { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.08); } }
.bp-confetti::before { width: calc(5px * var(--s)); height: calc(9px * var(--s)); background: var(--c); animation: bp-tumble .9s linear infinite; }
.bp-bubbles, .bp-hearts, .bp-dust { animation-name: bp-rise; }
.bp-bubbles::before { width: calc(11px * var(--s)); height: calc(11px * var(--s)); border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, rgba(255, 255, 255, .95) 0 9%, transparent 20%),
    radial-gradient(circle, rgba(160, 220, 255, 0) 56%, rgba(200, 240, 255, .5) 70%, rgba(255, 255, 255, .85) 76%, transparent 80%);
  animation: bp-wobble 1.2s ease-in-out infinite alternate; }
@keyframes bp-wobble { from { transform: translateX(-3px) scale(1, .93); } to { transform: translateX(3px) scale(.93, 1); } }
.bp-hearts::before { width: calc(14px * var(--s)); height: calc(12.6px * var(--s)); animation: bp-sway 2.2s ease-in-out infinite alternate;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 18'%3E%3Cdefs%3E%3CradialGradient id='g' cx='.35' cy='.3' r='.8'%3E%3Cstop offset='0' stop-color='%23fff'/%3E%3Cstop offset='.3' stop-color='%23ff9ccc'/%3E%3Cstop offset='1' stop-color='%23e0306f'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d='M10 17C4 13 0 9.5 0 5.4 0 2.4 2.3 0 5.2 0 7.2 0 9 1.1 10 2.8 11 1.1 12.8 0 14.8 0 17.7 0 20 2.4 20 5.4 20 9.5 16 13 10 17Z' fill='url(%23g)'/%3E%3C/svg%3E") center / contain no-repeat; }
.bp-dust::before { width: calc(3px * var(--s)); height: calc(3px * var(--s)); border-radius: 50%; background: rgba(255, 250, 230, .75); box-shadow: 0 0 4px rgba(255, 245, 210, .6); }
.bp-firefly { left: var(--x); top: var(--y); animation: bp-firefly var(--t) ease-in-out var(--d) infinite alternate; }
.bp-firefly::before { width: calc(4px * var(--s)); height: calc(4px * var(--s)); border-radius: 50%; background: #f6ffb0; box-shadow: 0 0 8px 3px rgba(220, 255, 120, .7); }
@keyframes bp-firefly { 0% { transform: translate(0, 0); opacity: .2; } 40% { opacity: 1; } 100% { transform: translate(24px, -14px); opacity: .3; } }
/* Butterflies (a monarch and a blue morpho) and bats, flapping as they cross */
.bp-butterflies::before { width: calc(18px * var(--s)); height: calc(14px * var(--s)); animation: bp-flutter .18s ease-in-out infinite alternate, bp-bob 1.1s ease-in-out infinite alternate;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 14'%3E%3Cpath d='M9 7C7 2 2-1 .6 2 0 5 3 7 8 7.5 3 8.5 1 11 2.5 13 5 14 8 11 9 8 10 11 13 14 15.5 13 17 11 15 8.5 10 7.5 15 7 18 5 17.4 2 16-1 11 2 9 7Z' fill='%23ff8a1a' stroke='%232a1408' stroke-width='.8'/%3E%3Ccircle cx='3' cy='3' r='.8' fill='%23fff'/%3E%3Ccircle cx='15' cy='3' r='.8' fill='%23fff'/%3E%3Cpath d='M9 4V11' stroke='%232a1408' stroke-width='1.2'/%3E%3C/svg%3E") center / contain no-repeat; }
.bp-butterflies.v1::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 14'%3E%3Cpath d='M9 7C7 2 2-1 .6 2 0 5 3 7 8 7.5 3 8.5 1 11 2.5 13 5 14 8 11 9 8 10 11 13 14 15.5 13 17 11 15 8.5 10 7.5 15 7 18 5 17.4 2 16-1 11 2 9 7Z' fill='%234ab8ff' stroke='%23102040' stroke-width='.8'/%3E%3Cpath d='M3 3.5L6 6M15 3.5L12 6' stroke='%23d8f2ff' stroke-width='.8'/%3E%3Cpath d='M9 4V11' stroke='%23102040' stroke-width='1.2'/%3E%3C/svg%3E"); }
@keyframes bp-flutter { from { transform: scaleX(1); } to { transform: scaleX(.3); } }
.bp-bats::before { width: calc(22px * var(--s)); height: calc(10px * var(--s)); background: linear-gradient(180deg, #2a1640, #0c0616);
  clip-path: polygon(50% 40%, 62% 10%, 75% 30%, 100% 0, 92% 60%, 70% 55%, 50% 100%, 30% 55%, 8% 60%, 0 0, 25% 30%, 38% 10%); animation: bp-batflap .22s ease-in-out infinite alternate; }
@keyframes bp-batflap { to { transform: scaleY(.4); } }

/* Leaderboard rows off screen: their banners hold still and draw nothing extra */
.lb-off :is(.bfx, .cb-mons2) { display: none; }
.lb-off :is(.cbanner, .cb-neb) { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) { .cb-neb { animation: none; } }