/* RandomPokemons.com - "Sunny Meadow" design system. No frameworks.
   Light mode default, "Night League" dark via prefers-color-scheme.
   Spacing: 8px scale. All motion gated behind prefers-reduced-motion: no-preference.
   Contrast-verified (tools/contrast-check.mjs): every text pair >= 4.5:1
   (H1 accent word is large text, >= 3:1), UI borders >= 3:1. */

/* ---------- Fonts (self-hosted, latin subset, variable) ---------- */
/* Space Grotesk = display/headings. Inter = body + UI. */
@font-face {
  font-family: "Space Grotesk";
  src: url("/fonts/spacegrotesk-latin-var.woff2") format("woff2-variations");
  font-weight: 300 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/fonts/jakarta-latin-var.woff2") format("woff2-variations");
  font-weight: 400 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tokens ---------- */
:root {
  /* Palette = Tailwind (red-500 / orange / yellow / zinc), AA-tuned. */
  --bg-page: #FFFFFF;
  --bg-hero: #DC2626;                 /* fallback under the hero gradient */
  --bg-tool: #FAFAFA;                 /* zinc-50 */
  --surface: #FFFFFF;
  --surface-alt: #FFFFFF;
  --ink: #18181B;          /* zinc-900 */
  --ink-soft: #52525B;     /* zinc-600 */
  --brand: #EF4444;        /* red-500: accents, focus ring, borders (UI 3:1) */
  --brand-ink: #DC2626;    /* red-600: links + on-white brand text (AA 4.83) */
  --brand-strong: #DC2626; /* red-600: solid fills, white text (AA 4.83) */
  --brand-grad: linear-gradient(90deg, #EF4444, #EA580C);  /* red-500 -> orange-600 */
  --hero-grad: linear-gradient(135deg, #DC2626 0%, #F97316 55%, #FACC15 100%); /* red-600 -> orange-500 -> yellow-400 */
  --input-bg: #FAFAFA;     /* zinc-50 */
  --sun: #FACC15;          /* yellow-400 */
  --sun-ink: #5A4200;
  --accent-word: #FEF08A;  /* yellow-200 (H1 highlight, large text on red) */
  --border-soft: #F4F4F5;  /* zinc-100 */
  --border-card: #E4E4E7;  /* zinc-200 */
  --pill-border: #D4D4D8;  /* zinc-300 */
  --pill-ink: #3F3F46;     /* zinc-700 */
  --shiny: #EF4444;
  --dex: #71717A;          /* zinc-500 (AA 4.83) */
  --on-brand: #FFFFFF;
  --radius-card: 16px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 3px rgba(24, 24, 27, .08), 0 1px 2px rgba(24, 24, 27, .04);
  --shadow-hover: 0 10px 28px rgba(24, 24, 27, .12);
  --max-w: 80rem;
  --font-head: "Space Grotesk", "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --chip-bg: #F4F4F5;      /* zinc-100 */
  --chip-hover: #E4E4E7;   /* zinc-200 */
  color-scheme: light;

  --tier-1: #FCA5A5; --tier-2: #F97316; --tier-3: #DC2626;

  /* Type colors: background + family-dark text (all pairs >= 4.5:1) */
  --t-normal: #A8A77A;   --tx-normal: #33321D;
  --t-fire: #EE8130;     --tx-fire: #571E00;
  --t-water: #6390F0;    --tx-water: #0A1E5A;
  --t-electric: #F7D02C; --tx-electric: #4A3D00;
  --t-grass: #7AC74C;    --tx-grass: #173A08;
  --t-ice: #96D9D6;      --tx-ice: #0E3D3B;
  --t-fighting: #C22E28; --tx-fighting: #FFFFFF;
  --t-poison: #A33EA1;   --tx-poison: #FFFFFF;
  --t-ground: #E2BF65;   --tx-ground: #463508;
  --t-flying: #A98FF3;   --tx-flying: #241356;
  --t-psychic: #F95587;  --tx-psychic: #570019;
  --t-bug: #A6B91A;      --tx-bug: #2A3003;
  --t-rock: #B6A136;     --tx-rock: #332C05;
  --t-ghost: #735797;    --tx-ghost: #FFFFFF;
  --t-dragon: #6F35FC;   --tx-dragon: #FFFFFF;
  --t-dark: #705746;     --tx-dark: #FFFFFF;
  --t-steel: #B7B7CE;    --tx-steel: #2C2C45;
  --t-fairy: #D685AD;    --tx-fairy: #4D1030;
}

/* "Night League" dark tokens. Applied two ways:
   1) system preference (unless the user forced light via the header switcher)
   2) forced dark via html[data-theme="dark"]
   Keep both blocks identical when editing. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg-page: #18181B;
    --bg-tool: #1F1F23;
    --surface: #27272A;
    --surface-alt: #18181B;
    --ink: #FAFAFA;
    --ink-soft: #A1A1AA;
    --brand: #F87171;
    --brand-ink: #F87171;
    --brand-strong: #DC2626;
    --brand-grad: linear-gradient(90deg, #EF4444, #EA580C);
    --input-bg: #1F1F23;
    --sun: #FACC15;
    --sun-ink: #5A4200;
    --accent-word: #FEF08A;
    --border-soft: #2E2E33;
    --border-card: #3F3F46;
    --pill-border: #52525B;
    --pill-ink: #D4D4D8;
    --shiny: #F87171;
    --chip-bg: #27272A;
    --chip-hover: #3F3F46;
    --dex: #A1A1AA;
    --on-brand: #FFFFFF;
    --shadow-card: 0 2px 8px rgba(0, 0, 0, .4);
    --shadow-hover: 0 10px 28px rgba(0, 0, 0, .5);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg-page: #18181B;
  --bg-tool: #1F1F23;
  --surface: #27272A;
  --surface-alt: #18181B;
  --ink: #FAFAFA;
  --ink-soft: #A1A1AA;
  --brand: #F87171;
  --brand-ink: #F87171;
  --brand-strong: #DC2626;
  --brand-grad: linear-gradient(90deg, #EF4444, #EA580C);
  --input-bg: #1F1F23;
  --sun: #FACC15;
  --sun-ink: #5A4200;
  --accent-word: #FEF08A;
  --border-soft: #2E2E33;
  --border-card: #3F3F46;
  --pill-border: #52525B;
  --pill-ink: #D4D4D8;
  --shiny: #F87171;
  --chip-bg: #27272A;
  --chip-hover: #3F3F46;
  --dex: #A1A1AA;
  --on-brand: #FFFFFF;
  --shadow-card: 0 2px 8px rgba(0, 0, 0, .4);
  --shadow-hover: 0 10px 28px rgba(0, 0, 0, .5);
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }

html { scroll-behavior: auto; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg-page);
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3, .brand span { font-family: var(--font-head); line-height: 1.2; }

img { max-width: 100%; height: auto; }

a { color: var(--brand-ink); text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

button { font-family: inherit; }

:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 3px;
  border-radius: 6px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

.skip-link {
  position: absolute; left: -9999px; top: 8px; z-index: 200;
  background: var(--surface); color: var(--ink); padding: 8px 16px;
  border-radius: var(--radius-pill); box-shadow: var(--shadow-card);
}
.skip-link:focus { left: 8px; }

.wrap { max-width: var(--max-w); margin: 0 auto; padding: 0 16px; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--surface-alt) 86%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-soft);
}
.site-header .wrap {
  display: flex; align-items: center; gap: 8px;
  min-height: 64px; padding-top: 8px; padding-bottom: 8px; flex-wrap: wrap;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 1.25rem; text-decoration: none; color: var(--ink);
  font-family: var(--font-head);
}
.brand img { width: 36px; height: 36px; }

.theme-toggle {
  margin-left: auto;
  min-width: 44px; min-height: 44px; padding: 8px;
  background: none; border: 1.5px solid var(--pill-border);
  border-radius: var(--radius-pill); cursor: pointer; color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
}
.theme-toggle:hover { border-color: var(--brand); }
.theme-toggle svg { display: none; }
.theme-toggle[data-mode="light"] .ic-moon { display: block; }
.theme-toggle[data-mode="dark"] .ic-sun { display: block; }

.nav-toggle {
  display: none; margin-left: 8px;
  min-width: 44px; min-height: 44px; padding: 8px;
  background: none; border: 1.5px solid var(--pill-border);
  border-radius: 10px; cursor: pointer; color: var(--ink);
}
.nav-toggle svg { display: block; }

.site-nav { margin-left: 8px; }
/* Only the top-level bar is a flex row; the submenu (.nav-menu) stays a vertical list. */
.site-nav > ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.site-nav a {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 4px 16px; border-radius: var(--radius-pill);
  text-decoration: none; color: var(--ink-soft); font-weight: 600; font-size: .95rem;
}
.site-nav a:hover { color: var(--brand-ink); background: var(--chip-bg); }
.site-nav a[aria-current="page"] { color: var(--on-brand); background: var(--brand-strong); }
.site-nav a[aria-current="page"]:hover { color: var(--on-brand); }

/* Generators dropdown */
.has-menu { position: relative; }
.nav-menu-btn {
  display: inline-flex; align-items: center; gap: 4px;
  min-height: 44px; padding: 4px 14px; border: 0; border-radius: var(--radius-pill);
  background: none; color: var(--ink-soft); font: inherit; font-weight: 600; font-size: .95rem;
  cursor: pointer;
}
.nav-menu-btn:hover, .has-menu:hover .nav-menu-btn,
.has-menu:focus-within .nav-menu-btn,
.has-menu[data-open="true"] .nav-menu-btn { color: var(--brand-ink); background: var(--chip-bg); }
.nav-menu-btn .chev { width: 14px; height: 14px; transition: transform .18s ease-out; }
.has-menu:hover .nav-menu-btn .chev,
.has-menu:focus-within .nav-menu-btn .chev,
.has-menu[data-open="true"] .nav-menu-btn .chev { transform: rotate(180deg); }
.nav-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 120;
  width: max-content; min-width: 240px;
  margin: 0; padding: 8px; list-style: none;
  background: var(--surface); border: 1px solid var(--border-card);
  border-radius: 14px; box-shadow: var(--shadow-hover);
  /* Animation-safe hiding: stays in the DOM for crawlers, fades/slides in on open. */
  opacity: 0; visibility: hidden; transform: translateY(6px); pointer-events: none;
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
/* invisible bridge so the pointer can cross the gap from button to menu without closing */
.nav-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }
/* Desktop: open on hover or keyboard focus. Touch/click uses [data-open] (set by nav.js). */
@media (min-width: 720px) {
  .has-menu:hover .nav-menu,
  .has-menu:focus-within .nav-menu { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
}
.has-menu[data-open="true"] .nav-menu { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
.nav-menu li { width: 100%; }
.nav-menu a {
  display: block; min-height: 40px; padding: 9px 14px; white-space: nowrap;
  border-radius: 9px; font-weight: 600; font-size: .9rem; color: var(--ink);
}
.nav-menu a:hover { background: var(--chip-bg); color: var(--brand-ink); }
.nav-menu a[aria-current="page"] { color: var(--on-brand); background: var(--brand-strong); }

/* Nested "By Region" flyout inside the Generators dropdown */
.has-submenu { position: relative; }
.nav-sub-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
  min-height: 40px; padding: 9px 14px; border: 0; border-radius: 9px;
  background: none; color: var(--ink); font: inherit; font-weight: 600; font-size: .9rem; cursor: pointer;
}
.nav-sub-btn:hover, .has-submenu:hover .nav-sub-btn,
.has-submenu:focus-within .nav-sub-btn { background: var(--chip-bg); color: var(--brand-ink); }
.nav-sub-btn .chev { width: 13px; height: 13px; transition: transform .18s ease-out; transform: rotate(-90deg); }
.nav-submenu {
  position: absolute; top: -8px; right: calc(100% + 8px); z-index: 130;
  width: max-content; min-width: 210px; margin: 0; padding: 8px; list-style: none;
  background: var(--surface); border: 1px solid var(--border-card);
  border-radius: 14px; box-shadow: var(--shadow-hover);
  opacity: 0; visibility: hidden; transform: translateX(6px); pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
/* bridge across the gap so the pointer can reach the flyout */
.nav-submenu::before { content: ""; position: absolute; top: 0; left: 100%; width: 10px; height: 100%; }
@media (min-width: 720px) {
  .has-submenu:hover .nav-submenu,
  .has-submenu:focus-within .nav-submenu { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
}
.has-submenu[data-open="true"] .nav-submenu { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
.nav-submenu li { width: 100%; }
.nav-submenu a {
  display: block; min-height: 40px; padding: 9px 14px; white-space: nowrap;
  border-radius: 9px; font-weight: 600; font-size: .9rem; color: var(--ink);
}
.nav-submenu a:hover { background: var(--chip-bg); color: var(--brand-ink); }
.nav-submenu a[aria-current="page"] { color: var(--on-brand); background: var(--brand-strong); }

@media (max-width: 719px) {
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .site-nav { display: none; width: 100%; }
  .site-header[data-open="true"] .site-nav { display: block; padding-bottom: 8px; }
  .site-nav > ul { flex-direction: column; }
  .site-nav a { width: 100%; }
  .nav-menu-btn { width: 100%; justify-content: space-between; }
  /* Static menu in the mobile drawer: use display so a closed submenu takes no space. */
  .nav-menu {
    position: static; width: auto; min-width: 0; box-shadow: none; border: 0; padding: 4px 0 4px 12px; margin: 0;
    display: none; opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition: none;
  }
  .has-menu[data-open="true"] .nav-menu,
  /* Auto-expand the section containing the current page so the active tab shows. */
  .has-menu.is-current .nav-menu { display: block; }
  /* Region flyout becomes an inline accordion on mobile. */
  .nav-sub-btn { width: 100%; }
  .nav-sub-btn .chev { transform: rotate(0deg); }
  .has-submenu[data-open="true"] .nav-sub-btn .chev { transform: rotate(180deg); }
  .nav-submenu {
    position: static; width: auto; min-width: 0; box-shadow: none; border: 0; padding: 2px 0 2px 12px; margin: 0;
    display: none; opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition: none;
  }
  .has-submenu[data-open="true"] .nav-submenu,
  .has-submenu.is-current .nav-submenu { display: block; }
}

/* ---------- Hero (fiery gradient, white text) ---------- */
.hero-band {
  background: rebeccapurple;
  position: relative;
}
.hero-band::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"><path fill="%23FFFFFF" fill-opacity=".10" d="M40 22l3 9 9 3-9 3-3 9-3-9-9-3 9-3zM150 120l2.4 7.2 7.2 2.4-7.2 2.4-2.4 7.2-2.4-7.2-7.2-2.4 7.2-2.4zM120 40l2 6 6 2-6 2-2 6-2-6-6-2 6-2z"/></svg>');
}
.hero {
  display: grid; grid-template-columns: 1fr minmax(400px, 500px); align-items: center;
  gap: 40px; padding-top: 44px; padding-bottom: 52px;
  position: relative;
}
@media (max-width: 900px) { .hero { grid-template-columns: 1fr; gap: 28px; } }
.hero-copy { position: relative; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 6px; margin: 0 0 16px;
  font-family: var(--font-head); font-weight: 700; font-size: .8rem;
  letter-spacing: .1em;
  background: rgba(255, 255, 255, .95); color: var(--brand-ink);
  padding: 6px 14px; border-radius: var(--radius-pill);
}
.eyebrow svg { color: var(--sun); }
.hero h1 {
  margin: 0 0 12px; color: #fff;
  font-size: clamp(2.1rem, 5.4vw, 3.25rem); font-weight: 700;
  letter-spacing: -.01em; line-height: 1.08;
}
.hero h1 .hl { color: var(--accent-word); }
.hero .tagline {
  margin: 0 0 20px; max-width: 40rem; font-size: 1.0625rem; color: rgba(255, 255, 255, .92);
}
.hero-stats { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.hero-stats li {
  font-size: .82rem; font-weight: 600; color: #fff;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .4);
  padding: 5px 13px; border-radius: var(--radius-pill);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.hero-mascot { width: min(300px, 34vw); height: auto; filter: drop-shadow(0 10px 24px rgba(80, 20, 0, .25)); }
@media (max-width: 719px) {
  .hero { grid-template-columns: 1fr; padding-top: 28px; padding-bottom: 36px; }
  .hero-mascot { display: none; }
}
.band-wave { display: none; }

/* ---------- Generator card (in the hero) ---------- */
.gen-card {
  background: var(--surface);
  border: 1px solid var(--border-card);
  border-radius: 18px;
  box-shadow: 0 18px 44px rgba(60, 14, 0, .24);
  padding: 20px;
}
.gen-card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 16px;
}
.gen-card-head h2 { margin: 0; font-size: 1.15rem; font-weight: 700; color: var(--ink); }
.link-reset {
  background: none; border: 0; cursor: pointer; padding: 4px;
  color: var(--brand-ink); font: inherit; font-weight: 600; font-size: .85rem;
}
.link-reset:hover { text-decoration: underline; }
.gen-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 16px; }
.fld { display: grid; gap: 6px; min-width: 0; }
.fld-label { font-size: .78rem; font-weight: 600; color: var(--ink-soft); letter-spacing: .01em; }
/* Both checkboxes sit side by side inside the Options cell, next to Quantity. */
.opt-checks { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding-top: 4px; }
.mini-check { display: inline-flex; align-items: center; gap: 5px; min-height: 32px; font-size: .78rem; font-weight: 500; color: var(--ink); cursor: pointer; white-space: nowrap; }
.mini-check input { width: 15px; height: 15px; accent-color: var(--brand-strong); cursor: pointer; flex: none; }
.btn-advanced {
  width: 100%; margin-top: 10px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 8px 16px;
  background: none; color: var(--brand-ink);
  border: 1.5px solid var(--border-card); border-radius: var(--radius-pill);
  font: inherit; font-weight: 600; cursor: pointer;
}
.btn-advanced:hover { border-color: var(--brand); background: var(--chip-bg); }
@media (max-width: 560px) {
  .gen-grid { grid-template-columns: 1fr; }
  .btn-generate { font-size: 1.05rem; min-height: 52px; padding: 10px 16px; gap: 8px; }
  .btn-generate svg { width: 18px; height: 18px; }
  .btn-advanced { min-height: 46px; }
  .results-head { flex-direction: column; align-items: stretch; }
  .results-actions { width: 100%; }
  .results-actions .btn-ghost { flex: 1; justify-content: center; }
  .btn-ghost { min-height: 46px; }
}

/* ---------- Advanced filters modal ---------- */
.adv-modal {
  border: 0; padding: 0; margin: auto;
  width: min(860px, calc(100vw - 24px));
  max-height: calc(100dvh - 32px);
  background: var(--surface); color: var(--ink);
  border-radius: var(--radius-card);
  box-shadow: 0 24px 64px rgba(10, 8, 6, .4);
  overflow: hidden;
}
.adv-modal::backdrop { background: rgba(24, 12, 6, .55); }
.adv-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px; border-bottom: 1px solid var(--border-card);
  position: sticky; top: 0; background: var(--surface); z-index: 2;
}
.adv-head h2 { margin: 0; font-size: 1.2rem; font-weight: 700; }
.adv-body { padding: 20px 22px; overflow-y: auto; max-height: calc(100dvh - 190px); }
.adv-body .filter-group { margin: 0 0 18px; }
/* Multi-column packs the fieldsets tightly with even gaps (a 2-col grid left ragged
   dead space because the groups have different heights). break-inside keeps each whole. */
@media (min-width: 620px) {
  .adv-body { column-count: 2; column-gap: 26px; }
  .adv-body .filter-group { break-inside: avoid; -webkit-column-break-inside: avoid; }
  .adv-body .filter-group:last-child { margin-bottom: 0; }
}
.adv-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 20px; border-top: 1px solid var(--border-card);
  position: sticky; bottom: 0; background: var(--surface);
}
.adv-foot .pool-note { margin: 0; }
.btn-generate.adv-done { width: auto; min-height: 46px; font-size: 1rem; padding: 8px 22px; }

/* ---------- Results band (full width, below hero) ---------- */
.results-band { background: var(--bg-page); padding: 32px 0 8px; scroll-margin-top: 84px; }
.results-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; margin-bottom: 8px;
}
.results-head h2 { margin: 0; font-size: 1.5rem; font-weight: 700; }
.results-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.results-band .pool-note, .region-results .pool-note { margin: 0 0 20px; }
.results-band .results-region { margin-bottom: 24px; }

/* ---------- Tool section ---------- */
.tool-band { background: var(--bg-tool); padding: 24px 0 40px; }
.tool-layout {
  display: grid; grid-template-columns: 1fr; gap: 24px;
}
@media (min-width: 1024px) {
  .tool-layout { grid-template-columns: 320px minmax(0, 1fr); align-items: start; }
}

/* Filters column */
.filters-panel { min-width: 0; }
.filters-panel > summary {
  font-family: var(--font-head); font-weight: 700; font-size: 1.05rem;
  background: var(--surface); border: 1px solid var(--border-card);
  border-radius: var(--radius-card); box-shadow: var(--shadow-card);
  padding: 12px 20px; cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: 8px; min-height: 48px;
}
.filters-panel > summary::-webkit-details-marker { display: none; }
.filters-panel > summary::after {
  content: ""; margin-left: auto; width: 14px; height: 14px;
  background: currentColor;
  clip-path: polygon(50% 70%, 6% 30%, 16% 18%, 50% 50%, 84% 18%, 94% 30%);
}
.filters-panel[open] > summary { margin-bottom: 16px; }
.filters-panel[open] > summary::after { clip-path: polygon(50% 30%, 94% 70%, 84% 82%, 50% 50%, 16% 82%, 6% 70%); }
@media (min-width: 1024px) {
  .filters-panel > summary { display: none; }
}

/* Filter group: title sits OUTSIDE, on the section background; controls in a white card. */
.filter-group { border: 0; padding: 0; margin: 0 0 20px; min-inline-size: 0; }
.filter-title {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 0 2px; margin: 0 0 8px;
  font-family: var(--font-head); font-weight: 600; font-size: 1rem; color: var(--ink);
}
.filter-title .ico { color: var(--brand); flex-shrink: 0; width: 17px; height: 17px; }
.filter-title .ttl { line-height: 1; }
.filter-card {
  background: var(--surface);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 14px 16px;
  display: grid; gap: 12px;
}
.mini-btns { display: inline-flex; gap: 4px; margin-left: auto; }
.btn-mini {
  font: inherit; font-size: .78rem; font-weight: 600;
  padding: 2px 10px; min-height: 30px;
  background: none; color: var(--brand-ink);
  border: 1px solid var(--border-card); border-radius: 8px;
  cursor: pointer;
}
.btn-mini:hover { border-color: var(--brand); background: var(--chip-bg); }

.chip-grid { display: flex; flex-wrap: wrap; gap: 8px; }

/* Chips: flat, subtle. Real checkbox/radio, visually hidden but focusable. */
.chip { position: relative; display: inline-flex; }
.chip input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; margin: 0; cursor: pointer;
}
.chip span {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 36px; padding: 6px 12px;
  background: var(--chip-bg); color: var(--ink);
  border: 1px solid transparent; border-radius: 8px;
  font-size: .85rem; font-weight: 500;
  pointer-events: none; user-select: none;
}
.chip input:checked + span {
  background: var(--brand-strong); color: var(--on-brand);
  font-weight: 600;
}
.chip input:checked + span::before { content: "\2713"; font-size: .8em; }
.chip:focus-within span { outline: 3px solid var(--brand); outline-offset: 2px; }
.chip:hover span { background: var(--chip-hover); }
.chip input:checked:hover + span { background: var(--brand-strong); filter: brightness(.94); }

/* Switches */
.switch { display: flex; align-items: center; gap: 10px; min-height: 40px; position: relative; cursor: pointer; font-size: .9rem; font-weight: 500; color: var(--ink); }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; inset: 0; margin: 0; cursor: pointer; }
.switch .track {
  flex-shrink: 0; width: 46px; height: 26px; border-radius: var(--radius-pill);
  background: var(--surface); border: 1.5px solid var(--pill-border);
  position: relative; pointer-events: none;
  transition: background-color .18s ease-out, border-color .18s ease-out;
}
.switch .track::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--pill-border);
}
.switch input:checked ~ .track { background: var(--brand-strong); border-color: var(--brand-strong); }
.switch input:checked ~ .track::after { left: 23px; background: var(--on-brand); }
.switch:focus-within .track { outline: 3px solid var(--brand); outline-offset: 2px; }

