/* صفحه‌ی خانه — بر پایه‌ی مرجعِ تأییدشده (۸۵۳×۱۸۴۴). اندازه‌ها بر حسبِ پیکسلِ مرجع‌اند (--x --y --w --h) و با عرضِ صفحه مقیاس می‌شوند. */
#home{background:#f3efe5}
.vh{--u:calc(100cqw / 853);position:relative;width:100%;max-width:520px;margin:0 auto;aspect-ratio:853/1844;container-type:inline-size;
  background:#f3efe5 url(../assets/ui/home/bg.webp) center/100% 100% no-repeat;color:#1d2147;font-family:Vazirmatn,system-ui,sans-serif;overflow:hidden;direction:rtl;-webkit-tap-highlight-color:transparent}
.vh *{box-sizing:border-box;margin:0}
.vh .p{position:absolute;left:calc(var(--x)*100%/853);top:calc(var(--y)*100%/1844);width:calc(var(--w)*100%/853);height:calc(var(--h)*100%/1844)}
.vh button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
.vh button:focus-visible,.vh .vh-league:focus-visible{outline:3px solid #1d5fd8;outline-offset:3px;border-radius:22px}
.vh [disabled]{cursor:not-allowed}

/* پروفایل */
.vh-profile{display:flex;align-items:center;gap:calc(26*var(--u));padding:0}
.vh-avatar{width:calc(120*var(--u));height:calc(120*var(--u));border-radius:50%;object-fit:cover;border:calc(6*var(--u)) solid #fff;box-shadow:0 calc(4*var(--u)) calc(16*var(--u)) #1d214733;background:#fff;flex:none}
.vh-who{padding-top:calc(14*var(--u));display:flex;flex-direction:column;gap:calc(6*var(--u));text-align:right;min-width:0;flex:1}
.vh-who strong{font-size:calc(35*var(--u));font-weight:800;line-height:1.25;color:#1d2147;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vh-who small{font-size:calc(21.5*var(--u));font-weight:500;color:#8b8779;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* شعار */
.vh-slogan{display:flex;align-items:center;justify-content:center;text-align:center;font-size:calc(65*var(--u));font-weight:900;color:#171c46;letter-spacing:-.2px;text-shadow:0 calc(2*var(--u)) 0 #ffffffb0}

/* کارتِ لیگ (مختصاتِ داخلی نسبت به کارت: ۷۸۴×۳۷۸) */
.vh-league{cursor:pointer;border-radius:calc(34*var(--u));transition:transform .15s}
.vh-league:active{transform:scale(.99)}
.vh-league .art{position:absolute;left:calc(-14*100%/784);top:calc(-14*100%/378);width:calc(100% + 28*100%/784);height:calc(100% + 28*100%/378);max-width:none;pointer-events:none}
.vh-league .crown{position:absolute;left:calc((var(--x) - 36)*100%/784);top:calc((var(--y) - 744)*100%/378);width:calc(var(--w)*100%/784);height:calc(var(--h)*100%/378);max-width:none;pointer-events:none}
.vh .c{position:absolute}
.lc-name{left:calc(76*100%/784);top:calc(48*100%/378);height:calc(56*100%/378);width:calc(300*100%/784);display:flex;align-items:center;justify-content:flex-start;direction:ltr;font-size:calc(48*var(--u));font-weight:800;color:#1d2147}
.lc-pts{left:calc(76*100%/784);top:calc(110*100%/378);height:calc(52*100%/378);width:calc(300*100%/784);display:flex;align-items:center;justify-content:flex-start;direction:ltr;gap:calc(10*var(--u));font-size:calc(43*var(--u));font-weight:800;color:#1d2147}
.lc-next{left:calc(76*100%/784);top:calc(166*100%/378);height:calc(40*100%/378);width:calc(320*100%/784);display:flex;align-items:center;justify-content:flex-start;direction:ltr;font-size:calc(30*var(--u));font-weight:600;color:#8791a0}
.lc-bar{left:calc(74*100%/784);top:calc(222*100%/378);width:calc(636*100%/784);height:calc(26*100%/378);border-radius:99px;background:#dde4ee;box-shadow:inset 0 1px 3px #1d214722;overflow:hidden;direction:ltr;display:flex}
.lc-bar i{display:block;height:100%}
.lc-bar .b{width:0;background:linear-gradient(180deg,#2a78e8,#0d44b0);border-radius:99px 0 0 99px}
.lc-bar .y{width:0;background:linear-gradient(180deg,#f9d24e,#efb12a)}
.lc-stat{white-space:nowrap;top:calc(277*100%/378);height:calc(48*100%/378);display:flex;align-items:center;gap:calc(14*var(--u));font-size:calc(33*var(--u));font-weight:600;color:#7d8696;direction:rtl;justify-content:flex-start}
.lc-stat b{font-weight:800;color:#1d2147}
.lc-stat svg{height:calc(46*var(--u));width:auto;fill:#7b8493}
.lc-stat svg .cut{fill:none;stroke:#e9eef6;stroke-width:3;stroke-linecap:round}
.lc-stat svg circle.cut{fill:#e9eef6;stroke:none}
.lc-games{left:calc(460*100%/784);width:calc(189*100%/784)}
.lc-wins{left:calc(110*100%/784);width:calc(189*100%/784)}
.lc-div{display:block;left:calc(391*100%/784);top:calc(280*100%/378);width:1px;height:calc(42*100%/378);background:#cfd6e0}

/* دکمه‌ها */
.vh-btn{display:block;transition:transform .14s,filter .14s}
.vh-btn img{position:absolute;inset:0;width:100%;height:100%;max-width:none;pointer-events:none}
.vh-btn:active:not([disabled]){transform:scale(.985);filter:brightness(.96)}
.vh-btn .lbl,.vh-btn .ico,.vh-btn .chev,.vh-btn .soon{position:absolute}
.vh-play .lbl{left:calc((260 - 28)*100%/820);top:calc((1190 - 1126)*100%/220);width:calc(360*100%/820);height:calc(100*100%/220);display:flex;align-items:center;justify-content:center;font-size:calc(73*var(--u));font-weight:900;color:#fff;text-shadow:0 calc(3*var(--u)) calc(8*var(--u)) #0a2a7a66}
.vh-play .chev{left:calc((96 - 28)*100%/820);top:calc((1206 - 1126)*100%/220);width:calc(68*100%/820);height:calc(72*100%/220);fill:none;stroke:#fff;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 2px 3px #0a2a7a55)}
.vh-help .lbl,.vh-leagues .lbl{height:calc(60*100%/153);top:calc((1378 - 1333)*100%/153);display:flex;align-items:center;font-size:calc(40*var(--u));font-weight:800;color:#12142b}
.vh-help .lbl{left:calc((590 - 426)*100%/395);width:calc(150*100%/395);justify-content:flex-start}
.vh-leagues .lbl{left:calc((190 - 34)*100%/395);width:calc(165*100%/395);justify-content:flex-start}
.vh-help .ico{left:calc((505 - 426)*100%/395);top:calc((1374 - 1333)*100%/153);width:calc(90*100%/395);height:calc(76*100%/153);fill:none;stroke:#12142b;stroke-width:3.4;stroke-linecap:round}
.vh-leagues .ico{left:calc((112 - 34)*100%/395);top:calc((1376 - 1333)*100%/153);width:calc(80*100%/395);height:calc(66*100%/153);fill:none;stroke:#12142b;stroke-width:3.6;stroke-linecap:round;stroke-linejoin:round}
.vh .ico .dot{fill:#12142b;stroke:none}
.vh-off .ico{fill:none;stroke:#9c9c9c;stroke-width:3;stroke-linecap:round}
.vh-off .lbl{white-space:nowrap;font-size:calc(28*var(--u));font-weight:700;color:#8e8e8e;height:calc(48*100%/158);top:calc((1518 - 1482)*100%/158);display:flex;align-items:center;justify-content:flex-start}
.vh-off .soon{height:calc(40*100%/158);top:calc((1566 - 1482)*100%/158);display:flex;align-items:center;justify-content:center;border-radius:99px;background:#dcdcdc;color:#808080;font-size:calc(23*var(--u));font-weight:700}
.vh-online .ico{left:calc((492 - 426)*100%/397);top:calc((1520 - 1482)*100%/158);width:calc(78*100%/397);height:calc(78*100%/158)}
.vh-online .lbl{left:calc((610 - 426)*100%/397);width:calc(138*100%/397)}
.vh-online .soon{left:calc((622 - 426)*100%/397);width:calc(130*100%/397)}
.vh-top .ico{left:calc((82 - 34)*100%/395);top:calc((1524 - 1482)*100%/158);width:calc(100*100%/395);height:calc(78*100%/158);stroke:none}
.vh-top .ico rect{fill:#a9a9a9}
.vh-top .ico text{fill:#fff;font-size:20px;font-weight:800;font-family:Vazirmatn}
.vh-top .lbl{left:calc((210 - 34)*100%/395);width:calc(172*100%/395)}
.vh-top .soon{left:calc((230 - 34)*100%/395);width:calc(130*100%/395)}

/* معرفی بزرگمهر (لوگو در پس‌زمینه است) */
.vh-about{display:block;text-align:right}
.vh-about .who{position:absolute;left:calc((455 - 262)*100%/450);top:calc((1706 - 1672)*100%/150);width:calc(250*100%/450);display:flex;flex-direction:column;align-items:flex-end;gap:calc(10*var(--u))}
.vh-about strong{font-size:calc(26*var(--u));font-weight:800;color:#1d2147}
.vh-about em{font-style:normal;display:inline-flex;align-items:center;gap:calc(6*var(--u));font-size:calc(26*var(--u));font-weight:700;color:#1d5fd8}
.vh-about em svg{width:calc(24*var(--u));height:calc(24*var(--u));fill:none;stroke:#1d5fd8;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}

/* ورودِ آرام */
@media (prefers-reduced-motion:no-preference){
  .vh .vh-profile,.vh .vh-slogan,.vh .vh-league,.vh .vh-btn,.vh .vh-about{animation:vhIn .55s cubic-bezier(.2,.8,.2,1) both}
  .vh .vh-slogan{animation-delay:.05s}.vh .vh-league{animation-delay:.12s}.vh .vh-play{animation-delay:.2s}.vh .vh-help,.vh .vh-leagues{animation-delay:.28s}.vh .vh-off{animation-delay:.34s}.vh .vh-about{animation-delay:.4s}
}
@keyframes vhIn{from{opacity:0;transform:translateY(calc(14*var(--u)))}to{opacity:1;transform:none}}