#board{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;background:var(--accent);padding:10px;border-radius:14px;max-width:520px;margin:12px auto}
.cell{aspect-ratio:1;border-radius:50%;background:var(--hole);border:0;padding:0}
.cell.p0{background:var(--p0)}.cell.p1{background:var(--p1)}
.cell.win{box-shadow:0 0 0 4px var(--text)}
#board.mine .cell:not(.p0):not(.p1):hover{background:color-mix(in srgb,var(--hole),var(--text) 18%)}
.dot{display:inline-block;width:.9em;height:.9em;border-radius:50%;vertical-align:-.1em}
@media (max-width:560px){#board{gap:4px;padding:6px;border-radius:10px}}