/* ==========================================================================
   ROM Hack Guides — global stylesheet
   Tokens first, then components. Light is the default palette; dark is
   redefined twice on purpose — once for `prefers-color-scheme` (so the OS
   setting wins for anyone who never touches a switch) 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; on anything older every such
   row runs together ("14 guides1,404 areas mapped") and images sized by
   flex-basis ignore min-width:0 and spill out of their card. Flex layouts
   here space themselves with margins on the children. `gap` on a *grid* is
   fine — that has been supported since Safari 10.1 — and is used for all the
   card grids.
   ========================================================================== */

:root{
  /* surfaces, light */
  --bg:#F4F7FB;
  --bg-tint:rgba(29,91,184,.05);      /* the wash behind the hero */
  --surface:#FFFFFF;
  --surface2:#EDF2F9;
  --surface3:#E3EBF5;
  --glass:rgba(255,255,255,.78);

  /* ink */
  --ink:#0C1B2E;
  --muted:#55677D;
  --faint:#7E8EA3;

  /* lines */
  --line:#DDE5F0;
  --line-strong:#C7D3E3;

  /* accent */
  --accent:#1D5BB8;
  --accent-2:#3E86E0;
  --accent-ink:#FFFFFF;
  --accent-soft:#E4EDFB;
  --accent-line:#BBD1F1;

  /* semantic */
  --ok:#12704A;--ok-soft:#DCF0E5;
  --warn:#8A5D06;--warn-soft:#FBEECF;
  --rare:#653AAE;--rare-soft:#EBE2F9;

  /* elevation */
  --shadow:0 1px 2px rgba(12,27,46,.06),0 8px 24px rgba(12,27,46,.07);
  --sh-1:0 1px 2px rgba(12,27,46,.06);
  --sh-2:0 2px 4px rgba(12,27,46,.05),0 10px 28px rgba(12,27,46,.08);
  --sh-3:0 18px 50px rgba(12,27,46,.14);
  --ring:0 0 0 3px rgba(29,91,184,.28);

  /* geometry */
  --r-sm:8px;--r-md:12px;--r-lg:16px;--r-xl:22px;
  --head-h:60px;

  color-scheme:light dark;
}

@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#080C14;
  --bg-tint:rgba(96,150,240,.2);
  --surface:#101724;
  --surface2:#18212F;
  --surface3:#212C3E;
  --glass:rgba(11,16,25,.72);

  --ink:#EAF0F8;
  --muted:#94A5BC;
  --faint:#6D7E96;

  --line:#212C3D;
  --line-strong:#31405A;

  --accent:#74A5FA;
  --accent-2:#A8C6FF;
  --accent-ink:#07101F;
  --accent-soft:#15243D;
  --accent-line:#2B4269;

  --ok:#5FD8A0;--ok-soft:#0F2E22;
  --warn:#F3C868;--warn-soft:#332608;
  --rare:#C7A7F7;--rare-soft:#241a3d;

  --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);
  --ring:0 0 0 3px rgba(116,165,250,.3);
}}

:root[data-theme="dark"]{
  --bg:#080C14;
  --bg-tint:rgba(96,150,240,.2);
  --surface:#101724;
  --surface2:#18212F;
  --surface3:#212C3E;
  --glass:rgba(11,16,25,.72);

  --ink:#EAF0F8;
  --muted:#94A5BC;
  --faint:#6D7E96;

  --line:#212C3D;
  --line-strong:#31405A;

  --accent:#74A5FA;
  --accent-2:#A8C6FF;
  --accent-ink:#07101F;
  --accent-soft:#15243D;
  --accent-line:#2B4269;

  --ok:#5FD8A0;--ok-soft:#0F2E22;
  --warn:#F3C868;--warn-soft:#332608;
  --rare:#C7A7F7;--rare-soft:#241a3d;

  --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);
  --ring:0 0 0 3px rgba(116,165,250,.3);
}

