/* Pickle Arcade: the Crash page.
 *
 * arcade.css carries the site register and every token; arena.css carries the
 * arena's own furniture and a handful of pieces both games share (.arc-band,
 * .arc-banners, .arc-players, .arc-lamp, .arc-pending, .arc-actions,
 * .arc-notes, .arc-hud-note). This sheet loads after both and carries what only
 * this page asks for: the table, the curve, the figure over it, the band of
 * finished rounds along its bottom edge, the console and the room on the rail,
 * the card that names your own outcome, and the deck.
 *
 * TOKENS. This sheet declares none. Every --arc-* value is declared on
 * body[data-app="minigame"] in arcade.css and read here, and this page's light
 * is AMBER: .arc-crash on the band sets --arc-light, --arc-light-tube and
 * --arc-light-glow to the crash cabinet's, so the 2px tube along the top edge
 * strikes amber rather than mint without a single colour being restated.
 *
 * THE CURVE IS THE ONE MEMORABLE ELEMENT and everything here is arranged to
 * leave it alone. The picture carries three things and no more: the banners
 * that say why nothing is enabled, the one display-size figure, and the card
 * that lands when a round has done something to you. The console, the room and
 * the deck sit beside and under it, on the page's own ground.
 *
 * COLOUR, and it is a grammar rather than a palette. Amber is the curve and the
 * crash, because amber is this cabinet's light. Mint is a cash-out that was
 * paid, because on this estate mint is confirmation. Rose is a cash-out that
 * landed after the curve stopped, because that is the one outcome in this game
 * that failed. White at 55% is a transaction still in flight, because it is
 * neither of those yet. Nothing else is coloured at all. */

/* ==================================================================== table */

/* The picture and the rail. One grid, a definite height, so the canvas has a
   box to fill and the rail has one to scroll inside. 62dvh rather than the
   arena's full --arc-stage: this page's honesty panel is not an optional extra
   that may sit below the fold, and at 900px tall 62dvh still leaves the curve
   the largest object on the screen by a distance. */
.arc-table {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 23rem;
  height: max(22rem, min(var(--arc-stage), 62dvh));
}

/* The picture and the band of finished rounds under it, as one column of the
   table. The band is auto height and the picture takes the rest, so the canvas
   still fills every pixel the table gives it and the band sits exactly on its
   bottom edge. */
.arc-screen {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
}

/* The screen. Isolated so nothing in it can reach the live bar's z-index, and
   clipped, never hidden: `overflow: hidden` makes a scroll container and every
   view() timeline under it would freeze at its end state.

   `flex: 1 1 auto` with `min-height: 0` rather than `height: 100%`: the canvas
   inside is absolutely positioned, so the wrap has no content height of its own
   and the flex line's free space is the whole of it. The phone rule below puts
   an explicit height back and stops it flexing at all. */
.arc-curve-wrap {
  position: relative;
  isolation: isolate;
  min-width: 0;
  flex: 1 1 auto;
  min-height: 0;
  overflow: clip;
  background: var(--arc-glass);
}

/* The element's size is this stylesheet's and the renderer only writes the
   drawing buffer, capped at two device pixels, so no display can make the
   canvas wider than its column. Nothing ever writes canvas.style. */
.arc-curve {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  z-index: 0;
}

/* The instrument rail: page ground beside the screen's glass, so the two read
   as a picture and the panel that explains it rather than as one surface. */
.arc-rail {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  overflow-y: auto;
  background: var(--pickle-bg);
  border-left: 1px solid var(--pickle-line);
}

/* =================================================================== figure */

/* Everything that sits over the picture, in one column at its top left:
   whichever banners are needed, then the figure. 3.6rem clears the canvas's own
   axis labels at every width. */
.arc-head {
  position: absolute;
  top: var(--pickle-space-4);
  left: 3.6rem;
  right: var(--pickle-space-3);
  z-index: 3;
  display: grid;
  justify-items: start;
  gap: var(--pickle-space-3);
  pointer-events: none;
}

.arc-head .ex-banner {
  margin: 0;
  background: var(--arc-plate-hard);
  font-size: var(--pickle-text-sm);
  max-width: min(34rem, 100%);
}

