:root {
  --stage-w: 941;
  --stage-h: 1672;
  --gold: #ffd86d;
  --wine: #64102d;
  --wine-dark: #310615;
  --cream: #fff0d4;
  --ink: #3f1b0b;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
}

body {
  background: #260511;
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

button {
  border: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.viewport {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 238, 190, .22), transparent 34%),
    linear-gradient(180deg, rgba(76, 29, 21, .86) 0%, rgba(36, 4, 18, .95) 100%),
    url("assets/ChatGPT Image 15_05_2026, 03_50_02 (3).png") center top / cover no-repeat fixed;
}

.viewport::before {
  content: "";
  position: fixed;
  inset: -24px;
  z-index: 0;
  background: url("assets/ChatGPT Image 15_05_2026, 03_50_02 (3).png") center top / cover no-repeat;
  filter: blur(18px) saturate(.95) brightness(.54);
  transform: scale(1.04);
  pointer-events: none;
}

.loading-screen {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 18px;
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 228, 132, .18), transparent 28%),
    linear-gradient(180deg, rgba(76, 8, 31, .94), rgba(30, 2, 14, .98));
  color: #fff3bb;
  font-family: Georgia, "Times New Roman", serif;
  text-shadow: 0 2px 2px rgba(61, 0, 16, .7);
  transition: opacity .35s ease, visibility .35s ease;
}

.loading-screen img {
  width: 128px;
  height: auto;
  filter:
    drop-shadow(0 8px 10px rgba(27, 0, 12, .55))
    drop-shadow(0 0 22px rgba(255, 219, 92, .68));
  animation: loadingGem 1.55s ease-in-out infinite;
}

.loading-screen strong {
  font-size: 28px;
  letter-spacing: 0;
}

body.is-ready .loading-screen {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.game-frame {
  opacity: 1;
  transition: opacity .35s ease;
}

@keyframes loadingGem {
  0%, 100% {
    transform: translateY(0) scale(1);
  }

  50% {
    transform: translateY(-8px) scale(1.04);
  }
}

.game-frame {
  position: relative;
  z-index: 1;
  width: 941px;
  height: 1672px;
  flex: 0 0 auto;
}

.game {
  position: absolute;
  left: 0;
  top: 0;
  width: 941px;
  height: 1672px;
  overflow: hidden;
  isolation: isolate;
  transform-origin: top left;
  user-select: none;
}

.base-screen {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.stage-glow {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 2%, rgba(255, 255, 255, .24), transparent 23%),
    radial-gradient(circle at 83% 62%, rgba(255, 226, 95, .16), transparent 26%),
    radial-gradient(circle at 16% 68%, rgba(255, 226, 95, .10), transparent 24%);
  mix-blend-mode: screen;
}

.top-decor {
  position: absolute;
  inset: 0;
  z-index: 18;
  pointer-events: none;
}

.brand-emblem {
  position: absolute;
  top: 36px;
  left: 50%;
  width: 172px;
  height: auto;
  transform: translateX(-50%);
  filter:
    drop-shadow(0 8px 8px rgba(67, 24, 0, .34))
    drop-shadow(0 0 16px rgba(255, 231, 119, .46));
  animation: emblemGlow 2.8s ease-in-out infinite;
}

.premios-art {
  position: absolute;
  top: 67px;
  right: 72px;
  width: 89px;
  height: auto;
  filter:
    drop-shadow(0 8px 8px rgba(52, 8, 18, .28))
    drop-shadow(0 0 15px rgba(255, 224, 103, .52));
}

.floating-prize {
  position: absolute;
  height: auto;
  filter:
    drop-shadow(0 12px 10px rgba(68, 24, 0, .36))
    drop-shadow(0 0 19px rgba(255, 226, 90, .9));
  animation: topPrizeFloat 2.45s ease-in-out infinite;
}

.floating-crown {
  top: 331px;
  left: 111px;
  width: 125px;
}

.floating-chest {
  top: 320px;
  right: 141px;
  width: 113px;
  animation-delay: -.55s;
}

@keyframes emblemGlow {
  0%, 100% {
    transform: translateX(-50%) scale(1);
    filter:
      drop-shadow(0 8px 8px rgba(67, 24, 0, .34))
      drop-shadow(0 0 14px rgba(255, 231, 119, .38));
  }

  48% {
    transform: translateX(-50%) scale(1.035);
    filter:
      drop-shadow(0 10px 9px rgba(67, 24, 0, .38))
      drop-shadow(0 0 24px rgba(255, 231, 119, .72));
  }
}

@keyframes topPrizeFloat {
  0%, 100% {
    transform: translateY(0) rotate(-2deg) scale(1);
  }

  50% {
    transform: translateY(-14px) rotate(2deg) scale(1.065);
  }
}

.spark-layer,
.path-layer {
  position: absolute;
  inset: 0;
  z-index: 72;
  overflow: hidden;
  pointer-events: none;
}

.spark {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .96);
  box-shadow:
    0 0 9px 4px rgba(255, 224, 116, .92),
    0 0 18px 8px rgba(255, 82, 170, .26);
  opacity: 0;
  animation: sparkle 2.7s linear infinite;
}

