/* Approved celebration mockup; four independent layers preserve the visual order. */
#badge-celebration{position:fixed;inset:0;z-index:30;display:block;padding:0;overflow:hidden;pointer-events:auto;isolation:isolate;background:none}
#badge-celebration[hidden]{display:none}
.reward-veil{position:absolute;inset:0;background:radial-gradient(ellipse at center,#fffbeeeb 0%,#f7f6efbf 43%,#f3f5f2a6 100%);animation:reward-veil-in .35s ease both}
.reward-stage{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:24px 12px}
.reward-row{display:grid;grid-template-columns:repeat(var(--count,3),minmax(0,1fr));align-items:center;gap:10px;width:min(100%,calc(var(--count,3)*280px + (var(--count,3) - 1)*10px))}
.reward{position:relative;width:100%;min-width:0;aspect-ratio:1;display:grid;place-items:center}
.reward-glow{position:absolute;z-index:1;width:158%;max-width:none;opacity:.32;animation:reward-glow-drift 8s ease-in-out infinite alternate}
.reward-badge{position:relative;z-index:3;width:100%;filter:drop-shadow(0 12px 16px #70491025)}
.reward-title{position:relative;z-index:4;width:min(690px,100%);height:auto;max-height:25dvh;object-fit:contain;filter:drop-shadow(0 10px 12px #885f2722)}
.reward-reveal{animation:reward-arrive .9s cubic-bezier(.18,.7,.24,1) both}
.reward-title.reward-reveal{animation-delay:.04s}
.reward-confetti{position:absolute;inset:0;width:100%;height:100%;z-index:2}
.reward-fallback{text-align:center;padding:16px;color:#664711;background:#fff5d4;border-radius:16px;font-size:clamp(16px,3vw,28px);font-weight:750}
#badge-celebration.leaving{animation:reward-scene-out var(--reward-exit-duration,1.6s) ease-in-out both}
@keyframes reward-arrive{0%,22%{opacity:.12;transform:translateY(-24px) scale(1.8);filter:blur(5px)}80%{opacity:1;transform:translateY(0) scale(.98);filter:blur(0)}100%{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}
@keyframes reward-glow-drift{from{transform:rotate(-9deg) scale(.97)}to{transform:rotate(9deg) scale(1.06)}}
@keyframes reward-veil-in{from{opacity:0}to{opacity:1}}
@keyframes reward-scene-out{to{opacity:0;transform:translateY(7px)}}
@media(max-width:600px){.reward-stage{gap:2px}.reward-title{width:100%}.reward-glow{width:147%}#badge-celebration[data-count="3"] .reward-row .reward:nth-child(2){top:clamp(-46px,calc(16vw - 96px),0px)}}
@media(max-height:480px){.reward-stage{gap:2px}.reward-row{width:min(100%,calc(var(--count,3)*35dvh))}.reward-title{max-height:23dvh}}
@media(prefers-reduced-motion:reduce){.reward-reveal,.reward-glow,.reward-veil{animation:none}.reward-confetti{display:none}}