/* Card grid, Pokémon cards, skeleton loaders, empty and error states */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 16px;
}

/* ── Pokémon card ── */
.poke-card {
  background: var(--card);
  border: 2px solid var(--fg);
  border-radius: 0;
  overflow: visible;
  cursor: pointer;
  transition: transform .2s ease-out;
  animation: fadeUp .3s ease both;
  animation-delay: var(--card-delay, 0ms);
  position: relative;
}
.poke-card:hover {
  transform: translateY(-4px);
}
.poke-card:active {
  transform: translate(2px, 2px);
}

.evolution-badge {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border-left: 2px solid var(--fg);
  border-bottom: 2px solid var(--fg);
  color: var(--fg);
  font-size: .82rem;
  font-weight: 900;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  transition: opacity .15s ease-out;
}
.evolution-badge--visible { opacity: 1; }
.evolution-badge--stage-1 { background: #0ace82; }
.evolution-badge--stage-2 { background: #ffda2a; }
.evolution-badge--stage-3 { background: #a875f4; color: #000; }
.evolution-badge--stage-4 { background: #ff7261; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0);    }
}

.card-img-wrap {
  position: relative;
  padding: 18px 18px 4px;
  text-align: center;
  overflow: hidden;
  border-bottom: 2px solid var(--fg);
}
.card-img-bg {
  position: absolute;
  inset: 0;
  opacity: .14;
  background: var(--card-bg-color, #aaa);
}
.card-img-wrap img {
  width: 110px; height: 110px;
  object-fit: contain;
  position: relative;
  z-index: 1;
  transition: transform .2s ease-out;
  image-rendering: -webkit-optimize-contrast;
}
.poke-card:hover .card-img-wrap img { transform: scale(1.1) translateY(-3px); }

.card-body { padding: 10px 14px 14px; }
.card-num  {
  font-size: .7rem;
  font-weight: 700;
  color: var(--fg);
  opacity: .4;
  margin-bottom: 2px;
  font-family: 'Outfit', sans-serif;
  text-transform: uppercase;
  letter-spacing: .12em;
}
.card-name {
  font-size: .975rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .02em;
  margin-bottom: 7px;
  font-family: 'Outfit', sans-serif;
}

.type-pills { display: flex; flex-wrap: wrap; gap: 5px; }
.type-pill--loading {
  background: #ddd;
  color: #999;
}
.type-pill {
  padding: 3px 9px;
  border-radius: 0;
  border: 1px solid rgba(0,0,0,.3);
  font-size: .62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #fff;
}

/* ── Skeleton loading cards ── */
.skeleton-card {
  background: var(--card);
  border: 2px solid var(--fg);
  border-radius: 0;
  overflow: hidden;
}
.skel {
  background: linear-gradient(90deg, #e8e8e8 25%, #d4d4d4 50%, #e8e8e8 75%);
  background-size: 200% 100%;
  animation: shimmer 1.2s infinite;
  border-radius: 0;
}
@keyframes shimmer { to { background-position: -200% 0; } }
.skel-img  { width: 100px; height: 100px; border-radius: 0; margin: 20px auto 8px; }
.skel-body { padding: 10px 14px 16px; }
.skel-body--img { padding: 18px 14px 8px; }
.skel-line { height: 10px; margin-bottom: 8px; }
.skel-line--xs { width: 40%; }
.skel-line--sm { width: 50%; }
.skel-line--md { width: 80%; }

/* ── Empty / error states ── */
.empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 72px 20px;
  color: var(--fg);
  background: var(--card);
  border: 2px solid var(--fg);
}
.empty-state svg { opacity: .3; margin-bottom: 14px; }
.empty-state p   {
  font-size: 1.05rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.error-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 40px;
  border: 2px solid var(--fg);
}
.error-state p {
  color: var(--red);
  font-weight: 700;
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.error-state__btn {
  padding: 10px 24px;
  background: var(--red);
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font: 700 .9rem 'Outfit', sans-serif;
}