/* ===== WRAPPER ===== */
.mlb-container {
    margin: 30px auto;
    max-width: 900px;
}

/* ===== TABLE ===== */
.mlb-container table {
    width: 100%;
    border-collapse: collapse;
    font-family: "Segoe UI", sans-serif;
    background: #ffffff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 12px 35px rgba(0,0,0,0.08);
}

/* ===== HEADER ===== */
.mlb-container th {
    background: linear-gradient(135deg, #4f46e5, #6366f1);
    color: #fff;
    text-align: left;
    padding: 14px;
    font-size: 15px;
    font-weight: 600;
    position: sticky;
    top: 0;
    z-index: 2;
}

/* ===== ROWS ===== */
.mlb-container td {
    padding: 12px 14px;
    border-bottom: 1px solid #eee;
    font-size: 14px;
    color: #374151;
}

/* ===== HOVER EFFECT ===== */
.mlb-container tbody tr {
    transition: background 0.2s ease;
}

.mlb-container tbody tr:hover {
    background: #f9fafb;
}

/* ===== TOP 3 (SOFT PREMIUM COLORS) ===== */
.mlb-container tbody tr:nth-child(1) {
    background: rgba(255, 215, 0, 0.15); /* Gold soft */
}

.mlb-container tbody tr:nth-child(2) {
    background: rgba(192, 192, 192, 0.2); /* Silver */
}

.mlb-container tbody tr:nth-child(3) {
    background: rgba(205, 127, 50, 0.2); /* Bronze */
}

/* ===== RANK COLUMN ===== */
.mlb-container td:first-child {
    font-weight: bold;
    font-size: 15px;
}

/* ===== ZEBRA STRIPES ===== */
.mlb-container tbody tr:nth-child(even):not(:nth-child(-n+3)) {
    background: #fafafa;
}

/* ===== SHARE COLUMN ===== */
.mlb-container th.mlb-share,
.mlb-container td.mlb-share {
    text-align: center;
    width: 120px;
}

/* ===== WHATSAPP BUTTON ===== */
.mlb-whatsapp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #25D366;
    color: #fff;
    padding: 6px 12px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.25s ease;
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.25);
}

/* Icon */
.mlb-whatsapp-btn i {
    margin-right: 6px;
    font-size: 15px;
}

/* Hover */
.mlb-whatsapp-btn:hover {
    background: #1ebe5d;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(37, 211, 102, 0.35);
}

/* Click */
.mlb-whatsapp-btn:active {
    transform: scale(0.95);
}

/* ===== MOBILE ===== */
@media (max-width: 600px) {

    .mlb-container table,
    .mlb-container thead,
    .mlb-container tbody,
    .mlb-container th,
    .mlb-container td,
    .mlb-container tr {
        display: block;
    }

    .mlb-container thead {
        display: none;
    }

    .mlb-container tr {
        margin-bottom: 14px;
        background: #fff;
        border-radius: 10px;
        box-shadow: 0 5px 15px rgba(0,0,0,0.05);
        padding: 10px;
    }

    .mlb-container td {
        display: flex;
        justify-content: space-between;
        padding: 8px 10px;
        font-size: 13px;
        border: none;
    }

    .mlb-container td::before {
        font-weight: 600;
        color: #6b7280;
    }

    .mlb-container td:nth-child(1)::before { content: "Rank"; }
    .mlb-container td:nth-child(2)::before { content: "Name"; }
    .mlb-container td:nth-child(3)::before { content: "Quiz"; }
    .mlb-container td:nth-child(4)::before { content: "Score"; }
    .mlb-container td:nth-child(5)::before { content: "Date"; }
    .mlb-container td:nth-child(6)::before { content: "Share"; }

    .mlb-whatsapp-btn {
        font-size: 12px;
        padding: 5px 10px;
    }
}