/* ============================================================
   LONG MONEY · prototype v3 presentation
   Casino cabinet treatment: metallic gold bevels, gem-lit
   jackpot ladder, lacquer + neon, ambient shimmer.
   ============================================================ */

:root {
  --ink:        oklch(0.115 0.020 165);
  --bg:         oklch(0.16 0.030 168);
  --surface:    oklch(0.21 0.038 168);
  --surface-2:  oklch(0.26 0.045 168);
  --jade:       oklch(0.55 0.105 170);
  --jade-neon:  oklch(0.80 0.140 168);
  --gold:       oklch(0.78 0.135 85);
  --gold-deep:  oklch(0.60 0.120 78);
  --gold-glow:  oklch(0.88 0.145 90);
  --lantern:    oklch(0.58 0.205 28);
  --lantern-deep: oklch(0.45 0.175 27);
  --cream:      oklch(0.95 0.015 95);
  --cream-dim:  oklch(0.84 0.022 100);
  --muted:      oklch(0.70 0.030 168);

  /* metallic gradient recipes (CSS side; SVG uses #mgold defs) */
  --metal-gold: linear-gradient(178deg,
    oklch(0.94 0.115 96) 0%, oklch(0.80 0.135 86) 22%,
    oklch(0.56 0.115 78) 46%, oklch(0.87 0.14 90) 60%,
    oklch(0.62 0.12 80) 82%, oklch(0.50 0.105 74) 100%);
  --metal-gold-h: linear-gradient(92deg,
    oklch(0.92 0.115 96), oklch(0.66 0.125 80) 30%,
    oklch(0.90 0.14 90) 52%, oklch(0.60 0.12 78) 75%, oklch(0.88 0.13 88));
  --lacquer-red: linear-gradient(178deg,
    oklch(0.66 0.20 32), oklch(0.50 0.19 28) 55%, oklch(0.38 0.155 26));
  --gem-jade: linear-gradient(178deg,
    oklch(0.46 0.095 169), oklch(0.30 0.07 168) 60%, oklch(0.22 0.05 167));
  --panel-ink: linear-gradient(178deg,
    oklch(0.26 0.045 168), oklch(0.165 0.032 167) 60%, oklch(0.135 0.026 166));

  --font-display: "Bungee", "Arial Black", sans-serif;
  --font-ui: "Barlow Semi Condensed", "Arial Narrow", sans-serif;

  --z-board-fx: 30;
  --z-counter: 40;
  --z-vault-live: 55;
  --z-overlay: 60;
  --z-modal: 80;
  --z-celebrate: 90;

  --ease-show: cubic-bezier(0.16, 1, 0.3, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--ink);
  font-family: var(--font-ui);
  color: var(--cream);
  -webkit-font-smoothing: antialiased;
}

button { font-family: inherit; color: inherit; background: none; border: none; cursor: pointer; }
button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

#app { position: relative; height: 100%; }
#paint-defs { position: absolute; }

/* ---------- stage ---------- */
#stage {
  position: absolute;
  left: 50%; top: 50%;
  width: 1280px;
  height: 720px;
  transform: translate(-50%, -50%); /* fallback before gsap takes ownership */
  transform-origin: center center;
  background: var(--bg);
  overflow: hidden;
  border-radius: 10px;
}
#stage::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 6;
  background: radial-gradient(150% 115% at 50% 42%, transparent 54%, oklch(0.07 0.013 165 / 0.66) 100%);
}

/* ---------- camera: the world the lens moves through ---------- */
#camera {
  position: absolute;
  inset: 0;
  will-change: transform;
}

/* ---------- backdrop scene ---------- */
#backdrop { position: absolute; inset: 0; }
#scene { position: absolute; inset: 0; width: 100%; height: 100%; }
#dust { position: absolute; inset: 0; pointer-events: none; }
.mote {
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: oklch(0.88 0.14 90 / 0.7);
  box-shadow: 0 0 6px oklch(0.88 0.14 90 / 0.6);
  will-change: transform, opacity;
}

/* ---------- gold marquee sign ---------- */
#sign {
  position: absolute;
  top: 18px; left: 30px;
  width: 252px;
  z-index: 3;
}
#sign-svg { width: 100%; display: block; overflow: visible; }
.sign-word {
  /* matches the key art title: red poster letters, dark outline, gold rim light */
  font-family: var(--font-display);
  font-size: 40px;
  fill: url(#mred);
  paint-order: stroke fill;
  stroke: oklch(0.14 0.04 27);
  stroke-width: 3px;
}
.sign-outline {
  font-family: var(--font-display);
  font-size: 40px;
  fill: none;
  stroke: oklch(0.85 0.13 88 / 0.5);
  stroke-width: 1px;
}
.sign-sub {
  display: inline-block;
  margin-top: 2px;
  padding: 3px 10px 4px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: oklch(0.86 0.10 100);
  background: linear-gradient(178deg, oklch(0.30 0.055 75), oklch(0.20 0.04 70));
  border: 1px solid oklch(0.55 0.10 80 / 0.8);
  border-radius: 4px;
}
#proto-tag {
  position: absolute;
  left: 34px; bottom: 102px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  z-index: 3;
}

/* shimmer sweep utility */
@keyframes shimmer-sweep {
  0% { transform: translateX(-130%) skewX(-18deg); }
  34% { transform: translateX(240%) skewX(-18deg); }
  100% { transform: translateX(240%) skewX(-18deg); }
}
.shimmer { position: relative; overflow: hidden; }
.shimmer::after {
  content: "";
  position: absolute;
  top: -10%; bottom: -10%;
  left: 0; width: 34%;
  background: linear-gradient(100deg, transparent, oklch(1 0 0 / 0.22), transparent);
  animation: shimmer-sweep 5.6s linear infinite;
  pointer-events: none;
}

