/* Art direction: a night-time palace in red lacquer and crimson shadow,
   gold trim with a bevel on every edge, jade and sapphire glass, and
   neon-lit signs. All of it is CSS and emoji; nothing is an image. */

/* Display lettering, kept in the repo so it works offline (both are SIL
   Open Font License; see fonts/). Anton is the heavy condensed face for
   plaques, banners and numbers. It has one weight, so the range stops the
   browser from faking a bolder one. Cinzel Black draws the royal letters
   on the reels. */
@font-face {
  font-family: "Anton";
  src: url("../fonts/anton.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Cinzel";
  src: url("../fonts/cinzel-black.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* Lacquer: the deep red of the palace walls, darkening to near black. */
  --bg: #4a0a14;
  --bg-deep: #160206;
  --lacquer: #7a1020;
  --lacquer-light: #b8202e;
  --violet: #5a1a8c;
  --magenta: #c42a9c;
  --red: #d4132f;
  --red-dark: #6e0a1a;
  --gold: #ffd34d;
  --gold-light: #fff1a8;
  --gold-dark: #b8860b;
  --gold-deep: #6a4400;
  --navy: #1a1556;
  --navy-deep: #070826;
  --text: #fff6e0;
  --muted: #d8b8f0;
  --ruby: #ff3b4e;
  --sapphire: #3b8bff;
  --jade: #2fd47a;
  --neon-pink: #ff4fd8;
  --neon-cyan: #42e6ff;
  --radius: 12px;
  /* Safe areas (the Dynamic Island and the home indicator on an iPhone
     16). Kept in variables so a test browser can stand in for them. */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  /* Bevelled gold: light top edge, a dark band across the middle, a
     bright lower lip. Used for lettering and trim. */
  --gold-bevel: linear-gradient(180deg, #fffbe0 0%, #ffe27a 28%, #e0a01a 50%, #b8780a 54%, #ffe680 78%, #c88a10 100%);
  --gold-rim: linear-gradient(180deg, #fff1a8, #ffd34d 30%, #b8860b 60%, #ffe27a 85%, #8a5a00);
  /* Heavy condensed lettering, with the phone's own condensed face as the
     fallback while the font loads. */
  --display: "Anton", "Avenir Next Condensed", "Roboto Condensed", "sans-serif-condensed", "Arial Narrow", system-ui, sans-serif;
  /* Grid cell size: fits five across the width with room for the
     pillars either side, and the height on short phones. */
  --cell: min(calc((min(100vw, 520px) - 32px - 34px - 24px) / 5), 10.5vh);
}

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

html,
body {
  height: 100%;
  background: var(--bg-deep);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* A set line height, because Anton's own (1.5) would make every line
     of display text a third taller than the system font's. */
  line-height: 1.2;
  overscroll-behavior: none;
}

body {
  background:
    /* Light falling from the top of the palace. */
    repeating-conic-gradient(from 0deg at 50% 18%, rgba(255, 200, 120, 0.06) 0 6deg, transparent 6deg 14deg),
    radial-gradient(70% 45% at 50% 30%, rgba(230, 60, 60, 0.5), transparent 70%),
    radial-gradient(120% 60% at 50% 100%, #2a0408, transparent 70%),
    linear-gradient(180deg, var(--lacquer), var(--bg) 40%, var(--bg-deep)) fixed;
  /* No double-tap zoom, no text selection, no grey tap flash. */
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
}

button {
  font: inherit;
  color: inherit;
  border: none;
  background: none;
  touch-action: manipulation;
  cursor: pointer;
}

/* Bevelled gold lettering, on titles, plaques and the numbers that
   matter (balance, jackpots, meter prizes, bet, wins and offers). Text
   shadows would show through the clipped fill, so the depth comes from
   drop-shadow filters instead. */
.currency,
.plaque-amount,
.meter-amount,
.spin-count strong,
.bet-value strong,
.win-display.hit,
.deal-offer-amount,
.banner-amount,
.deal-title,
.intro-sign-title,
.banner-title,
.sheet-title,
.plaque-name,
.meter-name,
.deal-scroll-text,
.deal-scroll-pick,
.deal-round-sub,
.deal-mine-text,
.deal-dragon-ribbon,
.deal-flash-name {
  font-family: var(--display);
  background-image: var(--gold-bevel);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 1px 0 var(--gold-deep)) drop-shadow(0 2px 1px rgba(0, 0, 0, 0.7));
}

/* Gem colours, shared by meters, orbs on the reels and orbs in flight. */
.ruby { --c: #ff3b4e; --c-light: #ffc2c8; --c-dark: #6a0010; }
.amber { --c: #ffb21e; --c-light: #fff0b8; --c-dark: #7a4200; }
.sapphire { --c: #3b8bff; --c-light: #c4dcff; --c-dark: #0a2470; }
.jade { --c: #2fd47a; --c-light: #c4ffdc; --c-dark: #06502a; }

/* Portrait, one-handed: credits on top, the prize tower, the reels, and
   the spin and upgrade buttons at the bottom where the thumb rests.
   Pinned to the edges of the window rather than sized with 100dvh, which
   iOS 26 can report short of the window and so leave a strip under the
   console. */
.app {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  max-width: 520px;
  margin: 0 auto;
  padding: max(6px, var(--safe-top)) 16px 0;
}

/* ---------- Top bar ---------- */

.topbar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 4px 3px 6px;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent 50%),
    linear-gradient(180deg, #2a2470, var(--navy-deep));
  border: 2px solid var(--gold-dark);
  box-shadow: 0 0 0 1px var(--gold-deep), 0 4px 10px rgba(0, 0, 0, 0.5);
}

.credits {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 2px 12px 2px 3px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6);
}

.credits-coin {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, transparent 46%, rgba(138, 90, 0, 0.7) 48%, transparent 54%),
    radial-gradient(circle at 35% 30%, var(--gold-light), var(--gold) 50%, var(--gold-dark));
  border: 1px solid var(--gold-deep);
  box-shadow: 0 0 8px rgba(255, 211, 77, 0.6);
}

.currency {
  font-size: 1.45rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.icon-button {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--gold-light);
  font-size: 1.1rem;
}

/* ---------- Prize tower ---------- */

.tower {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 0 14px;
  overflow: hidden;
}

/* Everything in the tower. On a screen too short for it (Safari with its
   toolbars showing, say) render.js scales it down from the bottom. */
.tower-inner {
  position: relative;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 3px;
  transform-origin: 50% 100%;
}

/* A green-tiled pagoda roof with upturned eaves and a gold ridge, between
   the two top jackpots. */
.roof {
  position: relative;
  flex: none;
  align-self: center;
  width: 40%;
  height: 44px;
  margin-bottom: -44px;
  background:
    linear-gradient(var(--gold), var(--gold-dark)) bottom / 100% 4px no-repeat,
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.28) 0 2px, transparent 2px 8px),
    linear-gradient(180deg, #5af09a, #1f9a52 45%, #0b5a2e);
  clip-path: polygon(36% 0, 64% 0, 70% 28%, 100% 70%, 97% 82%, 86% 78%, 82% 100%, 18% 100%, 14% 78%, 3% 82%, 0 70%, 30% 28%);
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.6));
}

.jackpots {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 42%;
}

/* Below the top row the plaques close in. */
.jackpot.minor,
.jackpot.mini {
  margin-top: -2px;
}

.jackpots {
  row-gap: 4px;
}

.plaque {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 6px 2px;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 45%),
    linear-gradient(180deg, #24183e, #05030f);
  border: 2px solid var(--gold);
  box-shadow: 0 0 0 1px var(--gold-deep), inset 0 0 0 1px rgba(0, 0, 0, 0.6), 0 3px 6px rgba(0, 0, 0, 0.6);
  line-height: 1.05;
}

.plaque-name {
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.1em;
}

.plaque-amount {
  font-size: 1.05rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

/* All four jackpots share one look: aqua names under a magenta crest. */
.jackpot {
  border-top-color: #ff4fc8;
  box-shadow: 0 -2px 0 #b0128a, 0 0 0 1px var(--gold-deep), inset 0 0 0 1px rgba(0, 0, 0, 0.6), 0 3px 6px rgba(0, 0, 0, 0.6);
}

.jackpot .plaque-name { background-image: linear-gradient(180deg, #eafffe, #6af0ff 50%, #0f8fb0 55%, #a8f6ff); }

/* The guardians: two gold dragons (the SVG drawing in index.html) climbing
   the gate's pillars either side of the meters, heads at the top looking
   in. The drawing faces right, so the right one is mirrored. */
.guardian {
  position: absolute;
  bottom: 56px;
  z-index: 1;
  width: 74px;
  height: 196px;
  overflow: visible;
  filter: drop-shadow(0 0 1px #4a3000) drop-shadow(0 0 12px rgba(255, 190, 40, 0.7)) drop-shadow(0 4px 4px rgba(0, 0, 0, 0.6));
  pointer-events: none;
}

.dragon-defs {
  position: absolute;
  width: 0;
  height: 0;
}

.guardian:not(.flip) {
  left: -10px;
}

.guardian.flip {
  right: -10px;
  transform: scaleX(-1);
}

.tower-inner:has(.meter.top.paying) .guardian {
  animation: blink 300ms steps(1) infinite;
}

.meters {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 0 68px;
  padding: 4px 6px 5px;
}

/* The pagoda gate the meters hang on: a red lacquer panel with a lattice
   of dark lacquer ribs, between two round lacquer pillars capped in gold,
   under a beam that runs the width of the gate (its ends show either side
   of the top meter's board). Drawn as gradients; nothing is an image. */
.meters::before {
  content: "";
  position: absolute;
  inset: -2px -24px -4px;
  z-index: -1;
  border-radius: 8px;
  background:
    /* Gold caps and feet on the pillars. */
    linear-gradient(180deg, var(--gold-light), var(--gold) 40%, var(--gold-dark)) left top / 18px 9px no-repeat,
    linear-gradient(180deg, var(--gold-light), var(--gold) 40%, var(--gold-dark)) right top / 18px 9px no-repeat,
    linear-gradient(180deg, var(--gold-dark), var(--gold) 60%, var(--gold-light)) left bottom / 18px 9px no-repeat,
    linear-gradient(180deg, var(--gold-dark), var(--gold) 60%, var(--gold-light)) right bottom / 18px 9px no-repeat,
    /* The pillars: round lacquer columns. */
    linear-gradient(90deg, #4a0610, #d4243e 32%, #ff7a86 48%, #c41a34 66%, #4a0610) left / 18px 100% no-repeat,
    linear-gradient(90deg, #4a0610, #d4243e 32%, #ff7a86 48%, #c41a34 66%, #4a0610) right / 18px 100% no-repeat,
    /* The panel between them: lattice ribs over deep lacquer. */
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.22) 0 2px, transparent 2px 16px),
    repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.22) 0 2px, transparent 2px 16px),
    linear-gradient(180deg, #8a1226, #5a0a18 60%, #3a0610);
  box-shadow: inset 0 0 0 1px rgba(255, 211, 77, 0.35), 0 4px 12px rgba(0, 0, 0, 0.55);
}

.meters::after {
  content: "";
  position: absolute;
  top: -8px;
  left: -34px;
  right: -34px;
  z-index: -1;
  height: 14px;
  border-radius: 3px;
  background:
    linear-gradient(var(--gold), var(--gold-dark)) top / 100% 2px no-repeat,
    linear-gradient(var(--gold-dark), var(--gold)) bottom / 100% 2px no-repeat,
    linear-gradient(180deg, #b8202e, #6a0e1c 55%, #3a0610);
  /* Upturned ends, like a beam's eaves. */
  clip-path: polygon(0 0, 100% 0, 100% 100%, 92% 70%, 8% 70%, 0 100%);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.55);
}

/* One tier of the tower: a roofed name board over a row of orb
   sockets. */
.meter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  border-radius: 999px;
}

.meter.full .meter-slots {
  box-shadow: 0 0 12px var(--c), inset 0 0 10px var(--c), 0 0 0 2px var(--gold);
}

.meter-slots {
  display: flex;
  justify-content: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.25));
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.7), 0 0 0 1px var(--gold-deep);
}

.meter-label {
  order: -1;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  min-width: 62%;
  padding: 2px 18px 2px;
  background:
    linear-gradient(var(--gold), var(--gold-dark)) bottom / 100% 2px no-repeat,
    linear-gradient(180deg, rgba(255, 255, 255, 0.3), transparent 45%),
    linear-gradient(180deg, var(--c), var(--c-dark));
  clip-path: polygon(10% 0, 90% 0, 100% 64%, 96% 100%, 4% 100%, 0 64%);
  line-height: 1.1;
}

.meter-name {
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

/* Gold bevel lettering would vanish on the amber board, so Super's name
   and prize are cream with a dark edge. */
.meter.amber .meter-name,
.meter.amber .meter-amount {
  background-image: linear-gradient(180deg, #fffdf0, #fff3c8 55%, #ffe08a);
  filter: drop-shadow(0 1px 0 #6a3200) drop-shadow(0 0 2px rgba(80, 30, 0, 0.9));
}

/* Extreme, the top tier, gets the widest and brightest board. */
.meter.top .meter-label {
  min-width: 100%;
  padding: 3px 18px 2px;
  filter: drop-shadow(0 0 8px rgba(255, 60, 90, 0.6));
}

.meter.top .meter-name { font-size: 0.8rem; }
.meter.top .meter-amount { font-size: 0.95rem; }

.meter-amount {
  font-size: 0.86rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

/* An orb socket: a glass well in a gold ring. */
.slot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 3px solid var(--gold-dark);
  background:
    radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.25), transparent 45%),
    radial-gradient(circle at 50% 55%, var(--c-dark), #000 95%);
  box-shadow: inset 0 0 0 1px var(--gold-light), 0 1px 2px rgba(0, 0, 0, 0.8);
  color: #fff;
  font-family: var(--display);
  font-size: 0.66rem;
  font-weight: 900;
}

/* A filled socket holds a faceted gem. */
.slot.filled,
.cell.orb::before {
  background:
    conic-gradient(from 22.5deg, rgba(255, 255, 255, 0.4) 0 12.5%, transparent 0 25%, rgba(0, 0, 0, 0.18) 0 37.5%, transparent 0 50%, rgba(0, 0, 0, 0.28) 0 62.5%, transparent 0 75%, rgba(255, 255, 255, 0.22) 0 87.5%, transparent 0),
    radial-gradient(circle at 40% 32%, var(--c-light), var(--c) 50%, var(--c-dark));
}

.slot.filled {
  border-color: var(--gold);
  box-shadow: inset 0 0 0 1px var(--gold-light), 0 0 10px var(--c);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 2px #000;
}

.slot.landed {
  animation: slot-land 350ms ease-out;
}

/* A meter flares up as an orb lands in it. */
.meter.lit {
  animation: meter-lit 600ms ease-out;
}

.meter.paying,
.plaque.paying {
  animation: paying 250ms steps(1) 5;
}

.meters.fizzle .slot.filled {
  animation: fizzle 700ms ease-in forwards;
}

.tower-base {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: stretch;
  gap: 6px;
  margin-top: 2px;
}

/* Neon-lit signs at the foot of the tower. */
.chests {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  padding: 4px 9px;
  border-radius: 8px;
  background: linear-gradient(180deg, #2a0f5e, #120430);
  border: 2px solid var(--neon-cyan);
  box-shadow: 0 0 8px var(--neon-cyan), inset 0 0 8px rgba(66, 230, 255, 0.45);
}

.chest-text {
  font-family: var(--display);
  font-size: min(0.74rem, 3.1vw);
  font-weight: 900;
  letter-spacing: 0.02em;
  color: var(--gold-light);
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* A small chest standing in for the word in the sign. */
.chest.chest-mini {
  width: 16px;
  height: 12px;
  border-width: 1px;
  border-radius: 5px 5px 2px 2px / 4px 4px 2px 2px;
  vertical-align: -1px;
  box-shadow: none;
}

.chest.chest-mini::after {
  top: 25%;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border: none;
  box-shadow: none;
}

/* The chest bar reads as a row of 24 gold bricks. */
.chest-bar {
  position: relative;
  height: 9px;
  border-radius: 2px;
  background: #3a2060;
  overflow: hidden;
}

.chest-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 calc(100% / 24 - 2px), #120430 calc(100% / 24 - 2px) calc(100% / 24));
}

.chest-bar.landed {
  animation: slot-land 350ms ease-out;
}

/* All chests in: the sign glows until the deal starts. */
.chests.full {
  border-color: var(--gold);
  animation: chests-full 600ms ease-in-out infinite alternate;
}

.chests.full .chest-text {
  color: #fff;
}

.chest-fill {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(180deg, var(--gold-light), var(--gold) 45%, var(--gold-dark));
  transition: width 300ms ease;
}

.spin-count {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 62px;
  padding: 2px 8px;
  border-radius: 8px;
  background: linear-gradient(180deg, #2a0f5e, #120430);
  border: 2px solid var(--neon-pink);
  box-shadow: 0 0 8px var(--neon-pink), inset 0 0 8px rgba(255, 79, 216, 0.45);
  font-family: var(--display);
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.spin-count-label,
.spin-count-of {
  color: var(--gold-light);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
}

.spin-count strong {
  font-size: 1.35rem;
}

/* The 10th spin: the box turns to gold, glows and throbs, with rays
   turning behind it. */
.spin-count {
  position: relative;
  isolation: isolate;
}

.spin-count.hot {
  border-color: var(--gold-light);
  background: radial-gradient(circle at 50% 45%, #7a2a00, #3a0a14 70%);
  animation: hot-box 700ms ease-in-out infinite alternate;
}

.spin-count.hot::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: -1;
  width: 120px;
  height: 120px;
  margin: -60px 0 0 -60px;
  border-radius: 50%;
  background: repeating-conic-gradient(rgba(255, 211, 77, 0.55) 0 10deg, transparent 10deg 24deg);
  -webkit-mask-image: radial-gradient(circle, #000 25%, transparent 68%);
  mask-image: radial-gradient(circle, #000 25%, transparent 68%);
  animation: rays 5s linear infinite;
  pointer-events: none;
}

.spin-count.hot strong {
  font-size: 1.5rem;
  filter: drop-shadow(0 0 1px #3a0a00) drop-shadow(0 2px 0 #3a0a00) drop-shadow(0 0 8px #ff8a00);
}

.spin-count.hot .spin-count-label,
.spin-count.hot .spin-count-of {
  color: #fff;
  text-shadow: 0 0 6px var(--gold);
}

/* The tower fires on the 10th spin: a bright flash. */
.spin-count.firing {
  animation: firing 700ms ease-out;
}

/* ---------- Reels ---------- */

/* The reel window: a gold frame between two red lacquer pillars, under a
   gold eave. */
.grid {
  position: relative;
  z-index: 0;
  flex: none;
  align-self: center;
  display: grid;
  grid-template-columns: repeat(5, var(--cell));
  justify-content: center;
  gap: 4px;
  padding: 6px;
  border-radius: 6px;
  background: linear-gradient(180deg, #120c40, #05041a);
  border: 3px solid var(--gold);
  box-shadow: 0 0 0 1px var(--gold-deep), 0 0 18px rgba(255, 211, 77, 0.35), inset 0 0 18px rgba(0, 0, 0, 0.8);
}

.grid::before {
  content: "";
  position: absolute;
  top: -4px;
  bottom: -4px;
  left: -15px;
  right: -15px;
  z-index: -1;
  background:
    repeating-linear-gradient(180deg, transparent 0 30px, var(--gold-deep) 30px 31px, var(--gold-light) 31px 34px, var(--gold-dark) 34px 37px) left top / 13px 100% no-repeat,
    repeating-linear-gradient(180deg, transparent 0 30px, var(--gold-deep) 30px 31px, var(--gold-light) 31px 34px, var(--gold-dark) 34px 37px) right top / 13px 100% no-repeat,
    linear-gradient(90deg, #4a000c, #c8102e 35%, #ff6a7a 50%, #a0001e 70%, #3a0008) left top / 13px 100% no-repeat,
    linear-gradient(90deg, #4a000c, #c8102e 35%, #ff6a7a 50%, #a0001e 70%, #3a0008) right top / 13px 100% no-repeat;
}

.grid::after {
  content: "";
  position: absolute;
  top: -15px;
  left: -18px;
  right: -18px;
  height: 16px;
  background:
    linear-gradient(180deg, transparent 55%, rgba(110, 10, 26, 0.9) 55% 66%, transparent 66%),
    var(--gold-bevel);
  clip-path: polygon(0 0, 5% 52%, 95% 52%, 100% 0, 100% 34%, 96% 100%, 4% 100%, 0 34%);
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.6));
  pointer-events: none;
}

.reel {
  height: calc(var(--cell) * 3);
  overflow: hidden;
  border-radius: 4px;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.55), transparent 18%, transparent 82%, rgba(0, 0, 0, 0.55)),
    linear-gradient(180deg, #241a6a, #120c44 50%, #241a6a);
}

.strip {
  display: flex;
  flex-direction: column;
  will-change: transform;
}

/* Motion blur while a reel is moving fast. */
.strip.spinning {
  filter: blur(1.5px) brightness(1.1);
}

.cell {
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--cell);
  height: var(--cell);
  font-size: calc(var(--cell) * 0.6);
  line-height: 1;
}

/* Picture symbols fill the cell, with no tile: the emoji stands large
   over a soft glow of its own colour, rimmed in gold light. */
.cell.sym {
  isolation: isolate;
  background: radial-gradient(closest-side, var(--glow), transparent);
}

.sym-face {
  font-size: calc(var(--cell) * 0.82);
  line-height: 1;
  /* One filter only: reels hold dozens of cells while they spin, and
     stacked filters slow painting a lot on some phones. */
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.85));
}

.cell.sym-0 { --glow: rgba(255, 92, 40, 0.75); }
.cell.sym-1 { --glow: rgba(60, 220, 200, 0.55); }
.cell.sym-2 { --glow: rgba(255, 70, 150, 0.6); }

/* The dragon is the top symbol, so its fire burns brighter. */
.cell.sym-0 .sym-face {
  font-size: calc(var(--cell) * 0.9);
  filter: drop-shadow(0 0 6px rgba(255, 140, 0, 0.9));
}

/* Card letters: an ornate capital in coloured jewel glass, set in a
   heavy gold edge. Three copies of the letter are stacked: a dark
   outline and drop shadow, the gold edge (a wide stroke clipped to the
   gold bevel), and the jewel in front. No filters, so spinning reels
   stay cheap to paint. */
.cell.letter {
  display: grid;
  place-items: center;
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-size: calc(var(--cell) * 0.7);
  font-weight: 900;
}

.glyph-shadow,
.glyph-edge,
.glyph {
  position: relative;
  grid-area: 1 / 1;
  /* Room for the stroke and the Q's tail, which the clipped fills would
     otherwise cut off at the edge of the box. */
  padding: 0.12em 0.4em;
  line-height: 1;
}

/* The Q's tail sweeps right, so the letter is a little smaller and sits
   a little left to keep the tail on its own reel. */
.cell.letter-Q {
  font-size: calc(var(--cell) * 0.6);
}

.letter-Q .glyph-edge,
.letter-Q .glyph {
  transform: translateX(-0.2em);
}

.glyph-shadow {
  color: #2a1400;
  -webkit-text-stroke: calc(var(--cell) * 0.12 + 3px) #2a1400;
  transform: translateY(2px);
}

.letter-Q .glyph-shadow {
  transform: translate(-0.2em, 2px);
}

.glyph-edge {
  background-image: var(--gold-bevel);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: calc(var(--cell) * 0.12) transparent;
}

.glyph {
  background-image:
    linear-gradient(160deg, rgba(255, 255, 255, 0.55) 0 22%, transparent 34%),
    linear-gradient(180deg, var(--l1) 10%, var(--l2) 48%, var(--l3) 82%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 250, 220, 0.85);
}

.letter-A { --l1: #ffd6d6; --l2: #ff2a40; --l3: #6a000c; }
.letter-K { --l1: #d6e8ff; --l2: #2f7bff; --l3: #08206e; }
.letter-Q { --l1: #d6ffe6; --l2: #1fc46a; --l3: #044a22; }

/* Orbs: a big faceted gem that fills the cell, with its prize across it
   in heavy lettering. The gem is drawn inside the cell so orbs and
   symbols stay the same size in the strip. */
.cell.orb {
  isolation: isolate;
  background: radial-gradient(closest-side, var(--c), transparent);
  color: #fff8dc;
  font-family: var(--display);
  font-size: calc(var(--cell) * 0.3);
  font-weight: 900;
  -webkit-text-stroke: calc(var(--cell) * 0.05) #1a0a00;
  paint-order: stroke fill;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.8);
}

.cell.orb::before {
  content: "";
  position: absolute;
  inset: 5%;
  z-index: -1;
  clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
}

/* The flat top facet of the gem. */
.cell.orb::after {
  content: "";
  position: absolute;
  inset: 27%;
  z-index: -1;
  clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
  background: radial-gradient(circle at 45% 35%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.08) 70%);
}

.cell.orb.jp {
  color: var(--gold);
  font-size: calc(var(--cell) * 0.2);
}

.slot.jp {
  font-size: 0.5rem;
}

/* Winning symbols pulse on their line until the next spin, and the rest
   dim. */
.cell.win {
  z-index: 1;
  animation: win-cell 650ms ease-in-out infinite;
}

.grid.has-win .cell:not(.win):not(.orb) {
  opacity: 0.5;
  transition: opacity 250ms ease;
}

/* A band of light along a winning line. */
.payline {
  position: absolute;
  z-index: 0;
  height: 5px;
  margin-top: -2.5px;
  border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--gold-light) 6%, #fff 50%, var(--gold-light) 94%, transparent);
  box-shadow: 0 0 10px var(--gold), 0 0 20px rgba(255, 140, 0, 0.8);
  opacity: 0.6;
  pointer-events: none;
  animation: payline 650ms ease-in-out infinite alternate;
}

/* The reel still turning in a tease glows. */
.reel.teasing {
  box-shadow: 0 0 0 2px var(--gold), 0 0 16px var(--gold), inset 0 0 14px rgba(255, 211, 77, 0.7);
}

/* Lightning across the reels on a tease. */
.lightning {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
}

.lightning svg {
  position: absolute;
  inset: 0;
  overflow: visible;
}

.lightning.strike {
  animation: strike 520ms linear forwards;
}

.lightning .bolt,
.lightning .bolt-glow {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lightning .bolt {
  stroke: #fff;
  stroke-width: 5;
}

.lightning .bolt-glow {
  stroke: #7fdcff;
  stroke-width: 16;
  opacity: 0.75;
  filter: blur(4px);
}

.lightning .fork {
  stroke-width: 2.5;
}

.lightning .bolt-glow.fork {
  stroke-width: 9;
}

.grid.struck {
  animation: struck 520ms ease-out;
}

/* The WINNER plaque: a lacquered sign in a gold frame across the reels. */
.winner {
  position: absolute;
  left: -10px;
  right: -10px;
  top: 50%;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 10px 10px;
  border-radius: 10px;
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(255, 120, 90, 0.35), transparent 70%),
    linear-gradient(180deg, var(--lacquer), var(--bg-deep));
  border: 4px solid var(--gold);
  box-shadow: 0 0 0 2px var(--gold-deep), inset 0 0 0 2px var(--gold-deep), 0 0 26px rgba(255, 211, 77, 0.8), 0 10px 24px rgba(0, 0, 0, 0.7);
  transform: translateY(-50%) scale(0);
  opacity: 0;
  pointer-events: none;
}

.winner.show {
  animation: winner-in 420ms cubic-bezier(0.3, 1.6, 0.5, 1) forwards;
}

.winner.show.hide {
  animation: winner-out 250ms ease-in forwards;
}

.winner-title {
  font-family: var(--display);
  font-size: calc(var(--cell) * 0.7);
  font-weight: 900;
  font-style: italic;
  letter-spacing: 0.06em;
  line-height: 1;
  background-image: var(--gold-bevel);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 0 #6a0016) drop-shadow(0 0 10px rgba(255, 140, 0, 0.9));
}

.winner-amount {
  margin-top: 2px;
  font-family: var(--display);
  font-size: calc(var(--cell) * 0.55);
  font-weight: 900;
  line-height: 1.05;
  color: #fff;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 3px 0 #000, 0 0 12px var(--gold);
}

.cell.collected {
  opacity: 0.75;
  transition: opacity 200ms ease;
}

.grid.tease {
  animation: tease 300ms ease-in-out infinite alternate;
}

/* ---------- Controls ---------- */

/* A dark console across the foot of the screen. */
.controls {
  flex: none;
  margin: 6px -16px 0;
  padding: 9px 16px max(6px, calc(var(--safe-bottom) + 2px));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 30%),
    linear-gradient(180deg, #1c1458, var(--navy-deep));
  border-top: 2px solid var(--gold-dark);
  box-shadow: 0 -1px 0 var(--gold-deep), 0 -6px 16px rgba(0, 0, 0, 0.5);
}

.bet-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
}

.bet {
  flex: none;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Glossy sapphire buttons with a gold rim: bet steps, upgrades,
   league, and back buttons. */
.bet-step,
.upgrades-button,
.league-button,
.sheet-close {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.05) 48%, transparent 52%),
    linear-gradient(180deg, #3a7aff, #1a3ab0 60%, #0d1e6a);
  border: 2px solid var(--gold);
  box-shadow: 0 0 0 1px var(--gold-deep), 0 3px 0 #070826, 0 4px 8px rgba(0, 0, 0, 0.5);
  color: #fff;
}

.bet-step {
  width: 40px;
  height: 34px;
  border-radius: 8px;
  font-size: 1.3rem;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 2px 0 #0a1a5a;
}

.bet-step:active:not(:disabled),
.upgrades-button:active,
.league-button:active,
.sheet-close:active {
  transform: translateY(2px);
  box-shadow: 0 0 0 1px var(--gold-deep), 0 1px 0 #070826;
}

/* MAX BET: a red lacquer button with a gold rim. */
.bet-max {
  width: 42px;
  height: 34px;
  margin-left: 2px;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.05) 48%, transparent 52%),
    linear-gradient(180deg, #ff5a6a, #c8102e 60%, #6e0a1a);
  border: 2px solid var(--gold);
  box-shadow: 0 0 0 1px var(--gold-deep), 0 3px 0 #2a0008, 0 4px 8px rgba(0, 0, 0, 0.5);
  color: #fff;
  font-family: var(--display);
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1.05;
  text-shadow: 0 1px 0 #4a0010;
}

.bet-max:active:not(:disabled) {
  transform: translateY(2px);
  box-shadow: 0 0 0 1px var(--gold-deep), 0 1px 0 #2a0008;
}

.bet-max:disabled,
.bet-step:disabled {
  background: linear-gradient(180deg, #3a3a5a, #1a1a2e);
  border-color: var(--gold-deep);
  color: #6a6a8a;
  text-shadow: none;
  cursor: default;
}

/* A dark readout with a gold tab naming it. */
.bet-value,
.win-box {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 34px;
  border-radius: 6px;
  background: linear-gradient(180deg, #000, #14123a);
  border: 2px solid var(--gold-dark);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.9);
  line-height: 1.05;
}

.bet-value {
  min-width: 58px;
  padding: 5px 6px 0;
}

.bet-label,
.win-label {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  padding: 0 7px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--gold-light), var(--gold) 50%, var(--gold-dark));
  color: #3a1a00;
  font-family: var(--display);
  font-size: 0.56rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  line-height: 12px;
  white-space: nowrap;
}

.bet-value strong {
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
}

.bet-value.raised strong {
  color: var(--gold);
  text-shadow: 0 0 8px rgba(255, 211, 77, 0.7);
}

/* A bet the coins don't cover: red until it is lowered. */
.bet-value.short {
  border-color: var(--ruby);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.9), 0 0 8px rgba(255, 59, 78, 0.7);
}

.bet-value.short strong {
  background-image: none;
  color: var(--ruby);
  text-shadow: none;
  filter: drop-shadow(0 1px 0 #4a0010) drop-shadow(0 0 6px rgba(255, 59, 78, 0.7));
}

.per-spin.short {
  color: var(--ruby);
}

.bet-value.nudge {
  animation: bet-nudge 360ms ease;
}

@keyframes bet-nudge {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-4px); }
  40%, 80% { transform: translateX(4px); }
}

.win-box {
  flex: 1;
  min-width: 0;
  padding: 5px 8px 0;
}

.win-display {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--muted);
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-align: center;
  white-space: pre;
  font-variant-numeric: tabular-nums;
}

