: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:-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%);
}
.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 190px;height:190px;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}
.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}
.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%;
  background:var(--cyan);color:var(--navy);border:1px solid var(--cyan);
  transition:transform .15s ease,filter .15s ease;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
.homelink svg{width:20px;height:20px;fill:currentColor;display:block}
.homelink:hover{transform:translateY(-2px);filter:brightness(1.08)}
@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)}




@media(max-width:420px){.palsw button{width:20px;height:20px}}
.featured{
  display:block;text-decoration:none;border-radius:14px;padding:18px 20px;margin-bottom:12px;
  background:linear-gradient(120deg,color-mix(in srgb, var(--gold) 28%, transparent),color-mix(in srgb, var(--gold) 12%, transparent));
  border:1px solid color-mix(in srgb, var(--gold) 65%, transparent);
  transition:transform .15s ease, border-color .15s ease;
}
.featured:hover{transform:translateY(-2px);border-color:var(--gold)}
.featured .kicker{color:var(--gold);font-size:11px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase}
.featured .ttl{color:var(--gray);font-size:17px;font-weight:650;margin-top:5px}
.featured .sub{color:var(--muted);font-size:13.5px;margin-top:3px;margin-bottom:0}
.featured .feats{list-style:none;margin:11px 0 0;padding:0}
.featured .feats li{
  color:var(--muted);font-size:13px;line-height:1.5;
  padding-left:19px;position:relative;
}
.featured .feats li + li{margin-top:3px}
.featured .feats li::before{
  content:"\2713";position:absolute;left:0;top:0;
  color:var(--cyan);font-weight:700;
}
.featured.alt{
  background:linear-gradient(120deg,color-mix(in srgb, var(--cyan) 26%, transparent),color-mix(in srgb, var(--cyan) 10%, transparent));
  border-color:color-mix(in srgb, var(--cyan) 62%, transparent);margin-bottom:26px;
}
.featured.alt:hover{border-color:var(--cyan)}
.featured.alt .kicker{color:var(--cyan)}
@media(prefers-reduced-motion:reduce){.featured{transition:none}.featured:hover{transform:none}}

.tip-button{
  display:block;text-align:center;text-decoration:none;
  background:var(--card);color:var(--gray);
  border:1px solid color-mix(in srgb, var(--gold) 45%, transparent);
  font-size:14px;font-weight:600;letter-spacing:.3px;
  border-radius:12px;padding:12px 20px;margin:0 0 26px;
  transition:transform .15s ease, border-color .15s ease, background .15s ease;
}
.tip-button:hover{transform:translateY(-2px);border-color:var(--gold);background:var(--hover)}
@media(prefers-reduced-motion:reduce){.tip-button{transition:none}.tip-button:hover{transform:none}}

.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,
.tip-button,
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,
.tip-button,
details{ border-radius:var(--r-card); }
.art,
.mon,
.evo,
.chip{ border-radius:var(--r-panel); }

/* the featured banners keep their gradient, gain the glass edge */
.featured{
  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, not the neutral one. */
.tip-button{
  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);
}
.tip-button:hover{
  background:linear-gradient(120deg,color-mix(in srgb, var(--gold) 38%, transparent),color-mix(in srgb, var(--gold) 18%, transparent));
  border-color:var(--gold);
}

/* 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,
.tip-button:active, .pokelink:active, .back:active, .featured: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);
  }
}