/* ============================================================================
   Dice & Dumplings show kiosk.

   Meant to read as a glass case rather than a spreadsheet: the shop's dark
   violet, cards sitting in binder pockets with a gloss across the top, foils
   that actually catch the light, and a price on a tag. The look is lifted from
   the in-store binder kiosk so the two feel like the same shop.

   The display font is served from our own server, not Google's. A card show
   hall is the wrong place to discover a font CDN is unreachable.
   ========================================================================== */
@font-face{
  font-family:'DDDisplay';
  src:url('/font/display.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}
:root{
  --bg:#0b0922; --bg-2:#150b34;
  --panel:#1a1140; --panel-2:#120a2c; --panel-3:#241a52;
  --line:rgba(255,255,255,.12); --line-2:rgba(255,255,255,.2);
  --ink:#f4f2ee; --ink-2:#cfc9e6; --ink-3:#9a93b8;
  --brand:#d12f35; --brand-2:#9c1f24;
  --violet:#7b5bff; --violet-2:#5a3fd6;
  --go:#2fae6e; --go-2:#1d7d4f; --mint:#6ee7b0;
  --gold:#e7c768; --gold-2:#b8923a;
  --font:'Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;
  --display:'DDDisplay','Segoe UI',system-ui,sans-serif;
  --tile:176px;
}
*{box-sizing:border-box}
html,body{height:100%;-webkit-text-size-adjust:100%;text-size-adjust:100%;max-width:100%;overflow-x:hidden}
body{
  margin:0;color:var(--ink);font-family:var(--font);overflow:hidden;
  background:
    radial-gradient(1100px 760px at 12% -6%,rgba(123,91,255,.26),transparent 55%),
    radial-gradient(900px 620px at 95% 8%,rgba(209,47,53,.14),transparent 60%),
    linear-gradient(160deg,#0a0820,#150b34 55%,#0b0922);
  background-attachment:fixed;
}

/* ---- top bar ---------------------------------------------------------- */
.top{position:fixed;top:0;left:0;right:0;z-index:30;display:flex;align-items:center;gap:14px;
  padding:11px 18px;background:rgba(10,8,26,.82);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);box-shadow:0 10px 30px rgba(0,0,0,.45)}
.brand{display:flex;align-items:center;gap:11px;white-space:nowrap}
.brand img{height:38px;width:auto;display:block}
.brand .bt{font-family:var(--display);font-size:19px;line-height:1.05;letter-spacing:.2px}
.brand .bs{font-size:11.5px;font-weight:700;color:var(--ink-3)}
.search{flex:1;min-width:140px;display:flex;align-items:center;gap:9px;height:50px;padding:0 15px;
  background:rgba(255,255,255,.07);border:1px solid var(--line);border-radius:14px;transition:border-color .15s}
.search:focus-within{border-color:var(--violet)}
.search input{flex:1;width:0;min-width:0;background:0;border:0;outline:0;color:var(--ink);font-size:18px;font-family:inherit}
.search input::placeholder{color:var(--ink-3)}
.search input::-webkit-search-cancel-button,.search input::-webkit-search-decoration{-webkit-appearance:none;display:none}
.search .clr{background:0;border:0;color:var(--ink-3);font-size:21px;cursor:pointer;padding:0 4px}

.btn{height:50px;padding:0 18px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.06);
  color:var(--ink);font-family:inherit;font-size:15.5px;font-weight:800;cursor:pointer;white-space:nowrap;
  transition:transform .08s,background .15s}
.btn:hover{background:rgba(255,255,255,.12)}
.btn:active{transform:scale(.97)}
.btn.primary{background:linear-gradient(135deg,var(--brand),var(--brand-2));border-color:transparent;
  box-shadow:0 10px 26px rgba(209,47,53,.4)}
.btn.go{background:linear-gradient(135deg,var(--go),var(--go-2));border-color:transparent;
  box-shadow:0 10px 26px rgba(47,174,110,.35)}
.btn.ghost{background:0}
.btn[disabled]{opacity:.45;cursor:default;box-shadow:none}
.basketbtn b{display:inline-block;min-width:24px;margin-left:9px;padding:2px 7px;border-radius:999px;
  background:rgba(0,0,0,.35);font-size:14px}

/* ---- filter strip ------------------------------------------------------ */
/* The rail. A strip of glass under the top bar with a slow aurora moving
   behind it; colours are orbs, rarities are gems, the rest are lenses. The
   gradients are painted on the strip itself (not on its content) so they stay
   put while the strip scrolls sideways on a phone. */
.filters{position:fixed;top:var(--topH,72px);left:0;right:0;z-index:29;display:flex;gap:10px;align-items:center;
  padding:9px 18px;overflow-x:auto;scrollbar-width:none;
  background:
    radial-gradient(42% 160% at 12% 50%,rgba(123,91,255,.30),transparent 70%),
    radial-gradient(34% 160% at 86% 50%,rgba(209,47,53,.22),transparent 70%),
    radial-gradient(30% 140% at 52% 50%,rgba(110,231,176,.10),transparent 70%),
    linear-gradient(180deg,rgba(14,10,36,.78),rgba(10,8,26,.7));
  background-size:200% 100%,200% 100%,200% 100%,100% 100%;
  animation:aurora 18s ease-in-out infinite alternate;
  backdrop-filter:blur(10px) saturate(1.25);
  border-bottom:1px solid rgba(255,255,255,.09);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 14px 34px rgba(0,0,0,.38)}
.filters::-webkit-scrollbar{display:none}
@keyframes aurora{0%{background-position:0% 0,100% 0,50% 0,0 0}100%{background-position:100% 0,0% 0,40% 0,0 0}}
html.lite .filters{animation:none;backdrop-filter:none}
.rsep{flex:none;width:1px;height:28px;background:linear-gradient(180deg,transparent,rgba(255,255,255,.22),transparent)}
/* a laptop screen: glyphs only on the sort, the words live in the tooltip */
@media (max-width:1900px){ .seg .sg .lbl{display:none} .seg .sg{padding:0 11px} }
@media (max-width:1560px){
  .filters{gap:8px;padding-left:14px;padding-right:14px}
  .pill .pl{display:none} .pill{padding:0 11px 0 13px}
  #sizeBtn .szl{display:none} #sizeBtn{padding:0 11px;font-size:17px}
  .count{font-size:12px} .count b{font-size:17px}
}
@media (max-width:1340px){ .count{display:none} }
#sizeBtn{padding:0 12px}

/* sort: a segmented control with a pill that slides under the choice */
.seg{flex:none;position:relative;display:inline-flex;align-items:center;height:40px;padding:3px;border-radius:999px;
  background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.1);box-shadow:inset 0 1px 3px rgba(0,0,0,.5)}