/* ---------------------------------------------------------------- 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:"Source Sans 3",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16.5px;line-height:1.55;
  margin:0;min-height:100vh;display:flex;flex-direction:column;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
/* One soft wash of accent at the top of every page. It's what stops the
   background reading as a flat block of grey.

   z-index:-1 rather than lifting the page content above it. Giving <main> its
   own z-index made it a stacking context, which trapped the guide's detail
   panel and scrim (z-index 41/40) underneath the sticky header (30) — the
   panel's title rendered behind the header bar. A negative pseudo-element
   paints above the body background and below every child, with no stacking
   context anywhere else, which is what this needs. */
body::before{
  content:"";position:fixed;top:0;left:0;right:0;height:520px;pointer-events:none;z-index:-1;
  background:
    radial-gradient(900px 420px at 18% -10%, var(--bg-tint), transparent 70%),
    radial-gradient(700px 360px at 88% -18%, var(--bg-tint), transparent 72%);
}
h1,h2,h3,h4{font-family:"Bricolage Grotesque","Source Sans 3",system-ui,sans-serif;text-wrap:balance;margin:0;line-height:1.12;letter-spacing:-.015em}
a{color:var(--accent);text-underline-offset:2px}
a:hover{color:var(--accent-2)}
img{max-width:100%}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
::selection{background:var(--accent-soft);color:var(--ink)}
.mono{font-family:"JetBrains Mono",ui-monospace,Menlo,monospace;font-variant-numeric:tabular-nums}
.kicker{display:block;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
/* present to screen readers and search engines, invisible on screen */
.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:1120px;margin:0 auto;padding:0 20px}
main{flex:1}
hr{border:0;border-top:1px solid var(--line);margin:32px 0}

/* ---------------------------------------------------------------- header */
.sitehead{
  position:sticky;top:0;z-index:30;
  background:var(--glass);
  -webkit-backdrop-filter:saturate(180%) blur(14px);backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
}
.sitehead .wrap{display:flex;align-items:center;justify-content:space-between;height:var(--head-h)}
.brand{
  display:flex;align-items:center;
  font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:18.5px;
  color:var(--ink);text-decoration:none;letter-spacing:-.025em;
}
.brand:hover{color:var(--ink)}
.brand .ball{
  width:24px;height:24px;border-radius:50%;flex:none;position:relative;margin-right:11px;
  background:conic-gradient(from 180deg,var(--accent) 0 50%,var(--surface2) 50% 100%);
  box-shadow:inset 0 0 0 2px var(--ink),0 2px 8px rgba(29,91,184,.3);
}
.brand .ball::after{content:"";position:absolute;top:7px;right:7px;bottom:7px;left:7px;border-radius:50%;background:var(--surface);box-shadow:inset 0 0 0 2px var(--ink)}
.brand:hover .ball{transform:rotate(-12deg)}
.nav{display:flex;align-items:center}
.nav a{
  color:var(--muted);text-decoration:none;font-weight:600;font-size:14.5px;
  padding:8px 12px;border-radius:999px;margin-left:2px;
}
.nav a:hover{color:var(--ink);background:var(--surface2)}
.nav a[aria-current]{color:var(--accent);background:var(--accent-soft)}
/* Submissions are how the catalogue grows, so the ask is a button, not a link */
.nav a.nav-cta{
  color:var(--accent);background:var(--accent-soft);border:1px solid var(--accent-line);
  font-weight:700;margin-left:8px;
}
.nav a.nav-cta:hover{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
@media(max-width:1040px){.nav .nav-long{display:none}}
@media(max-width:900px){.nav a.hide-md{display:none}}
@media(max-width:560px){
  .nav a.hide-sm{display:none}
  .brand{font-size:16.5px}
  .nav a{padding:8px 9px;font-size:14px}
}
@media (prefers-reduced-motion:no-preference){
  .brand .ball{transition:transform .25s ease}
  .nav a{transition:background .15s,color .15s}
}

/* ---------------------------------------------------------------- footer */
.sitefoot{
  border-top:1px solid var(--line);margin-top:72px;padding:40px 0 44px;
  background:var(--surface);
  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-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);
  font-family:"Source Sans 3",sans-serif;font-weight:700;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:none}
.sitefoot a:hover{color:var(--accent)}
.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 */
.hero{padding:72px 0 40px}
@media(max-width:640px){.hero{padding:44px 0 28px}}
.hero .wrap{display:grid;grid-template-columns:1fr;gap:44px;align-items:center}
@media(min-width:1060px){.hero .wrap{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)}}
/* A wall of sprites behind glass: it fills the right half of a wide hero with
   something that says what the site is about, and it's decorative only. */
