:root{
  --ink:#08131f;--ink1:#0E2034;--line:#1d3650;
  --gold:#FFC21E;--gold2:#FFD555;--crimson:#FF5C5C;--jade:#2FCB7A;--cobalt:#5AA6F5;
  --tx:#EAF0F7;--dim:#9CA4B2;--faint:#687080;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:"Saira Condensed","Segoe UI",system-ui,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--ink);color:var(--tx);font-family:var(--sans);line-height:1.55;font-size:16.5px;font-weight:500}
.wrap{max-width:1120px;margin:0 auto;padding:34px 22px 90px}
header{border-left:5px solid var(--gold);padding:6px 0 6px 18px;margin-bottom:6px}
h1{margin:0;font-size:32px;font-style:italic;text-transform:uppercase;letter-spacing:.5px;font-weight:700}
h1 b{color:var(--gold)}
.sub{color:var(--dim);font-size:14px;margin:4px 0 0}
h2{margin:38px 0 6px;font-size:20px;border-bottom:1px solid var(--line);padding-bottom:8px}
h3{margin:24px 0 6px;font-size:16px;color:var(--gold2)}
p{margin:8px 0}
a{color:var(--cobalt)}
nav{margin:18px 0 6px;display:flex;flex-wrap:wrap;gap:8px}
nav a{display:inline-block;padding:5px 12px;border:1px solid var(--line);border-radius:999px;font-size:12.5px;
  text-transform:uppercase;letter-spacing:.8px;text-decoration:none;color:var(--dim)}
nav a:hover{border-color:var(--gold);color:var(--gold)}
nav a[aria-current="page"]{border-color:var(--gold);color:var(--ink);background:var(--gold);font-weight:700}
table{width:100%;border-collapse:collapse;margin:14px 0;font-size:13.5px}
th,td{text-align:left;padding:8px 11px;border-bottom:1px solid #16304d;vertical-align:top}
th{color:var(--gold);text-transform:uppercase;letter-spacing:1px;font-size:11px;position:sticky;top:0;background:var(--ink)}
td.num,th.num{text-align:right;font-family:var(--mono);font-size:12.5px}
tr:hover td{background:#0c1c2e}
/* The wrapper scrolls, never the page. Without a min-width the table instead squeezes itself into a phone
   viewport, crushing the name column into one word per line and making every row ten lines tall. */
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.scroll table{min-width:660px}
.pill{display:inline-block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:2px 8px;border-radius:10px;white-space:nowrap}
.e-katon,.r-legendary{background:#39161a;color:var(--crimson)}
.e-suiton,.r-rare{background:#0d2439;color:var(--cobalt)}
.e-doton,.r-common{background:#2a2313;color:var(--gold)}
.e-futon,.r-epic{background:#0e2c1c;color:var(--jade)}
.e-raiton{background:#2f2140;color:#c9a6ff}
.e-neutral,.r-uncommon{background:#1a2534;color:var(--dim)}
.card{background:var(--ink1);border:1px solid #1a3250;border-radius:10px;padding:14px 18px;margin:12px 0}
.card.key{border-left:3px solid var(--gold)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin:16px 0}
.stat{background:var(--ink1);border:1px solid #1a3250;border-radius:10px;padding:14px 16px;text-decoration:none;display:block;color:inherit}
a.stat:hover{border-color:var(--gold)}
.stat .v{font-size:26px;font-weight:700;color:var(--gold);line-height:1.1}
.stat .l{font-size:12px;color:var(--dim);text-transform:uppercase;letter-spacing:1px;margin-top:4px}
.muted{color:var(--faint);font-size:13px}
.kicker{color:var(--crimson);text-transform:uppercase;letter-spacing:2px;font-size:11px;font-weight:700}
code{font-family:var(--mono);font-size:12.5px;color:var(--gold2)}
.filter{width:100%;max-width:340px;background:#05101c;border:1px solid var(--line);border-radius:6px;
  color:var(--tx);font-family:var(--sans);font-size:14px;padding:8px 12px;margin:12px 0 0}
.filter:focus{outline:none;border-color:var(--gold)}
.count{color:var(--faint);font-size:12.5px;margin:6px 0 0}
footer{margin-top:56px;border-top:1px solid var(--line);padding-top:14px;color:var(--faint);font-size:12.5px}
.crumb{font-size:11.5px;text-transform:uppercase;letter-spacing:1.4px;color:var(--faint);margin:0 0 10px}
.crumb a{color:var(--faint);text-decoration:none}
.crumb a:hover{color:var(--gold)}
.crumb span{margin:0 7px;opacity:.5}
/* On this page. A sidebar on a wide screen, a plain block above the prose on a narrow one — the jump list is
   most useful exactly where the page is longest, so it must survive being read on a phone. */
.layout{display:grid;grid-template-columns:minmax(0,1fr) 208px;gap:34px;align-items:start}
.toc{position:sticky;top:18px;font-size:13px;border-left:1px solid var(--line);padding-left:14px}
.toc .t{color:var(--gold);text-transform:uppercase;letter-spacing:1.2px;font-size:10.5px;font-weight:700;margin-bottom:7px}
.toc ol{list-style:none;margin:0;padding:0}
.toc li{margin:0 0 5px}
.toc a{color:var(--dim);text-decoration:none;display:block;line-height:1.35}
.toc a:hover{color:var(--gold)}
h2{scroll-margin-top:16px}
h2 .anchor{color:var(--faint);text-decoration:none;opacity:0;font-weight:400;margin-left:8px;font-size:15px}
h2:hover .anchor{opacity:1}
h2 .anchor:hover{color:var(--gold)}
.related{margin-top:44px;border-top:1px solid var(--line);padding-top:16px}
.related .t{color:var(--gold);text-transform:uppercase;letter-spacing:1.4px;font-size:10.5px;font-weight:700}
.related .links{display:flex;flex-wrap:wrap;gap:8px;margin-top:9px}
.related a{display:inline-block;padding:5px 12px;border:1px solid var(--line);border-radius:999px;font-size:12.5px;
  text-decoration:none;color:var(--dim)}
.related a:hover{border-color:var(--gold);color:var(--gold)}
.pager{display:flex;justify-content:space-between;gap:12px;margin-top:20px;flex-wrap:wrap}
.pager a{flex:1 1 46%;min-width:200px;border:1px solid var(--line);border-radius:10px;padding:11px 15px;
  text-decoration:none;color:var(--tx);background:var(--ink1)}
.pager a:hover{border-color:var(--gold)}
.pager .d{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:1.4px;color:var(--faint)}
.pager .n{font-weight:700;color:var(--gold2)}
.pager .next{text-align:right}
/* Counter grid: the one table on the site a reader is meant to memorise, so it gets rows they can scan rather
   than a wall of pairs. */
.matchups{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:10px;margin:14px 0}
.matchup{background:var(--ink1);border:1px solid #1a3250;border-radius:10px;padding:12px 15px}
.matchup .who{font-weight:700;font-size:15px;margin-bottom:6px}
.matchup .line{font-size:12.5px;color:var(--dim);margin:3px 0}
.matchup .up{color:var(--jade)}
.matchup .down{color:var(--crimson)}
.grouphead{margin:30px 0 0;font-size:14px;color:var(--gold2);text-transform:uppercase;letter-spacing:1.2px}
@media(max-width:900px){.layout{grid-template-columns:minmax(0,1fr)}
  .toc{position:static;order:-1;border-left:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
    padding:12px 0;margin-bottom:6px}
  .toc ol{display:flex;flex-wrap:wrap;gap:6px 16px}}
@media(max-width:620px){.wrap{padding:22px 14px 60px}h1{font-size:25px}}