/* v172 · PK حرفه‌ای — ظاهر (منطق در 128-pk.js) */

/* ═══ معرفی سینمایی ═══ */
#vs172{ position:absolute; inset:0; z-index:40; overflow:hidden; pointer-events:none; direction:ltr; font-family:system-ui,-apple-system,"Vazirmatn",sans-serif }
.vs172-bg{ position:absolute; inset:0; background:radial-gradient(circle at 50% 50%, rgba(20,8,40,.55), rgba(5,2,12,.92)); animation:vs172f .35s ease both }
@keyframes vs172f{ from{ opacity:0 } }
.vs172-p{ position:absolute; top:0; bottom:0; width:62%; display:flex; align-items:center; overflow:hidden }
.vs172-p.l{ left:0; justify-content:flex-start; align-items:flex-start; padding-top:20vh; clip-path:polygon(0 0,100% 0,72% 100%,0 100%); animation:vs172l .55s cubic-bezier(.2,1.2,.3,1) both }
.vs172-p.r{ right:0; justify-content:flex-end; align-items:flex-end; padding-bottom:24vh; clip-path:polygon(28% 0,100% 0,100% 100%,0 100%); animation:vs172r .55s .08s cubic-bezier(.2,1.2,.3,1) both }
.vs172-p.me{ background:linear-gradient(135deg,#FF2D6F 0%,#C026D3 60%,rgba(124,58,237,.45) 100%) }
.vs172-p.op{ background:linear-gradient(315deg,#2F7BFF 0%,#06B6D4 55%,rgba(56,189,248,.45) 100%) }
.vs172-p.r.me{ background:linear-gradient(315deg,#FF2D6F 0%,#C026D3 60%,rgba(124,58,237,.45) 100%) }
.vs172-p.l.op{ background:linear-gradient(135deg,#2F7BFF 0%,#06B6D4 55%,rgba(56,189,248,.45) 100%) }
.vs172-p{ box-sizing:border-box }
.vs172-p::after{ content:""; position:absolute; inset:0; opacity:.22; background:repeating-linear-gradient(115deg, rgba(255,255,255,.5) 0 2px, transparent 2px 14px); mix-blend-mode:overlay }
@keyframes vs172l{ from{ transform:translateX(-105%) } }
@keyframes vs172r{ from{ transform:translateX(105%) } }
.vs172-in{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:10px; width:52%; animation:vs172i .5s .45s cubic-bezier(.2,1.4,.3,1) both }
.vs172-p.l .vs172-in{ margin-left:3% } .vs172-p.r .vs172-in{ margin-right:3% }
@keyframes vs172i{ from{ transform:scale(.4); opacity:0 } }
.vs172-a{ position:relative; width:96px; height:96px; border-radius:50%; overflow:hidden; display:grid; place-items:center; background:rgba(255,255,255,.2);
  box-shadow:0 0 0 4px #fff, 0 0 0 8px rgba(255,255,255,.25), 0 16px 34px rgba(0,0,0,.45) }
.vs172-a b{ font-size:38px; font-weight:900; color:#fff }
.vs172-a img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.vs172-in > b{ max-width:100%; padding:4px 12px; border-radius:99px; font-size:15px; font-weight:900; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; background:rgba(0,0,0,.28); text-shadow:0 2px 8px rgba(0,0,0,.4) }
.vs172-c{ position:absolute; left:50%; top:50%; width:150px; height:150px; margin:-75px 0 0 -75px; display:flex; align-items:center; justify-content:center; z-index:5 }
.vs172-v, .vs172-s{ position:relative; z-index:3; font:italic 900 84px/1 system-ui,-apple-system,sans-serif; letter-spacing:-4px;
  background:linear-gradient(180deg,#FFFFFF 0%,#FDE68A 45%,#F59E0B 60%,#FFF7D6 100%); -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 4px 0 #7C2D12) drop-shadow(0 0 22px rgba(253,224,71,.8)) }
.vs172-v{ animation:vs172v .45s .7s cubic-bezier(.2,1.6,.3,1) both } .vs172-s{ animation:vs172s .45s .78s cubic-bezier(.2,1.6,.3,1) both }
@keyframes vs172v{ from{ transform:translate(-160px,-120px) scale(2.2) rotate(-25deg); opacity:0 } }
@keyframes vs172s{ from{ transform:translate(160px,120px) scale(2.2) rotate(25deg); opacity:0 } }
.vs172-bolt{ position:absolute; z-index:2; width:130px; height:130px; color:#FDE047; filter:drop-shadow(0 0 20px #FDE047) drop-shadow(0 0 40px #F97316); animation:vs172b .5s 1s cubic-bezier(.2,1.6,.3,1) both, vs172fl 1.2s 1.5s ease-in-out infinite }
.vs172-bolt svg{ width:100%; height:100%; opacity:.9 }
@keyframes vs172b{ from{ transform:scale(0) rotate(-60deg) } }
@keyframes vs172fl{ 50%{ opacity:.55; transform:scale(1.06) } }
.vs172-ring{ position:absolute; inset:0; border-radius:50%; border:4px solid rgba(253,224,71,.9); opacity:0; animation:vs172w 1s 1s ease-out both }
.vs172-ring.d2{ animation-delay:1.25s; border-color:rgba(255,255,255,.8) }
@keyframes vs172w{ 0%{ transform:scale(.3); opacity:1 } 100%{ transform:scale(2.6); opacity:0 } }
.vs172-n{ position:absolute; left:0; right:0; top:6%; text-align:center; z-index:6; font:italic 900 74px/1 system-ui,-apple-system,sans-serif; color:#fff; opacity:0;
  text-shadow:0 0 26px rgba(255,45,111,.95), 0 5px 0 #7C3AED }
.vs172-n.on{ animation:vs172n .6s cubic-bezier(.2,1.5,.3,1) both }
.vs172-n.f{ font-size:64px; letter-spacing:3px; background:linear-gradient(90deg,#FF2D6F,#FDE047,#38BDF8); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:none; filter:drop-shadow(0 0 20px rgba(253,224,71,.8)) }
@keyframes vs172n{ 0%{ transform:scale(2.6); opacity:0 } 40%{ transform:scale(1); opacity:1 } 100%{ transform:scale(.9); opacity:1 } }
.vs172-t{ position:absolute; left:0; right:0; bottom:7%; margin:0; text-align:center; z-index:6; font-size:12.5px; font-weight:800; color:rgba(255,255,255,.85); direction:rtl; animation:vs172f .4s 1.2s both }
#vs172.out{ animation:vs172o .5s ease both }
@keyframes vs172o{ to{ opacity:0; transform:scale(1.08) } }

/* ═══ صحنهٔ نبرد ═══ */
#liveRoom49.pk172 .pk-time{ visibility:hidden; width:0; min-width:0; padding:0; border:0 }
#liveRoom49.pk172 .pk-logo{ padding:4px 12px; border-radius:12px; font-size:14px; box-shadow:0 0 0 1.5px rgba(255,255,255,.35), 0 6px 18px rgba(124,58,237,.6) }
#liveRoom49.pk172 .pk-panes::after{ width:3px; margin-left:-1.5px; background:linear-gradient(transparent, #FDE047 30%, #fff 50%, #FDE047 70%, transparent); box-shadow:0 0 14px #FDE047; animation:pkln172 1.4s ease-in-out infinite }
@keyframes pkln172{ 50%{ opacity:.55 } }
#liveRoom49.pk172 .pk-me::after, #liveRoom49.pk172 .pk-opp::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:40%; z-index:2; pointer-events:none }
#liveRoom49.pk172 .pk-me::after{ background:linear-gradient(0deg, rgba(255,45,111,.45), transparent) }
#liveRoom49.pk172 .pk-opp::after{ background:linear-gradient(0deg, rgba(47,123,255,.45), transparent) }

/* مدال VS */
.pkvs172{ position:absolute; left:50%; top:calc(var(--pkT) + var(--pkH) - 30px); width:58px; height:58px; margin-left:-29px; z-index:9; display:grid; place-items:center; pointer-events:none }
.pkvs172{ isolation:isolate }
.pkvs172 i{ position:absolute; inset:-3px; z-index:-2; border-radius:50%; background:conic-gradient(from var(--vr,0deg),#FF2D6F,#FDE047,#38BDF8,#A855F7,#FF2D6F); box-shadow:0 0 16px rgba(253,224,71,.5); animation:vr172 2.4s linear infinite }
@property --vr{ syntax:"<angle>"; inherits:false; initial-value:0deg }
@keyframes vr172{ to{ --vr:360deg } }
.pkvs172::before{ content:""; position:absolute; inset:0; z-index:-1; border-radius:50%; background:radial-gradient(circle at 35% 30%, #3B2A63, #120A24 70%); box-shadow:inset 0 2px 6px rgba(255,255,255,.25), 0 8px 20px rgba(0,0,0,.5) }
.pkvs172 b{ position:relative; font:italic 900 24px/1 system-ui,-apple-system,sans-serif; letter-spacing:-1px;
  background:linear-gradient(180deg,#FFFFFF,#FDE68A 50%,#F59E0B); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 0 8px rgba(253,224,71,.7)) }

/* نوار امتیاز */
#liveRoom49.pk172 .pk-bar{ height:30px; top:calc(var(--pkT) + var(--pkH)); box-shadow:0 6px 16px rgba(0,0,0,.35) }
#liveRoom49.pk172 .pk-bar i{ font-size:14px; overflow:visible }
#liveRoom49.pk172 .pk-bar i::before{ content:""; position:absolute; left:0; right:0; top:0; height:45%; background:linear-gradient(180deg, rgba(255,255,255,.35), transparent); pointer-events:none }
#liveRoom49.pk172 .pk-bar .m{ background:linear-gradient(90deg,#FF2D6F,#FF5E8A 60%,#FF8A3D) }
#liveRoom49.pk172 .pk-bar .o{ background:linear-gradient(90deg,#22D3EE,#3B82F6 40%,#2F5BFF) }
[dir="rtl"] #liveRoom49.pk172 .pk-bar .m, #liveRoom49.pk172[dir="rtl"] .pk-bar .m{ background:linear-gradient(270deg,#FF2D6F,#FF5E8A 60%,#FF8A3D) }
#liveRoom49.pk172 .pk-bar .m{ padding-inline-start:4px; gap:6px } #liveRoom49.pk172 .pk-bar .o{ padding-inline-end:4px; gap:6px }
.pka172{ position:relative; flex:none; width:24px; height:24px; border-radius:50%; overflow:hidden; display:grid; place-items:center; background:rgba(255,255,255,.3); box-shadow:0 0 0 2px #fff; font-style:normal }
.pka172 b{ font-size:11px; font-weight:900; color:#fff } .pka172 img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
#liveRoom49.pk172 .pk-spark{ width:34px; height:34px; margin-top:-17px; margin-inline-start:-17px }

/* تایمر (v173): زبانهٔ کوچک زیر تصویرها، زیر نوار امتیاز */
.pkt172{ position:absolute; left:50%; top:calc(var(--pkT) + var(--pkH) + 30px); transform:translateX(-50%); z-index:9; display:flex; align-items:center; gap:6px; height:34px; padding:0 14px 0 10px;
  border:0; border-radius:0 0 14px 14px; cursor:pointer; overflow:hidden; direction:ltr; color:#fff;
  background:linear-gradient(180deg, rgba(20,14,32,.92), rgba(12,8,22,.92)); box-shadow:0 8px 18px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.1);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px) }
.pkt172 .gl{ width:30px; height:18px; flex:none; filter:drop-shadow(0 1px 2px rgba(0,0,0,.4)) }
.pkt172 .tm{ font:800 18px/1 ui-rounded,"SF Pro Rounded",system-ui,-apple-system,sans-serif; letter-spacing:.8px; font-variant-numeric:tabular-nums }
.pkt172 .pr{ position:absolute; left:0; right:0; bottom:0; height:2.5px; transform-origin:left center; background:linear-gradient(90deg,#FF2D6F,#A855F7,#22D3EE); transition:transform .3s linear }
.pkt172.hot .tm{ color:#FDA4AF }
.pkt172.hot .pr{ background:#FB7185 }
.pkt172.crit{ background:linear-gradient(180deg,#9F1239,#4C0519); animation:pkt172s .5s ease-in-out infinite }
.pkt172.crit .pr{ background:#fff }
@keyframes pkt172s{ 50%{ transform:translateX(-50%) scale(1.08) } }
.pkt172.end .tm{ color:#FDE68A; font-size:16px }
.pkt172.end .pr{ background:#F59E0B }
/* حامیان کنار تایمر */
#liveRoom49.pk172 .pk-tops{ top:calc(var(--pkT) + var(--pkH) + 34px) }
#liveRoom49.pk172 .pk-tops .m, #liveRoom49.pk172 .pk-tops .o{ max-width:calc(50% - 86px); overflow:hidden }
#liveRoom49.pk172 .pk-pun{ display:none }
/* ۱۰ ثانیهٔ آخر */
.pkvg172{ position:absolute; inset:0; z-index:5; pointer-events:none; opacity:0; transition:opacity .3s }
#liveRoom49.pkcrit172 .pkvg172{ opacity:1; box-shadow:inset 0 0 70px 10px rgba(244,63,94,.55); animation:pkvg172 1s ease-in-out infinite }
@keyframes pkvg172{ 50%{ box-shadow:inset 0 0 40px 4px rgba(244,63,94,.3) } }
#liveRoom49.pk172 .pk-count{ font-size:110px; background:linear-gradient(180deg,#fff,#FECDD3 60%,#F43F5E); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:none; filter:drop-shadow(0 0 22px rgba(244,63,94,.9)) drop-shadow(0 5px 0 #7C3AED) }
/* نتیجه */
#liveRoom49.pk172 .pk-res.on::before{ content:""; position:absolute; left:50%; top:50%; width:220px; height:220px; margin:-110px 0 0 -110px; z-index:-1; border-radius:50%;
  background:repeating-conic-gradient(from 0deg, rgba(253,224,71,.35) 0 10deg, transparent 10deg 20deg); animation:pkray172 8s linear infinite; -webkit-mask:radial-gradient(circle, #000 30%, transparent 70%); mask:radial-gradient(circle, #000 30%, transparent 70%) }
#liveRoom49.pk172 .pk-res.lose.on::before, #liveRoom49.pk172 .pk-res.draw.on::before{ display:none }
@keyframes pkray172{ to{ transform:rotate(360deg) } }
#liveRoom49.pk172 .pk-res b{ font-size:48px }

/* ═══ برگهٔ PK ═══ */
.pk-p{ background:radial-gradient(80% 40% at 0% 0%, rgba(255,45,111,.28), transparent 70%), radial-gradient(80% 40% at 100% 0%, rgba(47,123,255,.28), transparent 70%), linear-gradient(180deg,#1C1030,#0E0819) !important;
  box-shadow:0 -14px 50px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.1) !important }
.pk-hd{ position:relative; flex-direction:column; text-align:center; gap:8px !important; padding:6px 0 4px }
.pk-hd .pk-logo.big{ font-size:30px !important; padding:10px 20px !important; border-radius:18px !important; box-shadow:0 0 0 2px rgba(255,255,255,.25), 0 10px 30px rgba(124,58,237,.6), 0 0 40px rgba(255,45,111,.35) !important; animation:pkhd172 2.6s ease-in-out infinite }
@keyframes pkhd172{ 50%{ transform:scale(1.05) rotate(-1.5deg) } }
.pk-hd b{ font-size:19px !important }
.pk-durs button{ position:relative; padding:14px 0 !important; border-radius:16px !important; font-size:14px !important }
.pk-durs button.on{ border-color:transparent !important; background:linear-gradient(135deg,rgba(255,45,111,.35),rgba(124,58,237,.35)) !important; box-shadow:inset 0 0 0 2px #FF2D6F, 0 6px 18px rgba(255,45,111,.3); color:#fff !important }
.pk-cta{ position:relative; overflow:hidden; padding:17px !important; font-size:16px !important; border-radius:20px !important }
.pk-cta::after{ content:""; position:absolute; inset:0; background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.4) 50%,transparent 65%); background-size:250% 100%; animation:pkcta172 2.6s ease-in-out infinite }
@keyframes pkcta172{ 0%{ background-position:130% 0 } 60%,100%{ background-position:-40% 0 } }
.pk-t{ padding:10px !important; border-radius:18px !important; background:rgba(255,255,255,.06) !important; box-shadow:inset 0 0 0 1px rgba(255,255,255,.08) }
@media (prefers-reduced-motion:reduce){ #vs172 *, .pkvs172 i, .pkt172, .pk-cta::after, .pk-hd .pk-logo.big{ animation:none !important } }