/* =========================================================
   1) ساختار پایه آیتم مشاور
   - پایه تمام کارت‌ها
   - شامل ترنزیشن و بهینه‌سازی رندر
========================================================= */
.consultant-item {
    position: relative;
    transition: transform .35s ease, opacity .35s ease;
    will-change: transform, opacity;
}



/* =========================================================
   2) انیمیشن FLIP برای جابجایی نرم آیتم‌ها
========================================================= */
.flip-animate {
    transition: transform .45s cubic-bezier(.34,1.56,.64,1);
}



/* =========================================================
   3) انیمیشن ورود آیتم جدید
========================================================= */
.new-item {
    animation: popBounce .55s cubic-bezier(.34,1.56,.64,1) forwards;
}

@keyframes popBounce {
    0% {
        transform: scale(.6);
        opacity: 0;
    }

    60% {
        transform: scale(1.12);
        opacity: 1;
    }

    100% {
        transform: scale(1);
    }
}



/* =========================================================
   4) هایلایت آیتم آپدیت‌شده (طلایی)
========================================================= */
.highlight {
    animation: softGlow 1.2s ease;
}

@keyframes softGlow {
    50% {
        box-shadow: 0 0 20px rgba(255,215,0,.35);
    }
}



/* =========================================================
   5) افکت نفر اول (First Place)
========================================================= */
.first-place {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    border: 1.5px solid transparent;
    background: linear-gradient(#0c0c0c, #0c0c0c) padding-box, linear-gradient(135deg, #ffd700, #ffb703, #ffd700) border-box;
    box-shadow: 0 0 25px rgba(255,215,0,.25);
}

    .first-place::before {
        content: "";
        position: absolute;
        top: 0;
        left: -120%;
        width: 120%;
        height: 100%;
        background: linear-gradient( 120deg, transparent 30%, rgba(255,215,0,.45) 50%, transparent 70% );
        animation: shimmerLTR 2.4s linear infinite;
    }

@keyframes shimmerLTR {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(220%);
    }
}
/* =========================================================
نفر دوم (نقره‌ای) — نسخه اصلاح‌شده با شاین
========================================================= */
.second-place {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    border: 1.5px solid transparent;
    background: linear-gradient(#0c0c0c, #0c0c0c) padding-box, linear-gradient(135deg, #c0c0c0, #e0e0e0, #c0c0c0) border-box;
    box-shadow: 0 0 25px rgba(192,192,192,.25);
}

    .second-place::before {
        content: "";
        position: absolute;
        top: 0;
        left: -120%;
        width: 120%;
        height: 100%;
        background: linear-gradient( 120deg, transparent 30%, rgba(220,220,220,.45) 50%, transparent 70% );
        animation: shimmerLTR 2.4s linear infinite;
    }

/* =========================================================
⭐ نفر سوم (برنزی) — نسخه اصلاح‌شده با شاین
========================================================= */
.third-place {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    border: 1.5px solid transparent;
    background: linear-gradient(#0c0c0c, #0c0c0c) padding-box, linear-gradient(135deg, #cd7f32, #e69b4c, #cd7f32) border-box;
    box-shadow: 0 0 25px rgba(205,127,50,.25);
}

    .third-place::before {
        content: "";
        position: absolute;
        top: 0;
        left: -120%;
        width: 120%;
        height: 100%;
        background: linear-gradient( 120deg, transparent 30%, rgba(205,127,50,.45) 50%, transparent 70% );
        animation: shimmerLTR 2.4s linear infinite;
    }


/* =========================================================
   6) تاج نفر اول
========================================================= */
.crown {
    position: absolute;
    top: -12px;
    right: -12px;
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, #ffd700, #ffb703);
    mask: url('/user/icons/crown.svg') no-repeat center;
    -webkit-mask: url('/user/icons/crown.svg') no-repeat center;
    animation: crownFade .5s ease forwards;
}

@keyframes crownFade {
    from {
        opacity: 0;
        transform: scale(.6);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}



/* =========================================================
   7) شمارش معکوس
========================================================= */
.countdown {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.85);
    color: #fff;
    font-size: 110px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    pointer-events: none;
}



/* =========================================================
   8) پس‌زمینه و پنل لیگ
========================================================= */
.league-section {
    background: radial-gradient(circle at top, #141414, #0b0b0b);
    padding: 60px 0;
}

.league-panel {
    background: linear-gradient(180deg, #121212, #0c0c0c);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 18px;
    padding: 20px;
    box-shadow: 0 10px 40px rgba(0,0,0,.6);
}



/* =========================================================
   9) کارت آیتم لیگ
========================================================= */
.league-item {
    position: relative;
    background: rgba(255,255,255,.03);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 14px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    transition: all .35s ease;
    animation: fadeUp .6s ease;
}

    .league-item:hover {
        transform: translateY(-3px) scale(1.01);
        box-shadow: 0 15px 35px rgba(0,0,0,.8);
    }

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(25px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}



/* =========================================================
   10) آواتار و اطلاعات
========================================================= */
.league-avatar {
    width: 54px;
    height: 54px;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.15);
    margin-left: 12px;
}

.league-name {
    color: #fff;
    font-weight: 600;
    font-size: 15px;
}

.league-badge {
    font-size: 11px;
    padding: 5px 10px;
    border-radius: 20px;
    background: rgba(255,255,255,.08);
}

.badge-sale {
    color: #4dabf7;
    border: 1px solid rgba(77,171,247,.4);
}

.badge-rent {
    color: #63e6be;
    border: 1px solid rgba(99,230,190,.4);
}



/* =========================================================
   11) دکمه فعال‌سازی صدا
========================================================= */
.audio-unlock {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
}

    .audio-unlock button {
        width: 52px;
        height: 52px;
        border-radius: 50%;
        border: none;
        cursor: pointer;
        font-size: 22px;
        background: rgba(255,255,255,.08);
        color: #ffd700;
        backdrop-filter: blur(10px);
        box-shadow: 0 8px 25px rgba(0,0,0,.6);
        transition: all .25s ease;
    }

        .audio-unlock button:hover {
            transform: scale(1.08);
            background: rgba(255,215,0,.15);
        }



/* =========================================================
   12) نسخه موبایل
========================================================= */
@media (max-width: 768px) {
    .league-item {
        backdrop-filter: none;
        box-shadow: none;
    }

    .countdown {
        font-size: 70px;
    }
}



/* =========================================================
   13) شماره رتبه
========================================================= */
.rank-number {
    width: 32px;
    height: 32px;
    background: rgba(255,255,255,.08);
    border-radius: 50%;
    color: #fff;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 12px;
    font-size: 14px;
}



/* =========================================================
   14) افکت مدرن جابه‌جایی (Pop Lift)
========================================================= */
.move-pop {
    animation: movePop 0.65s cubic-bezier(.34,1.56,.64,1);
    z-index: 10;
}

@keyframes movePop {
    0% {
        transform: scale(1);
    }

    25% {
        transform: scale(1.08) translateY(-8px);
    }

    60% {
        transform: scale(1.03) translateY(4px);
    }

    100% {
        transform: scale(1);
    }
}

.move-pop img {
    animation: imgPop 0.65s cubic-bezier(.34,1.56,.64,1);
}

@keyframes imgPop {
    0% {
        transform: scale(1);
    }

    25% {
        transform: scale(1.18);
    }

    60% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}



/* =========================================================
   15) انیمیشن صعود و سقوط رتبه
   ⚠️ مهم: این بخش باید در انتهای فایل باشد
========================================================= */
.rank-up {
    background: linear-gradient(90deg, rgba(0,255,120,.25), transparent) !important;
}

.rank-down {
    background: linear-gradient(90deg, rgba(255,80,80,.25), transparent) !important;
}



/* =========================================================
   16) هایلایت جابه‌جایی (طلایی)
========================================================= */
.move-highlight {
    animation: moveHighlight 0.9s ease-out;
}

@keyframes moveHighlight {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 rgba(255,215,0,0);
    }

    20% {
        transform: scale(1.04);
        box-shadow: 0 0 18px rgba(255,215,0,.45);
    }

    50% {
        transform: scale(1.02);
        box-shadow: 0 0 12px rgba(255,215,0,.35);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 rgba(255,215,0,0);
    }
}


/* فلش رتبه */
/*.rank-arrow {
    position: absolute;
    left: -22px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    opacity: 0;
    transition: opacity .3s ease, transform .3s ease;
}*/

/* فلش رتبه – داخل خود کارت، کنار شماره */
.rank-arrow {
    width: 18px;
    height: 18px;
    margin-right: 8px;
    opacity: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    flex-shrink: 0;
}

.rank-up-arrow {
    opacity: 1;
    background-image: url('/user/league/arrow-up-green.png');
    filter: drop-shadow(0 0 6px #00ff80);
}


.rank-down-arrow {
    opacity: 1;
    background-image: url('/user/league/arrow-down-red.png');
}




/* هاله صعود */
.rank-up {
    box-shadow: 0 0 25px rgba(0,255,120,.45) !important;
    background: rgba(0,255,120,.15) !important;
}

/* هاله سقوط */
.rank-down {
    box-shadow: 0 0 25px rgba(255,80,80,.45) !important;
    background: rgba(255,80,80,.15) !important;
}

/* پالس جابه‌جایی */
.move-pulse {
    animation: pulseMove 1.8s ease;
}

@keyframes pulseMove {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.12);
    }

    100% {
        transform: scale(1);
    }
}

/* نفر اول */
.first-place {
    border: 2px solid #ffd700 !important;
    box-shadow: 0 0 25px rgba(255,215,0,.45) !important;
}

/* نفر دوم */
.second-place {
    border: 2px solid #c0c0c0 !important;
    box-shadow: 0 0 25px rgba(192,192,192,.45) !important;
}

/* نفر سوم */
.third-place {
    border: 2px solid #cd7f32 !important;
    box-shadow: 0 0 25px rgba(205,127,50,.45) !important;
}



.rank-down.zero-score {
    border: 2px solid rgba(255, 60, 60, 0.95) !important;
    background: rgba(255, 60, 60, 0.18) !important;
    box-shadow: 0 0 18px rgba(255, 60, 60, 0.45) !important;
}




/* فلش طلایی نفر اول */
.first-place .rank-up-arrow,
.first-place .rank-down-arrow {
    filter: drop-shadow(0 0 6px #ffd700);
}

/* فلش نقره‌ای نفر دوم */
.second-place .rank-up-arrow,
.second-place .rank-down-arrow {
    filter: drop-shadow(0 0 6px #c0c0c0);
}

/* فلش برنزی نفر سوم */
.third-place .rank-up-arrow,
.third-place .rank-down-arrow {
    filter: drop-shadow(0 0 6px #cd7f32);
}



/*new*/
.hero-clone {
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,.5);
    transition: transform 1.2s cubic-bezier(.34,1.56,.64,1), opacity .6s ease;
}

.move-morph {
    animation: morphSlideGlow 1.1s ease-out;
}

@keyframes morphSlideGlow {
    0% {
        transform: scale(0.92) translateY(12px);
        filter: brightness(0.8);
        box-shadow: 0 0 0 rgba(255,215,0,0);
    }

    25% {
        transform: scale(1.05) translateY(-8px);
        filter: brightness(1.15);
        box-shadow: 0 0 18px rgba(255,215,0,.35);
    }

    55% {
        transform: scale(1.02) translateY(4px);
        filter: brightness(1);
        box-shadow: 0 0 10px rgba(255,215,0,.25);
    }

    100% {
        transform: scale(1) translateY(0);
        filter: brightness(1);
        box-shadow: 0 0 0 rgba(255,215,0,0);
    }
}


/*new*/




.first-place.zero-score,
.second-place.zero-score,
.third-place.zero-score {
    border: 3px solid rgba(255, 60, 60, 1) !important;
    background: rgba(255, 60, 60, 0.22) !important;
    box-shadow: 0 0 22px rgba(255, 60, 60, 0.55) !important;
}



/* ZERO SCORE باید همیشه برنده شود */
.zero-score {
    border: 3px solid rgba(255, 60, 60, 1) !important;
    background: rgba(255, 60, 60, 0.22) !important;
    box-shadow: 0 0 22px rgba(255, 60, 60, 0.55) !important;
}














/* ============================
   MODERN CHANGE HIGHLIGHT
   ============================ */

/* آیتمی که تغییر کرده */
.change-hero {
    position: relative;
    z-index: 99999;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.35);
    background: rgba(255,255,255,0.05);
    transition: all 0.4s ease-out;
}

    /* پالس دور آیتم */
    .change-hero::after {
        content: "";
        position: absolute;
        inset: -6px;
        border-radius: 14px;
        border: 3px solid #6ecdc7;
        opacity: 0;
        animation: pulseBorder 1.2s ease-out forwards;
    }

@keyframes pulseBorder {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }

    40% {
        opacity: 1;
        transform: scale(1.05);
    }

    100% {
        opacity: 0.4;
        transform: scale(1);
    }
}

/* Scale مدرن */
.change-scale {
    animation: changeScale 0.9s cubic-bezier(.34,1.56,.64,1);
}

@keyframes changeScale {
    0% {
        transform: scale(0.85);
        opacity: 0.4;
    }

    40% {
        transform: scale(1.15);
        opacity: 1;
    }

    100% {
        transform: scale(1);
    }
}