From 4ad2f3e04ac428e774c96b4e5dd945f1960b1866 Mon Sep 17 00:00:00 2001
From: flavia-vic <fnevesdematos@gmail.com>
Date: Wed, 12 Mar 2025 11:01:47 -0400
Subject: [PATCH] refactor: improve error handling and update fetchPokemons
 limit

---
 src/stores/pokemonStore.js |   32 +-
 src/views/Home.vue         | 1119 +++++++++++++++++++++++++-----------
 2 files changed, 796 insertions(+), 355 deletions(-)

diff --git a/src/stores/pokemonStore.js b/src/stores/pokemonStore.js
index aa8bcd9..ae163a4 100644
--- a/src/stores/pokemonStore.js
+++ b/src/stores/pokemonStore.js
@@ -5,35 +5,41 @@ export const usePokemonStore = defineStore('pokemon', {
   state: () => ({
     pokemons: [],
     loading: false,
-    error: null,
+    error: null
   }),
-
+  
   actions: {
-    async fetchPokemons(limit = 10) {
+    // Busca a lista inicial de Pokémons
+    async fetchPokemons() {
       this.loading = true;
       this.error = null;
+      
       try {
-        const response = await axios.get(`https://pokeapi.co/api/v2/pokemon?limit=${limit}`);
+        const response = await axios.get('https://pokeapi.co/api/v2/pokemon?limit=20');
         this.pokemons = response.data.results;
-      } catch (err) {
-        this.error = err.message;
+      } catch (error) {
+        console.error('Erro ao buscar Pokémons:', error);
+        this.error = error.message || 'Falha ao carregar Pokémons';
       } finally {
         this.loading = false;
       }
     },
-
+    
+    // Busca detalhes de um Pokémon específico por nome
     async fetchPokemonDetails(name) {
       this.loading = true;
       this.error = null;
+      
       try {
-        const response = await axios.get(`https://pokeapi.co/api/v2/pokemon/${name}`);
+        const response = await axios.get(`https://pokeapi.co/api/v2/pokemon/${name.toLowerCase()}`);
         return response.data;
-      } catch (err) {
-        this.error = err.message;
+      } catch (error) {
+        console.error('Erro ao buscar detalhes do Pokémon:', error);
+        this.error = `Não foi possível encontrar o Pokémon: ${name}`;
         return null;
       } finally {
         this.loading = false;
       }
-    },
-  },
-});
+    }
+  }
+});
\ No newline at end of file
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 1e4280f..5cdb6b0 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,10 +1,12 @@
 <template>
-    <div class="container">
-      <h1 class="title">Pokemon Search</h1>
-  
-      <!-- Search Field -->
-      <div class="search-container">
-        <!-- Campo de entrada de texto com binding bidirecional com "searchQuery" e evento para disparar a busca ao pressionar Enter -->
+  <div class="container">
+    <header class="header">
+      <h1 class="title">Pokédex</h1>
+    </header>
+
+    <!-- Search Field -->
+    <div class="search-container">
+      <div class="search-wrapper">
         <input
           type="text"
           v-model="searchQuery"
@@ -12,363 +14,796 @@
           class="search-input"
           @keyup.enter="handleSearch"
         />
