/* =========================================================
   0) RESET / BASE
   ========================================================= */
* {
  box-sizing: border-box;
}

/* ===== Viewport wrapper (letterbox + fixed aspect ratio) ===== */
html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  background: #000;
  /* black letterbox bars */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* ---- the stage (your full game canvas) ---- */
.stage {
  position: absolute;
  transform-origin: center center;
  background: #1a0730 url("./assets/bg_land.png") center/cover no-repeat;

}

/* explicit design sizes per orientation */
.stage.landscape {
  width: 1920px;
  height: 1080px;

}

/* portrait mode variant (different aspect/background) */
.stage.portrait {
  width: 1080px;
  height: 1920px;
  background: #1a0730 url("./assets/bg_port.png") center/cover no-repeat;
}

/* this is the magic: auto-scale the whole thing */
body {
  position: relative;
}


/* =========================================================
   2) HEADER (pills exactly like reference, split L/R)
   ========================================================= */
/* Container: use flex so we can create a large, elastic center gap */
header.jackpots {
  --center-gap: 340px;
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 14px;
  /* small gap between neighbors in each side */
  padding: 24px 16px 10px;
}

/* Compact pill */
.pill {
  --accent: #ffd166;
  /* default; overridden per tier */
  width: 300px;
  height: 74px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(0, 0, 0, .78), rgba(0, 0, 0, .64));
  border: 3px solid var(--accent);
  box-shadow: 0 6px 14px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(255, 255, 255, .06);
  padding: 6px 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
}

/* Split the row: big middle gap between pill #2 and pill #3 */
header.jackpots .pill:nth-child(3) {
  margin-right: var(--center-gap);
}

header.jackpots .pill:nth-child(4) {
  margin-left: var(--center-gap);
}

/* Top line (symbols + label sprite image) */
.pill .top {
  display: block;
  align-items: center;
  text-align: center;
  line-height: 1;
  margin-top: -22px;
  margin-bottom: 4px;
}

.pill .sym {
  height: 48px;
  object-fit: contain;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .7));
}

.pill .label {
  height: 38px;
  /* label is an img sprite */
}

/* Second line (uBTC value) */
.pill .sub {
  color: white;
  text-align: center;
  font-size: 24px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  opacity: .95;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .85);
}

.pill .unit {
  opacity: .95;
}

/* Tier accents */
.pill.grand {
  --accent: #ffbf1a;
}

/* gold */
.pill.major {
  --accent: #ff2f2f;
}

/* red  */
.pill.minor {
  --accent: #2f67ff;
}

/* blue */
.pill.mini {
  --accent: #38d66a;
}

/* green */

/* STANDARD single header bar (kept as-is) */
.jp.single {
  grid-column: 1 / -1;
  height: 72px;
  border-radius: 20px;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: #2c2100;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .35), inset 0 0 0 4px #e0b84a;
}

.jp.single .label {
  font-weight: 900;
  letter-spacing: .08em
}

.jp.single .amt {
  font-weight: 900;
  color: #ffd166;
  font-size: 22px
}

/* Header mode switch */
#jackpots[data-mode="standard"] .jp.group {
  display: none !important
}

#jackpots[data-mode="standard"] .jp.single {
  display: flex !important
}

#jackpots[data-mode="group"] .jp.group {
  display: flex !important
}

#jackpots[data-mode="group"] .jp.single {
  display: none !important
}

/* =========================================================
   3) LIGHTS BAR UNDER HEADER
   ========================================================= */
.lights {
  position: relative;
  width: 864px;
  margin: 65px auto;
  z-index: 2;
  height: 46px;
  background:
    radial-gradient(circle, rgba(255, 255, 255, .95) 35%, transparent 36%) 0 20px/68px 20px repeat-x,
    radial-gradient(circle, rgba(255, 210, 90, .55) 20%, transparent 21%) 0 20px/68px 20px repeat-x;
  mix-blend-mode: screen;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .6));
}

/* =========================================================
   4) TITLE
   ========================================================= */
h1 {
  margin: 10px 0 8px;
  text-align: center;
  font-weight: 900;
  letter-spacing: .10em;
  font-size: 56px;
  color: #ffd166;
  text-shadow:
    0 2px 0 rgba(0, 0, 0, .8),
    0 8px 22px rgba(0, 0, 0, .65),
    0 0 18px rgba(255, 209, 102, .35);
}

/* =========================================================
   5) ORNAMENTS (big suits in landscape)
   ========================================================= */
.ornament {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  filter: drop-shadow(0 14px 28px rgba(0, 0, 0, .5));
  opacity: .98;
}

.ornament.spade {
  left: 166px;
  top: 262px;
  width: 268px;
}

.ornament.heart {
  right: 112px;
  top: 302px;
  width: 300px;
}

.ornament.diamond {
  left: 175px;
  bottom: 148px;
  width: 204px;
}

.ornament.club {
  right: 132px;
  bottom: 162px;
  width: 232px;
}

/* hide on tight portrait */

/* =========================================================
   6) BOARD (grid + spacing)
   ========================================================= */
.board {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(4, 160px);
  gap: 26px 94px;
  /* row, column */
  justify-content: center;
  padding: 12px 40px 32px;
  margin: -42px auto;
  max-width: 1180px;
}

/* =========================================================
   7) CARDS (flip, back, faces)
   ========================================================= */
.card {
  width: 160px;
  height: 220px;
  perspective: 1000px;
  cursor: pointer;
}

.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform .55s;
  transform-style: preserve-3d;
}

.card.revealed .card-inner {
  transform: rotateY(180deg)
}

.face,
.back {
  position: absolute;
  color: white;
  inset: 0;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.2rem;
  backface-visibility: hidden;
  box-shadow: 0 26px 50px rgba(0, 0, 0, .55);
}

/* patterned backs */
.back {
  background: #ffffff url("./assets/card_red.png") center/cover no-repeat;
}

.face {
  transform: rotateY(180deg);
  background: transparent;
  color: inherit;
  overflow: hidden;
}

/* Image inside the face */
.face>img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* keep art aspect without cropping */
  border-radius: inherit;
  /* follow the card’s rounded corners */
  display: block;
}

.face[data-sym="mini"] {
  background: url("./assets/clubs.png") center/contain no-repeat;
  background-color: white;
  background-position: bottom;
}

.face[data-sym="minor"] {
  background: url("./assets/diamonds.png") center/contain no-repeat;
  background-color: white;
  background-position: bottom;
}

.face[data-sym="major"] {
  background: url("./assets/hearts.png") center/contain no-repeat;
  background-color: white;
  background-position: bottom;
}

.face[data-sym="grand"],
.face[data-sym="jackpot"] {
  background: url("./assets/spades.png") center/contain no-repeat;
  background-color: white;
  background-position: bottom;
}

/* =========================================================
   8) WIN OVERLAY
   ========================================================= */
.banner {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, .65);
  font-size: 2.6rem;
  font-weight: 900;
  letter-spacing: .06em;
  text-align: center;
  padding: 1rem;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .65);
}

/* =========================================================
   9) UTILITIES
   ========================================================= */
[hidden] {
  display: none !important;
}

/* ================== Stats Popover ================== */
.stats-popover {
  position: absolute;
  /* positioned via JS inside #stage */
  width: 300px;
  border-radius: 16px;
  padding: 12px 14px 14px;
  background: linear-gradient(180deg, rgba(24, 24, 24, .85), rgba(24, 24, 24, .75));
  border: 3px solid #f0c64d;
  /* gold rim */
  box-shadow:
    0 20px 40px rgba(0, 0, 0, .55),
    inset 0 0 0 1px rgba(255, 255, 255, .06);
  color: #fff;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 20;
}

/* arrow pointer below the top edge */
.stats-popover::before {
  content: "";
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 18px;
  background: linear-gradient(180deg, rgba(24, 24, 24, .85), rgba(24, 24, 24, .75));
  border-left: 3px solid #f0c64d;
  border-top: 3px solid #f0c64d;
  transform-origin: center;
  transform: translateX(-50%) rotate(45deg);
  box-shadow: -4px -4px 10px rgba(0, 0, 0, .2);
}

/* typography */
.stats-title {
  font-weight: 900;
  font-size: 28px;
  text-align: center;
  letter-spacing: .02em;
}

.stats-date {
  opacity: .65;
  text-align: center;
  font-size: 20px;
  margin-top: 2px;
}

.stats-amount {
  margin-top: 6px;
  text-align: center;
  font-weight: 900;
  font-size: 28px;
  color: #ffd166;
  /* yellow */
  text-shadow: 0 2px 10px rgba(0, 0, 0, .45);
}

.stats-amount.bottom {
  margin-top: 8px;
  font-size: 26px;
  color: white;
}

/* rows */
.stats-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  padding: 8px 6px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04);
  font-weight: 400;
  font-size: 24px;
  opacity: 0.75;
}

.stats-row span:last-child {
  opacity: .95;
}

/* hide helper */
[hidden].stats-popover {
  display: none !important;
}

.portrait {
  .jackpots {
    --center-gap: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 64px 0;
  }

  .jackpots> :nth-child(2) {
    justify-self: start;
  }

  .jackpots> :nth-child(4) {
    justify-self: start;
  }

  .jackpots> :nth-child(3) {
    justify-self: end;
  }

  .jackpots> :nth-child(5) {
    justify-self: end;
  }

  .ornament.spade {
    left: 56px;
    top: 1217px;
    width: 268px;
  }

  .ornament.heart {
    right: 72px;
    top: 1256px;
    width: 300px;
  }

  .ornament.diamond {
    left: 272px;
    bottom: 33px;
    width: 204px;
  }

  .ornament.club {
    right: 218px;
    bottom: 44px;
    width: 232px;
  }
}

