/* machines — the displays this Worker adds to Playset's console (app.css owns the frame). Class names here are
   prefixed or unique; grep app.css before adding one (🔴 .read is the header chip, .readout the dial). */
[hidden]{display:none!important}
.walletmount{margin-left:auto;padding-right:14px}
@media (max-width:899px){.top{height:auto;flex-wrap:wrap;padding:8px 14px 8px 0;gap:10px 18px}.walletmount{padding-right:0}}
.walletmount .wallet-adapter-button{font:600 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;background:var(--steel);border:1px solid var(--line);border-radius:var(--r);color:var(--white);height:36px;padding:0 12px}
.walletmount .wallet-adapter-button:hover{background:var(--cobalt-soft);border-color:var(--cobalt)}
.mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-top:18px}
.mcard{display:grid;gap:6px;padding:0 0 14px;overflow:hidden;border:1px solid var(--line);border-radius:var(--r);background:var(--steel);text-decoration:none;color:var(--white)}
.mcard>.mthumb{width:100%;height:auto;aspect-ratio:1;object-fit:cover;display:block;border-bottom:1px solid var(--line);margin-bottom:6px}.mcard>span{padding:0 14px}
.mcard:hover{border-color:var(--cobalt);box-shadow:0 0 0 3px var(--cobalt-soft)}
.mcard .mtitle{font:700 22px/1 var(--disp);letter-spacing:.02em}.mcard .mprice{font:500 15px var(--mono);color:var(--white)}
.mcard .modds,.mcard .mev{font:12px/1.4 var(--mono);color:var(--muted)}.mcard .mfee{font:600 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--amber)}.mcard .mout{font:600 11px var(--mono);letter-spacing:.08em;color:#ff6b6b}
.viewport.machine .stage,.viewport.machines-index .stage{position:relative;min-height:340px;display:flex;align-items:flex-end;padding:22px;overflow:hidden;background-size:cover;background-position:right center;background-color:#0b0d10}
.viewport.machine .stage::after,.viewport.machines-index .stage::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,13,16,.78) 0,rgba(11,13,16,.35) 45%,rgba(11,13,16,0) 62%);pointer-events:none}
.viewport.machine .stagetext,.viewport.machines-index .stagetext{position:relative;z-index:1;max-width:58%}
.viewport.machines-index .stagetext h1{max-width:14ch}.viewport.machine .bigprice{display:block;font:800 40px/1 var(--disp);margin-top:6px}.viewport.machine .bigprice i{font:500 13px var(--mono);color:var(--muted);font-style:normal;margin-left:8px}
.house{font:15px/1.6 var(--sans);color:var(--white);padding:14px 16px;border:1px solid var(--line);border-left:3px solid var(--amber);border-radius:var(--r);background:var(--steel);margin:0 0 14px}
.pullbox{display:grid;gap:8px;margin:0 0 14px}.pullnote{font:12px/1.5 var(--mono);color:var(--muted)}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.result{display:grid;grid-template-columns:160px 1fr;gap:16px;padding:16px;border:1px solid var(--cobalt);border-radius:var(--r);background:var(--cobalt-soft);margin:0 0 18px}
.result img{width:160px;border-radius:6px;background:var(--ground)}.result .rname{font:700 22px/1.1 var(--disp)}.result .rmeta{font:13px/1.6 var(--mono);color:var(--muted)}.result .rmeta b{color:var(--white)}
.result .ractions{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}.result.waiting{grid-template-columns:1fr}
.result .clock{font:600 13px var(--mono);color:var(--amber)}
table.odds,table.ledger{width:100%;border-collapse:collapse;font:13px/1.5 var(--mono)}table.odds th,table.ledger th{text-align:left;font:600 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--faint);padding:6px 6px;border-bottom:1px solid var(--line)}
table.odds td,table.ledger td{padding:7px 6px;border-bottom:1px solid var(--line);color:var(--white);vertical-align:top}table.ledger td.empty{color:var(--muted)}
/* 🔴 A GRID ITEM'S min-width IS auto, SO A WIDE TABLE WIDENS THE WHOLE TRACK — and drags every
   other item in `.under` out with it. Measured at 428px: the 7-column ledger's min-content is
   528px, so the column became 528px inside a 336px box; the intro paragraph was clipped
   mid-word by the bezel and the document itself scrolled 146px sideways. Letting the table
   scroll in its own box is what keeps the track sized by the prose. `nowrap` is the other half:
   without it a card name stacks into six ragged lines rather than reading as one row. */
