.cell {
    border: 1px solid black;
    width: 30px;
    height: 30px;
    line-height: 30px;
    background: gray;
    position: relative;
    /* prevent text selection / touch callout on mobile (iOS) */
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none; /* disable the iOS callout on long press */
    -webkit-user-drag: none;
    touch-action: manipulation; /* allow panning/scrolling but make gestures simpler */
}

.cell.revealed, .cell[data-revealed="true"] {
    background-color: lightgray;
}

.cell.mine, .cell[data-mine="true"] {
    background-color: red;
}

.cell.mine::after, .cell[data-mine="true"]::after {
    content: "💣";
}
.cell.flagged::after, .cell[data-flagged="true"]::after {
    content: "🚩";
}


.cell::after {
    font-weight: bold;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    vertical-align: middle;
    line-height: inherit;
}

.cell[data-indicator="1"]::after {
    content: "1";
    color: blue;
}
.cell[data-indicator="2"]::after {
    content: "2";
    color: red;
}
.cell[data-indicator="3"]::after {
    content: "3";
    color: green;
}
.cell[data-indicator="4"]::after {
    content: "4";
    color: darkblue;
}
.cell[data-indicator="5"]::after {
    content: "5";
    color: darkred;
}
.cell[data-indicator="6"]::after {
    content: "6";
    color: cyan;
}
.cell[data-indicator="7"]::after {
    content: "7";
    color: black;
}
.cell[data-indicator="8"]::after {
    content: "8";
    color: magenta;
}
.cell[data-indicator="n"]::after {
    content: "n";
    color: blue;
}