/* The page's one display-size figure, in no box at all. Everything else on this
   page is on a plate; this is the thing the plates are arranged around, and a
   frame around it would make it one panel among four. */
.arc-figure {
  min-width: 0;
  max-width: 100%;
}

.arc-figure-fig {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: var(--pickle-space-2);
}

.arc-figure-num { font-size: clamp(2.6rem, 5.4vw, 4.4rem); }
/* The curve has stopped: the figure takes the cabinet's own light. */
.arc-figure-num.arc-stop { color: var(--arc-crash); }
/* No round, or no answer yet. A figure nobody has been given is not a zero. */
.arc-figure-num.arc-idle { color: var(--pickle-subtle); }

.arc-figure-unit {
  color: var(--pickle-muted);
  font-size: var(--pickle-text-lg);
}

/* No figure at all: a round that has not opened, a chain that has not answered,
   a game that is stopped. The sentence takes the figure's place rather than a
   display-size hyphen taking it. */
.arc-figure-idle {
  margin: 0;
  font-family: var(--pickle-font-display);
  font-size: var(--pickle-text-xl);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: var(--pickle-leading-display);
  color: var(--pickle-muted);
  max-width: 24rem;
}

.arc-figure-line {
  margin: var(--pickle-space-2) 0 0;
  font-family: var(--pickle-font-mono);
  font-size: var(--pickle-text-2xs);
  letter-spacing: var(--pickle-tracking-caps);
  text-transform: uppercase;
  color: var(--pickle-subtle);
  max-width: 22rem;
}

/* ================================================================== console */

/* The plate that says what is true and holds the only two controls. */
.arc-cabin {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--pickle-space-3);
  padding: var(--pickle-space-4) var(--pickle-space-4) var(--pickle-space-5);
  border-bottom: 1px solid var(--pickle-line);
  font-family: var(--pickle-font-mono);
  font-size: var(--pickle-text-xs);
  color: var(--pickle-muted);
  flex: 0 0 auto;
}

/* ONE FACE FOR ONE COMPONENT. `.ex-btn` inherits its family, so inside a mono
   plate the same button the hall sets in Inter Tight would come out in IBM Plex
   Mono: the same control in two faces on one site, by cascade rather than by
   decision. Mono is this estate's face for figures and labels, not for actions. */
.arc-cabin .ex-btn { font-family: var(--pickle-font-display); }

/* A DISABLED PRIMARY MUST NOT BE THE BRIGHTEST THING ON THE PAGE, and on this
   page it is disabled most of the time: betting is open for eight seconds in
   twenty. components.css disables by opacity alone and 45 per cent of #00e788
   on near-black is still a saturated mint slab. Losing the fill says dead the
   way the wallet's outline buttons already do. :hover too, because Chrome still
   matches it on a disabled button. */
.arc-cabin .ex-btn.solid:disabled,
.arc-cabin .ex-btn.solid:disabled:hover {
  opacity: 1;
  color: var(--pickle-subtle);
  background: transparent;
  border-color: var(--pickle-line);
  cursor: default;
}

/* The phase, in a sentence, always. Every one of the five is named, including
   the three nobody wants. */
.arc-phase {
  margin: 0;
  font-family: var(--pickle-font);
  font-size: var(--pickle-text-sm);
  line-height: 1.5;
  color: var(--pickle-muted);
}

/* TABULAR ON EVERY ONE OF THEM. These four lines all carry a figure that
   changes under the reader: the vault after a bet lands, the room left after
   anybody's stake, the pot, the mini-block. Proportional digits would shift the
   words after them on each change, which reads as the plate twitching. */
