/* Minesweeper: raised cells, red LED counters, smiley button */
.mine-window { min-width: 0; }
.mine-body {
    flex: 1; min-height: 0; overflow: auto; background: #c0c0c0; padding: 6px;
    display: flex; flex-direction: column; align-items: flex-start; user-select: none; -webkit-user-select: none;
}
.mine-panel, .mine-grid {
    border: 3px solid; border-color: #808080 #fff #fff #808080; background: #c0c0c0;
}
.mine-panel {
    display: flex; align-items: center; justify-content: space-between; padding: 4px 5px; margin-bottom: 6px;
    align-self: stretch; min-width: 0;
}
.mine-led {
    background: #000; color: #f00; border: 1px solid; border-color: #808080 #fff #fff #808080;
    font: 700 22px/26px "Lucida Console", "Courier New", monospace; letter-spacing: 1px;
    min-width: 42px; padding: 0 2px; text-align: center; text-shadow: 0 0 3px rgba(255, 0, 0, 0.6);
}
.mine-face {
    width: 28px; height: 28px; padding: 0; font-size: 17px; line-height: 1; cursor: pointer;
    background: #c0c0c0; border: 2px solid; border-color: #fff #808080 #808080 #fff;
}
.mine-face:active { border-color: #808080; }
.mine-grid { display: grid; width: max-content; touch-action: manipulation; }
.mine-cell {
    --cell: 16px; width: var(--cell); height: var(--cell); padding: 0; margin: 0; border-radius: 0;
    font: 700 calc(var(--cell) * 0.8)/1 Tahoma, Verdana, sans-serif; display: flex; align-items: center; justify-content: center;
    background: #c0c0c0; border: 2px solid; border-color: #fff #808080 #808080 #fff; cursor: default; color: #000;
}
@media (pointer: coarse) { .mine-cell { --cell: 24px; } }
.mine-cell.is-open { border: 1px solid #808080; border-width: 1px 0 0 1px; }
.mine-cell.is-boom { background: #f00; }
.mine-cell.is-wrong { text-decoration: line-through; }
.mine-cell[data-n="1"] { color: #0000ff; } .mine-cell[data-n="2"] { color: #008000; }
.mine-cell[data-n="3"] { color: #ff0000; } .mine-cell[data-n="4"] { color: #000080; }
.mine-cell[data-n="5"] { color: #800000; } .mine-cell[data-n="6"] { color: #008080; }
.mine-cell[data-n="7"] { color: #000; } .mine-cell[data-n="8"] { color: #808080; }
.mine-cell:focus-visible { outline: 1px dotted #000; outline-offset: -4px; }