@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;600;700&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Barlow Condensed', sans-serif;
}

body, html {
    height: 100%;
    width: 100%;
    background-color: #1a1a1a;
}

.background-overlay {
    width: 100%;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 1rem;
    
    /* 1. O fundo colorido */
    background: linear-gradient(135deg, #344A56, #1C2A38);
    
    /* 2. Colocamos a imagem em um elemento "falso" que cobre tudo */
    position: relative;
    opacity: 0.9;
}

.background-overlay::before {
    content: "";
    position: absolute;
    inset: 0; /* ocupa todo o espaço */
    background: url('../images/pokebg.webp') no-repeat center center fixed;
    background-size: cover;
    
    opacity: 0.25;      /* Opacidade que você queria */
    filter: blur(10px);  /* O blur que você queria */
    
    z-index: -1;        /* Joga para trás de tudo */
}

.comparison-container {
    background-color: rgba(255, 255, 255, 0.03);
    /*! color: #e0e0e0; */
    padding-block: 0.6rem;
    border-radius: 50px;
    width: 100%;
    max-width: 900px;
    /*! box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8); */
    border: 1px solid #fff;
    border-color: rgba(255, 255, 255, 0.15);
    color: white;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(10px);
    padding-bottom: 60px;
}

.main-title {
    text-align: center;
    margin-bottom: 0.5rem;
}

.main-title h1 {
    font-size: 1.4em;
    color: #2B384D;
    background-color: #E4EAF4;
    border-radius: 30px;
    align-content: center;
    text-align: center;
    display: inline-block;
    padding-block: 16px;
    width: 92%;
}

/* BATTLE ARENA */
.battle-arena {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: 
        "area-p1 area-p2"
        "area-radar area-radar";
    gap: 15px;
    /*! margin-top: -10px; */
    margin-bottom: 30px;
    /*! padding-inline: 0.6rem; */
}

.slot-container.left { grid-area: area-p1; }
.radar-placeholder { grid-area: area-radar; }

.slot-container {
    text-align: center;
    padding: 0.5rem 0.5rem;
    /*! background: rgba(35, 35, 35, 0.5); */
    border-radius: 8px;
    /*! border: 1px solid #2a2a2a; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    /*! align-content: flex-start; */
}

.pokemon-sprite-container {
    height: 130px; /* A altura do "palco" */
    width: 100%;
    
    display: flex;
    justify-content: center; /* Mantém centralizado na horizontal (esquerda/direita) */
    
    /* A MUDANÇA MÁGICA: */
    align-items: flex-end; /* Alinha os itens na base (no chão) */
    
    /* Dica de Design: Adicione um pequeno espaço embaixo para 
       o pé do Pokémon não colar na borda da div ou no nome */
    padding-bottom: 10px; 
    
    position: relative;
}


.pokeball-bg {
  position: absolute;
  
  /* 1. Cola ele no chão */
  bottom: 10px; /* Use o mesmo valor do padding-bottom do pai para ficar alinhado com o pé do pokemon */
  
  /* 2. Centraliza horizontalmente (o truque clássico do absolute) */
  left: 50%;
  transform: translateX(-50%);

  /* Resto do seu estilo... */
  width: 120px; /* Sugiro aumentar um pouco já que é BG */
  height: 80px;
  background: url('../images/Pokeball.svg') no-repeat center center;
  background-size: contain;
  opacity: 0.05;
  z-index: 0;
  pointer-events: none;
}

.sprite-img {
    width: auto;  /* <--- O SEGREDO: Respeita a largura original do arquivo */
    height: auto; /* <--- Respeita a altura original */
    
    /* Trava de segurança: Se o Pokémon for GIGANTE (maior que 150px), 
       ele reduz para caber, mas nunca estica os pequenos */
    max-height: 100%; 
    max-width: 100%;
    position: relative;
    z-index: 1;
}

.pokemon-name {
    font-size: 1.5rem;
    font-weight: 700;
    /*! margin-bottom: 0.2rem; */
    color: #fff;
}

.pokemon-id, .pokemon-type {
    font-size: 1.2rem;
    margin-bottom: 0.3rem;
}

.add-btn {
    color: #fff;
    border: 1px solid #ffffff69;
    padding: 0.4rem 0.6rem;
    cursor: pointer;
    border-radius: 30px;
    font-weight: 600;
    font-size: 1rem;
    width: 100%;
    background-color: transparent;
    text-transform: uppercase;
    display: flex;            /* Alinha ícone e texto */
    align-items: center;      /* Centraliza verticalmente */
    justify-content: center;  /* Centraliza horizontalmente */
    gap: 4px;                 /* Espaço entre o ícone e o texto */
    transition: all 0.3s ease;
    padding: 0.6rem 1.2rem;
    width: auto;
}

.add-btn i {
    font-size: 1.1em; /* Ajuste leve no tamanho do ícone se precisar */
}

.add-btn:hover {
    background-color: rgba(228, 234, 244, 0.2);
}

.radar-chart-container {
    grid-area: area-radar;
    width: 100%;
    /* Diminuindo os valores: */
    max-width: 300px;  /* Ajuste conforme o necessário */
    height: 250px;     /* Reduzi de 280px para 250px */
    margin: 0 auto;    /* Centraliza o gráfico no meio da área dele */
    position: relative;
}

/* STATS TABLE */
.info-comparison {
    margin-top: 1rem;
}

.section-title {
    text-align: center;
    font-size: 1.6rem;
    margin-bottom: 1.2rem;
    color: #fff;
    /*! letter-spacing: 1px; */
    font-weight: 550;
}

.stats-table {
    width: 100%;
    margin: 0 auto;
    align-content: center;
}

.stat-row {
    display: grid;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0px;
    /*! border-bottom: 1px solid #1a1a1a; */
    grid-template-columns: 1fr 8rem 1fr;
}

.stat-label {
    flex: 1;
    text-align: center;
    font-weight: 550;
    /*! font-size: 1rem; */
    text-transform: uppercase;
    color: #D6D7E3;
}

.stat-val {
    flex: 1;
    font-size: 1.25rem;
    font-weight: 600;
}

.stat-val.left { text-align: right; padding-right: 1rem; }
.stat-val.right { text-align: left; padding-left: 1rem; }

.bar-container {
    display: none;
}

.total-row {
    border-top: 1px solid #2a2a2a;
    margin-top: 0.5rem;
}

.total-row .stat-val {
    font-size: 1rem;
    color: #fff;
}

.pokemon-display {
    margin-bottom: 16px;
}

.divider {
    border-bottom: #ffffff1c 1px solid;
    margin-block: 8px;
    /*! margin-inline: -24px; */
}

.stat-row:nth-child(odd) {
    background-color: rgba(255, 255, 255, 0.04); /* Um branco bem fraquinho */
     /* Arredonda os cantos da faixa para ficar moderno */
    padding-block: 8px;
}

/* Alinha a bolinha e o nome no centro */
.name-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px; /* Espaço entre a bolinha e o nome */
    /*! margin-bottom: 5px; */
}