.arc-room,
.arc-vault,
.arc-mine,
.arc-anchor {
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.arc-room { color: var(--pickle-text); }
.arc-mine { color: var(--arc-crash); }
.arc-anchor { color: var(--pickle-subtle); font-size: var(--pickle-text-2xs); }

/* The player's own money, on the plate where it is being staked. Full text
   weight, because it is the figure the next decision is made against; the
   unknown answers drop to the subtle grey the rest of the site reserves for
   "this is not a number", so a sentence can never be mistaken for one. */
.arc-vault { color: var(--pickle-text); }
.arc-vault-unknown { color: var(--pickle-subtle); }

/* ================================================================= the slip */

.arc-slip {
  display: grid;
  gap: var(--pickle-space-2);
  margin: 0;
}

.arc-slip-label {
  color: var(--pickle-subtle);
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* The amount, then Max, then the button. The amount is the figure the player is
   deciding, so it keeps the mono display treatment the wallet's coin slot uses
   and the buttons sit beside it rather than over it. */
.arc-slip-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: var(--pickle-space-3);
  align-items: stretch;
}

/* MAX FILLS THE BOX, so it is an outline beside the one filled button on the
   plate: the send is the primary action and nothing else on this page may look
   like it. Tighter side padding than `.ex-btn`'s default, because a three
   letter word set at the estate's button padding is as wide as "Place a bet"
   and would read as the pair of equals it is not. */
.arc-max { padding-inline: var(--pickle-space-4); }

.arc-slip-in {
  min-width: 0;
  width: 100%;
  font-family: var(--pickle-font-mono);
  font-size: var(--pickle-text-xl);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--pickle-text);
  background: var(--arc-glass);
  border: 1px solid var(--pickle-surface-4);
  border-radius: var(--pickle-radius);
  padding: var(--pickle-space-2) var(--pickle-space-3);
}

.arc-slip-in:focus { outline: 0; border-color: var(--arc-crash); }
.arc-slip-in[aria-invalid="true"] { border-color: var(--pickle-rose-line); }

/* WHY THE BUTTON IS DEAD, in the same place every time. A refused send on this
   chain carries no reason at all, so a refusal the page could have predicted
   and did not is a round the player lost to silence. */
.arc-slip-why {
  margin: 0;
  font-size: var(--pickle-text-2xs);
  line-height: 1.5;
  color: var(--pickle-subtle);
}

.arc-slip-in[aria-invalid="true"] ~ .arc-slip-why,
.arc-slip-row + .arc-slip-why { color: var(--pickle-muted); }

/* WHY MAX ALONE IS DEAD, which is only ever that one of its three bounds is not
   known. It sits under the line above rather than replacing it: the limits
   sentence is still true and still worth reading while this one is up. */
.arc-max-why {
  margin: 0;
  font-size: var(--pickle-text-2xs);
  line-height: 1.5;
  color: var(--pickle-subtle);
}

/* The cash-out: the one control on this page that is worth a round trip of
   milliseconds, so it is the full width of the rail and nothing sits beside
   it. */
.arc-cash-row { display: grid; gap: var(--pickle-space-2); }
.arc-cash { width: 100%; justify-content: center; }

/* ===================================================================== room */

.arc-lobby {
  display: flex;
  flex-direction: column;
  gap: var(--pickle-space-3);
  padding: var(--pickle-space-4);
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
}

.arc-lobby-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--pickle-space-3);
  flex-wrap: wrap;
}

.arc-lobby-title {
  margin: 0;
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--pickle-subtle);
}

.arc-lobby-count {
  margin: 0;
  font-size: var(--pickle-text-xs);
  color: var(--pickle-text);
  font-variant-numeric: tabular-nums;
}

.arc-lobby-empty,
.arc-lobby-doubt {
  margin: 0;
  font-size: var(--pickle-text-2xs);
  line-height: 1.5;
  color: var(--pickle-subtle);
}

.arc-lobby-doubt { color: var(--pickle-amber); }

.arc-seats-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--pickle-line);
  border-block: 1px solid var(--pickle-line);
}

/* One row per player: who, what they staked, what it came to, and the
   mini-block that decided it. The 1px-gap grid is the estate's frame, so the
   cells never animate their own opacity; their contents arrive instead. */
.arc-seat-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0 var(--pickle-space-3);
  padding: var(--pickle-space-2) 0;
  background: var(--pickle-bg);
  font-size: var(--pickle-text-2xs);
  font-variant-numeric: tabular-nums;
}

.arc-seat-you { background: var(--pickle-surface-1); }

