/* Cade battle split: frontend-v1's VolumeRaceBar (MemeMadnessBattlePageShell.tsx + .module.css),
   recoloured HIGHER (--yes #91BB4F) vs LOWER (--no #EA2A46), with the battle page's effects
   (ClashBurst, sparks, the hero's volume chip and VS burst, motion.shakeNow / valuePunch / beat).
   The whale burst is packages/shapes `starburst`, the lead flash is `banner`, the YOU chip is the
   StatusBadge notched face. Every class is bs-*, scoped under .bs. Sizes come from the host:
   --bs-h (track), --bs-fs (readout), --bs-ws (side word), --bs-vs (VS burst), --bs-wh (whale). */
.bs{--bs-h:60px;--bs-fs:30px;--bs-ws:17px;--bs-vs:66px;--bs-wh:176px;
  --bs-shout:var(--shout,"Barlow Condensed",Impact,sans-serif);--bs-data:var(--data,"JetBrains Mono",ui-monospace,monospace);
  --bs-starburst:polygon(76.96% 15.82%,68.58% .65%,57.99% 18.01%,48.92% 0%,39.78% 21.01%,33.76% 5.83%,25.42% 21.43%,4.99% 17.72%,12.17% 38.54%,0% 51.54%,10.43% 61.88%,4.58% 76.64%,22.61% 80.52%,31% 100%,41.48% 83.43%,47.48% 99.65%,55.78% 81.8%,65.96% 97.17%,73.75% 78.49%,92.45% 84.33%,85.47% 67.52%,99.18% 65.05%,91.2% 53.02%,100% 37.99%,84.74% 30.57%,91.29% 13.45%);
  --bs-banner:polygon(1.55% 93.68%,1.36% 72.46%,0% 53.14%,3.07% 37.63%,0% 20.72%,1.55% 5.33%,15.48% 5.33%,47.79% 5.33%,46.7% 0%,67.48% 5.33%,98.69% 5.33%,97.96% 26.4%,100% 55.09%,97.89% 70.05%,98.69% 93.68%,53.73% 93.68%,55.01% 100%);
  --bs-yes:#91BB4F;--bs-yes-hi:#8BD943;--bs-yes-dk:#3C8214;--bs-no:#EA2A46;--bs-no-dk:#B21229;--bs-no-hi:#FF3855;
  position:relative;display:block;min-width:0;height:var(--bs-h)}
.bs *,.bs *::before,.bs *::after{box-sizing:border-box}
.bs-g{position:relative;height:var(--bs-h)}
/* drawBar shadow silhouette, the full outline at +8/+8 */
.bs-sh{position:absolute;top:8px;left:8px;right:-8px;height:var(--bs-h);background:#0B0B0B;
  clip-path:polygon(8px 2%,calc(100% - 16px) 0%,calc(100% - 4px) 28%,calc(100% - 12px) 50%,calc(100% - 2px) 76%,calc(100% - 14px) 100%,12px 100%,2px 66%,26px 48%,2px 30%)}
