table.board {
    border-collapse: separate;
    border-spacing: 0;
    margin: 0 auto;
}
.board td {
    border: 0;
    color: white;
}
.board td.cell { border: 1px solid gray; }
.board td.field-top { border-top: 1px solid silver; }
.board td.field-right { border-right: 1px solid silver; }
.board td.field-bottom { border-bottom: 1px solid silver; }
.board td.field-left { border-left: 1px solid silver; }
.board td.board-top { border-top: 1px solid white; }
.board td.board-right { border-right: 1px solid white; }
.board td.board-bottom { border-bottom: 1px solid white; }
.board td.board-left { border-left: 1px solid white; }

.board td.black { background-color: black; color: white; }
.board td.silver { background-color: silver; color: black; }
.board td.gray { background-color: gray; color: white; }
.board td.white { background-color: white; color: black; }
.board td.maroon { background-color: maroon; color: white; }
.board td.red { background-color: red; color: white; }
.board td.purple { background-color: purple; color: white; }
.board td.fuchsia { background-color: fuchsia; color: black;}
.board td.green { background-color: green; color: white; }
.board td.lime { background-color: lime; color: black;}
.board td.olive { background-color: olive; color: black; }
.board td.yellow { background-color: yellow; color: black; }
.board td.navy { background-color: navy; color: white; }
.board td.blue { background-color: blue; color: white; }
.board td.teal { background-color: teal; color: black; }
.board td.aqua { background-color: aqua; color: black; }

.board td.cell.locked { color: gray; }
.board td.cell.active { background-color: navy; }
.board td.cell.focused { border: 1px solid blue; }

section#controls {
    display: flex;
    flex-flow: row wrap;
    align-items: flex-start;
    gap: 12px 0;
    padding: 0;
    margin: 0;
}
section#controls fieldset {
    flex: 1 1 auto;
    margin: 0 12px;
}
section#controls fieldset.size2x4 {
    height: 180px;
}
section#controls fieldset.size2x3 {
    height: 120px;
}
section#controls fieldset.size2x2 {
    height: 80px;
}

@media screen and (max-width: 540px) {
    section#controls {
        flex-flow: column wrap;
    }
    section#controls fieldset,
    section#controls fieldset.size2x4,
    section#controls fieldset.size2x3,
    section#controls fieldset.size2x2 {
        flex: 0 0 auto;
        height: auto;
    }
}

.keypad td {
    border: 0;
    color: white;
    text-align: left;
}
.keypad button {
    width: 24px;
    height: 24px;
    margin: 4px;
}

.commands button {
    display: inline-block;
    margin: 4px;
}