#game {
    margin: 0 auto;
}

/**
* Styles for the puzzle
*/

#puzzle {
    text-align: center;
}

#puzzle > div { /* rows */
    width: 100%;
    margin: 0 auto;
}

.puzzleSquare {
    margin: 2px;
    padding: 0;
    width: 34px;
    height: 34px;
    border: 1px solid;
    border-radius: 3px;
    text-align:center;
    font: 19px sans-serif;
    text-transform: uppercase;
    background:#222;
    border-color: #222;
    color: #fff;
}

@media only screen and (min-device-width: 380px) and (max-device-width: 400px) {
    .puzzleSquare {
        width: 32px;
        height: 32px;
        font: 17px sans-serif;
    }
}

@media only screen and (min-device-width: 340px) and (max-device-width: 380px) {
    .puzzleSquare {
        width: 28px;
        height: 28px;
        font: 15px sans-serif;
    }
}

@media only screen and (max-device-width: 340px) {
    .puzzleSquare {
        width: 26px;
        height: 26px;
        font: 14px sans-serif;
    }
}

button::-moz-focus-inner {
    border: 0;
}

#puzzle .selected {
    background-color: rgb(80, 80, 80);
}

#puzzle .found {
    /* background-color: rgb(84, 171, 180); */
    background-color: rgb(29, 161, 242);
    color: #222;
}

#puzzle .solved {
    background-color: purple;
    color: white;
}

/* #puzzle .complete {
    background-color: rgba(0, 180, 65);
} */



/**
* Styles for the word list
*/

#words {
	padding: 0;
	list-style: none;
    pointer-events: none;
}

#words li {
    display: inline-block;
	margin: 2px 0px;
	padding: 0;
}

.wordFound {
    text-decoration: line-through;
    color: gray;
}

input {
    display: block;
    background-color: rgba(0,0,0,0);
    border: none;
	max-width: 105px;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
    word-wrap: break-word;
    word-break: break-all;
    font-size: 18px;
    color: #222;
}


/**
* Styles for dark mode
*/

@media (prefers-color-scheme: dark) {
    .puzzleSquare {
        background:#fff;
        border-color: #fff;
        color: #222;
    }

    #puzzle .found {
        color: #fff;
    }

    #puzzle .selected {
        background-color: rgb(192, 192, 192);
    }

    input {
        color: #fff;
    }
}