/* Skill Upgrades Showcaser Styles - Simplified */

/* Overlay for blur effect - only blurs elements behind it */
.skill-upgrades-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9998;
    background-color: rgba(0, 0, 0, 0);
    transition: background-color 0.3s ease;
    cursor: pointer;
}

.skill-upgrades-overlay.active {
    background-color: rgba(0, 0, 0, 0.5);
}

/* Apply blur to UI elements when overlay is active */
body:has(.skill-upgrades-overlay.active) #hero_details_panel ~ *:not(.skill-upgrades-container):not(.skill-upgrades-overlay) {
    filter: blur(8px);
    transition: filter 0.3s ease;
}

/* Container for upgrade cards */
.skill-upgrades-container {
    position: fixed;
    z-index: 10003;
    pointer-events: none;
}

/* Wrapper for individual upgrade cards */
.upgrade-card-wrapper {
    position: absolute;
    pointer-events: auto;
    transition: transform 0.2s ease;
}

/* Hover state for upgrade cards */
.upgrade-card-wrapper.hovered {
    z-index: 10005;
}

/* Purchase fail animation - simple shake */
.upgrade-card-wrapper.purchase-fail {
    animation: fail-shake 0.4s ease;
}

@keyframes fail-shake {
    0%, 100% { transform: translateX(0); }
    25%, 75% { transform: translateX(-3px); }
    50% { transform: translateX(3px); }
}

/* Fixed hover state for original skill card when showcasing */
.skill_card.skill-card-fixed-hover {
    height: 300% !important;
    width: 30% !important;
    box-shadow: 0 0 50px 40px rgba(0, 0, 0, 0.3) !important;
    z-index: 10001 !important;
}

/* Fix for upgrade cards inside wrappers */
.upgrade-card-wrapper .skill_card.skill-card-fixed-hover {
    width: 100% !important;
    height: 100% !important;
}

.skill_card.skill-card-fixed-hover .skill_image_place {
    height: 46% !important;
}

.skill_card.skill-card-fixed-hover .skill_name {
    height: 6% !important;
    font-size: 1.2em !important;
    border-radius: 0 !important;
}

.skill_card.skill-card-fixed-hover .skill_description {
    height: 43% !important;
    border-radius: 0 !important;
}

.skill_card.skill-card-fixed-hover .card_footer {
    height: 5% !important;
}

.skill_card.skill-card-fixed-hover .energy_place {
    top: -6% !important;
    left: -8% !important;
    height: 22% !important;
}

.skill_card.skill-card-fixed-hover .energy_place .energy_value {
    font-size: 1.5em !important;
}

.skill_card.skill-card-fixed-hover .sandclock_place {
    top: -1.4% !important;
    height: 22% !important;
}

.skill_card.skill-card-fixed-hover .current_cooldown,
.skill_card.skill-card-fixed-hover .cooldown {
    font-size: 1.5em !important;
}

.skill_card.skill-card-fixed-hover .coins_pouch_place {
    bottom: -0.5% !important;
    right: -7% !important;
    height: 16%;
    opacity: 1 !important;
}

.skill_card.skill-card-fixed-hover .coins_amount {
    font-size: 1.5em !important;
}

/* Breathing animation for pouch when upgrades are available and affordable */
.breathing-pouch {
    animation: breathing-upgrades 2s ease-in-out infinite;
}

/* Stop breathing on hover */
.breathing-pouch:hover {
    animation-play-state: paused;
}

@keyframes breathing-upgrades {
    0%, 100% {
        transform: scale(1);
        filter: brightness(1);
    }
    50% {
        transform: scale(1.08);
        filter: brightness(1.1);
    }
}

/* Subtle breathing for affordable pouches on normal skill cards */
.coins_pouch_place.affordable-breathing {
    animation: breathing-subtle 2s ease-in-out infinite;
}

/* Stop subtle breathing on hover */
.coins_pouch_place.affordable-breathing:hover {
    animation-play-state: paused;
}

@keyframes breathing-subtle {
    0%, 100% {
        transform: scale(1);
        filter: brightness(1);
    }
    50% {
        transform: scale(1.02);
        filter: brightness(1.05);
    }
}

/* Pulsing animation for highlighted values */
@keyframes pulse-highlight {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.1);
    }
}

/* Ensure overlay blocks all interactions */
.skill-upgrades-overlay {
    pointer-events: auto !important;
}

/* Ensure upgrade cards are clickable */
.upgrade-card-wrapper {
    pointer-events: auto !important;
}