/* ---------- vault dock ---------- */
#vault-dock {
  position: absolute;
  left: 50%; top: 0;
  transform: translateX(-50%) translateX(-72px);
  width: 460px; height: 150px;
  z-index: 4;
  overflow: hidden;
}
#vault-dock.live { z-index: var(--z-vault-live); overflow: visible; }
#vault-wrap {
  position: absolute;
  left: 50%; top: -250px;
  width: 400px; height: 400px;
  transform: translateX(-50%); /* fallback before gsap takes ownership */
  will-change: transform;
}
#vault-disc { width: 100%; height: 100%; filter: drop-shadow(0 16px 34px oklch(0.05 0.01 165 / 0.8)); }
#vault-shelf {
  position: absolute;
  left: 0; right: 0; top: 132px;
  height: 16px;
  border-radius: 5px;
  background: var(--metal-gold);
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.45),
    inset 0 -3px 5px oklch(0.25 0.06 70 / 0.8),
    0 8px 22px oklch(0.05 0.01 165 / 0.7);
}
#vault-lamps {
  position: absolute;
  left: 50%; top: 104px;
  transform: translateX(-50%);
  display: flex; gap: 56px;
  z-index: 2;
}
#vault-lamps i {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, oklch(0.42 0.06 80), oklch(0.26 0.045 75) 70%);
  border: 2.5px solid oklch(0.60 0.11 80);
  box-shadow: inset 0 2px 3px oklch(0.10 0.02 70 / 0.8);
  transition: background 0.2s, box-shadow 0.2s;
}
#vault-lamps i.lit {
  background: radial-gradient(circle at 38% 30%, oklch(0.97 0.09 98), oklch(0.85 0.145 88) 60%, oklch(0.70 0.13 82));
  box-shadow: 0 0 18px oklch(0.88 0.145 90 / 0.95), 0 0 46px oklch(0.88 0.145 90 / 0.45);
}
#vault-hint {
  position: absolute;
  left: 50%; top: 131px;
  transform: translateX(-50%);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: oklch(0.30 0.06 75);
  background: var(--metal-gold-h);
  padding: 2px 12px 3px;
  border-radius: 4px;
  box-shadow: 0 2px 6px oklch(0.05 0.01 165 / 0.6);
  white-space: nowrap;
}

/* ---------- jackpot ladder: the centerpiece ---------- */
#ladder {
  position: absolute;
  right: 26px; top: 150px;
  width: 206px;
  display: flex; flex-direction: column; gap: 10px;
  z-index: 2;
}
.ladder-card {
  position: relative;
  border-radius: 10px;
  padding: 8px 14px 9px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0 8px;
  background: var(--panel-ink);
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.10),
    inset 0 -4px 8px oklch(0.05 0.01 165 / 0.5),
    0 6px 16px oklch(0.05 0.01 165 / 0.55);
  overflow: hidden;
}
.ladder-card::before { /* metal frame ring */
  content: "";
  position: absolute; inset: 0;
  border-radius: 10px;
  padding: 2.5px;
  background: var(--metal-gold);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  pointer-events: none;
}
.tier-name {
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--cream-dim);
  text-shadow: 0 2px 2px oklch(0.08 0.015 165 / 0.8);
}
.tier-value {
  font-family: var(--font-display);
  font-size: 17px;
  text-align: right;
  color: var(--gold-glow);
  text-shadow: 0 0 10px oklch(0.85 0.14 90 / 0.45), 0 2px 2px oklch(0.08 0.015 165 / 0.9);
  font-variant-numeric: tabular-nums;
}
.tier-value.long { font-size: 13.5px; }
.ladder-card.grand .tier-value.long { font-size: 21px; }
.tier-note {
  grid-column: 1 / -1;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: oklch(0.92 0.06 95 / 0.85);
}

.ladder-card.grand {
  padding: 14px 16px 13px;
  background:
    radial-gradient(120% 150% at 50% 0%, oklch(0.58 0.19 30 / 0.85), transparent 60%),
    var(--lacquer-red);
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
}
.ladder-card.grand .rays {
  position: absolute; inset: -40%;
  background: conic-gradient(from 0deg,
    transparent 0deg 14deg, oklch(0.95 0.10 95 / 0.07) 14deg 26deg,
    transparent 26deg 40deg, oklch(0.95 0.10 95 / 0.07) 40deg 52deg,
    transparent 52deg 66deg, oklch(0.95 0.10 95 / 0.07) 66deg 78deg,
    transparent 78deg 92deg, oklch(0.95 0.10 95 / 0.07) 92deg 104deg,
    transparent 104deg 118deg, oklch(0.95 0.10 95 / 0.07) 118deg 130deg,
    transparent 130deg 144deg, oklch(0.95 0.10 95 / 0.07) 144deg 156deg,
    transparent 156deg 170deg, oklch(0.95 0.10 95 / 0.07) 170deg 182deg,
    transparent 182deg 196deg, oklch(0.95 0.10 95 / 0.07) 196deg 208deg,
    transparent 208deg 222deg, oklch(0.95 0.10 95 / 0.07) 222deg 234deg,
    transparent 234deg 248deg, oklch(0.95 0.10 95 / 0.07) 248deg 260deg,
    transparent 260deg 274deg, oklch(0.95 0.10 95 / 0.07) 274deg 286deg,
    transparent 286deg 300deg, oklch(0.95 0.10 95 / 0.07) 300deg 312deg,
    transparent 312deg 326deg, oklch(0.95 0.10 95 / 0.07) 326deg 338deg,
    transparent 338deg 360deg);
  animation: rays-turn 26s linear infinite;
  pointer-events: none;
}
@keyframes rays-turn { to { transform: rotate(360deg); } }
.ladder-card.grand .tier-name {
  font-size: 19px;
  color: oklch(0.97 0.04 95);
  letter-spacing: 0.04em;
}
.ladder-card.grand .tier-value {
  font-size: 30px;
  background: var(--metal-gold-h);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 2px oklch(0.08 0.015 165 / 0.9)) drop-shadow(0 0 12px oklch(0.88 0.14 90 / 0.5));
  animation: grand-breathe 2.8s ease-in-out infinite;
}
@keyframes grand-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.045); }
}
.ladder-card.major { background: radial-gradient(120% 160% at 50% 0%, oklch(0.50 0.16 32 / 0.5), transparent 65%), var(--panel-ink); }
.ladder-card.major .tier-value { color: oklch(0.78 0.165 38); }
.ladder-card.minor { background: radial-gradient(120% 160% at 50% 0%, oklch(0.42 0.09 169 / 0.55), transparent 65%), var(--panel-ink); }
.ladder-card.minor .tier-value { color: var(--jade-neon); }
.ladder-card.mini .tier-value { color: var(--cream-dim); }
.ladder-card.hit {
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.10),
    0 0 26px oklch(0.88 0.145 90 / 0.7),
    0 0 60px oklch(0.88 0.145 90 / 0.35);
}

