/**
 * Reduced-motion overrides, closing animations, reward chips. Load order is significant: keep this file's <link> position in index.html.
 */

/*
 * One global off switch: every animated transition here is presentation only
 * (production runs on its own clock). Canvas effects and the counter tween
 * check prefersReducedMotion() in TypeScript instead.
 */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/*
 * The Level Up fireworks. Above the modal layer (400) so the display reads as
 * happening around the window rather than behind it, and inert to input so it
 * never swallows the close button underneath.
 */
#celebrationCanvas {
    position: absolute;
    inset: 0;
    /*
     * A canvas carries intrinsic 300x150 dimensions, which count as specified
     * width and height — `inset: 0` alone leaves it that size in the corner,
     * so the size has to be stated, exactly as #gameCanvas does.
     */
    width: 100%;
    height: 100%;
    z-index: 500;
    pointer-events: none;
}

/*
 * Closing. The opening comment above still holds — visibility never rests on a
 * frame callback, and the close is not allowed to linger: `Modal.close()`
 * marks the window closed immediately and only the removal waits out these
 * 150ms, with a timer that fires whether or not the animation does.
 */
.modal-scrim.is-closing {
    animation: scrim-out 150ms ease-in both;
    pointer-events: none;
}

.modal-scrim.is-closing .modal-panel {
    animation: panel-out 150ms ease-in both;
}

@keyframes scrim-out {
    to { background: transparent; }
}

@keyframes panel-out {
    to {
        opacity: 0;
        transform: scale(0.96) translateY(6px);
    }
}

/*
 * Reward chips in flight, from the window that granted them to the counter
 * they land in. Above the modal layer (400) because they are launched from a
 * button sitting on the scrim, and inert so they never intercept the click
 * that follows.
 */
#rewardLayer {
    position: absolute;
    inset: 0;
    z-index: 500;
    pointer-events: none;
    overflow: hidden;
}

.reward-chip {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    background: linear-gradient(var(--cta-top), var(--cta-bottom));
    border: 2px solid var(--cta-edge);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4), inset 0 2px 0 var(--inner-light);
    color: var(--text-strong);
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.45);
}

.reward-chip img {
    width: 26px;
    height: 26px;
    object-fit: contain;
}