/* animations */

/* Common ornament motion */
.ornament {
  will-change: transform;
  transform-origin: center;
  animation: float var(--float-dur, 6s) ease-in-out infinite alternate;
  /* optional: extra depth flicker */
  filter: drop-shadow(0 14px 28px rgba(0, 0, 0, .5));
}

/* Give each ornament its own phase/duration so they desync a bit */
.ornament.spade {
  --float-dur: 4.2s;
  animation-delay: .2s;
}

.ornament.heart {
  --float-dur: 5.4s;
  animation-delay: 1.1s;
}

.ornament.diamond {
  --float-dur: 5.8s;
  animation-delay: .6s;
}

.ornament.club {
  --float-dur: 4.9s;
  animation-delay: .9s;
}

/* Soft bob + tiny yaw */
@keyframes float {
  0% {
    transform: translateY(0px) rotate(0deg) scale(1);
  }

  50% {
    transform: translateY(-28px) rotate(-1deg) scale(1.005);
  }

  100% {
    transform: translateY(0px) rotate(0.6deg) scale(1);
  }
}

/* Quick micro-jiggle: short burst of sub-pixel translations/rotations */
.ornament.giggle {
  animation: giggle 260ms ease-in-out;
}

@keyframes giggle {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }

  25% {
    transform: translate(1px, -1px) rotate(-1.2deg);
  }

  50% {
    transform: translate(-1px, 1px) rotate(1.2deg);
  }

  75% {
    transform: translate(.6px, -.6px) rotate(-.8deg);
  }

  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ornament {
    animation: none !important;
  }
}

/* --- Ornament internals (no change to your existing rules) --- */
.ornament>.orn-seq {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
}

/* Glow behind each ornament (uses a CSS var) */
.ornament::before {
  content: "";
  position: absolute;
  top: 32%;
  left: 41%;
  width: 200%;
  height: 200%;
  transform: translate(-50%, -50%) scale(1);
  background: var(--glow) center / contain no-repeat;
  opacity: 0.95;
  z-index: -1;
  pointer-events: none;
}

/* Point each class to its glow image */
.ornament.spade {
  --glow: url("./assets/spade_light.png");
}

.ornament.heart {
  --glow: url("./assets/heart_light.png");
}

.ornament.diamond {
  --glow: url("./assets/diamond_light.png");
}

.ornament.club {
  --glow: url("./assets/clubs_light.png");
}

.ornament.heart::before {
  top: 21%;
  left: 34%;
  transform: translate(-50%, -50%) scale(1);
}

.ornament.spade::before {
  top: 27%;
  left: 52%;
  transform: translate(-50%, -50%) scale(1);
}

.ornament.diamond::before {
  top: 32%;
  left: 41%;
  transform: translate(-50%, -50%) scale(1);
}

.ornament.club::before {
  top: 32%;
  left: 41%;
  transform: translate(-50%, -50%) scale(1);
}

/* The frame overlay is only visible during the giggle burst */
.ornament>.orn-seq {
  opacity: 0;
}

.ornament.giggle>.orn-seq {
  opacity: 1;
}

/* overlay fills wrapper and rotates around center */
.ornament>.orn-seq {
  transform-origin: 50% 50%;
  will-change: transform;
}

/* per-ornament fixed tilt (example angles) */
.ornament.spade>.orn-seq {
  transform: rotate(-7deg);
  top: -8px;
  left: -16px;
}

/* 15° left */
.ornament.heart>.orn-seq {
  transform: rotate(7deg);
  top: 16px;
  left: -16px;
}

/* 15° right */
.ornament.diamond>.orn-seq {
  transform: rotate(-15deg);
}

/* tweak as needed */
.ornament.club>.orn-seq {
  top: -4px;
  left: 2px;
  transform: rotate(12deg);
}

/* tweak as needed */

/* if you previously added an overlay tilt animation, disable it */
.ornament.giggle>.orn-seq {
  animation: none !important;
}

/* ===== Intro overlay ===== */
#intro {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: transparent;
  /* nothing behind, stays see-through */
  z-index: 100;
  /* above ornaments/board/header */
  pointer-events: none;
  /* ignore clicks */
}

#intro .intro-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  transform: scale(.72);
  animation: intro-zoom 900ms cubic-bezier(.2, .8, .2, 1) forwards;
  filter: drop-shadow(0 10px 28px rgba(0, 0, 0, .55));
}

/* Two rows (JACKPOT / minigame) */
#intro .word {
  display: inline-flex;
  align-items: flex-end;
  gap: 0px;
  line-height: 1;
}

/* sizing difference like your reference */
#intro .word-top {
  transform: scale(1.18);
}

#intro .word-bottom {
  transform: scale(0.95);
}

/* Single letter stack: front + back + glow */
.ltr {
  position: relative;
  display: inline-block;
  margin-left: -3px;
}

.ltr {
  --offsetY: 0px;
}

.ltr[data-ch="g"] {
  --offsetY: 8px;
  margin-left: -5px;

  img.front {
    height: 88px;

    @media (min-width: 1400px) {
      height: 112px;
    }
  }

  img.back {
    width: 120%;
    height: 105%;
  }

  img.glow {
    width: 130%;
    height: 135%;
    transform: scale(1);
    filter: blur(.3px);
    opacity: .75;
  }
}

/* raise 'i' slightly and pull it closer to the next letter */
.ltr[data-ch="i"] {
  --offsetY: -3px;
  margin-left: -6px;

  img.front {
    height: 88px;

    @media (min-width: 1400px) {
      height: 112px;
    }
  }

  img.back {
    width: 120%;
    height: 105%;
  }

  img.glow {
    width: 130%;
    height: 135%;
    transform: scale(1);
    filter: blur(.3px);
    opacity: .75;
  }
}

/* front determines intrinsic size; others stretch to it */
.ltr img.front {
  display: block;
  height: 84px;
  /* adjust once for your art set */
  width: auto;
}

@media (min-width: 1400px) {
  .ltr img.front {
    height: 104px;
  }
}

.ltr img.front,
.ltr img.back,
.ltr img.glow {
  background: transparent;
}

.ltr img.back,
.ltr img.glow {
  position: absolute;
  inset: 0;
  object-fit: contain;
  display: block;
  z-index: -1;
}

.ltr img.back {
  width: 105%;
  height: 105%;
}

/* glow behind, a bit larger for halo */
.ltr img.glow {
  width: 130%;
  height: 130%;
  transform: scale(1);
  filter: blur(.3px);
  opacity: .75;
}

/* per-letter pop-in (staggered) */
.ltr {
  opacity: 0;
  transform: translateY(calc(8px + var(--offsetY))) scale(.92);
  animation: letter-pop 520ms ease-out forwards;
}

@keyframes letter-pop {
  0% {
    opacity: 0;
    transform: translateY(calc(8px + var(--offsetY))) scale(.92);
  }

  60% {
    opacity: 1;
    transform: translateY(calc(-2px + var(--offsetY))) scale(1.04);
  }

  100% {
    opacity: 1;
    transform: translateY(var(--offsetY)) scale(1);
  }
}

@keyframes intro-zoom {
  0% {
    transform: scale(.72);
  }

  100% {
    transform: scale(1);
  }
}

.stage.intro-only>*:not(#intro) {
  visibility: hidden !important;
}

/* Make the iframe itself transparent by default */
html,
body {
  background: transparent !important;
}

/* 0) BLANK MODE — default at load: everything invisible, stage bg cleared */
.stage.blank {
  background: transparent !important;
}

.stage.blank>* {
  visibility: hidden !important;
}

/* 1) INTRO-ONLY MODE — show only #intro, keep stage bg transparent */
.stage.intro-only {
  background: transparent !important;
}

.stage.intro-only>*:not(#intro) {
  visibility: hidden !important;
}

.stage.intro-only>#intro {
  visibility: visible !important;
}

/* ---- WIN ANIMATIONS ---- */

/* GRAND JACKPOT WIN */

/* Overlay container */
#grandWin {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 9999;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.75);
  animation: gw-overlay-in 0.3s ease-out forwards;
}

#grandWin[hidden] {
  display: none !important;
}

@keyframes gw-overlay-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Main wrapper - fixed size container */
#grandWin .gw-wrap {
  position: relative;
  width: 1500px;
  height: 800px;
  transform-origin: center;
  animation: gw-zoom-in 650ms cubic-bezier(.2, .8, .2, 1) forwards;
}

@keyframes gw-zoom-in {
  from {
    transform: scale(.78);
  }

  to {
    transform: scale(1);
  }
}

/* ===== LAYER 1: Yellow light rays (furthest background) ===== */
.gw-rays {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  z-index: 1;
  mix-blend-mode: screen;
  animation: gw-fade-in 0.8s ease-out 0.2s forwards;
  margin-top: -300px;
}

/* ===== LAYER 2: Yellow glow ===== */
.gw-glow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  z-index: 3;
  mix-blend-mode: screen;
  animation: gw-fade-in 0.8s ease-out 0.25s forwards, gw-pulse 2s ease-in-out 1s infinite;
}

/* Added grand_light_1 and spade-glow risers instead of sparkles */
.gw-light1 {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  z-index: 2;
  mix-blend-mode: screen;
  animation: gw-fade-in 0.9s ease-out 0.25s forwards;
  margin-top: -160px;
}

.gw-risers {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  margin-top: -400px;
}

