/* Pickle Arcade: the Claw page.
 *
 * arcade.css carries the site register and every token; arena.css carries the
 * band, the lost veil, the link line, the lamp and the notes that all three
 * games share; crash.css carries the facts grid, the settle line and the
 * fairness prose this page reuses (.arc-facts, .arc-fact, .arc-fact-label,
 * .arc-fact-value, .arc-settle, .arc-deck-side, .arc-fair). This sheet loads
 * after all three and carries only what this page asks for: the cabinet and the
 * rail beside it, the figure over the glass, the pad that drives the claw, the
 * console that says the seven things a player must be told before they press,
 * the card that names what the attempt did, and the deck.
 *
 * TOKENS. This sheet declares none. Every --arc-* and --pickle-* value is
 * declared on body[data-app="minigame"] in arcade.css or in shared-ui, and this
 * page's light is VIOLET: .arc-claw on the band sets --arc-light,
 * --arc-light-tube and --arc-light-glow to the claw cabinet's, so the 2px tube
 * along the top edge strikes violet rather than mint without one colour being
 * restated. Violet is the third light beside the arena's mint and Crash's
 * amber, and the three read as one family because they are one mechanism.
 *
 * THE CABINET IS THE ONE MEMORABLE ELEMENT and everything here is arranged to
 * leave it alone. Over the glass sit three things and no more: the banners that
 * say why nothing is enabled, the one display-size figure, and, from 1024 up,
 * the pad, because a claw machine's controls belong on the machine. Everything
 * else is on the page's own ground beside and under the picture.
 *
 * COLOUR, and it is a grammar rather than a palette. Violet is the machine, the
 * claw and the piece you took, because violet is this cabinet's light. Mint is
 * a stake that came back, because on this estate mint is confirmation. Rose is
 * a machine that is stopped or a collection that is finished, because those are
 * the endings nothing recovers from. Amber is every warning in between: a pull
 * nobody seated, a refund owed, a wheel another connection took. White at 55%
 * is a transaction still in flight, because it is none of those yet. Nothing
 * else is coloured at all. */

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

/* The cabinet and the rail. One grid, a definite height, so the canvas has a
   box to fill: the canvas is `position: absolute; inset: 0` inside the glass,
   so if the glass ever loses its height the canvas is a sliver and the page
   looks empty. 64dvh rather than the arena's full --arc-stage, because this
   page's seven sentences are not an optional extra that may sit below the fold.

   `position: relative` is load-bearing from 1024 up: the pad is placed over the
   glass column from here, not from inside it, because the pad is a child of the
   rail in the document so that a phone reads picture, outcome, controls,
   terms in that order. */
.arc-cab {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24rem;
  /* 68dvh rather than the arena's full --arc-stage, and rather than the 64 this
     started at: 64 put the seventh of the seven sentences behind the control
     shelf at 1440 by 900, and the seventh sentence is the one that admits the
     server judges the grab. The deck below is not an optional extra either, so
     this is the largest the picture may be. */
  height: max(24rem, min(var(--arc-stage), 68dvh));
}

/* The glass. 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. */
.arc-cab-glass {
  position: relative;
  isolation: isolate;
  min-width: 0;
  height: 100%;
  overflow: clip;
  background: var(--arc-glass);
}

/* A SCRIM, AND IT IS NOT DECORATION. The cabinet is a lit violet box that fills
   its column, so the figure and the banners at the top left sit over the
   machine's own glowing wall: photographed at 1440 the count's caption ran
   straight across it and the estate's subtle grey had no contrast left. This is
   a ground poured from the corner those words live in, and it is gone before
   the middle of the picture. Under the head (z-index 3), over the canvas
   (z-index 0), and it eats no pointer. */
.arc-cab-glass::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgb(5 5 6 / 86%) 0%, rgb(5 5 6 / 52%) 24%, rgb(5 5 6 / 0%) 46%),
    linear-gradient(to right, rgb(5 5 6 / 70%) 0%, rgb(5 5 6 / 0%) 42%);
}

/* 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.

   `outline: 0` on focus with no visible ring is deliberate and is not a
   keyboard trap: the canvas is role="img", it is not in the tab order (it takes
   tabIndex -1 so the page can hand it focus after a pull), and every control on
   this page is a real button somewhere else. A focus ring on a picture nobody
   can Tab to would be a ring on a thing that is not a control. */
.arc-cab-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  z-index: 0;
  /* Without this a touch drag over the picture scrolls the page. Nothing here
     reads a pointer, but a canvas that moves under a finger reads as a control
     that does not work. */
  touch-action: none;
}

.arc-cab-canvas:focus { outline: 0; }
.arc-cab-canvas:focus-visible { outline: 0; }

/* The instrument rail: page ground beside the glass, so the two read as a
   picture and the panel that explains it rather than as one surface. */
.arc-cab-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);
}

/* =================================================== what sits over the glass */

/* ONE STACK, NOT TWO LAYERS. Crash learned this at 375: banners on their own
   layer with the figure pinned under them at the same offset meant a four-line
   banner covered the figure completely, so the one state that most needs its
   sentence read was the one that hid it. Everything over the picture is in this
   single column, in the order it must be read. */