.select-row { display: grid; gap: 6px; font-size: .85rem; font-weight: 500; color: var(--ink-soft); }
select {
  font: inherit; font-weight: 500; color: var(--ink); background: var(--input-bg, var(--surface));
  border: 1px solid var(--border-card); border-radius: 12px;
  padding: 12px 14px; min-height: 48px; width: 100%; cursor: pointer;
}
select:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; border-color: transparent; }
.filter-card select { width: 100%; }

/* ---------- Stage (right column) ---------- */
.stage { min-width: 0; }
.stage-actions {
  background: var(--surface);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 16px; margin-bottom: 24px;
  display: grid; gap: 8px;
}
.btn {
  font-family: var(--font-head); font-weight: 700; cursor: pointer;
  border: 0; border-radius: var(--radius-pill);
  min-height: 48px; padding: 8px 24px; font-size: 1rem;
}
.btn-generate {
  background: var(--brand-grad); color: var(--on-brand);
  font-size: 1.3rem; min-height: 60px; width: 100%;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  box-shadow: 0 6px 18px rgba(204, 58, 20, .28);
}
.btn-generate svg { flex-shrink: 0; }
.btn-generate:hover { filter: brightness(1.06); }
.btn-generate[disabled] { cursor: wait; }
.actions-row { display: flex; gap: 8px; flex-wrap: wrap; }
.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: none; color: var(--brand-ink);
  border: 1.5px solid var(--pill-border); border-radius: var(--radius-pill);
  font-family: var(--font-body); font-weight: 700; font-size: .9rem;
  min-height: 44px; padding: 8px 16px; cursor: pointer;
}
.btn-ghost .ico { flex-shrink: 0; }
.btn-ghost:hover { border-color: var(--brand); background: var(--bg-tool); }
.pool-note {
  display: inline-flex; align-items: center; gap: 8px; margin: 0;
  font-size: .85rem; font-weight: 600; color: var(--ink-soft);
  background: var(--chip-bg); border: 1px solid var(--border-card);
  padding: 6px 14px 6px 12px; border-radius: var(--radius-pill);
}
.pool-note::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%; flex: none;
  background: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent);
}
.pool-note b { color: var(--brand-ink); font-weight: 800; }
/* keep the plain-text variant inside the advanced modal footer */
.adv-foot .pool-note, .results-band .pool-note { display: inline-flex; }

