/* mobile */
@media only screen and (max-width: 768px) {
    .container-top-game {
        margin: 0 auto;
    }

    /* grid start */
    .grid-container-top-game {
        display: grid;
        grid-template-rows: auto;
        padding: 5px;
        gap: 5px;
    }

    .grid-container>div {
        text-align: left;
        padding: 15px;
        border-radius: 5px;
    }

    .left,
    .up,
    .bottom {
        display: flex;
        justify-content: space-between;
    }

    .left {
        background-color: #536dfe;
        max-height: 10vh;
    }

    .up {
        max-height: 6vh;
        background-color: #ff8a65;
    }

    .bottom {
        max-height: 6vh;
        background-color: #ffc327;
    }

    .up .content,
    .bottom .content {
        display: flex;
        flex-direction: row;
        justify-content: start;
        align-items: center;
    }

    .content {
        gap: 10px;
    }

    .content h1 {
        font-size: medium;
        font-weight: bold;
    }

    .content h5 {
        font-size: x-small;
        font-weight: normal;
    }

    .left .profile {
        height: 7vh;
        width: 7vh;
        border-radius: 360px;
    }

    .profile {
        height: 5vh;
        width: 5vh;
        border-radius: 360px;
    }

    .medal {
        width: 5vw;
        height: auto;
    }

    .badge {
        width: 20vw;
    }

    .up .badge,
    .bottom .badge {
        width: 15vw;
    }

    .badge img {
        height: 100%;
    }

    .left .content .medal {
        position: relative;
        left: -20px;
        width: 4vh;
        height: 4vh;
    }

    /* grid end */

    /* table start */
    table {
        align-items: center;
        justify-content: center;
        width: 100%;
        border-collapse: collapse;
    }

    thead {
        width: 100%;
        height: 5vh;
    }

    th {
        background-color: #1e2022;
    }

    tr,
    td {
        align-items: center;
        text-align: center;
        padding: 8px;
    }

    .profil {
        display: flex;
        gap: 15px;
    }



    tr:nth-child(even) {
        background-color: #1e2022;
    }

    tr:nth-child(odd) {
        background-color: #2d3135;
    }

    .number h1 {
        font-size: 16px;
        font-weight: bold;
        text-align: center;
    }

    .avatar img {
        width: 25px;
        height: 25px;
        border-radius: 360px;
    }

    /* table end */

    /* flash sale start */
    .sale {
        margin-top: 5px;
        background-color: #1e2022;
        border-radius: 8px;
        margin: 10px;
    }

    .sale .header {
        padding: 10px;
        display: flex;
        gap: 15px;
    }

    .sale h1 {
        font-size: 18px;
        border-bottom: 1px solid white;
    }

    .sale .countdown {
        display: grid;
        gap: 5px;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        align-items: center;
    }

    .countdown .box {
        background-color: #2d3135;
        padding: 5px;
        border-radius: 3px;
    }

    .marquu {
        width: 100%;
        height: 13vh;
        gap: 10px;
        display: flex;
        overflow: hidden;
        white-space: nowrap;
    }

    .marquu .card {
        width: 25%;
        height: 9vh;
        background-color: #34373b;
        border-radius: 10px;
        display: flex;
        width: 100%;
        animation: marquee 10s linear infinite;
    }

    .marquu:hover .card {
        animation-play-state: paused;
    }

    @keyframes marquee {
        0% {
            transform: translateX(100%);
        }

        100% {
            transform: translateX(-100%);
        }
    }

    .card .foto {
        width: auto;
        height: 70%;
        margin: 10px;
    }

    .card img {
        width: 100%;
        height: 100%;
    }

    .card .isi {
        display: flex;
        flex-direction: column;
        width: 70%;
        height: 100%;
        align-items: left;
        justify-content: center;
        gap: 2px;
        font-size: xx-small;
    }

    .isi .progress {
        width: 90%;
        height: 1vh;
        background-color: #ebf4f6;
        border-radius: 5px;
        overflow: hidden;
        border: 0.5px solid white;
    }

    .progress .fill {
        width: 80%;
        height: 100%;
        background-color: #2d3135;
    }

    .isi img {
        height: auto;
        width: 30px;
        position: absolute;
        top: 20px;
        right: 8%;
    }

    /* flash sale end */
}

/* mobile end */

