/* Styling for the reusable rewardsAlert() (public/js/operations/reusable.js) - a general-purpose
   "here's what you won" alert. The alert box itself reuses the .regular-alert-interface look; the
   only things here are the reward-icon row and the CSS confetti burst. Kept in its own file since
   the function is meant to be reused game-wide, not tied to the Rewards hub. */

/* rewardsAlert wraps the alert in a .flex-container parent that centers it via flexbox. Neutralize
   the regular-alert's own transform: translate(-50%,-50%) / top / left centering (style.css) so it
   doesn't fight that - the transform lands on sub-pixel boundaries and blurs the reward icons.
   3-class selector so it wins over .interface.regular-alert-interface. */
.interface.regular-alert-interface.rewards-alert-interface {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
}

.rewards-alert-interface h2 {
    font-size: 20px !important;
}

.rewards-alert-items {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin: 20px 0 12px;
}

.rewards-alert-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 70px;
}

.rewards-alert-item-icon {
    width: 70px;
    height: 70px;
    border-radius: 8px;
    background: #FFF;
    border: 2px solid #000;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 5px;
}

.rewards-alert-item-icon img {
    max-width: 70px;
    max-height: 70px;
    object-fit: contain;
	border-radius: 8px;
}

.rewards-alert-item-quantity {
    font-size: 16px;
    font-weight: 700;
    color: #222;
    line-height: 1.1;
}

.rewards-alert-item-label {
    font-size: 11px;
    color: #555;
    line-height: 1.15;
    margin-top: 1px;
}

/* CSS confetti - a screen-wide rain of pieces. pointer-events:none so it never blocks the alert's
   dismiss button, position:fixed so it covers the viewport independent of any transformed ancestor.
   Per-piece colour/size/position/drift/spin/timing are set inline by celebrationConfetti(). */
.rewards-alert-confetti {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
}

.rewards-alert-confetti-piece {
    position: absolute;
    /* left/top/size/colour/drift/spin/timing are all set inline per-piece by celebrationConfetti() */
    border-radius: 2px;
    will-change: transform, opacity;
    animation-name: rewardsAlertConfettiFall;
    animation-timing-function: linear;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

@keyframes rewardsAlertConfettiFall {
    0%   { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 1; }
    85%  { opacity: 1; }
    100% { transform: translate3d(var(--drift, 0), 130vh, 0) rotate(var(--spin, 360deg)); opacity: 0; }
}

/* CSS star burst - a tight "explosion" of star icons launching from bottom-center, used in place of
   celebrationConfetti() for reward claims (see celebrationStarBurst() in reusable.js). Same
   fixed/pointer-events:none/overflow:hidden shape as the confetti container above, so it always
   covers the viewport independent of any transformed ancestor. Per-piece burst vector/spin/scale/
   timing are set inline by celebrationStarBurst(); the icon itself is a cropped region of
   reward-system-icon-spritesheet.png (the star at 318,10, 29x28), not a separate graphic. */
.rewards-star-burst {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
}

.rewards-star-burst-piece {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 29px;
    height: 28px;
    margin-left: -14.5px; /* static half-width centering (layout), kept separate from the animated
                              transform below - the same lesson as the header hero image: mixing a
                              percentage-based translate into an animated transform risks sub-pixel
                              blur/positioning bugs, so centering is done here via margin instead. */
    background-image: url(../images/ui-elements/reward-system-icon-spritesheet.png);
    background-position: -318px -10px;
    background-repeat: no-repeat;
    /* Layered drop-shadow (not box-shadow) follows the star's actual alpha silhouette rather than
       its square bounding box - a tight bright core plus a softer wider halo. */
    filter: drop-shadow(0 0 5px rgba(255, 221, 110, 0.95)) drop-shadow(0 0 10px rgba(255, 176, 40, 0.55));
    opacity: 1;
    will-change: transform, opacity;
    /* Two independent animations, not one - movement and fade used to share a single keyframe
       (both driven by the same duration/delay), which meant every star faded at the same relative
       point in its own flight and looked too uniform/mechanical. Splitting them lets
       celebrationStarBurst() randomize fade timing completely independently of flight timing, so
       stars wink out at scattered moments - like sparks off a fire - rather than in lockstep.
       animation-duration/-delay below are set inline per piece as "moveValue, fadeValue" pairs. */
    animation-name: rewardsStarBurstMove, rewardsStarBurstFade;
    /* Move: explosive launch - most of the travel distance is covered almost immediately (reads as
       real force pushing the star out), then it settles/drifts for the remainder.
       Fade: a quick flicker-out once it starts, not a slow uniform dim. */
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1), ease-out;
    animation-iteration-count: 1, 1;
    animation-fill-mode: forwards, forwards;
}

@keyframes rewardsStarBurstMove {
    0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(var(--burst-scale, 1)); }
    100% { transform: translate3d(var(--burst-x, 0px), var(--burst-y, -200px), 0) rotate(var(--burst-spin, 360deg)) scale(var(--burst-scale, 1)); }
}

@keyframes rewardsStarBurstFade {
    0%   { opacity: 1; }
    100% { opacity: 0; }
}

/* CSS gem burst - same shape/plumbing as the star burst above (see celebrationGemBurst() in
   reusable.js), reusing its rewardsStarBurstMove/rewardsStarBurstFade keyframes since the motion is
   identical - only the piece's own look differs: the full gem-zoomed.png graphic instead of a
   cropped region of the star spritesheet. Used for the gem shop's "gems received" celebration
   (both a PayPal purchase and a redeemed code), in place of the old Phaser falling-gems shower. */
.rewards-gem-burst {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
}

.rewards-gem-burst-piece {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 28px;
    height: 46px;
    margin-left: -14px; /* static half-width centering, same reasoning as the star piece above */
    background-image: url(../assets/graphics/gem-zoomed.png);
    background-size: contain;
    background-repeat: no-repeat;
    filter: drop-shadow(0 0 5px rgba(214, 71, 229, 0.85)) drop-shadow(0 0 10px rgba(248, 110, 255, 0.5));
    opacity: 1;
    will-change: transform, opacity;
    animation-name: rewardsStarBurstMove, rewardsStarBurstFade;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1), ease-out;
    animation-iteration-count: 1, 1;
    animation-fill-mode: forwards, forwards;
}

/* CSS confetti burst - radiates outward from screen-center in all directions, used in place of a
   Phaser confetti emitter for the collectable minigame's x10 multiplier celebration (see
   celebrationConfettiBurst() in reusable.js). Same fixed/pointer-events:none/overflow:hidden shape
   as the other celebration containers above; pieces reuse celebrationConfetti()'s rectangle look
   and colour palette, just with the star burst's outward-launch motion instead of a falling rain. */
.rewards-confetti-burst {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
}

.rewards-confetti-burst-piece {
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 2px;
    border: 1px solid #000000cc;
    will-change: transform, opacity;
    animation-name: rewardsConfettiBurstMove;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

@keyframes rewardsConfettiBurstMove {
    0%   { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 1; }
    30%  { opacity: 1; }
    100% { transform: translate3d(var(--burst-x, 0px), var(--burst-y, 0px), 0) rotate(var(--burst-spin, 360deg)); opacity: 0; }
}