/* ============================================================
   MINESWEEPER
   Classic Windows 95 Minesweeper recreation
   ============================================================ */

.minesweeper-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px;
    background: var(--win95-bg);
    user-select: none;
    -webkit-user-select: none;
}

/* ---- Header bar (mine counter, smiley, timer) ---- */

.mine-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 4px 6px;
    margin-bottom: 6px;
    box-shadow:
        inset -1px -1px var(--win95-white),
        inset 1px 1px var(--win95-gray),
        inset -2px -2px var(--win95-light),
        inset 2px 2px var(--win95-dark);
}

/* ---- LED counter (mine count & timer) ---- */

.mine-led {
    background: #0a0a0a;
    color: #ff0000;
    font-family: "Lucida Console", "Courier New", monospace;
    font-size: 22px;
    font-weight: bold;
    letter-spacing: 2px;
    padding: 2px 4px;
    min-width: 52px;
    text-align: right;
    box-shadow:
        inset -1px -1px var(--win95-white),
        inset 1px 1px var(--win95-gray),
        inset -2px -2px var(--win95-light),
        inset 2px 2px var(--win95-dark);
    line-height: 1;
}

/* ---- Smiley button ---- */

.mine-smiley {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    background: var(--win95-bg);
    box-shadow:
        inset -1px -1px var(--win95-dark),
        inset 1px 1px var(--win95-white),
        inset -2px -2px var(--win95-gray),
        inset 2px 2px var(--win95-light);
    padding: 0;
    border: none;
    outline: none;
}

.mine-smiley:active {
    box-shadow:
        inset -1px -1px var(--win95-white),
        inset 1px 1px var(--win95-dark),
        inset -2px -2px var(--win95-light),
        inset 2px 2px var(--win95-gray);
}

/* ---- Grid ---- */

.mine-grid-wrapper {
    box-shadow:
        inset -1px -1px var(--win95-white),
        inset 1px 1px var(--win95-gray),
        inset -2px -2px var(--win95-light),
        inset 2px 2px var(--win95-dark);
    padding: 3px;
}

.mine-grid {
    display: grid;
    gap: 0px;
}

/* ---- Cell ---- */

.mine-cell {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: bold;
    font-family: var(--win95-font), "Arial", sans-serif;
    cursor: pointer;
    background: var(--win95-bg);
    box-shadow:
        inset -1px -1px var(--win95-dark),
        inset 1px 1px var(--win95-white),
        inset -2px -2px var(--win95-gray),
        inset 2px 2px var(--win95-light);
    line-height: 1;
    padding: 0;
    border: none;
    outline: none;
    position: relative;
}

.mine-cell:active:not(.revealed):not(.flagged) {
    box-shadow: inset 1px 1px var(--win95-gray);
}

/* ---- Revealed cell ---- */

.mine-cell.revealed {
    box-shadow: inset 1px 1px var(--win95-gray);
    cursor: default;
    background: var(--win95-bg);
}

/* Number colors */
.mine-cell.revealed[data-mines="1"] { color: #0000ff; }
.mine-cell.revealed[data-mines="2"] { color: #008000; }
.mine-cell.revealed[data-mines="3"] { color: #ff0000; }
.mine-cell.revealed[data-mines="4"] { color: #000080; }
.mine-cell.revealed[data-mines="5"] { color: #800000; }
.mine-cell.revealed[data-mines="6"] { color: #008080; }
.mine-cell.revealed[data-mines="7"] { color: #0a0a0a; }
.mine-cell.revealed[data-mines="8"] { color: #808080; }

/* ---- Flagged cell ---- */

.mine-cell.flagged {
    cursor: pointer;
}

.mine-cell.flagged::after {
    content: "\1F6A9";
    font-size: 12px;
    line-height: 1;
}

/* Wrong flag (game over reveal) */
.mine-cell.wrong-flag {
    box-shadow: inset 1px 1px var(--win95-gray);
    background: var(--win95-bg);
}

.mine-cell.wrong-flag::after {
    content: "\274C";
    font-size: 10px;
    line-height: 1;
}

/* ---- Mine cell ---- */

.mine-cell.mine {
    box-shadow: inset 1px 1px var(--win95-gray);
    cursor: default;
}

.mine-cell.mine::after {
    content: "\1F4A3";
    font-size: 12px;
    line-height: 1;
}

/* ---- Exploded mine (the one you clicked) ---- */

.mine-cell.exploded {
    background: #ff0000;
    box-shadow: inset 1px 1px var(--win95-gray);
    cursor: default;
}

.mine-cell.exploded::after {
    content: "\1F4A3";
    font-size: 12px;
    line-height: 1;
}

/* ---- Difficulty-specific grid sizing ---- */

.mine-grid.beginner {
    grid-template-columns: repeat(9, 18px);
    grid-template-rows: repeat(9, 18px);
}

.mine-grid.intermediate {
    grid-template-columns: repeat(16, 18px);
    grid-template-rows: repeat(16, 18px);
}

.mine-grid.expert {
    grid-template-columns: repeat(30, 18px);
    grid-template-rows: repeat(16, 18px);
}

/* ---- Menu check marks for difficulty ---- */

.mine-menu-check {
    display: inline-block;
    width: 16px;
    text-align: center;
}