.gw-risers .rise {
  position: absolute;
  left: 50%;
  top: 58%;
  --dx: 0px;
  transform: translateX(calc(-50% + var(--dx))) translateY(-50%);
  opacity: 0;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.5));
  animation: rise-up 6s cubic-bezier(.22, .61, .36, 1) infinite;
}


.gw-risers .r1 {
  width: 24px;
  animation-delay: 0.0s;
  --dx: -220px;
}

.gw-risers .r2 {
  width: 40px;
  animation-delay: 0.8s;
  --dx: -120px;
}

.gw-risers .r3 {
  width: 32px;
  animation-delay: 1.6s;
  --dx: -20px;
}

.gw-risers .r4 {
  width: 60px;
  animation-delay: 2.4s;
  --dx: 80px;
}

.gw-risers .r5 {
  width: 28px;
  animation-delay: 3.2s;
  --dx: 160px;
}

.gw-risers .r6 {
  width: 48px;
  animation-delay: 4.0s;
  --dx: 240px;
}

.gw-risers .r7 {
  width: 22px;
  animation-delay: 4.8s;
  --dx: -280px;
}

.gw-risers .r8 {
  width: 36px;
  animation-delay: 5.6s;
  --dx: 260px;
}

@keyframes rise-up {
  0% {
    opacity: 0;
    transform: translateX(calc(-50% + var(--dx))) translateY(0) scale(0.7) rotate(0deg);
  }

  10% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateX(calc(-50% + var(--dx))) translateY(-400px) scale(1.05) rotate(10deg);
  }
}

/* Red banner/shadow inside title container - EXACTLY behind GRAND JACKPOT text, 10px larger */
.gw-title .gw-spray {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  object-fit: contain;
  opacity: 1;
  z-index: 1;
}

/* ===== LAYER 5: Spades (in front of sparkles and shadow, behind text) ===== */
.gw-spades {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 5;
  animation: gw-fade-in 0.6s ease-out 0.4s forwards;
}

.gw-spades .s {
  position: absolute;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.7));
  /* Allow spades to overlap each other */
  animation: spade-pulse 1.2s ease-in-out infinite alternate;
}

/* Phase offsets: group (1,3,5,7) vs (2,4,6) */
.gw-spades.top .t1,
.gw-spades.top .t3,
.gw-spades.top .t5,
.gw-spades.top .t7 {
  animation-delay: 0s;
}

.gw-spades.top .t2,
.gw-spades.top .t4,
.gw-spades.top .t6 {
  animation-delay: -0.6s;
}

/* Bottom pairs: (b1 with b4) vs (b2 with b3) */
.gw-spades.bottom .b1,
.gw-spades.bottom .b4 {
  animation-delay: 0s;
}

.gw-spades.bottom .b2,
.gw-spades.bottom .b3 {
  animation-delay: -0.6s;
}

/* Top row: 7 spades - spade_2, spade_4, spade_9, spade_1 (middle), spade_9, spade_4, spade_2 */
/* Right side spades (t5, t6, t7) are flipped horizontally (scaleX(-1)) ONLY - NO ROTATION */
.gw-spades.top .t1 {
  left: 200px;
  top: 140px;
  width: 300px;
  z-index: 1;
}

.gw-spades.top .t2 {
  left: 340px;
  top: 110px;
  width: 300px;
  z-index: 2;
}

.gw-spades.top .t3 {
  left: 460px;
  top: 90px;
  width: 320px;
  z-index: 3;
}

.gw-spades.top .t4 {
  left: 580px;
  top: 70px;
  width: 340px;
  z-index: 4;
}

.gw-spades.top .t5 {
  left: 700px;
  top: 90px;
  width: 320px;
  z-index: 3;
  animation-name: spade-pulse-flip;
}

.gw-spades.top .t6 {
  left: 860px;
  top: 110px;
  width: 300px;
  z-index: 2;
  animation-name: spade-pulse-flip;
}

.gw-spades.top .t7 {
  left: 980px;
  top: 140px;
  width: 300px;
  z-index: 1;
  animation-name: spade-pulse-flip;
}

/* Bottom row: 4 spades - spade_6, spade_3 (left), spade_3, spade_6 (right, flipped horizontally) */
/* Right side spades (b3, b4) are flipped horizontally (scaleX(-1)) ONLY - NO ROTATION */
.gw-spades.bottom {
  animation-delay: 0.5s;
}

.gw-spades.bottom .b1 {
  left: 460px;
  bottom: 100px;
  width: 180px;
  z-index: 1;
}

.gw-spades.bottom .b2 {
  left: 540px;
  bottom: 120px;
  width: 180px;
  z-index: 2;
}

.gw-spades.bottom .b3 {
  left: 760px;
  bottom: 120px;
  width: 180px;
  z-index: 2;
  /* Second from right: spade_3.png flipped horizontally - larger */
  animation-name: spade-pulse-flip;
}

.gw-spades.bottom .b4 {
  left: 840px;
  bottom: 100px;
  width: 180px;
  z-index: 1;
  /* Far right: spade_6.png flipped horizontally - larger */
  animation-name: spade-pulse-flip;
}

/* ===== LAYER 6: GRAND JACKPOT text (main, prominent) ===== */
.gw-title {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -52%);
  opacity: 0;
  z-index: 6;
  filter: drop-shadow(0 12px 32px rgba(0, 0, 0, 0.8));
  animation: gw-title-appear 0.6s ease-out 0.5s forwards, hover-y 3.2s ease-in-out 1s infinite alternate;
  /* Container for text and banner */
  display: inline-block;
}

.gw-title .txt {
  display: block;
  height: auto;
  width: auto;
  max-width: 1300px;
  max-height: 200px;
  position: relative;
  z-index: 2;
  /* Text in front of banner */
}

/* ===== LAYER 7: WIN text (foreground, below GRAND JACKPOT) ===== */
.gw-win {
  position: absolute;
  margin-top: 30px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, 15%);
  display: grid;
  place-items: center;
  opacity: 0;
  z-index: 7;
  filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.8));
  animation: gw-win-appear 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.6s forwards;
}

.gw-win .plate {
  width: auto;
  height: auto;
  max-width: 650px;
  max-height: 200px;
}

.gw-win .txt {
  position: absolute;
  width: auto;
  height: auto;
  max-width: 520px;
  max-height: 200px;
}

/* ===== Won amount display ===== */
.gw-amount {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(55%);
  margin-top: 35px;
  opacity: 0;
  z-index: 8;
  filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.8));
  animation: gw-amount-appear 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.8s forwards;
  pointer-events: none;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.gw-amount .amount-canvas {
  display: block;
  width: 100%;
  max-width: 1500px;
  height: auto;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}

/* Animations */
@keyframes gw-fade-in {
  from {
    opacity: 0;
    transform: scale(0.9);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes gw-title-appear {
  from {
    opacity: 0;
    transform: translate(-50%, -52%) scale(0.9);
  }

  to {
    opacity: 1;
    transform: translate(-50%, -52%) scale(1);
  }
}

@keyframes gw-win-appear {
  from {
    opacity: 0;
    transform: translate(-50%, 15%) scale(0.85);
  }

  60% {
    opacity: 1;
    transform: translate(-50%, 11%) scale(1.05);
  }

  to {
    opacity: 1;
    transform: translate(-50%, 15%) scale(1);
  }
}

@keyframes gw-amount-appear {
  from {
    opacity: 0;
    transform: translateY(55%) scale(0.85);
    margin-top: 35px;
  }

  60% {
    opacity: 1;
    transform: translateY(52%) scale(1.05);
    margin-top: 35px;
  }

  to {
    opacity: 1;
    transform: translateY(55%) scale(1);
    margin-top: 35px;
  }
}

@keyframes gw-amount-appear-portrait {
  from {
    opacity: 0;
    transform: translateY(55%) scale(0.478125);
    margin-top: 35px;
  }

  60% {
    opacity: 1;
    transform: translateY(52%) scale(0.590625);
    margin-top: 35px;
  }

  to {
    opacity: 1;
    transform: translateY(55%) scale(0.5625);
    margin-top: 35px;
  }
}

@keyframes hover-y {
  0% {
    transform: translate(-50%, -52%);
  }

  100% {
    transform: translate(-50%, calc(-52% - 30px));
  }
}

@keyframes gw-rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes gw-pulse {

  0%,
  100% {
    opacity: 1;
    filter: brightness(1);
  }

  50% {
    opacity: 0.8;
    filter: brightness(1.2);
  }
}

@keyframes spade-pulse {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(1.15);
  }
}

/* Maintain horizontal flip while pulsing for mirrored spades */
@keyframes spade-pulse-flip {
  0% {
    transform: scaleX(-1) scale(1);
  }

  100% {
    transform: scaleX(-1) scale(1.15);
  }
}

@keyframes gw-sparkle {

  0%,
  100% {
    opacity: 0.4;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.05);
  }
}

/* END OF GRAND JACKPOT */

/* MAJOR JACKPOT WIN */

/* Overlay container */
#majorWin {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 9999;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.75);
  animation: gw-overlay-in 0.3s ease-out forwards;
}

#majorWin[hidden] {
  display: none !important;
}

/* Main wrapper - fixed size container */
#majorWin .mj-wrap {
  position: relative;
  width: 1500px;
  height: 800px;
  transform-origin: center;
  animation: gw-zoom-in 650ms cubic-bezier(.2, .8, .2, 1) forwards;
}

/* ===== LAYER 1: Pink light background ===== */
.mj-pink-light {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  z-index: 1;
  mix-blend-mode: screen;
  animation: gw-fade-in 0.9s ease-out 0.25s forwards;
  margin-top: 160px;
}

