/* ==========================================================================
   ROM Hack Guides — global stylesheet  (design system v2, "Field Guide")
   See DESIGN.md at the repo root before changing anything here.

   Tokens first, then components. Light is the default palette; dark is
   defined twice on purpose — once for `prefers-color-scheme` and once for
   an explicit [data-theme="dark"].

   ONE HARD RULE: never space a *flex* row or column with `gap`.
   WebKit only learned flex gap in Safari 14.1. Flex layouts here space
   themselves with margins on the children. `gap` on a *grid* is fine.

   Type: Instrument Serif for names and titles (a Pokémon, a route, a boss is
   a proper noun and gets the serif), Work Sans for UI and prose, Space Mono
   for every number so rates, levels and caps line up in columns.
   ========================================================================== */

:root{
  /* surfaces, light — warm paper */
  --bg:#F6F1E7;
  --surface:#FFFDF8;
  --surface2:#EFE8DA;
  --surface3:#E3DACA;
  --glass:rgba(246,241,231,.88);

  /* ink */
  --ink:#1E1B16;
  --muted:#6B6257;
  --faint:#8A8074;

  /* lines */
  --line:#E3DACA;
  --line-strong:#C9BFA8;

  /* accent — one green, used for "reachable / cap / progress" */
  --accent:#2D8F55;
  --accent-2:#4FB878;
  --accent-ink:#FFFFFF;
  --accent-soft:#DDEFE3;
  --accent-line:#A9D4B8;
  --accent-text:#216B40;

  /* semantic */
  --ok:#216B40;--ok-soft:#DDEFE3;
  --warn:#9A6A0C;--warn-soft:#F6E7C3;
  --rare:#7A3FB5;--rare-soft:#EDE2F8;

  /* elevation — paper is flat; the hard offset is the one "lift" in the system */
  --shadow:0 1px 2px rgba(30,27,22,.06),0 6px 18px rgba(30,27,22,.06);
  --sh-1:0 1px 2px rgba(30,27,22,.06);
  --sh-2:0 2px 4px rgba(30,27,22,.05),0 10px 26px rgba(30,27,22,.08);
  --sh-3:0 18px 50px rgba(30,27,22,.16);
  --sh-hard:4px 4px 0 var(--ink);
  --ring:0 0 0 3px rgba(45,143,85,.3);

  /* geometry */
  --r-sm:4px;--r-md:6px;--r-lg:8px;--r-xl:12px;
  --head-h:58px;
  --rail-w:220px;--side-w:300px;

  /* type */
  --font-head:"Instrument Serif",Georgia,serif;
  --font-body:"Work Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"Space Mono",ui-monospace,Menlo,monospace;

  color-scheme:light dark;
}

@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0E0F0E;--surface:#161816;--surface2:#1F211F;--surface3:#2A2D2A;--glass:rgba(14,15,14,.86);
  --ink:#F1EFE8;--muted:#9A9A90;--faint:#7A7A70;
  --line:#2A2D2A;--line-strong:#3A3D39;
  --accent:#4FB878;--accent-2:#7ED29B;--accent-ink:#0E0F0E;--accent-soft:#16301F;--accent-line:#24503A;--accent-text:#7ED29B;
  --ok:#7ED29B;--ok-soft:#16301F;--warn:#F1C25B;--warn-soft:#33260A;--rare:#C4A4F4;--rare-soft:#2A1E44;
  --shadow:0 1px 2px rgba(0,0,0,.5),0 8px 24px rgba(0,0,0,.4);--sh-1:0 1px 2px rgba(0,0,0,.5);
  --sh-2:0 2px 4px rgba(0,0,0,.4),0 12px 32px rgba(0,0,0,.45);--sh-3:0 24px 60px rgba(0,0,0,.55);
  --sh-hard:4px 4px 0 var(--accent);--ring:0 0 0 3px rgba(79,184,120,.35);
}}
:root[data-theme="dark"]{
  --bg:#0E0F0E;--surface:#161816;--surface2:#1F211F;--surface3:#2A2D2A;--glass:rgba(14,15,14,.86);
  --ink:#F1EFE8;--muted:#9A9A90;--faint:#7A7A70;
  --line:#2A2D2A;--line-strong:#3A3D39;
  --accent:#4FB878;--accent-2:#7ED29B;--accent-ink:#0E0F0E;--accent-soft:#16301F;--accent-line:#24503A;--accent-text:#7ED29B;
  --ok:#7ED29B;--ok-soft:#16301F;--warn:#F1C25B;--warn-soft:#33260A;--rare:#C4A4F4;--rare-soft:#2A1E44;
  --shadow:0 1px 2px rgba(0,0,0,.5),0 8px 24px rgba(0,0,0,.4);--sh-1:0 1px 2px rgba(0,0,0,.5);
  --sh-2:0 2px 4px rgba(0,0,0,.4),0 12px 32px rgba(0,0,0,.45);--sh-3:0 24px 60px rgba(0,0,0,.55);
  --sh-hard:4px 4px 0 var(--accent);--ring:0 0 0 3px rgba(79,184,120,.35);
}

/* ---------------------------------------------------------------- base */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  background:var(--bg);color:var(--ink);
  font-family:var(--font-body);font-size:15.5px;line-height:1.5;
  margin:0;min-height:100vh;display:flex;flex-direction:column;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{font-family:var(--font-head);font-weight:400;text-wrap:balance;margin:0;line-height:1.05;letter-spacing:-.01em}
