/* Статические страницы покедекса (/pokedex/*.html, scripts/build-pokedex-pages.js).
   Одна вёрстка на все ~1200 страниц — стили только здесь. Шрифт — свой Inter, как в pokedex.html. */
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url('/assets/fonts/inter-cyrillic.woff2?v=1') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url('/assets/fonts/inter-latin.woff2?v=1') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: #090b18;
  --panel: rgba(255, 255, 255, .05);
  --border: rgba(255, 255, 255, .12);
  --text: #e8eaf6;
  --muted: #9aa0c3;
  --accent: #8A7CFF;
  --accent-strong: #5B5BF0;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  overflow-wrap: anywhere;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); }
a:hover { color: #b3aaff; }

.top, .foot, .page { max-width: 820px; margin: 0 auto; padding: 0 16px; }
.top { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: baseline; padding-top: 18px; }
.logo { font-weight: 800; font-size: 18px; color: var(--text); text-decoration: none; }
.crumbs { font-size: 14px; color: var(--muted); }

.page article {
  margin-top: 16px; padding: 20px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 16px;
}
.hero { display: flex; gap: 16px; align-items: center; }
.sprite { width: 120px; height: 120px; object-fit: contain; image-rendering: auto; flex: 0 0 auto; }
.num { margin: 0; color: var(--muted); font-weight: 600; }
h1 { margin: 0 0 6px; font-size: 30px; line-height: 1.2; }
h2 { margin: 28px 0 8px; font-size: 20px; }
h3 { margin: 14px 0 4px; font-size: 16px; color: var(--muted); }
.lead { font-size: 17px; }
.flavor { color: var(--muted); font-style: italic; }

.type {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  font-size: 13px; font-weight: 700; color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.35);
}
.type-normal { background: #A8A878; } .type-fire { background: #F08030; }
.type-water { background: #6890F0; } .type-electric { background: #F8D030; color: #1a1a1a; text-shadow: none; }
.type-grass { background: #78C850; } .type-ice { background: #98D8D8; color: #1a1a1a; text-shadow: none; }
.type-fighting { background: #C03028; } .type-poison { background: #A040A0; }
.type-ground { background: #E0C068; color: #1a1a1a; text-shadow: none; } .type-flying { background: #A890F0; }
.type-psychic { background: #F85888; } .type-bug { background: #A8B820; }
.type-rock { background: #B8A038; } .type-ghost { background: #705898; }
.type-dragon { background: #7038F8; } .type-dark { background: #705848; }
.type-steel { background: #B8B8D0; color: #1a1a1a; text-shadow: none; } .type-fairy { background: #EE99AC; }

.cta { display: flex; flex-wrap: wrap; gap: 10px; }
.btn {
  display: inline-block; padding: 9px 16px; border-radius: 10px;
  background: var(--accent-strong); color: #fff; text-decoration: none; font-weight: 600;
}
.btn.ghost { background: transparent; border: 1px solid var(--border); color: var(--text); }

.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin: 0; }
.facts div { padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; }
.facts dt { font-size: 12px; color: var(--muted); }
.facts dd { margin: 0; font-weight: 600; }

.stats { width: 100%; max-width: 480px; border-collapse: collapse; }
.stats caption { text-align: left; color: var(--muted); font-size: 13px; padding-bottom: 4px; }
.stats th { text-align: left; width: 60px; font-weight: 600; color: var(--muted); }
.stats td { padding: 3px 8px 3px 0; width: 48px; font-variant-numeric: tabular-nums; }
.stats td.bar { width: auto; }
.stats td.bar span { display: block; height: 8px; border-radius: 4px; background: var(--accent); }
.stats tr.total th, .stats tr.total td { padding-top: 6px; font-weight: 800; color: var(--text); }

.abilities, .wild, .evo-branches { padding-left: 20px; margin: 4px 0; }
.wild .more { color: var(--muted); list-style: none; }
.evo-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 0; padding: 0; list-style: none; }
.evo-line li + li::before { content: '·'; margin: 0 10px; color: var(--muted); }
.evo-line .current span { font-weight: 800; }
.evo-line small { color: var(--muted); }

.pager { display: flex; justify-content: space-between; gap: 12px; margin: 16px 0; font-size: 15px; }
.foot { padding-bottom: 32px; color: var(--muted); font-size: 14px; }

@media (max-width: 560px) {
  .page article { padding: 16px; }
  .hero { flex-direction: column; align-items: flex-start; }
  h1 { font-size: 26px; }
  .pager { flex-direction: column; align-items: center; }
}