/* Pasture Wiki. The page is a Poké Ball: a coloured top half (recoloured by the chosen type), a seam, and the results below.
   Type colours (--tc, --tink, --c-<type>) are emitted into assets/types.css by build_wiki.py. */
@font-face{font-family:"Paytone One"; src:url("fonts/paytone-one.woff2") format("woff2"); font-weight:400; font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible Next"; src:url("fonts/atkinson-next.woff2") format("woff2"); font-weight:400 800; font-display:swap}

:root{
  --display:"Paytone One", "Arial Rounded MT Bold", "Segoe UI", system-ui, sans-serif;
  --body:"Atkinson Hyperlegible Next", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --paper:#edf1f8; --card:#ffffff; --ink:#131d35; --muted:#586380; --line:#d5dcec; --chip:#e3e8f4;
  --lens:#2b6df0; --mark:#ffdf5c; --mark-ink:#131d35;
  --seam:#10162a; --seam-in:#ffffff;
  --screen:#0d1626; --screen-2:#182640; --screen-ink:#eaf1ff; --screen-mute:#93a3c6;
  --warn-bg:#fff4d6; --warn-ink:#5b4300; --warn-line:#f0d17a;
  --shadow:0 1px 2px rgba(16,22,42,.06), 0 10px 28px -12px rgba(16,22,42,.22);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#0a0f1d; --card:#131c33; --ink:#e9efff; --muted:#9aa7c9; --line:#25314f; --chip:#1c2745;
    --lens:#6ea0ff; --mark:#7a5f00; --mark-ink:#fff6d6;
    --seam:#03060d; --seam-in:#e9efff;
    --screen:#070c17; --screen-2:#111c33;
    --warn-bg:#3a2f0d; --warn-ink:#ffe9a8; --warn-line:#6b5514;
    --shadow:0 10px 28px -14px rgba(0,0,0,.7); color-scheme:dark;
  }
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--paper); color:var(--ink); font:16px/1.55 var(--body)}
a{color:inherit}
img{max-width:100%}
.pix{image-rendering:pixelated}
.sprite{position:absolute; width:0; height:0; overflow:hidden}
.wrap{max-width:1120px; margin:0 auto; padding-inline:18px}
main.wrap{padding-block:0 60px}
button{font:inherit; cursor:pointer; color:inherit}
:focus-visible{outline:3px solid var(--lens); outline-offset:2px}
h1,h2,h3{font-family:var(--display); font-weight:400; letter-spacing:.2px}
h1{margin:0; font-size:clamp(30px,5.4vw,46px); line-height:1.08}
h2{font-size:22px; margin:34px 0 12px; line-height:1.2}
h3{font-size:17px; margin:0 0 8px}
.muted{color:var(--muted)}
.tiny{font-size:13.5px}
.num{font-variant-numeric:tabular-nums}
.ic{width:1em; height:1em; display:block}

/* ---------- top half: header + page banner, coloured by the current type ---------- */
.top{background:var(--tc); color:var(--tink); transition:background-color .45s ease, color .45s ease;
  background-image:radial-gradient(90% 120% at 100% 0%, rgba(255,255,255,.26), transparent 62%)}