.spark::before,
.spark::after {
  content: "";
  position: absolute;
  top: -8px;
  left: 3px;
  width: 1px;
  height: 23px;
  background: rgba(255, 255, 255, .9);
}

.spark::after {
  transform: rotate(90deg);
}

@keyframes sparkle {
  0%, 100% {
    opacity: 0;
    transform: scale(.25) rotate(0deg);
  }

  22% {
    opacity: 1;
  }

  58% {
    opacity: .86;
    transform: scale(1.12) rotate(80deg);
  }

  82% {
    opacity: 0;
  }
}

.hud {
  position: absolute;
  top: 41px;
  left: -9px;
  z-index: 80;
  display: grid;
  gap: 17px;
}

.resource {
  position: relative;
  width: 218px;
  height: 59px;
  filter: drop-shadow(0 3px 4px rgba(54, 9, 20, .35));
}

.resource img {
  position: absolute;
  top: 0;
  left: 0;
  width: 218px;
  height: auto;
  pointer-events: none;
}

.resource span {
  position: absolute;
  top: 7px;
  left: 90px;
  min-width: 58px;
  color: #fff7df;
  font-size: 35px;
  font-weight: 800;
  line-height: 42px;
  text-align: center;
  text-shadow: 0 2px 1px #41010b, 0 0 10px rgba(255, 217, 98, .35);
}

.resource.bump span {
  animation: valueBump .34s ease-out both;
}

.resource.insufficient {
  animation: shake .44s ease-in-out both;
}

.premios-hotspot {
  position: absolute;
  top: 58px;
  right: 22px;
  z-index: 82;
  width: 175px;
  height: 210px;
  border-radius: 48px;
}

.premios-hotspot:focus-visible,
.advance-hotspot:focus-visible,
.resource:focus-visible,
.modal-close:focus-visible,
.collect-button:focus-visible {
  outline: 4px solid rgba(255, 235, 130, .9);
  outline-offset: 3px;
}

.board-zone {
  position: absolute;
  inset: 0;
  z-index: 20;
}

.board-zone::before {
  content: "";
  position: absolute;
  left: 58px;
  top: 454px;
  z-index: 22;
  width: 825px;
  height: 690px;
  border-radius: 70px;
  background:
    radial-gradient(circle at 50% 48%, rgba(255, 247, 184, .33), transparent 33%),
    radial-gradient(circle at 50% 50%, transparent 42%, rgba(255, 199, 70, .22) 57%, transparent 71%),
    conic-gradient(from 0deg, transparent 0deg 38deg, rgba(255, 255, 255, .26) 52deg, transparent 72deg 162deg, rgba(255, 219, 84, .23) 188deg, transparent 214deg 360deg);
  mix-blend-mode: screen;
  opacity: .72;
  pointer-events: none;
  animation: boardGlowSweep 6.8s linear infinite;
}

@keyframes boardGlowSweep {
  0% {
    transform: scale(.985) rotate(0deg);
    opacity: .48;
  }

  45% {
    opacity: .85;
  }

  100% {
    transform: scale(1.015) rotate(360deg);
    opacity: .48;
  }
}

.board-center {
  position: absolute;
  top: 572px;
  left: 206px;
  z-index: 21;
  width: 530px;
  height: 530px;
  pointer-events: none;
  animation: boardCenterBreath 3.6s ease-in-out infinite;
}

.board-center img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter:
    drop-shadow(0 15px 18px rgba(84, 38, 0, .2))
    drop-shadow(0 0 15px rgba(255, 232, 135, .2));
}