h1 em,h2 em{font-style:italic;color:var(--muted)}
a{color:var(--accent-text);text-underline-offset:3px}
a:hover{color:var(--accent)}
img{max-width:100%}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
::selection{background:var(--accent-soft);color:var(--ink)}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.kicker{display:block;font-family:var(--font-mono);font-size:11px;font-weight:400;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.kicker.accent{color:var(--accent-text)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 24px}
main{flex:1}
hr{border:0;border-top:1px solid var(--line);margin:32px 0}
.dim{color:var(--muted)}
/* a serif heading with a rule under it — the section divider of the system */
.ruled{display:flex;align-items:baseline;justify-content:space-between;border-bottom:1.5px solid var(--ink);padding-bottom:10px}
.ruled h2{font-size:30px}
.ruled>*+*{margin-left:16px}

/* ---------------------------------------------------------------- header */
.sitehead{
  position:sticky;top:0;z-index:30;
  background:var(--glass);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.sitehead .wrap{display:flex;align-items:center;justify-content:space-between;height:var(--head-h)}
.sitehead .lead-group{display:flex;align-items:center;min-width:0;flex:1}
.brand{
  display:flex;align-items:center;flex:none;
  font-family:var(--font-head);font-size:24px;letter-spacing:-.01em;
  color:var(--ink);text-decoration:none;
}
.brand:hover{color:var(--ink)}
.brand .ball{width:14px;height:14px;border-radius:50%;background:var(--accent);flex:none;margin-right:10px}
/* One search everywhere. It understands routes, Pokémon, moves, trainers and
   ROM hacks (see /search/index.json). The home hero repeats it larger, so the
   header copy is hidden there (body.home). */
.gsearch{position:relative;margin-left:22px;width:min(420px,100%);flex:1}
body.home .sitehead .gsearch{display:none}
.gsearch input{
  width:100%;font:inherit;font-size:13.5px;color:var(--ink);background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-md);padding:8px 44px 8px 12px;height:36px;
}
/* a placeholder longer than the box ends in an ellipsis, never a cut letter */
.gsearch input,.hero .search input{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}
.gsearch input::placeholder,.hero .search input::placeholder{text-overflow:ellipsis}
.gsearch input::placeholder{color:var(--faint)}
.gsearch input:focus{outline:none;border-color:var(--ink);box-shadow:none}
/* the magnifier is the submit button: boxed, on the right, so it reads as
   "press this to search" for people who never hit Enter. No keyboard hint. */
.gsearch .go{position:absolute;right:4px;top:4px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:4px;background:var(--surface2);color:var(--muted);cursor:pointer;padding:0}
.gsearch .go:hover{border-color:var(--ink);color:var(--ink)}
.gsearch .go svg{width:15px;height:15px}
.nav{display:flex;align-items:center;flex:none;margin-left:16px}
.nav a{color:var(--muted);text-decoration:none;font-weight:500;font-size:14px;padding:8px 10px;border-radius:var(--r-md);margin-left:2px}
.nav a:hover{color:var(--ink)}
.nav a[aria-current]{color:var(--ink)}
.nav a.nav-cta{color:var(--ink);font-weight:600}
.nav a.nav-cta:hover{color:var(--accent-text)}
@media(max-width:1040px){.nav .nav-long{display:none}}
@media(max-width:700px){
  .gsearch{display:none}
  .sitehead .gsearch-toggle{display:inline-flex}
  /* The phone menu: the same five items and the ask, in a panel under the
     hamburger. Nothing is dropped at a narrow width any more — a nav that hid
     three of its own items was a different menu on every phone. With no
     JavaScript the panel is simply there, open, and the button never appears
     (build.py ships the nav visible and the button `hidden`; NAVMENU_JS swaps
     them round). Full labels here, whatever the 1040px rule says. */
  .sitehead .navtoggle{display:inline-flex}
  .nav .nav-long{display:inline}
  .nav{
    position:absolute;right:12px;top:calc(var(--head-h) - 4px);z-index:41;
    flex-direction:column;align-items:stretch;min-width:212px;margin:0;
    background:var(--surface);border:1px solid var(--line-strong);
    border-radius:var(--r-lg);box-shadow:var(--sh-2);padding:6px;
  }
  .nav a{margin:0;padding:10px 12px;font-size:15px}
  .nav a+a{border-top:1px solid var(--line)}
  .nav a[aria-current]{background:var(--surface2)}
  /* opened by the toggle: a full-width bar under the header, not a sliver
     squeezed between the brand and the nav */
  .sitehead .gsearch{position:absolute;left:12px;right:12px;top:calc(var(--head-h) - 6px);margin:0;width:auto;z-index:40}
  .sitehead .gsearch input{height:44px;font-size:16px;padding:10px 46px 10px 14px;box-shadow:var(--sh-hard,0 2px 0 var(--ink))}
  .sitehead .gsearch .go{top:8px;right:8px}
  .sitehead .gsearch .search-results{left:0;right:0;width:auto;max-height:60vh;overflow:auto}
}
@media(max-width:560px){.brand{font-size:20px}}
.gsearch-toggle{display:none;align-items:center;justify-content:center;width:36px;height:36px;border:0;background:none;color:var(--muted);cursor:pointer;margin-left:auto}
.gsearch-toggle svg{width:18px;height:18px}
/* the hamburger: only ever on a phone, and only once the script has something
   for it to open (build.py ships it `hidden`, NAVMENU_JS reveals it) */
.navtoggle{display:none;align-items:center;justify-content:center;width:36px;height:36px;border:0;background:none;color:var(--muted);cursor:pointer;margin-left:4px;padding:0}
.navtoggle svg{width:20px;height:20px}
.navtoggle:hover{color:var(--ink)}
#navtoggle[hidden]{display:none}
#navmenu[hidden]{display:none}
/* the script hides the nav at every width; above the phone breakpoint it is the
   bar again, open or closed */
@media(min-width:701px){#navmenu[hidden]{display:flex}}
/* results dropdown, shared by the header search and the hero search */
.search-results{
  position:absolute;left:0;right:0;top:calc(100% + 6px);
  background:var(--surface);border:1px solid var(--ink);border-radius:var(--r-md);
  box-shadow:var(--sh-3);z-index:40;overflow:hidden;max-height:min(60vh,480px);overflow-y:auto;
}
.search-results a{display:flex;align-items:center;padding:10px 14px;color:var(--ink);text-decoration:none;border-top:1px solid var(--line);font-size:14px}
.search-results a:first-child{border-top:0}
.search-results a:hover,.search-results a.sel{background:var(--accent-soft)}
.search-results .k{font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);min-width:64px;margin-right:12px;flex:none}
.search-results b{font-weight:600}
.search-results small{color:var(--muted);display:block;font-size:12.5px}
.search-results .none{padding:12px 14px;color:var(--muted);font-size:14px}

/* ---------------------------------------------------------------- footer */
.sitefoot{border-top:1px solid var(--line);margin-top:72px;padding:40px 0 44px;font-size:13.5px;color:var(--muted);line-height:1.6}
.sitefoot .cols{display:grid;grid-template-columns:1fr;gap:26px}
@media(min-width:720px){.sitefoot .cols{grid-template-columns:minmax(0,2.2fr) minmax(0,1fr) minmax(0,1.2fr);gap:40px}}
.sitefoot h4{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin-bottom:10px}
.sitefoot p{margin:0;max-width:52ch}
.sitefoot ul{list-style:none;margin:0;padding:0}
.sitefoot li+li{margin-top:7px}
.sitefoot a{color:var(--muted);text-decoration:underline}
.sitefoot a:hover{color:var(--ink)}
.sitefoot .legal{margin-top:32px;padding-top:18px;border-top:1px solid var(--line);font-size:12.5px;color:var(--faint);max-width:100ch}

/* ---------------------------------------------------------------- hero (home) */
.hero{padding:64px 0 40px}
@media(max-width:640px){.hero{padding:32px 0 24px}}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:40px;align-items:end}
@media(min-width:1000px){.hero .wrap{grid-template-columns:minmax(0,1fr) 320px;gap:60px}}
/* the counted facts line: body font, not mono — a sentence, not a readout */
.herofacts{margin:0;font-size:14px;font-weight:500;color:var(--accent-text);letter-spacing:.01em}
.herofacts span{white-space:nowrap}
.hero h1{font-size:clamp(38px,5.4vw,64px);line-height:1;letter-spacing:-.02em;max-width:16ch;margin-top:14px}
.hero .search{position:relative;max-width:720px;margin-top:30px}
.hero .search input{
  width:100%;font:inherit;font-size:clamp(15px,1.4vw,18px);color:var(--ink);
  background:var(--surface);border:1.5px solid var(--ink);border-radius:var(--r-md);
  padding:0 70px 0 20px;height:60px;box-shadow:var(--sh-hard);
}
.hero .search input::placeholder{color:var(--faint)}
.hero .search input:focus{outline:none;box-shadow:var(--sh-hard),var(--ring)}
.hero .search .go{position:absolute;right:8px;top:8px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border:1.5px solid var(--ink);border-radius:4px;background:var(--ink);color:var(--bg);cursor:pointer;padding:0}
.hero .search .go:hover{background:var(--accent);border-color:var(--accent)}
.hero .search .go svg{width:20px;height:20px}
.hero .try{display:flex;flex-wrap:wrap;margin-top:14px;font-size:13.5px;color:var(--muted)}
.hero .try>*{margin:0 10px 6px 0}
.hero .try a{color:var(--ink)}
/* "continue where you left off" — filled by JS from localStorage; hidden otherwise */
.resume{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 18px}
.resume[hidden]{display:none}
.resume .row{display:flex;justify-content:space-between;align-items:center;margin-top:8px}
.resume .row>*+*{margin-left:12px}
.resume .name{font-family:var(--font-head);font-size:24px;line-height:1.1}
.resume .where{font-size:13px;color:var(--muted);margin-top:2px}
.resume .next{margin-top:12px;padding-top:12px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.resume .next b{color:var(--ink);font-weight:600}
.hero .claim{font-size:14px;color:var(--muted);line-height:1.55;border-left:2px solid var(--accent);padding-left:16px;max-width:36ch}

/* ---------------------------------------------------------------- sections */
.section{margin-top:52px}
.section-head{display:flex;align-items:baseline;justify-content:space-between;border-bottom:1.5px solid var(--ink);padding-bottom:10px;margin-bottom:16px;flex-wrap:wrap}
.section-head h2{font-size:clamp(24px,2.6vw,30px)}
.section-head>*+*{margin-left:16px}
.section-head a{font-size:14px;font-weight:500;text-decoration:none;white-space:nowrap}
.section-head a:hover{text-decoration:underline}
/* filter pills (systems, generations, fight kinds…) */
.pills{display:flex;flex-wrap:wrap;font-size:13px}
.pills>*{margin:0 6px 6px 0}
.pills a,.pills span,.pills button{display:inline-block;font:inherit;font-size:13px;padding:4px 12px;border-radius:999px;border:1px solid var(--line);color:var(--ink);text-decoration:none;background:none;cursor:pointer}
.pills .on,.pills a[aria-current]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.pills .soon{color:var(--faint)}
.pills a:hover{border-color:var(--ink)}

/* ---------------------------------------------------------------- system cards (systems page) */
.systems{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media(min-width:760px){.systems{grid-template-columns:repeat(4,minmax(0,1fr))}}
.systems .sys{
  display:flex;flex-direction:column;align-items:center;text-align:center;position:relative;overflow:hidden;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:22px 18px 18px;color:var(--ink);text-decoration:none;
}
.systems .sys:hover{border-color:var(--ink)}
.systems .sys .art{display:flex;align-items:center;justify-content:center;height:48px;margin-bottom:16px}
.systems .sys .art img{max-width:min(158px,100%);width:auto;height:auto;display:block;filter:invert(1)}
.systems .sys .art .wordmark{display:inline-block;font-family:var(--font-head);font-size:24px;line-height:1.05;color:var(--ink)}
.systems .sys .art img.logo-gba{max-height:40px}
.systems .sys .art img.logo-nds{max-height:21px}
.systems .sys .art img.logo-3ds{max-height:20px}
.systems .sys .art img.logo-switch{max-height:37px}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .systems .sys .art img{filter:none}}
:root[data-theme="dark"] .systems .sys .art img{filter:none}
.systems .sys p{margin:6px 0 0;font-size:13.5px;color:var(--muted);flex:1}
.systems .sys .n{margin-top:12px;font-family:var(--font-mono);font-size:11.5px;color:var(--faint)}

/* ---------------------------------------------------------------- guide cards */
/* The shelf: every guide gets the same text-only card, in `order`. No guide is
   promoted over another (no flagship, no featured cards). */
.hacks{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
@media(min-width:640px){.hacks{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:980px){.hacks{grid-template-columns:repeat(4,minmax(0,1fr))}}
.hack{
  display:flex;flex-direction:column;position:relative;overflow:hidden;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
  color:var(--ink);text-decoration:none;padding:16px 18px;min-height:96px;
}
.hack:hover{border-color:var(--ink)}
/* row card: text only. Kicker, serif name, creator; three labelled counts on a
   hairline at the foot. justify-content keeps the foot aligned across a row. */
.hack.row{justify-content:space-between;padding:18px 20px 16px;min-height:150px}
.hack .body{min-width:0}
.hack.row .kicker{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.hack.row h3{margin-top:8px;font-size:24px;line-height:1.08;text-wrap:balance}
.hack.row .by{margin-top:6px;font-size:13px;color:var(--muted)}
.hack .stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:16px;padding-top:10px;border-top:1px solid var(--line)}
.hack .stats b{display:block;font-family:var(--font-mono);font-weight:400;font-size:15px;line-height:1.2;color:var(--ink)}
.hack .stats b.none{color:var(--faint)}
.hack .stats span{font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.hack h3{font-size:19px;line-height:1.1}
.hack .meta{display:flex;flex-wrap:wrap;align-items:center;font-family:var(--font-mono);font-size:11px;color:var(--faint);margin-top:4px}
.hack .meta>*{margin-right:8px}
.hack p{margin:6px 0 0;font-size:14px;color:var(--muted);line-height:1.5}
.hack .nums{display:flex;flex-wrap:wrap;font-family:var(--font-mono);font-size:12px;color:var(--faint);margin-top:8px}
.hack .nums>*{margin-right:14px}
.hack.more{border-style:dashed;align-items:center;justify-content:center;text-align:center;color:var(--muted);font-size:13.5px}
.hack.more small{display:block;font-size:12px;margin-top:2px}
.badge{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;padding:2px 8px;border-radius:3px;background:var(--accent-soft);color:var(--accent-text)}
.badge.sys{background:var(--surface2);color:var(--muted)}
.empty-state{padding:44px 28px;border:1px dashed var(--line-strong);border-radius:var(--r-lg);color:var(--muted);text-align:center;background:var(--surface)}
.grid-note{margin-top:14px;font-family:var(--font-mono);font-size:11px;color:var(--faint);letter-spacing:.04em}
.grid-note a{color:var(--ink)}

/* ---------------------------------------------------------------- the guide shell */
/* Every page inside a guide (the hub/app, level caps, gym leaders, moves…)
   shares this: a left rail with the guide's sections, the content, and a
   right column for one sticky ad plus context. On phones the rail becomes a
   horizontal tab strip under the title and the right column goes away. */
.shell{display:grid;grid-template-columns:minmax(0,1fr);min-height:60vh}
/* a listing (see DESIGN.md) carries no app area, so there is no loading
   jump to reserve height against */
.shell.listing{min-height:0}
@media(min-width:900px){.shell{grid-template-columns:var(--rail-w) minmax(0,1fr)}}
@media(min-width:1180px){.shell{grid-template-columns:var(--rail-w) minmax(0,1fr) var(--side-w)}}
.shell .main{padding:22px 0 40px;min-width:0}
@media(min-width:900px){.shell .main{padding:22px 24px 40px}}
.rail{border-bottom:1px solid var(--line);padding:16px 0 0}
@media(min-width:900px){.rail{border-bottom:0;border-right:1px solid var(--line);padding:22px 14px 22px 0;align-self:stretch}}
.rail .guide-name{font-family:var(--font-head);font-size:26px;line-height:1.1;padding:4px 8px 0}
.rail .guide-meta{font-size:12.5px;color:var(--muted);padding:2px 8px 14px}
.rail .builton h3{font-family:var(--font-serif);font-weight:400;font-size:17px;margin:0 0 6px;color:var(--ink)}
.rail .builton ul{list-style:none;margin:0;padding:0;font-size:13.5px;line-height:1.5}
.rail .builton li a{color:var(--accent-text);text-decoration:none}
.rail .builton li a:hover{text-decoration:underline}
.rail .guide-logo{display:block;max-height:44px;width:auto;max-width:100%;margin:6px 8px 4px}
.rail nav{display:flex;flex-direction:column}
.rail nav a{
  display:flex;justify-content:space-between;align-items:baseline;padding:8px 10px;border-radius:var(--r-md);
  font-size:14px;font-weight:600;color:var(--muted);text-decoration:none;margin-bottom:2px;
}
.rail nav a:hover{color:var(--ink);background:var(--surface2)}
.rail nav a[aria-current]{background:var(--accent-soft);color:var(--accent-text)}
.rail nav a .n{font-family:var(--font-mono);font-weight:400;font-size:11.5px;color:var(--faint);margin-left:8px}
.rail .block{margin-top:14px;padding:14px 10px 0;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted)}
.rail .block:has(> .modepick:empty){display:none}
.rail .block b{display:block;color:var(--ink);font-weight:600;margin-bottom:6px}
.rail .src{font-size:12px;color:var(--faint);line-height:1.5}
.rail .src a{color:var(--muted)}
/* the link from a ROM hack guide to the official game it is built on; kept
   visible on phones, where the rest of the rail's small print is hidden */
.rail .basegame a{display:block;padding:8px 10px;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--accent-text);font-weight:500;font-size:12.5px;text-decoration:none}
.rail .basegame a:hover{border-color:var(--accent)}
.rail .support{display:block;font-size:12px;color:var(--faint);margin-top:14px;padding:14px 10px 0;border-top:1px solid var(--line)}
.rail .support a{color:var(--muted)}
/* phone: horizontal strip */
@media(max-width:899px){
  .rail .guide-logo,.rail .src,.rail .support{display:none}
  .rail .block{margin:0;padding:10px 0 6px;border-top:0}
  .rail .basegame{padding:0 0 10px}
  .rail .guide-name{font-size:32px;padding:0}
  .rail .guide-meta{padding:2px 0 10px}
  .guide-head .kicker,.guide-head h1,.guide-head .counts{display:none}
  .rail nav{flex-direction:row;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:0 -24px;padding:0 24px}
  .rail nav::-webkit-scrollbar{display:none}
  .rail nav a{flex:none;padding:8px 4px;border-radius:0;margin:0 14px 0 0;border-bottom:2px solid transparent;background:none}
  .rail nav a[aria-current]{background:none;color:var(--ink);border-bottom-color:var(--accent)}
  .rail nav a .n{display:none}
}
.side{display:none}
@media(min-width:1180px){.side{display:flex;flex-direction:column;padding:22px 0 22px 24px}}
.side>*+*{margin-top:14px}
.side .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 16px;font-size:14px;line-height:1.6}
.side .card .kicker{margin-bottom:6px}
.side .card .name{font-family:var(--font-head);font-size:22px;line-height:1.1}
.side .card .sub{font-size:13px;color:var(--muted)}
.side .sticky{position:sticky;top:calc(var(--head-h) + 20px)}
/* the guide's title row inside the shell */
.guide-head{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap}
.guide-head>*+*{margin-left:20px}
.guide-head h1{font-size:clamp(32px,4vw,44px);line-height:1;margin-top:4px}
.guide-head .counts{display:flex;font-family:var(--font-mono);font-size:12px;color:var(--faint);padding-bottom:6px}
.guide-head .counts>*{margin-left:22px}
.guide-head .counts b{display:block;font-size:22px;color:var(--ink);font-weight:400}
@media(max-width:640px){.guide-head .counts{display:none}}
.gamepick{display:flex;align-items:center;margin-top:12px;font-size:13.5px;color:var(--muted);flex-wrap:wrap}
.gamepick>*{margin:0 8px 6px 0}

/* ---------------------------------------------------------------- ad slots */
.ad{display:flex;justify-content:center;margin:24px 0;min-height:0}
.ad ins{display:block;width:100%}
.ad.box{margin:0}
.ad.box ins{min-height:250px}
/* an empty ad slot never leaves a hole */
.ad:empty{display:none}

/* ---------------------------------------------------------------- buttons */
.btn{
  display:inline-block;font:inherit;font-weight:600;font-size:14px;
  padding:10px 16px;border-radius:var(--r-md);text-decoration:none;cursor:pointer;
  border:1.5px solid var(--ink);background:var(--surface);color:var(--ink);text-align:center;
}
.btn:hover{background:var(--surface2);color:var(--ink)}
.btn.primary{background:var(--ink);color:var(--bg)}
.btn.primary:hover{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.block{display:block;width:100%}
.gbtn{font:inherit;font-weight:600;font-size:13px;padding:7px 14px;border-radius:999px;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);cursor:pointer}
.gbtn:hover{border-color:var(--ink)}
.gbtn.active{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}

/* ---------------------------------------------------------------- doc pages */
/* padding-top/bottom only: `padding:34px 0` here used to cancel .wrap's side padding
   (same specificity, declared later), which pushed every doc page to the screen edge */
.doc{padding-top:34px;padding-bottom:34px}
.doc h1{font-size:clamp(32px,4.4vw,48px);letter-spacing:-.02em}
.doc .lead{color:var(--muted);font-size:16px;margin:12px 0 24px;max-width:66ch}
.doc h2{font-size:26px;margin:38px 0 14px}
.doc h2:first-child{margin-top:0}
.doc h2 small{font-family:var(--font-body);font-size:14px;color:var(--faint)}
.doc h3{font-size:20px;margin:24px 0 10px}
.crumbs{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin-bottom:18px}
.crumbs a{color:var(--faint);text-decoration:none}
.crumbs a:hover{color:var(--ink)}
.page-head{margin-bottom:28px}
.page-head .kicker{margin-bottom:10px}
.page-head .lead{margin-bottom:0}

/* tables — no outer card; a rule above, hairlines between */
.tablewrap{overflow-x:auto;border-top:1.5px solid var(--ink)}
.doc table{border-collapse:collapse;width:100%;font-size:14px}
.doc th{
  text-align:left;font-family:var(--font-mono);font-weight:400;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--faint);padding:10px 10px 8px;border-bottom:1px solid var(--line);white-space:nowrap;
}
.doc td{padding:10px;border-bottom:1px solid var(--line);vertical-align:top}
.doc tbody tr:last-child td{border-bottom:0}
.doc tbody tr:hover td{background:var(--surface2)}
.doc td.num{text-align:right;font-family:var(--font-mono)}
.doc td small{color:var(--muted)}
.doc table .monnote{display:block;color:var(--muted);margin-top:3px;line-height:1.4}
.doc table img{image-rendering:pixelated}

