.pokemon-card {
    position: relative;
    width: 100%;
    max-width: 350px; /* Prevent it from getting too huge */
    aspect-ratio: 3 / 4; /* Maintains card shape dynamically */
    overflow: hidden;
    background-color: var(--bg-color);
    border-width: .5rem;
    border-style: solid;
    border-radius: 5% / 3.5%;
    border-color: var(--border-color);
    box-shadow: 0 0 10px var(--border-color);
}

    .pokemon-card:hover {
        z-index: 10;
        box-shadow: 0 0 10px var(--border-color), 0 0 20px var(--border-color), 0 0 30px var(--border-color);
        transition: box-shadow 0.3s ease, transform 0.2s ease;
        animation: glowPulse 1.5s ease-in-out infinite;
        transform: translateY(-13px);
    }

.card-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}


.pokemon-name {
    position: absolute;
    top: 5%;
    left: 3%;
    transform: translateY(-50%) !important;
    font-size: clamp(1.2rem, 2vw, 2rem);
}

.pokemon-number {
    position: absolute;
    top: 10%;
    left: 6%;

    transform: translateY(-50%) !important;
    font-size: clamp(0.7rem, 1.2vw, 0.75rem);
}

.pokemon-type {
    position: absolute;
    top: 2%;
    right: 2%;
    width: clamp(1.5rem, 2.5vw, 2.5rem);
    height: clamp(1.5rem, 2.5vw, 2.5rem);
}

