/* --- Evolution Overlay (Enhanced) --- */
:root {
    --evo-gold: #ffd700;
    --evo-glow: rgba(255, 215, 0, 0.6);
    --evo-dark: #0a0a10;
}

#evolution-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Dramatic spotlight background */
    background: radial-gradient(circle at center, rgba(60, 50, 10, 0.8) 0%, rgba(5, 5, 10, 0.95) 100%);
    backdrop-filter: blur(8px);
    z-index: 200;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 0;
    /* Removed upward shift */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    perspective: 1000px;
    /* For 3D effects */
}

#evolution-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

#evolution-overlay.active .evo-content {
    transform: scale(1) rotateX(0deg);
    opacity: 1;
}

.evo-content {
    width: 90%;
    max-width: 600px;
    /* Increased max width */
    /* Glassmorphism with Gold Tint */
    background: linear-gradient(145deg, rgba(30, 30, 40, 0.9), rgba(10, 10, 15, 0.95));
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-top: 1px solid rgba(255, 215, 0, 0.6);
    /* Top highlight */
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.5),
        0 0 30px rgba(255, 215, 0, 0.15),
        inset 0 0 20px rgba(255, 215, 0, 0.05);
    border-radius: 16px;
    padding: 30px;
    /* Increased padding */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    /* Increased gap */

    /* Entrance Animation state */
    transform: scale(0.9) rotateX(10deg);
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    /* Bounce effect */
    position: relative;
    overflow: hidden;
    /* For sparkle containment if needed, but rays might need overflow visible */
    overflow: visible;
    /* Changing to visible for external rays */
}

/* Sparkle Particles (Pseudo-elements on container) */
.evo-content::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, transparent 20%, transparent 20% 80%, transparent 80%);
    background-size: 50% 50%;
    z-index: -1;
    pointer-events: none;
    /* Complex patterns are hard with just one background. Let's use the Header or Card for sparkles. */
    /* Let's use this for a subtle rim shimmer */
    background: linear-gradient(45deg, transparent, rgba(255, 215, 0, 0.1), transparent);
    animation: shimmerBorder 2s infinite linear;
}

@keyframes shimmerBorder {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

.evo-header {
    font-size: 2rem;
    font-weight: 900;
    font-style: italic;
    letter-spacing: 4px;
    margin-bottom: 2px;
    text-transform: uppercase;

    /* Gradient Text */
    background: linear-gradient(to bottom, #fff 0%, #ffd700 50%, #ff8c00 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;

    /* Glow */
    filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.6));

    animation: headerPulse 2s infinite alternate;
}

@keyframes headerPulse {
    0% {
        filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.6));
        transform: scale(1);
    }

    100% {
        filter: drop-shadow(0 0 20px rgba(255, 215, 0, 1.0));
        transform: scale(1.05);
    }
}

/* Card Display Area */
.evo-card-display {
    position: relative;
    margin: 5px 0;
    transform-style: preserve-3d;
    z-index: 10;
}

/* "God Rays" behind the card */
.evo-card-display::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300px;
    height: 300px;
    background: conic-gradient(from 0deg, transparent 0deg, rgba(255, 215, 0, 0.2) 20deg, transparent 40deg, rgba(255, 215, 0, 0.2) 60deg, transparent 80deg, rgba(255, 215, 0, 0.2) 100deg, transparent 120deg, rgba(255, 215, 0, 0.2) 140deg, transparent 160deg);
    transform: translate(-50%, -50%);
    border-radius: 50%;
    z-index: -1;
    animation: rotateRays 10s linear infinite;
    mask-image: radial-gradient(black 0%, transparent 70%);
    -webkit-mask-image: radial-gradient(black 0%, transparent 70%);
}

@keyframes rotateRays {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* Card Styles */
.evo-card-display .card {
    pointer-events: none;
    width: var(--card-width);
    height: var(--card-height);
    background: linear-gradient(135deg, #2a2a35 0%, #3a3a45 100%);
    border: 2px solid var(--evo-gold);
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--evo-gold);
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(255, 215, 0, 0.4);

    /* Float Animation */
    animation: cardFloat 3s ease-in-out infinite;
}

@keyframes cardFloat {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-10px) rotate(2deg);
    }
}

/* Inner Sparkles on Card */
.evo-card-display .card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.4) 50%, transparent 70%);
    background-size: 200% 100%;
    animation: cardShine 3s infinite;
    mix-blend-mode: overlay;
    border-radius: 6px;
}

@keyframes cardShine {
    0% {
        background-position: 100% 0;
    }

    20% {
        background-position: -100% 0;
    }

    /* Fast shine */
    100% {
        background-position: -100% 0;
    }

    /* Wait */
}

/* Stats Table */
/* Stats Table */
.evo-stats-container {
    width: 100%;
    background: rgba(0, 0, 0, 0.4);
    /* Darker bg */
    border-radius: 8px;
    padding: 2px 2px;
    /* Increased padding */
    border: 1px solid rgba(255, 255, 255, 0.05);
}

#evo-stats-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
    /* Larger font */
    color: #ddd;
}

#evo-stats-table th,
#evo-stats-table td {
    padding: 4px 4px;
    /* Larger cell padding */
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

#evo-stats-table th {
    color: var(--primary-color);
    font-size: 0.9rem;
    /* Larger header */
    text-transform: uppercase;
    border-bottom: 2px solid var(--primary-color);
}

#evo-stats-table tr:last-child td {
    border-bottom: none;
}

.evo-win-rate-high {
    color: var(--evo-gold);
    font-weight: bold;
    text-shadow: 0 0 5px rgba(255, 215, 0, 0.5);
}

.evo-win-rate-mid {
    color: var(--primary-color);
}

.evo-win-rate-low {
    color: var(--secondary-color);
}

/* Description */
.evo-description {
    font-size: 1.0rem;
    /* Larger description */
    line-height: 1.5;
    text-align: center;
    color: #eee;
    margin-bottom: 5px;
    background: rgba(255, 255, 255, 0.05);
    padding: 12px;
    /* Increased padding */
    border-radius: 8px;
    width: 100%;
    border-left: 3px solid var(--evo-gold);
}

/* Button */
#btn-evo-shot {
    width: 100%;
    padding: 10px;
    font-size: 1.3rem;
    letter-spacing: 3px;
    background: linear-gradient(90deg, var(--primary-color) 0%, #00e5ff 100%);
    color: #000;
    font-weight: 800;
    border: none;
    clip-path: polygon(15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%, 0 15px);
    transition: all 0.2s;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    text-transform: uppercase;
    box-shadow: 0 0 20px rgba(0, 229, 255, 0.5);
}

#btn-evo-shot:hover {
    filter: brightness(1.1);
    transform: translateY(-2px);
    box-shadow: 0 0 30px rgba(0, 229, 255, 0.8);
}

#btn-evo-shot:active {
    transform: scale(0.98);
    filter: brightness(0.9);
}

/* Button Pulse */
#btn-evo-shot::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    opacity: 0;
    animation: btnPulse 1.5s infinite;
}

@keyframes btnPulse {
    0% {
        opacity: 0;
        transform: scaleX(0);
    }

    50% {
        opacity: 0.2;
        transform: scaleX(1);
    }

    100% {
        opacity: 0;
        transform: scaleX(1);
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {

    .evo-content,
    .evo-header,
    .evo-card-display::before,
    .evo-card-display .card,
    .evo-card-display .card::after,
    #btn-evo-shot::before {
        animation: none;
        transition: none;
        transform: none;
    }
}