@media (max-width: 1023px) {
  .stage-actions {
    position: sticky; bottom: 0; z-index: 50;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    border-radius: var(--radius-card) var(--radius-card) 0 0;
    margin-left: -16px; margin-right: -16px;
    border-left: 0; border-right: 0; border-bottom: 0;
    box-shadow: 0 -4px 16px rgba(20, 40, 60, .12);
    order: 2;
  }
  .stage { display: flex; flex-direction: column; }
  .results-region { order: 1; }
  .shiny-shelf { order: 3; }
}

/* ---------- Results ---------- */
.results-region { margin-bottom: 24px; }
.results-grid {
  display: grid; gap: 16px;
  grid-template-columns: 1fr;
}
@media (min-width: 600px) { .results-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .results-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.state-card {
  background: var(--surface); border: 1px solid var(--border-card);
  border-radius: var(--radius-card); box-shadow: var(--shadow-card);
  padding: 32px 24px; text-align: center; color: var(--ink-soft);
}
.state-card img { width: 200px; height: 163px; }
.state-card p { margin: 8px 0 0; font-weight: 700; }

.pcard {
  background: var(--surface);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  position: relative;
  cursor: pointer;
  display: flex; flex-direction: column;
}
.pcard.is-shiny { border: 2px solid var(--sun); }

.pcard-art {
  position: relative;
  background: radial-gradient(circle at 50% 45%,
    color-mix(in srgb, var(--tint, var(--brand)) 12%, var(--surface)) 0%,
    color-mix(in srgb, var(--tint, var(--brand)) 4%, var(--surface)) 100%);
  padding: 16px;
  display: flex; justify-content: center;
}
.pcard-art img { width: 180px; height: 180px; object-fit: contain; }
.dex-chip {
  position: absolute; top: 12px; left: 12px;
  background: var(--surface); color: var(--dex);
  border: 1px solid var(--border-card);
  font-size: .8rem; font-weight: 700; padding: 2px 10px;
  border-radius: var(--radius-pill);
}
.shiny-ribbon {
  position: absolute; top: 12px; right: 12px;
  background: var(--sun); color: var(--sun-ink);
  font-family: var(--font-head); font-weight: 700; font-size: .78rem;
  padding: 4px 12px; border-radius: var(--radius-pill);
}
/* Per-card "make shiny" toggle */
.shiny-toggle {
  position: absolute; bottom: 10px; right: 10px; z-index: 3;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  min-height: 30px; padding: 4px 11px; cursor: pointer;
  background: var(--surface); color: var(--ink-soft);
  border: 1.5px solid var(--border-card); border-radius: var(--radius-pill);
  font: inherit; font-size: .72rem; font-weight: 700;
}
.shiny-toggle .star { width: 13px; height: 13px; color: var(--dex); }
.shiny-toggle:hover { border-color: var(--sun); color: var(--brand-ink); }
.shiny-toggle[aria-pressed="true"] {
  background: var(--sun); color: var(--sun-ink); border-color: var(--sun);
}
.shiny-toggle[aria-pressed="true"] .star { color: var(--sun-ink); }

.pcard-body { padding: 12px 16px 8px; }
.pcard-body h3 {
  margin: 0; font-size: 1.3rem; font-weight: 700;
}
.pcard-sub { color: var(--dex); font-weight: 700; font-size: .85rem; margin: 0 0 8px; }
.type-pills { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 8px; }
.type-pill {
  display: inline-block; padding: 2px 12px; border-radius: var(--radius-pill);
  font-size: .82rem; font-weight: 700; letter-spacing: .02em;
  background: var(--tp-bg); color: var(--tp-tx);
}
.info-row { font-size: .85rem; color: var(--ink-soft); margin: 0 0 8px; }
.info-row strong { color: var(--ink); }
.hidden-mark { cursor: help; text-decoration: underline dotted; }

/* Card base stats: clean vertical list of horizontal bars */
.stat-rows { display: grid; gap: 5px; margin: 2px 0 2px; }
.srow { display: grid; grid-template-columns: 30px 1fr 28px; align-items: center; gap: 8px; }
.srow .slabel { font-size: .68rem; font-weight: 800; color: var(--ink-soft); letter-spacing: .03em; }
.srow .strack {
  height: 7px; border-radius: 999px; overflow: hidden;
  background: color-mix(in srgb, var(--border-card) 60%, transparent);
}
.srow .sfill { display: block; height: 100%; border-radius: 999px; width: var(--w, 0%); background: var(--c, var(--tier-2)); }
.srow .sval { font-size: .72rem; font-weight: 700; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.bst-line { font-size: .8rem; color: var(--ink-soft); margin: 6px 0 0; font-weight: 600; }
.bst-line strong { color: var(--ink); font-weight: 800; }

.pcard-foot {
  display: flex; gap: 8px; padding: 8px 16px 16px; margin-top: auto;
}
.pcard-foot .btn-ghost { flex: 1; min-height: 40px; font-size: .85rem; padding: 4px 8px; }
.pcard:focus-within { box-shadow: var(--shadow-hover); }

/* Confetti burst (JS adds particles with inline --dx/--dy/--cc) */
.burst { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.burst i {
  position: absolute; top: 40%; left: 50%;
  width: 7px; height: 7px; border-radius: 2px;
  background: var(--cc, var(--sun));
  opacity: 0;
}

/* ---------- Shiny shelf ---------- */
.shiny-shelf {
  background: var(--surface); border: 1px solid var(--border-card);
  border-radius: var(--radius-card); box-shadow: var(--shadow-card);
  padding: 16px 20px; margin-bottom: 24px;
}
.shiny-shelf h2 { margin: 0 0 8px; font-size: 1.1rem; font-weight: 700; }
.shiny-shelf ul {
  list-style: none; display: flex; gap: 8px; margin: 0; padding: 4px 0;
  overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--pill-border) transparent;
}
.shiny-shelf img { width: 56px; height: 56px; image-rendering: pixelated; }
.shiny-shelf .hint { color: var(--ink-soft); font-size: .85rem; margin: 8px 0 0; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* ---------- Content sections ---------- */
.content-band { padding: 40px 0 8px; }
.content { max-width: 62rem; }
.content section, .content-card {
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--radius-card); box-shadow: var(--shadow-card);
  padding: 24px; margin: 0 0 24px;
}
.content h2 { font-size: 1.6rem; font-weight: 700; margin: 0 0 12px; }
.content h3 { font-size: 1.15rem; font-weight: 700; margin: 24px 0 8px; }
.content p, .content li { color: var(--ink); }
.content ul, .content ol { padding-left: 24px; }
.content .lead { font-size: 1.05rem; }
.content section > :last-child { margin-bottom: 0; }

.table-scroll {
  overflow-x: auto; margin: 20px 0 8px;
  border: 1px solid var(--border-card); border-radius: var(--radius-card);
  box-shadow: var(--shadow-card); background: var(--surface);
}
table { border-collapse: collapse; width: 100%; font-size: .92rem; }
caption { text-align: left; font-weight: 700; font-family: var(--font-head); margin-bottom: 8px; }
th, td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--border-soft); }
thead th {
  background: var(--chip-bg); font-family: var(--font-head); font-weight: 700;
  color: var(--ink); font-size: .82rem; letter-spacing: .02em; text-transform: uppercase;
  border-bottom: 2px solid var(--border-card); white-space: nowrap;
}
tbody td:first-child { font-weight: 700; color: var(--brand-ink); font-family: var(--font-head); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background-color .15s ease-out; }
tbody tr:hover { background: color-mix(in srgb, var(--brand) 6%, transparent); }
@media (max-width: 719px) {
  .table-scroll { max-height: 440px; overflow-y: auto; }
  thead th { position: sticky; top: 0; z-index: 2; }
}