/* piggy collection meter: centered under the docked wheel, single horizontal row of 6
   piggies that light up as they land toward the Lockdown (6 locks the board) */
#piggy-meter {
  position: absolute;
  left: 50%; top: 121px;
  transform: translateX(-50%);
  z-index: 3;
  display: flex; align-items: center; gap: 10px;
  padding: 3px 13px 4px;
  border-radius: 999px;
  white-space: nowrap;
  background: linear-gradient(180deg, oklch(0.17 0.03 167 / 0.95), oklch(0.105 0.02 166 / 0.95));
  border: 1.4px solid oklch(0.55 0.10 80 / 0.75);
  box-shadow: 0 3px 10px oklch(0.05 0.01 165 / 0.65), inset 0 1px 0 oklch(1 0 0 / 0.06);
}
.meter-pips { display: flex; gap: 5px; }
.meter-pips i {
  width: 19px; height: 19px;
  background: url("art/pig-pip.png") center / contain no-repeat;
  filter: grayscale(1) brightness(0.55) opacity(0.5);
  transition: filter 0.2s, transform 0.2s;
}
.meter-pips i.on {
  filter: drop-shadow(0 0 6px oklch(0.85 0.14 90 / 0.95));
  transform: scale(1.12);
}
.meter-hint {
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: oklch(0.60 0.06 80);
}
#piggy-meter.hot { border-color: var(--gold-glow); box-shadow: 0 3px 14px oklch(0.62 0.13 85 / 0.45); }
#piggy-meter.hot .meter-hint { color: var(--gold-glow); }
#piggy-meter.hot .meter-pips i.on { animation: pig-pulse 0.9s ease-in-out infinite; }
@keyframes pig-pulse { 0%, 100% { transform: scale(1.12); } 50% { transform: scale(1.28); } }

/* ---------- cabinet ---------- */
#showfront {
  position: absolute;
  left: 50%; top: 154px;
  transform: translateX(-50%) translateX(-72px);
  z-index: 4; /* later in DOM than the vault dock: respin counter wins at rest */
}
#showfront::before {
  /* the vault light from the key art: molten gold breathing behind the cabinet */
  content: "";
  position: absolute;
  inset: -70px -90px;
  background: radial-gradient(58% 46% at 50% 26%, oklch(0.78 0.13 86 / 0.16), transparent 72%);
  z-index: -1;
  pointer-events: none;
}
#board-frame {
  position: relative;
  padding: 11px;
  border-radius: 18px;
  background:
    linear-gradient(178deg, oklch(0.34 0.06 80) 0%, oklch(0.22 0.045 76) 30%, oklch(0.17 0.035 74) 100%);
  box-shadow:
    inset 0 2px 0 oklch(0.92 0.11 95 / 0.5),
    inset 0 -3px 6px oklch(0.08 0.015 70 / 0.8),
    0 26px 60px oklch(0.05 0.01 165 / 0.75),
    0 0 0 1.5px oklch(0.55 0.10 80 / 0.7);
}
#board-frame::before { /* outer gold piping */
  content: "";
  position: absolute; inset: -5px;
  border-radius: 22px;
  padding: 5px;
  background: var(--metal-gold);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}
.frame-corner {
  position: absolute;
  width: 46px; height: 46px;
  z-index: 2;
  pointer-events: none;
  filter: drop-shadow(0 2px 3px oklch(0.05 0.01 165 / 0.7));
}
.frame-corner.tl { top: -14px; left: -14px; }
.frame-corner.tr { top: -14px; right: -14px; }
.frame-corner.bl { bottom: -6px; left: -14px; }
.frame-corner.br { bottom: -6px; right: -14px; }

#board {
  position: relative;
  display: flex;
  gap: 0; /* horizontal spacing comes from the cell tile insets so gaps stay EQUAL both ways */
  background: oklch(0.115 0.02 166);
  border-radius: 10px;
  padding: 7px;
  overflow: hidden;
  box-shadow: inset 0 0 24px oklch(0.05 0.01 165 / 0.9), inset 0 0 0 1.5px oklch(0.40 0.07 80 / 0.5);
}
.reel {
  position: relative;
  width: 86px;
  height: 430px; /* 5 x 86 */
  overflow: visible; /* idle: land pops and glows spill freely; .rclip clips during the spin */
  /* transparent: the uniform per-cell tiles ARE the grid now, so column gaps == row gaps */
  background: transparent;
}
.reel.rclip { overflow: hidden; }
.strip { position: absolute; left: 0; top: 0; width: 100%; will-change: transform; }
.reel.blur .strip { filter: blur(2.5px); }
.cell {
  width: 86px; height: 86px;
  padding: 5px;
  display: grid; place-items: center;
  position: relative;
}
/* every reel cell gets ONE uniform square tile so the board reads as a clean grid of
   squares (after the painted-sheet backgrounds were stripped the symbols floated in bare
   columns and looked un-gridded). Identical on every cell = no patchwork. */
.strip .cell::before {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 9px;
  background: linear-gradient(180deg, oklch(0.22 0.036 168 / 0.85), oklch(0.14 0.026 167 / 0.85));
  box-shadow:
    inset 0 0 0 1px oklch(0.46 0.07 168 / 0.45),
    inset 0 1px 0 oklch(1 0 0 / 0.06);
  z-index: 0;
}
.cell svg, .cell img { width: 100%; height: 100%; display: block; position: relative; z-index: 1; }

