/* ═══════════════════════════════════════════════════════════════════════════
 *  v238 · کارت کاربر در لایو — «صحنهٔ پرستیژ» (VIP) و «همدم» (دونفره)
 * ═══════════════════════════════════════════════════════════════════════════ */
#uc145.vc238{ overflow-y:auto; overscroll-behavior:contain; align-items:flex-end }
#uc145.vc238 .uc145-s{ overflow:visible; max-height:none; margin-top:160px;
  background:
    radial-gradient(90% 38% at 50% 0%, color-mix(in srgb,var(--vc) 38%,transparent), transparent 70%),
    radial-gradient(80% 50% at 0% 30%, color-mix(in srgb,var(--va) 55%,transparent), transparent 70%),
    radial-gradient(80% 50% at 100% 40%, color-mix(in srgb,var(--vb) 60%,transparent), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb,var(--va) 55%,#1a0b36) 0%, color-mix(in srgb,var(--vb) 55%,#150a2e) 45%, #120826 100%) }
#uc145.vc238.vbg238 .uc145-s{ background:linear-gradient(180deg,rgba(14,6,30,.15),rgba(14,6,30,.6) 55%,rgba(14,6,30,.88)), var(--vbg) center top/cover no-repeat, #150a2e }
#uc145.vc238 .uc145-hero{ height:0; background:none !important; box-shadow:none !important; overflow:visible }
#uc145.vc238 .uc145-hero > .bl145, #uc145.vc238 .uc145-hero > .gr145, #uc145.vc238 .uc145-hero > .fm145{ display:none }
#uc145.vc238 .uc145-hero > .hd145{ top:6px; z-index:7 }
#uc145.vc238 .uc145-hero > .lv145{ top:10px; z-index:7 }
#uc145.vc238 .uc145-hero > .pst-emb227{ display:none }
#uc145.vc238 .uc145-av{ display:none }
#uc145.vc238 .uc145-b{ position:relative; z-index:3 }
#uc145.vc238 .nm145 b{ font-size:21px; text-shadow:0 2px 10px rgba(0,0,0,.45) }

/* ذره‌های نور */
.vcp238{ position:absolute; inset:0; z-index:0; overflow:hidden; border-radius:inherit; pointer-events:none }
.vcp238 b{ position:absolute; width:6px; height:6px; background:var(--vc); opacity:0; animation:vcp238 4.5s ease-in-out infinite;
  clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%); filter:drop-shadow(0 0 5px var(--vc)) }
.vcp238 b:nth-child(1){ left:8%; top:12% } .vcp238 b:nth-child(2){ left:86%; top:9%; animation-delay:.7s; width:9px; height:9px }
.vcp238 b:nth-child(3){ left:20%; top:40%; animation-delay:1.4s } .vcp238 b:nth-child(4){ left:78%; top:36%; animation-delay:2.1s; width:5px; height:5px }
.vcp238 b:nth-child(5){ left:44%; top:62%; animation-delay:2.8s } .vcp238 b:nth-child(6){ left:92%; top:70%; animation-delay:.3s; width:8px; height:8px }
.vcp238 b:nth-child(7){ left:6%; top:82%; animation-delay:1.9s } .vcp238 b:nth-child(8){ left:60%; top:20%; animation-delay:3.4s; width:4px; height:4px }
@keyframes vcp238{ 0%,100%{ opacity:0; transform:scale(.3) rotate(0) } 50%{ opacity:1; transform:scale(1) rotate(45deg) } }

/* قاب تزئینی لبه‌ها (پیش‌فرض: کریستال طلایی؛ یا عکس/SVGA از پنل) */
.vcf238{ position:absolute; inset:0; z-index:4; pointer-events:none; border-radius:28px 28px 0 0 }
.vcf238:not(.im):not(.fx){ padding:2px; background:linear-gradient(135deg,#fff8d6,var(--vc),var(--va),#e0f7ff,var(--vc),#fff8d6);
  -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);
  box-shadow:0 0 18px -2px color-mix(in srgb,var(--vc) 70%,transparent) }
