/* MONDO NFT HUB: on top of site.css + collectors.css (cards .rsc, fans .fanst, tabs, .rshuf box) */
.hubtabs{margin:0 0 18px;gap:10px}
.hubtabs button{max-width:100%;white-space:normal;text-align:center;line-height:1.15}
.hubtabs button small{display:block;font:700 11px/1.2 var(--mono);opacity:.75;margin-top:3px}
.hubbox{background:var(--sky)}
.hubtools{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0 8px}
#hq{flex:1 1 260px;min-width:0;font:700 16px/1.2 var(--mono);text-transform:uppercase;padding:12px 16px;border:4px solid #000;border-radius:999px;box-shadow:4px 4px 0 var(--g3);background:var(--cream)}
/* series dropdown (custom listbox: full titles wrap, never truncated) */
.hdd{position:relative;flex:0 1 340px;min-width:0}.hdd[hidden]{display:none}
.hddbtn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:left;font:400 14px/1.2 var(--display);padding:11px 16px;border:4px solid #000;border-radius:26px;box-shadow:4px 4px 0 var(--g3);background:var(--gold);color:#000;text-transform:uppercase;cursor:pointer}
.hddbtn .hddlab{white-space:normal;overflow-wrap:anywhere}.hddbtn i{font-style:normal;flex:none;transition:transform .15s}.hddbtn[aria-expanded="true"] i{transform:rotate(180deg)}
.hddbtn.on{background:#fff}.hddbtn:focus-visible{outline:3px solid #fff;outline-offset:2px}
.hddpanel{position:absolute;z-index:950;right:0;top:calc(100% + 8px);width:min(560px,92vw);background:var(--cream);border:4px solid #000;border-radius:16px;box-shadow:6px 6px 0 #000;padding:10px}
.hddpanel[hidden]{display:none}
.hddtop{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
#hsubq{flex:1 1 200px;min-width:0;font:700 14px/1.2 var(--mono);text-transform:uppercase;padding:9px 12px;border:3px solid #000;border-radius:999px;background:#fff}
.hddsort{display:flex;gap:6px}.hddsort button{font:400 12px/1 var(--display);padding:8px 10px;border:3px solid #000;border-radius:999px;background:#fff;color:#000;cursor:pointer}.hddsort button[aria-pressed="true"]{background:var(--gold)}
.hddlist{list-style:none;margin:0;padding:0;max-height:min(55vh,440px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;display:grid;gap:4px}
.hddlist li{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:8px 10px;border:2px solid transparent;border-radius:10px;font:400 13px/1.3 var(--display);color:#000;cursor:pointer}
.hddlist li span{white-space:normal;overflow-wrap:anywhere;min-width:0}
.hddlist li b{flex:none;font:700 11px/1 var(--mono);background:#000;color:var(--gold);border-radius:6px;padding:4px 6px;margin-top:1px}
.hddlist li.act{background:#fff;border-color:#000}.hddlist li[aria-selected="true"]{background:var(--gold);border-color:#000}
.hddlist li.all{border-bottom:2px dashed #000;border-radius:10px 10px 0 0}.hddlist li.none{cursor:default;opacity:.7}
.hsel{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:4px 0 8px;background:#fff;border:4px solid #000;border-radius:14px;box-shadow:4px 4px 0 #000;padding:8px 12px;transform:rotate(-.6deg)}
.hsel[hidden]{display:none}
.hsel span{font:400 11px/1 var(--display);background:#000;color:#fff;border-radius:6px;padding:4px 6px}
.hsel b{font:400 clamp(15px,2.2vw,20px)/1.2 var(--display);color:#000;white-space:normal;overflow-wrap:anywhere;flex:1 1 200px;min-width:0}
.hsel small{font:700 12px/1 var(--mono)}
.hsel button{font:400 14px/1 var(--display);width:32px;height:32px;border:3px solid #000;border-radius:50%;background:var(--pom);color:#fff;cursor:pointer}
.hcats{display:flex;flex-wrap:wrap;gap:7px;margin:4px 0 10px}
.hcats button{font:400 12px/1 var(--display);padding:7px 11px;background:#fff;color:#000;border:3px solid #000;border-radius:999px;box-shadow:3px 3px 0 #000;cursor:pointer;transition:transform .15s}
.hcats button:hover{transform:translateY(-2px) rotate(-2deg)}
.hcats button[aria-pressed="true"]{background:var(--gold);transform:rotate(-2deg)}
.hcats button small{font:700 10px/1 var(--mono);opacity:.7;margin-left:3px}
.hcats .more{background:var(--g2);color:#fff}
.hubbox .rssub{color:#fff;text-shadow:1px 1px 0 #000;margin:6px 0 10px}
.hgrid{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.hmore{text-align:center;margin-top:14px}
.hhl{margin:6px 0 12px;font:400 clamp(20px,3vw,32px)/1.1 var(--display);color:#fff;text-shadow:3px 3px 0 #000;-webkit-text-stroke:1px #000}
.hstats{grid-template-columns:repeat(6,minmax(0,1fr))}
.hstats .fl button{all:unset;cursor:pointer;font:400 13px/1.3 var(--display);color:var(--ink);border-bottom:2px solid #000}
.hstats .fl button:hover,.hstats .fl button:focus-visible{color:var(--pom)}
.hstats .fc{cursor:pointer}
.hempty{grid-column:1/-1;background:var(--cream);border:4px solid #000;border-radius:12px;padding:16px;font:400 16px/1.3 var(--display);text-align:center}
.rbown a,.rbown span{text-transform:uppercase}
.rbser{display:block;font:700 9px/1.2 var(--mono);text-transform:uppercase;opacity:.8;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
@media (max-width:1000px){.hgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}}
@media (max-width:860px){.hstats{grid-template-columns:1fr 1fr}.hstats .st.fanst{grid-column:span 1}}
@media (max-width:600px){.hgrid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px}.hstats{grid-template-columns:1fr}.hubtabs{flex-wrap:nowrap;overflow-x:auto;padding:4px 2px 8px;-webkit-overflow-scrolling:touch}.hubtabs button{flex:none;width:auto;max-width:64vw;font-size:11px;padding:9px 12px}
 .hdd{flex:1 1 100%}.hddpanel{left:0;right:auto;width:100%}.hcats{flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;-webkit-overflow-scrolling:touch}.hcats button{flex:none}}
/* hover sounds: SOUND ON/OFF (shared rs_sound mute from sfx.js) + unlock hint */
.sndhint{position:fixed;right:14px;bottom:70px;z-index:900;margin:0;font:400 12px/1.2 var(--display);background:#000;color:var(--gold);border:3px solid var(--gold);border-radius:10px;padding:7px 10px;box-shadow:3px 3px 0 #000;pointer-events:none;animation:sndh 1.6s ease-in-out infinite}
@keyframes sndh{50%{transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){.sndhint{animation:none}}
@media (max-width:600px){.sndhint{right:10px;bottom:58px;font-size:10px}}
.hubtabs[hidden],.sndbtn[hidden]{display:none}
/* MINTED (year / month chips, FROM-TO dates) + SORT */
.hmint{display:grid;gap:7px;margin:2px 0 10px;background:rgba(0,0,0,.18);border:3px solid #000;border-radius:14px;padding:8px 10px}.hmint[hidden],.hmonths[hidden],.hmx[hidden]{display:none}
.hmrow{display:flex;flex-wrap:wrap;align-items:center;gap:7px}
.hmlab{font:400 12px/1 var(--display);background:#000;color:var(--gold);border-radius:6px;padding:6px 8px}
.hyears,.hmonths,.hsort{display:flex;flex-wrap:wrap;gap:6px}
.hyears button,.hmonths button,.hsort button{font:400 12px/1 var(--display);padding:7px 10px;background:#fff;color:#000;border:3px solid #000;border-radius:999px;box-shadow:2px 2px 0 #000;cursor:pointer}
.hyears button small,.hmonths button small{font:700 10px/1 var(--mono);opacity:.7;margin-left:4px}
.hyears button[aria-pressed="true"],.hmonths button[aria-pressed="true"],.hsort button[aria-pressed="true"]{background:var(--gold)}
.hyears button[aria-expanded="true"]{outline:3px dashed #fff;outline-offset:1px}
.hmonths{padding-left:4px}.hmonths button{background:var(--cream);font-size:11px;padding:6px 8px}
.hmd{display:inline-flex;align-items:center;gap:5px;font:400 11px/1 var(--display);color:#fff;text-shadow:1px 1px 0 #000}
.hmd input{font:700 13px/1.1 var(--mono);padding:6px 8px;border:3px solid #000;border-radius:10px;background:var(--cream);color:#000;min-width:0;min-height:34px;-webkit-appearance:none;appearance:none}
.hmx{font:400 13px/1 var(--display);width:30px;height:30px;border:3px solid #000;border-radius:50%;background:var(--pom);color:#fff;cursor:pointer}
.rbmint{display:block;font:700 9px/1.2 var(--mono);text-transform:uppercase;margin-top:3px;opacity:.85}
@media (max-width:600px){.hyears,.hmonths,.hsort{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px;max-width:100%}.hyears button,.hmonths button,.hsort button{flex:none}.hmrow{flex-wrap:wrap}.hmd{flex:1 1 45%}.hmd input{flex:1;width:100%}}
@media (max-width:600px){.hmint{overflow:hidden}.hmd{flex:1 1 40%;min-width:0}.hmd input{width:100%;max-width:100%;box-sizing:border-box;font-size:12px;padding:6px}}
.hmrow,.hmonths{min-width:0}
@media (max-width:600px){.hyears,.hsort{flex:1 1 100%;min-width:0}.hmonths{max-width:100%}}
.hstats .st.fanst{grid-column:span 3}
@media (max-width:860px){.hstats .st.fanst{grid-column:span 1}}
@media (max-width:600px){.hstats .st.fanst{grid-column:1/-1}}
/* BUY: FOR SALE ONLY checkbox, price badge, back-side offer row (COPY OFFER / CREATE OFFER / MAKE AN OFFER) */
.hfs{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;font:400 14px/1 var(--display);color:#000;background:var(--gold);border:4px solid #000;border-radius:999px;box-shadow:4px 4px 0 var(--g3);padding:9px 14px;cursor:pointer;user-select:none;-webkit-user-select:none}
.hfs[hidden]{display:none}
.hfs input{appearance:none;-webkit-appearance:none;width:22px;height:22px;margin:0;border:3px solid #000;border-radius:6px;background:#fff;display:grid;place-items:center;cursor:pointer;flex:none}
.hfs input:checked{background:var(--g2)}.hfs input:checked::after{content:'✓';color:#fff;font:700 15px/1 var(--mono)}
.hfs input:focus-visible{outline:3px solid #fff;outline-offset:2px}
.hfs small{font:700 11px/1 var(--mono);background:#000;color:var(--gold);border-radius:6px;padding:4px 6px}.hfs small:empty{display:none}
.hfs:has(input:checked){background:#fff}
.rsimg{position:relative}
.rsprice{position:absolute;right:4px;top:4px;z-index:1;font:400 clamp(9px,6.6cqw,14px)/1 var(--display);color:#000;background:var(--gold);border:2px solid #000;border-radius:6px;box-shadow:2px 2px 0 #000;padding:3px 5px;transform:rotate(3deg);white-space:nowrap;max-width:calc(100% - 8px);overflow:hidden;text-overflow:ellipsis}
.rsc.buy .rsback{justify-content:flex-start;flex-direction:column}
.rsc.buy .rbnum{padding:7cqw 6cqw 0;gap:1cqw}
.rsc.buy .rbnum b{font-size:clamp(14px,13cqw,32px)}.rsc.buy .rbem{font-size:clamp(14px,12cqw,30px)}
.rbbuy{position:absolute;left:6px;right:6px;bottom:clamp(18px,13cqw,26px);display:flex;flex-direction:column;align-items:stretch;gap:3px;text-align:center}
.rbcopy,.rbcreate{font:400 clamp(10px,8.4cqw,16px)/1 var(--display);color:#000;background:var(--gold);border:3px solid #000;border-radius:10px;box-shadow:3px 3px 0 var(--pom);padding:clamp(5px,4.4cqw,9px) 4px;cursor:pointer;touch-action:manipulation;white-space:nowrap}
.rbcopy:hover,.rbcreate:hover{background:#fff}.rbcopy:active,.rbcreate:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--pom)}
.rbcopy.done{background:var(--g2);color:#fff}.rbcopy:disabled,.rbcreate:disabled{opacity:.75;cursor:wait}.rbcopy[hidden],.rbhint[hidden]{display:none}
.rbhint{margin:0;font:700 clamp(6px,4.6cqw,9px)/1.15 var(--mono);color:#555;text-transform:uppercase}
.rblist,.rbmake{font:700 clamp(7px,5.2cqw,10px)/1.15 var(--mono);color:#0b3d91;text-transform:uppercase;text-decoration:underline;text-decoration-color:var(--pom)}
.rbmake{font:400 clamp(9px,7cqw,14px)/1.1 var(--display);color:#000;background:#fff;border:3px solid #000;border-radius:10px;box-shadow:3px 3px 0 var(--g3);padding:clamp(5px,4cqw,8px) 4px;text-decoration:none}
.rbmake:hover{background:var(--gold)}.rblist.big{font-size:clamp(8px,6cqw,12px)}
.rberr{margin:0;font:700 clamp(7px,5cqw,10px)/1.15 var(--mono);color:#c0122c;text-transform:uppercase}.rberr:empty{display:none}.rberr.ok{color:var(--g2)}
.rsc.fs .rbmint,.rsc.fs .rbser{display:none}
@container (max-width:170px){.rsc.buy .rbem,.rsc.buy .rbmint,.rsc.buy .rbser{display:none}.rbbuy{left:4px;right:4px;gap:2px}.rbcopy,.rbcreate,.rbmake{border-width:2px;box-shadow:2px 2px 0 var(--pom)}}
@container (max-width:130px){.rbhint{display:none}}
@media (max-width:600px){.hfs{flex:1 1 100%;justify-content:center}}
.rsc.buy .rbnum{padding-top:15cqw}.rsc.buy:not(:has(.rbtag)) .rbnum{padding-top:8cqw}
.rblist{color:#0b3d91!important}
@container (max-width:170px){.rsc.buy .rbnum small{display:none}.rsc.buy .rbnum b{font-size:clamp(12px,12cqw,24px)}.rsc.buy .rbnum{padding-top:13cqw}.rbbuy{bottom:clamp(16px,12cqw,22px)}}
@container (max-width:170px){.rsc.buy .rbtag{display:none}.rsc.buy .rbnum{padding-top:7cqw}.rbbuy{gap:5px}}
.rsc.fs .rbem{display:none}
@media (max-width:600px){.hfoot .rsbtnbot{max-width:none}}
/* ===== v9 HUB CARD (Ted): front = the image only (even 4:3 box, contained, cream), back = thumb + name + price + offer + MintGarden. Scoped to .hcard (hub only) ===== */
.hcard .rsfront{padding:4px;border-width:3px}
.hcard .rsimg{display:block;aspect-ratio:4/3;background:#f5f3ec}
.hcard .rsprice{top:auto;bottom:5px;right:5px;font:400 clamp(9px,4.6cqw,13px)/1 var(--display);background:rgba(0,0,0,.72);color:var(--gold);border:0;border-radius:6px;box-shadow:none;padding:4px 6px;transform:none;opacity:.92}
.hcard .rsback{display:flex;flex-direction:column;justify-content:space-between;align-items:stretch;gap:5px;padding:clamp(6px,4cqw,12px);background:var(--cream)}
.hcard .hbtop{display:flex;gap:clamp(6px,3.5cqw,10px);align-items:flex-start;min-width:0}
.hcard .hbth{flex:0 0 34%;aspect-ratio:4/3;background:#f5f3ec;border:2px solid #000;box-shadow:2px 2px 0 #000;overflow:hidden}
.hcard .hbth img{width:100%;height:100%;object-fit:contain;display:block}
.hcard .hbinfo{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.hcard .hbname{font:400 clamp(10px,6cqw,17px)/1.12 var(--display);color:#000;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
.hcard .hbprice{align-self:flex-start;font:400 clamp(10px,5.4cqw,15px)/1 var(--display);background:var(--gold);color:#000;border:2px solid #000;border-radius:6px;padding:3px 6px;box-shadow:2px 2px 0 #000}
.hcard .hbnum,.hcard .hbmeta{font:700 clamp(7px,3.6cqw,10px)/1.2 var(--mono);color:#555;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hcard .rbbuy{position:static;gap:4px}
.hcard .rbcopy,.hcard .rbcreate{font-size:clamp(11px,6.4cqw,17px);padding:clamp(6px,3.4cqw,10px) 4px}
.hcard .rbhint{font-size:clamp(7px,3.6cqw,10px)}
.hcard .rblist,.hcard .hbmg{font:400 clamp(9px,4.6cqw,13px)/1.1 var(--display);color:#0b3d91!important;text-decoration:underline;text-decoration-color:var(--pom);text-align:center}
.hcard .rbmake{font-size:clamp(9px,5cqw,14px)}
.hcard .rbtag,.hcard .rbnum,.hcard .rbown,.hcard .rbmg{display:none}
@container (max-width:200px){.hcard .rsback{gap:3px;padding:5px}.hcard .hbname{-webkit-line-clamp:2;line-clamp:2}.hcard .hbmeta,.hcard .hbnum,.hcard .rbhint{display:none}.hcard .hbth{flex-basis:30%}.hcard .rbcopy,.hcard .rbcreate,.hcard .rbmake{border-width:2px;box-shadow:2px 2px 0 var(--pom)}}
@container (max-width:150px){.hcard .hbth{display:none}}
@media (max-width:600px){.hgrid{gap:10px}}
/* BIG RANDO mosaic: each visible card shows its slice of one picture; the face turns 0 -> 90 -> 0 deg and the slice swaps in at 90 (never mirrored) */
.hcard .hmos{position:absolute;inset:0;background-repeat:no-repeat;background-color:#f5f3ec;opacity:0;pointer-events:none;transition:none}
.hcard.mosA .hmos,.hcard.mosB .hmos{transition:opacity 0s linear .18s}
.hcard.mos .hmos{opacity:1}
.hcard.mos .rsprice{opacity:0}
.hcard.mosA .rsfront{animation:hmosA .36s ease-in-out both}.hcard.mosB .rsfront{animation:hmosB .36s ease-in-out both}
@keyframes hmosA{0%,100%{transform:rotateY(0)}50%{transform:rotateY(90deg)}}
@keyframes hmosB{0%,100%{transform:rotateY(0)}50%{transform:rotateY(-90deg)}}
.hmoscap{position:fixed;left:50%;bottom:86px;transform:translateX(-50%) rotate(-1deg);z-index:960;margin:0;display:flex;align-items:center;gap:8px;max-width:min(92vw,560px);background:#000;color:#fff;border:3px solid var(--gold);border-radius:12px;box-shadow:4px 4px 0 #000;padding:8px 12px;font:400 13px/1.2 var(--display);animation:hmcap .3s ease-out both}
.hmoscap span{flex:none;background:var(--gold);color:#000;border-radius:6px;padding:3px 6px;font-size:11px}
.hmoscap a{color:#fff;text-decoration:underline;text-decoration-color:var(--gold);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@keyframes hmcap{from{opacity:0;transform:translateX(-50%) translateY(10px)}}
@media (prefers-reduced-motion:reduce){.hcard.mosA .rsfront,.hcard.mosB .rsfront,.hmoscap{animation:none}.hcard.mosA .hmos,.hcard.mosB .hmos{transition:none}}
/* ===== v10 SEAMLESS WALL (Ted): tiles butt edge to edge, no stamp/border/padding/radius/shadow/gap; a tile turns like a solid block and the
   info side is its opposite face. JS sizes tiles to integer widths (multiple of 4) so rows + mosaic slices meet without hairlines. ===== */
.hgrid{gap:0!important;background:#0d0d0d;perspective:1600px;align-items:stretch}
.hgrid .hcard{animation:none;opacity:1}
.hgrid .hcard.out{animation:none;opacity:.35;transition:opacity .2s}
.hcard .rsface,.hcard .rsfront,.hcard .rsback{border:0!important;border-radius:0!important;box-shadow:none!important;padding:0}
.hcard .rsfront{padding:0}
.hcard .rsimg{aspect-ratio:4/3;background:#0d0d0d}
.hcard .rsimg img{width:100%;height:100%;object-fit:cover;display:block}
.hcard .rsflip{transition:transform .38s cubic-bezier(.55,0,.25,1)}
.hcard.turning{z-index:6}
.hcard.turning .rsface{box-shadow:0 10px 22px rgba(0,0,0,.55)!important}
.hcard.flipped{z-index:4}
/* the back: a solid dark block, full bleed */
.hcard .rsback{background:#15120d;color:#f5f3ec;padding:clamp(7px,4.2cqw,14px)}
.hcard .hbth{border:2px solid var(--gold);box-shadow:none;background:#000}
.hcard .hbname{color:#fff}
.hcard .hbprice{box-shadow:none}
.hcard .hbnum,.hcard .hbmeta,.hcard .rbhint{color:#b9b3a4}
.hcard .rblist,.hcard .hbmg{color:var(--gold)!important;text-decoration-color:var(--gold)}
.hcard .rbcopy,.hcard .rbcreate{box-shadow:3px 3px 0 #000}
.hcard .rbcopy.done{background:var(--g2);color:#fff}
.hcard .rbmake{background:var(--gold);color:#000;border-color:#000;box-shadow:3px 3px 0 #000}
.hcard .rberr{color:#ff7a7a}.hcard .rberr.ok{color:#8fe388}
/* mosaic: slices cover the whole tile (no border to inset), lift-free */
.hcard .hmos{background-color:#0d0d0d}
.hcard.mosA .rsface,.hcard.mosB .rsface{box-shadow:none!important}
.hgrid .hcard{animation:hdeal .42s cubic-bezier(.5,0,.3,1.3) both}
@keyframes hdeal{0%{transform:rotateY(-90deg)}100%{transform:none}}
@media (prefers-reduced-motion:reduce){.hgrid .hcard{animation:none}}