/* 🎞 «لحظه‌ی افسانه»: wide cinematic cards (template 'pano' in duel.js). A film frame: letterbox, colour grade, anamorphic flare,
   a giant title rolling behind the plate, film grain, a chromatic glitch now and then, and each hero's own moment. Our drawings only. */
.pn{--a:#ffcc66;--b:#ff7a3d;--g1:rgba(10,8,30,.7);--g2:rgba(10,8,30,0);position:relative;display:block;width:100%;aspect-ratio:2.35/1;border-radius:14px;overflow:hidden;isolation:isolate;container-type:inline-size;background:#05050a;
  transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .6s cubic-bezier(.2,.8,.2,1);
  box-shadow:0 0 0 1px rgba(255,255,255,.14),0 0 0 2px rgba(0,0,0,.6),0 24px 50px -22px rgba(0,0,0,.9),0 0 60px -24px var(--a);color:#fff;font-family:Vazirmatn,sans-serif;outline:0}
.pn:hover{transition:transform .12s linear}
.pn>span,.pn-fx>*{position:absolute;pointer-events:none}
/* picture: a portrait sits right on its own blurred glow; an owner's wide art fills the frame */
.pn-blur{inset:-10%;background:center/cover;filter:blur(22px) saturate(1.4) brightness(.55);transform:scale(1.1)}
.pn-art{top:0;bottom:0;right:0;width:46%;background:center 20%/cover no-repeat;-webkit-mask:linear-gradient(90deg,transparent,#000 30%);mask:linear-gradient(90deg,transparent,#000 30%);animation:pnKen 18s ease-in-out infinite alternate;transform-origin:65% 35%}
.pn.wide .pn-art{inset:0;width:auto;-webkit-mask:none;mask:none}.pn.wide .pn-blur{display:none}
@keyframes pnKen{from{transform:scale(1.02) translateX(0)}to{transform:scale(1.12) translateX(-1.5%)}}
.pn-gl{top:0;bottom:0;right:0;width:46%;background:center 20%/cover no-repeat;mix-blend-mode:screen;opacity:0;-webkit-mask:linear-gradient(90deg,transparent,#000 30%);mask:linear-gradient(90deg,transparent,#000 30%)}
.pn.wide .pn-gl{inset:0;width:auto;-webkit-mask:none;mask:none}
.pn-gl.r{filter:sepia(1) saturate(9) hue-rotate(-50deg);animation:pnGlR 9s steps(1) infinite}.pn-gl.c{filter:sepia(1) saturate(9) hue-rotate(150deg);animation:pnGlC 9s steps(1) infinite}
@keyframes pnGlR{0%,91%,96%,100%{opacity:0;transform:none}92%{opacity:.6;transform:translate(-1.4%,.6%)}94%{opacity:.45;transform:translate(1%,-.8%) skewX(-4deg)}}
@keyframes pnGlC{0%,91%,96%,100%{opacity:0;transform:none}92%{opacity:.6;transform:translate(1.4%,-.6%)}94%{opacity:.45;transform:translate(-1%,.8%) skewX(4deg)}}
/* grade: the hero's colour from the left, a vignette all round */
.pn-grade{inset:0;background:linear-gradient(90deg,var(--g1) 0,var(--g1) 34%,var(--g2) 70%),radial-gradient(140% 120% at 70% 50%,transparent 45%,rgba(0,0,0,.7));z-index:1}
.pn-fx{inset:0;z-index:2;overflow:hidden;pointer-events:none}
/* anamorphic lens flare: a long horizontal streak that breathes */
.pn-flare{z-index:3;left:-20%;right:-20%;top:22%;height:2px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--a) 70%,#fff) 30%,#fff 50%,color-mix(in srgb,var(--a) 70%,#fff) 70%,transparent);box-shadow:0 0 18px 4px color-mix(in srgb,var(--a) 60%,transparent);opacity:.0;animation:pnFlare 6s ease-in-out infinite}
@keyframes pnFlare{0%,100%{opacity:0;transform:scaleX(.4)}40%,55%{opacity:.75;transform:scaleX(1)}}
.pn-grain{inset:-50%;z-index:8;opacity:.12;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:pnGrain .8s steps(4) infinite}
@keyframes pnGrain{25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-1%)}}
.pn-glare{inset:0;z-index:9;background:radial-gradient(circle at var(--gx,75%) var(--gy,20%),rgba(255,255,255,.22),transparent 40%),linear-gradient(115deg,transparent 40%,rgba(255,255,255,.18) 48%,transparent 56%) 0 0/250% 100%;mix-blend-mode:overlay;animation:pnSheen 8s ease-in-out infinite}
@keyframes pnSheen{0%,60%{background-position:0 0,130% 0}100%{background-position:0 0,-130% 0}}

/* ⚔ jinwoo — ink of shadows creeping up, a blue-violet crack across the frame */
.pn-jinwoo{--a:#8fb4ff;--g1:rgba(6,6,24,.82);--g2:rgba(20,10,60,0)}
.pn-ink{inset:0;width:100%;height:100%;fill:none;stroke:#0a0618;stroke-width:2.6;stroke-linecap:round;opacity:.85;filter:drop-shadow(0 0 3px rgba(130,110,255,.9)) drop-shadow(0 0 10px rgba(80,60,220,.6));-webkit-mask:linear-gradient(0deg,#000 30%,transparent 95%);mask:linear-gradient(0deg,#000 30%,transparent 95%)}
.pn-ink path{stroke-dasharray:240;stroke-dashoffset:240;animation:pnInk 9s cubic-bezier(.6,0,.2,1) infinite;animation-delay:calc(var(--i) * .15s)}
.pn-crack{inset:0;width:100%;height:100%;fill:none;stroke:#cfe0ff;stroke-width:1.6;filter:drop-shadow(0 0 4px #6f8cff) drop-shadow(0 0 12px #8b5cff);opacity:0;animation:pnCrack 9s infinite}
.pn-crack .t{stroke-width:1}
@keyframes pnCrack{0%,42%,45%,48%,100%{opacity:0}43%,46.5%{opacity:1}}
.pn-jinwoo .pn-art{animation:pnKen 18s ease-in-out infinite alternate,pnDim 9s infinite}
@keyframes pnDim{0%,38%,52%,100%{filter:none}42%{filter:brightness(.55) saturate(.6)}44%{filter:brightness(1.5) hue-rotate(-15deg) saturate(1.3)}}

/* ☯ naruto — Six Paths: a golden cloak of chakra, nine black orbs circling behind him, a staff of light */
.pn-naruto{--a:#ffd54a;--g1:rgba(30,16,0,.8);--g2:rgba(50,26,0,0)}
.pn-aura{right:-6%;top:-10%;width:60%;height:120%;border-radius:45%;background:radial-gradient(closest-side,rgba(255,236,150,.55),rgba(255,180,40,.35) 45%,rgba(255,120,0,0) 75%);mix-blend-mode:screen;filter:blur(4px);animation:pnAura 2.8s ease-in-out infinite}
@keyframes pnAura{50%{transform:scale(1.06);opacity:.75}}
.pn-orbs{right:20%;top:50%;width:0;height:0;animation:pnSpin 14s linear infinite}
.pn-orbs i{position:absolute;width:4.2cqw;height:4.2cqw;margin:-2.1cqw;border-radius:50%;background:radial-gradient(circle at 35% 30%,#5a5a6a,#0a0a10 55%,#000);box-shadow:0 0 0 1px rgba(255,220,120,.35),0 0 14px rgba(255,200,80,.55);transform:rotate(calc(var(--i) * 40deg)) translateX(27cqw) rotate(calc(var(--i) * -40deg));animation:pnOrbB 2.8s ease-in-out infinite;animation-delay:calc(var(--i) * -.3s)}
@keyframes pnOrbB{50%{box-shadow:0 0 0 1px rgba(255,230,140,.6),0 0 22px rgba(255,210,90,.9)}}
.pn-rod{left:30%;top:8%;width:3px;height:84%;background:linear-gradient(180deg,transparent,#fff6c8,#ffd54a,transparent);box-shadow:0 0 14px 3px rgba(255,214,74,.7);transform:rotate(-18deg);opacity:.85;animation:pnRod 4s ease-in-out infinite}
@keyframes pnRod{50%{opacity:.4;transform:rotate(-18deg) scaleY(.92)}}
.pn-ember{width:calc(4px * var(--s));height:calc(4px * var(--s));bottom:-6%;border-radius:50%;background:#fff1a8;box-shadow:0 0 8px 2px #ffb81a;animation:pnEmber var(--d) linear infinite;animation-delay:calc(var(--i) * -.37s)}
@keyframes pnEmber{0%{transform:translate(0,0);opacity:0}15%{opacity:1}100%{transform:translate(calc(var(--s) * 8cqw),-46cqw);opacity:0}}
@keyframes pnSpin{to{transform:rotate(360deg)}}

/* ☀ luffy — speed lines, the drum rings, a white flash of the awakening */
.pn-luffy{--a:#ffe08a;--g1:rgba(255,250,235,.0);--g2:rgba(255,250,235,0)}
.pn-luffy .pn-blur{filter:blur(22px) saturate(1.2) brightness(1.15)}
.pn-luffy .pn-grade{background:linear-gradient(90deg,rgba(255,248,230,.7) 0,rgba(255,248,230,.55) 30%,rgba(255,248,230,0) 66%),radial-gradient(140% 120% at 70% 50%,transparent 50%,rgba(120,80,20,.35))}
.pn-speed{left:-30%;top:50%;width:120cqw;aspect-ratio:1;margin-top:-60cqw;background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.0) 0 4deg,rgba(255,255,255,.75) 4deg 4.6deg,rgba(255,255,255,0) 4.6deg 9deg);-webkit-mask:radial-gradient(circle,transparent 18%,#000 40%);mask:radial-gradient(circle,transparent 18%,#000 40%);animation:pnSpeed 2.4s steps(3) infinite}
@keyframes pnSpeed{0%{transform:rotate(0)}100%{transform:rotate(12deg)}}
.pn-ring2 i{position:absolute;left:22%;top:50%;width:12cqw;aspect-ratio:1;margin:-6cqw 0 0 -6cqw;border-radius:50%;border:2px solid #fff;box-shadow:0 0 14px #ffd36b;animation:pnDrum 2.4s ease-out infinite;animation-delay:calc(var(--i) * .8s)}
@keyframes pnDrum{0%{transform:scale(.2);opacity:1}100%{transform:scale(6);opacity:0}}
.pn-wflash{inset:0;background:#fff;opacity:0;animation:pnWf 7s infinite}
@keyframes pnWf{0%,70%,78%,100%{opacity:0}71%{opacity:.85}}
.pn-luffy .pn-art{animation:pnKen 18s ease-in-out infinite alternate,pnBoing 2.4s cubic-bezier(.3,1.6,.5,1) infinite}
@keyframes pnBoing{0%,100%{scale:1}10%{scale:1.05 .96}22%{scale:.98 1.03}}


/* ∞ gojo — the unlimited void: endless streaks of information rushing out, infinity ripples, a negative heartbeat */
.pn-hyper{left:66%;top:42%;width:0;height:0;z-index:1}
.pn-hyper i{position:absolute;left:0;top:0;width:24cqw;height:1.5px;transform-origin:0 50%;background:linear-gradient(90deg,transparent,rgba(190,220,255,.95));transform:rotate(var(--r)) translateX(4cqw) scaleX(.1);opacity:0;animation:pnHyp var(--d) cubic-bezier(.5,0,.9,.4) infinite;animation-delay:calc(var(--i) * -.13s)}
@keyframes pnHyp{0%{transform:rotate(var(--r)) translateX(3cqw) scaleX(.05);opacity:0}30%{opacity:1}100%{transform:rotate(var(--r)) translateX(46cqw) scaleX(1);opacity:0}}
.pn-gojo{--a:#a9c8ff;--g1:rgba(2,4,16,.82);--g2:rgba(2,4,16,0)}
.pn-ripple i{position:absolute;left:66%;top:42%;width:20cqw;aspect-ratio:1;margin:-10cqw 0 0 -10cqw;border-radius:50%;border:1px solid rgba(170,210,255,.7);box-shadow:0 0 18px rgba(120,170,255,.5),inset 0 0 18px rgba(120,170,255,.4);animation:pnRip 6s cubic-bezier(.2,.6,.3,1) infinite;animation-delay:calc(var(--i) * 1.5s)}
@keyframes pnRip{0%{transform:scale(.3);opacity:0}15%{opacity:1}100%{transform:scale(5.5);opacity:0}}
.pn-iris{left:0;right:0;top:0;bottom:0;background:radial-gradient(circle at 66% 42%,rgba(140,200,255,.45),transparent 30%);mix-blend-mode:screen;animation:pnIris 6s ease-in-out infinite}
@keyframes pnIris{50%{opacity:.4}}
.pn-gojo .pn-art,.pn-gojo .pn-blur{animation:pnKen 18s ease-in-out infinite alternate,pnNeg 11s infinite}
@keyframes pnNeg{0%,80%,84%,100%{filter:none}81%,83%{filter:invert(1) hue-rotate(180deg) saturate(1.6) contrast(1.2)}}

/* ✶ rudeus — a magic circle draws itself, sparks of the four elements */
.pn-rudeus{--a:#7ff0d0;--g1:rgba(2,18,16,.8);--g2:rgba(2,18,16,0)}
.pn-sigil{left:4%;top:50%;width:40cqw;height:40cqw;margin-top:-20cqw;fill:none;stroke:#8ff5dc;stroke-width:1.1;filter:drop-shadow(0 0 5px #3ad1c6) drop-shadow(0 0 14px rgba(58,209,198,.6));animation:pnSpin 40s linear infinite}
.pn-sigil>*{stroke-dasharray:600;stroke-dashoffset:600;animation:pnDraw 10s ease-in-out infinite}
.pn-sigil .tk{stroke-width:2}
@keyframes pnDraw{0%{stroke-dashoffset:600;opacity:1}40%,80%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
.pn-spark{width:5px;height:5px;border-radius:50%;animation:pnSpark 3s ease-in-out infinite;animation-delay:calc(var(--i) * -.3s)}
.pn-spark:nth-child(4n+2){background:#ff7a3d;box-shadow:0 0 10px #ff5a1a}.pn-spark:nth-child(4n+3){background:#6fd3ff;box-shadow:0 0 10px #1f7bff}.pn-spark:nth-child(4n){background:#c9ffe9;box-shadow:0 0 10px #7ff0c0}.pn-spark:nth-child(4n+1){background:#ffd27a;box-shadow:0 0 10px #d9a441}
@keyframes pnSpark{0%,100%{transform:translateY(0) scale(.6);opacity:.2}50%{transform:translateY(-3cqw) scale(1.2);opacity:1}}


/* ✦ the frame comes alive: a light runs round the edge, god rays fall from the hero's side, dust floats in the light */
@property --pa{syntax:'<angle>';inherits:false;initial-value:0deg}
.pn-edge{inset:0;z-index:10;border-radius:inherit;padding:2px;background:conic-gradient(from var(--pa),transparent 0 60%,color-mix(in srgb,var(--a) 80%,#fff) 72%,#fff 75%,color-mix(in srgb,var(--a) 80%,#fff) 78%,transparent 90%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);animation:pnEdge 5s linear infinite;filter:drop-shadow(0 0 6px var(--a))}
@keyframes pnEdge{to{--pa:360deg}}
.pn-rays{inset:-30% -10% -30% 30%;z-index:2;background:repeating-conic-gradient(from 200deg at 90% 0%,color-mix(in srgb,var(--a) 22%,transparent) 0 3deg,transparent 3deg 11deg);-webkit-mask:radial-gradient(ellipse at 90% 0%,#000,transparent 70%);mask:radial-gradient(ellipse at 90% 0%,#000,transparent 70%);mix-blend-mode:screen;opacity:.55;animation:pnRays 14s ease-in-out infinite alternate}
@keyframes pnRays{from{transform:rotate(-4deg)}to{transform:rotate(5deg)}}
.pn-dust{inset:0;z-index:3}
.pn-dust i{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff;box-shadow:0 0 6px 1px color-mix(in srgb,var(--a) 80%,#fff);opacity:0;animation:pnDust 7s ease-in-out infinite;animation-delay:calc(var(--i) * -.6s)}
@keyframes pnDust{0%{transform:translate(0,0);opacity:0}30%{opacity:.9}100%{transform:translate(3cqw,-8cqw);opacity:0}}
/* the art arrives: a camera pull-back from a blur */
.pn-art{animation:pnArrive 1.6s cubic-bezier(.2,.8,.2,1) both,pnKen 18s 1.6s ease-in-out infinite alternate}
@keyframes pnArrive{from{transform:scale(1.25);filter:blur(10px) brightness(1.6)}}
/* the plate: a small chip, the name with light running through it, a line that draws itself, the one-liner */
.pn-plate{z-index:7;left:4.5cqw;right:auto;top:50%;transform:translateY(-50%);max-width:58%}
.pn-tx{display:flex;flex-direction:column;align-items:flex-start;gap:.8cqw;direction:rtl;text-align:right;min-width:0}
.pn-tx small{font-size:clamp(9px,1.7cqw,12px);font-weight:800;color:#fff;padding:.25em .9em;border-radius:99px;background:linear-gradient(90deg,color-mix(in srgb,var(--a) 35%,transparent),rgba(0,0,0,.35));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--a) 60%,transparent);backdrop-filter:blur(6px);animation:pnUp .9s .5s both}
.pn-tx b{position:relative;font:400 clamp(22px,7.6cqw,58px)/1.12 Lalezar,Vazirmatn,sans-serif;white-space:nowrap;color:#fff;background:linear-gradient(100deg,#fff 0 40%,color-mix(in srgb,var(--a) 70%,#fff) 47%,#fff 50%,#fff 100%) 0 0/300% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 14px color-mix(in srgb,var(--a) 55%,transparent)) drop-shadow(0 3px 8px rgba(0,0,0,.9));animation:pnName 1.2s .7s both,pnShine 5s 2s ease-in-out infinite}
@keyframes pnName{from{opacity:0;transform:translateX(-4cqw);filter:blur(10px)}}
@keyframes pnShine{0%,60%{background-position:100% 0}100%{background-position:-50% 0}}
.pn-ul{height:2px;width:min(26cqw,100%);background:linear-gradient(90deg,transparent,var(--a),#fff);box-shadow:0 0 10px var(--a);transform-origin:right;animation:pnUl 1s 1.1s both}
@keyframes pnUl{from{transform:scaleX(0)}}
.pn-tx em{font-style:normal;font-size:clamp(10px,2.1cqw,15px);color:rgba(255,255,255,.9);text-shadow:0 1px 8px #000;animation:pnUp .9s 1.3s both}
@keyframes pnUp{from{opacity:0;transform:translateY(8px)}}
.pn-luffy .pn-tx b{filter:drop-shadow(0 0 2px #7a3a00) drop-shadow(0 2px 8px rgba(120,60,0,.8))}.pn-luffy .pn-tx em{color:#fff;text-shadow:0 1px 6px rgba(80,40,0,.9)}

/* 🎁 the gift cards: no hero moment, a living gold or rainbow frame */
.pn-gift{--a:#ffd36b;--g1:rgba(10,8,20,.72);--g2:rgba(10,8,20,0)}
.pn-gift.pn-gold{--a:#ffd36b;box-shadow:0 0 0 1px #c99a1e,0 0 0 3px rgba(0,0,0,.6),0 0 0 4px rgba(255,211,107,.45),0 24px 50px -22px rgba(0,0,0,.9),0 0 50px -16px #ffb347}
.pn-gift.pn-gold .pn-edge{padding:3px;background:conic-gradient(from var(--pa),#7a5410,#ffe9a8,#c99a1e,#fff6d0,#8a6416,#ffd36b,#7a5410)}
.pn-gift.pn-rainbow{--a:#c8b6ff;box-shadow:0 0 0 1px rgba(255,255,255,.4),0 24px 50px -22px rgba(0,0,0,.9),0 0 50px -16px #b46bff}
.pn-gift.pn-rainbow .pn-edge{padding:3px;background:conic-gradient(from var(--pa),#ff6fb5,#ffd34d,#6ee39a,#3db4f2,#b46bff,#ff6fb5);filter:drop-shadow(0 0 6px rgba(255,255,255,.6))}
.pn-gift.pn-rainbow .pn-tx b{background-image:linear-gradient(100deg,#fff 0 35%,#ff9bd2 42%,#ffe08a 46%,#8ff0c0 50%,#9ad8ff 54%,#d6b0ff 58%,#fff 65%)}
.pn-gift .pn-rays{opacity:.35}

/* the wide slot on the profile showcase */
.vt-wide{position:relative;z-index:2;width:min(760px,94%);margin:4px auto 22px}
.vt-wedit{position:absolute;z-index:6;top:10px;left:10px;font:800 12px Vazirmatn,sans-serif;padding:5px 12px;border-radius:99px;border:1px solid rgba(255,255,255,.3);background:rgba(0,0,0,.45);color:#fff;cursor:pointer;backdrop-filter:blur(6px)}
.vt-wown{display:block;text-align:center;margin-top:8px;font-size:11.5px;opacity:.7}
.vt-wadd{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:min(760px,94%);aspect-ratio:2.35/1;max-height:210px;margin:4px auto 22px;border-radius:16px;border:2px dashed color-mix(in srgb,currentColor 25%,transparent);background:color-mix(in srgb,currentColor 4%,transparent);color:inherit;font:inherit;cursor:pointer;opacity:.75;transition:opacity .2s}
.vt-wadd:hover{opacity:1}.vt-wadd span{font-size:26px;line-height:1}.vt-wadd b{font-size:14px}.vt-wadd small{font-size:11.5px;opacity:.7}
.vtw-list{display:grid;gap:12px;max-height:65vh;overflow-y:auto;padding:4px}
.vtw-i{border:0;background:none;padding:0;cursor:pointer;border-radius:16px;transition:transform .2s}.vtw-i:hover{transform:scale(1.02)}
.vtw-i.in{outline:2px solid #ffd36b;outline-offset:3px}

/* the shop box: the five moments, one at a time */
.pnx{position:relative;overflow:hidden;padding:22px;border-radius:26px;color:#fff;background:radial-gradient(800px 300px at 80% 0,rgba(255,204,102,.16),transparent 70%),linear-gradient(160deg,#0d0b1c,#05040c);box-shadow:inset 0 0 0 1px rgba(255,204,102,.25),0 30px 60px -30px rgba(0,0,0,.8)}
.pnx-h small{font-size:12px;font-weight:800;color:#ffcc66}.pnx-h h2{margin:2px 0 4px;font:400 34px/1.2 Lalezar,Vazirmatn,sans-serif;background:linear-gradient(90deg,#fff3cf,#ffcc66,#ff8a3d);-webkit-background-clip:text;background-clip:text;color:transparent}
.pnx-h p{margin:0 0 14px;font-size:13.5px;color:rgba(255,255,255,.75)}
.pnx-stage{position:relative;aspect-ratio:2.35/1;max-width:820px;margin:0 auto}
.pnx-c{position:absolute;inset:0;opacity:0;transform:scale(.96);transition:opacity .8s,transform .8s;pointer-events:none}
.pnx-c.on{opacity:1;transform:none;pointer-events:auto}
.pnx-c:not(.on) .pn *{animation-play-state:paused!important}
.pnx-dots{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:14px 0 4px}
.pnx-dots button{font:700 12px Vazirmatn,sans-serif;padding:5px 12px;border-radius:99px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.05);color:rgba(255,255,255,.75);cursor:pointer}
.pnx-dots button.on{border-color:#ffcc66;color:#1a1200;background:linear-gradient(90deg,#ffe08a,#ffb347)}
.pnx-buy{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:12px}
.pnx-note{margin:10px 0 0;text-align:center;font-size:11.5px;color:rgba(255,255,255,.55)}
.dl-mb .pn-big{width:min(820px,100%)}

@media (max-width:560px){.pn{border-radius:10px}.pn-plate{max-width:70%;left:4cqw}.pn-tx b{font-size:clamp(20px,8.4cqw,40px)}.pn-tx em{font-size:clamp(10px,2.9cqw,13px)}.pn-tx small{font-size:clamp(9px,2.6cqw,11px)}.pnx{padding:16px 12px}.pnx-h h2{font-size:28px}.vt-wide,.vt-wadd{width:100%}.pn-plate{max-width:62%}}
.vtw-pick .vp-box{width:min(860px,96vw)}
.vtw-list{overflow-x:hidden}.vtw-i{display:block;width:100%}.vtw-i .pn{transform:none}
html.lite .pn *,html.lite .pn{animation:none!important}
html.lite .pn-gl,html.lite .pn-wflash,html.lite .pn-crack,html.lite .pn-flare,html.lite .pn-dust,html.lite .pn-rays{display:none}
html.lite .pn-ink path,html.lite .pn-sigil>*{stroke-dashoffset:0}
@media (prefers-reduced-motion:reduce){.pn *,.pn{animation:none!important}.pn-gl,.pn-wflash{display:none}.pn-ink path,.pn-sigil>*{stroke-dashoffset:0}}
.vtw-list{grid-template-columns:repeat(auto-fill,minmax(min(340px,100%),1fr))}

/* ⚡ off screen = frozen; phones skip the costly layers */
.pn.pn-off,.pn.pn-off *{animation-play-state:paused!important}
@media (max-width:760px),(hover:none){.pn-grain,.pn-gl{display:none}.pn-edge{filter:none}.pn-tx b{filter:drop-shadow(0 2px 6px rgba(0,0,0,.9))}.pn-blur{filter:blur(14px) saturate(1.3) brightness(.55)}.pn-aura{filter:none}}

.pn-blur.ban{inset:-4%;filter:blur(6px) saturate(1.2) brightness(.45);transform:scale(1.05)}