.arc-seat-who {
  margin: 0;
  color: var(--pickle-text);
  overflow-wrap: anywhere;
}

.arc-seat-tag {
  margin-right: var(--pickle-space-2);
  padding: 0 var(--pickle-space-1);
  color: var(--arc-crash);
  border: 1px solid var(--pickle-amber-line);
  border-radius: var(--pickle-radius);
  letter-spacing: var(--pickle-tracking-caps);
  text-transform: uppercase;
  font-size: .58rem;
}

.arc-seat-stake {
  margin: 0;
  text-align: right;
  color: var(--pickle-muted);
}

.arc-verdict {
  margin: 0;
  grid-column: 1 / -1;
  color: var(--pickle-subtle);
}

/* Paid, missed, unpaid, waiting. Four outcomes, four treatments, and the one
   that matters is rose: a cash-out whose mini-block landed after the crash. */
.arc-won { color: var(--pickle-accent-text); }
.arc-late { color: var(--pickle-rose); }
.arc-unpaid { color: var(--pickle-amber); }
.arc-wait { color: var(--pickle-subtle); }

.arc-seat-mini {
  margin: 0;
  grid-column: 1 / -1;
  color: var(--pickle-subtle);
  font-size: .62rem;
}

/* ===================================================================== card */

/* What this round did to you. UNDER 1024 IT IS AN ORDINARY BLOCK between the
   picture and the rail, because a phone's picture is 40dvh and this card is
   taller than that: over the curve, the sentence naming the margin and the
   Close button both fell below the cut. From 1024 up it is centred over the
   curve column (see below), by auto margins inside an inset rather than by a
   transform, because the landing animation ends on `transform: none` with fill
   both and a transform-centred card would land off centre. */
.arc-card {
  z-index: 4;
  margin: 0 var(--pickle-gutter) var(--pickle-space-5);
  width: auto;
  display: flex;
  flex-direction: column;
  gap: var(--pickle-space-3);
  padding: var(--pickle-space-5);
  background: var(--arc-plate-hard);
  border: 1px solid var(--pickle-line);
  border-radius: var(--pickle-radius);
}

/* A cash-out that missed is the one failure this game has, and it wears the
   estate's error colour for the life of the card. The estate's line tokens are
   28 to 35 per cent, which over a 97 per cent plate at card size is a neutral
   hairline: these borders are what carry the verdict, so they are stepped up
   to where they read as the colour they are. */
.arc-card-late { border-color: rgb(255 92 92 / 62%); }
.arc-card-paid { border-color: rgb(0 231 136 / 58%); }
.arc-card-warn { border-color: rgb(244 163 0 / 58%); }

.arc-card-fig {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: var(--pickle-space-2);
}

.arc-card-num { font-size: var(--arc-read); }
.arc-card-num.arc-paid { color: var(--pickle-accent-text); }
.arc-card-num.arc-late { color: var(--pickle-rose); }
.arc-card-num.arc-stop { color: var(--arc-crash); }

.arc-card-unit {
  color: var(--pickle-muted);
  font-size: var(--pickle-text-lg);
}

.arc-card-title {
  margin: 0;
  font-family: var(--pickle-font-display);
  font-size: var(--pickle-text-xl);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: var(--pickle-leading-display);
  color: var(--pickle-text);
}

.arc-card-line {
  margin: 0;
  font-size: var(--pickle-text-sm);
  line-height: 1.55;
  color: var(--pickle-muted);
}

.arc-card-hash {
  margin: 0;
  overflow-wrap: anywhere;
}

.arc-card-note {
  margin: 0;
  font-size: var(--pickle-text-2xs);
  line-height: 1.5;
  color: var(--pickle-subtle);
}

.arc-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pickle-space-2);
}

/* ===================================================================== deck */

/* Under the picture: the round's own figures, how its settle went, the last
   rounds, and the boundary in plain words. Quiet on purpose. */
/* Two columns from 1024 up: the round's own figures on the left, the boundary
   in words on the right. One column of 62ch prose under a 1440px picture left
   half the page empty and made the quiet half of the page look unfinished. */
