/**
 * MIDAS SPIN — THE BOARD'S OWN STYLESHEET.
 *
 * IT LIVES HERE RATHER THAN INSIDE THE TEMPLATE, AND THAT IS NOT TIDINESS.
 * The estate's copy pin walks resources/views and lints RENDERED COPY: it
 * strips comments, blade echoes and tags, and what is left is read as prose a
 * member sees. A style block is none of those things, so a 20KB stylesheet
 * inlined in a view arrives at the pin as sentences — and this board's colour
 * reasoning, which necessarily discusses what coins look like beside what cash
 * looks like, was convicted as member copy putting the two nouns in one line.
 *
 * The conviction was right about the file and wrong about the subject, and the
 * honest fix is not to blunt the pin or reword the reasoning: it is to stop
 * keeping a stylesheet in a copy file. The view now holds markup and the lines
 * this board says; this holds how it looks.
 *
 * NOT BUILT BY VITE, DELIBERATELY. resources/ belongs to a concurrent
 * front-end programme, and public/arcade-reveal-floor.js is the standing
 * precedent for a board asset served straight. The view cache-busts it on
 * filemtime.
 */

/* -- brand faces, self-hosted, the same files the platform ships ---------- */
@font-face{font-family:Archivo;src:url(/fonts/archivo-latin-800-normal.woff2) format('woff2');font-weight:800;font-display:swap}
@font-face{font-family:Archivo;src:url(/fonts/archivo-latin-900-normal.woff2) format('woff2');font-weight:900;font-display:swap}
@font-face{font-family:'Hanken Grotesk';src:url(/fonts/hanken-grotesk-latin-400-normal.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Hanken Grotesk';src:url(/fonts/hanken-grotesk-latin-500-normal.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Hanken Grotesk';src:url(/fonts/hanken-grotesk-latin-700-normal.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Space Mono';src:url(/fonts/space-mono-latin-400-normal.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Space Mono';src:url(/fonts/space-mono-latin-700-normal.woff2) format('woff2');font-weight:700;font-display:swap}

:root{
  /* the picture's palette - sampled from the artwork, never brand tokens */
  --gold:#f0cf5a; --gold-deep:#c8901f; --gold-dark:#7d5512; --gold-pale:#fff6d4;
  --marble:#9aa0ab;

  /* the platform's palette - resources/brand-tokens.json, verbatim */
  --base:#0a0b10; --surface:#0f1117; --card:#13151d;
  --line:rgba(255,255,255,0.08); --line2:rgba(255,255,255,0.14);
  --lime:#c6ff3a; --lime-press:#8fe61f; --lime-ink:#0a0b10;
  --win:#fbbf24; --win-press:#f59e0b;
  --text:#f4f5f8; --ink:#f4f5f8; --muted:#9aa0ad; --muted-dim:#8b92a0;

  --sans:'Hanken Grotesk',system-ui,-apple-system,sans-serif;
  --disp:Archivo,var(--sans); --mono:'Space Mono',ui-monospace,monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;padding:0;min-height:100%;
  font-family:var(--sans);color:var(--ink);
  background:radial-gradient(120% 60% at 50% -10%, #14161f 0%, #0d0e14 46%, transparent 74%), var(--base);
  background-attachment:fixed;
}
.page{max-width:460px;margin:0 auto;padding:20px 16px 56px;position:relative;z-index:1}
@media (min-width:600px){.page{padding-block:34px 64px}}

/* -- masthead ------------------------------------------------------------- */
.eyebrow{margin:0;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:var(--lime)}
.masthead h1{margin:6px 0 0;font-family:var(--disp);font-weight:900;font-size:26px;letter-spacing:-.02em;line-height:1.05}
.masthead .sub{margin:8px 0 0;font-size:13px;line-height:1.5;color:var(--muted)}

/* -- the tile - entry point ----------------------------------------------- */
.slot{margin-top:22px;position:relative}
/* VISIBLE HEADROOM (constraint set §5). Same treatment as .masthead .sub -
   this is informational chrome, not part of the artwork or the act. */
.slot-headroom{margin:10px 2px 0;font-size:11px;line-height:1.4;color:var(--muted);text-align:center}
.slot-headroom strong{color:var(--text);font-weight:700}
.tile{
  display:block;width:100%;padding:0;border:0;cursor:pointer;
  position:relative;aspect-ratio:3/4;overflow:hidden;border-radius:16px;
  background:#0d0a06;text-align:left;color:inherit;font:inherit;
  box-shadow:0 0 0 1px var(--line2), 0 26px 60px -28px #000;
  transition:transform .35s cubic-bezier(.2,.8,.3,1), box-shadow .35s, opacity .3s;
}
.tile:hover{transform:translateY(-3px);box-shadow:0 0 0 1px rgba(198,255,58,.55), 0 34px 70px -26px #000}
.tile:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 34%}
.tile-scrim{position:absolute;inset:0;background:linear-gradient(180deg, rgba(8,9,13,.55) 0%, transparent 22%, transparent 38%, rgba(8,9,13,.9) 78%, rgba(8,9,13,.98) 100%)}
.tile-free{
  position:absolute;top:12px;left:12px;z-index:2;
  font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--lime-ink);background:var(--lime);padding:5px 9px;border-radius:999px;box-shadow:0 2px 10px -2px rgba(0,0,0,.7);
}
/* THE FOOT IS ONE ROW, NOT TWO OVERLAPPING LAYERS - carried from the
   baseline, because the collision it prevents is a property of the layout and
   not of the picture behind it. */
.tile-foot{position:absolute;left:14px;right:14px;bottom:13px;z-index:2;display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.tile-words{min-width:0}
/* the headline is a cash figure and CASH HAS NO COLOUR (VOICE-028) */
.tile-ceiling{display:block;max-width:62%;font-family:var(--disp);font-weight:900;font-size:22px;line-height:1.1;color:var(--text);text-shadow:0 2px 14px rgba(0,0,0,.95), 0 0 26px rgba(0,0,0,.8)}
.tile-meta{display:block;margin-top:5px;font-size:12px;color:#d8cdb8;text-shadow:0 1px 8px rgba(0,0,0,.95)}
.tile-cta{
  position:static;flex:none;white-space:nowrap;
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--lime-ink);background:var(--lime);border:0;border-radius:999px;padding:7px 13px;
}
.game[hidden],.slot[hidden]{display:none}

/* =========================================================================
   THE MACHINE IS ONE OBJECT: THE GLASS AND THE DECK UNDER IT.
   MACHINE-STATES 3 draws the cabinet as glass over deck; its 4 puts the
   honesty line in the machine's own stack rather than in the page below it.
   Inside the glass it would be covered by the ending card at exactly the
   moment the reveal is most game-like; below the glass and inside the same
   box it is never covered by anything, in any state.
   ========================================================================= */
.machine{
  position:relative;margin-top:22px;border-radius:16px;overflow:hidden;
  background:var(--surface);
  box-shadow:0 0 0 1px var(--line2), 0 30px 70px -30px #000;
  transition:box-shadow .55s ease, transform .55s cubic-bezier(.2,.8,.3,1);
}
.stage{
  /* THE PLAQUE IS CARVED INTO THE ARTWORK AND CANNOT MOVE, so the chrome
     moves instead. Both figures are scan readings off midas-flip-key-art.jpg
     (896x1152), not estimates: the marble slab occupies y 0.040..0.268 and
     x 0.203..0.795 of the frame. Unlike the dragon's, this plaque is CENTRED
     and nearly six tenths of the width, so there is no usable column beside
     it - the HUD therefore clears it DOWNWARD rather than sideways, and the
     one number that decides where is --plaque-h. */
  --plaque-h:26.8%;
  --turn:1;            /* the coin's scaleX. 1 face-on, 0 edge-on, -1 reversed */
  --gold-a:0%;         /* the transformation front: inner (opaque) stop */
  --gold-b:0%;         /* the transformation front: outer (feathered) stop */
  --gold-spot:0%;      /* the one object that keeps the touch, on a sub-play */
  --coin-stone:0;      /* the coin itself letting go of its gold */
  --rim:0;             /* the coin's edge, brightest when the face is thinnest */
  --stone:0;           /* the hall colder than it started */
  --flash:0; --tone:0; --tone-col:transparent; --shimmer:1;
  position:relative;width:100%;aspect-ratio:896/1152;overflow:hidden;
  border-radius:16px 16px 0 0;background:#08070b;isolation:isolate;touch-action:manipulation;
  user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;
}
.camera{
  position:absolute;inset:0;will-change:transform;transform-origin:52% 52%;
}
.art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* =========================================================================
   THE TRANSFORMATION FRONT IS THE ARTWORK ITSELF, GRADED.

   midas-flip-gold.jpg is the same picture with its luminance mapped through a
   struck-gold ramp, generated at build time from the key art. Revealing it
   through a growing radial mask centred on the coin is not a tint over a
   scene - it IS the hall turning to gold, object for object: the curtains,
   the lyre, the apples, the marble. Nothing here is a particle pretending.

   The mask is a percentage-stop radial with no explicit size, so its 100% is
   the farthest corner from the coin and every stop below is resolution
   independent. The scan makes the two numbers that matter readable: the coin
   FACE lands at 21.8% of that radius and its corona at 30.0%, which is why
   the stake-back ending holds the front at 24% and not at a value somebody
   liked the look of.
   ========================================================================= */
.gold,.stone-layer{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  pointer-events:none;
}
.gold{
  /* --gold-o IS THE REDUCED-MOTION CHANNEL AND IT DEFAULTS TO 1, so the full
     path is untouched. At full motion the touch arrives as a FRONT: the mask
     grows from the coin and the edge travels the hall. Under reduced motion an
     edge crossing the frame is movement in space (BUILD-268), so the mask is
     opened to its full extent at once and the gold is brought up on THIS
     instead - the hall becomes gold where it stands. */
  opacity:var(--gold-o, 1);
  -webkit-mask-image:radial-gradient(circle at 52.19% 52.05%, #000 var(--gold-a), transparent var(--gold-b));
  mask-image:radial-gradient(circle at 52.19% 52.05%, #000 var(--gold-a), transparent var(--gold-b));
}
/* =========================================================================
   THE PREVIOUS STATE, LAID OVER THE NEXT ONE AND FADED OUT (VOICE-032).

   Under reduced motion a drain may not move its boundary, at any speed or in
   any number of jumps - the release used to discretise the front into five
   increments, and a boundary moved in five steps is a boundary that moves.
   So a drain is a short run of FIXED RESTING STATES, each a set of objects,
   and the step from one to the next is a cross-fade.

   THE CONSTRUCTION ONLY WORKS BECAUSE THE STATES ARE NESTED. The smaller set
   is held on the main gold layer; the larger set is laid over it on THIS
   layer at full opacity, and faded out. Every pixel inside the smaller set is
   gold on both layers and does not change. Every pixel inside the larger set
   and outside the smaller one changes colour where it stands. No pixel is
   ever covered by a moving edge, at any instant.

   IT DEFAULTS TO INVISIBLE, so the full-motion path never sees it.
   ========================================================================= */
.gold-prev{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;
  opacity:var(--gold-po, 0);
  -webkit-mask-image:radial-gradient(circle at 52.19% 52.05%, #000 var(--gold-pa, 0%), transparent var(--gold-pb, 0%));
  mask-image:radial-gradient(circle at 52.19% 52.05%, #000 var(--gold-pa, 0%), transparent var(--gold-pb, 0%));
}
/* the second front: one object that keeps the touch when the rest lets go.
   Its own layer rather than a second stop on the first, because two mask
   gradients composited is a feature with three spellings across engines and
   this is one line either way. */
.gold-spot{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;
  -webkit-mask-image:radial-gradient(circle at 84.5% 75.5%, #000 var(--gold-spot), transparent calc(var(--gold-spot) + 5%));
  mask-image:radial-gradient(circle at 84.5% 75.5%, #000 var(--gold-spot), transparent calc(var(--gold-spot) + 5%));
}
/* THE SECOND CHALICE, for the second rung below one play (A1). The mirror of
   the goblet above, on the left of the heap - the scan of the key art puts
   its cup and bowl at x 0.036..0.218, y 0.64..0.80, centre x 0.127 y 0.72.
   Its own layer for the same reason the first has one. */
.gold-spot-l{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;
  -webkit-mask-image:radial-gradient(circle at 12.7% 72%, #000 var(--gold-spot-l, 0%), transparent calc(var(--gold-spot-l, 0%) + 5%));
  mask-image:radial-gradient(circle at 12.7% 72%, #000 var(--gold-spot-l, 0%), transparent calc(var(--gold-spot-l, 0%) + 5%));
}
/* THE NAME, for the top tier of the coin ladder only (A2). A gold copy clipped
   to the plaque's scanned rectangle and faded in - a state of one object, not
   a front, so it is the same construction at both motion levels. The inset is
   written from SCENE at boot rather than here, so the plaque's numbers live in
   one place. */
.gold-plaque{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;
  opacity:var(--plaque-gold, 0);
}
/* the hall colder than it started. Full frame, no mask - the no-win is not a
   place on the map, it is the whole room. */
.stone-layer{opacity:var(--stone);transition:opacity .1s linear}

/* THE COIN IS A THIRD MASKED COPY OF THE SAME IMAGE, so it can turn through
   its own rim independently of the hall it hangs in. Scaling the element on X
   scales its mask with it, so the disc squashes to a bright vertical rim at
   --turn 0 and comes round the other side at -1 - which is what a coin does
   and what .mobj-coin exists to assert. The gold copy sits over it so the
   coin can hold its gold when the hall lets go. */
/* THE COIN DULLS BY GAINING STONE, NOT BY LOSING GOLD - and the first build
   had it the wrong way round, which the shots caught. The artwork's own coin
   is ALREADY a blazing gold disc, so fading OUT a gold-graded copy of it
   leaves a blazing gold disc: the no-win and the stake-back came out looking
   like the same ending, which is precisely the failure the distinguishable-
   shape rule exists to prevent. The stone copy is the positive statement, and
   a positive statement is what an ending needs. */
.turn-coin,.turn-coin-stone{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  pointer-events:none;will-change:transform;
  transform-origin:52.19% 52.05%;
  transform:scaleX(var(--turn));
  -webkit-mask-image:radial-gradient(circle at 52.19% 52.05%, #000 20.5%, rgba(0,0,0,.55) 25%, transparent 31%);
  mask-image:radial-gradient(circle at 52.19% 52.05%, #000 20.5%, rgba(0,0,0,.55) 25%, transparent 31%);
}
.turn-coin-stone{opacity:var(--coin-stone)}
/* =========================================================================
   WHY EVERY SCENE LAYER ON THIS PAGE IS PREFIXED `turn-`.

   THE GENERAL OBJECTS BRING A CSS VOCABULARY WITH THEM AND NOTHING GUARDS IT.
   The baseline's card carries .card-amount.coin, .cash, .even and .quiet, and
   those class names are GENERAL - they are the same on all four boards by
   law, because 9.3 makes the cash state identical and 7.1 makes the bands
   identical. The scene, by contrast, is each board's own.

   This page named its turning coin layer `.coin`, which is the obvious name
   for it, and `.coin { position:absolute; inset:0; height:100% }` then
   captured `.card-amount.coin` - the amber coin figure on the ending card.
   The amount became an absolutely positioned 147px box laid over its own
   sentence, in three endings out of seven, and NOTHING WARNED: the page threw
   no error, the CSS parsed, and the only symptom was a screenshot that looked
   wrong.

   The dragon never met this because a dragon's layers are .seam, .throat and
   .eye-lid, which happen not to collide. That is luck, not design. So the
   rule for this set: A SCENE LAYER NEVER TAKES A BARE NOUN THAT THE CARD
   VOCABULARY ALREADY USES. Carried to the report as a finding about the
   general/specific split rather than fixed only here.
   ========================================================================= */
/* THE HOLE THE COIN LEAVES WHEN IT TURNS EDGE-ON.

   The artwork's own coin is painted into .art and cannot be moved, so a
   turning copy on top of it would squash to a rim while the original sat
   there full-face underneath - the single most obvious way this mechanic
   could have failed. This layer covers the painted coin with the vortex that
   is behind it, masked a shade wider than the coin's corona (the scan puts
   the face at 20.5% and the corona at 31% of the mask radius), and .coin sits
   over it. At --turn 1 the coin covers the hole completely; at 0 the hole is
   what you see, which is correct - a coin edge-on shows you the room. */
.turn-hole{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 52.19% 52.05%,
    rgba(96,62,16,.98) 0%, rgba(120,80,24,.98) 42%, rgba(150,104,34,.92) 68%, rgba(168,120,44,.55) 88%, transparent 100%);
  -webkit-mask-image:radial-gradient(circle at 52.19% 52.05%, #000 21.5%, rgba(0,0,0,.6) 26%, transparent 32%);
  mask-image:radial-gradient(circle at 52.19% 52.05%, #000 21.5%, rgba(0,0,0,.6) 26%, transparent 32%);
}
/* the rim. A two-face object vanishes at 90 degrees and this one must not: a
   hot edge is drawn across the coin's own centre line, brightest exactly when
   the face is thinnest. --rim is set from JS rather than derived in CSS with
   abs(), which is too recent to rely on in the browser these frames are
   reviewed in - and a rim that silently fails to compute is a coin with no
   rim, which is the one property this board exists to demonstrate. */
.turn-rim{
  position:absolute;left:52.19%;top:52.05%;width:1.6%;height:37%;pointer-events:none;
  transform:translate(-50%,-50%);
  background:linear-gradient(180deg,transparent 0%,rgba(255,240,190,.95) 18%,rgba(255,214,120,.98) 50%,rgba(255,240,190,.95) 82%,transparent 100%);
  filter:blur(1.5px);mix-blend-mode:screen;
  opacity:var(--rim);
}
.vortex{
  position:absolute;left:16%;top:26%;width:72%;height:52%;pointer-events:none;
  background:radial-gradient(ellipse 50% 50% at 50% 50%, rgba(255,226,140,.28) 26%, rgba(255,176,50,.14) 46%, transparent 68%);
  filter:blur(6px);mix-blend-mode:screen;opacity:var(--shimmer);
}
.fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.tone{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;background:var(--tone-col);opacity:var(--tone);transition:opacity .5s ease}
.flash{
  position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;opacity:var(--flash);
  background:radial-gradient(circle at 52% 52%, #fffaf0 0%, #ffe6ae 32%, rgba(255,186,72,.4) 56%, transparent 76%);
}
.vignette{position:absolute;inset:0;pointer-events:none;z-index:4;box-shadow:inset 0 0 100px 22px rgba(4,3,6,.68), inset 0 0 0 1px rgba(0,0,0,.5)}

/* =========================================================================
   THE DECK, and the sentence that makes the theatre lawful.

   MACHINE-STATES 6: "The honesty line is on the machine, at --t-lead, and not
   in the small print." The rule below is that tier verbatim - clamp(15.5px,
   1.1vw, 19px), copied from the platform's own stylesheet rather than
   approximated. It LEADS; the mechanic sentence survives beneath it at the
   ordinary body tier, because one of them is law and the other is
   instruction.

   PREDETERMINATION IS THE SOLE DEFENCE ON THE GAMING LIMB. Section 6(4)(b) of
   the Gambling Act gives that limb no payment element at all, so nothing
   about this arcade being free reaches it, and LEGAL-023 records that what
   makes an arcade play not-gaming is that the outcome ALREADY EXISTS and the
   animation only reveals it. Softening this line "would not reduce risk; it
   would only stop describing the thing that removes the risk."

   OWED, AND DELIBERATELY NOT BUILT: "See the proof" belongs beside this line
   and needs a destination this page does not have. A dead link under a legal
   statement is worse than no link, so it is carried in the report instead.
   ========================================================================= */
.deck{
  padding:14px 15px 15px;border-top:1px solid var(--line2);
  background:linear-gradient(180deg,#12141d 0%,#0d0f16 100%);
}
.honesty{
  margin:0;font-size:clamp(15.5px,1.1vw,19px);line-height:1.4;
  font-weight:500;color:var(--text);letter-spacing:-.005em;
}
.honesty a{color:inherit;text-decoration:none;border-bottom:1px solid var(--line2)}
.honesty a:hover,.honesty a:focus-visible{border-bottom-color:var(--lime)}
.honesty-hash{margin:4px 0 0;font-family:var(--mono);font-size:11px;color:var(--muted-dim)}
.deck-sub{margin:8px 0 0;font-size:12.5px;line-height:1.45;color:var(--muted)}

/* -- stage furniture ------------------------------------------------------ */
/* THE HUD'S BOX STARTS WHERE THE PLAQUE ENDS. On the dragon that clearance is
   sideways because its plaque is a left-hand corner piece; here the plaque is
   centred across six tenths of the width, so the clearance is DOWNWARD and
   the geometry is still the guarantee rather than the convention. It carries
   the credit window and nothing else - the price lives on the control that
   spends it. */
.hud{
  position:absolute;top:calc(var(--plaque-h) + 8px);left:0;right:0;z-index:6;display:flex;
  align-items:center;justify-content:flex-end;gap:8px;padding:0 11px;
  pointer-events:none;
}
.wallet{
  display:inline-flex;align-items:center;gap:6px;padding:5px 10px 5px 7px;border-radius:999px;
  background:rgba(8,9,13,.78);border:1px solid rgba(251,191,36,.4);
  transition:transform .25s cubic-bezier(.2,1.5,.4,1), border-color .25s, box-shadow .25s;
}
.wallet.pop{transform:scale(1.14);border-color:var(--win);box-shadow:0 0 22px -3px rgba(251,191,36,.75)}
.wallet-dot{width:13px;height:13px;border-radius:50%;background:radial-gradient(circle at 34% 30%,#ffe9a8,var(--win) 58%,var(--win-press));box-shadow:inset 0 0 0 1px rgba(0,0,0,.35)}
.wallet-n{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--win);min-width:1.6em;text-align:right}
.wallet-l{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* COPY-RULINGS-2026-09-14 A10: this build badge (which sequence variant is
   running) is operator/build information, not something a member should
   see, so it lives in the operator panel now rather than over the scene. */
.badge{
  display:inline-block;margin-top:8px;pointer-events:none;
  font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);background:rgba(8,9,13,.78);border:1px solid var(--line2);
  padding:4px 8px;border-radius:6px;
}
.badge[hidden]{display:none}

/* =========================================================================
   THE ASK, AND THE ONE CONTROL.

   STRUCT-023 Law 1 - NO FAKE CONTROLS, AND THE BOUND IS ON APPEARANCE. There
   is exactly one control on this glass, it does exactly one thing, and it
   disappears the moment it has done it. It is a button rather than a
   tap-anywhere layer because there is nothing on this scene to aim at: the
   coin is the only object that turns, so a "choose where" affordance would be
   promising a choice the mechanic does not contain.
   ========================================================================= */
.ask{
  position:absolute;z-index:6;left:0;right:0;bottom:16px;padding:0 18px;text-align:center;
  transition:opacity .3s ease, transform .38s cubic-bezier(.2,.8,.3,1);
}
.ask[hidden]{display:none}
.ask.out{opacity:0;transform:translateY(8px);pointer-events:none}
.ask-h{
  margin:0 0 10px;font-family:var(--disp);font-weight:900;font-size:clamp(22px,7vw,30px);
  line-height:1;letter-spacing:-.02em;color:var(--lime);text-transform:uppercase;
  text-shadow:0 2px 20px rgba(0,0,0,.95), 0 0 44px rgba(0,0,0,.9), 0 0 12px rgba(10,11,16,.9);
}
.ask-s{
  margin:9px 0 0;font-size:12px;line-height:1.35;color:var(--text);
  text-shadow:0 1px 10px rgba(0,0,0,.95), 0 0 24px rgba(0,0,0,.85);
}
.turn-btn{
  font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:13px 22px;border-radius:999px;cursor:pointer;border:0;
  background:var(--lime);color:var(--lime-ink);
  box-shadow:0 6px 26px -6px rgba(198,255,58,.6), 0 2px 12px -2px rgba(0,0,0,.8);
  transition:background .2s, transform .12s;
}
.turn-btn:hover{background:var(--lime-press)}
.turn-btn:active{transform:translateY(1px)}
.turn-btn:focus-visible{outline:2px solid var(--lime);outline-offset:3px}

/* -- the ending card ------------------------------------------------------ */
/* THE CARD'S GROUND REACHES FULL STRENGTH EARLY. The kicker is the first line
   and it lands in the head of the gradient, over a hall that may be at full
   gold glare; the fix is the GROUND and not the ink, because a 9.5px mono
   label is the right register for a kicker and brightening it to survive a
   bad background would be the wrong half. */
.card{
  position:absolute;z-index:7;left:0;right:0;bottom:0;padding:34px 14px 13px;text-align:center;
  background:linear-gradient(180deg,rgba(8,9,13,0) 0%,rgba(8,9,13,.80) 17%,rgba(8,9,13,.96) 38%,rgba(8,9,13,.99) 100%);
  transform:translateY(14px);opacity:0;transition:opacity .5s ease,transform .5s cubic-bezier(.2,.9,.3,1);
  pointer-events:none;
}
.card.in{opacity:1;transform:translateY(0);pointer-events:auto}
.card[hidden]{display:none}
.card-kicker{margin:0;font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:var(--muted);text-shadow:0 1px 8px rgba(0,0,0,.95)}
/* VOICE-028 (active, supersedes VOICE-023): COINS ARE AMBER; CASH IS GIVEN NO
   COLOUR AT ALL and becomes a state change of the whole surface instead. Acid
   green is the venue and nothing else, so no figure here is lime. */
.card-amount{
  margin:3px 0 0;font-family:var(--disp);font-weight:900;line-height:1;letter-spacing:-.03em;
  font-size:clamp(30px,11.5vw,46px);color:var(--text);text-shadow:0 2px 22px rgba(0,0,0,.85);
}
/* CASH TAKES --t-mega AND NOTHING ELSE ON THIS SURFACE EVER DOES. 9.1 item 4
   and 9.3 together: the slot and the tier are the same at every cash rung,
   because what is interesting about cash is that it happened at all. */
.card-amount.cash{
  font-size:clamp(66px,17vw,92px);line-height:.86;letter-spacing:-.055em;
  color:#fff;text-shadow:0 2px 30px rgba(0,0,0,.5), 0 0 70px rgba(255,236,196,.45);
}
.card-amount.coin{
  color:var(--win);font-size:clamp(24px,8.2vw,33px);
  display:flex;align-items:center;justify-content:center;gap:9px;
}
.card-amount.coin::before{
  content:'';flex:none;width:.62em;height:.62em;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#ffe9a8,var(--win) 58%,var(--win-press));
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.35), 0 0 14px -3px rgba(251,191,36,.8);
}
/* AT OR BELOW THE STAKE WEARS THE COIN REGISTER AND NOT THE COIN CELEBRATION.
   Amber because amber IS coins (VOICE-028) and a register is not a reward;
   the quiet size because a return worth one play nets nothing; the glow off
   the dot because a bloom is a visual win effect and RTS 14F forbids one at
   or below the stake. Same colour, different volume. */
.card-amount.coin.even{font-size:clamp(20px,6.4vw,26px);gap:7px}
.card-amount.coin.even::before{box-shadow:inset 0 0 0 1px rgba(0,0,0,.35)}
.card-amount.quiet{color:var(--ink);font-size:clamp(17px,5.6vw,22px);letter-spacing:-.01em;line-height:1.2}
.card-line{margin:6px 0 0;font-size:12px;line-height:1.42;color:var(--muted);text-shadow:0 1px 8px rgba(0,0,0,.9)}
/* empty by construction, and it must stay invisible while it is: no margin, no
   height, and nowhere outside the cash ending at all */
.card-continuation:empty{display:none}
.card:not([data-ending="cash"]) .card-continuation{display:none}
/* emphasis inside a sentence is WEIGHT, never the venue colour */
.card-line b{color:var(--text);font-weight:700}
.card-line b.c{color:var(--win)}

/* =========================================================================
   THE TRAY - WHAT A RETURN SMALLER THAN ONE PLAY ACTUALLY BOUGHT.

   MACHINE-STATES 7.2: a sub-play rung is NOT A QUANTITY, IT IS A DISTANCE.
   Five coins on this board are not five of anything spendable; they are a
   third of the way to another go, and the next partial completes it.

   AND IT IS NOT A NEAR-MISS, WHICH IS THE OBJECTION IT MUST SURVIVE, because
   a progress bar is exactly the shape a near-miss usually takes. The
   distinction is the REFERENT: this bar reads a coin count against this
   board's own price and nothing else. It never references the sealed outcome,
   a prize that was not won, or how close the result came to anything - it
   would read identically on a machine with no prizes above it at all. A
   near-miss is a claim about the result; this is a claim about a wallet.

   THE FIGURE CARRIES ITS DENOMINATOR ON THE SAME LINE, because "5 coins" and
   "5 of the 15 coins your next play costs" are the same fact and only one of
   them can be acted on.
   ========================================================================= */
.tray{
  margin:10px auto 0;max-width:240px;padding:9px 11px 10px;
  border-radius:10px;background:rgba(255,255,255,.045);border:1px solid var(--line);
}
.tray[hidden]{display:none}
.tray-bar{display:block;height:5px;border-radius:3px;background:rgba(255,255,255,.10);overflow:hidden}
.tray-fill{
  display:block;height:100%;width:0;border-radius:3px;
  background:linear-gradient(90deg,var(--win-press),var(--win));
  transition:width .65s cubic-bezier(.2,.8,.3,1);
}
.tray-l{margin:7px 0 0;font-size:11.5px;line-height:1.4;color:var(--muted);text-shadow:0 1px 8px rgba(0,0,0,.9)}
.tray-l b{color:var(--win);font-weight:700}
body[data-motion="reduced"] .tray-fill{transition:none}
@media (prefers-reduced-motion: reduce){ .tray-fill{transition:none} }
.card-acts{display:flex;gap:8px;justify-content:center;margin-top:11px;flex-wrap:nowrap}
.card-acts .btn{padding:9px 13px;font-size:10px;letter-spacing:.08em;white-space:nowrap}

/* -- buttons -------------------------------------------------------------- */
.btn{
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  padding:10px 16px;border-radius:999px;cursor:pointer;border:1px solid rgba(198,255,58,.45);
  background:rgba(8,9,13,.72);color:var(--lime);transition:background .2s,border-color .2s,transform .12s;
}
.btn:hover{background:rgba(198,255,58,.12);border-color:var(--lime)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
.btn-solid{background:var(--lime);color:var(--lime-ink);border-color:transparent}
.btn-solid:hover{background:var(--lime-press);color:var(--lime-ink)}
.btn-ghost{border-color:var(--line2);color:var(--muted)}
.btn-ghost:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.3);color:var(--ink)}

/* =========================================================================
   CASH IS A STATE CHANGE OF THE WHOLE SURFACE, NOT A BIGGER COIN WIN.
   Carried from the baseline UNCHANGED, deliberately and by law: 9.3 makes the
   cash state identical on all four boards, so a board that reinterpreted it
   would be the one thing this set may not vary. Four of 9.1's eight beats are
   built - 1 to 4 below, plus 5 and 6 in endCash(); the board updating in view
   and the sound are not, and the report carries why.
   ========================================================================= */
/* 1 - THE ROOM LIGHTS. Outside the machine on purpose: a light source inside
   the cabinet is the machine doing something, and a lit room is the place the
   machine is in having changed. */
.roomlight{
  position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0;
  background:
    radial-gradient(128% 74% at 50% 30%, rgba(255,246,226,.30) 0%, rgba(255,232,190,.13) 40%, transparent 72%),
    radial-gradient(70% 44% at 50% 46%, rgba(255,238,200,.16) 0%, transparent 76%);
  transition:opacity .6s ease;
}
body[data-cash="on"] .roomlight{opacity:1}
/* 2 - THE CABINET BLAZES, and the shadow it throws is driven by the same lift
   (OBJECT-LANGUAGE 1). */
body[data-cash="on"] .machine{
  transform:translateY(-5px);
  box-shadow:
    0 0 0 1px rgba(255,248,232,.55),
    0 0 64px -8px rgba(255,238,198,.48),
    0 46px 96px -34px #000;
}
/* 3 - EVERYTHING THAT IS NOT THE MACHINE RECEDES, AND IS NOT HIDDEN. Content
   whose resting state is invisible disappears when the script does not run;
   these stay present, stay readable, and stop competing. The honesty line is
   deliberately NOT in this list. */
body[data-cash="on"] .masthead,
body[data-cash="on"] .panel,
body[data-cash="on"] .debug-h,
body[data-cash="on"] .debug-note,
body[data-cash="on"] .debug,
body[data-cash="on"] .foot{opacity:.45}
.masthead,.panel,.debug-h,.debug-note,.debug,.foot{transition:opacity .55s ease}
/* 4 - THE AMOUNT IS WHITE ON LIGHT, AND THE LIGHT IS THE ROOM RATHER THAN THE
   PANEL. The card keeps a ground deep enough to carry its own text, warmed
   toward the room rather than emptied out. */
body[data-cash="on"] .card{
  background:linear-gradient(180deg,
    rgba(14,11,8,0) 0%, rgba(20,16,11,.82) 17%, rgba(16,13,9,.97) 38%, rgba(12,10,8,.99) 100%);
}
body[data-cash="on"] .card-kicker,
body[data-cash="on"] .card-line{color:var(--text)}
body[data-motion="reduced"] .machine{transition:box-shadow .55s ease}
body[data-motion="reduced"][data-cash="on"] .machine{transform:none}
@media (prefers-reduced-motion: reduce){
  body[data-cash="on"] .machine{transform:none}
}

/* -- operator panel ------------------------------------------------------- */
.panel{margin-top:26px;border:1px dashed var(--line2);border-radius:12px;padding:14px 13px;background:var(--card)}
.panel-h{margin:0 0 3px;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
.panel-note{margin:0 0 12px;font-size:11.5px;line-height:1.5;color:var(--muted-dim)}
.panel-row{margin-top:12px}
.panel-lab{display:block;margin-bottom:6px;font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--muted-dim)}
.seg{display:flex;flex-wrap:wrap;gap:6px}
.seg .btn{flex:1 1 auto;padding:9px 10px;font-size:10px;letter-spacing:.07em;white-space:nowrap}
.seg .btn[aria-pressed="true"]{background:var(--lime);color:var(--lime-ink);border-color:transparent}
.out-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.out-grid .btn{text-align:left;padding:10px;font-size:10px;letter-spacing:.05em;line-height:1.35;white-space:normal}
.out-grid .btn span{display:block;font-family:var(--sans);font-size:10px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--muted-dim);margin-top:3px}
.out-grid .btn[aria-pressed="true"]{background:var(--lime);color:var(--lime-ink);border-color:transparent}
.out-grid .btn[aria-pressed="true"] span{color:rgba(10,11,16,.72)}
.sess{margin-top:10px;padding:10px 11px;border:1px solid var(--line2);border-radius:9px;background:var(--surface)}
.sess[hidden]{display:none}
.sess-l{margin:0 0 5px;font-size:11.5px;line-height:1.5;color:var(--muted-dim)}
.sess-l:last-child{margin-bottom:0}
.sess-l b{color:var(--win);font-weight:700;font-family:var(--mono);font-size:11px}
.sess-l i{font-style:normal;color:#5f6470;font-size:10.5px}
.sess-rate{padding-top:6px;border-top:1px solid var(--line);color:var(--muted)}
.sess-rate b{color:var(--lime)}

/* =========================================================================
   REDUCED MOTION, APPLIED TO THE CHROME AS WELL AS THE CANVAS. Driven by a
   data attribute rather than the media query alone, because the operator
   panel can force either mode and a media query cannot hear a button.

   THE FULL STORY IS STILL TOLD, AND FOR THE SAME DURATION. Under reduced
   motion the coin does not turn and the front does not sweep; the hall is
   graded in steps of a static mask and the ending is told in colour and
   light. It resolves at the same instant on the same clock, so the floor
   holds identically in both modes.
   ========================================================================= */
body[data-motion="reduced"] .ask{transition:opacity .3s ease}
body[data-motion="reduced"] .ask.out{transform:none}
body[data-motion="reduced"] .card{transition:opacity .45s ease;transform:none}
body[data-motion="reduced"] .card.in{transform:none}
body[data-motion="reduced"] .wallet{transition:border-color .25s,box-shadow .25s}
body[data-motion="reduced"] .wallet.pop{transform:none}
body[data-motion="reduced"] .tile{transition:box-shadow .3s,opacity .3s}
body[data-motion="reduced"] .tile:hover{transform:none}
body[data-motion="reduced"] .btn:active{transform:none}
body[data-motion="reduced"] .turn-btn:active{transform:none}
body[data-motion="reduced"] .turn-coin,
body[data-motion="reduced"] .turn-coin-stone{transform:none}
@media (prefers-reduced-motion: reduce){
  .ask.out{transform:none}
  .card,.card.in{transform:none}
  .wallet.pop{transform:none}
  .tile:hover{transform:none}
  .btn:active{transform:none}
}

/* -- debug ---------------------------------------------------------------- */
.debug-h{margin:20px 0 5px;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
.debug-note{margin:0 0 8px;font-size:11.5px;line-height:1.5;color:var(--muted-dim)}
.debug{
  margin:0;padding:11px 12px;border-radius:9px;background:var(--surface);border:1px solid var(--line);
  font-family:var(--mono);font-size:10.5px;line-height:1.65;color:var(--muted);
  white-space:pre-wrap;word-break:break-word;max-height:210px;overflow:auto;
}
.debug .k{color:var(--lime)}
.debug .w{color:#ffb0a0}
.debug .d{color:var(--muted-dim)}
.foot{margin-top:22px;font-size:11px;line-height:1.6;color:var(--muted-dim)}
.foot code{font-family:var(--mono);font-size:10.5px;color:var(--muted)}