.board-center::after {
  content: "";
  position: absolute;
  inset: 24px;
  z-index: 2;
  border-radius: 50%;
  background:
    conic-gradient(from 0deg, transparent 0deg 32deg, rgba(255, 255, 255, .45) 44deg, transparent 58deg 142deg, rgba(255, 230, 111, .32) 158deg, transparent 176deg 360deg);
  mix-blend-mode: screen;
  opacity: .38;
  animation: centerSweep 8s linear infinite;
}

@keyframes boardCenterBreath {
  0%, 100% {
    transform: translateY(0) scale(1);
    opacity: .96;
  }

  50% {
    transform: translateY(-4px) scale(1.012);
    opacity: 1;
  }
}

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

.board-grid {
  position: absolute;
  inset: 0;
  z-index: 36;
  pointer-events: none;
}

.board-tile {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--tw, 124px);
  height: var(--th, 112px);
  transform: translate(-50%, -50%) rotate(var(--rot, 0deg));
  transform-origin: 50% 68%;
  pointer-events: none;
  filter: drop-shadow(0 6px 5px rgba(78, 32, 0, .18));
  z-index: 1;
}

.board-tile.is-prize {
  filter:
    drop-shadow(0 7px 6px rgba(78, 32, 0, .2))
    drop-shadow(0 0 12px rgba(255, 217, 88, .32));
  z-index: 8;
}

.board-tile.is-current {
  z-index: 14;
  filter:
    drop-shadow(0 8px 8px rgba(78, 32, 0, .22))
    drop-shadow(0 0 19px rgba(255, 236, 112, .78));
  animation: currentPulse 1.45s ease-in-out infinite;
}

.board-tile img.tile-img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
}

.tile-number {
  display: none;
}

.board-tile.has-reward::after {
  content: "";
  position: absolute;
  top: 23px;
  left: 50%;
  z-index: 16;
  width: 94px;
  height: 74px;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 255, 255, .95) 0 10%, rgba(255, 230, 92, .65) 18% 36%, rgba(255, 62, 150, .28) 54%, transparent 76%);
  mix-blend-mode: screen;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(.82);
  animation: rewardHalo 1.55s ease-in-out infinite;
}

.tile-reward-icon {
  position: absolute;
  top: -28px;
  left: 50%;
  z-index: 22;
  width: 96px;
  height: 88px;
  object-fit: contain;
  transform: translateX(-50%);
  filter:
    drop-shadow(0 7px 6px rgba(72, 20, 0, .42))
    drop-shadow(0 0 18px rgba(255, 236, 128, .92))
    drop-shadow(0 0 10px rgba(255, 74, 162, .44));
  animation: rewardFloat 1.65s cubic-bezier(.22, .78, .28, 1) infinite;
}

.board-tile.is-current .tile-reward-icon {
  top: -31px;
}

.board-tile[data-house="12"] .tile-reward-icon {
  top: -19px;
  width: 106px;
  height: 98px;
}

.board-tile[data-house="16"] .tile-reward-icon {
  top: -19px;
  width: 100px;
  height: 92px;
}

.board-tile[data-house="20"] .tile-reward-icon {
  top: -34px;
  width: 108px;
  height: 100px;
}

@keyframes rewardHalo {
  0%, 100% {
    opacity: .55;
    transform: translate(-50%, -50%) scale(.78);
  }

  45% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.22);
  }
}

@keyframes rewardFloat {
  0%, 100% {
    transform: translateX(-50%) translateY(0) rotate(-2deg) scale(1);
  }

  50% {
    transform: translateX(-50%) translateY(-12px) rotate(2deg) scale(1.12);
  }
}

@keyframes currentPulse {
  0%, 100% {
    transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(1);
  }

  50% {
    transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(1.025);
  }
}

.avatar {
  position: absolute;
  z-index: 120;
  width: 101px;
  height: auto;
  transform: translate(-50%, -100%);
  transform-origin: 50% 94%;
  filter: drop-shadow(0 14px 12px rgba(77, 34, 0, .44));
  pointer-events: none;
  transition:
    left .62s cubic-bezier(.2, .74, .22, 1),
    top .62s cubic-bezier(.2, .74, .22, 1);
  animation: avatarIdle 2.9s ease-in-out infinite;
}

.avatar.moving {
  animation: avatarWalk .32s ease-in-out infinite;
  filter:
    drop-shadow(0 17px 13px rgba(77, 34, 0, .42))
    drop-shadow(0 0 17px rgba(255, 232, 111, .76));
}

.avatar.arrived {
  animation: avatarArrive .72s cubic-bezier(.16, .92, .26, 1.12) both;
  filter:
    drop-shadow(0 17px 13px rgba(77, 34, 0, .42))
    drop-shadow(0 0 25px rgba(255, 232, 111, .96));
}