/* chips + type chips */
.tchip{
  display:inline-block;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;
  color:#fff;padding:2px 8px;border-radius:3px;text-shadow:0 1px 1px rgba(0,0,0,.35);
}
.cat{display:inline-block;font-family:var(--font-mono);font-size:10.5px;padding:2px 7px;border-radius:3px;color:#fff;letter-spacing:.04em}
.cat.Physical{background:#C0392B}.cat.Special{background:#2C5AA0}.cat.Status{background:#6E7C8C}
ul.places{margin:0;padding:0;list-style:none}
ul.places li{font-size:13px;line-height:1.5}
ul.places li+li{margin-top:5px;padding-top:5px;border-top:1px dashed var(--line)}
ul.places .from{display:block;color:var(--faint);font-size:12px}
table.items{min-width:720px}
table.items td:first-child{white-space:nowrap}
table.items td:nth-child(2){min-width:30ch;max-width:38ch}
table.items td:last-child{min-width:26ch}
/* trainer roster + encounter table — wide reference tables: the sprite, the
   Pokémon with its types, what it holds, its moves, its numbers. They scroll
   sideways on a tablet and stack into labelled blocks on a phone, like the
   item table does. */
table.roster{min-width:760px}
table.enctable{min-width:560px}
table.roster td:nth-child(2),table.enctable td:nth-child(2){white-space:nowrap}
.chips.tiny{margin:4px 0 -4px}
.chips.tiny>*{margin:0 4px 4px 0}
.chips.tiny .tchip{font-size:9.5px;padding:1px 6px}
.statgrid{display:grid;grid-template-columns:auto auto;gap:2px 10px;font-size:11.5px;color:var(--muted)}
.statgrid .mono{text-align:right;color:var(--ink)}
@media (max-width:700px){
  table.items{min-width:0}
  table.items thead{display:none}
  table.items tr{display:block;padding:12px 0;border-bottom:1px solid var(--line)}
  table.items tbody tr:last-child{border-bottom:0}
  .doc table.items td{display:block;border:0;padding:0;min-width:0;max-width:none;white-space:normal}
  table.items td:first-child{font-size:16px;margin-bottom:3px}
  table.items td:nth-child(2){margin-bottom:9px;color:var(--muted);font-size:13.5px}
  table.roster,table.enctable{min-width:0}
  table.stackable thead{display:none}
  table.stackable tr{display:block;padding:12px 0;border-bottom:1px solid var(--line)}
  table.stackable tbody tr:last-child{border-bottom:0}
  .doc table.stackable td{display:block;border:0;padding:0;white-space:normal}
  table.stackable td:first-child{font-size:16px;margin-bottom:5px}
  table.stackable td[data-label]{margin-top:5px}
  table.stackable td[data-label]::before{content:attr(data-label);display:block;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin-bottom:2px}
}
.chips{display:flex;flex-wrap:wrap;margin-bottom:-8px}
.chips[hidden]{display:none}
.chips>*{margin:0 8px 8px 0}
.chips a{display:inline-block;font-size:13.5px;font-weight:500;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:5px 12px;text-decoration:none;color:var(--ink)}
.chips a:hover{border-color:var(--ink)}

/* stat bars */
.statbars{display:grid;grid-template-columns:88px 46px minmax(0,1fr);gap:8px 12px;align-items:center;font-size:14px}
.statbars>span:nth-child(3n+1){color:var(--muted)}
.statbars .bar,.stattable .bar{height:8px;border-radius:2px;background:var(--surface3);overflow:hidden}
.statbars .bar i,.stattable .bar i{display:block;height:100%;background:var(--ink)}
.statbars .bar.hi i{background:var(--accent)}
.statbars .chg{grid-column:2/4;font-size:12px;color:var(--warn);font-weight:600;margin-top:-4px}

.prose{max-width:70ch}
.prose p{margin:0 0 14px}
.prose h2{margin-top:32px}
.prose ul{padding-left:20px}
.prose li{margin:5px 0}

/* Pokémon / sprite grids — the tile. Rate first: it's the number people read. */
.monlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px}
.monlist a,.monlist .mon{
  display:flex;flex-direction:column;align-items:center;padding:8px 6px 10px;
  border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);
  text-decoration:none;color:var(--ink);font-size:12.5px;font-weight:500;text-align:center;
}
.monlist a:hover{border-color:var(--ink)}
.monlist img{width:60px;height:60px;image-rendering:pixelated}
.monlist small{font-family:var(--font-mono);font-weight:400;color:var(--faint);font-size:11px;margin-top:2px}
.monlist span{margin-top:2px;line-height:1.15}

