/* =====================================================
   ===== STRYV4 LUCKY TICKETS ， SHOP SELECTION CSS  =====
   ===== Phase D ， selection feedback overlay       =====
   ===== Tag: STR ， file: shop_selection_STR.css    =====
   ===================================================== */

/*
 * REVISION 2026-05-16: opacity-restoration fix.
 *
 * Long-running bug: when a card was clicked and got `.is-selected`,
 * it became invisible in the shop grid while keeping its layout slot.
 * Root cause: `.ticket-card` has `opacity: 0` as a base rule in
 * shop_animations_STR.css, with a fade-in animation using `forwards`
 * to keep opacity at 1 after mount. The `.ticket-card.is-selected`
 * rule (also in shop_animations) REPLACES the animation with
 * `card-breathing-glow`, which only animates box-shadow. The previous
 * animation's `forwards` no longer applies, so opacity reverts to
 * the base `opacity: 0`.
 *
 * Fix: explicitly set opacity: 1 on selected cards via the compound
 * `.is-selected.is-selected` selector for cascade specificity.
 *
 * Loaded LAST in shop.html so it wins the cascade.
 */





/* =====================================================
   ===== SECTION 1: OPACITY RESTORATION              =====
   ===================================================== */

/* CodeNumber 1.1 ！ Force selected cards to stay visible.
   THE actual fix for the vanishing-card bug. */
.ticket-card.is-selected.is-selected {
    opacity: 1 !important;
}





/* =====================================================
   ===== SECTION 2: SELECTED STAMP                   =====
   ===================================================== */

/* CodeNumber 2.1 ！ SELECTED rubber-stamp overlay.
   Now that the card stays visible, this stamp will actually show. */
.ticket-card.is-selected.is-selected::after {
    content: 'SELECTED';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-12deg);
    font-family: var(--font-display, Georgia, serif);
    font-weight: 700;
    font-style: italic;
    font-size: 22px;
    letter-spacing: 0.18em;
    color: var(--card-c3, #ead78a);
    background: rgba(0, 0, 0, 0.65);
    padding: 6px 18px;
    border: 2.5px solid var(--card-c3, #ead78a);
    border-radius: 4px;
    box-shadow:
        0 0 12px color-mix(in srgb, var(--card-c3, #ead78a) 60%, transparent),
        inset 0 0 4px rgba(0, 0, 0, 0.5);
    pointer-events: none;
    z-index: 10;
    opacity: 0.95;
    animation: card-stamp-thump 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes card-stamp-thump {
    0%   { transform: translate(-50%, -50%) rotate(-12deg) scale(2.4); opacity: 0; }
    35%  { transform: translate(-50%, -50%) rotate(-12deg) scale(1.15); opacity: 1; }
    100% { transform: translate(-50%, -50%) rotate(-12deg) scale(1); opacity: 0.95; }
}

/* CodeNumber 2.2 ！ Slight dim on content under the stamp,
   so the stamp reads cleanly. Only on direct children of the card. */
.ticket-card.is-selected.is-selected .ticket-card__name,
.ticket-card.is-selected.is-selected .ticket-card__description,
.ticket-card.is-selected.is-selected .ticket-card__icon-slot {
    opacity: 0.65;
}





/* =====================================================
   ===== SECTION 3: CARD-TO-SLOT FLIGHT PARTICLE    =====
   ===================================================== */

.stryv-selection-pulse {
    position: fixed;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%) scale(1);
    transition:
        transform 0.55s cubic-bezier(0.4, 0.0, 0.2, 1),
        opacity 0.55s ease-out;
    opacity: 1;
}

.vendor-slot.is-receiving {
    animation: vendor-slot-receive 0.8s ease-out;
}
@keyframes vendor-slot-receive {
    0%, 100% {
        box-shadow: none;
        transform: scale(1);
    }
    25% {
        box-shadow:
            0 0 0 3px var(--pulse-colour, var(--gold-light)),
            0 0 24px 6px color-mix(in srgb, var(--pulse-colour, var(--gold-light)) 70%, transparent);
        transform: scale(1.05);
    }
    60% {
        box-shadow:
            0 0 0 2px var(--pulse-colour, var(--gold-light)),
            0 0 12px 3px color-mix(in srgb, var(--pulse-colour, var(--gold-light)) 40%, transparent);
        transform: scale(1.02);
    }
}





/* =====================================================
   ===== SECTION 4: CHEAT CONFIRMATION FLASH        =====
   ===================================================== */

.stryv-cheat-flash {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9998;
    opacity: 0;
    box-shadow: inset 0 0 0 0 transparent;
    transition: box-shadow 0.18s ease-out, opacity 0.18s ease-out;
}
.stryv-cheat-flash.is-firing {
    opacity: 1;
    animation: cheat-flash-pulse 0.85s ease-out forwards;
}
@keyframes cheat-flash-pulse {
    0% {
        box-shadow: inset 0 0 0 0 rgba(255, 230, 156, 0);
        opacity: 0;
    }
    20% {
        box-shadow: inset 0 0 80px 12px rgba(255, 230, 156, 0.45);
        opacity: 1;
    }
    100% {
        box-shadow: inset 0 0 0 0 rgba(255, 230, 156, 0);
        opacity: 0;
    }
}