/* ==========================================================================
   Match Rush — stylesheet (street build)
   Sugar Rush mechanics on a rail yard: a dusk sky, a graffiti wall, trains
   crossing behind the board, a platform edge for the HUD, wheat-pasted
   posters for the dialogs. The board geometry and every board animation are
   the Sugar Rush build's, unchanged, so the renderer needs nothing new.

   Stage: 1280x720 design space (landscape) or 720x1280 (#stage.portrait,
   chosen by js/ui.js layout() from the viewport aspect), fitted to the safe
   area by js/ui.js. Geometry that the renderer animates against lives in
   the --stage-w/h, --board-x/y/w/h and --cell-w/h variables so both layouts
   share one set of keyframes (see the PORTRAIT LAYOUT section at the end).
   Theme switch: body.free-spins swaps the palette variables (night, neon).
   Speed: body.speed-normal|quick|turbo tune the animation timing variables.
   Renderer hooks (classes it toggles): .cell.win-outline, .cell.marked,
   .cell.mult, .cell.has-scatter, .sym.pulse, .sym.burst, .sym.drop-in,
   .sym.drop-out, .sym.fall, .sym.reel-hint, .ticket.pop, .dust (+ children),
   .win-label, .scatter-ribbon; .cell.win-outline.mult lifts the ticket above the symbol

   Performance rules kept throughout: anything that moves for more than a
   moment (train, mascot, rays) moves with transform/opacity only; no filter
   on an animated element; decorative layers are pointer-events: none.
   ========================================================================== */

:root {
  --font-display: "Bangers", "Impact", "Arial Black", "Haettenschweiler", sans-serif;
  --font-cond: "Barlow Condensed", "Oswald", "Arial Narrow", "Noto Sans Condensed", Arial, sans-serif;
  --font-ui: "Barlow Condensed", "Segoe UI", "Noto Sans", Arial, sans-serif;
  --font-heavy: var(--font-display);

  /* stage / board geometry (landscape; #stage.portrait overrides these) */
  --stage-w: 1280px; --stage-h: 720px;
  --cols: 7; --rows: 7;
  --cell-w: 120px; --cell-h: 79px;
  --board-x: 214px; --board-y: 64px; --board-w: 840px; --board-h: 553px;
  --hud-top: 636px;
  /* safe-area insets, read by ui.js layout() (env() is only resolvable from CSS) */
  --safe-top: env(safe-area-inset-top, 0px); --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px);

  /* --- palette --- */
  --ink: #171227;                 /* every contour */
  --paper: #f5eee0;               /* poster stock */
  --paper-lo: #e6dcc6;
  --hot: #ff3d8f; --hot-lo: #c4145f;
  --cyan: #2fd0ff; --cyan-lo: #127fb8;
  --lime: #8dff3a; --lime-lo: #3aa514;
  --yellow: #ffd52e; --yellow-lo: #d99a0a;
  --orange: #ff8f1f; --red: #ff3b4e;
  --steel: #2f3349; --steel-hi: #5b6180; --steel-lo: #1b1e2e;
  --sky-top: #0d0930; --sky-mid: #3a1a6e; --sky-glow: #ff7a3d;
  /* board: subway tiles, cream with grout */
  --tile: #ece6d8; --tile-lo: #d9d1bf; --grout: #8f8778;
  --win-glow: var(--hot);

  /* --- animation timing (overridden by speed classes) --- */
  /* Paced on Sugar Rush (Pragmatic): the old board leaves column by column
     left to right, the new one arrives the same way, each column entering
     as one stack (row stagger ~= the fall time of one cell, so a column's
     symbols land together). Speed classes below keep the shape and shrink
     the numbers; turbo collapses every column onto one beat. */
  --col-stagger: 120ms; --row-stagger: 60ms;
  --drop-dur: 550ms; --dropout-dur: 350ms; --dropout-stagger: 110ms;
  --fall-dur: 440ms; --burst-dur: 420ms; --pulse-dur: 700ms;
}
body.free-spins {
  /* Free spins: the sun is down, the wall is lit neon pink. */
  --sky-top: #16062e; --sky-mid: #5a0f6e; --sky-glow: #ff2f9a;
  --tile: #f4dfea; --tile-lo: #e2c3d6; --grout: #9a6a88;
}
/* Three clearly separated paces: normal is the showcase, quick is the old
   normal (a brisk but readable round), turbo strips the round to its beats. */
body.speed-quick { --col-stagger: 70ms; --row-stagger: 40ms; --drop-dur: 380ms; --dropout-dur: 260ms; --dropout-stagger: 60ms; --fall-dur: 320ms; --burst-dur: 340ms; --pulse-dur: 560ms; }
body.speed-turbo { --col-stagger: 0ms; --row-stagger: 18ms; --drop-dur: 180ms; --dropout-dur: 160ms; --dropout-stagger: 0ms; --fall-dur: 170ms; --burst-dur: 200ms; --pulse-dur: 400ms; }

/* ---------- viewport / stage scaling ---------- */
html, body { margin: 0; padding: 0; height: 100%; background: #0d0930; overflow: hidden; overscroll-behavior: none; }
body { font-family: var(--font-ui); -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; }
/* the window outside the stage carries the scene's colours top to bottom
   (sky into wall into platform), so a tablet's or a sideways phone's
   letterbox reads as more of the yard rather than a flat bar */
#viewport { position: fixed; inset: 0; overflow: hidden; touch-action: none;
  background: linear-gradient(180deg, #0d0930 0%, #2a1650 38%, #3d4160 52%, #2d3050 78%, #1b1e2e 100%); }
body.free-spins #viewport { background: linear-gradient(180deg, #05030f 0%, #1a0a3a 40%, #2a1a4a 60%, #14102a 100%); }
#bgVideo { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; opacity: 0; pointer-events: none; transition: opacity 900ms ease; }
body.has-video #bgVideo { opacity: 1; }

/* ---------- FREE SPINS: the yard goes neon ----------
   The palette swap above only reaches the drawn wall; with the video playing
   the footage itself is re-lit (sepia, then rotated to magenta), a pink
   glow breathes over the whole window, the platform edge, the tape, the
   sign, the tags and the logo all pick up the neon. Works in both
   orientations because everything here is window- or stage-relative. */
#bgVideo { transition: opacity 900ms ease, filter 1200ms ease; }
body.free-spins #bgVideo { filter: sepia(1) hue-rotate(250deg) saturate(1.9) brightness(0.72) contrast(1.12); }
#viewport::after { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 1200ms ease;
  background: radial-gradient(ellipse 62% 58% at 50% 42%, rgba(255, 47, 154, 0) 0%, rgba(255, 47, 154, 0) 50%, rgba(255, 47, 154, 0.38) 100%), linear-gradient(180deg, rgba(120, 20, 140, 0.28) 0%, rgba(20, 6, 46, 0.5) 100%); }
body.free-spins #viewport::after { opacity: 1; animation: fs-breathe 2.4s ease-in-out infinite alternate; }
@keyframes fs-breathe { from { opacity: 0.7; } to { opacity: 1; } }
body.free-spins #hud { background: linear-gradient(180deg, #7a2f8a 0%, #40174f 30%, #1d0b2e 100%); box-shadow: inset 0 0 0 3px var(--ink), 0 -8px 30px rgba(255, 61, 143, 0.35); }
body.free-spins .hud-strip { background: #ff3d8f; }
body.free-spins #frame .frame-hazard { filter: hue-rotate(295deg) saturate(1.4); }
body.free-spins #board { box-shadow: 0 0 0 4px var(--ink), 0 0 46px 10px rgba(255, 61, 143, 0.45), inset 0 8px 24px rgba(0, 0, 0, 0.25); }
body.free-spins .sign-frame { animation: fs-neon 1.6s ease-in-out infinite alternate; }
body.free-spins #bgScene .tags { animation: fs-neon-tags 1.9s ease-in-out infinite alternate; }
body.free-spins #logo { filter: drop-shadow(0 0 14px rgba(255, 61, 143, 0.85)); }
@keyframes fs-neon { from { filter: drop-shadow(0 0 6px rgba(255, 61, 143, 0.55)); } to { filter: drop-shadow(0 0 18px rgba(255, 61, 143, 1)); } }
@keyframes fs-neon-tags { from { filter: drop-shadow(0 0 6px rgba(255, 61, 143, 0.7)); } to { filter: drop-shadow(0 0 16px rgba(47, 208, 255, 0.9)); } }
@media (prefers-reduced-motion: reduce) { body.free-spins #viewport::after, body.free-spins .sign-frame, body.free-spins #bgScene .tags { animation: none; } }
button, [role="button"], label, .hud-btn, .intro-dots .dot { touch-action: manipulation; }
#board { touch-action: none; }
#stage {
  position: absolute; left: 0; top: 0; width: var(--stage-w); height: var(--stage-h); z-index: 1;
  transform-origin: 0 0;
  /* clipped top and bottom only: the train may run out past the stage's
     sides into the letterbox, where the backdrop continues */
  overflow: visible; clip-path: inset(0 -4000px 0 -4000px);
  background: var(--sky-top);
  font-family: var(--font-display);
}
#stage > svg, #stage > div, #stage > video { position: absolute; }
#stage.dialog-open #message { visibility: hidden; }
button { font-family: inherit; cursor: pointer; border: 0; padding: 0; background: none; color: inherit; }
button:disabled { cursor: default; }
[hidden] { display: none !important; }

/* ==========================================================================
   SCENE
   ========================================================================== */
#bgSky {
  left: 0; top: 0; width: var(--stage-w); height: var(--stage-h); z-index: 0;
  background:
    radial-gradient(ellipse 70% 40% at 50% 22%, rgba(255, 122, 61, 0.35), rgba(255, 122, 61, 0) 70%),
    linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 60%, var(--sky-glow) 100%);
  transition: background 900ms ease;
}
/* with the video playing behind the stage, the stage goes see-through and
   the drawn wall, skyline and ballast step aside; the rails, the tags and
   the trains stay on top of the footage */
body.has-video #stage { background: transparent; }
body.has-video #bgScene .wall, body.has-video #bgScene .yard { display: none; }
body.has-video #bgSky { opacity: 0; }
#bgScene { left: 0; top: 0; z-index: 1; pointer-events: none; }
body.free-spins #bgScene .tags { filter: none; }

/* ---------- the train ----------
   One consist, one transform. It crosses from the right, disappears behind
   the board and comes out on the left; the pause at the end of the cycle is
   the wait for the next one. transform only: it never touches layout. */
/* the layer is a stage width wider on each side, so on a tablet or a
   sideways phone the train enters from the window's edge, not the stage's */
#trainLayer { left: -1280px; top: 488px; width: 3840px; height: 130px; z-index: 1; pointer-events: none; overflow: hidden; }
#train { position: absolute; left: 0; top: 0; will-change: transform; animation: train-pass 32s linear infinite; }
@keyframes train-pass {
  0%   { transform: translateX(2580px); }
  73%  { transform: translateX(-2200px); }
  100% { transform: translateX(-2200px); }
}
body.free-spins #train { animation-duration: 22s; }

/* ---------- board frame ---------- */
#frame { left: 0; top: 0; z-index: 2; pointer-events: none; }
#frame .frame-outer { fill: var(--steel-lo); }
#frame .frame-inner { fill: url(#gSteel); stroke: var(--ink); stroke-width: 3; }
#frame .frame-lip { fill: var(--steel-hi); opacity: 0.8; }
#frame .frame-hazard { fill: url(#pHazard); stroke: var(--ink); stroke-width: 3; }
#frame .frame-rivets circle { fill: #9aa2c0; stroke: var(--ink); stroke-width: 1.5; }

/* ==========================================================================
   BOARD (geometry unchanged from the Sugar Rush build)
   ========================================================================== */
#board {
  left: var(--board-x); top: var(--board-y); width: var(--board-w); height: var(--board-h); z-index: 3;
  display: grid; grid-template-columns: repeat(7, var(--cell-w)); grid-template-rows: repeat(7, var(--cell-h));
  overflow: hidden; border-radius: 4px;
  /* subway tiles: a cream face, a darker lower edge per tile and a grout line
     on both axes, all from one background stack so there is no per-cell paint */
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(var(--cell-w) - 3px), var(--grout) calc(var(--cell-w) - 3px) var(--cell-w)),
    repeating-linear-gradient(180deg, transparent 0 calc(var(--cell-h) - 9px), var(--tile-lo) calc(var(--cell-h) - 9px) calc(var(--cell-h) - 3px), var(--grout) calc(var(--cell-h) - 3px) var(--cell-h)),
    var(--tile);
  box-shadow: inset 0 0 0 3px var(--ink), inset 0 8px 24px rgba(0, 0, 0, 0.25);
  transition: background 700ms ease;
}
#boardFx { left: var(--board-x); top: var(--board-y); width: var(--board-w); height: var(--board-h); z-index: 4; pointer-events: none; overflow: visible; }
.cell { position: relative; width: var(--cell-w); height: var(--cell-h); --from: calc(-1 * (var(--row) + 1.5) * var(--cell-h)); }
/* spin-out: symbols fall down inside their own cells, so the upper rows paint
   over the lower ones for that moment (the default DOM order, lower over
   upper, is what drop-in and the cascade need, where symbols arrive from above) */
#board.dropping-out .cell { z-index: calc(var(--rows) + 1 - var(--row)); }
.cell.has-scatter { z-index: calc(20 - var(--row)); }
/* a pulsing symbol (win highlight, cluster tease) grows past its cell: lift the cell above its
   neighbours, otherwise the later cells in the row paint over its edges and it looks tucked under the tiles */
.cell:has(> .sym.pulse) { z-index: 25; }
.cell > div { position: absolute; }
.cell .mark, .cell .ticket { left: 5px; top: 4px; right: 5px; bottom: 4px; }
.cell .sym { left: 50%; top: 50%; width: calc(var(--cell-w) - 16px); height: calc(var(--cell-h) - 3px); margin: calc((var(--cell-h) - 3px) / -2) 0 0 calc((var(--cell-w) - 16px) / -2); display: flex; align-items: center; justify-content: center; will-change: transform; }
.cell .sym > svg, .cell .sym > img { width: 100%; height: 100%; display: block; overflow: visible; }
.cell.has-scatter .sym > svg { transform: scale(1.18); transform-origin: 50% 50%; }
.cell .fx { inset: 0; pointer-events: none; overflow: visible; }

