/**
 * @file global.css
 * @description Estilos globais da aplicação Pokédex.
 * Inclui resets, estilos base para tags (body, ul), e o layout principal flexbox (.pokedex).
 */

/* ==========================================================================
   Reset Básico e Estilos de Base
   ========================================================================== */

/*
 * Reset simples para remover paddings e margins padrão dos navegadores
 * e definir box-sizing como border-box para um controle de tamanho mais fácil.
 */
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box; /* Garante que padding e border não aumentem o tamanho total do elemento */
}

/* Remove os marcadores padrão de listas não ordenadas */
ul {
    list-style-type: none;
}

/* Estilos base para o corpo da página */
body {
    /* Define a fonte principal para toda a aplicação */
    font-family: 'Poppins', sans-serif;
    /* (Opcional) Cor de fundo geral, caso 'main' não cubra tudo */
    /* background-color: #f0f2f5; */
    /* (Opcional) Melhora a renderização da fonte */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   Layout Principal da Aplicação
   ========================================================================== */

/*
 * Container <main> que ocupa toda a altura da viewport e centraliza o .pokedex.
 */
main {
    min-height: 100vh; /* Garante que o main ocupe pelo menos toda a altura da tela */
    display: flex; /* Habilita Flexbox para centralização */
    align-items: flex-start; /* Alinha o .pokedex no topo (importante para cards altos) */
    justify-content: center; /* Centraliza o .pokedex horizontalmente */
    background-color: #DADFE8; /* Cor de fundo principal da página */
    padding: 20px 0; /* Adiciona um respiro vertical */
}

/*
 * Container .pokedex que organiza as 3 colunas principais: Descrição | Card | Lista.
 */
.pokedex {
    display: flex; /* Habilita Flexbox */
    flex-direction: row; /* Layout lado-a-lado (padrão desktop) */
    gap: 25px; /* Espaço entre as colunas */
    padding: 30px 20px; /* Padding interno */
    align-items: flex-start; /* Alinha as colunas pelo topo */
    justify-content: center; /* Centraliza as colunas se houver espaço extra */
    width: 100%; /* Ocupa a largura disponível dentro do <main> */
    max-width: 950px; /* Largura máxima do conjunto (ajustada para Desc(260)+Card(400)+Lista(200)+Gaps(50)) */
    margin: 0 auto; /* Garante centralização horizontal do próprio .pokedex */
}
/**
 * @file card.css
 * @description Estilos específicos para o card principal do Pokémon.
 * Inclui layout do card, topo colorido, seção de informações, imagem,
 * spinner de loading, cores de tipo e estado de erro.
 */

/* ==========================================================================
   Contêineres Principais do Card
   ========================================================================== */

/*
 * Contêiner .cartoes-pokemon:
 * Define a largura fixa do card e aplica arredondamento externo e overflow.
 * Serve como pai posicional para o overlay de loading.
 */
.cartoes-pokemon {
    width: 400px;
    /* Largura final ajustada */
    flex-shrink: 0;
    /* Impede que encolha em layouts flex */
    border-radius: 10px;
    /* Bordas arredondadas do contêiner */
    overflow: hidden;
    /* Garante que o conteúdo interno respeite as bordas */
    position: relative;
    /* Necessário para o posicionamento absoluto do .loading-overlay */
}

/*
 * O card principal .cartao-pokemon:
 * Define o layout flex vertical interno (topo e informações), sombra,
 * transições para mudanças de estado (cor, opacidade).
 */
.cartao-pokemon {
    display: flex;
    /* Layout flexível */
    flex-direction: column;
    /* Organiza .cartao-topo e .cartao-informacoes verticalmente */
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    /* Sombra */
    border-radius: 10px;
    /* Bordas arredondadas (redundante com pai, mas seguro) */
    overflow: hidden;
    /* Garante que filhos respeitem as bordas */
    /* Define as transições para mudanças de cor e opacidade (fade-in/out) */
    transition: background-color 0.4s ease,
        opacity 0.3s ease-in-out;
}

/* Estado de carregamento: torna o card transparente */
.cartao-pokemon.carregando {
    opacity: 0;
    pointer-events: none;
    /* Impede interações enquanto invisível */
}

/* Estado visível: Garante 'display: flex' */
.cartao-pokemon.aberto {
    display: flex;
}


/* ==========================================================================
   Seção Superior do Card (Colorida - .cartao-topo)
   ========================================================================== */

/* Layout da seção superior: flex vertical, padding, altura mínima */
.cartao-pokemon .cartao-topo {
    padding: 20px 30px 15px;
    /* Padding interno */
    display: flex;
    flex-direction: column;
    /* Organiza filhos verticalmente */
    gap: 10px;
    /* Espaço entre filhos (detalhes, tipo/região, imagem) */
    min-height: 280px;
    /* Altura mínima ajustada */
    color: #FFFFFF;
    /* Cor do texto padrão (geralmente branco para contraste) */
}

/* --- Sub-seção: Detalhes (Nome, Som, Status, ID) --- */

/* Container dos detalhes: Alinha Nome/Som/Status (esquerda) vs ID (direita) */
.cartao-pokemon .detalhes {
    display: flex;
    justify-content: space-between;
    /* Empurra ID para a direita */
    align-items: flex-start;
    /* Alinha pelo topo */
    min-height: 35px;
    /* Evita colapso */
}

/* Grupo Nome + Som + Status */
.cartao-pokemon .nome-container {
    display: flex;
    align-items: center;
    /* Alinha verticalmente */
    gap: 10px;
    /* Espaço entre itens */
    flex-wrap: wrap;
    /* Permite quebrar linha se necessário */
}

/* Nome Principal */
.cartao-pokemon .nome {
    margin-bottom: 0;
    text-transform: capitalize;
    font-size: 1.8rem;
    font-weight: 800;
    line-height: 1.1;
    /* Ajusta altura da linha para nomes longos */
}

/* Botão de Som */
.cartao-pokemon .pokemon-som {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    /* Círculo */
    background-color: rgba(255, 255, 255, 0.7);
    /* Fundo branco semi-transparente */
    display: flex;
    align-items: center;
    justify-content: center;
    /* Centraliza emoji */
    font-size: 1rem;
    cursor: pointer;
    opacity: 0.8;
    transition: all 0.2s ease;
    /* Transição suave */
    padding: 0;
}

.cartao-pokemon .pokemon-som:hover {
    opacity: 1.0;
    transform: scale(1.1);
    background-color: rgba(255, 255, 255, 1.0);
}

.cartao-pokemon .pokemon-som.escondido {
    display: none;
}

/* Esconde se não houver som */

/* Tag Lendário/Mítico */
.cartao-pokemon .lendario-status {
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 4px;
    color: white;
    font-size: 10px;
    text-transform: uppercase;
}

.cartao-pokemon .lendario-status.lendario {
    background-color: #FFD700;
    color: #6b4f00;
}

/* Dourado */
.cartao-pokemon .lendario-status.mitico {
    background-color: #D3A1FF;
    color: #4b0082;
}

/* Roxo */

/* ID do Pokémon (Canto superior direito) */
.cartao-pokemon #pokemon-id {
    font-size: 1.5rem;
    font-weight: 500;
}

