.slots{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-bottom:14px}
.slots .empty{grid-column:1/-1}
@media(max-width:720px){.slots{grid-template-columns:1fr}}
@media(min-width:980px){
  .cardswide .slots{grid-template-columns:repeat(var(--slotcols,4),minmax(0,1fr))}
}

.slot{display:flex;flex-direction:column;gap:12px}
.slot .cdesc{margin-bottom:2px}
.slot .cart{
  width:100%;border-radius:14px;border:1px solid var(--border);background:var(--well);
  display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;
  aspect-ratio:600/825;
}
@supports not (aspect-ratio:1){.slot .cart{height:340px}}
.slot .cart img{width:100%;height:100%;object-fit:contain;display:block}
.slot .cart .ph{color:var(--border);font-size:var(--fs-44);font-weight:800;letter-spacing:-2px}
.slot .cart.pinned{border-color:var(--gold)}
.slot .cart.art{aspect-ratio:1}
@supports not (aspect-ratio:1){.slot .cart.art{height:260px}}
.slot .cart.art img{padding:6%;box-sizing:border-box}

/* the frame: the artwork window of a high-res card, x 51-550, y 81-390 */
.slot .cart.framed{aspect-ratio:500/310}
@supports not (aspect-ratio:1){.slot .cart.framed{height:153px}}
.slot .cart.framed img{
  position:absolute;left:-10.2%;top:-26.129%;
  width:120%;height:266.129%;max-width:none;object-fit:cover;
}

.cnum{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:var(--fs-13);color:var(--muted);font-weight:700}
.cnm{font-size:var(--fs-20);font-weight:700;letter-spacing:-.3px;line-height:1.25;margin:2px 0}
.cset{color:var(--muted);font-size:var(--fs-13);font-weight:650;margin-top:1px}
.cdesc{font-size:var(--fs-14);line-height:1.5;color:var(--gray);margin-top:9px}
.cdesc:empty{display:none}

/* rarity: a row of diamonds, stars, sparkles or one crown */
.rar{display:inline-flex;align-items:center;gap:3px;vertical-align:middle}
.rar svg{width:13px;height:13px;display:block;flex:none}
.rar.diamond svg{fill:var(--cyan)}
.rar.star svg{fill:var(--gold)}
.rar.shiny svg{fill:var(--mint)}
.rar.crown svg{width:19px;height:19px;fill:var(--sunset)}
.rar.none svg{fill:var(--border)}
.rar.sparkle{font-size:var(--fs-13);line-height:1}
.rarline{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px}
.rarlbl{font-size:var(--fs-11);letter-spacing:1.2px;text-transform:uppercase;
  color:var(--muted);font-weight:700}

.slotfoot{margin-top:auto;display:flex;flex-direction:column;gap:11px;align-items:flex-start}

/* the pokédex link under a card */
.dexjump{
  display:inline-flex;align-items:center;gap:7px;
  border:1px solid var(--border);border-radius:999px;padding:6px 13px 6px 8px;
  background:var(--glass-soft,var(--well));color:var(--muted);
  font-size:var(--fs-13);font-weight:650;text-decoration:none;transition:.15s;
}
.dexjump svg{width:17px;height:17px;display:block;flex:none}
.dexjump:hover{border-color:var(--accent,var(--cyan));color:var(--gray)}
.dexjump[hidden]{display:none}
/* holds the line open for a card with no Pokémon behind it */
.dexjump.blank{visibility:hidden}
.dexjump.blank::before{content:"";display:block;width:1px;height:17px}

