/**
 * FORTUNE'S EYE — THE BOARD'S OWN STYLESHEET.
 *
 * Kept out of the template for the reason the Midas stylesheet gives in full:
 * the copy pin reads a view's leftover text as member prose, and a stylesheet
 * inlined in a view arrives there as sentences. Served straight from public/,
 * not built, because resources/ belongs to a concurrent front-end programme.
 *
 * Carried from public/fortunes-eye.html with the prototype's own comments, and
 * extended at the foot of the file for what this port adds: the prize on the
 * glass, the cut pips, the prize board, the session tally and the spread.
 */

@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 */
  --eye:#e83fd0; --eye-deep:#8b1f7c; --eye-pale:#ffd7f4; --candle:#ffb457;
  --silver:#c9cedb;

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

.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 ------------------------------------------------------------- */
.slot{margin-top:22px;position:relative}
.tile{
  display:block;width:100%;padding:0;border:0;cursor:pointer;
  position:relative;aspect-ratio:3/4;overflow:hidden;border-radius:16px;
  background:#0a0810;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% 32%}
.tile-scrim{position:absolute;inset:0;background:linear-gradient(180deg, rgba(8,9,13,.5) 0%, transparent 22%, transparent 40%, 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);
}
.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}
.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:#d3c6d8;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 and 4. The honesty line lives in the machine's own stack, below the glass
   and inside the same box, so it is never covered 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{
  /* SCAN READINGS OFF fortunes-eye-key-art.jpg (896x1152), not estimates.
     The hanging sign occupies y 0.022..0.244 and x 0.154..0.849 - centred and
     seven tenths of the width, so like Midas's slab there is no usable column
     beside it and the chrome clears it DOWNWARD. One number decides where. */
  --plaque-h:24.4%;
  --cloud:0;           /* the eye clouding: 0 clear, 1 opaque */
  --eye-lit:0;         /* the table flooded - cash, and only cash */
  --eye-dark:0;        /* the eye closed - the candles are all that is left */
  --eye-glow:1;        /* the ball's own output, which lights the whole table */
  --flash:0; --tone:0; --tone-col:transparent;
  position:relative;width:100%;aspect-ratio:896/1152;overflow:hidden;
  border-radius:16px 16px 0 0;background:#07060a;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:50% 41%}
.art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* =========================================================================
   THE TABLE HAS ONE LIGHT SOURCE AND IT IS THE SUBJECT.

   That is the property this board is built on and it is why the two graded
   copies below are the right mechanism rather than a filter. Both are
   generated from the key art at build time:

     fortunes-eye-dark   the magenta REMOVED rather than dimmed, because the
                         magenta IS the ball's light - what is left is what
                         the two candles reach, and nothing else. The eye
                         closed is not a darker picture, it is a different
                         lighting set-up, and a scene lit by two candles is
                         legibly not a scene lit by a crystal ball.
     fortunes-eye-lit    the same room seen by a light that has stopped being
                         magenta. Cash is a state change of the whole surface
                         (9.1), and on this board the surface's only light
                         source is the subject, so the state change is the
                         scene's own physics rather than a treatment over it.

   MIDAS FLIP USES A GROWING MASK OVER ONE GRADE; THIS USES OPACITY CROSSFADES
   BETWEEN TWO. That is deliberate. The same trick twice would be one engine
   in two costumes, which is the failure the operator's four-in-a-row test is
   designed to catch.
   ========================================================================= */
.eye-dark,.eye-lit{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;
}
.eye-dark{opacity:var(--eye-dark)}
/* THE SIGN TAKES THE LIGHT - the top tier's one discrete element (A2). A copy of
   the scene clipped to the scanned sign, brightened, and faded in: a state of
   one object, not a front, so it is the same construction at both motion
   levels. The clip is written from SCENE.plaque at boot. */
.name-lit{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;
  opacity:var(--name-lit, 0);filter:brightness(1.7) saturate(1.25);
}
.eye-lit{opacity:var(--eye-lit)}

/* THE CLOUD. The ball's own volume, thickening until there is nothing to read
   through - the legibility threshold, in this scene's vocabulary. Centred and
   sized on the scan: the ball's core is x 0.4983 y 0.4089 with a radius of
   0.2003 of the frame width, and the mask's own farthest corner from that
   centre is 816px in a 896x1152 box, which puts the ball's edge at 22.0% of
   the mask radius. Every figure below is in those units. */
.cloud{
  position:absolute;left:29.8%;top:24.0%;width:40.1%;height:31.2%;pointer-events:none;
  border-radius:50%;
  background:
    radial-gradient(circle at 42% 34%, rgba(255,230,250,.95) 0%, rgba(255,150,235,.72) 22%, rgba(190,50,168,.62) 52%, rgba(96,16,86,.55) 78%, rgba(58,8,52,.5) 100%);
  filter:blur(3px);
  opacity:var(--cloud);
}
/* the ball's output, which is what lights the table. It is a separate layer
   from the cloud because the two move in opposite directions: the eye can be
   bright and clear, bright and clouded, or out. */
.eye-halo{
  position:absolute;left:19%;top:12%;width:62%;height:52%;pointer-events:none;
  background:radial-gradient(ellipse 50% 50% at 50% 50%, rgba(255,120,230,.34) 18%, rgba(190,40,170,.18) 44%, transparent 70%);
  filter:blur(8px);mix-blend-mode:screen;opacity:var(--eye-glow);
}
/* =========================================================================
   THE TABLE IS CLEARED AS THE CARDS LEAVE IT.

   THE SAME CLASS OF DEFECT THE COIN LAYER HIT ON MIDAS FLIP, and worth naming
   because it is the standing hazard of animating over finished key art: the
   artwork's three fans are PAINTED INTO the scene and cannot move, so nine
   drawn cards lifting off the velvet left nine painted cards lying on it. The
   ring read as a second deck rather than as this one.

   THE FIRST FIX WAS A FLAT PANEL OF VELVET AND IT WAS WRONG. A rectangle of
   one colour over the band did remove the cards, and it also removed the
   table: the rings, the loose coins, the herb bundle and the grain all went
   with them, and what was left read as a hole rather than as an empty table.

   THIS IS THE TABLE WITH THE FANS INPAINTED OUT, generated from the key art
   at build time. The fill is computed per COLUMN from the velvet immediately
   above and below the band, so the table keeps its own left-to-right
   structure - the vignette, the light falling off toward the edges - and it
   is composited through a mask open only over the fans (x 0.135..0.868,
   y 0.668..0.851 from the scan), so the amethyst points at both edges, the
   goblet and the corner bowls are untouched. An earlier pass masked the full
   width and stretched every one of them into a vertical streak.

   ITS OPACITY FOLLOWS THE LIFT AND NOTHING ELSE, so the table is cleared
   exactly as fast as the cards leave it and re-laid exactly as fast as they
   return. Nothing here can differ by outcome because nothing here reads one.
   ========================================================================= */
.velvet{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  pointer-events:none;opacity:var(--velvet);
}
.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 50% 41%, #ffffff 0%, #f6eaff 30%, rgba(226,190,255,.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,.72), inset 0 0 0 1px rgba(0,0,0,.5)}

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

   "The honesty line is on the machine, at --t-lead, and not in the small
   print" (MACHINE-STATES 6) - clamp(15.5px, 1.1vw, 19px), the platform's own
   tier, copied rather than approximated. AND IT DOES MORE WORK HERE THAN
   ANYWHERE, which is BOARD-THE-WHEEL 2's closing point: on a coin the
   sentence is a nicety; on a board that resolves by approaching it is the
   sentence that makes the deceleration lawful, and it is on the machine's own
   face where the member sees it BEFORE they press.

   Predetermination is the sole defence on the gaming limb - s.6(4)(b) 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.

   OWED, AND DELIBERATELY NOT BUILT: "See the proof" belongs beside this line
   and needs a destination this page does not have.
   ========================================================================= */
.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 ------------------------------------------------------ */
.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, it does one thing,
   and it leaves the moment it has done it.

   THE CARDS ARE NOT TAPPABLE AND THAT IS THE WHOLE POINT ON THIS BOARD. A fan
   of face-down cards is the most inviting surface in this set and letting the
   member choose one would be the fake control this design most wants to
   build. Nothing on the velvet responds to a touch.
   ========================================================================= */
.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);
}
/* the instruction sits above the honesty line and BELOW it in weight: it says
   what to do, and the sentence under it says what that does not do. If the
   cue ever out-shouted the honesty line the ordering would be wrong. */