.mj-glow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  z-index: 2;
  mix-blend-mode: screen;
  animation: gw-fade-in 0.8s ease-out 0.25s forwards, gw-pulse 2s ease-in-out 1s infinite;
  margin-top: 230px;
}

/* Sparkles layer - 20% smaller and 20% lower */
.mj-spark {
  position: absolute;
  inset: 0;
  width: 80%;
  height: 80%;
  object-fit: contain;
  mix-blend-mode: screen;
  opacity: 0;
  z-index: 3;
  top: 20%;
  left: 10%;
  right: auto;
  bottom: auto;
}

.mj-spark.a {
  animation: mj-sparkle 2s ease-in-out 0.6s infinite;
}

.mj-spark.b {
  animation: mj-sparkle 2s ease-in-out 1.3s infinite;
}

/* Rising heart glow particles */
.mj-risers {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  margin-top: -400px;
}

.mj-risers .rise {
  position: absolute;
  left: 50%;
  top: 58%;
  --dx: 0px;
  transform: translateX(calc(-50% + var(--dx))) translateY(-50%);
  opacity: 0;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.5));
  animation: rise-up 6s cubic-bezier(.22, .61, .36, 1) infinite;
}

.mj-risers .r1 {
  width: 24px;
  animation-delay: 0.0s;
  --dx: -220px;
}

.mj-risers .r2 {
  width: 40px;
  animation-delay: 0.8s;
  --dx: -120px;
}

.mj-risers .r3 {
  width: 32px;
  animation-delay: 1.6s;
  --dx: -20px;
}

.mj-risers .r4 {
  width: 60px;
  animation-delay: 2.4s;
  --dx: 80px;
}

.mj-risers .r5 {
  width: 28px;
  animation-delay: 3.2s;
  --dx: 160px;
}

.mj-risers .r6 {
  width: 48px;
  animation-delay: 4.0s;
  --dx: 240px;
}

.mj-risers .r7 {
  width: 22px;
  animation-delay: 4.8s;
  --dx: -280px;
}

.mj-risers .r8 {
  width: 36px;
  animation-delay: 5.6s;
  --dx: 260px;
}

/* Red banner/shadow inside title container */
.mj-title .mj-spray {
  position: absolute;
  left: 50%;
  top: 43%;
  transform: translate(-50%, -50%);
  object-fit: contain;
  opacity: 1;
  z-index: 1;
}

/* ===== Hearts (in front of particles, behind text) ===== */
.mj-hearts {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 5;
  animation: gw-fade-in 0.6s ease-out 0.4s forwards;
}

.mj-hearts .h {
  position: absolute;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.7));
  animation: heart-tap-tap-pause 3s ease-in-out infinite;
}

/* All hearts pulse together in sync for tap-tap-pause pattern */

/* Center row: 3 large hearts */
.mj-hearts.center .c1 {
  left: 365px;
  top: 420px;
  width: 260px;
  z-index: 2;
}

.mj-hearts.center .c2 {
  left: 540px;
  top: 160px;
  width: 400px;
  z-index: 3;
}

.mj-hearts.center .c3 {
  left: 885px;
  top: 420px;
  width: 260px;
  transform: scaleX(-1);
  z-index: 2;
  animation-name: heart-tap-tap-pause-flip;
  /* Right: heart_9.png (flipped) */
}

/* Bottom row: 6 external hearts - heart_2, heart_6, heart_3, heart_3 (flipped), heart_6 (flipped), heart_2 (flipped) */
.mj-hearts.bottom .b1 {
  left: 200px;
  bottom: 190px;
  width: 140px;
  z-index: 1;
}

.mj-hearts.bottom .b2 {
  left: 460px;
  bottom: 40px;
  width: 80px;
  z-index: 2;
}

.mj-hearts.bottom .b3 {
  left: 610px;
  bottom: 20px;
  width: 140px;
  z-index: 1;
}

.mj-hearts.bottom .b4 {
  left: 760px;
  bottom: 20px;
  width: 140px;
  transform: scaleX(-1);
  z-index: 1;
  animation-name: heart-tap-tap-pause-flip;
  /* heart_3.png (flipped) */
}

.mj-hearts.bottom .b5 {
  left: 960px;
  bottom: 40px;
  width: 80px;
  transform: scaleX(-1);
  z-index: 2;
  animation-name: heart-tap-tap-pause-flip;
  /* heart_6.png (flipped) */
}

.mj-hearts.bottom .b6 {
  left: 1170px;
  bottom: 190px;
  width: 140px;
  transform: scaleX(-1);
  z-index: 1;
  animation-name: heart-tap-tap-pause-flip;
  /* heart_2.png (flipped, end) */
}

/* ===== MAJOR JACKPOT text ===== */
.mj-title {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -52%);
  opacity: 0;
  z-index: 6;
  filter: drop-shadow(0 12px 32px rgba(0, 0, 0, 0.8));
  animation: gw-title-appear 0.6s ease-out 0.5s forwards, hover-y 3.2s ease-in-out 1s infinite alternate;
  display: inline-block;
}

.mj-title .txt {
  display: block;
  height: 230px;
  width: auto;
  position: relative;
  z-index: 2;
}

/* ===== WIN text ===== */
.mj-win {
  position: absolute;
  margin-top: 30px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, 15%);
  display: grid;
  place-items: center;
  opacity: 0;
  z-index: 7;
  filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.8));
  animation: gw-win-appear 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.6s forwards;
}

.mj-win .plate {
  width: auto;
  height: auto;
  max-width: 650px;
  max-height: 230px;
}

.mj-win .txt {
  position: absolute;
  width: auto;
  height: auto;
  max-width: 520px;
  max-height: 230px;
}

/* ===== Won amount display ===== */
.mj-amount {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(55%);
  margin-top: 35px;
  opacity: 0;
  z-index: 8;
  filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.8));
  animation: gw-amount-appear 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.8s forwards;
  pointer-events: none;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.mj-amount .amount-canvas {
  display: block;
  width: 100%;
  max-width: 1500px;
  height: auto;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}

/* Tap tap pause animation: 2 quick pulses, then 2 sec pause */
@keyframes heart-tap-tap-pause {
  0% {
    transform: scale(1);
  }

  5% {
    transform: scale(1.15);
  }

  /* first tap */
  10% {
    transform: scale(1);
  }

  15% {
    transform: scale(1.15);
  }

  /* second tap */
  20% {
    transform: scale(1);
  }

  100% {
    transform: scale(1);
  }

  /* pause 2.4s */
}

@keyframes heart-tap-tap-pause-flip {
  0% {
    transform: scaleX(-1) scale(1);
  }

  5% {
    transform: scaleX(-1) scale(1.15);
  }

  /* first tap */
  10% {
    transform: scaleX(-1) scale(1);
  }

  15% {
    transform: scaleX(-1) scale(1.15);
  }

  /* second tap */
  20% {
    transform: scaleX(-1) scale(1);
  }

  100% {
    transform: scaleX(-1) scale(1);
  }

  /* pause 2.4s */
}

@keyframes mj-sparkle {

  0%,
  100% {
    opacity: 0.4;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.05);
  }
}

/* END OF MAJOR JACKPOT */

/* MINI JACKPOT WIN */

/* Overlay container */
#miniWin {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 9999;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.75);
  animation: gw-overlay-in 0.3s ease-out forwards;
}

#miniWin[hidden] {
  display: none !important;
}

/* Main wrapper - fixed size container */
#miniWin .mn-wrap {
  position: relative;
  width: 1500px;
  height: 800px;
  transform-origin: center;
  animation: gw-zoom-in 650ms cubic-bezier(.2, .8, .2, 1) forwards;
}

/* ===== LAYER 1: Background light effects ===== */
.mn-light {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  z-index: 1;
  mix-blend-mode: screen;
  animation: gw-fade-in 0.9s ease-out 0.25s forwards;
}

.mn-glow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  z-index: 2;
  mix-blend-mode: screen;
  animation: gw-fade-in 0.8s ease-out 0.25s forwards, gw-pulse 2s ease-in-out 1s infinite;
}

.mn-sparkle {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: screen;
  opacity: 0;
  z-index: 3;
  animation: gw-fade-in 0.8s ease-out 0.3s forwards, gw-pulse 1.5s ease-in-out 1.2s infinite;
  margin-top: -160px;
}

/* Rising club glow particles */
.mn-risers {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  margin-top: -400px;
}

.mn-risers .rise {
  position: absolute;
  left: 50%;
  top: 58%;
  --dx: 0px;
  transform: translateX(calc(-50% + var(--dx))) translateY(-50%);
  opacity: 0;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.5));
  animation: rise-up 6s cubic-bezier(.22, .61, .36, 1) infinite;
}

.mn-risers .r1 {
  width: 24px;
  animation-delay: 0.0s;
  --dx: -220px;
}

.mn-risers .r2 {
  width: 40px;
  animation-delay: 0.8s;
  --dx: -120px;
}

.mn-risers .r3 {
  width: 32px;
  animation-delay: 1.6s;
  --dx: -20px;
}

.mn-risers .r4 {
  width: 60px;
  animation-delay: 2.4s;
  --dx: 80px;
}

.mn-risers .r5 {
  width: 28px;
  animation-delay: 3.2s;
  --dx: 160px;
}

.mn-risers .r6 {
  width: 48px;
  animation-delay: 4.0s;
  --dx: 240px;
}

.mn-risers .r7 {
  width: 22px;
  animation-delay: 4.8s;
  --dx: -280px;
}

.mn-risers .r8 {
  width: 36px;
  animation-delay: 5.6s;
  --dx: 260px;
}

