.chomper{--meter-progress:0}
.chomper[data-entry-active="true"] .character-rig{filter:drop-shadow(0 0 12px var(--stage-color,#ffd36b))}
.chomper[data-entry-active="true"] em{box-shadow:0 0 18px 4px var(--stage-color,#ffd36b),inset 0 1px 0 #fff!important}
.cabinet[data-video-ready="true"] .lower-screen>.status[data-chomper-entry="true"]{color:#fff2bd;-webkit-text-stroke:1px #270711;paint-order:stroke fill;text-shadow:0 2px 4px #000,0 0 6px #000}
/* Meter v3 (2026-09-25): one continuous glossy bar per Chomper. The math keeps
   12 stages (EVO01..EVO12 = 11 steps of --meter-progress); the bar shows them as
   a continuous fill. On the video cabinet the element is seated exactly on the
   painted well of its DOUBLE / BOOST / RESPIN plaque (measured on the 1916x1080
   base poster); the phone movie has no painted well, so a housing is drawn on
   the floor strip under each stage disc. Fallback layout: under the feet. */
.stage-progress{
  display:block!important;position:absolute!important;z-index:6!important;
  left:50%!important;bottom:-10%!important;width:122%!important;height:15%!important;
  translate:-50% 0!important;overflow:visible!important;clip-path:none!important;mask:none!important;
  border:0!important;border-radius:999px!important;opacity:1!important;background:transparent!important;
  box-shadow:none!important;filter:none!important;pointer-events:none;
  --inset-y:18%;--inset-x:3%;--meter-ease:cubic-bezier(.22,.9,.3,1.04);--meter-fill-ms:.32s;
  --tick:#ffffff1c
}
/* cabinet.css draws the legacy ring meter on these pseudo-elements (ring mask +
   drop-shadow filter); cancel both so the bar paints as a solid rounded tube. */
.stage-progress::before,.stage-progress::after{content:""!important;position:absolute!important;border-radius:999px!important;-webkit-mask:none;mask:none}
.chomper>.stage-progress::before,.chomper>.stage-progress::after{filter:none}
/* Track: the empty part. A drawn housing (dark glass + gold rim) where no well
   is painted; on the painted well only a faint inner shade and step ticks. */
.stage-progress::before{
  z-index:0;inset:0!important;
  background:
    repeating-linear-gradient(90deg,transparent 0 calc(100% / 11 - 1px),var(--tick) calc(100% / 11 - 1px) calc(100% / 11)) var(--inset-x) 50%/calc(100% - 2 * var(--inset-x)) 44% no-repeat,
    linear-gradient(180deg,#07030a 0,#1a0c16 55%,#2a1420 100%)!important;
  box-shadow:0 0 0 1.5px #f2c35a,0 0 0 3px #6b3510,0 1px 4px 3px #000a,inset 0 2px 3px #000d,inset 0 -1px 1px #ffffff2e!important
}
/* Fill: glossy tube in the Chomper's colour. Layers: top highlight, shimmer band
   (swept by meter-fx at each growth), colour body. Soft inner glow + bottom shade. */
.stage-progress::after{z-index:1;inset:var(--inset-y) var(--inset-x)!important}
/* (No !important on the fill's paint: the shimmer and flashes animate it.) */
.chomper>.stage-progress::after{
  background:
    linear-gradient(180deg,#ffffffd0 0,#ffffff66 20%,#fff0 46%) 0 0/100% 100% no-repeat,
    linear-gradient(100deg,#fff0 0 38%,#ffffffb0 50%,#fff0 62%) -90% 0/55% 100% no-repeat,
    linear-gradient(180deg,color-mix(in srgb,var(--stage-color) 55%,#fff) 0,var(--stage-color) 48%,color-mix(in srgb,var(--stage-color) 60%,#000) 100%) 0 0/100% 100% no-repeat;
  box-shadow:inset 0 0 5px 1px color-mix(in srgb,var(--stage-color) 45%,#fff),inset 0 -2px 3px #0007;
  clip-path:inset(0 calc((1 - var(--meter-progress))*100%) 0 0 round 999px);transition:clip-path var(--meter-fill-ms) var(--meter-ease)
}
/* Leading edge: a hot glint riding the fill boundary (transform only); hidden when empty. */
.stage-progress>.meter-edge{position:absolute;z-index:3;top:var(--inset-y);bottom:var(--inset-y);left:var(--inset-x);width:calc(100% - 2 * var(--inset-x));
  opacity:min(.9,calc(var(--meter-progress) * 30));
  transform:translateX(calc(var(--meter-progress)*100%));transition:transform var(--meter-fill-ms) var(--meter-ease);will-change:transform}
.stage-progress>.meter-edge::before{content:"";position:absolute;left:0;top:50%;height:135%;aspect-ratio:.8;translate:-75% -50%;border-radius:50%;
  background:radial-gradient(closest-side,#fff 0 35%,color-mix(in srgb,var(--stage-color) 45%,#fff) 60%,transparent);box-shadow:0 0 7px 2px var(--stage-color)}
.meter-edge>.meter-pop{position:absolute;left:0;bottom:130%;translate:-50% 0;opacity:0;white-space:nowrap;pointer-events:none;
  font:900 clamp(18px,1.8vw,28px)/1 CarnivalCoin,Georgia,serif;color:#fff;
  -webkit-text-stroke:3px #1b0a12;paint-order:stroke fill;
  text-shadow:0 0 10px var(--stage-color),0 2px 3px #000}
.meter-edge>.meter-pop[data-kind="miss"]{font-size:clamp(11px,1.05vw,16px);letter-spacing:.05em;color:#e8ecf5;-webkit-text-stroke:2px #1b0a12;text-shadow:0 1px 2px #000}
/* Growth flare: blooms at the new leading edge when a coin lands. */
.stage-progress>.meter-cell{position:absolute;z-index:4;top:50%;left:calc(var(--inset-x) + var(--meter-progress) * (100% - 2 * var(--inset-x)));
  height:240%;aspect-ratio:1;translate:-60% -50%;opacity:0;border-radius:50%;
  background:radial-gradient(closest-side,#fff 0 18%,color-mix(in srgb,var(--stage-color) 45%,#fff) 36%,color-mix(in srgb,var(--stage-color) 55%,transparent) 58%,transparent)}
/* Full meter: one ring bursts from the bar. */
.stage-progress>.meter-burst{position:absolute;z-index:0;left:50%;top:50%;width:92%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;opacity:0;
  border:3px solid color-mix(in srgb,var(--stage-color) 55%,#fff);box-shadow:0 0 22px 6px var(--stage-color),inset 0 0 18px 4px var(--stage-color)}
/* Armed (12/12): the whole fill pulses and its gloss keeps sweeping; the bar
   itself never scales, so it stays seated in its well. */
.chomper[data-armed="true"] .stage-progress{animation:none!important}
.chomper[data-armed="true"] .stage-progress::after{animation:meter-armed-glow .75s ease-in-out infinite alternate,meter-armed-shine 1.6s linear infinite}
.chomper[data-armed="true"] .stage-progress>.meter-edge{opacity:0}
/* The modifier this Chomper arms lights up as a badge over its feet. */
.chomper[data-armed="true"]>em{display:block!important;position:absolute;z-index:7;left:50%;right:auto;bottom:6%;translate:-50% 0;
  padding:.2em .75em .15em;border-radius:999px;white-space:nowrap;letter-spacing:.06em;
  font:900 clamp(10px,1.05vw,16px)/1.1 CarnivalCoin,Georgia,serif;color:#fff;text-shadow:0 1px 2px #000a;
  background:linear-gradient(#ffffff55,#0000 55%,#0003),var(--stage-color);
  box-shadow:0 0 12px 2px var(--stage-color),inset 0 1px 0 #fff9;animation:armed-badge 1s ease-in-out infinite alternate}
@keyframes meter-armed-glow{to{filter:brightness(1.55) saturate(1.15)}}
@keyframes meter-armed-shine{from{background-position:0 0,-90% 0,0 0}to{background-position:0 0,190% 0,0 0}}
@keyframes armed-badge{to{box-shadow:0 0 20px 5px var(--stage-color),inset 0 1px 0 #fff9}}

/* Video cabinet (16:9 at any size): the element is the painted well's interior,
   measured on the base poster (well interior y 289..327 px; x red 479..717,
   blue 837..1077, green 1197..1441 of 1916) and expressed in each Chomper's box.
   The painted well is the housing, so the drawn one is off; the fill keeps a
   ~4 poster-px even inset (11% of 38 px vertically, ~1.75% of ~240 px horizontally). */
.cabinet[data-video-ready="true"]>.topper-stage .stage-progress{display:block!important;bottom:auto!important;translate:none!important;
  top:95.4%!important;height:13.03%!important;--inset-y:11%;--inset-x:1.75%;--tick:#ffffff14}
.cabinet[data-video-ready="true"]>.topper-stage .chomper.red .stage-progress{left:-4.39%!important;width:107.29%!important}
.cabinet[data-video-ready="true"]>.topper-stage .chomper.blue .stage-progress{left:-.3%!important;width:110.27%!important;top:99.09%!important;height:13.28%!important}
.cabinet[data-video-ready="true"]>.topper-stage .chomper.green .stage-progress{left:-8.12%!important;width:109.99%!important}
.cabinet[data-video-ready="true"]>.topper-stage .stage-progress::before{
  background:repeating-linear-gradient(90deg,transparent 0 calc(100% / 11 - 1px),var(--tick) calc(100% / 11 - 1px) calc(100% / 11)) var(--inset-x) 50%/calc(100% - 2 * var(--inset-x)) 44% no-repeat!important;
  box-shadow:inset 0 2px 4px #000a!important}

@media(max-width:900px) and (orientation:portrait){
  /* Phone movie: no painted well. A drawn housing sits on the floor strip between
     each stage disc and the jackpot plaques (poster y 497..523 of 1920; 190 px wide,
     centred on the discs at x 207 / 540 / 876 of 1080). */
  .cabinet[data-video-ready="true"]>.topper-stage .stage-progress{top:99.48%!important;height:5.89%!important;width:56.47%!important;--inset-y:19%;--inset-x:2.6%;--tick:#ffffff1a}
  .cabinet[data-video-ready="true"]>.topper-stage .chomper.red .stage-progress{left:15.92%!important;width:56.47%!important}
  .cabinet[data-video-ready="true"]>.topper-stage .chomper.blue .stage-progress{left:20.46%!important;top:108.57%!important;width:58.99%!important;height:6.16%!important}
  .cabinet[data-video-ready="true"]>.topper-stage .chomper.green .stage-progress{left:28.58%!important;width:56.47%!important}
  .cabinet[data-video-ready="true"]>.topper-stage .stage-progress::before{
    background:
      repeating-linear-gradient(90deg,transparent 0 calc(100% / 11 - 1px),var(--tick) calc(100% / 11 - 1px) calc(100% / 11)) var(--inset-x) 50%/calc(100% - 2 * var(--inset-x)) 44% no-repeat,
      linear-gradient(180deg,#07030a 0,#1a0c16 55%,#2a1420 100%)!important;
    box-shadow:0 0 0 1px #f2c35a,0 0 0 2px #6b3510,0 1px 3px 2px #000a,inset 0 1px 2px #000d!important}
  .meter-edge>.meter-pop{font-size:14px;-webkit-text-stroke:2.5px #1b0a12}
  .meter-edge>.meter-pop[data-kind="miss"]{font-size:9px;-webkit-text-stroke:1.5px #1b0a12}
  .chomper[data-armed="true"]>em{font-size:9px;bottom:4%}
}
@media(prefers-reduced-motion:reduce){
  .stage-progress::after,.stage-progress>.meter-edge{transition:none}
  .chomper .stage-progress,.chomper .stage-progress::after,.chomper[data-armed="true"]>em{animation:none!important}
}