/* the board is never still: every symbol breathes on its own beat */
@keyframes idle-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2.6px); }
}
.strip .cell svg { animation: idle-bob 3.2s ease-in-out infinite; }
.reel[data-reel="0"] .cell svg { animation-delay: -0.2s; }
.reel[data-reel="1"] .cell svg { animation-delay: -0.8s; }
.reel[data-reel="2"] .cell svg { animation-delay: -1.4s; }
.reel[data-reel="3"] .cell svg { animation-delay: -2.0s; }
.reel[data-reel="4"] .cell svg { animation-delay: -2.6s; }
.reel[data-reel="5"] .cell svg { animation-delay: -3.0s; }
.reel .cell:nth-child(even) svg { animation-duration: 3.8s; }
.locked-token svg { animation: idle-bob 2.6s ease-in-out infinite; }
.cell.win-glow svg { filter: drop-shadow(0 0 14px oklch(0.88 0.145 90 / 0.95)); }
.cell.land-pop svg {
  filter:
    drop-shadow(0 0 16px oklch(0.90 0.145 92 / 1))
    drop-shadow(0 0 40px oklch(0.88 0.145 90 / 0.5));
}

.reel.anticipate {
  box-shadow: inset 0 0 0 2px var(--gold-glow), inset 0 0 30px oklch(0.80 0.135 85 / 0.45);
}
/* a WILD reel held during a base respin: locked-gold glow */
.reel.held-reel {
  border-radius: 6px;
  box-shadow: inset 0 0 0 2.5px var(--gold-glow), inset 0 0 34px oklch(0.85 0.14 90 / 0.5);
}
#fs-banner.retrigger { animation: retrig-flash 0.9s ease-out; }
@keyframes retrig-flash {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  28% { transform: scale(1.14); filter: brightness(1.5) drop-shadow(0 0 18px oklch(0.85 0.14 90 / 0.9)); }
}

#board-glass { /* glass reflection across the reels */
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: calc(var(--z-board-fx) - 1);
  background: linear-gradient(112deg,
    transparent 0%, transparent 34%,
    oklch(1 0 0 / 0.045) 40%, oklch(1 0 0 / 0.085) 46%, oklch(1 0 0 / 0.03) 52%,
    transparent 58%, transparent 100%);
}
#board-dim {
  position: absolute; inset: 0;
  background: oklch(0.08 0.014 165 / 0.82);
  opacity: 0; pointer-events: none;
  transition: opacity 0.45s;
  z-index: var(--z-board-fx);
}
#board.locked #board-dim { opacity: 1; }

#lock-layer, #sticky-layer {
  position: absolute; inset: 7px;
  z-index: calc(var(--z-board-fx) + 1);
  pointer-events: none;
}
.held-cell {
  position: absolute;
  width: 86px; height: 86px;
  padding: 5px;
  display: grid; place-items: center;
  /* held means HELD: opaque backing so nothing streams past behind it */
  background: linear-gradient(180deg, oklch(0.18 0.032 168), oklch(0.15 0.026 167));
  border-radius: 6px;
  box-shadow: inset 0 0 0 1.5px oklch(0.45 0.085 78 / 0.6);
}
.held-stack {
  position: absolute;
  width: 86px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background:
    radial-gradient(80% 50% at 50% 50%, oklch(0.40 0.09 80 / 0.45), transparent 80%),
    linear-gradient(180deg, oklch(0.20 0.038 168), oklch(0.14 0.026 167));
  border-radius: 8px;
  box-shadow:
    inset 0 0 0 2.5px oklch(0.72 0.13 84),
    inset 0 0 22px oklch(0.78 0.135 85 / 0.35),
    0 0 18px oklch(0.78 0.135 85 / 0.4);
}
.held-stack img {
  width: 72px; height: 72px;
  border-radius: 50%;
  box-shadow: 0 0 0 2.5px oklch(0.86 0.135 88), 0 0 16px oklch(0.85 0.14 90 / 0.7);
  animation: idle-bob 2.4s ease-in-out infinite;
}
.held-stack .stack-word {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--gold-glow);
  text-shadow: 0 0 10px oklch(0.85 0.14 90 / 0.7), 0 2px 0 oklch(0.10 0.02 165);
}
.held-stack .held-badge { position: absolute; top: 3px; right: 3px; width: 26px; height: 26px; }
.held-cell > svg:first-child { width: 100%; height: 100%; animation: idle-bob 2.6s ease-in-out infinite; }
.held-cell.flash > svg:first-child { filter: drop-shadow(0 0 18px oklch(0.90 0.145 92 / 1)); }
.held-badge {
  position: absolute;
  top: 1px; right: 1px;
  width: 26px; height: 26px;
  filter: drop-shadow(0 2px 3px oklch(0.06 0.012 165 / 0.8));
}
/* the rolling respin mini-reels inside the Lockdown */
.respin-cell {
  position: absolute;
  width: 86px; height: 86px;
  border-radius: 6px;
  overflow: hidden;
  background: oklch(0.10 0.018 166 / 0.85);
  box-shadow: inset 0 0 0 1.5px oklch(0.40 0.07 80 / 0.5), inset 0 0 14px oklch(0.05 0.01 165 / 0.9);
  pointer-events: none;
}
.rs-strip { position: absolute; left: 0; top: 0; width: 100%; will-change: transform; filter: blur(0.6px); }
.rs-cell { width: 86px; height: 86px; padding: 8px; display: grid; place-items: center; }
.rs-cell svg { width: 100%; height: 100%; }
.rs-dim svg { opacity: 0.38; filter: saturate(0.45) brightness(0.8); }
.rs-empty {
  background:
    radial-gradient(60% 60% at 50% 50%, oklch(0.07 0.012 165 / 0.9), transparent 80%);
  box-shadow: inset 0 0 12px oklch(0.05 0.01 165);
  border-radius: 8px;
}

/* dial banner: stays in frame while the camera is up at the wheel */
#dial-banner {
  position: absolute;
  left: 50%; bottom: 116px;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--gold-glow);
  text-shadow: 0 2px 0 oklch(0.10 0.02 165), 0 0 18px oklch(0.85 0.14 90 / 0.5);
  background: linear-gradient(178deg, oklch(0.20 0.04 167 / 0.95), oklch(0.13 0.025 166 / 0.95));
  border: 1.5px solid oklch(0.60 0.11 80 / 0.8);
  padding: 4px 22px 5px;
  border-radius: 9px;
  pointer-events: none;
  white-space: nowrap;
}
.locked-token {
  position: absolute;
  width: 86px; height: 86px;
  padding: 5px;
  display: grid; place-items: center;
}
.locked-token > svg:first-child { width: 100%; height: 100%; animation: idle-bob 2.6s ease-in-out infinite; }
.locked-token.flash > svg:first-child { filter: drop-shadow(0 0 18px oklch(0.90 0.145 92 / 1)); }
.locked-token svg.held-badge, .held-cell svg.held-badge {
  width: 26px; height: 26px;
  top: 1px; right: 1px;
}

