/* Environment Stats — Page-specific grid layouts */

/* Enviro overview grid (Enviro icon+name | WRs | Maps) */
.enviro-overview-grid {
    grid-template-columns: 1fr 80px 80px;
    gap: 8px;
}

.enviro-overview-grid > :nth-child(1) { text-align: left; }
.enviro-overview-grid > :nth-child(2) { text-align: center; }
.enviro-overview-grid > :nth-child(3) { text-align: center; }

/* Dominant per enviro (Enviro | Player | WRs/Maps | %) */
.enviro-dominant-grid {
    grid-template-columns: 140px 1fr 100px 70px;
    gap: 8px;
}

.enviro-dominant-grid > :nth-child(1) { text-align: left; }
.enviro-dominant-grid > :nth-child(2) { text-align: left; }
.enviro-dominant-grid > :nth-child(3) { text-align: center; }
.enviro-dominant-grid > :nth-child(4) { text-align: center; }

/* Enviro cell in table rows (icon + name inline) */
.enviro-cell {
    display: flex;
    align-items: center;
    gap: 6px;
}

.enviro-cell img {
    height: 20px;
    width: auto;
}

/* Small enviro icon in filter buttons */
.enviro-filter-icon {
    height: 18px;
    width: auto;
    vertical-align: middle;
    margin-right: 4px;
}

/* Filter buttons that contain an enviro icon use inline-flex */
#enviro-filters .game-stat-filter-btn[data-action="enviro"] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Responsive */
@media (max-width: 768px) {
    .enviro-overview-grid {
        grid-template-columns: 1fr 60px 60px;
        gap: 4px;
    }

    .enviro-dominant-grid {
        grid-template-columns: 110px 1fr 80px 55px;
        gap: 4px;
    }

    .enviro-cell img {
        height: 16px;
    }

    .enviro-filter-icon {
        height: 15px;
    }
}

@media (max-width: 480px) {
    .enviro-overview-grid {
        grid-template-columns: 1fr 50px 50px;
    }

    .enviro-dominant-grid {
        grid-template-columns: 90px 1fr 70px 48px;
    }

    .enviro-cell img {
        height: 14px;
    }

    .enviro-filter-icon {
        height: 13px;
    }
}