/* Reward overlays (Win now, Level-up in step 5). They use their own pixel unit --uo:
   4px on phones, 5px on tablets, 5-6px on desktop (css/tokens.css). Everything is sized in whole units,
   so the overlay fits the smallest phone (320 x 568) and a large monitor. */
.reward {
  --u: var(--uo);
  position: fixed; inset: 0; z-index: 10;
  display: flex; align-items: center; justify-content: center;
  padding: calc(var(--u) * 4);
  background: rgba(37, 48, 74, 0.9);   /* Navy Ink, so the screen behind stays calm */
  overflow-y: auto;
}
.reward:focus { outline: none; }
.reward__stack {
  width: 100%; max-width: calc(var(--u) * 80);
  display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 4);
  margin: auto;
}
.reward__card { width: 100%; }
.reward__card .px__fill { align-items: center; gap: calc(var(--u) * 2); padding: calc(var(--u) * 4) calc(var(--u) * 3); }
/* WIN! in Monster Friend Fore: Title Pink letters with a thick navy outline, like the design */
.reward__win {
  font-family: var(--font-title); font-weight: 400;
  font-size: calc(var(--u) * 16); line-height: 1; letter-spacing: 0.02em;
  color: var(--title-pink);
  -webkit-text-stroke: calc(var(--u) * 3) var(--ink);
  paint-order: stroke fill;
  padding: calc(var(--u) * 2) 0;
  font-variant-ligatures: none;
}
/* Level-up card: gem + LEVEL, then a big pink number with a 1-unit navy outline (as in the design) */
.reward__lvhead { display: flex; align-items: center; gap: calc(var(--u) * 3); }
.reward__lvhead .sprite { width: calc(var(--u) * 12); height: calc(var(--u) * 12); }
.reward__lvword { font-family: var(--font-title); font-weight: 400; font-size: calc(var(--u) * 8); line-height: 1; letter-spacing: 0.02em; font-variant-ligatures: none; }
.reward__lvnum {
  font-family: var(--font-title); font-weight: 400; font-variant-ligatures: none;
  font-size: calc(var(--u) * 24); line-height: 1;
  color: var(--title-pink);
  text-shadow: var(--u) var(--u) 0 var(--ink), calc(var(--u) * -1) calc(var(--u) * -1) 0 var(--ink),
               var(--u) calc(var(--u) * -1) 0 var(--ink), calc(var(--u) * -1) var(--u) 0 var(--ink);
  padding: calc(var(--u) * 2) 0;
}

.reward__xp { display: flex; align-items: center; gap: calc(var(--u) * 3); }
.reward__xp .sprite { width: calc(var(--u) * 12); height: calc(var(--u) * 12); }
.reward__xptext { font-family: var(--font-ui); font-weight: 700; font-size: calc(var(--u) * 7); line-height: calc(var(--u) * 8); }

/* Zipy (sticker, straight) with his one line beside him: sprite is 36 x 30 pixels */
.reward__zipy { width: 100%; display: flex; align-items: center; gap: calc(var(--u) * 2); }
.reward__zipy .sprite { width: calc(var(--u) * 36); height: calc(var(--u) * 30); }
.reward__bubble { flex: 1; min-width: 0; }
.reward__bubble .px__fill { padding: calc(var(--u) * 2) calc(var(--u) * 3); background: var(--white); }
.reward__bubble p { font-weight: 800; font-size: calc(var(--u) * 3.75); line-height: calc(var(--u) * 5); }

/* White on the dark scrim passes contrast */
.reward__hint { color: var(--white); font-weight: 700; font-size: calc(var(--u) * 3.5); line-height: calc(var(--u) * 5); }
.reward__mute {
  min-height: 44px; padding: 0 calc(var(--u) * 2);
  color: var(--white); font-weight: 800; font-size: calc(var(--u) * 3.25);
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px;
}
.reward__mute:focus-visible { outline-color: var(--white); }

/* One entrance, in unit-sized steps, played once. Never loops. */
.reward--enter .reward__stack { animation: reward-in 240ms steps(4) 1 both; }
@keyframes reward-in { from { transform: translateY(calc(var(--u) * 8)); opacity: 0; } to { transform: none; opacity: 1; } }