.heroart{display:none}
@media(min-width:1060px){
  .heroart{
    display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;
    padding:6px;pointer-events:none;position:relative;
    -webkit-mask-image:radial-gradient(78% 72% at 55% 45%,#000 40%,transparent 100%);
    mask-image:radial-gradient(78% 72% at 55% 45%,#000 40%,transparent 100%);
  }
}
.heroart img{width:100%;height:auto;image-rendering:pixelated;filter:drop-shadow(0 8px 18px rgba(0,0,0,.35))}
.hero h1{
  font-size:clamp(34px,5.4vw,58px);font-weight:700;letter-spacing:-.035em;
  max-width:19ch;line-height:1.04;
}
.hero p{font-size:clamp(17px,1.5vw,19.5px);color:var(--muted);max-width:60ch;margin:20px 0 0}
.hero .stats{display:flex;flex-wrap:wrap;margin:24px 0 0;font-size:14px;color:var(--faint)}
.hero .stats>span{margin:0 26px 6px 0;white-space:nowrap}
.hero .stats b{color:var(--ink);font-weight:700}

.search{position:relative;max-width:600px;margin-top:30px}
.search input{
  width:100%;font:inherit;font-size:17px;color:var(--ink);
  background:var(--surface);border:1px solid var(--line-strong);border-radius:14px;
  padding:16px 18px 16px 50px;box-shadow:var(--sh-2);
}
.search input::placeholder{color:var(--faint)}
.search input:focus{outline:none;border-color:var(--accent);box-shadow:var(--ring),var(--sh-2)}
.search svg{position:absolute;left:17px;top:50%;transform:translateY(-50%);width:20px;height:20px;color:var(--faint);pointer-events:none}
.search-results{
  position:absolute;left:0;right:0;top:calc(100% + 8px);
  background:var(--surface);border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--sh-3);z-index:10;overflow:hidden;
}
.search-results a{display:flex;align-items:center;padding:11px 16px;color:var(--ink);text-decoration:none;border-top:1px solid var(--line)}
.search-results a:first-child{border-top:0}
.search-results a:hover{background:var(--accent-soft)}
.search-results .k{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);min-width:56px;margin-right:12px;flex:none}
.search-results small{color:var(--muted)}

/* ---------------------------------------------------------------- sections */
.section{margin-top:56px}
.section-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:20px}
.section-head h2{font-size:clamp(22px,2.4vw,27px);font-weight:700}
.section-head a{font-size:14.5px;font-weight:700;text-decoration:none;white-space:nowrap;margin-left:16px}
.section-head a:hover{text-decoration:underline}

/* ---------------------------------------------------------------- system cards */
.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))}}
/* Scoped to `.systems`: `.sys` on its own also matches the `badge sys` pill on
   every hack card, which was quietly inheriting this card's flex and padding.
   Centred, because the wordmark is the card's title and a centred mark above
   ragged-left text reads as a mistake — everything shares one axis. */
.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;box-shadow:var(--sh-1);
}
.systems .sys::after{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--accent),var(--accent-2));opacity:0}
.systems .sys:hover{border-color:var(--accent-line);box-shadow:var(--sh-2);transform:translateY(-2px)}
.systems .sys:hover::after{opacity:1}
/* Platform wordmark. Shipped as a white silhouette so one file serves both
   themes — inverted to black on light. Fixed-height box so four very different
   aspect ratios still line up across the row. */
/* The wordmark is the card's title — the name is in its alt text and the heading
   below is screen-reader only, so the card doesn't say the same thing twice.
   Heights are tuned per mark rather than shared: these run from 2.9:1 (the
   two-line GBA) to 8.3:1 (3DS), so one height cap leaves the row ragged. The
   numbers below equalise cap-height, which is what the eye actually reads. */