/* FAQ accordions */
.faq details {
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--radius-card); box-shadow: var(--shadow-card);
  margin-bottom: 8px;
}
.faq summary {
  font-family: var(--font-head); font-weight: 600; font-size: 1rem;
  cursor: pointer; padding: 14px 44px 14px 20px; list-style: none;
  position: relative; min-height: 48px; display: flex; align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 20px; top: 50%;
  width: 14px; height: 14px; margin-top: -7px;
  background: var(--brand-ink);
  clip-path: polygon(50% 70%, 6% 30%, 16% 18%, 50% 50%, 84% 18%, 94% 30%);
}
.faq details[open] summary::after { clip-path: polygon(50% 30%, 94% 70%, 84% 82%, 50% 50%, 16% 82%, 6% 70%); }
.faq details > div { padding: 0 20px 16px; }
.faq details > div p { margin-top: 0; }

/* ---------- Modal ---------- */
.poke-modal {
  border: 0; padding: 0; margin: auto;
  width: min(920px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  background: var(--surface); color: var(--ink);
  border-radius: var(--radius-card);
  box-shadow: 0 24px 64px rgba(10, 20, 30, .35);
}
.poke-modal::backdrop { background: rgba(14, 20, 36, .55); }
.modal-close {
  position: absolute; top: 12px; right: 12px; z-index: 5;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--surface); color: var(--ink);
  border: 1.5px solid var(--pill-border); cursor: pointer;
  font-size: 1.1rem; font-weight: 700; line-height: 1;
}
.modal-close:hover { border-color: var(--brand); }
.modal-grid { display: grid; grid-template-columns: 1fr; }
@media (min-width: 720px) { .modal-grid { grid-template-columns: 340px minmax(0, 1fr); } }

