@media (min-width: 769px) {
    #main-section {
        display: grid;
        grid-template-rows: 1fr 1fr;
        justify-items: center;
        align-items: center;
        height: 100%;
        max-height: 100%;
        width: 100%;
        overflow: hidden;
        row-gap: 1em;
    }

    #rank-section {
        height: 100%;
        max-height: 100%;
        overflow: hidden;
        width: 100%;
        display: grid;
        grid-template-rows: 1fr 9fr;
        align-items: center;
        justify-items: center;
    }

    #rank-title {
        text-align: center;
        font-size: 22px;
        color: #514897;
        font-weight: bold;
        background: linear-gradient(135deg, #6b5b9a, #8470b3);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    #rank-details {
        width: 85%;
        height: 90%;
        max-height: 90%;
        overflow: hidden;
        box-sizing: border-box;
        background: linear-gradient(145deg, #ffffff 0%, #f8f9ff 100%);
        border-radius: 16px;
        border: 2px solid rgba(107, 91, 154, 0.15);
        box-shadow: 0 8px 32px rgba(107, 91, 154, 0.12),
                    0 4px 16px rgba(0, 0, 0, 0.05);
        display: flex;
        flex-direction: column;
    }

    #rank-table {
        width: 100%;
        text-align: center;
        border-collapse: separate;
        border-spacing: 0;
        font-size: 14px;
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    #rank-table thead {
        flex-shrink: 0;
        display: table;
        width: 100%;
        table-layout: fixed;
    }

    #rank-table thead tr {
        background: linear-gradient(135deg, #6b5b9a 0%, #8470b3 100%);
        color: #ffffff;
        display: table-row;
    }

    #rank-table tbody {
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
        display: block;
    }

    #rank-table tbody::-webkit-scrollbar {
        width: 8px;
    }

    #rank-table tbody::-webkit-scrollbar-track {
        background: rgba(107, 91, 154, 0.05);
        border-radius: 4px;
    }

    #rank-table tbody::-webkit-scrollbar-thumb {
        background: linear-gradient(135deg, #6b5b9a, #8470b3);
        border-radius: 4px;
    }

    #rank-table tbody::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(135deg, #5a4a89, #7360a2);
    }

    #rank-table tbody tr {
        display: table;
        width: 100%;
        table-layout: fixed;
    }

    #rank-table th {
        padding: 14px 15px;
        font-weight: 600;
        letter-spacing: 0.5px;
    }

    #rank-table th:first-child {
        border-radius: 10px 0 0 0;
    }

    #rank-table th:last-child {
        border-radius: 0 10px 0 0;
    }

    #rank-table td {
        padding: 12px 15px;
        border-bottom: 1px solid rgba(107, 91, 154, 0.1);
        color: #2d3748;
    }

    th:nth-child(1), td:nth-child(1) {
        width: 20%;
    }

    th:nth-child(2), td:nth-child(2) {
        width: 50%;
    }

    th:nth-child(3), td:nth-child(3) {
        width: 30%;
    }

    #rank-table tbody tr {
        background-color: white;
        transition: all 0.2s ease;
    }

    #rank-table tbody tr.my-rank {
        background-color: rgba(107, 91, 154, 0.08);
        border-left: 4px solid #8470b3;
        box-shadow: 0 2px 12px rgba(107, 91, 154, 0.2);
        font-weight: 600;
    }

    #rank-table tbody tr:first-child td:first-child::before {
        content: "🥇 ";
    }

    #rank-table tbody tr:nth-child(2) td:first-child::before {
        content: "🥈 ";
    }

    #rank-table tbody tr:nth-child(3) td:first-child::before {
        content: "🥉 ";
    }
}


@media (max-width: 768px) {
    #main-section {
        width: 100%;
        overflow: hidden;
        display: grid;
        grid-auto-flow: row;
        grid-template-rows: 5fr 5fr;
        row-gap: 1em;
        justify-items: center;
        align-items: start;
    }

    #rank-section {
        width: 100%;
        height: 100%;
        max-height: 100%;
        overflow: hidden;
        display: grid;
        justify-items: center;
        align-items: center;
    }

    #rank-title {
        display: none;
    }

    #rank-details {
        width: 90%;
        height: 95%;
        max-height: 95%;
        overflow: hidden;
        background: linear-gradient(145deg, #ffffff 0%, #f8f9ff 100%);
        border-radius: 12px;
        border: 2px solid rgba(107, 91, 154, 0.12);
        box-shadow: 0 6px 24px rgba(107, 91, 154, 0.1),
                    0 3px 12px rgba(0, 0, 0, 0.04);
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
    }

    #rank-table {
        width: 100%;
        text-align: center;
        border-collapse: separate;
        border-spacing: 0;
        font-size: 11px;
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    #rank-table thead {
        flex-shrink: 0;
        display: table;
        width: 100%;
        table-layout: fixed;
    }

    #rank-table thead tr {
        background: linear-gradient(135deg, #6b5b9a 0%, #8470b3 100%);
        color: #ffffff;
        display: table-row;
    }

    #rank-table tbody {
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
        display: block;
    }

    #rank-table tbody::-webkit-scrollbar {
        width: 6px;
    }

    #rank-table tbody::-webkit-scrollbar-track {
        background: rgba(107, 91, 154, 0.05);
        border-radius: 3px;
    }

    #rank-table tbody::-webkit-scrollbar-thumb {
        background: linear-gradient(135deg, #6b5b9a, #8470b3);
        border-radius: 3px;
    }

    #rank-table tbody::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(135deg, #5a4a89, #7360a2);
    }

    #rank-table tbody tr {
        display: table;
        width: 100%;
        table-layout: fixed;
    }

    #rank-table th {
        padding: 10px 8px;
        font-weight: 600;
    }

    #rank-table th:first-child {
        border-radius: 8px 0 0 0;
    }

    #rank-table th:last-child {
        border-radius: 0 8px 0 0;
    }

    #rank-table td {
        padding: 10px 8px;
        border-bottom: 1px solid rgba(107, 91, 154, 0.08);
        color: #2d3748;
    }

    th:nth-child(1), td:nth-child(1) {
        width: 20%;
    }

    th:nth-child(2), td:nth-child(2) {
        width: 50%;
    }

    th:nth-child(3), td:nth-child(3) {
        width: 30%;
    }

    #rank-table tbody tr {
        background-color: white;
        transition: background 0.2s ease;
    }

    #rank-table tbody tr.my-rank {
        background-color: rgba(107, 91, 154, 0.08);
        border-left: 4px solid #8470b3;
        box-shadow: 0 2px 12px rgba(107, 91, 154, 0.2);
        font-weight: 600;
    }

    #rank-table tbody tr:first-child td:first-child::before {
        content: "🥇 ";
    }

    #rank-table tbody tr:nth-child(2) td:first-child::before {
        content: "🥈 ";
    }

    #rank-table tbody tr:nth-child(3) td:first-child::before {
        content: "🥉 ";
    }
}