/* GOOD LUCK! before the first spin, small enough to fit beside MAX BET. */
.win-display.idle {
  font-size: 0.85rem;
  letter-spacing: 0;
}

.win-display.hit {
  filter: drop-shadow(0 1px 0 var(--gold-deep)) drop-shadow(0 0 8px rgba(255, 211, 77, 0.6));
}

.buttons {
  display: flex;
  align-items: stretch;
  gap: 10px;
}

.upgrades-button {
  position: relative;
  flex: none;
  width: 58px;
  border-radius: 12px;
  font-size: 1.5rem;
}

.badge {
  position: absolute;
  top: -8px;
  right: -8px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  background: var(--ruby);
  border: 2px solid #fff;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 900;
  line-height: 18px;
  animation: badge 1s ease-in-out infinite alternate;
}

.badge[hidden] {
  display: none;
}

/* The spin button: a domed jade-glass shield in a gold rim. */
.spin-button {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 5px 0 4px;
  border-radius: 40px 40px 16px 16px / 24px 24px 16px 16px;
  background:
    radial-gradient(70% 45% at 50% 12%, rgba(255, 255, 255, 0.55), transparent 70%),
    radial-gradient(120% 90% at 50% 20%, #7aff9a, #1fae4c 45%, #0a6a2a 75%, #04401a);
  border: 3px solid var(--gold);
  box-shadow: 0 0 0 2px var(--gold-deep), inset 0 -4px 8px rgba(0, 40, 10, 0.6), 0 6px 0 #03300f, 0 8px 18px rgba(0, 0, 0, 0.55), 0 0 18px rgba(47, 212, 122, 0.45);
  color: #fff;
  touch-action: none;
}

.spin-button > * {
  pointer-events: none;
}

#spin-label {
  font-family: var(--display);
  font-size: clamp(1.4rem, 7vw, 1.75rem);
  font-weight: 900;
  letter-spacing: 0.14em;
  line-height: 1;
  color: #fff;
  -webkit-text-stroke: 1px #0a5a24;
  text-shadow: 0 2px 0 #064018, 0 3px 6px rgba(0, 0, 0, 0.5);
}

