/* Everything is expressed in the reference's own units (the pill measured
     1407 x 516 there), scaled off one ergonomic knob: the button height. */
  .stage{
    --h: 52px;                            /* a normal control height */
    --u: calc(var(--h) / 516);
    --bw: calc(1407 * var(--u));
    --bh: var(--h);
    /* The canvas is the stage, so this has to clear the bloom's full reach
       (~4 sigma) or the halo gets cut off against a visible rectangle. */
    --pad: calc(900 * var(--u));
    position:relative;
    width:calc(var(--bw) + 2 * var(--pad));
    height:calc(var(--bh) + 2 * var(--pad));
    display:grid;place-items:center;
    touch-action:manipulation;
  }

  /* the button's own solid body, and the shadow it casts on the pool */
  .plate{
    position:absolute;
    width:var(--bw);height:var(--bh);
    border-radius:999px;
    background:#0b0c0e;
    box-shadow:
      0 calc(var(--h) * 0.10) calc(var(--h) * 0.22) rgba(0,0,0,.72),
      0 calc(var(--h) * 0.30) calc(var(--h) * 0.66) rgba(0,0,0,.62),
      0 calc(var(--h) * 0.62) calc(var(--h) * 1.30) rgba(0,0,0,.42);
    transition:box-shadow .38s cubic-bezier(.22,.61,.36,1),
               background .38s cubic-bezier(.22,.61,.36,1);
  }
  /* deepen it while the metal is lit, so the bright face keeps its edge */
  .stage.hot .plate{
    background:#08090a;
    box-shadow:
      0 calc(var(--h) * 0.12) calc(var(--h) * 0.26) rgba(0,0,0,.80),
      0 calc(var(--h) * 0.40) calc(var(--h) * 0.86) rgba(0,0,0,.72),
      0 calc(var(--h) * 0.86) calc(var(--h) * 1.80) rgba(0,0,0,.55);
  }

  #fx{position:absolute;inset:0;width:100%;height:100%;display:block}

  .btn{
    position:relative;
    width:var(--bw);height:var(--bh);
    border:0;background:none;padding:0;
    border-radius:999px;
    display:flex;align-items:center;justify-content:center;
    gap:calc(88 * var(--u));
    color:#fff;
    font-family:inherit;
    font-weight:500;
    font-size:calc(207 * var(--u));
    line-height:1;
    letter-spacing:0;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    outline:none;
  }
  .btn:focus-visible{outline:calc(4 * var(--u)) solid rgba(255,255,255,.55);outline-offset:calc(10 * var(--u))}
  .btn .ico{
    width:calc(115 * var(--u));height:calc(115 * var(--u));
    display:block;flex:none;overflow:visible;
  }
  /* descenders pull the flex box up — nudge back so the cap box, not the
     em box, is what sits centred on the pill (measured, not guessed) */
  .btn .lbl{display:block;transform:translateY(calc(2 * var(--u)))}

  /* pressed: the button settles onto the surface, so the shadow tightens */
  .stage.press .plate{
    background:#070809;
    box-shadow:
      0 calc(var(--h) * 0.05) calc(var(--h) * 0.13) rgba(0,0,0,.82),
      0 calc(var(--h) * 0.16) calc(var(--h) * 0.40) rgba(0,0,0,.70),
      0 calc(var(--h) * 0.34) calc(var(--h) * 0.80) rgba(0,0,0,.50);
    transition-duration:.10s;
  }

/* ─────────────────────────────────────────────────────────────
   ojlweb integration layer — nothing above this line was changed
   beyond rescoping .hot/.press off <body>.
   ───────────────────────────────────────────────────────────── */

.lm-slot{display:flex}

.stage{
  --h:60px;
  /* The stage is much larger than the pill so the bloom halo isn't clipped.
     Pull that padding back out of the layout, or it shoves the neighbouring
     button ~100px away. */
  margin:calc(-1 * var(--pad));
}

/* The oversized canvas sits on top of whatever is next to it, so it must
   never eat those clicks. */
#fx{pointer-events:none}

.btn .lbl{white-space:nowrap}

/* No WebGL2 (older Safari, locked-down devices): the shader never runs, so
   render a plain gold pill instead of an invisible button. */
.stage.no-webgl #fx{display:none}
.stage.no-webgl .plate{
  background:#c9a227;
  box-shadow:0 6px 18px rgba(0,0,0,.5);
}
.stage.no-webgl .btn{color:#0f0e0d;font-weight:700}

@media (max-width:640px){
  .stage{--h:54px}
}