.playtime-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}



/* Individual leaderboard entries */

.card.playtime-card,
.card.playtime-card .card-body {
    border-radius: 10px;
    border: 1px solid rgba(140,200,255,.22);

    background: rgba(5,10,25,.35) !important;

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    color: var(--text-color-1);
}


.card.playtime-card {
    overflow: hidden;
    transition: all .2s ease;
}


.card.playtime-card:hover {
    transform: translateY(-3px);

    border-color: rgba(120,190,255,.65);

    box-shadow:
        0 8px 20px rgba(0,0,0,.45),
        inset 0 0 20px rgba(120,190,255,.08);
}


.card.playtime-card .card-body {
    padding: 8px 10px;
}



/* Rank */

.playtime-rank {
    width: 38px;
    min-width: 38px;
    text-align: center;
    font-size: 1rem;
    font-weight: 700;
}



/* Player avatar */

.playtime-avatar {
    width: 36px;
    height: 36px;

    border-radius: 8px;
    border: 2px solid rgba(140,200,255,.35);
}



/* Player name */

.playtime-name {
    font-size: .95rem;
    font-weight: 700;
    color: var(--text-color-1);

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    max-width: 150px;
}



/* Playtime */

.playtime-hours {
    margin-top: 2px;
    font-size: .8rem;
    color: var(--text-color-6);
}



/* Subtitle */

.playtime-subtitle {
    opacity: .8;
    margin-top: -5px;

    font-size: .9rem;
    letter-spacing: .4px;

    color: rgba(200,225,255,.9);
}

/* Top 3 leaderboard highlights */

/* Legendary players */

.card.playtime-card:nth-child(1) {

    border-color: rgba(255,215,0,.55);

    background:
        linear-gradient(
            90deg,
            rgba(255,215,0,.10),
            rgba(5,10,25,.35)
        ) !important;

    box-shadow:
        0 0 12px rgba(255,215,0,.14),
        inset 0 0 15px rgba(255,215,0,.05);
}

.card.playtime-card:nth-child(2) {

    border-color: rgba(220,220,230,.65);

    background:
        linear-gradient(
            90deg,
            rgba(220,220,230,.12),
            rgba(5,10,25,.35)
        ) !important;

    box-shadow:
        0 0 15px rgba(220,220,230,.15),
        inset 0 0 20px rgba(220,220,230,.05);
}



.card.playtime-card:nth-child(3) {

    border-color: rgba(205,127,50,.65);

    background:
        linear-gradient(
            90deg,
            rgba(205,127,50,.12),
            rgba(5,10,25,.35)
        ) !important;

    box-shadow:
        0 0 15px rgba(205,127,50,.15),
        inset 0 0 20px rgba(205,127,50,.05);
}

/* Your ranking */

.playtime-divider {
    margin: 30px 0 20px;
    opacity: .3;
}


.playtime-your-title {
    font-weight: 700;
    margin-bottom: 15px;
}


.card.your-ranking,
.card.your-ranking .card-body {
    border: 2px solid rgba(120,190,255,.55);

    background: rgba(5,10,25,.45) !important;

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}


.your-ranking .playtime-avatar {
    border-color: rgba(120,190,255,.65);
}





/* Main widget background */

.playtime-widget {
    background-image: url('/storage/img/minecraft-time-bg.webp');

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    border: 1px solid rgba(80,160,255,.45);

    border-radius: 12px;

    padding: 16px;

    box-shadow:
    0 0 18px rgba(80,160,255,.35),
    0 0 45px rgba(120,80,255,.18),
    inset 0 0 30px rgba(0,0,0,.45);

}

@media(max-width:768px) {

    .playtime-grid {
        grid-template-columns: 1fr;
    }


    .playtime-name {
        max-width: 120px;
    }

}
/* Playtime title */

.playtime-title {
    display: inline-flex;
    align-items: center;
    gap: .75rem;

    font-size: 1.75rem;
    font-weight: 900;
    letter-spacing: .7px;
}


.playtime-title i {
    font-size: 1.5rem;

    color: #9ed7ff;

    text-shadow:
        0 0 8px rgba(80,160,255,.8),
        0 0 18px rgba(120,80,255,.45);

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


.playtime-title > span {

    background: linear-gradient(
        180deg,
        #ffffff 0%,
        #b9ddff 45%,
        #719cff 100%
    );

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

}


@keyframes time-icon-glow {

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

    50% {
        filter: brightness(1.35);
    }

}
/* Timekeeper ambient glow */

.playtime-widget {
    animation: playtime-glow 6s ease-in-out infinite;
}


@keyframes playtime-glow {

    0%,100% {
        box-shadow:
            0 0 18px rgba(80,160,255,.30),
            0 0 45px rgba(120,80,255,.15),
            inset 0 0 30px rgba(0,0,0,.45);
    }


    50% {
        box-shadow:
            0 0 26px rgba(80,160,255,.50),
            0 0 60px rgba(120,80,255,.25),
            inset 0 0 35px rgba(0,0,0,.50);
    }

}
/* Top 3 medal glow */

.playtime-card:nth-child(1) .playtime-rank {
    filter:
        drop-shadow(0 0 5px rgba(255,215,0,.65));
}


.playtime-card:nth-child(2) .playtime-rank {
    filter:
        drop-shadow(0 0 8px rgba(220,220,230,.9));
}


.playtime-card:nth-child(3) .playtime-rank {
    filter:
        drop-shadow(0 0 8px rgba(205,127,50,.9));
}

/* #1 Legendary animation */

.playtime-card:nth-child(1) {
    animation: legendary-pulse 6s ease-in-out infinite;
}


@keyframes legendary-pulse {

    0%,100% {
        box-shadow:
            0 0 12px rgba(255,215,0,.12),
            inset 0 0 15px rgba(255,215,0,.04);
    }

    50% {
        box-shadow:
            0 0 18px rgba(255,215,0,.22),
            inset 0 0 20px rgba(255,215,0,.06);
    }

}