/* Moonlit v5: the motion of a round's END -- crash word, win, credits badge.
   Paired with shared/result-fx.js. Loaded after club.css, so a rule here wins
   a tie with one there.

   The result's own look and the parts of it that are timed in CSS (the
   letters, the stamp, the rays, the sparks, CASHED OUT and CRASHED AT rising
   in) live in club.css section 7, beside the rules they move. This file
   styles what result-fx.js adds to the page and takes away again: the badge's
   chip and glint, the sheen across the payout, and the multiplier's cold
   copy. Everything here is painted once and moved by transform and opacity.

   No money flies to the badge on a win any more (the owner, 2026-09-26:
   "remove money going to moneymeter on cashout"): its number counts up to
   the new balance by itself. */

/* THE BADGE'S CHIP: the stake leaving it as a round starts ("−$1.00"). In
   the badge's own surface, under it at the top of the screen and over it at
   the foot. */
.credits-chip{
  position:absolute;right:8px;top:calc(100% + 5px);
  padding:3px 8px 4px;border-radius:999px;
  font:900 14px/1 var(--title);letter-spacing:.01em;white-space:nowrap;
  font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1;
  color:#d6ddd3;background:#101810;box-shadow:inset 0 0 0 1px #354136;
  pointer-events:none;opacity:0;
}
.credits-chip.above{top:auto;bottom:calc(100% + 5px)}

/* An idle moment (`redline:idle-moment` badge-glint): one thin glint crosses
   the badge, clipped to its corners. */
.credits-glint{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none}
.credits-glint>i{
  position:absolute;top:-30%;bottom:-30%;left:0;width:34%;
  background:linear-gradient(90deg,#fff0,#ffffff2e 50%,#fff0);
  transform:translateX(-110%) skewX(-18deg);
}

/* THE SHEEN at the stamp: a band that crosses the payout holding a bright
   copy of it (white face, a lip lit almost white), which moves back by as
   much as the band moves on, so under the band the copy stays exactly on the
   numerals. Soft-edged by a mask that travels with the band. */
fx-sheen{
  position:absolute;left:0;overflow:hidden;pointer-events:none;transform-origin:0 0;
  -webkit-mask-image:linear-gradient(90deg,#0000,#000 36%,#000 64%,#0000);
  mask-image:linear-gradient(90deg,#0000,#000 36%,#000 64%,#0000);
}
fx-shine{
  position:absolute;left:0;top:0;height:100%;display:block;transform-origin:0 0;
  white-space:nowrap;text-align:center;color:#fff;
  text-shadow:0 2px 0 #fff,0 5px 0 #e3fff0,0 8px 0 #9ff5bf,0 0 18px #ffffffa6;
}

/* THE NUMBER COWERING (club.css, section 8): a copy of the multiplier in a
   cold, dull red and without its glow, laid over it, that fades in as the
   live number fades out and sinks away at contact. A `b` in the readout, so
   every size and face the readout's number takes in every layout is its own
   too. */
.readout>b.fx-cold{position:absolute;left:0;right:0;margin:0;pointer-events:none;opacity:0}
body .road .readout>b.fx-cold{color:#a65d69;text-shadow:0 4px 0 #00000038}
body .road .readout>b.fx-cold small{color:#8e5964;text-shadow:none}

@media(prefers-reduced-motion:reduce){
  fx-sheen,.credits-chip,.credits-glint,.readout>b.fx-cold{display:none!important}
}