:root{
  --bg:#f6f2e8; --surface:#fffdf6; --surface-2:#fbf7ec;
  --ink:#221f18; --muted:#6c6458; --faint:#948b7a;
  --line:#e6ddca; --line-strong:#d8cdb2;
  --accent:#cf8f10; --accent-ink:#8a5c00;
  --boss:#b23a2e; --good:#3f7d4e; --good-bg:#e7f0e4;
  --new:#b5741a; --new-bg:#f6ecd7; --ace-bg:#fbf0cf;
  --btn-ink:#26200a;
  --phys:#b23a2e; --spec:#3660b0;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#12110d; --surface:#1b1913; --surface-2:#211e16;
    --ink:#ece6d7; --muted:#a39a86; --faint:#7d745f;
    --line:#2c281f; --line-strong:#3a3527;
    --accent:#eab53f; --accent-ink:#f0c463;
    --boss:#e0685a; --good:#6cbd80; --good-bg:#1c2a1d;
    --new:#e0a24a; --new-bg:#2a2417; --ace-bg:#2c2610;
    --btn-ink:#181405;
    --phys:#e0685a; --spec:#7ea2e6;
  }
}
:root[data-theme="light"]{
  --bg:#f6f2e8; --surface:#fffdf6; --surface-2:#fbf7ec;
  --ink:#221f18; --muted:#6c6458; --faint:#948b7a;
  --line:#e6ddca; --line-strong:#d8cdb2;
  --accent:#cf8f10; --accent-ink:#8a5c00;
  --boss:#b23a2e; --good:#3f7d4e; --good-bg:#e7f0e4;
  --new:#b5741a; --new-bg:#f6ecd7; --ace-bg:#fbf0cf;
  --btn-ink:#26200a;
  --phys:#b23a2e; --spec:#3660b0;
}
:root[data-theme="dark"]{
  --bg:#12110d; --surface:#1b1913; --surface-2:#211e16;
  --ink:#ece6d7; --muted:#a39a86; --faint:#7d745f;
  --line:#2c281f; --line-strong:#3a3527;
  --accent:#eab53f; --accent-ink:#f0c463;
  --boss:#e0685a; --good:#6cbd80; --good-bg:#1c2a1d;
  --new:#e0a24a; --new-bg:#2a2417; --ace-bg:#2c2610;
  --btn-ink:#181405;
  --phys:#e0685a; --spec:#7ea2e6;
}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
  line-height:1.6;-webkit-font-smoothing:antialiased;font-size:16px}
.wrap{max-width:980px;margin:0 auto;padding:0 22px 120px}
a{color:var(--accent-ink)}

/* ---- wiki breadcrumb nav ---- */
.wikinav{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:20px 0 0;
  font-family:var(--mono);font-size:12px;letter-spacing:.03em;color:var(--faint)}
.wikinav a{color:var(--accent-ink);text-decoration:none}
.wikinav a:hover{text-decoration:underline}
.wikinav .sep{color:var(--faint)}
.wikinav .here{color:var(--muted)}

/* ---- pokemon header w/ sprite ---- */
.pokehead{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.spritebox{flex:none;width:96px;height:96px;display:flex;align-items:center;justify-content:center;
  background:var(--surface-2);border:1px solid var(--line-strong);border-radius:14px}
.spritebox img{width:80px;height:80px;image-rendering:pixelated;image-rendering:crisp-edges}

/* ---- header ---- */
header.mast{padding:28px 0 30px;border-bottom:2px solid var(--ink)}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent-ink);margin:0 0 14px;font-weight:600}
h1{font-size:clamp(28px,5vw,44px);line-height:1.05;margin:0;letter-spacing:-.02em;
  text-wrap:balance;font-weight:800}
h1 .sub{display:block;font-size:clamp(15px,2.2vw,18px);font-weight:500;color:var(--muted);
  letter-spacing:0;margin-top:14px;max-width:62ch}
.metaline{font-family:var(--mono);font-size:12.5px;color:var(--faint);margin-top:20px;
  display:flex;flex-wrap:wrap;gap:6px 18px}
.metaline b{color:var(--muted);font-weight:600}