.arc-deck-crash {
  display: grid;
  gap: var(--pickle-space-5);
  padding: var(--pickle-space-5) var(--arc-inset) var(--pickle-space-6);
  border-top: 1px solid var(--pickle-line);
  background: var(--pickle-bg);
}

/* The round's own figures, stacked. Its own element rather than several children
   of the deck's grid: as grid items they were stretched by the prose beside
   them, and what sat under them ended up four hundred pixels below the figures
   it belonged with. */
.arc-deck-side {
  display: grid;
  gap: var(--pickle-space-4);
  align-content: start;
  min-width: 0;
}

/* Over the curve, never over the rail: the table is the positioned ancestor and
   the rail is 23rem of it. */
@media (min-width: 1024px) {
  .arc-card {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 23rem;
    margin: auto;
    height: fit-content;
    max-height: calc(100% - 2rem);
    overflow: auto;
    width: min(28rem, calc(100% - 25rem));
  }
}

@media (min-width: 1024px) {
  .arc-deck-crash {
    grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
    column-gap: var(--pickle-space-7);
    align-items: start;
  }
}

.arc-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: var(--pickle-space-4);
}

.arc-fact {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--pickle-space-1);
  min-width: 0;
}

.arc-fact-label {
  color: var(--pickle-subtle);
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.arc-fact-value {
  font-size: var(--pickle-text-base);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--pickle-text);
  overflow-wrap: anywhere;
}

.arc-settle {
  margin: 0;
  font-size: var(--pickle-text-xs);
  line-height: 1.55;
  color: var(--pickle-muted);
  border-left: 2px solid var(--pickle-line);
  padding-left: var(--pickle-space-3);
}

.arc-settle-ok { color: var(--pickle-accent-text); border-left-color: var(--pickle-mint-line); }
.arc-settle-warn { color: var(--pickle-amber); border-left-color: var(--pickle-amber-line); }
.arc-settle-err { color: var(--pickle-rose); border-left-color: var(--pickle-rose-line); }

/* ================================================================== history */

/* THE BAND OF FINISHED ROUNDS, ON THE CURVE'S BOTTOM EDGE. It used to be a
   labelled row of chips at the foot of the deck; it is the shape every game in
   this genre puts under its graph, so it is that shape here, and it is the one
   place on this page where the register is a scoreboard's rather than a
   document's.

   It is not a control and nothing in it is interactive: it is a record. The
   sentence under the cells is part of the band and not an afterthought beside
   it, because a row of past results is the exact affordance that makes a player
   feel a big round is owed. */
.arc-history {
  flex: 0 0 auto;
  display: grid;
  gap: var(--pickle-space-2);
  padding: var(--pickle-space-3) var(--pickle-space-4) var(--pickle-space-4);
  background: var(--pickle-bg);
  border-top: 1px solid var(--pickle-line);
}

/* One cell per round, all the same width, hairlines between them: the estate's
   1px-gap grid, the same construction as .ex-stats. The gaps are the sheet
   through the grid rather than borders on the cells, so no cell can own a
   double edge. Newest first, left to right. */
.arc-chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 1px;
  background: var(--pickle-line);
  border: 1px solid var(--pickle-line);
  border-radius: var(--pickle-radius);
  overflow: clip;
}

/* AMBER, BECAUSE AMBER IS THIS CABINET'S LIGHT, and there is no second tone in
   here for how high a round went: a ladder of colour across the band would be a
   picture of a trend in numbers that have none. `min-width: 0` so a long figure
   shrinks its cell's content rather than the grid's own track. */
.arc-chip {
  min-width: 0;
  padding: var(--pickle-space-2) var(--pickle-space-1);
  background: var(--arc-glass);
  color: var(--arc-crash);
  font-size: var(--pickle-text-2xs);
  font-variant-numeric: tabular-nums;
  text-align: center;
  white-space: nowrap;
  overflow: clip;
}

/* A round that busted at or under 1.00x. One grey cell in a row of amber ones
   is the shape of the house edge, without a claim about its size. */
.arc-chip-bust { color: var(--pickle-subtle); }