/* --- Sub-seção: Tipo e Região --- */

/* Container para Tipo e Região */
.cartao-pokemon .tipo-regiao-container {
    display: flex;
    align-items: center;
    gap: 15px;
    justify-content: flex-start;
    /* Alinha à esquerda */
    margin-bottom: 10px;
}

/* Tag do Tipo */
.cartao-pokemon .tipo {
    font-size: 12px;
    background-color: #FFFFFF;
    opacity: 0.7;
    border-radius: 10px;
    padding: 4px 12px;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    width: fit-content;
    align-self: flex-start;
    /* Impede esticar */
    text-transform: capitalize;
    color: #333;
}

/* Tag da Região */
.cartao-pokemon .regiao-info {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.8);
    background-color: rgba(0, 0, 0, 0.2);
    padding: 3px 8px;
    border-radius: 5px;
    margin: 0;
    /* Remove margem do <p> */
}

/* --- Sub-seção: Imagem Principal --- */

/* Container da Imagem: Cresce para ocupar espaço e centraliza a <img> */
.cartao-pokemon .cartao-imagem {
    flex-grow: 1;
    /* Ocupa o espaço vertical disponível no .cartao-topo */
    display: flex;
    align-items: center;
    /* Centraliza verticalmente a <img> */
    justify-content: center;
    /* Centraliza horizontalmente a <img> */
    margin-top: auto;
    /* Ajuda na centralização vertical */
    margin-bottom: auto;
    min-height: 150px;
    /* Altura mínima ajustada */
}