.seg .sg{position:relative;z-index:1;height:32px;padding:0 13px;border:0;border-radius:999px;background:0;color:var(--ink-3);
  font-family:inherit;font-size:13.5px;font-weight:800;cursor:pointer;white-space:nowrap;transition:color .2s}
.seg .sg:hover{color:var(--ink-2)}
.seg .sg.on{color:#fff}
.seg .slide{position:absolute;top:3px;bottom:3px;left:0;width:0;border-radius:999px;z-index:0;
  background:linear-gradient(135deg,rgba(123,91,255,.95),rgba(90,63,214,.95));
  box-shadow:0 4px 14px rgba(123,91,255,.45),inset 0 1px 0 rgba(255,255,255,.3);
  transition:left .28s cubic-bezier(.4,0,.2,1),width .28s cubic-bezier(.4,0,.2,1)}
html.lite .seg .slide{transition:none}

/* the mana rail: glass spheres, lit when chosen */
.mana{flex:none;display:inline-flex;align-items:center;gap:4px;padding:0 2px}
.morb{position:relative;flex:none;width:36px;height:36px;border:0;border-radius:50%;background:0;padding:0;cursor:pointer;
  display:grid;place-items:center;transition:transform .18s cubic-bezier(.34,1.56,.64,1),filter .2s,opacity .2s}
.morb .orb{width:30px;height:30px;transition:box-shadow .2s,transform .2s}
.morb .orb::after{content:attr(data-l);position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--display);font-size:13px;color:rgba(255,255,255,.75);text-shadow:0 1px 2px rgba(0,0,0,.6)}
.morb .orb{position:relative}
.morb .orb.B::after{color:rgba(255,255,255,.65)} .morb .orb.W::after{color:rgba(60,45,10,.75);text-shadow:none} .morb .orb.C::after{color:rgba(40,30,70,.7);text-shadow:none}
.morb:hover{transform:translateY(-2px) scale(1.06)}
.mana.has .morb:not(.on){filter:saturate(.35) brightness(.7);opacity:.7}
.morb.on{transform:scale(1.14)}
.morb.on .orb{box-shadow:inset 0 -3px 6px rgba(0,0,0,.4),inset 0 2px 4px rgba(255,255,255,.55),0 0 0 2px rgba(255,255,255,.9),0 0 0 5px var(--halo,rgba(123,91,255,.45)),0 0 22px var(--halo,rgba(123,91,255,.7))}
.morb.W{--halo:rgba(236,223,174,.6)} .morb.U{--halo:rgba(77,159,232,.65)} .morb.B{--halo:rgba(120,100,160,.7)}
.morb.R{--halo:rgba(230,90,49,.65)} .morb.G{--halo:rgba(63,156,75,.65)} .morb.C{--halo:rgba(200,190,230,.6)} .morb.M{--halo:rgba(230,180,90,.6)}
.morb.none{opacity:.3;filter:saturate(.2)}
.morb.none:hover{transform:none}

/* rarity gems, cut rather than round */
.gems{flex:none;display:inline-flex;align-items:center;gap:4px;padding:0 2px}
.gemb{flex:none;width:32px;height:36px;border:0;background:0;padding:0;cursor:pointer;display:grid;place-items:center;
  transition:transform .18s cubic-bezier(.34,1.56,.64,1),opacity .2s,filter .2s}
.gemb .gem{width:18px;height:18px;transform:rotate(45deg);border-radius:4px;margin:0;transition:box-shadow .2s}
.gemb:hover{transform:translateY(-2px) scale(1.08)}
.gems.has .gemb:not(.on){opacity:.5;filter:saturate(.4)}
.gemb.on{transform:scale(1.15)}
.gemb.on .gem{box-shadow:inset 0 0 0 1px rgba(255,255,255,.5),0 0 0 2px rgba(255,255,255,.9),0 0 0 5px var(--halo,rgba(123,91,255,.45)),0 0 20px var(--halo,rgba(123,91,255,.7))}
.gemb.common{--halo:rgba(140,140,150,.6)} .gemb.uncommon{--halo:rgba(200,215,230,.6)} .gemb.rare{--halo:rgba(231,199,104,.65)} .gemb.mythic{--halo:rgba(224,90,40,.65)} .gemb.special{--halo:rgba(170,120,255,.65)}
.gemb.none{opacity:.25}

