body {
    font-family: sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #f0f0f0;
}

#board-container {
    display: grid;
    border: 2px solid #333;
    background-color: #008000; /* Green board */
    width: min(90vw, 400px); /* Max width for larger screens */
    height: min(90vw, 400px); /* Max height for larger screens */
}

.cell {
    width: 100%; /* Take full width of grid cell */
    height: 100%; /* Take full height of grid cell */
    border: 1px solid #333;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

/* Ensure grid columns adapt to cell size */
#board-container {
    grid-template-columns: repeat(auto-fit, minmax(min(10vw, 50px), 1fr));
}

.cell:hover {
    background-color: #009a00;
}

.stone {
    width: 80%;
    height: 80%;
    border-radius: 50%;
}

.black {
    background-color: #000;
}

.white {
    background-color: #fff;
}

.game-info {
    margin-bottom: 20px;
    text-align: center;
}

#game-message {
    font-weight: bold;
    min-height: 1.2em;
}

#solution-display {
    display: none;
}

@media (max-width: 600px) {
    h1 {
        font-size: 1.5em;
    }

    .game-info p, .game-info button {
        font-size: 0.9em;
    }

    /* Further adjustments for smaller screens if necessary */
}