.pokemon-image {
    width: 100%; /* Look to flip-container for the width/height of image */
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.pokemon-flavor-text {
    position: absolute;
    top: 60% !important;
    left: 50% !important;
    width: 90%;
    height: 20%;
    padding: 0.25rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    margin-top: 3rem !important;
    transform: translateX(-50%) !important;
    display: flex; /* Centers text inside */
    align-items: start;
    justify-content: center; /* Horizontally centers text */
    overflow: hidden; /* Ensures no scrollbar */

    border-width: 2px;
    border-radius: 5% / 13%;
    border-style: solid;
    border-color: var(--border-color);
    background-color: var(--flavor-bg-color);
}

    .pokemon-flavor-text p {
        margin: 0;
        width: 100%;
        text-align: start;
        font-size: min(12.5px, 1.5vw); /* Scales font but won't exceed 12.5px */
        line-height: 1.2; /* Adjust spacing for readability */
        white-space: normal; /* Ensures wrapping */
        word-wrap: break-word;
        hyphens: auto;
    }

.flip-container {
    position: absolute !important;
    top: 40% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    perspective: 1000px;
    display: inline-block;
    width: 80%;
    aspect-ratio: 1 / 1;
    max-width: 280px;
    margin: 0 auto;
    cursor: pointer;
}

.flipper {
    transition: transform 0.6s;
    transform-style: preserve-3d;
    width: 100%;
    height: 100%;
    position: relative;
}

.flipped {
    transform: rotateY(180deg);
}


.front, .back {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    backface-visibility: hidden;
}

.back {
    transform: rotateY(180deg);
}


/* Type Card Styling */
.pokemon-type-grass {
    --border-color: #45ca24;
    --bg-color: #e5f8dc;
    --flavor-bg-color: #f2fbe9;
}

.pokemon-type-fire {
    --border-color: #ff662c;
    --bg-color: #ffe3d5;
    --flavor-bg-color: #fff0e9;
}

.pokemon-type-water {
    --border-color: #2b99fe;
    --bg-color: #d6ecff;
    --flavor-bg-color: #eaf5ff;
}

.pokemon-type-normal {
    --border-color: #ababab;
    --bg-color: #ededed;
    --flavor-bg-color: #f7f7f7;
}

.pokemon-type-flying {
    --border-color: #9ed3ff;
    --bg-color: #e7f5ff;
    --flavor-bg-color: #f3fbff;
}

.pokemon-type-bug {
    --border-color: #a7b023;
    --bg-color: #f2f6cd;
    --flavor-bg-color: #f9fbe4;
}

.pokemon-type-poison {
    --border-color: #9f4ed7;
    --bg-color: #edd6f8;
    --flavor-bg-color: #f7ebfc;
}

.pokemon-type-electric {
    --border-color: #ffdf00;
    --bg-color: #fff8c6;
    --flavor-bg-color: #fffbdf;
}

.pokemon-type-ground {
    --border-color: #af7d38;
    --bg-color: #f0ddc2;
    --flavor-bg-color: #f8eee2;
}

.pokemon-type-rock {
    --border-color: #bebd8d;
    --bg-color: #f4f3dc;
    --flavor-bg-color: #faf9ee;
}

.pokemon-type-ice {
    --border-color: #45e0ff;
    --bg-color: #d1f7ff;
    --flavor-bg-color: #e9fbff;
}

.pokemon-type-steel {
    --border-color: #6db7de;
    --bg-color: #daedf7;
    --flavor-bg-color: #eef6fb;
}

.pokemon-type-fighting {
    --border-color: #ffa803;
    --bg-color: #ffe9c6;
    --flavor-bg-color: #fff3df;
}

.pokemon-type-psychic {
    --border-color: #ff6887;
    --bg-color: #ffd6df;
    --flavor-bg-color: #ffe8ef;
}

.pokemon-type-dark {
    --border-color: #544b4c;
    --bg-color: #dedcdc;
    --flavor-bg-color: #f1f0f0;
}

.pokemon-type-fairy {
    --border-color: #ffb5ff;
    --bg-color: #ffe6ff;
    --flavor-bg-color: #fff2ff;
}

.pokemon-type-ghost {
    --border-color: #714775;
    --bg-color: #e2d2e4;
    --flavor-bg-color: #f0e8f1;
}

.pokemon-type-dragon {
    --border-color: #5669e2;
    --bg-color: #d6dbfa;
    --flavor-bg-color: #eaedfc;
}

.card-holo {
    position: relative;
    background-image: 
        url("https://assets.codepen.io/13471/sparkles.gif"), 
        url("https://assets.codepen.io/13471/holo.png"), 
        linear-gradient(125deg, #ff008450 15%, #fca40040 30%, #ffff0030 40%, #00ff8a20 60%, #00cfff40 70%, #cc4cfa50 85% );
    background-blend-mode: screen;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
    border-radius: 1rem;
    transition: transform 0.4s ease;
}

    .card-holo:hover::before {
        animation: holoGradient 12s ease 0s 1;
    }

    .card-holo:hover::after {
        animation: holoSparkle 12s ease 0s 1;
    }

@keyframes holoSparkle {
    0%, 100% {
        opacity: .75;
        background-position: 50% 50%;
        filter: brightness(1.2) contrast(1.25);
    }

    5%, 8% {
        opacity: 1;
        background-position: 40% 40%;
        filter: brightness(.8) contrast(1.2);
    }

    13%, 16% {
        opacity: .5;
        background-position: 50% 50%;
        filter: brightness(1.2) contrast(.8);
    }

    35%, 38% {
        opacity: 1;
        background-position: 60% 60%;
        filter: brightness(1) contrast(1);
    }

    55% {
        opacity: .33;
        background-position: 45% 45%;
        filter: brightness(1.2) contrast(1.25);
    }
}

@keyframes holoGradient {
    0%, 100% {
        opacity: 0.5;
        background-position: 50% 50%;
        filter: brightness(.5) contrast(1);
    }

    5%, 9% {
        background-position: 100% 100%;
        opacity: 1;
        filter: brightness(.75) contrast(1.25);
    }

    13%, 17% {
        background-position: 0% 0%;
        opacity: .88;
    }

    35%, 39% {
        background-position: 100% 100%;
        opacity: 1;
        filter: brightness(.5) contrast(1);
    }

    55% {
        background-position: 0% 0%;
        opacity: 1;
        filter: brightness(.75) contrast(1.25);
    }
}
@keyframes glowPulse {
    0% {
        box-shadow: 0 0 15px var(--border-color);
    }

    50% {
        box-shadow: 0 0 25px var(--border-color);
    }

    100% {
        box-shadow: 0 0 15px var(--border-color);
    }
}