/* The one sentence that keeps the band honest. Subtle, one line at 1440 and two
   on a phone, and a fact rather than a warning: the commit is why no row of
   past rounds can say anything about the next. */
.arc-history-note {
  margin: 0;
  font-size: var(--pickle-text-2xs);
  line-height: 1.5;
  color: var(--pickle-subtle);
}

.arc-fair {
  display: grid;
  gap: var(--pickle-space-3);
  max-width: 62ch;
}

/* ==================================================================== phone */

/* Under 1024px the rail comes out from beside the picture and goes under it, in
   flow, because a 23rem column on a 768px screen is half the picture. The
   picture takes 40dvh: measured at 375 by 812 that is 325px, which leaves the
   console, its stake box and the cash-out button entirely above the fold, and
   the cash-out button is the one control on this site where being below the
   fold costs a round. */
@media (max-width: 1023px) {
  .arc-table {
    grid-template-columns: minmax(0, 1fr);
    height: auto;
  }

  .arc-curve-wrap { flex: 0 0 auto; height: min(var(--arc-stage-phone), 40dvh); }

  .arc-rail {
    height: auto;
    overflow: visible;
    border-left: 0;
    border-top: 1px solid var(--pickle-line);
  }

  .arc-lobby { overflow: visible; }

  .arc-deck-crash { padding-inline: var(--pickle-gutter); }
}

@media (max-width: 639px) {
  /* Eight cells, not twelve. At 375 a twelfth of the band is 30px and a crash
     point is five to seven characters of mono, so the row either clipped its
     own figures or wrapped to three lines under the picture. The four dropped
     are the OLDEST, because the band is newest first. */
  .arc-chip:nth-child(n+9) { display: none; }

  .arc-figure-line { max-width: 100%; }
  /* TWO ROWS, NOT THREE. The box takes the full width on its own line and the
     two buttons share the next one: Max is three letters and never needs more
     than it asks for, so the send keeps the rest. Stacked one per row instead,
     the slip was three full-width slabs and pushed the cash-out button, the one
     control on this site where being below the fold costs a round, off a 375 by
     812 screen. */
  .arc-slip-row { grid-template-columns: auto minmax(0, 1fr); }
  .arc-slip-in { grid-column: 1 / -1; }
  .arc-slip-row .ex-btn { white-space: normal; }
  .arc-card { padding: var(--pickle-space-4); }
}

/* =================================================================== motion */

/* Same contract as shared-ui/motion.css: every rule with a duration lives under
   the reduced-motion gate. Under reduce, base.css zeroes every duration and all
   of this sits at its end state, which is a designed page and not a broken one:
   the tube is lit, the screen is open, the plates are in place and the CURVE
   STILL DRAWS ITS WHOLE SHAPE. What reduced motion takes away is the smoothing
   between frames and the white flash at the crash, so the same picture arrives
   in the chain's own steps. See components/CrashStage.jsx.
   The tube's own strike is arena.css's `.arc-band .arc-tube` rule, which this
   band matches; arc-screen-on and ex-in-sm are arcade.css's and motion.css's. */
@media (prefers-reduced-motion: no-preference) {
  .arc-curve-wrap {
    animation: arc-screen-on 260ms var(--pickle-ease) 480ms both;
    transform-origin: 50% 50%;
  }

  /* The BAND, never its cells: animating a cell of a 1px-gap grid puts a seam
     through the sheet behind it for the length of the animation. */
  .arc-history { animation: ex-in-sm 480ms var(--pickle-ease) 740ms both; }

  .arc-figure { animation: ex-in-sm 520ms var(--pickle-ease) 700ms both; }
  .arc-cabin { animation: ex-in-sm 480ms var(--pickle-ease) 700ms both; }
  .arc-lobby { animation: ex-in-sm 480ms var(--pickle-ease) 780ms both; }
  .arc-deck-crash { animation: ex-in-sm 480ms var(--pickle-ease) 860ms both; }

  /* The card lands on its own whenever it mounts, which is mid-round, long
     after the page's load choreography has finished. */
  .arc-card { animation: ex-in-sm 380ms var(--pickle-ease) both; }
}