/* the action row and the five dots under it */
.slotacts{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.slotacts .btn.icon{width:38px;height:36px}
.slotacts .nav{fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.slotacts .navpair{display:flex;align-items:center;gap:6px;flex:none}

.dotrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:2px}
.dot{
  position:relative;width:20px;height:20px;flex:none;padding:0;cursor:pointer;border-radius:50%;
  background:transparent;border:2px solid var(--dotc,var(--border));
  transition:background .15s,transform .12s,box-shadow .15s;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
.dot::after{content:"";position:absolute;inset:-6px;border-radius:50%}
.dot:hover{transform:scale(1.15)}
.dot[aria-pressed="true"]{background:var(--dotc,var(--cyan));
  box-shadow:0 0 0 2px color-mix(in srgb, var(--dotc, var(--cyan)) 30%, transparent)}
.dot:active{filter:brightness(.86)}

/* favorite, on display and dots, one row above the search bar */
.quickfilters{display:flex;align-items:center;gap:8px;margin:0 4px 12px;flex-wrap:wrap}
.quickfilters .chips{gap:8px}
@media(prefers-reduced-motion:reduce){.dot{transition:none}.dot:hover{transform:none}}

/* On dex and Display wear their own colors on the shared .starbtn base */
.ondexbtn{color:var(--border)}
.ondexbtn:hover{color:var(--accent,var(--cyan))}
.ondexbtn[aria-pressed="true"]{color:var(--accent,var(--cyan))}
.ondexbtn svg{width:23px;height:23px;stroke:none;fill:none}
.tcard .frame,.tcard .screen,.tcard .tick{
  fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round}
.ondexbtn[aria-pressed="true"] .tcard .screen{fill:currentColor}
.ondexbtn[aria-pressed="true"] .tcard .tick{stroke:var(--card)}

.showbtn{color:var(--border)}
.showbtn:hover{color:var(--sunset)}
.showbtn[aria-pressed="true"]{color:var(--sunset)}
.showbtn svg{width:23px;height:23px;stroke:none;fill:none}
.stand .frame,.stand .base,.stand .shine{
  fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round}
.showbtn[aria-pressed="true"] .stand .frame{fill:currentColor}
.showbtn[aria-pressed="true"] .stand .shine{stroke:var(--card)}

/* pin: the .firstbtn mark and mint from pokemon.html */

.framebtn svg.crop{fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.framebtn.auto[aria-pressed="true"]{background:var(--gold);border-color:var(--gold)}

/* one-shot download: a ringed circle that greens on hover, like #dlPngBtn */
.dlcardbtn{color:var(--border);border:1px solid currentColor}
.dlcardbtn:hover{color:var(--mint)}
.slotacts .dlcardbtn{width:36px;height:36px}
.dlcardbtn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linejoin:round;stroke-linecap:round}
.dlcardbtn:disabled{opacity:.4;cursor:default}

/* the set grid */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:14px}
.cards[hidden]{display:none}
@media(min-width:721px){
  .cardswide .cards{grid-template-columns:repeat(var(--cols,5),minmax(0,1fr))}
}
/* Wide board */
@media(min-width:980px){.cardswide{max-width:1080px}}
@media(min-width:1320px){.cardswide{max-width:1200px}}

.ctile{
  position:relative;display:flex;flex-direction:column;align-items:center;
  justify-content:space-between;gap:4px;aspect-ratio:2/3;max-width:100%;min-width:0;
  background:var(--card);border:1px solid var(--border);border-radius:12px;
  padding:20px 8px 19px;cursor:pointer;font:inherit;color:inherit;overflow:hidden;
  transition:border-color .15s ease,transform .15s ease,background .15s ease;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
@supports not (aspect-ratio:1){.ctile{height:220px}}
.ctile.art{aspect-ratio:4/5}
@supports not (aspect-ratio:1){.ctile.art{height:180px}}
#board .ctile,
#favGrid .ctile{border-radius:12px !important}
.ctile:hover{border-color:var(--accent,var(--cyan));transform:translateY(-2px);background:var(--hover)}
.ctile[aria-current="true"]{border-color:var(--accent,var(--cyan));background:var(--hover)}
.ctile .ph{
  flex:1 1 auto;min-height:0;width:100%;
  display:flex;align-items:center;justify-content:center;
  color:var(--border);font-weight:800;font-size:var(--fs-27);overflow:hidden;border-radius:6px;
}
.ctile img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}
.ctile .cid{flex:none;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:var(--fs-10);color:var(--muted);font-weight:700;line-height:1.3}
.ctile .cnm2{flex:none;font-size:var(--fs-11);font-weight:600;line-height:1.2;text-align:center;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  word-break:break-word;max-width:100%}
.ctile .ondex{position:absolute;top:6px;right:8px;width:9px;height:9px;border-radius:50%;
  background:var(--cyan);opacity:.9}
.ctile .fav{position:absolute;top:5px;left:8px;font-size:var(--fs-11);color:var(--gold);line-height:1}
.ctile .show{position:absolute;bottom:6px;right:8px;width:9px;height:9px;border-radius:2px;
  background:var(--sunset);opacity:.9}
.ctile .tdots{position:absolute;bottom:6px;left:8px;display:flex;gap:3px}
.ctile .tdots i{width:7px;height:7px;border-radius:50%;display:block}
.ctile.unseen img{filter:grayscale(1) brightness(.5)}
.ctile.unseen:hover img{filter:none}
@media(prefers-reduced-motion:reduce){.ctile{transition:none}.ctile:hover{transform:none}}

/* the line above the slots when one Pokemon's whole run is on show */
.focusline{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.focusline .msg{margin:0}

/* Settings → Visualization: a labelled stepper per option */
.viz{display:flex;flex-direction:column;gap:14px}
.vizrow{flex-wrap:wrap}
/* Settings: the collection picker */
.deckrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.deckrow .steplbl{flex:none}
.deckrow select{
  flex:1 1 180px;min-width:0;
  background:var(--well);border:1px solid var(--border);color:var(--gray);
  font:inherit;font-size:var(--fs-14);padding:8px 11px;border-radius:9px;
}
.deckrow select:focus{outline:none;border-color:var(--accent,var(--cyan))}

.vizrow .steplbl{flex:1 1 140px;min-width:0}
.vizsep{border:0;border-top:1px solid var(--border);margin:20px 0 18px}

/* the cards-per-row stepper: two arrows either side of the number */
.stepper .btn.sm svg{
  width:17px;height:17px;display:block;
  fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
}

/* Settings → Dots: pick one of the five, then name and color it below */
.dotpicks{display:flex;flex-wrap:wrap;gap:8px}
.dotpick{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--well);border:1px solid var(--border);color:var(--muted);
  border-radius:999px;min-height:34px;padding:0 13px 0 9px;
  font:inherit;font-size:var(--fs-13);font-weight:700;cursor:pointer;transition:.15s;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
.dotpick .sw{
  width:16px;height:16px;flex:none;border-radius:50%;background:var(--dotc,var(--border));
}
.dotpick .nm{
  font-size:var(--fs-13);letter-spacing:.2px;
  max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.dotpick:hover{border-color:var(--dotc,var(--cyan));color:var(--gray)}
.dotpick[aria-pressed="true"]{
  border-color:var(--dotc,var(--cyan));color:var(--gray);
  box-shadow:0 0 0 1px var(--dotc,var(--cyan));
}
.dotedit{display:flex;flex-direction:column;gap:12px;margin-top:16px}
.dotname{
  width:100%;background:var(--well);border:1px solid var(--border);color:var(--gray);
  font:inherit;font-size:var(--fs-14);padding:9px 12px;
}
.dotname:focus{outline:none;border-color:var(--accent,var(--cyan))}

/* Settings → Collections: one small button per set */
.rlblrow{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.rlblrow .rlbl{margin-bottom:0;flex:1}
.setchips{display:flex;flex-wrap:wrap;gap:8px}
.setchip{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--well);border:1px solid var(--border);border-radius:999px;
  min-height:32px;padding:0 12px;font-size:var(--fs-13);
}
.setchip .sid{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-weight:700;color:var(--gray);
}
.setchip .scnt{color:var(--muted);font-variant-numeric:tabular-nums;font-size:var(--fs-12)}
.setchip .srange{
  color:var(--accent,var(--cyan));font-variant-numeric:tabular-nums;font-size:var(--fs-12);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
.setchip.miss{border-style:dashed}
.setchip.miss .sid{color:var(--muted)}
.setchip .sdrop{
  width:20px;height:20px;flex:none;margin-right:-5px;padding:0;
  display:flex;align-items:center;justify-content:center;
  background:none;border:0;border-radius:50%;color:var(--muted);
  font:inherit;font-size:var(--fs-11);line-height:1;cursor:pointer;transition:.15s;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
.setchip .sdrop:hover{background:var(--coral);color:var(--navy)}
.setchip .smove{
  width:20px;height:20px;flex:none;padding:0;
  display:flex;align-items:center;justify-content:center;
  background:none;border:0;border-radius:50%;color:var(--muted);
  font:inherit;font-size:var(--fs-9);line-height:1;cursor:pointer;transition:.15s;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
.setchip .smove:hover{background:var(--hover);color:var(--gray)}
.setchip .smove + .sdrop{margin-left:1px}
.addset{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.addset[hidden]{display:none}
.addset input[type=text]{
  flex:1 1 150px;min-width:0;background:var(--well);border:1px solid var(--border);
  color:var(--gray);font:inherit;font-size:var(--fs-14);padding:9px 12px;
}
.addset input:focus{outline:none;border-color:var(--accent,var(--cyan))}
.mdblock{
  margin-top:14px;padding:12px 14px;background:var(--well);border:1px solid var(--border);
  border-radius:12px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:var(--fs-13);line-height:1.6;color:var(--muted);
  max-height:280px;overflow:auto;white-space:pre-wrap;word-break:break-word;
}

/* the button at the foot of the page that saves the cards on screen as PNG files */
#dlPngBtn{display:inline-flex;align-items:center;gap:7px}
#dlPngBtn svg{width:16px;height:16px;display:block;
  fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#dlPngBtn:hover{color:var(--mint);border-color:var(--mint)}