/* ---------------------------------------------------------------- Pokémon page */
/* Hero band tinted by the species' own two types, then moves left / stats right. */
.monhero{
  display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:end;
  padding:22px 24px;border-radius:var(--r-xl);border:1px solid var(--line);
  background:
    linear-gradient(135deg, rgba(var(--t1,140,150,170),.28), rgba(var(--t2,140,150,170),.28)),
    var(--surface);
}
@media(min-width:640px){.monhero{grid-template-columns:180px minmax(0,1fr);gap:28px}}
.monhero img{width:160px;height:160px;image-rendering:pixelated;filter:drop-shadow(0 8px 14px rgba(0,0,0,.25))}
.monhero h1{font-size:clamp(40px,5vw,56px);margin-top:4px}
.monhero .types{display:flex;align-items:center;flex-wrap:wrap;margin-top:10px}
.monhero .types>*{margin:0 6px 4px 0}
.monhero .abil{font-size:13.5px;color:var(--muted);margin-left:8px}
.monhero .links{display:flex;flex-wrap:wrap;margin-top:12px;font-size:13.5px}
.monhero .links>*{margin:0 18px 4px 0}
.monlayout{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;margin-top:22px}
@media(min-width:980px){.monlayout{grid-template-columns:minmax(0,1fr) 300px;gap:36px;align-items:start}.monmain{order:1}.monside{order:2}}
.monside{display:flex;flex-direction:column}
.monside>*+*{margin-top:22px}
.monside h2{font-size:26px;margin:0 0 10px}
.monmain>h2:first-child{margin-top:0}
/* retained for pages that still use the old at-a-glance card */
.monart{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px 18px 14px;overflow:hidden;background:linear-gradient(135deg,rgba(var(--t1,140,150,170),.28),rgba(var(--t2,140,150,170),.28)),var(--surface);border:1px solid var(--line);border-radius:var(--r-lg)}
.monart img{width:320px;height:320px;max-width:none;image-rendering:pixelated;margin:-44px 0 -34px}
.monart .chips{justify-content:center;margin-top:16px;position:relative}
.sidecard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 18px}
.sidecard h2{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin:0 0 12px}
.sidecard p{margin:0;font-size:14.5px}
.sidecard .statbars{grid-template-columns:86px 40px minmax(0,1fr);font-size:13.5px}
.doc .sprite{width:104px;height:104px;image-rendering:pixelated;background:var(--surface2);border:1px solid var(--line);border-radius:var(--r-md);float:right;margin:0 0 12px 16px;padding:4px}
.other-guides{font-size:13.5px;line-height:1.7;color:var(--muted)}
.other-guides div{display:flex;justify-content:space-between}
.other-guides a{color:var(--ink)}
.other-guides .mono{font-size:12px}

/* ---------------------------------------------------------------- prev / next */
.prevnext{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;margin:40px 0 8px;padding-top:22px;border-top:1px solid var(--line)}
.prevnext a{display:block;padding:12px 16px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);text-decoration:none;color:var(--ink)}
.prevnext a:hover{border-color:var(--ink)}
.prevnext a.next{text-align:right}
.prevnext span{display:block;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin-bottom:3px}
.prevnext b{font-family:var(--font-head);font-weight:400;font-size:19px}
@media(max-width:520px){.prevnext{grid-template-columns:minmax(0,1fr)}.prevnext a.next{text-align:left}}

.typespread{display:inline-flex;flex-wrap:wrap;vertical-align:middle}
.typespread>*{margin:2px 6px 2px 0}
.teamrow{line-height:0;white-space:nowrap}
.teamrow img{width:40px;height:40px;image-rendering:pixelated;margin-right:2px}

/* ---------------------------------------------------------------- boss page */
.bosshead{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:end;padding-bottom:18px;border-bottom:1.5px solid var(--ink)}
@media(min-width:640px){.bosshead{grid-template-columns:minmax(0,1fr) auto}}
.bosshead h1{font-size:clamp(36px,4.6vw,52px)}
.bosshead .facts{font-size:13.5px;color:var(--muted);margin-top:10px}
.bosshead .facts a{color:var(--ink)}
.capnum{display:inline-block;font-family:var(--font-mono);font-size:44px;line-height:1;color:var(--accent-text)}
.capnum small{display:block;font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin-top:4px}
/* retained for the level-cap chip used on older pages */
.caps{display:flex;align-items:center;margin:0 0 16px;flex-wrap:wrap}
.caps>*{margin:0 16px 8px 0}
.caps .capnum{font-size:30px;background:var(--accent-soft);border-radius:var(--r-md);padding:8px 16px}
.caps span:last-child{color:var(--muted);font-size:14.5px}
.team{display:grid;grid-template-columns:minmax(0,1fr);gap:0 24px;margin-top:10px}
@media(min-width:720px){.team{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.tmon{display:grid;grid-template-columns:52px minmax(0,1fr);gap:0 12px;align-items:start;padding:10px 0;border-bottom:1px solid var(--line)}
.tmon img{width:52px;height:52px;image-rendering:pixelated;cursor:pointer}
.tmon .top{display:flex;justify-content:space-between;align-items:baseline}
.tmon .top>*+*{margin-left:10px}
.tmon .nm{font-weight:600;font-size:15.5px;cursor:pointer}
.tmon .nm:hover{color:var(--accent-text)}
.tmon .nm .form{color:var(--faint);font-weight:400}
.tmon .lv{font-family:var(--font-mono);font-size:14px;white-space:nowrap}
.tmon .meta{font-size:12.5px;color:var(--muted);line-height:1.4}
.tmon .monnote{font-size:12px;color:var(--muted);line-height:1.35}
.mvs{display:flex;flex-wrap:wrap;margin:6px 0 -4px}
/* a move: type as a left rule, power + category in mono after the name */
.mvchip{display:inline-flex;align-items:center;font-size:12px;padding:2px 8px 2px 6px;border-radius:3px;border-left:3px solid var(--tc,#777);background:var(--surface2);white-space:nowrap;margin:0 4px 4px 0;color:var(--ink)}
.mvchip small{font-family:var(--font-mono);font-size:10.5px;color:var(--faint);margin-left:6px}

/* ---------------------------------------------------------------- level-cap timeline */
/* The checkpoints as a line you click. Drives the hidden <select id="stage">
   in the app; on static pages it's just a picture of where the page sits.
   One bar, one pip size, one centre line: the pips are pulled up by half a pip
   plus the whole track (`--tl-track/2 - --tl-dot/2 - --tl-track`), so a pip's
   middle lands on the track's middle whatever the pip's size — and the current
   marker cancels its own extra height with equal negative margins top and
   bottom, so every label still sits on the same baseline. Change a size by
   changing a variable; never by nudging a margin. */
.timeline{--tl-track:6px;--tl-dot:14px;--tl-cur:20px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 16px}
.timeline .tl-head{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap}
.timeline .tl-head>*+*{margin-left:12px}
.timeline .tl-state{font-size:12.5px;color:var(--muted)}
.timeline .tl-state b{color:var(--ink);font-weight:600}
/* Many checkpoints on a phone: the strip keeps its real labels and scrolls
   sideways in its own box (DESIGN.md's rule for wide content) rather than
   hiding every other number — a hidden number tells the reader nothing.
   22px per stop keeps two-digit numbers clear of each other; renderTimeline
   sets the min-width from the stop count. */
.timeline .tl-rail{margin-top:18px;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin}
/* Room for the current stop's ring: it is 3px taller than the other dots and
   grows on hover, and the first and last rings sit flush with the box edges.
   The padding is on the content, not the scroll box, so it scrolls with it. */
.timeline .tl-line{position:relative;padding:10px 8px 4px}
/* The stops are equal grid cells with the dot at each centre, so the track is
   inset by half a cell on both sides: it starts at "Start" and ends at "Any"
   instead of poking out past them. --n is the number of stops, set inline. */
.timeline .track{position:relative;height:var(--tl-track);border-radius:999px;background:var(--line);margin:0 calc(50% / var(--n,10))}
.timeline .track i{position:absolute;left:0;top:0;height:var(--tl-track);border-radius:999px;background:var(--accent)}
.timeline .stops{display:grid;position:relative;text-align:center;font-family:var(--font-mono);font-size:11px;
  margin-top:calc((var(--tl-track) - var(--tl-dot))/2 - var(--tl-track))}
.timeline .stop{display:flex;flex-direction:column;align-items:center;background:none;border:0;padding:0;font:inherit;color:var(--muted);cursor:pointer;min-width:0}
/* upcoming = paper with a strong ring · done = filled accent with a paper ring ·
   here = a bigger solid ink marker with the same paper ring */
.timeline .stop .dot{display:block;width:var(--tl-dot);height:var(--tl-dot);border-radius:50%;box-sizing:border-box;background:var(--surface);border:2px solid var(--line-strong);transition:transform .15s}
.timeline .stop.done .dot{background:var(--accent);border-color:var(--surface)}
.timeline .stop.here .dot{width:var(--tl-cur);height:var(--tl-cur);background:var(--ink);border:3px solid var(--surface);box-shadow:0 0 0 1px var(--ink);
  margin-top:calc((var(--tl-dot) - var(--tl-cur))/2);margin-bottom:calc((var(--tl-dot) - var(--tl-cur))/2)}
.timeline .stop:hover .dot{transform:scale(1.18)}
/* the label is the step number and nothing else — the checkpoint's name is in
   the header line above, and in the stop's title and aria-label */
.timeline .stop .lbl{display:block;margin-top:9px;color:var(--faint);white-space:nowrap}
.timeline .stop.done .lbl{color:var(--muted)}
.timeline .stop.here .lbl{color:var(--ink);font-weight:700}
.timeline .stop:hover .lbl{color:var(--ink)}
.timeline .stop:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
/* One pip size at every width and every stop count — twenty checkpoints on a
   phone scroll instead of shrinking, so nothing is a different size from
   anything else. */
@media(max-width:560px){.timeline{--tl-dot:13px;--tl-cur:19px}.timeline .stops{font-size:10px}}
/* compact bar used on phones instead of the full line */
.stagebar{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:10px 12px;font-size:13.5px}
.stagebar .row{display:flex;justify-content:space-between;align-items:center}
.stagebar .prog{height:3px;background:var(--line);border-radius:2px;margin-top:8px;position:relative}
.stagebar .prog i{position:absolute;left:0;top:0;height:3px;background:var(--accent);border-radius:2px}

/* ---------------------------------------------------------------- dex + compare */
.delta{font-family:var(--font-mono);font-size:12px;font-weight:700;white-space:nowrap}
.delta.up{color:var(--ok)}
.delta.down{color:var(--warn)}
.statbars .delta{justify-self:start}
.dextable{font-size:14px}
.dextable td,.dextable th{padding:6px 10px}
/* rows centre vertically (sprite, name and numbers share one midline); type chips breathe */
.dextable td{vertical-align:middle}
/* the dex number sits under its # heading, both left */
.dextable th:first-child,.dextable td:first-child{text-align:left}
.dextable td .tchip+.tchip{margin-left:5px}
.dextable th:nth-child(n+5){text-align:right}
.dextable td:nth-child(n+5){text-align:right;font-family:var(--font-mono)}
/* the last column is a short count under a long heading: centred, so the number sits under the word */
.dextable th:last-child,.dextable td:last-child{text-align:center}
.dextable td:nth-child(3) a{font-family:var(--font-head);font-size:19px;text-decoration:none;color:var(--ink)}
.dextable td:nth-child(3) a:hover{text-decoration:underline}
.dextable img{width:44px;height:44px;image-rendering:pixelated;display:block}
.dextable td:first-child{color:var(--faint)}
.dextable tbody tr{background-image:linear-gradient(100deg, rgba(var(--t1,140,150,170),.14), rgba(var(--t2,140,150,170),.14))}
.doc .dextable tbody tr:hover td{background:rgba(var(--t1,140,150,170),.14)}
.cmp-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;margin:24px 0 8px}
@media(min-width:760px){.cmp-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start}}
.cmp-side{display:flex;flex-direction:column}
.cmp-side>*+*{margin-top:20px}
.cmp-pick{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 18px}
.cmp-pick .field{display:flex;flex-direction:column}
.cmp-pick label{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin-bottom:6px}
.cmp-pick select,.cmp-pick input{font:inherit;font-size:15px;color:var(--ink);background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-md);padding:0 12px;width:100%;height:46px;box-sizing:border-box;-webkit-appearance:none;appearance:none}
.cmp-pick select{background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 18px) 20px,calc(100% - 13px) 20px;background-size:5px 5px;background-repeat:no-repeat;padding-right:34px}
.cmp-pick select:focus,.cmp-pick input:focus{outline:none;border-color:var(--ink)}
.cmp-col{display:flex;flex-direction:column}
.cmp-col>*+*{margin-top:14px}
.cmp-col h2{font-size:32px;margin:0}
.cmp-col .cmp-guide{margin:0;font-family:var(--font-mono);font-size:11px;color:var(--accent-text);letter-spacing:.08em;text-transform:uppercase}
.cmp-col.empty{align-items:center;justify-content:center;min-height:220px;color:var(--muted);border:1px dashed var(--line-strong);border-radius:var(--r-lg)}
.cmpbars .mono.win{color:var(--ok);font-weight:700}
.cmpbars .mono.lose{color:var(--muted)}
.sidecard .statbars.cmpbars,.statbars.cmpbars{grid-template-columns:78px 42px minmax(0,1fr) auto}
.popular{display:flex;flex-wrap:wrap;align-items:center;margin-top:16px;font-size:13px}
.popular>*{margin:0 8px 8px 0}
.popular .lbl{color:var(--faint)}
.popular a{padding:5px 12px;border-radius:999px;border:1px solid var(--line);color:var(--ink);text-decoration:none}
.popular a:hover{border-color:var(--ink)}

