/* parent interface */
#numMines, #timer {
    border: 0 !important;
    color: red;
    background-color: black;
    font-family: monospace;
    flex: 1;
    box-sizing: content-box;
    align-content: center;
}

#resetButton {
    font-size: 2em;
    border: 4px outset white;
    background-color: lightgray;
    cursor: pointer;
    flex: 1;
}

/* grid */
#gameBox {
    font-family: monospace;
    border-spacing: 0;
    font-weight: bold;
    border: 8px outset lightgray;
    width: fit-content;
    background-color: lightgray;
}

#gameBox div {
    width: 100%;
    box-sizing: border-box;
    border: 8px inset lightgray;
    text-align: center;
}

#statsRow {
    display: flex;
    width: 100%;
    height: 100%;
}


/* cells */
.one { color: blue }
.two { color: green }
.three { color: red }
.four { color: navy }
.five { color: saddlebrown }
.six { color: turquoise }
.seven { color: black }
.eight { color: darkgray }

#gameTable { border-spacing: 0; width: 100%; }
.selectable { cursor: pointer; }
.unselected { border: 4px outset white; }

#gameTable td {
    background-color: lightgray;
    box-sizing: border-box;
    height: 2em;
    min-width: 2em;
    text-align: center;
    vertical-align: middle;
    padding: 0;
}

.flagged {
    background-color: lightblue;
    border: 0.5px solid white;
}

.pulsing-mine {
    animation-name: pulse;
    animation-duration: 0.5s;
    animation-iteration-count: infinite;
}

@keyframes pulse {
    0% {background-color: lightgrey;}
    50% {background-color: red;}
    100% {background-color: lightgrey;}
}

.revealed {
    background-color: lightgray;
    border: 0.5px solid white;
    cursor: default;
}