/* Game Grid Styling */
.game-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 0.75rem; 
    margin: 2rem auto; 
    max-width: 330px; 
}

.cell {
    width: 110px; 
    height: 110px; 
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 4rem; 
    font-weight: 700;
    cursor: pointer;
    border-radius: 0.75rem; 
    transition: background-color 0.2s ease, transform 0.1s ease;
}

.cell:hover:not(.filled) {
    transform: scale(1.03); 
}

.cell.x-player {
    color: #3f51b5; 
}

.cell.o-player {
    color: #f44336; 
}

/* Winning Line Highlight */
.cell.winning-cell {
    background-color: #81c784; 
    animation: pulse 1s infinite alternate;
}
body.dark .cell.winning-cell {
    background-color: #388e3c; 
}


@keyframes pulse {
    from { transform: scale(1); opacity: 1; }
    to { transform: scale(1.06); opacity: 0.8; } 
}


/* Game Status Text */
.status {
    font-size: 1.75rem; 
    font-weight: 600;
    margin-bottom: 2rem;
}

/* Score Display */
.score-display {
    color: #546e7a;
}
body.dark .score-display {
    color: #bdbdbd;
}

/* Game Buttons Container for centering */
.game-buttons-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap; 
    gap: 0.75rem; 
    margin-top: 1.5rem;
    /* FIX: Ensures 'Reset Scores' and 'Back to Modes' align perfectly */
    align-items: flex-start;
}

/* Light Mode Game Specific Colors */
.status {
    color: #37474f; 
}
.cell {
    background-color: #eceff1; 
    border: 1px solid #cfd8dc;
}
.cell:hover:not(.filled) {
    background-color: #e0e6eb; 
}

/* Dark Mode Game Specific Colors */
body.dark .status {
    color: #e0e0e0;
}
body.dark .cell {
    background-color: #3a3a3a; 
    border: 1px solid #546e7a;
}
body.dark .cell:hover:not(.filled) {
    background-color: #4a4a4a; 
}