#gameArea {
    width: 400px;
    height: 400px;
    border: 2px solid black;
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(10, 1fr);
    margin-bottom: 20px;
}

.grid-cell {
    border: 2px solid #000; /* Adds grid lines */
    display: flex;
    justify-content: center;
    align-items: center;
}

.grid-cell i {
    font-size: 40px; /* Adjust based on your grid size */
}


.character {
    background-color: lightblue;
}

.obstacle {
    background-color: orangered;
}

.goal {
    background-color: lightgreen;
}

.highlighted-move {
    color: green !important; /* Using !important to ensure it overrides other styles */
    font-weight: bold !important;
}