@keyframes avatarIdle {
  0%, 100% {
    margin-top: 0;
  }

  50% {
    margin-top: -7px;
  }
}

@keyframes avatarWalk {
  0%, 100% {
    margin-top: 0;
    rotate: -3deg;
    scale: 1;
  }

  50% {
    margin-top: -21px;
    rotate: 3deg;
    scale: 1.045;
  }
}

@keyframes avatarArrive {
  0% {
    margin-top: -16px;
    rotate: -4deg;
    scale: .96;
  }

  38% {
    margin-top: -38px;
    rotate: 4deg;
    scale: 1.12;
  }

  68% {
    margin-top: 3px;
    rotate: -1deg;
    scale: .98;
  }

  100% {
    margin-top: 0;
    rotate: 0deg;
    scale: 1;
  }
}

.advance-hotspot {
  position: absolute;
  left: 283px;
  top: 1320px;
  z-index: 85;
  width: 422px;
  height: 90px;
  border-radius: 48px;
  isolation: isolate;
}

.advance-hotspot::before,
.advance-hotspot::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.advance-hotspot::before {
  inset: -9px -12px;
  z-index: -1;
  border: 3px solid rgba(255, 238, 124, .82);
  border-radius: 58px;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 255, 255, .4), transparent 24%),
    linear-gradient(180deg, rgba(255, 65, 157, .18), rgba(255, 219, 77, .12));
  box-shadow:
    0 0 18px rgba(255, 235, 105, .82),
    0 0 36px rgba(255, 62, 151, .52),
    inset 0 0 18px rgba(255, 255, 255, .25);
  animation: advancePulse 1.45s ease-in-out infinite;
}

.advance-hotspot::after {
  top: 11px;
  left: 38px;
  z-index: 1;
  width: 115px;
  height: 36px;
  border-radius: 999px;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .72), transparent);
  filter: blur(.3px);
  opacity: 0;
  transform: translateX(-90px) skewX(-18deg);
  animation: advanceShine 2.2s ease-in-out infinite;
}

