/* ============================================================
   results.css — «اعلام نتایج» بازی‌ها: کارتِ صفحهٔ اصلی (.rsv-1) و صفحهٔ /games/results (.rpv-1)

   طرح‌ها از آزمایشگاه (css/lab-results.css) انتخاب شده‌اند و این فایل از روی همان‌ها ساخته شد:
     • همه‌چیز زیر .res-root اسکوپ است تا با CSS سایت و آزمایشگاه (که همین نام‌کلاس‌ها را دارد) قاطی نشود؛
     • container queryِ آزمایشگاه به @media تبدیل شد (۶۰۰px موبایل، ۹۰۰px دسکتاپ)؛
     • فقط طرح‌های انتخاب‌شده مانده است (صحنهٔ قهرمانان + پوستهٔ سینمایی).
   از این به بعد مستقل از آزمایشگاه نگه‌داری می‌شود.

   بدون اموجی: همه‌چیز SVG یا CSS است. با prefers-reduced-motion انیمیشن‌ها خاموش می‌شوند.
   ============================================================ */

.res-root .rs,
.res-root .rp {--g1: #fff3bf; --g2: #e7bb52; --g3: #b3842a; --gink: #6b4d0f; --ease: cubic-bezier(.22, 1, .36, 1); --sk-hi: #e9f5ed; --sk-mid: #f6efe9; --sk-lo: #f9d9d5; --sk-line: #e3d5d0; --sk-rgb: 201, 130, 124; }
.res-root .rs a,
.res-root .rp a {text-decoration: none; color: inherit; }
.res-root :where(ol, ul) {list-style: none; margin: 0; padding: 0; }   /* :where → specificity ۰، تا margin:auto سکو را نبرد */
.res-root .rs .ic,
.res-root .rp .ic {width: 18px; height: 18px; flex: none; }
.res-root .rs h2,
.res-root .rs h3,
.res-root .rp h1,
.res-root .rp h2,
.res-root .rp h3,
.res-root .rp h4 {margin: 0; }
.res-root .mdl {display: inline-grid; width: var(--sz, 28px); height: var(--sz, 28px); flex: none; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .18)); }
.res-root .mdl svg {width: 100%; height: 100%; }
.res-root .mdl text {font-family: inherit; }
.res-root .mdl-1 text {fill: #5e430c; }
.res-root .mdl-2 text {fill: #33403a; }
.res-root .mdl-3 text {fill: #5b3319; }
.res-root .mdl-0 {filter: none; }
.res-root .mdl-0 .mdl-bg {fill: #e6efe8; }
.res-root .mdl-0 text {fill: #40694f; }
.res-root .rs-av {position: relative; flex: none; display: grid; place-items: center; border-radius: 50%; font-weight: 800; color: #2c4a38; background: linear-gradient(145deg, #f1f8f3, #bfdcc8); border: 3px solid rgba(255, 255, 255, .92); box-shadow: 0 8px 20px rgba(15, 36, 25, .2); }
.res-root .rs-av .ic {width: 52%; height: 52%; }
.res-root .rs-av-xs {width: 28px; height: 28px; font-size: .78rem; border-width: 2px; box-shadow: none; }
.res-root .rs-av-sm {width: 38px; height: 38px; font-size: .95rem; border-width: 2px; box-shadow: 0 4px 10px rgba(15, 36, 25, .14); }
.res-root .rs-av-md {width: 52px; height: 52px; font-size: 1.2rem; }
.res-root .rs-av-lg {width: 64px; height: 64px; font-size: 1.45rem; }
.res-root .rs-av-xl {width: 92px; height: 92px; font-size: 2.1rem; border-width: 4px; }
.res-root .rs-r1 {background: linear-gradient(145deg, #fff6cf, #e9c05c); color: #5e430c; }
.res-root .rs-r2 {background: linear-gradient(145deg, #ffffff, #cdd5d1); color: #33403a; }
.res-root .rs-r3 {background: linear-gradient(145deg, #fbe3cb, #d9a47b); color: #5b3319; }
.res-root .rs-av-q {background: repeating-linear-gradient(135deg, #fff, #fff 6px, #e9f2ec 6px, #e9f2ec 12px); color: var(--sage-700); animation: rsPulse 1.9s ease-in-out infinite; }
@keyframes rsPulse {50% { transform: scale(1.06); opacity: .78; }}
.res-root .rs-me {font-style: normal; font-size: .62rem; font-weight: 800; padding: 1px 8px; border-radius: 999px; margin-inline-start: 6px; background: linear-gradient(135deg, var(--g1), var(--g2)); color: var(--gink); vertical-align: middle; white-space: nowrap; }
.res-root .st-fx {position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.res-root .st-rays {position: absolute; inset: -30% -25% auto; height: 130%; transform-origin: 50% 0; background: conic-gradient(from 200deg at 50% 0%, transparent 0 7%, rgba(255, 255, 255, .65) 10%, transparent 14%, transparent 21%, rgba(255, 255, 255, .45) 24%, transparent 28%, transparent 35%, rgba(255, 255, 255, .6) 38%, transparent 42%, transparent 100%); -webkit-mask-image: linear-gradient(#000, transparent 75%); mask-image: linear-gradient(#000, transparent 75%); animation: stSway 9s ease-in-out infinite alternate; }
@keyframes stSway {from { transform: rotate(-5deg); } to { transform: rotate(5deg); }}
.res-root .st-glow {position: absolute; inset-inline: 10%; inset-block-start: -25%; height: 70%; background: radial-gradient(closest-side, rgba(255, 255, 255, .9), transparent); filter: blur(8px); }
.res-root .rs-dots i {position: absolute; inset-block-end: -14px; inset-inline-start: var(--x); width: var(--z); height: var(--z); border-radius: 50%; background: radial-gradient(circle, #f3d98b, rgba(231, 187, 82, .0) 70%); opacity: 0; animation: rsRise var(--d) linear var(--w) infinite; }
@keyframes rsRise {10% { opacity: .9; } to { transform: translateY(-420px); opacity: 0; }}
.res-root .pd {--pd-ink: #fff; --pd-mute: rgba(255, 255, 255, .7); --pd-chip-bg: rgba(255, 255, 255, .1); --pd-chip-line: rgba(255, 255, 255, .2); --pd-chip-ink: rgba(255, 255, 255, .94); --pd-num: rgba(255, 255, 255, .6); --pd-score: #f6e3a3; position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 12px; max-width: 600px; margin: 22px auto 0; }
.res-root .pd-light {--pd-ink: var(--leaf-900); --pd-mute: var(--muted); --pd-chip-bg: #fff; --pd-chip-line: var(--line); --pd-chip-ink: var(--ink); --pd-num: rgba(255, 255, 255, .95); --pd-score: var(--sage-700); }
.res-root .pd-p {display: flex; flex-direction: column; min-width: 0; }
.res-root .pd-top {display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding-bottom: 12px; }
.res-root .pd-avw {position: relative; display: grid; place-items: center; }
.res-root .pd-p1 .pd-avw {margin-top: 36px; }
.res-root .pd-crown {position: absolute; inset-block-start: -36px; inset-inline: 0; margin-inline: auto; width: 36px; height: 36px; z-index: 2; color: #f6d77a; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .3)); animation: pdFloat 3.2s ease-in-out infinite; }
.res-root .pd-crown .ic {width: 100%; height: 100%; fill: rgba(246, 215, 122, .35); stroke-width: 1.6; }
@keyframes pdFloat {50% { transform: translateY(-4px) rotate(-3deg); }}
.res-root .pd-ring {position: absolute; inset: -9px; border-radius: 50%; z-index: 0; animation: pdSpin 7s linear infinite; background: conic-gradient(from 0deg, #fff3bf, #e7bb52, #fff3bf, #b3842a, #fff3bf); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px)); mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px)); }
@keyframes pdSpin {to { transform: rotate(360deg); }}
.res-root .pd-p1 .rs-av {box-shadow: 0 0 0 4px rgba(243, 217, 139, .18), 0 14px 34px rgba(231, 187, 82, .45); }
.res-root .pd-name {font-size: .92rem; font-weight: 800; color: var(--pd-ink); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 4px; }
.res-root .pd-score {display: flex; align-items: baseline; gap: 4px; color: var(--pd-score); }
.res-root .pd-score b {font-size: 1.05rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.res-root .pd-p1 .pd-score b {font-size: 1.55rem; }
.res-root .pd-score small {font-size: .68rem; font-weight: 700; color: var(--pd-mute); }
.res-root .pd-prize {display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 10px; border-radius: 12px; font-size: .68rem; line-height: 1.5; color: var(--pd-chip-ink); background: var(--pd-chip-bg); border: 1px solid var(--pd-chip-line); text-align: start; }
.res-root .pd-prize .ic {width: 15px; height: 15px; color: var(--g2); }
.res-root .pd-prize span {display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.res-root .pd-base {display: grid; place-items: center; border-radius: 16px 16px 0 0; font-weight: 900; font-size: 2.1rem; color: var(--pd-num); transform-origin: bottom; animation: pdRise .8s var(--ease) both; background: linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, .04)); border: 1px solid rgba(255, 255, 255, .26); border-bottom: none; backdrop-filter: blur(6px); }
.res-root .pd-p1 .pd-base {height: 108px; background: linear-gradient(180deg, #f9e6a0, #c99a3a); color: rgba(94, 67, 12, .85); border-color: rgba(255, 243, 191, .7); animation-delay: .05s; box-shadow: 0 -10px 40px rgba(231, 187, 82, .35); }
.res-root .pd-p2 .pd-base {height: 78px; animation-delay: .15s; }
.res-root .pd-p3 .pd-base {height: 58px; background: linear-gradient(180deg, rgba(228, 164, 118, .5), rgba(228, 164, 118, .06)); animation-delay: .25s; }
.res-root .pd-p.is-empty .pd-base {opacity: .3; }
.res-root .pd-p.is-me .pd-name {color: var(--g1); }
@keyframes pdRise {from { transform: scaleY(.15); opacity: 0; }}
.res-root .pd-skel {display: block; width: 72%; height: 12px; border-radius: 8px; background: linear-gradient(90deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .34), rgba(255, 255, 255, .12)); background-size: 200% 100%; animation: rsShimmer 1.4s linear infinite; }
.res-root .pd-skel-s {width: 46%; height: 10px; }
@keyframes rsShimmer {to { background-position: -200% 0; }}
.res-root .pd-light .pd-skel {background: linear-gradient(90deg, #e3ece6, #f6faf7, #e3ece6); background-size: 200% 100%; }
.res-root .pd-light .pd-base {background: linear-gradient(180deg, #e6ece9, #b9c3be); border-color: rgba(255, 255, 255, .8); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .75), 0 12px 22px rgba(64, 105, 79, .18); backdrop-filter: none; }
.res-root .pd-light .pd-p1 .pd-base {background: linear-gradient(180deg, #fbe9ab, #d4a63f); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .8), 0 16px 28px rgba(179, 132, 42, .38); color: rgba(94, 67, 12, .8); }
.res-root .pd-light .pd-p3 .pd-base {background: linear-gradient(180deg, #f6d9bf, #d49a6e); }
.res-root .pd-light .pd-crown {color: #c18f2a; filter: drop-shadow(0 3px 5px rgba(179, 132, 42, .35)); }
.res-root .pd-light .pd-crown .ic {fill: rgba(231, 187, 82, .45); }
.res-root .pd-light .pd-avw .rs-av {box-shadow: 0 10px 22px rgba(64, 105, 79, .2); }
.res-root .pd-light .pd-p1 .rs-av {box-shadow: 0 0 0 4px rgba(231, 187, 82, .2), 0 14px 30px rgba(231, 187, 82, .5); }
.res-root .pd-light .pd-p.is-me .pd-name {color: var(--gink); }
.res-root .me-note {display: flex; align-items: center; gap: 10px; margin: 14px 0 0; padding: 10px 14px; border-radius: 16px; background: rgba(107, 166, 128, .14); color: var(--sage-700); font-size: .84rem; line-height: 1.8; }
.res-root .me-note .ic {color: var(--sage-600); }
.res-root .me-note.is-win {background: linear-gradient(90deg, #fff1c2, #fffaf0); color: var(--gink); font-weight: 700; }
.res-root .me-note.is-win .ic {color: var(--g3); }
.res-root .st-wait {position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 10px; margin: 16px auto 0; padding: 11px 16px; max-width: 480px; border-radius: 16px; font-size: .82rem; line-height: 1.7; background: rgba(255, 255, 255, .72); border: 1px solid var(--sk-line); color: var(--leaf-900); overflow: hidden; }
.res-root .st-wait .ic {color: var(--g3); animation: rsPulse 1.4s ease-in-out infinite; }
.res-root .st-wait i {position: absolute; inset-block-end: 0; inset-inline: 0; height: 3px; background: linear-gradient(90deg, transparent, #e7bb52, transparent); background-size: 50% 100%; background-repeat: no-repeat; animation: stSweep 1.6s linear infinite; }
@keyframes stSweep {from { background-position: 120% 0; } to { background-position: -120% 0; }}
.res-root .rs-cta {position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; margin-top: 18px; padding: 13px 20px; border-radius: 999px; background: var(--sage-700); color: #fff !important; font-weight: 800; font-size: .93rem; transition: transform .25s var(--ease), box-shadow .25s ease, background .25s ease; box-shadow: 0 12px 26px rgba(64, 105, 79, .28); }
.res-root .rs-cta:hover {transform: translateY(-2px); box-shadow: 0 16px 30px rgba(64, 105, 79, .36); }
.res-root .rs-cta-arrow {display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(255, 255, 255, .2); transition: transform .25s var(--ease); }
.res-root .rs-cta-arrow .ic {width: 15px; height: 15px; }
.res-root .rs-cta:hover .rs-cta-arrow {transform: translateX(-4px); }
.res-root .rs-cta.is-gold {background: linear-gradient(135deg, #fbe9ab, #d9ac47); color: #3b2a08 !important; box-shadow: 0 12px 26px rgba(179, 132, 42, .32); }
.res-root .rs-cta.is-gold .rs-cta-arrow {background: rgba(59, 42, 8, .14); }
.res-root .rs {position: relative; isolation: isolate; overflow: hidden; border-radius: 32px; }
.res-root .rs-meta-row,
.res-root .st-meta,
.res-root .dt-meta {display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0; font-size: .78rem; }
.res-root .st-meta span,
.res-root .dt-meta span {display: inline-flex; align-items: center; gap: 6px; }
.res-root .st-meta .ic,
.res-root .dt-meta .ic {width: 15px; height: 15px; }
.res-root .rsv-1 {padding: 26px 22px 22px; color: var(--leaf-900); border: 1px solid var(--sk-line); background: radial-gradient(120% 90% at 50% -12%, var(--sk-hi) 0%, var(--sk-mid) 48%, var(--sk-lo) 100%); box-shadow: 0 24px 54px rgba(var(--sk-rgb), .22); }
.res-root .rsv-1 > :not(.st-fx) {position: relative; z-index: 1; }
.res-root .st-head {display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.res-root .st-chip {display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px; border-radius: 999px; font-size: .76rem; font-weight: 800; color: var(--sage-700); background: rgba(255, 255, 255, .78); border: 1px solid var(--sk-line); box-shadow: 0 4px 12px rgba(var(--sk-rgb), .12); }
.res-root .st-head h2 {font-size: 1.55rem; font-weight: 900; line-height: 1.5; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--leaf-900); }
.res-root .st-meta {justify-content: center; color: var(--muted); }
.res-root .rsv-1 .pd::after {content: ''; position: absolute; inset-inline: -6%; inset-block-end: -1px; height: 2px; background: linear-gradient(90deg, transparent, rgba(217, 172, 71, .85), transparent); box-shadow: 0 0 18px 3px rgba(231, 187, 82, .28); }
.res-root .rsv-1 .me-note {background: rgba(255, 255, 255, .72); border: 1px solid var(--sk-line); color: var(--leaf-900); }
.res-root .rsv-1 .me-note .ic {color: var(--g3); }
.res-root .rsv-1 .me-note.is-win {background: linear-gradient(90deg, #fff1c2, rgba(255, 255, 255, .8)); border-color: #efd88d; color: var(--gink); }
@keyframes sbIn {from { opacity: 0; transform: translateX(16px); }}
@keyframes sbGrow {from { transform: scaleX(0); }}
@media (max-width: 600px) {
.res-root .rs {border-radius: 28px; }
.res-root .rsv-1 {padding: 22px 14px 18px; }
.res-root .st-head h2 {font-size: 1.22rem; }
.res-root .pd {gap: 7px; }
.res-root .rs-av-xl {width: 76px; height: 76px; font-size: 1.8rem; }
.res-root .rs-av-lg {width: 54px; height: 54px; font-size: 1.25rem; }
.res-root .pd-name {font-size: .8rem; }
.res-root .pd-score b {font-size: .92rem; }
.res-root .pd-p1 .pd-score b {font-size: 1.3rem; }
.res-root .pd-prize {font-size: .62rem; padding: 3px 8px; gap: 4px; }
.res-root .pd-prize .ic {width: 13px; height: 13px; }
.res-root .pd-base {font-size: 1.6rem; }
.res-root .pd-p1 .pd-base {height: 88px; }
.res-root .pd-p2 .pd-base {height: 64px; }
.res-root .pd-p3 .pd-base {height: 48px; }
}
@media (min-width: 900px) {
.res-root .rsv-1 {padding: 30px 28px 24px; }
.res-root .rsv-1 .st-head h2 {font-size: 1.8rem; }
}
.res-root .rp {position: relative; isolation: isolate; overflow: hidden; padding: 20px 18px 28px; border-radius: 32px; min-height: 380px; }
.res-root .rp-blobs {position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.res-root .rp-blobs i {position: absolute; border-radius: 50%; filter: blur(46px); opacity: .55; }
.res-root .rp-blobs i:nth-child(1) {width: 260px; height: 260px; inset-block-start: -80px; inset-inline-end: -60px; background: #cfe9d6; }
.res-root .rp-blobs i:nth-child(2) {width: 240px; height: 240px; inset-block-end: 10%; inset-inline-start: -90px; background: #fbe3a8; }
.res-root .rpv-1 {background: linear-gradient(180deg, #f1f6ef, #f7f9f4); }
.res-root .rpv-1 .rp-blobs i:nth-child(1) {background: #cfe5d6; opacity: .45; }
.res-root .rp-head {display: flex; align-items: center; gap: 13px; }
.res-root .rp-back {flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #fff; border: 1px solid var(--line); color: var(--sage-700); box-shadow: 0 6px 14px rgba(64, 105, 79, .1); }
.res-root .rp-head-t h1 {font-size: 1.4rem; font-weight: 900; color: var(--leaf-900); }
.res-root .rp-head-t p {margin: 2px 0 0; font-size: .8rem; color: var(--muted); }
.res-root .rp-stats {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 18px 0 14px; }
.res-root .rp-stats > div {position: relative; display: grid; gap: 1px; padding: 14px 14px 12px; border-radius: 22px; background: #fff; border: 1px solid var(--line); overflow: hidden; }
.res-root .rp-st-ic {display: grid; place-items: center; width: 34px; height: 34px; border-radius: 12px; margin-bottom: 6px; color: #fff; background: linear-gradient(135deg, var(--sage-400), var(--sage-600)); box-shadow: 0 8px 14px rgba(84, 138, 103, .3); }
.res-root .rp-stats > div:nth-child(2) .rp-st-ic {background: linear-gradient(135deg, #f3d98b, #c99a3a); box-shadow: 0 8px 14px rgba(201, 154, 58, .32); }
.res-root .rp-stats > div:nth-child(3) .rp-st-ic {background: linear-gradient(135deg, #f3b6b1, #dc857e); box-shadow: 0 8px 14px rgba(220, 133, 126, .3); }
.res-root .rp-stats b {font-size: 1.55rem; font-weight: 900; color: var(--leaf-900); line-height: 1.2; }
.res-root .rp-stats small {font-size: .72rem; color: var(--muted); }
.res-root .rp-filters {display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.res-root .rp-filters button {display: inline-flex; align-items: center; gap: 7px; padding: 8px 15px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-weight: 700; font-size: .82rem; color: var(--sage-700); transition: all .2s ease; }
.res-root .rp-filters button .ic {width: 16px; height: 16px; }
.res-root .rp-filters button:hover {background: var(--mint-100); }
.res-root .rp-filters button[aria-pressed="true"] {background: var(--leaf-900); border-color: var(--leaf-900); color: #f6e3a3; box-shadow: 0 8px 16px rgba(38, 56, 44, .25); }
.res-root .rp-filters .rp-mine-btn {background: #fff6d8; border-color: #f0dfa2; color: var(--gink); }
.res-root .rp-filters .rp-mine-btn[aria-pressed="true"] {background: linear-gradient(135deg, #fbe9ab, #d9ac47); border-color: #d9ac47; color: #3b2a08; }
.res-root .rp-mine-btn span {background: rgba(0, 0, 0, .09); border-radius: 999px; padding: 0 8px; }
.res-root .rp button:focus-visible,
.res-root .rp a:focus-visible,
.res-root .rs a:focus-visible {outline: 3px solid var(--gold); outline-offset: 2px; }
.res-root .rp-pill {flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 800; padding: 4px 12px; border-radius: 999px; white-space: nowrap; }
.res-root .rp-pill .ic {width: 14px; height: 14px; }
.res-root .rp-pill.is-done {background: rgba(126, 226, 160, .2); color: #1f7a45; }
.res-root .rp-pill.is-wait {background: #fff0cc; color: var(--gink); }
.res-root .rp-pill.is-month {background: #efe5fb; color: #6a3fa0; }
.res-root .rp-none {color: var(--muted); font-size: .84rem; padding: 10px 0; }
.res-root .rp-empty {display: grid; justify-items: center; gap: 8px; text-align: center; padding: 50px 20px; color: var(--muted); background: rgba(255, 255, 255, .8); border: 1.5px dashed var(--sage-300); border-radius: 28px; }
.res-root .rp-empty-ic {display: grid; place-items: center; width: 64px; height: 64px; border-radius: 22px; color: var(--sage-600); background: var(--mint-100); }
.res-root .rp-empty-ic .ic {width: 32px; height: 32px; }
.res-root .rp-empty b {color: var(--leaf-900); font-size: 1.05rem; }
.res-root .rp-empty p {margin: 0; font-size: .84rem; max-width: 34ch; }
.res-root .rp-ms {display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.res-root .rp-ms-list {display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 8px; scroll-snap-type: x proximity; scrollbar-width: thin; }
.res-root .rp-ms-tab {position: relative; flex: none; scroll-snap-align: start; min-width: 200px; max-width: 250px; display: flex; align-items: center; gap: 11px; text-align: start; padding: 11px 14px; border-radius: 20px; background: #fff; border: 1.5px solid var(--line); transition: all .25s var(--ease); }
.res-root .rp-ms-tab:hover {transform: translateY(-2px); border-color: var(--sage-300); }
.res-root .rp-ms-ico {flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 14px; color: var(--sage-700); background: var(--mint-100); transition: all .25s ease; }
.res-root .rp-ms-t {display: grid; min-width: 0; }
.res-root .rp-ms-t b {font-size: .88rem; color: var(--leaf-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.res-root .rp-ms-t small {font-size: .72rem; color: var(--muted); }
.res-root .rp-ms-me {position: absolute; inset-block-start: -7px; inset-inline-end: 10px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, #fbe9ab, #d9ac47); color: #3b2a08; box-shadow: 0 4px 8px rgba(201, 154, 58, .4); }
.res-root .rp-ms-me .ic {width: 13px; height: 13px; }
.res-root .rpv-1 .rp-ms-tab.is-active {background: linear-gradient(135deg, var(--sk-hi), var(--sk-lo)); border-color: var(--sk-line); box-shadow: 0 12px 24px rgba(var(--sk-rgb), .22); }
.res-root .rpv-1 .rp-ms-tab.is-active b {color: var(--leaf-900); }
.res-root .rpv-1 .rp-ms-tab.is-active small {color: var(--muted); }
.res-root .rpv-1 .rp-ms-tab.is-active .rp-ms-ico {background: rgba(255, 255, 255, .85); color: var(--g3); }
.res-root .dt {min-width: 0; border-radius: 30px; overflow: hidden; background: #fff; border: 1px solid var(--line); box-shadow: 0 18px 44px rgba(64, 105, 79, .14); animation: dtIn .5s var(--ease) both; }
@keyframes dtIn {from { opacity: 0; transform: translateY(10px); }}
.res-root .dt-body {padding: 20px 18px 22px; }
.res-root .dt-hero-head h2 {font-size: 1.2rem; font-weight: 900; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.res-root .dt-badge {flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 17px; color: var(--g3); background: rgba(255, 255, 255, .78); border: 1px solid var(--sk-line); }
.res-root .dt-badge .ic {width: 26px; height: 26px; }
.res-root .dt-hero-head,
.res-root .dt-ghead {position: relative; z-index: 1; display: flex; align-items: center; gap: 13px; }
.res-root .dt-hero-head > div,
.res-root .dt-ghead > div {flex: 1; min-width: 0; display: grid; gap: 3px; }
.res-root .dt-s1 {background: #fff; }
.res-root .dt-hero {position: relative; isolation: isolate; overflow: hidden; padding: 22px 18px 0; color: var(--leaf-900); background: radial-gradient(120% 90% at 50% -12%, var(--sk-hi) 0%, var(--sk-mid) 48%, var(--sk-lo) 100%); }
.res-root .dt-hero .dt-meta {color: var(--muted); }
.res-root .dt-hero .rp-pill.is-done {background: rgba(126, 226, 160, .3); color: #1f7a45; }
.res-root .dt-hero .rp-pill.is-wait {background: #fff0cc; color: var(--gink); }
.res-root .dt-hero .rp-pill.is-month {background: rgba(255, 255, 255, .8); color: #8a5a00; }
.res-root .dt-hero .pd {margin-top: 18px; }
.res-root .dt-hero .st-wait {margin: 0 auto 18px; }
.res-root .dt-hero .pd + .st-wait {margin-top: 14px; }
.res-root .dt-s1 .dt-body {position: relative; z-index: 2; margin-top: -1px; background: #fff; border-radius: 26px 26px 0 0; }
.res-root .dt-sec {display: flex; align-items: center; gap: 9px; margin: 22px 0 12px !important; font-size: .98rem; font-weight: 900; color: var(--leaf-900); }
.res-root .dt-sec .ic {color: var(--sage-600); width: 19px; height: 19px; }
.res-root .dt-me {display: flex; align-items: center; gap: 13px; padding: 14px 16px; border-radius: 22px; margin-bottom: 14px; background: linear-gradient(135deg, #e7f4ea, #fff); border: 1px solid #cfe5d6; }
.res-root .dt-me.is-win {background: linear-gradient(135deg, #fff1c2, #fffaf0 70%); border-color: #efd88d; box-shadow: 0 12px 26px rgba(201, 154, 58, .22); }
.res-root .dt-me-ic {flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 16px; color: #fff; background: linear-gradient(135deg, var(--sage-400), var(--sage-600)); }
.res-root .dt-me.is-win .dt-me-ic {background: linear-gradient(135deg, #f3d98b, #c99a3a); color: #3b2a08; }
.res-root .dt-me > div {flex: 1; min-width: 0; }
.res-root .dt-me b {color: var(--leaf-900); font-size: .96rem; }
.res-root .dt-me p {margin: 2px 0 0; font-size: .8rem; color: var(--muted); line-height: 1.7; }
.res-root .dt-me-rank {flex: none; display: grid; justify-items: center; line-height: 1; padding: 8px 14px; border-radius: 16px; background: rgba(255, 255, 255, .8); }
.res-root .dt-me-rank b {font-size: 1.7rem; font-weight: 900; color: var(--sage-700); }
.res-root .dt-me-rank small {font-size: .62rem; color: var(--muted); margin-top: 3px; }
.res-root .dt-me.is-win .dt-me-rank b {color: var(--gink); }
.res-root .dt-stats {display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 10px; }
.res-root .dt-stats > div {display: grid; justify-items: start; gap: 2px; padding: 13px 13px 11px; border-radius: 20px; background: var(--mint-50); border: 1px solid var(--line); }
.res-root .dt-stats span {display: grid; place-items: center; width: 32px; height: 32px; border-radius: 11px; margin-bottom: 4px; color: var(--sage-700); background: #fff; box-shadow: 0 4px 10px rgba(64, 105, 79, .12); }
.res-root .dt-stats > div:nth-child(2) span {color: #b3842a; }
.res-root .dt-stats > div:nth-child(3) span {color: #c99a3a; }
.res-root .dt-stats > div:nth-child(4) span {color: #d0746d; }
.res-root .dt-stats b {font-size: 1.3rem; font-weight: 900; color: var(--leaf-900); line-height: 1.2; }
.res-root .dt-stats small {font-size: .7rem; color: var(--muted); }
.res-root .dt-prizes {display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.res-root .dt-prize {position: relative; display: flex; align-items: center; gap: 12px; padding: 14px 16px; min-height: 76px; background: linear-gradient(135deg, #fff8e0, #ffffff); box-shadow: 0 8px 20px rgba(179, 132, 42, .14); -webkit-mask: radial-gradient(circle 10px at 74px 0, transparent 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle 10px at 74px 100%, transparent 98%, #000) bottom / 100% 51% no-repeat; mask: radial-gradient(circle 10px at 74px 0, transparent 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle 10px at 74px 100%, transparent 98%, #000) bottom / 100% 51% no-repeat; border-radius: 20px; }
.res-root .dt-prize-2 {background: linear-gradient(135deg, #eef2f0, #ffffff); }
.res-root .dt-prize-3 {background: linear-gradient(135deg, #fbe9d9, #ffffff); }
.res-root .dt-prize-0 {background: linear-gradient(135deg, #eef6f0, #ffffff); }
.res-root .dt-prize-ic {order: -1; flex: none; display: grid; place-items: center; width: 50px; align-self: stretch; border-inline-end: 2px dashed rgba(64, 105, 79, .22); padding-inline-end: 12px; color: var(--sage-600); }
.res-root .dt-prize-ic .ic {width: 26px; height: 26px; }
.res-root .dt-prize-m {flex: none; }
.res-root .dt-prize-t {min-width: 0; display: grid; gap: 1px; }
.res-root .dt-prize-t small {font-size: .7rem; color: var(--muted); font-weight: 700; }
.res-root .dt-prize-t b {font-size: .92rem; color: var(--leaf-900); line-height: 1.6; }
.res-root .bd {display: grid; gap: 6px; }
.res-root .bd-head,
.res-root .bd-row {display: grid; grid-template-columns: 46px minmax(0, 1fr) 54px 62px 72px; gap: 8px; align-items: center; padding: 9px 12px; border-radius: 16px; font-size: .84rem; }
.res-root .bd-head {color: var(--muted); font-size: .72rem; font-weight: 700; padding-block: 2px; }
.res-root .bd-row {position: relative; isolation: isolate; overflow: hidden; background: #fff; border: 1px solid var(--line); animation: sbIn .5s var(--ease) both; animation-delay: calc(var(--i) * .035s); }
.res-root .bd-row::before {content: ''; position: absolute; z-index: -1; inset-block: 0; inset-inline-start: 0; width: var(--p); background: linear-gradient(270deg, rgba(107, 166, 128, .26), rgba(107, 166, 128, .04)); transform-origin: right; animation: sbGrow .9s var(--ease) both; animation-delay: calc(var(--i) * .035s + .1s); }
.res-root .bd-row.is-top {border-color: #f0dfa2; }
.res-root .bd-row.is-top::before {background: linear-gradient(270deg, rgba(231, 187, 82, .38), rgba(231, 187, 82, .05)); }
.res-root .bd-row.is-me {outline: 2.5px solid var(--g2); outline-offset: -2px; }
.res-root .bd-row.is-me::before {background: linear-gradient(270deg, rgba(240, 160, 152, .34), rgba(240, 160, 152, .05)); }
.res-root .bd-rk {display: grid; place-items: center; }
.res-root .bd-nm {display: flex; align-items: center; gap: 9px; min-width: 0; }
.res-root .bd-nm b {font-weight: 800; color: var(--leaf-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.res-root .bd-sc {font-weight: 900; color: var(--sage-700); text-align: end; font-size: .95rem; font-variant-numeric: tabular-nums; }
.res-root .bd-row.is-top .bd-sc {color: var(--gink); }
@media (max-width: 600px) {
.res-root .rp {padding: 16px 12px 22px; border-radius: 28px; }
.res-root .rp-head-t h1 {font-size: 1.2rem; }
.res-root .rp-stats {gap: 8px; }
.res-root .rp-stats > div {padding: 11px 10px 10px; border-radius: 18px; }
.res-root .rp-stats b {font-size: 1.25rem; }
.res-root .dt-hero {padding: 18px 12px 0; }
.res-root .dt-body {padding: 16px 12px 18px; }
.res-root .dt-stats {grid-template-columns: repeat(2, minmax(0, 1fr)); }
.res-root .dt-prizes {grid-template-columns: minmax(0, 1fr); }
.res-root .dt-me {flex-wrap: wrap; }
.res-root .dt-hero-head h2 {font-size: 1.05rem; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.res-root .dt-hero-head,
.res-root .dt-ghead {flex-wrap: wrap; }
.res-root .dt-hero-head > div,
.res-root .dt-ghead > div {flex: 1 1 150px; }
.res-root .bd-head,
.res-root .bd-row {grid-template-columns: 40px minmax(0, 1fr) 62px; padding: 8px 10px; }
.res-root .hide-sm {display: none !important; }
}
@media (min-width: 900px) {
.res-root .rp-ms {grid-template-columns: 280px minmax(0, 1fr); align-items: start; }
.res-root .rp-ms-list {flex-direction: column; overflow: visible; }
.res-root .rp-ms-tab {min-width: 0; max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
.res-root .rs *,
.res-root .rs *::before,
.res-root .rs *::after,
.res-root .rp *,
.res-root .rp *::before,
.res-root .rp *::after {animation: none !important; transition-duration: .01ms !important; }
.res-root .st-rays,
.res-root .rs-dots {display: none; }
.res-root .pd-ring {animation: none !important; }
}

/* ---------- ویژهٔ سایت اصلی ---------- */
.res-root { display: block; font-family: inherit; line-height: 1.6; }
.res-home { padding-block: 10px 16px; }
.res-home .res-card { cursor: pointer; }
.res-page { padding-block: 18px 44px; }
.res-root button { font-family: inherit; cursor: pointer; border: 0; background: none; }
.res-root h1 { font-size: inherit; }

/* ---------- کارت «مسابقه در جریان» (.rsv-live؛ روی پایهٔ .rsv-1) ---------- */
.res-root .rsv-live { padding: 26px 22px 22px; }
.res-root .lv-grid { position: relative; z-index: 1; display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); }
.res-root .lv-main { display: grid; gap: 10px; justify-items: center; text-align: center; min-width: 0; }
.res-root .lv-top { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.res-root .lv-pulse { display: block; width: 9px; height: 9px; border-radius: 50%; background: #7ee2a0; animation: lvPing 1.8s infinite; }
@keyframes lvPing { 0% { box-shadow: 0 0 0 0 rgba(126, 226, 160, .7); } 100% { box-shadow: 0 0 0 10px rgba(126, 226, 160, 0); } }
.res-root .lv-test { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 999px; font-size: .7rem; font-weight: 800; color: #8a5a00; background: rgba(255, 255, 255, .78); border: 1px solid #efd88d; white-space: nowrap; }
.res-root .lv-main h2 { font-size: 1.55rem; font-weight: 900; line-height: 1.5; color: var(--leaf-900); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 100%; }
.res-root .lv-desc { margin: 0; font-size: .88rem; line-height: 1.9; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; max-width: 52ch; }
.res-root .lv-main .st-meta { justify-content: center; color: var(--muted); }
.res-root .lv-main .me-note { margin-top: 4px; text-align: start; }
.res-root .lv-side { display: grid; gap: 14px; min-width: 0; }
.res-root .lv-count { display: grid; gap: 10px; justify-items: center; padding: 16px 14px 14px; border-radius: 24px; background: rgba(255, 255, 255, .62); border: 1px solid var(--sk-line); box-shadow: 0 10px 24px rgba(var(--sk-rgb), .12); }
.res-root .lv-count-l { font-size: .8rem; font-weight: 800; color: var(--sage-700); }
.res-root .lv-tiles { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; width: 100%; max-width: 380px; }
.res-root .lv-t { display: grid; justify-items: center; gap: 1px; padding: 10px 4px 8px; border-radius: 16px; background: linear-gradient(180deg, #fff, var(--mint-50)); border: 1px solid var(--line); box-shadow: 0 4px 10px rgba(64, 105, 79, .08); }
.res-root .lv-t[hidden] { display: none; }
.res-root .lv-t b { font-size: 1.7rem; font-weight: 900; line-height: 1.2; color: var(--leaf-900); font-variant-numeric: tabular-nums; }
.res-root .lv-t i { font-style: normal; font-size: .68rem; font-weight: 700; color: var(--muted); }
.res-root .pd-live { margin-top: 4px; }
.res-root .pd-open { font-weight: 700; font-size: .76rem; color: var(--pd-mute); }
.res-root .lv-prev { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; font-size: .8rem; color: var(--sage-700); }
.res-root .lv-prev:hover { color: var(--link-strong); }
.res-root .lv-prev span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 80%; }
.res-root .lv-prev .ic { width: 15px; height: 15px; }
.res-root .rsv-live .rs-cta { margin-top: 18px; }
.res-root .rsv-live.is-upcoming .lv-count-l { color: var(--blush-text); }
.res-root .st-top-test { margin-top: 2px; }
@media (min-width: 900px) {
  .res-root .rsv-live { padding: 32px 32px 26px; }
  .res-root .lv-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: 36px; }
  .res-root .lv-main { justify-items: start; text-align: start; }
  .res-root .lv-top, .res-root .lv-main .st-meta { justify-content: flex-start; }
  .res-root .lv-main h2 { font-size: 2rem; }
}
@media (max-width: 600px) {
  .res-root .rsv-live { padding: 22px 14px 18px; }
  .res-root .lv-desc { -webkit-line-clamp: 2; font-size: .82rem; line-height: 1.8; }
  .res-root .lv-count { padding: 12px 10px 10px; gap: 8px; border-radius: 20px; }
  .res-root .lv-main h2 { font-size: 1.28rem; }
  .res-root .lv-t b { font-size: 1.4rem; }
  /* سکوی کارتِ زنده روی گوشی کوتاه‌تر: کارت از ~۷۸۰px به حدود ۶۸۰px می‌رسد */
  .res-root .pd-live { margin-top: 0; }
  .res-root .pd-live .pd-p1 .pd-base { height: 66px; }
  .res-root .pd-live .pd-p2 .pd-base { height: 48px; }
  .res-root .pd-live .pd-p3 .pd-base { height: 36px; }
  .res-root .lv-grid { gap: 14px; }
}
@media (prefers-reduced-motion: reduce) { .res-root .lv-pulse { animation: none; } }