.richest-container {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    padding: 28px 20px 28px;

    border: 1px solid #b89a3c;

    box-shadow:
        0 0 18px rgba(212,175,55,0.35),
        0 0 40px rgba(212,175,55,0.15),
        inset 0 0 25px rgba(212,175,55,0.08);

    background-image:
        linear-gradient(
            rgba(0,0,0,0.55),
            rgba(0,0,0,0.55)
        ),
        url('/storage/img/minecraft-gold-bg.webp');

    background-size: cover;
    background-position: center;
}

/* Treasure glow animation */
.richest-container {
    animation: richest-glow 6s ease-in-out infinite;
}

@keyframes richest-glow {

    0%, 100% {
        box-shadow:
            0 0 18px rgba(212,175,55,0.30),
            0 0 40px rgba(212,175,55,0.12),
            inset 0 0 25px rgba(212,175,55,0.06);
    }

    50% {
        box-shadow:
            0 0 25px rgba(212,175,55,0.45),
            0 0 55px rgba(212,175,55,0.20),
            inset 0 0 30px rgba(212,175,55,0.10);
    }

}

/* Player cards */
.richest-card {
    position: relative;
    overflow: hidden;

    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(4px);

    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;

    transition: all 0.2s ease;
}


.richest-card .card-body {
    position: relative;
    z-index: 1;
    background: transparent;
    padding: 10px 14px;
}


.richest-card:hover {
    transform: translateY(-2px);
    background: rgba(0,0,0,0.70);
    border-color: rgba(255,255,255,0.18);
}


/* Rank */
.rank-number {
    min-width: 35px;
    font-weight: bold;
}


.player-name {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}


/* Trophy colors */
.richest-gold {
    color: #ffd700;
}

.richest-silver {
    color: #c0c0c0;
}

.richest-bronze {
    color: #cd7f32;
}


/* Top 3 players */
.richest-first {
    border-left: 4px solid #ffd700;
    background: rgba(255,215,0,0.18);
    box-shadow:
        0 0 12px rgba(255,215,0,0.25),
        inset 0 0 20px rgba(255,215,0,0.08);
}


.richest-second {
    border-left: 4px solid #c0c0c0;
    background: rgba(192,192,192,0.14);
    box-shadow:
        0 0 10px rgba(192,192,192,0.20),
        inset 0 0 20px rgba(192,192,192,0.06);
}


.richest-third {
    border-left: 4px solid #cd7f32;
    background: rgba(205,127,50,0.14);
    box-shadow:
        0 0 10px rgba(205,127,50,0.20),
        inset 0 0 20px rgba(205,127,50,0.06);
}


/* Logged in player's rank */
.richest-you {
    border-left: 4px solid var(--color-2);
    background: rgba(48,128,72,0.18);
}


/* Separator */
.richest-separator {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0 10px;

    font-size: 0.85rem;
    font-weight: bold;
    text-transform: uppercase;

    opacity: 0.8;
}


.richest-separator::before,
.richest-separator::after {
    content: "";
    flex: 1;
    height: 1px;
    background: currentColor;
}
/* Richest Players heading */
.richest-title {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    font-size: 1.75rem;
    font-weight: 900;
    letter-spacing: .7px;
}


.richest-title i {
    font-size: 1.55rem;
    color: #d4af37;

    text-shadow:
        0 0 6px rgba(255,215,0,.55),
        0 0 14px rgba(255,180,0,.35);

    animation: gem-glow 4s ease-in-out infinite;
}


.richest-title > span {
    background: linear-gradient(
        180deg,
        #fff7d1 0%,
        #e8c866 45%,
        #b8862c 100%
    );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


/* subtle gem shimmer */
@keyframes gem-glow {

    0%, 100% {
        filter: brightness(1);
    }

    50% {
        filter: brightness(1.35);
    }

}

/* Tighten Richest title spacing */
.richest-container .section-title {
    margin-top: -12px;
    margin-bottom: 8px;
}

/* Keep Minecraft balance and site tokens together */
.richest-balances {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    white-space: nowrap;
}

@media screen and (max-width: 576px) {
    .richest-balances {
        margin-left: 6px;
        font-size: 0.82rem;
        letter-spacing: -0.2px;
    }

    .richest-card .card-body > .d-flex {
        flex-wrap: nowrap;
        min-width: 0;
    }

    .richest-card .card-body > .d-flex > .d-flex:first-child {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
    }

    .richest-card .player-name {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}