/* ---------------------------------------------------------------- moves (site-wide) */
.movehero{display:grid;grid-template-columns:minmax(0,1fr);gap:24px}
@media(min-width:980px){.movehero{grid-template-columns:minmax(0,1fr) 320px;gap:48px}}
.movecard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 18px}
.movecard .name{font-family:var(--font-head);font-size:26px;margin-top:4px}
.movecard .row{display:flex;flex-wrap:wrap;margin-top:6px}
.movecard .row>*{margin:0 6px 4px 0}
.movecard .stats{display:grid;grid-template-columns:repeat(3,1fr);margin-top:10px;font-family:var(--font-mono);font-size:12px;color:var(--faint)}
.movecard .stats b{display:block;font-size:20px;color:var(--ink);font-weight:400}
.movecard p{margin:10px 0 0;font-size:13.5px;color:var(--muted)}
.movetable td:first-child a{font-family:var(--font-head);font-size:19px;text-decoration:none;color:var(--ink)}
.movetable td.changed{color:var(--warn);font-weight:700}
.movetable tr.hl td{background:var(--accent-soft)}
.movepick{position:relative;max-width:640px;margin-top:20px}
.movepick input{width:100%;font:inherit;font-size:17px;color:var(--ink);background:var(--surface);border:1.5px solid var(--ink);border-radius:var(--r-md);padding:0 16px 0 46px;height:52px}
.movepick input:focus{outline:none;box-shadow:var(--ring)}
.movepick svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--faint);pointer-events:none}

/* ---------------------------------------------------------------- coverage */
.covtable{font-size:14px}
.covtable td:first-child{font-weight:600;white-space:nowrap}
.covtable td:nth-child(2){white-space:nowrap}
.covtable td:last-child{color:var(--muted)}
.cov{display:inline-block;padding:2px 9px;border-radius:3px;font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;white-space:nowrap}
.cov.ok{background:var(--ok-soft);color:var(--ok)}
.cov.base{background:var(--accent-soft);color:var(--accent-text)}
.cov.warn{background:var(--warn-soft);color:var(--warn)}
.cov.na{background:var(--surface2);color:var(--muted)}
.cmp-note{font-size:13px;color:var(--muted);margin-top:8px}

/* ---------------------------------------------------------------- hub: about + made by */
.about{margin-top:40px;display:grid;grid-template-columns:minmax(0,1fr);gap:28px;padding-top:28px;border-top:1.5px solid var(--ink)}
@media(min-width:880px){.about{grid-template-columns:minmax(0,1.5fr) minmax(260px,.9fr);gap:36px}}
.about p{margin:0 0 12px;max-width:68ch}
.about h2{font-size:26px;margin-bottom:10px}
.about ul{margin:0;padding-left:20px}
.about li{margin:5px 0}
.notes{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 18px;font-size:14px;align-self:start}
.notes h2{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin-bottom:12px}
.notes b{display:block;color:var(--ink);margin-bottom:2px}
.notes p{color:var(--muted);margin:0 0 12px}
.notes p:last-child{margin-bottom:0}
.credits-list{font-size:14px;color:var(--muted)}
.credits-list li{margin:4px 0}
.facts{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 18px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 16px;font-size:14px}
.facts dt{color:var(--faint)}
.facts dd{margin:0;font-weight:600}
.maker{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 20px 18px 24px;margin-bottom:28px}
.maker::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:var(--r-lg) 0 0 var(--r-lg);background:var(--accent)}
.maker .kicker{margin-bottom:4px}
.maker h2{margin:0 0 8px;font-size:28px}
.maker p{color:var(--muted);font-size:14px;margin:0 0 12px;max-width:66ch}
.maker-links{display:flex;flex-wrap:wrap;margin-bottom:-8px}
.maker-links a{display:inline-block;font-size:13px;font-weight:600;color:var(--ink);background:var(--surface2);padding:5px 12px;border-radius:999px;text-decoration:none;margin:0 8px 8px 0}
.maker-links a:hover{background:var(--ink);color:var(--bg)}
.quicklinks{display:flex;flex-wrap:wrap;margin:14px 0 -8px}
.quicklinks a{font-size:13.5px;font-weight:600;text-decoration:none;color:var(--ink);border:1px solid var(--line-strong);border-radius:999px;padding:6px 14px;margin:0 8px 8px 0}
.quicklinks a:hover{border-color:var(--ink)}
.support{display:flex;flex-wrap:wrap;align-items:center;font-size:13px;color:var(--faint);margin-top:14px}
.support>*{margin:2px 10px 2px 0}
.support a{color:var(--muted)}

/* ---------------------------------------------------------------- submit */
.callout{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);padding:22px 26px;
}
.callout>*{margin:8px 20px 8px 0}
.callout>*:last-child{margin-right:0}
.callout h2{font-size:28px;margin:0 0 6px}
.callout p{color:var(--muted);margin:0;max-width:62ch;font-size:14.5px}
.rules{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 20px;font-size:14.5px;color:var(--muted);line-height:1.6;margin:0 0 12px}
.rules b{display:block;color:var(--ink);margin-top:12px}
.rules b:first-child{margin-top:0}
.rules strong{color:var(--ink)}
.rules ul{margin:8px 0 0;padding-left:18px}
.rules li{margin:3px 0}
.two-up{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;margin:0 0 12px}
@media(min-width:760px){.two-up{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px}}
.two-up .rules{margin:0}
.submit-form{max-width:660px;margin-top:12px}
.submit-form h2{font-size:24px;margin:32px 0 10px;padding-bottom:8px;border-bottom:1.5px solid var(--ink)}
.submit-form label{display:block;font-size:14px;font-weight:600;margin:16px 0 0}
.submit-form input:not([type=checkbox]),.submit-form textarea{display:block;width:100%;margin-top:6px;font:inherit;font-weight:400;font-size:15px;padding:10px 12px;border:1px solid var(--line-strong);border-radius:var(--r-md);background:var(--surface);color:var(--ink)}
.submit-form input:focus,.submit-form textarea:focus{outline:none;border-color:var(--ink);box-shadow:var(--ring)}
.submit-form input[type=file]{padding:9px;font-size:14px}
.submit-form label.check{display:flex;align-items:center;font-weight:500}
.submit-form label.check input{width:18px;height:18px;margin:0 10px 0 0;flex:none;accent-color:var(--accent)}
.submit-form .req{font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-text);margin-left:7px}
.submit-form .hint{font-size:13.5px;color:var(--muted);margin:10px 0 0}
.submit-form .hp{position:absolute;left:-9999px}
.submit-form button{margin-top:22px;font-size:15px;padding:12px 22px}

/* ---------------------------------------------------------------- finder (home) */
/* "Find the right ROM hack": a name search and a sort, then three questions,
   each a row of pills. Every answer narrows the guide cards below it
   (data-sys / data-gen / data-diff on .hack); the search matches data-name and
   data-by; the sort reorders #shelf by data-name or data-released.
   The questions are built in build.py from hack.json: system, generation,
   difficulty_level. Nothing here is hard-coded to a hack. */
.finder{margin-top:52px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);padding:22px 24px 16px}
.finder .fhead{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;margin-bottom:14px}
.finder .fhead h2{font-size:clamp(24px,2.6vw,30px)}
.finder .fhead .count{font-family:var(--font-mono);font-size:12px;color:var(--faint);margin-left:16px}
.finder .fhead .count b{color:var(--ink);font-weight:400}
/* The tools row, above the three questions: a name/creator search and the sort.
   The search is a fourth filter, not a separate view, so it lives inside the
   same card as the pills; the sort is pills too, so the current order is
   readable without opening anything. One row on a wide screen, stacked on a
   phone (flex-basis, not a breakpoint, so it folds when it runs out of room). */
