/* B9 promo demo. Sprite mapping follows asset-map.json (4x4 equal grid, background-size 400%). */

:root {
  --wine: #430709;
  --wine-deep: #1c0306;
  --red: #a51016;
  --gold: #ffd776;
  --gold-hi: #fff1ae;
  --gold-deep: #aa6519;
  --gold-line: #e8b44e;
  --cream: #fff3d2;
  --ink: #2b0900;
  --serif: Georgia, "Times New Roman", "Noto Serif", serif;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --fade: 420ms;
  --flip: 350ms;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  /* No double-tap zoom or tap delay on phones when tapping coins quickly. */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  color: var(--cream);
  background: radial-gradient(ellipse at 50% 0%, #640c14 0%, #2a0409 55%, #140205 100%) fixed, #1d0307;
}
button { font: inherit; color: inherit; }
p { margin: 0; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

:focus-visible {
  outline: 3px solid #fff6c8;
  outline-offset: 3px;
}

/* ---------- Sprites ---------- */
.sprite {
  display: inline-block;
  flex: none;
  aspect-ratio: 1;
  background-image: url("assets/sprite-atlas.webp");
  background-size: 400% 400%;
  background-repeat: no-repeat;
}
.sprite-ingot       { background-position: 0% 0%; }
.sprite-jade        { background-position: 33.333333% 0%; }
.sprite-peach       { background-position: 66.666667% 0%; }
.sprite-envelope    { background-position: 100% 0%; }
.sprite-turtle      { background-position: 0% 33.333333%; }
.sprite-ship        { background-position: 33.333333% 33.333333%; }
.sprite-lion        { background-position: 66.666667% 33.333333%; }
.sprite-scatter     { background-position: 100% 33.333333%; }
.sprite-fu-grand    { background-position: 0% 66.666667%; }
.sprite-fu-major    { background-position: 33.333333% 66.666667%; }
.sprite-fu-minor    { background-position: 66.666667% 66.666667%; }
.sprite-fu-mini     { background-position: 100% 66.666667%; }
.sprite-coin        { background-position: 0% 100%; }
.sprite-spin-button { background-position: 33.333333% 100%; }
.sprite-sparkle     { background-position: 66.666667% 100%; }
.sprite-coin-edge   { background-position: 100% 100%; }

/* Atlas failed to load: keep the game usable with labelled gold discs. */
.atlas-failed .sprite:not([data-label=""]) {
  position: relative;
  background: radial-gradient(circle at 40% 35%, #ffe7a0, #d39a32 55%, #7a4510);
  border-radius: 50%;
}
.atlas-failed .sprite[data-label=""] { visibility: hidden; }
.atlas-failed .sprite:not([data-label=""])::after {
  content: attr(data-label);
  position: absolute; inset: 0;
  display: grid; place-items: center;
  padding: 4px;
  text-align: center;
  font: 700 10px/1.1 system-ui, sans-serif;
  color: #3a1200;
}

.gold-text { color: var(--gold); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .gold-text {
    background: linear-gradient(180deg, #fff8d0 0%, #ffd54f 38%, #e2891b 60%, #ffe28e 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

/* ---------- Shell ---------- */
.page { display: flex; justify-content: center; }
.app {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 480px;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--wine);
  box-shadow: 0 0 0 1px #6b2a0c, 0 0 80px #000c;
}
/* The painted background is only needed by the CSS-only layout (artwork frame missing). */
.no-frame .app { background: var(--wine) url("assets/game-background.jpg") center top / cover no-repeat; }
.no-frame.bg-failed .app {
  background: radial-gradient(ellipse at 50% 20%, #a3121b 0%, #6a0a10 50%, #3a0508 100%);
}

.game {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: max(6px, env(safe-area-inset-top)) 10px 2px;
}

/* ---------- Masthead ---------- */
.topbar {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  justify-items: center;
}
.wordmark {
  padding: 5px 18px 6px;
  border-radius: 999px;
  font: 800 20px/1 var(--serif);
  letter-spacing: .08em;
  color: var(--gold);
  text-shadow: 0 1px 0 #000;
  background: linear-gradient(#6d0d14, #2c0407);
  border: 1.5px solid var(--gold-line);
  box-shadow: inset 0 0 0 2px #5a2a08, 0 2px 10px #0008;
}
.icon-btn {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  padding: 0;
  border-radius: 50%;
  border: 1.5px solid var(--gold-line);
  background: #2c0407d9;
  color: var(--gold);
  cursor: pointer;
}
.icon-btn:hover { background: #4a0810; }
.sound-btn .icon-sound-on { display: none; }
.sound-btn[aria-pressed="true"] .icon-sound-on { display: block; }
.sound-btn[aria-pressed="true"] .icon-sound-off { display: none; }

.title-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  margin-top: 2px;
}
.title-fu {
  width: clamp(58px, 18vw, 88px);
  filter: drop-shadow(0 4px 8px #0009);
}
.title-fu-right { transform: scaleX(-1); }
.game-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  margin: 0;
  text-align: center;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.title-top {
  font: 900 clamp(46px, 15.5vw, 72px)/.9 var(--serif);
  letter-spacing: .01em;
  color: #e3141d;
  -webkit-text-stroke: 2px #ffd56a;
  filter: drop-shadow(0 3px 0 #5a0a05) drop-shadow(0 0 10px #ffb40070);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .title-top {
    background: linear-gradient(180deg, #ff8a74 0%, #f0232b 45%, #9c0710 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
.title-bottom {
  font: 900 clamp(26px, 8.6vw, 40px)/1 var(--serif);
  letter-spacing: .02em;
  -webkit-text-stroke: 1px #7a1d05;
  filter: drop-shadow(0 3px 0 #4a0805) drop-shadow(0 0 12px #ffb40050);
}

/* ---------- Tier plaques ---------- */
.tiers {
  list-style: none;
  margin: 0;
  padding: 14px 0 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.tier-grand { --tier: #a81d17; }
.tier-major { --tier: #69209a; }
.tier-minor { --tier: #1263a7; }
.tier-mini  { --tier: #247421; }
.tier {
  position: relative;
  padding: 12px 2px 5px;
  text-align: center;
  color: #fff0c5;
  border-radius: 10px;
  border: 2px solid #edbd52;
  background: linear-gradient(var(--tier), #210506);
  box-shadow: inset 0 0 0 2px #0004, 0 3px 8px #0007;
  transition: opacity .3s, box-shadow .3s, border-color .3s;
}
.tier-medal {
  position: absolute;
  top: -13px; left: 50%;
  width: 26px;
  transform: translateX(-50%);
  filter: drop-shadow(0 2px 2px #0009);
}
.tier-name {
  display: block;
  font: 800 clamp(11px, 3.5vw, 15px)/1.15 var(--serif);
  letter-spacing: .06em;
  text-shadow: 0 1px 0 #000, 0 0 6px #000a;
}
.tier-value {
  display: block;
  min-height: 1.25em;
  margin: 3px 4px 0;
  padding: 2px 0;
  border-radius: 6px;
  background: #0006;
  box-shadow: inset 0 1px 3px #000a;
  font: 900 clamp(14px, 4.8vw, 21px)/1.25 system-ui, -apple-system, "Segoe UI", sans-serif;
  font-variant-numeric: tabular-nums;
  color: #fff;
  text-shadow: 0 2px 0 #000a;
}
[data-stage="coins"] .tier-value { color: transparent; text-shadow: none; }
.pips {
  display: flex;
  justify-content: center;
  gap: 4px;
  height: 8px;
  margin-top: 4px;
  opacity: 0;
  transition: opacity .3s;
}
[data-stage="coins"] .pips { opacity: 1; }
.pips i {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #0007;
  box-shadow: inset 0 0 0 1px #edbd52aa;
  transition: background .2s, box-shadow .2s;
}
.pips i.on {
  background: radial-gradient(circle at 35% 35%, #fff6c8, #ffc23d 60%, #a86412);
  box-shadow: 0 0 6px #ffcf5a;
}
.tier.is-hit {
  border-color: #fff3b0;
  box-shadow: 0 0 0 2px #ffd776aa, 0 0 24px #ffcf5acc, inset 0 0 12px #fff3b066;
  animation: glow-pulse 800ms ease-in-out infinite alternate;
}
.has-result .tier:not(.is-hit) { opacity: .55; }

/* ---------- Stage + crossfade ---------- */
.stage { display: grid; }
.panel {
  grid-area: 1 / 1;
  min-width: 0;
  transition: opacity var(--fade) ease, transform var(--fade) var(--ease-out), visibility 0s linear 0s;
}
.panel-coins {
  opacity: 0;
  visibility: hidden;
  transform: scale(.96);
  transition: opacity var(--fade) ease, transform var(--fade) var(--ease-out), visibility 0s linear var(--fade);
}
[data-stage="coins"] .panel-reels {
  opacity: 0;
  visibility: hidden;
  transform: scale(1.03);
  transition: opacity var(--fade) ease, transform var(--fade) var(--ease-out), visibility 0s linear var(--fade);
}
[data-stage="coins"] .panel-coins {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity var(--fade) ease, transform var(--fade) var(--ease-out), visibility 0s linear 0s;
}

/* ---------- Reels ---------- */
.reels-frame {
  position: relative;
  padding: 7px;
  border-radius: 16px;
  border: 2px solid var(--gold-line);
  background: linear-gradient(145deg, #640b12, #260305);
  box-shadow: inset 0 0 0 3px #6e330b, inset 0 0 24px #000a, 0 8px 28px #0009;
}
.reels-frame::before {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 20px;
  border: 1.5px solid #ffd77666;
  pointer-events: none;
}
.reels {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
}
.reel {
  position: relative;
  aspect-ratio: 1 / 3;
  overflow: hidden;
  border-radius: 8px;
  background: radial-gradient(ellipse at 50% 50%, #3f060a 0%, #170204 100%);
  box-shadow: inset 0 0 0 1px #c9963b55;
}
.reel::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  box-shadow: inset 0 12px 12px -8px #000d, inset 0 -12px 12px -8px #000d;
}
.strip {
  position: absolute;
  top: 0; left: 0; right: 0;
  will-change: transform;
  transition: opacity 160ms ease;
}
.strip.is-settle { animation: settle 240ms ease-out; }
.reels.is-fading .strip { opacity: 0; }
.cell {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
}
.cell > .sprite { width: 90%; }
.cell.is-scatter::before {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 8px;
  box-shadow: 0 0 0 2px #ffe08a, 0 0 14px 4px #ffbf3cb0, inset 0 0 14px #ffd77666;
  animation: glow-pulse 325ms ease-in-out infinite alternate;
}
.cell.is-scatter > .sprite { animation: pop 325ms ease-in-out infinite alternate; }

.bonus-banner {
  position: absolute;
  left: 50%; top: 50%;
  padding: 10px 22px;
  white-space: nowrap;
  font: 900 clamp(24px, 8vw, 34px)/1 var(--serif);
  letter-spacing: .05em;
  border-radius: 14px;
  border: 2px solid #f6cf6a;
  background: linear-gradient(#b3141c, #4b0509);
  box-shadow: inset 0 0 0 3px #7a3a0c, 0 0 30px #ffb43c99, 0 10px 30px #000c;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.6);
  transition: opacity .25s, transform .35s var(--ease-out);
  pointer-events: none;
}
.bonus-banner span { filter: drop-shadow(0 2px 0 #3a0603); }
[data-state="SCATTER"] .bonus-banner {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.spin-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding-top: 6px;
}
.spin-btn {
  width: clamp(112px, 33vw, 142px);
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  color: #fff8e0;
  font: 900 clamp(22px, 7vw, 30px)/1 var(--serif);
  letter-spacing: .05em;
  text-shadow: 0 2px 0 #6a0206, 0 0 10px #ff9a8a99;
  background:
    url("assets/sprite-atlas.webp") 33.333333% 100% / 400% 400% no-repeat,
    radial-gradient(circle at 50% 40%, #ff5a4f, #b3060f 60%, #5a0206);
  filter: drop-shadow(0 6px 14px #000b);
  transition: transform .15s ease, filter .2s;
}
[data-state="READY"] .spin-btn { animation: spin-idle 1.6s ease-in-out infinite; }
.spin-btn:not(:disabled):hover { transform: scale(1.05); }
.spin-btn:not(:disabled):active { transform: scale(.96); }
.spin-btn:disabled {
  cursor: default;
  filter: saturate(.7) brightness(.8) drop-shadow(0 6px 14px #000b);
}
.subtitle {
  padding: 8px 34px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: center;
  color: var(--gold-hi);
  text-shadow: 0 1px 2px #000;
  background: linear-gradient(#5a0a10, #22030a);
  border: 2px solid var(--gold-line);
  box-shadow: inset 0 0 0 2px #6e330b, 0 4px 12px #000a;
}

/* ---------- Coin round ---------- */
.panel-coins {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}
.coin-heading {
  margin: 2px 0 0;
  font: 900 clamp(26px, 8vw, 34px)/1.05 var(--serif);
  letter-spacing: .04em;
  filter: drop-shadow(0 2px 0 #4a0805);
}
.coin-help {
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 600;
  text-shadow: 0 1px 2px #000;
}
.coins {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(6px, 2.6vw, 14px);
  padding: 0 clamp(0px, 2vw, 10px);
}
.coin {
  position: relative;
  aspect-ratio: 1;
  min-width: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  perspective: 600px;
}
.coin[aria-disabled="true"] { cursor: default; }
.coin-inner {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform var(--flip) var(--ease-out);
}
.coin.is-revealed .coin-inner { transform: rotateY(180deg); }
.coin-face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.coin-face > .sprite { width: 100%; transition: transform .15s ease; }
.coin-front > .sprite { filter: drop-shadow(0 4px 6px #000a); }
.coin:not([aria-disabled="true"]):hover .coin-front > .sprite { transform: scale(1.06); }
.coin-back { transform: rotateY(180deg); }
.coin-tag {
  position: absolute;
  bottom: -3px; left: 50%;
  transform: translateX(-50%);
  padding: 3px 6px;
  white-space: nowrap;
  font: 800 10px/1 system-ui, sans-serif;
  letter-spacing: .06em;
  color: #fff0c5;
  border-radius: 6px;
  border: 1px solid #edbd52;
  background: var(--tier);
  box-shadow: 0 2px 4px #0009;
}
.coin.is-match .coin-back {
  box-shadow: 0 0 0 3px #ffe08a, 0 0 22px 6px #ffc94dcc;
  animation: glow-pulse 700ms ease-in-out infinite alternate;
}
.coin.is-dim { opacity: .42; filter: saturate(.55); }

.result-banner {
  position: relative;
  min-width: 72%;
  margin-top: 10px;
  padding: 10px 22px;
  border-radius: 14px;
  border: 2px solid #f3c45a;
  background: linear-gradient(var(--tier, #1263a7), #160307);
  box-shadow: inset 0 0 0 2px #0005, 0 8px 22px #000b;
  opacity: 0;
  transform: scale(.85);
  transition: opacity .3s ease, transform .4s var(--ease-out);
}
.result-banner.is-shown {
  opacity: 1;
  transform: none;
  animation: glow-pulse 900ms ease-in-out infinite alternate;
}
.result-banner strong {
  display: block;
  font: 900 clamp(20px, 6.4vw, 28px)/1.1 var(--serif);
  letter-spacing: .04em;
  color: var(--gold-hi);
  text-shadow: 0 2px 0 #000;
}
.result-banner small { display: block; margin-top: 3px; font-size: 12px; font-weight: 600; }
.spark {
  position: absolute;
  top: -18px;
  width: 44px;
  pointer-events: none;
  opacity: 0;
}
.spark-l { left: -12px; }
.spark-r { right: -12px; }
.result-banner.is-shown .spark { animation: twinkle 900ms ease-in-out infinite alternate; }
.result-banner.is-shown .spark-r { animation-delay: .3s; }

/* ---------- Links + footer ---------- */
.links-row { display: flex; justify-content: center; }
.links-row:not(:has(.skip-link:not([hidden]))) { display: none; }
.board { position: relative; }
.age-frame {
  position: absolute;
  left: 3%; bottom: 1.2%;
  z-index: 2;
  width: 26px; height: 26px;
  font-size: 10px;
  color: #fff3d2;
  background: #1c0306b3;
}
.skip-link {
  min-height: 44px;
  padding: 0 16px;
  border: 0;
  background: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: var(--gold-hi);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-shadow: 0 1px 2px #000;
}
.offer-seen .skip-link { visibility: hidden; }

/* Only takes space while the View offer button is showing. */
.footer:not(:has(.view-offer:not([hidden]))) { display: none; }
.footer {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 12px max(8px, env(safe-area-inset-bottom));
  background: linear-gradient(#1c030600, #1c0306e6 40%, #1c0306);
}
.legal {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 12px;
  line-height: 1.3;
  text-align: center;
}
.disclosure { padding-left: 10px; border-left: 1px solid #fff3d266; font-weight: 600; letter-spacing: .01em; }
.age {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  font-size: 11px;
  font-weight: 800;
}
.view-offer {
  min-height: 44px;
  padding: 0 24px;
  border-radius: 999px;
  border: 2px solid #ffe4a0;
  cursor: pointer;
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--ink);
  background: linear-gradient(#fff1ae, #f5c655 52%, #c08327);
  box-shadow: 0 3px 0 #75430c, 0 0 18px #ffb60055;
}

/* ---------- Loader ---------- */
.loader {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-weight: 600;
  color: var(--gold-hi);
  background: var(--wine);
  transition: opacity .35s ease;
}
.loader.is-done { opacity: 0; pointer-events: none; }
.ring {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 4px solid #ffd77633;
  border-top-color: var(--gold);
  animation: rotate 900ms linear infinite;
}

/* ---------- Confetti ---------- */
.fx {
  position: fixed;
  top: 0; bottom: 0; left: 50%;
  z-index: 25;
  width: min(100%, 480px);
  transform: translateX(-50%);
  overflow: hidden;
  pointer-events: none;
}
.confetti {
  position: absolute;
  top: -16px;
  left: var(--x);
  width: 8px; height: 13px;
  border-radius: 2px;
  background: var(--c);
  animation: fall var(--t) cubic-bezier(.25, .6, .4, 1) var(--d) forwards;
}

/* ---------- Offer dialog ---------- */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  overflow-y: auto;
  padding: 64px 16px 20px;
  background: rgba(14, 1, 3, .8);
  animation: fade-in .3s ease;
}
.overlay[hidden] { display: none; }
.offer-card {
  position: relative;
  width: 100%;
  max-width: 400px;
  margin: auto;
  padding: 64px 20px 16px;
  text-align: center;
  border-radius: 22px;
  border: 2px solid #f6cf6a;
  background: radial-gradient(ellipse at 50% 0%, #c41a22 0%, #8a0b12 45%, #4a0509 100%);
  box-shadow: inset 0 0 0 4px #7a3a0c, inset 0 0 0 6px #f6cf6a55, 0 20px 60px #000d, 0 0 70px #ff8a0040;
  animation: card-in .45s var(--ease-out);
}
.offer-card:focus { outline: none; }
.offer-art {
  position: absolute;
  top: -50px; left: 50%;
  display: flex;
  align-items: flex-end;
  transform: translateX(-50%);
  pointer-events: none;
}
.offer-fu { width: clamp(84px, 26vw, 104px); filter: drop-shadow(0 6px 10px #000a); }
.offer-fu + .offer-fu { margin-left: -14px; }
.offer-coin { width: 38px; margin-bottom: 4px; filter: drop-shadow(0 3px 4px #000a); }
.offer-coin-l { margin-right: -6px; transform: rotate(-12deg); }
.offer-coin-r { margin-left: -6px; transform: rotate(12deg); }
.close-btn { position: absolute; top: 10px; right: 10px; }
.offer-title {
  margin: 0;
  font: 800 clamp(17px, 5.2vw, 21px)/1.2 var(--serif);
  letter-spacing: .06em;
  color: var(--gold-hi);
  text-shadow: 0 2px 0 #3a0405;
}
.offer-amount {
  margin: 6px 0 8px;
  font: 900 clamp(46px, 15vw, 68px)/.98 var(--serif);
  letter-spacing: .02em;
  filter: drop-shadow(0 3px 0 #4a0805) drop-shadow(0 0 16px #ffc04070);
}
.offer-text { font-size: 15px; line-height: 1.4; }
.gold-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 54px;
  margin-top: 16px;
  padding: 0 18px;
  border-radius: 999px;
  border: 2px solid #ffe4a0;
  cursor: pointer;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: .05em;
  text-decoration: none;
  color: var(--ink);
  background: linear-gradient(#fff1ae, #f5c655 52%, #c08327);
  box-shadow: 0 3px 0 #75430c, 0 0 24px #ffb60055;
  transition: transform .15s ease, box-shadow .2s;
}
a.gold-cta:hover { transform: translateY(-1px); box-shadow: 0 4px 0 #75430c, 0 0 32px #ffb60088; }
a.gold-cta:active { transform: translateY(2px); box-shadow: 0 1px 0 #75430c; }
.gold-cta[hidden] { display: none; }
.gold-cta:disabled { cursor: not-allowed; opacity: .5; filter: grayscale(.5); }
.terms-note { margin-top: 10px; font-size: 12.5px; line-height: 1.4; }
.terms-link { color: var(--gold-hi); text-underline-offset: 2px; }
.terms-link[hidden], .terms-pending[hidden] { display: none; }
.terms-pending { opacity: .8; }
.dev-note {
  margin-top: 10px;
  padding: 8px 10px;
  text-align: left;
  font: 12px/1.45 ui-monospace, Consolas, monospace;
  color: #ffe9a8;
  border-radius: 8px;
  border: 1px dashed #ffd776;
  background: #0007;
}
.legal-card {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid #f6cf6a44;
}

.noscript { padding: 24px 16px; text-align: center; }
.noscript span { display: block; margin-top: 8px; font-size: 12px; }

/* ---------- Design v2: head swap, jackpot panel, ranks, match lines ---------- */
.head-swap, .tier-head { display: grid; }
.head-swap > *, .tier-head > * {
  grid-area: 1 / 1;
  transition: opacity var(--fade) ease, visibility 0s linear 0s;
}
.coin-title, .pool-label,
[data-stage="coins"] .title-row, [data-stage="coins"] .jackpot-total {
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--fade) ease, visibility 0s linear var(--fade);
}
/* Collapse the start-screen header in the coin round so the board moves up. */
[data-stage="coins"] .title-row, [data-stage="coins"] .jackpot-total { display: none; }
[data-stage="coins"] .coin-title, [data-stage="coins"] .pool-label {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--fade) ease, visibility 0s linear 0s;
}
.coin-title {
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}
.coin-title .coin-heading { font-size: clamp(32px, 10vw, 44px); }

.jackpot-total {
  justify-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 66%;
  margin-top: -4px;
  padding: 4px 24px 5px;
  border-radius: 16px;
  border: 2px solid var(--gold-line);
  background: linear-gradient(#7a0d14, #2a0408);
  box-shadow: inset 0 0 0 3px #6e330b, inset 0 0 18px #000a, 0 6px 18px #000a;
  text-align: center;
}
.jt-label, .jt-unit {
  font: 800 clamp(12px, 3.8vw, 15px)/1.1 system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: .08em;
  color: #fff3d2;
  text-shadow: 0 1px 2px #000;
}
.jt-unit { font-size: clamp(10px, 3vw, 12px); letter-spacing: .1em; }
.jt-value {
  font: 900 clamp(28px, 9vw, 38px)/1.05 var(--serif);
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  filter: drop-shadow(0 2px 0 #3a0603);
}
.pool-label {
  align-self: center;
  justify-self: center;
  min-width: 70%;
  margin: 0;
  padding: 4px 18px;
  text-align: center;
  font: 800 13px/1.2 system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: .1em;
  color: var(--gold-hi);
  border-radius: 10px;
  border: 1.5px solid var(--gold-line);
  background: linear-gradient(#5a0a10, #24030a);
  box-shadow: inset 0 0 0 2px #6e330b;
}

.cell { container-type: inline-size; }
.rank {
  --rank: linear-gradient(180deg, #fff3b0, #ffc93a 45%, #b36a10);
  font: 900 clamp(26px, 9vw, 46px)/1 var(--serif);
  font-size: 74cqi;
  letter-spacing: -.04em;
  color: #ffc93a;
  -webkit-text-stroke: 1px #3a0a02;
  filter: drop-shadow(0 3px 0 #2a0402) drop-shadow(0 0 6px #0008);
}
.rank-k { --rank: linear-gradient(180deg, #ffe0a0, #ff9a2a 45%, #a4400a); color: #ff9a2a; }
.rank-ten { --rank: linear-gradient(180deg, #ffd0c0, #ff3a32 45%, #b00a10); color: #ff3a32; font-size: 62cqi; }
.rank-nine { --rank: linear-gradient(180deg, #c8ffb0, #3cc23c 45%, #136a1e); color: #3cc23c; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .rank {
    background: var(--rank);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

.coins-wrap { position: relative; width: 100%; }
.coins { position: relative; z-index: 1; }
.match-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.match-lines polyline {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: var(--len);
  animation: draw-line 420ms ease-out;
}
.match-line { stroke: #fff1ae; stroke-width: 4; }
.match-glow { stroke: #ffb43c; stroke-width: 12; opacity: .55; filter: blur(3px); }
@keyframes draw-line { from { stroke-dashoffset: var(--len); } }

.result-banner { padding: 12px 26px; border-width: 3px; }
.result-banner strong { font-size: clamp(22px, 7vw, 30px); }

.cta-sub {
  margin-top: 12px;
  font-size: 15px;
  font-weight: 700;
  color: var(--gold);
}
.cta-sub + .terms-note { margin-top: 4px; }

/* ---------- Keyframes ---------- */
@keyframes glow-pulse { from { filter: brightness(1); } to { filter: brightness(1.25); } }
@keyframes pop { from { transform: scale(1); } to { transform: scale(1.08); } }
@keyframes settle { 0% { translate: 0 0; } 40% { translate: 0 7px; } 100% { translate: 0 0; } }
@keyframes spin-idle {
  0%, 100% { filter: drop-shadow(0 6px 14px #000b) drop-shadow(0 0 0 #ffcf5a00); }
  50% { filter: drop-shadow(0 6px 14px #000b) drop-shadow(0 0 16px #ffcf5acc); }
}
@keyframes twinkle { from { opacity: .2; transform: scale(.7) rotate(0); } to { opacity: 1; transform: scale(1.1) rotate(25deg); } }
@keyframes rotate { to { transform: rotate(360deg); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes card-in { from { opacity: 0; transform: translateY(24px) scale(.94); } }
@keyframes fall {
  0% { transform: translate(0, 0) rotate(0); opacity: 1; }
  100% { transform: translate(var(--dx), 105vh) rotate(var(--r)); opacity: .3; }
}

/* ---------- Frame skin: full-frame artwork with live elements positioned on top ----------
   Percentages come from the 963x1633 artwork (assets/game-frame.jpg). */
.skin { background: #1d0307; }
.skin .game { padding: 0 0 2px; gap: 4px; }
.skin .board {
  position: relative;
  width: 100%;
  aspect-ratio: 963 / 1633;
  container-type: inline-size;
  overflow: hidden;
  background: var(--frame) 0 0 / 100% 100% no-repeat;
}
.skin .masthead, .skin .topbar, .skin .head-swap, .skin .tier-head { display: contents; }
.skin .topbar-spacer, .skin .title-row, .skin .tier-medal, .skin .pool-label { display: none; }

.skin .wordmark {
  position: absolute;
  left: 30.63%; top: .73%; width: 41.54%; height: 4.47%;
  display: grid; place-items: center;
  padding: 0;
  font-size: 6cqw;
  background: none; border: 0; box-shadow: none;
}
.skin .sound-btn { position: absolute; top: 1.2%; right: 2%; z-index: 3; }

.skin .jackpot-total {
  position: absolute;
  left: 22.33%; top: 22.66%; width: 55.56%; height: 8.27%;
  min-width: 0; margin: 0; padding: 0;
  justify-content: center;
  gap: .3cqw;
  background: none; border: 0; box-shadow: none;
}
.skin .jt-label { font-size: 3.2cqw; }
.skin .jt-value { font-size: 10cqw; line-height: 1; }
/* Lining, fixed-width digits so the ticking number doesn't jitter (Georgia digits are old-style). */
.jt-value {
  font-family: "Times New Roman", "Noto Serif", serif;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: .01em;
}
.skin .jt-unit { font-size: max(10px, 2.5cqw); }

.skin .coin-title { display: contents; }
.skin .coin-heading {
  position: absolute;
  left: 22.33%; top: 22.66%; width: 55.56%; height: 8.27%;
  display: grid; place-items: center;
  margin: 0;
  font-size: 6.8cqw;
  white-space: nowrap;
}
.skin .coin-help {
  position: absolute;
  left: 26.48%; top: 91.73%; width: 48.81%; height: 5.33%;
  display: grid; place-items: center;
  margin: 0; padding: 0 3%;
  font-size: 3.1cqw; line-height: 1.15;
}
.skin .coin-heading, .skin .coin-help { opacity: 0; visibility: hidden; transition: opacity var(--fade) ease, visibility 0s linear var(--fade); }
.skin[data-stage="coins"] .coin-heading, .skin[data-stage="coins"] .coin-help { opacity: 1; visibility: visible; transition: opacity var(--fade) ease, visibility 0s linear 0s; }
.skin.has-result .coin-help { opacity: 0; }

.skin .tiers { display: contents; }
.skin .tier {
  position: absolute;
  top: 33.37%; height: 7.35%;
  display: grid;
  grid-template-rows: 44% 56%;
  padding: 0;
  background: none; border: 0; box-shadow: none;
  border-radius: 1.6cqw;
}
.skin .tier.tier-grand { left: 5.40%; width: 22.43%; }
.skin .tier.tier-major { left: 29.60%; width: 21.29%; }
.skin .tier.tier-minor { left: 52.44%; width: 20.25%; }
.skin .tier.tier-mini  { left: 74.56%; width: 20.66%; }
.skin .tier-name { display: grid; place-items: center; font-size: 3.7cqw; }
.skin .tier-value {
  display: grid; place-items: center;
  margin: 0; padding: 0;
  background: none; box-shadow: none;
  font-size: 4.6cqw;
}
.skin .pips {
  position: absolute;
  left: 0; right: 0; bottom: 14%;
  height: auto; margin: 0;
  gap: 1.2cqw;
}
.skin .pips i { width: 2.6cqw; height: 2.6cqw; }
.skin .tier.is-hit { box-shadow: 0 0 0 2px #fff3b0, 0 0 4cqw #ffcf5acc; }

.skin .stage { position: absolute; inset: 0; pointer-events: none; }
.skin .panel { position: absolute; inset: 0; }
.skin .panel > * { pointer-events: auto; }

.skin .reels-frame {
  position: absolute;
  left: 5.92%; top: 42.38%; width: 89.10%; height: 30.62%;
  padding: 0;
  border: 0; border-radius: 0;
  background: none; box-shadow: none;
}
.skin .reels-frame::before { display: none; }
.skin .reels { height: 100%; gap: 0; }
.skin .reel { aspect-ratio: auto; height: 100%; border-radius: 0; background: none; box-shadow: none; }
.skin .reel::after { box-shadow: inset 0 1.5cqw 1.5cqw -1cqw #0009, inset 0 -1.5cqw 1.5cqw -1cqw #0009; }
.skin .cell { aspect-ratio: 171.6 / 166.7; }
.skin .cell > .sprite { width: auto; height: 86%; }
.skin .bonus-banner { font-size: 7.5cqw; }

.skin .spin-area { display: contents; }
.skin .spin-btn {
  position: absolute;
  left: 36.34%; top: 75.63%; width: 27.52%;
  background: none;
  font-size: 8.4cqw;
  filter: none;
  text-shadow: 0 .5cqw 0 #6a0206, 0 0 3cqw #ffd0a0aa;
}
.skin[data-state="READY"] .spin-btn { animation: skin-spin-idle 1.6s ease-in-out infinite; }
.skin .spin-btn:disabled { filter: none; color: #ffe9d099; }
.skin .subtitle {
  position: absolute;
  left: 26.48%; top: 91.73%; width: 48.81%; height: 5.33%;
  display: grid; place-items: center;
  padding: 0;
  font-size: 3.7cqw;
  background: none; border: 0; box-shadow: none;
}

.skin .coins-wrap {
  position: absolute;
  left: 5.92%; top: 42.38%; width: 89.10%; height: 30.62%;
  display: grid;
  align-content: center;
  padding: 1.5cqw 3cqw;
  background: radial-gradient(ellipse at 50% 50%, #5a0a10e6, #1e0306f2);
  box-shadow: inset 0 0 0 1px #e8b44e88, inset 0 0 6cqw #000a;
}
.skin .coins { gap: 1cqw 4cqw; padding: 0 2cqw; }
/* Grid area is ~51.9cqw tall: three rows of coins must fit inside it. */
.skin .coin { width: 100%; max-width: 15.6cqw; min-width: 44px; justify-self: center; }
.skin .coin-tag { font-size: max(9px, 2.2cqw); padding: .6cqw 1.2cqw; }

.skin .result-banner {
  position: absolute;
  left: 8%; top: 79%; width: 84%;
  min-width: 0; margin: 0;
  padding: 2.4cqw 4cqw;
  text-align: center;
  pointer-events: none;
}
.skin .result-banner strong { font-size: 6.6cqw; }
.skin .result-banner small { font-size: max(11px, 2.8cqw); }

@keyframes skin-spin-idle {
  0%, 100% { text-shadow: 0 .5cqw 0 #6a0206, 0 0 2cqw #ffd0a066; }
  50% { text-shadow: 0 .5cqw 0 #6a0206, 0 0 5cqw #fff0c0, 0 0 9cqw #ffb43c; }
}

/* ---------- Artwork offer card ---------- */
.offer-image-link[hidden] { display: none; }
.offer-has-image .offer-card {
  max-width: 420px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
/* The artwork carries all the copy: hide the HTML card text, small print and developer note. */
.offer-has-image .offer-card > :not(.offer-image-link):not(.close-btn) { display: none; }
.offer-image-link {
  display: block;
  border-radius: 18px;
  transition: transform .15s ease, filter .2s;
}
.offer-image-link:hover { transform: translateY(-2px); filter: brightness(1.05) drop-shadow(0 0 18px #ffb43c88); }
.offer-image-link:active { transform: translateY(1px); }
.offer-image { display: block; width: 100%; height: auto; filter: drop-shadow(0 18px 40px #000c); }
.offer-has-image .close-btn { top: 4%; right: 2%; z-index: 2; }
.offer-has-image .overlay, .offer-has-image.overlay { padding-top: 16px; }

/* ---------- Reduced motion: short fades only ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
  .panel, .panel-coins, [data-stage="coins"] .panel-reels, [data-stage="coins"] .panel-coins { transform: none !important; }
  .bonus-banner, [data-state="SCATTER"] .bonus-banner { transform: translate(-50%, -50%) !important; }
  .result-banner { transform: none !important; }
  .coin-inner, .coin.is-revealed .coin-inner { transform: none !important; transition: none; }
  .coin-face { transition: opacity 200ms ease; }
  .coin-back { transform: none; opacity: 0; }
  .coin.is-revealed .coin-back { opacity: 1; }
  .coin.is-revealed .coin-front { opacity: 0; }
  .result-banner.is-shown .spark { opacity: 1; }
  .ring { animation: none; border-top-color: #ffd77633; }
}