/* 🦋 «پروانه» (src/parvaneh.js, public/assets/parvaneh.js): the card (pearl-glass frame, lace corners, a living butterfly),
   the viewer, the opening (the chrysalis: tap it three times, it bursts into butterflies, every card is built from them)
   and the shop shelf. Prefix bfy- only (pv- belongs to vipx.css). The card is CSS only; canvas runs only in the viewer and
   the opening. html.lite = a still card. */
.bfy{--w:200px;--a:#ffd3ec;--a2:#3a1f45;--a3:#fff;--g:#f3e2cf;--c:#ffd3ec;position:relative;width:var(--w);aspect-ratio:5/7;flex:none;isolation:isolate;
  color:#fff;font-family:inherit;-webkit-tap-highlight-color:transparent;perspective:900px;cursor:pointer}
.bfy.t-lilac{--a:#b88cff;--a2:#21113f;--a3:#f1e6ff;--g:#ddd0ff}
.bfy.t-ruby{--a:#ff3f72;--a2:#3b0618;--a3:#ffd7e1;--g:#ffc9a6}
.bfy.t-opal{--a:#7a5cff;--a2:#06040d;--a3:#a8f6ff;--g:#cdbcff}
.bfy-3d{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.bfy.live .bfy-3d{transition:transform .08s linear}
/* a soft halo in the tier's colour */
.bfy-glow{position:absolute;inset:-5%;z-index:-1;border-radius:calc(var(--w)*.12);background:radial-gradient(closest-side,color-mix(in srgb,var(--a) 55%,transparent),transparent);opacity:.55;animation:bfyBreath 3.6s ease-in-out infinite}
@keyframes bfyBreath{50%{opacity:.85;transform:scale(1.03)}}
/* ---- the picture ---- */
.bfy-body{position:absolute;inset:calc(var(--w)*.03);border-radius:calc(var(--w)*.055);overflow:hidden;background:#0b0710;box-shadow:0 calc(var(--w)*.06) calc(var(--w)*.15) #000b}
.bfy-img{position:absolute;inset:-4%;width:108%;height:108%;object-fit:cover;object-position:50% calc(var(--fx,35)*1%);transform:translate(calc((var(--mx,50%) - 50%)*-.035),calc((var(--my,50%) - 50%)*-.035)) scale(1.02);transition:transform .35s}
.bfy-none{position:absolute;inset:0;background:radial-gradient(circle at 50% 38%,color-mix(in srgb,var(--a) 45%,#120a18),#07040c 72%)}
.bfy-tint{position:absolute;inset:0;background:linear-gradient(180deg,color-mix(in srgb,var(--a2) 55%,transparent) 0,transparent 22%,transparent 52%,color-mix(in srgb,var(--a2) 92%,transparent) 96%)}
.bfy-sheen{position:absolute;inset:0;background:radial-gradient(circle at var(--mx,28%) var(--my,18%),#ffffff40,transparent 42%);mix-blend-mode:soft-light}
.bfy-foil{position:absolute;inset:-45%;background:linear-gradient(115deg,transparent 36%,#ff9fd840 44%,#a8f0ff48 50%,#cdb8ff40 56%,transparent 64%);mix-blend-mode:overlay;transform:translateX(calc((var(--mx,25%) - 50%)*.9));opacity:.55;transition:opacity .3s}
.bfy.live .bfy-foil,.bfy.big .bfy-foil{opacity:1}
.bfy.t-opal .bfy-foil{background:linear-gradient(115deg,transparent 30%,#ff4fd855 40%,#7a5cff55 46%,#22e6ff55 52%,#7dffb055 58%,#ffd36e55 64%,transparent 72%);mix-blend-mode:color-dodge;opacity:.7}
/* twinkling dust over the picture */
.bfy-dust{position:absolute;inset:0;pointer-events:none}
.bfy-dust i{position:absolute;width:calc(var(--w)*.03);aspect-ratio:1;background:radial-gradient(closest-side,#fff,var(--a3) 40%,transparent);clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);opacity:0;animation:bfyTw 3.2s ease-in-out infinite}
@keyframes bfyTw{0%,100%{opacity:0;transform:scale(.4) rotate(0)}45%{opacity:1;transform:scale(1) rotate(45deg)}}
/* ---- the pearl-glass frame: a slow iridescent light running round the edge (the child turns, the frame masks it) ---- */
.bfy-frame{position:absolute;inset:0;border-radius:calc(var(--w)*.075);padding:calc(var(--w)*.03);overflow:hidden;
  -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)}
.bfy-frame i{position:absolute;left:50%;top:50%;width:170%;aspect-ratio:1;margin:-85% 0 0 -85%;background:conic-gradient(from 0deg,var(--a3),var(--a),var(--g),#fff,color-mix(in srgb,var(--a) 70%,#fff),color-mix(in srgb,var(--a) 75%,#fff) 62%,var(--g) 80%,var(--a3));animation:bfySpin 9s linear infinite}
.bfy.t-opal .bfy-frame i{background:conic-gradient(#ff4fd8,#7a5cff,#22e6ff,#7dffb0,#ffd36e,#ff4fd8);animation-duration:5s}
.bfy-frame::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px #ffffff55,inset 0 0 calc(var(--w)*.03) #ffffff40}
@keyframes bfySpin{to{transform:rotate(1turn)}}
/* lace corners and the gem on top */
.bfy-lace{position:absolute;width:calc(var(--w)*.26);aspect-ratio:1;z-index:2;pointer-events:none;overflow:visible}
.bfy-lace path{fill:none;stroke:var(--g);stroke-width:1.6;stroke-linecap:round;filter:drop-shadow(0 0 2px color-mix(in srgb,var(--a) 70%,transparent))}
.bfy-lace circle{fill:var(--a3);filter:drop-shadow(0 0 3px var(--a))}
.bfy-lace.c1{top:calc(var(--w)*-.012);right:calc(var(--w)*-.012)}
.bfy-lace.c2{top:calc(var(--w)*-.012);left:calc(var(--w)*-.012);transform:scaleX(-1)}
.bfy-lace.c3{bottom:calc(var(--w)*-.012);right:calc(var(--w)*-.012);transform:scaleY(-1)}
.bfy-lace.c4{bottom:calc(var(--w)*-.012);left:calc(var(--w)*-.012);transform:scale(-1,-1)}
.bfy-gem{position:absolute;top:calc(var(--w)*-.03);left:50%;z-index:3;width:calc(var(--w)*.085);aspect-ratio:1;margin-left:calc(var(--w)*-.0425);transform:rotate(45deg);border-radius:22% 50% 22% 50%;
  background:radial-gradient(circle at 32% 30%,#fff,var(--a3) 22%,var(--a) 55%,var(--a2));box-shadow:0 0 0 calc(var(--w)*.008) var(--g),0 0 calc(var(--w)*.06) var(--a)}
.bfy.t-opal .bfy-gem{background:conic-gradient(from 30deg,#ff4fd8,#7a5cff,#22e6ff,#7dffb0,#ffd36e,#ff4fd8)}
/* ---- the living butterflies (SVG wings that flap; the fill comes from the shared gradients in #bfyDefs) ---- */
.bfy-bf{display:block;width:100%;height:100%;overflow:visible}
.bfy-bf .bfy-w{fill:url(#bfyW-pearl)}
.t-lilac .bfy-bf .bfy-w,.bfy-bf.t-lilac .bfy-w{fill:url(#bfyW-lilac)}
.t-ruby .bfy-bf .bfy-w,.bfy-bf.t-ruby .bfy-w{fill:url(#bfyW-ruby)}
.t-opal .bfy-bf .bfy-w,.bfy-bf.t-opal .bfy-w{fill:url(#bfyW-opal)}
.bfy-bf .v{fill:none;stroke:#ffffffa0;stroke-width:.9}
.bfy-bf .e{fill:none;stroke:#1c0d2480;stroke-width:2.4;stroke-linecap:round}
.bfy-bf .s{fill:#ffffffd0}
.bfy-bf .bd{fill:#1d1022}
.bfy-bf .an{fill:none;stroke:#1d1022;stroke-width:1.1;stroke-linecap:round}
.bfy-bf .wR,.bfy-bf .wL{transform-box:view-box;transform-origin:0 0}
.bfy-bf .wL{transform:scaleX(-1)}
.bfy-fly{position:absolute;z-index:4;pointer-events:none}
.bfy.big .bfy-fly{filter:drop-shadow(0 calc(var(--w)*.012) calc(var(--w)*.02) #0009)}
/* ⚡ (۶ آبان) a butterfly whose wings are separate elements: a flap is a GPU transform, not an SVG repaint */
.bfy-b2{position:relative;display:block;width:100%;aspect-ratio:100/84}
.bfy-b2 .bw{position:absolute;top:0;width:50%;height:100%}
.bfy-b2 .bw.r{left:50%;transform-origin:0 50%}.bfy-b2 .bw.l{right:50%;transform-origin:100% 50%}
.bfy-b2 .bw .bfy-bf{display:block;width:100%;height:100%}.bfy-b2 .bw.l .bfy-bf{transform:scaleX(-1)}
.bfy-b2 .bfy-bd{position:absolute;inset:0;width:100%;height:100%}
.bfy-fly.f1{top:36%;left:calc(var(--w)*-.13);width:calc(var(--w)*.3);transform:rotate(-64deg)}
.bfy-fly.f2{bottom:calc(var(--w)*-.05);right:calc(var(--w)*-.06);width:calc(var(--w)*.17);transform:rotate(30deg)}
/* ⚡ SVG wings animate on the main thread: they flap at rest only where a few cards show (showcase, shop fan); everywhere else
   (a grid of twenty) they rest until the pointer is on the card */
:is(.vt-card,.bfys-fan) .bfy.on .bfy-fly .bw{animation:bfyFlapR 3.4s ease-in-out infinite}
:is(.vt-card,.bfys-fan) .bfy.on .bfy-fly.f2 .bw{animation:none}
/* ⚡ fewer moving pieces per card at rest: the dust twinkles as one layer (not six), the small butterfly rests */
.bfy:not(.big):not(.live) .bfy-dust i{animation:none;opacity:.8;transform:scale(.8) rotate(45deg)}
.bfy:not(.big):not(.live) .bfy-dust{animation:bfyDustA 3.2s ease-in-out infinite alternate}
@keyframes bfyDustA{from{opacity:.15}to{opacity:1}}
@keyframes bfyFlapR{0%,40%,100%{transform:scaleX(1)}8%,24%{transform:scaleX(.22)}16%,32%{transform:scaleX(.95)}}
@keyframes bfyFlapL{0%,40%,100%{transform:scaleX(-1)}8%,24%{transform:scaleX(-.22)}16%,32%{transform:scaleX(-.95)}}
.bfy.live .bfy-fly.f1,.bfy.big .bfy-fly.f1{animation:bfyHover 2.6s ease-in-out infinite}
.bfy.live .bfy-fly .bw,.bfy.big .bfy-fly .bw{animation:bfyFastR .32s ease-in-out infinite alternate}
/* ⚡ off screen (or a still copy in a list) nothing ticks */
.bfy:not(.on) *,.bfy:not(.on) *::before,.bfy:not(.on) *::after{animation-play-state:paused!important}
.bfy.still *,.bfy.still *::before,.bfy.still *::after{animation:none!important}
.bfy.still .bfy-dust{display:none}
@keyframes bfyHover{0%,100%{transform:rotate(-64deg) translate(0,0)}50%{transform:rotate(-50deg) translate(calc(var(--w)*-.04),calc(var(--w)*-.05))}}
@keyframes bfyFastR{to{transform:scaleX(.18)}}
@keyframes bfyFastL{to{transform:scaleX(-.18)}}
/* ---- texts ---- */
.bfy-hud{position:absolute;top:calc(var(--w)*.085);left:calc(var(--w)*.085);right:calc(var(--w)*.085);justify-content:space-between;display:flex;align-items:center;gap:6px;font-size:calc(var(--w)*.048);z-index:3}
.bfy-tier{padding:.3em .8em;border-radius:99px;background:color-mix(in srgb,var(--a2) 72%,#0008);border:1px solid color-mix(in srgb,var(--g) 70%,transparent);color:var(--a3);font-weight:800;white-space:nowrap;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.bfy-no{padding:.28em .6em;border-radius:7px;background:#0009;color:#fff;font-weight:700;font-variant-numeric:tabular-nums}
.bfy-plate{position:absolute;left:calc(var(--w)*.03);right:calc(var(--w)*.03);bottom:calc(var(--w)*.03);padding:calc(var(--w)*.13) calc(var(--w)*.06) calc(var(--w)*.065);background:linear-gradient(0deg,color-mix(in srgb,var(--a2) 92%,#000) 0,color-mix(in srgb,var(--a2) 60%,transparent) 55%,transparent);text-align:center;z-index:3;border-radius:0 0 calc(var(--w)*.055) calc(var(--w)*.055)}
.bfy-plate b{display:block;font:400 calc(var(--w)*.108)/1.25 Lalezar,var(--font,Vazirmatn,sans-serif);letter-spacing:.3px;color:#fff;text-shadow:0 2px 4px #000,0 0 calc(var(--w)*.045) color-mix(in srgb,var(--a) 85%,transparent),0 0 calc(var(--w)*.1) color-mix(in srgb,var(--a) 50%,transparent)}
.bfy-plate small{position:relative;display:inline-block;margin-top:calc(var(--w)*.012);padding:0 calc(var(--w)*.09);font-size:calc(var(--w)*.05);color:var(--a3);opacity:.92}
.bfy-plate small::before,.bfy-plate small::after{content:"";position:absolute;top:50%;width:calc(var(--w)*.065);height:1px;background:linear-gradient(90deg,transparent,var(--g))}
.bfy-plate small::before{right:0}.bfy-plate small::after{left:0;transform:scaleX(-1)}
.bfy.mini .bfy-hud,.bfy.mini .bfy-fly.f2,.bfy.mini .bfy-dust,.bfy.mini .bfy-lace{display:none}
.bfy.mini .bfy-fly.f1{width:calc(var(--w)*.34)}
html.lite .bfy:not(.big) *,html.lite .bfy:not(.big) *::before,html.lite .bfy:not(.big) *::after{animation:none!important}
html.lite .bfy:not(.big) .bfy-dust{display:none}
.bfy:not(.big) .bfy-tier{-webkit-backdrop-filter:none;backdrop-filter:none;background:color-mix(in srgb,var(--a2) 86%,#000)}
/* ⚡ light mode: a still card (colours and frame stay; nothing moves, no glow filters, no blending) */
html.lite .bfy:not(.big) .bfy-fly,html.lite .bfy:not(.big) .bfy-sheen{display:none}
html.lite .bfy:not(.big) .bfy-foil{mix-blend-mode:normal;opacity:.22}
html.lite .bfy:not(.big) .bfy-lace path,html.lite .bfy:not(.big) .bfy-lace circle,html.lite .bfy:not(.big) .bfy-plate b{filter:none;text-shadow:0 2px 4px #000}
html.lite .bfy:not(.big) .bfy-glow{opacity:.45}
@media (max-width:700px),(hover:none){.bfy:not(.big) .bfy-lace path,.bfy:not(.big) .bfy-lace circle{filter:none}}
@media (prefers-reduced-motion:reduce){.bfy *,.bfy *::before,.bfy *::after{animation:none!important}}

/* ---- the viewer / the opening: a night garden under the moon ---- */
.bfyv{--a:#ffd3ec;--a2:#3a1f45;--a3:#fff;position:fixed;inset:0;z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;touch-action:none;color:#fff;opacity:0;transition:opacity .4s,background .8s;
  background:radial-gradient(70% 55% at 50% 18%,color-mix(in srgb,var(--a) 22%,#1c0f2c) 0,#0f0819 55%,#06030b 100%)}
.bfyv.in{opacity:1}
.bfyv-moon{position:absolute;top:7%;left:50%;width:min(46vw,300px);aspect-ratio:1;margin-left:min(-23vw,-150px);border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 40% 38%,#fff 0,color-mix(in srgb,var(--a3) 80%,#fff) 30%,color-mix(in srgb,var(--a) 50%,transparent) 52%,transparent 70%);opacity:.5;transition:background .8s}
.bfyv-bk{position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(circle at 12% 72%,color-mix(in srgb,var(--a) 30%,transparent) 0 4%,transparent 9%),radial-gradient(circle at 86% 64%,color-mix(in srgb,var(--a3) 22%,transparent) 0 3%,transparent 8%),
  radial-gradient(circle at 74% 88%,color-mix(in srgb,var(--a) 26%,transparent) 0 5%,transparent 11%),radial-gradient(circle at 24% 26%,#ffffff12 0 2%,transparent 6%),radial-gradient(circle at 92% 22%,color-mix(in srgb,var(--a) 20%,transparent) 0 3%,transparent 7%)}
.bfyv-grass{position:absolute;left:-5%;right:-5%;bottom:-2%;height:22%;pointer-events:none;background:radial-gradient(60% 100% at 50% 100%,color-mix(in srgb,var(--a2) 80%,#000),transparent 70%)}
.bfyv canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3}
.bfyv.sum canvas{z-index:1}
.bfyv-flash{position:absolute;inset:0;z-index:6;background:radial-gradient(circle,#fff,color-mix(in srgb,var(--a3) 70%,transparent) 60%,transparent);opacity:0;pointer-events:none}
.bfyv-x{position:absolute;top:max(14px,env(safe-area-inset-top));left:14px;z-index:8;width:42px;height:42px;border-radius:50%;border:1px solid #ffffff30;background:#0008;color:#fff;font-size:18px;cursor:pointer}
.bfyv-all{position:absolute;top:max(18px,calc(env(safe-area-inset-top) + 4px));right:14px;z-index:8;border:1px solid #ffffff30;background:#0008;color:#fff;border-radius:99px;padding:8px 14px;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer}
.bfyv-stage{position:relative;z-index:2;display:grid;place-items:center}
.bfyv-hint{position:absolute;bottom:max(46px,calc(env(safe-area-inset-bottom) + 30px));left:0;right:0;z-index:5;text-align:center;font-size:14px;color:#f3e6ff;transition:opacity .3s;pointer-events:none}
.bfyv-hint b{display:block;margin-top:9px;letter-spacing:6px;font-size:12px;color:var(--a3)}
.bfyv-info{position:relative;z-index:5;margin-top:26px;text-align:center;max-width:360px;padding:0 16px}
.bfyv-info h3{margin:0;font:400 28px/1.3 Lalezar,var(--font,Vazirmatn,sans-serif);color:var(--a3);text-shadow:0 0 18px var(--a)}
.bfyv-info p{margin:6px 0 0;font-size:13px;opacity:.85;line-height:1.85}
.bfyv-act{display:flex;gap:8px;justify-content:center;margin-top:14px;flex-wrap:wrap}
.bfyv-btn{border:0;border-radius:14px;padding:11px 18px;font:inherit;font-weight:800;cursor:pointer;color:#2a0f2c;background:linear-gradient(135deg,#fff,#ffd3ec 45%,#c9b8ff);box-shadow:0 8px 26px color-mix(in srgb,var(--a) 50%,transparent)}
.bfyv-btn.ghost{background:#ffffff14;color:#fff;box-shadow:none;border:1px solid #ffffff2a}
.bfyv-title{position:absolute;z-index:5;top:11%;left:0;right:0;text-align:center;pointer-events:none}
.bfyv-title b{display:inline-block;font:400 clamp(36px,10vw,64px)/1.2 Lalezar,var(--font,Vazirmatn,sans-serif);color:var(--a3);text-shadow:0 0 22px var(--a),0 0 60px var(--a);animation:bfyTitle 1.4s cubic-bezier(.2,1.3,.3,1) both}
.bfyv-title small{display:block;font-size:14px;margin-top:4px;opacity:.9;animation:bfyTitle 1.4s .2s cubic-bezier(.2,1.3,.3,1) both}
@keyframes bfyTitle{0%{opacity:0;transform:translateY(16px) scale(.8);filter:blur(10px)}60%{opacity:1;filter:blur(0)}100%{transform:none}}
/* the chrysalis */
.bfyc{position:relative;width:min(40vw,170px);aspect-ratio:1/1.7;cursor:pointer;user-select:none;-webkit-user-select:none;animation:bfySway 3.4s ease-in-out infinite;transform-origin:50% -40%}
@keyframes bfySway{50%{transform:rotate(4deg)}}
.bfyc-th{position:absolute;left:50%;bottom:100%;width:1px;height:60vh;background:linear-gradient(#fff0,#ffffffa0)}
.bfyc-sh{position:absolute;inset:0;border-radius:50% 50% 46% 46%/34% 34% 66% 66%;overflow:hidden;
  background:radial-gradient(60% 40% at 38% 30%,#fff,transparent 60%),conic-gradient(from 200deg at 50% 60%,#ffe6f4,#c9b8ff,#a8f0ff,#fff2d6,#ffd3ec,#ffe6f4);
  box-shadow:inset 0 -18px 40px color-mix(in srgb,var(--a2) 60%,transparent),0 0 calc(30px + var(--p,0)*80px) color-mix(in srgb,var(--a) calc(40% + var(--p,0)*50%),transparent)}
.bfyc-sh::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(170deg,transparent 0 13px,#ffffff40 13px 14px);opacity:.6}
.bfyc-sh::after{content:"";position:absolute;inset:-30%;background:linear-gradient(110deg,transparent 42%,#ffffff70 50%,transparent 58%);animation:bfyShine 3s ease-in-out infinite}
@keyframes bfyShine{0%,40%{transform:translateX(-60%)}100%{transform:translateX(60%)}}
.bfyc-k{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.bfyc-k path{fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-dasharray:120;stroke-dashoffset:120;filter:drop-shadow(0 0 5px var(--a)) drop-shadow(0 0 10px #fff);transition:stroke-dashoffset .5s}
.bfyc.k1 .bfyc-k .p1,.bfyc.k2 .bfyc-k .p1,.bfyc.k2 .bfyc-k .p2,.bfyc.k3 .bfyc-k path{stroke-dashoffset:0}
.bfyc-glow{position:absolute;inset:18% 22%;border-radius:50%;background:radial-gradient(closest-side,#fff,color-mix(in srgb,var(--a) 70%,transparent),transparent);opacity:calc(.2 + var(--p,0)*.8);mix-blend-mode:screen}
.bfyc-wob{animation:bfyWob .45s cubic-bezier(.3,1.6,.4,1)}
@keyframes bfyWob{30%{transform:rotate(-9deg) scale(1.05)}60%{transform:rotate(7deg)}}
/* the card that the butterflies build */
.bfyr{position:relative}
.bfyr .bfy{opacity:0}
.bfyr.on .bfy{opacity:1}
.bfyr-wings{position:absolute;left:50%;top:50%;width:calc(var(--w)*2.6);aspect-ratio:100/84;margin:calc(var(--w)*-1.1) 0 0 calc(var(--w)*-1.3);z-index:-1;opacity:0;pointer-events:none;transform:scale(.4)}
.bfyr-wings .bfy-bf{filter:blur(1px) drop-shadow(0 0 30px var(--a))}
.bfyr-wings .bfy-w{opacity:.55}
.bfyr.rare .bfyr-wings{animation:bfyBig 1.6s cubic-bezier(.2,.9,.3,1) forwards}
.bfyr.rare .bfyr-wings .wR{animation:bfySlowR 2.4s ease-in-out 1.2s infinite alternate}
.bfyr.rare .bfyr-wings .wL{animation:bfySlowL 2.4s ease-in-out 1.2s infinite alternate}
@keyframes bfyBig{to{opacity:1;transform:none}}
@keyframes bfySlowR{to{transform:scaleX(.7)}}
@keyframes bfySlowL{to{transform:scaleX(-.7)}}
.bfyv-sum{position:relative;z-index:5;display:flex;gap:12px;flex-wrap:wrap;justify-content:center;max-width:min(94vw,820px);max-height:58vh;overflow-y:auto;padding:16px 8px;margin-top:6px;scrollbar-width:thin}
.bfyv-sum .bfy{--w:min(27vw,118px)}
.bfyv-sum > span{display:flex;flex-direction:column;align-items:center;gap:6px}

/* ---- the shop shelf (#parvaneh) ---- */
#parvaneh.sp-sec{padding:0;overflow:hidden;border:0;background:none}
.bfys{position:relative;border-radius:24px;overflow:hidden;padding:28px 22px 22px;color:#fff;display:grid;grid-template-columns:1.05fr 1fr;gap:18px;align-items:center;border:1px solid #ffffff14;
  background:radial-gradient(55% 60% at 22% 30%,#3a1d4f 0,transparent 70%),radial-gradient(50% 60% at 85% 85%,#1d2a55 0,transparent 70%),linear-gradient(160deg,#160b22,#0b0614 60%,#120a1c)}
.bfys::before{content:"";position:absolute;top:-80px;left:14%;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle at 40% 38%,#fff 0,#ffe6f4 22%,#ffd3ec55 46%,transparent 68%);opacity:.32;pointer-events:none}
.bfys-sky{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.bfys-sky .bfy-fly{position:absolute;animation:bfyDrift var(--d,16s) linear infinite;animation-delay:var(--dl,0s);opacity:.85}
@keyframes bfyDrift{0%{transform:translate(0,30px) rotate(10deg);opacity:0}10%{opacity:.85}50%{transform:translate(var(--dx,60px),-120px) rotate(-14deg)}90%{opacity:.85}100%{transform:translate(calc(var(--dx,60px)*-.4),-300px) rotate(8deg);opacity:0}}
.bfys-sky .bfy-fly .bw{animation:bfyFastR .36s ease-in-out infinite alternate}
.bfys-fan{position:relative;height:340px;display:grid;place-items:center}
.bfys-fan > span{position:absolute;transform:translateX(calc(var(--i)*56%)) rotate(calc(var(--i)*8deg)) translateY(calc(var(--i)*var(--i)*16px));z-index:calc(3 - var(--i)*var(--i))}
.bfys-fan > span:nth-child(2){z-index:4}
.bfys-fan .bfy{--w:168px}
.bfys-fan > span:nth-child(2) .bfy{--w:196px}
.bfys-tx{position:relative;z-index:2}
.bfys-new{display:inline-block;font-size:12px;font-weight:800;padding:4px 11px;border-radius:99px;background:linear-gradient(90deg,#fff,#ffd3ec,#c9b8ff);color:#2a0f2c}
.bfys-own{display:inline-block;margin-inline-start:6px;font-size:12px;padding:4px 10px;border-radius:99px;background:#ffffff14;color:#ffe6f4}
#parvaneh .bfys h2,#balbaz .bfys h2{margin:10px 0 6px;font:400 54px/1.15 Lalezar,var(--font,Vazirmatn,sans-serif);background:linear-gradient(100deg,#fff 10%,#ffd3ec 40%,#c9b8ff 70%,#a8f0ff);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 20px #ffb3dc55)}
.bfys p{margin:0;font-size:14px;line-height:1.95;color:#efe4f7}
.bfys-odds{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0}
.bfys-odds span{font-size:12px;padding:5px 11px;border-radius:99px;border:1px solid var(--a);color:var(--a3);background:color-mix(in srgb,var(--a2) 55%,#0008)}
.bfys-odds .t-pearl{--a:#ffd3ec;--a2:#3a1f45;--a3:#fff}.bfys-odds .t-lilac{--a:#b88cff;--a2:#21113f;--a3:#f1e6ff}.bfys-odds .t-ruby{--a:#ff3f72;--a2:#3b0618;--a3:#ffd7e1}
.bfys-odds .t-opal{--a:#7a5cff;--a2:#06040d;--a3:#a8f6ff;border-image:linear-gradient(90deg,#ff4fd8,#7a5cff,#22e6ff,#7dffb0) 1;border-radius:6px}
.bfys-buy{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.bfys-btn{flex:1 1 220px;border:0;border-radius:16px;padding:13px 14px;font:inherit;font-weight:900;font-size:16px;cursor:pointer;color:#2a0f2c;display:flex;flex-direction:column;align-items:center;gap:2px;
  background:linear-gradient(120deg,#fff 0,#ffd3ec 35%,#c9b8ff 70%,#a8f0ff);background-size:200% 100%;box-shadow:0 10px 30px #ff9fd855}
@keyframes bfyBtn{to{background-position:100% 0}}
.bfys-btn small{font-weight:700;font-size:12.5px;opacity:.85}
.bfys-btn.sm{background:#ffffff14;color:#fff;border:1px solid #ffd3ec55;animation:none}
.bfys-gift{flex:0 1 auto;border:1px solid #ffffff2a;border-radius:16px;padding:10px 16px;background:#ffffff10;color:#fff;font:inherit;font-weight:800;cursor:pointer}
.bfys-try{margin-top:10px;border:0;background:none;color:#ffd3ec;font:inherit;font-weight:800;cursor:pointer;padding:4px 0;text-decoration:underline;text-underline-offset:4px}
.bfys-note{margin-top:8px!important;font-size:12px!important;opacity:.75}
.bfys-roster{grid-column:1/-1;display:flex;gap:8px;overflow-x:auto;padding:6px 2px 2px;scrollbar-width:none;position:relative;z-index:2}
.bfys-roster::-webkit-scrollbar{display:none}
.bfys-roster button{flex:none;width:70px;border:0;background:none;color:#fff;font:inherit;cursor:pointer;text-align:center}
.bfys-roster i{display:block;width:60px;height:60px;margin:0 auto 4px;border-radius:50%;background:#1a1230 center/cover no-repeat;box-shadow:0 0 0 2px #fff,0 0 0 4px var(--c),0 0 18px color-mix(in srgb,var(--c) 60%,transparent)}
.bfys-roster small{font-size:11px;opacity:.88;display:block;line-height:1.4}
.bfys-mine{grid-column:1/-1;position:relative;z-index:2}
.bfys-mine h3{margin:8px 0 10px;font-size:16px;color:#ffe6f4}
.bfys-mine > div{display:flex;gap:18px;overflow-x:auto;padding:24px 18px 26px;scrollbar-width:thin}
.bfys-mine .bfy{--w:130px}
.bfy-duo > .sp-sec{container-type:inline-size}
.bfy-duo{margin-bottom:46px}.bfy-duo:not(:has(> .sp-sec:not([hidden]))){display:none}
.bfy-duo .bfys{height:100%;align-content:start}
@container (max-width:760px){
  .bfys{grid-template-columns:1fr;padding:20px 16px}
  .bfys-fan{height:270px}
  .bfys-fan .bfy{--w:128px}.bfys-fan > span:nth-child(2) .bfy{--w:150px}
  #parvaneh .bfys h2,#balbaz .bfys h2{font-size:44px}
}
html.lite .bfys-sky,html.lite .bfys::before{display:none}
html.lite .bfys-btn{animation:none}
/* showcase slot (profile, «بقیه‌ی کارت‌های ویژه») */
.vt-card.vt-bfy{aspect-ratio:5/7;perspective:none;container-type:inline-size;overflow:visible}.vt-card.vt-bfy .bfy{--w:100cqw}
.sxo-c .vt-card.vt-bfy{width:150px}
.lb-aprev .bfy{--w:130px}

/* ======================= ✨ «بال باز» (۶ آبان): the wide card ======================= */
.bfyw{--a:#ffd3ec;--a2:#2a1838;--a3:#fff;--px:0;--py:0;position:relative;display:block;width:100%;aspect-ratio:2.35/1;border-radius:16px;overflow:hidden;isolation:isolate;container-type:inline-size;background:var(--a2);cursor:pointer;color:#fff;text-align:right;
  box-shadow:0 22px 60px -28px var(--a),0 0 0 1px color-mix(in srgb,var(--a3) 22%,transparent);transition:box-shadow .3s,transform .3s}
.bfyw.t-lilac{--a:#b88cff;--a2:#160b2e;--a3:#f1e6ff}.bfyw.t-ruby{--a:#ff3f72;--a2:#26050f;--a3:#ffd7e1}.bfyw.t-opal{--a:#7a5cff;--a2:#05030b;--a3:#a8f6ff}
.bfyw[data-open]:hover{box-shadow:0 26px 70px -24px var(--a),0 0 0 1px color-mix(in srgb,var(--a3) 45%,transparent)}
.bfyw-pic{position:absolute;inset:-4%;z-index:0}
.bfyw-img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% var(--pos,30%);transform:translate(calc(var(--px) * -1.1cqw),calc(var(--py) * -.7cqw));transition:transform .5s ease-out}
.bfyw.on .bfyw-pic{animation:bfywKen 26s ease-in-out infinite alternate}
@keyframes bfywKen{from{transform:scale(1)}to{transform:scale(1.07) translateX(-1.6%)}}
.bfyw-veil{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(0deg,color-mix(in srgb,var(--a2) 90%,transparent) 0%,transparent 44%),radial-gradient(130% 100% at 50% 45%,transparent 52%,color-mix(in srgb,var(--a2) 80%,transparent) 100%),linear-gradient(90deg,color-mix(in srgb,var(--a) 34%,transparent),transparent 24%,transparent 76%,color-mix(in srgb,var(--a) 34%,transparent))}
.bfyw-irid{position:absolute;inset:0;z-index:1;pointer-events:none;display:none;mix-blend-mode:color-dodge;opacity:.2;background:linear-gradient(115deg,#ff4fd8,#7a5cff 22%,#22e6ff 44%,#7dffb0 64%,#ffd36e 84%,#ff4fd8)}
.bfyw.t-opal .bfyw-irid{display:block}
.bfyw.t-ruby .bfyw-irid{display:block;background-image:linear-gradient(115deg,#ff3f72,#ffc2d1 30%,#b01446 60%,#ff7aa0 85%,#ff3f72)}
/* ⚡ it breathes (opacity = GPU only); a sliding rainbow wider than the card made the browser paint new pieces every frame */
.bfyw.on .bfyw-irid{animation:bfywIrid 5s ease-in-out infinite alternate}
@keyframes bfywIrid{from{opacity:.1}to{opacity:.26}}
/* two giant wings growing from the edges; they breathe */
.bfyw-wing{position:absolute;top:50%;z-index:2;width:31cqw;height:44cqw;margin-top:-23cqw;pointer-events:none;mix-blend-mode:screen;opacity:.6;filter:drop-shadow(0 0 1.6cqw var(--a));translate:calc(var(--px) * 1.2cqw) calc(var(--py) * .8cqw);transition:translate .5s ease-out}
.bfyw-wing.l{left:-4cqw;transform-origin:0 50%}.bfyw-wing.r{right:-4cqw;transform-origin:100% 50%}
.bfyw-wing svg{display:block;width:100%;height:100%;overflow:visible}.bfyw-wing.r svg{transform:scaleX(-1)}
.bfyw-wing .bfy-w{fill:url(#bfyW-pearl);opacity:.92}
.bfyw.t-lilac .bfyw-wing .bfy-w{fill:url(#bfyW-lilac)}.bfyw.t-ruby .bfyw-wing .bfy-w{fill:url(#bfyW-ruby)}.bfyw.t-opal .bfyw-wing .bfy-w{fill:url(#bfyW-opal)}
.bfyw-wing .v{fill:none;stroke:#ffffffb0;stroke-width:.8}.bfyw-wing .e{fill:none;stroke:color-mix(in srgb,var(--a3) 70%,transparent);stroke-width:1.4;stroke-linecap:round}.bfyw-wing .s{fill:#fff}
.bfyw.on .bfyw-wing.l{animation:bfywBrL 4.6s ease-in-out infinite}.bfyw.on .bfyw-wing.r{animation:bfywBrR 4.6s ease-in-out infinite}
@keyframes bfywBrL{0%,100%{transform:scaleX(1) rotate(0)}50%{transform:scaleX(.74) rotate(-4deg)}}
@keyframes bfywBrR{0%,100%{transform:scaleX(1) rotate(0)}50%{transform:scaleX(.74) rotate(4deg)}}
.bfyw.unfold .bfyw-wing.l{animation:bfywUnL 1.6s cubic-bezier(.2,1.5,.35,1) both,bfywBrL 4.6s ease-in-out 1.6s infinite}
.bfyw.unfold .bfyw-wing.r{animation:bfywUnR 1.6s cubic-bezier(.2,1.5,.35,1) both,bfywBrR 4.6s ease-in-out 1.6s infinite}
@keyframes bfywUnL{0%{transform:scaleX(0) rotate(-30deg);opacity:0}40%{opacity:.9}100%{transform:none}}
@keyframes bfywUnR{0%{transform:scaleX(0) rotate(30deg);opacity:0}40%{opacity:.9}100%{transform:none}}
/* a flock crossing the card */
.bfyw-flock{position:absolute;inset:0;z-index:3;pointer-events:none}
.bfyw-f{position:absolute;top:var(--t);left:-14cqw;width:calc(var(--s) * 11cqw);aspect-ratio:1;opacity:0}
.bfyw-f>span{display:block;width:100%;height:100%;transform:rotate(84deg) rotateX(28deg)}
.bfyw.on .bfyw-f{animation:bfywCross var(--d) linear var(--dl) infinite}
.bfyw.on .bfyw-f>span{animation:bfywBob calc(var(--d) / 6) ease-in-out infinite alternate}
.bfyw.on .bfyw-f .bw{animation:bfywFlR .36s ease-in-out infinite alternate}
@keyframes bfywFlR{from{transform:scaleX(1)}to{transform:scaleX(.42)}}
@keyframes bfywCross{0%{transform:translateX(0);opacity:0}7%,90%{opacity:1}100%{transform:translateX(130cqw);opacity:0}}
@keyframes bfywBob{from{transform:rotate(70deg) translateX(-2.4cqw)}to{transform:rotate(100deg) translateX(2.4cqw)}}
.bfyw-dust{position:absolute;inset:0;z-index:3;pointer-events:none}
.bfyw-dust i{position:absolute;width:1cqw;aspect-ratio:1;background:var(--a3);clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);opacity:0}
.bfyw.on .bfyw-dust i{animation:bfyTw 3.2s ease-in-out infinite}
.bfyw-sweep{position:absolute;top:0;bottom:0;left:0;width:60cqw;z-index:4;pointer-events:none;mix-blend-mode:overlay;background:linear-gradient(105deg,transparent 20%,rgba(255,255,255,.34) 45%,rgba(255,255,255,.08) 55%,transparent 80%);transform:translateX(-62cqw)}
.bfyw.on .bfyw-sweep{animation:bfywSweep 7.5s ease-in-out infinite}
@keyframes bfywSweep{0%,52%{transform:translateX(102cqw)}100%{transform:translateX(-62cqw)}}
.bfyw-frame{position:absolute;inset:0;z-index:5;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--a3) 72%,transparent),inset 0 0 0 .7cqw color-mix(in srgb,var(--a2) 45%,transparent),inset 0 0 5cqw color-mix(in srgb,var(--a) 42%,transparent)}
.bfyw-lace{position:absolute;z-index:6;width:6cqw;height:6cqw;fill:none;stroke:var(--a3);stroke-width:1.6;stroke-linecap:round;opacity:.85;pointer-events:none;filter:drop-shadow(0 0 .5cqw var(--a))}
.bfyw-lace circle{fill:var(--a3);stroke:none}
.bfyw-lace.c1{top:.9cqw;right:.9cqw}.bfyw-lace.c2{top:.9cqw;left:.9cqw;transform:scaleX(-1)}.bfyw-lace.c3{bottom:.9cqw;right:.9cqw;transform:scaleY(-1)}.bfyw-lace.c4{bottom:.9cqw;left:.9cqw;transform:scale(-1)}
.bfyw-hud{position:absolute;top:2.4cqw;right:4.2cqw;z-index:7;display:flex;align-items:center;gap:.8cqw;direction:rtl}
.bfyw-tag,.bfyw-chip{display:inline-flex;align-items:center;gap:.5cqw;height:max(20px,3.8cqw);padding:0 max(7px,1.3cqw);border-radius:99px;font:800 clamp(9px,1.55cqw,14px)/1 Vazirmatn,sans-serif;color:#fff;white-space:nowrap;
  background:color-mix(in srgb,var(--a2) 62%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--a3) 38%,transparent)}
.bfyw-tag{color:var(--a2);background:linear-gradient(135deg,#fff,var(--a3) 40%,var(--a));box-shadow:0 0 1.6cqw color-mix(in srgb,var(--a) 70%,transparent)}
.bfyw-tag .bfy-bf{width:max(13px,2.4cqw);height:auto;aspect-ratio:100/84}
.bfyw-plate{position:absolute;right:3.4cqw;bottom:2.8cqw;z-index:7;max-width:58%;pointer-events:none}
.bfyw-plate b{display:block;font:400 clamp(17px,5.6cqw,50px)/1.12 Lalezar,Vazirmatn,sans-serif;color:#fff;text-shadow:0 .3cqw 1.4cqw #000b,0 0 2.6cqw var(--a);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.bfyw-plate b::after{content:"";display:block;height:2px;width:62%;margin:.7cqw 0 .5cqw auto;background:linear-gradient(270deg,var(--a3),transparent)}
.bfyw-plate small{display:block;font:700 clamp(9px,1.7cqw,15px) Vazirmatn,sans-serif;color:var(--a3);opacity:.9}
.bfyw .bfy-none{position:absolute;inset:0;background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--a) 40%,transparent),var(--a2))}
@media (hover:none),(max-width:700px){.bfyw-wing{filter:none;opacity:.55}.bfyw-lace{filter:none}}
.bfyw.still *,.bfyw.still *::before,.bfyw.still *::after{animation:none!important}
.bfyw.still .bfyw-sweep{display:none}.bfyw.still .bfyw-wing{filter:none}
/* ⚡ light mode: a still wide card (the wings stay open, the light stays; nothing moves). The viewer and the opening keep their life */
html.lite .bfyw:not(.big) .bfyw-flock,html.lite .bfyw:not(.big) .bfyw-dust,html.lite .bfyw:not(.big) .bfyw-sweep{display:none}
html.lite .bfyw:not(.big) *,html.lite .bfyw:not(.big) *::before,html.lite .bfyw:not(.big) *::after{animation:none!important}
html.lite .bfyw:not(.big) .bfyw-wing,html.lite .bfyw:not(.big) .bfyw-lace,html.lite .bfyw:not(.big) .bfyw-tag{filter:none;box-shadow:none}
html.lite .bfyw:not(.big) .bfyw-irid{mix-blend-mode:normal;opacity:.08}
@media (prefers-reduced-motion:reduce){.bfyw *,.bfyw *::before,.bfyw *::after{animation:none!important}.bfyw-flock{display:none}}
/* the viewer and the opening */
.bfyw-stage{width:min(94vw,980px)}
.bfyv.dark{background:radial-gradient(70% 60% at 50% 45%,color-mix(in srgb,var(--a) 22%,#05030b),#020107)!important}
.bfywr{position:relative;z-index:2}
.bfyv-title.w b{font-size:clamp(40px,11vw,76px)}
.bfyw-hk{display:inline!important;margin:0 4px!important;letter-spacing:0!important;font-size:inherit!important;color:var(--a3)}
.bfyv-wsum{position:relative;z-index:5;width:min(92vw,640px);display:flex;flex-direction:column;align-items:center;gap:8px;margin:4px auto 6px}
.bfyv-btn.sm{padding:8px 14px;font-size:13px}
/* the shop block */
.bfyws{grid-column:1/-1;position:relative;z-index:2;margin-top:12px;padding:20px 18px;border-radius:22px;background:linear-gradient(160deg,#ffffff10,#ffffff05);box-shadow:inset 0 0 0 1px #ffd3ec33,0 30px 70px -40px #b88cff;display:grid;gap:14px}
.bfyws-tx h3{margin:6px 0 4px;font:400 40px/1.15 Lalezar,var(--font,Vazirmatn,sans-serif);background:linear-gradient(100deg,#fff,#ffd3ec 35%,#a8f0ff 70%,#c9b8ff);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 16px #b88cff66)}
.bfyws-tx p{font-size:13.5px!important}
.bfyws-stage{width:100%;max-width:760px;margin:0 auto}
.bfyws-pick{display:flex;gap:8px;overflow-x:auto;padding:4px 2px;scrollbar-width:none}.bfyws-pick::-webkit-scrollbar{display:none}
.bfyws-pick button{flex:none;width:68px;border:0;background:none;color:#fff;font:inherit;cursor:pointer;text-align:center;opacity:.72;transition:opacity .2s,transform .2s}
.bfyws-pick button[aria-checked=true]{opacity:1;transform:translateY(-2px)}
.bfyws-pick i{display:block;width:62px;height:40px;margin:0 auto 4px;border-radius:10px;background:#1a1230 center/cover no-repeat;box-shadow:0 0 0 1.5px #ffffff55}
.bfyws-pick button[aria-checked=true] i{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--c),0 0 16px color-mix(in srgb,var(--c) 60%,transparent)}
.bfyws-pick small{font-size:11px;display:block;line-height:1.4}
.bfyws-mine{display:grid;gap:10px}.bfyws-mine h4{margin:4px 0 0;font-size:15px}
.bfyws-one{display:grid;gap:6px;justify-items:start;max-width:640px}
.bfyws-in{font-size:12.5px;color:#a8f0ff}
@media (max-width:640px){.bfyws{padding:16px 12px}.bfyws-tx h3{font-size:34px}}
/* «بال باز» shelf (#balbaz) */
#balbaz.sp-sec{padding:0;overflow:hidden;border:0;background:none}
.bfys.w{grid-template-columns:minmax(0,1fr);gap:14px}
.bfys.w .bfyws-stage{max-width:none}
.bfyws-mine h3{margin:4px 0 10px;font-size:16px;color:#ffe6f4}
.bfyws-rail{display:flex;gap:10px;overflow-x:auto;padding:2px 2px 8px;scrollbar-width:thin}
.bfyws-th{flex:none;width:188px;display:grid;gap:6px;justify-items:stretch;--a:#ffd3ec}
.bfyws-th.t-lilac{--a:#b88cff}.bfyws-th.t-ruby{--a:#ff3f72}.bfyws-th.t-opal{--a:#7a5cff}
.bfyws-pv{position:relative;aspect-ratio:2.35/1;border:0;border-radius:12px;padding:0;overflow:hidden;cursor:pointer;color:#fff;font:inherit;text-align:right;background:#1a1230 center/cover no-repeat;box-shadow:0 0 0 1.5px var(--a),0 8px 22px -12px var(--a)}
.bfyws-pv::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#000c,transparent 62%)}
.bfyws-pv b,.bfyws-pv small{position:absolute;right:9px;z-index:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 18px)}
.bfyws-pv b{bottom:20px;font:400 17px/1.2 Lalezar,Vazirmatn,sans-serif}.bfyws-pv small{bottom:6px;font-size:11px;opacity:.9}
.bfyws-th .bfyws-in,.bfyws-slot{font-size:12px;text-align:center}
.bfyws-slot{border:1px solid #ffffff2a;border-radius:10px;padding:6px 8px;background:#ffffff10;color:#fff;font:inherit;font-size:12px;font-weight:700;cursor:pointer}
.bfyv-sum[hidden]{display:none}
/* 🐞 (۷ آبان، مالک: «کارتای بال باز افقی‌ان ولی اسکرول نمی‌شه، فقط ۳ تا دیده می‌شه») the summary is one scrolling column: every card can be reached,
   short lists stay centred (auto margins), the ✕ never covers the top */
.bfyv.sum{justify-content:flex-start;touch-action:auto}
.bfyv.sum .bfyv-stage{display:flex;flex-direction:column;align-items:center;width:100%;height:100%;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:max(66px,calc(env(safe-area-inset-top) + 58px)) 12px max(28px,calc(env(safe-area-inset-bottom) + 20px));box-sizing:border-box;scrollbar-width:thin}
.bfyv.sum .bfyv-stage>*{flex-shrink:0}.bfyv.sum .bfyv-stage::before,.bfyv.sum .bfyv-stage::after{content:"";flex:1 0 0}
.bfyv.sum .bfyv-sum{max-height:none;overflow:visible}
.bfyv.sum .bfyv-wsum{flex:none}