/* ── Custom scrollbar ────────────────────────────────────
   Webkit (Chrome/Edge/Safari): thin accent-tinted thumb.
   Firefox: scrollbar-width + scrollbar-color.
   ──────────────────────────────────────────────────────── */

::-webkit-scrollbar              { width: 6px; height: 6px; }
::-webkit-scrollbar-track        { background: #0f1117; }
::-webkit-scrollbar-thumb        { background: #2a2d3a; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover  { background: #a8d4e8; }

* { scrollbar-width: thin; scrollbar-color: #2a2d3a #0f1117; }

/* ── Favorite button heart pulse ─────────────────────────
   Plays on every click (both favorite and unfavorite).
   Applies to the desktop overlay button and mobile inline.
   ──────────────────────────────────────────────────────── */

@keyframes heart-pulse {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.4); }
  60%  { transform: scale(0.88); }
  100% { transform: scale(1); }
}

.modal-favorite:active,
.modal-fav-inline:active {
  animation: heart-pulse 0.32s ease;
}

/* ── PWA install banner ──────────────────────────────────
   Slides up from the bottom on eligible browsers.
   ──────────────────────────────────────────────────────── */

@keyframes pwa-up {
  from { opacity: 0; transform: translateX(-50%) translateY(16px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

#pwa-banner {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: rgba(26, 29, 39, 0.96);
  border: 1px solid rgba(168, 212, 232, 0.2);
  border-radius: 14px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
  font-family: var(--font-body, "DM Sans", sans-serif);
  font-size: 0.86rem;
  color: #f0f0f5;
  white-space: nowrap;
  z-index: 9999;
  animation: pwa-up 0.3s ease;
}

.pwa-text strong { color: #a8d4e8; font-weight: 600; }

.pwa-install {
  background: #a8d4e8;
  color: #0f1117;
  border: none;
  border-radius: 7px;
  padding: 6px 14px;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s;
}

.pwa-install:hover { opacity: 0.85; }

.pwa-dismiss {
  background: none;
  border: none;
  color: #8b8fa8;
  cursor: pointer;
  font-size: 0.9rem;
  padding: 4px 6px;
  line-height: 1;
  transition: color 0.15s;
}

.pwa-dismiss:hover { color: #f0f0f5; }

/* ── Hide "Evolves from" in card modal ───────────────── */
.evolves-from { display: none; }

/* ── Energy type pill glow ───────────────────────────────
   Each pill gets a --tg (type glow) RGB triplet so the
   hover/active glow rules only need to be written once.
   ──────────────────────────────────────────────────────── */

.energy-type-pill[title="Fire"]      { --tg: 232, 82,  74;  }
.energy-type-pill[title="Water"]     { --tg: 90,  176, 232; }
.energy-type-pill[title="Grass"]     { --tg: 92,  184, 112; }
.energy-type-pill[title="Lightning"] { --tg: 240, 196, 48;  }
.energy-type-pill[title="Psychic"]   { --tg: 192, 96,  208; }
.energy-type-pill[title="Fighting"]  { --tg: 192, 120, 64;  }
.energy-type-pill[title="Darkness"]  { --tg: 112, 96,  184; }
.energy-type-pill[title="Metal"]     { --tg: 152, 152, 176; }
.energy-type-pill[title="Dragon"]    { --tg: 200, 160, 40;  }
.energy-type-pill[title="Colorless"] { --tg: 160, 160, 184; }

.energy-type-pill:hover {
  border-color: rgb(var(--tg, 139, 143, 168));
  box-shadow: 0 0 8px rgba(var(--tg, 139, 143, 168), 0.4);
  background: rgba(var(--tg, 139, 143, 168), 0.1);
}

.energy-type-pill.active {
  border-color: rgb(var(--tg, 168, 212, 232));
  border-width: 2px;
  background: rgba(var(--tg, 168, 212, 232), 0.18);
  box-shadow: 0 0 14px rgba(var(--tg, 168, 212, 232), 0.55);
}

/* ── Staggered card fade-in ──────────────────────────────
   Cards fade up into place when inserted into the DOM.
   nth-child delays stagger the first 20 visible cards;
   anything beyond that fades in immediately.
   ──────────────────────────────────────────────────────── */

@keyframes card-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.card-thumb {
  animation: card-in 0.28s ease both;
}

.card-grid .card-thumb:nth-child(1)  { animation-delay:   0ms; }
.card-grid .card-thumb:nth-child(2)  { animation-delay:  20ms; }
.card-grid .card-thumb:nth-child(3)  { animation-delay:  40ms; }
.card-grid .card-thumb:nth-child(4)  { animation-delay:  60ms; }
.card-grid .card-thumb:nth-child(5)  { animation-delay:  80ms; }
.card-grid .card-thumb:nth-child(6)  { animation-delay: 100ms; }
.card-grid .card-thumb:nth-child(7)  { animation-delay: 120ms; }
.card-grid .card-thumb:nth-child(8)  { animation-delay: 140ms; }
.card-grid .card-thumb:nth-child(9)  { animation-delay: 160ms; }
.card-grid .card-thumb:nth-child(10) { animation-delay: 180ms; }
.card-grid .card-thumb:nth-child(11) { animation-delay: 200ms; }
.card-grid .card-thumb:nth-child(12) { animation-delay: 220ms; }
.card-grid .card-thumb:nth-child(13) { animation-delay: 240ms; }
.card-grid .card-thumb:nth-child(14) { animation-delay: 260ms; }
.card-grid .card-thumb:nth-child(15) { animation-delay: 280ms; }
.card-grid .card-thumb:nth-child(16) { animation-delay: 300ms; }
.card-grid .card-thumb:nth-child(17) { animation-delay: 320ms; }
.card-grid .card-thumb:nth-child(18) { animation-delay: 340ms; }
.card-grid .card-thumb:nth-child(19) { animation-delay: 360ms; }
.card-grid .card-thumb:nth-child(20) { animation-delay: 380ms; }

/* ── Glassmorphism modal ─────────────────────────────────
   Frosted glass look for the card detail modal.
   The backdrop already has blur(4px); the panel gets its
   own deeper blur so it feels like layered glass.
   ──────────────────────────────────────────────────────── */

.modal-panel {
  background: rgba(15, 17, 23, 0.72);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 1px solid rgba(168, 212, 232, 0.12);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
}

.modal-image-wrap {
  background: rgba(15, 17, 23, 0.45);
  border-right-color: rgba(168, 212, 232, 0.1);
}