/* ---- sections ---- */
section{padding:40px 0;border-bottom:1px solid var(--line)}
section:last-of-type{border-bottom:none}
h2{font-size:13px;font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin:0 0 6px;font-weight:600;display:flex;gap:12px;align-items:baseline}
h2 .n{color:var(--accent);font-weight:700}
.lead{font-size:20px;font-weight:700;letter-spacing:-.01em;margin:0 0 16px;text-wrap:balance}
p{margin:0 0 14px;max-width:66ch}
h3{font-size:16px;margin:22px 0 10px;font-weight:700;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
strong{font-weight:700}
.mono{font-family:var(--mono)}

/* ---- search / filter bar ---- */
.searchbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 18px}
.searchbar input[type=search]{flex:1;min-width:200px;font:inherit;font-size:14px;
  padding:11px 14px;border-radius:9px;border:1px solid var(--line-strong);
  background:var(--surface);color:var(--ink)}
.searchbar input[type=search]:focus{outline:2px solid var(--accent);outline-offset:-1px}
.count{font-family:var(--mono);font-size:12px;color:var(--faint);white-space:nowrap}
.typefilter{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 20px}
.typefilter button{cursor:pointer;border:1px solid var(--line-strong);background:var(--surface);
  border-radius:20px;padding:0;font:inherit}
.typefilter button .ty{border-radius:20px;padding:5px 12px;min-width:auto}
.typefilter button.active{border-color:var(--ink)}
.typefilter button.active .ty{outline:2px solid var(--ink);outline-offset:-2px}
.clearbtn{font-family:var(--mono);font-size:11.5px;color:var(--accent-ink);background:none;
  border:1px solid var(--line-strong);border-radius:20px;padding:5px 12px;cursor:pointer}

/* ---- dex grid ---- */
.dexgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:10px}
.dexcard{display:flex;flex-direction:column;gap:6px;background:var(--surface);
  border:1px solid var(--line-strong);border-radius:11px;padding:12px 13px;
  text-decoration:none;color:inherit;transition:transform .1s ease,border-color .1s ease}
.dexcard:hover{transform:translateY(-2px);border-color:var(--accent)}
.dexcard .num{font-family:var(--mono);font-size:11px;color:var(--faint)}
.dexcard .nm{font-size:15px;font-weight:700;letter-spacing:-.01em}
.dexcard .tys{display:flex;gap:4px;flex-wrap:wrap}
.dexcard .bst{font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:auto}
.hidden{display:none !important}

/* ---- generic card grid (hub, trainer classes) ---- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:14px;margin:8px 0 0}
.card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line-strong);
  border-radius:13px;padding:20px 20px 18px;text-decoration:none;color:inherit;
  transition:transform .12s ease,border-color .12s ease,box-shadow .12s ease}
.card:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:0 8px 24px rgba(0,0,0,.10)}
.card .kick{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  font-weight:700;margin-bottom:12px;color:var(--good)}
.card .ct{font-size:19px;font-weight:800;letter-spacing:-.01em;margin-bottom:7px}
.card .cd{font-size:14px;color:var(--muted);flex:1;margin:0}
.card .go{margin-top:15px;font-family:var(--mono);font-size:12px;font-weight:700;color:var(--accent-ink)}

/* ---- trainer class list ---- */
.classlist{display:flex;flex-direction:column;gap:8px}
.classrow{display:flex;justify-content:space-between;align-items:center;gap:12px;
  background:var(--surface);border:1px solid var(--line);border-radius:9px;
  padding:12px 16px;text-decoration:none;color:inherit;transition:border-color .1s ease}
.classrow:hover{border-color:var(--accent)}
.classrow .cn{font-weight:700;font-size:15px}
.classrow .cn .star{color:var(--accent-ink)}
.classrow .cc{font-family:var(--mono);font-size:12px;color:var(--faint);white-space:nowrap}

/* ---- stat bars ---- */
.statrows{display:flex;flex-direction:column;gap:7px;margin:4px 0 8px}
.statrow{display:grid;grid-template-columns:74px 1fr 34px;align-items:center;gap:10px;font-size:13px}
.statrow .sl{font-family:var(--mono);font-size:11px;color:var(--muted)}
.statrow .sv{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right}
.statbar{height:8px;border-radius:5px;background:var(--surface-2);border:1px solid var(--line);overflow:hidden}
.statbar i{display:block;height:100%;background:var(--accent);border-radius:5px}
.stattotal{font-family:var(--mono);font-size:12.5px;color:var(--faint);margin-top:2px}

/* ---- evolution chain ---- */
.evochain{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:4px 0 14px}
.evonode{display:flex;flex-direction:column;align-items:center;gap:4px;text-decoration:none;
  color:inherit;background:var(--surface);border:1px solid var(--line-strong);border-radius:10px;
  padding:10px 14px;text-align:center}
.evonode.cur{border-color:var(--ink);background:var(--surface-2)}
.evonode .nm{font-weight:700;font-size:14px}
.evoarrow{font-family:var(--mono);font-size:12px;color:var(--faint);display:flex;flex-direction:column;
  align-items:center;gap:2px}