.systems .sys .art{display:flex;align-items:center;justify-content:center;height:48px;margin-bottom:18px}
.systems .sys .art img{
  max-width:min(158px,100%);width:auto;height:auto;display:block;
  filter:invert(1);            /* light theme: white artwork -> black */
}
/* a system with no wordmark image sets its name in our own type instead */
.systems .sys .art .wordmark{
  display:inline-block;font-family:var(--font-head,inherit);font-weight:700;
  font-size:23px;line-height:1.05;letter-spacing:-.015em;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:hover .art img{transform:translateY(-2px)}
@media (prefers-reduced-motion:no-preference){.systems .sys .art img{transition:transform .2s ease}}
/* .sys .short (the blue "GBA" code) is gone: with the wordmark above and the
   name below it, the card said the same thing three times. */
.systems .sys p{margin:8px 0 0;font-size:13.5px;color:var(--muted);flex:1}
.systems .sys .n{margin-top:14px;font-size:12.5px;font-weight:600;color:var(--faint)}

/* ---------------------------------------------------------------- hack cards */
.hacks{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
@media(min-width:640px){.hacks{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:980px){.hacks{grid-template-columns:repeat(3,minmax(0,1fr))}}
.hack{
  display:flex;flex-direction:column;position:relative;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;color:var(--ink);text-decoration:none;box-shadow:var(--sh-1);
}
.hack:hover{border-color:var(--accent-line);box-shadow:var(--sh-2);transform:translateY(-3px)}
.hack .art{
  height:136px;display:flex;align-items:center;justify-content:center;padding:18px;
  position:relative;overflow:hidden;
  background:
    radial-gradient(120% 140% at 20% 0%, var(--accent-soft), transparent 62%),
    linear-gradient(150deg,var(--surface2),var(--surface3));
  border-bottom:1px solid var(--line);
}
/* a faint grid, so a card with no logo still has something to look at */
.hack .art::before{
  content:"";position:absolute;top:0;right:0;bottom:0;left:0;opacity:.5;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:22px 22px;
  -webkit-mask-image:radial-gradient(80% 80% at 50% 40%,#000,transparent);
  mask-image:radial-gradient(80% 80% at 50% 40%,#000,transparent);
}
.hack .art img{position:relative;min-width:0;max-height:100%;max-width:100%;object-fit:contain;filter:drop-shadow(0 4px 10px rgba(0,0,0,.28))}
.hack:hover .art img{transform:scale(1.035)}
/* Paired hacks (Ruby/Sapphire, Gold/Silver…) cover both games, so the card
   shows both logos side by side. Side by side rather than stacked because the
   logos range from wide banners to nearly square, and halving the height would
   shrink the square ones to nothing.

   Grid, not flex, and `minmax(0,1fr)` rather than `1fr`. Both matter: these
   logos are 1,400–5,000px wide, and a flex item (or an `auto`/`1fr` track)
   takes its minimum size from that intrinsic width on WebKit, which pushes
   the second logo straight out of the card. A minmax(0,…) track can never
   exceed its share, and object-fit letterboxes the image inside it. */
.hack .art.pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;align-items:center;justify-items:center}
.hack .art.pair img{width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain}
/* the fallback when a hack ships no logo: its name set as a wordmark */
.hack .art h3{
  position:relative;font-size:19px;font-weight:700;letter-spacing:-.02em;text-align:center;
  color:var(--ink);opacity:.92;max-width:100%;
}
.hack .body{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1}
.hack .body>*+*{margin-top:9px}
.hack h3{font-size:19.5px}
.hack .meta{display:flex;flex-wrap:wrap;align-items:center;font-size:12.5px;color:var(--faint)}
.hack .meta>*{margin:0 7px 2px 0}
.hack p{margin:0;font-size:14.5px;color:var(--muted);line-height:1.5}
.badge{
  font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  padding:3px 9px;border-radius:999px;background:var(--accent-soft);color:var(--accent);
  border:1px solid var(--accent-line);
}
.badge.sys{background:var(--surface2);color:var(--muted);border-color:var(--line)}
.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)}
@media (prefers-reduced-motion:no-preference){
  .hack,.systems .sys{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
  .hack .art img{transition:transform .3s ease}
  .systems .sys::after{transition:opacity .18s}
}

/* ---------------------------------------------------------------- hack hub */
.hub{padding:34px 0 10px}
.crumbs{font-size:13px;color:var(--faint);margin-bottom:18px}
.crumbs a{color:var(--faint);text-decoration:none}
.crumbs a:hover{color:var(--accent)}
.hubhead{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;align-items:start}
@media(min-width:880px){.hubhead{grid-template-columns:minmax(0,1.5fr) minmax(280px,.9fr);gap:36px}}
.hubhead .logo{display:block;height:74px;width:auto;max-width:100%;margin-bottom:16px;filter:drop-shadow(0 6px 16px rgba(0,0,0,.3))}
.hubhead h1{font-size:clamp(30px,4.4vw,44px);font-weight:700;letter-spacing:-.03em}
.hubhead .tag{color:var(--muted);font-size:17px;margin:12px 0 0;max-width:58ch}

.facts{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:18px 20px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 18px;font-size:14.5px;
  box-shadow:var(--sh-1);
}
.facts dt{color:var(--faint);font-weight:600}
.facts dd{margin:0;font-weight:700}
.facts a{text-decoration:none}
.facts a:hover{text-decoration:underline}

.hubhead .cta{display:flex;flex-wrap:wrap;margin-top:18px}
.hubhead .cta>*{margin:0 10px 10px 0}
.gamepick{display:flex;align-items:center;margin-top:18px;font-size:13.5px;color:var(--muted);flex-wrap:wrap}
.gamepick>*{margin:0 8px 6px 0}
.support{
  display:flex;flex-wrap:wrap;align-items:center;font-size:13.5px;color:var(--muted);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  padding:12px 16px;margin-top:20px;
}
.support>*{margin:3px 10px 3px 0}
.support a{font-weight:700;color:var(--accent);background:var(--accent-soft);border:1px solid var(--accent-line);padding:4px 12px;border-radius:999px;text-decoration:none}
.support a:hover{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}

/* Hub quick links — the handful of answers people arrive looking for */
.quicklinks{display:flex;flex-wrap:wrap;margin:22px 0 -9px}
.quicklinks a{
  font-size:14.5px;font-weight:700;text-decoration:none;color:var(--ink);
  background:var(--surface);border:1px solid var(--line-strong);border-radius:999px;
  padding:9px 17px;box-shadow:var(--sh-1);margin:0 9px 9px 0;
}
.quicklinks a:hover{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);box-shadow:var(--sh-2);transform:translateY(-1px)}
.quicklinks a:first-child{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent)}
.quicklinks a:first-child:hover{background:var(--accent);color:var(--accent-ink)}
@media (prefers-reduced-motion:no-preference){.quicklinks a{transition:all .15s ease}}

.about{margin-top:56px;display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
@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:22px;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:18px 20px;font-size:14px;box-shadow:var(--sh-1);align-self:start}
.notes h2{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);font-family:"Source Sans 3",sans-serif;font-weight:700;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}

