:root {
  /* Pokémon type colors (API names) */
  --type-normal: #A8A77A;
  --type-fire: #EE8130;
  --type-water: #6390F0;
  --type-electric: #F7D02C;
  --type-grass: #7AC74C;
  --type-ice: #96D9D6;
  --type-fighting: #C22E28;
  --type-poison: #A33EA1;
  --type-ground: #E2BF65;
  --type-flying: #A98FF3;
  --type-psychic: #F95587;
  --type-bug: #A6B91A;
  --type-rock: #B6A136;
  --type-ghost: #735797;
  --type-dragon: #6F35FC;
  --type-dark: #705746;
  --type-steel: #B7B7CE;
  --type-fairy: #D685AD;

  --background: #101318;
  --background-card: #171A21;
  --background-button: #d3c43f;

  --text: #e8ecf1;
  --muted: #aeb6c2;
  --border: rgba(255, 255, 255, .12);
}

/* ====== Base ====== */

.d_none {
  display: none !important;
}


* {
  box-sizing: border-box;
}



body {
  margin: 0;
  color: var(--text);
  background: var(--background);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* ====== Header ====== */
header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--background);
  border-bottom: 1px solid var(--border);
}

.main_header {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 14px;
  padding: 14px;
}

/* Zähler-Badge */
header span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 6px 10px;
  background: var(--background-button);
  color: #000;
  border: 1px solid var(--border);
  border-radius: 10px;
}

.button {
  border: 1px solid var(--border);
  background: var(--background-button);
  color: #000;
  border-radius: 10px;
  font-size: 16px;
  padding: 8px 12px;
  cursor: pointer;
}

/* Search-Field */
.main_header input[type="text"] {
  width: clamp(200px, 28vw, 360px);
  border: 1px solid var(--border);
  background: var(--background-card);
  color: var(--text);
  padding: 8px 12px;
  border-radius: 10px;
  outline: none;
}

/* ====== Listen-Container ====== */
.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  padding: 16px;
  background: var(--background);
  overflow: hidden;
}

/* ====== Card ====== */
.card {
  width: clamp(220px, 30vw, 260px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--background-card);
  padding: 14px;
}

/* Card-Titel */
.card>h3 {
  margin: 0;
  font-size: 1rem;
  color: var(--text);
}

/* Info-Button in der Card */
.open_overlay {
  display: inline-block;
  border: 1px solid var(--border);
  color: #000;
  background: var(--background-button);
  border-radius: 10px;
  font-size: 14px;
  padding: 6px 10px;
  cursor: pointer;
}

.portrait {
  width: 100%;
  height: 200px;
  border: 1px solid var(--border);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
}

.portrait img {
  max-width: 100%;
  max-height: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 16px;
}

.types {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.badge {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  padding: 6px 10px;
  border-radius: 10px;
  color: #000;
}

.generation {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  padding: 6px 10px;
  border-radius: 10px;
  width: fit-content;
  color: var(--muted);
  background: var(--background-card);
}


.type_normal {
  background: var(--type-normal);
}

.type_fire {
  background: var(--type-fire);
}

.type_water {
  background: var(--type-water);
}

.type_electric {
  background: var(--type-electric);
}

.type_grass {
  background: var(--type-grass);
}

.type_ice {
  background: var(--type-ice);
}

.type_fighting {
  background: var(--type-fighting);
  color: #fff;
}

.type_poison {
  background: var(--type-poison);
  color: #fff;
}

.type_ground {
  background: var(--type-ground);
}

.type_flying {
  background: var(--type-flying);
}

.type_psychic {
  background: var(--type-psychic);
}

.type_bug {
  background: var(--type-bug);
  color: #000;
}

.type_rock {
  background: var(--type-rock);
  color: #fff;
}

.type_ghost {
  background: var(--type-ghost);
  color: #fff;
}

.type_dragon {
  background: var(--type-dragon);
  color: #fff;
}

.type_dark {
  background: var(--type-dark);
  color: #fff;
}

.type_steel {
  background: var(--type-steel);
  color: #000;
}

.type_fairy {
  background: var(--type-fairy);
}


.loading_spinner {
  background-image: url(../images/pokeball.png);
  background-size: contain;
  border-radius: 50%;
  width: 300px;
  height: 300px;
  animation: spin 2s linear infinite;
  margin: auto;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

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


/* =========================================
   Responsive: bis 500px
   ========================================= */
@media (max-width: 500px) {

  .main_header {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 12px;
  }

  .main_header span {
    width: 100%;
    justify-content: center;
    margin: 0;
  }

  #searchInput {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .button {
    width: 100%;
    box-sizing: border-box;
  }

  .pokedex_header {
    flex-wrap: wrap;
    gap: 8px;
    padding-bottom: 8px;
  }

  .pokedex_name {
    flex-basis: 100%;
    text-align: center;
  }

  .pokedex_id,
  .pokedex_generation {
    padding: 4px 8px;
  }

  .pokedex_nav_btn,
  .pokedex_close {
    padding: 6px 10px;
  }

  .pokedex_nav_btn {
    flex: 1 1 45%;
  }

  .pokedex_close {
    margin-left: auto;
  }

  .pokedex_image {
    min-height: 180px;
    padding: 8px;
  }
}


.no_matches {
  display: flex;
  align-items: center;
  justify-content: center;
  height: auto;
  width: auto;
  margin: auto;
  flex-direction: column;
  gap: 12px;
}