.evoarrow .how{font-size:10px}

/* ---- tables ---- */
.tbl{overflow-x:auto;border:1px solid var(--line);border-radius:9px;margin:4px 0 16px}
table{border-collapse:collapse;width:100%;font-size:14px;background:var(--surface)}
th,td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);font-weight:600;background:var(--surface-2);position:sticky;top:0}
tr:last-child td{border-bottom:none}
.tnum{font-variant-numeric:tabular-nums}
td.mv,span.mvname{font-weight:600}
td.ov{color:var(--accent-ink);font-weight:700}

/* ---- type chips ---- */
.ty{font-family:var(--mono);font-size:9.5px;letter-spacing:.03em;font-weight:700;
  padding:2px 6px;border-radius:4px;text-transform:uppercase;line-height:1.4;white-space:nowrap;
  display:inline-block;min-width:34px;text-align:center}
.ty.RCK{background:#c9b98e;color:#3a2f10}.ty.GRD{background:#dcc79a;color:#4a370c}
.ty.WTR{background:#a9cdea;color:#123a5c}.ty.ICE{background:#b6e0e4;color:#0f4650}
.ty.ELE{background:#f2d98a;color:#5a4400}.ty.STL{background:#c3c9d1;color:#2c3742}
.ty.GRS{background:#b3d8a3;color:#1e4415}.ty.FAI{background:#efc2d6;color:#5e1c3c}
.ty.POI{background:#cdaedd;color:#3d1554}.ty.SND{background:#e6cfa0;color:#4d3a0d}
.ty.PSY{background:#f2b6c1;color:#5c1526}.ty.FIR{background:#f3b892;color:#6a2a06}
.ty.FIG{background:#d9a58f;color:#54200e}.ty.GHO{background:#b3a4d0;color:#2c1c50}
.ty.DRK{background:#a79c93;color:#241c14}.ty.NOR{background:#d5cfc0;color:#3a352a}
.ty.FLY{background:#bcc9ea;color:#233258}.ty.BUG{background:#c3d093;color:#33420c}
.ty.DRG{background:#a9b6e6;color:#1f2a63}.ty.LGT{background:#f0e6a8;color:#5a5210}
.ty.STE{background:#d9d3c7;color:#4a4438}.ty.QQQ{background:#cfc9bc;color:#3a352a}
@media (prefers-color-scheme:dark){.ty{filter:saturate(.82) brightness(.92)}}
:root[data-theme="dark"] .ty{filter:saturate(.82) brightness(.92)}
:root[data-theme="light"] .ty{filter:none}

/* ---- category badges ---- */
.cat{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  padding:3px 8px;border-radius:5px;font-weight:700;display:inline-block;white-space:nowrap}
.cat.p{background:var(--phys);color:#fff}
.cat.s{background:var(--spec);color:#fff}
.cat.st{background:var(--surface-2);color:var(--muted);border:1px solid var(--line-strong)}

.callout{background:var(--surface-2);border:1px solid var(--line-strong);border-left:3px solid var(--accent);
  border-radius:8px;padding:14px 16px;margin:16px 0;font-size:14px}
.callout b{color:var(--accent-ink)}
.callout p{max-width:none;margin:0}
ul.tight{margin:6px 0 14px;padding-left:20px}
ul.tight li{margin:5px 0;font-size:14.5px}
code{font-family:var(--mono);font-size:12.5px;background:var(--surface-2);padding:1px 6px;border-radius:5px;
  border:1px solid var(--line)}

/* ---- prev/next dex nav ---- */
.pnav{display:flex;justify-content:space-between;gap:12px;margin-top:8px}
.pnav a{flex:1;display:flex;flex-direction:column;gap:2px;background:var(--surface);
  border:1px solid var(--line-strong);border-radius:10px;padding:12px 14px;text-decoration:none;color:inherit}
.pnav a:hover{border-color:var(--accent)}
.pnav a.next{text-align:right;align-items:flex-end}
.pnav .k{font-family:var(--mono);font-size:10.5px;color:var(--faint);text-transform:uppercase;letter-spacing:.06em}
.pnav .v{font-weight:700;font-size:14px}

footer{padding:40px 0 0;color:var(--faint);font-family:var(--mono);font-size:12px}
footer a{color:var(--accent-ink)}
@media (max-width:560px){
  .wrap{padding:0 16px 80px}
  h1{font-size:26px}
  .statrow{grid-template-columns:60px 1fr 30px}
  .pnav{flex-direction:column}
}