/* ---------------------------------------------------------------- buttons */
.btn{
  display:inline-block;font:inherit;font-weight:700;font-size:14.5px;
  padding:11px 18px;border-radius:11px;text-decoration:none;cursor:pointer;
  border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);
  box-shadow:var(--sh-1);text-align:center;
}
.btn:hover{border-color:var(--accent-line);color:var(--ink);box-shadow:var(--sh-2);transform:translateY(-1px)}
.btn.primary{
  background:linear-gradient(180deg,var(--accent-2),var(--accent));
  color:var(--accent-ink);border-color:transparent;
  box-shadow:0 1px 2px rgba(0,0,0,.2),0 8px 20px rgba(29,91,184,.28);
}
.btn.primary:hover{color:var(--accent-ink);filter:brightness(1.06)}
.btn.block{display:block;width:100%}
.gbtn{
  font:inherit;font-weight:700;font-size:13.5px;padding:8px 15px;border-radius:999px;
  border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);cursor:pointer;
}
.gbtn:hover{border-color:var(--accent-line)}
.gbtn.active{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);box-shadow:0 4px 14px rgba(29,91,184,.3)}
@media (prefers-reduced-motion:no-preference){.btn,.gbtn{transition:all .15s ease}}

/* ---------------------------------------------------------------- ads */
.ad{display:flex;justify-content:center;margin:28px 0;min-height:0}
.ad ins{display:block;width:100%}