.per-spin {
  margin-top: 1px;
  font-size: 0.68rem;
  font-weight: 700;
  color: #e0ffe8;
  text-shadow: 0 1px 0 #064018;
}

.spin-button.pulse {
  animation: press 140ms ease-out;
}

/* While the reels turn, SPIN is a red STOP. */
.spin-button.stop {
  background:
    radial-gradient(70% 45% at 50% 12%, rgba(255, 255, 255, 0.5), transparent 70%),
    radial-gradient(120% 90% at 50% 20%, #ff7a7a, #e0182e 45%, #8a0014 75%, #4a0008);
  box-shadow: 0 0 0 2px var(--gold-deep), inset 0 -4px 8px rgba(60, 0, 8, 0.6), 0 6px 0 #3a0008, 0 8px 18px rgba(0, 0, 0, 0.55), 0 0 18px rgba(255, 59, 78, 0.55);
}

.spin-button.stop #spin-label {
  -webkit-text-stroke-color: #7a0012;
  text-shadow: 0 2px 0 #4a0008, 0 3px 6px rgba(0, 0, 0, 0.5);
}

.spin-button.stop .per-spin {
  visibility: hidden;
}


/* Autoplay running: the button turns red lacquer and reads STOP. */
.spin-button.auto {
  background:
    radial-gradient(70% 45% at 50% 12%, rgba(255, 255, 255, 0.5), transparent 70%),
    radial-gradient(120% 90% at 50% 20%, #ff8a8a, #e0213a 45%, #8a0a1c 75%, #4a0410);
  box-shadow: 0 0 0 2px var(--gold-deep), inset 0 -4px 8px rgba(40, 0, 6, 0.6), 0 6px 0 #3a0410, 0 8px 18px rgba(0, 0, 0, 0.55), 0 0 18px rgba(255, 59, 78, 0.6);
  animation: auto-glow 1.2s ease-in-out infinite alternate;
}

.spin-button.auto #spin-label {
  -webkit-text-stroke-color: #6a0016;
  text-shadow: 0 2px 0 #4a0010, 0 3px 6px rgba(0, 0, 0, 0.5);
}

.spin-button.auto .per-spin {
  color: #ffe0e4;
  text-shadow: 0 1px 0 #4a0010;
}

/* ---------- Autoplay picker ---------- */

.auto-picker {
  position: fixed;
  inset: 0;
  z-index: 42;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 16px calc(max(10px, calc(var(--safe-bottom) + 2px)) + 92px);
  background: rgba(8, 0, 20, 0);
  pointer-events: none;
  transition: background 160ms ease;
}

.auto-picker.open {
  background: rgba(8, 0, 20, 0.55);
  pointer-events: auto;
}

