/* Body styling: font and centering */
body {
    font-family: Arial, sans-serif;
    text-align: center;
    margin: 20px;
}

/* The board container: grid layout for 6 rows */
#board {
    display: grid;
    justify-content: center; /* horizontal centering */
    grid-template-rows: repeat(6, 50px); /* 6 rows of 50px each */
    gap: 5px; /* space between rows */
    margin-bottom: 20px;
}

/* Each row of the board: grid of 5 cells */
.row {
    display: grid;
    grid-template-columns: repeat(5, 50px); /* 5 columns per row */
    gap: 5px; /* space between cells */
}

/* Individual cell styling */
.cell {
    border-radius: 50%;       /* makes it circular */
    border: 1px solid #000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.2em;
    text-transform: uppercase; /* convert letters to uppercase */
}



/* Feedback colors for guesses */
.green { background-color: #6aaa64; color: white; }   /* Correct letter & position */
.yellow { background-color: #c9b458; color: white; } /* Correct letter, wrong position */
.gray { background-color: #787c7e; color: white; }   /* Letter not in word */