/* ============================================================
   Lookup pages: search, sets, set, card
   ============================================================ */

.lookup {
  max-width: 1120px;
  margin: 0 auto;
  padding: 40px 24px 80px;
}

.lookup-header {
  text-align: center;
  margin-bottom: 32px;
}

.lookup-header h1 {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #1a1a2e;
  margin-bottom: 8px;
}

.lookup-header p {
  color: #4a4a5e;
  font-size: 16px;
  margin-bottom: 20px;
}

.search-meta {
  font-size: 13px;
  color: #888;
  margin-top: 12px;
}

.set-meta {
  font-size: 14px;
  color: #888;
  margin-top: 4px;
}

.breadcrumb {
  font-size: 14px;
  color: #888;
  margin-bottom: 8px;
}

.breadcrumb a {
  color: #5a5a6e;
}

@media (max-width: 600px) {
  .lookup-header h1 {
    font-size: 28px;
  }
}

/* ------------ Search bar ------------ */

.searchbar {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 560px;
  margin: 0 auto;
  padding: 12px 16px;
  background: #fff;
  border: 1px solid #e0e0ea;
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.searchbar:focus-within {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

.searchbar svg {
  color: #888;
  flex-shrink: 0;
}

.searchbar input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 16px;
  background: transparent;
  color: #1a1a2e;
  font-family: inherit;
}

.searchbar input::placeholder {
  color: #aaa;
}

/* ------------ Search results ------------ */

.results {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

.result-card {
  display: flex;
  gap: 14px;
  padding: 14px;
  background: #fff;
  border: 1px solid #f0f0f3;
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.12s, border-color 0.12s, box-shadow 0.12s;
}

.result-card:hover {
  border-color: #3b82f6;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.08);
  text-decoration: none;
}

.result-img {
  width: 70px;
  height: 98px;
  flex-shrink: 0;
  background: #f0f0f3;
  border-radius: 6px;
  overflow: hidden;
}

.result-img img,
.result-img-placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.result-img-placeholder {
  background: #e8e8ee;
}

.result-info {
  flex: 1;
  min-width: 0;
}

.result-info h3 {
  font-size: 15px;
  font-weight: 600;
  color: #1a1a2e;
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.result-set,
.result-rarity {
  font-size: 13px;
  color: #888;
  margin: 0;
}

.result-rarity {
  color: #6d28d9;
  font-weight: 500;
}

.result-price {
  font-size: 15px;
  font-weight: 700;
  color: #15803d;
  margin-top: 4px;
}

.empty {
  text-align: center;
  padding: 60px 24px;
  color: #888;
}

.empty p {
  margin-bottom: 6px;
}

.empty-hint {
  font-size: 14px;
  color: #aaa;
}

/* ------------ Sets grid ------------ */

.sets-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
}

.set-card {
  display: block;
  padding: 18px;
  background: #fff;
  border: 1px solid #f0f0f3;
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.12s, border-color 0.12s, box-shadow 0.12s;
}

.set-card:hover {
  transform: translateY(-2px);
  border-color: #3b82f6;
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.08);
  text-decoration: none;
}

.set-card-img {
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  background: #fafafa;
  border-radius: 8px;
  overflow: hidden;
}

.set-card-img img {
  max-height: 80px;
  max-width: 100%;
  object-fit: contain;
}

.set-card-placeholder {
  width: 100%;
  height: 100%;
  background: #e8e8ee;
}

.set-card h3 {
  font-size: 15px;
  font-weight: 600;
  color: #1a1a2e;
  margin-bottom: 4px;
  line-height: 1.3;
}

.set-card p {
  font-size: 13px;
  color: #666;
  margin: 0;
}

.set-card-meta {
  font-size: 12px !important;
  color: #999 !important;
  margin-top: 6px !important;
}

/* ------------ Set detail (cards in a set) ------------ */

.set-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 16px;
}

.set-card-thumb {
  display: block;
  padding: 12px;
  background: #fff;
  border: 1px solid #f0f0f3;
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.12s, border-color 0.12s, box-shadow 0.12s;
}

.set-card-thumb:hover {
  transform: translateY(-2px);
  border-color: #3b82f6;
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.08);
  text-decoration: none;
}

.set-card-thumb-img {
  aspect-ratio: 0.716;
  background: #fafafa;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 10px;
}