.arc-cab-head {
  position: absolute;
  top: var(--pickle-space-4);
  left: var(--pickle-space-4);
  right: var(--pickle-space-4);
  z-index: 3;
  display: grid;
  justify-items: start;
  gap: var(--pickle-space-3);
  /* Nothing in this column is a control. A press aimed at the picture must not
     be eaten by the sentence explaining it. */
  pointer-events: none;
}

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

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

/* The page's one display-size figure, in no box at all. Everything else here 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. It says one of two things and
   never both: how many pieces are left, or how long you have.

   LIGHT RATHER THAN A PLATE, and the difference is the whole point. The glass
   scrim above covers the top of the picture, which is where this figure sits
   when nothing is wrong; but a banner over the picture pushes it DOWN, onto the
   cabinet's lit floor, and at 375 the caption under the count was then printed
   over five hundred glowing capsules. So the figure carries its own pool of
   ground, poured from its top left corner and gone before its own right edge.
   No border, no radius, no hard edge anywhere: it is a light the panel is lit
   against, not a panel. */
.arc-count {
  min-width: 0;
  max-width: 100%;
  padding: var(--pickle-space-2) var(--pickle-space-6) var(--pickle-space-3) var(--pickle-space-3);
  margin-left: calc(var(--pickle-space-3) * -1);
  background: radial-gradient(
    115% 125% at 0% 0%,
    rgb(5 5 6 / 92%) 0%,
    rgb(5 5 6 / 78%) 42%,
    rgb(5 5 6 / 0%) 100%
  );
}

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

.arc-count-num { font-size: clamp(2.6rem, 5.4vw, 4.4rem); }

/* The driving budget, in the cabinet's own light: while it is counting it is
   the only number on the page that is about the reader rather than the stock. */
.arc-count-num.arc-count-clock { color: var(--arc-claw); }

/* An empty machine. Rose, because it is the one ending nothing recovers from:
   the supply is a constant of the contract and nothing can mint another piece. */
.arc-count-num.arc-count-empty { color: var(--pickle-rose); }

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

/* No figure at all: a machine that is stopped, a socket that is not answering,
   a cabinet nobody has described yet. The sentence takes the figure's place
   rather than a display-size hyphen taking it. */
.arc-count-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: 26rem;
}

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

/* The budget bar, drawn with an SVG width ATTRIBUTE because `style=` is banned
   in this tree and walked for in the built export. It is under the line rather
   than over the picture: a bar across the glass would read as part of the
   machine, and this is a fact about the reader's own twenty seconds. */
.arc-clock {
  display: block;
  width: min(15rem, 100%);
  height: 4px;
  margin-top: var(--pickle-space-3);
}

.arc-clock-track { fill: rgb(255 255 255 / 12%); }
.arc-clock-run { fill: var(--arc-claw); }

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

/* The plate that says what is true, the seven sentences, and the one button
   this game has. Mono, like every instrument on this site. */
.arc-panel {
  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);
  font-family: var(--pickle-font-mono);
  font-size: var(--pickle-text-xs);
  color: var(--pickle-muted);
  flex: 1 1 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-panel .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 for everyone who has not signed in, everyone who has
   spent every attempt they had, and everyone whose attempt is already open,
   which is most readers most of the time. 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-panel .ex-btn.solid:disabled,
.arc-panel .ex-btn.solid:disabled:hover,
.arc-pad .ex-btn.solid:disabled,
.arc-pad .ex-btn.solid:disabled:hover {
  opacity: 1;
  color: var(--pickle-subtle);
  background: transparent;
  border-color: var(--pickle-line);
  cursor: default;
}

/* What the machine is doing, in a sentence, whenever there is one to make. */
.arc-phase-claw {
  margin: 0;
  font-family: var(--pickle-font);
  font-size: var(--pickle-text-sm);
  line-height: 1.5;
  color: var(--pickle-muted);
}

/* ================================================================ the terms */

/* THE SEVEN SENTENCES ARE NOT A FOOTNOTE AND ARE NOT BEHIND A TOGGLE. They are
   the reason this panel exists and they sit against the button, numbered, in
   the player's own reading order. Two of them make people angry when they are
   discovered afterwards, and those two are marked. */
.arc-terms {
  list-style: none;
  counter-reset: arc-term;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--pickle-space-2);
  border-block: 1px solid var(--pickle-line);
  padding-block: var(--pickle-space-3);
  /* A STACKING CONTEXT OF ITS OWN, AND IT IS LOAD-BEARING. Every `.arc-term` is
     `position: relative` so its number can be absolute, which puts all seven in
     the positioned layer; the control shelf below them is sticky, and a
     screenshot at 1440 caught the two hard terms' violet rules drawn straight
     through the shelf's opaque ground. Pinning the list at z-index 0 puts the
     whole of it under the shelf's 2 in one move, rather than fighting seven
     children one at a time. */
  position: relative;
  z-index: 0;
}

