.symbolsContainer {
    /* Centers the child perfectly within its parent */
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* Creates three columns */
    grid-gap: 20px;
    /* Space between cells */
    max-width: 300px;
    /* Adjust based on your design */
    margin: 0 auto;
    /* Center the grid */
    padding: 20px;
    /* Padding around the grid */
    border-radius: 10px;
    /* Optional: for rounded corners */
    background: rgba(255, 255, 255, 0.8);
    /* Optional: background color with a bit of transparency */
    align-self: center;
}

.symbol-cell {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 75px;
    /* Height of cells, adjust as needed */
    background-color: #f0f0f0;
    /* Cell background color */
    color: #333;
    /* Text color */
    font-size: 50px;
    /* Adjust the font size as needed */
    font-weight: bold;
    border-radius: 5px;
    /* Optional: for rounded cell corners */
    cursor: pointer;
    /* Change cursor to pointer to indicate clickable */
    transition: background-color .3s;
    /* Smooth background color transition on hover */
    transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
}

.symbol-cell-hidden {
    background-color: #333;
}

.symbol-cell-wrong {
    background-color: #ff0000;
}