#respin-counter {
  position: absolute;
  top: -10px; right: -16px;
  z-index: var(--z-counter);
  width: 102px; height: 102px;
  border-radius: 50%;
  display: grid; place-content: center; text-align: center;
  background:
    radial-gradient(circle at 36% 28%, oklch(1 0 0 / 0.35), transparent 45%),
    var(--lacquer-red);
  box-shadow:
    inset 0 0 0 4px oklch(0.85 0.13 88),
    inset 0 0 0 6px oklch(0.40 0.08 75),
    0 12px 28px oklch(0.05 0.01 165 / 0.7);
  /* tilt is owned by GSAP (rotation: 7) to avoid double-compose with CSS rotate */
}
#respin-counter[hidden] { display: none; }
.respin-label {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: oklch(0.96 0.03 80);
}
.respin-num {
  font-family: var(--font-display);
  font-size: 38px; line-height: 1;
  color: var(--cream);
  text-shadow: 0 2px 0 oklch(0.30 0.12 27);
}

#win-line {
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 46px;
  display: grid; place-items: center;
  pointer-events: none;
  z-index: calc(var(--z-counter) + 1);
}
#win-text {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--gold-glow);
  text-shadow: 0 2px 0 oklch(0.10 0.02 165), 0 0 18px oklch(0.85 0.14 90 / 0.5);
  background: linear-gradient(178deg, oklch(0.20 0.04 167 / 0.95), oklch(0.13 0.025 166 / 0.95));
  border: 1.5px solid oklch(0.60 0.11 80 / 0.8);
  padding: 3px 20px 4px;
  border-radius: 9px;
  min-height: 1em;
}
#win-text:empty { display: none; }

/* ---------- control deck ---------- */
#controls {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 94px;
  padding: 0 34px;
  display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(180deg, transparent 0%, oklch(0.10 0.018 165 / 0.55) 26%, oklch(0.09 0.016 165 / 0.97) 58%);
  z-index: 5;
}
#controls::before { /* gold deck edge */
  content: "";
  position: absolute;
  left: 0; right: 0; top: 18px;
  height: 3px;
  background: var(--metal-gold-h);
  opacity: 0.65;
}
.ctl-cluster { display: flex; align-items: center; gap: 16px; }
#bp-chip {
  width: 34px; height: 34px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px oklch(0.55 0.18 295 / 0.9), 0 0 14px oklch(0.55 0.20 295 / 0.5);
}
.feature-tip {
  position: absolute;
  left: 50%; top: 120px;
  transform: translateX(-50%) translateX(-72px);
  z-index: 8;
  max-width: 440px;
  text-align: center;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--cream);
  background: linear-gradient(178deg, oklch(0.22 0.042 168 / 0.97), oklch(0.15 0.028 167 / 0.97));
  border: 1.5px solid oklch(0.62 0.115 168 / 0.8);
  border-radius: 9px;
  padding: 7px 16px 8px;
  pointer-events: none;
}

.readout { display: flex; flex-direction: column; min-width: 92px; }
.readout-label {
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: oklch(0.62 0.05 100);
}
.readout-value {
  font-family: var(--font-display);
  font-size: 17px;
  color: oklch(0.90 0.10 95);
  text-shadow: 0 0 12px oklch(0.85 0.13 90 / 0.5);
  font-variant-numeric: tabular-nums;
}
#win-readout { color: var(--gold-glow); }

#bet-stepper {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  border-radius: 12px;
  background: var(--panel-ink);
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.08), inset 0 -3px 6px oklch(0.05 0.01 165 / 0.6), 0 0 0 1.5px oklch(0.50 0.09 80 / 0.55);
}
.bet-readout { min-width: 64px; text-align: center; }
.bet-readout .readout-value { font-size: 16px; }
.step-btn {
  width: 34px; height: 34px;
  border-radius: 9px;
  background: linear-gradient(178deg, oklch(0.34 0.055 168), oklch(0.22 0.04 167));
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.15), inset 0 -2px 3px oklch(0.06 0.012 165 / 0.7);
  font-size: 20px; font-weight: 600;
  transition: filter 0.15s;
}
.step-btn:hover { filter: brightness(1.25); }

#spin-btn {
  position: relative;
  width: 92px; height: 92px;
  display: grid; place-items: center;
  filter: drop-shadow(0 10px 20px oklch(0.05 0.01 165 / 0.8));
  transition: transform 0.12s var(--ease-show);
}
#spin-btn:hover { transform: scale(1.05); }
#spin-btn:active { transform: scale(0.96); }
#spin-btn svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.spin-ring-arrow {
  fill: none;
  stroke: oklch(0.96 0.05 95 / 0.85);
  stroke-width: 3.2;
  stroke-linecap: round;
}
.spin-ring-head { fill: oklch(0.96 0.05 95); }
.spin-word {
  position: absolute;
  inset: 0;
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-size: 19px;
  color: oklch(0.97 0.04 95);
  text-shadow: 0 2px 0 oklch(0.30 0.12 27), 0 0 14px oklch(0.30 0.12 27 / 0.6);
  pointer-events: none;
}
#spin-btn.spinning svg { filter: saturate(0.7) brightness(0.85); }
#spin-btn:disabled { cursor: default; filter: grayscale(0.35) drop-shadow(0 10px 20px oklch(0.05 0.01 165 / 0.8)); }

#buy-btn {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  padding: 9px 18px 10px;
  border-radius: 12px;
  background:
    radial-gradient(110% 90% at 50% 0%, oklch(1 0 0 / 0.22), transparent 48%),
    var(--lacquer-red);
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.3),
    inset 0 -3px 6px oklch(0.25 0.10 27 / 0.9),
    0 6px 16px oklch(0.05 0.01 165 / 0.6),
    0 0 0 2px oklch(0.62 0.12 80 / 0.9);
  transition: transform 0.12s var(--ease-show), filter 0.12s;
}
#buy-btn:hover { transform: translateY(-2px); filter: brightness(1.12); }
.buy-word { font-family: var(--font-display); font-size: 15px; color: var(--cream); text-shadow: 0 1.5px 0 oklch(0.30 0.12 27); }
.buy-sub {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: oklch(0.93 0.05 50);
}

