/* Moonlit v5: THE PAST ROUNDS (shared/rounds.js). Loaded after hud-fx.css.

   Moneyball V8's previous rounds -- a chip for each of the latest rounds,
   newest first -- in this build's own colours, as the owner asked ("in colors
   of abgon no oclor sof moneyball"). Every chip is the options button's dark
   glass and hairline, set in the game's condensed figures, and what it holds
   is the colour the road gives it:
     a crash       0.00x in the Wild lane's red, which is CRASHED's red;
     a win         its multiplier in the Safe lane's green, over a green wash
                   from 2x (tier 2);
     BIG WIN (5x)  the Risky lane's yellow;
     HUGE WIN (20x) and the 1,000x cap
                   CASH OUT's own gold face, lip and ink.
   The tiers are the win's (app.js winTierOf), so a chip says what its round's
   YOU WIN said.

   rounds.js places the strip, from the page as it is laid out: in the empty
   stretch of the top row right of the options button ("on phone ther e is
   pace on top without ant tex and anythign use that"), as far as DEMO
   CREDITS on a phone. Where the lane tags share the row -- a laptop -- it
   runs to the road's edge under WILD and then carries on past SAFE to DEMO
   CREDITS ("let it continue on right side"): #roundsMore is that second
   half, the same rounds slid along by the chips the first half shows, and
   the first half ends on a whole chip, without a fade. Every chip is one
   width so the two halves stay one line. The variables below are what
   rounds.js reads to do all that.

   Nothing here repaints per frame. The strip is contained, and a new chip
   moves by transform and opacity only; its flash is an element of its own
   whose opacity fades. No backdrop filter, which over a canvas redrawn every
   frame would be re-blurred every frame. */
.rounds{
  /* The strip's box, the room it keeps from its neighbours, the least room
     worth showing (one chip), the history mark's share of it, and how long a
     new chip waits after the result before it comes in. */
  --rounds-h:36px;--rounds-gap:10px;--rounds-least:60px;--rounds-icon-room:24px;--rounds-pad:4px;--rounds-wait:.7s;
  --chip-h:28px;--chip-w:60px;--chip-font:17px;--chip-gap:6px;
  position:absolute;z-index:3;left:0;top:0;width:0;height:var(--rounds-h);
  display:flex;align-items:center;gap:8px;
  contain:strict;
  color:var(--menu-ink);cursor:default;
  /* A TOUCH GOES THROUGH IT, TO THE ROAD. Above the far end of a tall phone's
     road, a tap still steers (app.js canvas.onclick carries the road's
     perspective on up the screen), and the strip must not take that away
     from the top of the screen it now shares. The chips have nothing to press;
     only a pointer that can hover gets them, to read a chip's round. */
  pointer-events:none;
}
@media (hover:hover){.rounds{pointer-events:auto}}
/* Laid out, so the entrance's clock runs, but unseen until rounds.js has
   placed it on the first frame after the road is laid out. */
.rounds.is-unplaced{visibility:hidden}
/* The history mark, drawn in the options button's hairline and ink. */
.rounds-icon{
  flex:none;width:16px;height:16px;overflow:visible;opacity:.75;
  fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
}
.rounds.no-icon .rounds-icon{display:none}
/* The row runs on under a clip that does not move, so the chips can slide
   along beneath it; its padding leaves the first chip's pop room inside. */
.rounds-view{
  position:relative;flex:1 1 auto;min-width:0;height:100%;
  display:flex;align-items:center;overflow:hidden;padding-left:var(--rounds-pad);
}
/* Past the strip's end the chips fade out, but only when some are cut off. */
.rounds.overflow .rounds-view{
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 44px),#0000 calc(100% - 4px));
  mask-image:linear-gradient(90deg,#000 calc(100% - 44px),#0000 calc(100% - 4px));
}
/* A first half that the rounds run on from ends on a whole chip, unfaded. */
.rounds.continued .rounds-view{-webkit-mask-image:none;mask-image:none}
.rounds-list{flex:none;display:flex;align-items:center;gap:var(--chip-gap);margin:0;padding:0;list-style:none}