.arc-term {
  counter-increment: arc-term;
  position: relative;
  margin: 0;
  padding-left: 1.6rem;
  font-family: var(--pickle-font);
  font-size: var(--pickle-text-xs);
  line-height: 1.5;
  color: var(--pickle-muted);
}

.arc-term::before {
  content: counter(arc-term);
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--pickle-font-mono);
  font-size: .62rem;
  line-height: 1.9;
  color: var(--pickle-subtle);
  font-variant-numeric: tabular-nums;
}

/* The two that cost money to learn late: the stake buys an attempt, and a miss
   spends one of only two. Brighter text and the cabinet's own light down the
   side, so a reader skimming for the catch finds it rather than the price. */
.arc-term-hard {
  color: var(--pickle-text);
  padding-left: 1.9rem;
  border-left: 2px solid var(--arc-claw);
  margin-left: -.3rem;
}

.arc-term-hard::before { left: .3rem; color: var(--arc-claw); }

.arc-term-num {
  color: var(--pickle-text);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* ============================================================== the control */

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

.arc-counts {
  margin: 0;
  color: var(--pickle-text);
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
}

.arc-pull-row { display: grid; gap: var(--pickle-space-2); }

/* The one control this game has, and it spends 500 PKL and one of the ten
   attempts an account ever gets. Full width, nothing beside it. */
.arc-pull { width: 100%; justify-content: center; }

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

.arc-pull-row + .arc-why { color: var(--pickle-muted); }

/* This browser's own attempt, named on the console as well as on the card. */
.arc-mine-claw {
  margin: 0;
  color: var(--arc-claw);
  font-variant-numeric: tabular-nums;
}

.arc-panel .ex-out { max-width: 100%; margin: 0; }

/* ================================================================== the pad */

/* THE CONTROLS ARE REAL ELEMENTS, at every width, in the flow of the page. A
   claw machine with no visible way to drive it on a phone is a broken page, not
   a degraded one, and "drag the picture" is not a control: it is a thing to
   discover, it fights the page's own scrolling, and it tells a screen reader
   nothing. */
.arc-pad {
  display: grid;
  gap: var(--pickle-space-3);
  padding: var(--pickle-space-4);
  background: var(--arc-plate);
  border: 1px solid var(--pickle-line);
  border-radius: var(--pickle-radius);
  flex: 0 0 auto;
}

/* A cross, laid out by named areas rather than by document order, so the
   document can read away, left, right, towards (which is how the keys are
   named) while the eye gets the shape every player already knows. */
.arc-pad-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-areas:
    ".    away    ."
    "left .       right"
    ".    towards .";
  gap: var(--pickle-space-2);
  max-width: 18rem;
  width: 100%;
  margin-inline: auto;
}

.arc-pad-away { grid-area: away; }
.arc-pad-left { grid-area: left; }
.arc-pad-right { grid-area: right; }
.arc-pad-towards { grid-area: towards; }

/* 2.75rem is 44px: the smallest target this site ships anywhere. */
.arc-pad-key {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-height: 2.75rem;
  padding: var(--pickle-space-2) var(--pickle-space-1);
  color: var(--pickle-text);
  background: var(--pickle-surface-2);
  border: 1px solid var(--pickle-surface-4);
  border-radius: var(--pickle-radius);
  cursor: pointer;
  /* A held button under a finger must not also select its own label, and a
     double tap must not zoom the page out from under the player. */
  user-select: none;
  touch-action: manipulation;
}

.arc-pad-key:disabled {
  color: var(--pickle-subtle);
  background: transparent;
  border-color: var(--pickle-line);
  cursor: default;
}

/* HELD, not hovered. The wire carries an intent, "I am holding left", so the
   key that is down has to look down for as long as the server is integrating
   it: a player holding two keys with two thumbs can see both. */
.arc-pad-on {
  color: var(--pickle-bg);
  background: var(--arc-claw);
  border-color: var(--arc-claw);
}

.arc-pad-label {
  font-family: var(--pickle-font);
  font-size: var(--pickle-text-xs);
  font-weight: 500;
  line-height: 1.2;
}

.arc-pad-hint {
  font-size: .58rem;
  letter-spacing: var(--pickle-tracking-caps);
  text-transform: uppercase;
  color: var(--pickle-subtle);
  line-height: 1.2;
}

.arc-pad-on .arc-pad-hint { color: rgb(10 10 11 / 70%); }

.arc-pad-drop {
  width: 100%;
  justify-content: center;
  min-height: 2.75rem;
}

/* Why nothing is drivable. The drop is the commit, and after it the outcome is
   the server's to report, so the page says that rather than leaving four dead
   buttons and no sentence. */
.arc-pad-why {
  margin: 0;
  font-size: var(--pickle-text-2xs);
  line-height: 1.5;
  color: var(--pickle-subtle);
}

/* ============================================================== the outcome */

/* What the attempt did to you, on a plate at the head of the rail. SEVEN
   OUTCOMES AND NOT ONE OF THEM IS HIDDEN: a claw machine's whole design
   pressure is to draw the win and let every other ending be an absence, and an
   absence is exactly what a player cannot argue with. */
