/* =========================================================
   MYTHRA CRAFT — MASAÜSTÜ KREDİ LİDERLERİ V2

   Önceki "MASAÜSTÜ KREDİ LİDERLERİ" bloğunun tamamının
   yerine kullanılmalıdır. Hero CSS'sinden bağımsızdır.
   ========================================================= */

/* Telefon görünümünde kapalıdır; 640px ve üzerinde masaüstü yerleşimi kullanılır. */
.mythra-hero-leaderboards {
    display: none !important;
}

@media (min-width: 640px) {
    .mythra-hero-leaderboards {
        position: absolute !important;
        z-index: 34 !important;
        inset: 0 !important;
        display: block !important;
        pointer-events: none;
    }

    /*
     * Kartların merkeze bakan kenarı section içinde sabit kalır.
     * Ek genişlik yalnızca ekranın dış kanatlarına doğru büyür.
     */
    .mythra-donor-board {
        --board-start: #ffc800;
        --board-end: #ff8800;
        --board-rgb: 255, 166, 0;

        position: absolute !important;
        bottom: 92px !important;

        width: clamp(
            295px,
            calc(((100vw - 1170px) / 2) + 240px),
            370px
        ) !important;

        box-sizing: border-box;
        overflow: hidden;
        pointer-events: auto;

        border: 1px solid rgba(var(--board-rgb), 0.34);
        border-radius: 19px;
        color: #ffffff;

        background:
            radial-gradient(
                circle at 18% 0%,
                rgba(255, 200, 0, 0.16),
                transparent 42%
            ),
            linear-gradient(
                145deg,
                rgba(255, 200, 0, 0.10) 0%,
                rgba(255, 136, 0, 0.045) 45%,
                transparent 72%
            ),
            linear-gradient(
                180deg,
                rgba(31, 20, 8, 0.96) 0%,
                rgba(17, 10, 5, 0.97) 100%
            );

        box-shadow:
            inset 0 2px 0 rgba(255, 231, 145, 0.14),
            inset 2px 0 0 rgba(255, 200, 0, 0.045),
            inset -2px 0 0 rgba(85, 35, 0, 0.23),
            inset 0 -4px 0 rgba(69, 27, 0, 0.34),
            0 14px 30px rgba(0, 0, 0, 0.30),
            0 0 25px rgba(255, 136, 0, 0.09);

        transform: translateZ(0);
        transition:
            border-color 180ms ease,
            box-shadow 180ms ease;
    }

    /* Sol kart: iç kenarı eski 258px noktasında kalır. */
    .mythra-donor-board--month {
        right: calc(100% - 258px) !important;
        left: auto !important;
    }

    /* Sağ kart: iç kenarı eski 258px noktasında kalır. */
    .mythra-donor-board--all-time {
        right: auto !important;
        left: calc(100% - 258px) !important;
    }

    .mythra-donor-board:hover {
        border-color: rgba(255, 173, 0, 0.58);
        box-shadow:
            inset 0 2px 0 rgba(255, 237, 174, 0.17),
            inset 2px 0 0 rgba(255, 200, 0, 0.055),
            inset -2px 0 0 rgba(85, 35, 0, 0.23),
            inset 0 -4px 0 rgba(69, 27, 0, 0.34),
            0 14px 30px rgba(0, 0, 0, 0.29),
            0 0 34px rgba(255, 153, 0, 0.15);
    }

    /* =====================================================
       BAŞLIK
       ===================================================== */

    .mythra-donor-board__header {
        position: relative;
        overflow: hidden;

        display: flex;
        min-height: 60px;
        align-items: center;
        gap: 12px;
        padding: 10px 14px;

        background:
            linear-gradient(
                90deg,
                rgba(255, 200, 0, 0.15),
                rgba(255, 136, 0, 0.035) 72%,
                transparent
            );
    }

    /* Başlık ile liste arasındaki sabit, çok hafif taban çizgisi. */
    .mythra-donor-board__header::before {
        content: "";
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        height: 1px;
        background: rgba(255, 166, 0, 0.16);
    }

    /* Soldan sağa sürekli akan turuncu-altın ışık çizgisi. */
    .mythra-donor-board__header::after {
        content: "";
        position: absolute;
        z-index: 2;
        bottom: 0;
        left: -42%;

        width: 42%;
        height: 2px;

        background: linear-gradient(
            90deg,
            transparent 0%,
            rgba(255, 200, 0, 0.20) 18%,
            #ffc800 52%,
            #ff8800 76%,
            transparent 100%
        );

        box-shadow:
            0 0 7px rgba(255, 200, 0, 0.55),
            0 0 13px rgba(255, 136, 0, 0.24);

        animation: mythraDonorLineFlow 3.2s linear infinite;
        will-change: transform;
    }

    @keyframes mythraDonorLineFlow {
        from {
            transform: translate3d(0, 0, 0);
        }
        to {
            transform: translate3d(340%, 0, 0);
        }
    }

    .mythra-donor-board__icon {
        display: inline-grid;
        width: 39px;
        height: 39px;
        flex: 0 0 39px;
        place-items: center;

        border-radius: 11px;
        color: #2c1600;

        background:
            linear-gradient(
                180deg,
                rgba(255, 255, 255, 0.42),
                transparent 48%
            ),
            linear-gradient(135deg, var(--board-start), var(--board-end));

        box-shadow:
            inset 0 2px 0 rgba(255, 255, 255, 0.42),
            inset 0 -3px 0 rgba(126, 55, 0, 0.38),
            0 5px 11px rgba(255, 136, 0, 0.21);

        font-size: 15px;
    }

    .mythra-donor-board__header > span:last-child {
        display: flex;
        min-width: 0;
        flex-direction: column;
        align-items: flex-start;
    }

    .mythra-donor-board__header strong {
        overflow: hidden;
        max-width: 100%;
        color: rgba(255, 255, 255, 0.97);

        font-size: 14px;
        font-weight: 850;
        line-height: 1.25;
        text-overflow: ellipsis;
        white-space: nowrap;

        text-shadow:
            0 2px 6px rgba(0, 0, 0, 0.55),
            0 0 13px rgba(255, 166, 0, 0.12);
    }

    .mythra-donor-board__header small {
        margin-top: 3px;
        color: rgba(255, 191, 72, 0.72);
        font-size: 10.5px;
        font-weight: 680;
        letter-spacing: 0.015em;
        line-height: 1.2;
    }

    /* =====================================================
       OYUNCU LİSTESİ
       ===================================================== */

    .mythra-donor-board__list {
        display: grid;
        gap: 3px;
        margin: 0;
        padding: 10px 11px 13px;
        list-style: none;
    }

    .mythra-donor-row {
        display: grid;
        min-height: 26px;
        grid-template-columns: 24px minmax(0, 1fr) auto;
        align-items: center;
        column-gap: 9px;
        padding: 3px 8px;

        border-radius: 8px;
        background: rgba(255, 255, 255, 0.016);

        transition:
            background-color 160ms ease,
            transform 160ms ease;
    }

    .mythra-donor-row:hover {
        background: rgba(255, 166, 0, 0.105);
        transform: translateX(2px);
    }

    .mythra-donor-row.is-podium {
        background: linear-gradient(
            90deg,
            rgba(255, 200, 0, 0.13),
            rgba(255, 136, 0, 0.025) 75%,
            transparent
        );
    }

    .mythra-donor-rank {
        display: inline-grid;
        width: 21px;
        height: 21px;
        place-items: center;

        border-radius: 7px;
        color: rgba(255, 255, 255, 0.58);
        background: rgba(255, 255, 255, 0.05);

        font-size: 9px;
        font-weight: 850;
        line-height: 1;
    }

    .mythra-donor-row.is-podium .mythra-donor-rank {
        color: #2b1500;
        background: linear-gradient(135deg, var(--board-start), var(--board-end));

        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.42),
            inset 0 -2px 0 rgba(116, 46, 0, 0.27),
            0 0 11px rgba(255, 153, 0, 0.20);
    }

    .mythra-donor-name {
        overflow: hidden;
        color: rgba(255, 255, 255, 0.82);

        font-size: 11.5px;
        font-weight: 720;
        line-height: 1.2;
        text-align: left;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mythra-donor-name:hover {
        color: #ffc800;
    }

    .mythra-donor-total {
        margin-left: 6px;
        color: #ffb300;

        font-size: 10.5px;
        font-weight: 780;
        line-height: 1.2;
        text-align: right;
        white-space: nowrap;

        text-shadow: 0 0 10px rgba(255, 136, 0, 0.16);
    }

    .mythra-donor-board__empty {
        padding: 15px 10px;
        color: rgba(255, 190, 70, 0.58);
        font-size: 11px;
        font-weight: 680;
        text-align: center;
    }
}