@keyframes advancePulse {
  0%, 100% {
    opacity: .72;
    transform: scale(.98);
  }

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

@keyframes advanceShine {
  0%, 28% {
    opacity: 0;
    transform: translateX(-90px) skewX(-18deg);
  }

  48% {
    opacity: .82;
  }

  72%, 100% {
    opacity: 0;
    transform: translateX(330px) skewX(-18deg);
  }
}

.advance-hotspot:active {
  transform: translateY(2px) scale(.992);
}

.advance-hotspot.triggered::before {
  animation: advancePulse .42s ease-out both;
}

.advance-hotspot.triggered::after {
  animation: advanceShine .58s ease-out both;
}

.advance-hotspot[disabled] {
  cursor: default;
}

.advance-hotspot[disabled]::after {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 42px;
  background: rgba(35, 7, 17, .32);
}

.info-overlay {
  position: absolute;
  inset: 0;
  z-index: 78;
  pointer-events: none;
}

.info-value {
  position: absolute;
  text-align: center;
  color: var(--ink);
}

.current-house {
  top: 1218px;
  left: 94px;
  width: 192px;
}

.current-house span {
  display: block;
  color: #74142e;
  font-size: 66px;
  font-weight: 900;
  line-height: 74px;
  text-shadow: 0 2px 0 #fff1c7;
}

.next-reward {
  top: 1211px;
  left: 318px;
  width: 315px;
  min-height: 90px;
}

.next-reward img {
  position: absolute;
  top: 19px;
  left: 16px;
  width: 64px;
  height: 58px;
  object-fit: contain;
  filter: drop-shadow(0 3px 4px rgba(70, 28, 0, .3));
}

.next-reward strong {
  display: block;
  margin-top: 19px;
  margin-left: 88px;
  color: #681328;
  font-size: 33px;
  font-weight: 900;
  line-height: 35px;
}

.next-reward em {
  display: block;
  margin-left: 88px;
  color: #4b2110;
  font-size: 23px;
  font-style: normal;
  line-height: 26px;
}

.houses-left {
  top: 1221px;
  left: 684px;
  width: 184px;
}

.houses-left strong {
  color: #681328;
  font-size: 61px;
  font-weight: 900;
  line-height: 66px;
  vertical-align: -5px;
}

.houses-left span {
  color: #681328;
  font-size: 30px;
  font-style: italic;
  font-weight: 800;
  line-height: 48px;
}

.info-value.bump {
  animation: valueBump .34s ease-out both;
}

.advance-info {
  position: absolute;
  top: 1346px;
  left: 47px;
  z-index: 78;
  width: 184px;
  color: #551d12;
  text-align: center;
  pointer-events: none;
}

.advance-info strong {
  display: block;
  color: #64152b;
  font-size: 41px;
  font-weight: 900;
  line-height: 39px;
}

.advance-info span {
  display: block;
  margin-top: -3px;
  font-size: 25px;
  font-weight: 700;
  line-height: 28px;
}

.reward-strip {
  position: absolute;
  left: 55px;
  top: 1490px;
  z-index: 78;
  width: 830px;
  height: 124px;
  pointer-events: none;
}

.reward-slots {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  height: 100%;
}

.reward-slot {
  position: relative;
  padding-top: 0;
  text-align: center;
}

.reward-slot img {
  display: block;
  width: 64px;
  height: 54px;
  margin: 4px auto 2px;
  object-fit: contain;
  filter: drop-shadow(0 4px 4px rgba(76, 25, 0, .26));
}

.reward-slot strong,
.reward-slot span {
  display: block;
}

.reward-slot strong {
  color: #3f1b0b;
  font-size: 17px;
  font-weight: 700;
  line-height: 18px;
}

.reward-slot span {
  width: min-content;
  min-width: 100%;
  margin-top: 0;
  color: #3e180c;
  font-size: 16px;
  font-weight: 800;
  line-height: 17px;
  text-transform: uppercase;
}

.reward-slot.is-claimed::after {
  content: "✓";
  position: absolute;
  top: 15px;
  right: 32px;
  width: 30px;
  height: 30px;
  border: 2px solid #fff7b0;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #cdff88, #0daa46 72%);
  color: #fff;
  font: 900 25px/27px Arial, sans-serif;
  text-align: center;
  text-shadow: 0 1px 1px #064416;
  box-shadow: 0 2px 6px rgba(19, 72, 11, .28);
  animation: checkPop .38s ease-out both;
}

.toast {
  position: absolute;
  left: 50%;
  bottom: 126px;
  z-index: 140;
  min-width: 330px;
  max-width: 760px;
  padding: 13px 25px;
  border: 2px solid #ffc151;
  border-radius: 30px;
  background: rgba(89, 9, 36, .92);
  color: #fff4be;
  font-size: 22px;
  line-height: 1.15;
  text-align: center;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .4);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .32);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(28px);
  transition: opacity .22s ease, transform .22s ease;
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.path-step-ring {
  position: absolute;
  width: 124px;
  height: 124px;
  margin-top: -62px;
  margin-left: -62px;
  border: 4px solid rgba(255, 246, 177, .95);
  border-radius: 50%;
  box-shadow:
    0 0 18px rgba(255, 221, 83, .9),
    inset 0 0 18px rgba(255, 255, 255, .4);
  animation: stepRing .72s ease-out forwards;
}

@keyframes stepRing {
  from {
    opacity: .95;
    transform: scale(.58);
  }

  to {
    opacity: 0;
    transform: scale(1.65);
  }
}

.trail-dot {
  position: absolute;
  width: var(--s, 10px);
  height: var(--s, 10px);
  margin-top: calc(var(--s, 10px) / -2);
  margin-left: calc(var(--s, 10px) / -2);
  border-radius: 50%;
  background: rgba(255, 248, 188, .98);
  box-shadow:
    0 0 11px rgba(255, 246, 178, .96),
    0 0 25px rgba(255, 74, 163, .55);
  animation: trailFade .85s ease-out forwards;
}

@keyframes trailFade {
  0% {
    opacity: 0;
    transform: scale(.5);
  }

  22% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateY(-18px) scale(1.4);
  }
}

.prize-burst {
  position: absolute;
  z-index: 92;
  width: 230px;
  height: 230px;
  margin-top: -115px;
  margin-left: -115px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .98) 0 12%, rgba(255, 229, 83, .9) 15% 27%, rgba(255, 80, 165, .45) 38%, transparent 72%);
  mix-blend-mode: screen;
  pointer-events: none;
  animation: prizeBurst .86s ease-out forwards;
}

@keyframes prizeBurst {
  from {
    opacity: .96;
    transform: scale(.45);
  }

  to {
    opacity: 0;
    transform: scale(1.75);
  }
}