.arc-piece {
  display: flex;
  flex-direction: column;
  gap: var(--pickle-space-3);
  padding: var(--pickle-space-4);
  background: var(--arc-plate-hard);
  border: 1px solid var(--pickle-line);
  border-radius: var(--pickle-radius);
  margin: var(--pickle-space-4) var(--pickle-space-4) 0;
  flex: 0 0 auto;
}

/* 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-piece-won { border-color: rgb(155 107 255 / 62%); }
.arc-piece-miss { border-color: rgb(255 255 255 / 24%); }
.arc-piece-back { border-color: rgb(0 231 136 / 58%); }
.arc-piece-warn { border-color: rgb(244 163 0 / 58%); }

/* THE PICTURE IS THE CHAIN'S: artOf(tokenId) is a pure function on PickleClaw,
   read with one eth_call nobody pays for and rendered from a data: URI, which
   img-src admits. There is no server in that path and no file anywhere, so the
   piece survives this site being switched off. */
.arc-piece-art {
  display: block;
  width: min(13.75rem, 100%);
  height: auto;
  align-self: center;
  background: var(--arc-glass);
  border: 1px solid rgb(155 107 255 / 40%);
  border-radius: var(--pickle-radius);
}

.arc-piece-waiting {
  margin: 0;
  font-size: var(--pickle-text-2xs);
  color: var(--pickle-subtle);
}

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

.arc-piece-num { font-size: var(--arc-read); }
.arc-piece-num.arc-piece-lit { color: var(--arc-claw); }
/* A miss prints the distance the jaws were off by, and that figure is not a
   score: grey, so it reads as a measurement rather than as a prize. */
.arc-piece-num.arc-piece-cold { color: var(--pickle-muted); }

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

.arc-piece-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-piece-line {
  margin: 0;
  font-size: var(--pickle-text-sm);
  line-height: 1.55;
  color: var(--pickle-muted);
}

.arc-piece-meta {
  margin: 0;
  font-size: var(--pickle-text-2xs);
  color: var(--pickle-subtle);
}

.arc-piece-hex { color: var(--pickle-text); overflow-wrap: anywhere; }

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

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

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

/* Under the picture: the machine's own figures, what state it is in, and the
   boundary in plain words. Quiet on purpose. Two columns from 1024 up, because
   one column of 62ch prose under a 1440px picture left half the page empty and
   made the honest half of the page look unfinished. */
.arc-deck-claw {
  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);
}

/* ==================================================================== desks */

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

  /* THE PAD GOES ON THE MACHINE. It is a child of the rail in the document so
     that a phone reads picture, outcome, controls, terms in that order; from
     1024 up the rail is 24rem of instrument beside a wide picture, and the
     controls of a claw machine belong on the claw machine. Placed against
     .arc-cab and inset by the rail's own width, so it never reaches the rail. */
  .arc-pad {
    position: absolute;
    left: var(--pickle-space-4);
    bottom: var(--pickle-space-4);
    right: calc(24rem + var(--pickle-space-4));
    z-index: 3;
    width: min(20rem, 100%);
    background: var(--arc-plate-hard);
  }

  .arc-pad-grid { margin-inline: 0; }

  /* THE CARD GOES ON THE PICTURE, NOT IN THE RAIL, and a screenshot is what
     asked for that too. In the rail it is a 280 px plate at the head of a 576
     px scroller, and at 1440 by 900 it left about a hundred and forty pixels
     for the seven sentences: the one panel a player has to read before they
     spend 500 PKL was reduced to a line and a half of it. Over the picture the
     card is the largest thing on the screen, which is what an outcome deserves,
     and the console keeps its whole column.

     Centred by auto margins inside an inset rather than by a transform, because
     the landing animation ends on `transform: none` and a transform-centred
     card would land off centre. It never reaches the rail: the inset stops at
     the rail's own width. */
  .arc-piece {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 24rem;
    margin: auto;
    z-index: 4;
    width: min(34rem, calc(100% - 26rem));
    height: fit-content;
    max-height: calc(100% - 2rem);
    overflow: auto;
  }

  /* THE PIECE'S PICTURE GOES BESIDE ITS STORY, and this is a height fix before
     it is a composition. Stacked, the won card is the tallest of the seven and
     it was photographed at 1440 clipped through the middle of a sentence, with
     its Close button below the cut and nothing on screen saying the plate could
     scroll. The art beside the text takes about two hundred pixels out of the
     card and puts the piece next to the paragraph that explains where it came
     from, which is where it belonged anyway.

     Every child is column two by default and the art is pulled back into
     column one, so the markup keeps the reading order a phone needs: picture,
     figure, title, sentences. */
  .arc-piece-won {
    display: grid;
    grid-template-columns: 11rem minmax(0, 1fr);
    column-gap: var(--pickle-space-4);
    align-content: start;
  }

  .arc-piece-won > * { grid-column: 2; }

  .arc-piece-won .arc-piece-art {
    grid-column: 1;
    grid-row: 1 / span 99;
    align-self: start;
    width: 100%;
  }

  /* THE ONE BUTTON THIS GAME HAS IS NEVER BELOW THE FOLD, and this rule exists
     because a screenshot found that it was. The seven sentences are not
     negotiable and they are long, so from 1024 up the console is taller than
     the rail it lives in: measured at 1440 by 900 the pull button sat past the
     rail's bottom edge the moment the console gained its phase line, and the
     only way to reach it was to guess that a panel nobody had marked as
     scrollable could scroll. So the count, the button and the sentence saying
     why it is dead stick to the foot of that scroller, on the panel's own
     ground. Only here: under 1024 the rail is not a scroll container at all and
     a sticky child would pin itself to the WINDOW, which would put this game's
     one spending control over the page for the length of the document.

     It cannot reach the live bar or the nav: `.arc-band` isolates, so this
     z-index is spent entirely inside the band. */
  .arc-stack {
    position: sticky;
    bottom: 0;
    z-index: 2;
    padding-top: var(--pickle-space-3);
    background: var(--pickle-bg);
    border-top: 1px solid var(--pickle-line);
  }
}

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

