:root{
  --navy:#000116; --cyan:#17B4D8; --gray:#EAEBEC;
  --teal:#0A7FA3; --gold:#FCC615; --olive:#685C38;
  --mint:#2FE6B0; --coral:#FF6B6B; --sunset:#FF9F45;
  --card:#0a0d22; --border:#1c2340; --muted:#8b93ad;
  --well:#070a1c; --hover:#0d1230;
  --wheel-sat:70; --wheel-light:57;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  background:var(--navy); color:var(--gray);
  font-family:var(--font-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Helvetica,Arial,sans-serif);
  line-height:1.6; min-height:100vh; padding:28px 20px 60px;
  display:flex; flex-direction:column; align-items:center;
  background-image:radial-gradient(ellipse 80% 45% at 50% -5%, color-mix(in srgb, var(--cyan) 12%, transparent), transparent 70%);
}
/* Form controls don't inherit type from the page — left alone, a browser
   draws them in its own Arial. These pages don't link chrome.css, which
   carries the same rule for the rest of the site. */
input,select,textarea,button{font-family:inherit}

.wrap{width:100%;max-width:760px}
h1{font-size:24px;letter-spacing:-.3px;margin-bottom:4px}
.sub{color:var(--muted);font-size:14px;margin-bottom:24px}
.card .sub{margin-bottom:0}

.card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:18px 20px;margin-bottom:14px}
.msg{color:var(--muted);font-size:12.5px;line-height:1.5;min-height:1.2em}
.msg.bad{color:var(--coral)}
.msg.good{color:var(--mint)}
.hint{color:var(--muted);font-size:12.5px;line-height:1.5;margin-top:12px}
.hint b{color:var(--gray)}
.hint code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;color:var(--gray)}