/* lenses: Set, Type, Price. A hairline gradient border, lit violet when on */
.pill{border:1px solid transparent;
  background:linear-gradient(rgba(22,16,48,.9),rgba(22,16,48,.9)) padding-box,
             linear-gradient(135deg,rgba(255,255,255,.28),rgba(123,91,255,.35) 60%,rgba(255,255,255,.08)) border-box}
.pill:hover{background:linear-gradient(rgba(34,26,68,.95),rgba(34,26,68,.95)) padding-box,
             linear-gradient(135deg,rgba(255,255,255,.4),rgba(123,91,255,.6) 60%,rgba(255,255,255,.15)) border-box}
.pill.on{background:linear-gradient(135deg,rgba(123,91,255,.42),rgba(90,63,214,.3)) padding-box,
             linear-gradient(135deg,rgba(200,185,255,.9),rgba(123,91,255,.9)) border-box;
  box-shadow:0 6px 20px rgba(123,91,255,.3),inset 0 1px 0 rgba(255,255,255,.2)}
.pill.on .pl{color:#e6dfff}
.pill .px{display:none;width:18px;height:18px;border-radius:50%;background:rgba(255,255,255,.18);font-size:11px;line-height:18px;text-align:center;color:#fff;margin-left:2px}
.pill.on .px{display:inline-block}
.pill.on .pc{display:none}
.pill.on .px:hover{background:rgba(209,47,53,.8)}
.chip.clear{color:#ffd7d9;border-color:rgba(209,47,53,.5);background:rgba(209,47,53,.14)}
.chip.clear:hover{background:rgba(209,47,53,.28)}
.chip,.pill{flex:none;height:40px;display:inline-flex;align-items:center;gap:8px;padding:0 15px;border-radius:999px;
  border:1px solid var(--line);background:rgba(255,255,255,.05);color:var(--ink-2);
  font-family:inherit;font-size:14.5px;font-weight:800;cursor:pointer;white-space:nowrap;
  transition:background .15s,border-color .15s,box-shadow .15s,transform .08s}
.chip:hover,.pill:hover{background:rgba(255,255,255,.1)}
.chip:active,.pill:active{transform:scale(.97)}
.chip.on{background:rgba(123,91,255,.26);border-color:var(--violet);color:#fff}
/* a pill reads "what · value" and lights up when the value is doing something */
.pill{padding:0 13px 0 14px}
.pill .pl{font-size:10.5px;letter-spacing:.9px;text-transform:uppercase;color:var(--ink-3)}
.pill .pv{display:inline-flex;align-items:center;gap:7px;color:var(--ink);max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pill .pc{width:7px;height:7px;border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);
  transform:rotate(45deg) translateY(-2px);margin-left:2px;flex:none}
.pill.on{background:linear-gradient(135deg,rgba(123,91,255,.36),rgba(123,91,255,.14));border-color:rgba(150,122,255,.9);
  box-shadow:inset 0 0 0 1px rgba(150,122,255,.25),0 6px 18px rgba(123,91,255,.28)}
.pill.on .pl{color:#cfc4ff} .pill.on .pc{border-color:#cfc4ff}
.pill.foilp.on{background:linear-gradient(135deg,rgba(231,199,104,.4),rgba(184,146,58,.2));border-color:rgba(231,199,104,.9);
  box-shadow:inset 0 0 0 1px rgba(231,199,104,.25),0 6px 18px rgba(231,199,104,.25)}
.pill.foilp.on .pv,.pill.foilp.on .pl{color:#ffe9a3}
/* mana orbs and rarity gems: the thing itself, not a word for it */
.orb{display:inline-block;width:18px;height:18px;border-radius:50%;flex:none;vertical-align:middle;
  box-shadow:inset 0 -3px 6px rgba(0,0,0,.4),inset 0 2px 4px rgba(255,255,255,.5),0 0 0 1px rgba(0,0,0,.45),0 2px 6px rgba(0,0,0,.4)}
.orb.W{background:radial-gradient(circle at 35% 30%,#fffdf0,#ecdfae 58%,#b9a86a)}
.orb.U{background:radial-gradient(circle at 35% 30%,#cdeaff,#4d9fe8 58%,#174f93)}
.orb.B{background:radial-gradient(circle at 35% 30%,#9a95a8,#3b3646 58%,#120f19)}
.orb.R{background:radial-gradient(circle at 35% 30%,#ffc3ab,#e65a31 58%,#861f0e)}
.orb.G{background:radial-gradient(circle at 35% 30%,#c7f3bd,#3f9c4b 58%,#174d23)}
.orb.C{background:radial-gradient(circle at 35% 30%,#f3eeff,#bcb6cf 58%,#726b86)}
.orb.M{background:conic-gradient(from 200deg,#ecdfae,#4d9fe8,#3b3646,#e65a31,#3f9c4b,#ecdfae)}
.gem{display:inline-block;width:12px;height:12px;transform:rotate(45deg);border-radius:3px;flex:none;margin:0 4px;vertical-align:middle;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.25),0 0 0 1px rgba(0,0,0,.5),0 2px 6px rgba(0,0,0,.4)}
.gem.common{background:linear-gradient(135deg,#4a4a4a,#111)}
.gem.uncommon{background:linear-gradient(135deg,#f1f4f7,#8798ab)}
.gem.rare{background:linear-gradient(135deg,#ffeeb0,#c89b2f)}
.gem.mythic{background:linear-gradient(135deg,#ffc07a,#e0441a)}
.gem.special,.gem.bonus{background:linear-gradient(135deg,#e6c5ff,#7b5bff)}

/* the picker a pill opens */
.box.pick{width:min(760px,96vw)}
.box.pick .hd .btn{height:42px;padding:0 15px;font-size:14.5px}
.pk{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}
.opt{min-height:56px;display:flex;align-items:center;gap:12px;padding:10px 15px;border-radius:14px;
  border:1px solid var(--line);background:rgba(255,255,255,.05);color:var(--ink);font-family:inherit;font-weight:800;
  font-size:15.5px;cursor:pointer;text-align:left;transition:background .15s,border-color .15s,transform .08s}
.opt:hover{background:rgba(255,255,255,.1)}
.opt:active{transform:scale(.98)}
.opt small{margin-left:auto;color:var(--ink-3);font-size:13px;font-weight:800;flex:none}
.opt.on{border-color:var(--violet);background:rgba(123,91,255,.24);box-shadow:inset 0 0 0 1px var(--violet),0 8px 22px rgba(123,91,255,.22)}
.opt.on::after{content:"✓";margin-left:6px;color:#cfc4ff;font-size:16px}
.opt .orb{width:30px;height:30px}
.opt .gem{width:16px;height:16px;margin:0 6px}
.opt .ol{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.opt.dim{opacity:.4}
.pk.mana{grid-template-columns:repeat(7,minmax(0,1fr))}
.pk.mana .opt{font-size:14px}
.pk.mana .opt{flex-direction:column;justify-content:center;gap:9px;padding:16px 8px 13px;text-align:center}
.pk.mana .opt .orb{width:48px;height:48px}
.pk.mana .opt small{margin:0}
.pk.mana .opt.on::after{position:absolute;top:8px;right:10px;margin:0}
.pk.mana .opt{position:relative}
.pk.rarity{grid-template-columns:repeat(2,1fr)}
.pk.list{grid-template-columns:1fr;gap:6px}
.pk.list .opt{min-height:50px}
.pksearch{width:100%;height:48px;margin:0 0 12px;padding:0 15px;border-radius:13px;border:1px solid var(--line);
  background:rgba(255,255,255,.06);color:var(--ink);font-family:inherit;font-size:16px;outline:0}
.pksearch:focus{border-color:var(--violet)}
.pknone{padding:20px;text-align:center;color:var(--ink-3);font-weight:700}
.count{margin-left:auto;flex:none;color:var(--ink-3);font-size:13px;font-weight:800;white-space:nowrap;text-align:right;line-height:1.1;padding-left:8px}
.count b{display:block;font-family:var(--display);font-size:19px;font-weight:400;color:var(--ink);letter-spacing:.3px}

/* ---- the case ---------------------------------------------------------- */
.scroller{position:fixed;top:var(--barH,122px);left:0;right:0;bottom:0;overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;scroll-behavior:auto}
.sizer{position:relative;width:100%}
.row{position:absolute;left:0;right:0;display:grid;gap:14px;padding:0 18px}
.row > .card{min-width:0}

/* a binder pocket: inner shadow, a gloss across the top, the card sitting in it */
.card{position:relative;border-radius:13px;cursor:pointer;display:flex;flex-direction:column;
  background:linear-gradient(162deg,rgba(255,255,255,.07),rgba(255,255,255,.015) 44%,rgba(0,0,0,.22));
  border:1px solid rgba(255,255,255,.1);
  box-shadow:inset 0 2px 10px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.2),0 8px 20px rgba(0,0,0,.3);
  transition:transform .12s ease,box-shadow .12s ease}
.card::before{content:"";position:absolute;left:0;right:0;top:0;height:10px;pointer-events:none;z-index:3;
  border-radius:13px 13px 0 0;background:linear-gradient(180deg,rgba(255,255,255,.26),rgba(255,255,255,0))}
.card:hover{transform:translateY(-4px);box-shadow:inset 0 2px 10px rgba(0,0,0,.4),0 16px 34px rgba(0,0,0,.5)}
.card.pressed{transform:scale(.975)}

.art{position:relative;margin:7px 7px 0;border-radius:9px;overflow:hidden;aspect-ratio:488/680;
  background:#0d0a1e;box-shadow:0 4px 14px rgba(0,0,0,.5)}
.art img{width:100%;height:100%;object-fit:cover;display:block}
.ph{position:absolute;inset:0;display:none;align-items:center;justify-content:center;text-align:center;
  padding:10px;font-size:12px;color:var(--ink-3);background:#0d0a1e}

/* the foil, straight off the in-store kiosk: a slow colour wash plus a sheen
   that travels across the card */
.holo{display:none;position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:2;
  background:linear-gradient(118deg, transparent 0 22%, rgba(255,80,170,.34) 31%, rgba(255,200,60,.34) 38%, rgba(120,255,190,.34) 45%, rgba(80,200,255,.34) 52%, rgba(195,105,255,.34) 59%, rgba(255,80,170,.28) 66%, transparent 76% 100%);
  background-size:260% 260%;mix-blend-mode:screen;opacity:.85;
  animation:gleam 7.5s ease-in-out infinite;animation-delay:var(--fd,0s)}
.card.foil .holo{display:block}
.holo::before{content:"";position:absolute;inset:0;mix-blend-mode:soft-light;opacity:.22;
  background:repeating-linear-gradient(115deg, rgba(255,64,160,.55) 0px, rgba(255,205,60,.5) 11px, rgba(70,255,170,.5) 22px, rgba(60,200,255,.55) 33px, rgba(190,90,255,.55) 44px, rgba(255,64,160,.55) 55px);
  -webkit-mask-image:linear-gradient(118deg,#000,rgba(0,0,0,.35) 30%,#000 52%,rgba(0,0,0,.3) 74%,#000);
  mask-image:linear-gradient(118deg,#000,rgba(0,0,0,.35) 30%,#000 52%,rgba(0,0,0,.3) 74%,#000)}
.holo::after{content:"";position:absolute;top:-40%;left:0;width:48%;height:180%;
  transform:translateX(-160%) rotate(18deg);filter:blur(3px);mix-blend-mode:screen;opacity:.9;
  background:linear-gradient(90deg, transparent, rgba(255,90,175,.55) 18%, rgba(255,210,70,.55) 34%, rgba(120,255,190,.55) 50%, rgba(90,205,255,.55) 66%, rgba(195,105,255,.55) 82%, transparent);
  animation:sweep 4.2s linear infinite;animation-delay:var(--fd,0s)}
@keyframes sweep{0%{transform:translateX(-160%) rotate(18deg)}60%,100%{transform:translateX(420%) rotate(18deg)}}
@keyframes gleam{0%{background-position:10% 50%;filter:hue-rotate(0deg) saturate(1);opacity:.30}
  30%{opacity:.62} 50%{background-position:90% 50%;filter:hue-rotate(40deg) saturate(1.2);opacity:.34}
  78%{opacity:.58} 100%{background-position:10% 50%;filter:hue-rotate(0deg) saturate(1);opacity:.30}}
/* and the pocket itself is framed in gold, so a foil is a foil from across the room */
.card.foil .art{box-shadow:inset 0 0 0 1px rgba(255,214,120,.65),0 0 16px rgba(255,200,90,.28),0 4px 14px rgba(0,0,0,.5)}
.card.foil{border-color:rgba(255,214,120,.7);
  box-shadow:inset 0 2px 10px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,235,180,.5),0 0 0 1px rgba(255,200,90,.38),0 8px 20px rgba(0,0,0,.3)}

/* lite: the same trick as the store kiosk, for a laptop that cannot keep up */
html.lite .holo{animation:none!important;opacity:.5!important}
html.lite .holo::before{display:none!important}
html.lite .holo::after{display:none!important}
html.lite .card{box-shadow:inset 0 1px 0 rgba(255,255,255,.14)!important;transition:none!important}
html.lite .card:hover{transform:none!important}
html.lite .top,html.lite .filters{backdrop-filter:none!important}
html.lite .frow{animation-duration:160s!important}

.cap{padding:8px 10px 10px}
.nm{font-family:var(--display);font-size:14px;line-height:1.24;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden;min-height:2.48em;letter-spacing:.1px}
.sub{margin-top:3px;font-size:11px;font-weight:700;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* one line, always: a tag row that wraps makes the card taller than the shelf
   it sits on, and the bottom of it gets cut off */
.row2{margin-top:8px;display:flex;align-items:center;justify-content:space-between;gap:7px;flex-wrap:nowrap;overflow:hidden}
/* the price tag */
.pr{font-family:var(--display);font-size:17px;color:#0d2a1c;background:linear-gradient(135deg,#7ff0bb,#36c184);
  padding:2px 9px;border-radius:8px;box-shadow:0 3px 10px rgba(47,174,110,.35)}
.tags{display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.tag{font-size:10px;font-weight:800;padding:2px 6px;border-radius:5px;background:rgba(255,255,255,.12);color:var(--ink-2)}
.tag.foil{color:#3a2a08;background:linear-gradient(100deg,#ffe58a,#ffb36b,#b6f0ff,#d8b4ff,#ffe58a);
  background-size:220% 100%;animation:foiltag 4s linear infinite}
@keyframes foiltag{to{background-position:220% 0}}
html.lite .tag.foil{animation:none;background:linear-gradient(135deg,var(--gold),var(--gold-2))}
.tag.stock{background:rgba(47,174,110,.22);color:#8fe0b6}
.tag.guide{background:rgba(123,91,255,.22);color:#cfc4ff}
.inb{position:absolute;top:12px;right:12px;min-width:30px;height:30px;border-radius:999px;z-index:4;
  background:linear-gradient(135deg,var(--go),var(--go-2));color:#fff;font-size:14px;font-weight:800;
  display:none;align-items:center;justify-content:center;padding:0 9px;box-shadow:0 6px 16px rgba(0,0,0,.45)}
.card.has .inb{display:flex}
/* how many of this card are in the box, where it cannot push anything about */
.stock{position:absolute;top:12px;left:12px;z-index:4;padding:2px 9px;border-radius:999px;
  background:rgba(10,8,26,.82);border:1px solid rgba(255,255,255,.25);color:#8fe0b6;
  font-size:12px;font-weight:800;box-shadow:0 4px 12px rgba(0,0,0,.5)}
.card.has{border-color:rgba(47,174,110,.6)}
.empty{padding:80px 24px;text-align:center;color:var(--ink-3);font-size:18px;line-height:1.7}
.empty b{color:var(--ink)}

/* ---- the +1 that jumps off the card ----------------------------------- */
.pop{position:fixed;z-index:60;pointer-events:none;font-family:var(--display);font-size:22px;color:var(--mint);
  text-shadow:0 2px 12px rgba(0,0,0,.7);animation:pop .75s ease-out forwards}
@keyframes pop{0%{transform:translate(-50%,0) scale(.7);opacity:0}22%{opacity:1;transform:translate(-50%,-14px) scale(1.15)}
  100%{transform:translate(-50%,-62px) scale(1);opacity:0}}

/* ---- panels ------------------------------------------------------------ */
.sheet{position:fixed;inset:0;z-index:50;background:rgba(5,4,16,.78);backdrop-filter:blur(4px);
  display:none;align-items:center;justify-content:center;padding:26px}
.sheet.on{display:flex}
.box{width:min(820px,96vw);max-height:92vh;display:flex;flex-direction:column;overflow:hidden;
  background:linear-gradient(160deg,var(--panel),var(--panel-2));border:1px solid var(--line-2);
  border-radius:20px;box-shadow:0 30px 90px rgba(0,0,0,.7)}
.box .hd{display:flex;align-items:center;gap:12px;padding:17px 22px;border-bottom:1px solid var(--line)}
.box .hd h2{margin:0;font-family:var(--display);font-size:23px;font-weight:400}
.box .bd{flex:1;overflow:auto;padding:16px 22px}
.box .ft{padding:15px 22px;border-top:1px solid var(--line);display:flex;align-items:center;gap:13px;background:rgba(0,0,0,.2)}
.line{display:flex;align-items:center;gap:13px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.07)}
.line:last-child{border-bottom:0}
.line img{width:50px;height:70px;object-fit:cover;border-radius:6px;background:#0d0a1e;flex:none;box-shadow:0 3px 10px rgba(0,0,0,.5)}
.line .mid{flex:1;min-width:0}
.line .mid b{display:block;font-size:16px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.line .mid span{font-size:12.5px;color:var(--ink-3);font-weight:700}
.qty{display:flex;align-items:center;gap:7px}
.qty button{width:38px;height:38px;border-radius:11px;border:1px solid var(--line);background:rgba(255,255,255,.08);
  color:var(--ink);font-size:20px;font-weight:800;cursor:pointer}
.qty span{min-width:28px;text-align:center;font-weight:800;font-size:17px}
.lp{width:80px;text-align:right;font-family:var(--display);font-size:17px;color:var(--mint)}
.total{margin-left:auto;font-family:var(--display);font-size:25px}
.total span{color:var(--mint)}
.nameIn{width:100%;height:60px;padding:0 18px;border-radius:14px;border:2px solid var(--line);
  background:rgba(255,255,255,.06);color:var(--ink);font-size:22px;font-family:inherit;outline:0}
.nameIn:focus{border-color:var(--go)}
.big{text-align:center;padding:30px 12px}
.big .no{font-family:var(--display);font-size:60px;color:var(--mint);line-height:1}
.big h2{font-family:var(--display);font-weight:400;margin:12px 0 6px;font-size:28px}
.big p{color:var(--ink-2);font-size:17px;line-height:1.55}
.zoom{flex-direction:column;gap:16px;perspective:1000px}
.zoom .zwrap{position:relative;border-radius:16px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.75);background:#0d0a1e;
  min-width:min(320px,80vw);min-height:calc(min(320px,80vw) * 680 / 488);
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transform-style:preserve-3d;transition:transform .08s linear;will-change:transform}
.zoom .zwrap .holo{display:none;border-radius:16px}
.zoom .zwrap.foil .holo{display:block}
/* the light on the card moves against the tilt, so it reads as a real surface */
.zoom .zshine{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;opacity:var(--sh,0);
  background:radial-gradient(60% 45% at var(--sx,50%) var(--sy,50%),rgba(255,255,255,.45),rgba(255,255,255,.08) 45%,transparent 70%)}
.zoom .tiltbtn{height:44px;font-size:14.5px;border-color:rgba(123,91,255,.6);background:rgba(123,91,255,.22)}
html.lite .zoom .zwrap{transform:none!important;transition:none}
html.lite .zoom .zshine{display:none}
.zoom img{max-width:min(560px,92vw);max-height:84vh;display:block}
.zoom .zcap{position:absolute;left:0;right:0;bottom:0;padding:14px 16px;text-align:center;
  background:linear-gradient(180deg,transparent,rgba(5,4,16,.92));font-family:var(--display);font-size:20px}
.warn{margin:10px 18px;padding:11px 15px;border-radius:12px;background:rgba(209,47,53,.18);
  border:1px solid rgba(209,47,53,.5);color:#ffd7d9;font-size:14px;font-weight:700}

/* ---- the attract screen ------------------------------------------------ */
#attract{position:fixed;inset:0;z-index:70;display:none;overflow:hidden;background:#09071c}
#attract.on{display:block}
/* The field: the whole screen tiled with cards, drifting on the diagonal.
   The rows are laid out flat and the field as a whole is turned and scaled up
   so the corners stay covered; every row is doubled so the loop has no seam. */
.field{position:absolute;left:50%;top:50%;width:170vmax;height:170vmax;transform:translate(-50%,-50%) rotate(-14deg);
  display:flex;flex-direction:column;justify-content:center;gap:14px;will-change:transform}
.frow{display:flex;gap:14px;flex:none;will-change:transform}
.frow.l{animation:glideL var(--dur,70s) linear infinite}
.frow.r{animation:glideR var(--dur,70s) linear infinite}
.frow .gcard{flex:none;width:var(--gw,150px);border-radius:9px;overflow:hidden;background:#0d0a1e;
  box-shadow:0 10px 26px rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.1)}
.frow .gcard img{width:100%;display:block;aspect-ratio:488/680;object-fit:cover}
@keyframes glideL{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes glideR{from{transform:translateX(-50%)}to{transform:translateX(0)}}
/* just enough shade behind the words to read them; the cards are the show */
#attract .veil{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(34% 40% at 50% 50%,rgba(6,4,20,.86) 0,rgba(6,4,20,.7) 55%,rgba(6,4,20,0) 100%),
             linear-gradient(180deg,rgba(6,4,20,.35),rgba(6,4,20,.08) 30%,rgba(6,4,20,.08) 70%,rgba(6,4,20,.4))}
#attract .buy{margin-top:22px;display:inline-flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center;
  padding:12px 22px;border-radius:999px;border:1px solid rgba(231,199,104,.55);
  background:linear-gradient(135deg,rgba(231,199,104,.18),rgba(184,146,58,.1));box-shadow:0 10px 30px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,235,180,.3)}
#attract .buy .bt{font-family:var(--display);font-size:20px;color:#ffe9a3;letter-spacing:.3px}
#attract .buy .bv{font-size:16px;font-weight:800;color:var(--ink-2);padding-left:14px;border-left:1px solid rgba(231,199,104,.4)}
#attract .buy .bv b{font-family:var(--display);font-size:24px;color:#fff;margin-right:4px}
.buyline{margin:16px auto 0;max-width:460px;padding:10px 16px;border-radius:12px;font-size:14.5px;color:var(--ink-2);
  background:rgba(231,199,104,.12);border:1px solid rgba(231,199,104,.4)}
.buyline b{color:#ffe9a3}
#attract .mid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;text-align:center;padding:24px}
#attract .logo{height:92px;width:auto;filter:drop-shadow(0 10px 30px rgba(0,0,0,.6))}
#attract h1{font-family:var(--display);font-weight:400;font-size:46px;margin:0;letter-spacing:.3px}
#attract p{margin:0;color:var(--ink-2);font-size:20px;font-weight:700}
#attract .cta{margin-top:10px;padding:22px 44px;border:0;border-radius:20px;cursor:pointer;
  font-family:var(--display);font-size:28px;color:#fff;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  box-shadow:0 18px 46px rgba(209,47,53,.5);animation:breathe 2.6s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
#attract .foot{position:absolute;left:0;right:0;bottom:26px;text-align:center;color:var(--ink-3);font-size:15px;font-weight:700}
html.lite #attract .cta{animation:none}

/* ============================================================================
   Phones. Half the people at a show will scan the code on the table and browse
   on their own phone, so this is not an afterthought: it is the other half of
   the kiosk. One hand, thumb reach, no hover.
   ========================================================================== */
@media (max-width: 760px){
  :root{ --tile:132px; }
  .top{padding:7px 10px;gap:9px;flex-wrap:nowrap}
  .brand{flex:none}
  .brand img{height:32px}
  .brand .btx{display:none}                /* the logo is the brand; the words cost a whole row */
  .search{flex:1;min-width:0;height:44px;font-size:16px}
  .search input{font-size:16px}          /* 16px or iOS zooms the whole page in */
  .btn{height:44px;padding:0 13px;font-size:14.5px}
  .basketbtn{margin-left:auto}
  .filters{padding:6px 10px;gap:7px}
  .filters .btn{height:34px;padding:0 12px;border-radius:999px;font-size:13.5px;flex:none}
  #sizeBtn{display:none}                   /* a phone fits two cards across whatever you pick */
  .chip,.pill{height:36px;padding:0 12px;font-size:13.5px;gap:6px}
  .seg{height:36px} .seg .sg{height:28px;padding:0 9px;font-size:12.5px}
  .seg .sg .lbl{display:none}
  .morb{width:32px;height:32px} .morb .orb{width:26px;height:26px} .morb .orb::after{font-size:11px}
  .gemb{width:28px;height:32px} .gemb .gem{width:15px;height:15px}
  .rsep{height:22px}
  .pill .pl{display:none}                 /* just the value; the picker names it */
  .pill .pv{max-width:120px}
  .filters{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent);
    scrollbar-width:none}
  .filters::-webkit-scrollbar{display:none}
  .pk{grid-template-columns:repeat(2,1fr)}
  .pk.mana{grid-template-columns:repeat(4,1fr)}
  .pk.mana .opt .orb{width:40px;height:40px}
  .pk.mana .opt{padding:12px 4px 10px;font-size:13.5px}
  .count{display:none}
  .row{gap:8px;padding:0 8px}
  .card{border-radius:10px}
  .art{margin:5px 5px 0;border-radius:7px}
  .cap{padding:6px 7px 7px}
  .nm{font-size:12px;line-height:1.2;min-height:2.4em}
  .sub{font-size:9.5px;margin-top:2px}
  .row2{margin-top:6px;gap:4px}
  .pr{font-size:13.5px;padding:2px 6px;border-radius:6px}
  .tags{gap:3px}
  .tag{font-size:8.5px;padding:1px 4px}
  .tag:not(.foil){display:none}          /* three across: the price and FOIL are what matter */
  .stock{top:8px;left:8px;padding:1px 7px;font-size:11px}
  .inb{top:8px;right:8px;min-width:24px;height:24px;font-size:12px;padding:0 7px}
  .card:hover{transform:none;box-shadow:inset 0 2px 10px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.2),0 8px 20px rgba(0,0,0,.3)}
  .sheet{padding:0;align-items:flex-end}
  .box{width:100%;max-width:none;max-height:92vh;border-radius:20px 20px 0 0;border-bottom:0}
  .box .hd{padding:14px 16px} .box .bd{padding:12px 16px} .box .ft{padding:12px 16px;gap:9px;flex-wrap:wrap}
  .box .hd h2{font-size:20px}
  .total{font-size:20px;order:1;width:100%;margin:0;text-align:center}
  .box .ft .btn{flex:1}
  .line img{width:42px;height:59px}
  .line .mid b{font-size:14.5px} .line .mid span{font-size:11.5px}
  .qty button{width:34px;height:34px}
  .lp{width:64px;font-size:15px}
  .nameIn{height:54px;font-size:18px}
  .big .no{font-size:46px}
  #attract h1{font-size:30px} #attract p{font-size:16px}
  #attract .logo{height:64px}
  #attract .cta{padding:18px 30px;font-size:21px}
  .frow .gcard{width:96px}
  #attract .buy{padding:9px 14px;gap:9px} #attract .buy .bt{font-size:16px} #attract .buy .bv{font-size:13px} #attract .buy .bv b{font-size:19px}
  .zoom img{max-width:94vw}
}
/* the fold-out keyboard on a phone must not bury the button you need */
@media (max-width: 760px) and (max-height: 520px){
  .box{max-height:98vh}
  .box .bd{padding:8px 16px}
}

/* ---- the on-screen keyboard ---------------------------------------------
   The booth laptop is a touchscreen with no keyboard. This rises from the
   bottom when a text box is tapped and everything above it moves up out of
   the way. Keys are big because fingers are, and they never take focus from
   the box being typed into. */
.search .kbd{background:0;border:0;color:var(--ink-3);font-size:20px;cursor:pointer;padding:0 4px;line-height:1}
.search .kbd:hover{color:var(--ink)}
.search .kbd.on{color:#cfc4ff}
#osk{position:fixed;left:0;right:0;bottom:0;z-index:65;display:none;flex-direction:column;gap:7px;
  padding:10px 12px calc(12px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,rgba(14,10,36,.97),rgba(9,7,24,.99));border-top:1px solid rgba(255,255,255,.12);
  box-shadow:0 -18px 50px rgba(0,0,0,.6);backdrop-filter:blur(10px);user-select:none;-webkit-user-select:none;touch-action:manipulation}
#osk.on{display:flex}
.okrow{display:flex;justify-content:center;gap:7px}
.okey{flex:0 1 72px;min-width:0;height:56px;border-radius:12px;border:1px solid rgba(255,255,255,.1);
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.06));color:var(--ink);
  font-family:inherit;font-size:22px;font-weight:700;cursor:pointer;display:grid;place-items:center;
  box-shadow:0 3px 0 rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.18);transition:transform .05s,background .1s}
.okey:active,.okey.down{transform:translateY(2px);box-shadow:0 1px 0 rgba(0,0,0,.45);background:rgba(123,91,255,.45)}
.okey.w{flex-basis:110px;font-size:15px;font-weight:800;color:var(--ink-2)}
.okey.space{flex-basis:420px}
.okey.go{flex-basis:130px;background:linear-gradient(135deg,var(--go),var(--go-2));border-color:transparent;color:#fff;font-size:17px;font-weight:800}
.okey.shift.on{background:rgba(123,91,255,.45);border-color:var(--violet)}
.okey.back{font-size:24px}
/* while it is up, the case and the panels sit above it */
html.osk .scroller{bottom:var(--oskH,300px)}
html.osk .sheet{align-items:flex-start;padding-top:18px;padding-bottom:calc(var(--oskH,300px) + 12px)}
html.osk .box{max-height:calc(100vh - var(--oskH,300px) - 36px)}
@media (max-width:760px){ #osk,.search .kbd{display:none!important} }

/* ---- the wants list ---------------------------------------------------- */
#wantsBox textarea{width:100%;min-height:150px;padding:13px 15px;border-radius:13px;border:1px solid var(--line);
  background:rgba(255,255,255,.06);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.5;outline:0;resize:vertical}
#wantsBox textarea:focus{border-color:var(--violet)}
.wres{margin-top:4px}
.wgroup{font-family:var(--display);font-size:17px;margin:16px 0 8px}
.wgroup.miss{color:#ff9a9e}
.wmiss{display:flex;flex-wrap:wrap;gap:7px}
.wmiss span{padding:4px 10px;border-radius:8px;background:rgba(209,47,53,.16);border:1px solid rgba(209,47,53,.35);
  color:#ffd7d9;font-size:13px;font-weight:700}
.wsum{padding:11px 14px;border-radius:12px;background:rgba(47,174,110,.14);border:1px solid rgba(47,174,110,.4);
  color:#8fe0b6;font-weight:800;font-size:15px}

/* sold while you were looking at it */
.card.gone{opacity:.42}
.card.gone .art{filter:grayscale(.85)}
.stock.gone{background:rgba(209,47,53,.85);border-color:rgba(255,255,255,.3);color:#fff}