/* Under 1024px the rail comes out from beside the picture and goes under it, in
   flow, because a 24rem column on a 768px screen is half the picture. The
   picture takes 46dvh: measured at 375 by 812 that is 373px, which leaves the
   outcome card, the pad and the first of the seven sentences on the first
   screen, and the pad is the one control on this page a thumb has to reach. */
@media (max-width: 1023px) {
  .arc-cab {
    grid-template-columns: minmax(0, 1fr);
    height: auto;
  }

  /* 40dvh, not 46: the pad now sits directly under the glass, and the two
     together have to fit an 812px phone with the nav above them, or the
     player drives a claw they cannot see. */
  .arc-cab-glass { height: min(var(--arc-stage-phone), 40dvh); min-height: 15rem; }

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

  .arc-pad { margin: var(--pickle-space-4) var(--pickle-gutter); }
  .arc-piece { margin-inline: var(--pickle-gutter); }
  .arc-panel { padding-inline: var(--pickle-gutter); }
  .arc-deck-claw { padding-inline: var(--pickle-gutter); }

  /* THE DEAD PAD GOES LAST AND THE LIVE ONE GOES FIRST, and this is the one
     place on the page where what the eye gets and what the document says are
     deliberately not the same order.

     A screenshot at 375 is what asked for it. The rail is a flex column here,
     the pad is the second of its three children, and a signed-out reader met
     four disabled buttons and "the claw is not yours yet" before a single one
     of the seven sentences or the button that spends 500 PKL. The moment the
     claw IS yours, the opposite is true: twenty seconds is not long enough to
     scroll past seven sentences to find the controls.

     One `order` each, off one literal class ClawPad.jsx sets from `disabled`.
     The document order never moves, so a screen reader always gets outcome,
     controls, terms, and the keyboard drives from anywhere on the page. */
  /* FIRST, ALWAYS. The pad used to come first only once the claw was yours
     and sat under the card and its seven sentences until then - so the
     controls were below the text at the moment a player looked for them, and
     the glass had scrolled away by the time they were found. The pad is the
     first thing under the glass in every state; disabled, its buttons still
     say what they will do. */
  .arc-pad { order: -1; }
}

@media (max-width: 1023px) {
  /* The figure's ground, across rather than out of the corner. The picture is
     374 px tall here, so a banner of any length puts the count and its caption
     squarely on the cabinet's lit floor, and a pool poured from the top left
     runs out before the caption's second line ends. Still no border, no radius
     and no hard edge: it fades to nothing at its own bottom, which is what
     keeps it a light rather than a plate. */
  .arc-count {
    padding-right: var(--pickle-space-3);
    background: linear-gradient(
      to bottom,
      rgb(5 5 6 / 94%) 0%,
      rgb(5 5 6 / 88%) 64%,
      rgb(5 5 6 / 0%) 100%
    );
  }
}

@media (max-width: 639px) {
  .arc-count-line { max-width: 100%; }
  .arc-cab-head { left: var(--pickle-space-3); right: var(--pickle-space-3); }
  .arc-piece { padding: var(--pickle-space-3); }
  /* .ex-btn is nowrap, and "Deposit to play" inside a full-width button on a
     375px screen was clipped to "posit to pla" on the wallet page for exactly
     this reason. The one button this game has must never be readable only in
     part. */
  .arc-pull, .arc-pad-drop { white-space: normal; }
}

/* ================================================================ the shelf
 * THE WALLET PAGE'S CAPSULES, and the only rules in this sheet another page
 * reads. The wallet shows what the claw machine gave this account, each piece
 * still in the capsule it came out in, and opening one is the whole gesture:
 * the shell splits at its seam and the two halves rotate apart on that one
 * axis until they are edge on, and what is behind them is the piece.
 *
 * WHAT IS INSIDE IS THE CONTRACT'S, NOT THIS SHEET'S. `artOf(piece)` composes
 * the drawing from the piece's own index: a shell colour, a core shape inside
 * the shell, an ink colour and a row of pips. So the capsule here IS that
 * shell, and the five colours below are that function's five shell colours and
 * nothing else. Which one a capsule wears is read back off the art the chain
 * returned (components/ClawCapsule.jsx), so a capsule and the piece it opens
 * onto cannot disagree.
 *
 * NO WEBGL ON THE MONEY PAGE. This is a real perspective, a real rotation about
 * a real axis and a real depth, and it costs no renderer, no resize path, no
 * context-loss path and none of the browser's sixteen WebGL contexts, which the
 * arena and the claw cabinet are already competing for. The reasoning is in
 * full at the head of components/ClawCapsule.jsx. */

