/* ==========================================================================
   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:900px){.nav a.hide-md{display:none}}
@media(max-width:700px){.gsearch{display:none}.sitehead .gsearch-toggle{display:inline-flex}}
@media(max-width:480px){.nav a.hide-xs{display:none}}
@media(max-width:560px){
  .nav a.hide-sm{display:none}
  .brand{font-size:20px}
  .nav a{padding:8px 7px;font-size:13.5px}
}
.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}
/* 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}
.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 .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}
@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.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>*{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{height:8px;border-radius:2px;background:var(--surface3);overflow:hidden}
.statbars .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:-58px 0 -66px}
.monart .chips{justify-content:center;margin-top:8px;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:74px 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 18 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. */
.timeline{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}
.timeline .track{position:relative;margin-top:20px;height:2px;background:var(--line)}
.timeline .track i{position:absolute;left:0;top:0;height:2px;background:var(--accent)}
.timeline .stops{display:grid;margin-top:-9px;font-family:var(--font-mono);font-size:10.5px;text-align:center}
.timeline .stop{background:none;border:0;padding:0;font:inherit;color:var(--muted);cursor:pointer;min-width:0}
.timeline .stop .dot{display:block;width:16px;height:16px;border-radius:50%;margin:0 auto;background:var(--surface);border:2px solid var(--ink);box-sizing:border-box}
.timeline .stop.done .dot{background:var(--accent);border:3px solid var(--surface);box-shadow:0 0 0 1px var(--accent)}
.timeline .stop.here .dot{background:var(--ink);border:3px solid var(--surface);box-shadow:0 0 0 1.5px var(--ink)}
.timeline .stop .lbl{display:block;margin-top:7px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 2px}
.timeline .stop.here .lbl{color:var(--ink);font-weight:700}
.timeline .stop .cap{display:block;font-size:10px;color:var(--faint)}
.timeline .stop:hover .lbl{color:var(--ink)}
@media(max-width:640px){.timeline .stops.dense .lbl{display:none}.timeline .stops.dense .stop .dot{width:12px;height:12px}}
.timeline .stop:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
/* many checkpoints on a narrow screen: keep the dots, drop every other label */
@media(max-width:900px){.timeline .stops.dense .stop:nth-child(even) .lbl,.timeline .stops.dense .stop:nth-child(even) .cap{visibility:hidden}}
@media(max-width:560px){.timeline .stop .lbl{font-size:9.5px}.timeline .stop .cap{display:none}}
/* 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": three questions, each a row of pills. Every answer
   narrows the guide cards below it (data-sys / data-gen / data-diff on .hack).
   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}
.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}}

/* ---------------------------------------------------------------- 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}