.minesweeper-page {
    padding: 20px 24px 44px;
    color: #071126;
}

.arcade-back {
    display: inline-block;
    margin-bottom: 20px;
    font: 12px/1.5 "MS Gothic", "Courier New", monospace;
}

.minesweeper {
    --cell-size: 32px;
    width: max-content;
    max-width: 100%;
    margin: 0 auto;
    padding: 5px;
    border: 3px solid;
    border-color: #fff #505454 #505454 #fff;
    background: #c5c8c8;
    box-shadow: 3px 3px 0 #071126;
    font: 13px/1.4 "MS Gothic", "Courier New", monospace;
    letter-spacing: 0;
}

.mine-titlebar {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 31px;
    padding: 4px 8px;
    color: #fffef0;
    background: #00006b;
    border-bottom: 2px solid #b52f2a;
}

.mine-titlebar > img { filter: invert(1); }

.mine-titlebar h1 {
    margin: 0;
    color: inherit;
    font: 700 15px/1.4 "MS Gothic", "Courier New", monospace;
    letter-spacing: 0;
}

.mine-titlebar > span {
    margin-left: auto;
    font-size: 10px;
    white-space: nowrap;
}

.mine-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 3px;
}

.mine-difficulty {
    display: grid;
    gap: 4px;
    min-width: 0;
    font-size: 11px;
}

.mine-difficulty select {
    width: 176px;
    max-width: 100%;
    height: 34px;
    padding: 4px;
    color: #071126;
    background: #fffef0;
    border: 2px inset #eee;
    border-radius: 0;
    font: 12px "MS Gothic", "Courier New", monospace;
}

.mine-tools, .mine-modes {
    display: flex;
    align-items: center;
    gap: 3px;
}

.mine-tools { gap: 10px; }

.minesweeper .mine-tool {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    padding: 4px;
    border: 2px solid;
    border-color: #fff #626565 #626565 #fff;
    border-radius: 0;
    background: #c5c8c8;
    box-shadow: none;
    cursor: pointer;
}

.minesweeper .mine-tool:hover:not(:disabled) { background: #dadddd; }

.minesweeper .mine-tool:active:not(:disabled),
.mine-modes .mine-tool[aria-pressed="true"] {
    border-color: #626565 #fff #fff #626565;
    background: #e2e5e0;
}

.mine-modes .mine-tool[aria-pressed="true"] { box-shadow: inset 0 -3px #b52f2a; }
.minesweeper .mine-tool:disabled { cursor: default; opacity: 0.5; }
.minesweeper img { display: block; flex-shrink: 0; }

.mine-scoreboard {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 9px;
    padding: 8px 10px;
    border: 2px solid;
    border-color: #7b8080 #fff #fff #7b8080;
}

.mine-stat { display: grid; gap: 3px; text-align: center; }
.mine-stat > span { font-size: 10px; font-weight: 700; }

.mine-counter {
    display: block;
    width: 68px;
    height: 37px;
    padding: 1px 4px;
    border: 2px inset #838686;
    background: #171717;
    color: #ff635d;
    font: 700 28px/31px "Courier New", monospace;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
    text-align: center;
}

.minesweeper .mine-restart { width: 42px; height: 42px; }
.mine-counter.is-wide { font-size: 22px; }

.mine-board-scroll {
    max-width: 100%;
    overflow: auto;
    overscroll-behavior-x: contain;
    border: 3px solid;
    border-color: #7b8080 #fff #fff #7b8080;
    background: #a6abab;
}

.mine-board {
    width: calc(var(--columns, 9) * var(--cell-size));
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}

.mine-row {
    display: grid;
    grid-template-columns: repeat(var(--columns, 9), var(--cell-size));
    height: var(--cell-size);
}

.mine-cell-wrap { width: var(--cell-size); height: var(--cell-size); }

.minesweeper .mine-cell {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 3px solid;
    border-color: #f8faf5 #858a8a #858a8a #f8faf5;
    border-radius: 0;
    background: #c5c8c8;
    box-shadow: none;
    font: 700 20px/1 "Courier New", monospace;
    cursor: pointer;
    -webkit-touch-callout: none;
    transition: none;
}

.mine-cell img { width: 18px; height: 18px; pointer-events: none; }
.mine-cell:hover:not(.is-open):not([aria-disabled="true"]) { background: #dce1dd; }
.mine-cell:active:not(.is-open):not([aria-disabled="true"]) { border-color: #858a8a; }

.minesweeper .mine-cell.is-open {
    border: 1px solid #979e9e;
    background: #daddda;
    cursor: default;
}

.minesweeper .mine-cell.is-hit { background: #ef7266; }
.minesweeper .mine-cell.is-wrong { background: #edcda3; }
.mine-cell.is-wrong img:last-child { position: absolute; width: 24px; height: 24px; }
.mine-cell[data-value="1"] { color: #0035a0; }
.mine-cell[data-value="2"] { color: #11672a; }
.mine-cell[data-value="3"] { color: #aa211c; }
.mine-cell[data-value="4"] { color: #340075; }
.mine-cell[data-value="5"] { color: #732015; }
.mine-cell[data-value="6"] { color: #005b64; }
.mine-cell[data-value="7"] { color: #141c1a; }
.mine-cell[data-value="8"] { color: #4b5355; }

.minesweeper :focus-visible { outline: 2px solid #003f8f; outline-offset: 3px; }
.minesweeper .mine-cell:focus-visible { z-index: 1; outline: 2px solid #00006b; outline-offset: -4px; }
.minesweeper.is-won .mine-board-scroll { border-color: #24783e #e5f6de #e5f6de #24783e; }

.mine-statusbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 5px 14px;
    min-height: 32px;
    padding: 8px 3px 2px;
    font-size: 11px;
}

.mine-statusbar p { margin: 0; color: #071126; font-size: inherit; }
.mine-best { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.minesweeper.is-won #mine-status { color: #165c2c; font-weight: 700; }
.minesweeper.is-lost #mine-status { color: #951e1b; font-weight: 700; }
.minesweeper .mine-error { margin: 10px 4px; color: #951e1b; }

@media (max-width: 600px) {
    .minesweeper-page { padding: 16px 8px 32px; }
    .minesweeper { --cell-size: min(32px, calc((100vw - 62px) / 9)); }
    .mine-titlebar { padding-inline: 5px; gap: 5px; }
    .mine-titlebar > span { font-size: 9px; }
    .mine-controls { gap: 8px; }
    .mine-tools { gap: 6px; }
    .mine-difficulty select { width: 170px; }
    .mine-cell img { width: 16px; height: 16px; }
}