.round-chip{
  position:relative;isolation:isolate;flex:none;
  display:flex;align-items:center;justify-content:center;
  width:var(--chip-w);height:var(--chip-h);padding:0;
  border-radius:7px;
  background:var(--menu-surface);box-shadow:inset 0 0 0 1px var(--menu-line);
  font:900 var(--chip-font)/1 var(--title);letter-spacing:.02em;
  font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1;
  color:var(--text);white-space:nowrap;
}
.round-chip small{font-size:.78em;margin-left:.05em;opacity:.8}
/* The whole round in words, for a screen reader; the chip's title says it to
   a pointer. Held inside the chip, which the row's clip holds, so a chip cut
   off at the end cannot widen the page. */
.round-said{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* A new chip's flash of its own colour as it lands (rounds.js fades it). */
.round-flash{position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--flash,currentColor);opacity:0;pointer-events:none}

.round-chip.crashed{
  color:var(--coral);
  background:linear-gradient(#ff405226,#ff40520d) var(--menu-surface);
  box-shadow:inset 0 0 0 1px #ff40525c;
}
.round-chip.won{color:var(--mint);box-shadow:inset 0 0 0 1px #38ed704d}
.round-chip.won.tier-2{
  color:#7df7a0;
  background:linear-gradient(#38ed7033,#38ed7014) var(--menu-surface);
  box-shadow:inset 0 0 0 1px #38ed7094;
}
.round-chip.won.tier-3{
  color:var(--amber);
  background:linear-gradient(#ffe6402e,#ffe64012) var(--menu-surface);
  box-shadow:inset 0 0 0 1px #ffe64099;
}
/* CASH OUT's face (club.css, the drive buttons: `--cash-face`, `--cash-lip`
   and `--drive-ink`, which live on the deck), with a soft glow painted once. */
.round-chip.won:is(.tier-4,.tier-max){
  --flash:#fff4cc;
  color:#1a2d10;
  background:linear-gradient(180deg,#ffffff30,#ffffff00 55%,#0000000d) #f0c14b;
  box-shadow:inset 0 -2px 0 #c8912d,inset 0 1px 0 #ffe7a3,0 0 8px #f0c14b59;
}
.round-chip.won.tier-max{box-shadow:inset 0 -2px 0 #c8912d,inset 0 1px 0 #ffe7a3,0 0 10px #f0c14b99}
.round-chip.won:is(.tier-4,.tier-max) small{opacity:1}

/* Under a finger, and on a phone: the options button is 44px there, the strip
   a little taller to stay centred on it, and the chips a size smaller and
   without the history mark before them, so an upright iPhone's top row holds
   four of them between the button and DEMO CREDITS. */
@media (pointer:coarse),(max-width:599px){
  .rounds{--rounds-h:40px;--rounds-gap:8px;--rounds-least:48px;--rounds-icon-room:0px;
    --chip-h:26px;--chip-w:48px;--chip-font:14px;--chip-gap:5px}
  .rounds-icon{display:none}
  .round-chip{border-radius:6px}
}

/* A WIN OR A CRASH TAKES A PHONE'S SCREEN (club.css, section 10): the strip
   steps aside with the options button while the result lands and comes back
   with it, and the round's chip comes in as it returns rather than while
   nobody can see it. Section 10's own two arms. */
@media (max-width:599px) and (min-height:541px),
       (max-width:599px) and (orientation:portrait){
  .rounds{--rounds-wait:1.95s}
  body:is([data-phase=won],[data-phase=lost]) .rounds{animation:result-clear 2.2s both}
}

@media (prefers-reduced-motion:no-preference){
  /* THE ENTRANCE, on hud-fx.css's timeline: the strip arrives with the
     options button (1200-1600 ms), its mark turning in and the first eight
     chips dealt out of it one after another, 25 ms apart, the rest with the
     eighth -- all of it inside the entrance, which hud-fx.js ends at 1700 ms.
     Held back, like the rest of the HUD, until hud-fx.js has started it. */
  html:not(.hud-fx) .rounds{animation:hud-hold 1ms 1.5s backwards}
  html.hud-entering .rounds-icon{animation:rounds-mark-in 300ms cubic-bezier(.2,.8,.3,1) calc(1200ms + var(--hud-shift,0ms)) backwards}
  html.hud-entering .round-chip{
    animation:rounds-deal 260ms cubic-bezier(.2,.8,.3,1.25) calc(1220ms + var(--i,8) * 25ms + var(--hud-shift,0ms)) backwards}
}
@keyframes rounds-mark-in{from{opacity:0;rotate:-120deg}to{opacity:.75;rotate:0deg}}
@keyframes rounds-deal{from{opacity:0;translate:-14px 0;scale:.7}to{opacity:1;translate:0 0;scale:1}}