/* Banner inside title container */
.mn-title .mn-spray {
  position: absolute;
  left: 50%;
  top: 43%;
  transform: translate(-50%, -50%);
  object-fit: contain;
  opacity: 1;
  z-index: 1;
}

/* ===== Clubs (4 left + 4 right) ===== */
.mn-clubs {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 5;
  animation: gw-fade-in 0.6s ease-out 0.4s forwards;
}

.mn-clubs .c {
  position: absolute;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.7));
  animation: club-tap-dance 3s ease-in-out infinite;
}

/* Right side clubs are flipped */
.mn-clubs.right .c {
  transform: scaleX(-1);
  animation-name: club-tap-dance-flip;
}

/* Left side: clubs_9 (top), clubs_2, clubs_6_r, clubs_3 (bottom) */
.mn-clubs.left .l1 {
  left: 200px;
  top: 170px;
  width: 280px;
  z-index: 4;
}

.mn-clubs.left .l2 {
  left: 100px;
  top: 360px;
  width: 178px;
  z-index: 3;
}

.mn-clubs.left .l3 {
  left: 400px;
  top: 520px;
  width: 80px;
  z-index: 2;
  /* clubs_6_r.png (smaller, inner position) */
}

.mn-clubs.left .l4 {
  left: 530px;
  bottom: 100px;
  width: 180px;
  z-index: 1;
  /* clubs_3.png (under WIN) */
}

/* Right side: same order, all flipped */
.mn-clubs.right .r1 {
  left: 1020px;
  top: 170px;
  width: 280px;
  z-index: 4;
  /* clubs_9.png (flipped, top) */
}

.mn-clubs.right .r2 {
  left: 1220px;
  top: 360px;
  width: 180px;
  z-index: 3;
  /* clubs_2.png (flipped, under clubs_9, more outside) */
}

.mn-clubs.right .r3 {
  left: 1020px;
  top: 520px;
  width: 80px;
  z-index: 2;
  /* clubs_6_r.png (flipped, smaller, inner) */
}

.mn-clubs.right .r4 {
  left: 790px;
  bottom: 100px;
  width: 180px;
  z-index: 1;
  /* clubs_3.png (flipped, under WIN) */
}

/* ===== MINI JACKPOT text ===== */
.mn-title {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -52%);
  opacity: 0;
  z-index: 6;
  filter: drop-shadow(0 12px 32px rgba(0, 0, 0, 0.8));
  animation: gw-title-appear 0.6s ease-out 0.5s forwards, hover-y 3.2s ease-in-out 1s infinite alternate;
  display: inline-block;
}

.mn-title .txt {
  display: block;
  height: auto;
  width: auto;
  max-width: 1300px;
  max-height: 230px;
  position: relative;
  z-index: 2;
}

/* ===== WIN text ===== */
.mn-win {
  position: absolute;
  margin-top: 30px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, 15%);
  display: grid;
  place-items: center;
  opacity: 0;
  z-index: 7;
  filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.8));
  animation: gw-win-appear 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.6s forwards;
}

.mn-win .plate {
  width: auto;
  height: auto;
  max-width: 650px;
  max-height: 230px;
}

.mn-win .txt {
  position: absolute;
  width: auto;
  height: auto;
  max-width: 520px;
  max-height: 230px;
}

/* ===== Won amount display ===== */
.mn-amount {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(55%);
  margin-top: 35px;
  opacity: 0;
  z-index: 8;
  filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.8));
  animation: gw-amount-appear 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.8s forwards;
  pointer-events: none;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.mn-amount .amount-canvas {
  display: block;
  width: 100%;
  max-width: 1500px;
  height: auto;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}

/* Tap dance animation: large small large - normal - large small large - normal */
/* Faster tap moves, bigger scale changes, much longer pause (3x) with floating */
@keyframes club-tap-dance {
  0% {
    transform: scale(1) translateY(0);
  }

  4% {
    transform: scale(1.35) translateY(0);
  }

  /* large - bigger and faster */
  8% {
    transform: scale(0.75) translateY(0);
  }

  /* small - bigger and faster */
  12% {
    transform: scale(1.35) translateY(0);
  }

  /* large - bigger and faster */
  16% {
    transform: scale(1) translateY(-10px);
  }

  /* normal + float up */
  33% {
    transform: scale(1) translateY(-15px);
  }

  /* float peak during pause */
  50% {
    transform: scale(1) translateY(-10px);
  }

  /* float down at end of pause - 3x longer (was 16%, now 50% = 3x pause) */
  54% {
    transform: scale(1.35) translateY(0);
  }

  /* large - bigger and faster */
  58% {
    transform: scale(0.75) translateY(0);
  }

  /* small - bigger and faster */
  62% {
    transform: scale(1.35) translateY(0);
  }

  /* large - bigger and faster */
  66% {
    transform: scale(1) translateY(-10px);
  }

  /* normal + float up */
  83% {
    transform: scale(1) translateY(-15px);
  }

  /* float peak during pause */
  100% {
    transform: scale(1) translateY(-10px);
  }

  /* float down at end of pause - much longer */
}

@keyframes club-tap-dance-flip {
  0% {
    transform: scaleX(-1) scale(1) translateY(0);
  }

  4% {
    transform: scaleX(-1) scale(1.35) translateY(0);
  }

  /* large - bigger and faster */
  8% {
    transform: scaleX(-1) scale(0.75) translateY(0);
  }

  /* small - bigger and faster */
  12% {
    transform: scaleX(-1) scale(1.35) translateY(0);
  }

  /* large - bigger and faster */
  16% {
    transform: scaleX(-1) scale(1) translateY(-10px);
  }

  /* normal + float up */
  33% {
    transform: scaleX(-1) scale(1) translateY(-15px);
  }

  /* float peak during pause */
  50% {
    transform: scaleX(-1) scale(1) translateY(-10px);
  }

  /* float down at end of pause - 3x longer (was 16%, now 50% = 3x pause) */
  54% {
    transform: scaleX(-1) scale(1.35) translateY(0);
  }

  /* large - bigger and faster */
  58% {
    transform: scaleX(-1) scale(0.75) translateY(0);
  }

  /* small - bigger and faster */
  62% {
    transform: scaleX(-1) scale(1.35) translateY(0);
  }

  /* large - bigger and faster */
  66% {
    transform: scaleX(-1) scale(1) translateY(-10px);
  }

  /* normal + float up */
  83% {
    transform: scaleX(-1) scale(1) translateY(-15px);
  }

  /* float peak during pause */
  100% {
    transform: scaleX(-1) scale(1) translateY(-10px);
  }

  /* float down at end of pause - much longer */
}

/* END OF MINI JACKPOT */

/* ============================================================
   MINOR JACKPOT WIN OVERLAY
   ============================================================ */

#minorWin {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 9999;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.75);
  animation: gw-overlay-in 0.3s ease-out forwards;
}

#minorWin[hidden] {
  display: none !important;
}

/* Main wrapper - fixed size container */
#minorWin .mr-wrap {
  position: relative;
  width: 1500px;
  height: 800px;
  transform-origin: center;
  animation: gw-zoom-in 650ms cubic-bezier(.2, .8, .2, 1) forwards;
}

/* ===== LAYER 1: Background light effects ===== */
.mr-light-rays {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  z-index: 3;
  mix-blend-mode: screen;
  animation: gw-fade-in 0.9s ease-out 0.25s forwards;
  top: -30px;
}

.mr-light {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  z-index: 2;
  mix-blend-mode: screen;
  animation: gw-fade-in 0.9s ease-out 0.25s forwards;
  top: -140px;
}

.mr-glow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 150%;
  object-fit: contain;
  opacity: 0;
  z-index: 4;
  mix-blend-mode: screen;
  animation: gw-fade-in 0.8s ease-out 0.25s forwards, gw-pulse 2s ease-in-out 1s infinite;
  top: -180px;
}

.mr-sparkles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: screen;
  opacity: 0;
  z-index: 1;
  animation: gw-fade-in 0.8s ease-out 0.3s forwards, gw-pulse 1.5s ease-in-out 1.2s infinite;
  margin-top: -60px;
}

/* Rising diamond glow particles */
.mr-risers {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  margin-top: -400px;
}

.mr-risers .rise {
  position: absolute;
  left: 50%;
  top: 58%;
  --dx: 0px;
  transform: translateX(calc(-50% + var(--dx))) translateY(-50%);
  opacity: 0;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.5));
  animation: rise-up 6s cubic-bezier(.22, .61, .36, 1) infinite;
}

.mr-risers .r1 {
  width: 24px;
  animation-delay: 0.0s;
  --dx: -220px;
}

.mr-risers .r2 {
  width: 40px;
  animation-delay: 0.8s;
  --dx: -120px;
}

.mr-risers .r3 {
  width: 32px;
  animation-delay: 1.6s;
  --dx: -20px;
}

.mr-risers .r4 {
  width: 60px;
  animation-delay: 2.4s;
  --dx: 80px;
}

.mr-risers .r5 {
  width: 28px;
  animation-delay: 3.2s;
  --dx: 160px;
}

.mr-risers .r6 {
  width: 48px;
  animation-delay: 4.0s;
  --dx: 240px;
}

.mr-risers .r7 {
  width: 22px;
  animation-delay: 4.8s;
  --dx: -280px;
}

.mr-risers .r8 {
  width: 36px;
  animation-delay: 5.6s;
  --dx: 260px;
}

/* ===== DIAMONDS ===== */
.mr-diamonds {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
}

.mr-diamonds.top {
  top: 180px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 60px;
}

.mr-diamonds.bottom {
  bottom: 180px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 80px;
}

.mr-diamonds .d {
  position: relative;
  width: 120px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5));
}