.ask-w{margin:11px 0 0;font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--lime);text-shadow:0 1px 10px rgba(0,0,0,.95), 0 0 24px rgba(0,0,0,.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)}
/* =========================================================================
   THE CUT STRIP. Nine real buttons laid over the painted fan, built from
   SCENE at boot - so the act is placed on the cards the member can see, and
   tab, Enter, Space and a screen reader all reach it without a line of key
   handling. Each zone is exactly one card's third of its own fan, so the
   strip covers the whole fan with no gaps and no overlaps.

   NOTHING IN HERE MARKS A CARD BEFORE IT IS TOUCHED. There is no idle state,
   no pulse, no hint: the moment one card looks preferred the mechanic has
   started lying about what the cut does. The only mark is under the pointer
   or the focus ring, it says WHERE THE DECK WOULD PART, and it is identical
   over every one of the nine.
   ========================================================================= */
.cut-layer{position:absolute;inset:0;z-index:6;pointer-events:none}
.cut-layer.off .cut-zone{opacity:0;pointer-events:none}
.cut-zone{
  position:absolute;padding:0;border:0;background:transparent;cursor:pointer;
  pointer-events:auto;-webkit-tap-highlight-color:transparent;
  transition:opacity .28s ease;
}
/* the mark is a PARTING LINE, not a box round a card: a rectangle says "this
   card", and a line down the seam says "here is where it comes apart" */