.cell .mark { opacity: 0; transition: opacity 350ms ease; }
.cell .mark > svg { width: 100%; height: 100%; display: block; }
.cell.marked .mark { opacity: 0.55; }
.cell .ticket { display: none; z-index: 1; }
.cell .ticket > svg { width: 100%; height: 100%; display: block; }
.cell.mult .ticket { display: block; }
.cell.mult .mark { opacity: 0; }
.cell .sym { z-index: 2; }
.cell .fx { z-index: 3; }
/* a winning symbol on a multiplier spot stays in front of its sticker (the sticker glows instead) */
.cell.win-outline.mult .ticket { z-index: 1; }
.cell .sym { transition: opacity 180ms ease; }
/* CSS fallback ticket (used by the intro when symbols.js is absent) */
.ticket-css {
  position: absolute; inset: 0; border-radius: 8px; display: flex; align-items: center; justify-content: center;
  background: var(--hot); border: 3px solid var(--ink);
  font-family: var(--font-display); font-size: 34px; color: #fff; letter-spacing: 1px;
  -webkit-text-stroke: 1px var(--ink); paint-order: stroke fill;
}

/* --- win outline: a sprayed neon rim per winning cell --- */
.cell.win-outline::after {
  content: ""; position: absolute; inset: 3px; border-radius: 8px; pointer-events: none; z-index: 4;
  border: 4px solid var(--win-glow);
  box-shadow: 0 0 10px 2px rgba(255, 61, 143, 0.6), inset 0 0 12px rgba(255, 61, 143, 0.45);
  animation: outline-glow 650ms ease-in-out infinite alternate;
}
@keyframes outline-glow { from { box-shadow: 0 0 6px 1px rgba(255, 61, 143, 0.45), inset 0 0 6px rgba(255, 61, 143, 0.3); border-color: #ff7ab8; } to { box-shadow: 0 0 16px 4px rgba(255, 61, 143, 0.9), inset 0 0 16px rgba(255, 61, 143, 0.6); border-color: var(--hot); } }

/* --- symbol animations --- */
.sym.pulse { animation: sym-pulse var(--pulse-dur) ease-in-out infinite; }
@keyframes sym-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1) rotate(-3deg); } }
.sym.burst { animation: sym-burst var(--burst-dur) ease-out forwards; }
@keyframes sym-burst { 0% { transform: scale(1); opacity: 1; } 30% { transform: scale(1.18) rotate(6deg); opacity: 1; } 100% { transform: scale(0.15) rotate(30deg); opacity: 0; } }
.sym.drop-in {
  animation: sym-drop-in var(--drop-dur) both;
  animation-duration: calc(var(--drop-dur) * (var(--row) + 1.5) / (var(--rows) + 0.5));
  animation-delay: calc(var(--col) * var(--col-stagger) + (var(--rows) - 1 - var(--row)) * var(--row-stagger) + var(--tease-delay, 0ms));   /* --tease-delay: the scatter tease (js/anticipation.js) */
}
@keyframes sym-drop-in {
  0% { transform: translateY(var(--from)); animation-timing-function: linear; }
  72% { transform: translateY(0) scale(1, 1); animation-timing-function: ease-out; }
  82% { transform: translateY(6px) scale(1.1, 0.84); animation-timing-function: ease-in-out; }
  92% { transform: translateY(-4px) scale(0.96, 1.05); }
  100% { transform: translateY(0) scale(1, 1); }
}
.sym.drop-out { animation: sym-drop-out var(--dropout-dur) cubic-bezier(0.5, 0, 1, 0.6) forwards; animation-delay: calc(var(--col) * var(--dropout-stagger)); }
@keyframes sym-drop-out { 0% { transform: translateY(0); } 100% { transform: translateY(calc((var(--rows) + 1) * var(--cell-h))); } }
.sym.fall { animation: sym-fall var(--fall-dur) both; }
@keyframes sym-fall {
  0% { transform: translateY(var(--from)); animation-timing-function: cubic-bezier(0.5, 0, 1, 0.6); }
  78% { transform: translateY(0) scale(1, 1); animation-timing-function: ease-out; }
  88% { transform: translateY(4px) scale(1.07, 0.9); }
  100% { transform: translateY(0) scale(1, 1); }
}

