/* ------------------------- */
/* --- GERAL E FUNDO --- */
/* ------------------------- */
body {
    font-family: 'Roboto', sans-serif;
    background-color: #f3f4f6;
    background-image:
        url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.02'/%3E%3C/svg%3E"),
        radial-gradient(circle at 50% 0, rgba(239, 68, 68, 0.15) 0%, transparent 50%);
    background-repeat: repeat, no-repeat;
    background-attachment: fixed;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

.font-pixel {
    font-family: 'Press Start 2P', cursive;
}

.pokedex-body {
    background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23991b1b' fill-opacity='0.1' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
}

/* ------------------------- */
/* --- COMPONENTES DA POKÉDEX --- */
/* ------------------------- */
.screen-glare {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0) 100%);
    border-radius: 1rem;
    pointer-events: none;
}

.evolution-stage {
    cursor: pointer;
    transition: transform 0.2s;
}
.evolution-stage:hover {
    transform: scale(1.1);
}
.evolution-stage img {
    width: 64px;
    height: 64px;
}
.evolution-stage p {
    font-size: 0.65rem;
    color: white;
    margin-top: 4px;
}
.evolution-arrow {
    color: white;
    font-size: 1.5rem;
    align-self: center;
}

.nav-button {
    width: 3rem;
    height: 3rem;
    background-color: #1f2937;
    color: white;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    transition: background-color 0.2s, transform 0.2s;
}

.nav-button:hover {
    background-color: #374151;
    transform: scale(1.05);
}

/* ------------------------- */
/* --- ESTILOS DOS TIPOS DE POKÉMON --- */
/* ------------------------- */
.type-tag {
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
}

.type-grass    { background-color: #22c55e; }
.type-fire     { background-color: #ef4444; }
.type-water    { background-color: #3b82f6; }
.type-bug      { background-color: #84cc16; }
.type-normal   { background-color: #a3a3a3; }
.type-poison   { background-color: #a855f7; }
.type-electric { background-color: #f59e0b; }
.type-ground   { background-color: #ca8a04; }
.type-fairy    { background-color: #f472b6; }
.type-fighting { background-color: #c2410c; }
.type-psychic  { background-color: #db2777; }
.type-rock     { background-color: #a16207; }
.type-ghost    { background-color: #4f46e5; }
.type-ice      { background-color: #22d3ee; }
.type-dragon   { background-color: #6366f1; }
.type-dark     { background-color: #1f2937; }
.type-steel    { background-color: #6b7280; }
.type-flying   { background-color: #38bdf8; }

#pokemon-display[data-type="grass"]    { background-color: rgba(34, 197, 94, 0.3); }
#pokemon-display[data-type="fire"]     { background-color: rgba(239, 68, 68, 0.3); }
#pokemon-display[data-type="water"]    { background-color: rgba(59, 130, 246, 0.3); }
#pokemon-display[data-type="bug"]      { background-color: rgba(132, 204, 22, 0.3); }
#pokemon-display[data-type="normal"]   { background-color: rgba(156, 163, 175, 0.3); }
#pokemon-display[data-type="poison"]   { background-color: rgba(147, 51, 234, 0.3); }
#pokemon-display[data-type="electric"] { background-color: rgba(250, 204, 21, 0.3); }
#pokemon-display[data-type="ground"]   { background-color: rgba(202, 138, 4, 0.3); }
#pokemon-display[data-type="fairy"]    { background-color: rgba(244, 114, 182, 0.3); }
#pokemon-display[data-type="fighting"] { background-color: rgba(194, 65, 12, 0.3); }
#pokemon-display[data-type="psychic"]  { background-color: rgba(219, 39, 119, 0.3); }
#pokemon-display[data-type="rock"]     { background-color: rgba(161, 98, 7, 0.3); }
#pokemon-display[data-type="ghost"]    { background-color: rgba(67, 56, 202, 0.3); }
#pokemon-display[data-type="ice"]      { background-color: rgba(103, 232, 249, 0.3); }
#pokemon-display[data-type="dragon"]   { background-color: rgba(99, 102, 241, 0.3); }
#pokemon-display[data-type="dark"]     { background-color: rgba(31, 41, 55, 0.3); }
#pokemon-display[data-type="steel"]    { background-color: rgba(107, 114, 128, 0.3); }
#pokemon-display[data-type="flying"]   { background-color: rgba(56, 189, 248, 0.3); }

/* ------------------------- */
/* --- ANIMAÇÕES --- */
/* ------------------------- */
@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}
.pokemon-image-animation {
    animation: bounce 2s infinite ease-in-out;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.pokeball-loader {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(to top, #f0f0f0 50%, #ef4444 50%);
    border: 4px solid #1f2937;
    position: relative;
    animation: spin 1.2s linear infinite;
}
.pokeball-loader::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 4px;
    background: #1f2937;
    top: 50%;
    transform: translateY(-50%);
}
.pokeball-loader::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    background: #f0f0f0;
    border-radius: 50%;
    border: 4px solid #1f2937;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* ------------------------- */
/* --- RESPONSIVIDADE --- */
/* ------------------------- */
@media (max-width: 480px) {
    body {
        padding: 0.5rem;
        justify-content: flex-start;
    }

    main#pokedex {
        padding: 1rem;
    }

    footer > div:last-child {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }

    #search-form {
        width: 100%;
        margin: 0;
    }
    
    #search-form + div {
        order: 1;
    }

    #pokemon-image {
        height: 9rem;
    }

    #pokemon-name {
        font-size: 1rem;
        line-height: 1.5rem;
    }
}