/* desktop start */
@media only screen and (min-width: 768px) {
    .container-top-game {
        width: 80%;
        margin: 0 auto;

        padding: 20px;
    }

    /* grid start */
    .left {
        grid-area: kiri;
        --tw-bg-opacity: 1;
        background-color: rgb(83 109 254 / var(--tw-bg-opacity));
        display: flex;
        height: 46vh;
        overflow: hidden;
    }

    .content {
        display: flex;
        gap: 15px;
    }

    .up .content,
    .bottom .content {
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .left .content {
        flex-direction: column;
    }

    .content .text {
        flex-direction: row;
    }

    .medal {
        width: 10vw;
        height: auto;
    }

    .left .content .profile {
        height: 25vh;
        width: 25vh;
        border-radius: 360px;
    }

    .left .content {
        position: absolute;
        top: 50px;
        width: 50px;
        height: 50px;
    }

    .medal {
        position: absolute;
        top: 20px;
        width: 50px;
        height: 50px;
    }

    .up .content .medal,
    .bottom .content .medal {
        width: 50px;
        height: 50px;
    }

    .bottom .content .profile,
    .up .content .profile {
        height: 15vh;
        width: 15vh;
        border-radius: 360px;
    }

    .left .badge {
        display: flex;
        height: 55vh;
    }

    .up .badge,
    .bottom .badge {
        display: flex;
        height: 23vh;
    }

    .badge img {
        height: 100%;
        margin-right: -50%;
    }

    .up {
        grid-area: atas;
        background-color: #ff8a65;
        display: flex;
        height: 21vh;
        overflow: hidden;
    }

    .bottom {
        grid-area: bawah;
        background-color: #ffc327;
        display: flex;
        height: 20vh;
        overflow: hidden;
    }

    .grid-container-top-game {
        display: grid;
        grid-template-areas:
            "kiri kiri kiri atas atas atas"
            "kiri kiri kiri bawah bawah bawah";
        gap: 10px;
        padding: 10px;
        max-height: 60vh;
    }

    .grid-container-top-game>div {
        text-align: left;
        padding: 20px;
        border-radius: 5px;
    }

    /* grid end */

    /* table start */
    table {
        align-items: center;
        justify-content: center;
        width: 100%;
        border-collapse: collapse;
    }

    thead {
        width: 100%;
        height: 5vh;
    }

    th {
        background-color: #1e2022;
    }

    tr,
    td {
        align-items: center;
        text-align: center;
        padding: 8px;
    }

    .profil {
        display: flex;
        gap: 15px;
    }



    tr:nth-child(even) {
        background-color: #1e2022;
    }

    tr:nth-child(odd) {
        background-color: #2d3135;
    }

    .number h1 {
        font-size: 32px;
        font-weight: bold;
        text-align: center;
    }

    .avatar img {
        width: 50px;
        height: 50px;
        border-radius: 360px;
    }

    /* table end */

    /* flash sale start */
    .sale {
        margin-top: 15px;
        background-color: #1e2022;
        border-radius: 5px;
    }

    .sale .header {
        padding: 10px;
        display: flex;
        gap: 10px;
    }

    .sale h1 {
        font-size: 38px;
        border-bottom: 1px solid #071952;
    }

    .sale .countdown {
        display: grid;
        gap: 5px;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        align-items: center;
    }

    .countdown .box {
        background-color: #2d3135;
        padding: 10px;
        border-radius: 3px;
    }

    .marquu {
        width: 100%;
        height: 25vh;
        gap: 10px;
        display: flex;
        overflow: hidden;
        white-space: nowrap;
    }

    .marquu .card {
        width: 25%;
        height: 20vh;
        background-color: #34373b;
        border-radius: 10px;
        display: flex;
        gap: 10px;
        animation: marquee 10s linear infinite;
    }

    .marquu:hover .card {
        animation-play-state: paused;
    }

    @keyframes marquee {
        0% {
            transform: translateX(100%);
        }

        100% {
            transform: translateX(-100%);
        }
    }

    .card .foto {
        width: auto;
        height: 80%;
        margin: 10px;
    }

    .card img {
        width: 100%;
        height: 100%;
    }

    .card .isi {
        display: flex;
        flex-direction: column;
        width: 70%;
        height: 100%;
        align-items: left;
        justify-content: center;
        gap: 5px;
    }

    .isi .progress {
        width: 90%;
        height: 3vh;
        background-color: #ebf4f6;
        border-radius: 5px;
        overflow: hidden;
        border: 0.5px solid white;
    }

    .progress .fill {
        width: 80%;
        height: 100%;
        background-color: #2d3135;
    }


    .isi img {
        height: auto;
        width: 60px;
        position: absolute;
        top: 20px;
        right: 8%;
    }

    /* flash sale end */
}

/* Background Colors for Rankings */
/* Background Colors for Rankings */
.gold-background {
    background-color: gold !important;
    position: relative;
    overflow: hidden; /* Ensure content stays within bounds */
}

.silver-background {
    background-color: silver !important;
    position: relative;
    overflow: hidden; /* Ensure content stays within bounds */
}

.bronze-background {
    background-color: #cd7f32 !important;
    position: relative;
    overflow: hidden; /* Ensure content stays within bounds */
}

/* Medal Images */
.gold-medal, .silver-medal, .bronze-medal {
    display: inline-block;
    margin-left: 10px;
    width: 30px; /* Default size */
    height: 30px; /* Default size */
    background-repeat: no-repeat;
    background-size: cover;
}

.gold-medal {
    background-image: url('/assets/img/medal.png');
}

.silver-medal {
    background-image: url('/assets/img/silver.png');
}

.bronze-medal {
    background-image: url('/assets/img/vbronze.png');
}

/* Larger size for desktop */
@media (min-width: 768px) {
    .gold-medal, .silver-medal, .bronze-medal {
        width: 50px; /* Size for desktop */
        height: 50px; /* Size for desktop */
    }
}

/* Rank Images */
.number-one-img, .number-two-img, .number-three-img {
    position: absolute;
    top: 50%;
    right: 10px; /* Adjusted to fit inside the tr */
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 1; /* Ensure the image is behind the text */
}

.number-one-img {
    background-image: url('/assets/img/24.png');
}

.number-two-img {
    background-image: url('/assets/img/25.png');
}

.number-three-img {
    background-image: url('/assets/img/26.png');
}

/* Larger size for desktop */
@media (min-width: 768px) {
    .number-one-img, .number-two-img, .number-three-img {
        width: 70px; /* Size for desktop */
        height: 70px; /* Size for desktop */
    }
}

/* Ensure the price text is above the background image */
.price {
    position: relative;
    z-index: 2; /* Ensure the price text is above the background image */
}