/* 1. Responsive Wrapper */
.table-container {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 30px 0;
}

.girly-yearly-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 600px; /* Ensures it doesn't squish too much */
}

/* 2. Global Cell Spacing */
.girly-yearly-table th, 
.girly-yearly-table td {
    padding: 8px 10px;
    border: 2px solid #ffffff; /* The white grid lines */
    text-align: center;
}

/* 3. The Year Territory Logic (Scalable Formula) */
/* This styles blocks of 3 columns at a time */

/* ROSE TERRITORY (Columns 1-3, 7-9, 13-15...) */
.girly-yearly-table td:nth-child(6n+1),
.girly-yearly-table td:nth-child(6n+2),
.girly-yearly-table td:nth-child(6n+3) {
    background-color: #fae5e3; /* Soft Rose */
}
/* Alternate row tint for Rose Side */
.girly-yearly-table tr:nth-child(odd) td:nth-child(6n+1),
.girly-yearly-table tr:nth-child(odd) td:nth-child(6n+2),
.girly-yearly-table tr:nth-child(odd) td:nth-child(6n+3) {
    background-color: #fdf2f1; /* Lightest Rose */
}

/* MAUVE TERRITORY (Columns 4-6, 10-12, 16-18...) */
.girly-yearly-table td:nth-child(6n+4),
.girly-yearly-table td:nth-child(6n+5),
.girly-yearly-table td:nth-child(6n+6) {
    background-color: #c0d0b6; /* Soft green */
}
/* Alternate row tint for Mauve Side */
.girly-yearly-table tr:nth-child(odd) td:nth-child(6n+4),
.girly-yearly-table tr:nth-child(odd) td:nth-child(6n+5),
.girly-yearly-table tr:nth-child(odd) td:nth-child(6n+6) {
    background-color: #dde7d6; /* Lightest green */
}

/* 4. Header Styling */
.girly-yearly-table thead tr:first-child th {
    color: white;
    font-size: 1.1rem;
    padding: 8px;
}

/* Dynamic Header Colors */
.girly-yearly-table thead tr:first-child th:nth-child(odd) { background-color: #d19e99; } /* Rose Year Header */
.girly-yearly-table thead tr:first-child th:nth-child(even) { background-color: #95a986; } /* Green Year Header */

/* Sub-headers (Rank, Name, Occurrences) */
.girly-yearly-table thead tr:nth-child(2) th {
    background-color: #ffffff;
    color: #989898;
    font-weight: bold;
    border-bottom: 1px solid #989898;
}

.girly-yearly-table td:nth-child(3n+2) { /* Names left aligned and bold */
    font-weight: bold;
    text-align: left;
}


@media (max-width: 767px) {

    .table-scroll-wrapper {
        position: relative;
        margin: 30px 0;
    }

    .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border: 1px solid #d19e99;
    }

    /* Fixed right-edge fade */
    .table-scroll-wrapper::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        width: 36px;
        height: 100%;
        pointer-events: none;
        z-index: 5;
        background: linear-gradient(
            to right,
            rgba(255, 255, 255, 0),
            rgba(255, 255, 255, 1)
        );
    }

    /* Optional hint text */
    .table-scroll-wrapper::before {
        content: "Swipe for more columns ▶";
        display: block;
        text-align: right;
        font-size: 14px;
        color: #d19e99;
        font-weight: bold;
        padding: 6px 30px 0 0;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    .girly-yearly-table {
        min-width: 700px;
        font-size: 15px;
    }
}