/* バトサポ — ポケモンごとのページ（tools/build_species_pages.py が生成）。page.css の上に載せる。 */

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0f141b; --card: #171e28; --ink: #e6ebf2; --ink-mid: #aab4c2; --ink-soft: #7d8898;
  --line: #26303d; --def: #8fb6f4;
}
:root[data-theme="dark"] th { background: #1e2733; }
:root[data-theme="dark"] code { background: #1e2733; }
:root[data-theme="dark"] .type { filter: brightness(.85) saturate(1.1); }

.page--wide { max-width: 980px; }
.card + .card { margin-top: 16px; }
.card > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.pagehead a.pagehead__title { color: var(--ink-mid); font-weight: 600; }

/* ---- 見出し部 ---- */
.hero { display: flex; gap: 20px; align-items: center; }
.hero__text { min-width: 0; flex: 1; }
.hero h1 { font-size: 28px; margin: 0; }
.hero__sub { margin: 4px 0 0; color: var(--ink-mid); }
.hero__rank { margin: 8px 0 0; }
.hero__rank .rank { font-size: 20px; color: var(--ink); }
.hero__actions { margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sprite { image-rendering: pixelated; vertical-align: middle; }
.sprite--lg { width: 96px; height: 96px; flex: none; }
.sprite--sm { width: 48px; height: 48px; }
.sprite--xs { width: 32px; height: 32px; }
@media (max-width: 560px) {
  .hero { flex-direction: column; align-items: flex-start; gap: 8px; }
  .card { padding: 20px 16px; }
}

.btn {
  display: inline-block; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--card); color: var(--ink); text-decoration: none; font-weight: 700; font-size: 14px;
}
.btn:hover { text-decoration: none; border-color: var(--def); }
.btn--primary { background: #2f7d6f; border-color: #2f7d6f; color: #fff; }
.btn--primary:hover { background: #276a5e; }

.types { display: inline-flex; gap: 4px; flex-wrap: wrap; vertical-align: middle; }
.type {
  display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 1.6;
  white-space: nowrap;
}

h3 { font-size: 15px; margin: 18px 0 6px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
@media (max-width: 640px) { .grid2 { grid-template-columns: 1fr; } }

/* ---- 採用率の表 ---- */
table.rates th { width: 40%; background: transparent; color: var(--ink); font-weight: 600; border-left: 0; }
table.rates td, table.rates th { border-left: 0; border-right: 0; padding: 6px 4px; }
table.rates td.bar { padding: 6px 8px; }
table.rates td.bar span { display: block; height: 10px; border-radius: 999px; background: #7a5cd6; opacity: .75; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.moves td, table.moves th { padding: 6px 8px; }
table.stats th { width: auto; }
table.stats td b { color: var(--ink); }
table.stats--inline th, table.stats--inline td { padding: 4px 8px; text-align: center; }
table.stats--inline { width: auto; }
.muted { color: var(--ink-soft); }
.small { font-size: 12px; }

/* ---- 弱点と耐性 ---- */
.defence__row { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; border-bottom: 1px dashed var(--line); }
.defence__row:last-child { border-bottom: 0; }
.defence__mult { flex: none; width: 48px; font-weight: 800; font-size: 14px; padding-top: 2px; }
.defence__row--bad .defence__mult { color: #c0293c; }
.defence__row--good .defence__mult { color: #17794b; }
.defence__types { display: flex; flex-wrap: wrap; gap: 4px; }

/* ---- メガ ---- */
.mega { padding: 10px 0 4px; border-top: 1px solid var(--line); }
.mega h3 { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 16px; }

/* ---- リンク一覧 ---- */
ul.links { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
ul.links li { margin: 0; }
ul.links a {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border: 1px solid var(--line);
  border-radius: 999px; text-decoration: none; color: var(--ink); font-weight: 600; font-size: 13px;
}
ul.links a small { color: var(--ink-soft); font-weight: 500; }
ul.links a:hover { border-color: var(--def); }

ol.index { list-style: none; padding: 0; margin: 8px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 4px 16px; }
ol.index li { margin: 0; }
ol.index a { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 8px; text-decoration: none; color: var(--ink); }
ol.index a:hover { background: var(--line); }
.index__rank { flex: none; width: 44px; text-align: right; font-variant-numeric: tabular-nums; font-size: 13px; color: var(--ink-mid); font-weight: 700; }
.index__rank--none { color: var(--ink-soft); }
.index__name { font-weight: 700; min-width: 0; }