body {
    background-color: #c0c0c0;
    margin: 0;
    padding: 0;
    font-family: 'Tahoma', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    user-select: none;
    overflow: hidden;
}

/* Cadre principal style "Outset" (Relief sortant) */
.ms-window {
    background-color: #c0c0c0;
    padding: 6px;
    border: 3px solid #c0c0c0;
    border-top-color: #fff;
    border-left-color: #fff;
    border-right-color: #808080;
    border-bottom-color: #808080;
    display: inline-block;
}

/* En-tête style "Inset" (Relief entrant) */
.ms-header {
    border: 2px solid;
    border-color: #808080 #fff #fff #808080;
    padding: 4px 6px;
    margin-bottom: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #c0c0c0;
}

/* Compteurs digitaux (rouge sur noir) */
.ms-counter {
    background: #000;
    color: #ff0000;
    font-family: 'Courier New', monospace; /* Fallback simple pour digital */
    font-size: 22px;
    font-weight: bold;
    padding: 1px 4px;
    border: 1px solid;
    border-color: #808080 #fff #fff #808080;
    min-width: 40px;
    text-align: right;
    letter-spacing: 1px;
}

/* Bouton Smiley */
.ms-face-btn {
    width: 26px;
    height: 26px;
    border: 2px solid;
    border-color: #fff #808080 #808080 #fff;
    background-color: #c0c0c0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}

.ms-face-btn:active {
    border-color: #808080 #fff #fff #808080;
    padding-top: 1px;
    padding-left: 1px;
}

.ms-face-btn i {
    font-size: 18px;
    pointer-events: none; /* Pour que le clic passe au bouton */
}

/* Plateau de jeu style "Inset" */
.ms-board {
    border: 3px solid;
    border-color: #808080 #fff #fff #808080;
    display: grid;
    /* 9 colonnes de 20px */
    grid-template-columns: repeat(9, 20px); 
    grid-template-rows: repeat(9, 20px);
}

/* Cases individuelles */
.cell {
    width: 20px;
    height: 20px;
    box-sizing: border-box;
    border: 2px solid;
    /* Style par défaut (non révélé) : Outset */
    border-color: #fff #808080 #808080 #fff;
    background-color: #c0c0c0;
    font-weight: bold;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
}

/* Case révélée (plate) */
.cell.revealed {
    border: 1px solid #808080; /* Bordure fine grise */
    border-right: none; /* Astuce pour coller les cellules */
    border-bottom: none;
    background-color: #c0c0c0;
    /* Pour recréer la grille fine du démineur : */
    outline: 1px solid #808080; 
    outline-offset: -1px;
}

/* Case survolée (optionnel, moderne) */
.cell:not(.revealed):hover {
    filter: brightness(1.05);
}

/* Mine déclenchée */
.cell.mine-hit {
    background-color: red !important;
    border: 1px solid #808080;
}

/* Couleurs des chiffres style XP */
.cell[data-num="1"] { color: blue; }
.cell[data-num="2"] { color: green; }
.cell[data-num="3"] { color: red; }
.cell[data-num="4"] { color: darkblue; }
.cell[data-num="5"] { color: darkred; }
.cell[data-num="6"] { color: teal; }
.cell[data-num="7"] { color: black; }
.cell[data-num="8"] { color: gray; }