.arc-shelf .ex-h3-label {
  font-family: var(--pickle-font-display);
  font-size: var(--pickle-text-2xl);
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: var(--pickle-leading-display);
  color: var(--pickle-text);
}

.arc-shelf {
  display: grid;
  gap: var(--pickle-space-4);
  margin-bottom: var(--pickle-space-5);
  padding-top: var(--pickle-space-5);
  border-top: 1px solid var(--pickle-line);
}

/* Every sentence the shelf says when it is not showing a piece: reading, not
   known, none yet, and the note under the capsules. One class, because they are
   one voice and not one of them is a warning. */
.arc-cap-note {
  margin: 0;
  max-width: 62ch;
  font-size: var(--pickle-text-sm);
  line-height: 1.55;
  color: var(--pickle-muted);
}

/* AN EMPTY SHELF IS NOT A FAILED ONE. Most accounts hold nothing, and the state
   they land in is drawn rather than left blank: an unlit capsule, what the
   machine is, and the way to it. */
.arc-shelf-empty {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pickle-space-5);
}

.arc-shelf-empty-say {
  display: grid;
  justify-items: start;
  gap: var(--pickle-space-4);
  flex: 1 1 18rem;
  min-width: 0;
}

/* The capsule nobody has won: the same circle and the same seam, unlit. */
.arc-cap-ghost {
  flex: 0 0 auto;
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 50%;
  border: 1px solid var(--pickle-line);
  background: linear-gradient(
    180deg,
    rgb(255 255 255 / 3%) 0%,
    rgb(255 255 255 / 3%) calc(50% - 1px),
    var(--pickle-line) calc(50% - 1px),
    var(--pickle-line) calc(50% + 1px),
    transparent calc(50% + 1px)
  );
}

.arc-caps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--pickle-space-5);
}

/* 17rem is 272px, which holds the 200px drawing at its own size with air, and
   shrinks to the column on a 375px phone rather than forcing a scrollbar. */
.arc-cap-slot {
  display: grid;
  justify-items: start;
  gap: var(--pickle-space-3);
  flex: 1 1 15rem;
  max-width: 20rem;
  min-width: 0;
}

/* The stage. The perspective lives here and nowhere else, so the halves rotate
   in a real one rather than in an orthographic fake. No overflow is set on this
   box or on the shell: `overflow` on either would flatten the 3D. */
.arc-cap {
  position: relative;
  width: 100%;
  max-width: 20rem;
  aspect-ratio: 1;
  perspective: 760px;
  perspective-origin: 50% 46%;
  border: 1px solid var(--pickle-line);
  border-radius: var(--pickle-radius);
  background:
    radial-gradient(120% 90% at 50% 4%, rgb(255 255 255 / 5%), transparent 56%),
    var(--arc-glass);
}

/* The five shells the contract draws, and no sixth. Mint, amber, the claw
   cabinet's own violet, rose and white: `_shellHex` in PickleClaw.sol has
   exactly these and they are all the estate's own. */