.modal-art {
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--tint, var(--brand)) 22%, var(--surface)) 0%,
    color-mix(in srgb, var(--tint, var(--brand)) 6%, var(--surface)) 100%);
  padding: 40px 24px 16px; text-align: center;
}
.modal-art img { width: 240px; height: 240px; object-fit: contain; }
.modal-art img.pixel { image-rendering: pixelated; }
.modal-toggles { display: flex; gap: 16px; justify-content: center; padding: 8px 0 16px; flex-wrap: wrap; }
.modal-toggles .switch { min-height: 36px; font-size: .85rem; }

.modal-info { padding: 24px; min-width: 0; }
.modal-info h2 { margin: 0; font-size: 1.7rem; font-weight: 700; padding-right: 48px; }
.modal-dex { color: var(--dex); font-weight: 700; margin: 0 0 8px; }
.flavor-row { font-size: .9rem; color: var(--ink-soft); margin: 8px 0; }
.flavor-row strong { color: var(--ink); }
.modal-info h3 {
  font-family: var(--font-head); font-size: 1rem; font-weight: 700; margin: 18px 0 8px;
  display: flex; align-items: center; gap: 8px;
}
.modal-info h3::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%;
  background: var(--brand); flex-shrink: 0;
}
.ability-list { list-style: none; margin: 0; padding: 0; font-size: .9rem; }
.ability-list li { margin: 0 0 4px; }
.ability-list .abname { font-weight: 700; }

