/* Game Stats - Filter Buttons & Grid Layouts */

/* Game filter buttons bar */
.game-stat-filters {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 20px 0;
    flex-wrap: wrap;
}

.game-stat-filter-btn {
    padding: 8px 20px;
    border-radius: 8px;
    border: 2px solid #666;
    background: transparent;
    color: #999;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.game-stat-filter-btn:hover {
    border-color: #999;
    color: #ccc;
}

.game-stat-filter-btn.active {
    border-color: #ff8c00;
    color: #ff8c00;
    background: rgba(255, 140, 0, 0.1);
}

/* Game overview grid (Game | Name | WRs | Maps) */
.game-overview-grid {
    grid-template-columns: 60px 1fr 80px 80px;
    gap: 8px;
}

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

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

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

/* Player grid (Player | Value) — for most-wrs and most-current */
.game-player-grid {
    grid-template-columns: 1fr 80px;
    gap: 8px;
}

.game-player-grid > :nth-child(1) { text-align: left; }
.game-player-grid > :nth-child(2) { text-align: center; }

/* Unique maps grid (Player | Maps | WRs) */
.game-unique-grid {
    grid-template-columns: 1fr 80px 80px;
    gap: 8px;
}

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

/* Game badge in overview/dominant tables */
.game-stat-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
}

.game-stat-badge-TMNF {
    background: rgba(76, 175, 80, 0.2);
    color: #4caf50;
}

.game-stat-badge-TM2 {
    background: rgba(33, 150, 243, 0.2);
    color: #2196f3;
}

.game-stat-badge-TMT {
    background: rgba(255, 152, 0, 0.2);
    color: #ff9800;
}

.game-stat-badge-TMUF {
    background: rgba(156, 39, 176, 0.2);
    color: #ce93d8;
}

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

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

    .game-player-grid {
        grid-template-columns: 1fr 65px;
        gap: 4px;
    }

    .game-unique-grid {
        grid-template-columns: 1fr 65px 65px;
        gap: 4px;
    }

    .game-stat-filter-btn {
        padding: 6px 14px;
        font-size: 0.8rem;
    }
}

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

    .game-dominant-grid {
        grid-template-columns: 45px 1fr 70px 50px;
    }

    .game-player-grid {
        grid-template-columns: 1fr 55px;
    }

    .game-unique-grid {
        grid-template-columns: 1fr 55px 55px;
    }

    .game-stat-filter-btn {
        padding: 5px 10px;
        font-size: 0.75rem;
    }
}