.icon-btn {
  width: 42px; height: 42px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--panel-ink);
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.10), inset 0 -2px 4px oklch(0.05 0.01 165 / 0.7), 0 0 0 1.5px oklch(0.48 0.09 80 / 0.55);
  transition: filter 0.15s;
}
.icon-btn:hover { filter: brightness(1.3); }
.icon-btn svg {
  width: 21px; height: 21px;
  fill: none; stroke: var(--cream-dim);
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.icon-btn svg .dot { fill: var(--cream-dim); stroke: none; }
.icon-btn[aria-pressed="true"] { box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.10), inset 0 -2px 4px oklch(0.05 0.01 165 / 0.7), 0 0 0 2px oklch(0.78 0.135 85), 0 0 14px oklch(0.80 0.135 85 / 0.5); }
.icon-btn[aria-pressed="true"] svg { stroke: var(--gold-glow); }
.icon-btn[aria-pressed="true"] svg .dot { fill: var(--gold-glow); }
#sound-btn[aria-pressed="false"] .snd-wave { opacity: 0.25; }
#turbo-btn svg { fill: var(--cream-dim); stroke: none; }
#turbo-btn[aria-pressed="true"] svg { fill: var(--gold-glow); }

/* ---------- overlays ---------- */
#overlay-root { position: absolute; inset: 0; z-index: var(--z-overlay); pointer-events: none; }
.overlay {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: oklch(0.08 0.014 165 / 0.9);
  pointer-events: auto;
}
.overlay-inner { text-align: center; }

.feature-title {
  font-family: var(--font-display);
  font-size: 38px;
  background: var(--metal-gold-h);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  filter: drop-shadow(0 3px 0 oklch(0.10 0.02 165)) drop-shadow(0 0 16px oklch(0.85 0.14 90 / 0.4));
  margin-bottom: 4px;
}
.feature-sub {
  font-size: 15px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 20px;
}
.wheel-result {
  margin-top: 14px;
  font-family: var(--font-display);
  font-size: 26px;
  color: var(--gold-glow);
  text-shadow: 0 0 18px oklch(0.85 0.14 90 / 0.6);
  min-height: 1.25em;
}

#mini-vault-wrap { width: 340px; height: 340px; margin: 0 auto; position: relative; }
#mini-vault-wrap svg { width: 100%; height: 100%; }

.bag-row { display: flex; gap: 32px; justify-content: center; }
.bag { position: relative; width: 170px; transition: transform 0.18s var(--ease-show); }
.box-loot {
  position: absolute;
  left: 22%; right: 22%; top: 16%; bottom: 30%;
  pointer-events: none;
  filter: drop-shadow(0 0 18px oklch(0.88 0.145 90 / 0.8));
}
.box-loot svg { width: 100%; height: 100%; }
.bag:hover { transform: translateY(-10px); }
.bag.opened { cursor: default; }
.bag svg { width: 100%; display: block; }
.bag-prize {
  margin-top: 8px;
  font-family: var(--font-display);
  font-size: 17px;
  color: var(--cream);
  min-height: 1.4em;
}

#fs-banner {
  position: absolute;
  top: 172px; left: 34px; /* beside the board, clear of the frame and row 0 */
  z-index: 5;
  max-width: 215px; /* never reaches the cabinet */
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  padding: 5px 20px 7px;
  border-radius: 9px;
  background:
    radial-gradient(110% 90% at 50% 0%, oklch(1 0 0 / 0.2), transparent 48%),
    var(--lacquer-red);
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.3), 0 0 0 2px oklch(0.62 0.12 80 / 0.9), 0 8px 18px oklch(0.05 0.01 165 / 0.6);
}
#fs-banner .fs-word { font-family: var(--font-display); font-size: 13px; color: var(--cream); }
#fs-banner .fs-count { font-family: var(--font-display); font-size: 19px; color: var(--gold-glow); }
#fs-banner .fs-total {
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--gold-glow);
  font-variant-numeric: tabular-nums;
}

.celebrate { z-index: var(--z-celebrate); }
.win-tier-word {
  font-family: var(--font-display);
  font-size: 74px;
  background: var(--metal-gold-h);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  filter:
    drop-shadow(0 4px 0 oklch(0.42 0.10 72))
    drop-shadow(0 0 26px oklch(0.88 0.145 90 / 0.65))
    drop-shadow(0 10px 30px oklch(0.07 0.014 165 / 0.8));
}
.win-tier-amount {
  font-family: var(--font-display);
  font-size: 48px;
  color: var(--cream);
  text-shadow: 0 0 22px oklch(0.85 0.14 90 / 0.55), 0 3px 0 oklch(0.10 0.02 165);
  margin-top: 8px;
  font-variant-numeric: tabular-nums;
}
.tap-hint {
  margin-top: 24px;
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted);
}
.particle { position: absolute; width: 26px; height: 26px; pointer-events: none; will-change: transform; }

/* ---------- modals ---------- */
dialog {
  margin: auto;
  border: none;
  border-radius: 16px;
  background: var(--surface);
  color: var(--cream);
  width: min(620px, calc(100vw - 40px));
  max-height: min(78vh, 640px);
  box-shadow: 0 0 0 2.5px oklch(0.60 0.11 80 / 0.8), 0 30px 80px oklch(0.04 0.008 165 / 0.8);
}
dialog::backdrop { background: oklch(0.08 0.014 165 / 0.74); }
.modal-head {
  position: sticky; top: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 24px 14px;
  background: var(--surface);
  border-bottom: 1.5px solid oklch(0.42 0.075 82 / 0.6);
}
.modal-head h2 {
  font-family: var(--font-display);
  font-size: 20px;
  background: var(--metal-gold-h);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.modal-close {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--surface-2);
  font-size: 16px;
  color: var(--cream-dim);
}
.modal-body { padding: 18px 24px 26px; overflow-y: auto; }
.modal-body h3 { font-family: var(--font-display); font-size: 14.5px; color: var(--gold-glow); margin: 18px 0 6px; }
.modal-body p { font-size: 15.5px; line-height: 1.55; color: var(--cream-dim); max-width: 62ch; }

