/* ==================================
             EVOLUTION SCREEN
   ================================== */
#evolution-screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    /* or match battle gradient? usually white or specialized bg */
    z-index: 3000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    pointer-events: auto;
    font-family: inherit;
    /* Box sizing is handled generally */
}

.evo-scene {
    width: 100%;
    height: 180px;
    /* Slightly taller to allow moving sprite up */
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    /* Removed gradient */
    margin-top: -20px;
    /* Move entire scene up */
}

/* Container for the sprite to center it perfect */
.evo-sprite-container {
    position: relative;
    width: 200px;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}

#evo-sprite {
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    width: 80px;
    /* Adjust size */
    height: 80px;
    transform: scale(1.5);
    /* Smaller scale than before */
    transition: filter 0.1s;
    transform-origin: center center;
}

/* === BATTLE STYLE TEXTBOX === */
/* Recycled structure to match #dialog-box from battle.css */
.evo-dialog-box {
    width: 100%;
    height: 88px;
    background-color: #282828;
    color: white;
    border-top: 4px solid #a0a0a0;
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    position: absolute;
    bottom: 0;
    z-index: 20;
}

/* Reuse default font styles, but specific ID for clarity */
#evo-text {
    width: 100%;
    font-size: 12px;
    line-height: 18px;
    text-transform: uppercase;
    white-space: pre-wrap;
    color: white;
}

/* === ANIMATIONS === */

/* 1. White Silhouette */
.evo-white {
    filter: brightness(0) invert(1);
    image-rendering: pixelated;
}

/* 2. Rapid Flicker Class (Applied via JS now for more control) */
.anim-flicker-white {
    filter: brightness(0) invert(1);
}

/* 3. Success Reveal */
@keyframes reveal-flash {
    0% {
        filter: brightness(5);
        opacity: 1;
    }

    100% {
        filter: brightness(1);
        opacity: 1;
    }
}

.anim-reveal {
    animation: reveal-flash 0.8s ease-out forwards;
}