-        <!-- Botão de pesquisa que chama a função "handleSearch" -->
-        <button class="search-button" @click="handleSearch">Search</button>
-      </div>
-  
-      <!-- Histórico de Pesquisas -->
-      <div v-if="recentSearches.length" class="history-container">
-        <ul class="history-dropdown">
-          <!-- Exibe as pesquisas recentes, permitindo selecionar ou remover pesquisas anteriores -->
-          <li v-for="(item, index) in recentSearches" :key="index">
-            <span @click="fetchPokemonDetails(item)">{{ item }}</span>
-            <button class="remove-btn" @click="removeSearchHistory(index)">×</button>
-          </li>
-        </ul>
-      </div>
-  
-      <!-- Lista de Pokémons -->
-      <div class="pokemon-grid-container">
-        <!-- Exibe a lista de Pokémons apenas se não estiver carregando e houver dados -->
-        <ul v-if="!loading && pokemons.length" class="pokemon-grid">
-          <li
-            v-for="(pokemon, index) in pokemons"
-            :key="pokemon.name"
-            class="pokemon-card"
-            @click="fetchPokemonDetails(pokemon.name)"
-          >
-            <!-- Imagem e nome do Pokémon -->
-            <img
-              :src="`https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${index + 1}.png`"
-              alt="Pokemon Image"
-            />
-            <span>{{ pokemon.name }}</span>
-          </li>
-        </ul>
-      </div>
-  
-      <!-- Modal para exibir detalhes do Pokémon -->
-      <div v-if="pokemonDetails" class="modal" @click.self="closeModal">
-        <div class="modal-content">
-          <h2>{{ pokemonDetails.name }}</h2>
-          <img :src="pokemonDetails.sprites.front_default" alt="Pokemon Image" />
-          <p>Altura: {{ pokemonDetails.height * 10 }} cm</p> <!-- Converte de decímetros para centímetros -->
-          <p>Peso: {{ pokemonDetails.weight * 0.1 }} kg</p> <!-- Converte de hectogramas para quilogramas -->
-  
-          <p>Types: 
-            <span v-for="type in pokemonDetails.types" :key="type.type.name">{{ type.type.name }}</span>
-          </p>
-          <p>Abilities: 
-            <span v-for="ability in pokemonDetails.abilities" :key="ability.ability.name">
-              {{ ability.ability.name }}
-            </span>
-          </p>
-          <p>Stats:</p>
-          <ul>
-            <li v-for="stat in pokemonDetails.stats" :key="stat.stat.name">
-              {{ stat.stat.name }}: {{ stat.base_stat }}
-            </li>
-          </ul>
-          <button @click="closeModal">Close</button>
-        </div>
-      </div>
-  
-      <!-- Indicador de Carregamento -->
-      <div v-if="loading" class="loader">Loading...</div>
-  
-      <!-- Mensagem de Erro -->
-      <div v-if="error" class="error-message">
-        Error: {{ error }}
+        <button class="search-button" @click="handleSearch">
+          <span>Search</span>
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          </svg>
+        </button>
       </div>
     </div>