.bs-tr{position:relative;height:100%}
.bs-l,.bs-r{position:absolute;inset:0;filter:drop-shadow(2px 0 0 #000) drop-shadow(-2px 0 0 #000) drop-shadow(0 2px 0 #000) drop-shadow(0 -2px 0 #000)}
/* barL: the gradient over the halftone dots near the left edge (theirs #D95F00 on orange) */
.bs-l{z-index:1}
.bs-l,.bs[data-flood=higher] .bs-r{background-image:linear-gradient(90deg,rgb(145 187 79/0) 0%,rgb(145 187 79/1) 16%,var(--bs-yes) 60%),radial-gradient(circle 4px at 4px 4px,var(--bs-yes-dk) 98%,transparent),radial-gradient(circle 4px at 14px 22px,var(--bs-yes-dk) 98%,transparent),linear-gradient(100deg,var(--bs-yes-hi) 0%,var(--bs-yes) 100%);
  background-size:100% 100%,20px 36px,20px 36px,100% 100%;background-repeat:no-repeat,repeat,repeat,no-repeat}
/* barR: the gradient falling off into the 105deg stripes at the far edge (theirs violet) */
.bs-r,.bs[data-flood=lower] .bs-l{background-image:linear-gradient(90deg,var(--bs-no) 46%,rgb(234 42 70/.85) 80%,rgb(234 42 70/0) 100%),repeating-linear-gradient(105deg,transparent 0 22px,rgb(110 8 22/.55) 22px 36px),linear-gradient(100deg,var(--bs-no) 0%,var(--bs-no-dk) 100%);
  background-size:auto;background-repeat:no-repeat}
.bs-fl{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
.bs-l.gain .bs-fl,.bs-r.gain .bs-fl{animation:bs-flash .42s ease-out}
.bs-l.gain-big .bs-fl,.bs-r.gain-big .bs-fl{animation:bs-flash-big .8s ease-out}
/* controlPct: mono 800, tabular; ink on the left, white with a 2px black stroke on the right */
.bs-p{position:absolute;top:50%;z-index:2;display:flex;align-items:baseline;gap:.45em;transform:translateY(-50%);white-space:nowrap;pointer-events:none;line-height:1}
.bs-p.l{left:34px;color:#0B0B0B}.bs-p.r{right:24px;color:#fff}
.bs-p.r .bs-n,.bs-p.r .bs-w{-webkit-text-stroke:2px #000;paint-order:stroke fill}
.bs-n{font-family:var(--bs-data);font-weight:800;font-size:var(--bs-fs);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.bs-w{font-family:var(--bs-shout);font-style:italic;font-weight:900;font-size:var(--bs-ws);letter-spacing:.04em;text-transform:uppercase}
.bs-p.punch .bs-n{display:inline-block;animation:bs-punch .18s cubic-bezier(.34,1.56,.64,1)}
.bs-p.noword .bs-w{display:none}
.bs-p.out{color:#fff}.bs-p.out .bs-n{-webkit-text-stroke:2px #000;paint-order:stroke fill}
.bs[data-flood=higher] .bs-p.r,.bs[data-flood=lower] .bs-p.l{opacity:0}
.bs[data-flood] .bs-w{font-size:calc(var(--bs-ws) * 1.5)}
/* the seam rider: the hero's VS burst */
.bs-seam{position:absolute;top:50%;z-index:3;width:0;height:0;pointer-events:none}
.bs-vs{position:absolute;left:0;top:0;width:var(--bs-vs);height:var(--bs-vs);transform:translate(-50%,-50%)}
.bs-vs svg{display:block;width:100%;height:100%;overflow:visible}
.bs-vs text{font-family:var(--bs-shout);font-style:italic;font-weight:900;font-size:78px;fill:#fff;stroke:#000;stroke-width:12px;paint-order:stroke fill;stroke-linejoin:round}
.bs.final .bs-vs text{fill:var(--bs-no-hi);font-family:var(--bs-data);font-style:normal;font-weight:800;font-size:84px}
.bs-vs.beat{animation:bs-vs-beat .62s cubic-bezier(.34,1.56,.64,1)}
.bs[data-flood] .bs-seam{opacity:0;transition:opacity .2s}
/* fx: clipped to the bar's width so nothing ever widens the page */
.bs-fx{position:absolute;left:-6px;right:-6px;top:-90px;bottom:-60px;z-index:4;overflow:hidden;pointer-events:none}
.bs-clash{position:absolute;top:calc(90px + var(--bs-h) / 2);width:0;height:0}
.bs-cb{position:absolute;left:0;top:0;transform:translate(-50%,-50%) scale(.5);animation:bs-burst 280ms linear forwards}
.bs-spark{position:absolute;display:block;animation:bs-spark 500ms cubic-bezier(.16,1,.3,1) forwards}
.bs-spark svg{display:block;transform:translate(-50%,-50%)}
.bs-spark i{display:block;width:4px;transform:translate(-50%,-50%)}
/* the hero's volume chip: +$N, pops off the gaining side and rises */
.bs-chip{position:absolute;top:calc(90px - 12px);white-space:nowrap;font-family:var(--bs-data);font-weight:700;font-size:clamp(15px,1.5vw,20px);-webkit-text-stroke:2px #000;paint-order:stroke fill;transform:translate(-50%,-50%);animation:bs-chip 1100ms linear forwards}
.bs-chip[data-side=higher]{color:var(--bs-yes-hi)}.bs-chip[data-side=lower]{color:var(--bs-no-hi)}
.bs-chip.big{font-size:clamp(20px,2vw,28px);font-weight:800;color:#FAF424!important}
/* YOU: the StatusBadge notched chip, pinned on the viewer's side */
.bs-you{position:absolute;z-index:5;top:-22px;width:78px;height:30px;display:flex;align-items:center;justify-content:center;padding:0 8px 4px 10px;pointer-events:none}
.bs-you[data-side=higher]{left:14px}.bs-you[data-side=lower]{right:6px}
.bs-you svg{position:absolute;inset:0;width:100%;height:100%}
.bs-you b{position:relative;font-family:var(--bs-shout);font-style:italic;font-weight:900;font-size:17px;line-height:1;letter-spacing:.04em;text-transform:uppercase;color:#0B0B0B}
.bs-you.in{animation:bs-pop .45s cubic-bezier(.34,1.56,.64,1)}
.bs-you.cheer{animation:bs-cheer .6s cubic-bezier(.34,1.56,.64,1)}
/* lead change: the packages/shapes banner */
.bs-lead{position:absolute;z-index:6;left:50%;top:50%;transform:translate(-50%,-50%);filter:drop-shadow(2px 0 0 #000) drop-shadow(-2px 0 0 #000) drop-shadow(0 2px 0 #000) drop-shadow(0 -2px 0 #000) drop-shadow(5px 5px 0 #000);pointer-events:none}
.bs-lead-f{display:flex;flex-direction:column;align-items:center;gap:3px;padding:12px 30px 13px;background:#FAF424;clip-path:var(--bs-banner);color:#0B0B0B;white-space:nowrap}
.bs-lead small{font-family:var(--bs-data);font-weight:800;font-size:10px;letter-spacing:.18em;text-transform:uppercase;line-height:1}
.bs-lead b{font-family:var(--bs-shout);font-style:italic;font-weight:900;font-size:clamp(18px,2vw,26px);line-height:.95;letter-spacing:.02em;text-transform:uppercase}
.bs-lead[data-side=higher] small{color:var(--bs-yes-dk)}.bs-lead[data-side=lower] small{color:var(--bs-no-dk)}
.bs-lead.on{animation:bs-slam 1.5s cubic-bezier(.2,1.2,.4,1) forwards}
/* whale: the packages/shapes starburst slams in on the gaining side */
.bs-whale{position:absolute;z-index:6;top:50%;width:var(--bs-wh);aspect-ratio:460/263;transform:translate(-50%,-50%);pointer-events:none}
.bs-wh-sh,.bs-wh-f{position:absolute;inset:0;clip-path:var(--bs-starburst)}
.bs-wh-sh{background:#000;transform:translate(6px,6px)}
.bs-wh-f{background:#0B0B0B}
.bs-wh-f::after{content:"";position:absolute;inset:3px 4px;background:#FAF424;clip-path:var(--bs-starburst)}
.bs-wh-t{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:#0B0B0B;text-align:center;padding-top:4%}
.bs-wh-t b{font-family:var(--bs-shout);font-style:italic;font-weight:900;font-size:calc(var(--bs-wh) * .19);line-height:.85;letter-spacing:.02em;text-transform:uppercase}
.bs-wh-t small{font-family:var(--bs-data);font-weight:800;font-size:calc(var(--bs-wh) * .068);letter-spacing:.04em;line-height:1;text-transform:uppercase;white-space:nowrap}
.bs-whale.on{animation:bs-whale 1.5s cubic-bezier(.2,1.3,.4,1) forwards}
/* motion.shakeNow, the bar only; motion.beat for the last seconds */
.bs-g.shake{animation:bs-shake .28s steps(2) 2}
.bs-g.beat{animation:bs-beat .62s ease-out}
/* tone:'battle' (opt-in): the VolumeRaceBar's orange and violet, the orange half SOLID #FF8A00 with the #D95F00
   halftone kept to its leading edge (owner call 2026-10-01: no pale ramp); violet
   105deg stripes right (MemeMadnessBattlePageShell barL / barR, the same values as /ds .race) */
.bs[data-tone=battle]{--bs-yes:#FF8A00;--bs-yes-hi:#FFC039;--bs-yes-dk:#D95F00;--bs-no:#A66BFF;--bs-no-dk:#6330D3;--bs-no-hi:#CBA6FF}
.bs[data-tone=battle] .bs-l,.bs[data-tone=battle][data-flood=higher] .bs-r{background-image:linear-gradient(90deg,rgb(255 138 0/0) 0%,rgb(255 138 0/0) 10%,#ff8a00 26%),radial-gradient(circle 4px at 4px 4px,#d95f00 98%,transparent),radial-gradient(circle 4px at 14px 22px,#d95f00 98%,transparent),linear-gradient(#ff8a00,#ff8a00);
  background-size:100% 100%,20px 36px,20px 36px,100% 100%;background-repeat:no-repeat,repeat,repeat,no-repeat}
.bs[data-tone=battle] .bs-r,.bs[data-tone=battle][data-flood=lower] .bs-l{background-image:linear-gradient(90deg,rgb(166 107 255/1) 46%,rgb(119 66 224/1) 80%,rgb(99 48 211/0) 100%),repeating-linear-gradient(105deg,transparent 0 22px,rgb(74 31 158/.6) 22px 36px),linear-gradient(100deg,#a66bff 0%,#6330D3 100%);
  background-size:auto;background-repeat:no-repeat}
.bs[hidden],.bs [hidden]{display:none!important}
@keyframes bs-flash{0%{opacity:.55}100%{opacity:0}}
@keyframes bs-flash-big{0%{opacity:.6}25%{opacity:.12}45%{opacity:.4}100%{opacity:0}}
@keyframes bs-punch{50%{scale:1.16}}
@keyframes bs-burst{from{transform:translate(-50%,-50%) scale(.5);opacity:1}to{transform:translate(-50%,-50%) scale(1.6);opacity:0}}
@keyframes bs-spark{from{translate:0 0;opacity:1}to{translate:var(--dx,0px) var(--dy,0px);opacity:0}}
@keyframes bs-chip{0%{translate:0 0;scale:.5;opacity:0}10%{translate:0 -4px;scale:1.25;opacity:1}22%{translate:0 -12px;scale:1}72%{translate:0 -38px;opacity:1}100%{translate:0 -48px;opacity:0}}
@keyframes bs-pop{0%{transform:scale(.3);opacity:0}100%{transform:none;opacity:1}}
@keyframes bs-cheer{0%,100%{transform:none}30%{transform:scale(1.22) translateY(-3px)}60%{transform:scale(.96)}}
@keyframes bs-slam{0%{opacity:0;transform:translate(-50%,-50%) scale(2.2)}12%{opacity:1;transform:translate(-50%,-50%) scale(.94)}20%{transform:translate(-50%,-50%) scale(1.04)}26%,86%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(.9)}}
@keyframes bs-whale{0%{opacity:0;transform:translate(-50%,-50%) scale(2.6)}12%{opacity:1;transform:translate(-50%,-50%) scale(.9)}20%{transform:translate(-50%,-50%) scale(1.07)}28%,84%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(.85)}}
@keyframes bs-shake{25%{translate:4px -1px}75%{translate:-4px 1px}}
@keyframes bs-beat{0%{scale:1}18%{scale:1.025}100%{scale:1}}
@keyframes bs-vs-beat{0%{transform:translate(-50%,-50%) scale(1)}25%{transform:translate(-50%,-50%) scale(1.28)}100%{transform:translate(-50%,-50%) scale(1)}}
@media (prefers-reduced-motion:reduce){
  .bs *{animation:none!important;transition:none!important}
  .bs-fx{display:none}
}
.bs.still *{animation:none!important;transition:none!important}.bs.still .bs-fx{display:none}