.starter-reward-overlay {
  position: fixed;
  inset: 0;
  z-index: 10020;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 38%, rgba(134, 86, 214, 0.24), transparent 42%),
    rgba(4, 2, 12, 0.88);
  -webkit-backdrop-filter: blur(14px) saturate(125%);
  backdrop-filter: blur(14px) saturate(125%);
  animation: starter-reward-overlay-in 260ms ease-out both;
}

.starter-reward-overlay--closing {
  pointer-events: none;
  opacity: 0;
  transition: opacity 180ms ease-in;
}

.starter-reward-card {
  position: relative;
  width: min(100%, 500px);
  max-height: calc(100dvh - 32px);
  box-sizing: border-box;
  overflow: auto;
  padding: clamp(24px, 5vw, 42px) clamp(22px, 5vw, 46px) clamp(22px, 4vw, 36px);
  border: 1px solid rgba(255, 224, 151, 0.58);
  border-radius: clamp(20px, 4vw, 30px);
  color: #fff9e8;
  text-align: center;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.09), transparent 42%),
    radial-gradient(circle at 50% 0, rgba(255, 215, 125, 0.13), transparent 44%),
    linear-gradient(155deg, #211536 0%, #120c21 58%, #0b0814 100%);
  box-shadow:
    0 30px 90px rgba(0, 0, 0, 0.62),
    0 0 56px rgba(154, 100, 231, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  animation: starter-reward-card-in 520ms cubic-bezier(0.18, 0.9, 0.28, 1.08) both;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 220, 145, 0.48) transparent;
}

.starter-reward-card::before {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(255, 232, 183, 0.11);
  border-radius: inherit;
  pointer-events: none;
}

.starter-reward-mark {
  width: clamp(78px, 17vw, 104px);
  aspect-ratio: 1;
  margin: 0 auto 10px;
  filter: drop-shadow(0 0 24px rgba(255, 205, 104, 0.34));
  animation: starter-reward-mark-float 2.8s ease-in-out infinite;
}

.starter-reward-mark svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.starter-reward-halo {
  fill: rgba(255, 220, 147, 0.06);
  stroke: rgba(255, 223, 158, 0.24);
  stroke-width: 1;
}

.starter-reward-moon {
  fill: #f7d783;
  stroke: #fff2c4;
  stroke-width: 1.5;
}

.starter-reward-star {
  fill: #fff8da;
  filter: drop-shadow(0 0 8px rgba(255, 230, 148, 0.95));
  transform-origin: 65px 48px;
  animation: starter-reward-star-pulse 1.6s ease-in-out infinite;
}

.starter-reward-glint {
  fill: #cbb8ff;
}

.starter-reward-eyebrow {
  margin: 0 0 8px;
  color: #e7ca82;
  font-size: clamp(0.72rem, 2vw, 0.82rem);
  font-weight: 800;
  letter-spacing: 0.2em;
  line-height: 1.4;
}

.starter-reward-title {
  margin: 0;
  color: #fffaf0;
  font-family: 'Cinzel', Georgia, serif;
  font-size: clamp(1.65rem, 6vw, 2.35rem);
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1.1;
  text-wrap: balance;
}

.starter-reward-amount {
  margin: 14px 0 12px;
  color: #ffd875;
  font-size: clamp(1.7rem, 7vw, 2.6rem);
  font-weight: 900;
  letter-spacing: -0.025em;
  line-height: 1.05;
  text-shadow: 0 0 24px rgba(255, 204, 91, 0.32);
}

/* THE SHARED SECONDARY LINE.
   It had NO RULE IN ANY STYLESHEET while two surfaces rendered through it —
   the referral payout's Moonlight half (since moved to its own class) and the
   Moon Exchange unlock message. Both showed as unstyled default body text
   beneath a 2.6rem gold headline, which is most of why the second half of a
   reward read as an afterthought. Quiet by design — it is the sentence under
   the figure — but deliberately styled rather than left to the UA. */
.starter-reward-subline {
  margin: 0 0 14px;
  color: rgba(232, 220, 250, 0.82);
  font-size: clamp(0.88rem, 3vw, 1.02rem);
  line-height: 1.45;
}

/* THE MOONLIGHT HALF OF A REFERRAL PAYOUT.
   Its predecessor, `.starter-reward-subline`, had no rule in any stylesheet —
   so the second half of the reward rendered as default body text under a gold
   2.6rem headline and read as an afterthought. Sized between the headline and
   the fine print: clearly a reward, without competing with the figure the
   ceremony is counting up. Moon-silver rather than gold, because gold is the
   payout colour and these are two different currencies. */
.starter-reward-moonlight {
  margin: 0 0 14px;
  color: #cdb6ff;
  font-size: clamp(0.95rem, 3.4vw, 1.18rem);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.35;
  text-shadow: 0 0 18px rgba(168, 132, 255, 0.32);
}

/* A REDEEMED VOUCHER lists what it delivered, one line per grant, between the
   headline and the button. Moon-silver like the Moonlight line: these are the
   contents of the gift, the gold headline is its size. */