/* Imagem Padrão (Artwork) */
.cartao-pokemon .cartao-imagem img {
    max-height: 100%;
    /* Limita a altura ao container */
    max-width: 100%;
    /* Limita a largura ao container */
    filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.3));
    /* Sombra */
    object-fit: contain;
    /* Garante que a imagem caiba sem distorcer */
}

/* Estilo Específico para Sprites (ativado via JS com classe .mostrando-sprite) */
.cartao-pokemon .cartao-imagem img.mostrando-sprite {
    max-height: none;
    max-width: none;
    /* Remove limites padrão */
    width: 120px;
    height: 120px;
    /* Tamanho fixo para sprite */
    image-rendering: pixelated;
    /* Mantém pixelado ao escalar */
    transform: scale(1.8);
    /* Zoom */
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
    /* Sombra diferente */
}


/* ==========================================================================
   Seção Inferior do Card (Branca - .cartao-informacoes)
   ========================================================================== */

/* Layout da seção inferior: flex com quebra, espaçamento */
.cartao-pokemon .cartao-informacoes {
    display: flex;
    flex-wrap: wrap;
    /* Permite quebrar linha se necessário */
    justify-content: space-around;
    /* Distribui as colunas */
    background-color: #FFFFFF;
    padding: 20px 15px 15px;
    /* Padding interno */
}

/* Estilo comum para as colunas (Status, Evoluções, Habilidades) */
.cartao-pokemon .cartao-informacoes .status,
.cartao-pokemon .cartao-informacoes .evolucoes,
.cartao-pokemon .cartao-informacoes .habilidades {
    padding: 0 5px;
    /* Padding lateral pequeno */
    width: 110px;
    /* Largura ajustada para caber 3 colunas */
    margin-bottom: 15px;
    /* Espaço abaixo de cada coluna */
    text-align: center;
    /* Centraliza conteúdo da coluna */
}

/* Títulos das colunas (H3) */
.cartao-pokemon .cartao-informacoes h3 {
    font-size: 1rem;
    font-weight: 800;
    margin-bottom: 10px;
    border-bottom: 2px solid #eee;
    padding-bottom: 5px;
    /* text-align: center; (Já definido no pai) */
}

/* Itens das listas de Status e Habilidades (LI) */
.cartao-pokemon .lista-status li,
.cartao-pokemon .lista-habilidades li {
    border-bottom: 1px solid #f0f0f0;
    padding: 4px 0;
    margin-bottom: 6px;
    font-size: 0.85rem;
    list-style-type: none;
    text-transform: capitalize;
    text-align: left;
    /* Alinha o texto da lista à esquerda */
}

/* Span dentro da lista de status (valor numérico) */
.cartao-pokemon .lista-status li span {
    font-weight: 500;
    float: right;
}

/* Alinha valor à direita */

/* Itens da lista de Evoluções (LI) */
.cartao-pokemon .lista-evolucoes li {
    font-size: 0.9rem;
    text-transform: capitalize;
    margin-bottom: 8px;
    text-align: center;
    font-weight: bold;
    color: #333;
}

/* Seta entre evoluções */
.cartao-pokemon .lista-evolucoes li:not(:last-child)::after {
    content: '▼';
    display: block;
    margin-top: 4px;
    color: #aaa;
    font-size: 9px;
}