/* Top row diamonds */
.mr-diamonds.top .t1 {
  width: 150px;
  /* diamond_4 - Group 1 */
  animation: diamond-heartbeat 1.2s ease-in-out infinite;
  animation-delay: 0s;
}

.mr-diamonds.top .t2 {
  /* diamond_9 - Group 2 */
  width: 80px;
  animation: diamond-heartbeat 1.2s ease-in-out infinite;
  animation-delay: 0.15s;
}

.mr-diamonds.top .t3 {
  /* diamond_1 - Group 1 */
  width: 340px;
  animation: diamond-heartbeat 1.2s ease-in-out infinite;
  animation-delay: 0s;
}

.mr-diamonds.top .t4 {
  /* diamond_9 flipped - Group 2 */
  width: 80px;
  transform: scaleX(-1);
  animation: diamond-heartbeat-flip 1.2s ease-in-out infinite;
  animation-delay: 0.15s;
}

.mr-diamonds.top .t5 {
  /* diamond_4 flipped - Group 1 */
  width: 150px;
  transform: scaleX(-1);
  animation: diamond-heartbeat-flip 1.2s ease-in-out infinite;
  animation-delay: 0s;
}

/* Bottom row diamonds */
.mr-diamonds.bottom .b1 {
  animation: diamond-heartbeat 1.2s ease-in-out infinite;
  animation-delay: 0s;
  width: 60px;
  top: 100px;
  left: 70px;
}

.mr-diamonds.bottom .b2 {
  /* diamond_3 - Group 2 */
  animation: diamond-heartbeat 1.2s ease-in-out infinite;
  animation-delay: 0.15s;
  width: 200px;
  top: 200px;
  left: 30px;
}

.mr-diamonds.bottom .b3 {
  /* diamond_3 flipped - Group 2 */
  transform: scaleX(-1);
  animation: diamond-heartbeat-flip 1.2s ease-in-out infinite;
  animation-delay: 0.15s;
  top: 200px;
  width: 200px;
  left: -30px;
}

.mr-diamonds.bottom .b4 {
  /* diamond_6 - Group 1 - flipped (reversed) */
  transform: scaleX(-1);
  animation: diamond-heartbeat-flip 1.2s ease-in-out infinite;
  animation-delay: 0s;
  width: 60px;
  top: 100px;
  left: -50px;
}

/* Heartbeat animation - pulsation effect */
@keyframes diamond-heartbeat {
  0% {
    transform: scale(1);
  }

  15% {
    transform: scale(1.15);
  }

  /* pulse up */
  30% {
    transform: scale(1);
  }

  /* pulse down */
  100% {
    transform: scale(1);
  }

  /* rest */
}

@keyframes diamond-heartbeat-flip {
  0% {
    transform: scaleX(-1) scale(1);
  }

  15% {
    transform: scaleX(-1) scale(1.15);
  }

  /* pulse up */
  30% {
    transform: scaleX(-1) scale(1);
  }

  /* pulse down */
  100% {
    transform: scaleX(-1) scale(1);
  }

  /* rest */
}

/* ===== MINOR JACKPOT text ===== */
.mr-title {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -52%);
  opacity: 0;
  z-index: 6;
  filter: drop-shadow(0 12px 32px rgba(0, 0, 0, 0.8));
  animation: gw-title-appear 0.6s ease-out 0.5s forwards, hover-y 3.2s ease-in-out 1s infinite alternate;
  display: inline-block;
}

.mr-title .mr-spray {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% + 10px);
  height: calc(100% + 10px);
  object-fit: contain;
  z-index: 1;
}

.mr-title .txt {
  display: block;
  height: auto;
  width: auto;
  max-width: 1300px;
  max-height: 230px;
  position: relative;
  z-index: 2;
}

/* ===== WIN text ===== */
.mr-win {
  position: absolute;
  margin-top: 30px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, 15%);
  display: grid;
  place-items: center;
  opacity: 0;
  z-index: 7;
  filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.8));
  animation: gw-win-appear 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.6s forwards;
}

.mr-win .plate {
  width: auto;
  height: auto;
  max-width: 650px;
  max-height: 230px;
}

.mr-win .txt {
  position: absolute;
  width: auto;
  height: auto;
  max-width: 520px;
  max-height: 230px;
}

/* ===== Won amount display ===== */
.mr-amount {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(55%);
  margin-top: 35px;
  opacity: 0;
  z-index: 8;
  filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.8));
  animation: gw-amount-appear 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.8s forwards;
  pointer-events: none;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.mr-amount .amount-canvas {
  display: block;
  width: 100%;
  max-width: 1500px;
  height: auto;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}

/* END OF MINOR JACKPOT */

/* END OF WIN ANIMATIONS */

/* ============================================================
   PORTRAIT MODE - ALL JACKPOT ANIMATIONS (1080px width)
   Scale factor: 1080/1920 = 0.5625
   ============================================================ */

/* GRAND JACKPOT - Portrait */
.portrait #grandWin .gw-wrap {
  width: 843.75px;
  /* 1500 * 0.5625 */
  height: 450px;
  /* 800 * 0.5625 */
}

.portrait .gw-amount {
  animation: gw-amount-appear-portrait 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.8s forwards;
}

.portrait .gw-amount .amount-canvas {
  max-width: 843.75px;
  /* Match portrait wrapper width */
}

.portrait .gw-rays {
  margin-top: -168.75px;
  /* -300 * 0.5625 */
}

.portrait .gw-light1 {
  margin-top: -90px;
  /* -160 * 0.5625 */
}

.portrait .gw-risers {
  margin-top: -225px;
  /* -400 * 0.5625 */
}

.portrait .gw-risers .r1 {
  width: 13.5px;
  /* 24 * 0.5625 */
  --dx: -123.75px;
  /* -220 * 0.5625 */
  animation-delay: 0.0s;
}

.portrait .gw-risers .r2 {
  width: 22.5px;
  /* 40 * 0.5625 */
  --dx: -67.5px;
  /* -120 * 0.5625 */
  animation-delay: 0.8s;
}

.portrait .gw-risers .r3 {
  width: 18px;
  /* 32 * 0.5625 */
  --dx: -11.25px;
  /* -20 * 0.5625 */
  animation-delay: 1.6s;
}

.portrait .gw-risers .r4 {
  width: 33.75px;
  /* 60 * 0.5625 */
  --dx: 45px;
  /* 80 * 0.5625 */
  animation-delay: 2.4s;
}

.portrait .gw-risers .r5 {
  width: 15.75px;
  /* 28 * 0.5625 */
  --dx: 90px;
  /* 160 * 0.5625 */
  animation-delay: 3.2s;
}

.portrait .gw-risers .r6 {
  width: 27px;
  /* 48 * 0.5625 */
  --dx: 135px;
  /* 240 * 0.5625 */
  animation-delay: 4.0s;
}

.portrait .gw-risers .r7 {
  width: 12.375px;
  /* 22 * 0.5625 */
  --dx: -157.5px;
  /* -280 * 0.5625 */
  animation-delay: 4.8s;
}

.portrait .gw-risers .r8 {
  width: 20.25px;
  /* 36 * 0.5625 */
  --dx: 146.25px;
  /* 260 * 0.5625 */
  animation-delay: 5.6s;
}

@keyframes rise-up-portrait {
  0% {
    opacity: 0;
    transform: translateX(calc(-50% + var(--dx))) translateY(0) scale(0.7) rotate(0deg);
  }

  10% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateX(calc(-50% + var(--dx))) translateY(-225px) scale(1.05) rotate(10deg);
    /* -400 * 0.5625 */
  }
}

.portrait .gw-risers .rise {
  animation: rise-up-portrait 6s cubic-bezier(.22, .61, .36, 1) infinite;
}

.portrait .gw-spades.top .t1 {
  left: 112.5px;
  /* 200 * 0.5625 */
  top: 78.75px;
  /* 140 * 0.5625 */
  width: 168.75px;
  /* 300 * 0.5625 */
}

.portrait .gw-spades.top .t2 {
  left: 191.25px;
  /* 340 * 0.5625 */
  top: 61.875px;
  /* 110 * 0.5625 */
  width: 168.75px;
  /* 300 * 0.5625 */
}

.portrait .gw-spades.top .t3 {
  left: 258.75px;
  /* 460 * 0.5625 */
  top: 50.625px;
  /* 90 * 0.5625 */
  width: 180px;
  /* 320 * 0.5625 */
}

.portrait .gw-spades.top .t4 {
  left: 326.25px;
  /* 580 * 0.5625 */
  top: 39.375px;
  /* 70 * 0.5625 */
  width: 191.25px;
  /* 340 * 0.5625 */
}

.portrait .gw-spades.top .t5 {
  left: 393.75px;
  /* 700 * 0.5625 */
  top: 50.625px;
  /* 90 * 0.5625 */
  width: 180px;
  /* 320 * 0.5625 */
}

.portrait .gw-spades.top .t6 {
  left: 483.75px;
  /* 860 * 0.5625 */
  top: 61.875px;
  /* 110 * 0.5625 */
  width: 168.75px;
  /* 300 * 0.5625 */
}

.portrait .gw-spades.top .t7 {
  left: 551.25px;
  /* 980 * 0.5625 */
  top: 78.75px;
  /* 140 * 0.5625 */
  width: 168.75px;
  /* 300 * 0.5625 */
}

.portrait .gw-spades.bottom .b1 {
  left: 258.75px;
  /* 460 * 0.5625 */
  bottom: 56.25px;
  /* 100 * 0.5625 */
  width: 101.25px;
  /* 180 * 0.5625 */
}

