/* ================= CARD SHOP ================= */
/* ---- finding a set among a hundred and fifteen ----
   The rail below is every set in the game. Browsing it is fine; LOOKING for one
   is a scroll through a hundred logos a thumb-width at a time.

   The heading earns its place: there is already a "Search this set…" box further
   down the page, and two unlabelled search fields on one screen is a worse
   problem than the one being solved. This one says ALL SETS next to it and sits
   above the rail it filters, so which is which is answered by position and not
   by reading the placeholder. */
.setfind{display:flex;align-items:center;gap:10px;margin:2px 0 9px}
.setfind-t{font-family:'Bebas Neue';font-size:13px;letter-spacing:.14em;color:#8a90b8;flex:none}
.setfind-box{position:relative;display:flex;align-items:center;flex:1;min-width:0}
.setfind-box svg{position:absolute;left:11px;width:14px;height:14px;fill:none;stroke:#8a90b8;
  stroke-width:2;stroke-linecap:round;pointer-events:none}
.setfind-box input{width:100%;background:linear-gradient(180deg,#1a1e3a,#12152a);
  border:1px solid var(--line);color:var(--txt);font-family:'Outfit';font-weight:600;
  font-size:12.5px;padding:9px 11px 9px 32px;border-radius:11px;outline:none}
.setfind-box input:focus{border-color:#4a5290}
.setfind-box input::-webkit-search-cancel-button{filter:invert(.6)}
/* the count is the feedback that the filter is doing something — without it a
   short rail and a filtered rail look identical */
.setfind-n{flex:none;font-size:10.5px;font-weight:700;color:#767ea6;
  font-variant-numeric:tabular-nums;min-width:58px;text-align:right}
.setfind-n.none{color:#ff8484}
.setfind-empty{padding:16px 4px;font-size:12px;color:#8a90b8}
@media(max-width:430px){
  /* the heading is the first thing to go: the rail underneath already says what
     these are, and the search field needs the width more than the label does */
  .setfind-t{display:none}
  .setfind-n{min-width:52px;font-size:10px}
}

/* set picker — a rail of set logos */
.shop-sets{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 10px;margin:0 -2px 10px;
  scrollbar-width:thin;cursor:grab}
.shop-sets.dragging{cursor:grabbing;user-select:none}
.shop-sets.dragging *{pointer-events:none}
.shop-sets::-webkit-scrollbar{height:5px}
.shop-sets::-webkit-scrollbar-thumb{background:#2b3160;border-radius:4px}
.shop-set{flex:0 0 auto;height:52px;min-width:92px;padding:8px 13px;cursor:pointer;border-radius:13px;
  background:linear-gradient(180deg,#1a1f3c,#12162c);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;transition:transform .14s ease,border-color .14s ease,box-shadow .14s}
.shop-set img{max-height:100%;max-width:118px;object-fit:contain;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}
.shop-set span{font-size:10.5px;font-weight:700;color:#c3c8ee;text-align:center;line-height:1.15}
.shop-set:hover{transform:translateY(-2px);border-color:#4a5290}
.shop-set.on{border-color:#ffcf33;box-shadow:0 0 0 1px #ffcf33,0 8px 20px -6px rgba(255,203,5,.55);
  background:linear-gradient(180deg,#262c55,#171c39)}

/* search + sort */
.shop-bar{display:flex;gap:8px;margin:0 2px 10px}
.shop-search{position:relative;flex:1.3;display:flex;align-items:center}
.shop-search svg{position:absolute;left:12px;width:15px;height:15px;fill:none;stroke:#8a90b8;stroke-width:2;
  stroke-linecap:round;pointer-events:none}
.shop-search input{width:100%;background:linear-gradient(180deg,#1a1e3a,#12152a);border:1px solid var(--line);
  color:var(--txt);font-family:'Outfit';font-weight:600;font-size:12.5px;padding:11px 12px 11px 34px;border-radius:12px;outline:none}
.shop-search input:focus{border-color:#4a5290}
.shop-search input::-webkit-search-cancel-button{filter:invert(.6)}
.shop-bar .selwrap{flex:1}

/* filter chips */
.shop-chips{display:flex;gap:6px;overflow-x:auto;padding:0 2px 4px;margin:0 -2px 8px;scrollbar-width:none}
.shop-chips::-webkit-scrollbar{display:none}
.schip{flex:0 0 auto;background:#171b33;border:1px solid var(--line);color:var(--dim);font-family:'Outfit';
  font-weight:700;font-size:11px;padding:6px 12px;border-radius:99px;cursor:pointer;transition:.14s;white-space:nowrap}
.schip:hover{color:#cfd4f5}
.schip.on{background:#2a3160;color:#fff;border-color:#4a5290}
.schip.cash.on{background:linear-gradient(180deg,#48e08c,#22b866);color:#06331b;border-color:#3ff08a}

.shop-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 4px 9px;
  font-size:10.5px;font-weight:700;color:var(--dim2);letter-spacing:.04em}
.live-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#3ff08a;margin-right:6px;
  box-shadow:0 0 7px #3ff08a;animation:livepulse 1.8s ease-in-out infinite;vertical-align:middle}
.live-dot.pending{background:#ffcf33;box-shadow:0 0 7px #ffcf33}
@keyframes livepulse{0%,100%{opacity:.55}50%{opacity:1}}

/* the display case grid */
.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(102px,1fr));gap:10px;margin:0 2px}
.scard{position:relative;border-radius:10px;overflow:hidden;cursor:pointer;background:#12152a;
  border:1px solid rgba(255,255,255,.07);box-shadow:0 6px 16px rgba(0,0,0,.4);
  transition:transform .16s cubic-bezier(.2,1.2,.3,1),box-shadow .16s,border-color .16s;
  animation:scardin .32s ease both;animation-delay:calc(var(--d,0)*.018s)}
@keyframes scardin{0%{opacity:0;transform:translateY(10px) scale(.96)}100%{opacity:1;transform:none}}
.scard:hover{transform:translateY(-5px) scale(1.02);z-index:2;
  border-color:var(--rc);box-shadow:0 14px 28px rgba(0,0,0,.55),0 0 22px -6px var(--rc)}
.scard:active{transform:translateY(-2px) scale(.99)}
.sc-img{position:relative;aspect-ratio:63/88;overflow:hidden}
.sc-img img{width:100%;height:100%;object-fit:cover;display:block}
.scard.cant .sc-img img{filter:grayscale(.55) brightness(.62)}
/* "you pulled a card you were hunting" badge (pack reveal + box break) */

/* ================= provenance tag =================
   A card you bought isn't a card you pulled, and the binder should say so.
   Shop-bought copies wear a little manila swing tag on the sleeve — punched
   hole, pointed end, stuck on crooked like it came off a counter. Sized in em
   off one font-size so the same markup scales from a binder pocket to a slab. */
.ptag{position:absolute;top:5px;right:4px;z-index:6;pointer-events:none;
  display:inline-flex;align-items:center;
  font-size:7.5px;line-height:1;padding:.36em .62em .36em 1.2em;
  font-family:'Outfit',sans-serif;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:#4a3410;
  background:linear-gradient(157deg,#f6ead0 0 40%,#dcc79a);
  clip-path:polygon(0 50%,.62em 0,100% 0,100% 100%,.62em 100%);
  transform:rotate(-5deg);transform-origin:100% 50%;
  filter:drop-shadow(0 1px 2.5px rgba(0,0,0,.6))}
/* the punched hole the string would go through */
.ptag::before{content:'';position:absolute;left:.74em;top:50%;margin-top:-.15em;
  width:.3em;height:.3em;border-radius:50%;background:rgba(74,52,16,.5)}
/* traded-for: same tag, different stock */
.ptag.tr{color:#0f3a2b;background:linear-gradient(157deg,#cdecd9 0 40%,#93c9ac)}
.ptag.tr::before{background:rgba(15,58,43,.5)}

/* slabs size themselves in container units, so the tag rides along */
.slab .ptag{font-size:4.2cqw;top:2.4cqw;right:2.4cqw}
/* the big card sheet: sits on the card's corner without tilting with it */
.cm-cardwrap .ptag{font-size:11px;top:7px;right:6px}

/* Cards the card database has no market price for. Not an error and not a
   spinner — a real gap that will not close on its own, so it says so rather
   than counting toward a total it can never reach. */
.nomkt{color:#ffc86a;font-weight:700}