table.ledger{display:block;overflow-x:auto;min-width:0;max-width:100%}
table.ledger th,table.ledger td{white-space:nowrap}
.tier{font-weight:600;text-transform:uppercase;letter-spacing:.06em}.tier-epic{color:#c9a3ff}.tier-rare{color:#6cc2ff}.tier-uncommon{color:#7fe0a5}.tier-common{color:var(--muted)}
dl.spec{display:grid;gap:6px;margin:14px 0 0}dl.spec div{display:flex;justify-content:space-between;gap:10px;font:13px var(--mono);border-bottom:1px dashed var(--line);padding:4px 0}dl.spec dt{color:var(--muted)}dl.spec dd{margin:0;color:var(--white)}
ol.pulls{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px}ol.pulls li{display:grid;grid-template-columns:40px 1fr auto;gap:8px;align-items:center;font:12px/1.35 var(--mono);color:var(--muted)}
ol.pulls img{width:40px;height:56px;object-fit:cover;border-radius:4px;background:var(--ground)}ol.pulls b{color:var(--white);font-weight:500}ol.pulls li.empty{grid-template-columns:1fr;color:var(--faint)}
ol.pulls.mine li{grid-template-columns:1fr auto}
.foot{max-width:1380px;margin:24px auto 40px;padding:0 18px;font:12px/1.6 var(--mono);color:var(--faint)}.foot a{color:var(--muted)}
a.key{text-decoration:none}
@media (max-width:700px){.result{grid-template-columns:1fr}.result img{width:120px}.viewport.machine .stage,.viewport.machines-index .stage{min-height:0;aspect-ratio:16/10;background-position:72% center;align-items:flex-end}.viewport.machine .stage::after,.viewport.machines-index .stage::after{background:linear-gradient(180deg,rgba(11,13,16,0) 35%,rgba(11,13,16,.85) 100%)}.viewport.machine .stagetext,.viewport.machines-index .stagetext{max-width:100%}}

/* 🔴 EVERY CLASS HERE IS PREFIXED rv- BECAUSE `.stage` WAS ALREADY TAKEN. app.css:229 uses
   `.stage` for the machine's hero art container, and `art/<code>.css` loads AFTER this file — so
   an unprefixed `.stage` here silently restyled the hero (and made `document.querySelector(".stage")`
   return the hero, not the pack). Grep a class name before using it. */
/* ═══ THE REVEAL ═══════════════════════════════════════════════════════════
   🔴 CSS 3D, NOT WEBGL, AND THE REASON IS RECORDED IN BLOOD. A pack and a slabbed card are two
   textured rectangles; three.js would add ~600 KB whose failure mode is INVISIBLE — the Hazlett
   scriptorium only rendered when boot() got a WebGL context and silently fell back to a plain
   document otherwise, which is what the operator saw every time he opened his own site.
   preserve-3d degrades to a flat card that still shows everything. */
.rv{perspective:1400px;perspective-origin:50% 45%;display:grid;place-items:center;min-height:clamp(320px,52vw,480px);margin:0 0 8px}
.rv *{transform-style:preserve-3d}
.rv-pk{position:relative;width:clamp(180px,26vw,240px);aspect-ratio:63/88;will-change:transform}
.rv-face{position:absolute;inset:0;border-radius:12px;backface-visibility:hidden;overflow:hidden;
  box-shadow:0 30px 70px -20px rgba(0,0,0,.85),0 0 0 1px var(--line)}
.rv-back{transform:rotateY(180deg);background:
  repeating-linear-gradient(135deg,#12213f 0 10px,#0f1b33 10px 20px),var(--steel)}
.rv-front{background:var(--steel)}
.rv-front img{width:100%;height:100%;object-fit:cover;display:block}
/* the foil: a band that travels, not a static gradient */
.rv-sheen{position:absolute;inset:-40%;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.34) 48%,rgba(160,200,255,.22) 53%,transparent 62%);
  transform:translateX(-60%);animation:sheen 3.6s ease-in-out infinite}
@keyframes sheen{0%,62%{transform:translateX(-60%)}100%{transform:translateX(60%)}}
/* idle: a slow breathing rotation so the thing is alive before you touch it */
.rv-pk.idle{animation:idle 7s ease-in-out infinite}
/* 🔴 AT REST THE PACK SHOWS ITS BACK, SO IT IDLES AROUND 180°, NOT 0°. The front face carries no
   rotation, so any idle near 0 shows the EMPTY front and the branded back points away from the
   viewer — which is what shipped first. The reveal then turns 180° → 0°, which is the flip. */
@keyframes idle{0%,100%{transform:rotateY(167deg) rotateX(5deg) translateY(0)}50%{transform:rotateY(193deg) rotateX(-3deg) translateY(-10px)}}
/* charging: covers the wallet round-trip, which is otherwise dead time behind a label change */
.rv-pk.charging{animation:charge .42s ease-in-out infinite}
@keyframes charge{0%,100%{transform:rotateY(174deg) translateX(0) scale(1)}
  25%{transform:rotateY(184deg) translateX(-5px) scale(1.02)}
  75%{transform:rotateY(176deg) translateX(5px) scale(1.02)}}
/* the flip: back → front, with the card rising as it turns */
.rv-pk.reveal{animation:reveal 1.15s cubic-bezier(.2,.8,.25,1) forwards}
@keyframes reveal{0%{transform:translateX(0) rotateY(180deg) scale(.94)}
  55%{transform:translateX(-12%) rotateY(60deg) scale(1.1) translateY(-14px)}
  100%{transform:translateX(var(--rv-shift)) rotateY(0) scale(1) translateY(0)}}
/* it rests dead-centre and moves aside as it turns, so the flip reads as the card coming OUT */
.rv{--rv-shift:-26%}
@media (max-width:720px){ .rv{--rv-shift:0%} }
.rv-pk.revealed{transform:translateX(var(--rv-shift))}
.rv-pk.tilt{transition:transform .12s ease-out}
/* rarity earns its ceremony — epic gets a halo, common still gets a lift */
.rv[data-rarity] .rv-front{box-shadow:0 30px 70px -20px rgba(0,0,0,.85),0 0 0 1px var(--line)}
.rv[data-rarity="uncommon"] .rv-front{box-shadow:0 30px 70px -20px rgba(0,0,0,.85),0 0 0 1px #2e6b4e,0 0 30px -4px rgba(64,196,132,.5)}
.rv[data-rarity="rare"] .rv-front{box-shadow:0 30px 70px -20px rgba(0,0,0,.85),0 0 0 1px #2a4f9e,0 0 40px -4px var(--cobalt-glow)}
.rv[data-rarity="epic"] .rv-front{box-shadow:0 30px 70px -20px rgba(0,0,0,.85),0 0 0 1px #8a6320,0 0 56px -2px rgba(240,184,73,.6)}
@media (prefers-reduced-motion:reduce){
  .rv-pk,.rv-pk.idle,.rv-pk.charging,.rv-pk.reveal,.rv-sheen{animation:none!important;transform:none!important}
}

/* ═══ SHARE ════════════════════════════════════════════════════════════════ */
.shbtn{margin-left:8px}
.sh-wrap{position:fixed;inset:0;z-index:70;display:none;place-items:center;padding:20px;
  background:rgba(4,6,9,.82);backdrop-filter:blur(6px)}
.sh-wrap[open]{display:grid}
.sh{width:min(560px,100%);max-height:90dvh;overflow:auto;background:var(--steel);
  border:1px solid var(--line);border-radius:14px;padding:22px}
.sh h3{margin:0 0 4px;font:600 22px/1.15 var(--disp);letter-spacing:.02em;text-transform:uppercase;color:var(--white)}
.sh .sub{margin:0 0 16px;font:400 13px/1.5 var(--sans);color:var(--muted)}
.sh canvas{width:100%;height:auto;border-radius:10px;border:1px solid var(--line);background:var(--ground);display:block}
.sh-sizes{display:flex;gap:8px;margin:14px 0 4px}
.sh-sizes button{flex:1;padding:9px;border-radius:8px;border:1px solid var(--line);background:transparent;
  color:var(--muted);font:500 11px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;cursor:pointer}
.sh-sizes button[aria-pressed="true"]{border-color:var(--cobalt);color:var(--white);background:var(--cobalt-soft)}
.sh-acts{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0}
.sh-acts .btn{flex:1 1 auto}
.sh-net{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0;padding-top:12px;border-top:1px solid var(--line)}
.sh-net a{flex:1 1 auto;text-align:center;padding:9px 10px;border-radius:8px;border:1px solid var(--line);
  color:var(--muted);text-decoration:none;font:500 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.sh-net a:hover{color:var(--white);border-color:var(--cobalt)}
.sh-note{margin:12px 0 0;font:400 12px/1.6 var(--sans);color:var(--faint)}
.sh-close{float:right;background:none;border:0;color:var(--faint);font:400 22px/1 var(--sans);cursor:pointer}
/* the branded back: an SVG slab, so it is crisp at any size and needs no extra request */
.rv-back{background:var(--ground)}
.rv-art{position:absolute;inset:0;width:100%;height:100%;display:block}

/* ═══ MINI (Farcaster) ═════════════════════════════════════════════════════
   🔴 A MINI APP IS ~420px WIDE AND THE WHOLE PAGE IS THE FRAME. The desktop hero headline set at
   clamp(32px,3.2vw,46px) wrapped to four lines and pushed the machines below the fold, and a
   square 1:1 machine thumb ate ~300px of a 760px viewport — about one and a half machines visible.
   Everything here is scoped to body[data-mini] so the ordinary site is untouched. */
/* 🔴 THE HEADLINE LIVES INSIDE THE HERO STAGE, so capping the stage's height CLIPS THE TITLE —
   which is exactly what shipped first: "Collector Crypt's" was cut off above its own container.
   Measured at 424px: h1 30px → 180px over ~6 lines, .stagetext 243px, inside a 152px clipped box.
   The stage must be sized BY its text, never against it. Shrink the type; the art follows. */
body[data-mini] .stagetext h1{font-size:clamp(19px,5.4vw,23px);line-height:1.08;letter-spacing:-.01em;text-wrap:balance}
body[data-mini] .stagetext .eyebrow{font-size:10.5px;letter-spacing:.14em}
body[data-mini] .under h1{font-size:clamp(21px,6.4vw,27px);line-height:1.04;letter-spacing:-.01em;text-wrap:balance}
body[data-mini] .under .lede,body[data-mini] .hero .lede-hero{font-size:13px;line-height:1.5}
body[data-mini] .viewport{padding:12px 14px 16px}
body[data-mini] .under{padding:10px 0 0;gap:6px}
/* the hero machine art: a banner, not a stage */
body[data-mini] .viewport.machine .stage,
body[data-mini] .viewport.machines-index .stage{min-height:0;max-height:none;overflow:visible;background-size:cover}
/* the card thumbs: 1:1 is a poster at this width — a 16:9 band still reads as the machine */
body[data-mini] .mcard>.mthumb{aspect-ratio:16/9}
body[data-mini] .mcards,body[data-mini] .cards{gap:10px}
/* the reveal stays the hero of the machine page, just sized to the frame */
body[data-mini] .rv{min-height:clamp(240px,58vw,320px)}
body[data-mini] .rv-pk{width:clamp(150px,42vw,190px)}
body[data-mini] .rv{--rv-shift:0%}
/* the wallet-adapter's own trigger opens a modal that cannot work inside a frame */
body[data-mini] .wallet-adapter-dropdown{display:none!important}
body[data-mini] [data-fc-connect]{white-space:nowrap}

/* ═══ NOTIFICATION SETTINGS ════════════════════════════════════════════════ */
.nbox{margin:14px 0 0;border:1px solid var(--line);border-radius:10px;background:var(--steel);overflow:hidden}
.nrow{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 15px;cursor:pointer}
.nrow+.nrow{border-top:1px solid var(--line)}
.nrow span{display:grid;gap:2px;min-width:0}
.nrow b{font:600 14px/1.25 var(--sans);color:var(--white)}
.nrow i{font:400 12px/1.4 var(--sans);font-style:normal;color:var(--faint)}
.nrow input{appearance:none;flex:0 0 44px;height:26px;border-radius:13px;background:var(--ground);
  border:1px solid var(--line);position:relative;cursor:pointer;transition:background .15s}
.nrow input::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;
  background:var(--faint);transition:transform .15s,background .15s}
.nrow input:checked{background:var(--cobalt-soft);border-color:var(--cobalt)}
.nrow input:checked::after{transform:translateX(18px);background:var(--cobalt)}
.nmain b{font-size:15px}
.nsep{height:1px;background:var(--line)}
.nthr{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:11px 15px;border-top:1px solid var(--line)}
.nthr .k{font:500 10.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.nthr button{padding:6px 12px;border-radius:7px;border:1px solid var(--line);background:transparent;
  color:var(--muted);font:500 12px/1 var(--mono);cursor:pointer}
.nthr button[aria-pressed="true"]{border-color:var(--cobalt);color:var(--white);background:var(--cobalt-soft)}
.nwarn{margin:0;padding:13px 15px;font:400 12.5px/1.6 var(--sans);color:var(--muted);background:rgba(240,184,73,.06);
  border-top:1px solid var(--line);border-left:2px solid var(--amber)}
.nwarn b{color:var(--amber)}
.nnote{margin:0;padding:12px 15px;font:400 12px/1.6 var(--sans);color:var(--faint)}
.fmodal .sh h3{margin:0 0 12px}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin:0 0 14px;background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.fgrid div{background:var(--ground);padding:11px 13px}
.fgrid dt{margin:0 0 4px;font:400 9.5px/1 var(--mono);letter-spacing:.11em;text-transform:uppercase;color:var(--faint)}
.fgrid dd{margin:0;font:500 16px/1.2 var(--mono);color:var(--white);font-variant-numeric:tabular-nums}
.fgrid dd.bad{color:var(--amber)}
.fnote{margin:0 0 14px;font:400 13px/1.6 var(--sans);color:var(--muted)}
.fmodal .btn{width:100%;margin:0 0 8px}

/* ── the appraisal modal ──
   Shows the working: what was paid, what it is worth, and on what evidence. The check
   line is toned because "eBay agrees" and "the search found a different card" must not
   read the same at a glance. */
.ap-wrap{position:fixed;inset:0;z-index:75;display:none;place-items:center;padding:20px;background:rgba(5,6,8,.72);backdrop-filter:blur(3px)}
.ap-wrap[open]{display:grid}
.ap{position:relative;width:min(520px,100%);max-height:90dvh;overflow:auto;background:var(--steel);
    border:1px solid var(--line-2);border-radius:14px;padding:22px 20px 18px;box-shadow:0 40px 80px -30px #000}
.ap-x{position:absolute;top:8px;right:10px;background:none;border:0;color:var(--muted);font-size:26px;line-height:1;cursor:pointer}
.ap h3{margin:0;font:800 23px/1.1 var(--disp);letter-spacing:.01em;text-transform:uppercase;color:var(--white)}
.ap-sub{margin:4px 0 16px;font:500 13px/1.45 var(--mono);color:var(--muted)}
.ap-load{margin:22px 0;font:500 13px var(--mono);color:var(--muted);text-align:center}

.ap-sum{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;
        padding:15px 14px;border:1px solid var(--line);border-radius:11px;background:rgba(0,0,0,.28)}
.ap-fig{display:grid;gap:3px;text-align:center;min-width:0}
.ap-fig .k{font:500 10px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--faint)}
.ap-fig b{font:800 27px/1 var(--disp);color:var(--white);font-variant-numeric:tabular-nums}
.ap-op{color:var(--faint);font-size:18px}
.ap-delta{grid-column:1/-1;text-align:center;margin-top:9px;padding-top:10px;border-top:1px dashed var(--line);
          font:800 21px/1 var(--disp);font-variant-numeric:tabular-nums}
.ap-delta span{display:block;margin-top:3px;font:500 11px/1 var(--mono);letter-spacing:.06em;opacity:.85}
.ap-sum.up .ap-delta{color:#7fe0a5}
.ap-sum.down .ap-delta{color:var(--amber)}

.ap-calc{margin:16px 0 0;display:grid;grid-template-columns:auto 1fr;gap:7px 14px;align-items:baseline}
.ap-calc dt{font:500 10px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.ap-calc dd{margin:0;font:500 13px/1.5 var(--sans);color:var(--white)}
.ap-calc dd.ap-means{grid-column:2;font-size:12px;line-height:1.5;color:var(--muted)}
.ap-chk{font-size:12.5px;line-height:1.5}
.ap-chk.good{color:#7fe0a5}.ap-chk.warn{color:var(--muted)}.ap-chk.bad{color:var(--amber)}

.ap-acts{display:flex;gap:9px;flex-wrap:wrap;margin-top:18px}
.ap-acts .btn{flex:1 1 auto}
.ap-note{margin:11px 0 0;font:400 12px/1.55 var(--sans);color:var(--muted)}
.ap-note.ap-fine{color:var(--faint);font-size:11.5px}
@media (max-width:460px){.ap-sum{grid-template-columns:1fr;gap:12px}.ap-op{display:none}}

/* the connected-wallet menu (mini app) — the one header control visible at phone width */
.fcmenu { position: relative; }
.fcmenu-list { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; min-width: 220px;
  display: flex; flex-direction: column; background: var(--steel-2, #1d222a);
  border: 1px solid var(--line-2, #3a434e); box-shadow: 0 12px 30px rgba(0,0,0,.5); }
.fcmenu-list[hidden] { display: none; }
.fcmenu-list a, .fcmenu-list button { all: unset; box-sizing: border-box; display: block; width: 100%;
  padding: 12px 14px; font: 600 13px/1.2 "IBM Plex Sans", system-ui, sans-serif; color: var(--white, #f3f5f8);
  cursor: pointer; border-bottom: 1px solid var(--line, #2b323b); }
.fcmenu-list > :last-child { border-bottom: 0; }
.fcmenu-list a:hover, .fcmenu-list button:hover, .fcmenu-list a:focus-visible, .fcmenu-list button:focus-visible {
  background: var(--steel-3, #262c35); color: var(--white, #f3f5f8); }
/* 🔴 base58 is case-sensitive: the button style uppercases, which printed "C9ID…MFX4" for
   "C9id…MFx4" — not the user's address. The address keeps its own case. */
[data-fc-connect] { text-transform: none; letter-spacing: .02em; }

/* ── the catalogue: brand cards that open into their machines ── */
.brands{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px;margin-top:18px;align-items:start}
.mbrand{border:1px solid var(--line);border-radius:var(--r);background:var(--steel);overflow:hidden}
.mbrand[open]{grid-column:1/-1;border-color:var(--line-2)}
.mbrand>summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;padding:12px 14px}
.mbrand>summary::-webkit-details-marker{display:none}
.mbrand>summary:hover{background:var(--steel-2)}.mbrand>summary:focus-visible{outline:2px solid var(--cobalt);outline-offset:-2px}
.bstrip{display:flex;padding-right:18px}
.bthumb{width:64px;height:64px;border-radius:6px;border:1px solid var(--line);background:var(--steel-2);object-fit:cover;margin-right:-18px;box-shadow:0 0 0 2px var(--steel)}
.bthumb:first-child{position:relative;z-index:2}.bthumb:nth-child(2){position:relative;z-index:1}
.bhead{display:grid;gap:4px;min-width:0}
.bname{font:800 26px/1 var(--disp);letter-spacing:.02em;text-transform:uppercase;color:var(--white)}
.bmeta{font:500 13px var(--mono);color:var(--muted)}
.bout{font:600 10px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--amber)}
.bchev{width:10px;height:10px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform .2s;margin:0 6px 4px}
.mbrand[open] .bchev{transform:rotate(-135deg);margin-bottom:-4px}
.mlist{list-style:none;margin:0;padding:0 8px 8px;display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:8px;border-top:1px solid var(--line);padding-top:8px}
.mrow{display:grid;grid-template-columns:72px 1fr auto;gap:12px;align-items:center;padding:8px;border:1px solid transparent;border-radius:6px;text-decoration:none;color:var(--white);background:var(--steel-2)}
.mrow:hover,.mrow:focus-visible{border-color:var(--cobalt);box-shadow:0 0 0 3px var(--cobalt-soft);outline:none}
.mrthumb{width:72px;height:72px;border-radius:4px;object-fit:cover;background:var(--steel)}
.noart{display:block}
.mrbody{display:grid;gap:3px;min-width:0}
.mrhead{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.mrtitle{font:700 19px/1 var(--disp);letter-spacing:.02em}.mrprice{font:500 14px var(--mono);white-space:nowrap}
.mrname{font:12px/1.3 var(--mono);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mrodds,.mrev{font:11px/1.35 var(--mono);color:var(--muted)}
.mrev .mout{font-weight:600;letter-spacing:.06em;color:#ff6b6b}
.mrgo{color:var(--muted);font-size:14px}
@media (prefers-reduced-motion:reduce){.bchev{transition:none}}
body[data-mini] .brands{grid-template-columns:1fr;gap:10px}
body[data-mini] .mlist{grid-template-columns:1fr}
body[data-mini] .bthumb{width:52px;height:52px}
body[data-mini] .bname{font-size:22px}
.back{display:table;margin-bottom:12px;padding:6px 10px;border:1px solid var(--line-2);border-radius:6px;background:rgba(11,13,16,.6);font:600 11px var(--mono);letter-spacing:.1em;color:var(--white);text-decoration:none}
.back:hover,.back:focus-visible{border-color:var(--cobalt);box-shadow:0 0 0 3px var(--cobalt-soft);outline:none}
.mbrand{scroll-margin-top:16px}

/* ── the collection: kept cards as a binder (the Slab Street shape) ── */
.colhead{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:26px 0 10px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.colhead h2{margin:0;font:800 20px/1 var(--disp);letter-spacing:.06em}.colhead span{font:500 12px var(--mono);color:var(--muted)}
.binder{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:14px}
.slab{display:flex;flex-direction:column;gap:8px;min-width:0}
.slab-open{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;border:1px solid var(--line-2);border-radius:8px;background:var(--steel);overflow:hidden;position:relative;transition:border-color .15s,box-shadow .15s}
.slab-open:hover,.slab-open:focus-visible{border-color:var(--cobalt);box-shadow:0 0 0 3px var(--cobalt-soft)}
.slab[data-tier="epic"] .slab-open{border-color:#c9a3ff66}.slab[data-tier="rare"] .slab-open{border-color:#6cc2ff55}
.slab-art{display:block;aspect-ratio:3/4;background:#0b0d10;position:relative}
.slab-art img{width:100%;height:100%;object-fit:contain;display:block}
.slab-ph{position:absolute;inset:0;display:grid;place-items:center;font:800 44px var(--disp);color:var(--line-2)}
.slab-chips{display:flex;justify-content:space-between;gap:6px;padding:8px;border-bottom:1px solid var(--line)}
.stag{white-space:nowrap;font:700 9px/1 var(--mono);letter-spacing:.05em;text-transform:uppercase;padding:4px 6px;border-radius:4px;background:rgba(11,13,16,.85);border:1px solid var(--line-2);color:var(--muted)}
.stag.warn{color:var(--amber);border-color:#f0b84966}
.slab-meta{display:grid;gap:4px;padding:8px 10px 10px;border-top:1px solid var(--line)}
.slab-name{font:700 16px/1.1 var(--disp);letter-spacing:.02em;color:var(--white);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.slab-sub{display:flex;justify-content:space-between;gap:6px;font:11px/1.3 var(--mono);color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.slab-sub>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.slab-sub b{color:var(--white);font-weight:600;white-space:nowrap}
.slab-sell{width:100%}
.rail > .btn{margin-top:14px}
body[data-mini] .binder{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
body[data-mini] .slab-name{font-size:14px}
.soldlist{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.soldrow{display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center;padding:8px;border:1px solid var(--line);border-radius:6px;background:var(--steel)}
.soldrow img{width:44px;height:58px;object-fit:contain;background:#0b0d10;border-radius:3px}
.sr-body{display:grid;gap:3px;min-width:0}.sr-body b{font:700 16px/1.1 var(--disp);letter-spacing:.02em}
.sr-sub{font:11px var(--mono);color:var(--muted)}
.sr-money{display:grid;justify-items:end;gap:2px;font:11px var(--mono);color:var(--muted)}.sr-money b{font:600 14px var(--mono);color:var(--white)}.sr-money a{color:var(--cobalt-2)}