-  </template>
-  
-  
-  <script>
-  import { usePokemonStore } from "@/stores/pokemonStore";
-  
-  export default {
-    name: "Home",
-    data() {
-      return {
-        searchQuery: "", // Armazena o texto da pesquisa
-        recentSearches: [], // Histórico das pesquisas recentes
-        pokemonDetails: null, // Detalhes do Pokémon selecionado
-      };
+
+    <!-- Histórico de Pesquisas -->
+    <div v-if="recentSearches.length" class="history-section">
+      <h3 class="section-title">Recent Searches</h3>
+      <div class="history-tags">
+        <div v-for="(item, index) in recentSearches" :key="index" class="history-tag">
+          <span @click="fetchPokemonDetails(item)" class="tag-name">{{ item }}</span>
+          <button class="tag-remove" @click.stop="removeSearchHistory(index)" title="Remove from history">×</button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Loader -->
+    <div v-if="loading" class="loader-container">
+      <div class="loader"></div>
+      <p>Catching Pokémon...</p>
+    </div>
+
+    <!-- Error Message -->
+    <div v-if="error" class="error-container">
+      <p class="error-message">{{ error }}</p>
+      <button @click="retryFetch" class="retry-button">Try Again</button>
+    </div>
+
+    <!-- Lista de Pokémons -->
+    <div class="pokemon-section" v-if="!loading && pokemons.length">
+      <h3 class="section-title">Pokémon Collection</h3>
+      <div class="pokemon-grid">
+        <div
+          v-for="(pokemon, index) in pokemons"
+          :key="pokemon.name"
+          class="pokemon-card"
+          @click="fetchPokemonDetails(pokemon.name)"
+        >
+          <div class="card-image">
+            <img
+              :src="`https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${index + 1}.png`"
+              :alt="pokemon.name"
+            />
+          </div>
+          <div class="card-name">{{ pokemon.name }}</div>
+          <div class="card-number">#{{ index + 1 }}</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Modal para exibir detalhes do Pokémon -->
+    <transition name="modal-fade">
+      <div v-if="pokemonDetails" class="modal-overlay" @click.self="closeModal">
+        <div class="modal-container">
+          <div class="modal-header">
+            <h2 class="pokemon-name">{{ pokemonDetails.name }}</h2>
+            <span class="pokemon-id">#{{ pokemonDetails.id }}</span>
+            <button @click="closeModal" class="close-modal">×</button>
+          </div>
+          
+          <div class="modal-body">
+            <div class="pokemon-image">
+              <img :src="pokemonDetails.sprites.front_default" :alt="pokemonDetails.name" />
+            </div>
+            
+            <div class="pokemon-types">
+              <span 
+                v-for="type in pokemonDetails.types" 
+                :key="type.type.name" 
+                class="type-badge"
+                :class="type.type.name"
+              >
+                {{ type.type.name }}
+              </span>
+            </div>
+            
+            <div class="pokemon-info">
+              <div class="info-row">
+                <div class="info-item">
+                  <span class="info-label">Height</span>
+                  <span class="info-value">{{ (pokemonDetails.height * 10).toFixed(1) }} cm</span>
+                </div>
+                <div class="info-item">
+                  <span class="info-label">Weight</span>
+                  <span class="info-value">{{ (pokemonDetails.weight * 0.1).toFixed(1) }} kg</span>
+                </div>
+              </div>
+            </div>
+            
+            <div class="pokemon-abilities">
+              <h3>Abilities</h3>
+              <div class="abilities-list">
+                <span 
+                  v-for="ability in pokemonDetails.abilities" 
+                  :key="ability.ability.name"
+                  class="ability-badge"
+                >
+                  {{ ability.ability.name }}
+                </span>
+              </div>
+            </div>
+            
+            <div class="pokemon-stats">
+              <h3>Base Stats</h3>
+              <div class="stat-bars">
+                <div v-for="stat in pokemonDetails.stats" :key="stat.stat.name" class="stat-item">
+                  <div class="stat-label">{{ formatStatName(stat.stat.name) }}</div>
+                  <div class="stat-value">{{ stat.base_stat }}</div>
+                  <div class="stat-bar-container">
+                    <div 
+                      class="stat-bar" 
+                      :style="{ width: `${Math.min(stat.base_stat, 100)}%`, backgroundColor: getStatColor(stat.base_stat) }"
+                    ></div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script>
+import { usePokemonStore } from "@/stores/pokemonStore";
+
+export default {
+  name: "Home",
+  data() {
+    return {
+      searchQuery: "",
+      recentSearches: [],
+      pokemonDetails: null,
+    };
+  },
+  computed: {
+    pokemons() {
+      const store = usePokemonStore();
+      return store.pokemons;
     },
-    computed: {
-      // Obtém a lista de Pokémons do store
-      pokemons() {
-        const store = usePokemonStore();
-        return store.pokemons;
-      },
-      // Indica se está carregando os dados
-      loading() {
-        const store = usePokemonStore();
-        return store.loading;
-      },
-      // Armazena mensagens de erro do store
-      error() {
-        const store = usePokemonStore();
-        return store.error;
-      },
+    loading() {
+      const store = usePokemonStore();
+      return store.loading;
     },
-    methods: {
-      // Gerencia a lógica para buscar um Pokémon
-      handleSearch() {
-        if (this.searchQuery.trim()) {
-          // Adiciona ao histórico de pesquisas, removendo duplicatas e limitando a 5 itens
-          this.recentSearches = [
-            this.searchQuery,
-            ...this.recentSearches.filter((item) => item !== this.searchQuery),
-          ].slice(0, 5);
-  
-          // Busca os detalhes do Pokémon
-          this.fetchPokemonDetails(this.searchQuery);
-          this.searchQuery = ""; // Limpa o campo de pesquisa
-        }
-      },
-      // Remove um item do histórico de pesquisas
-      removeSearchHistory(index) {
-        this.recentSearches.splice(index, 1);
-      },
-      // Busca os detalhes de um Pokémon específico
-      
-      async fetchPokemonDetails(name) {
-        try {
-          const store = usePokemonStore();
-          this.pokemonDetails = await store.fetchPokemonDetails(name);
-        } catch (error) {
-          console.error("Erro ao buscar detalhes do Pokémon:", error);
-        }
-      },
-      // Fecha o modal de detalhes do Pokémon
-      closeModal() {
-        this.pokemonDetails = null;
-      },
+    error() {
+      const store = usePokemonStore();
+      return store.error;
     },
-    // Ao montar o componente, carrega a lista inicial de Pokémons
-    mounted() {
+  },
+  methods: {
+    handleSearch() {
+      if (this.searchQuery.trim()) {
+        this.recentSearches = [
+          this.searchQuery,
+          ...this.recentSearches.filter((item) => item !== this.searchQuery),
+        ].slice(0, 5);
+        this.fetchPokemonDetails(this.searchQuery);
+        this.searchQuery = "";
+      }
+    },
+    removeSearchHistory(index) {
+      this.recentSearches.splice(index, 1);
+    },
+    async fetchPokemonDetails(name) {
+      try {
+        const store = usePokemonStore();
+        this.pokemonDetails = await store.fetchPokemonDetails(name);
+      } catch (error) {
+        console.error("Erro ao buscar detalhes do Pokémon:", error);
+      }
+    },
+    closeModal() {
+      this.pokemonDetails = null;
+    },
+    retryFetch() {
       const store = usePokemonStore();
       store.fetchPokemons();
     },
-  };
-  </script>
-  
-  <style scoped>
-  
-  body {
-    background-color: #fffafc;
-    font-family: "Poppins", sans-serif;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    min-height: 100vh;
-    margin: 0;
+    formatStatName(statName) {
+      // Formata os nomes dos stats para exibição
+      const statMap = {
+        'hp': 'HP',
+        'attack': 'Attack',
+        'defense': 'Defense',
+        'special-attack': 'Sp. Atk',
+        'special-defense': 'Sp. Def',
+        'speed': 'Speed'
+      };
+      return statMap[statName] || statName;
+    },
+    getStatColor(value) {
+      // Retorna uma cor com base no valor do stat
+      if (value < 50) return '#ff5959';
+      if (value < 70) return '#ffa538';
+      if (value < 90) return '#ffd866';
+      return '#48d0b0';
+    }
+  },
+  mounted() {
+    const store = usePokemonStore();
+    store.fetchPokemons();
+  },
+};
+</script>
+
+<style scoped>
+/* Base Styles */
+/* Base Styles */
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+.container {
+  max-width: 1000px;
+  margin: 0 auto;
+  padding: 20px;
+  font-family: 'Roboto', 'Segoe UI', sans-serif;
+  color: #333;
+}
+
+.header {
+  text-align: center;
+  margin-bottom: 30px;
+}
+
+.title {
+  font-size: 2.5rem;
+  font-weight: 700;
+  color: #3563ba;
+  position: relative;
+  display: inline-block;
+  letter-spacing: 0.05em;
+}
+
+.title::after {
+  content: '';
+  position: absolute;
+  width: 50%;
+  height: 3px;
+  background-color: #ffcb05;
+  bottom: -8px;
+  left: 25%;
+}
+
+.section-title {
+  font-size: 1.2rem;
+  margin-bottom: 12px;
+  color: #3563ba;
+  font-weight: 500;
+}
+
+/* Search Section - Improved */
+.search-container {
+  margin-bottom: 30px;
+  background-color: transparent;
+}
+
+.search-wrapper {
+  display: flex;
+  max-width: 600px;
+  margin: 0 auto;
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  transition: all 0.3s ease;
+  border: 0px solid;
+  position: relative;
+}
+
+
+
+.search-input {
+  flex: 1;
+  padding: 14px 24px;
+  font-size: 1.05rem;
+  outline: none;
+  height: 75px;
+}
+
+
+.search-input:focus::placeholder {
+  color: #b0bdd4;
+}
+
+.search-button {
+  padding: 0 28px;
+  background-color: #3563ba;
+  color: white;
+  border: none;
+  font-weight: 600;
+  font-size: 0.95rem;
+  cursor: pointer;
+  transition: all 0.3s;
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 75px;
+
+}
+
+.search-button:before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+  transition: 0.5s;
+}
+
+.search-button:hover {
+  background-color: #2a51a0;
+}
+
+.search-button:hover:before {
+  left: 100%;
+}
+
+.search-button span {
+  position: relative;
+  z-index: 1;
+}
+
+/* Adicionar ícone de lupa ao botão */
+.search-button::after {
+  content: '';
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-size: contain;
+  margin-left: 8px;
+  position: relative;
+  z-index: 1;
+}
+
+/* History Section */
+.history-section {
+  margin-bottom: 25px;
+}
+
+.history-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.history-tag {
+  display: flex;
+  align-items: center;
+  background-color: #f0f4ff;
+  border-radius: 20px;
+  padding: 6px 12px;
+  font-size: 0.9rem;
+  transition: background-color 0.2s;
+}
+
+.history-tag:hover {
+  background-color: #e0e8ff;
+}
+
+.tag-name {
+  cursor: pointer;
+}
+
+.tag-remove {
+  margin-left: 6px;
+  background: none;
+  border: none;
+  color: #aaa;
+  font-size: 1.2rem;
+  cursor: pointer;
+  width: 18px;
+  height: 18px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  padding: 0;
+  line-height: 1;
+}
+
+.tag-remove:hover {
+  color: #777;
+  background-color: rgba(0, 0, 0, 0.05);
+}
+
+/* Pokemon Grid */
+.pokemon-section {
+  margin-top: 20px;
+}
+
+.pokemon-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+  gap: 20px;
+}
+
+.pokemon-card {
+  position: relative;
+  background-color: white;
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
+  cursor: pointer;
+  transition: transform 0.2s, box-shadow 0.2s;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 15px 10px;
+}
+
+.pokemon-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
+}
+
+.card-image {
+  width: 100px;
+  height: 100px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 10px;
+}
+
+.card-image img {
+  width: 100%;
+  height: auto;
+  transition: transform 0.3s;
+}
+
+.pokemon-card:hover .card-image img {
+  transform: scale(1.15);
+}
+
+.card-name {
+  font-weight: 500;
+  font-size: 1.1rem;
+  text-transform: capitalize;
+  margin-bottom: 3px;
+}
+
+.card-number {
+  font-size: 0.85rem;
+  color: #888;
+}
+
+/* Modal */
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.6);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+  padding: 20px;
+}
+
+.modal-container {
+  background-color: white;
+  border-radius: 15px;
+  width: 100%;
+  max-width: 480px;
+  max-height: 90vh;
+  overflow-y: auto;
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
+  animation: modalAppear 0.3s;
+}
+
+.modal-header {
+  padding: 15px 20px;
+  border-bottom: 1px solid #eee;
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+
+.pokemon-name {
+  flex: 1;
+  font-size: 1.6rem;
+  font-weight: 600;
+  text-transform: capitalize;
+  margin-right: 10px;
+  color: #333;
+}
+
+.pokemon-id {
+  font-size: 1.2rem;
+  color: #888;
+  font-weight: 500;
+}
+
+.close-modal {
+  position: absolute;
+  right: 15px;
+  top: 15px;
+  background: none;
+  border: none;
+  font-size: 1.5rem;
+  color: #999;
+  cursor: pointer;
+  width: 30px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+}
+
+.close-modal:hover {
+  background-color: rgba(0, 0, 0, 0.05);
+  color: #555;
+}
+
+.modal-body {
+  padding: 20px;
+}
+
+.pokemon-image {
+  text-align: center;
+  margin-bottom: 20px;
+}
+
+.pokemon-image img {
+  width: 150px;
+  height: auto;
+}
+
+.pokemon-types {
+  display: flex;
+  justify-content: center;
+  gap: 10px;
+  margin-bottom: 25px;
+}
+
+.type-badge {
+  padding: 6px 15px;
+  border-radius: 20px;
+  font-size: 0.85rem;
+  color: white;
+  text-transform: capitalize;
+  font-weight: 500;
+}
+
+/* Type colors */
+.normal { background-color: #A8A77A; }
+.fire { background-color: #EE8130; }
+.water { background-color: #6390F0; }
+.electric { background-color: #F7D02C; }
+.grass { background-color: #7AC74C; }
+.ice { background-color: #96D9D6; }
+.fighting { background-color: #C22E28; }
+.poison { background-color: #A33EA1; }
+.ground { background-color: #E2BF65; }
+.flying { background-color: #A98FF3; }
+.psychic { background-color: #F95587; }
+.bug { background-color: #A6B91A; }
+.rock { background-color: #B6A136; }
+.ghost { background-color: #735797; }
+.dragon { background-color: #6F35FC; }
+.dark { background-color: #705746; }
+.steel { background-color: #B7B7CE; }
+.fairy { background-color: #D685AD; }
+
+.pokemon-info {
+  background-color: #f7f9fc;
+  border-radius: 12px;
+  padding: 15px;
+  margin-bottom: 25px;
+}
+
+.info-row {
+  display: flex;
+  justify-content: space-around;
+}
+
+.info-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.info-label {
+  font-size: 0.85rem;
+  color: #888;
+  margin-bottom: 5px;
+}
+
+.info-value {
+  font-weight: 500;
+  font-size: 1.1rem;
+}
+
+.pokemon-abilities {
+  margin-bottom: 25px;
+}
+
+.pokemon-abilities h3, .pokemon-stats h3 {
+  font-size: 1.2rem;
+  margin-bottom: 12px;
+  color: #3563ba;
+  font-weight: 500;
+}
+
+.abilities-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.ability-badge {
+  background-color: #f0f4ff;
+  padding: 5px 12px;
+  border-radius: 15px;
+  font-size: 0.9rem;
+  text-transform: capitalize;
+}
+
+.stat-bars {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.stat-item {
+  display: grid;
+  grid-template-columns: 80px 40px 1fr;
+  align-items: center;
+  gap: 15px;
+}
+
+.stat-label {
+  font-size: 0.9rem;
+  color: #555;
+}
+
+.stat-value {
+  font-weight: 600;
+  color: #333;
+  text-align: right;
+}
+
+.stat-bar-container {
+  height: 8px;
+  background-color: #eee;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.stat-bar {
+  height: 100%;
+  border-radius: 4px;
+}
+
+/* Loader */
+.loader-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 40px 0;
+}
+
+.loader {
+  width: 48px;
+  height: 48px;
+  border: 5px solid #f0f4ff;
+  border-radius: 50%;
+  border-top-color: #3563ba;
+  animation: spin 1s linear infinite;
+  margin-bottom: 15px;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+.loader-container p {
+  color: #777;
+}
+
+/* Error */
+.error-container {
+  background-color: #fff5f5;
+  border-radius: 8px;
+  padding: 20px;
+  text-align: center;
+  margin: 30px 0;
+}
+
+.error-message {
+  color: #e53e3e;
+  margin-bottom: 15px;
+}
+
+.retry-button {
+  padding: 8px 16px;
+  background-color: #3563ba;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  font-size: 0.9rem;
+  cursor: pointer;
+}
+
+.retry-button:hover {
+  background-color: #2d56a3;
+}
+
+/* Animations */
+@keyframes modalAppear {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
   }
-  
-  .container {
-    max-width: 800px;
-    width: 100%;
-    background-color: #fff0f5;
-    padding: 30px;
-    margin-top: 80px;
-    border-radius: 20px;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-    text-align: center;
-    overflow: hidden;
+  to {
+    opacity: 1;
+    transform: translateY(0);
   }
-  
+}
+
+@keyframes searchFocus {
+  0% { box-shadow: 0 4px 12px rgba(53, 99, 186, 0.15); }
+  100% { box-shadow: 0 6px 16px rgba(53, 99, 186, 0.25); }
+}
+
+.modal-fade-enter-active, .modal-fade-leave-active {
+  transition: opacity 0.3s;
+}
+
+.modal-fade-enter-from, .modal-fade-leave-to {
+  opacity: 0;
+}
+
+/* Media Queries */
+@media (max-width: 640px) {
   .title {
-    color: #ff6f91;
-    font-size: 3rem;
-    margin-bottom: 20px;
+    font-size: 2rem;
   }
   
-  .search-container {
-    display: flex;
-    gap: 12px;
-    margin-bottom: 20px;
+  .search-wrapper {
+    max-width: 100%;
   }
   
   .search-input {
-    flex: 1;
-    padding: 12px;
-    border: 2px solid #ffb3c1;
-    border-radius: 20px;
-    outline: none;
-    transition: border-color 0.3s ease;
-    height: 44px; 
-  }
-  
-  .search-input:focus {
-    border-color: #ff6f91;
-    box-shadow: 0 0 8px rgba(255, 111, 145, 0.5);
+    padding: 10 14px;
+    font-size: 1rem;
   }
   
   .search-button {
-    padding: 0 20px; 
-    height: 44px; 
-    background-color: #ff6f91;
-    color: white;
-    border: none;
-    border-radius: 20px;
-    cursor: pointer;
-    transition: background-color 0.3s ease, transform 0.2s ease;
-  }
-  
-  .search-button:hover {
-    background-color: #ff4f7a;
-    transform: scale(1.05);
-  }
-  
-  .history-container {
-    margin-bottom: 20px;
-  }
-  
-  .modal {
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    z-index: 1000;
-  }
-  
-  .modal-content {
-    background-color: #ffe4e9; 
-    padding: 20px;
-    border-radius: 15px;
-    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
-    text-align: center;
-    max-width: 400px;
-    width: 100%;
-  }
-  
-  .modal-content h2 {
-    color: #ff6f91; 
-    font-size: 2rem;
-    margin-bottom: 10px;
-  }
-  
-  .modal-content p {
-    color: #555;
-    margin: 10px 0;
-  }
-  
-  .modal-content ul {
-    color: #555; 
-    margin: 10px 0; 
-  }
-  
-  .modal-content img {
-    max-width: 100%;
-    margin-bottom: 20px;
-  }
-  
-  .modal-content button {
-    padding: 10px 20px;
-    background-color: #ff6f91; 
-    color: white;
-    border: none;
-    border-radius: 20px;
-    cursor: pointer;
-    font-size: 1rem;
-    transition: background-color 0.3s ease, transform 0.2s ease;
-  }
-  
-  .modal-content button:hover {
-    background-color: #ff4f7a; 
-    transform: scale(1.05);
-  }
-  
-  .history-dropdown {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-    border: 1px solid #ddd;
-    border-radius: 10px;
-    background-color: #ffe4e9; 
-  }
-  
-  .history-dropdown li {
-    padding: 10px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-  
-  .history-container {
-    margin-bottom: 20px;
-    max-height: 200px; 
-    overflow-y: auto; 
-    border-radius: 10px; 
-    padding-right: 10px; 
-  }
-  
-  .history-container::-webkit-scrollbar {
-    width: 8px; 
-  }
-  
-  .history-container::-webkit-scrollbar-thumb {
-    background-color: #ff6f91; 
-    border-radius: 10px;
-    transition: background-color 0.3s ease;
-  }
-  
-  
-  .history-container::-webkit-scrollbar-track {
-    background-color: #ffe4e9; 
-    border-radius: 10px; 
-  }
-  
-  .history-container::-webkit-scrollbar-thumb:hover {
-    background-color: #ff4f7a; 
-  }
-  
-  
-  
-  .remove-btn {
-    background: none;
-    border: none;
-    color: #ff7f7f;
-    font-size: 1rem;
-    cursor: pointer;
+    padding: 0 16px;
   }
   
   .pokemon-grid {
-    display: grid;
-    grid-template-columns: repeat(5, 1fr);
+    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+    gap: 15px;
+  }
+  
+  .card-image {
+    width: 80px;
+    height: 80px;
+  }
+  
+  .card-name {
+    font-size: 0.95rem;
+  }
+  
+  .modal-container {
+    max-width: 95%;
+  }
+  
+  .stat-item {
+    grid-template-columns: 70px 30px 1fr;
     gap: 10px;
-    width: 100%;
   }
-  
-  .pokemon-card {
-    background-color: #ffe4e9; 
-    border: 2px solid #ffb3c1;
-    border-radius: 15px;
-    text-align: center;
-    padding: 10px;
-    transition: transform 0.2s ease, box-shadow 0.2s ease;
-  }
-  
-  .pokemon-card:hover {
-    transform: scale(1.1);
-    box-shadow: 0 6px 12px rgba(255, 111, 145, 0.4);
-    background-color: #ff6f91;
-  }
-  
-  .loader {
-    font-size: 1.5rem;
-    color: #ff6f91;
-  }
-  
-  .error-message {
-    color: #ff4f7a;
-    font-size: 1.2rem;
-    margin-top: 20px;
-  }
-  </style>
-  
\ No newline at end of file
+}
+</style>
\ No newline at end of file