.confetti-piece {
  position: absolute;
  z-index: 95;
  width: 12px;
  height: 18px;
  border-radius: 3px;
  background: var(--c, #ffd85e);
  box-shadow: 0 0 8px rgba(255, 255, 200, .45);
  pointer-events: none;
  animation: confettiFall var(--dur, 1.45s) ease-out forwards;
}

@keyframes confettiFall {
  from {
    opacity: 1;
    transform: translate(0, 0) rotate(0deg);
  }

  to {
    opacity: 0;
    transform: translate(var(--dx), var(--dy)) rotate(var(--rot));
  }
}

.reward-modal {
  position: absolute;
  inset: 0;
  z-index: 160;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 43%, rgba(255, 236, 157, .25), rgba(37, 2, 18, .76) 62%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
}

.reward-modal.show {
  opacity: 1;
  pointer-events: auto;
}

.reward-modal-card {
  position: relative;
  width: 650px;
  min-height: 586px;
  padding: 72px 54px 44px;
  overflow: hidden;
  border: 4px solid #ffc457;
  border-radius: 54px;
  background: linear-gradient(180deg, rgba(255, 248, 226, .98), rgba(255, 225, 183, .98));
  color: #66152b;
  text-align: center;
  box-shadow:
    0 24px 80px rgba(34, 2, 15, .6),
    inset 0 0 0 3px rgba(255, 255, 255, .48);
  transform: translateY(24px) scale(.94);
  transition: transform .26s cubic-bezier(.15, .9, .2, 1);
}

.reward-modal.show .reward-modal-card {
  transform: translateY(0) scale(1);
}

.modal-shine {
  position: absolute;
  inset: -45%;
  background: conic-gradient(from 0deg, transparent, rgba(255, 255, 255, .62), transparent, rgba(255, 218, 96, .44), transparent);
  opacity: .7;
  animation: modalShine 5.2s linear infinite;
}

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

.modal-icon {
  position: relative;
  z-index: 1;
  width: 214px;
  height: 190px;
  object-fit: contain;
  filter:
    drop-shadow(0 9px 10px rgba(92, 30, 0, .32))
    drop-shadow(0 0 22px rgba(255, 221, 95, .95));
  animation: modalIconPop 1.35s ease-in-out infinite;
}

@keyframes modalIconPop {
  0%, 100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.06) translateY(-5px);
  }
}

.reward-modal h2 {
  position: relative;
  z-index: 1;
  margin: 8px 0;
  color: #8a1239;
  font-size: 54px;
  line-height: 1.05;
  text-shadow: 0 2px 0 #fff3c6, 0 0 14px rgba(255, 209, 73, .5);
}

.reward-modal p {
  position: relative;
  z-index: 1;
  max-width: 500px;
  margin: 0 auto 28px;
  color: #59220d;
  font-size: 27px;
  line-height: 1.2;
}

.collect-button {
  position: relative;
  z-index: 1;
  min-width: 300px;
  padding: 20px 34px;
  border: 3px solid #ffc457;
  border-radius: 36px;
  background: linear-gradient(180deg, #ff4d9d, #a90742 58%, #76052c);
  color: #fff8bc;
  font-size: 30px;
  font-weight: 900;
  text-shadow: 0 2px 0 rgba(70, 0, 10, .8);
  box-shadow:
    0 10px 18px rgba(63, 8, 18, .28),
    inset 0 2px 0 rgba(255, 255, 255, .35);
}

.collect-button:active {
  transform: translateY(2px) scale(.985);
}

.modal-close {
  position: absolute;
  top: 18px;
  right: 22px;
  z-index: 2;
  width: 54px;
  height: 54px;
  border: 2px solid #ffc457;
  border-radius: 50%;
  background: linear-gradient(180deg, #7c1732, #4d071b);
  color: #fff4c3;
  font: 900 30px/46px Arial, sans-serif;
  box-shadow: 0 5px 10px rgba(0, 0, 0, .28);
}

@keyframes valueBump {
  0%, 100% {
    transform: scale(1);
  }

  42% {
    transform: scale(1.16);
  }
}

@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }

  20% {
    transform: translateX(-8px);
  }

  42% {
    transform: translateX(7px);
  }

  66% {
    transform: translateX(-5px);
  }
}

@keyframes checkPop {
  0% {
    opacity: 0;
    transform: scale(.3);
  }

  60% {
    opacity: 1;
    transform: scale(1.18);
  }

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

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}