/* Estilo para "Não possui evoluções" */
.cartao-pokemon .lista-evolucoes li.no-evolution {
    font-weight: normal;
    color: #888;
    text-align: left;
    margin-bottom: 0;
    font-size: 0.85rem;
}

/* Esconde seta para "Não possui evoluções" */
.cartao-pokemon .lista-evolucoes li.no-evolution::after {
    display: none;
}


/* ==========================================================================
   Cores de Fundo por Tipo (Aplicadas ao .cartao-pokemon)
   ========================================================================== */
.tipo-normal {
    background-color: #A8A77A;
}

.tipo-fire {
    background-color: #EE8130;
}

.tipo-water {
    background-color: #6390F0;
}

.tipo-electric {
    background-color: #F7D02C;
}

.tipo-grass {
    background-color: #7AC74C;
}

.tipo-ice {
    background-color: #96D9D6;
}

.tipo-fighting {
    background-color: #C22E28;
}

.tipo-poison {
    background-color: #A33EA1;
}

.tipo-ground {
    background-color: #E2BF65;
}

.tipo-flying {
    background-color: #A98FF3;
}

.tipo-psychic {
    background-color: #F95587;
}

.tipo-bug {
    background-color: #A6B91A;
}

.tipo-rock {
    background-color: #B6A136;
}

.tipo-ghost {
    background-color: #735797;
}

.tipo-dragon {
    background-color: #6F35FC;
}

.tipo-dark {
    background-color: #705746;
}

.tipo-steel {
    background-color: #B7B7CE;
}

.tipo-fairy {
    background-color: #D685AD;
}

/* Cor para o card de erro */
.tipo-unknown {
    background-color: #8a8a8a;
}

/* Esconde imagem no card de erro */
.cartao-pokemon.tipo-unknown .cartao-imagem img {
    display: none;
}


/* ==========================================================================
   Spinner de Carregamento (Overlay)
   ========================================================================== */

/* Estilos do overlay que cobre o card durante o loading */
.loading-overlay {
    display: none;
    /* Escondido por padrão */
    position: absolute;
    /* Cobre o pai (.cartoes-pokemon) */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    /* Fundo branco semi-transparente */
    border-radius: 10px;
    /* Mesmas bordas do card */
    justify-content: center;
    align-items: center;
    /* Centraliza o spinner */
    z-index: 10;
    /* Fica acima do conteúdo do card */
}

/* Torna o overlay visível (ativado via JS) */
.loading-overlay.visivel {
    display: flex;
}

/* O spinner animado (imita Pokebola) */
.loading-spinner {
    width: 60px;
    height: 60px;
    border: 6px solid #f3f3f3;
    /* Cinza claro */
    border-top: 6px solid #e74c3c;
    border-bottom: 6px solid #e74c3c;
    /* Vermelho */
    border-radius: 50%;
    /* Círculo */
    animation: spin 1s linear infinite;
    /* Aplica a animação */
}

/* Animação de rotação */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* ==========================================================================
   Estilos da Descrição (Movida para fora do card - Controlado por global.css)
   ========================================================================== */
/*
 * Os estilos para .descricao, .descricao h3, .descricao p
 * foram movidos para global.css ou um arquivo separado,
 * pois .descricao não é mais filho direto de .cartao-pokemon.
*/
/**
 * @file listagem.css
 * @description Estilos para a coluna de navegação/lista de recentes à direita.
 * Inclui a barra de busca e a lista de botões dos Pokémon.
 */

/* ==========================================================================
   Contêiner Principal da Listagem
   ========================================================================== */

/* Define a largura máxima da coluna da direita */
.listagem {
    max-width: 200px;
    /* Largura fixa para esta coluna */
    width: 100%;
    /* Garante que tente ocupar o espaço disponível até o max-width */
    flex-shrink: 0;
    /* Impede que a coluna encolha */
    /* O alinhamento vertical é controlado pelo pai (.pokedex) no global.css */
}

/* ==========================================================================
   Barra de Busca
   ========================================================================== */

