:root{
  --navy:#000116; --cyan:#17B4D8; --gray:#EAEBEC;
  --teal:#3FA0C4; --gold:#FCC615; --olive:#7C8AA8;
  --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}
html{background:var(--navy)}
body{
  background-color:transparent; 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;min-height:100dvh; padding:28px 20px 60px;
  display:flex; flex-direction:column; align-items:center;
}
.wrap{width:100%;max-width:760px}
/* All Pokémon page width */
body.allpokemon .wrap{max-width:1080px}
h1{font-size:var(--fs-27);letter-spacing:-.3px;margin-bottom:4px}
.sub{color:var(--muted);font-size:var(--fs-14);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:var(--fs-13);line-height:1.5;min-height:1.2em}
.msg.bad{color:var(--coral)}
.msg.good{color:var(--mint)}
.hint{color:var(--muted);font-size:var(--fs-13);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:var(--fs-13);color:var(--gray)}
.btn.primary:hover{filter:brightness(1.12);color:var(--navy)}
.btn[aria-pressed="true"]{background:var(--accent,var(--cyan));border-color:var(--accent,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}
.btn.icon.round{width:40px}
.btn.icon svg.nav{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.shuf .ln{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.rndpanel,
.filterpanel{margin-top:12px;padding:14px 15px;border:1px solid var(--border);border-radius:12px;background:var(--well)}
.rndpanel[hidden],
.filterpanel[hidden]{display:none}
.rlbl{font-size:var(--fs-11);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:var(--fs-13);font-weight:700;
  cursor:pointer;transition:.15s;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
.chip:hover{border-color:var(--accent,var(--cyan));color:var(--gray)}
.chip:disabled{opacity:.45;cursor:default}
.chip:disabled:hover{border-color:var(--border);color:var(--muted)}
.chip[aria-pressed="true"]{background:var(--accent,var(--cyan));border-color:var(--accent,var(--cyan));color:var(--navy)}
.chip.ghost{background:transparent;font-weight:600;font-size:var(--fs-12);min-height:28px;padding:0 10px}
.chip.ghost[aria-pressed="true"]{background:var(--accent,var(--cyan));border-color:var(--accent,var(--cyan));color:var(--navy)}
.chip small{display:block;font-size:var(--fs-10);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:var(--fs-44);font-weight:800;letter-spacing:-2px}
@media(max-width:720px){
  .art{flex:0 0 auto;width:100%;height:356px}
  @supports (aspect-ratio:1){
    .art{height:auto;aspect-ratio:1;max-height:534px}
  }
}
/* Wide screens: index card width and art */
@media(min-width:980px){
  html[data-pokebase] .wrap{max-width:900px}
  #entry[data-scope="index"] .art{flex:0 0 352px;height:352px}
}
.info{flex:1 1 260px;min-width:0}
.num{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:var(--fs-13);color:var(--muted);font-weight:700}
.namerow{display:flex;align-items:center;gap:10px}
.nm{flex:1;min-width:0;font-size:var(--fs-27);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:var(--fs-10);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)}

/* The card link — gold, the frame color of the TCG Pokemon icon */
.tcgbtn{color:var(--border);text-decoration:none}
.tcgbtn:hover{color:var(--gold)}
.tcgbtn[aria-disabled="true"]{opacity:.4;cursor:default;pointer-events:none}
.tcgbtn svg{width:23px;height:23px;stroke:none;fill:none}
.tcg .frame,.tcg .o,.tcg .band,.tcg .c{
  fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
}

.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(--accent,var(--cyan))}
.dexbtn[aria-pressed="true"]{color:var(--accent,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(--accent,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:var(--fs-14);margin-bottom:10px}
.types{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.type{
  font-size:var(--fs-11);font-weight:800;letter-spacing:1px;text-transform:uppercase;
  border-radius:7px;padding:4px 10px;
}
.type.region{background:transparent;color:var(--gray);border:1px solid var(--border);padding:3px 9px}
.types .typebreak{flex-basis:100%;height:0}
.flavor{font-size:var(--fs-16);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:720px){.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:var(--fs-11);letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);font-weight:700}
.fact .v{font-size:var(--fs-16);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(--accent,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:var(--fs-16)}
.evonm{font-size:var(--fs-11);font-weight:650;line-height:1.2;text-align:center;
  max-width:92px;overflow-wrap:anywhere}
.evohow{font-size:var(--fs-10);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(--olive);font-size:var(--fs-16);line-height:1;padding:0 3px;flex:none;align-self:center}
.evonone{color:var(--muted);font-size:var(--fs-13)}

.jp{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap;padding-bottom:3px}
.jp .kana{font-size:var(--fs-20);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:var(--fs-14);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:var(--fs-11);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:var(--fs-13);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:var(--fs-14);padding:9px 12px;
  -webkit-appearance:none;appearance:none;
}
.toolbar input:focus{outline:none;border-color:var(--accent,var(--cyan))}
.count{color:var(--muted);font-size:var(--fs-13);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(--accent,var(--cyan))}
.gentog .chev{flex:none;font-size:var(--fs-9);line-height:1;transition:transform .15s ease}
.gentog[aria-expanded="false"] .chev{transform:rotate(-90deg)}
.gentog .n{font-size:var(--fs-11);letter-spacing:1.6px;text-transform:uppercase;font-weight:700;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gentog .reg{font-size:var(--fs-11);color:var(--muted);font-weight:700;letter-spacing:.5px;flex:none}
.gentog .cnt{flex:none;font-size:var(--fs-11);font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums;margin-left:auto}
.gentog:hover .cnt,.gentog:hover .reg{color:var(--gray)}

.mons{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px}
.mons[hidden]{display:none}
body.allpokemon .mons{grid-template-columns:repeat(auto-fill,minmax(max(84px,calc((100% - (var(--perrow,8) - 1) * 8px) / var(--perrow,8))),1fr))}
.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(--accent,var(--cyan));transform:translateY(-2px);background:var(--hover)}
.mon[aria-current="true"]{border-color:var(--accent,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:var(--fs-10);color:var(--muted)}
.mon .nm2{font-size:var(--fs-11);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:var(--fs-9);font-weight:800;color:var(--gold);letter-spacing:.4px;line-height:1}

.empty{color:var(--muted);font-size:var(--fs-13);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:var(--fs-11);letter-spacing:1.6px;text-transform:uppercase;
  color:var(--muted);font-weight:700;flex:1}
.btn.sm{padding:7px 12px;font-size:var(--fs-13)}
.infobtn{
  width:24px;height:24px;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:var(--fs-12);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(--accent,var(--cyan));color:var(--accent,var(--cyan));transform:translateY(-2px)}
.infobtn:active{filter:brightness(.86)}
.infobtn[aria-expanded="true"]{background:var(--accent,var(--cyan));border-color:var(--accent,var(--cyan));color:var(--navy)}
@media(prefers-reduced-motion:reduce){.infobtn{transition:none}.infobtn:hover{transform:none}}

/* 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:var(--fs-13);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:disabled{opacity:.45;cursor:default;border-color:var(--border);filter:none}
.pillsw:not(:disabled):hover{border-color:var(--accent,var(--cyan))}
.pillsw:not(:disabled):active{filter:brightness(.86)}
.pillsw{max-width:100%}
.pilllbl{min-width:0;line-height:1.3;text-align:left}
@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:var(--fs-14);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:var(--fs-13);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:var(--fs-13);line-height:1.5;opacity:.85}
.srcnow:empty{display:none}
footer{margin-top:10px;text-align:center;color:var(--muted);font-size:var(--fs-13)}
footer a{color:var(--teal);text-decoration:none}
footer a:hover{color:var(--accent,var(--cyan))}
.ver{color:var(--border);font-variant-numeric:tabular-nums;font-weight:700}

/* the small round gear beside the folder name */
.gear.mini{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:34px;height:34px;border-radius:50%;color:var(--muted);
  background:var(--card);border:1px solid var(--border);
  transition:border-color .15s,color .15s,background .15s;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
.gear.mini svg{width:19px;height:19px;fill:currentColor}
.gear.mini:hover{color:var(--accent,var(--cyan));border-color:var(--accent,var(--cyan));background:var(--hover)}

.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:var(--fs-14);padding:11px 13px;
  -webkit-appearance:none;appearance:none;
}
.jump input::placeholder{color:var(--muted)}
.jump input:focus{outline:none;border-color:var(--accent,var(--cyan))}
.jump .btn{flex: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{flex-wrap:wrap}.palsw button{width:26px;height:26px}
}


.balls{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(186px,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(--accent,var(--cyan));transform:translateY(-2px);background:var(--hover)}
.ballcard[aria-current="true"]{border-color:var(--accent,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:var(--fs-34);
}
.ballcard img{width:100%;height:100%;object-fit:contain;display:block}
.ballcard .bid{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:var(--fs-11);color:var(--muted);font-weight:700;
}
.ballcard .bnm{
  font-size:var(--fs-13);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.sm{
  width:38px;height:38px;padding:0;flex:none;
  display:flex;align-items:center;justify-content:center;
  font-size:var(--fs-18);font-weight:700;line-height:1;
}
.stepper .btn.sm: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:var(--fs-20);font-weight:700;color:var(--gray);font-variant-numeric:tabular-nums;
}
.steplbl{color:var(--muted);font-size:var(--fs-13)}

.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:var(--fs-16);font-weight:650;color:var(--gray)}
.iconside .btn.sm[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(--accent,var(--cyan));transform:translateY(-2px);background:var(--hover)}
.ipick[aria-current="true"]{border-color:var(--accent,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:var(--fs-14);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:var(--fs-13); 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(--accent,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:720px){.prefstog{gap:6px}
  .segtog{padding:2px}
  .segtog button{min-width:32px;height:27px;padding:0 9px;font-size:var(--fs-13)}
  .segtog.modesw button{min-width:30px;padding:0 8px}
  .segtog button svg{width:14px;height:14px}
}



/* frosted surfaces */
.card,
.rndpanel,
.filterpanel,
.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,
.filterpanel,
.fact,
details{ border-radius:var(--r-card); }

.art,
.mon,
.evo,
.chip{ border-radius:var(--r-panel); }

/* controls read as lighter glass than the surfaces they sit on */
.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):not(.poke):not(.pj):not(.thumb):not(.ptile),a.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:720px){.prefstog{gap:6px}
  .segtog{padding:2px}
  .segtog button{min-width:32px;height:27px;padding:0 9px;font-size:var(--fs-13)}
  .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; }

.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);
}

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);
  }
}