.chart-dot {
    width: 8px;  /* Aumentei um tiquinho pra ver melhor */
    height: 8px;
    border-radius: 50%;
    
    /* Cores padrão de fallback (caso o ID falhe) */
    background-color: #ccc; 
    
    /* COMEÇA INVISÍVEL */
    display: none; 
}

/* Se o slot-1 NÃO tiver a classe empty, mostra a bolinha dentro dele */
#slot-1:not(.empty) .chart-dot,
#slot-2:not(.empty) .chart-dot {
    display: block !important; 
}

/* Cor fixa do Slot 1 (Ciano) */
#slot-1 .chart-dot {
    background-color: rgb(2, 232, 232);
}

/* Cor fixa do Slot 2 (Rosa) */
#slot-2 .chart-dot {
    background-color: rgb(232, 2, 183);
}

/* DESKTOP LAYOUT */
@media (min-width: 769px) {
    .comparison-container {  padding-inline: 0px;padding-block: 1.6rem 3rem;}
    .main-title h1 { /*! font-size: 1.0rem; */ }

    .battle-arena {
        grid-template-columns: 1fr 320px 1fr;
        grid-template-areas: "area-p1 area-radar area-p2";
        gap: 20px;
        margin-top: 10px;
        margin-bottom: 24px;
        align-items: center;
    }

    .slot-container {
        /*! min-height: 224px; */
        /*! padding: 2rem; */
        /*! max-width: 230px; */
        /*! max-height: 206px; */
    }

    .pokemon-sprite-container { 
        /*! height: 90px; */ 
        /*! width: 180px; */ 
    }

    .pokemon-name { font-size: 1.5rem; }
    .pokemon-id { font-size: 1rem; }
    .pokemon-type { font-size: 0.8rem; }

    /* STATS TABLE DESKTOP ENHANCEMENT */
    .stat-row {
        display: grid;
        grid-template-columns: 1fr 80px 350px 80px 1fr;
        gap: 0px;
        align-items: center;
        padding: 0.7rem 90px;
    }

    .bar-container {
        display: block;
        width: 100%;
    }

    .bar-track {
        width: 100%;
        background: rgba(255, 255, 255, 0.05);
        height: 10px;
        border-radius: 8px;
        /*! overflow: hidden; */
        position: relative;
    }

    .bar-container.left .bar-fill {
        position: absolute;
        right: 0;
        top: 0;
    }

    .bar-fill {
        height: 100%;
        width: 0%;
        transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
        border-radius: 10px;
    }

    .stat-val.left {
        grid-column: 2;
        text-align: right;
        padding-right: 15px;
        color: #fff;
        font-weight: 550;
    }

    .stat-label {
        grid-column: 3;
        text-align: center;
        font-size: 1rem;
        /*! text-transform: uppercase; */
    }

    .stat-val.right {
        grid-column: 4;
        text-align: left;
        padding-left: 15px;
        color: #fff;
        font-weight: 550;
    }

    .bar-container.left { grid-column: 1; }
    .bar-container.right { grid-column: 5; }

    .total-row {
        grid-template-columns: 1fr 80px 120px 80px 1fr;
        border-top: 1px solid #333;
        margin-top: 1rem;
        padding-top: 0.5rem;
    }
}