.top :focus-visible{outline-color:var(--tink)}
header.site .hbar{display:flex; flex-wrap:wrap; align-items:center; gap:8px 20px; padding-block:14px}
.brand{display:flex; align-items:center; gap:10px; font:22px/1 var(--display); text-decoration:none; letter-spacing:.3px}
.brand .ball{width:34px; height:34px; flex:none}
.brand:hover .ball{animation:roll .6s ease}
header.site nav{display:flex; gap:2px; flex-wrap:wrap}
header.site nav a{text-decoration:none; padding:6px 13px; border-radius:999px; font-weight:600}
header.site nav a:hover{background:rgba(255,255,255,.2)}
header.site nav a[aria-current="page"]{background:var(--tink); color:var(--tc)}
.hsearch{margin-left:auto; display:flex}
.hsearch input{font:inherit; font-size:15px; width:min(250px,46vw); padding:8px 16px; border-radius:999px; border:0;
  background:rgba(255,255,255,.94); color:#131d35}
.hsearch input::placeholder{color:#5d6784}
.hsearch input:focus-visible{outline-color:#fff}

/* the seam between the halves, with the ball button on it */
.seam{position:relative; height:12px; background:var(--seam); margin-bottom:46px; z-index:3}
.seam .ball{position:absolute; left:50%; top:50%; width:70px; height:70px; margin:-35px 0 0 -35px; border-radius:50%; border:0; padding:0;
  background:var(--seam); display:grid; place-items:center; text-decoration:none; cursor:pointer}
.seam .ball::before{content:""; width:42px; height:42px; border-radius:50%; background:var(--seam-in);
  box-shadow:inset 0 0 0 4px var(--paper), inset 0 -6px 0 rgba(0,0,0,.08); transition:background-color .2s, transform .2s}
.seam .ball:hover::before, .seam .ball:focus-visible::before{background:var(--tc); transform:scale(1.08)}
.seam .ball.roll{animation:roll .7s cubic-bezier(.3,1.4,.5,1)}
@keyframes roll{0%{transform:rotate(0)}30%{transform:rotate(-24deg)}65%{transform:rotate(18deg)}100%{transform:rotate(0)}}

.crumbs{font-size:14px; margin:0 0 14px; opacity:.9}
.crumbs a{text-decoration:none; border-bottom:1px solid currentColor}
.pagehead{padding-block:6px 30px}
.pagehead h1{margin-top:2px}
.top .badge{background:var(--tink); color:var(--tc); font-size:14px; padding:2px 12px; vertical-align:6px}
.pagehead p{margin:8px 0 0; max-width:60ch; opacity:.95}

/* ---------- home: controls ---------- */
.homehero{display:grid; grid-template-columns:minmax(0,1fr) 376px; gap:30px; align-items:center; padding-block:6px 34px}
.homehero h1{margin-bottom:6px}
.homehero .lead{margin:0 0 16px; max-width:52ch; opacity:.95}
.searchrow{display:flex; gap:8px}
.searchrow input[type=search]{flex:1; min-width:0; font:inherit; font-size:18px; padding:13px 18px; border-radius:999px; border:0;
  background:#fff; color:#131d35; box-shadow:0 8px 20px -10px rgba(0,0,0,.45)}
.searchrow input[type=search]::placeholder{color:#5d6784}
.searchrow input:focus-visible{outline:3px solid var(--tink); outline-offset:2px}
.btn{border:0; background:var(--tink); color:var(--tc); border-radius:999px; padding:0 20px; font-weight:700}
.btn:hover{filter:brightness(1.12)}
.btn.quiet{background:var(--chip); color:var(--ink); padding:7px 14px; font-size:14px; border:2px solid var(--line)}
.btn.quiet:hover{border-color:var(--lens); filter:none}
details.filters{margin-top:12px}
details.filters summary{cursor:pointer; width:max-content; font-weight:600; font-size:14.5px; opacity:.95}
.opts{display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; margin-top:10px; font-size:14.5px}
.opts label.chk{display:flex; align-items:center; gap:7px; cursor:pointer}
.opts select, .tools select{font:inherit; font-size:14.5px; padding:6px 10px; border-radius:10px; border:1px solid var(--line); background:var(--card); color:var(--ink)}
.seg{display:inline-flex; gap:3px; padding:3px; background:rgba(0,0,0,.2); border-radius:999px; border:0; margin:0}
.seg legend{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
.seg label{position:relative}
.seg input{position:absolute; opacity:0; inset:0; cursor:pointer; margin:0}
.seg span{display:block; padding:5px 14px; border-radius:999px; font-weight:600; font-size:14px}
.seg input:checked + span{background:var(--tink); color:var(--tc)}
.seg input:focus-visible + span{outline:3px solid var(--lens); outline-offset:1px}
.tools .seg{background:var(--chip)}
.tools .seg span{color:var(--muted)}
.tools .seg input:checked + span{background:var(--ink); color:var(--card)}

/* type medallions on a dark tray */
.tray{margin-top:16px; background:var(--screen); color:var(--screen-ink); border-radius:26px; padding:14px 12px 12px;
  display:grid; grid-template-columns:repeat(9,minmax(0,1fr)); gap:10px 4px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.tb{position:relative; display:flex; flex-direction:column; align-items:center; gap:5px; padding:0; border:0; background:none; color:inherit;
  font-size:12px; font-weight:600; line-height:1.1; transition:opacity .2s}
.tb .disc{position:relative; width:42px; height:42px; border-radius:50%; background:var(--tc); color:var(--tink); display:grid; place-items:center;
  font-size:23px; transition:transform .18s cubic-bezier(.3,1.5,.5,1), box-shadow .18s}
.tb:hover:not(:disabled) .disc{transform:translateY(-3px) scale(1.06)}
.tb .n{position:absolute; right:-5px; top:-4px; min-width:20px; padding:1px 4px; border-radius:999px; background:var(--screen); color:var(--screen-ink);
  font-size:10.5px; font-weight:800; line-height:14px; text-align:center; box-shadow:0 0 0 2px var(--tc)}
.tb[aria-pressed="true"] .disc{box-shadow:0 0 0 3px var(--screen), 0 0 0 6px #fff; transform:scale(1.06)}
.tb[aria-pressed="true"]{color:#fff}
.tray.picking .tb[aria-pressed="false"]{opacity:.5}
.tb:disabled{opacity:.22; cursor:not-allowed}
.tb:focus-visible{outline:3px solid #fff; outline-offset:3px; border-radius:10px}
.trayfoot{grid-column:1/-1; display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin-top:4px; padding-top:10px;
  border-top:1px solid rgba(255,255,255,.1); font-size:13.5px; color:var(--screen-mute)}
.trayfoot .seg{background:rgba(255,255,255,.1)}
.trayfoot .seg span{color:var(--screen-mute); padding:4px 12px}
.trayfoot .seg input:checked + span{background:#fff; color:#10162a}
.trayfoot .clr{margin-left:auto; border:0; background:none; color:#fff; font-weight:700; text-decoration:underline; padding:2px 4px}

/* the Pokédex screen */
.dex{position:relative; border-radius:30px; border:7px solid var(--seam); background:var(--screen); color:var(--screen-ink); overflow:hidden;
  box-shadow:0 22px 44px -22px rgba(0,0,0,.7); min-height:462px; display:flex; flex-direction:column}
.dex .stage{position:relative; flex:none; height:230px; display:grid; place-items:center;
  background:radial-gradient(64% 70% at 50% 56%, color-mix(in srgb, var(--tc) 88%, transparent), color-mix(in srgb, var(--tc) 25%, transparent) 55%, transparent 76%),
             linear-gradient(180deg, var(--screen-2), var(--screen))}
.dex .stage::after{content:""; position:absolute; left:26%; right:26%; bottom:20px; height:16px; border-radius:50%; background:rgba(0,0,0,.4); filter:blur(5px)}
.dex .stage img{position:relative; z-index:1; width:196px; height:196px; object-fit:contain; filter:drop-shadow(0 8px 10px rgba(0,0,0,.35))}
.dex .stage img.pop{animation:pop .5s cubic-bezier(.2,1.4,.4,1)}
.dex .flash{position:absolute; inset:0; z-index:2; pointer-events:none; opacity:0; background:radial-gradient(circle at 50% 56%, #fff, transparent 60%)}
.dex .flash.go{animation:flash .55s ease-out}
.dex .stage img.swap{animation:swap .22s ease-out}
@keyframes swap{from{transform:scale(.88); opacity:.35}}
@keyframes pop{0%{transform:scale(.3); opacity:0}100%{transform:none; opacity:1}}
@keyframes flash{0%{opacity:.95}100%{opacity:0}}
.dex .no{position:absolute; z-index:2; left:16px; top:12px; font:20px var(--display); color:var(--screen-mute)}
.dex .pips{position:absolute; z-index:2; right:14px; top:12px; display:flex; gap:6px}
.dex .info{padding:4px 14px 14px; display:flex; flex-direction:column; gap:10px; flex:1}
.dex h2{margin:0; font-size:28px; line-height:1.1}
.dex ul{list-style:none; margin:0; padding:0; display:grid; gap:4px}
.dex li a{display:grid; grid-template-columns:24px 1fr auto; align-items:center; gap:10px; padding:5px 10px; border-radius:12px; text-decoration:none;
  background:rgba(255,255,255,.06); font-size:14.5px}
.dex li a:hover{background:rgba(255,255,255,.14)}
.dex li img{width:24px; height:24px}
.dex li b{font-variant-numeric:tabular-nums}
.dex .more{font-size:13.5px; color:var(--screen-mute); padding-left:4px}
.dex .more a{color:#fff}
.dex .none{color:var(--screen-mute); font-size:14.5px}
.dex .keys{display:flex; gap:6px; margin-top:auto; align-items:center}
.dex .keys button{width:38px; height:38px; flex:none; border-radius:50%; border:0; background:rgba(255,255,255,.12); color:#fff; font-size:18px; line-height:1}
.dex .keys button:hover{background:rgba(255,255,255,.24)}
.dex .keys .rnd{width:auto; padding:0 14px 0 8px; white-space:nowrap; display:flex; align-items:center; gap:8px; border-radius:999px; font-weight:700; font-size:14.5px}
.dex .keys .rnd svg{width:24px; height:24px}
.dex .keys .open{margin-left:auto; height:38px; display:flex; align-items:center; padding:0 16px; white-space:nowrap; border-radius:999px; background:var(--tc); color:var(--tink);
  font-weight:800; text-decoration:none; font-size:14.5px}
.dex .keys .open:hover{filter:brightness(1.1)}

/* ---------- home: results ---------- */
.bar{display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; margin-bottom:16px}
#summary{font:22px/1.25 var(--display); flex:1; min-width:220px}
#summary small{font:14.5px var(--body); color:var(--muted); margin-left:4px}
.tools{display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px}
.tools label.sel{display:flex; align-items:center; gap:7px; font-size:14.5px; color:var(--muted)}
#matches{margin-bottom:8px}
#matches h3{font:600 14px var(--body); color:var(--muted); margin:10px 0 6px}
.tip{color:var(--muted); font-size:14px; margin:0 0 14px}
kbd{font:600 12px var(--body); padding:1px 6px; border-radius:6px; background:var(--chip); border:1px solid var(--line)}
.quick{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 20px}
.quick .lab{align-self:center; color:var(--muted); font-size:14.5px; margin-right:2px}

.deck{display:grid; grid-template-columns:repeat(auto-fill,minmax(158px,1fr)); gap:12px; margin:0; padding:0; list-style:none}
.mon{position:relative; display:flex; flex-direction:column; align-items:center; gap:3px; padding:10px 8px 11px; border-radius:22px;
  background:var(--card); border:2px solid var(--line); text-decoration:none; overflow:hidden; text-align:center;
  content-visibility:auto; contain-intrinsic-size:auto 214px}
.mon::before{content:""; position:absolute; inset:0 0 auto 0; height:104px;
  background:linear-gradient(150deg, color-mix(in srgb, var(--c1) 34%, transparent), color-mix(in srgb, var(--c2) 22%, transparent))}
.mon > *{position:relative}
.mon .no{align-self:flex-start; font:13px var(--display); color:var(--muted); padding-left:4px}
.mon img{width:90px; height:90px; object-fit:contain; margin-top:-8px; transition:transform .2s cubic-bezier(.3,1.5,.5,1)}
.mon:hover img, .mon.on img{transform:translateY(-3px) scale(1.07)}
.mon b{font:16px/1.15 var(--display); margin-top:2px; overflow-wrap:anywhere}
.mon:hover, .mon.on{border-color:var(--c1)}
.mon.on{box-shadow:0 0 0 3px color-mix(in srgb, var(--c1) 40%, transparent)}
.mon .pips{display:flex; gap:5px; margin:2px 0 3px}
.mon .dr{display:flex; flex-wrap:wrap; justify-content:center; gap:4px; min-height:24px; align-items:center; color:var(--muted); font-size:12.5px}
.mon .dr img{width:22px; height:22px; margin:0; transform:none}
.mon .hd{display:flex; align-items:center; gap:5px; max-width:100%; background:var(--chip); border-radius:999px; padding:2px 9px 2px 3px; color:var(--ink); font-size:12.5px}
.mon .hd em{font-style:normal; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0}
.mon .hd i{font-style:normal; font-weight:800}
.deck li.grouphead{grid-column:1/-1}
.deck li.grouphead:first-child{margin-top:0}
.grp{display:flex; align-items:center; gap:10px; margin:8px 0 0; padding:6px 18px 6px 6px; width:max-content; max-width:100%;
  border-radius:999px; background:var(--tc); color:var(--tink); font:21px/1 var(--display)}
.grp .disc{width:36px; height:36px; border-radius:50%; background:var(--tink); color:var(--tc); display:grid; place-items:center; font-size:21px}
.grp small{font:600 14px var(--body); opacity:.85}
button.grp{border:0; cursor:pointer; text-align:left}
button.grp:hover{filter:brightness(1.07)}
button.grp:focus-visible{outline:3px solid var(--lens); outline-offset:3px}
.grp .chev{width:18px; height:18px; margin-left:2px; transition:transform .2s}
.grp[aria-expanded="false"] .chev{transform:rotate(-90deg)}
.folded{display:none !important}

/* type pips and chips */
.tp{display:inline-grid; place-items:center; width:24px; height:24px; border-radius:50%; background:var(--tc); color:var(--tink); font-size:14px; flex:none}
.tchip{display:inline-flex; align-items:center; gap:7px; padding:3px 14px 3px 4px; border-radius:999px; background:var(--tc); color:var(--tink);
  font:14px/1 var(--display); text-decoration:none}
.tchip .tp{background:var(--tink); color:var(--tc); width:26px; height:26px; font-size:15px}
a.tchip:hover{filter:brightness(1.08)}
.types{display:flex; gap:8px; margin:10px 0 0; flex-wrap:wrap}

/* ---------- cards, tables ---------- */
.card{background:var(--card); border:2px solid var(--line); border-radius:22px; box-shadow:var(--shadow)}
.card.pad{padding:18px 20px}
.tablecard{background:var(--card); border:2px solid var(--line); border-radius:22px; box-shadow:var(--shadow); overflow:hidden}
.tablecard.scroll{overflow-x:auto}
table{width:100%; border-collapse:collapse}
thead th{text-align:left; font-size:14px; font-weight:700; color:var(--muted); padding:0; border-bottom:2px solid var(--line); background:var(--card); white-space:nowrap}
thead th button, thead th > span{all:unset; box-sizing:border-box; display:block; width:100%; padding:12px 14px; cursor:pointer}
thead th > span{cursor:default}
thead th button:hover{color:var(--ink)}
thead th button:focus-visible{outline:3px solid var(--lens); outline-offset:-3px}
thead th[aria-sort="ascending"] button::after{content:" \25B2"; color:var(--lens); font-size:11px}
thead th[aria-sort="descending"] button::after{content:" \25BC"; color:var(--lens); font-size:11px}
th.num, td.num{text-align:center}
td{padding:9px 14px; border-bottom:1px solid var(--line); vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tr.alt td{background:color-mix(in srgb, var(--chip) 55%, transparent)}
tr.ctx td{opacity:.55}
tr.bad td{background:var(--warn-bg)}
tr.gh td{background:var(--paper); padding:12px 14px 8px}
tr.gh .grp{margin:0}
.who{display:flex; align-items:center; gap:10px; min-width:0}
.who img{flex:none; width:42px; height:42px; object-fit:contain}
.who img.pix{width:32px; height:32px}
.who a{font-weight:700}
.who .pips{display:flex; gap:4px}
.only-m{display:none}
td.tcol .pips{display:flex; gap:5px; justify-content:flex-start}
a.link{text-decoration:none; border-bottom:2px dotted var(--muted)}
a.link:hover{color:var(--lens); border-bottom-color:var(--lens)}
mark{background:var(--mark); color:var(--mark-ink); border-radius:4px; padding:0 2px}
.chance{display:inline-flex; flex-direction:column; align-items:center; gap:4px; min-width:64px; font-weight:700; font-variant-numeric:tabular-nums}
.bar-c, .chance .bar{display:block; width:58px; height:5px; background:var(--chip); border-radius:3px; overflow:hidden}
.chance .bar i{display:block; height:100%; background:var(--tc, var(--lens)); border-radius:3px}
.chance .always{color:var(--ink)}
.badge{display:inline-block; font:700 12px var(--body); padding:1px 9px; border-radius:999px; background:var(--chip); color:var(--muted); vertical-align:2px}
.badge.warn{background:var(--warn-bg); color:var(--warn-ink); border:1px solid var(--warn-line)}
.notice{background:var(--warn-bg); color:var(--warn-ink); border:2px solid var(--warn-line); border-radius:16px; padding:11px 16px; margin:16px 0; font-size:14.5px}
.notice a{color:inherit; font-weight:700}
.code{font:13px ui-monospace, Consolas, monospace; background:var(--chip); padding:2px 7px; border-radius:6px}
.empty{padding:44px 16px; text-align:center; color:var(--muted)}
.empty b{color:var(--ink)}
.empty button{margin-top:12px}

.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{display:inline-flex; align-items:center; gap:8px; padding:5px 14px 5px 7px; border-radius:999px; background:var(--card); color:var(--ink);
  border:2px solid var(--line); text-decoration:none; font-size:14.5px; font-weight:600}
button.chip{font-family:inherit}
.chip:hover{border-color:var(--lens)}
.chip img{width:28px; height:28px; object-fit:contain}
.chip img.pix{width:22px; height:22px}
.chip small{color:var(--muted); font-weight:400}

/* ---------- Pokémon and item pages ---------- */
.pokehero{display:grid; grid-template-columns:auto minmax(0,1fr); gap:10px 30px; align-items:center; margin-top:-8px; padding:22px 26px; position:relative}
.pokehero .art{width:220px; height:220px; border-radius:50%; display:grid; place-items:center;
  background:radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--c1) 50%, transparent), color-mix(in srgb, var(--c2) 26%, transparent) 70%, transparent 71%)}
.pokehero .art img{width:200px; height:200px; object-fit:contain; filter:drop-shadow(0 8px 8px rgba(16,22,42,.25))}
.pokehero .art.icon{background:var(--screen); width:150px; height:150px; box-shadow:inset 0 0 0 5px var(--seam)}
.pokehero .art.icon img{width:84px; height:84px; filter:none}
.pokehero .dexno{font:20px var(--display); color:var(--muted)}
.pokehero h1{font-size:clamp(34px,6vw,56px)}
.pokehero p{margin:12px 0 0; max-width:62ch}
.facts{display:flex; flex-wrap:wrap; gap:10px 26px; margin:14px 0 0; padding:0; list-style:none; font-size:15px}
.facts b{font:26px var(--display); margin-right:6px}
.cols{display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:24px; align-items:start; margin-top:4px}
.side dl{margin:0; display:grid; grid-template-columns:auto 1fr; gap:8px 16px; font-size:15px}
.side dt{color:var(--muted)}
.side dd{margin:0}
.side h3{margin:20px 0 8px}
.stat{display:grid; grid-template-columns:78px 36px 1fr; gap:8px; align-items:center; font-size:14px; margin:6px 0}
.stat b{font-variant-numeric:tabular-nums}
.stat .track{height:10px; background:var(--chip); border-radius:5px; overflow:hidden}
.stat .track i{display:block; height:100%; background:var(--tc); border-radius:5px; transform-origin:left; animation:grow .8s cubic-bezier(.2,.9,.3,1) both}
@keyframes grow{from{transform:scaleX(0)}}
.pn{display:flex; justify-content:space-between; gap:10px; margin-top:30px; font-size:15px}
.pn a{text-decoration:none; padding:9px 16px; background:var(--card); border:2px solid var(--line); border-radius:999px; font-weight:600}
.pn a:hover{border-color:var(--lens)}

/* filter rows on lists and item pages */
.filterbar{display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin:6px 0 16px}
.filterbox{flex:1 1 260px; min-width:0; font:inherit; font-size:17px; padding:11px 18px; border-radius:999px; border:2px solid var(--line); background:var(--card); color:var(--ink)}
.filterbox:focus-visible{outline:3px solid var(--lens); outline-offset:2px}
.filterbar select{font:inherit; font-size:15px; padding:9px 12px; border-radius:12px; border:2px solid var(--line); background:var(--card); color:var(--ink)}
.typerow{display:flex; flex-wrap:wrap; gap:6px; margin:0 0 16px}
.typerow .tf{display:inline-flex; align-items:center; gap:6px; padding:3px 12px 3px 3px; border-radius:999px; border:2px solid var(--line); background:var(--card);
  font:600 13.5px var(--body)}
.typerow .tf .tp{width:24px; height:24px}
.typerow .tf:hover{border-color:var(--tc)}
.typerow .tf[aria-pressed="true"]{background:var(--tc); border-color:var(--tc); color:var(--tink)}
.typerow .tf[aria-pressed="true"] .tp{background:var(--tink); color:var(--tc)}
.typerow .tf small{opacity:.75; font-weight:400}
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(122px,1fr)); gap:10px; list-style:none; margin:0; padding:0}
.grid li[hidden]{display:none}
.tile{display:flex; flex-direction:column; align-items:center; gap:3px; padding:10px 6px 9px; text-align:center; text-decoration:none;
  background:var(--card); border:2px solid var(--line); border-radius:20px; font-size:14px; font-weight:600; position:relative; overflow:hidden; height:100%}
.tile:hover{border-color:var(--c1, var(--lens))}
.tile.mo::before{content:""; position:absolute; inset:0 0 auto; height:66px; background:linear-gradient(150deg, color-mix(in srgb, var(--c1) 32%, transparent), color-mix(in srgb, var(--c2) 20%, transparent))}
.tile > *{position:relative}
.tile img{width:68px; height:68px; object-fit:contain}
.tile img.pix{width:40px; height:40px; margin:14px 0}
.tile small{color:var(--muted); font-weight:400; font-size:12.5px}
.tile .pips{display:flex; gap:4px}
.tile .pips .tp{width:20px; height:20px; font-size:12px}
.grid li.grouphead{grid-column:1/-1; margin-top:16px}
.grid li.grouphead:first-child{margin-top:0}

footer.site{margin-top:44px; color:var(--muted); font-size:14px}
footer.site p{margin:5px 0; max-width:80ch}

/* ---------- small screens ---------- */
@media (max-width:940px){
  .homehero{grid-template-columns:1fr}
  .dex{min-height:0}
  .dex .stage{height:190px}
  .dex .stage img{width:160px; height:160px}
  .cols{grid-template-columns:1fr}
}
@media (max-width:640px){
  .tray{grid-template-columns:repeat(6,minmax(0,1fr))}
  .pokehero{grid-template-columns:1fr; justify-items:start; padding:18px}
  .pokehero .art{width:180px; height:180px}
  .pokehero .art img{width:164px; height:164px}
  .stack thead{display:none}
  .stack, .stack tbody{display:block}
  .stack tr{display:grid; grid-template-columns:1fr auto; gap:3px 12px; padding:11px 14px; border-bottom:1px solid var(--line)}
  .stack tr.alt td, .stack tr.bad td{background:none}
  .stack tr.alt{background:color-mix(in srgb, var(--chip) 55%, transparent)}
  .stack tr.bad{background:var(--warn-bg)}
  .stack tbody tr:last-child{border-bottom:0}
  .stack td{display:block; padding:0; border:0}
  .stack td.tcol{display:none}
  .stack tr.gh{display:block; padding:10px 14px 6px; background:var(--paper)}
  .stack tr.gh td{display:block; background:none; padding:0}
  .only-m{display:flex}
  .stack td[data-label="Pokémon"], .stack td[data-label="Item"]{grid-column:1}
  .stack td[data-label="Drop item"]{grid-column:1; grid-row:2}
  .stack td[data-label="Chance"]{grid-column:2; grid-row:1 / span 2; align-self:center}
  .stack td[data-label="Qty"], .stack td[data-label="Rolls"]{grid-column:1; color:var(--muted); font-size:14px; text-align:left}
  .stack td[data-label="Qty"]::before{content:"Qty "}
  .stack td[data-label="Rolls"]::before{content:"Rolls per drop "}
  .hsearch{margin-left:0; width:100%}
  .hsearch input{width:100%}
  .deck{grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:10px}
  .dex .stage{height:150px}
  .dex .stage img{width:128px; height:128px}
  .dex li:nth-child(n+3){display:none}
  .dex .more{display:none}
  .homehero{gap:22px; padding-bottom:26px}
}
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{animation:none !important; transition:none !important}
}