.finder .ftools{display:flex;align-items:center;flex-wrap:wrap;padding-bottom:12px}
.finder .fsearch{flex:1 1 260px;min-width:0;margin:0 16px 8px 0}
.finder .fsearch input{width:100%;font:inherit;font-size:14px;padding:7px 14px;border:1px solid var(--line-strong);border-radius:999px;background:var(--bg);color:var(--ink)}
.finder .fsearch input::placeholder{color:var(--faint)}
.finder .fsort{display:flex;align-items:center;flex-wrap:wrap;flex:0 1 auto;margin-bottom:2px}
.finder .fsort .ql{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);flex:none;margin-right:12px;margin-bottom:6px}
.finder .q{display:flex;align-items:baseline;flex-wrap:wrap;padding:10px 0;border-top:1px solid var(--line)}
.finder .q .ql{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);width:150px;flex:none;margin-right:12px;margin-bottom:6px}
.finder .q .pills{flex:1;min-width:0}
.finder .pills button[disabled]{color:var(--faint);border-style:dashed;cursor:default}
/* would leave no guide, given the other answers: still clickable, but clearly a dead end */
.finder .pills button.none:not(.on){color:var(--faint);border-color:var(--line);opacity:.55}
.finder .foot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;padding-top:10px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.finder .foot button{font:inherit;font-size:13px;background:none;border:0;color:var(--accent-text);cursor:pointer;padding:0;text-decoration:underline;text-underline-offset:3px}
.hack[hidden]{display:none}
@media(max-width:640px){.finder{padding:18px 16px 12px}.finder .q .ql{width:100%}.finder .fhead .count{margin-left:0;width:100%;margin-top:4px}
  .finder .fsearch{flex:1 1 100%;margin-right:0}.finder .fsort{width:100%}.finder .fsort .ql{width:100%}}

/* ---------------------------------------------------------------- compare modes */
/* /compare/ has two jobs: two Pokémon, or two ROM hacks. The switch is a pair
   of large tabs; the URL keeps the mode (?mode=hacks). */