.portrait .gw-spades.bottom .b2 {
  left: 303.75px;
  /* 540 * 0.5625 */
  bottom: 67.5px;
  /* 120 * 0.5625 */
  width: 101.25px;
  /* 180 * 0.5625 */
}

.portrait .gw-spades.bottom .b3 {
  left: 427.5px;
  /* 760 * 0.5625 */
  bottom: 67.5px;
  /* 120 * 0.5625 */
  width: 101.25px;
  /* 180 * 0.5625 */
}

.portrait .gw-spades.bottom .b4 {
  left: 472.5px;
  /* 840 * 0.5625 */
  bottom: 56.25px;
  /* 100 * 0.5625 */
  width: 101.25px;
  /* 180 * 0.5625 */
}

.portrait .gw-title .gw-spray {
  width: calc(100% + 5.625px);
  /* 10px * 0.5625 */
  height: calc(100% + 5.625px);
  /* 10px * 0.5625 */
}

.portrait .gw-title .txt {
  max-width: 731.25px;
  /* 1300 * 0.5625 */
  max-height: 112.5px;
  /* 200 * 0.5625 */
}

.portrait .gw-win {
  margin-top: 16.875px;
  /* 30 * 0.5625 */
}

.portrait .gw-win .plate {
  max-width: 365.625px;
  /* 650 * 0.5625 */
  max-height: 112.5px;
  /* 200 * 0.5625 */
}

.portrait .gw-win .txt {
  max-width: 292.5px;
  /* 520 * 0.5625 */
  max-height: 130px;
}

@keyframes hover-y-portrait {
  0% {
    transform: translate(-50%, -52%);
  }

  100% {
    transform: translate(-50%, calc(-52% - 16.875px));
    /* -30 * 0.5625 */
  }
}

.portrait .gw-title {
  animation: gw-title-appear 0.6s ease-out 0.5s forwards, hover-y-portrait 3.2s ease-in-out 1s infinite alternate;
}

@keyframes gw-win-appear-portrait {
  from {
    opacity: 0;
    transform: translate(-50%, 15%) scale(0.85);
  }

  60% {
    opacity: 1;
    transform: translate(-50%, 11%) scale(1.05);
  }

  to {
    opacity: 1;
    transform: translate(-50%, 15%) scale(1);
  }
}

.portrait .gw-win {
  animation: gw-win-appear-portrait 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.6s forwards;
}

/* MAJOR JACKPOT - Portrait */
.portrait #majorWin .mj-wrap {
  width: 843.75px;
  /* 1500 * 0.5625 */
  height: 450px;
  /* 800 * 0.5625 */
}

.portrait .mj-amount {
  animation: gw-amount-appear-portrait 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.8s forwards;
}

.portrait .mj-amount .amount-canvas {
  max-width: 843.75px;
  /* Match portrait wrapper width */
}

.portrait .mj-pink-light {
  margin-top: 90px;
  /* 160 * 0.5625 */
}

.portrait .mj-glow {
  margin-top: 90px;
  /* 160 * 0.5625 */
}

.portrait .mj-spark {
  width: 80%;
  height: 80%;
  top: 20%;
}

.portrait .mj-risers {
  margin-top: -225px;
  /* -400 * 0.5625 */
}

.portrait .mj-risers .rise {
  animation: rise-up-portrait 6s cubic-bezier(.22, .61, .36, 1) infinite;
}

.portrait .mj-risers .r1 {
  width: 13.5px;
  /* 24 * 0.5625 */
  --dx: -123.75px;
  /* -220 * 0.5625 */
  animation-delay: 0.0s;
}

.portrait .mj-risers .r2 {
  width: 22.5px;
  /* 40 * 0.5625 */
  --dx: -67.5px;
  /* -120 * 0.5625 */
  animation-delay: 0.8s;
}

.portrait .mj-risers .r3 {
  width: 18px;
  /* 32 * 0.5625 */
  --dx: -11.25px;
  /* -20 * 0.5625 */
  animation-delay: 1.6s;
}

.portrait .mj-risers .r4 {
  width: 33.75px;
  /* 60 * 0.5625 */
  --dx: 45px;
  /* 80 * 0.5625 */
  animation-delay: 2.4s;
}

.portrait .mj-risers .r5 {
  width: 15.75px;
  /* 28 * 0.5625 */
  --dx: 90px;
  /* 160 * 0.5625 */
  animation-delay: 3.2s;
}

.portrait .mj-risers .r6 {
  width: 27px;
  /* 48 * 0.5625 */
  --dx: 135px;
  /* 240 * 0.5625 */
  animation-delay: 4.0s;
}

.portrait .mj-risers .r7 {
  width: 12.375px;
  /* 22 * 0.5625 */
  --dx: -157.5px;
  /* -280 * 0.5625 */
  animation-delay: 4.8s;
}

.portrait .mj-risers .r8 {
  width: 20.25px;
  /* 36 * 0.5625 */
  --dx: 146.25px;
  /* 260 * 0.5625 */
  animation-delay: 5.6s;
}

.portrait .mj-hearts.center .c1 {
  left: 205.3125px;
  /* 365 * 0.5625 */
  top: 236.25px;
  /* 420 * 0.5625 */
  width: 146.25px;
  /* 260 * 0.5625 */
}

.portrait .mj-hearts.center .c2 {
  left: 303.75px;
  /* 540 * 0.5625 */
  top: 90px;
  /* 160 * 0.5625 */
  width: 225px;
  /* 400 * 0.5625 */
}

.portrait .mj-hearts.center .c3 {
  left: 483.75px;
  /* 860 * 0.5625 */
  top: 236.25px;
  /* 420 * 0.5625 */
  width: 146.25px;
  /* 260 * 0.5625 */
}

.portrait .mj-hearts.bottom .b1 {
  left: 112.5px;
  /* 200 * 0.5625 */
  bottom: 106.875px;
  /* 190 * 0.5625 */
  width: 78.75px;
  /* 140 * 0.5625 */
}

.portrait .mj-hearts.bottom .b2 {
  left: 258.75px;
  /* 460 * 0.5625 */
  bottom: 22.5px;
  /* 40 * 0.5625 */
  width: 45px;
  /* 80 * 0.5625 */
}

.portrait .mj-hearts.bottom .b3 {
  left: 343.125px;
  /* 610 * 0.5625 */
  bottom: 11.25px;
  /* 20 * 0.5625 */
  width: 78.75px;
  /* 140 * 0.5625 */
}

.portrait .mj-hearts.bottom .b4 {
  left: 427.5px;
  /* 760 * 0.5625 */
  bottom: 11.25px;
  /* 20 * 0.5625 */
  width: 78.75px;
  /* 140 * 0.5625 */
}

.portrait .mj-hearts.bottom .b5 {
  left: 540px;
  /* 960 * 0.5625 */
  bottom: 22.5px;
  /* 40 * 0.5625 */
  width: 45px;
  /* 80 * 0.5625 */
}

.portrait .mj-hearts.bottom .b6 {
  left: 658.125px;
  /* 1170 * 0.5625 */
  bottom: 106.875px;
  /* 190 * 0.5625 */
  width: 78.75px;
  /* 140 * 0.5625 */
}

.portrait .mj-title {
  top: 43%;
}

.portrait .mj-title .mj-spray {
  width: calc(100% + 5.625px);
  /* 10px * 0.5625 */
  height: calc(100% + 5.625px);
  /* 10px * 0.5625 */
}

.portrait .mj-title .txt {
  max-width: 731.25px;
  /* 1300 * 0.5625 */
  max-height: 129.375px;
  /* 230 * 0.5625 */
}

.portrait .mj-win .plate {
  max-width: 365.625px;
  /* 650 * 0.5625 */
  max-height: 88.375px;
}

.portrait .mj-win .txt {
  max-width: 292.5px;
  /* 520 * 0.5625 */
  max-height: 130px;
}

.portrait .mj-title {
  animation: gw-title-appear 0.6s ease-out 0.5s forwards, hover-y-portrait 3.2s ease-in-out 1s infinite alternate;
}

.portrait .mj-win {
  animation: gw-win-appear-portrait 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.6s forwards;
}

/* MINI JACKPOT - Portrait */
.portrait #miniWin .mn-wrap {
  width: 843.75px;
  /* 1500 * 0.5625 */
  height: 450px;
  /* 800 * 0.5625 */
}

.portrait .mn-amount {
  animation: gw-amount-appear-portrait 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.8s forwards;
}

.portrait .mn-amount .amount-canvas {
  max-width: 843.75px;
  /* Match portrait wrapper width */
}

.portrait .mn-light {
  margin-top: 90px;
  /* 160 * 0.5625 */
}

.portrait .mn-glow {
  margin-top: 90px;
  /* 160 * 0.5625 */
}

.portrait .mn-sparkle {
  margin-top: -90px;
  /* -160 * 0.5625 */
}

.portrait .mn-risers {
  margin-top: -225px;
  /* -400 * 0.5625 */
}

.portrait .mn-risers .rise {
  animation: rise-up-portrait 6s cubic-bezier(.22, .61, .36, 1) infinite;
}

.portrait .mn-risers .r1 {
  width: 13.5px;
  /* 24 * 0.5625 */
  --dx: -123.75px;
  /* -220 * 0.5625 */
  animation-delay: 0.0s;
}

.portrait .mn-risers .r2 {
  width: 22.5px;
  /* 40 * 0.5625 */
  --dx: -67.5px;
  /* -120 * 0.5625 */
  animation-delay: 0.8s;
}