.starter-reward-grants {
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
  color: #cdb6ff;
  font-size: clamp(0.92rem, 3.2vw, 1.08rem);
  font-weight: 700;
  line-height: 1.35;
  text-shadow: 0 0 18px rgba(168, 132, 255, 0.32);
}

/* The Moon Store sits at z-index 30000 and a voucher can be redeemed from its
   own menu with the store open beneath. Above the store, below Confirm. */
.starter-reward-overlay--voucher {
  z-index: 40000;
}

.starter-reward-cta {
  min-width: min(100%, 250px);
  min-height: 44px;
  box-sizing: border-box;
  padding: 12px 24px;
  border: 1px solid #ffe5a0;
  border-radius: 999px;
  color: #1a1029;
  font: inherit;
  font-size: 1rem;
  font-weight: 850;
  cursor: pointer;
  background: linear-gradient(180deg, #fff0b9 0%, #e6b957 100%);
  box-shadow: 0 10px 30px rgba(225, 173, 76, 0.2), inset 0 1px 0 #fffbe8;
  transition: box-shadow 180ms ease, filter 180ms ease;
}

.starter-reward-cta:hover {
  filter: brightness(1.05);
  box-shadow: 0 14px 34px rgba(225, 173, 76, 0.28), inset 0 1px 0 #fffbe8;
}

.starter-reward-cta:active {
  filter: brightness(0.98);
}

.starter-reward-cta:focus-visible {
  outline: 3px solid #c8b2ff;
  outline-offset: 4px;
}

.starter-reward-sparks {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.starter-reward-spark {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #ffe5a0;
  box-shadow: 0 0 12px rgba(255, 218, 132, 0.85);
  opacity: 0;
  animation: starter-reward-spark-drift 2.8s ease-in-out infinite;
}

.starter-reward-spark--1 { left: 12%; top: 22%; animation-delay: -0.4s; }
.starter-reward-spark--2 { left: 23%; top: 75%; animation-delay: -1.8s; }
.starter-reward-spark--3 { left: 35%; top: 12%; animation-delay: -2.2s; }
.starter-reward-spark--4 { left: 47%; top: 84%; animation-delay: -0.9s; }
.starter-reward-spark--5 { left: 60%; top: 16%; animation-delay: -1.4s; }
.starter-reward-spark--6 { left: 72%; top: 72%; animation-delay: -2.5s; }
.starter-reward-spark--7 { left: 86%; top: 28%; animation-delay: -0.1s; }
.starter-reward-spark--8 { left: 91%; top: 61%; animation-delay: -2s; }
.starter-reward-spark--9 { left: 8%; top: 58%; animation-delay: -1.1s; }
.starter-reward-spark--10 { left: 77%; top: 8%; animation-delay: -0.7s; }

@keyframes starter-reward-overlay-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes starter-reward-card-in {
  from { opacity: 0; transform: translateY(22px) scale(0.94); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes starter-reward-mark-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@keyframes starter-reward-star-pulse {
  0%, 100% { transform: scale(0.9) rotate(0deg); opacity: 0.8; }
  50% { transform: scale(1.12) rotate(8deg); opacity: 1; }
}

@keyframes starter-reward-spark-drift {
  0% { opacity: 0; transform: translateY(12px) scale(0.6); }
  35%, 65% { opacity: 0.85; }
  100% { opacity: 0; transform: translateY(-18px) scale(1); }
}

@media (max-height: 520px) {
  .starter-reward-card {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 20px;
    padding: 18px 26px;
    text-align: left;
  }

  .starter-reward-mark {
    grid-row: 1 / span 5;
    width: 88px;
    margin: 0;
  }

  .starter-reward-eyebrow,
  .starter-reward-title,
  .starter-reward-amount,
  .starter-reward-grants {
    margin-left: 0;
    margin-right: 0;
  }

  .starter-reward-grants { gap: 3px; margin-bottom: 10px; font-size: clamp(0.82rem, 2.6vh, 0.98rem); }

  .starter-reward-eyebrow { margin-bottom: 3px; }
  .starter-reward-title { font-size: clamp(1.3rem, 5vh, 1.8rem); }
  .starter-reward-amount { margin-top: 5px; margin-bottom: 12px; font-size: clamp(1.45rem, 6vh, 2rem); }
  .starter-reward-cta { min-width: 180px; justify-self: start; }
}

@media (max-width: 520px) and (min-height: 521px) {
  .starter-reward-card { padding-inline: 20px; }
  .starter-reward-cta {
    width: 100%;
    /* PRE-EXISTING PORTRAIT-PHONE DEFECT.
       A `width: 100%` <button> is still an inline-block sitting in the card's
       inline formatting context, and Firefox counts the strut around it as
       scrollable overflow: the card reported 8px of horizontal scroll and a
       player could genuinely drag the celebration sideways. Chromium hid it.
       Taking the button out of the inline flow removes the overflow in both.
       Block + auto margins, not `justify-self`, because this branch is normal
       flow — the landscape grid branch positions it separately. */
    display: block;
    margin-inline: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .starter-reward-overlay,
  .starter-reward-card,
  .starter-reward-mark,
  .starter-reward-star,
  .starter-reward-spark {
    animation: none;
  }

  .starter-reward-overlay--closing,
  .starter-reward-cta {
    transition-duration: 0.01ms;
  }
}