.arc-cap-mint  { --cap-shell: #00e788; --cap-glow: rgb(0 231 136 / 34%); }
.arc-cap-amber { --cap-shell: #f4a300; --cap-glow: rgb(244 163 0 / 34%); }
.arc-cap-claw  { --cap-shell: #9b6bff; --cap-glow: rgb(155 107 255 / 34%); }
.arc-cap-rose  { --cap-shell: #ff5c5c; --cap-glow: rgb(255 92 92 / 34%); }
.arc-cap-white { --cap-shell: #ffffff; --cap-glow: rgb(255 255 255 / 28%); }

/* The light the capsule stands in, so it is an object on a floor and not a
   sticker on a panel. */
.arc-cap::after {
  content: "";
  position: absolute;
  left: 27%;
  bottom: 7%;
  width: 46%;
  height: 7%;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--cap-glow), transparent);
}

/* What the shell is hiding. Clipped, which is free here because nothing in it
   is three-dimensional. */
.arc-cap-well {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: clip;
  border-radius: var(--pickle-radius);
}

.arc-cap-bloom {
  position: absolute;
  width: 86%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, var(--cap-glow) 0%, transparent 62%);
  opacity: 0;
}

.arc-cap-open .arc-cap-bloom { opacity: .5; }

/* The piece, straight off the chain as a data: URI, which img-src admits.
   The hairline is not decoration: the drawing carries its own #050506 ground,
   which is the stage's colour too, so without a frame its 200 by 200 square
   showed as an accidental rectangle wherever the stage's own top light fell
   across it. Framed, it reads as what it is: the document the chain returned.
   .arc-piece-art on the claw page frames it for the same reason. */
.arc-cap-art {
  position: relative;
  display: block;
  border: 1px solid var(--pickle-line);
  width: 60%;
  max-width: 11rem;
  height: auto;
  border-radius: var(--pickle-radius);
  opacity: 0;
  transform: scale(.52);
}

/* A piece whose picture would not read. The capsule stays shut and its button
   is dead, so this is only ever seen if one was opened before a later read
   failed. */
.arc-cap-gap {
  position: relative;
  width: 60%;
  aspect-ratio: 1;
  border: 1px solid var(--pickle-line);
  border-radius: var(--pickle-radius);
  opacity: 0;
}

.arc-cap-open .arc-cap-art,
.arc-cap-open .arc-cap-gap { opacity: 1; transform: none; }

/* The shell: one 3D context, two halves, one axis. Inset so the halves have air
   to tip into and never reach the stage's frame. */
.arc-cap-shell {
  position: absolute;
  inset: 8%;
  transform-style: preserve-3d;
  pointer-events: none;
}

/* Each half carries its own rim, so the seam is where the two rims meet rather
   than a third element pretending to be a join. The outer glow is the light
   inside the capsule leaking past the shell. */
.arc-cap-half {
  position: absolute;
  left: 0;
  right: 0;
  height: 50%;
  background:
    radial-gradient(120% 140% at 32% 14%, rgb(255 255 255 / 11%), transparent 62%),
    linear-gradient(165deg, rgb(255 255 255 / 7%) 0%, transparent 58%),
    #0c0c0f;
  box-shadow:
    inset 0 0 0 2px var(--cap-shell),
    inset 0 0 26px -8px var(--cap-glow),
    0 0 34px -12px var(--cap-glow);
}

.arc-cap-lid {
  top: 0;
  transform-origin: 50% 100%;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}

.arc-cap-base {
  bottom: 0;
  transform-origin: 50% 0;
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
}

/* The highlight that makes the shut capsule read as a sphere rather than as a
   disc. On the lid only: the light on this page comes from above. */
.arc-cap-lid::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(38% 34% at 33% 22%, rgb(255 255 255 / 24%), transparent 66%);
}

/* OPEN IS THE END STATE AND CARRIES NO DURATION. A capsule this browser has
   opened before mounts here directly, and so does every capsule under reduced
   motion. 94 degrees is just past edge on: the halves project to a sliver at
   the seam and the piece behind them is whole. */
.arc-cap-open .arc-cap-lid { transform: translateY(-76%) rotateX(74deg); }
.arc-cap-open .arc-cap-base { transform: translateY(76%) rotateX(-74deg); }

/* The piece's number, in the door's own figure vocabulary: this shelf is on the
   wallet page and must speak the page it is on. */
.arc-cap-id { gap: var(--pickle-space-2); }

/* .arc-unit's caps tracking is for a symbol beside a balance, PKL, and it set
   "of 500" as spaced capitals with a hole in the middle. The figure keeps the
   door's vocabulary; only the letter fit changes. */
.arc-cap-id b .arc-unit { letter-spacing: normal; }

.arc-cap-line {
  margin: 0;
  max-width: 34ch;
  font-size: var(--pickle-text-xs);
  line-height: 1.55;
  color: var(--pickle-muted);
}

/* The one line here that is not about a picture: a read that did not answer.
   Amber, because the piece is still the player's and nothing was lost. */
.arc-cap-cold { color: var(--pickle-amber); }

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

/* Under 420px the button takes two lines rather than be clipped, which is the
   defect the wallet page's own actions were fixed for. */
@media (max-width: 420px) {
  .arc-cap-actions .ex-btn { white-space: normal; }
}

/* =================================================================== 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 glass is open, the plates are in place and THE CABINET
   STILL DRAWS AND STILL TRACKS THE CLAW. What reduced motion takes away is the
   drifting camera and the ambient sway inside the picture (see lib/claw-gl.js)
   and the plates' entrance out here. 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-cab-glass {
    animation: arc-screen-on 260ms var(--pickle-ease) 480ms both;
    transform-origin: 50% 50%;
  }

  .arc-count { animation: ex-in-sm 520ms var(--pickle-ease) 700ms both; }
  .arc-pad { animation: ex-in-sm 480ms var(--pickle-ease) 760ms both; }
  .arc-panel { animation: ex-in-sm 480ms var(--pickle-ease) 700ms both; }
  .arc-deck-claw { animation: ex-in-sm 480ms var(--pickle-ease) 860ms both; }

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

  /* AND IT LEAVES THE WAY IT ARRIVED. From 1024 up this plate is absolutely
     over the glass (see `.arc-piece` in the layout block above), so it is the
     one thing standing between a player and the cabinet: once the pull it
     belongs to is over it goes on its own, and the machine is a machine again.
     The mirror of ex-in-sm rather than a fade, so the two moves read as one
     gesture and its reverse, and an ATTRIBUTE selector rather than a class
     because the class-existence test reads literal class attributes and a name
     built beside cardClass(kind) would be a name nothing checks.

     Specificity, not order, is what makes this win: 0,2,0 against the rule
     above it. pages/claw.jsx clears the card's state after the same 320 ms,
     from a timer and not from animationend - under `reduce` this whole block
     is absent and no event would ever come. */
  .arc-piece[data-going="1"] {
    animation: arc-piece-out 320ms var(--pickle-ease) both;
    pointer-events: none;
  }

  @keyframes arc-piece-out {
    from { opacity: 1; transform: none; }
    to { opacity: 0; transform: translateY(8px); }
  }

  /* NOTHING ANIMATES A HELD KEY. The first draft pulsed it with the estate's
     `pickle-pulse`, which fades to 35 per cent and back: on this site that
     gesture means "out and not yet answered", and it is what the in-flight lamp
     does. A key that is down is not uncertain, it is down, and the server is
     integrating it. Fading it would have said the opposite of the truth in the
     one place a player is looking while they drive. The held state is a solid
     violet fill and it does not move. */

  /* ----------------------------------------------- the wallet page's capsule

     THE GESTURE, AND ITS BEAT. A reveal that is over before the eye lands on
     it is the failure to avoid here, so this is staged rather than crossfaded
     and it runs for about 1.7 seconds:

       0 to 320      the shell jolts, the way a capsule does when the catch
                     lets go. Nothing has opened yet
       300 to 1300   the lid rotates off the seam; 360 to 1360 the base does
       640 to 1640   the light inside comes up, overshooting once
       760 to 1700   the piece rises into it and settles

     Between the halves parting and the light coming up there is a beat of
     about a fifth of a second in which the capsule is open and DARK. That is
     deliberate: it is the moment the reveal needs, and filling it makes the
     whole thing read as one fast wipe.

     ONLY `arc-cap-play` CARRIES A DURATION. `arc-cap-open` is the end state and
     is what a remembered capsule, and every capsule under reduced motion,
     mounts in: no jolt, no rotation, the piece simply there. That is also why
     the keyframes below end exactly where the static open rules sit. */
  .arc-cap-play .arc-cap-shell { animation: arc-cap-jolt 320ms var(--pickle-ease) both; }
  .arc-cap-play .arc-cap-lid { animation: arc-cap-lid 1000ms var(--pickle-ease) 300ms both; }
  .arc-cap-play .arc-cap-base { animation: arc-cap-base 1000ms var(--pickle-ease) 360ms both; }
  /* EASE-IN-OUT ON THESE TWO AND THE ESTATE'S OWN CURVE ON EVERYTHING ELSE,
     and the difference was measured rather than felt. --pickle-ease is
     cubic-bezier(.16, 1, .3, 1), a settle curve: it is 87 per cent of the way
     through its travel in the first tenth of its duration. On an arrival that
     is exactly right, and on a REVEAL it is the failure this whole gesture
     exists to avoid. Measured in the harness, the piece was at 0.87 opacity
     sixty milliseconds after it started, inside a gesture that runs for 1.7
     seconds: over before the eye lands on it. The bloom and the piece are the
     only two rules here that have to BUILD rather than settle, so they are the
     only two that do not use it. The shell's own release keeps it, because a
     catch letting go should snap and then drift. */
  .arc-cap-play .arc-cap-bloom { animation: arc-cap-bloom 1000ms ease-in-out 640ms both; }
  .arc-cap-play .arc-cap-art,
  .arc-cap-play .arc-cap-gap { animation: arc-cap-piece 940ms ease-in-out 760ms both; }

  /* The shut capsule's own light, moving just enough that it reads as an object
     with something in it rather than as a printed circle. It stops the moment
     the capsule is open, where the lid is edge on and there is nothing to
     light. */
  .arc-cap-lid::after { animation: arc-cap-sheen 6200ms ease-in-out infinite alternate; }
  .arc-cap-open .arc-cap-lid::after { animation: none; }

  /* The shelf arrives after the door, which is arcade.css's own 520ms. */
  .arc-shelf { animation: ex-in-sm 480ms var(--pickle-ease) 640ms both; }

  @keyframes arc-cap-jolt {
    0% { transform: rotate(0deg); }
    22% { transform: rotate(-1.1deg); }
    52% { transform: rotate(1.4deg); }
    78% { transform: rotate(-.6deg); }
    100% { transform: rotate(0deg); }
  }

  @keyframes arc-cap-lid {
    from { transform: translateY(0) rotateX(0deg); }
    to { transform: translateY(-76%) rotateX(74deg); }
  }

  @keyframes arc-cap-base {
    from { transform: translateY(0) rotateX(0deg); }
    to { transform: translateY(76%) rotateX(-74deg); }
  }

  @keyframes arc-cap-bloom {
    0% { opacity: 0; transform: scale(.48); }
    46% { opacity: .92; transform: scale(1.1); }
    100% { opacity: .5; transform: scale(1); }
  }

  @keyframes arc-cap-piece {
    0% { opacity: 0; transform: scale(.52) translateY(9%); }
    58% { opacity: 1; transform: scale(1.05) translateY(-2%); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
  }

  @keyframes arc-cap-sheen {
    from { opacity: .7; }
    to { opacity: 1; }
  }
}