/* Contêiner do formulário de busca */
.listagem .busca-form {
    display: flex;
    /* Alinha input e botão lado a lado */
    width: 100%;
    /* Ocupa toda a largura da coluna .listagem */
    margin-bottom: 15px;
    /* Espaço abaixo da busca, antes da lista */
    box-sizing: border-box;
    /* Padding não aumenta a largura total */
}

/* Campo de input da busca */
.listagem .busca-input {
    flex-grow: 1;
    /* Faz o input ocupar o espaço horizontal restante */
    padding: 8px 10px;
    /* Padding interno */
    border: 1px solid #ccc;
    /* Borda sutil */
    border-radius: 5px 0 0 5px;
    /* Arredonda apenas os cantos esquerdos */
    font-size: 0.9rem;
    /* Tamanho da fonte */
    outline: none;
    /* Remove a borda azul padrão ao focar */
    /* (Opcional) Adiciona uma transição suave para foco */
    /* transition: border-color 0.2s ease; */
}

/* (Opcional) Estilo de foco para o input */
/* .listagem .busca-input:focus { border-color: #A040A0; } */

/* Botão "Buscar" */
.listagem .busca-botao {
    padding: 8px 12px;
    /* Padding interno */
    border: 1px solid #A040A0;
    /* Cor da borda (roxo) */
    background-color: #A040A0;
    /* Cor de fundo (roxo) */
    color: white;
    /* Cor do texto */
    border-radius: 0 5px 5px 0;
    /* Arredonda apenas os cantos direitos */
    cursor: pointer;
    /* Muda o cursor para indicar clicabilidade */
    font-size: 0.9rem;
    /* Tamanho da fonte */
    font-weight: bold;
    /* Texto em negrito */
    transition: background-color 0.2s ease, border-color 0.2s ease;
    /* Transição suave no hover */
    flex-shrink: 0;
    /* Impede que o botão encolha */
}

/* Efeito hover para o botão "Buscar" */
.listagem .busca-botao:hover {
    background-color: #BA68C8;
    /* Cor de fundo mais clara */
    border-color: #BA68C8;
    /* Cor da borda correspondente */
}


/* ==========================================================================
   Lista de Pokémon Recentes (Botões)
   ========================================================================== */

/*
 * Estilo de cada item (botão) na lista de recentes.
 * Layout flex vertical para centralizar o nome.
 */
.listagem .pokemon {
    display: flex;
    flex-direction: column;
    /* Organiza conteúdo verticalmente (caso haja imagem no futuro) */
    align-items: center;
    /* Centraliza conteúdo horizontalmente */
    justify-content: center;
    /* Centraliza conteúdo verticalmente */
    margin-bottom: 10px;
    /* Espaço entre os botões */
    background-color: #6B727A;
    /* Cor de fundo cinza escuro */
    color: #FFFFFF;
    /* Cor do texto (branco) */
    padding: 15px 10px;
    /* Padding interno */
    cursor: pointer;
    /* Indica clicabilidade */
    border-radius: 10px;
    /* Bordas arredondadas */
    min-height: 50px;
    /* Altura mínima ajustada */
    box-shadow: rgba(100, 100, 111, 0.2) 0px 4px 10px 0px;
    /* Sombra mais sutil */
    transition: transform 0.15s ease-in-out, background-color 0.2s ease;
    /* Transições */
    text-align: center;
    /* Garante centralização do texto */
}

/* Efeito hover para os botões da lista */
.listagem .pokemon:hover {
    transform: scale(1.05);
    /* Efeito de crescimento sutil */
    background-color: #8A9199;
    /* Cor de fundo levemente mais clara */
}

/*
 * Estilo para o span que contém o nome do Pokémon dentro do botão.
 */
.listagem .pokemon span {
    padding-right: 0;
    /* Remove padding desnecessário */
    font-size: 1rem;
    /* Tamanho da fonte ajustado */
    text-transform: capitalize;
    /* Primeira letra maiúscula */
    width: 100%;
    /* Garante que o span ocupe a largura para centralização */
    font-weight: 500;
    /* Peso da fonte */
}

/*
 * Estilo para o botão que representa o Pokémon ATUALMENTE selecionado/exibido.
 * (Classe adicionada/removida via JavaScript - ui.js).
 */