.set-card-thumb-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.set-card-thumb h4 {
  font-size: 14px;
  font-weight: 600;
  color: #1a1a2e;
  margin: 0 0 4px;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.set-card-thumb-meta {
  font-size: 12px;
  color: #888;
  margin: 0;
}

.set-card-thumb-price {
  font-size: 14px;
  font-weight: 700;
  color: #15803d;
  margin: 4px 0 0;
}

/* ============================================================
   Card detail page
   ============================================================ */

.card-detail {
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 24px 80px;
}

.loading-msg {
  text-align: center;
  padding: 80px 24px;
  color: #888;
  font-size: 16px;
}

.card-layout {
  display: grid;
  grid-template-columns: minmax(280px, 380px) 1fr;
  gap: 48px;
  margin: 24px 0 56px;
}

@media (max-width: 760px) {
  .card-layout {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

.card-image-col {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.card-image {
  width: 100%;
  max-width: 380px;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(31, 34, 88, 0.18);
}

.card-image-placeholder {
  width: 100%;
  aspect-ratio: 0.716;
  background: #e8e8ee;
  border-radius: 14px;
}

.card-info-col h1 {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: #1a1a2e;
  margin-bottom: 6px;
}

.card-subtitle {
  font-size: 16px;
  color: #888;
  margin-bottom: 20px;
}

.card-attrs {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
}

.card-attrs li {
  font-size: 14.5px;
  color: #4a4a5e;
  padding: 6px 0;
  border-bottom: 1px solid #f0f0f3;
}

.card-attrs li:last-child {
  border-bottom: none;
}

.card-attrs strong {
  color: #1a1a2e;
  font-weight: 600;
  min-width: 130px;
  display: inline-block;
}

.market-price-card {
  background: linear-gradient(135deg, #1F2258, #2c3070);
  color: #fff;
  padding: 22px;
  border-radius: 14px;
  margin-bottom: 24px;
}

.market-price-label {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #c8c8ee;
  margin-bottom: 4px;
}

.market-price-value {
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}

.market-price-low {
  font-size: 13px;
  color: #c8c8ee;
}

.cta-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cta-primary,
.cta-secondary {
  display: block;
  text-align: center;
  padding: 13px 18px;
  border-radius: 11px;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  transition: transform 0.12s, opacity 0.12s;
}

.cta-primary {
  background: #1F2258;
  color: #fff;
}

.cta-primary:hover {
  background: #2c3070;
  text-decoration: none;
  transform: translateY(-1px);
}

.cta-secondary {
  background: #f3f4f6;
  color: #1a1a2e;
  border: 1px solid #e5e5ea;
}

.cta-secondary:hover {
  background: #e8e8f0;
  text-decoration: none;
}

/* ------------ Prices section ------------ */

.prices-section {
  margin: 56px 0;
}

.prices-section h2 {
  font-size: 24px;
  font-weight: 700;
  color: #1a1a2e;
  margin-bottom: 20px;
}

.prices-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}

.price-block {
  background: #fafafa;
  border: 1px solid #f0f0f3;
  border-radius: 14px;
  padding: 22px;
}

.price-block h3 {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #888;
  margin-bottom: 14px;
  font-weight: 600;
}

.price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 0;
  border-bottom: 1px solid #ececf2;
}

.price-row:last-child {
  border-bottom: none;
}

.price-label {
  font-size: 14px;
  color: #4a4a5e;
}

.price-value {
  font-size: 16px;
  font-weight: 700;
  color: #1a1a2e;
}

.price-sales {
  flex-basis: 100%;
  font-size: 12px;
  color: #aaa;
  text-align: right;
  margin-top: -4px;
}

.prices-disclaimer {
  font-size: 12px;
  color: #aaa;
  margin-top: 16px;
  line-height: 1.5;
}

.no-prices {
  text-align: center;
  padding: 40px;
  color: #888;
  background: #fafafa;
  border-radius: 14px;
}

/* ------------ Track CTA section at bottom of card page ------------ */

.track-cta-section {
  margin: 56px 0 0;
  padding: 48px 32px;
  background: linear-gradient(135deg, #fafbff 0%, #ffffff 100%);
  border: 1px solid #e8e8f0;
  border-radius: 18px;
  text-align: center;
}

.track-cta-inner h2 {
  font-size: 28px;
  font-weight: 700;
  color: #1a1a2e;
  margin-bottom: 8px;
}

.track-cta-inner p {
  font-size: 16px;
  color: #4a4a5e;
  max-width: 540px;
  margin: 0 auto 24px;
  line-height: 1.55;
}

.track-cta-section .appstore-button {
  display: inline-flex;
}

/* ============================================================
   Pokémon aggregation pages (/pokemon/[slug]/)
   ============================================================ */

.pokemon-header {
  text-align: left;
  max-width: 880px;
  margin: 0 auto 32px;
}

.pokemon-summary {
  font-size: 18px;
  color: #4a4a5e;
  line-height: 1.55;
  margin: 12px 0;
}

.pokemon-summary strong {
  color: #1a1a2e;
}

.pokemon-feature {
  font-size: 16px;
  color: #4a4a5e;
  line-height: 1.55;
  padding: 16px 18px;
  background: linear-gradient(135deg, #fafbff 0%, #ffffff 100%);
  border: 1px solid #e8e8f0;
  border-radius: 12px;
  margin: 16px 0 24px;
}

.pokemon-feature a {
  color: #1F2258;
  font-weight: 600;
}

.pokemon-controls {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 20px;
  padding: 14px 16px;
  background: #fafafa;
  border: 1px solid #f0f0f3;
  border-radius: 12px;
}

.pokemon-controls label {
  font-size: 14px;
  color: #4a4a5e;
  display: flex;
  align-items: center;
  gap: 8px;
}

.pokemon-controls select {
  border: 1px solid #e0e0ea;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 14px;
  background: #fff;
  font-family: inherit;
  color: #1a1a2e;
}

.pokemon-controls input[type="search"] {
  flex: 1;
  min-width: 200px;
  border: 1px solid #e0e0ea;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 14px;
  background: #fff;
  font-family: inherit;
  color: #1a1a2e;
}

.pokemon-controls input[type="search"]:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

.pokemon-faq {
  max-width: 760px;
  margin: 56px auto 0;
}

.pokemon-faq h2 {
  font-size: 24px;
  font-weight: 700;
  color: #1a1a2e;
  margin-bottom: 20px;
}

.faq-item {
  padding: 18px 20px;
  background: #fafafa;
  border: 1px solid #f0f0f3;
  border-radius: 12px;
  margin-bottom: 12px;
}

.faq-item h3 {
  font-size: 16px;
  font-weight: 600;
  color: #1a1a2e;
  margin: 0 0 8px;
}

.faq-item p {
  font-size: 14.5px;
  color: #4a4a5e;
  line-height: 1.55;
  margin: 0;
}

/* /pokemon/ index page */

.pokemon-index-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
  max-width: 1120px;
  margin: 0 auto;
}

.pokemon-index-card {
  display: block;
  padding: 20px 18px;
  background: #fff;
  border: 1px solid #f0f0f3;
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.12s, border-color 0.12s, box-shadow 0.12s;
}

.pokemon-index-card:hover {
  transform: translateY(-2px);
  border-color: #3b82f6;
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.08);
  text-decoration: none;
}

.pokemon-index-card h3 {
  font-size: 16px;
  font-weight: 600;
  color: #1a1a2e;
  margin: 0 0 4px;
}

.pokemon-index-card p {
  font-size: 13px;
  color: #888;
  margin: 0;
}

/* =========================================================
   P0.5 prototype: card / set / Pokédex pre-rendered pages
   ========================================================= */

.breadcrumb {
  font-size: 13px;
  color: #6b7280;
  margin: 0 0 16px;
}
.breadcrumb a { color: #4b5563; text-decoration: none; }
.breadcrumb a:hover { color: #1F2258; text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: #1a1a2e; font-weight: 600; }

.direct-answer {
  font-size: 16px;
  line-height: 1.55;
  color: #1a1a2e;
  margin: 12px 0 16px;
  padding: 12px 16px;
  background: #f0f7ff;
  border-left: 3px solid #3b82f6;
  border-radius: 4px;
}

/* ---- Card detail page ---- */
.card-page { max-width: 1080px; margin: 0 auto; padding: 24px 16px 64px; }
.card-hero {
  display: grid;
  grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
  gap: 32px;
  margin-bottom: 32px;
}
.card-hero-image img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
}
.card-hero-info h1 {
  font-size: 32px;
  line-height: 1.15;
  margin: 0 0 4px;
  color: #1a1a2e;
}
.card-hero-info h1 .card-num { color: #6b7280; font-weight: 500; margin-left: 8px; font-size: 22px; }
.card-hero-set { font-size: 14px; color: #6b7280; margin: 0 0 4px; }
.card-hero-set a { color: #1F2258; text-decoration: none; }
.card-hero-set a:hover { text-decoration: underline; }
.card-attrs {
  list-style: none;
  margin: 16px 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
}
.card-attrs li {
  background: #f9fafb;
  border: 1px solid #f0f0f3;
  border-radius: 8px;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.attr-label { font-size: 11px; color: #6b7280; text-transform: uppercase; letter-spacing: 0.04em; }
.attr-value { font-size: 14px; font-weight: 600; color: #1a1a2e; }
.card-hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.btn-primary, .btn-secondary {
  display: inline-flex; align-items: center; padding: 10px 16px; border-radius: 10px;
  font-size: 14px; font-weight: 600; text-decoration: none; transition: opacity .12s;
}
.btn-primary { background: #1F2258; color: #fff; }
.btn-primary:hover { opacity: 0.88; text-decoration: none; }
.btn-secondary { background: #fff; color: #1F2258; border: 1px solid #1F2258; }
.btn-secondary:hover { background: #f0f4ff; text-decoration: none; }

.prices-section, .price-history-section, .setmates-section, .faq-section, .set-top, .set-all, .evo-chain {
  margin: 32px 0;
}
.prices-section h2, .price-history-section h2, .setmates-section h2, .faq-section h2,
.set-top h2, .set-all h2, .evo-chain h2 {
  font-size: 22px; color: #1a1a2e; margin: 0 0 14px;
}
.price-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid #f0f0f3;
  border-radius: 12px;
  overflow: hidden;
}
.price-table th, .price-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid #f5f5f8;
  font-size: 14px;
}
.price-table thead th {
  background: #f9fafb;
  color: #6b7280;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.price-table tbody tr:last-child th, .price-table tbody tr:last-child td { border-bottom: 0; }
.price-table .price-cell { font-weight: 600; color: #16a34a; text-align: right; }
.price-meta { font-size: 12px; color: #9ca3af; margin: 10px 0 0; }
.muted { color: #6b7280; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* FAQ */
.faq-item {
  background: #fff;
  border: 1px solid #f0f0f3;
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 8px;
}
.faq-item summary { font-weight: 600; cursor: pointer; color: #1a1a2e; }
.faq-item p { margin: 8px 0 0; color: #4b5563; line-height: 1.55; }

/* Set-mates + thumb grids */
.setmates-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}
.setmate {
  display: flex; flex-direction: column; padding: 8px;
  border: 1px solid #f0f0f3; border-radius: 10px;
  text-decoration: none; color: inherit; transition: transform .12s, border-color .12s;
  background: #fff;
}
.setmate:hover { transform: translateY(-2px); border-color: #3b82f6; text-decoration: none; }
.setmate img { width: 100%; height: auto; border-radius: 6px; aspect-ratio: 245/342; object-fit: cover; }
.setmate-name { font-size: 14px; font-weight: 600; margin-top: 8px; color: #1a1a2e; }
.setmate-meta { font-size: 12px; color: #6b7280; }

/* Prev / next */
.prevnext {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 32px 0 0;
}
.prevnext-link {
  display: flex; flex-direction: column; padding: 12px 16px;
  border: 1px solid #f0f0f3; border-radius: 10px;
  text-decoration: none; color: inherit; background: #fff;
}
.prevnext-link.next { text-align: right; align-items: flex-end; }
.prevnext-link:hover { border-color: #3b82f6; text-decoration: none; }
.prevnext-direction { font-size: 12px; color: #6b7280; text-transform: uppercase; letter-spacing: 0.04em; }
.prevnext-name { font-size: 14px; font-weight: 600; color: #1a1a2e; }

/* ---- Set detail page ---- */
.set-page { max-width: 1080px; margin: 0 auto; padding: 24px 16px 64px; }
.set-hero {
  display: flex; gap: 24px; align-items: flex-start;
  background: linear-gradient(180deg, #f9fafb 0%, #fff 100%);
  border-radius: 16px; padding: 24px; margin-bottom: 24px;
  border: 1px solid #f0f0f3;
}
.set-hero-image { width: 96px; height: 96px; object-fit: contain; flex-shrink: 0; }
.set-hero-info h1 { font-size: 32px; margin: 0 0 6px; color: #1a1a2e; }
.set-hero-meta {
  display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; color: #6b7280;
  margin: 0 0 12px;
}
.set-hero-meta span:not(:last-child)::after { content: ' ·'; margin-left: 4px; color: #d1d5db; }
.set-count { font-size: 15px; color: #6b7280; font-weight: 500; }

/* All cards list (used by both set + pokedex pages) */
.set-cards-list {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}
.set-cards-list li { margin: 0; }
.set-cards-list a {
  display: flex; flex-direction: column; padding: 8px;
  background: #fff; border: 1px solid #f0f0f3; border-radius: 10px;
  text-decoration: none; color: inherit; transition: transform .12s, border-color .12s;
}
.set-cards-list a:hover { transform: translateY(-2px); border-color: #3b82f6; text-decoration: none; }
.set-cards-list img { width: 100%; height: auto; border-radius: 6px; aspect-ratio: 245/342; object-fit: cover; }
.set-cards-list .thumb-placeholder { width: 100%; aspect-ratio: 245/342; background: #f0f0f5; border-radius: 6px; }
/* Clamp the name + meta to a fixed line count so every tile in the
   grid ends up the same height regardless of how long the card's
   full name or set name is. Without this, "Bulbasaur - 1/108 (Build-
   A-Bear Workshop Exclusive)" would stretch its tile far taller than
   plain "Bulbasaur" and the whole row would inherit that height. */
.set-cards-name {
  font-size: 14px;
  font-weight: 600;
  margin-top: 8px;
  color: #1a1a2e;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  overflow: hidden;
  min-height: calc(1.4em * 2);
  line-height: 1.35;
}
.set-cards-meta {
  font-size: 12px;
  color: #6b7280;
  margin-top: 2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  overflow: hidden;
  min-height: calc(1.4em * 2);
  line-height: 1.4;
}
/* Push name + meta to the bottom of the tile so the image edge stays
   aligned across cards even when the text varies in real length. */
.set-cards-list a {
  justify-content: flex-start;
}

/* ---- Pokédex entity page ---- */
/* `--type-tint` is set on .pokedex-page from the primary type so every
   themed surface below (stat bars, hero glow, panel borders on hover)
   stays in sync without duplicating per-type CSS. */
.pokedex-page {
  max-width: 1080px;
  margin: 0 auto;
  padding: 24px 20px 80px;
}

.pokedex-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  gap: 40px;
  margin-bottom: 32px;
  align-items: center;
  padding: 32px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid #f0f0f3;
  overflow: hidden;
}
.pokedex-hero-glow {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 20% 20%, var(--type-tint, #999) 0%, transparent 55%),
    radial-gradient(ellipse at 90% 90%, var(--type-tint, #999) 0%, transparent 65%);
  opacity: 0.16;
  pointer-events: none;
  z-index: 0;
}
.pokedex-hero > .pokedex-hero-image,
.pokedex-hero > .pokedex-hero-info {
  position: relative;
  z-index: 1;
}
.pokedex-hero-image {
  display: flex; align-items: center; justify-content: center;
}
.pokedex-hero-image img {
  width: 100%; height: auto; max-width: 360px;
  filter: drop-shadow(0 16px 32px rgba(0,0,0,0.18));
}

.pokedex-num {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 13px; font-weight: 700;
  color: #6b7280;
  letter-spacing: 0.12em;
  margin: 0 0 4px;
}
.pokedex-hero-info h1 {
  font-size: 48px; line-height: 1.05; margin: 0 0 6px;
  color: #1a1a2e; text-transform: capitalize;
  letter-spacing: -0.02em;
}
.pokedex-genus {
  font-size: 14px; font-weight: 600;
  color: #6b7280; text-transform: uppercase; letter-spacing: 0.08em;
  margin: 0 0 14px;
}
.pokedex-types {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 0 0 18px;
}
.type-badge {
  display: inline-flex; align-items: center;
  padding: 5px 14px;
  border-radius: 999px;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.status-badge {
  padding: 5px 14px; border-radius: 999px;
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.status-legendary { background: #fef3c7; color: #92400e; }
.status-mythical  { background: #ede9fe; color: #5b21b6; }

.pokedex-flavor {
  font-size: 15px; line-height: 1.6; color: #4b5563;
  margin: 18px 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-left: 3px solid var(--type-tint, #c4b5fd);
  padding-left: 14px;
  font-style: italic;
}

/* Inline metadata row — no boxes, just typography with type-tinted
   dot separators. Sits in the hero as an editorial sub-line rather
   than another card-in-a-card. */
.pokedex-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 18px;
  margin: 18px 0 0;
  padding: 0;
}
.pokedex-meta-row > div {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  position: relative;
}
/* Type-tinted bullet between items, suppressed on the first. */
.pokedex-meta-row > div + div::before {
  content: '';
  position: absolute;
  left: -12px; top: 50%;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--type-tint, #9ca3af);
  opacity: 0.6;
  transform: translateY(-50%);
}
.pokedex-meta-row dt {
  font-size: 11px;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}
.pokedex-meta-row dd {
  font-size: 14px;
  font-weight: 700;
  color: #1a1a2e;
  margin: 0;
}

/* Shared panel surface used by every section on this page */
.panel {
  position: relative;
  background: #fff;
  border: 1px solid #f0f0f3;
  border-radius: 16px;
  padding: 24px;
  margin: 24px 0;
}
.panel > h2 {
  font-size: 22px; color: #1a1a2e;
  margin: 0 0 16px;
  display: flex; align-items: center; gap: 10px;
}
.panel > h2::before {
  content: '';
  display: inline-block;
  width: 6px; height: 22px;
  background: var(--type-tint, #1F2258);
  border-radius: 3px;
}

/* Evolution chain — each step is a dex-card-style mini tile */
.evo-list {
  display: flex; align-items: center; justify-content: center;
  gap: 16px; flex-wrap: wrap;
  list-style: none; padding: 0; margin: 0;
}
.evo-list .evo-step { margin: 0; min-width: 160px; }
.evo-list .evo-step .dex-card-link {
  background: #fff;
  border: 1px solid #f0f0f3;
  padding: 14px 12px 12px;
}
.evo-list .evo-step.is-current .dex-card-link {
  border-color: var(--type-tint, #1F2258);
  box-shadow: 0 0 0 3px rgba(31, 34, 88, 0.08);
}
.evo-list .evo-step.is-current .dex-card-link::before { opacity: 0.22; }
.evo-arrow {
  font-size: 24px; color: #d1d5db; font-weight: 700;
  list-style: none; padding: 0 4px; line-height: 1;
}

/* Slight refinement for the abilities cards */
.abilities-list .ability-card {
  position: relative;
  overflow: hidden;
}
.abilities-list .ability-card::before {
  content: '';
  position: absolute; inset: 0 0 auto 0;
  height: 4px;
  background: var(--type-tint, #1F2258);
  opacity: 0.6;
}

/* Sprite-shiny figure gets a soft glow */
.sprite-row .sprite-shiny {
  background: radial-gradient(circle at center, rgba(252, 211, 77, 0.25) 0%, #f9fafb 70%);
}

/* --- Profile panel: stats + abilities + sprites side-by-side --- */
.profile-panel { padding: 24px 28px; }
.profile-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}
.profile-col { display: flex; flex-direction: column; gap: 24px; }
.profile-side { gap: 28px; }
.profile-heading {
  font-size: 13px; font-weight: 700; color: #6b7280;
  text-transform: uppercase; letter-spacing: 0.08em;
  margin: 0 0 10px;
  display: flex; align-items: center; gap: 8px;
}
.profile-heading::before {
  content: '';
  display: inline-block;
  width: 18px; height: 2px;
  background: var(--type-tint, #6b7280);
  border-radius: 1px;
}
.profile-stats .basestats-table { max-width: none; }
@media (max-width: 720px) {
  .profile-grid { grid-template-columns: 1fr; gap: 24px; }
}

/* --- Lore strip: evolution chain, no panel chrome --- */
.lore-strip { margin: 32px 0; padding: 0 4px; }
.lore-heading {
  font-size: 13px; font-weight: 700; color: #6b7280;
  text-transform: uppercase; letter-spacing: 0.1em;
  margin: 0 0 14px;
  display: flex; align-items: center; gap: 10px;
}
.lore-heading::before {
  content: '';
  display: inline-block;
  width: 24px; height: 2px;
  background: var(--type-tint, #6b7280);
  border-radius: 1px;
}
.lore-evo .evo-list {
  flex-wrap: nowrap;
  overflow-x: auto;
  justify-content: center;
  padding: 4px 0 8px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.lore-evo .evo-step { scroll-snap-align: start; }
@media (max-width: 720px) {
  .lore-evo .evo-list { justify-content: flex-start; }
}

/* --- Compact FAQ at the bottom, no panel surface --- */
.faq-section-compact { margin: 40px 0 0; padding: 0 4px; }
.faq-section-compact h2 {
  font-size: 18px; color: #374151;
  margin: 0 0 12px; font-weight: 600;
}
.faq-section-compact .faq-item {
  background: transparent; border: 0;
  border-bottom: 1px solid #f0f0f3;
  border-radius: 0;
  padding: 12px 0;
  margin-bottom: 0;
}
.faq-section-compact .faq-item:last-child { border-bottom: 0; }
.faq-section-compact .faq-item summary { color: #4b5563; }

.text-link { color: #1F2258; font-weight: 600; }
.text-link:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .card-hero, .pokedex-hero {
    grid-template-columns: 1fr;
  }
  .set-hero { flex-direction: column; align-items: flex-start; }
  .prevnext { grid-template-columns: 1fr; }
  .prevnext-link.next { text-align: left; align-items: flex-start; }
}

/* =========================================================
   /sets/symbols/ — set-symbol reference guide
   ========================================================= */

.sets-guide-page { max-width: 1080px; margin: 0 auto; padding: 24px 16px 64px; }
.sets-guide-hero { margin-bottom: 24px; }
.sets-guide-hero h1 { font-size: 32px; color: #1a1a2e; margin: 0 0 12px; }

.era-index {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 16px 0 32px;
  padding: 12px;
  background: #f9fafb;
  border-radius: 10px;
  border: 1px solid #f0f0f3;
}
.era-index a {
  display: inline-block;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  color: #1F2258;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
}
.era-index a:hover { background: #f0f4ff; text-decoration: none; }

/* =========================================================
   TIMELINE layout for /sets/symbols/
   Vertical spine down the left margin; era headers anchor the line
   as time markers; sets are nodes on the spine with icon + meta.
   ========================================================= */
.timeline {
  position: relative;
  padding-left: 0;
  margin-top: 12px;
}
/* The spine — a soft vertical line down the left, behind all era
   sections. Drawn with a CSS gradient so it has subtle fade at top/
   bottom rather than hard edges. */
.timeline::before {
  content: '';
  position: absolute;
  left: 23px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg,
    transparent 0%,
    #e5e7eb 5%,
    #e5e7eb 95%,
    transparent 100%);
  pointer-events: none;
}

.timeline-era {
  position: relative;
  margin: 32px 0 40px;
}
.timeline-era-marker {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  position: relative;
}
.timeline-era-dot {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #1F2258;
  border: 4px solid #fff;
  box-shadow: 0 0 0 2px #1F2258, 0 4px 8px rgba(31,34,88,0.18);
  position: relative;
  z-index: 2;
}
.timeline-era-info { flex: 1; min-width: 0; }
.timeline-era-info h2 {
  font-size: 22px; color: #1a1a2e;
  margin: 0;
  letter-spacing: -0.01em;
}
.timeline-era-years {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 12px; font-weight: 700;
  color: #6b7280;
  letter-spacing: 0.08em;
  margin: 0 0 2px;
}
.timeline-era-meta { font-size: 13px; color: #6b7280; margin: 4px 0 0; }

.timeline-sets {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.timeline-set { margin: 0; padding-left: 0; }

.timeline-set-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px 12px 60px;
  background: #fff;
  border: 1px solid #f0f0f3;
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.timeline-set-link:hover {
  border-color: #3b82f6;
  transform: translateX(2px);
  box-shadow: 0 6px 16px rgba(59,130,246,0.08);
  text-decoration: none;
}
/* Small node connecting each set to the spine */
.timeline-node {
  position: absolute;
  left: 16px;
  top: 50%;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid #c4c4d6;
  transform: translateY(-50%);
  z-index: 2;
  transition: border-color .15s, background .15s;
}
.timeline-set-link:hover .timeline-node {
  border-color: #3b82f6;
  background: #f0f7ff;
}

/* Set icon — bigger than before (72px), Pokéball is the integrated
   fallback inside a circular plate, not an awkward overlay. */
.timeline-set-icon {
  position: relative;
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f9fafb;
  border-radius: 50%;
  overflow: hidden;
}
.timeline-set-icon .pokeball-fallback {
  position: absolute;
  width: 60%;
  height: 60%;
  opacity: 0.85;
  z-index: 1;
}
.timeline-set-icon img {
  position: relative;
  max-width: 56px;
  max-height: 56px;
  object-fit: contain;
  z-index: 2;
}

.timeline-set-text {
  display: flex; flex-direction: column;
  min-width: 0; flex: 1;
}
.timeline-set-name {
  font-size: 16px; font-weight: 700; color: #1a1a2e;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.timeline-set-meta {
  font-size: 13px; color: #6b7280;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
}
.timeline-set-meta time { font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
  .timeline::before { left: 19px; }
  .timeline-era-dot { width: 40px; height: 40px; }
  .timeline-set-link { padding: 12px 14px 12px 48px; gap: 12px; }
  .timeline-node { left: 12px; }
  .timeline-set-icon { width: 60px; height: 60px; }
}

/* Set hero icon — layered Pokéball SVG fallback behind the
   official set symbol image. If the image loads it covers the
   Pokéball; if the CDN 403s (older sets do), the Pokéball stays
   visible instead of leaving a blank space. */
.set-hero-icon {
  position: relative;
  width: 96px;
  height: 96px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid #f0f0f3;
  border-radius: 12px;
  overflow: hidden;
}
.set-hero-icon .pokeball-fallback {
  position: absolute;
  width: 72%;
  height: 72%;
  opacity: 0.85;
  z-index: 1;
}
.set-hero-icon img {
  position: relative;
  max-width: 80%;
  max-height: 80%;
  object-fit: contain;
  background: #fff;
  z-index: 2;
}

/* =========================================================
   Pokédex INDEX (all 1025 species) — grouped by generation
   ========================================================= */
.pokedex-index-page { max-width: 1200px; margin: 0 auto; padding: 24px 20px 80px; }

.pokedex-index-hero {
  margin-bottom: 24px;
  padding: 28px 0 4px;
  text-align: center;
}
.pokedex-eyebrow {
  font-size: 12px; font-weight: 700; color: #6b7280;
  text-transform: uppercase; letter-spacing: 0.12em;
  margin: 0 0 8px;
}
.pokedex-index-hero h1 {
  font-size: 40px; line-height: 1.1; color: #1a1a2e;
  margin: 0 0 12px; letter-spacing: -0.02em;
}
.pokedex-index-hero .direct-answer {
  max-width: 720px; margin: 0 auto;
  background: transparent; border: 0; padding: 0;
  font-size: 15px; line-height: 1.6; color: #4b5563;
}

/* Generation jump strip — each pill shows roman + region + count */
.dex-gen-jump {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
  margin: 0 0 20px;
}
.dex-gen-pill {
  display: flex; flex-direction: column; align-items: center;
  gap: 2px;
  padding: 10px 8px;
  background: #fff;
  border: 1px solid #f0f0f3;
  border-radius: 10px;
  text-decoration: none; color: inherit;
  transition: border-color .12s, transform .12s, box-shadow .12s;
}
.dex-gen-pill:hover {
  border-color: #3b82f6;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(59,130,246,0.08);
  text-decoration: none;
}
.dex-gen-pill-roman { font-size: 18px; font-weight: 800; color: #1F2258; }
.dex-gen-pill-region { font-size: 12px; font-weight: 600; color: #4b5563; }
.dex-gen-pill-count { font-size: 11px; color: #9ca3af; }

/* Filter strip — slimmer + sticky beneath the gen jump */
.dex-controls {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  margin: 0 0 24px; padding: 10px 12px;
  background: rgba(249, 250, 251, 0.95);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-radius: 12px;
  border: 1px solid #f0f0f3;
  position: sticky; top: 0; z-index: 10;
}
.dex-search-wrap {
  flex: 1 1 240px;
  display: flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid #e5e7eb; border-radius: 8px;
  padding: 7px 12px; color: #9ca3af;
}
.dex-search-wrap:focus-within {
  border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
}
.dex-search-wrap input {
  appearance: none; border: 0; background: transparent;
  font: inherit; font-size: 14px; color: #1a1a2e; width: 100%; outline: none;
}
.dex-controls select {
  appearance: none; -webkit-appearance: none;
  border: 1px solid #e5e7eb; background: #fff; border-radius: 8px;
  padding: 7px 28px 7px 12px; font: inherit; font-size: 13px; color: #1a1a2e;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%236b7280' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
.dex-controls select:focus {
  outline: 0; border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
}
.dex-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: #4b5563;
  padding: 7px 12px;
  background: #fff;
  border: 1px solid #e5e7eb; border-radius: 8px;
  cursor: pointer;
}
.dex-toggle:hover { border-color: #d1d5db; }
#dex-meta { margin: 0; margin-left: auto; font-size: 13px; color: #6b7280; }

/* Per-generation section block */
.dex-gen { margin: 32px 0; scroll-margin-top: 80px; }
.dex-gen[hidden] { display: none; }
.dex-gen-header {
  display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
  margin: 0 0 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid #f0f0f3;
}
.dex-gen-header h2 {
  display: flex; align-items: baseline; gap: 14px;
  font-size: 22px; color: #1a1a2e; margin: 0;
}
.dex-gen-roman {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; padding: 2px 8px;
  font-size: 13px; font-weight: 800;
  color: #fff; background: #1F2258;
  border-radius: 6px; letter-spacing: 0.04em;
}
.dex-gen-meta { font-size: 13px; color: #6b7280; margin: 0; }

/* Pokémon-card-style entry */
.dex-grid {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 12px;
}
.dex-card { margin: 0; }
.dex-card[hidden] { display: none; }
.dex-card-link {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  padding: 16px 12px 14px;
  background: #fff;
  border: 1px solid #f0f0f3;
  border-radius: 14px;
  text-decoration: none; color: inherit;
  transition: border-color .15s, transform .15s, box-shadow .15s, background .15s;
  overflow: hidden;
}
.dex-card-link::before {
  /* Type-tinted glow at the top of every card. The --type-tint CSS
     variable is set on the parent <li> from the primary type. */
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 80px;
  background: radial-gradient(ellipse at center top, var(--type-tint, #999) 0%, transparent 70%);
  opacity: 0.12;
  transition: opacity .15s;
  pointer-events: none;
}
.dex-card-link:hover {
  border-color: var(--type-tint, #3b82f6);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  text-decoration: none;
}
.dex-card-link:hover::before { opacity: 0.22; }
.dex-card-num {
  position: absolute; top: 8px; left: 10px;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 11px; font-weight: 700; color: #9ca3af;
  z-index: 2;
}
.dex-card-tcg {
  position: absolute; top: 8px; right: 8px;
  min-width: 22px; padding: 2px 7px;
  font-size: 11px; font-weight: 700;
  color: #1F2258; background: rgba(31,34,88,0.08);
  border-radius: 999px;
  z-index: 2;
}
.dex-card-art {
  width: 120px; height: 120px;
  margin: 8px 0 10px;
  display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 1;
}
.dex-card-art img {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.12));
}
.dex-card-name {
  font-size: 15px; font-weight: 700; color: #1a1a2e;
  text-transform: capitalize;
  margin-bottom: 6px;
  position: relative; z-index: 1;
}
.dex-card-types {
  display: flex; flex-wrap: wrap; gap: 4px; justify-content: center;
  position: relative; z-index: 1;
}
.dex-card-types .type-badge {
  font-size: 10px;
  padding: 2px 8px;
}

@media (max-width: 640px) {
  .pokedex-index-hero h1 { font-size: 28px; }
  .dex-gen-jump { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); }
  .dex-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
  .dex-card-art { width: 96px; height: 96px; }
}

/* =========================================================
   Pokédex ENTITY page additions: base stats, abilities, etc.
   ========================================================= */
.dex-basestats, .dex-abilities, .dex-flavor, .dex-sprites {
  margin: 32px 0;
}
.dex-basestats h2, .dex-abilities h2, .dex-flavor h2, .dex-sprites h2 {
  font-size: 22px; color: #1a1a2e; margin: 0 0 14px;
}
.basestats-table { width: 100%; border-collapse: collapse; max-width: 520px; }
.basestats-table th { text-align: left; font-size: 13px; font-weight: 500; color: #6b7280; padding: 6px 0; width: 80px; }
.basestats-table .bs-val { font-weight: 700; color: #1a1a2e; font-size: 14px; padding: 6px 12px 6px 0; width: 50px; text-align: right; }
.basestats-table .bs-bar {
  width: 100%; padding: 6px 0;
}
/* Faint background "track" so the row reads as one shape all the way
   to the right edge of the stats column. The colored bar sits on top
   of this track at the actual percentage width. Without this, low-stat
   Pokémon (like Bulbasaur) had tiny bars floating in dead space, which
   made the column look truncated and amplified the gap to the right. */
.basestats-table .bs-bar {
  background:
    linear-gradient(to right, #f3f4f7 0%, #f3f4f7 100%);
  background-repeat: no-repeat;
  background-size: 100% 8px;
  background-position: left center;
  border-radius: 4px;
}
.basestats-table .bs-bar > span {
  display: inline-block;
  height: 8px;
  border-radius: 4px;
  min-width: 4px;
  vertical-align: middle;
}
.basestats-table .bs-total .bs-bar { background: transparent; }
.basestats-table .bs-total th, .basestats-table .bs-total .bs-val {
  border-top: 1px solid #e5e7eb; padding-top: 10px;
  font-weight: 700; color: #1a1a2e; font-size: 14px;
}

.abilities-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.abilities-list li {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px; background: #fff;
  border: 1px solid #f0f0f3; border-radius: 10px;
}
.ability-name { font-size: 14px; font-weight: 600; color: #1a1a2e; }
.ability-tag {
  font-size: 11px; padding: 2px 8px; border-radius: 999px;
  background: #fef3c7; color: #a16207; font-weight: 600;
}

.flavor-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.flavor-list li {
  background: #fff; border: 1px solid #f0f0f3; border-radius: 10px;
  padding: 12px 16px;
}
.flavor-list p { margin: 0; font-style: italic; color: #4b5563; line-height: 1.55; }
.flavor-source { font-size: 11px; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.04em; }

.sprite-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; }
.sprite-row figure {
  margin: 0; padding: 12px; background: #f9fafb;
  border: 1px solid #f0f0f3; border-radius: 10px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.sprite-row figure img { width: 96px; height: 96px; image-rendering: pixelated; }
.sprite-row figcaption { font-size: 12px; color: #6b7280; }