/* ---------------------------------------------------------------- doc pages */
.doc{padding:34px 0}
.doc h1{font-size:clamp(29px,4vw,40px);font-weight:700;letter-spacing:-.03em}
.doc .lead{color:var(--muted);font-size:17px;margin:12px 0 24px;max-width:66ch}
.doc h2{font-size:22px;margin:38px 0 14px;letter-spacing:-.02em}
.doc h2:first-child{margin-top:0}
.doc h3{font-size:17px;margin:24px 0 10px}

/* page header block: kicker + title + lead, used on detail pages */
.page-head{margin-bottom:28px}
.page-head .kicker{margin-bottom:10px}
.page-head .lead{margin-bottom:0}

/* tables */
.tablewrap{
  overflow-x:auto;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--sh-1);
}
.doc table{border-collapse:collapse;width:100%;font-size:14.5px}
.doc th{
  text-align:left;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--faint);font-weight:700;padding:12px 14px;background:var(--surface2);
  border-bottom:1px solid var(--line);white-space:nowrap;
}
.doc td{padding:11px 14px;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;color:var(--muted)}
.doc td small{color:var(--muted)}
.doc table .monnote{display:block;color:var(--muted);margin-top:3px;line-height:1.4}

/* chips + type chips */
.tchip{
  display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:#fff;padding:3px 9px;border-radius:6px;text-shadow:0 1px 1px rgba(0,0,0,.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22);
}
.cat{display:inline-block;font-size:10.5px;font-weight:700;padding:3px 8px;border-radius:5px;color:#fff;letter-spacing:.04em}
.cat.Physical{background:#C0392B}.cat.Special{background:#2C5AA0}.cat.Status{background:#6E7C8C}
/* "where you find it" lists inside the item and tutor tables */
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}
/* Three columns of real prose don't compress; below this the wrap scrolls
   sideways as one readable table instead of squeezing every cell to two
   words a line. */
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}
/* On a phone the third column is the answer people came for, and side-scrolling
   to reach it is the wrong trade. Below this the rows stack into cards, so the
   locations sit directly under the item instead of off the edge. */
@media (max-width:700px){
  table.items{min-width:0}
  table.items thead{display:none}
  table.items tr{display:block;padding:12px 14px;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}
  /* same treatment for any table marked stackable, keeping the column name as
     a label so a stacked cell still says what it is */
  table.stackable thead{display:none}
  table.stackable tr{display:block;padding:12px 14px;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-size:10.5px;letter-spacing:.09em;
    text-transform:uppercase;color:var(--faint);font-weight:700;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:600;background:var(--surface);
  border:1px solid var(--line);border-radius:999px;padding:6px 13px;
  text-decoration:none;color:var(--ink);
}
.chips a:hover{border-color:var(--accent-line);background:var(--accent-soft);color:var(--accent)}

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

/* prose */
.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 */
.monlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(122px,1fr));gap:10px}
.monlist a{
  display:flex;flex-direction:column;align-items:center;padding:12px 8px;
  border-radius:var(--r-md);background:var(--surface);border:1px solid var(--line);
  text-decoration:none;color:var(--ink);font-size:13.5px;font-weight:600;text-align:center;
}
.monlist a>*+*{margin-top:3px}
.monlist a:hover{border-color:var(--accent-line);background:var(--accent-soft);transform:translateY(-2px);box-shadow:var(--sh-2)}
.monlist img{width:68px;height:68px;image-rendering:pixelated}
.monlist small{font-weight:400;color:var(--faint)}
@media (prefers-reduced-motion:no-preference){.monlist a{transition:all .15s ease}}

/* ---------------------------------------------------------------- Pokémon page */
/* Two columns at width: the at-a-glance card (sprite, types, abilities, stats)
   sits beside the tables instead of leaving a column of empty page. */