.listagem .pokemon.ativo {
    background-color: #FA6668;
    /* Cor de destaque (vermelho/rosa) */
    transform: scale(1.03);
    /* Leve crescimento para indicar seleção */
    box-shadow: rgba(250, 102, 104, 0.4) 0px 6px 15px 0px;
    /* Sombra correspondente */
}

/* Regra de imagem (atualmente não usada, pois removemos as imagens da lista) */
/* .listagem .pokemon img { ... } */
/**
 * @file responsivo.css
 * @description Estilos responsivos para a aplicação Pokédex.
 * Contém regras CSS que são aplicadas APENAS quando a largura da tela
 * é menor ou igual a 750 pixels (típico de tablets em modo retrato e celulares).
 * O objetivo é adaptar o layout de 3 colunas (desktop) para um layout
 * de 1 coluna (mobile), melhorando a usabilidade em telas pequenas.
 */

/*
 * Media Query: Aplica as regras abaixo SOMENTE se a largura da viewport
 * for 750 pixels ou menos.
 */
@media (max-width: 750px) {

    /* --- Ajustes Globais para Telas Menores --- */

    /* Aumenta ligeiramente a fonte base para melhorar a legibilidade mobile */
    body {
        font-size: 14px;
    }

    /* --- Layout Principal (Modo Empilhado) --- */

    /*
     * Altera o layout principal do .pokedex de 'row' (lado-a-lado) para 'column' (empilhado).
     * Ajusta padding, largura máxima e espaçamento para o contexto mobile.
     */
    .pokedex {
        flex-direction: column;
        /* Força Descrição, Card e Lista a ficarem um sobre o outro */
        padding: 20px;
        /* Reduz padding geral para telas menores */
        max-width: 95%;
        /* Permite ocupar quase toda a largura da tela */
        gap: 20px;
        /* Espaço vertical entre os blocos empilhados */
        /* align-items: flex-start; (Herdado ou redefinido se necessário, aqui OK) */
        /* justify-content: center; (Herdado, ajuda a centralizar horizontalmente) */
    }

    /* --- Bloco da Descrição (Mobile) --- */

    /*
     * Faz o bloco da Descrição ocupar a largura total disponível e o centraliza.
     * Ajusta padding e fontes para mobile.
     */
    .descricao {
        width: 100%;
        /* Ocupa a largura total do .pokedex */
        max-width: 400px;
        /* Limita a largura máxima para não ficar excessiva */
        align-self: center;
        /* Garante centralização horizontal do bloco */
        padding: 20px;
        /* Padding interno */
        /* Os estilos de fundo, borda, sombra são herdados do CSS base */
    }

    .descricao h3 {
        font-size: 1.3rem;
    }

    /* Título um pouco menor */
    .descricao p {
        font-size: 0.9rem;
    }

    /* Texto da descrição um pouco menor */


    /* --- Bloco do Card Pokémon (Mobile) --- */

    /*
     * Faz o contêiner do card ocupar a largura total disponível e o centraliza.
     */
    .cartoes-pokemon {
        width: 100%;
        /* Ocupa a largura total do .pokedex */
        max-width: 400px;
        /* Limita a largura máxima */
        align-self: center;
        /* Centraliza horizontalmente */
    }

    /* O .cartao-pokemon interno se ajustará automaticamente à largura do pai */
    .cartao-pokemon {
        /* A altura se ajusta ao conteúdo, removemos min-heights fixos */
    }

    /* Ajustes no Topo Colorido do Card (Mobile) */
    .cartao-pokemon .cartao-topo {
        padding: 15px 20px 10px;
        /* Padding reduzido */
        min-height: auto;
        /* Remove altura mínima fixa do desktop */
        gap: 8px;
        /* Espaço menor entre elementos */
    }

    /* Reduz o tamanho da fonte do nome e ID */
    .cartao-pokemon .nome {
        font-size: 1.5rem;
    }

    .cartao-pokemon #pokemon-id {
        font-size: 1.2rem;
    }

    /* Reduz o tamanho do botão de som */
    .cartao-pokemon .pokemon-som {
        width: 25px;
        height: 25px;
        font-size: 0.8rem;
    }

    /* Reduz o tamanho da tag Lendário/Mítico */
    .cartao-pokemon .lendario-status {
        font-size: 9px;
        padding: 1px 4px;
    }

    /* Reduz o tamanho das tags Tipo e Região */
    .cartao-pokemon .tipo {
        font-size: 11px;
        padding: 3px 8px;
    }

    .cartao-pokemon .regiao-info {
        font-size: 11px;
        padding: 2px 6px;
    }

    /* Ajustes na Imagem Principal do Card (Mobile) */
    .cartao-pokemon .cartao-imagem {
        min-height: 180px;
        /* Altura mínima menor para a imagem */
    }

    /* Reduz o tamanho dos Sprites quando exibidos no mobile */
    .cartao-pokemon .cartao-imagem img.mostrando-sprite {
        width: 96px;
        height: 96px;
        transform: scale(1.5);
        /* Mantém um tamanho razoável */
    }

    /* Ajustes na Base Branca do Card (Mobile) */
    .cartao-pokemon .cartao-informacoes {
        padding: 15px;
        /* Padding geral reduzido */
        justify-content: space-around;
        /* Mantém colunas espaçadas */
    }

    /* Ajusta as colunas (Status, Evo, Habilidades) para talvez ficarem lado a lado */
    .cartao-pokemon .cartao-informacoes .status,
    .cartao-pokemon .cartao-informacoes .evolucoes,
    .cartao-pokemon .cartao-informacoes .habilidades {
        width: 31%;
        /* Usa porcentagem para tentar caber 3 colunas */
        min-width: 90px;
        /* Largura mínima para evitar aperto excessivo */
        padding: 0 3px;
        /* Padding lateral mínimo */
        margin-bottom: 10px;
        /* Espaço inferior */
    }

    /* Reduz o tamanho dos títulos das colunas */
    .cartao-pokemon .cartao-informacoes h3 {
        font-size: 0.9rem;
        margin-bottom: 8px;
        /* Menor */
    }

    /* Reduz o tamanho da fonte dos itens das listas */
    .cartao-pokemon .lista-status li,
    .cartao-pokemon .lista-habilidades li,
    .cartao-pokemon .lista-evolucoes li {
        font-size: 0.75rem;
        margin-bottom: 5px;
        padding: 3px 0;
        /* Menor */
    }

    /* Ajusta a seta da evolução */
    .cartao-pokemon .lista-evolucoes li:not(:last-child)::after {
        margin-top: 3px;
        font-size: 8px;
    }


    /* --- Bloco da Lista de Navegação/Recentes (Mobile) --- */

    /* Faz a lista ocupar a largura total e a centraliza */
    .listagem {
        width: 100%;
        /* Ocupa largura total do .pokedex */
        max-width: 400px;
        /* Mesma largura máxima do card */
        align-self: center;
        /* Centraliza horizontalmente */
    }

    /* Ajusta a UL para layout flexível com quebra de linha (Grid de botões) */
    .listagem ul {
        display: flex;
        flex-wrap: wrap;
        /* Permite que os botões quebrem para a próxima linha */
        gap: 8px;
        /* Espaço entre os botões */
        justify-content: center;
        /* Centraliza os botões horizontalmente */
    }

    /* Ajusta cada botão da lista */
    .listagem .pokemon {
        width: calc(50% - 4px);
        /* Tenta fazer 2 colunas de botões (50% - metade do gap) */
        min-width: 120px;
        /* Largura mínima para cada botão */
        min-height: 50px;
        /* Altura menor para os botões */
        padding: 10px 5px;
        /* Padding interno */
        margin-bottom: 0;
        /* Remove margem inferior (o gap cuida disso) */
        font-size: 0.9rem;
        /* Tamanho da fonte */
        /* border-radius é herdado ou redefinido se necessário */
    }

    /* Ajusta o span dentro do botão */
    .listagem .pokemon span {
        font-size: 0.9rem;
    }

}

/* Fim da @media query */