.vcf238.im{ background-size:100% 100%; background-repeat:no-repeat }
.vcf238 .k{ position:absolute; width:16px; height:16px; background:linear-gradient(135deg,#fff,var(--vc) 45%,var(--va)); clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
  filter:drop-shadow(0 0 6px var(--vc)); -webkit-mask:none; mask:none }
.vcf238 .k.tl{ top:-6px; left:-6px } .vcf238 .k.tr{ top:-6px; right:-6px } .vcf238 .k.bl{ bottom:40%; left:-6px } .vcf238 .k.br{ bottom:40%; right:-6px }

/* صحنه: آواتار(ها) با تاج بال‌دار که از بالای کارت بیرون می‌زند */
.vcs238{ position:relative; z-index:5; height:205px; margin-top:-148px; display:flex; justify-content:center; align-items:flex-end; gap:4px; pointer-events:none }
.vca238{ position:relative; display:block; pointer-events:auto }
.vca238.one{ width:280px; aspect-ratio:300 / 220 }
.vcc238{ position:absolute; inset:0; display:block; z-index:2; pointer-events:none }
.vcc238 .crs238{ width:100%; height:100%; display:block; overflow:visible }
.vcc238 img.crs238{ object-fit:contain }
.crh238{ animation:crh238 3s ease-in-out infinite; transform-origin:150px 110px; transform-box:view-box }
@keyframes crh238{ 50%{ opacity:.45; transform:scale(1.06) } }
.crs238-sp > *{ animation:vcp238 3s ease-in-out infinite } .crs238-sp > :nth-child(2n){ animation-delay:1.2s }
.vcv238{ position:absolute; z-index:1; left:50%; top:50%; width:37.5%; aspect-ratio:1; transform:translate(-50%,-50%); border-radius:50%; overflow:hidden; background:linear-gradient(135deg,var(--va),var(--vb)) }
.vcv238 img, .vcv238 em, .vcv238 > div.flex{ width:100%; height:100%; object-fit:cover; display:grid; place-items:center; font-style:normal; font-size:36px; font-weight:900; color:#fff; border-radius:50% }
.vcd238{ position:absolute; z-index:3; left:62%; top:66%; width:14px; height:14px; border-radius:50%; background:#22C55E; border:3px solid #1D0F3C }
/* دونفره */
.vcs238.duo{ gap:0; align-items:center; margin-top:-78px; height:140px }
.vcs238.duo .vca238{ width:150px; aspect-ratio:300 / 220 }
.vcs238.duo .vca238 > em{ position:absolute; left:0; right:0; bottom:-18px; text-align:center; font-style:normal; font-size:11.5px; font-weight:900; color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.6); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.vcs238.duo .vca238.b{ cursor:pointer }
.vcs238.duo .vcv238{ width:37%; }
#uc145.novip .vcs238.duo .vca238 .vcv238{ box-shadow:0 0 0 3px #fff, 0 0 0 6px #ff8fb8 }
.vch238{ position:relative; z-index:6; flex:none; width:54px; height:54px; margin:0 -14px; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#fff; pointer-events:none }
.vch238 svg{ position:absolute; inset:0; width:100%; height:100%; color:#ff3d77; filter:drop-shadow(0 4px 10px rgba(255,61,119,.8)); animation:vch238 1.4s ease-in-out infinite }
.vch238 b{ position:relative; font-size:14px; font-weight:900; line-height:1; margin-top:-4px }
.vch238 small{ position:relative; font-size:8px; font-weight:800 }
@keyframes vch238{ 0%,100%{ transform:scale(1) } 15%{ transform:scale(1.14) } 30%{ transform:scale(.98) } 45%{ transform:scale(1.08) } }

/* زبانه‌های کناری */
.vct238{ position:absolute; z-index:6; top:-48px; inset-inline-end:0; display:flex; flex-direction:column; gap:6px }
.vct238 button{ display:flex; align-items:center; gap:4px; height:30px; padding:0 10px 0 4px; border:0; border-radius:99px 0 0 99px; cursor:pointer; font:inherit; font-size:11px; font-weight:900; color:#fff;
  background:linear-gradient(90deg,color-mix(in srgb,var(--va) 80%,#fff),var(--vb)); box-shadow:0 6px 14px -8px rgba(0,0,0,.6) }
[dir=ltr] .vct238 button{ border-radius:0 99px 99px 0 }
.vct238 button + button{ background:linear-gradient(90deg,#6ee7b7,#047857) }
.vct238 i{ width:26px; height:26px; display:grid; place-items:center } .vct238 i svg{ width:22px; height:22px }
@media (prefers-reduced-motion:reduce){ .vcp238 b, .crh238, .vch238 svg, .crs238-sp > *{ animation:none } }
/* دونفره: آواتارها کامل بالای کارت، نام همدم داخل کارت، زبانه‌ها سمت دیگر */
#uc145.vc238.duo .uc145-s{ margin-top:150px }
.vcs238.duo{ margin-top:-112px; height:150px }
.vcs238.duo .vca238{ width:168px }
#uc145.duo .vct238{ top:14px; inset-inline-end:auto; inset-inline-start:0 }
#uc145.duo .vct238 button{ border-radius:0 99px 99px 0; padding:0 4px 0 10px; flex-direction:row-reverse }
[dir=ltr]#uc145.duo .vct238 button{ border-radius:99px 0 0 99px }
/* v287 · قاب تزئینی SVGA کارت (مثل profile-card بسته‌های VIP): نوار تزئینی بالای کارت، نه وسط آن */
.vcf238.fx{ inset:-10px -6px auto -6px; height:auto; aspect-ratio:750 / 512; z-index:4; border-radius:0 }
.vcf238.fx .ha-fxc{ inset:0 }
/* انیمیشن نام سطح، پشت نام */
#uc145 .nm145{ position:relative }
.nfx287{ position:absolute; left:50%; top:50%; width:min(300px, 92%); aspect-ratio:750 / 246; transform:translate(-50%,-50%); z-index:0; pointer-events:none }
.nfx287 + b, #uc145 .nm145 > :not(.nfx287){ position:relative; z-index:1 }
/* قاب VIP به‌جای تاج کارت: هم‌مرکز آواتار، ۱٫۶ برابر آن */
.vfr287{ position:absolute; left:50%; top:50%; width:60%; aspect-ratio:1; transform:translate(-50%,-50%); display:block }
.vfr287 img{ width:100%; height:100%; object-fit:contain; display:block }
/* تزئین SVGA کارت پشت نوشته‌ها */
.vcf238.fx{ z-index:1 }
/* v295 · تزئین SVGA کارت دقیقاً روی لبهٔ بالای کارت (نه وسط نشان‌ها)؛ درصد margin نسبت به عرض کارت است */
#uc145 .vcf238.fx{ top:0; bottom:auto; left:-4%; right:-4%; width:auto; margin-top:-7%; z-index:2; pointer-events:none }
#uc145 .vcf238.fx.t3{ margin-top:-25% }
#uc145.vc238 .uc145-b{ position:relative; z-index:3 }
/* استودیو: نشان کوچک وسط کارت حذف وقتی کارت «استودیو» پایین هست (تکراری نباشد) */
#uc145:has(.cd145.stc229) .uc145-b > .stb229{ display:none !important }
/* v296 · VIP 3: فایل تزئین ۷۵۰×۴۰۰ است و خط طلایی‌اش ~۵۵٪ ارتفاع — دقیقاً روی لبهٔ بالای کارت، زیر قاب */
#uc145 .vcf238.fx.t3{ aspect-ratio:750 / 400; margin-top:-31.5% }
/* v297 · تزئین VIP هم‌عرض دقیق کارت و یکی با لبه: گوشه‌های بالای کارت صاف می‌شوند تا خط صاف طلایی با لبه ادغام شود */
#uc145 .vcf238.fx{ left:0; right:0 }
#uc145 .vcf238.fx.t3{ margin-top:-28.2% }
#uc145.vc238:has(.vcf238.fx) .uc145-s{ border-top-left-radius:6px !important; border-top-right-radius:6px !important }
#uc145.vc238:has(.vcf238.fx) .vcf238:not(.fx){ border-radius:6px 6px 0 0 }
/* v299 · پوستر ثابت تزئین کارت تا بار شدن SVGA */
#uc145 .vcf238.fx:not(.ha-fxon){background:var(--pst) center/100% 100% no-repeat}
/* v302 · تزئین کارت VIP 1 (SVGA ۱۰۸۰×۴۸۰): خط طلایی دقیقاً روی لبهٔ بالای کارت */
#uc145 .vcf238.fx.t1{ aspect-ratio:1080 / 480; margin-top:-22% }