/* Command Palette */
.palette-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.9);
    display: flex; justify-content: center; padding: 2rem 1rem; z-index: 1000;
}

.palette-container {
    width: 100%; max-width: 500px; background: #1a1a1a; border-radius: 8px;
    overflow: hidden; border: 1px solid #333; height: fit-content; max-height: 80vh;
    display: flex; flex-direction: column;
}

.palette-header { padding: 1rem; border-bottom: 1px solid #333; }
#pokemon-search-input { width: 100%; background: transparent; border: none; color: #fff; font-size: 1.1rem; outline: none; }
.palette-results { overflow-y: auto; flex: 1; }
.result-item { padding: 0.8rem 1rem; display: flex; align-items: center; cursor: pointer; border-bottom: 1px solid #222; }
.result-item:hover { background: #252525; }
.result-item img { width: 40px; height: 40px; margin-right: 1rem; }
.result-name { font-weight: bold; color: #fff; font-size: 0.9rem; }
.result-meta { font-size: 0.7rem; color: #555; }

/* Container que segura as tags */
.pokemon-types-container {
    display: flex;
    gap: 6px; /* Espaço entre as tags */
    justify-content: center; /* Centraliza as tags */
    margin-top: 5px;
}

/* O estilo base da Tag (Badge) */
.type-badge {
    padding: 4px 12px;
    border-radius: 20px; /* Borda bem redonda */
    font-size: 0.90rem;
    font-weight: 500;
    color: white;
    text-transform: capitalize;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-block
}

/* As cores de cada tipo */
.type-bug      { background-color: #A8B820; }
.type-dark     { background-color: #705848; }
.type-dragon   { background-color: #7038F8; }
.type-electric { background-color: #DFBD75; }
.type-fairy    { background-color: #EE99AC; }
.type-fighting { background-color: #C03028; }
.type-fire     { background-color: #FF524C; }
.type-flying   { background-color: #A890F0; }
.type-ghost    { background-color: #705898; }
.type-grass    { background-color: #6AC06D; }
.type-ground   { background-color: #E0C068; }
.type-ice      { background-color: #98D8D8; color: #333; }
.type-normal   { background-color: #748192; }
.type-poison   { background-color: #C055D5; }
.type-psychic  { background-color: #F85888; }
.type-rock     { background-color: #B8A038; }
.type-steel    { background-color: #B8B8D0; color: #333; }
.type-water    { background-color: #008CFF; }