/* --- sticker pop --- */
.ticket.pop, .ticket-css.pop { animation: ticket-pop 480ms cubic-bezier(0.2, 1.7, 0.4, 1) both; }
@keyframes ticket-pop { 0% { transform: scale(0.3) rotate(-12deg); } 60% { transform: scale(1.18) rotate(3deg); } 100% { transform: scale(1) rotate(0); } }
.ticket.double, .ticket-css.double { animation: ticket-double 640ms cubic-bezier(0.2, 1.6, 0.4, 1) both; }
@keyframes ticket-double { 0% { transform: scale(1); filter: brightness(1); } 35% { transform: scale(1.55) rotate(-6deg); filter: brightness(1.8) drop-shadow(0 0 12px #ffe345); } 70% { transform: scale(0.94) rotate(2deg); filter: brightness(1.2); } 100% { transform: scale(1) rotate(0); filter: brightness(1); } }
.ticket.glow { animation: ticket-glow 500ms ease-in-out infinite alternate; }
@keyframes ticket-glow { from { transform: scale(1); } to { transform: scale(1.06); } }

/* --- burst particles: paint flecks, not sugar --- */
.dust { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.dust::before { content: ""; position: absolute; left: calc((var(--cell-h) + 1px) / -2); top: calc((var(--cell-h) + 1px) / -2); width: calc(var(--cell-h) + 1px); height: calc(var(--cell-h) + 1px); border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(255, 220, 240, 0.85) 30%, rgba(255, 61, 143, 0) 70%);
  animation: dust-puff 450ms ease-out forwards; }
.dust::after { content: ""; position: absolute; left: calc((var(--cell-w) - 20px) / -2); top: calc((var(--cell-h) - 3px) / -2); width: calc(var(--cell-w) - 20px); height: calc(var(--cell-h) - 3px); border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 61, 143, 0.55) 0%, rgba(255, 61, 143, 0.35) 40%, rgba(255, 61, 143, 0) 72%);
  animation: dust-cloud 720ms ease-out forwards; }
@keyframes dust-puff { 0% { transform: scale(0.3); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }
@keyframes dust-cloud { 0% { transform: scale(0.5); opacity: 0.2; } 25% { transform: scale(1); opacity: 1; } 60% { opacity: 0.85; } 100% { transform: scale(1.35); opacity: 0; } }
.dust i { position: absolute; left: 0; top: 0; width: var(--s, 10px); height: var(--s, 10px); margin: calc(var(--s, 10px) / -2); border-radius: 50% 50% 50% 0;
  background: var(--c, #fff); box-shadow: 0 0 0 2px var(--ink);
  animation: dust-fly var(--d, 700ms) cubic-bezier(0.1, 0.5, 0.3, 1) forwards; }
@keyframes dust-fly { 0% { transform: translate(0, 0) scale(1) rotate(0); opacity: 1; } 55% { opacity: 0.9; } 100% { transform: translate(var(--dx, 0px), var(--dy, 0px)) scale(0.2) rotate(180deg); opacity: 0; } }

/* --- cluster win label (in #boardFx) --- */
.win-label {
  position: absolute; transform: translate(-50%, -50%); white-space: nowrap; pointer-events: none;
  font-family: var(--font-display); font-size: 42px; color: #fff; letter-spacing: 1px;
  -webkit-text-stroke: 6px var(--ink); paint-order: stroke fill;
  text-shadow: 4px 4px 0 var(--ink);
  animation: label-in 300ms cubic-bezier(0.2, 1.6, 0.4, 1) both;
}
.win-label.out { animation: label-out 250ms ease-in forwards; }
@keyframes label-in { from { transform: translate(-50%, -50%) scale(0.2) rotate(-8deg); opacity: 0; } to { transform: translate(-50%, -50%) scale(1) rotate(-3deg); opacity: 1; } }
@keyframes label-out { to { transform: translate(-50%, -80%) scale(0.8); opacity: 0; } }

/* --- scatter ribbon: a hot-pink sticker strip across the lower third --- */
.scatter-ribbon, .scatter-ribbon-static {
  position: absolute; left: 50%; bottom: 3px; transform: translateX(-50%) rotate(-4deg); width: calc(var(--cell-w) - 16px); height: 25px; line-height: 25px; box-sizing: border-box;
  text-align: center; white-space: nowrap;
  font-family: var(--font-display); font-size: 17px; letter-spacing: 1.5px; color: #fff;
  -webkit-text-stroke: 1.2px var(--ink); paint-order: stroke fill;
  animation: ribbon-in 380ms cubic-bezier(0.2, 1.6, 0.4, 1) both;
}
.scatter-ribbon::before, .scatter-ribbon-static::before {
  content: ""; position: absolute; inset: -3px; z-index: -2; background: var(--ink);
  clip-path: polygon(0 0, 100% 0, 91% 50%, 100% 100%, 0 100%, 9% 50%);
}
.scatter-ribbon::after, .scatter-ribbon-static::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, #ff7ab8 0%, var(--hot) 55%, var(--hot-lo) 100%);
  clip-path: polygon(0 0, 100% 0, 91% 50%, 100% 100%, 0 100%, 9% 50%);
}
.cell.scatter-glow .sym > svg { filter: drop-shadow(0 0 8px #ffd52e); }
/* scatter anticipation: the column that may bring the third scatter glows gold while it is held (js/anticipation.js) */
.cell.anticipate::before { content: ""; position: absolute; inset: 2px; border-radius: 10px; z-index: 1; pointer-events: none;
  box-shadow: 0 0 0 3px rgba(255, 213, 46, 0.95), 0 0 18px 6px rgba(255, 213, 46, 0.55), inset 0 0 26px rgba(255, 213, 46, 0.6);
  background: rgba(255, 213, 46, 0.18); animation: anticipate-pulse 380ms ease-in-out infinite alternate; }
@keyframes anticipate-pulse { from { opacity: 0.55; } to { opacity: 1; } }
@keyframes ribbon-in { from { transform: translateX(-50%) rotate(-4deg) scale(0); } to { transform: translateX(-50%) rotate(-4deg) scale(1); } }

/* ==========================================================================
   POSTER LETTERING (SVG <use> layers on one <text>)
   pt-shadow: the hard offset shadow; pt-outer: the fat ink contour; pt-fill:
   the face. Same three layers everywhere, so every title on the stage is the
   same hand.
   ========================================================================== */
.poster-text { font-family: var(--font-display); letter-spacing: 2px; }
.pt-shadow { fill: var(--ink); stroke: var(--ink); stroke-width: 10px; stroke-linejoin: round; paint-order: stroke; }
.pt-outer { fill: none; stroke: var(--ink); stroke-width: 12px; stroke-linejoin: round; stroke-linecap: round; paint-order: stroke; }
.pt-fill { fill: #fff; stroke: none; }
.pt-fill.hot { fill: url(#gPinkYel); }
.pt-fill.cyan { fill: url(#gCyan); }
.pt-fill.lime { fill: url(#gLime); }
.pt-fill.gold { fill: url(#gGold); }
.pt-fill.dark { fill: var(--ink); }
.pt-outer.thick { stroke-width: 22px; }
.pt-shadow.thick { stroke-width: 18px; }
.pt-fill.thick { stroke: #fff; stroke-width: 4px; paint-order: stroke; }

/* logo */
#logo { left: 1058px; top: 34px; width: 220px; height: 160px; z-index: 6; pointer-events: none; }
#logo svg { overflow: visible; }
.logo-text { font-family: var(--font-display); letter-spacing: 1px; }
.lg-shadow { fill: var(--ink); stroke: var(--ink); stroke-width: 12px; stroke-linejoin: round; paint-order: stroke; }
.lg-outer { fill: none; stroke: var(--ink); stroke-width: 14px; stroke-linejoin: round; paint-order: stroke; }
.lg-fill { stroke: #fff; stroke-width: 4px; stroke-linejoin: round; paint-order: stroke; }
.lg-fill.match { fill: url(#gPinkYel); }
.lg-fill.rush { fill: url(#gCyan); }
.lg-gloss { fill: url(#gGlossV); stroke: none; pointer-events: none; }

/* ==========================================================================
   BUY FREE SPINS: an enamel station sign hanging on two chains
   ========================================================================== */
#buySign { left: 24px; top: 40px; width: 162px; height: 234px; z-index: 6; cursor: pointer; outline: none; transform-origin: 50% 0; animation: sign-sway 6s ease-in-out infinite; }
#buySign:hover .sign-panel { filter: brightness(1.08); }
#buySign:active { animation: none; transform: rotate(0) scale(0.97); }
#buySign.disabled { cursor: default; pointer-events: none; }
#buySign.disabled[data-mode="buy"] .sign-frame { filter: saturate(0.5) brightness(0.8); }
@keyframes sign-sway { 0%, 100% { transform: rotate(-1.2deg); } 50% { transform: rotate(1.2deg); } }
/* js/attract.js gives the sign one swing during the idle beat; it starts and
   ends on the sway's first frame, so the loop resumes without a jump */
#stage #buySign.sign-swing { animation: sign-swing 1.1s ease-in-out 1; }
@keyframes sign-swing { 0%, 100% { transform: rotate(-1.2deg); } 28% { transform: rotate(7deg); } 58% { transform: rotate(-5deg); } 82% { transform: rotate(2deg); } }
.sign-chains { position: absolute; left: 0; top: -40px; width: 100%; height: 66px; pointer-events: none; }
.sign-chains i { position: absolute; top: 0; width: 6px; height: 66px; background: repeating-linear-gradient(180deg, #b9bfd3 0 6px, #6b7189 6px 9px); border-left: 1.5px solid var(--ink); border-right: 1.5px solid var(--ink); box-sizing: border-box; }
.sign-chains i:first-child { left: 28px; } .sign-chains i:last-child { right: 28px; }
.sign-frame {
  position: absolute; left: 0; top: 22px; width: 162px; height: 212px; border-radius: 10px; padding: 7px; box-sizing: border-box;
  background: #f4f1ea; border: 4px solid var(--ink);
  box-shadow: 6px 6px 0 rgba(23, 18, 39, 0.55);
}
.sign-panel {
  position: relative; width: 100%; height: 100%; border-radius: 4px; overflow: hidden;
  background: linear-gradient(180deg, #1f6fd8, #0f3f9a 70%, #0a2c6e); border: 2px solid var(--ink); box-sizing: border-box;
  transition: background 500ms ease;
}
.sign-panel::before { content: ""; position: absolute; left: 6px; right: 6px; top: 6px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.35); }
.sign-text { position: absolute; left: -1px; top: 16px; width: 150px; height: 130px; overflow: visible; }
.sign-text .pt-outer { stroke-width: 9px; } .sign-text .pt-shadow { stroke-width: 7px; }
.sign-text .poster-text { letter-spacing: 1.5px; }
#buySign[data-mode="bonus"] .sign-text { top: 30px; }
#buySign[data-mode="bonus"] .sign-panel { background: linear-gradient(180deg, #ff5fae, #c4145f 70%, #7a0a3a); }
#buySign[data-mode="fsleft"] .sign-panel, #buySign[data-mode="frb"] .sign-panel { background: linear-gradient(180deg, #ff8f1f, #d95a0a 70%, #8a3a05); }
/* the price: a yellow ticket stub */
.sign-pill {
  position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%) rotate(-2deg); white-space: nowrap;
}
.sign-pill > span {
  position: relative; display: block; min-width: 100px; padding: 0 12px; height: 36px; line-height: 36px; border-radius: 6px; box-sizing: border-box; text-align: center;
  background: var(--yellow); border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--ink);
  font-family: var(--font-display); font-size: 30px; color: var(--ink); letter-spacing: 1.5px;
}
.sign-pill > span::before, .sign-pill > span::after { content: ""; position: absolute; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: #0f3f9a; border: 3px solid var(--ink); }
.sign-pill > span::before { left: -9px; } .sign-pill > span::after { right: -9px; }
#buySign[data-mode="bonus"] .sign-pill { display: none; }
#buySign[data-mode="fsleft"] .sign-pill > span, #buySign[data-mode="frb"] .sign-pill > span { font-size: 34px; }

/* ==========================================================================
   WIN LOG: the amber destination board on the platform
   ========================================================================== */
#winLog {
  left: 22px; top: 336px; width: 170px; height: 166px; z-index: 6; box-sizing: border-box;
  border-radius: 10px; background: #0c0d16; border: 4px solid var(--ink);
  box-shadow: inset 0 0 0 2px #3a3f5a, 5px 5px 0 rgba(23, 18, 39, 0.55);
  overflow: hidden;
}
#winLog::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0 2px, transparent 2px 4px); }
.log-head { position: absolute; left: 0; right: 0; top: 0; height: 24px; display: flex; align-items: center; justify-content: center; gap: 8px; background: #2a2f45; border-bottom: 2px solid var(--ink); font-family: var(--font-display); font-size: 16px; letter-spacing: 3px; color: #ffc44d; }
.log-head i { display: block; width: 8px; height: 8px; border-radius: 50%; background: #ff3b4e; box-shadow: 0 0 6px #ff3b4e; animation: blink 1.4s ease-in-out infinite; }
.log-head i:last-child { animation-delay: 0.7s; }
.log-idle { position: absolute; left: 0; right: 0; top: 54px; text-align: center; font-family: var(--font-cond); font-weight: 800; font-size: 20px; line-height: 26px; letter-spacing: 2px; color: #ffb02e; text-shadow: 0 0 8px rgba(255, 176, 46, 0.7); opacity: 0.9; }
.log-idle b { display: block; font-size: 1.3em; color: #ffd76a; }
#winLog.active .log-idle { display: none; }
#winLogRows { position: absolute; left: 6px; right: 6px; bottom: 6px; display: flex; flex-direction: column-reverse; gap: 3px; }
.log-row {
  display: flex; align-items: center; gap: 4px; height: 20px; padding: 0 6px; border-radius: 3px;
  background: rgba(255, 176, 46, 0.08); box-sizing: border-box;
  font-family: var(--font-cond); font-weight: 800; font-size: 16px; letter-spacing: 0.5px; color: #ffc44d; text-shadow: 0 0 6px rgba(255, 176, 46, 0.6);
  animation: logrow-in 260ms cubic-bezier(0.2, 1.5, 0.4, 1) both;
}
@keyframes logrow-in { from { transform: translateX(-14px); opacity: 0; } to { transform: none; opacity: 1; } }
.log-row .lsize { min-width: 14px; text-align: right; }
.log-row .licon { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; }
.log-row .licon > svg { width: 100%; height: 100%; display: block; }
.log-row .licon > i { display: block; width: 14px; height: 14px; border-radius: 50%; background: var(--c, #fff); }
.log-row .lmult { color: #fff; }
.log-row .lamt { margin-left: auto; color: #fff3c4; }

/* ==========================================================================
   HUD: the platform edge
   ========================================================================== */
#hud {
  left: 104px; top: 636px; width: 1072px; height: 84px; z-index: 7; border-radius: 18px 18px 0 0;
  background: linear-gradient(180deg, #4b5273 0%, #2f3349 30%, #1b1e2e 100%);
  box-shadow: inset 0 0 0 3px var(--ink), 0 -8px 24px rgba(0, 0, 0, 0.45);
  transition: background 700ms ease;
}
#hud > * { position: absolute; }
/* a sideways phone squeezes the landscape stage to ~0.55: ui.js raises
   body.hud-big below scale 0.72 and the whole platform edge grows a fifth,
   from its bottom centre, so the controls stay thumb-sized */
body.hud-big #hud { transform: scale(1.2); transform-origin: 50% 100%; }
/* the tactile safety strip along the platform edge */
.hud-strip { left: 3px; right: 3px; top: 3px; height: 12px; border-radius: 15px 15px 0 0; background: var(--yellow); pointer-events: none; }
.hud-strip::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: repeating-linear-gradient(90deg, transparent 0 14px, rgba(23, 18, 39, 0.35) 14px 18px); }

/* ---------- buttons: sticker chrome (a fat ink contour, a hard drop, one flat colour) ---------- */
.hud-btn { color: #fff; display: inline-flex; align-items: center; justify-content: center; transition: transform 120ms ease, filter 120ms ease, opacity 200ms; }
.hud-btn:hover { filter: brightness(1.12); }
.hud-btn:active { transform: translateY(2px) scale(0.97); }
.hud-btn:disabled, .hud-btn.disabled { opacity: 0.4; pointer-events: none; }
.hud-btn.round { position: relative; width: 44px; height: 44px; border-radius: 14px; background: var(--cyan); border: 3px solid var(--ink); box-shadow: 0 4px 0 var(--ink); box-sizing: border-box; }
.hud-btn.round::before { content: ""; position: absolute; left: 5px; right: 5px; top: 3px; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.45); pointer-events: none; }
.hud-btn.round:active { box-shadow: 0 1px 0 var(--ink); }
.hud-btn.round.small { width: 28px; height: 28px; border-radius: 9px; border-width: 2.5px; box-shadow: 0 3px 0 var(--ink); }
.hud-btn.round.small::before { top: 2px; height: 5px; }
.hud-btn.round.ctrl { background: var(--yellow); color: var(--ink); }
/* three equal 36px buttons in one row, so nothing is a 28px afterthought */
#menuBtn, #soundBtn { left: 22px; top: 32px; width: 36px; height: 36px; border-radius: 11px; border-width: 3px; box-shadow: 0 4px 0 var(--ink); }
#menuBtn::before, #soundBtn::before { top: 3px; height: 6px; }
#menuBtn .ico-menu i { width: 16px; height: 3px; }
#soundBtn { left: 66px; }
#soundBtn svg { width: 26px; height: 26px; }
#soundBtn .snd-mute { display: none; } #soundBtn.muted .snd-mute { display: block; } #soundBtn.muted .snd-wave { display: none; }
#infoBtn { left: 110px; top: 32px; width: 36px; height: 36px; border-radius: 11px; background: var(--hot); }
#infoBtn::before { top: 3px; height: 6px; }
.ico-menu { display: flex; flex-direction: column; gap: 3px; position: relative; } .ico-menu i { display: block; width: 13px; height: 2.5px; background: #fff; border-radius: 1px; box-shadow: 0 1px 0 var(--ink); }
/* a serif 'i' with its dot: the display face's 'i' read as a 'T' */
.ico-info { font-family: Georgia, 'Times New Roman', serif; font-weight: 900; font-size: 26px; line-height: 1; margin-top: -3px; color: #fff; -webkit-text-stroke: 1px var(--ink); paint-order: stroke fill; position: relative; }
.ico-minus, .ico-plus { position: relative; width: 18px; height: 18px; }
.ico-minus::before, .ico-plus::before, .ico-plus::after { content: ""; position: absolute; background: var(--ink); border-radius: 2px; }
.ico-minus::before, .ico-plus::before { left: 0; top: 7px; width: 18px; height: 4px; }
.ico-plus::after { left: 7px; top: 0; width: 4px; height: 18px; }

/* ---------- readouts: two dark slabs ---------- */
.readout { display: flex; align-items: center; gap: 8px; height: 26px; padding: 0 10px 0 8px; border-radius: 6px; box-sizing: border-box; background: #0c0d16; border: 2px solid var(--ink); box-shadow: inset 0 0 0 1.5px #3a3f5a; font-family: var(--font-cond); text-transform: uppercase; }
.readout .lbl { min-width: 54px; text-align: right; white-space: nowrap; color: var(--cyan); font-weight: 900; font-size: 15px; letter-spacing: 1px; }
.readout .val { color: #fff; font-weight: 800; font-size: 19px; letter-spacing: 0.5px; }
#credit { left: 166px; top: 20px; }
/* the bet lives inside its own stepper: [-] BET $2.00 [+] */
#bet { left: 202px; top: 52px; min-width: 140px; justify-content: center; }
#bet .lbl { width: auto; }

/* ---------- message line ---------- */
/* the box is as wide as the widest line ui.js allows (MSG_MAX_WIDTH), so a long translation is centred by its auto margins instead of spilling out of the right side */
#message { left: 360px; top: 14px; width: 470px; text-align: center; pointer-events: none; transform: scaleX(0.9); transform-origin: 50% 50%; }
#msgMain { font-family: var(--font-display); font-size: calc(40px * var(--fit, 1)); line-height: 44px; color: #fff; text-transform: uppercase; letter-spacing: calc(2px * var(--fit, 1)); white-space: nowrap;
  width: max-content; max-width: none; margin: 0 auto;
  -webkit-text-stroke: 1.5px var(--ink); paint-order: stroke fill; text-shadow: 3px 3px 0 var(--ink); transition: transform 120ms; }
#msgMain .gold, #msgSub .gold { color: var(--yellow); }
#msgMain.bump { animation: msg-bump 220ms ease-out; }
@keyframes msg-bump { 0% { transform: scale(1.12); } 100% { transform: scale(1); } }
#msgSub { font-family: var(--font-cond); font-weight: 800; font-size: calc(20px * var(--fit, 1)); line-height: 22px; color: #ffe9a8; text-transform: uppercase; letter-spacing: calc(1px * var(--fit, 1)); white-space: nowrap; text-shadow: 0 2px 0 var(--ink); min-height: 22px; }
#msgSub .icon { display: inline-block; width: 26px; height: 26px; vertical-align: -7px; margin: 0 4px; }
#msgMain .icon { display: inline-block; width: calc(40px * var(--fit, 1)); height: calc(40px * var(--fit, 1)); vertical-align: calc(-10px * var(--fit, 1)); margin: 0 4px; }
#msgMain .icon > svg, #msgSub .icon > svg { width: 100%; height: 100%; display: block; overflow: visible; }
#message.compact #msgMain { font-size: calc(26px * var(--fit, 1)); line-height: 28px; margin-top: 16px; }

/* ---------- bet +/- and the SPIN button ---------- */
#betDown, #betUp { width: 30px; height: 30px; border-radius: 9px; border-width: 2.5px; box-shadow: 0 3px 0 var(--ink); }
#betDown::before, #betUp::before { top: 2px; height: 5px; }
#betDown .ico-minus, #betUp .ico-plus, #betDown .ico-minus::before, #betUp .ico-plus::before { width: 14px; }
#betDown .ico-minus::before, #betUp .ico-plus::before { top: 6px; height: 3px; }
#betUp .ico-plus::after { left: 5.5px; width: 3px; height: 14px; }
#betDown .ico-minus, #betUp .ico-plus { height: 14px; }
#betDown { left: 166px; top: 50px; }
#betUp { left: 348px; top: 50px; }
/* SPIN: the big green one at the end of the platform, rising above the bar */
#spinBtn {
  left: 946px; top: -36px; width: 118px; height: 118px; border-radius: 50%; box-sizing: border-box;
  background: var(--lime); border: 5px solid var(--ink);
  box-shadow: 0 7px 0 var(--ink), 0 12px 20px rgba(0, 0, 0, 0.45);
}
#spinBtn::before { content: ""; position: absolute; left: 16px; right: 16px; top: 8px; height: 22px; border-radius: 50%; background: rgba(255, 255, 255, 0.45); pointer-events: none; }
#spinBtn .spin-ring { position: absolute; inset: 5px; border-radius: 50%; border: 3px dashed rgba(23, 18, 39, 0.45); pointer-events: none; }
/* the glyph sits a little above centre, the word under it, both well inside
   the ring; the word is CSS content so one rule per state owns it */
#spinBtn .spin-arrows { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -38px 0 0 -28px; transition: transform 300ms; }
#spinBtn .spin-word { position: absolute; left: 0; right: 0; bottom: 14px; text-align: center; font-family: var(--font-display); font-size: 17px; line-height: 1; letter-spacing: 2px; color: var(--ink); }
#spinBtn .spin-word::after { content: attr(data-spin); }
#spinBtn .spin-stop { position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -30px 0 0 -20px; border-radius: 8px; background: var(--red); border: 4px solid var(--ink); box-sizing: border-box; display: none; }
#spinBtn.spinning .spin-arrows, #spinBtn.stop .spin-arrows { display: none; }
#spinBtn.spinning .spin-stop, #spinBtn.stop .spin-stop { display: block; }
#spinBtn.spinning, #spinBtn.stop { background: var(--yellow); }
#spinBtn.spinning { pointer-events: none; }
#spinBtn.spinning .spin-stop { opacity: 0.5; }
#spinBtn.spinning .spin-word::after, #spinBtn.stop .spin-word::after { content: attr(data-stop); }
#spinBtn.stop .spin-stop { animation: stop-pulse 900ms ease-in-out infinite alternate; }
@keyframes stop-pulse { from { transform: scale(1); } to { transform: scale(1.1); } }
#spinBtn.idle:hover .spin-arrows { transform: rotate(40deg); }
#spinBtn:active { transform: translateY(4px) scale(0.98); box-shadow: 0 3px 0 var(--ink), 0 6px 12px rgba(0, 0, 0, 0.45); }
#spinBtn.disabled { pointer-events: none; } #spinBtn.disabled .spin-arrows { opacity: 0.4; }

/* ---------- autoplay / speed pills ---------- */
.hud-btn.pill, .hud-btn.pill-small { height: 26px; border-radius: 8px; background: #0c0d16; border: 2.5px solid var(--ink); box-shadow: inset 0 0 0 1.5px #3a3f5a, 0 3px 0 var(--ink); font-family: var(--font-display); font-size: 15px; letter-spacing: 2px; white-space: nowrap; box-sizing: border-box; color: #fff; }
#autoBtn { left: 812px; top: 50px; width: 122px; padding: 0 8px 0 10px; }
#autoBtn.active { background: var(--hot); border-color: var(--ink); color: #fff; }
.hud-btn.pill-small { padding: 0 6px; }
#speedBtn { left: 812px; top: 18px; z-index: 2; width: 122px; }
#speedBtn .chev { font-size: 14px; line-height: 1; margin: 0 -1px; opacity: 0.25; transition: opacity 150ms; color: var(--yellow); }
#speedBtn[data-speed="normal"] .chev:nth-child(1) { opacity: 1; }
#speedBtn[data-speed="quick"] .chev:nth-child(-n+2) { opacity: 1; }
#speedBtn[data-speed="turbo"] .chev { opacity: 1; }
#hudRightBtn { display: none; }
#hudRightBtn .chev { font-size: 18px; line-height: 1; }

/* ---------- settings popover: a tag on the wall ---------- */
.popover { left: 120px; top: 380px; width: 260px; padding: 14px 16px 16px; box-sizing: border-box; z-index: 30; border-radius: 6px;
  background: var(--paper); border: 4px solid var(--ink); box-shadow: 8px 8px 0 rgba(23, 18, 39, 0.6); color: var(--ink);
  animation: pop-in 180ms cubic-bezier(0.2, 1.4, 0.4, 1) both; }
@keyframes pop-in { from { transform: translateY(14px) scale(0.92); opacity: 0; } to { transform: none; opacity: 1; } }
.popover-title { font-family: var(--font-display); font-size: 24px; letter-spacing: 3px; margin-bottom: 8px; color: var(--hot); -webkit-text-stroke: 1px var(--ink); paint-order: stroke fill; }
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 0; font-family: var(--font-cond); font-weight: 800; font-size: 16px; letter-spacing: 1px; cursor: pointer; }
.toggle-row input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle-row .switch { position: relative; width: 46px; height: 24px; border-radius: 12px; background: #b9b2a1; border: 2.5px solid var(--ink); box-sizing: border-box; transition: background 150ms; flex: none; }
.toggle-row .switch::after { content: ""; position: absolute; left: 2px; top: 2px; width: 15px; height: 15px; border-radius: 50%; background: #fff; border: 2px solid var(--ink); box-sizing: border-box; transition: left 150ms; }
.toggle-row input:checked + .switch { background: var(--lime); }
.toggle-row input:checked + .switch::after { left: 23px; }
.toggle-row.light { color: var(--ink); font-size: 18px; padding: 12px 0 0; justify-content: center; gap: 16px; }
.menu-link { display: block; width: 100%; margin-top: 10px; padding: 8px 0; border-radius: 6px; background: var(--cyan); color: var(--ink); font-family: var(--font-display); font-size: 18px; letter-spacing: 2px; border: 3px solid var(--ink); box-shadow: 0 4px 0 var(--ink); }
.menu-link:hover { filter: brightness(1.1); }
.menu-link:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }

/* ==========================================================================
   OVERLAYS
   ========================================================================== */
.overlay { left: 0; top: 0; width: var(--stage-w); height: var(--stage-h); z-index: 20; animation: overlay-in 220ms ease both; }
.overlay.dim { background: linear-gradient(180deg, rgba(13, 9, 48, 0.72) 0, rgba(13, 9, 48, 0.72) var(--hud-top), rgba(13, 9, 48, 0) var(--hud-top)); }
/* while any overlay is up the stage stops clipping, and each overlay's
   backdrop runs far past the stage so the letterbox dims (or fills with the
   splash colour) together with it instead of staying bright */
#stage:has(.overlay:not([hidden])) { clip-path: none; }
.overlay.dim::before { content: ""; position: absolute; inset: -4000px; background: rgba(13, 9, 48, 0.72); z-index: -1; pointer-events: none; }
.overlay.closing { animation: overlay-out 200ms ease forwards; pointer-events: none; }
@keyframes overlay-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes overlay-out { to { opacity: 0; } }
.modal-panel { animation: modal-in 320ms cubic-bezier(0.2, 1.4, 0.4, 1) both; }
@keyframes modal-in { from { transform: translateY(40px) rotate(-2deg) scale(0.8); opacity: 0; } to { transform: rotate(0) scale(1); opacity: 1; } }
.overlay.closing .modal-panel { animation: modal-out 180ms ease-in forwards; }
@keyframes modal-out { to { transform: scale(0.85); opacity: 0; } }

/* ---------- the poster: cream stock, a fat ink edge, a hard shadow, tape ---------- */
.poster { position: absolute; background: var(--paper); border: 5px solid var(--ink); box-shadow: 12px 12px 0 rgba(23, 18, 39, 0.65); box-sizing: border-box; color: var(--ink); }
.poster .tape { position: absolute; width: 90px; height: 26px; background: rgba(255, 229, 120, 0.85); border: 1.5px solid rgba(23, 18, 39, 0.45); z-index: 3; pointer-events: none; }
.poster .tape.tl { left: -30px; top: -14px; transform: rotate(-38deg); }
.poster .tape.tr { right: -30px; top: -14px; transform: rotate(38deg); }

/* ---------- toast ---------- */
#toast { left: 0; right: 0; margin: 0 auto; top: 300px; transform: rotate(-2deg); padding: 12px 28px; border-radius: 6px; z-index: 40; background: var(--yellow); border: 4px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); color: var(--ink); font-family: var(--font-display); font-size: 26px; letter-spacing: 2px; text-transform: uppercase; animation: pop-in 200ms ease both; pointer-events: none; width: max-content; max-width: 88%; white-space: normal; text-align: center; overflow-wrap: anywhere; }

/* ==========================================================================
   INTRO: the poster pasted on the wall
   ========================================================================== */
#intro { background: linear-gradient(180deg, #0d0930 0%, #3a1a6e 55%, #b8386a 100%); }
#intro::before { content: ""; position: absolute; left: -4000px; right: -4000px; top: 0; bottom: 0; background: inherit; z-index: -1; }
.intro-sky { position: absolute; inset: 0; overflow: hidden; }
.intro-rays { position: absolute; left: 50%; top: 45%; width: 2600px; height: 2600px; margin: -1300px 0 0 -1300px; opacity: 0.2;
  background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, 0) 0deg 9deg, rgba(255, 255, 255, 0.5) 9deg 18deg); animation: rays-rot 60s linear infinite; }
.intro-sky::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; background: linear-gradient(180deg, rgba(27, 30, 46, 0) 0%, #1b1e2e 60%); }
.intro-left { position: absolute; left: 40px; top: 6px; width: 840px; height: 710px; }
.intro-logo { position: absolute; left: 280px; top: -14px; width: 280px; height: 170px; z-index: 3; }
.intro-logo svg { width: 100%; height: 100%; overflow: visible; }
.intro-cab { left: 60px; top: 110px; width: 720px; height: 460px; padding: 18px; transform: rotate(-1.5deg); }
.intro-board { position: absolute; left: 18px; top: 18px; width: 674px; height: 414px; display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(7, 1fr); overflow: hidden; border-radius: 4px; border: 3px solid var(--ink); box-sizing: border-box;
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(668px / 7 - 3px), var(--grout) calc(668px / 7 - 3px) calc(668px / 7)),
    repeating-linear-gradient(180deg, transparent 0 calc(408px / 7 - 3px), var(--grout) calc(408px / 7 - 3px) calc(408px / 7)),
    var(--tile); }
.icell { position: relative; }
.icell .ticket-css, .icell .iticket { position: absolute; inset: 0 1px; }
.icell .iticket > svg { width: 100%; height: 100%; display: block; }
.icell .mark > svg { width: 100%; height: 100%; display: block; }
.icell .isym { position: absolute; left: 50%; top: 50%; width: 84px; height: 56px; margin: -28px 0 0 -42px; display: flex; align-items: center; justify-content: center; }
.icell .isym > svg { width: 100%; height: 100%; display: block; overflow: visible; }
.icell .ticket-css { font-size: 34px; }
.intro-board.slide-1 .iticket, .intro-board.slide-1 .ticket-css { animation: ticket-pop 500ms cubic-bezier(0.2, 1.6, 0.4, 1) both; animation-delay: calc(var(--i) * 25ms); }
.intro-dots { position: absolute; left: 0; width: 840px; top: 590px; display: flex; justify-content: center; gap: 18px; }
.intro-dots .dot { width: 20px; height: 20px; border-radius: 50%; border: 3px solid var(--ink); box-sizing: border-box; background: #fff; cursor: pointer; }
.intro-dots .dot.active { background: var(--hot); }
.intro-caption { position: absolute; left: 0; width: 840px; top: 618px; text-align: center; font-family: var(--font-display); font-size: 36px; line-height: 44px; text-transform: uppercase; letter-spacing: 2px; }
.intro-caption .cap-line { position: relative; color: #fff; -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; text-shadow: 4px 4px 0 var(--ink); }
.intro-caption .cap-line::before, .intro-caption .cap-line::after { display: none; }
.intro-caption .cap-line > span { position: relative; background: linear-gradient(180deg, #ffe23a 30%, #ff8f1f 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: 0; text-shadow: none; }
.intro-right { position: absolute; left: 900px; top: 40px; width: 330px; height: 660px; }
.intro-spin { position: absolute; left: 100px; top: 296px; width: 134px; height: 134px; border-radius: 50%; background: var(--lime); border: 5px solid var(--ink); box-shadow: 0 8px 0 var(--ink), 0 14px 24px rgba(0, 0, 0, 0.45); color: #fff; box-sizing: border-box; }
.intro-spin .spin-ring { position: absolute; inset: 5px; border-radius: 50%; border: 3px dashed rgba(23, 18, 39, 0.45); }
.intro-spin .spin-arrows { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -44px 0 0 -32px; }
.intro-spin .spin-word { position: absolute; left: 0; right: 0; bottom: 16px; line-height: 1; text-align: center; font-family: var(--font-display); font-size: 18px; letter-spacing: 3px; color: var(--ink); }
.intro-spin:hover .spin-arrows { transform: rotate(40deg); transition: transform 300ms; }
.intro-spin:active { transform: translateY(4px); box-shadow: 0 3px 0 var(--ink); }
.volatility-badge { position: absolute; left: 72px; top: 490px; display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px 0 6px; border-radius: 6px; background: var(--ink); color: #fff; font-family: var(--font-cond); font-weight: 700; font-size: 15px; letter-spacing: 1px; white-space: nowrap; border: 2px solid #fff; }
.volatility-badge b { font-weight: 900; color: var(--yellow); }
.volatility-badge .vol-icon { width: 22px; height: 22px; border-radius: 50%; background: var(--yellow); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; box-sizing: border-box; }
.volatility-badge.inline { position: static; margin: 4px auto 8px; display: flex; width: max-content; }
.intro-check { position: absolute; left: 30px; top: 540px; display: flex; align-items: center; gap: 10px; cursor: pointer; font-family: var(--font-cond); font-weight: 800; font-size: 17px; color: #fff; text-shadow: 0 2px 0 var(--ink); letter-spacing: 1px; white-space: nowrap; }
.intro-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.intro-check .box { width: 26px; height: 26px; border-radius: 5px; border: 3px solid var(--ink); background: #fff; box-sizing: border-box; position: relative; flex: none; box-shadow: 3px 3px 0 var(--ink); }
.intro-check input:checked + .box::after { content: ""; position: absolute; left: 6px; top: 1px; width: 7px; height: 13px; border: solid var(--hot); border-width: 0 4px 4px 0; transform: rotate(45deg); }
/* Rushy on the poster (see the MASCOT section for the strip mechanics) */
.intro-mascot {
  position: absolute; left: 30px; top: -20px; width: 292px; height: 347px;
  pointer-events: none; user-select: none; overflow: hidden;
  filter: drop-shadow(0 12px 16px rgba(0, 0, 0, 0.5));
  animation: rushy-breathe 3.4s ease-in-out infinite;
}
.intro-mascot > .strip { display: block; width: 400%; height: 100%; background: url("../assets/mascot/idle.png") 0 0 / 100% 100% no-repeat; animation: rushy-sheet4 1.5s steps(4) infinite; }

/* ==========================================================================
   INFO / PAYTABLE: the rules poster
   ========================================================================== */
.info-panel { left: 128px; top: 10px; width: 1008px; height: 604px; font-family: var(--font-ui); }
.info-close { position: absolute; right: -4px; top: -4px; width: 54px; height: 54px; border-radius: 0 0 0 12px; background: var(--red); border: 4px solid var(--ink); color: #fff; font-size: 30px; font-weight: 900; line-height: 1; z-index: 2; box-sizing: border-box; -webkit-text-stroke: 1px var(--ink); }
.info-close:hover { filter: brightness(1.1); }
.info-pages { position: absolute; left: 20px; right: 20px; top: 18px; bottom: 60px; overflow: hidden; }
.info-page { display: none; text-align: center; font-size: 18px; line-height: 1.22; font-weight: 600; color: #2a2438; }
.info-page.active { display: block; max-height: 100%; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; }   /* a long translation scrolls rather than being cut */
.info-page h2 { font-family: var(--font-display); font-size: 34px; font-weight: 400; letter-spacing: 3px; margin: 8px 0 4px; color: var(--hot); -webkit-text-stroke: 1.2px var(--ink); paint-order: stroke fill; text-shadow: 3px 3px 0 var(--ink); }
.info-page h2.spaced { margin-top: 36px; }
.info-page p { margin: 3px 30px; }
.info-page p.gap { margin-top: 20px; }
.info-page .maxWinText { font-weight: 800; }
.info-page[data-page="1"] h2 { margin: 2px 0; }
.info-page[data-page="1"].active { overflow-y: hidden; }   /* fits in every language; the scatter art overhangs its box by a few px */
.info-page[data-page="1"] p { line-height: 1.15; }   /* the paytable page is the full one: every symbol and the scatter stay above the nav */
/* paytable page: one card per symbol — icon plus the eleven prizes in three short columns
   (15+..12 | 11..8 | 7..5). Landscape: four cards a row, icon on top. */
.pay-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 14px; margin: 8px 20px 0; }
.pay-col { display: flex; flex-direction: row; align-items: center; gap: 14px; padding: 4px 12px; }
.pay-col:last-child:nth-child(odd) { grid-column: 1 / -1; width: calc(50% - 7px); justify-self: center; box-sizing: border-box; }
.pay-col .pay-icon { width: 84px; height: 72px; flex: none; display: flex; align-items: center; justify-content: center; }
.pay-col .pay-icon > svg { width: 70px; height: 70px; display: block; }
.pay-col .pay-icon > i { display: block; width: 56px; height: 56px; border-radius: 14px; background: var(--c, #fff); }
.pay-tables { display: flex; align-items: flex-start; gap: 14px; flex: 1; justify-content: space-between; }
.pay-col table { border-collapse: collapse; font-size: 18px; line-height: 19px; font-weight: 700; }
.pay-col td { padding: 0 3px; white-space: nowrap; }
.pay-col td:first-child { text-align: right; color: var(--hot-lo); }
.pay-col td:last-child { text-align: left; }
.scatter-row { display: flex; align-items: center; justify-content: center; gap: 24px; margin-top: 0; text-align: left; }
.scatter-icon { position: relative; width: 110px; height: 92px; display: flex; align-items: center; justify-content: center; }
.scatter-icon > svg { width: 80px; height: 80px; display: block; overflow: visible; margin-top: -14px; }
.scatter-icon > i { display: block; width: 50px; height: 76px; border-radius: 25px 25px 8px 8px; background: var(--yellow); }
.scatter-icon .scatter-ribbon-static { bottom: 4px; width: 112px; height: 32px; line-height: 32px; font-size: 20px; animation: none; }
.info-nav { position: absolute; left: 50px; bottom: 22px; display: flex; align-items: center; gap: 14px; }
.nav-arrow { width: 44px; height: 44px; border-radius: 12px; background: var(--cyan); border: 3px solid var(--ink); box-shadow: 0 4px 0 var(--ink); position: relative; box-sizing: border-box; }
.nav-arrow::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; border: solid var(--ink); border-width: 0 5px 5px 0; }
.nav-arrow.left::after { transform: translate(-30%, -50%) rotate(135deg); }
.nav-arrow.right::after { transform: translate(-70%, -50%) rotate(-45deg); }
.nav-arrow:active, .nav-x:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.nav-x { width: 44px; height: 44px; border-radius: 12px; background: var(--red); border: 3px solid var(--ink); box-shadow: 0 4px 0 var(--ink); color: #fff; font-size: 26px; font-weight: 900; line-height: 1; box-sizing: border-box; -webkit-text-stroke: 1px var(--ink); }
.info-pageno { position: absolute; right: 50px; bottom: 36px; font-size: 16px; font-weight: 800; letter-spacing: 1px; }
.mini-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 6px; margin: 0 2px; border-radius: 7px; border: 2px solid var(--ink); background: var(--cyan); color: var(--ink); font-style: normal; font-size: 13px; font-weight: 800; line-height: 1; vertical-align: -6px; box-sizing: border-box; box-shadow: 0 2px 0 var(--ink); }
.mini-btn.wide { padding: 0 10px; font-size: 12px; }
.mini-arrow { display: inline-block; width: 0; height: 0; border-style: solid; vertical-align: -3px; margin: 0 4px; }
.mini-arrow.left { border-width: 8px 14px 8px 0; border-color: transparent var(--cyan-lo) transparent transparent; }
.mini-arrow.right { border-width: 8px 0 8px 14px; border-color: transparent transparent transparent var(--cyan-lo); }
.mini-x { color: var(--red); font-weight: 900; font-style: normal; font-size: 20px; margin: 0 4px; }

/* ==========================================================================
   BUY / AUTOPLAY DIALOGS
   ========================================================================== */
.buy-panel, .auto-panel { left: 50%; top: 140px; width: 680px; margin-left: -340px; padding: 12px; transform-origin: 50% 50%; }
.poster .panel-inner { position: relative; min-height: 320px; text-align: center; }
.buy-title { display: block; margin: 8px auto -6px; overflow: visible; }
.buy-title .pt-outer { stroke-width: 16px; } .buy-title .pt-shadow { stroke-width: 12px; }
/* the price / count: a ticket */
.ticket-pill { display: inline-block; position: relative; }
.ticket-pill > span, .ticket-pill.count-pill { position: relative; display: block; padding: 0 34px; height: 64px; line-height: 64px; border-radius: 8px; background: var(--yellow); border: 4px solid var(--ink); box-shadow: 6px 6px 0 var(--ink);
  font-family: var(--font-display); font-size: 44px; color: var(--ink); letter-spacing: 2px; }
.ticket-pill > span::before, .ticket-pill > span::after, .ticket-pill.count-pill::before, .ticket-pill.count-pill::after { content: ""; position: absolute; top: 50%; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%; background: var(--paper); border: 4px solid var(--ink); }
.ticket-pill > span::before, .ticket-pill.count-pill::before { left: -12px; } .ticket-pill > span::after, .ticket-pill.count-pill::after { right: -12px; }
.buy-warn { margin: 14px 0 -4px; font-family: var(--font-display); font-size: 22px; letter-spacing: 2px; color: var(--red); -webkit-text-stroke: 1px var(--ink); paint-order: stroke fill; animation: blink 1.2s ease-in-out infinite; }
.buy-actions { display: flex; justify-content: center; gap: 220px; margin: 8px 0 18px; }
.buy-actions.single { gap: 0; margin: 16px 0 18px; }
.chunky { position: relative; width: 124px; height: 66px; border-radius: 14px; border: 4px solid var(--ink); box-shadow: 0 7px 0 var(--ink); color: #fff; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; transition: transform 100ms, box-shadow 100ms, filter 100ms; }
.chunky > svg { width: 44px; height: 44px; display: block; overflow: visible; }
.chunky::after { content: ""; position: absolute; left: 10px; right: 10px; top: 5px; height: 12px; border-radius: 6px; background: rgba(255, 255, 255, 0.4); pointer-events: none; }
.chunky:hover { filter: brightness(1.08); } .chunky:active { transform: translateY(5px); box-shadow: 0 2px 0 var(--ink); }
.chunky.red { background: var(--red); }
.chunky.green { background: var(--lime); }
.chunky:disabled, .chunky.disabled { filter: saturate(0.2) brightness(0.8); cursor: default; pointer-events: none; }
/* the bet stepper sits inside the poster, under the price, so the total is
   read and changed in one place */
.buy-footer { position: relative; margin: 12px 0 0; text-align: center; }
.buy-footer .lbl { font-family: var(--font-display); font-size: 18px; color: var(--ink); letter-spacing: 3px; }
.bet-stepper { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 2px; }
.bet-stepper .bet-box { min-width: 116px; height: 40px; line-height: 40px; border-radius: 6px; background: #0c0d16; border: 2.5px solid var(--ink); box-shadow: inset 0 0 0 1.5px #3a3f5a; color: #fff; font-family: var(--font-cond); font-weight: 800; font-size: 22px; box-sizing: border-box; }
.panel-title { margin: 16px 0 2px; font-family: var(--font-display); font-weight: 400; font-size: 60px; color: var(--hot); letter-spacing: 4px; -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; text-shadow: 5px 5px 0 var(--ink); }
.auto-sub { font-family: var(--font-cond); font-weight: 800; font-size: 18px; color: var(--ink); letter-spacing: 2px; margin-bottom: 12px; }
.auto-grid { display: grid; grid-template-columns: repeat(4, 118px); gap: 12px; justify-content: center; }
.auto-grid button { height: 48px; border-radius: 10px; background: var(--cyan); border: 3px solid var(--ink); color: var(--ink); font-family: var(--font-display); font-size: 26px; letter-spacing: 1px; box-shadow: 0 5px 0 var(--ink); transition: transform 100ms, box-shadow 100ms, filter 100ms; }
.auto-grid button:nth-child(4n+2) { background: var(--yellow); } .auto-grid button:nth-child(4n+3) { background: var(--lime); } .auto-grid button:nth-child(4n+4) { background: var(--hot); color: #fff; }
.auto-grid button:hover { filter: brightness(1.08); }
.auto-grid button:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); }

/* ==========================================================================
   SPLASH SCREENS (big win / free spins)
   ========================================================================== */
.overlay.splash { cursor: pointer; }
/* the backdrop runs far past the stage; the gradient has fixed radii (the
   stage's farthest corner) so it looks the same inside the stage and simply
   keeps going into the letterbox, with no seam at the stage edge */
.overlay.splash .splash-bg { position: absolute; inset: -4000px; opacity: 0.92; background: radial-gradient(ellipse 905px 560px at 50% calc(50% - 36px), #3a1a6e 0%, #1b0f45 45%, #0d0930 100%); }
#stage.splash-open #hud { pointer-events: none; }   /* stays under the splash background like the rest of the stage */
.overlay.splash .splash-bg.pink { background: radial-gradient(ellipse 905px 560px at 50% calc(50% - 36px), #a01b6e 0%, #4a0f5a 45%, #16062e 100%); }
/* rays: a conic gradient on a square twice the stage, spun with a transform */
.splash-rays { position: absolute; left: 50%; top: 50%; width: 2000px; height: 2000px; margin: -1000px 0 0 -1000px; opacity: 0.35; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(255, 213, 46, 0) 0deg 12deg, rgba(255, 213, 46, 0.55) 12deg 24deg); animation: rays-rot 40s linear infinite; will-change: transform; }
.fs .splash-rays { background: repeating-conic-gradient(from 0deg, rgba(255, 61, 143, 0) 0deg 12deg, rgba(255, 61, 143, 0.6) 12deg 24deg); }
@keyframes rays-rot { to { transform: rotate(360deg); } }
.splash-splats { position: absolute; inset: 0; pointer-events: none; }
.splash-splats svg { position: absolute; overflow: visible; animation: splat-in 500ms cubic-bezier(0.2, 1.6, 0.4, 1) both; }
.splash-splats svg:nth-child(2) { animation-delay: 80ms; } .splash-splats svg:nth-child(3) { animation-delay: 160ms; } .splash-splats svg:nth-child(4) { animation-delay: 240ms; }
@keyframes splat-in { from { transform: scale(0); } to { transform: scale(1); } }
.splash-content { position: absolute; left: 0; top: 0; width: var(--stage-w); height: var(--stage-h); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.splash-title { overflow: visible; animation: title-in 600ms cubic-bezier(0.2, 1.5, 0.4, 1) both; }
.splash-title .star-l, .splash-title .star-r, .fs-congrats .star-l, .fs-congrats .star-r { animation: star-spin 3s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.splash-title .star-r, .fs-congrats .star-r { animation-delay: 0.6s; }
@keyframes star-spin { 0%, 100% { transform: rotate(-10deg) scale(1); } 50% { transform: rotate(10deg) scale(1.12); } }
@keyframes title-in { from { transform: scale(0.2) rotate(-8deg); opacity: 0; } to { transform: scale(1) rotate(-3deg); opacity: 1; } }
.splash-title-text { letter-spacing: 4px; }
.count-pill { width: 560px; height: 96px; margin-top: 30px; padding: 0; line-height: normal; animation: pill-in 500ms cubic-bezier(0.2, 1.5, 0.4, 1) both; animation-delay: 150ms; box-sizing: border-box; }
@keyframes pill-in { from { transform: scale(0.3) rotate(4deg); opacity: 0; } to { transform: scale(1) rotate(-1deg); opacity: 1; } }
.count-pill .pill-text { position: absolute; left: 16px; top: -12px; overflow: visible; }
.count-pill.ticking .pill-text { animation: count-tick 90ms ease-out; }
@keyframes count-tick { from { transform: scale(1.03); } to { transform: scale(1); } }
.fs-line { overflow: visible; animation: title-in 500ms cubic-bezier(0.2, 1.5, 0.4, 1) both; animation-delay: 100ms; }
.fs-congrats { overflow: visible; animation: title-in 600ms cubic-bezier(0.2, 1.5, 0.4, 1) both; }
.fs-content { gap: 0; z-index: 1; }
.fs-content .count-pill { margin-top: 14px; }
.fs-panel { left: 50%; top: 50%; width: 1120px; height: 560px; margin: -286px 0 0 -560px; z-index: -1; transform: rotate(-1deg); animation: modal-in 320ms cubic-bezier(0.2, 1.4, 0.4, 1) both; }
.fs .fs-congrats .pt-fill { fill: url(#gPinkYel); }
/* the two lines on the poster: hot pink on cream, one ink contour, no drop */
.fs .fs-line .pt-fill { fill: var(--hot); }
.fs .fs-line .pt-outer { stroke: var(--ink); stroke-width: 9px; }
.fs .fs-line .pt-shadow { display: none; }
/* the number on the ticket: plain ink on yellow */
.count-pill .pt-outer, .count-pill .pt-shadow { display: none; }
.count-pill .pt-fill { fill: var(--ink); }
.press-anywhere { margin-top: 20px; font-family: var(--font-display); font-size: 26px; color: var(--ink); letter-spacing: 3px; animation: blink 1.6s ease-in-out infinite; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
#fsScreen .press-anywhere { visibility: hidden; }
#fsScreen.ready .press-anywhere { visibility: visible; }
.overlay.popup { pointer-events: none; display: flex; align-items: center; justify-content: center; }
.retrig-pill { animation: retrig-in 400ms cubic-bezier(0.2, 1.6, 0.4, 1) both; }
@keyframes retrig-in { from { transform: scale(0.2) rotate(-6deg); opacity: 0; } to { transform: scale(1) rotate(-2deg); opacity: 1; } }
.overlay.popup.closing .retrig-pill { animation: modal-out 220ms ease-in forwards; }

/* --- the win rain: tokens and spray caps --- */
#coinLayer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.coin { position: absolute; top: -100px; left: var(--x, 50%); width: var(--s, 60px); height: var(--s, 60px); animation: coin-fall var(--d, 2.2s) cubic-bezier(0.3, 0, 0.8, 0.5) var(--delay, 0s) both; }
.coin > svg { width: 100%; height: 100%; display: block; overflow: visible; animation: coin-flip var(--f, 700ms) linear infinite; }
@keyframes coin-fall { 0% { transform: translateY(0) rotate(0deg); opacity: 0; } 8% { opacity: 1; } 100% { transform: translateY(calc(var(--stage-h) + 160px)) rotate(var(--r, 360deg)); opacity: 1; } }
@keyframes coin-flip { 0% { transform: perspective(160px) rotateY(0deg); } 100% { transform: perspective(160px) rotateY(360deg); } }
.coin.star > svg { animation: none; }

/* --- big-win tiers (js/bigwin.js sets #bigWin[data-tier]) ---
   BIG: yellow rays at the resting speed. MEGA: hot pink, twice as fast.
   EPIC: cyan, faster still. MAX: the rainbow title over cyan rays. Every
   upgrade punches the title, kicks the ticket and throws a flash ring. */
#bigWin[data-tier="mega"] .splash-rays { background: repeating-conic-gradient(from 0deg, rgba(255, 61, 143, 0) 0deg 12deg, rgba(255, 61, 143, 0.6) 12deg 24deg); animation-duration: 18s; opacity: 0.42; }
#bigWin[data-tier="epic"] .splash-rays { background: repeating-conic-gradient(from 0deg, rgba(47, 208, 255, 0) 0deg 12deg, rgba(47, 208, 255, 0.6) 12deg 24deg); animation-duration: 9s; opacity: 0.5; }
#bigWin[data-tier="max"] .splash-rays { background: repeating-conic-gradient(from 0deg, rgba(47, 208, 255, 0) 0deg 10deg, rgba(255, 213, 46, 0.65) 10deg 20deg); animation-duration: 6s; opacity: 0.55; }
#bigWin[data-tier="mega"] .splash-bg { background: radial-gradient(ellipse 905px 560px at 50% calc(50% - 36px), #6e1a5a 0%, #3a0f45 45%, #150930 100%); }
#bigWin[data-tier="epic"] .splash-bg { background: radial-gradient(ellipse 905px 560px at 50% calc(50% - 36px), #1a4a6e 0%, #0f2a55 45%, #090d30 100%); }
#bigWin[data-tier="max"] .splash-bg { background: radial-gradient(ellipse 905px 560px at 50% calc(50% - 36px), #6e3a1a 0%, #45150f 45%, #200930 100%); }
.splash-title.tier-punch { animation: tier-punch 520ms cubic-bezier(0.2, 1.6, 0.3, 1) both; }
@keyframes tier-punch { 0% { transform: scale(1.65) rotate(2deg); filter: brightness(2.2); } 55% { transform: scale(0.94) rotate(-4deg); filter: brightness(1.15); } 100% { transform: scale(1) rotate(-3deg); filter: brightness(1); } }
.count-pill.tier-kick { animation: tier-kick 360ms cubic-bezier(0.2, 1.6, 0.3, 1) both; }
@keyframes tier-kick { 0% { transform: scale(1.18) rotate(1deg); } 100% { transform: scale(1) rotate(-1deg); } }
.tier-flash { position: absolute; left: 50%; top: 50%; width: 1100px; height: 1100px; margin: -550px 0 0 -550px; border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(circle, #ffffff 0%, #ffffff 9%, var(--tier-color, #ffd52e) 26%, rgba(255, 255, 255, 0) 60%);
  animation: tier-flash 620ms cubic-bezier(0.1, 0.8, 0.3, 1) both; will-change: transform, opacity; }
@keyframes tier-flash { 0% { transform: scale(0.3); opacity: 1; } 35% { opacity: 0.95; } 100% { transform: scale(1.5); opacity: 0; } }
.splash-splats .tier-splat { animation: tier-splat-in 520ms cubic-bezier(0.2, 1.6, 0.4, 1) both; opacity: 0.85; }
@keyframes tier-splat-in { from { transform: rotate(var(--rot, 0deg)) scale(0); } to { transform: rotate(var(--rot, 0deg)) scale(1); } }

/* ---------- misc utility ---------- */
.no-anim, .no-anim * { animation: none !important; transition: none !important; }
.hidden-fade { opacity: 0; pointer-events: none; }

/* ==========================================================================
   MASCOT
   Rushy is a sprite sheet, not a still. Each animation is one PNG of four
   frames laid out in a row; the element shows one frame at a time by sliding
   a 400%-wide strip with transform: translateX() in steps(4). Frames are
   320x380 and every frame in a sheet was packed to the same scale and the
   same ground line (tools/build_mascot_sheet.py). The writer boy who replaces
   him (art/mascot/BOY_BRIEF.md) drops into the same three sheets.
   ========================================================================== */
#mascot {
  left: 1046px; top: 196px; width: 232px; height: 276px; z-index: 6;
  pointer-events: none; user-select: none; overflow: hidden;
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.55));
  transform-origin: 50% 100%;
  animation: rushy-breathe 3.4s ease-in-out infinite;
  translate: var(--fx, 0px) var(--fy, 0px);
  transition: translate var(--fly-dur, 420ms) cubic-bezier(0.3, 0, 0.2, 1);
}
#mascot.mascot-flip { scale: -1 1; }
#mascot > .strip, .splash-mascot > .strip {
  display: block; width: 400%; height: 100%;
  background: url("../assets/mascot/idle.png") 0 0 / 100% 100% no-repeat;
  animation: rushy-sheet4 1.5s steps(4) infinite;
}
@keyframes rushy-sheet4 { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@keyframes rushy-breathe { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.008); } }

/* Reactions are explicit events. A spinning board does not make him run. */
/* main.js raises body.mascot-cheer for two hops (880 ms) when a big win or a
   free-spins phase starts, then drops it; the mascot idles for the rest. */
body.mascot-cheer #mascot { animation: rushy-jump 0.44s ease-in-out 2; }
body.mascot-cheer #mascot > .strip { background-image: url("../assets/mascot/cheer.png"); animation: rushy-sheet4 0.44s steps(4) 2; }
@keyframes rushy-jump {
  0%, 100% { transform: translateY(0) scale(1); }
  15%  { transform: scale(1.012, 0.985); }
  45%  { transform: translateY(-9px); }
  80%  { transform: translateY(0) scale(1.018, 0.98); }
}
/* Painting a cluster: one fast pass to the spraying frame, held; the paint
   waits for the arm to come up (spray()'s lead). Declared after the phase
   reactions: the selectors tie on specificity and the spray must win. */
body.mascot-spray #mascot { animation: rushy-recoil 0.62s ease-out forwards; }
body.mascot-spray #mascot > .strip,
body.mascot-spray-big #mascot > .strip { background-image: url("../assets/mascot/spray.png"); animation: rushy-spray4 0.2s steps(3) 1 forwards; }
body.mascot-spray-big #mascot { animation: rushy-recoil-big 0.72s ease-out forwards; }
@keyframes rushy-spray4 { from { transform: translateX(0); } to { transform: translateX(-75%); } }
@keyframes rushy-recoil {
  0%   { transform: translate(0, 0) rotate(0deg); }
  16%  { transform: translateX(2px) rotate(0.7deg); }
  38%  { transform: translateX(1px) rotate(0.3deg); }
  60%  { transform: translateX(2px) rotate(0.6deg); }
  100% { transform: none; }
}
@keyframes rushy-recoil-big {
  0%   { transform: translate(0, 0) rotate(0deg) scale(1); }
  12%  { transform: translateX(4px) rotate(1.2deg); }
  30%  { transform: translateX(2px) rotate(0.5deg); }
  50%  { transform: translateX(3px) rotate(0.9deg); }
  72%  { transform: translateX(1px) rotate(0.3deg); }
  100% { transform: none; }
}
/* flight: ui.js sets --fx/--fy/--fly-dur/--dir and the leg class */
#mascot.mascot-fly-out  { animation: rushy-fly-out  var(--fly-dur, 420ms) ease-out both; }
#mascot.mascot-fly-home { animation: rushy-fly-home var(--fly-dur, 420ms) ease-in-out both; }
#mascot.mascot-landed   { animation: rushy-landed 0.2s ease-out both; }
#mascot.mascot-fly-out > .strip, #mascot.mascot-fly-home > .strip { animation-duration: 0.3s; }
@keyframes rushy-fly-out {
  0%   { transform: translateY(0) rotate(0deg) scale(1, 1); }
  14%  { transform: scale(1.015, 0.985); }
  40%  { transform: translateY(-8px) rotate(calc(var(--dir, 1) * 3deg)); }
  75%  { transform: translateY(-3px) rotate(calc(var(--dir, 1) * 1deg)); }
  100% { transform: translateY(0) rotate(0deg) scale(1, 1); }
}
@keyframes rushy-landed {
  0%   { transform: scale(1.025, 0.975); }
  45%  { transform: scale(0.995, 1.005); }
  100% { transform: translateY(0) scale(1, 1); }
}
@keyframes rushy-fly-home {
  0%   { transform: translateY(0) rotate(0deg) scale(1, 1); }
  20%  { transform: translateY(-6px) rotate(calc(var(--dir, 1) * 3deg)); }
  70%  { transform: translateY(-2px) rotate(calc(var(--dir, 1) * 1deg)); }
  100% { transform: translateY(0) rotate(0deg) scale(1, 1); }
}
/* on the free-spins poster */
.splash-mascot {
  position: absolute; left: 946px; top: 236px; width: 286px; height: 340px; z-index: 2;
  pointer-events: none; user-select: none; overflow: hidden;
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.5));
  transform-origin: 50% 100%;
  animation: splash-mascot-in 720ms cubic-bezier(0.2, 1.5, 0.4, 1) both;
}
/* two cheer hops, then the idle sheet: the same rule as the board mascot */
.splash-mascot > .strip { background-image: url("../assets/mascot/cheer.png");
  animation: rushy-sheet4 0.44s steps(4) 2, rushy-sheet4 1.5s steps(4) infinite 0.88s, sheet-to-idle 0.88s step-end forwards; }
@keyframes sheet-to-idle { from { background-image: url("../assets/mascot/cheer.png"); } to { background-image: url("../assets/mascot/idle.png"); } }
@keyframes splash-mascot-in { from { transform: translateY(80px) scale(0.6) rotate(-14deg); opacity: 0; } to { transform: none; opacity: 1; } }

/* ==========================================================================
   SPRAY PAINT (the beat between a cluster being named and it bursting)
   ========================================================================== */
.paint-blob {
  position: absolute; left: 0; top: 0; width: 46px; height: 46px; margin: -23px 0 0 -23px;
  pointer-events: none; z-index: 6;
  transform: translate(var(--x0), var(--y0));
  animation: blob-fly var(--fd, 300ms) linear both;
  filter: saturate(1.4) drop-shadow(0 3px 0 rgba(23, 18, 39, 0.7));
}
.paint-blob > svg { width: 100%; height: 100%; display: block; }
@keyframes blob-fly {
  from { transform: translate(var(--x0), var(--y0)) scale(1.6, 0.55) rotate(0deg); }
  70%  { transform: translate(var(--x1), var(--y1)) scale(1.25, 0.8) rotate(160deg); }
  to   { transform: translate(var(--x1), var(--y1)) scale(1, 1) rotate(220deg); }
}
.spray-jet {
  position: absolute; left: 0; top: 0; width: var(--len, 90px); height: 30px; margin-top: -15px;
  pointer-events: none; z-index: 7;
  transform: translate(var(--x0), var(--y0)) rotate(var(--ang, 0deg));
  transform-origin: 0 50%;
  background: linear-gradient(90deg, #fff 0, #fff 22%, transparent 22%), var(--c, #ff4fd0);
  clip-path: polygon(0 44%, 0 56%, 100% 100%, 100% 0);
  animation: jet-on var(--jd, 300ms) steps(6) both;
}
@keyframes jet-on {
  0%   { opacity: 1; transform: translate(var(--x0), var(--y0)) rotate(var(--ang, 0deg)) scaleY(0.6); }
  17%  { transform: translate(var(--x0), var(--y0)) rotate(calc(var(--ang, 0deg) + 4deg)) scaleY(1.15); }
  34%  { transform: translate(var(--x0), var(--y0)) rotate(calc(var(--ang, 0deg) - 3deg)) scaleY(0.9); }
  51%  { transform: translate(var(--x0), var(--y0)) rotate(calc(var(--ang, 0deg) + 3deg)) scaleY(1.1); }
  68%  { transform: translate(var(--x0), var(--y0)) rotate(calc(var(--ang, 0deg) - 4deg)) scaleY(0.95); }
  85%  { opacity: 1; transform: translate(var(--x0), var(--y0)) rotate(var(--ang, 0deg)) scaleY(1); }
  100% { opacity: 0; transform: translate(var(--x0), var(--y0)) rotate(var(--ang, 0deg)) scaleY(0.4); }
}
.splat-ring {
  position: absolute; left: 0; top: 0; width: 40px; height: 40px; margin: -20px 0 0 -20px;
  pointer-events: none; z-index: 6;
  transform: translate(var(--x1), var(--y1));
  border: 5px solid var(--c, #ff4fd0); border-radius: 50%;
  box-shadow: inset 0 0 0 3px #fff, 0 0 0 2px var(--ink);
  animation: ring-out 260ms cubic-bezier(0.1, 0.9, 0.3, 1) both;
}
.splat-ring > b {
  position: absolute; left: 50%; top: 50%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px;
  border-radius: 50% 50% 50% 0; background: var(--c, #ff4fd0); box-shadow: 0 0 0 2.5px var(--ink);
  animation: drop-out 280ms cubic-bezier(0.1, 0.8, 0.4, 1) both;
}
.splat-ring > b:nth-child(1) { --dx: 26px; --dy: -22px; transform: rotate(45deg); }
.splat-ring > b:nth-child(2) { --dx: -24px; --dy: -18px; transform: rotate(135deg); }
.splat-ring > b:nth-child(3) { --dx: 22px; --dy: 24px; transform: rotate(-45deg); }
.splat-ring > b:nth-child(4) { --dx: -26px; --dy: 20px; transform: rotate(-135deg); }
@keyframes ring-out {
  0%   { transform: translate(var(--x1), var(--y1)) scale(0.2); opacity: 1; }
  60%  { transform: translate(var(--x1), var(--y1)) scale(1.5); opacity: 1; }
  100% { transform: translate(var(--x1), var(--y1)) scale(1.9); opacity: 0; }
}
@keyframes drop-out { 0% { translate: 0 0; scale: 1.2; opacity: 1; } 100% { translate: var(--dx) var(--dy); scale: 0.5; opacity: 0; } }
.cell .splat {
  position: absolute; inset: 14%; z-index: 2; pointer-events: none;
  animation: splat-land 200ms cubic-bezier(0.2, 1.6, 0.4, 1) both;
  filter: saturate(1.4) drop-shadow(0 3px 0 rgba(23, 18, 39, 0.6));
}
.cell .splat > svg { width: 100%; height: 100%; display: block; }
@keyframes splat-land { 0% { transform: scale(0.3); opacity: 1; } 55% { transform: scale(1.3); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
.cell.painted .sym { animation: none; filter: saturate(1.35) brightness(1.06); }
.cell.setting .sym { animation: paint-set 190ms linear both; }
.cell.setting .splat { animation: paint-set-splat 190ms linear both; }
@keyframes paint-set {
  0%   { transform: rotate(0deg) scale(1); }
  20%  { transform: rotate(1.2deg) scale(1.01); }
  40%  { transform: rotate(-1.8deg) scale(1.02); }
  60%  { transform: rotate(2.4deg) scale(1.03); }
  80%  { transform: rotate(-3deg) scale(1.04); }
  100% { transform: rotate(0deg) scale(1.06); }
}
@keyframes paint-set-splat { to { transform: scale(1.06); } }

/* ==========================================================================
   PORTRAIT LAYOUT (#stage.portrait, 720x1280)
   js/ui.js layout() adds the class whenever the viewport is taller than it
   is wide. Composition, top to bottom: logo + mascot, the board in its frame,
   the sign + destination board row, the platform HUD.
   ========================================================================== */
#stage.portrait {
  --stage-w: 720px; --stage-h: 1280px;
  --cell-w: 97px; --cell-h: 90px;
  --board-x: 20px; --board-y: 164px; --board-w: 679px; --board-h: 630px;
  --hud-top: 1036px;
}
#stage.portrait #bgScene { width: 720px; height: 1280px; }
#stage.portrait #trainLayer { display: none; }      /* the tracks sit under the sign row; no room for a train */
#stage.portrait #frame { display: none; }
#stage.portrait #board { box-shadow: 0 0 0 4px var(--ink), 0 0 0 14px var(--steel), 0 0 0 18px var(--ink), inset 0 8px 24px rgba(0, 0, 0, 0.25); }
#stage.portrait #logo { left: 250px; top: 0; transform: scale(0.72); transform-origin: 50% 0; }
#stage.portrait #debugPanel { left: 516px !important; top: 6px !important; }
#stage.portrait .scatter-ribbon { font-size: 14px; height: 23px; line-height: 23px; }
#stage.portrait #mascot { left: 556px; top: 2px; width: 152px; height: 181px; }

/* sign + destination board row */
#stage.portrait #buySign { left: 20px; top: 846px; width: 276px; height: 184px; animation: none; }
#stage.portrait .sign-chains { display: none; }
#stage.portrait .sign-frame { top: 0; width: 276px; height: 178px; }
#stage.portrait .sign-text { left: 10px; top: 6px; width: 240px; height: 90px; }
#stage.portrait #buySign[data-mode="bonus"] .sign-text { top: 28px; }
#stage.portrait .sign-pill { bottom: 12px; }
#stage.portrait .sign-pill > span { min-width: 124px; font-size: 32px; }
#stage.portrait #winLog { left: 316px; top: 852px; width: 384px; height: 178px; }
#stage.portrait .log-idle { top: 60px; }

/* HUD: three rows. Message on top; CREDIT and the BET stepper side by side;
   then menu / sound / info at left, a big SPIN in the middle and AUTOPLAY +
   speed stacked at right. Everything sized for a phone at ~0.54 scale. */
#stage.portrait #hud { left: 0; top: 1036px; width: 720px; height: 244px; border-radius: 22px 22px 0 0; }
#stage.portrait #message { left: 0; top: 16px; width: 720px; transform: none; }
#stage.portrait #message.compact #msgMain { margin-top: 8px; }
#stage.portrait .readout { height: 42px; border-radius: 9px; border-width: 3px; padding: 0 14px 0 12px; }
#stage.portrait .readout .lbl { width: auto; font-size: 20px; }
#stage.portrait .readout .val { font-size: 27px; }
#stage.portrait #credit { left: 20px; top: 84px; width: 322px; justify-content: space-between; }
#stage.portrait #bet { left: 420px; top: 84px; width: 230px; min-width: 0; }
#stage.portrait #betDown, #stage.portrait #betUp { top: 83px; width: 44px; height: 44px; border-radius: 12px; border-width: 3px; box-shadow: 0 4px 0 var(--ink); }
#stage.portrait #betDown { left: 370px; }
#stage.portrait #betUp { left: 656px; }
#stage.portrait #betDown .ico-minus, #stage.portrait #betUp .ico-plus, #stage.portrait #betDown .ico-minus::before, #stage.portrait #betUp .ico-plus::before { width: 20px; }
#stage.portrait #betDown .ico-minus::before, #stage.portrait #betUp .ico-plus::before { top: 8px; height: 4px; }
#stage.portrait #betDown .ico-minus, #stage.portrait #betUp .ico-plus { height: 20px; }
#stage.portrait #betUp .ico-plus::after { left: 8px; width: 4px; height: 20px; }
#stage.portrait #spinBtn { left: 304px; top: 132px; width: 112px; height: 112px; }
#stage.portrait #spinBtn .spin-arrows { width: 54px; height: 54px; margin: -36px 0 0 -27px; }
#stage.portrait #spinBtn .spin-word { font-size: 16px; bottom: 13px; }
#stage.portrait #spinBtn .spin-stop { width: 38px; height: 38px; margin: -28px 0 0 -19px; }
#stage.portrait #menuBtn, #stage.portrait #soundBtn, #stage.portrait #infoBtn { top: 160px; width: 56px; height: 56px; border-width: 3px; border-radius: 16px; box-shadow: 0 5px 0 var(--ink); }
#stage.portrait #menuBtn { left: 24px; }
#stage.portrait #soundBtn { left: 100px; }
#stage.portrait #infoBtn { left: 176px; }
#stage.portrait #menuBtn::before, #stage.portrait #soundBtn::before, #stage.portrait #infoBtn::before { top: 4px; height: 9px; }
#stage.portrait #menuBtn .ico-menu { gap: 4px; } #stage.portrait #menuBtn .ico-menu i { width: 24px; height: 4px; }
#stage.portrait #soundBtn svg { width: 36px; height: 36px; }
#stage.portrait .ico-info { font-size: 36px; }
#stage.portrait #autoBtn { left: 448px; top: 142px; width: 252px; height: 46px; border-radius: 11px; font-size: 21px; }
#stage.portrait #speedBtn { left: 448px; top: 198px; width: 252px; height: 40px; border-radius: 11px; padding: 0 10px; }
#stage.portrait #speedBtn .chev { font-size: 20px; }
#stage.portrait #hudRightBtn { display: none; }

#stage.portrait .popover { left: 24px; top: 905px; width: 300px; }   /* six rows now (HISTORY): starts higher so it ends inside the stage */
#stage.portrait .toggle-row { font-size: 18px; padding: 9px 0; }
#stage.portrait .menu-link { padding: 11px 0; font-size: 20px; }
#stage.portrait #toast { top: 600px; }

/* intro */
#stage.portrait .intro-left { left: 0; top: 14px; transform: scale(0.857); transform-origin: 0 0; }
#stage.portrait .intro-right { left: 0; top: 626px; width: 720px; height: 654px; }
#stage.portrait .intro-mascot { left: 24px; top: 0; width: 330px; height: 392px; }
/* Portrait intro column (right of the runner): sized for a thumb — the 170px button, 36px
   badge and 19px checkbox read small on a phone. Play grows to 216px around the same centre
   (x525), the badge is centred under it, the checkbox keeps its left edge. */
#stage.portrait .intro-spin { left: 417px; top: 96px; width: 216px; height: 216px; }
#stage.portrait .intro-spin .spin-arrows { width: 100px; height: 100px; margin: -68px 0 0 -50px; }
#stage.portrait .volatility-badge { left: 525px; top: 340px; height: 46px; padding: 0 18px 0 8px; gap: 10px; font-size: 21px; transform: translateX(-50%); }
#stage.portrait .volatility-badge .vol-icon { width: 28px; height: 28px; font-size: 16px; }
#stage.portrait .intro-check { left: 388px; top: 412px; gap: 13px; font-size: 24px; }
#stage.portrait .intro-check .box { width: 38px; height: 38px; border-width: 3px; }
#stage.portrait .intro-check input:checked + .box::after { left: 11px; top: 3px; width: 10px; height: 19px; }
#stage.portrait .intro-dots .dot { width: 28px; height: 28px; }

/* info modal */
#stage.portrait .info-panel { left: 20px; top: 40px; width: 680px; height: 1180px; }
#stage.portrait .info-pages { left: 16px; right: 16px; top: 26px; bottom: 96px; }
#stage.portrait .info-page { font-size: 21px; line-height: 1.32; }
#stage.portrait .info-page h2 { font-size: 38px; margin: 14px 0 8px; }
#stage.portrait .info-page h2.spaced { margin-top: 40px; }
#stage.portrait .info-page p { margin: 4px 14px; }
#stage.portrait .info-page p.gap { margin-top: 24px; }
/* four columns a row (4 + 3), so all seven symbols and the scatter fit above the nav */
/* portrait: one card per row, icon on the left, the three prize columns beside it */
#stage.portrait .pay-grid { display: flex; flex-direction: column; gap: 8px; margin: 8px 12px 4px; }
#stage.portrait .pay-col { gap: 14px; padding: 6px 10px; }
#stage.portrait .pay-col:last-child:nth-child(odd) { width: auto; }
#stage.portrait .pay-col .pay-icon { width: 96px; height: 96px; flex: none; }
#stage.portrait .pay-col .pay-icon > svg { width: 88px; height: 88px; }
#stage.portrait .pay-tables { gap: 44px; flex: 1; justify-content: flex-start; }   /* on a window-wide panel the three columns stay together beside the icon */
#stage.portrait .pay-col table { font-size: 24px; line-height: 28px; }
#stage.portrait .info-page[data-page="1"] p { font-size: 19px; line-height: 1.22; }
#stage.portrait .scatter-row { margin-top: 8px; gap: 18px; }
#stage.portrait .scatter-icon { width: 104px; height: 104px; }
#stage.portrait .scatter-icon > svg { width: 84px; height: 84px; }
#stage.portrait .info-nav { left: 40px; bottom: 34px; gap: 22px; }
#stage.portrait .info-pageno { right: 40px; bottom: 50px; font-size: 18px; }
#stage.portrait .mini-btn { min-width: 26px; height: 26px; font-size: 15px; }

/* dialogs */
#stage.portrait .buy-panel, #stage.portrait .auto-panel { top: 330px; }
#stage.portrait .buy-footer .lbl { font-size: 22px; }
#stage.portrait .bet-stepper { gap: 20px; margin-top: 6px; }
#stage.portrait .bet-stepper .bet-box { min-width: 150px; height: 46px; line-height: 46px; font-size: 26px; }
#stage.portrait .toggle-row.light { font-size: 20px; }

/* splash screens */
#stage.portrait .splash-title { width: 680px; height: 166px; }
#stage.portrait .splash-splats svg:nth-child(2) { left: 480px !important; top: 60px !important; }
#stage.portrait .splash-splats svg:nth-child(3) { left: 500px !important; top: 980px !important; }
#stage.portrait .fs-panel { width: 680px; height: 620px; margin: -320px 0 0 -340px; }
#stage.portrait .fs-congrats { width: 660px; height: 114px; }
#stage.portrait .fs-line { width: 600px; height: 77px; }
#stage.portrait .count-pill { width: 520px; }
#stage.portrait .press-anywhere { font-size: 28px; }
#stage.portrait .splash-mascot { left: 460px; top: 60px; width: 230px; height: 273px; }   /* above the poster; below it he hid behind the HUD */

/* ==========================================================================
   REDUCED MOTION: nothing loops, nothing flies
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  #train, .splash-rays, .intro-rays, #buySign, .log-head i,
  #mascot, body[data-phase] #mascot, body.mascot-spray #mascot, body.mascot-spray-big #mascot,
  #mascot.mascot-fly-out, #mascot.mascot-fly-home, #mascot.mascot-landed,
  #mascot > .strip, .splash-mascot > .strip, .splash-mascot, .intro-mascot, .intro-mascot > .strip,
  .cell .splat, .cell.setting .sym, .cell.setting .splat { animation: none; }
  #mascot { transition: none; }
  .paint-blob { animation-duration: 1ms; }
  .splash-title.tier-punch, .count-pill.tier-kick, .splash-splats .tier-splat { animation: none; }
  .tier-flash { display: none; }
  .cell.anticipate::before { animation: none; }
  #trainLayer { display: none; }
}

/* ==========================================================================
   HISTORY / REPLAY / REALITY CHECK (js/history.js, js/realitycheck.js)
   Two more posters and the REPLAY tag. Portrait overrides at the end.
   ========================================================================== */
.history-panel { left: 128px; top: 15px; width: 1008px; height: 588px; padding: 0 12px; font-family: var(--font-cond); }
.history-inner { display: flex; flex-direction: column; height: 100%; min-height: 0; text-align: center; }
.history-inner .panel-title { margin: 12px 0 0; font-size: 52px; line-height: 1; }
.history-sub { font-family: var(--font-display); font-size: 15px; letter-spacing: 3px; color: var(--hot-lo); margin: 2px 0 8px; }
.history-note { font-style: normal; color: var(--ink); opacity: 0.6; letter-spacing: 2px; }
.history-note::before { content: "\00b7"; margin: 0 8px; }
/* # | time | type | bet | win | max mult | tumbles | scatters | balance | replay */
.history-head, .hrow { display: grid; grid-template-columns: 44px 112px 90px 120px 150px 110px 130px 1fr; align-items: center; column-gap: 8px; }
.history-head { margin: 0 18px 4px 30px; font-family: var(--font-display); font-size: 15px; letter-spacing: 2px; color: var(--ink); opacity: 0.75; }
.history-head .hbet, .history-head .hwin, .history-head .hbal { text-align: right; }
.history-head .hmult { text-align: center; }
.history-rows { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; margin: 0 6px 14px 18px; padding: 0 6px 0 12px; border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink); scrollbar-width: thin; scrollbar-color: var(--ink) var(--paper-lo); }
.history-rows::-webkit-scrollbar { width: 10px; } .history-rows::-webkit-scrollbar-track { background: var(--paper-lo); } .history-rows::-webkit-scrollbar-thumb { background: var(--ink); border-radius: 5px; }
.hrow { height: 60px; border-bottom: 2px dashed rgba(23, 18, 39, 0.28); font-size: 22px; font-weight: 800; color: #2a2438; text-align: left; }
.hrow:nth-child(odd) { background: rgba(23, 18, 39, 0.045); }
.hrow > span { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; overflow: hidden; }
.hrow .hno { color: var(--hot-lo); font-size: 15px; }
.hrow .hno::before { content: "#"; opacity: 0.6; }
.hrow .htime { flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; line-height: 1.05; }
.hrow .hbet, .hrow .hwin { flex-direction: column; align-items: flex-end; justify-content: center; gap: 0; line-height: 1.05; }
.hrow .hbet, .hrow .hwin, .hrow .hbal { justify-content: flex-end; font-variant-numeric: tabular-nums; }
.hrow .hmult { justify-content: center; font-variant-numeric: tabular-nums; }
.hrow .hact .hreplay { max-width: 100%; }
.hrow .hbal { font-size: 19px; color: #4d4761; }
.hrow .hmode { justify-content: center; gap: 4px; }
.hrow small { font-size: 12px; font-weight: 800; letter-spacing: 1px; opacity: 0.7; }
.hrow .hwin { color: #6a6478; }
.hrow .hwin.pos { color: var(--lime-lo); }
.hrow .hwin.pos small { color: var(--hot-lo); opacity: 1; }
.hrow .hmeta, .hrow .hmeta2, .hrow .hcaret { display: none; }
.hbadge { display: inline-block; padding: 0 9px; height: 24px; line-height: 20px; border-radius: 6px; border: 2px solid var(--ink); font-family: var(--font-display); font-style: normal; font-size: 14px; letter-spacing: 1.5px; color: var(--ink); background: var(--yellow); box-sizing: border-box; transform: rotate(-3deg); }
.hbadge.bonus, .hbadge.free { background: var(--hot); color: #fff; }
.hbadge.buy { background: var(--cyan); }
.hbadge.max { background: var(--yellow); padding: 0 6px; font-size: 12px; transform: rotate(3deg); }
.hrow .hact { justify-content: flex-end; }
.hreplay { height: 34px; padding: 0 14px; border-radius: 9px; background: var(--lime); border: 3px solid var(--ink); color: var(--ink); font-family: var(--font-display); font-size: 17px; letter-spacing: 2px; box-shadow: 0 4px 0 var(--ink); transition: transform 100ms, box-shadow 100ms, filter 100ms; }
.hreplay:hover { filter: brightness(1.08); } .hreplay:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.hempty { padding: 70px 0; font-family: var(--font-display); font-size: 34px; letter-spacing: 3px; color: var(--hot); -webkit-text-stroke: 1.2px var(--ink); paint-order: stroke fill; text-shadow: 3px 3px 0 var(--ink); }
.hempty small { display: block; margin-top: 10px; font-size: 18px; color: var(--ink); -webkit-text-stroke: 0; text-shadow: none; opacity: 0.7; }

/* the tag over the board while a stored round is presented again */
#replayTag { display: none; left: calc(var(--board-x) - 22px); top: calc(var(--board-y) - 26px); z-index: 12; pointer-events: none; transform: rotate(-6deg); animation: pop-in 220ms cubic-bezier(0.2, 1.4, 0.4, 1) both; }
#replayTag > span { display: block; padding: 4px 22px 2px; border-radius: 6px; background: var(--yellow); border: 4px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); font-family: var(--font-display); font-size: 30px; letter-spacing: 4px; color: var(--ink); }
#replayTag > span::before { content: "\25B6"; margin-right: 10px; font-size: 22px; color: var(--hot-lo); }
body.replaying #replayTag { display: block; }
body.replaying #creditVal { opacity: 0.55; }

/* reality check: the buy poster's footprint, two labelled chunky buttons */
.rc-panel { left: 50%; top: 110px; width: 680px; margin-left: -340px; padding: 12px; transform-origin: 50% 50%; }
.rc-inner .panel-title { font-size: 54px; margin: 14px 0 4px; }
.rc-sub { font-family: var(--font-cond); font-weight: 800; font-size: 18px; letter-spacing: 2px; color: var(--ink); margin-bottom: 14px; }
.rc-inner .ticket-pill > span { font-size: 40px; }
.rc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 22px 26px 0; }
.rc-stats > div { border: 3px solid var(--ink); border-radius: 8px; background: rgba(23, 18, 39, 0.05); padding: 8px 6px 6px; }
.rc-stats span { display: block; font-family: var(--font-display); font-size: 15px; letter-spacing: 2px; color: var(--hot-lo); }
.rc-stats b { display: block; font-family: var(--font-cond); font-weight: 800; font-size: 28px; color: var(--ink); font-variant-numeric: tabular-nums; }
.rc-stats b.pos { color: var(--lime-lo); } .rc-stats b.neg { color: var(--red); }
.rc-actions { gap: 60px; margin: 24px 0 14px; }
.chunky.text { width: 200px; font-family: var(--font-display); font-size: 28px; letter-spacing: 3px; color: #fff; -webkit-text-stroke: 1.2px var(--ink); paint-order: stroke fill; text-shadow: 2px 2px 0 var(--ink); }

/* portrait */
#stage.portrait .history-panel { left: 20px; top: 40px; width: 680px; height: 1180px; }
#stage.portrait .history-inner .panel-title { font-size: 56px; margin-top: 18px; }
#stage.portrait .history-sub { font-size: 17px; margin-bottom: 12px; }
/* portrait: # | time | type | bet | win | replay on the first line; max mult,
   tumbles, scatters and balance fold into .hmeta on a second line */
#stage.portrait .history-head, #stage.portrait .hrow { grid-template-columns: 34px 92px 74px 96px 1fr 96px; column-gap: 6px; }
#stage.portrait .history-head .hmult, #stage.portrait .history-head .hbal,
#stage.portrait .hrow > .hmult, #stage.portrait .hrow > .hbal { display: none; }
#stage.portrait .hrow { grid-template-rows: 46px auto auto auto; height: auto; min-height: 46px; padding: 0 10px 4px; font-size: 19px; cursor: pointer; }
/* collapsed card: #, time, badge, bet, win and a caret; the details open on tap */
#stage.portrait .hrow .hmeta, #stage.portrait .hrow .hmeta2, #stage.portrait .hrow .hact { display: none; }
#stage.portrait .hrow.open .hmeta, #stage.portrait .hrow.open .hmeta2 { display: flex; }
#stage.portrait .hrow .hmeta { grid-row: 2; }
#stage.portrait .hrow .hmeta2 { grid-row: 3; }
#stage.portrait .hrow.open .hact { display: flex; grid-row: 4; grid-column: 1 / -1; padding: 6px 0 4px; }
#stage.portrait .hrow.open .hact .hreplay { width: 100%; max-width: none; }
#stage.portrait .hrow .hcaret { grid-row: 1; grid-column: 6; }
#stage.portrait .hrow .hcaret { display: block; width: 14px; height: 14px; margin: auto; border: solid #4d4761; border-width: 0 3px 3px 0; transform: rotate(45deg) translate(-2px, -2px); transition: transform 160ms ease; }
#stage.portrait .hrow.open .hcaret { transform: rotate(225deg) translate(-2px, -2px); }
#stage.portrait .history-head .hact { display: none; }
#stage.portrait .hrow .hmeta, #stage.portrait .hrow .hmeta2 { grid-column: 1 / -1; align-self: start; gap: 5px; font-size: 13px; letter-spacing: 0.5px; color: #4d4761; white-space: nowrap; overflow: hidden; }   /* display comes from the .open rules above */
#stage.portrait .hrow .hbet small, #stage.portrait .hrow .hwin small { display: none; }   /* shown in .hmeta2 instead */
#stage.portrait .hrow .hmeta b { font-family: var(--font-display); font-weight: 400; letter-spacing: 1px; color: var(--hot-lo); text-transform: uppercase; }
#stage.portrait .history-head { margin-left: 22px; font-size: 13px; letter-spacing: 1px; }
#stage.portrait .history-rows { margin: 0 4px 18px 10px; padding-left: 8px; }
#stage.portrait .hrow small { font-size: 11px; }
#stage.portrait .history-note { display: block; margin-top: 2px; } #stage.portrait .history-note::before { content: none; }
#stage.portrait .hreplay { padding: 0 10px; font-size: 15px; }
#stage.portrait #replayTag { left: calc(var(--board-x) - 6px); top: calc(var(--board-y) - 30px); }
#stage.portrait .rc-panel { top: 330px; }

/* ==========================================================================
   i18n (js/i18n.js). The poster look is a CSS uppercase: the dictionary is
   written in sentence case so a translator never shouts. Georgian has no
   case (uppercase would swap the script for Mtavruli) so it opts out; the
   fallback faces bring the Georgian and Cyrillic glyphs Bangers and Barlow
   Condensed lack, per glyph, so digits and Latin keep the display face.
   ========================================================================== */
.poster-text, .popover-title, .toggle-row, .menu-link, .panel-title, .info-page h2, .auto-sub, .buy-warn, .buy-footer .lbl,
.log-head, .log-idle, .press-anywhere, .intro-check, .volatility-badge, .intro-caption, .history-head, .history-sub, .hbadge, .hreplay, .hempty,
.rc-sub, .rc-stats span, .chunky.text, #autoBtn, .spin-word, #toast, #replayTag, .hrow small, .ld-hint, .scatter-ribbon, .scatter-ribbon-static, .win-label { text-transform: uppercase; }
html[lang="ka"] *, html[lang="ka"] *::before, html[lang="ka"] *::after { text-transform: none !important; }
html[lang="ka"] { --font-display: "Bangers", "Noto Sans Georgian", "Impact", "Arial Black", "Haettenschweiler", sans-serif; --font-cond: "Barlow Condensed", "Noto Sans Georgian", "Oswald", "Arial Narrow", Arial, sans-serif; }
html[lang="ru"] { --font-display: "Bangers", "Oswald", "Impact", "Arial Black", "Haettenschweiler", sans-serif; --font-cond: "Barlow Condensed", "Oswald", "Arial Narrow", Arial, sans-serif; }
html[lang="ka"] .poster-text, html[lang="ka"] .cap-line, html[lang="ka"] .panel-title, html[lang="ka"] #msgMain { font-weight: 900; }
/* anything data-fit shrinks instead of wrapping */
[data-fit] { white-space: nowrap; }
.toggle-row > span[data-fit] { overflow: hidden; text-overflow: clip; }
.rc-stats span[data-fit], .history-head span[data-fit] { overflow: hidden; }
html[lang="ka"] #spinBtn .spin-word, html[lang="ka"] #stage.portrait #spinBtn .spin-word { font-size: 12px; letter-spacing: 0.5px; }
.log-idle[data-fit] { white-space: normal; }
.log-idle[data-fit], .log-idle[data-fit] b { white-space: nowrap; }