.monlayout{display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
@media(min-width:980px){
  .monlayout{grid-template-columns:minmax(0,1fr) 320px;gap:40px;align-items:start}
  /* the at-a-glance column reads first on a phone and sits to the right on a
     desktop, so `order` rather than DOM order decides where it lands */
  .monmain{order:1}
  .monside{order:2;position:sticky;top:calc(var(--head-h) + 20px)}
  .monmain>h2:first-child{margin-top:0}
}
.monside{display:flex;flex-direction:column}
.monside>*+*{margin-top:16px}
/* ---- type blend ----------------------------------------------------------
   Borrowed idea: tint a Pokémon's panel with its own two type colours instead
   of the site accent, so a Fire/Flying page and a Water page stop looking
   identical. `--t1`/`--t2` are raw "r,g,b" triplets set inline by `type_vars()`
   in build.py, which keeps the alpha here — and alpha is the whole game: strong
   enough to read as that Pokémon's colour, weak enough that the sprite keeps its
   contrast. Falls back to a neutral grey wherever the variables aren't set. */
.monart{
  display:flex;flex-direction:column;align-items:center;justify-content:center;padding:22px 18px;
  background:
    linear-gradient(135deg, rgba(var(--t1,140,150,170),.28), rgba(var(--t2,140,150,170),.28)),
    linear-gradient(160deg,var(--surface2),var(--surface3));
  border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1);
}
/* the pills now sit on their own colour, so give them a little separation */
.monart .tchip{border-radius:999px;box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 1px 3px rgba(0,0,0,.35)}
.monart img{width:132px;height:132px;image-rendering:pixelated;filter:drop-shadow(0 8px 16px rgba(0,0,0,.28))}
.monart .chips{justify-content:center;margin-top:14px}
.monart .tchip{font-size:11.5px;padding:4px 11px}
.sidecard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 18px;box-shadow:var(--sh-1)}
.sidecard h2{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);font-family:"Source Sans 3",sans-serif;font-weight:700;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}
/* a sprite still floated into a page that has no two-column layout */
.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}

/* ---------------------------------------------------------------- prev / next */
/* Story-ordered and dex-ordered content gets story-ordered navigation: the
   reader at checkpoint 4 is exactly the person who wants checkpoint 5. */
.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:14px 18px;border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--surface);text-decoration:none;color:var(--ink);box-shadow:var(--sh-1);
}
.prevnext a:hover{border-color:var(--accent-line);background:var(--accent-soft);box-shadow:var(--sh-2);transform:translateY(-2px)}
.prevnext a.next{text-align:right}
.prevnext span{display:block;font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);margin-bottom:3px}
.prevnext b{font-size:16px;font-weight:700;letter-spacing:-.01em}
@media (prefers-reduced-motion:no-preference){.prevnext a{transition:all .15s ease}}
@media(max-width:520px){
  .prevnext{grid-template-columns:minmax(0,1fr)}
  .prevnext a.next{text-align:left}
}

/* what a boss team is made of, counted rather than judged */
.typespread{display:inline-flex;flex-wrap:wrap;vertical-align:middle}
.typespread>*{margin:2px 6px 2px 0}
.dim{color:var(--muted)}
/* the row of sprites beside each fight on the gym-leaders page */
.teamrow{line-height:0;white-space:nowrap}
.teamrow img{width:40px;height:40px;image-rendering:pixelated;margin-right:2px}

/* ---------------------------------------------------------------- dex + compare */
/* a stat that went up or down against what it is being measured against */
.delta{font-size:12px;font-weight:700;white-space:nowrap}
.delta.up{color:var(--ok)}
.delta.down{color:var(--warn)}
.statbars .delta{justify-self:start}

/* the numerical dex: dense, scannable, six stat columns.
   Each row carries its own type blend — much fainter than the panel version,
   because this has to stay readable a thousand rows deep. */
.dextable{font-size:14px}
.dextable td,.dextable th{padding:8px 10px}
.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),.13), rgba(var(--t2,140,150,170),.13));
}
.doc .dextable tbody tr:hover td{
  background:rgba(var(--t1,140,150,170),.13);   /* keep the type on hover, don't grey it out */
}

/* the comparison tool */
/* Two independent columns, each owning its own picker *and* its own result.
   The pickers used to share one row above both panels, which meant the labels
   had to say "left" and "right" — and on a phone, where the columns stack, you
   got both pickers followed by both panels, so the dropdown for the second
   Pokémon sat nowhere near it. This way the control is always directly above
   the thing it controls, at every width, and the labels are just "Guide" and
   "Pokémon". */