/* =========================================================
   SABİT PANEL KOORDİNATLARI

   - Panel başlangıcı oyuncu sayısına bağlı değildir.
   - İki leaderboard başlığı da aynı sabit çizgiden başlar.
   - Yeni oyuncular eklendikçe listeler yalnızca aşağı büyür.
   - Gaming Gecesi 5. satırın altındaki sabit konumunu korur.
   ========================================================= */
@media (min-width: 640px) {
    #__heroSection .mythra-donor-board {
        top: calc(100% - 462px) !important;
        bottom: auto !important;
    }
}

@media (min-width: 1280px) {
    #__heroSection .mythra-desktop-hero-content {
        min-height: clamp(930px, calc(88vh + 250px), 1090px) !important;
        padding-bottom: 395px !important;
    }

    #__heroSection .mythra-gaming-night {
        top: auto !important;
        bottom: 92px !important;
    }
}

/* Hareket azaltma tercihi olan cihazlarda çizgi sabit kalır. */
@media (prefers-reduced-motion: reduce) {
    .mythra-donor-board__header::after {
        animation: none !important;
        left: 29%;
    }
}

/* =========================================================
   RESPONSIVE V2 — TABLET LİDER TABLOLARI
   640–1279px arasında kartlar hero dışına taşmaz; duyuru ve
   ana metinle çakışmadan normal sayfa akışında yer alır.
   ========================================================= */
@media (min-width: 640px) and (max-width: 1279px),
       (min-width: 1280px) and (max-width: 1400px) and (hover: none) and (pointer: coarse) {
    #__heroSection .mythra-hero-leaderboards {
        position: relative !important;
        z-index: 34 !important;
        inset: auto !important;
        display: grid !important;
        width: min(100%, 980px) !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 16px !important;
        margin: 34px auto 0 !important;
        pointer-events: auto !important;
    }

    #__heroSection .mythra-donor-board {
        position: relative !important;
        inset: auto !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    #__heroSection .mythra-gaming-night {
        grid-column: 1 / -1 !important;
    }
}

@media (min-width: 640px) and (max-width: 819px) {
    #__heroSection .mythra-hero-leaderboards {
        width: min(100%, 620px) !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 14px !important;
    }

    #__heroSection .mythra-gaming-night {
        grid-column: 1 !important;
    }
}