#metaballs-canvas,
#metaballs2-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  /* One layer above the sunburst (z-index 0) so the gloop reads across the
     columns' opaque backgrounds, not just through #main's gaps + outer
     padding. Below the banner (z-index 51) and modal overlays (z-index 200).
     Previously used mix-blend-mode: screen, but a blend mode forces the browser
     to composite the entire UI beneath these full-viewport canvases into a
     backdrop buffer every frame (defeating layer caching). Dropped it for plain
     alpha — far cheaper compositing; the gloop reads as a translucent overlay. */
  z-index: 2;
  display: none;
  background: transparent;
  /* Bumped from 0.25 to compensate for the brightness lost when the screen
     blend mode was dropped (plain alpha reads dimmer than additive screen). */
  opacity: 0.4;
}
/* Gloop 2 sits one layer above the primary gloop (otherwise its sparser,
   more-opaque blobs would visually compete instead of stacking on top). */
#metaballs2-canvas {
  z-index: 3;
}
/* When the primary gloop is re-parented into #main-menu (during pre-game),
   sit behind the menu UI: #mm-inner is z-index:1, sunburst + stage are
   z-index:0, so z-index:0 + first-child placement keeps the gloop behind
   the menu's solid gradient bg's children but above the bg itself. */
#main-menu > #metaballs-canvas {
  z-index: 0;
}
/* Punch a soft hole in the gloop over the cylinder + kiwis so the centerpiece
   stays clean (the cylinder is sealed inside nested stacking contexts and can't
   be lifted above the gloop via z-index). The hole is an SVG mask traced to the
   actual shapes — a capsule for the cylinder plus a circle per kiwi — built in
   JS (_updateGloopMask in display.js) and stretched over the canvas. The
   body.gloop-masked class is only added once a valid mask exists, so by default
   there's no mask and the canvas shows in full. */
body.gloop-masked #metaballs-canvas,
body.gloop-masked #metaballs2-canvas {
  -webkit-mask: var(--gloop-mask) 0 0 / 100% 100% no-repeat;
          mask: var(--gloop-mask) 0 0 / 100% 100% no-repeat;
}