.cmp-modes{display:flex;border-bottom:1.5px solid var(--ink);margin:18px 0 0}
.cmp-modes a{font:inherit;font-size:15px;font-weight:500;padding:12px 18px;color:var(--muted);text-decoration:none;border:1px solid transparent;border-bottom:0;border-radius:var(--r-md) var(--r-md) 0 0;margin-bottom:-1.5px}
.cmp-modes a[aria-current]{color:var(--ink);background:var(--surface);border-color:var(--ink);border-bottom:1.5px solid var(--surface)}
.cmp-modes a:hover{color:var(--ink)}
.cmp-mode[hidden]{display:none}
.hcmp .cmp-pick{grid-template-columns:minmax(0,1fr)}
.hcmp-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.hcmp-card .top{padding:22px 20px;color:#fff;background:linear-gradient(160deg,hsl(var(--hue,150) 45% 30%),hsl(var(--hue,150) 40% 16%));position:relative;min-height:120px}
.hcmp-card .top .kicker{color:rgba(255,255,255,.72)}
.hcmp-card .top h2{font-size:30px;color:#fff;max-width:64%;margin-top:6px}
.hcmp-card .top .mascot{position:absolute;right:12px;top:12px;width:96px;height:96px;image-rendering:pixelated;opacity:.9}
.hcmp-card dl{margin:0;display:grid;grid-template-columns:120px minmax(0,1fr);font-size:14px}
.hcmp-card dt{padding:9px 20px;font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);border-top:1px solid var(--line)}
.hcmp-card dd{margin:0;padding:9px 20px 9px 0;border-top:1px solid var(--line)}
.hcmp-card dd .mono{font-size:14px}
.hcmp-card dd.diff{color:var(--accent-text)}
.hcmp-card .tagline{padding:14px 20px;color:var(--muted);font-size:14px;line-height:1.5;border-top:1px solid var(--line)}
.hcmp-card .cta{padding:14px 20px;border-top:1px solid var(--line)}

/* /moves/ search results: move name on top, type · category · guide count on its own line below */
.movelist{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:6px;margin-top:8px}
.movelist button{font:inherit;text-align:left;font-size:14px;line-height:1.3;padding:8px 10px;border-radius:var(--r-md);border:1px solid var(--line);border-left:3px solid var(--tc,#777);background:var(--surface);color:var(--ink);cursor:pointer}
.movelist button:hover{border-color:var(--ink);border-left-color:var(--tc,#777)}
.movelist button small{display:block;margin-top:3px;font-family:var(--font-mono);font-size:10.5px;color:var(--faint)}
/* What makes the game different: above the finder on a guide's hub */
.intro{margin:18px 0 6px;padding:16px 20px 14px 22px;background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:var(--r-lg)}
.intro .kicker{margin-bottom:6px}
.intro p{margin:0;max-width:72ch;line-height:1.6}
.intro .intro-tag{font-size:17px;line-height:1.5}
.intro-more{margin-top:10px;font-size:14px}
.intro-more p{margin-top:8px;font-size:14.5px}
.intro-more h3{font-family:var(--font-body);font-size:14px;font-weight:600;margin:12px 0 0}
.intro-more summary{cursor:pointer;font-weight:600;color:var(--accent-text)}
.intro-more ul{margin:8px 0 0;padding-left:20px;max-width:72ch}
.intro-more li{margin:5px 0}
.intro-link{display:inline-block;margin-top:10px;font-size:14px;font-weight:600;color:var(--ink)}
@media(max-width:640px){.intro{padding:14px 14px 12px 16px}.intro .intro-tag{font-size:15.5px}}
/* /changes/: how the game plays */
.mech{margin:18px 0 0}
.mech h3{font-size:22px;margin-bottom:6px}
.mech p{max-width:68ch}
.mech .tablewrap{margin-top:8px}
.featlist{padding-left:20px;max-width:68ch}
.gamedesc{max-width:68ch}
.featlist li{margin:6px 0}
.mech{scroll-margin-top:calc(var(--head-h) + 16px)}

/* ---------------------------------------------------------------- spoiler gate
   A guide for a puzzle game hands over answers the game means you to find, so a
   hack can declare `spoiler_warning` in hack.json and every page under its guide
   opens behind this notice. Hidden in the markup and revealed by script, so a
   crawler and a reader without JavaScript both see the page as normal; the
   dismissal is remembered per browser, per guide. */
html.spoil-open, html.spoil-open body{overflow:hidden}
.spoilgate[hidden]{display:none}
.spoilgate{
  position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  padding:16px;background:rgba(30,27,22,.72);backdrop-filter:blur(3px);
}
.spoilcard{
  width:100%;max-width:520px;max-height:calc(100vh - 32px);overflow:auto;
  background:var(--surface);color:var(--ink);border:1.5px solid var(--ink);
  border-radius:var(--r-lg,14px);box-shadow:var(--sh-hard);padding:24px;
}
.spoilcard h2{font-size:26px;margin:0 0 10px}
.spoilcard p{margin:0 0 12px;color:var(--muted)}
.spoilcard p:last-of-type{margin-bottom:18px}
.spoilbtns{display:flex;flex-wrap:wrap;gap:10px}
.spoilbtns .btn{flex:1 1 auto}
@media (max-width:420px){
  .spoilcard{padding:18px}
  .spoilcard h2{font-size:22px}
  .spoilbtns .btn{flex:1 1 100%}
}

/* ---------------------------------------------------------------- screenshots
   The slideshow under a guide's facts box. Only ever rendered for a hack whose
   `media` block records the creator's permission — see media_html in build.py.
   The frame holds the hardware's aspect ratio so nothing jumps while an image
   loads, and pixel art is scaled without smoothing. */
.card.shots{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:10px;max-width:560px;
}
/* `.side` is hidden below 1180px, so a guide that has screenshots pulls this one
   card back into the flow and sits it between the rail and the main column.
   Scoped to `.shell.has-shots`, which build.py only writes when a slideshow was
   actually rendered, so no guide without one is touched. */
@media(max-width:1179px){
  .shell.has-shots>.side{display:block;padding:0;margin:16px 0 0}
  .shell.has-shots>.side .sticky{position:static}
  .shell.has-shots>.side .ad,
  .shell.has-shots>.side .card:not(.shots):not(.boxart){display:none}
  .shell.has-shots>.side .card.shots{margin-top:0 !important}
  .shell.has-shots>.side .card.boxart{max-width:220px;margin:0 0 14px}
  .shell.has-shots>.main{order:1}
}
/* The creator's box art, above the facts box. Smooth scaling: this is
   artwork, not pixel art. Same credit line as the slideshow. */
.card.boxart{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:10px;margin-top:14px;max-width:560px;
}
.card.boxart img{display:block;width:100%;height:auto;border-radius:var(--r-md)}
.boxcred{margin-top:8px;font-size:12px;color:var(--faint);line-height:1.35}
.boxcred a{color:inherit}
.card.shots figure{margin:0}
.shotframe{
  position:relative;width:100%;overflow:hidden;border-radius:var(--r-md);
  background:var(--surface2);border:1px solid var(--line);
}
.shotframe img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  image-rendering:pixelated;
}
.shotframe img[hidden]{display:none}
.card.shots figcaption{
  display:flex;align-items:center;gap:6px 10px;flex-wrap:wrap;justify-content:space-between;
  margin-top:8px;font-size:12px;color:var(--faint);
}
/* The credit has to be readable, not truncated: it is the whole point of
   showing someone else's screenshots. It wraps rather than ellipsing, which
   matters most in the narrow right column. */
.shotcred{min-width:0;flex:1 1 auto;white-space:normal;line-height:1.35}
.shotcred a{color:inherit}
.shotnav{display:flex;align-items:center;gap:6px;flex:none;margin-left:auto}
.shotn{font-size:11px;color:var(--faint)}
.shotbtn{
  font:inherit;font-size:15px;line-height:1;width:26px;height:26px;cursor:pointer;
  border:1px solid var(--line-strong);border-radius:999px;
  background:var(--surface);color:var(--ink);
}
.shotbtn:hover{background:var(--surface2);border-color:var(--ink)}
.shotbtn:focus-visible{outline:none;box-shadow:var(--ring)}

/* Route "at a glance": the area summarised in one paragraph, counted off the
   area's own tables. Type chips sit inline in the sentence, so they need their
   own spacing here rather than the table spacing .dextable gives them. */
.glance{margin:0 0 22px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);line-height:1.75}
.glance .tchip{margin:0 2px;vertical-align:baseline}
.glance a{color:inherit}

/* Walkthrough parts: the areas one checkpoint opens, as numbered steps. The
   number IS the step, so it stays mono and visible rather than being styled
   away; each step is a serif area name over two or three lines of what is in
   it. No new colours — the whole part is body text with links. */
.legs{margin:0 0 26px;padding:0 0 0 2.4em;list-style:decimal}
.legs>li{margin:0 0 20px}
.legs>li::marker{font-family:var(--font-mono);font-size:13px;color:var(--faint)}
.legs h3{font-family:var(--font-head);font-weight:400;font-size:21px;line-height:1.2;margin:0 0 5px}
.legs p{margin:0 0 4px;font-size:14px;line-height:1.7}
.legs .mono{color:var(--muted);font-size:12.5px}
.legmeta{font-size:13.5px;color:var(--muted);margin:20px 0 0}

/* ================================================================= Pokédex
   The National Pokédex (/pokedex/). Two rules govern the whole thing:

   1. The page is the *official* Pokédex by default. Everything the ROM hacks
      add carries data-hack / data-hackblock and is hidden by CSS until the
      reader asks for it with the view switch, so a reader who came for
      "how does haunter evolve" is never handed a union of thirty answers —
      and a no-JS reader gets the clean official page, not the mess.
   2. No new colours. Type colours come from tchip, differences from the
      existing .delta / .cov tokens, everything else is ink on surface. */
.wrap.doc[data-view="official"] [data-hack],
.wrap.doc[data-view="official"] [data-hackblock],
.hkhide{display:none!important}

.dexview{margin:0 0 26px;padding:14px 16px 10px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
.dexview .pills{align-items:center}
.dexview .just{display:inline-flex;align-items:center;font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin:0 6px 6px 0}
.dexview .just select{font:inherit;font-family:var(--font-body);font-size:13px;text-transform:none;letter-spacing:0;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:4px 10px;margin-left:8px;max-width:220px}
.dexview .note{margin:6px 0 0;font-size:13px;color:var(--muted)}
.hackh2{display:block}

/* What the view switch adds to the *top* of a species page. Same tokens as the
   changes table below it: type colour from .tchip, difference from .delta, the
   accent only ever meaning "this is the ROM hack's number". */
.hkhero .arr{color:var(--faint);margin:0 7px 0 3px}
.hkhero .tchip+.tchip{margin-left:5px}
.hklab{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin-left:8px;white-space:nowrap}
.hkq{color:var(--muted);font-size:15px}
.hksum{font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;color:var(--accent-text);white-space:normal}
.monart .hklab{display:block;text-align:center;margin:6px 0 0}
.hkh3{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin:22px 0 10px}
.sidecard #dvabil .abil:first-of-type{border-top:1px solid var(--line);padding-top:8px}

/* Facts list in the side column: label over value, hairline between. */
.facts{display:block;margin:0;font-size:14px}
.facts>div{display:flex;justify-content:space-between;align-items:baseline;padding:6px 0;border-top:1px solid var(--line)}
.facts>div:first-child{border-top:0;padding-top:0}
.facts dt{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);flex:none;margin-right:14px}
.facts dd{margin:0;text-align:right;min-width:0;overflow-wrap:anywhere}
.facts>div.wide{display:block}
.facts>div.wide dd{text-align:left;margin-top:4px;font-size:13px;line-height:1.65;color:var(--muted)}

/* Abilities: name, "hidden" badge, then the game's own short effect. */
.abil{font-size:14px;padding:8px 0;border-top:1px solid var(--line)}
.abil:first-of-type{border-top:0;padding-top:0}
.abil b{font-weight:600}
.abil span{display:block;color:var(--muted);font-size:13px;line-height:1.5;margin-top:2px}

/* Sprites: the official front sprite, its shiny, then the ROM hacks' own art. */
.spritegrid{display:flex;flex-wrap:wrap;margin:0 -8px -8px 0}
.spritegrid figure{margin:0 8px 8px 0;text-align:center;width:92px}
.spritegrid figure a{text-decoration:none;color:inherit;display:block}
.spritegrid span{display:block;background:var(--surface2);border:1px solid var(--line);border-radius:var(--r-md);padding:2px}
.spritegrid img{width:84px;height:84px;image-rendering:pixelated;display:block;margin:0 auto}
.spritegrid figcaption{font-family:var(--font-mono);font-size:10px;letter-spacing:.04em;color:var(--faint);margin-top:4px;line-height:1.35}
.sidecard h3{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin:16px 0 10px}
.sidecard .credit{font-size:11.5px;color:var(--faint);line-height:1.5;margin:10px 0 0}

/* Base stats: ONE table (it used to be a bar list beside a range table, which
   printed the same six numbers twice). Every numeric column shrinks to its
   number and the bar cell takes all the slack — that is what width:100% on a
   single cell does in a table. The bar itself is the .statbars bar, so the dex
   and the guide species pages read as one family. */
.stattable{font-size:13.5px}
.stattable td,.stattable th{padding:7px 10px}
.stattable td:first-child,.stattable th:first-child{padding-left:0}
.stattable td:last-child,.stattable th:last-child{padding-right:0}
.stattable .barcell{width:100%;min-width:90px;vertical-align:middle}
.stattable td.num,.stattable th{white-space:nowrap}
/* DESIGN.md: a number sits under its heading — numeric th and td both right. */
.stattable th.num,.stattable th.hkcell{text-align:right}
.stattable tr.tot td{border-bottom:0;border-top:1px solid var(--line)}
.stattable .bar+.bar{margin-top:3px}
/* The ROM hack's own number, bar and level-100 range, added by the view switch. */
.stattable .hkcell{color:var(--accent-text)}
.stattable th.hkcell{color:var(--accent-text);text-transform:none;letter-spacing:.04em;font-size:10.5px}
.stattable .hkbar i{background:var(--accent)}
.stattable .hkv{display:block;font-size:11.5px;color:var(--accent-text)}
.hknote{font-size:13.5px;color:var(--muted);margin:10px 0 0}

/* Type defences: one row per multiplier, the multiplier in mono on the left. */
.deftable{border-top:1.5px solid var(--ink)}
.defrow{display:flex;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--line)}
.defrow:last-child{border-bottom:0}
.defrow .mult{flex:none;width:52px;font-size:15px;color:var(--muted)}
.defrow.weak .mult{color:var(--warn)}
.defrow.resist .mult,.defrow.immune .mult{color:var(--accent-text)}
.defrow .chips{flex:1;min-width:0}

/* Evolution: one column per stage, the method above each Pokémon it applies to,
   so a branch (Eevee's eight, Alolan Raichu) is just more boxes in one column. */
.evochain{display:flex;flex-wrap:wrap;align-items:stretch;margin:0 -10px 8px 0;overflow-x:auto}
.evocol{display:flex;flex-direction:column;justify-content:center;margin:0 10px 10px 0;min-width:0}
.evocol+.evocol{padding-left:22px;position:relative}
.evocol+.evocol::before{content:"→";position:absolute;left:2px;top:50%;transform:translateY(-50%);color:var(--faint);font-size:16px}
.evomon{display:block;text-align:center;width:132px;padding:8px 6px;margin:4px 0;border:1px solid transparent;border-radius:var(--r-md);text-decoration:none;color:var(--ink)}
.evomon:hover{border-color:var(--line);background:var(--surface)}
.evomon.here{border-color:var(--ink);background:var(--surface)}
.evomon img{width:72px;height:72px;image-rendering:pixelated;display:block;margin:0 auto}
.evomon b{display:block;font-family:var(--font-head);font-weight:400;font-size:17px;line-height:1.2;margin-top:2px}
.evomon .mono,.evomon span{display:block;font-size:10.5px;color:var(--faint)}
.evomon em{display:block;font-style:normal;font-family:var(--font-mono);font-size:10px;letter-spacing:.04em;color:var(--muted);line-height:1.4;margin-bottom:4px}
.hackchain{margin:0 0 22px}
.hackchain h3{margin:18px 0 8px}

/* Learnsets: sixteen games is far too much to print open, so all but the newest
   fold. The summary carries the counts, so a closed one still answers "does it
   learn anything here". */
.learnset{border-top:1px solid var(--line);padding:0}
.learnset:last-of-type{border-bottom:1px solid var(--line)}
.learnset>summary{cursor:pointer;padding:11px 2px;display:flex;align-items:baseline;justify-content:space-between;list-style:none}
.learnset>summary::-webkit-details-marker{display:none}
.learnset>summary::before{content:"+";font-family:var(--font-mono);color:var(--faint);margin-right:10px}
.learnset[open]>summary::before{content:"–"}
.learnset>summary b{font-family:var(--font-head);font-weight:400;font-size:19px;flex:1}
.learnset>summary .mono{font-size:11px;color:var(--faint);margin-left:12px}
.learnset h4{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin:16px 0 8px}
.movetable{font-size:13.5px}
.movetable td,.movetable th{padding:5px 8px}
.movetable td:first-child{font-family:var(--font-mono);color:var(--muted);width:52px}
.movetable td:nth-child(2) a{color:var(--ink)}

/* Where to find it, in the ROM hacks: the areas stacked in one cell, because a
   guide can have twenty of them and one row per area would bury the guide name. */
.hloctable td:first-child{width:210px}
.hloc{padding:3px 0}
.hloc a{color:var(--ink)}
.hloc span.mono{display:block;font-size:11px;color:var(--faint)}
.hloc.more{font-size:12px;color:var(--faint)}

/* What each guide changed. The difference is the point, so it is spelled out:
   the old typing struck through before the arrow, the per-stat deltas under the
   total, added and removed abilities signed. */
.dexsum{font-size:15px;margin:0 0 10px}
.guidechg td{vertical-align:top}
.guidechg .tcell{white-space:nowrap}
.guidechg .wast .tchip{opacity:.45;text-decoration:line-through}
.guidechg .arr{color:var(--faint);margin:0 6px}
.guidechg .num{text-align:right}
.guidechg .num small{color:var(--muted);font-size:11px}
.evochg{display:block;color:var(--muted);font-size:12px;line-height:1.45;margin-top:3px}

/* The games' own entry text, and the name in every language the games ship. */
.flavor td:first-child{width:190px;white-space:nowrap}
.flavor td:last-child{color:var(--muted)}
.langtable{max-width:420px}
.langtable td:first-child{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);width:180px}

/* The dex index: the finder's pill rows, reused, filtering the table below. */
/* The two tools that read this table, above the filters: Compare and Moves.
   They are here rather than in the header nav — both are a question about the
   Pokédex, not a sixth destination. */
.dexlinks{display:flex;flex-wrap:wrap;margin:16px 0 4px}
.dexlinks .btn{margin:0 10px 10px 0}
.dexfilter{margin-top:0;margin-bottom:26px}
.dexfilter .dsearch{flex:1;min-width:0}
.dexfilter .dsearch input{font:inherit;font-size:14px;width:100%;max-width:340px;padding:7px 12px;border:1px solid var(--line);border-radius:999px;background:var(--bg);color:var(--ink)}
.dexfilter .dsearch input:focus-visible{outline:none;box-shadow:var(--ring)}
.dexfilter .dsearch select{font:inherit;font-size:14px;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:7px 12px;max-width:340px;width:100%}
.dexfilter .dsearch select:focus-visible{outline:none;box-shadow:var(--ring)}
.dexfilter .dsearch select[disabled]{opacity:.6}
/* "# in <guide>" — a number, so it lines up under its heading like every other
   number here, and not centred the way the last column normally is */
.dextable th.hknum,.dextable td.hknum,.dextable th#hknumth{text-align:right;font-family:var(--font-mono)}
.dextable th#hknumth{font-family:var(--font-mono);font-size:10px;letter-spacing:.06em}
/* a guide's own form of a species, filed under it */
.dextable tr.hkform td:nth-child(3) a{font-size:16px;color:var(--muted)}
.dextable tr.hkform td:nth-child(3) a:hover{color:var(--ink)}
.dextable tr.genhead th{background:var(--bg);font-family:var(--font-head);font-weight:400;font-size:22px;text-transform:none;letter-spacing:0;color:var(--ink);padding:24px 10px 8px;border-bottom:1.5px solid var(--ink);text-align:left}
.dextable tr.genhead small{font-family:var(--font-mono);font-size:11px;color:var(--faint);letter-spacing:.04em}
.dextable tr.genhead{background-image:none}

/* ================================================================= About / Submit
   /about/, /submit/ and /contact/ are the pages about the site rather than
   about a game, so they share three pieces and read as one set: a hero (h1,
   one lead paragraph, then a strip of counted numbers or a button row), the
   creator card at the foot, and the copy buttons. Everything else on those
   pages is the existing system — .section / .section-head, .hacks + .hack,
   .callout, .rules, .two-up, .btn, .tchip — arranged for them.

   All three are built inside .wrap.doc, and .doc's generic h2 / h3 rules are
   declared *after* .section-head's and .hack's, so the block ends with the few
   overrides that put the component sizes back. Same trap as the .wrap padding
   note in DESIGN.md: same specificity, later in the file, silently wins.
   ========================================================================== */

/* ---- the shared hero */
.phero{margin:0 0 34px}
.phero h1{max-width:20ch}
.phero .lead{color:var(--muted);font-size:17px;line-height:1.6;max-width:70ch;margin:16px 0 22px}
@media(max-width:640px){.phero .lead{font-size:15.5px;line-height:1.65}}
.phero .lead b{color:var(--ink);font-weight:600}
.phero-do{display:flex;flex-wrap:wrap;align-items:center;margin:0 0 12px}
.phero-do>*{margin:0 12px 10px 0}
.phero-do .btn{font-size:15px;padding:12px 22px}
/* the sentence under the hero's button or strip: smaller than the lead, still ink-muted */
.pnote{font-size:13.5px;color:var(--muted);margin:0 0 4px;max-width:66ch}
.section .pnote{margin:0 0 6px}

/* ---- "or copy the address", and the copy button the two email pages use.
   The button is a pill, not a .btn: it is the quiet option beside the big one. */
.copyline{display:flex;flex-wrap:wrap;align-items:center;font-size:13.5px;color:var(--muted);margin:0 0 14px}
.copyline>*{margin:0 10px 6px 0}
.copyline .mono{color:var(--ink);font-size:13px;word-break:break-word}
.copybtn{font:inherit;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink);background:var(--surface);border:1px solid var(--line-strong);border-radius:999px;
  padding:5px 13px;cursor:pointer}
