/* PERBAIKAN RESPONSIVE MVP - VERSI AMAN */

/* Tabel bawah dikembalikan ke bentuk tabel normal */
.leaderboard-table {
    display: table !important;
    width: 100% !important;
    min-width: 560px !important;
    table-layout: auto !important;
    border-collapse: collapse !important;
}

.leaderboard-table thead {
    display: table-header-group !important;
}

.leaderboard-table tbody {
    display: table-row-group !important;
}

.leaderboard-table tr {
    display: table-row !important;
    width: auto !important;
    min-height: 0 !important;
}

.leaderboard-table th,
.leaderboard-table td {
    display: table-cell !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 10px 8px !important;
    vertical-align: middle !important;
    box-sizing: border-box !important;
}

.leaderboard-scroll {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
    scrollbar-gutter: auto !important;
}

/* Tablet */
@media (max-width: 900px) {
    .leaderboard-summary {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .leaderboard-top-card {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 175px !important;
        padding: 14px 8px !important;
        border-radius: 16px !important;
        box-sizing: border-box !important;
    }

    .leaderboard-scroll {
        height: 450px !important;
    }
}

/* HP */
@media (max-width: 600px) {
    .leaderboard-summary {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 9px !important;
        width: 100% !important;
        padding: 0 !important;
        align-items: stretch !important;
    }

    .leaderboard-top-card {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 145px !important;
        padding: 10px 6px !important;
        border-radius: 15px !important;
        gap: 4px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    /* Kartu peringkat ketiga di tengah */
    .leaderboard-top-card:nth-child(3) {
        grid-column: 1 / -1 !important;
        width: calc(50% - 5px) !important;
        justify-self: center !important;
    }

    .leaderboard-medal {
        width: 39px !important;
        height: 39px !important;
        min-width: 39px !important;
        font-size: 19px !important;
        margin: 0 auto 3px !important;
    }

    .leaderboard-top-card span {
        font-size: 9px !important;
        line-height: 1.15 !important;
        margin: 0 !important;
    }

    .leaderboard-top-card h3 {
        font-size: 14px !important;
        line-height: 1.15 !important;
        margin: 3px 0 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 100% !important;
    }

    .leaderboard-top-card a {
        font-size: 10px !important;
        line-height: 1.15 !important;
        margin: 0 !important;
    }

    .leaderboard-top-card strong {
        font-size: 20px !important;
        line-height: 1 !important;
        margin-top: 4px !important;
    }

    .leaderboard-panel {
        padding: 10px !important;
        border-radius: 15px !important;
        box-sizing: border-box !important;
    }

    .leaderboard-scroll {
        width: 100% !important;
        height: 390px !important;
        overflow-x: auto !important;
        overflow-y: auto !important;
    }

    .leaderboard-table {
        min-width: 560px !important;
    }

    .leaderboard-table th,
    .leaderboard-table td {
        padding: 9px 7px !important;
        font-size: 11px !important;
        white-space: nowrap !important;
    }
}
/* KECILKAN JUDUL SAVAGE KHUSUS HP */
@media screen and (max-width: 600px) {
  body .leaderboard-hero {
    min-height: 0 !important;
    height: 115px !important;
    padding: 12px 8px !important;
    margin: 8px 0 !important;
    border-radius: 14px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  body .leaderboard-hero .eyebrow,
  body .leaderboard-hero .badge {
    padding: 5px 12px !important;
    margin: 0 0 8px !important;
    font-size: 8px !important;
    line-height: 1 !important;
  }

  body .leaderboard-hero h1 {
    margin: 0 !important;
    font-size: 25px !important;
    line-height: 1 !important;
  }

  body .leaderboard-hero::after {
    width: 70px !important;
    height: 3px !important;
    bottom: 7px !important;
  }
}