/* MP Shop item art: backgrounds, frames, name styles, tags and full-look bundles */
.pbg-velvet{background-image:radial-gradient(80% 60% at 30% 10%,rgba(190,24,93,.45),transparent 65%),radial-gradient(60% 50% at 80% 90%,rgba(126,34,206,.35),transparent 70%),linear-gradient(160deg,#2a0718,#12030c)}
.pbg-glacier{background-image:radial-gradient(70% 55% at 50% 0%,rgba(186,230,253,.55),transparent 70%),linear-gradient(115deg,transparent 40%,rgba(255,255,255,.08) 41%,transparent 48%),linear-gradient(65deg,transparent 55%,rgba(255,255,255,.06) 56%,transparent 62%),linear-gradient(180deg,#1e4e6b,#0b2235 60%,#06131f)}
.pbg-circuit{background-image:repeating-linear-gradient(90deg,rgba(163,230,53,.12) 0 1px,transparent 1px 26px),repeating-linear-gradient(0deg,rgba(163,230,53,.12) 0 1px,transparent 1px 26px),radial-gradient(circle at 30% 40%,rgba(163,230,53,.35) 0 2px,transparent 3px),radial-gradient(circle at 70% 65%,rgba(163,230,53,.35) 0 2px,transparent 3px),radial-gradient(70% 60% at 50% 100%,rgba(22,101,52,.5),transparent 70%),linear-gradient(180deg,#07130a,#030805)}
.pbg-emberbg{background-image:radial-gradient(90% 60% at 50% 110%,#f97316 0,rgba(220,38,38,.6) 35%,transparent 70%),linear-gradient(180deg,#120404,#2a0806 60%,#3b0a05)}
.pbg-emberbg:before{content:"";position:absolute;inset:-20%;z-index:-1;background:radial-gradient(40% 30% at 30% 80%,rgba(251,146,60,.35),transparent 70%),radial-gradient(35% 25% at 70% 90%,rgba(239,68,68,.35),transparent 70%);animation:aur 6s ease-in-out infinite alternate}
.pbg-vice{background-image:radial-gradient(circle at 50% 66%,#ffe6a3 0,#ffb25c 9%,#ff6f61 15%,transparent 16%),repeating-linear-gradient(180deg,transparent 0 7px,rgba(42,10,40,.55) 7px 9px),linear-gradient(180deg,#1b0b33 0,#5b1466 30%,#c2386b 55%,#f2785c 70%,#2a0c2c 70.4%,#14061c 100%)}
.pbg-vice:after{content:"";position:absolute;left:4%;bottom:26%;width:40px;height:90px;z-index:-1;background:radial-gradient(ellipse 70% 25% at 50% 10%,#14061c 60%,transparent 62%),linear-gradient(90deg,transparent 45%,#14061c 45% 55%,transparent 55%);opacity:.9}
.pbg-synth{background-image:linear-gradient(180deg,#0d0221 0,#2b0548 45%,#ff2a6d 58%,#0d0221 58.3%)}
.pbg-synth:before{content:"";position:absolute;left:-50%;right:-50%;bottom:0;height:42%;z-index:-1;background:repeating-linear-gradient(90deg,rgba(5,217,232,.7) 0 1.5px,transparent 1.5px 38px),repeating-linear-gradient(180deg,rgba(5,217,232,.7) 0 1.5px,transparent 1.5px 20px);transform:perspective(160px) rotateX(55deg);transform-origin:50% 100%;animation:synthGrid 2.5s linear infinite}
@keyframes synthGrid{to{background-position:0 0,0 20px}}
.pfr-mint:before{background:linear-gradient(135deg,#d1fae5,#34d399,#059669)}
.pfr-rose:before{background:linear-gradient(135deg,#ffe4e6,#fb7185,#e11d48)}
.pfr-chrome:before{background:linear-gradient(135deg,#f8fafc,#94a3b8 30%,#f1f5f9 50%,#64748b 75%,#e2e8f0)}
.pfr-vice:before{inset:-2px;background:conic-gradient(#ff5fa2,#ffb36b,#5b1466,#ff5fa2);animation:spin 5s linear infinite}
.pfr-aurora:before{inset:-3px;background:conic-gradient(from 0deg,#34d399,#22d3ee,#a78bfa,#34d399);filter:blur(2px);animation:spin 3.2s linear infinite}
.pfr-diamond:before{inset:-3px;background:conic-gradient(from 0deg,#fff,#a5f3fc,#e9d5ff,#fff,#bae6fd,#fbcfe8,#fff);box-shadow:0 0 14px rgba(186,230,253,.8);animation:spin 2.6s linear infinite}
.pnm-ice{background:linear-gradient(180deg,#fff,#a5f3fc 60%,#38bdf8);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 6px rgba(165,243,252,.45))}
.pnm-neon{color:#fff;text-shadow:0 0 4px #fff,0 0 10px #22d3ee,0 0 22px #22d3ee;animation:nflick 3s steps(1) infinite}
@keyframes nflick{0%,92%,96%,100%{opacity:1}94%{opacity:.55}}
.pnm-chrome{background:linear-gradient(180deg,#f8fafc 0,#cbd5e1 45%,#475569 50%,#e2e8f0 75%,#f8fafc);-webkit-background-clip:text;background-clip:text;color:transparent}
.pnm-fire{background:linear-gradient(0deg,#ef4444,#f97316 40%,#fde047) 0 0/100% 200%;-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 8px rgba(249,115,22,.55));animation:fireUp 1.4s ease-in-out infinite alternate}
@keyframes fireUp{to{background-position:0 100%}}
.pnm-vice{background:linear-gradient(90deg,#ff5fa2,#ffb36b,#ff5fa2) 0 0/200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 8px rgba(255,95,162,.5));animation:shim 4s linear infinite}
.pnm-holo{background:linear-gradient(110deg,#e9d5ff,#a5f3fc 20%,#fbcfe8 40%,#fef9c3 60%,#bbf7d0 80%,#e9d5ff) 0 0/250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shim 3s linear infinite}
.pb-pulls i{background:#a855f7}.pb-streamer i{background:#ef4444}.pb-shark i{background:#0ea5e9}.pb-vice i{background:linear-gradient(135deg,#ff5fa2,#ffb36b)}
.pb-legend i{background:linear-gradient(135deg,#fde68a,#f59e0b);color:#3a2500}.pb-diamond i{background:linear-gradient(135deg,#fff,#a5f3fc,#e9d5ff);color:#0c4a6e}.pb-legend,.pb-diamond{box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}

/* full-look bundles */
.bx-list{display:flex;flex-direction:column;gap:14px;padding:4px 0 12px}
.bx{border-radius:22px;overflow:hidden;background:radial-gradient(120% 80% at 100% 0%,color-mix(in srgb,var(--ta) 18%,transparent),transparent 60%),#121219;border:1px solid color-mix(in srgb,var(--ta) 35%,rgba(255,255,255,.06))}
.bx .bx-pv{margin:0;border-radius:0;border:0;box-shadow:none}
.bx .bx-pv .mx-ban{height:96px}
.bx-info{display:flex;flex-direction:column;gap:12px;padding:12px 16px 16px}
.bx-hd{display:flex;justify-content:space-between;align-items:center;gap:10px}
.bx-hd b{color:#fff;font-size:18px;font-weight:800;letter-spacing:-.01em}
.bx-hd em{font-style:normal;padding:4px 9px;border-radius:99px;font-size:11.5px;font-weight:800;background:rgba(74,222,128,.15);color:#4ade80;white-space:nowrap}
.bx-hd em.own{background:rgba(255,255,255,.08);color:rgba(255,255,255,.6)}
.bx-parts{display:flex;flex-wrap:wrap;gap:6px}
.bx-parts span{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:9px;background:rgba(255,255,255,.06);color:rgba(255,255,255,.8);font-size:12px;font-weight:600}
.bx-parts span i{width:8px;height:8px;border-radius:50%;background:var(--ta)}
.bx-parts span.own{opacity:.5;text-decoration:line-through}
.bx-buy{display:flex;justify-content:space-between;align-items:center;gap:12px}
.bx-pr{display:flex;flex-direction:column;gap:1px}
.bx-pr s{color:rgba(255,255,255,.4);font-size:12.5px;font-variant-numeric:tabular-nums}
.bx-pr b{display:inline-flex;align-items:center;gap:5px;color:#fff;font-size:19px;font-weight:800;font-variant-numeric:tabular-nums}
.bx-pr small{color:rgba(255,255,255,.5);font-size:11.5px}
.bx-buy .mx-go{flex:none}
/* "None" photo glow: an empty ring swatch; music bars keep the app accent */
.sw-ac[style*="--c:transparent"]{background:transparent;box-shadow:inset 0 0 0 2px rgba(255,255,255,.35)}
.sw-ac[style*="--c:transparent"]::after{content:"";display:block;width:2px;height:100%;margin:0 auto;background:rgba(255,255,255,.35);transform:rotate(45deg)}
[style*="--glow:transparent"] .mc-eq i,[style*="--glow:transparent"] .pm-bar i{background:var(--acc,#8f82ec)}
/* Frame ring thickness scales with the avatar: about 5% of its size (6px max), with a thin dark gap between ring and photo.
   It used to be a fixed 4px border mostly covered by a 3px gap, so most frames showed as a 1px hairline (or nothing in the shop preview). */
.pav{--rw:clamp(1.5px,calc(var(--s) * .05),6px);--gap:clamp(1px,calc(var(--s) * .028),3.5px)}
.pav>.pav-in{width:calc(100% - (var(--rw) + var(--gap)) * 2);height:calc(100% - (var(--rw) + var(--gap)) * 2);box-shadow:0 0 0 var(--gap) #0d0b18}
.mx-av .pav>.pav-in{box-shadow:0 0 0 var(--gap) #101018}
/* the animated frames reach just past the ring so they still read as the fancier ones */
.pfr-flame:before,.pfr-aurora:before,.pfr-diamond:before{inset:-1.5px}
.pfr-rainbow:before,.pfr-vice:before{inset:-1px}