/* Base-stats header with BST badge */
.stat-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 18px 0 10px; }
.stat-head h3 { margin: 0; }
.bst-badge {
  display: inline-flex; align-items: center; font-size: .78rem; font-weight: 800; color: var(--ink);
  background: var(--chip-bg); border: 1px solid var(--border-card); padding: 3px 12px; border-radius: var(--radius-pill);
}
/* Base stats: vertical list of horizontal bars, each with a stat icon */
.modal-stat-strip { display: grid; gap: 9px; }
.mstat { display: grid; grid-template-columns: 94px 1fr 34px; align-items: center; gap: 10px; }
.mstat-lbl { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; font-weight: 600; color: var(--ink-soft); }
.mstat-lbl svg { width: 15px; height: 15px; flex: none; color: var(--dex); }
.mstat-track { height: 9px; border-radius: 999px; overflow: hidden;
  background: color-mix(in srgb, var(--border-card) 60%, transparent); }
.mstat-bar { display: block; height: 100%; width: var(--h, 0%); border-radius: 999px; background: var(--bc, var(--tier-2)); }
.mstat-val { font-size: .85rem; font-weight: 700; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }

/* Pokédex data boxes */
.meta-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (min-width: 480px) { .meta-grid { grid-template-columns: repeat(3, 1fr); } }
.meta-box { background: var(--chip-bg); border: 1px solid var(--border-card); border-radius: 12px; padding: 9px 10px; text-align: center; }
.meta-box .mlabel { display: block; font-size: .66rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--ink-soft); }
.meta-box .mvalue { display: block; font-size: .95rem; font-weight: 800; color: var(--ink); margin-top: 2px; }

.evo-strip {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  margin: 4px 0 0; padding: 0; list-style: none;
}
.evo-strip li { display: flex; align-items: center; gap: 4px; }
.evo-strip .arrow { color: var(--ink-soft); font-weight: 700; }
.evo-btn {
  display: grid; justify-items: center; gap: 0;
  background: none; border: 1.5px solid transparent; border-radius: 10px;
  padding: 4px 8px; cursor: pointer; color: var(--ink-soft);
  font-size: .72rem; font-weight: 700; font-family: var(--font-body);
}
.evo-btn img { width: 48px; height: 48px; image-rendering: pixelated; }
.evo-btn:hover { border-color: var(--brand); }
.evo-btn[aria-current="true"] { border-color: var(--brand-strong); color: var(--ink); }

.modal-actions { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }

/* ---------- Footer (always dark, like the reference) ---------- */
.site-footer {
  margin-top: 48px; padding: 44px 0 40px;
  background: #17181B; border-top: 1px solid #26272B;
  font-size: .95rem; color: #9AA0AC;
}
.footer-top {
  display: grid; gap: 28px 48px; grid-template-columns: 1fr;
  padding-bottom: 28px; margin-bottom: 22px;
  border-bottom: 1px solid #26272B;
}
@media (min-width: 720px) { .footer-top { grid-template-columns: 1.7fr 1fr 1.15fr; } }
.footer-col-title { font-family: var(--font-head); font-size: .95rem; font-weight: 700; color: #fff; margin: 0 0 12px; }
.footer-brand .brand { color: #fff; margin-bottom: 10px; }
.footer-brand .brand img { width: 40px; height: 40px; }
.footer-tag { margin: 0 0 16px; max-width: 30rem; color: #9AA0AC; }
.social { list-style: none; display: flex; gap: 10px; margin: 0; padding: 0; flex-wrap: wrap; }
.social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 12px;
  background: #24262B; color: #C6CAD2;
  border: 1px solid #34363C;
}
.social a:hover { color: #fff; background: var(--brand-strong); border-color: var(--brand-strong); }
.social svg { display: block; }
.footer-nav ul {
  list-style: none; display: grid; grid-template-columns: 1fr;
  gap: 10px; margin: 0; padding: 0;
}
.footer-nav a { color: #B7BCC6; text-decoration: none; }
.footer-nav a:hover { color: #fff; text-decoration: underline; }
.footer-legal p { margin: 0 0 8px; }
.footer-legal p:last-child { margin-bottom: 0; }
.footer-legal a { color: #FF8156; }
.footer-legal .legal { max-width: 62rem; font-size: .85rem; color: #7C828E; }

/* ---------- Static pages ---------- */
.page { padding-block: 32px; }
.page h1 { font-size: clamp(1.7rem, 4vw, 2.4rem); font-weight: 700; margin: 0 0 16px; }
.page .content { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 24px; }
.page .content h2 { margin: 32px 0 8px; }
.page .content > h2:first-child, .page .content > .lead:first-child { margin-top: 0; }
.breadcrumb { font-size: .9rem; color: var(--ink-soft); margin: 0 0 16px; }
.breadcrumb ol { list-style: none; display: flex; gap: 8px; margin: 0; padding: 0; flex-wrap: wrap; }
.breadcrumb li + li::before { content: "\203A"; margin-right: 8px; }
.breadcrumb a { color: var(--brand-ink); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }

/* ---------- Sub-tool pages (region / spoke generators, no hero) ---------- */
.subpage { padding-block: 28px 48px; }
.subpage-title {
  font-family: var(--font-head); font-weight: 700;
  font-size: clamp(1.9rem, 4.6vw, 2.9rem); line-height: 1.1;
  text-align: center; margin: 6px 0 12px;
}
.subpage-intro {
  max-width: 46rem; margin: 0 auto 28px; text-align: center;
  color: var(--ink-soft); font-size: 1.05rem; line-height: 1.6;
}
.region-tool {
  max-width: 640px; margin: 0 auto 28px;
  box-shadow: 0 6px 20px rgba(24, 24, 27, .08);
}
.region-results { margin-bottom: 8px; scroll-margin-top: 84px; }

/* ---------- Spoke tools (starter / legendary / shiny) ---------- */
/* Legendary tier checkboxes */
.tier-fld { border: 0; padding: 0; margin: 14px 0 0; min-inline-size: 0; }
.tier-fld .fld-label { padding: 0; }
.tier-checks { margin-top: 6px; gap: 8px 16px; }
.tier-checks .mini-check { font-size: .84rem; }

/* Legendary "summon" single-result reveal */
@media (prefers-reduced-motion: no-preference) {
  .summon-results .results-grid .pcard:only-child { animation: summon .55s cubic-bezier(.2, .8, .2, 1) backwards; }
  @keyframes summon {
    0% { opacity: 0; transform: scale(.82); filter: saturate(.4) brightness(1.4); }
    60% { opacity: 1; filter: saturate(1.2) brightness(1.1); }
    100% { opacity: 1; transform: scale(1); filter: none; }
  }
}
/* Keep the single summon card the exact same size as cards on every other page;
   only the reveal animation + glow differ. */
.summon-results .results-grid .pcard:only-child { box-shadow: 0 12px 40px rgba(124, 58, 237, .22); }

/* Shiny-hunt simulator */
.hunt {
  max-width: 62rem; margin: 8px auto 0;
  background: linear-gradient(160deg, #1e1b4b 0%, #312e81 55%, #4c1d95 100%);
  color: #fff; border-radius: var(--radius-card); padding: 24px 22px 26px;
  box-shadow: 0 16px 44px rgba(30, 27, 75, .32); position: relative; overflow: hidden;
}
.hunt::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"><path fill="%23FFFFFF" fill-opacity=".16" d="M40 20l2.4 7.2 7.2 2.4-7.2 2.4L40 46l-2.4-9-7.2-2.4 7.2-2.4zM150 118l1.8 5.4 5.4 1.8-5.4 1.8-1.8 5.4-1.8-5.4-5.4-1.8 5.4-1.8zM120 40l1.4 4.2 4.2 1.4-4.2 1.4-1.4 4.2-1.4-4.2-4.2-1.4 4.2-1.4z"/></svg>');
}
.hunt > * { position: relative; }
.hunt h2 { margin: 0 0 4px; color: #fff; }
.hunt-sub { color: rgba(255, 255, 255, .82); margin: 0 0 16px; font-size: .95rem; }
.hunt-controls { display: grid; gap: 16px; align-items: end; }
@media (min-width: 640px) { .hunt-controls { grid-template-columns: minmax(0, 1fr) auto; } }
.hunt .fld-label { color: rgba(255, 255, 255, .8); }
.hunt select {
  width: 100%; min-height: 46px; border-radius: 12px; padding: 8px 14px;
  background: rgba(255, 255, 255, .12); color: #fff; border: 1px solid rgba(255, 255, 255, .28);
  font: inherit; font-weight: 600;
}
.hunt select option { color: #18181B; }
.hunt-stats { display: flex; gap: 20px; flex-wrap: wrap; }
.hunt-stats > div { display: grid; }
.hunt-num { font-family: var(--font-head); font-size: 1.5rem; font-weight: 700; color: #FDE68A; font-variant-numeric: tabular-nums; }
.hunt-lbl { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: rgba(255, 255, 255, .7); }
.hunt-bar-track { height: 10px; border-radius: 999px; background: rgba(255, 255, 255, .16); overflow: hidden; margin: 16px 0 18px; }
.hunt-bar { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, #FACC15, #F97316); transition: width .2s ease-out; }
.hunt-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.hunt-actions .btn-generate { width: auto; min-height: 46px; padding: 8px 26px; }
.hunt-actions .btn-ghost { min-height: 46px; background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .3); }
.hunt-actions .btn-ghost:hover { background: rgba(255, 255, 255, .2); border-color: #fff; }
.hunt-result { text-align: center; margin-top: 20px; }
.hunt-result img { width: 150px; height: 150px; object-fit: contain; image-rendering: auto; }
.hunt-result p { color: #fff; margin: 4px 0 0; }
.hunt-result .hunt-star { font-size: 1.6rem; color: #FDE68A; }
@media (prefers-reduced-motion: no-preference) {
  .hunt-result.pop { animation: hunt-pop .5s cubic-bezier(.34, 1.56, .64, 1); }
  @keyframes hunt-pop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
}

/* Names-only display mode */
.results-grid.names-list {
  display: flex; flex-wrap: wrap; gap: 10px;
}
.name-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--border-card);
  border-radius: var(--radius-pill); padding: 8px 16px;
  font-family: var(--font-head); font-weight: 600; font-size: .95rem;
  color: var(--ink); cursor: pointer;
}
.name-chip:hover { border-color: var(--brand); color: var(--brand-ink); }
.name-chip .name-dex { color: var(--dex); font-weight: 500; font-size: .82rem; }
.name-chip.is-shiny { border-color: var(--sun); }
.name-chip .name-star { color: var(--sun); }
.region-results .results-head h2 { font-size: 1.4rem; }
.subpage .content { max-width: 62rem; margin: 36px auto 0; }
.subpage .content section {
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--radius-card); box-shadow: var(--shadow-card);
  padding: 24px; margin: 0 0 20px;
}
.subpage .content section > :last-child { margin-bottom: 0; }
.region-facts { display: grid; gap: 12px; grid-template-columns: 1fr; margin: 16px 0 0; }
@media (min-width: 620px) { .region-facts { grid-template-columns: repeat(3, 1fr); } }
.region-facts li {
  list-style: none; background: var(--chip-bg); border: 1px solid var(--border-card);
  border-radius: 12px; padding: 14px 16px;
}
.region-facts strong { display: block; font-family: var(--font-head); color: var(--ink); margin-bottom: 2px; }
.region-facts span { font-size: .9rem; color: var(--ink-soft); }

/* Outbound authority reference links */
.ext-links { list-style: none; padding-left: 0; margin: 12px 0 0; display: grid; gap: 8px; }
.ext-links li { padding-left: 0; }
.ext-links a { font-weight: 700; }
.ext-links a::after {
  content: "↗"; margin-left: 5px; font-size: .82em; color: var(--ink-soft);
  text-decoration: none; display: inline-block;
}

.author-card {
  display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap;
  background: var(--chip-bg); border: 1px solid var(--border-soft);
  border-radius: var(--radius-card); padding: 20px; margin: 16px 0 0;
}
.author-card img { width: 112px; height: 112px; border-radius: 50%; flex-shrink: 0; }
.author-card > div { flex: 1; min-width: 240px; }
.author-card p:first-child { margin-top: 0; }

.err-page { text-align: center; padding: 48px 16px 64px; }
.err-page img { width: 260px; height: 260px; }
.err-page .btn-generate { width: auto; display: inline-flex; text-decoration: none; padding: 12px 32px; }

/* ---------- Motion (all gated) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .site-nav a, .btn, .btn-ghost, .btn-mini, .chip span, .switch .track,
  .switch .track::after, .pcard, .modal-close, .evo-btn {
    transition: background-color .18s ease-out, border-color .18s ease-out,
      color .18s ease-out, box-shadow .2s ease-out, transform .18s ease-out,
      left .18s ease-out;
  }
  .pcard { transition: transform .18s ease-out, box-shadow .2s ease-out, border-color .18s ease-out; }
  .pcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); border-color: var(--brand); }
  .pcard:hover .pcard-art img { transform: scale(1.05); }
  .pcard-art img { transition: transform .2s ease-out; }
  /* Shiny-style glossy sweep + sparkle across the art on hover */
  .pcard-art .shine {
    position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0;
    background:
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="140" height="140"><path fill="%23FFFFFF" d="M34 18l2.4 7.2 7.2 2.4-7.2 2.4L34 44l-2.4-9-7.2-2.4 7.2-2.4zM104 78l1.7 5 5 1.7-5 1.7-1.7 5-1.7-5-5-1.7 5-1.7zM96 26l1.3 4 4 1.3-4 1.3-1.3 4-1.3-4-4-1.3 4-1.3z"/></svg>') no-repeat,
      linear-gradient(115deg, transparent 38%, rgba(255,255,255,.7) 49%, rgba(255,255,255,.95) 50%, rgba(255,255,255,.7) 51%, transparent 62%);
    background-size: 100% 100%, 250% 100%;
    background-position: 0 0, 160% 0;
  }
  .pcard:hover .pcard-art .shine { animation: card-shine .7s ease-out; }
  @keyframes card-shine {
    0% { opacity: 0; background-position: 0 0, 160% 0; }
    20% { opacity: 1; }
    100% { opacity: 0; background-position: 0 0, -60% 0; }
  }
  .btn:active, .btn-ghost:active, .btn-mini:active { transform: scale(.97); }
  .chip input:checked + span { animation: chip-pop .25s ease-out; }
  @keyframes chip-pop {
    0% { transform: scale(1); } 50% { transform: scale(1.08); } 100% { transform: scale(1); }
  }

  .pcard.enter { animation: card-up .4s ease-out backwards; animation-delay: calc(var(--i, 0) * 60ms); }
  @keyframes card-up {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .btn-generate.rolling .gen-ico { animation: die-spin .6s linear infinite; transform-origin: 50% 50%; }
  @keyframes die-spin { to { transform: rotate(360deg); } }

  .shiny-ribbon { animation: ribbon-in .45s cubic-bezier(.34, 1.56, .64, 1); }
  @keyframes ribbon-in {
    from { transform: scale(.5) rotate(-8deg); opacity: 0; }
    to { transform: scale(1) rotate(0); opacity: 1; }
  }
  .pcard.is-shiny .pcard-art::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120"><path fill="%23FFC94D" d="M30 12l2.2 6.6 6.6 2.2-6.6 2.2-2.2 6.6-2.2-6.6-6.6-2.2 6.6-2.2zM88 66l1.8 5.4 5.4 1.8-5.4 1.8-1.8 5.4-1.8-5.4-5.4-1.8 5.4-1.8z"/></svg>');
    animation: twinkle 1.6s ease-in-out infinite alternate;
  }
  @keyframes twinkle { from { opacity: .25; } to { opacity: .8; } }

  .burst i { animation: burst .8s ease-out forwards; animation-delay: var(--dd, 0s); }
  @keyframes burst {
    0% { opacity: 1; transform: translate(0, 0) rotate(0); }
    100% { opacity: 0; transform: translate(var(--dx, 0), var(--dy, -60px)) rotate(var(--rr, 180deg)); }
  }

  .poke-modal[open] .modal-art img { animation: spring-pop .4s cubic-bezier(.34, 1.56, .64, 1); }
  @keyframes spring-pop {
    from { transform: scale(.8); opacity: .4; }
    to { transform: scale(1); opacity: 1; }
  }
  .mstat-bar { transition: width .5s cubic-bezier(.34, 1.4, .64, 1); }
  .srow .sfill { transition: width .5s cubic-bezier(.34, 1.4, .64, 1); }
}