/* ── BIG WIN REWARD OVERLAY ─────────────────────────────────────────────────
   Shown when user logs a 5-star activity in the Report stage.
   Visual language mirrors spotlight.css — dark scrim, centered animated icon.

   Tweakable timing / variant: see constants at top of big-win-reward.js
   Tweakable icon size:        --icon-size-spotlight-desktop / mobile in styles.css :root
   ─────────────────────────────────────────────────────────────────────────── */

#big-win-reward-overlay {
    display: none;              /* shown by .big-win-visible */
    position: fixed;
    inset: 0;
    z-index: 900;               /* above spotlight (601), stage panels (500) */
    background: rgba(0, 0, 0, 0.92);
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

#big-win-reward-overlay.big-win-visible {
    display: flex;
    animation: big-win-fade-in 0.25s ease;
}

@keyframes big-win-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Icon — always animated, never static.
   Size reuses the spotlight CSS variables so changing spotlight size
   changes big win size too (single source of truth). */
#big-win-reward-icon {
    width:  var(--icon-size-spotlight-desktop);
    height: var(--icon-size-spotlight-desktop);
    image-rendering: pixelated;
    object-fit: contain;
    pointer-events: none; /* clicks pass through to overlay for dismiss */
}

@media (max-width: 600px) {
    #big-win-reward-icon {
        width:  var(--icon-size-spotlight-mobile);
        height: var(--icon-size-spotlight-mobile);
    }
}

@media (prefers-reduced-motion: reduce) {
    #big-win-reward-overlay.big-win-visible {
        animation: none;
    }
}