.cut-zone::after{
  content:'';position:absolute;left:50%;top:2%;bottom:2%;width:2px;margin-left:-1px;
  border-radius:2px;background:linear-gradient(180deg,rgba(239,234,246,0) 0%,rgba(239,234,246,.92) 22%,rgba(239,234,246,.92) 78%,rgba(239,234,246,0) 100%);
  box-shadow:0 0 14px 1px rgba(232,63,208,.55);
  opacity:0;transition:opacity .16s ease;
}
.cut-zone:hover::after,.cut-zone:focus-visible::after{opacity:1}
.cut-zone:focus-visible{outline:2px solid var(--lime);outline-offset:-3px;border-radius:6px}
body[data-motion="reduced"] .cut-zone::after{transition:none}
@media (prefers-reduced-motion: reduce){ .cut-zone::after{transition:none} }

/* -- the ending card ------------------------------------------------------ */
.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: COINS ARE AMBER; CASH IS GIVEN NO COLOUR and becomes a state
   change of the whole surface. Acid green is the venue and nothing else. */
.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);
}
.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(240,226,255,.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: the coin register, never the coin celebration */
.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}
.card-line b{color:var(--text);font-weight:700}
.card-line b.c{color:var(--win)}

/* THE TRAY - a distance, not a quantity. MACHINE-STATES 7.2. The bar reads
   the member's own coins against this board's own price and NEVER the sealed
   outcome, which is the whole distinction from a near-miss: a near-miss is a
   claim about the result, this is a claim about a wallet. */
.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}

.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. Carried from the baseline
   UNCHANGED and by law: 9.3 makes the cash state identical on all four
   boards, so it is the one thing this set may not vary. Four of 9.1's eight
   beats are built here; the board updating in view and the sound are not.
   ========================================================================= */
.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}
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;
}
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}
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)}
.stopbox{margin-top:10px;padding:10px 11px;border:1px solid var(--line2);border-radius:9px;background:var(--surface);font-size:11.5px;line-height:1.55;color:var(--muted-dim)}
.stopbox b{color:var(--lime);font-family:var(--mono);font-size:11px}
.stopbox code{font-family:var(--mono);font-size:10.5px;color:var(--muted)}

/* reduced motion, applied to the chrome as well as the canvas */
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}
@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-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)}

/* =========================================================================
   WHAT THE PORT ADDS
   ========================================================================= */

.masthead h1{margin-bottom:0}
.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}

/* ONE CLEARED TABLE PER FAN. Each copy is clipped to its own fan by the script,
   from the scan's measured fan edges, and faded by its own property - so a fan
   is cleared exactly when its cut lifts it and not before. */
.velvet[data-fan="0"]{opacity:var(--velvet-0,0)}
.velvet[data-fan="1"]{opacity:var(--velvet-1,0)}
.velvet[data-fan="2"]{opacity:var(--velvet-2,0)}

/* THE PRIZE ON THE GLASS. Chrome palette, never scene palette. It has no
   transition and no animation, and exactly one state: `held`, which DIMS it for
   the cash hold (see endCash). Nothing in any reveal may brighten or animate
   it - a prize that lit up while a member waited would be the wait pointing at it. */
.hud{justify-content:space-between}
.jackpot{
  display:inline-flex;align-items:center;padding:5px 10px;border-radius:999px;
  font-family:var(--disp);font-weight:900;font-size:13px;letter-spacing:-.005em;color:var(--text);
  background:rgba(8,9,13,.78);border:1px solid var(--line2);
  text-shadow:0 1px 8px rgba(0,0,0,.9);
}
.jackpot[hidden]{display:none}

/* THE CUT PIPS - a card back per fan still to cut. Filled, not counted: the
   member sees the acts move on without a figure being put on them. */
.cut-pips{margin:10px 0 0;display:flex;gap:7px;justify-content:center}
.cut-pips i{
  display:block;width:11px;height:16px;border-radius:2.5px;
  border:1px solid rgba(239,234,246,.55);background:rgba(43,39,64,.85);
  box-shadow:0 1px 6px rgba(0,0,0,.8);transition:background .3s ease,border-color .3s ease,opacity .3s ease;
}
.cut-pips i.done{background:rgba(239,234,246,.18);border-color:rgba(239,234,246,.22);opacity:.55}