.btn{border:1px solid var(--border);background:transparent;color:var(--muted);border-radius:10px;
  padding:10px 15px;font:inherit;font-size:13.5px;cursor:pointer;transition:.15s;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.btn:hover{border-color:var(--cyan);color:var(--gray)}
.btn.primary{background:var(--cyan);border-color:var(--cyan);color:var(--navy);font-weight:650}
.btn.primary:hover{filter:brightness(1.12);color:var(--navy)}
.btn[aria-pressed="true"]{background:var(--cyan);border-color:var(--cyan);color:var(--navy);font-weight:650}
.btn:disabled{opacity:.45;cursor:default}
.btn.go{border-color:var(--teal);color:var(--gray)}
.btn.go:hover{border-color:var(--mint);color:var(--mint)}
.btn.danger:hover{border-color:var(--coral);color:var(--coral)}
.bar{display:flex;flex-wrap:wrap;gap:8px}
.bar .pair{display:flex;gap:8px;flex:none}

.btn.icon{padding:0;width:42px;height:40px;display:inline-flex;align-items:center;justify-content:center}
.btn.icon svg{width:19px;height:19px;fill:currentColor;display:block}
.shuf .ln{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.rndpanel{margin-top:12px;padding:14px 15px;border:1px solid var(--border);border-radius:12px;background:var(--well)}
.rndpanel[hidden]{display:none}
.rlbl{font-size:10.5px;letter-spacing:1.3px;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:9px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{
  background:var(--card);border:1px solid var(--border);color:var(--muted);
  border-radius:9px;min-height:32px;padding:0 11px;font:inherit;font-size:12.5px;font-weight:700;
  cursor:pointer;transition:.15s;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
.chip:hover{border-color:var(--cyan);color:var(--gray)}
.chip[aria-pressed="true"]{background:var(--cyan);border-color:var(--cyan);color:var(--navy)}
.chip.ghost{background:transparent;font-weight:600;font-size:12px;min-height:28px;padding:0 10px}
.chip small{display:block;font-size:9.5px;font-weight:600;letter-spacing:.2px;opacity:.75;margin-top:-3px}

.entry{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap}
.art{
  flex:0 0 238px;height:238px;border-radius:14px;border:1px solid var(--border);
  background:var(--well);display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;
}
.art img{width:100%;height:100%;object-fit:contain;image-rendering:auto;display:block}
.art .ph{color:var(--border);font-size:44px;font-weight:800;letter-spacing:-2px}
/* Below this width .info no longer fits beside .art, so it takes the row
   under it and the art becomes a banner across the top — full width, and
   356px tall where the square beside the text is 238.

   Two things are load-bearing here. The breakpoint is worked back from the
   sizes above rather than picked: side by side needs 238 + 20 gap + 260 of
   .info = 518px of card, which is a 760px-capped .wrap at 600px of viewport
   once the body's 20px padding and the card's own 21px are off. Left at the
   old 520 the row would break on its own between 521 and 599 and strand
   .info under a thumbnail.

   And the art fills the row rather than staying a fixed square: a 356px box
   in a 518px card is a square with a third of the row empty beside it, which
   is the same stranded shape by another route.

   The height is the row's own width, not a number. Official artwork is
   square and the img is object-fit:contain, so what gets painted is
   min(boxW, boxH) — a box taller than it is wide grows nothing but empty
   space. At 600px of viewport a fixed 356 was painting the Pokémon at 356
   inside a 518-wide box, throwing away 162px of the room it had. Squaring
   the box hands all of it back: 518 there, and 1.4x what it was across most
   of this band. 534 is the 1.5x ceiling, kept as a cap in case the wrap or
   the breakpoint ever moves; below ~430px of viewport the art is already
   limited by the width of the screen, not by this. */
@media(max-width:600px){
  .art{flex:0 0 auto;width:100%;height:356px}
  /* height:auto with an aspect-ratio the browser cannot read would collapse
     the box — .art img is height:100% of it — so the square is only asked
     for where it is understood. */
  @supports (aspect-ratio:1){
    .art{height:auto;aspect-ratio:1;max-height:534px}
  }
}
.info{flex:1 1 260px;min-width:0}
.num{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;color:var(--muted);font-weight:700}
.namerow{display:flex;align-items:center;gap:10px}
.nm{flex:1;min-width:0;font-size:26px;font-weight:700;letter-spacing:-.4px;line-height:1.2;margin:2px 0 2px}

.starbtn{
  flex:none;width:38px;height:38px;padding:0;background:none;border:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;border-radius:10px;transition:.15s;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
.starbtn svg{width:24px;height:24px;display:block;
  fill:none;stroke:var(--border);stroke-width:1.8;stroke-linejoin:round;transition:.15s}
.starbtn:hover svg{stroke:var(--gold)}
.starbtn[aria-pressed="true"] svg{fill:var(--gold);stroke:var(--gold)}
.starbtn:active{transform:scale(.9)}

.mon .fav{position:absolute;top:4px;left:6px;font-size:10px;color:var(--gold);line-height:1}

.firstbtn svg{stroke:var(--border)}
.firstbtn:hover svg{stroke:var(--mint)}
.firstbtn[aria-pressed="true"] svg{fill:var(--mint);stroke:var(--mint)}

.ballbtn{color:var(--border)}
.ballbtn:hover{color:var(--coral)}
.ballbtn[aria-pressed="true"]{color:var(--coral)}
.ballbtn svg{width:23px;height:23px;stroke:none;fill:none}
.ball .o,.ball .band,.ball .c{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.ball .top,.ball .base{fill:none;stroke:none}
.ballbtn[aria-pressed="true"] .ball .base{fill:#f5f5f5}
.ballbtn[aria-pressed="true"] .ball .top{fill:#EE1515}
.ballbtn[aria-pressed="true"] .ball .o,
.ballbtn[aria-pressed="true"] .ball .band,
.ballbtn[aria-pressed="true"] .ball .c{stroke:#17171b}
.ballbtn[aria-pressed="true"] .ball .c{fill:#f5f5f5}
.dexbtn{color:var(--border)}
.dexbtn:hover{color:var(--cyan)}
.dexbtn[aria-pressed="true"]{color:var(--cyan)}
.dexbtn svg{width:23px;height:23px;stroke:none;fill:none}
.dex .body,.dex .lens,.dex .screen{
  fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round;
}
.dex .led{fill:currentColor;stroke:none}
.dex .tick{fill:none;stroke:none}
.dexbtn[aria-pressed="true"] .lens,
.dexbtn[aria-pressed="true"] .screen{fill:currentColor}
.dexbtn[aria-pressed="true"] .tick{fill:var(--card)}

#onlyBtn .dex .body,#onlyBtn .dex .lens,#onlyBtn .dex .screen{stroke-width:1.8}
#onlyBtn[aria-pressed="true"] .dex .lens,
#onlyBtn[aria-pressed="true"] .dex .screen{fill:currentColor}
#onlyBtn[aria-pressed="true"] .dex .tick{fill:var(--cyan)}

.mon.unseen img{filter:brightness(0) opacity(.6)}
html[data-color-mode="dark"] .mon.unseen img{filter:brightness(0) invert(1) opacity(.34)}
.mon.unseen .nm2,.mon.unseen .id{color:var(--border)}
.mon.unseen:hover img{filter:none}
.mon .caught{position:absolute;top:5px;right:6px;width:9px;height:9px;border-radius:50%;
  background:var(--coral);opacity:.85}
.genus{color:var(--muted);font-size:13.5px;margin-bottom:10px}
.types{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.type{
  font-size:11px;font-weight:800;letter-spacing:1px;text-transform:uppercase;
  border-radius:7px;padding:4px 10px;
}
.flavor{font-size:14.5px;line-height:1.55;color:var(--gray)}

.actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:16px}

.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px}@media(max-width:520px){.facts{grid-template-columns:repeat(2,1fr)}
}

.fact{background:var(--well);border:1px solid var(--border);border-radius:11px;padding:10px 12px}
.fact .k{font-size:10.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);font-weight:700}
.fact .v{font-size:14.5px;font-weight:650;margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fact.wide{grid-column:1 / -1}
.fact.wide .v{white-space:normal}

.evofact{text-align:center}
.evoline{display:flex;align-items:center;justify-content:center;gap:4px;flex-wrap:wrap;margin-top:4px}
.evocol{display:flex;flex-direction:column;gap:4px}
.evo{
  display:flex;flex-direction:column;align-items:center;gap:1px;
  background:none;border:1px solid transparent;border-radius:10px;
  padding:3px 5px;font:inherit;color:inherit;cursor:pointer;transition:.15s;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
button.evo:hover{border-color:var(--cyan);background:var(--hover)}
.evo.here{border-color:var(--border);background:var(--hover)}
.evo.here .evonm{color:var(--cyan)}
.evoart{width:46px;height:46px;display:flex;align-items:center;justify-content:center}
.evoart img{width:46px;height:46px;object-fit:contain;image-rendering:pixelated;display:block}
.evoart .ph{color:var(--border);font-weight:800;font-size:15px}
.evonm{font-size:10.5px;font-weight:650;line-height:1.2;text-align:center;
  max-width:92px;overflow-wrap:anywhere}
.evohow{font-size:9.5px;font-weight:700;letter-spacing:.2px;color:var(--muted);line-height:1.2;
  text-align:center;max-width:92px;overflow-wrap:anywhere}
.evoarrow{color:var(--border);font-size:15px;line-height:1;padding:0 3px;flex:none;align-self:center}
.evonone{color:var(--muted);font-size:13px}

.jp{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap;padding-bottom:3px}
.jp .kana{font-size:19px;font-weight:650;line-height:1.56;letter-spacing:.5px}
.fact .v.jp{overflow:visible;white-space:normal;margin-top:2px}
.jp .roma{font-size:13.5px;color:var(--muted);font-weight:600}

.stats{margin-top:16px;display:flex;flex-direction:column;gap:6px}
.stat{display:flex;align-items:center;gap:10px}
.stat .k{flex:0 0 74px;font-size:10.5px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);font-weight:700}
.stat .track{flex:1;min-width:0;height:9px;border-radius:5px;background:var(--well);border:1px solid var(--border);overflow:hidden}
.stat .fill{display:block;height:100%;background:var(--cyan);border-radius:5px 0 0 5px}
.stat .n{flex:0 0 32px;text-align:right;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12.5px;color:var(--gray);font-variant-numeric:tabular-nums}

.toolbar{display:flex;align-items:center;gap:8px;margin:0 4px 14px;flex-wrap:wrap}
.toolbar input[type=search],.toolbar input[type=text]{
  flex:1 1 170px;min-width:0;background:var(--well);border:1px solid var(--border);
  border-radius:10px;color:var(--gray);font:inherit;font-size:14px;padding:9px 12px;
  -webkit-appearance:none;appearance:none;
}
.toolbar input:focus{outline:none;border-color:var(--cyan)}
.count{color:var(--muted);font-size:12.5px;font-variant-numeric:tabular-nums;margin-left:2px}

.gen{margin-bottom:4px}
.genhead{display:flex;align-items:center;gap:8px;margin:20px 4px 11px}
.gentog{
  display:flex;align-items:center;gap:9px;width:100%;min-width:0;
  background:none;border:0;padding:4px 0;margin:0;font:inherit;text-align:left;
  color:var(--muted);cursor:pointer;transition:color .15s;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
.gentog:hover{color:var(--cyan)}
.gentog .chev{flex:none;font-size:9px;line-height:1;transition:transform .15s ease}
.gentog[aria-expanded="false"] .chev{transform:rotate(-90deg)}
.gentog .n{font-size:11px;letter-spacing:1.6px;text-transform:uppercase;font-weight:700;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gentog .reg{font-size:11px;color:var(--border);font-weight:700;letter-spacing:.5px;flex:none}
.gentog .cnt{flex:none;font-size:11px;font-weight:700;color:var(--border);font-variant-numeric:tabular-nums;margin-left:auto}
.gentog:hover .cnt,.gentog:hover .reg{color:var(--muted)}

.mons{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px}
.mons[hidden]{display:none}
.mon{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;background:var(--card);border:1px solid var(--border);border-radius:12px;
  padding:19px 4px 8px;cursor:pointer;font:inherit;color:inherit;
  transition:border-color .15s ease, transform .15s ease, background .15s ease;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
.mon:hover{border-color:var(--cyan);transform:translateY(-2px);background:var(--hover)}
.mon[aria-current="true"]{border-color:var(--cyan);background:var(--hover)}
.mon img{width:62px;height:62px;object-fit:contain;display:block;image-rendering:pixelated}
.mon .ph{width:62px;height:62px;display:flex;align-items:center;justify-content:center;color:var(--border);font-weight:800}
.mon .id{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:10px;color:var(--muted)}
.mon .nm2{font-size:11px;font-weight:600;line-height:1.2;text-align:center;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
.mon .var{position:absolute;top:5px;left:50%;transform:translateX(-50%);
  font-size:9px;font-weight:800;color:var(--gold);letter-spacing:.4px;line-height:1}

.empty{color:var(--muted);font-size:13px;text-align:center;
  border:1px dashed var(--border);border-radius:12px;padding:20px 16px}

.setuphead{display:flex;align-items:center;gap:10px;margin:26px 4px 12px}
.setuphead[hidden]{display:none}
.setuphead .lbl{font-size:11px;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--muted);font-weight:700;flex:1}
.btn.mini{padding:7px 11px;font-size:12.5px}
/* the "i" buttons and their folded-away text. Note this deliberately avoids
   the .info class, which the Pokédex entry layout already uses. */
.infobtn{
  width:22px;height:22px;border-radius:50%;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--well,var(--card));border:1px solid var(--border);color:var(--muted);
  font-family:Georgia,"Times New Roman",serif;font-size:12px;font-weight:700;font-style:italic;
  line-height:1;cursor:pointer;
  transition:border-color .15s,color .15s,background .15s,transform .15s;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
.infobtn:hover{border-color:var(--cyan);color:var(--cyan);transform:translateY(-2px)}
.infobtn:active{filter:brightness(.86)}
.infobtn[aria-expanded="true"]{background:var(--cyan);border-color:var(--cyan);color:var(--navy)}
.hintpanel{margin:0 4px 14px}
.hintpanel[hidden]{display:none}
.hintpanel > :first-child{margin-top:0}
@media(prefers-reduced-motion:reduce){.infobtn{transition:none}.infobtn:hover{transform:none}}

/* the small round gear that sits beside the folder name */
.gear.mini{width:34px;height:34px}
.gear.mini svg{width:19px;height:19px}
/* pill switch — one button that reads as an on/off track */
.pillsw{
  display:inline-flex;align-items:center;gap:10px;flex:none;
  padding:5px 15px 5px 5px;
  background:var(--well);border:1px solid var(--border);border-radius:999px;
  color:var(--muted);font:inherit;font-size:13px;font-weight:650;line-height:1;
  cursor:pointer;transition:border-color .15s,color .15s;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
.pilltrack{
  flex:none;position:relative;width:38px;height:22px;border-radius:999px;
  background:var(--border);transition:background .15s;
}
.pilltrack i{
  position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;
  background:var(--muted);transition:transform .15s,background .15s;
}
.pillsw[aria-checked="true"]{color:var(--gray);border-color:var(--accent,var(--cyan))}
.pillsw[aria-checked="true"] .pilltrack{background:var(--accent,var(--cyan))}
.pillsw[aria-checked="true"] .pilltrack i{transform:translateX(16px);background:var(--navy)}
.pillsw:hover{border-color:var(--accent,var(--cyan))}
.pillsw:active{filter:brightness(.86)}
@media(prefers-reduced-motion:reduce){
  .pilltrack,.pilltrack i{transition:none}
}

.fhead{display:flex;align-items:center;gap:9px}
.fname{flex:1;min-width:0;color:var(--gray);font-size:13.5px;font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prog{margin-top:14px}
.prog[hidden]{display:none}
.ptrack{height:8px;border-radius:5px;background:var(--well);border:1px solid var(--border);overflow:hidden}
.ptrack i{display:block;height:100%;width:0;background:var(--cyan);transition:width .2s ease}
.ptxt{margin-top:7px;color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}

.srcnow{margin-top:30px;text-align:center;color:var(--muted);font-size:12px;line-height:1.5;opacity:.85}
.srcnow:empty{display:none}
footer{margin-top:10px;text-align:center;color:var(--muted);font-size:12.5px}
footer a{color:var(--teal);text-decoration:none}
footer a:hover{color:var(--cyan)}
.ver{color:var(--border);font-variant-numeric:tabular-nums;font-weight:700}

.topline{display:flex;align-items:center;gap:10px;flex-wrap:nowrap;margin-bottom:22px}
.topline h1{
  margin-bottom:0;margin-right:auto;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.gear,.pomolink{
  display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;flex:none;color:var(--muted);
  background:var(--card);border:1px solid var(--border);border-radius:50%;
  transition:border-color .15s,color .15s,background .15s,transform .15s;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
.pomolink{font-size:22px;line-height:1;text-decoration:none}
.pomolink:hover{border-color:var(--coral);background:var(--hover);transform:translateY(-2px)}
.gear svg{width:26px;height:26px;fill:currentColor;transition:transform .35s ease}
.homelink{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:46px;height:46px;border-radius:50%;overflow:hidden;
  background:var(--card);color:var(--muted);border:0;
  box-shadow:0 0 0 2px var(--navy), 0 0 0 4px color-mix(in srgb, var(--cyan) 35%, transparent);
  transition:color .15s, box-shadow .15s ease, transform .15s ease;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
.homelink svg{width:26px;height:26px;fill:currentColor;display:block}
.homelink:hover{transform:translateY(-2px);color:var(--cyan);
  box-shadow:0 0 0 2px var(--navy), 0 0 0 4px var(--cyan)}@media(prefers-reduced-motion:reduce){.homelink{transition:none}.homelink:hover{transform:none}
}

.gear:hover{color:var(--cyan);border-color:var(--cyan);background:var(--hover)}
.gear:hover svg{transform:rotate(60deg)}@media(prefers-reduced-motion:reduce){.gear svg{transition:none}.gear:hover svg{transform:none}
}

.dexlink{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:46px;height:46px;border-radius:50%;overflow:hidden;
  background:var(--card);
  box-shadow:0 0 0 2px var(--navy),0 0 0 4px color-mix(in srgb, var(--cyan) 35%, transparent);
  transition:transform .15s ease,box-shadow .15s ease;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
.dexlink .pball{width:100%;height:100%;display:block}
.dexlink:hover{transform:translateY(-2px);box-shadow:0 0 0 2px var(--navy),0 0 0 4px var(--cyan)}@media(prefers-reduced-motion:reduce){.dexlink{transition:none}.dexlink:hover{transform:none}
}


.jump{display:flex;align-items:center;gap:8px;margin:0 4px 8px}
.jump input[type=search]{
  flex:1 1 auto;min-width:0;background:var(--well);border:1px solid var(--border);
  border-radius:10px;color:var(--gray);font:inherit;font-size:14px;padding:11px 13px;
  -webkit-appearance:none;appearance:none;
}
.jump input::placeholder{color:var(--muted)}
.jump input:focus{outline:none;border-color:var(--cyan)}
.jump .btn{flex:none}

.edlink{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:46px;height:46px;border-radius:50%;overflow:hidden;
  box-shadow:0 0 0 2px var(--navy),0 0 0 4px color-mix(in srgb, var(--cyan) 35%, transparent);
  transition:transform .15s ease,box-shadow .15s ease;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
.edlink img{width:100%;height:100%;object-fit:cover;display:block}
.edlink:hover{transform:translateY(-2px);box-shadow:0 0 0 2px var(--navy),0 0 0 4px var(--cyan)}@media(max-width:520px){.topline{flex-wrap:wrap;row-gap:12px}
  .topline .homelink,
  .topline .dexlink,
  .topline .gear,
  .topline .pomolink,
  .topline .edlink{order:1}
  .topline h1{
    order:2;flex:1 0 100%;margin-right:0;
    white-space:normal;overflow:visible;
  }
  .topline .edlink{margin-left:auto}
}
@media(prefers-reduced-motion:reduce){.edlink{transition:none}.edlink:hover{transform:none}
}





.prefs{margin:26px 0 22px}

.prefs-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.palsw{display:flex;gap:6px;align-items:center}
.palsw button{
  width:22px;height:22px;padding:0;border-radius:50%;cursor:pointer;
  border:2px solid var(--border);background:var(--card);
  transition:transform .12s,border-color .15s;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
.palsw button:hover{transform:scale(1.15)}
.palsw button[aria-pressed="true"]{border-color:var(--gray)}
/* divides the built-in palettes from the one built on Settings → Colors */
.palsep{color:var(--muted);opacity:.5;font-weight:700;line-height:1;user-select:none;margin:0 3px}
@media(max-width:420px){.palsw button{width:20px;height:20px}
}


.balls{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(124px,1fr));gap:10px;
}
.balls[hidden]{display:none}
.ballcard{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;
  background:var(--card);border:1px solid var(--border);border-radius:14px;
  padding:10px 8px 33px;cursor:pointer;font:inherit;color:inherit;
  transition:border-color .15s ease,transform .15s ease,background .15s ease;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
.ballcard:hover{border-color:var(--cyan);transform:translateY(-2px);background:var(--hover)}
.ballcard[aria-current="true"]{border-color:var(--cyan);background:var(--hover)}
.ballcard .ph{
  width:100%;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;
  color:var(--border);font-weight:800;font-size:30px;
}
.ballcard img{width:100%;height:100%;object-fit:contain;display:block}
.ballcard .bid{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:10.5px;color:var(--muted);font-weight:700;
}
.ballcard .bnm{
  font-size:12.5px;font-weight:650;line-height:1.25;text-align:center;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;word-break:break-word;
}
.ballcard .bball{
  position:absolute;bottom:7px;left:7px;width:18px;height:18px;
  display:block;pointer-events:none;
}
.ballcard .bball svg{width:100%;height:100%;display:block}@media(prefers-reduced-motion:reduce){.ballcard{transition:none}.ballcard:hover{transform:none}
}


.stepper{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.stepper .btn.mini{
  width:38px;height:38px;padding:0;flex:none;
  display:flex;align-items:center;justify-content:center;
  font-size:17px;font-weight:700;line-height:1;
}
.stepper .btn.mini:disabled:hover{border-color:var(--border);color:var(--muted);background:var(--card)}
.stepval{
  min-width:38px;text-align:center;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:19px;font-weight:700;color:var(--gray);font-variant-numeric:tabular-nums;
}
.steplbl{color:var(--muted);font-size:13px}

.iconrow{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.iconprev{
  width:72px;height:72px;flex:none;border-radius:14px;display:block;
  border:1px solid var(--border);background:var(--well);
  image-rendering:auto;
}
.iconside{display:flex;flex-direction:column;gap:8px;align-items:flex-start;min-width:0}
.iconname{font-size:15px;font-weight:650;color:var(--gray)}
.iconside .btn.mini[hidden]{display:none}
.iconpick{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.ipick{
  width:56px;height:56px;flex:none;padding:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:var(--card);border:1px solid var(--border);border-radius:11px;
  transition:border-color .15s ease,transform .15s ease,background .15s ease;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
.ipick:hover{border-color:var(--cyan);transform:translateY(-2px);background:var(--hover)}
.ipick[aria-current="true"]{border-color:var(--cyan);background:var(--hover)}
.ipick .ph{width:48px;height:48px;display:flex;align-items:center;justify-content:center;color:var(--border);font-weight:800}
.ipick img{width:48px;height:48px;object-fit:contain;display:block;image-rendering:pixelated}@media(prefers-reduced-motion:reduce){.ipick{transition:none}.ipick:hover{transform:none}
}


.nojs{
  max-width:560px;margin:0 auto 22px;padding:14px 18px;border-radius:12px;
  background:color-mix(in srgb, var(--gold) 10%, transparent);
  border:1px solid color-mix(in srgb, var(--gold) 45%, transparent);
  color:var(--gray);font-size:14px;line-height:1.55;
}


.segtog{
  display:flex; align-items:center; gap:2px;
  background:var(--well,#070a1c);
  border:1px solid var(--border);
  border-radius:999px; padding:3px;
  box-shadow:0 2px 12px rgba(0,0,0,.30);
}
.segtog button{
  display:flex; align-items:center; justify-content:center;
  min-width:38px; height:30px; padding:0 12px;
  border:0; border-radius:999px; background:transparent;
  color:var(--muted); font:inherit; font-size:12px; font-weight:700;
  letter-spacing:.5px; line-height:1; cursor:pointer;
  transition:background .15s, color .15s;
}
.segtog button svg{width:15px;height:15px;fill:currentColor}
.segtog button:hover{color:var(--gray)}
.segtog button[aria-pressed="true"]{background:var(--cyan);color:var(--navy)}
.segtog.modesw button{min-width:34px;padding:0 10px}
.prefstog{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin:0 0 12px}@media (max-width:600px){.prefstog{gap:6px}
  .segtog{padding:2px}
  .segtog button{min-width:32px;height:27px;padding:0 9px;font-size:11px}
  .segtog.modesw button{min-width:30px;padding:0 8px}
  .segtog button svg{width:14px;height:14px}
}


/* liquid-glass */
:root{
  --glass-blur:blur(20px) saturate(180%);
  --glass-bg:color-mix(in srgb, var(--card) 70%, transparent);
  --glass-soft:color-mix(in srgb, var(--well, var(--card)) 62%, transparent);
  --glass-brd:color-mix(in srgb, var(--gray) 13%, transparent);
  --glass-hi:color-mix(in srgb, var(--gray) 15%, transparent);
  --glass-sh:0 8px 24px rgba(0,0,0,.28);
  --r-card:20px;
  --r-panel:18px;
  --r-pill:999px;
}
html[data-color-mode="light"]{
  --glass-bg:color-mix(in srgb, var(--card) 62%, transparent);
  --glass-soft:color-mix(in srgb, var(--card) 55%, transparent);
  --glass-brd:color-mix(in srgb, var(--navy) 14%, transparent);
  --glass-hi:color-mix(in srgb, #fff 70%, transparent);
  --glass-sh:0 8px 24px rgba(0,0,0,.10);
}

/* ambient colour behind the glass, otherwise the blur has nothing to work on */
html{background:var(--navy)}
body{background-color:transparent}
body::before{
  content:""; position:fixed; inset:-25%; z-index:-1; pointer-events:none;
  background:
    radial-gradient(34% 28% at 16% 10%, color-mix(in srgb, var(--cyan) 30%, transparent), transparent 70%),
    radial-gradient(30% 26% at 84% 20%, color-mix(in srgb, var(--gold) 20%, transparent), transparent 70%),
    radial-gradient(38% 32% at 50% 86%, color-mix(in srgb, var(--teal) 26%, transparent), transparent 72%);
  filter:blur(48px);
}
html[data-color-mode="light"] body::before{opacity:.55}/* frosted surfaces */
.card,
.rndpanel,
.fact,
details,
.art,
.mon,
.evo,
.chip{
  background:var(--glass-bg);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  border-color:var(--glass-brd);
  box-shadow:var(--glass-sh), inset 0 1px 0 var(--glass-hi);
}
.card,
.rndpanel,
.fact,
details{ border-radius:var(--r-card); }

.art,
.mon,
.evo,
.chip{ border-radius:var(--r-panel); }/* the featured banners keep their gradient{
  box-shadow:var(--glass-sh), inset 0 1px 0 var(--glass-hi);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  border-radius:var(--r-card);
}

/* controls read as lighter glass than the surfaces they sit on */
.btn, .chip, .fbtn, .editbtn, .seg button, .modes button, .segtog{
  background:var(--glass-soft);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  border-color:var(--glass-brd);
}@media (hover:hover) and (pointer:fine){.btn:not(.primary):not(.go):not([aria-pressed="true"]):hover,
  .fbtn:not([aria-pressed="true"]):hover,
  .seg button:not([aria-pressed="true"]):hover,
  .modes button:not([aria-selected="true"]):hover{
    background:color-mix(in srgb, var(--gray) 10%, var(--glass-soft));
  }
}

textarea, .kgrid input, pre{ border-radius:var(--r-panel); }

/* pills */
button:not(.mon):not(.evo):not(.chip):not(.tile):not(.ballcard),
a.btn, .btn, .go, .spin, .addbtn, .ico, .back, .danger, .util, .op, .fn, .k, .eq,
input[type=button], input[type=submit], input[type=reset], select,
input[type=text], input[type=search], input[type=url], input[type=email],
input[type=number], input[type=password], input[type=date], input[type=time]{
  border-radius:var(--r-pill) !important;
}
.mon, .evo, .chip, .tile{ border-radius:var(--r-panel) !important; }@media (max-width:600px){.prefstog{gap:6px}
  .segtog{padding:2px}
  .segtog button{min-width:32px;height:27px;padding:0 9px;font-size:11px}
  .segtog.modesw button{min-width:30px;padding:0 8px}
  .segtog button svg{width:14px;height:14px}
}


.seg{ border-radius:0; overflow:visible; }
.seg > button{ border-radius:var(--r-pill) !important; }

/* pokemon cards: gentler corners and a little more room, so the corner
   indicators (favourite star, caught dot, pokeball) clear the curve.
   The glass treatment is kept, and extended to the Pokeball shelf. */
.mon, .ballcard{ border-radius:12px !important; }
.evo{ border-radius:10px !important; }
.mon{ padding:22px 6px 10px; }
.ballcard{ padding:12px 10px 35px; }
.evo{ padding:5px 7px; }
.ballcard{
  background:var(--glass-bg);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  border-color:var(--glass-brd);
  box-shadow:var(--glass-sh), inset 0 1px 0 var(--glass-hi);
}/* Buy me a coffee: the same gold banner treatment as the Workspace banner.
   Sits after the glass layer so it keeps its own tint{
  background:linear-gradient(120deg,color-mix(in srgb, var(--gold) 28%, transparent),color-mix(in srgb, var(--gold) 12%, transparent));
  border-color:color-mix(in srgb, var(--gold) 65%, transparent);
}
/* Press feedback --------------------------------------------------------------
   Filled buttons keep their fill and darken slightly instead of being repainted
   with the neutral tint. brightness() is colour-agnostic,
so the cyan and gold
   fills both read as "pressed" without either colour being named here,
and the
   label keeps its contrast. :active covers touch,
where :hover would stick. */
button:active,
.btn:active,
a.btn:active,
.chip:active,
.k:active,
.seg button:active,
.modes button:active,
.segtog button:active,
.subscribe:active,
.go:active,
.spin:active,
.addbtn:active,
.newbtn:active,
.pokelink:active,
.back:active{
  filter:brightness(.86);
}
@media (hover:hover) and (pointer:fine){.btn.primary:hover, .btn.primary:hover:not(:disabled),
  .btn[aria-pressed="true"]:hover, .fbtn[aria-pressed="true"]:hover,
  .chip[aria-pressed="true"]:hover, .seg button[aria-pressed="true"]:hover,
  .modes button[aria-selected="true"]:hover, .segtog button[aria-pressed="true"]:hover,
  .viewsw button[aria-pressed="true"]:hover, .editbtn[aria-pressed="true"]:hover,
  .subscribe:hover, .k.eq:hover, .spin:hover, .addbtn:hover, .newbtn:hover,
  .go:hover:not(:disabled), .btn.go:hover{
    filter:brightness(.92);
  }
  .btn.primary:active, .btn.primary:hover:active,
  .btn[aria-pressed="true"]:active, .seg button[aria-pressed="true"]:active,
  .segtog button[aria-pressed="true"]:active, .subscribe:active,
  .k.eq:active, .go:active:not(:disabled), .btn.go:active{
    filter:brightness(.86);
  }
}