.copybtn:hover{border-color:var(--ink)}

/* ---- the counted facts strip: the number over its label, both mono, hairlines
   between the cells (the grid gap is the line colour showing through). */
.pstats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin:0;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
@media(min-width:760px){.pstats{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
  .pstat:last-child:nth-child(odd){grid-column:auto}}
/* an odd last cell fills the row rather than leaving a hole beside itself */
.pstat:last-child:nth-child(odd){grid-column:1/-1}
.pstat{background:var(--surface);padding:14px 16px}
.pstat b{display:block;font-family:var(--font-mono);font-weight:400;font-size:26px;line-height:1.1;color:var(--ink)}
.pstat span{display:block;font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--faint);margin-top:6px;line-height:1.4}

/* ---- "How it works": three steps in a row, each with a small picture made of
   things the site already ships — a shared sprite, the guide app's ✓ / ⚠ note,
   and three type chips. No new image files. */
.hiw{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
@media(min-width:860px){.hiw{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}}
.hiw-step{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-xl);padding:18px 20px 16px}
.hiw-art{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;min-height:84px;
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r-md);padding:10px;margin:10px 0 0}
.hiw-art img{width:64px;height:64px;image-rendering:pixelated}
.hiw-art .tchip{margin:3px}
.hiw-step p{color:var(--muted);font-size:14px;line-height:1.55;margin:8px 0 14px;flex:1}
.hiw-step .hiw-link{font-size:13.5px;font-weight:600;text-decoration:none}
.hiw-step .hiw-link:hover{text-decoration:underline}
/* the guide app's own note (app.css .areanote), at the size this row needs */
.stepnote{display:block;width:100%;padding:6px 10px;border-radius:var(--r-md);font-size:12px;font-weight:600;
  line-height:1.35;background:var(--warn-soft);color:var(--warn)}
.stepnote.ok{background:var(--ok-soft);color:var(--ok);margin-bottom:6px}

/* ---- "What makes a guide good": a checklist in two columns. The ✓ is a glyph
   in the accent rather than a bullet, so a row reads as a thing to send. */
.checks{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:0 28px}
@media(min-width:760px){.checks{grid-template-columns:repeat(2,minmax(0,1fr))}}
.checks li{position:relative;margin:0;padding:9px 0 9px 26px;border-top:1px solid var(--line);
  font-size:14px;line-height:1.5;color:var(--muted)}
.checks li::before{content:"✓";position:absolute;left:0;top:9px;font-family:var(--font-mono);
  font-size:13px;color:var(--accent-text)}
.checks strong{color:var(--ink);font-weight:600}

/* ---- two callouts side by side (they stack under 760px), and the column form
   of .callout: a callout in a column stacks its own children instead of
   spreading them across one line. */
.two-call{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;margin:34px 0 0}
@media(min-width:760px){.two-call{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}}
.calloutcol{display:block}
.calloutcol>*{margin:0;max-width:none}
.calloutcol p+p{margin-top:10px}
.calloutcol .btn{margin-top:16px}
/* the one thing on /submit/ that must not be skimmed past: the warn token, so
   it is a different colour of box rather than another piece of paper */
.callout.warn{background:var(--warn-soft);border-color:var(--warn)}
.callout.warn h2,.callout.warn p{color:var(--ink)}
.callout.warn .wsign{font-family:var(--font-mono);color:var(--warn);margin-right:6px}

/* ---- the creator card, shared by all three pages. The accent rule down the
   left is the one .maker uses on a guide hub, so the person who runs the site
   is introduced the same way a hack's creator is. */
.creator{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:20px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:20px 22px 20px 26px;margin:34px 0 0}
@media(min-width:820px){.creator{grid-template-columns:minmax(0,1fr) minmax(190px,230px);gap:32px}}
.creator::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  border-radius:var(--r-lg) 0 0 var(--r-lg);background:var(--accent)}
.creator-body{min-width:0}
.creator .kicker{margin-bottom:4px}
.creator p{color:var(--muted);font-size:14.5px;line-height:1.6;margin:0 0 12px;max-width:66ch}
.creator p:last-child{margin-bottom:0}
.creator-do{align-self:start}
@media(min-width:820px){.creator-do{border-left:1px solid var(--line);padding-left:26px}}
.creator-btns{display:flex;flex-wrap:wrap;margin:10px 0 0}
.creator-btns .btn{margin:0 8px 8px 0}
.creator-mail{display:block;font-size:13px;margin-top:4px;word-break:break-word}

/* ---- the copyable email template: a <pre> that wraps rather than scrolls, so
   it still reads on a phone. */
.rules ol{margin:8px 0 0;padding-left:20px}
.rules ol li{margin:6px 0}
.rules ol li::marker{font-family:var(--font-mono);font-size:12px;color:var(--faint)}
.mailtpl{font-family:var(--font-mono);font-size:12.5px;line-height:1.75;color:var(--ink);
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r-md);
  padding:12px 14px;margin:12px 0 0;white-space:pre-wrap;overflow-wrap:anywhere}
.tplfoot{display:flex;flex-wrap:wrap;align-items:center;margin:12px 0 0}
.tplfoot>*{margin:0 10px 8px 0}

/* ---- the smallest type on the page, at its foot: credits, small print. */
.finep{margin:34px 0 0;padding-top:16px;border-top:1px solid var(--line);
  font-size:13px;line-height:1.65;color:var(--muted);max-width:86ch}
.finep .kicker{margin-bottom:6px}
.finep a{color:var(--muted)}
.finep a:hover{color:var(--ink)}

/* ---- .doc's generic headings, put back to the component sizes (see the note
   at the top of this block). */
.doc .section-head h2{font-size:clamp(24px,2.6vw,30px);margin:0}
.doc .callout h2,.doc .creator h2{font-size:28px;margin:0 0 10px}
.doc .hack h3{font-size:19px;margin:0}
.doc .hiw-step h3{font-size:22px;margin:8px 0 0}

/* ---------------------------------------------------------------- tip bar
   The support links live in the footer, in the guide rail and on About, which
   is where nobody looks. This is the quiet middle: a slim bar along the bottom
   of the viewport, one line of 13px text, a hairline on top and nothing else.

   It is deliberately NOT an interstitial. A pop-up over the page is what
   AdSense penalises, and on a phone it would be the whole screen; this covers
   about 44px and can be dismissed for a month with one button.

   build.py owns the behaviour (TIPBAR_JS, next to GSEARCH_JS in the page
   shell): the HTML carries an empty `<div id="tipbar" hidden>` and nothing
   else, so a crawler and a no-JS reader see the page exactly as before. The
   script fills it from the third page view on and never on the pages that
   already carry the ask (/about/, /contact/, /submit/, /privacy/, /support/).
   Keys: rh:views, rh:tipdismiss (30 days), rh:tipgave (180 days).

   z-index 35: above the sticky header (30), below the search results (40), the
   guide's slide-over panel (41), the team builder's picker (120) and the
   spoiler gate (200). It never fights anything that wants the whole screen.

   Nothing pads the body until the bar is shown — the script adds `has-tipbar`
   and publishes the bar's measured height as --tipbar-h, so the bar covers no
   content (the interactive guide's checkpoint strip and the stage bar are in
   the flow, and this keeps them clear of it). */
#tipbar[hidden]{display:none}
#tipbar{position:fixed;left:0;right:0;bottom:0;z-index:35;
  background:var(--surface);border-top:1px solid var(--line);color:var(--ink);
  font-size:13px;line-height:1.45;box-shadow:0 -1px 2px rgba(30,27,22,.05);
  transform:translateY(100%);transition:transform .22s ease-out}
#tipbar.in{transform:none}
@media (prefers-reduced-motion:reduce){#tipbar{transition:none;transform:none}}
.tipin{display:flex;align-items:center;justify-content:space-between;
  max-width:1200px;margin:0 auto;padding:9px 16px}
.tipin p{margin:0;padding-right:12px}
.tipin a{color:var(--accent-text);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.tipin a:hover{color:var(--accent)}
.tipx{flex:none;font:inherit;font-size:17px;line-height:1;color:var(--faint);
  background:none;border:1px solid var(--line);border-radius:999px;
  width:28px;height:28px;cursor:pointer;padding:0}
.tipx:hover{color:var(--ink);border-color:var(--line-strong)}
body.has-tipbar{padding-bottom:var(--tipbar-h,48px)}
/* Phones: two short lines at most, so the bar stays a bar. */
@media(max-width:560px){
  .tipin{padding:8px 12px}
  .tipin p{font-size:12.5px}
  body.has-tipbar{padding-bottom:var(--tipbar-h,68px)}
}

/* Buy Me a Coffee button: the cup sits on the text line */
.btn.with-icon{display:inline-flex;align-items:center;gap:8px}
.btn .bmc{flex:none;height:20px;width:auto;display:block}