.portrait .mn-risers .r3 {
  width: 18px;
  /* 32 * 0.5625 */
  --dx: -11.25px;
  /* -20 * 0.5625 */
  animation-delay: 1.6s;
}

.portrait .mn-risers .r4 {
  width: 33.75px;
  /* 60 * 0.5625 */
  --dx: 45px;
  /* 80 * 0.5625 */
  animation-delay: 2.4s;
}

.portrait .mn-risers .r5 {
  width: 15.75px;
  /* 28 * 0.5625 */
  --dx: 90px;
  /* 160 * 0.5625 */
  animation-delay: 3.2s;
}

.portrait .mn-risers .r6 {
  width: 27px;
  /* 48 * 0.5625 */
  --dx: 135px;
  /* 240 * 0.5625 */
  animation-delay: 4.0s;
}

.portrait .mn-risers .r7 {
  width: 12.375px;
  /* 22 * 0.5625 */
  --dx: -157.5px;
  /* -280 * 0.5625 */
  animation-delay: 4.8s;
}

.portrait .mn-risers .r8 {
  width: 20.25px;
  /* 36 * 0.5625 */
  --dx: 146.25px;
  /* 260 * 0.5625 */
  animation-delay: 5.6s;
}

.portrait .mn-clubs.left .l1 {
  left: 112.5px;
  /* 200 * 0.5625 */
  top: 95.625px;
  /* 170 * 0.5625 */
  width: 157.5px;
  /* 280 * 0.5625 */
}

.portrait .mn-clubs.left .l2 {
  left: 56.25px;
  /* 100 * 0.5625 */
  top: 202.5px;
  /* 360 * 0.5625 */
  width: 101.25px;
  /* 180 * 0.5625 */
}

.portrait .mn-clubs.left .l3 {
  left: 112.5px;
  /* 200 * 0.5625 */
  top: 292.5px;
  /* 520 * 0.5625 */
  width: 45px;
  /* 80 * 0.5625 */
}

.portrait .mn-clubs.left .l4 {
  left: 298.125px;
  /* 530 * 0.5625 */
  bottom: 56.25px;
  /* 100 * 0.5625 */
  width: 101.25px;
  /* 180 * 0.5625 */
}

.portrait .mn-clubs.right .r1 {
  left: 573.75px;
  /* 1020 * 0.5625 */
  top: 95.625px;
  /* 170 * 0.5625 */
  width: 157.5px;
  /* 280 * 0.5625 */
}

.portrait .mn-clubs.right .r2 {
  left: 686.25px;
  /* 1220 * 0.5625 */
  top: 202.5px;
  /* 360 * 0.5625 */
  width: 101.25px;
  /* 180 * 0.5625 */
}

.portrait .mn-clubs.right .r3 {
  left: 573.75px;
  /* 1020 * 0.5625 */
  top: 292.5px;
  /* 520 * 0.5625 */
  width: 45px;
  /* 80 * 0.5625 */
}

.portrait .mn-clubs.right .r4 {
  left: 444.375px;
  /* 790 * 0.5625 */
  bottom: 56.25px;
  /* 100 * 0.5625 */
  width: 101.25px;
  /* 180 * 0.5625 */
}

.portrait .mn-title .mn-spray {
  width: calc(100% + 5.625px);
  /* 10px * 0.5625 */
  height: calc(100% + 5.625px);
  /* 10px * 0.5625 */
}

.portrait .mn-title .txt {
  max-width: 731.25px;
  /* 1300 * 0.5625 */
  max-height: 129.375px;
  /* 230 * 0.5625 */
}

.portrait .mn-win .plate {
  max-width: 365.625px;
  /* 650 * 0.5625 */
  max-height: 129.375px;
  /* 230 * 0.5625 */
}

.portrait .mn-win .txt {
  max-width: 292.5px;
  /* 520 * 0.5625 */
  max-height: 80px;
}

.portrait .mn-title {
  animation: gw-title-appear 0.6s ease-out 0.5s forwards, hover-y-portrait 3.2s ease-in-out 1s infinite alternate;
}

.portrait .mn-win {
  animation: gw-win-appear-portrait 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.6s forwards;
}

/* MINOR JACKPOT - Portrait */
.portrait #minorWin .mr-wrap {
  width: 843.75px;
  /* 1500 * 0.5625 */
  height: 450px;
  /* 800 * 0.5625 */
}

.portrait .mr-amount {
  animation: gw-amount-appear-portrait 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.8s forwards;
}

.portrait .mr-amount .amount-canvas {
  max-width: 843.75px;
  /* Match portrait wrapper width */
}

.portrait .mr-light-rays {
  top: -112.5px;
  /* -200 * 0.5625 */
}

.portrait .mr-light {
  top: -180px;
  /* -320 * 0.5625 */
}

.portrait .mr-glow {
  top: -180px;
  /* -320 * 0.5625 */
  height: 150%;
}

.portrait .mr-sparkles {
  margin-top: -90px;
  /* -160 * 0.5625 */
}

.portrait .mr-risers {
  margin-top: -225px;
  /* -400 * 0.5625 */
}

.portrait .mr-risers .rise {
  animation: rise-up-portrait 6s cubic-bezier(.22, .61, .36, 1) infinite;
}

.portrait .mr-risers .r1 {
  width: 13.5px;
  /* 24 * 0.5625 */
  --dx: -123.75px;
  /* -220 * 0.5625 */
  animation-delay: 0.0s;
}

.portrait .mr-risers .r2 {
  width: 22.5px;
  /* 40 * 0.5625 */
  --dx: -67.5px;
  /* -120 * 0.5625 */
  animation-delay: 0.8s;
}

.portrait .mr-risers .r3 {
  width: 18px;
  /* 32 * 0.5625 */
  --dx: -11.25px;
  /* -20 * 0.5625 */
  animation-delay: 1.6s;
}

.portrait .mr-risers .r4 {
  width: 33.75px;
  /* 60 * 0.5625 */
  --dx: 45px;
  /* 80 * 0.5625 */
  animation-delay: 2.4s;
}

.portrait .mr-risers .r5 {
  width: 15.75px;
  /* 28 * 0.5625 */
  --dx: 90px;
  /* 160 * 0.5625 */
  animation-delay: 3.2s;
}

.portrait .mr-risers .r6 {
  width: 27px;
  /* 48 * 0.5625 */
  --dx: 135px;
  /* 240 * 0.5625 */
  animation-delay: 4.0s;
}

.portrait .mr-risers .r7 {
  width: 12.375px;
  /* 22 * 0.5625 */
  --dx: -157.5px;
  /* -280 * 0.5625 */
  animation-delay: 4.8s;
}

.portrait .mr-risers .r8 {
  width: 20.25px;
  /* 36 * 0.5625 */
  --dx: 146.25px;
  /* 260 * 0.5625 */
  animation-delay: 5.6s;
}

.portrait .mr-diamonds.top {
  top: 101.25px;
  /* 180 * 0.5625 */
  gap: 33.75px;
  /* 60 * 0.5625 */
}

.portrait .mr-diamonds.bottom {
  bottom: 101.25px;
  /* 180 * 0.5625 */
  gap: 45px;
  /* 80 * 0.5625 */
}

.portrait .mr-diamonds .d {
  width: 67.5px;
  /* 120 * 0.5625 */
}

/* Top row diamonds - all sizes scaled */
.portrait .mr-diamonds.top .t1 {
  width: 84.375px;
  /* 150 * 0.5625 */
}

.portrait .mr-diamonds.top .t2 {
  width: 45px;
  /* 80 * 0.5625 */
}

.portrait .mr-diamonds.top .t3 {
  width: 191.25px;
  /* 340 * 0.5625 */
}

.portrait .mr-diamonds.top .t4 {
  width: 45px;
  /* 80 * 0.5625 */
}

.portrait .mr-diamonds.top .t5 {
  width: 84.375px;
  /* 150 * 0.5625 */
}

/* Bottom row diamonds - all sizes and positions scaled */
.portrait .mr-diamonds.bottom .b1 {
  width: 33.75px;
  /* 60 * 0.5625 */
  top: 56.25px;
  /* 100 * 0.5625 */
  left: 39.375px;
  /* 70 * 0.5625 */
}

.portrait .mr-diamonds.bottom .b2 {
  width: 112.5px;
  /* 200 * 0.5625 */
  top: 112.5px;
  /* 200 * 0.5625 */
  left: 16.875px;
  /* 30 * 0.5625 */
}

.portrait .mr-diamonds.bottom .b3 {
  width: 112.5px;
  /* 200 * 0.5625 */
  top: 112.5px;
  /* 200 * 0.5625 */
  left: -16.875px;
  /* -30 * 0.5625 */
}

.portrait .mr-diamonds.bottom .b4 {
  width: 33.75px;
  /* 60 * 0.5625 */
  top: 56.25px;
  /* 100 * 0.5625 */
  left: -28.125px;
  /* -50 * 0.5625 */
}

.portrait .mr-title .txt {
  max-width: 731.25px;
  /* 1300 * 0.5625 */
  max-height: 129.375px;
  /* 230 * 0.5625 */
}

.portrait .mr-win .plate {
  max-width: 365.625px;
  /* 650 * 0.5625 */
  max-height: 129.375px;
  /* 230 * 0.5625 */
}

.portrait .mr-win .txt {
  max-width: 292.5px;
  /* 520 * 0.5625 */
  max-height: 80px;
}

.portrait .mr-title {
  animation: gw-title-appear 0.6s ease-out 0.5s forwards, hover-y-portrait 3.2s ease-in-out 1s infinite alternate;
}

.portrait .mr-win {
  animation: gw-win-appear-portrait 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.6s forwards;
}