body {
    font-family: sans-serif;
}

*[data-hidden=true] {
    display: none;
}

#main {
    max-width: 750px;
    margin-inline: auto;
}

row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

column, #grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

column.left {
    align-items: start;
}

.game-mode > button {
    min-width: 200px;
    padding-block: 4px;
}

.game-mode {
    font-size: 0.75em;
    gap: 2px;
    margin-block-end: 4px;
}

#grid {
    gap: 1px;
}

.grid-row {
    gap: 1px;
}

.cell {
    width: 8px;
    height: 8px;
    border: 1px solid #888;
}

.cell[data-state="player-win"] {
    background-color: gold;
}

.cell[data-state="player"] {
    background-color: #08f;
}

.cell[data-state="debug-target"] {
    background-color: red;
}

.cell[data-state="visited"] {
    background-color: #0f8;
}

.cell[data-state="empty"] {
    background-color: #ccc;
}

.cell[data-state="candidate"] {
    background-color: #f80;
}

.cell[data-border="highlight"] {
    border-color: #0ff;
}

.f3-info {
    font-size: 0.5em;
    font-family: monospace;
}

*[data-invisible="true"] {
    visibility: hidden;
}

.version-number {
    font-size: 0.5em;
}