#board {
display: flex;
flex-direction: column;
width: fit-content;
}
#board .row {
display: flex;
justify-content: center;
align-self: center;
gap: .464em;
}
#board .cell {
box-sizing: border-box;
border: 1px solid #999;
font: inherit;
border-radius: 50%;
background-color: #eee;
width: 3em;
height: 3em;
color: transparent;
}
#board .cell:not(:disabled):hover {
outline: .2em solid rgba(0, 102, 0, .5);
z-index: 1;
}
#board .cell.cat {
background-color: #c96;
background-image: url("cat.svg");
background-repeat: no-repeat;
background-position: center;
background-size: 2.4em 2.4em;
}
#board .cell.cat.sleeping {
background-image: url("cat-sleeping.svg");
}
#board .cell.cat.wakeup {
background-image: url("cat-wakeup.svg");
}
#board .cell.blocked {
background-color: #060;
}
.cell.blocked {
background-color: #ccc;
}
iframe {
display: none;
}