.auto-panel {
  width: 100%;
  max-width: 360px;
  padding: 10px 12px 12px;
  border-radius: 18px;
  background: linear-gradient(180deg, #4a1680, var(--navy) 70%, var(--navy-deep));
  border: 3px solid var(--gold);
  box-shadow: 0 0 0 2px var(--gold-deep), 0 10px 28px rgba(0, 0, 0, 0.6), 0 0 22px rgba(255, 79, 216, 0.35);
  text-align: center;
  transform: translateY(24px) scale(0.92);
  opacity: 0;
  transition: transform 180ms cubic-bezier(0.3, 1.4, 0.5, 1), opacity 140ms ease;
}

.auto-picker.open .auto-panel {
  transform: none;
  opacity: 1;
}

.auto-title {
  display: block;
  margin-bottom: 8px;
  font-family: var(--display);
  font-size: 1.3rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  color: var(--gold);
  text-shadow: 0 2px 0 var(--gold-deep), 0 0 10px rgba(255, 211, 77, 0.6);
}

.auto-counts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.auto-count {
  min-height: 56px;
  border-radius: 14px;
  background: radial-gradient(120% 90% at 50% 20%, #7aff9a, #1fae4c 45%, #0a6a2a 80%);
  border: 2px solid var(--gold);
  box-shadow: 0 0 0 1px var(--gold-deep), 0 4px 0 #03300f, inset 0 -3px 6px rgba(0, 40, 10, 0.5);
  color: #fff;
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 900;
  -webkit-text-stroke: 1px #0a5a24;
  text-shadow: 0 2px 0 #064018;
}

.auto-count:active {
  transform: translateY(3px);
  box-shadow: 0 0 0 1px var(--gold-deep), 0 1px 0 #03300f, inset 0 -3px 6px rgba(0, 40, 10, 0.5);
}

/* ---------- Big win screen ---------- */

.big-win {
  position: fixed;
  inset: 0;
  z-index: 44;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2vh;
  padding: var(--safe-top) 16px var(--safe-bottom);
  overflow: hidden;
  background: radial-gradient(circle at 50% 45%, rgba(140, 16, 40, 0.75), rgba(20, 0, 6, 0.92) 70%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 220ms ease, visibility 0s linear 220ms;
  touch-action: manipulation;
}

.big-win.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 220ms ease;
}

/* Turning rays of light behind the sign, coloured by tier. */
.big-win-rays {
  --ray: rgba(255, 211, 77, 0.3);
  --glow: rgba(255, 230, 140, 0.6);
  position: absolute;
  left: 50%;
  top: 45%;
  width: 170vmax;
  height: 170vmax;
  margin: -85vmax 0 0 -85vmax;
  border-radius: 50%;
  background:
    radial-gradient(circle, var(--glow), transparent 30%),
    repeating-conic-gradient(var(--ray) 0 6deg, transparent 6deg 15deg);
  -webkit-mask-image: radial-gradient(circle, #000 15%, transparent 55%);
  mask-image: radial-gradient(circle, #000 15%, transparent 55%);
  animation: rays 8s linear infinite;
}

.big-win.huge .big-win-rays {
  --ray: rgba(66, 230, 255, 0.3);
  --glow: rgba(140, 255, 200, 0.6);
  animation-duration: 5s;
}

.big-win.mega .big-win-rays {
  --ray: rgba(255, 79, 216, 0.36);
  --glow: rgba(255, 140, 120, 0.7);
  animation-duration: 3s;
}

.big-win-sign {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.5vw;
  max-width: 100%;
}

.big-win-lantern {
  font-size: clamp(1.5rem, 7vw, 2.4rem);
  filter: drop-shadow(0 0 10px rgba(255, 80, 40, 0.9));
  animation: lantern 1.6s ease-in-out infinite alternate;
}

.big-win-title {
  font-family: var(--display);
  font-size: clamp(2.2rem, 11.5vw, 4rem);
  font-weight: 900;
  font-style: italic;
  line-height: 1;
  white-space: nowrap;
  background-image: var(--gold-bevel);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 0 var(--gold-deep)) drop-shadow(0 4px 0 #6a0016) drop-shadow(0 0 18px rgba(255, 106, 0, 0.9));
}

.big-win.huge .big-win-title {
  background-image: linear-gradient(180deg, #f0fff8, #8affd0 30%, #1fbf8a 50%, #0a7a6a 54%, #9af0ff 78%, #108aa0);
  filter: drop-shadow(0 2px 0 #054030) drop-shadow(0 4px 0 #02303a) drop-shadow(0 0 20px var(--neon-cyan));
}

.big-win.mega .big-win-title {
  font-size: clamp(2.4rem, 12.5vw, 4.4rem);
  background-image: linear-gradient(180deg, #fff0fa, #ff9ae6 28%, #ff2a9a 50%, #b0006a 54%, #ffb0a0 78%, #d42a2f);
  filter: drop-shadow(0 2px 0 #4a0030) drop-shadow(0 4px 0 #2a0016) drop-shadow(0 0 22px var(--neon-pink));
}

.big-win-title.step {
  animation: big-win-step 520ms cubic-bezier(0.3, 1.5, 0.5, 1);
}

.big-win.mega .big-win-sign {
  animation: big-win-shake 400ms ease-in-out 2;
}

.big-win-amount {
  position: relative;
  min-width: 60%;
  padding: 6px 22px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(16, 3, 31, 0.85), rgba(42, 11, 74, 0.85));
  border: 3px solid var(--gold);
  box-shadow: 0 0 0 2px var(--gold-deep), 0 0 24px rgba(255, 211, 77, 0.5);
  font-family: var(--display);
  font-size: clamp(2.2rem, 12vw, 3.4rem);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: #fff;
  text-shadow: 0 3px 0 #000, 0 0 14px var(--gold);
}

.big-win-amount.landed {
  animation: big-win-step 420ms cubic-bezier(0.3, 1.6, 0.5, 1);
}

/* ---------- Upgrades sheet ---------- */

.sheet {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0, 0, 0, 0);
  pointer-events: none;
  transition: background 200ms ease;
}

.sheet.open {
  background: rgba(8, 0, 20, 0.6);
  pointer-events: auto;
}

/* A lacquered cabinet in a gold frame, slid up from the bottom. */
.sheet-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 520px;
  max-height: 80vh;
  max-height: 80dvh;
  padding: 26px 14px max(12px, calc(var(--safe-bottom) + 2px));
  border-radius: 18px 18px 0 0;
  background:
    radial-gradient(90% 30% at 50% 0%, rgba(230, 70, 60, 0.45), transparent 70%),
    repeating-linear-gradient(45deg, transparent 0 10px, rgba(255, 255, 255, 0.025) 10px 12px),
    linear-gradient(180deg, #6a0e1c, #3a0610 60%, var(--bg-deep));
  border: 3px solid var(--gold);
  border-bottom: none;
  box-shadow: 0 0 0 2px var(--gold-deep), 0 -10px 30px rgba(0, 0, 0, 0.6);
  transform: translateY(105%);
  transition: transform 250ms ease;
}

.sheet.open .sheet-panel {
  transform: translateY(0);
}

/* The title hangs on a red ribbon across the top of the frame. */
.sheet-title {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  min-width: 62%;
  padding: 6px 28px 7px;
  font-size: 1.15rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  background-color: var(--red);
  background-image: var(--gold-bevel), linear-gradient(180deg, #ff4a5e, var(--red) 50%, #7a0016);
  -webkit-background-clip: text, border-box;
  background-clip: text, border-box;
  clip-path: polygon(0 0, 100% 0, 95% 50%, 100% 100%, 0 100%, 5% 50%);
  filter: drop-shadow(0 2px 0 var(--gold-deep)) drop-shadow(0 4px 4px rgba(0, 0, 0, 0.6));
}

.upgrade-list {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* Keep vertical scrolling working with touch-action on the body. */
  touch-action: pan-y;
  padding: 2px 2px 8px;
}

/* Each upgrade is a dark plaque with a gold bevel, and its price on a
   jade button. */
.upgrade {
  flex: none;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "icon name owned"
    "icon effect cost";
  align-items: center;
  gap: 2px 12px;
  width: 100%;
  min-height: 60px;
  padding: 8px 10px 8px 8px;
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent 40%),
    linear-gradient(180deg, #221a5e, #0a0828);
  border: 2px solid var(--gold);
  box-shadow: 0 0 0 1px var(--gold-deep), 0 3px 6px rgba(0, 0, 0, 0.5);
  text-align: left;
  transition: transform 80ms ease, opacity 120ms ease;
}

.upgrade:active:not(:disabled) {
  transform: scale(0.98);
}

.upgrade:disabled {
  border-color: var(--gold-deep);
  box-shadow: none;
  opacity: 0.5;
  cursor: default;
}

.upgrade.bought {
  animation: bought 450ms ease-out;
}

/* The icon sits in a round gold medallion. */
.upgrade-icon {
  grid-area: icon;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #7a1a8c, #2a0638);
  border: 2px solid var(--gold);
  box-shadow: inset 0 0 0 1px var(--gold-deep), 0 0 8px rgba(255, 211, 77, 0.35);
  font-size: 1.5rem;
  line-height: 1;
}

.upgrade-name {
  grid-area: name;
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 800;
  color: #fff;
}

.upgrade-owned {
  grid-area: owned;
  justify-self: end;
  color: var(--muted);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

.upgrade-effect {
  grid-area: effect;
  color: var(--jade);
  font-size: 0.85rem;
  font-weight: 600;
}

.upgrade-cost {
  grid-area: cost;
  justify-self: end;
  min-width: 64px;
  padding: 3px 10px;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.4), transparent 50%),
    linear-gradient(180deg, #3adf6e, #128a3a 60%, #075a24);
  border: 1px solid var(--gold);
  color: #fff;
  font-family: var(--display);
  font-weight: 900;
  text-align: center;
  text-shadow: 0 1px 0 #054018;
  font-variant-numeric: tabular-nums;
}

.upgrade:disabled .upgrade-cost {
  background: linear-gradient(180deg, #4a4a6a, #24243a);
  border-color: var(--gold-deep);
}

.upgrade-cost::before {
  content: "● ";
  color: var(--gold);
  font-size: 0.7em;
  vertical-align: 0.15em;
}

.sheet-close {
  flex: none;
  margin-top: 8px;
  min-height: 52px;
  border-radius: 14px;
  font-family: var(--display);
  font-size: 1.1rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-shadow: 0 2px 0 #0a1a5a;
}

/* ---------- Deal bonus ---------- */

/* A treasure chest drawn in CSS: a domed red lacquer box, gold bands and
   a gold lock set with a pink gem. */
.chest {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 24px;
  border-radius: 9px 9px 3px 3px / 7px 7px 3px 3px;
  background:
    linear-gradient(90deg, transparent 16%, var(--gold) 16% 24%, transparent 24% 76%, var(--gold) 76% 84%, transparent 84%),
    linear-gradient(180deg, #ff5a6a 0, #c8102e 30%, #6a0016 40%, var(--gold) 40% 47%, #d4132f 47%, #7a0018);
  border: 2px solid var(--gold);
  box-shadow: inset 0 0 0 1px var(--gold-deep), 0 2px 4px rgba(0, 0, 0, 0.6);
}

.chest::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 30%;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  border-radius: 2px;
  background: radial-gradient(circle at 50% 45%, #ffb0f0, #e020b0 55%, #6a0050 80%);
  border: 1px solid var(--gold-light);
  box-shadow: 0 0 0 1px var(--gold-dark);
}

.fly-chest {
  position: fixed;
  z-index: 16;
}

.deal {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  justify-content: center;
  background: var(--bg-deep);
  opacity: 0;
  pointer-events: none;
  transition: opacity 250ms ease;
}

.deal.open {
  opacity: 1;
  pointer-events: auto;
}

/* The treasure hall: violet light, lanterns either side of the title. */
.deal-panel {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 520px;
  height: 100%;
  padding: max(10px, var(--safe-top)) 12px max(12px, calc(var(--safe-bottom) + 2px));
  gap: 7px;
  background:
    radial-gradient(70% 30% at 50% 0%, rgba(230, 70, 60, 0.55), transparent 70%),
    radial-gradient(60% 40% at 50% 55%, rgba(122, 16, 32, 0.6), transparent 75%),
    linear-gradient(180deg, var(--bg), var(--bg-deep));
}

.deal-title {
  position: relative;
  align-self: center;
  padding: 4px 34px 6px;
  font-size: clamp(1.3rem, 6.4vw, 1.8rem);
  font-weight: 900;
  font-style: italic;
  letter-spacing: 0.02em;
  text-align: center;
  white-space: nowrap;
  background-color: var(--red);
  background-image: var(--gold-bevel), linear-gradient(180deg, #ff4a5e, var(--red) 50%, #7a0016);
  -webkit-background-clip: text, border-box;
  background-clip: text, border-box;
  clip-path: polygon(0 0, 100% 0, 94% 50%, 100% 100%, 0 100%, 6% 50%);
}

/* Lanterns hang either side of the title. */
.deal-panel::before,
.deal-panel::after {
  content: "🏮";
  position: absolute;
  top: calc(max(10px, var(--safe-top)) + 40px);
  font-size: 2rem;
  filter: drop-shadow(0 0 10px rgba(255, 80, 40, 0.8));
  animation: lantern 2400ms ease-in-out infinite alternate;
  transform-origin: 50% 0;
}

.deal-panel::before { left: max(8px, calc(50% - 250px)); }
.deal-panel::after { right: max(8px, calc(50% - 250px)); animation-delay: -1200ms; }

/* The entry prize plate. */
.deal-base {
  align-self: center;
  padding: 2px 18px;
  border-radius: 6px;
  background: linear-gradient(180deg, #000, #1a1240);
  border: 2px solid var(--gold-dark);
  color: var(--jade);
  font-family: var(--display);
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}

.deal-base strong {
  margin-left: 4px;
  color: #fff;
  font-size: 1.05rem;
}

/* The chests stand on shelves between two gold columns that carry the
   prize ladders: small prizes on the left, big ones on the right. */
.deal-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
}

.deal-board {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  grid-template-columns: 64px 64px;
  grid-template-rows: repeat(12, 1fr);
  grid-auto-flow: column;
  justify-content: space-between;
  align-content: stretch;
  gap: 3px 0;
  padding: 6px 5px;
  pointer-events: none;
}

/* The columns behind the ladders. */
.deal-board::before,
.deal-board::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: -1;
  width: 74px;
  border-radius: 10px;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.3), transparent 20%, rgba(255, 255, 255, 0.35) 45%, transparent 60%, rgba(0, 0, 0, 0.35)),
    linear-gradient(180deg, #ffe680, #d99a14 20%, #ffd34d 50%, #b8780a 80%, #ffe27a);
  box-shadow: inset 0 0 0 2px var(--gold-deep), 0 0 12px rgba(255, 190, 40, 0.4);
}

.deal-board::before { left: 0; }
.deal-board::after { right: 0; }

.deal-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  border-radius: 5px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.35), transparent 50%),
    linear-gradient(180deg, #2fd47a, #0b6a36);
  border: 1px solid var(--gold-light);
  box-shadow: 0 0 0 1px var(--gold-deep), 0 1px 2px rgba(0, 0, 0, 0.5);
  color: #fff;
  font-family: var(--display);
  font-size: 0.76rem;
  font-weight: 900;
  text-align: center;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.7);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  transition: opacity 300ms ease, filter 300ms ease;
}

.deal-pill:nth-child(n + 13) {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.35), transparent 50%),
    linear-gradient(180deg, #3b8bff, #12347a);
}

.deal-pill.high {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.4), transparent 50%),
    linear-gradient(180deg, #ff5ad0, #a0107a);
}

.deal-pill.out {
  background: linear-gradient(180deg, #3a2a50, #1a1030);
  border-color: var(--gold-deep);
  color: rgba(255, 255, 255, 0.4);
  text-decoration: line-through;
}

.deal-boosts {
  min-height: 1.2em;
  color: var(--jade);
  font-family: var(--display);
  font-size: 0.85rem;
  font-weight: 900;
  text-align: center;
  text-shadow: 0 0 8px rgba(47, 212, 122, 0.6);
}

.deal-prompt {
  color: #fff;
  font-family: var(--display);
  font-size: 1.1rem;
  font-weight: 900;
  text-align: center;
  text-shadow: 0 2px 0 #000, 0 0 10px rgba(255, 90, 70, 0.8);
}

.deal-chests {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  /* Three across, eight shelves down, like the original board. */
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(8, minmax(0, 58px));
  align-content: center;
  gap: 2px 0;
  margin: 0 80px;
  padding: 4px 0;
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.15));
}

/* Each chest stands on a violet shelf. */
.deal-chest {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 1px;
  min-height: 0;
  padding: 2px 0 7px;
  background: linear-gradient(180deg, transparent calc(100% - 7px), #b8202e calc(100% - 7px), #6a0e1c calc(100% - 2px), #2a0408 calc(100% - 2px));
}

.deal-chest .chest {
  width: 44px;
  height: 34px;
}

.deal-chest:not(:disabled):active .chest {
  transform: scale(0.92);
}

.deal-chest-label {
  position: absolute;
  bottom: 17px;
  left: 50%;
  transform: translateX(-50%);
  min-width: 18px;
  padding: 0 3px;
  border-radius: 9px;
  background: rgba(40, 0, 10, 0.75);
  color: var(--gold-light);
  font-family: var(--display);
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 14px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.deal-chest:disabled {
  cursor: default;
}

/* The player's chest has moved to its stand; its place stays marked. */
.deal-chest.mine .deal-chest-label {
  background: none;
  color: var(--gold);
  bottom: 14px;
}

.deal-chest.mine:not(.opened) .chest {
  visibility: hidden;
}

/* The stand for the player's chest, under the board. */
.deal-mine {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0 auto;
  padding: 6px 22px 6px 16px;
  border-radius: 14px 14px 6px 6px;
  border: 2px solid var(--gold);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.25), transparent 50%),
    linear-gradient(180deg, #a020a0, #4a0a6a);
  box-shadow: 0 0 0 1px var(--gold-deep), 0 6px 0 #2a0638, 0 0 18px rgba(255, 79, 216, 0.45);
  visibility: hidden;
}

.deal-mine.show {
  visibility: visible;
}

.deal-mine .chest {
  width: 46px;
  height: 36px;
  box-shadow: 0 0 14px var(--gold), 0 2px 4px rgba(0, 0, 0, 0.5);
}

.deal-mine.arriving .chest {
  visibility: hidden;
}

.deal-mine.landed {
  animation: chest-pop 500ms cubic-bezier(0.2, 1.6, 0.4, 1);
}

.deal-mine.opened .chest {
  filter: brightness(1.4);
}

.deal-mine-text {
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: 0.06em;
}

.deal-mine-text strong {
  display: block;
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
}

.fly-chest.pick {
  z-index: 46;
  transform-origin: top left;
  box-shadow: 0 0 18px var(--gold), 0 0 34px #ff6a00;
}

/* Round card: a pagoda-roofed board over the chests. */
.deal-round {
  position: absolute;
  left: 50%;
  top: 54%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: min(78vw, 320px);
  padding: 30px 16px 18px;
  border-radius: 8px;
  border: 4px solid var(--red);
  outline: 3px solid var(--gold);
  background:
    repeating-linear-gradient(45deg, transparent 0 6px, rgba(255, 255, 255, 0.03) 6px 8px),
    linear-gradient(180deg, #0d5a2e, #06301a);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.7), 0 0 24px rgba(255, 211, 77, 0.4);
  text-align: center;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  pointer-events: none;
}

/* The roof. */
.deal-round::before {
  content: "";
  position: absolute;
  left: -18px;
  right: -18px;
  top: -24px;
  height: 30px;
  background:
    linear-gradient(var(--gold), var(--gold-dark)) bottom / 100% 4px no-repeat,
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.22) 0 2px, transparent 2px 9px),
    linear-gradient(180deg, #ff4a5e, var(--red-dark));
  clip-path: polygon(0 100%, 8% 30%, 30% 10%, 50% 0, 70% 10%, 92% 30%, 100% 100%);
}

/* A tapped chest rattles before it opens; the picked one glows first. */
.deal-chest.opening,
.deal-mine.opening .chest {
  animation: chest-rattle 110ms ease-in-out infinite alternate;
  filter: brightness(1.3);
}

.deal-chest.chosen {
  animation: chest-chosen 300ms ease-in-out infinite alternate;
}

/* The prize board flashes as a boost changes it. */
.deal-board.boosted {
  animation: board-boost 800ms ease-out;
}

.deal-intro.show {
  pointer-events: auto;
}

.deal-round.show {
  animation: deal-round 1800ms ease forwards;
}

.deal-round-title {
  position: relative;
  margin-top: -36px;
  margin-bottom: 8px;
  color: #b6ffd2;
  font-family: var(--display);
  font-size: 1.1rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-shadow: 0 0 8px var(--jade);
}

.deal-round-main {
  color: #fff;
  font-family: var(--display);
  font-size: clamp(1.8rem, 9vw, 2.4rem);
  font-weight: 900;
  line-height: 1.05;
  text-shadow: 0 3px 0 #000;
}

.deal-round-sub {
  font-size: 1.2rem;
  font-weight: 900;
  text-transform: uppercase;
}

.deal-chest.opened .chest {
  opacity: 0.3;
  background: linear-gradient(180deg, #555 0 40%, #222 40% 47%, #444 47%);
  border-color: #777;
}

.deal-chest.opened .deal-chest-label {
  bottom: 9px;
  background: rgba(0, 0, 0, 0.6);
  color: #ccc;
  font-size: 0.72rem;
}

.deal-chest.mine.opened .deal-chest-label {
  color: var(--gold);
  font-size: 0.85rem;
}

.deal-chest.popping {
  animation: chest-pop 500ms cubic-bezier(0.2, 1.6, 0.4, 1);
}

/* The dragon's offer: the chests sink away and a gold dragon rises in
   their place, holding a MY OFFER scroll over a sapphire plate. */
.deal-chests {
  transition: transform 450ms ease-in, opacity 450ms ease-in;
}

.deal.offering .deal-chests {
  transform: translateY(30%);
  opacity: 0;
  pointer-events: none;
}

.deal-dragon {
  position: absolute;
  inset: 0 76px;
  z-index: 2;
  container-type: size;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  visibility: hidden;
}

.deal.offering .deal-dragon {
  visibility: visible;
}

.deal-dragon-art {
  position: relative;
  z-index: -1;
  font-size: min(46cqh, 96cqw);
  line-height: 1;
  margin-bottom: -0.34em;
  filter: sepia(1) saturate(3.2) hue-rotate(-14deg) brightness(1.1)
    drop-shadow(0 0 2px #6a4400) drop-shadow(0 0 16px #ffb400) drop-shadow(0 0 34px rgba(255, 106, 0, 0.6));
  opacity: 0;
}

.deal.offering .deal-dragon-art {
  animation: offer-dragon-rise var(--rise, 1000ms) cubic-bezier(0.2, 1.2, 0.4, 1) forwards,
    dragon-bob 1600ms var(--rise, 1000ms) ease-in-out infinite alternate;
}

.deal-dragon-scroll {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  opacity: 0;
}

.deal.offering .deal-dragon-scroll {
  animation: offer-scroll-in calc(var(--rise, 1000ms) * 0.6) calc(var(--rise, 1000ms) * 0.4) cubic-bezier(0.2, 1.4, 0.4, 1) forwards;
}

/* A red ribbon with rolled ends, gripped by the dragon's claws. */
.deal-dragon-ribbon {
  position: relative;
  z-index: 1;
  padding: 4px 26px 5px;
  font-size: min(7cqh, 13cqw);
  font-weight: 900;
  letter-spacing: 0.08em;
  white-space: nowrap;
  background-color: var(--red);
  background-image: var(--gold-bevel), linear-gradient(180deg, #ff4a5e, var(--red) 50%, #7a0016);
  -webkit-background-clip: text, border-box;
  background-clip: text, border-box;
  clip-path: polygon(0 0, 100% 0, 92% 50%, 100% 100%, 0 100%, 8% 50%);
}

.deal-dragon-x {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 1.5em;
  margin-top: -4px;
  padding: 4px 6px 2px;
  border-radius: 0 0 14px 14px;
  border: 3px solid var(--gold);
  box-shadow: 0 0 0 2px var(--gold-deep), 0 8px 18px rgba(0, 0, 0, 0.6), inset 0 0 16px rgba(80, 140, 255, 0.5);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 45%),
    linear-gradient(180deg, #2440c0, #0a0e4a);
  color: #fff;
  font-family: var(--display);
  font-size: min(13cqh, 22cqw);
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 3px 0 #000, 0 0 14px rgba(120, 180, 255, 0.9);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.deal-dragon.boosted .deal-dragon-x {
  animation: offer-powered 900ms ease-out;
}

/* A gem boost: its name in big gold letters over a burst of light, with
   lightning out to both prize ladders. */
.deal-flash {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
}

.deal-flash.high {
  justify-content: flex-start;
  padding-top: 2%;
}

.deal-flash.show {
  visibility: visible;
  animation: deal-flash 2400ms ease forwards;
}

.deal-flash::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: -2;
  width: 130%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 220, 250, 0.9), rgba(255, 90, 210, 0.45) 22%, transparent 50%),
    repeating-conic-gradient(rgba(255, 120, 230, 0.45) 0 5deg, transparent 5deg 14deg);
  -webkit-mask-image: radial-gradient(circle, #000 15%, transparent 62%);
  mask-image: radial-gradient(circle, #000 15%, transparent 62%);
}

.deal-flash.show::before {
  animation: rays 5s linear infinite;
}

.deal-flash-name {
  width: min-content;
  max-width: 100%;
  font-size: clamp(2.8rem, 16vw, 4rem);
  font-weight: 900;
  font-style: italic;
  line-height: 0.95;
  text-align: center;
  filter: drop-shadow(0 2px 0 var(--gold-deep)) drop-shadow(0 4px 0 #6a0016) drop-shadow(0 0 14px rgba(255, 106, 0, 0.9));
}

.deal-flash.show .deal-flash-name {
  animation: flash-name 600ms cubic-bezier(0.2, 1.6, 0.4, 1);
}

.deal-flash-detail {
  color: #fff;
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 900;
  text-align: center;
  text-shadow: 0 2px 0 #000, 0 0 10px rgba(255, 90, 210, 0.9);
}

/* Each bolt runs from the middle out to a ladder. The glow sits on the
   wrapper because the bolts' clip-path would cut it off. */
.deal-bolts {
  position: absolute;
  inset: 0;
  z-index: -1;
  filter: drop-shadow(0 0 3px #fff6a0) drop-shadow(0 0 8px #ffd000);
}

.deal-bolt {
  position: absolute;
  left: 30px;
  top: 50%;
  width: calc(50% - 30px);
  height: 56px;
  margin-top: 8px;
  background: #fffbd0;
  clip-path: polygon(0 45%, 18% 15%, 30% 55%, 48% 5%, 60% 60%, 80% 20%, 100% 50%, 100% 60%, 80% 32%, 60% 74%, 48% 18%, 30% 68%, 18% 27%, 0 57%);
  animation: bolt-flicker 160ms steps(2) infinite;
}

.deal-bolt.right {
  left: auto;
  right: 30px;
  transform: scaleX(-1);
  animation-delay: -80ms;
}

/* The ladders light up top to bottom as a boost lands. */
.deal-board.boosted .deal-pill {
  animation: pill-flash 700ms ease calc(var(--i, 0) * 45ms) both;
}

/* Offer Boosted gems wait on your chest's stand. */
.deal-mine-gems {
  display: flex;
  gap: 3px;
}

.deal-mine-gems:empty {
  display: none;
}

.boost-gem {
  display: inline-block;
  width: 18px;
  height: 18px;
  background: radial-gradient(circle at 35% 30%, #fff 0 8%, #ffb8f0 18%, #ff3ad0 50%, #8a0a6a);
  clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
}

.fly-gem {
  position: fixed;
  z-index: 46;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
}

.float-text.deal-boost {
  color: #ff8ae4;
  font-size: 1rem;
}

.deal-bottom {
  flex: none;
  min-height: 132px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* Under the dragon: the offer worked out (multiple times base payout),
   then DEAL and NO DEAL. */
.deal-offer {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 6px 10px 10px;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent 40%),
    linear-gradient(180deg, #0d6a6a, #06302e);
  border: 3px solid var(--gold);
  box-shadow: 0 0 0 2px var(--gold-deep), 0 0 24px rgba(66, 230, 200, 0.3);
}

.deal-offer.show {
  display: flex;
  animation: offer-in 400ms cubic-bezier(0.2, 1.4, 0.4, 1);
}

.deal-offer-sum {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0 6px;
}

.deal-offer-part {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--gold-light);
  font-family: var(--display);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1.1;
  text-transform: uppercase;
}

.deal-offer-part strong {
  color: #fff;
  font-size: 1rem;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.deal-offer-amount {
  font-size: 1.9rem;
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  filter: drop-shadow(0 2px 0 var(--gold-deep)) drop-shadow(0 3px 1px #000) drop-shadow(0 0 12px rgba(255, 211, 77, 0.6));
}

.deal-buttons {
  display: flex;
  gap: 10px;
  width: 100%;
}

.deal-yes,
.deal-no,
.deal-collect {
  flex: 1;
  min-height: 56px;
  border-radius: 14px;
  border: 3px solid var(--gold);
  box-shadow: 0 0 0 1px var(--gold-deep), 0 4px 0 rgba(0, 0, 0, 0.6);
  color: #fff;
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5);
}

.deal-yes {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.4), transparent 50%),
    linear-gradient(180deg, #3adf6e, #128a3a 60%, #075a24);
}

.deal-no {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.35), transparent 50%),
    linear-gradient(180deg, #ff4a5e, var(--red) 60%, #6a0016);
}

.deal-collect {
  display: none;
  flex: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.45), transparent 50%),
    linear-gradient(180deg, var(--gold-light), var(--gold) 50%, var(--gold-dark));
  color: #3a1a00;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

.deal-collect.show {
  display: block;
}

/* Over the chests as the board is revealed after the intro: a hanging
   scroll on red lacquer rollers. */
.deal-scroll {
  position: absolute;
  left: 50%;
  top: 56%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 14px 34px;
  border: 3px solid var(--gold);
  border-left-width: 10px;
  border-right-width: 10px;
  border-radius: 6px;
  background:
    repeating-linear-gradient(90deg, transparent 0 10px, rgba(255, 211, 77, 0.12) 10px 12px),
    linear-gradient(180deg, #b0102a, #6a0016);
  box-shadow: 0 0 0 3px #6a0016, 0 10px 30px rgba(0, 0, 0, 0.7);
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  pointer-events: none;
}

.deal.intro .deal-scroll {
  animation: deal-scroll 2100ms ease forwards;
}

.deal-scroll-count {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-family: var(--display);
  font-size: 2.4rem;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 3px 0 #000;
}

.deal-scroll-count .chest {
  width: 44px;
  height: 34px;
}

.deal-scroll-pick {
  display: none;
  font-size: 1.9rem;
  font-weight: 900;
  line-height: 1.05;
  text-align: center;
}

.deal.pick .deal-scroll-count,
.deal.pick .deal-scroll-text {
  display: none;
}

.deal.pick .deal-scroll-pick {
  display: block;
}

.deal-scroll-text {
  font-size: 1.7rem;
  font-weight: 900;
  letter-spacing: 0.06em;
}

/* The chests drop onto the board one after another. */
.deal.intro .deal-chest {
  animation: chest-drop 450ms cubic-bezier(0.2, 1.5, 0.4, 1) backwards;
  animation-delay: calc(300ms + var(--i) * 25ms);
}

.deal.intro .deal-pill {
  animation: pill-in 400ms ease-out backwards;
  animation-delay: calc(200ms + var(--i) * 20ms);
}

/* ---------- Deal intro ---------- */

/* The dragon rises over the reels holding a sign. */
.deal-intro {
  position: fixed;
  inset: 0;
  z-index: 44;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(60% 45% at 50% 48%, rgba(255, 140, 0, 0.35), rgba(10, 0, 20, 0.65));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.deal-intro.show {
  visibility: visible;
  animation: intro-dim 300ms ease-out forwards;
}

.intro-dragon {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateY(30vh) scale(0.15);
}

.deal-intro.show .intro-dragon {
  animation: dragon-rise 650ms cubic-bezier(0.2, 1.3, 0.4, 1) forwards,
    dragon-bob 1400ms 650ms ease-in-out infinite alternate;
}

/* A gold dragon statue. */
.intro-dragon-art {
  font-size: min(42vw, 200px);
  line-height: 1;
  margin-bottom: -0.32em;
  filter: sepia(1) saturate(3.2) hue-rotate(-14deg) brightness(1.1)
    drop-shadow(0 0 2px #6a4400) drop-shadow(0 0 18px #ffb400) drop-shadow(0 0 40px rgba(255, 106, 0, 0.7));
}

/* The sign: a neon-framed violet board. */
.intro-sign {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: min(74vw, 320px);
  padding: 16px 14px 18px;
  border-radius: 12px;
  border: 4px solid var(--neon-cyan);
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(255, 255, 255, 0.14), transparent 70%),
    linear-gradient(180deg, #3a1a9a, #160a50);
  box-shadow: 0 0 0 3px #0a1a5a, 0 0 18px var(--neon-cyan), inset 0 0 14px rgba(66, 230, 255, 0.5), 0 12px 30px rgba(0, 0, 0, 0.6);
  text-align: center;
}

/* Gold claws gripping the sign's corners. */
.intro-sign::before,
.intro-sign::after {
  content: "";
  position: absolute;
  top: -10px;
  width: 22px;
  height: 22px;
  border-radius: 50% 50% 40% 40%;
  background: radial-gradient(circle at 40% 35%, var(--gold-light), var(--gold) 50%, var(--gold-dark));
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.intro-sign::before { left: -10px; }
.intro-sign::after { right: -10px; }

.intro-sign-title {
  font-size: clamp(1.4rem, 7.5vw, 2rem);
  font-weight: 900;
  font-style: italic;
  line-height: 1.05;
  background-image: linear-gradient(180deg, #ffe0fa, #ff6ad5 50%, #c01a9a 56%, #ffa0e8);
  filter: drop-shadow(0 2px 0 #3a0030) drop-shadow(0 0 8px rgba(255, 79, 216, 0.7));
}

.intro-sign-text {
  color: #fff;
  font-family: var(--display);
  font-size: clamp(1.3rem, 7vw, 1.8rem);
  font-weight: 900;
  line-height: 1.1;
  text-shadow: 0 3px 0 #0a0630, 0 0 12px rgba(66, 230, 255, 0.6);
}

/* Temple doors close over everything, flash, then open on the board. */
.deal-doors {
  position: fixed;
  inset: 0;
  z-index: 47;
  display: flex;
  pointer-events: none;
  visibility: hidden;
}

.deal-doors.closed,
.deal-doors.opening {
  visibility: visible;
  pointer-events: auto;
}

.door {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.25), transparent 60%),
    radial-gradient(circle at 50% 40%, transparent 6px, rgba(150, 90, 0, 0.35) 7px, transparent 9px) 0 0 / 22px 22px,
    linear-gradient(180deg, #ffe27a, #e0a820 45%, #b8860b);
  transform: translateX(var(--open));
}

.door.left { --open: -100%; }
.door.right { --open: 100%; }

/* The pillar where the two doors meet. */
.door::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 18px;
  background:
    repeating-linear-gradient(180deg, transparent 0 14px, rgba(122, 26, 0, 0.5) 14px 17px),
    linear-gradient(90deg, #b8860b, #fff1a8, #b8860b);
}

.door.left::after { right: 0; }
.door.right::after { left: 0; }

.door-relief {
  font-size: min(48vw, 260px);
  filter: sepia(1) saturate(3) hue-rotate(-12deg) brightness(1.05) drop-shadow(0 3px 0 rgba(122, 60, 0, 0.6));
  opacity: 0.85;
}

.door.left .door-relief {
  transform: scaleX(-1);
}

.deal-doors.closed .door {
  animation: door-close 320ms cubic-bezier(0.5, 0, 0.9, 1) forwards,
    door-flash 600ms 330ms ease-in-out;
}

.deal-doors.opening .door {
  animation: door-open 650ms cubic-bezier(0.4, 0, 0.6, 1) forwards;
}

.float-text.deal-low {
  color: var(--jade);
}

.float-text.deal-high {
  color: var(--ruby);
}

.league-button {
  position: relative;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 58px;
  border-radius: 12px;
  line-height: 1.1;
}

.league-icon {
  font-size: 1.3rem;
}

.league-rank {
  color: var(--gold-light);
  font-family: var(--display);
  font-size: 0.8rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 0 #0a1a5a;
}

.league-button.up .league-rank { color: #7affb0; }
.league-button.down .league-rank { color: #ff8a96; }

/* ---------- League sheet ---------- */

.league-tiers {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 4px 0 6px;
}

.league-tier {
  font-size: 1.3rem;
  opacity: 0.35;
  filter: grayscale(1);
}

.league-tier.passed {
  opacity: 0.7;
  filter: none;
}

.league-tier.current {
  opacity: 1;
  filter: drop-shadow(0 0 6px var(--gold));
  transform: scale(1.35);
}

.league-info {
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 0.8rem;
  text-align: center;
}

.league-result {
  margin-bottom: 8px;
  padding: 8px 12px;
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.35);
  border: 2px solid var(--gold-dark);
  font-size: 0.85rem;
  text-align: center;
}

.league-result.up { border-color: var(--jade); }
.league-result.down { border-color: var(--ruby); }

.league-result[hidden] {
  display: none;
}

.league-list {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding: 2px 2px 8px;
  list-style: none;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

.league-row {
  display: grid;
  grid-template-columns: 2.2em 1.8em 1fr auto;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 4px 10px;
  border-radius: 10px;
  font-variant-numeric: tabular-nums;
}

.league-row:nth-child(odd) {
  background: rgba(0, 0, 0, 0.25);
}

.league-row.up .league-place { color: var(--jade); }
.league-row.down .league-place { color: var(--ruby); }

.league-row.cut-up {
  border-bottom: 2px dashed var(--jade);
  border-radius: 10px 10px 0 0;
}

.league-row.cut-down {
  border-top: 2px dashed var(--ruby);
  border-radius: 0 0 10px 10px;
}

.league-row.you {
  background: linear-gradient(90deg, rgba(255, 211, 77, 0.35), rgba(255, 211, 77, 0.12));
  box-shadow: inset 0 0 0 2px var(--gold);
  font-weight: 900;
}

.league-place {
  color: var(--muted);
  font-family: var(--display);
  font-weight: 900;
  text-align: right;
}

.league-avatar {
  font-size: 1.3rem;
  text-align: center;
}

.league-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.league-score {
  color: var(--gold);
  font-family: var(--display);
  font-weight: 900;
}

/* ---------- Coin shop ---------- */

/* A jade "+" on the credits, like a store button set into the bar. */
.shop-button {
  flex: none;
  width: 34px;
  height: 34px;
  margin-left: 2px;
  border-radius: 50%;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.45), transparent 50%),
    linear-gradient(180deg, #3adf6e, #128a3a 60%, #075a24);
  border: 2px solid var(--gold);
  box-shadow: 0 0 0 1px var(--gold-deep), 0 0 8px rgba(47, 212, 122, 0.6);
  color: #fff;
  font-size: 1.3rem;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 1px 0 #054018;
}

.shop-button:active {
  transform: scale(0.92);
}

.pack-list {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 10px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  padding: 12px 2px 8px;
}

/* Each pack is a treasure plaque: a sapphire-dark panel in a gold bevel
   with its picture on a glowing medallion and a jade price button. */
.pack {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 12px 8px 10px;
  border-radius: 12px;
  background:
    radial-gradient(70% 45% at 50% 22%, rgba(255, 211, 77, 0.35), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent 40%),
    linear-gradient(180deg, #221a5e, #0a0828);
  border: 2px solid var(--gold);
  box-shadow: 0 0 0 1px var(--gold-deep), 0 3px 6px rgba(0, 0, 0, 0.5);
  transition: transform 80ms ease;
}

.pack:active {
  transform: scale(0.97);
}

/* The ribbon over a featured pack. */
.pack-tag {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  padding: 2px 14px 3px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.3), transparent 50%),
    linear-gradient(180deg, #ff4a5e, var(--red) 50%, #7a0016);
  clip-path: polygon(0 0, 100% 0, 92% 50%, 100% 100%, 0 100%, 8% 50%);
  color: var(--gold-light);
  font-family: var(--display);
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  white-space: nowrap;
  text-shadow: 0 1px 0 #4a000c;
}

.pack-icon {
  font-size: 2.3rem;
  line-height: 1.1;
  filter: drop-shadow(0 0 8px rgba(255, 190, 40, 0.7));
}

.pack-name {
  color: #fff;
  font-family: var(--display);
  font-size: 0.9rem;
  font-weight: 800;
  text-align: center;
}

.pack-coins {
  color: var(--gold);
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 6px rgba(255, 211, 77, 0.5);
}

.pack-price {
  margin-top: 4px;
  min-width: 80%;
  padding: 7px 0;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.4), transparent 50%),
    linear-gradient(180deg, #3adf6e, #128a3a 60%, #075a24);
  border: 1px solid var(--gold);
  color: #fff;
  font-family: var(--display);
  font-weight: 900;
  text-shadow: 0 1px 0 #054018;
}


/* ---------- Pretend checkout (wallet-style payment sheet) ---------- */

.pay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0, 0, 0, 0);
  pointer-events: none;
  transition: background 220ms ease;
  font-family: -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
}

.pay.open {
  background: rgba(0, 0, 0, 0.45);
  pointer-events: auto;
}

.pay-panel {
  width: 100%;
  max-width: 520px;
  padding: 14px 16px calc(var(--safe-bottom) + 14px);
  border-radius: 14px 14px 0 0;
  background: #1c1c1e;
  color: #fff;
  transform: translateY(105%);
  transition: transform 300ms cubic-bezier(0.2, 0.9, 0.3, 1);
}

.pay.open .pay-panel {
  transform: translateY(0);
}

.pay-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.pay-mark {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 1.45rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.pay-mark-icon {
  font-size: 1.1rem;
}

.pay-cancel {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #2c2c2e;
  color: #98989f;
  font-size: 0.85rem;
  font-weight: 700;
}

.pay-product {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 4px 12px;
  border-bottom: 1px solid #38383a;
}

.pay-app-icon {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: linear-gradient(180deg, #c8102e, #5a0012);
  font-size: 1.9rem;
  line-height: 52px;
  text-align: center;
}

.pay-product-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.pay-product-name {
  font-weight: 600;
}

.pay-product-coins {
  color: rgba(235, 235, 245, 0.6);
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}

.pay-product-kind {
  color: #8e8e93;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.pay-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 4px;
  border-bottom: 1px solid #38383a;
}

.pay-card-art {
  flex: none;
  width: 46px;
  height: 30px;
  border-radius: 5px;
  background: linear-gradient(135deg, var(--gold-light), var(--gold) 45%, var(--gold-dark));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
}

.pay-card-text {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.pay-card-name {
  font-weight: 500;
}

.pay-card-number {
  color: #8e8e93;
  font-size: 0.85rem;
}

.pay-chevron {
  color: #5a5a5f;
  font-size: 1.6rem;
  line-height: 1;
}

.pay-total-row {
  justify-content: space-between;
  border-bottom: none;
}

.pay-merchant {
  color: rgba(235, 235, 245, 0.6);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.pay-price {
  font-size: 1.6rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.pay-confirm {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 96px;
  margin-top: 4px;
  color: #fff;
}

.pay-confirm.nudge .pay-ready {
  animation: pay-nudge 400ms ease;
}

.pay-state {
  grid-area: 1 / 1;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
}

.pay.ready .pay-ready,
.pay.busy .pay-busy,
.pay.done .pay-done {
  display: flex;
}

/* A phone outline with its side button lit, as on a real wallet sheet. */
.pay-side-icon {
  position: relative;
  width: 28px;
  height: 46px;
  border: 2.5px solid #fff;
  border-radius: 7px;
}

.pay-side-icon::after {
  content: "";
  position: absolute;
  top: 8px;
  right: -7px;
  width: 4px;
  height: 12px;
  border-radius: 2px;
  background: #0a84ff;
  animation: pay-blink 1s ease-in-out infinite;
}

.pay-spinner {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 4px solid #3a3a3c;
  border-top-color: #0a84ff;
  animation: pay-spin 0.8s linear infinite;
}

.pay-check {
  position: relative;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 3px solid #0a84ff;
  animation: pay-pop 300ms ease-out;
}

.pay-check::after {
  content: "";
  position: absolute;
  left: 13px;
  top: 6px;
  width: 11px;
  height: 21px;
  border: solid #0a84ff;
  border-width: 0 3.5px 3.5px 0;
  transform: rotate(45deg);
}

.pay-done {
  color: #0a84ff;
  font-weight: 600;
}


/* "Double Click to Pay" beside the phone's side button, top right. */
.pay-side {
  position: fixed;
  top: calc(var(--safe-top) + 90px);
  right: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0 8px 14px;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  text-align: right;
  line-height: 1.2;
  opacity: 0;
  transition: opacity 200ms ease;
  cursor: pointer;
}

.pay.ready .pay-side {
  opacity: 1;
  animation: pay-side 1.2s ease-in-out infinite;
}

.pay-side-bar {
  width: 6px;
  height: 64px;
  border-radius: 3px 0 0 3px;
  background: #fff;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.9);
}

/* ---------- Fortune Pearls ---------- */

/* Pearl colours, set by tier class on a pearl or anything showing one.
   Each pearl is a glossy sphere: a highlight, a coloured
   body and a darker rim, with a halo for the rarer ones. */
.moon      { --p: #e8eef8; --p-light: #ffffff; --p-dark: #7d8aa6; --p-glow: rgba(220, 230, 255, 0.5); }
.lotus     { --p: #ff9ccf; --p-light: #fff0f8; --p-dark: #a8336f; --p-glow: rgba(255, 140, 200, 0.6); }
.storm     { --p: #a77bff; --p-light: #efe4ff; --p-dark: #3f1a99; --p-glow: rgba(160, 110, 255, 0.75); }
.sun       { --p: #ffc93a; --p-light: #fffbe0; --p-dark: #b25a00; --p-glow: rgba(255, 190, 40, 0.85); }
.celestial { --p: #7af2ff; --p-light: #ffffff; --p-dark: #3a2aa8; --p-glow: rgba(140, 240, 255, 0.95); }

.pearl {
  position: relative;
  display: inline-block;
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, var(--p-light) 0 12%, transparent 30%),
    radial-gradient(circle at 60% 70%, transparent 40%, rgba(0, 0, 0, 0.25) 75%),
    radial-gradient(circle at 40% 35%, var(--p-light), var(--p) 45%, var(--p-dark));
  box-shadow: 0 0 8px var(--p-glow), inset 0 -2px 4px rgba(0, 0, 0, 0.3);
}

/* The rarest pearl swirls with colour. */
.pearl.celestial {
  background:
    radial-gradient(circle at 32% 28%, #fff 0 12%, transparent 30%),
    radial-gradient(circle at 60% 70%, transparent 40%, rgba(20, 0, 60, 0.35) 78%),
    conic-gradient(from 0deg, #ff7ad9, #ffd36a, #7affb0, #7af2ff, #b07aff, #ff7ad9);
}

/* The pouch in the top bar: a pearl and how many are held. */
.pearl-button {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  gap: 5px;
  height: 36px;
  padding: 0 10px 0 6px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6);
}

.pearl-button .pearl {
  width: 22px;
  height: 22px;
}

.pearl-count {
  color: var(--text);
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.pearl-fever {
  position: absolute;
  top: -6px;
  right: -6px;
  font-size: 0.85rem;
  filter: drop-shadow(0 0 4px #ff6a00);
}

.pearl-fever[hidden] {
  display: none;
}

.pearl-button.landed .pearl {
  animation: pearl-land 450ms ease-out;
}

.pearl-button:active {
  transform: scale(0.95);
}

/* League Fever: the league button smoulders. */
.league-button.fever {
  box-shadow: 0 0 0 1px var(--gold-deep), 0 0 14px #ff6a00, 0 4px 0 rgba(0, 0, 0, 0.6);
}

.fly-pearl {
  position: fixed;
  z-index: 16;
}

.float-text.pearl-drop {
  font-size: 1.6rem;
  animation-duration: 1400ms;
}

.float-text.pearl-drop.lotus { color: #ffb8de; }
.float-text.pearl-drop.storm { color: #c9a8ff; }
.float-text.pearl-drop.sun { color: var(--gold); }
.float-text.pearl-drop.celestial { color: #b8fbff; font-size: 2rem; }

.income-line,
.pearl-hint,
.pearl-odds,
.shop-bonus {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 0.8rem;
  text-align: center;
}

.shop-bonus {
  padding: 6px 10px;
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.35);
  border: 2px solid var(--jade);
  color: var(--text);
  font-weight: 700;
}

.shop-bonus[hidden] {
  display: none;
}

.pearl-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 10px;
}

/* Each tier sits on a dark velvet cushion in a gold bevel. */
.pearl-tile {
  width: calc((100% - 16px) / 3);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 4px 8px;
  border-radius: var(--radius);
  background:
    radial-gradient(60% 50% at 50% 35%, rgba(255, 255, 255, 0.08), transparent 70%),
    linear-gradient(180deg, #2a1a6a, var(--navy-deep));
  border: 2px solid var(--gold-dark);
  box-shadow: 0 0 0 1px var(--gold-deep), 0 3px 0 rgba(0, 0, 0, 0.5);
}

.pearl-tile .pearl {
  width: 46px;
  height: 46px;
}

.pearl-tile:not(:disabled) .pearl {
  animation: pearl-bob 2.4s ease-in-out infinite;
}

.pearl-tile:active:not(:disabled) {
  transform: scale(0.96);
}

.pearl-tile:disabled {
  opacity: 0.4;
  filter: grayscale(0.6);
}

.pearl-tile-name {
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
}

.pearl-tile-count {
  color: var(--gold);
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 900;
}

/* Opens every pearl in the pouch at once. */
.pearl-open-all {
  display: block;
  width: 100%;
  min-height: 46px;
  margin-bottom: 10px;
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.45), transparent 50%),
    linear-gradient(180deg, var(--gold-light), var(--gold) 50%, var(--gold-dark));
  border: 2px solid var(--gold-light);
  box-shadow: 0 0 0 1px var(--gold-deep), 0 3px 0 rgba(0, 0, 0, 0.55);
  color: #3a1a00;
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

.pearl-open-all:active:not(:disabled) {
  transform: translateY(2px);
  box-shadow: 0 0 0 1px var(--gold-deep), 0 1px 0 rgba(0, 0, 0, 0.55);
}

.pearl-open-all:disabled {
  opacity: 0.4;
  filter: grayscale(0.7);
}

.pearl-boosts {
  margin-bottom: 10px;
  padding: 8px 12px;
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.35);
  border: 2px solid var(--gold-dark);
  font-size: 0.85rem;
  line-height: 1.5;
  text-align: center;
  white-space: pre-line;
}

/* Opening a pearl: a dark stage with turning rays, the pearl wobbles,
   bursts open, and its prizes appear one by one. */
.pearl-open {
  position: fixed;
  inset: 0;
  z-index: 48;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: calc(var(--safe-top) + 12px) 20px calc(var(--safe-bottom) + 20px);
  background: radial-gradient(circle at 50% 42%, rgba(110, 14, 40, 0.92), rgba(20, 0, 6, 0.96) 70%);
  overflow: hidden;
}

.pearl-open.show {
  display: flex;
}

.pearl-open-rays {
  position: absolute;
  left: 50%;
  top: 42%;
  width: 160vmax;
  height: 160vmax;
  margin: -80vmax 0 0 -80vmax;
  background: repeating-conic-gradient(rgba(255, 230, 160, 0.16) 0 6deg, transparent 6deg 16deg);
  -webkit-mask-image: radial-gradient(circle, #000 8%, transparent 45%);
  mask-image: radial-gradient(circle, #000 8%, transparent 45%);
  opacity: 0;
  transition: opacity 400ms ease;
  animation: rays 12s linear infinite;
  pointer-events: none;
}

.pearl-open.burst .pearl-open-rays {
  opacity: 1;
}

.pearl-open-name {
  position: relative;
  font-family: var(--display);
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background-image: var(--gold-bevel);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 0 var(--gold-deep)) drop-shadow(0 0 12px rgba(255, 106, 0, 0.6));
}

.pearl-open-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 200px;
  transition: height 400ms ease;
}

/* Once open, the shell sits small above its prizes. */
.pearl-open.burst .pearl-open-stage {
  height: 110px;
}

.pearl.big {
  width: 150px;
  height: 150px;
  box-shadow: inset 0 -8px 16px rgba(0, 0, 0, 0.3);
}

/* The pearl's halo stays still behind it while it wobbles. */
.pearl-open-stage::before {
  content: "";
  position: absolute;
  inset: -30px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--p-glow) 30%, transparent 68%);
}

.pearl-open.shaking .pearl.big {
  animation: pearl-shake 1300ms ease-in forwards;
}

/* The pearl splits into a flash of light. */
.pearl-open.burst .pearl.big {
  animation: pearl-burst 500ms ease-out forwards;
}

.pearl-open.burst .pearl-open-stage::after {
  content: "";
  position: absolute;
  inset: -40px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff, rgba(255, 240, 180, 0.6) 30%, transparent 65%);
  animation: pearl-flash 700ms ease-out forwards;
}

.pearl-prizes {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 360px;
  min-height: 120px;
}

.pearl-prize {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, #2a1a6a, var(--navy-deep));
  border: 2px solid var(--gold-dark);
  box-shadow: 0 0 0 1px var(--gold-deep);
  font-size: 0.9rem;
  font-weight: 700;
  animation: pearl-prize 300ms ease-out;
}

.pearl-prize.coins {
  border-color: var(--gold);
  font-family: var(--display);
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--gold-light);
}

.pearl-prize-icon {
  flex: none;
  font-size: 1.4rem;
}

.pearl-collect {
  position: relative;
  display: block;
  width: 100%;
  max-width: 360px;
  visibility: hidden;
}

.pearl-open.done .pearl-collect {
  visibility: visible;
}

/* Opening them all: a smaller shell, and a list of what each pearl paid
   that scrolls when the pouch was full. */
.pearl-open.all {
  gap: 12px;
}

.pearl-open.all .pearl-open-name {
  font-size: 1.7rem;
}

.pearl-open.all.burst .pearl-open-stage {
  height: 70px;
}

.pearl-open.all .pearl-prizes {
  flex: 0 1 auto;
  min-height: 0;
  gap: 5px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.pearl-prize.each {
  flex: none;
  gap: 8px;
  padding: 4px 10px;
  font-size: 0.85rem;
}

.pearl-prize.each .pearl {
  flex: none;
  width: 22px;
  height: 22px;
}

.pearl-prize.each .pearl-prize-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pearl-prize-amount {
  flex: none;
  color: var(--gold-light);
  font-family: var(--display);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  white-space: pre;
}

.pearl-prize.coins,
.pearl-open.all .pearl-prize:not(.each) {
  flex: none;
}

/* ---------- Level bar and the wheel button ---------- */

.level-row {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 5px 2px 0;
}

.level {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  min-width: 0;
  height: 28px;
}

/* A gold star with the level number on it. */
.level-star {
  position: relative;
  z-index: 1;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-right: -14px;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  background:
    radial-gradient(circle at 40% 30%, var(--gold-light), var(--gold) 45%, var(--gold-dark) 80%);
  filter: drop-shadow(0 0 4px rgba(255, 211, 77, 0.8));
  color: #4a2a00;
  font-family: var(--display);
  font-size: 0.74rem;
  letter-spacing: -0.03em;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.level-star > span {
  margin-top: 3px;
}

.level-star.long {
  font-size: 0.58rem;
}

.level-bar {
  position: relative;
  flex: 1;
  height: 16px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  border: 2px solid var(--gold-dark);
  box-shadow: 0 0 0 1px var(--gold-deep), inset 0 2px 3px rgba(0, 0, 0, 0.6);
}

.level-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.5), transparent 55%),
    linear-gradient(90deg, #b0128a, var(--neon-pink) 70%, #ffb0f0);
  box-shadow: 0 0 8px var(--neon-pink);
  transition: width 400ms ease-out;
}

.level-text {
  position: absolute;
  left: 30px;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  color: #fff;
  font-family: var(--display);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 2px #000, 0 0 3px #000;
  pointer-events: none;
}

.wheel-button {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  min-width: 88px;
  padding: 0 10px 0 3px;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent 50%),
    linear-gradient(180deg, #2a2470, var(--navy-deep));
  border: 2px solid var(--gold-dark);
  box-shadow: 0 0 0 1px var(--gold-deep);
  color: var(--muted);
  font-family: var(--display);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.wheel-button.ready {
  border-color: var(--gold);
  color: var(--gold-light);
  animation: wheel-ready 1.6s ease-in-out infinite;
}

/* The red dot on a wheel that's ready to spin. */
.wheel-button.ready::after {
  content: "";
  position: absolute;
  top: -4px;
  right: -3px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--ruby);
  border: 2px solid #fff;
}

/* A small wheel: coloured wedges round a gold hub. */
.wheel-icon {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background:
    radial-gradient(circle, var(--gold) 0 18%, transparent 20%),
    conic-gradient(#d4132f 0 45deg, #5a1a8c 45deg 90deg, #1a3ab0 90deg 135deg, #0b7a3e 135deg 180deg,
      #d4132f 180deg 225deg, #5a1a8c 225deg 270deg, #1a3ab0 270deg 315deg, #e0a01a 315deg 360deg);
  border: 2px solid var(--gold);
}

.wheel-button.ready .wheel-icon {
  animation: wheel-icon-spin 4s linear infinite;
}

.bet-step.locked {
  position: relative;
  opacity: 0.75;
}

.bet-step.locked::after {
  content: "🔒";
  position: absolute;
  right: -5px;
  bottom: -5px;
  font-size: 0.8rem;
}

/* ---------- Daily Fortune Wheel ---------- */

.wheel {
  position: fixed;
  inset: 0;
  z-index: 46;
  display: none;
  align-items: center;
  justify-content: center;
  padding: calc(var(--safe-top) + 8px) 16px calc(var(--safe-bottom) + 12px);
  background: radial-gradient(circle at 50% 45%, rgba(122, 16, 32, 0.94), rgba(20, 0, 6, 0.97) 70%);
}

.wheel.open {
  display: flex;
}

.wheel-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 400px;
  max-height: 100%;
}

.wheel-title {
  font-family: var(--display);
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background-image: var(--gold-bevel);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 0 var(--gold-deep)) drop-shadow(0 0 12px rgba(255, 106, 0, 0.6));
}

/* The streak: a row of days, each with its prize multiplier. */
.wheel-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  width: 100%;
}

.wheel-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 3px 0;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid var(--gold-deep);
  color: var(--muted);
  font-family: var(--display);
  font-weight: 900;
  line-height: 1.15;
}

.wheel-day-name {
  font-size: 0.55rem;
  letter-spacing: 0.04em;
}

.wheel-day-mult {
  font-size: 0.85rem;
}

.wheel-day.done {
  background: linear-gradient(180deg, #3adf6e, #0b7a3e);
  border-color: var(--gold);
  color: #fff;
}

.wheel-day.today {
  border: 2px solid var(--gold-light);
  box-shadow: 0 0 8px var(--gold);
  color: var(--gold-light);
}

.wheel-day:last-child .wheel-day-mult {
  color: var(--gold);
}

.wheel-day.done:last-child .wheel-day-mult {
  color: var(--gold-light);
}

.wheel-streak {
  min-height: 1.2em;
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 700;
  text-align: center;
}

.wheel-stage {
  position: relative;
  width: min(84vw, 320px, 42vh);
  aspect-ratio: 1;
  margin: 8px 0 4px;
}

/* Lamps round the rim, glowing gold. */
.wheel-lights {
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 63%, #6a0a1a 64%, #b0122a 70%, var(--gold-dark) 71%, var(--gold) 73%, var(--gold-deep) 76%, transparent 77%);
  box-shadow: 0 0 24px rgba(255, 180, 60, 0.45);
}

.wheel-lights::before {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, #fff6c0 0 2.5deg, transparent 2.5deg 15deg);
  -webkit-mask-image: radial-gradient(circle, transparent 67%, #000 68%, #000 71%, transparent 72%);
  mask-image: radial-gradient(circle, transparent 67%, #000 68%, #000 71%, transparent 72%);
  filter: drop-shadow(0 0 3px #ffd34d);
  animation: blink 900ms steps(1) infinite;
}

.wheel-disc {
  position: absolute;
  inset: 4%;
  border-radius: 50%;
  border: 3px solid var(--gold);
  box-shadow: inset 0 0 0 2px var(--gold-deep), inset 0 0 18px rgba(0, 0, 0, 0.6);
  will-change: transform;
}

/* Each prize sits along its wedge, reading outwards from the hub. */
.wheel-label {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.wheel-label-inner {
  position: absolute;
  left: 50%;
  top: 5%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 25%;
  margin-left: -12.5%;
  color: #fff;
  font-family: var(--display);
  font-size: clamp(0.72rem, 3.6vw, 0.95rem);
  font-weight: 900;
  line-height: 1;
  text-align: center;
  text-shadow: 0 1px 0 #000, 0 0 4px rgba(0, 0, 0, 0.8);
}

.wheel-label-text {
  white-space: nowrap;
}

.wheel-label.grand .wheel-label-inner {
  color: #4a1a00;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}

.wheel-label.grand .wheel-label-inner::before {
  content: "GRAND";
  font-size: 0.55rem;
  letter-spacing: 0.06em;
}

.wheel-label.prize-pearl .wheel-label-text {
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.wheel-label .pearl {
  width: 20px;
  height: 20px;
}

.wheel-label.hit .wheel-label-inner {
  animation: wheel-hit 600ms ease-in-out infinite alternate;
}

/* The pointer: a red and gold flag at the top, pointing in. */
.wheel-pointer {
  position: absolute;
  left: 50%;
  top: -18px;
  z-index: 1;
  width: 30px;
  height: 40px;
  margin-left: -15px;
  clip-path: polygon(0 0, 100% 0, 100% 55%, 50% 100%, 0 55%);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.5), transparent 40%),
    linear-gradient(180deg, var(--ruby), var(--red-dark));
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.6));
  transform-origin: 50% 0;
}

.wheel-pointer::before {
  content: "";
  position: absolute;
  inset: 3px 3px auto;
  height: 6px;
  border-radius: 3px;
  background: var(--gold);
}

.wheel.tick .wheel-pointer {
  animation: wheel-tick 120ms ease-out;
}

.wheel-hub {
  position: absolute;
  left: 50%;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22%;
  height: 22%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 40% 30%, var(--gold-light), var(--gold) 45%, var(--gold-dark));
  border: 3px solid var(--gold-deep);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6), inset 0 -3px 6px rgba(0, 0, 0, 0.3);
  color: var(--red);
  font-size: 1.7rem;
  font-weight: 900;
}

.wheel-prize {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  font-family: var(--display);
  font-size: 1.8rem;
  font-weight: 900;
  color: var(--gold-light);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.6), 0 0 12px rgba(255, 180, 60, 0.7);
}

.wheel-prize:not(:empty) {
  animation: pearl-prize 300ms ease-out;
}

.wheel-prize .pearl {
  width: 32px;
  height: 32px;
}

.wheel-prize-streak {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--red);
  border: 1px solid var(--gold);
  color: #fff;
  font-size: 0.85rem;
  text-shadow: none;
}

.wheel-go {
  width: 100%;
  min-height: 58px;
  border-radius: 14px;
  border: 3px solid var(--gold);
  box-shadow: 0 0 0 1px var(--gold-deep), 0 4px 0 rgba(0, 0, 0, 0.6);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.4), transparent 50%),
    linear-gradient(180deg, #3adf6e, #128a3a 60%, #075a24);
  color: #fff;
  font-family: var(--display);
  font-size: 1.4rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5);
}

.wheel-go:disabled {
  background: linear-gradient(180deg, #2a2470, var(--navy-deep));
  border-color: var(--gold-dark);
  color: var(--muted);
  font-size: 1rem;
}

.wheel.won .wheel-go {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.45), transparent 50%),
    linear-gradient(180deg, var(--gold-light), var(--gold) 50%, var(--gold-dark));
  color: #3a1a00;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

.wheel .sheet-close {
  width: 100%;
  margin-top: 0;
}

.wheel .sheet-close:disabled {
  opacity: 0.5;
}

/* ---------- Level up ---------- */

.level-up {
  position: fixed;
  inset: 0;
  z-index: 48;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: calc(var(--safe-top) + 12px) 20px calc(var(--safe-bottom) + 20px);
  background: radial-gradient(circle at 50% 42%, rgba(200, 40, 60, 0.9), rgba(20, 0, 6, 0.96) 70%);
  overflow: hidden;
}

.level-up.show {
  display: flex;
}

.level-up .pearl-open-rays {
  opacity: 0.7;
}

.level-up-title {
  position: relative;
  font-family: var(--display);
  font-size: 2.6rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  background-image: var(--gold-bevel);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 0 var(--gold-deep)) drop-shadow(0 0 14px rgba(255, 106, 220, 0.8));
  animation: level-title 600ms cubic-bezier(0.2, 1.6, 0.4, 1);
}

.level-up-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 180px;
  height: 170px;
}

.level-up-stage::before {
  content: "";
  position: absolute;
  inset: -30px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 211, 77, 0.6) 25%, transparent 68%);
}

.level-star.big {
  width: 170px;
  height: 170px;
  margin: 0;
  font-size: 3.4rem;
  filter: drop-shadow(0 0 16px rgba(255, 211, 77, 0.9));
  animation: level-star 900ms cubic-bezier(0.2, 1.5, 0.4, 1);
}

.level-star.big > span {
  margin-top: 16px;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.5);
}

.pearl-prize .pearl {
  width: 28px;
  height: 28px;
}

.pearl-prize.unlock {
  border-color: var(--jade);
  color: #c4ffdc;
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 900;
}

.level-up.done .pearl-collect {
  visibility: visible;
}

/* ---------- Lucky Lantern ---------- */

/* Its button sits beside the wheel's and shares its look. */
.lantern-button {
  min-width: 84px;
}

.lantern-icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  font-size: 1.05rem;
  line-height: 1;
  transform-origin: 50% 0;
}

.lantern-button:not(.ready) .lantern-icon {
  filter: grayscale(0.7) brightness(0.7);
}

.lantern-button.ready .lantern-icon {
  animation: lantern-swing 2.4s ease-in-out infinite;
}

.lantern-up {
  background: radial-gradient(circle at 50% 42%, rgba(230, 40, 30, 0.9), rgba(20, 0, 4, 0.96) 70%);
}

.lantern-title {
  font-size: 2.1rem;
  white-space: nowrap;
  filter: drop-shadow(0 2px 0 var(--gold-deep)) drop-shadow(0 0 14px rgba(255, 120, 60, 0.85));
}

.lantern-big {
  position: relative;
  font-size: 8rem;
  line-height: 1;
  transform-origin: 50% 0;
  filter: drop-shadow(0 0 22px rgba(255, 170, 60, 0.95));
  animation: lantern-drop 900ms cubic-bezier(0.2, 1.5, 0.4, 1), lantern-swing 2.4s ease-in-out 900ms infinite;
}

.lantern-next {
  margin: 0;
  color: var(--gold-light);
  font-size: 0.95rem;
  font-weight: 700;
  text-shadow: 0 1px 2px #000;
}

/* ---------- Effects ---------- */

.fx-layer {
  position: fixed;
  inset: 0;
  z-index: 45;
  overflow: hidden;
  pointer-events: none;
}

.fly-orb {
  position: fixed;
  z-index: 16;
  transform-origin: top left;
}

.float-text {
  position: fixed;
  transform: translate(-50%, -50%);
  color: var(--gold);
  font-family: var(--display);
  font-size: 1.3rem;
  font-weight: 900;
  text-shadow: 0 0 8px rgba(255, 211, 77, 0.8), 0 2px 4px rgba(0, 0, 0, 0.8);
  white-space: nowrap;
  animation: float-up 800ms ease-out forwards;
}

.beam {
  position: fixed;
  width: 6px;
  margin-left: -3px;
  transform-origin: top center;
  border-radius: 3px;
  background: linear-gradient(180deg, #fff, var(--gold) 30%, #ff6a00);
  box-shadow: 0 0 12px var(--gold), 0 0 24px #ff6a00;
  animation: beam 600ms ease-out forwards;
}

.coin {
  position: absolute;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, transparent 44%, rgba(138, 90, 0, 0.7) 46%, transparent 54%),
    radial-gradient(circle at 35% 30%, var(--gold-light), var(--gold) 50%, var(--gold-dark));
  border: 2px solid #8a6200;
  transform: translate(-50%, -50%);
  animation: coin 1300ms cubic-bezier(0.3, 0, 0.7, 1) both;
}

.banner {
  position: fixed;
  left: 50%;
  top: 40%;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translate(-50%, -50%) scale(0);
  pointer-events: none;
  opacity: 0;
}

/* A burst of light behind big wins. */
.banner::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: -1;
  width: 150vmin;
  height: 150vmin;
  margin: -75vmin 0 0 -75vmin;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 230, 140, 0.55), transparent 45%),
    repeating-conic-gradient(rgba(255, 211, 77, 0.35) 0 7deg, transparent 7deg 18deg);
  -webkit-mask-image: radial-gradient(circle, #000 20%, transparent 65%);
  mask-image: radial-gradient(circle, #000 20%, transparent 65%);
}

.banner.show::before {
  animation: rays 6s linear infinite;
}

.banner-title {
  font-size: clamp(2.4rem, 13vw, 4.2rem);
  font-weight: 900;
  font-style: italic;
  white-space: nowrap;
  filter: drop-shadow(0 2px 0 var(--gold-deep)) drop-shadow(0 4px 0 #6a0016) drop-shadow(0 0 16px rgba(255, 106, 0, 0.9));
}

.banner.bonus .banner-title {
  background-image: linear-gradient(180deg, #f0fff4, #6dff9e 45%, #0b8a40 52%, #b0ffc8 80%, #0b6a36);
  filter: drop-shadow(0 2px 0 #054018) drop-shadow(0 0 16px var(--jade));
}

.banner-amount {
  font-size: clamp(2.1rem, 10.5vw, 3.1rem);
  font-weight: 900;
  /* A dark edge keeps the gold readable over the burst of light. */
  filter: drop-shadow(0 0 1px #2a1000) drop-shadow(0 0 1px #2a1000) drop-shadow(0 3px 0 #4a2200) drop-shadow(0 4px 2px #000) drop-shadow(0 0 10px rgba(255, 160, 0, 0.8));
}

/* ---------- Toast ---------- */

.toast {
  position: fixed;
  left: 50%;
  top: calc(var(--safe-top) + 12px);
  width: calc(100% - 32px);
  max-width: 488px;
  padding: 12px 16px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, #6a0e1c, #2a0510);
  border: 2px solid var(--gold);
  box-shadow: 0 0 0 1px var(--gold-deep), 0 6px 20px rgba(0, 0, 0, 0.5);
  font-size: 0.95rem;
  /* Parked above the screen, clear of the safe area. */
  transform: translate(-50%, calc(-100% - var(--safe-top) - 24px));
  transition: transform 250ms ease;
  pointer-events: none;
  z-index: 50;
}

.toast.show {
  transform: translate(-50%, 0);
}

/* ---------- Add to Home Screen hint (Safari, shown once) ---------- */

/* Drops in just under the top bar, clear of SPIN and the bet controls.
   Above the reels and tower, but below the deal screen, its intro and
   every sheet, so it never covers a button there. */
.install-hint {
  position: fixed;
  left: 50%;
  top: calc(max(6px, var(--safe-top)) + 56px);
  width: calc(100% - 32px);
  max-width: 488px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px 10px 12px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, #6a0e1c, #2a0510);
  border: 2px solid var(--gold);
  box-shadow: 0 0 0 1px var(--gold-deep), 0 8px 24px rgba(0, 0, 0, 0.6);
  font-size: 0.85rem;
  line-height: 1.3;
  opacity: 0;
  transform: translate(-50%, -16px);
  transition: transform 300ms ease, opacity 300ms ease;
  z-index: 25;
}

.install-hint.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

.install-hint[hidden] {
  display: none;
}

.install-hint-icon {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 10px;
}

.install-hint-text {
  flex: 1;
  color: var(--text);
}

.install-hint-text strong:first-child {
  display: block;
  color: var(--gold);
}

/* Safari's share icon: a box with an arrow out of the top. */
.install-hint-share {
  position: relative;
  display: inline-block;
  width: 12px;
  height: 11px;
  margin: 0 2px -1px;
  border: 2px solid var(--neon-cyan);
  border-top-color: transparent;
  border-radius: 2px;
}

.install-hint-share::before {
  content: "\2191";
  position: absolute;
  left: 50%;
  top: -9px;
  transform: translateX(-50%);
  color: var(--neon-cyan);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}

.install-hint-close {
  flex: none;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: var(--text);
  font-size: 1rem;
  touch-action: manipulation;
}

/* Short phones (iPhone SE and similar): a tighter tower, with each meter's
   name board beside its sockets instead of over them. */
@media (max-height: 700px) {
  .deal-panel { gap: 4px; }
  .deal-panel::before,
  .deal-panel::after { font-size: 1.5rem; }
  .deal-pill { font-size: 0.66rem; }
  .deal-chest { padding: 1px 0 6px; }
  .deal-chest .chest { width: 28px; height: 20px; }
  .deal-chest-label { bottom: 9px; }
  .deal-chest.opened .deal-chest-label { bottom: 6px; }
  .deal-chest.mine .deal-chest-label { bottom: 8px; }
  .deal-bottom { min-height: 120px; }
  .tower { padding: 2px 0 12px; }
  .roof { height: 34px; margin-bottom: -34px; }
  .plaque { padding: 0 6px 1px; }
  .plaque-amount { font-size: 0.85rem; }
  .meters { padding: 2px 4px 3px; margin: 0 30px; }
  .meters::before { inset: -2px -20px -3px; }
  .meters::after { left: -28px; right: -28px; }
  /* Small statues at the very edges, clear of the plaques and trays. */
  .guardian { width: 36px; height: 96px; bottom: 40px; }
  .guardian:not(.flip) { left: -12px; }
  .guardian.flip { right: -12px; }
  .meter { flex-direction: row; gap: 4px; }
  .meter-label { flex: none; order: 0; min-width: 0; padding: 1px 12px; white-space: nowrap; }
  .meter.top .meter-label { min-width: 0; padding: 1px 12px; }
  .meter-slots { flex: 1; gap: 4px; padding: 2px 6px; }
  .slot { width: 27px; height: 27px; border-width: 2px; font-size: 0.56rem; }
  .spin-button { padding: 4px 0 3px; }
  .bet-row { margin-bottom: 5px; }
  .bet-step,
  .bet-max,
  .bet-value,
  .win-box { height: 32px; }
  .controls { padding-top: 9px; margin-top: 5px; }
  .pearl-tile { padding: 6px 4px 5px; gap: 2px; }
  .pearl-tile .pearl { width: 34px; height: 34px; }
  .pearl-open-all { min-height: 40px; margin-bottom: 8px; }
  /* The wheel, with the safe areas on top of a short screen, keeps its
     SPIN and back buttons clear of the home indicator. */
  .wheel-panel { gap: 6px; }
  .wheel-title { font-size: 1.5rem; }
  .wheel-stage { width: min(84vw, 320px, 34vh); margin: 4px 0 2px; }
  .wheel-go { min-height: 48px; font-size: 1.2rem; }
}

/* ---------- Animations ---------- */

@keyframes wheel-ready {
  50% { box-shadow: 0 0 0 1px var(--gold-deep), 0 0 12px rgba(255, 211, 77, 0.9); }
}

@keyframes wheel-icon-spin {
  to { transform: rotate(360deg); }
}

@keyframes wheel-tick {
  40% { transform: rotate(-14deg); }
}

@keyframes wheel-hit {
  to { transform: scale(1.25); filter: drop-shadow(0 0 6px #fff); }
}

@keyframes level-title {
  from { transform: scale(0.3); opacity: 0; }
}

@keyframes lantern-swing {
  0%, 100% { transform: rotate(-7deg); }
  50% { transform: rotate(7deg); }
}

@keyframes lantern-drop {
  from { transform: translateY(-60vh); opacity: 0; }
}

@keyframes level-star {
  from { transform: scale(0.2) rotate(-180deg); opacity: 0; }
}

@keyframes blink {
  50% { opacity: 0.45; }
}

@keyframes press {
  50% { transform: translateY(4px); box-shadow: 0 0 0 2px var(--gold-deep), 0 2px 0 #03300f, 0 4px 10px rgba(0, 0, 0, 0.4); }
}

@keyframes badge {
  to { transform: scale(1.15); }
}

@keyframes bought {
  0% { background: var(--gold); transform: scale(1.03); }
  100% { transform: scale(1); }
}

@keyframes win-cell {
  50% { box-shadow: inset 0 0 0 3px var(--gold-light), inset 0 0 18px var(--gold), 0 0 12px var(--gold); filter: brightness(1.35); transform: scale(1.06); }
}

@keyframes payline {
  from { opacity: 0.35; }
  to { opacity: 0.85; }
}

@keyframes strike {
  0%, 8% { opacity: 1; }
  13% { opacity: 0.3; }
  18%, 65% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes struck {
  0%, 8% { filter: brightness(2) saturate(0.6); }
  13% { filter: brightness(1.2); }
  18% { filter: brightness(1.8) saturate(0.7); }
  100% { filter: none; }
}

@keyframes winner-in {
  0% { opacity: 0; transform: translateY(-50%) scale(0.2); }
  100% { opacity: 1; transform: translateY(-50%) scale(1); }
}

@keyframes winner-out {
  from { opacity: 1; transform: translateY(-50%) scale(1); }
  to { opacity: 0; transform: translateY(-50%) scale(0.85); }
}

@keyframes hot-box {
  from { box-shadow: 0 0 8px var(--gold), inset 0 0 8px rgba(255, 211, 77, 0.5); transform: scale(1); }
  to { box-shadow: 0 0 22px var(--gold), 0 0 34px rgba(255, 140, 0, 0.7), inset 0 0 14px rgba(255, 211, 77, 0.8); transform: scale(1.06); }
}

@keyframes firing {
  0% { filter: brightness(2.4); transform: scale(1.15); }
  100% { filter: none; transform: scale(1); }
}

@keyframes tease {
  from { box-shadow: 0 0 0 1px var(--gold-deep), 0 0 18px rgba(255, 211, 77, 0.35), inset 0 0 18px rgba(0, 0, 0, 0.8); }
  to { box-shadow: 0 0 0 1px var(--gold-deep), 0 0 34px var(--gold), inset 0 0 18px rgba(0, 0, 0, 0.8); }
}

@keyframes slot-land {
  0% { transform: scale(1.5); filter: brightness(2.5); }
  100% { transform: scale(1); }
}

@keyframes paying {
  0% { filter: brightness(1.8); transform: scale(1.03); }
  50% { filter: brightness(1); transform: scale(1); }
}

@keyframes meter-lit {
  0% { filter: brightness(1.8) saturate(1.3) drop-shadow(0 0 10px var(--gold-light)); }
  100% { filter: none; }
}

@keyframes chests-full {
  from { box-shadow: 0 0 4px var(--gold); }
  to { box-shadow: 0 0 16px var(--gold), 0 0 28px #ff6a00; }
}

@keyframes lantern {
  from { transform: rotate(-4deg); }
  to { transform: rotate(4deg); }
}

@keyframes rays {
  to { transform: rotate(360deg); }
}

@keyframes intro-dim {
  to { opacity: 1; }
}

@keyframes dragon-rise {
  0% { transform: translateY(30vh) scale(0.15); }
  100% { transform: none; }
}

@keyframes dragon-bob {
  from { transform: translateY(0); }
  to { transform: translateY(-8px); }
}

@keyframes door-close {
  to { transform: none; }
}

@keyframes door-flash {
  0%, 100% { filter: none; }
  45% { filter: brightness(1.6) saturate(1.4); }
}

@keyframes door-open {
  from { transform: none; }
  to { transform: translateX(var(--open)); }
}

@keyframes deal-scroll {
  0% { transform: translate(-50%, -50%) scale(0.2); opacity: 0; }
  15% { transform: translate(-50%, -50%) scale(1.08); opacity: 1; }
  22%, 82% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, 30%) scale(0.6); opacity: 0; }
}

@keyframes chest-rattle {
  from { transform: rotate(-5deg) translateY(-1px); }
  to { transform: rotate(5deg) translateY(1px); }
}

@keyframes chest-chosen {
  from { box-shadow: 0 0 6px var(--gold); transform: scale(1); }
  to { box-shadow: 0 0 22px var(--gold), 0 0 34px #ff6a00; transform: scale(1.08); }
}

@keyframes board-boost {
  0% { filter: brightness(2) saturate(1.5); }
  100% { filter: none; }
}

@keyframes deal-round {
  0% { transform: translate(-50%, -50%) scale(0.3); opacity: 0; }
  14% { transform: translate(-50%, -50%) scale(1.06); opacity: 1; }
  20%, 82% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(0.8); opacity: 0; }
}

@keyframes deal-round-still {
  0%, 90% { transform: translate(-50%, -50%); opacity: 1; }
  100% { transform: translate(-50%, -50%); opacity: 0; }
}

@keyframes chest-drop {
  from { transform: translateY(-30px) scale(0.6); opacity: 0; }
}

@keyframes pill-in {
  from { transform: scaleX(0.3); opacity: 0; }
}

@keyframes chest-pop {
  0% { transform: scale(1.4); filter: brightness(2); }
  100% { transform: scale(1); }
}

@keyframes offer-dragon-rise {
  0% { transform: translateY(60%) scale(0.3); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: none; opacity: 1; }
}

@keyframes offer-scroll-in {
  from { transform: scale(0.4); opacity: 0; }
  to { transform: none; opacity: 1; }
}

@keyframes offer-powered {
  0% { filter: brightness(2.2) saturate(1.4); transform: scale(1.12); }
  100% { filter: none; transform: none; }
}

@keyframes deal-flash {
  0% { opacity: 0; }
  8%, 82% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes flash-name {
  from { transform: scale(0.3) rotate(-6deg); }
  to { transform: none; }
}

@keyframes bolt-flicker {
  from { opacity: 1; }
  to { opacity: 0.35; }
}

@keyframes pill-flash {
  0% { filter: none; transform: none; }
  35% { filter: brightness(2.2) saturate(1.3); transform: scale(1.08); box-shadow: 0 0 12px #fff6a0; }
  100% { filter: none; transform: none; }
}

@keyframes offer-in {
  from { transform: translateY(40px) scale(0.9); opacity: 0; }
  to { transform: none; opacity: 1; }
}

@keyframes fizzle {
  to { opacity: 0; transform: scale(0.4); }
}

@keyframes pearl-land {
  40% { transform: scale(1.5); filter: brightness(1.6); }
}

@keyframes pearl-bob {
  50% { transform: translateY(-3px); }
}

@keyframes pearl-shake {
  0% { transform: rotate(0) scale(0.6); }
  15% { transform: rotate(0) scale(1); }
  25% { transform: rotate(-6deg) scale(1); }
  35% { transform: rotate(6deg) scale(1.02); }
  45% { transform: rotate(-9deg) scale(1.04); }
  55% { transform: rotate(9deg) scale(1.06); }
  65% { transform: rotate(-12deg) scale(1.08); }
  75% { transform: rotate(12deg) scale(1.1); }
  85% { transform: rotate(-14deg) scale(1.12); }
  100% { transform: rotate(0) scale(1.15); }
}

@keyframes pearl-burst {
  0% { transform: scale(1.15); opacity: 1; }
  35% { transform: scale(1.7); opacity: 0.1; }
  100% { transform: scale(0.6); opacity: 1; }
}

@keyframes pearl-flash {
  0% { transform: scale(0.3); opacity: 1; }
  100% { transform: scale(1.4); opacity: 0; }
}

@keyframes pearl-prize {
  from { opacity: 0; transform: translateY(12px) scale(0.9); }
}

@keyframes float-up {
  from { opacity: 1; margin-top: 0; }
  to { opacity: 0; margin-top: -60px; }
}

@keyframes beam {
  0% { opacity: 0; clip-path: inset(0 0 100% 0); }
  30% { opacity: 1; clip-path: inset(0 0 0 0); }
  100% { opacity: 0; clip-path: inset(100% 0 0 0); }
}

@keyframes banner {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.2) rotate(-8deg); }
  15% { opacity: 1; transform: translate(-50%, -50%) scale(1.1) rotate(2deg); }
  25% { transform: translate(-50%, -50%) scale(1) rotate(0); }
  85% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -60%) scale(1.05); }
}

@keyframes pay-spin {
  to { transform: rotate(360deg); }
}

@keyframes pay-blink {
  50% { opacity: 0.25; }
}

@keyframes pay-pop {
  0% { transform: scale(0.4); opacity: 0; }
  70% { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1); }
}

@keyframes pay-side {
  50% { transform: translateX(-6px); }
}

@keyframes pay-nudge {
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

@keyframes auto-glow {
  to { box-shadow: 0 0 0 2px var(--gold-deep), inset 0 -4px 8px rgba(40, 0, 6, 0.6), 0 6px 0 #3a0410, 0 8px 18px rgba(0, 0, 0, 0.55), 0 0 30px rgba(255, 59, 78, 0.95); }
}

@keyframes big-win-step {
  0% { transform: scale(0.3) rotate(-6deg); }
  60% { transform: scale(1.15) rotate(2deg); }
  100% { transform: scale(1) rotate(0); }
}

@keyframes big-win-shake {
  25% { transform: translateX(-6px) rotate(-1deg); }
  75% { transform: translateX(6px) rotate(1deg); }
}

@keyframes coin {
  0% { opacity: 1; transform: translate(-50%, -50%) rotateY(0); }
  35% { transform: translate(calc(-50% + var(--dx) * 0.5), calc(-50% + var(--up))) rotateY(calc(var(--spin) * 0.4)); }
  100% { opacity: 0.9; transform: translate(calc(-50% + var(--dx)), calc(-50% + 70vh)) rotateY(var(--spin)); }
}

@media (prefers-reduced-motion: reduce) {
  .spin-button.pulse,
  .float-text,
  .upgrade.bought,
  .spin-count.hot,
  .spin-count.firing,
  .badge,
  .grid.tease,
  .cell.win,
  .payline,
  .deal-chest.popping,
  .deal-offer.show,
  .slot.landed,
  .meter.lit,
  .meter.paying,
  .plaque.paying,
  .pay-confirm.nudge .pay-ready,
  .pay-check,
  .pay.ready .pay-side,
  .big-win-title.step,
  .big-win-amount.landed,
  .pearl-button.landed .pearl,
  .pearl-open.shaking .pearl.big,
  .pearl-open.burst .pearl.big,
  .pearl-open.burst .pearl-open-stage::after,
  .pearl-prize,
  .wheel-prize:not(:empty),
  .wheel.tick .wheel-pointer,
  .level-up-title,
  .level-star.big {
    animation-duration: 1ms;
    animation-iteration-count: 1;
  }
  .deal-mine.landed,
  .deal.intro .deal-chest,
  .deal.intro .deal-pill,
  .deal-intro.show .intro-dragon,
  .chests.full,
  .deal-panel::before,
  .deal-panel::after,
  .banner.show::before,
  .spin-count.hot::before,
  .big-win-rays,
  .big-win-lantern,
  .big-win.mega .big-win-sign,
  .spin-button.auto,
  .pearl-tile:not(:disabled) .pearl,
  .pearl-open-rays,
  .wheel-button.ready,
  .wheel-button.ready .wheel-icon,
  .lantern-button.ready .lantern-icon,
  .lantern-big,
  .wheel-lights::before,
  .wheel-label.hit .wheel-label-inner {
    animation: none;
    transform: none;
  }
  .deal-doors.closed .door {
    animation: door-close 1ms forwards;
  }
  .deal.offering .deal-dragon-art,
  .deal.offering .deal-dragon-scroll,
  .deal-flash.show {
    animation: none;
    opacity: 1;
  }
  .deal-flash.show::before,
  .deal-flash.show .deal-flash-name,
  .deal-bolt,
  .deal-board.boosted .deal-pill,
  .deal-dragon.boosted .deal-dragon-x {
    animation: none;
  }
  .deal-chests {
    transition: none;
  }
  /* The round card still shows, just without the zoom. */
  .deal-round.show {
    animation: deal-round-still 1800ms linear forwards;
  }
  .banner.show {
    animation: none;
    opacity: 1;
    transform: translate(-50%, -50%);
  }
  .winner.show {
    animation: none;
    opacity: 1;
    transform: translateY(-50%);
  }
  .winner.show.hide {
    animation: none;
    opacity: 0;
  }
}

/* ---------- Out of coins ---------- */

.no-coins-panel {
  align-items: stretch;
  text-align: center;
}

.no-coins-art {
  margin: 8px 0 4px;
  font-size: 3.2rem;
  line-height: 1;
}

.no-coins-text {
  margin: 0 0 14px;
  color: var(--text);
  font-size: 0.95rem;
  line-height: 1.4;
}

.no-coins-shop {
  min-height: 56px;
  border-radius: 14px;
  border: 3px solid var(--gold);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.45), transparent 50%),
    linear-gradient(180deg, var(--gold-light), var(--gold) 50%, var(--gold-dark));
  box-shadow: 0 0 0 1px var(--gold-deep), 0 4px 0 rgba(0, 0, 0, 0.6);
  color: #3a1a00;
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

.no-coins-shop:active {
  transform: translateY(2px);
  box-shadow: 0 0 0 1px var(--gold-deep), 0 2px 0 rgba(0, 0, 0, 0.6);
}