/* autoplay picker */
.auto-note { font-size: 14px; line-height: 1.5; color: var(--cream-dim); margin-bottom: 16px; }
.auto-counts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 18px; }
.auto-count {
  padding: 15px 0; border-radius: 11px;
  font-family: var(--font-display); font-size: 20px; color: var(--cream);
  background: var(--panel-ink); box-shadow: inset 0 0 0 1.5px oklch(0.45 0.08 80 / 0.5);
  transition: transform 0.1s;
}
.auto-count:hover { transform: translateY(-2px); }
.auto-count.selected { color: oklch(0.20 0.04 70); background: var(--metal-gold); box-shadow: 0 0 0 2.5px var(--gold-glow); }
#auto-start {
  width: 100%; padding: 14px; border-radius: 12px;
  font-family: var(--font-display); font-size: 16px; color: var(--cream);
  text-shadow: 0 1.5px 0 oklch(0.30 0.12 27);
  background: radial-gradient(110% 90% at 50% 0%, oklch(1 0 0 / 0.22), transparent 48%), var(--lacquer-red);
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.3), 0 0 0 2px oklch(0.62 0.12 80 / 0.9), 0 8px 20px oklch(0.05 0.01 165 / 0.6);
}
/* SPIN button becomes STOP while autoplay runs, with the remaining count */
#spin-btn.autorun .spin-word { font-size: 15px; }
#auto-remain {
  position: absolute; top: -4px; right: -4px;
  min-width: 26px; height: 26px; padding: 0 5px;
  border-radius: 13px; display: none; place-items: center;
  font-family: var(--font-display); font-size: 12px; color: var(--cream);
  background: var(--lacquer-red); box-shadow: 0 0 0 2px oklch(0.86 0.13 88);
  z-index: 2;
}
#spin-btn.autorun #auto-remain { display: grid; }
#auto-btn.on { color: var(--gold-glow); }
.demo-note {
  padding: 10px 14px;
  border-radius: 8px;
  background: oklch(0.18 0.032 168);
  border: 1.5px solid oklch(0.45 0.08 82 / 0.6);
}
.legal-note { margin-top: 18px; font-size: 13.5px; color: var(--muted); }

.buy-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.buy-grid.single { grid-template-columns: 1fr; }
.buy-card {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  text-align: left;
  padding: 15px 17px;
  border-radius: 12px;
  background: var(--panel-ink);
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.08), 0 0 0 1.5px oklch(0.42 0.07 168 / 0.8);
  transition: transform 0.15s var(--ease-show), box-shadow 0.15s;
}
.buy-card:hover { transform: translateY(-3px); box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.08), 0 0 0 2px var(--jade), 0 8px 20px oklch(0.05 0.01 165 / 0.6); }
.buy-card .buy-name { font-family: var(--font-display); font-size: 15px; color: var(--cream); }
.buy-card .buy-desc { font-size: 13.5px; font-weight: 500; color: var(--muted); line-height: 1.35; }
.buy-card .buy-cost { margin-top: 8px; font-family: var(--font-display); font-size: 19px; color: var(--gold-glow); text-shadow: 0 0 12px oklch(0.85 0.14 90 / 0.4); }
.buy-card.featured { box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.08), 0 0 0 2px oklch(0.56 0.17 30 / 0.9); }
.buy-card.gold {
  background:
    radial-gradient(120% 140% at 50% 0%, oklch(0.45 0.10 78 / 0.55), transparent 60%),
    var(--panel-ink);
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.12), 0 0 0 2.5px oklch(0.72 0.13 84), 0 0 18px oklch(0.78 0.135 85 / 0.35);
}

/* ---------- story intro ---------- */
/* BP Studios boot ident */
#boot {
  position: fixed; inset: 0;
  z-index: 220;
  display: grid; place-items: center;
  background: #08040f;
  cursor: pointer;
}
#boot video { width: 100%; height: 100%; object-fit: contain; }
#boot-skip {
  position: absolute;
  right: 18px; bottom: 14px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: oklch(0.70 0.06 295 / 0.6);
}