.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;box-shadow:var(--sh-1)}
.cmp-pick .field{display:flex;flex-direction:column}
.cmp-pick label{font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);font-weight:700;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:10px;padding:10px 12px;width:100%;min-height:44px;
}
.cmp-pick select:focus,.cmp-pick input:focus{outline:none;border-color:var(--accent);box-shadow:var(--ring)}
.cmp-col{display:flex;flex-direction:column}
.cmp-col>*+*{margin-top:14px}
.cmp-col h2{font-size:26px;letter-spacing:-.02em;margin:0}
.cmp-col .cmp-guide{margin:0;font-size:13.5px;font-weight:700;color:var(--accent);
  letter-spacing:.06em;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)}
/* four columns, not three — and specific enough to beat `.sidecard .statbars`,
   which otherwise shears every delta onto the next row */
.sidecard .statbars.cmpbars,.statbars.cmpbars{grid-template-columns:78px 42px minmax(0,1fr) auto}

/* ---------------------------------------------------------------- coverage */
/* "What this guide covers" — says per section whether the numbers are the
   hack's own, the base game's, or something the hack never published */
.covtable{font-size:14.5px}
.covtable td:first-child{font-weight:700;white-space:nowrap}
.covtable td:nth-child(2){white-space:nowrap}
.covtable td:last-child{color:var(--muted)}
.cov{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:700;line-height:1.6;white-space:nowrap}
.cov.ok{background:var(--ok-soft);color:var(--ok)}
.cov.base{background:var(--accent-soft);color:var(--accent)}
.cov.warn{background:var(--warn-soft);color:var(--warn)}
.cov.na{background:var(--surface2);color:var(--muted)}
.cmp-note{font-size:13.5px;color:var(--muted);margin-top:8px}

/* ---------------------------------------------------------------- level caps */
.caps{display:flex;align-items:center;margin:0 0 16px;flex-wrap:wrap}
.caps>*{margin:0 16px 8px 0}
.caps .capnum{
  display:inline-block;font-size:30px;font-weight:700;color:var(--accent);
  background:var(--accent-soft);border:1px solid var(--accent-line);
  border-radius:var(--r-md);padding:8px 18px;line-height:1.1;
}
.caps span:last-child{color:var(--muted);font-size:14.5px}

/* ---------------------------------------------------------------- made by */
.maker{
  position:relative;overflow:hidden;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-lg);
  padding:20px 22px;margin-bottom:32px;box-shadow:var(--sh-1);
}
.maker::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,var(--accent-2),var(--accent))}
.maker .kicker{margin-bottom:4px}
.maker h2{margin:0 0 8px;font-size:24px}
.maker p{color:var(--muted);font-size:14.5px;margin:0 0 14px;max-width:66ch}
.maker-links{display:flex;flex-wrap:wrap;margin-bottom:-8px}
.maker-links a{
  display:inline-block;font-size:13px;font-weight:700;color:var(--accent);
  background:var(--accent-soft);border:1px solid var(--accent-line);
  padding:6px 13px;border-radius:999px;text-decoration:none;margin:0 8px 8px 0;
}
.maker-links a:hover{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}

/* ---------------------------------------------------------------- submit */
.callout{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  background:
    radial-gradient(90% 200% at 0% 0%, var(--accent-soft), transparent 60%),
    var(--surface);
  border:1px solid var(--line);border-radius:var(--r-xl);padding:24px 30px;box-shadow:var(--sh-1);
}
.callout>*{margin:8px 20px 8px 0}
.callout>*:last-child{margin-right:0}
.callout h2{font-size:23px;margin:0 0 6px}
.callout p{color:var(--muted);margin:0;max-width:62ch}
.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;box-shadow:var(--sh-1)}
.rules b{display:block;color:var(--ink);margin-top:12px}
.rules b:first-child{margin-top:0}
/* the two audiences for a submission, side by side on a wide screen */
.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:19px;margin:32px 0 10px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.submit-form label{display:block;font-size:14px;font-weight:700;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:15.5px;
  padding:11px 13px;border:1px solid var(--line-strong);border-radius:11px;
  background:var(--surface);color:var(--ink);
}
.submit-form input:focus,.submit-form textarea:focus{outline:none;border-color:var(--accent);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-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);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:15.5px;padding:13px 24px}