/* a fan that has been cut has no cards left to cut */
.cut-zone.gone{opacity:0 !important;pointer-events:none !important}

/* THE PRIZE BOARD. Two rows, never merged: coins and money do not share a line. */
.prizes{margin:12px 0 0;display:flex;flex-direction:column;gap:6px}
.slot .prizes{margin-top:14px;align-items:center}
.prizes-row{margin:0;display:flex;flex-wrap:wrap;gap:6px}
.slot .prizes-row{justify-content:center}
.prize{
  display:inline-block;padding:4px 9px;border-radius:999px;
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.02em;line-height:1.3;
  border:1px solid var(--line2);background:rgba(255,255,255,.035);color:var(--text);
}
.prize-coin{color:var(--win);border-color:rgba(251,191,36,.28)}
.prize.gone{color:var(--muted-dim);border-color:var(--line);background:transparent}
.prize.gone s{text-decoration-thickness:1px}

/* THE SESSION TALLY. Figures, ruled units, no bar and no target. */
.tally{margin:12px 0 0;padding-top:10px;border-top:1px solid var(--line)}
.tally[hidden]{display:none}
.tally-row{margin:0;display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11.5px;color:var(--muted)}
.tally-row + .tally-row{margin-top:5px}
.tally-row b{color:var(--text);font-weight:700}
.tally-row[hidden]{display:none}
.tally-glyph{
  display:inline-block;width:10px;height:14px;border-radius:2px;
  border:1px solid rgba(239,234,246,.5);background:#2b2740;
}
.tally-coins{margin-left:6px;color:var(--win)}
.tally-coins:empty{display:none}
.tally-cash{color:var(--text)}

/* THE AMOUNT THAT HAS NOT LANDED YET. The slot keeps its height while the
   after-win resolution runs, so the card does not jump when the figure arrives,
   and it is empty rather than showing a placeholder figure that could be read
   as a value the play might have been. */
.card-amount.pending{visibility:hidden}
.card-amount.land{animation:amountLand .52s cubic-bezier(.16,.9,.3,1) both}
@keyframes amountLand{from{opacity:0;transform:scale(1.18)}to{opacity:1;transform:scale(1)}}
body[data-motion="reduced"] .card-amount.land{animation:amountFade .52s ease both}
@media (prefers-reduced-motion: reduce){ .card-amount.land{animation:amountFade .52s ease both} }
@keyframes amountFade{from{opacity:0}to{opacity:1}}
.card-line.pending,.card-acts.pending{visibility:hidden}
.card-acts .btn[disabled]{opacity:.5;cursor:default}

/* the instruction is words over the fans, and it must never catch a touch
   meant for the fan beneath it */
.ask{pointer-events:none}

/* THE TALLY AS CARDS. A back for a reading that turned nothing, a coin face for
   one that turned cards your way, a lit face for cash - the same three looks the
   reveal itself uses, so nothing here needs a word to be read. */
.tally-row{flex-wrap:wrap;gap:10px}
.tally-group{display:inline-flex;align-items:center;gap:3px}
.tally-group b{margin-left:4px;font-size:11px;color:var(--muted)}
.tally-card{
  display:inline-block;width:10px;height:14px;border-radius:2px;box-sizing:border-box;
  border:1px solid rgba(239,234,246,.45);background:#2b2740;
}
.tally-card.is-coins{
  background:radial-gradient(circle at 50% 50%, #f0cf5a 0 28%, transparent 31%), #efeaf6;
  border-color:#cbd0dd;
}
.tally-card.is-cash{
  background:#fff;border-color:#fff;box-shadow:0 0 8px rgba(255,238,200,.7);
}

/* THE RECEIPT CHIP, which carries the free postal route, the same odds and 18+
   (STANCE §5, Tier A). It is the estate's own component and arrives with utility
   classes this page does not load, so it is given its look here. It is never
   smaller than the deck's small print: an obligation to the person reading the
   page is not decoration. */
.board-chip{
  margin:12px 0 0;display:flex;flex-wrap:wrap;gap:4px 10px;
  font-family:var(--mono);font-size:11px;line-height:1.5;color:var(--muted);
}
.slot .board-chip{justify-content:center;margin-top:12px;text-align:center}
.board-chip .rc-grp{display:inline-flex;flex-wrap:wrap;gap:4px 8px;align-items:center}
.board-chip a{color:var(--text);text-decoration:none;border-bottom:1px solid var(--line2)}
.board-chip a:hover,.board-chip a:focus-visible{border-bottom-color:var(--lime)}

/* the glass stepping back for the cash hold (see endCash) - a change of state,
   not a motion, so it is the same at both motion levels */
.jackpot.held{opacity:.25}