#intro {
  position: fixed; inset: 0;
  z-index: 180;
  display: flex;
  overflow-y: auto; /* short viewports scroll instead of clipping the start button */
  background:
    radial-gradient(900px 500px at 50% 30%, oklch(0.20 0.04 168), transparent 75%),
    oklch(0.10 0.018 165 / 0.97);
  padding: 24px;
}
.intro-inner { max-width: 620px; text-align: center; margin: auto; }
.intro-inner.two-col {
  max-width: 880px;
  display: flex;
  align-items: center;
  gap: 36px;
  text-align: left;
}
.intro-art {
  width: 340px;
  max-height: 76vh;
  object-fit: contain;
  border-radius: 14px;
  box-shadow: 0 0 0 3px oklch(0.62 0.12 80 / 0.9), 0 30px 70px oklch(0.04 0.008 165 / 0.85), 0 0 60px oklch(0.85 0.14 90 / 0.2);
}
.intro-copy { flex: 1; }
.bp-ident {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.bp-spin {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 64px; height: 64px;
}
.bp-spin::before {
  /* the energy ring: purple-to-blue charge orbiting the logo */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    transparent 0deg,
    oklch(0.62 0.22 295) 70deg,
    oklch(0.72 0.16 250) 120deg,
    transparent 180deg,
    oklch(0.55 0.20 300 / 0.6) 280deg,
    transparent 340deg);
  -webkit-mask: radial-gradient(closest-side, transparent 70%, #000 74%, #000 96%, transparent 100%);
          mask: radial-gradient(closest-side, transparent 70%, #000 74%, #000 96%, transparent 100%);
  animation: bp-orbit 2.6s linear infinite;
  filter: drop-shadow(0 0 8px oklch(0.60 0.21 295 / 0.8));
}
@keyframes bp-orbit { to { transform: rotate(360deg); } }
.bp-ident img {
  width: 52px; height: 52px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px oklch(0.55 0.18 295 / 0.9), 0 0 22px oklch(0.55 0.20 295 / 0.55);
}
.bp-ident span {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.26em;
  color: oklch(0.92 0.02 295);
  text-shadow: 0 0 14px oklch(0.55 0.20 295 / 0.7);
}
.intro-inner.two-col .intro-story { margin: 14px 0 0; }
.intro-inner.two-col #intro-start { margin-top: 26px; }
.intro-title {
  font-family: var(--font-display);
  font-size: clamp(34px, 6vw, 56px);
  line-height: 1.04;
  background: var(--metal-gold-h);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  filter: drop-shadow(0 4px 0 oklch(0.10 0.02 165)) drop-shadow(0 0 24px oklch(0.85 0.14 90 / 0.4));
}
.intro-story {
  margin: 16px auto 22px;
  max-width: 54ch;
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--cream-dim);
}
.intro-cast { display: flex; gap: 18px; justify-content: center; margin-bottom: 26px; }
.cast-card {
  width: 200px;
  padding: 14px 14px 16px;
  border-radius: 12px;
  background: var(--panel-ink);
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.08), 0 0 0 1.5px oklch(0.48 0.09 80 / 0.6);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.cast-art { width: 104px; height: 104px; }
.cast-art svg { width: 100%; height: 100%; }
.cast-card strong { font-family: var(--font-display); font-size: 14px; color: var(--gold-glow); }
.cast-card span { font-size: 13px; line-height: 1.4; color: var(--muted); }
#intro-start {
  font-family: var(--font-display);
  font-size: 17px;
  color: var(--cream);
  text-shadow: 0 1.5px 0 oklch(0.30 0.12 27);
  padding: 13px 36px 14px;
  border-radius: 12px;
  background:
    radial-gradient(110% 90% at 50% 0%, oklch(1 0 0 / 0.22), transparent 48%),
    var(--lacquer-red);
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.3), 0 0 0 2px oklch(0.62 0.12 80 / 0.9), 0 10px 24px oklch(0.05 0.01 165 / 0.7);
  transition: transform 0.12s var(--ease-show), filter 0.12s;
}
#intro-start:hover { transform: translateY(-2px) scale(1.03); filter: brightness(1.12); }

/* short viewports (phone landscape): compact the intro so it fits without scrolling */
@media (max-height: 560px) {
  #intro { padding: 14px; }
  .intro-inner.two-col { gap: 20px; }
  .intro-art { width: 190px; }
  .bp-spin { width: 44px; height: 44px; }
  .bp-ident img { width: 36px; height: 36px; }
  .bp-ident span { font-size: 11px; }
  .intro-title { font-size: clamp(22px, 7.5vh, 36px); }
  .intro-story { font-size: 13px; line-height: 1.45; margin-top: 8px; }
  .intro-inner.two-col #intro-start { margin-top: 14px; padding: 10px 28px 11px; font-size: 15px; }
}

/* the lookout: the robber posted up beside the bank, always in frame */
#robber-post {
  position: absolute;
  left: 48px;
  top: 388px;
  width: 138px; height: 138px;
  z-index: 3;
  pointer-events: none;
  animation: idle-bob 3.6s ease-in-out infinite;
  filter: drop-shadow(0 8px 14px oklch(0.05 0.01 165 / 0.7));
}
#robber-post svg { width: 100%; height: 100%; }

/* ---------- the robber on the run ---------- */
.runner {
  position: absolute;
  bottom: 98px;
  left: 0;
  width: 96px; height: 88px;
  z-index: 6;
  pointer-events: none;
  filter: drop-shadow(0 4px 8px oklch(0.05 0.01 165 / 0.7));
}
.runner svg { width: 100%; height: 100%; }
.runner-coin {
  width: 62px; height: 62px;
  border-radius: 50%;
  box-shadow: 0 0 0 2.5px oklch(0.72 0.13 84), 0 0 16px oklch(0.80 0.135 85 / 0.7);
}

/* ---------- dev QA panel ---------- */
#dev-panel {
  position: fixed;
  right: 12px; bottom: 12px;
  z-index: 150;
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px 12px;
  border-radius: 10px;
  background: oklch(0.14 0.025 166 / 0.96);
  border: 1.5px solid oklch(0.45 0.08 80 / 0.7);
  font-family: var(--font-ui);
}
#dev-panel[hidden] { display: none; }
#dev-pill {
  position: fixed;
  right: 12px; bottom: 12px;
  z-index: 149;
  padding: 5px 11px 6px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: oklch(0.70 0.06 80 / 0.85);
  background: oklch(0.14 0.025 166 / 0.8);
  border: 1px solid oklch(0.45 0.08 80 / 0.45);
}
#dev-pill:hover { color: var(--gold); border-color: oklch(0.45 0.08 80 / 0.8); }
@media (max-height: 560px) {
  #dev-panel { gap: 3px; padding: 8px 10px; max-height: 78vh; overflow-y: auto; }
  #dev-panel button { padding: 3px 9px; font-size: 11px; }
  .dev-title { font-size: 9.5px; }
  .dev-hint { font-size: 9px; }
}
.dev-title { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); cursor: pointer; }
#dev-panel button {
  padding: 5px 12px;
  border-radius: 7px;
  background: var(--surface-2);
  font-size: 13px; font-weight: 600;
  text-align: left;
  transition: background 0.12s;
}
#dev-panel button:hover { background: oklch(0.34 0.06 168); }
.dev-hint { font-size: 10.5px; color: var(--muted); }

/* ---------- portrait note ---------- */
#rotate-note { display: none; }
@media (max-aspect-ratio: 0.9) {
  #rotate-note {
    display: grid; place-items: center;
    position: fixed; inset: 0;
    background: var(--ink);
    z-index: 200;
    text-align: center;
    padding: 30px;
  }
  #rotate-note p { font-family: var(--font-display); font-size: 22px; color: var(--gold-glow); }
  #rotate-note span { display: block; margin-top: 10px; font-size: 15px; color: var(--muted); }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; }
  .reel.blur .strip { filter: none; }
  .shimmer::after, .ladder-card.grand .rays, .ladder-card.grand .tier-value,
  .strip .cell svg, .locked-token > svg:first-child, .held-cell > svg:first-child { animation: none !important; }
  .mote { display: none; }
}