body {
    font-family: "Lucida Console", Monaco, monospace;
    background-color: #dcdcdc;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

#gameContainer {
    background-color: #bdbdbd;
    padding: 10px;
    border: 5px solid #7b7b7b;
    border-bottom-color: #ffffff;
    border-right-color: #ffffff;
}

#gameHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.display {
    background-color: #000;
    color: #ff0707;
    font-size: 2em;
    display: inline-block;
    width: 60px;
    height: 34px;
    text-align: center;
    vertical-align: middle;
    line-height: 34px;
    border: 3px solid #7b7b7b;
    border-top-color: #ffffff;
    border-left-color: #ffffff;
}

.smiley {
    background-color: #ffcc00;
    display: inline-block;
    width: 34px;
    height: 34px;
    text-align: center;
    line-height: 34px;
    font-size: 24px;
    border: 3px solid #7b7b7b;
    border-top-color: #ffffff;
    border-left-color: #ffffff;
    cursor: pointer;
}

#gameBoard {
    display: grid;
    grid-template-columns: repeat(8, 40px);
    grid-template-rows: repeat(8, 40px);
    gap: 4px;
    overflow: hidden; /* 이 부분을 추가합니다 */
}


.cell {
    background-color: #bdbdbd;
    border: 3px solid #7b7b7b;
    border-bottom-color: #ffffff;
    border-right-color: #ffffff;
    width: 40px;
    height: 40px;
    text-align: center;
    vertical-align: middle;
    line-height: 40px;
    cursor: pointer;
    font-weight: bold;
}

.cell.revealed {
    background-color: #dcdcdc;
    cursor: default;
}

.cell.mine::after {
    content: "💣";
}

.cell.flag::after {
    content: "🚩";
}

.cell.wrong-flag {
    background-color: #ffcccc; /* 잘못된 깃발에 대한 배경색 */
}

.cell.wrong-flag::after {
    content: 'X';
    color: #d00; /* 잘못된 깃발에 대한 'X' 색상 */
}


.cell[data-adjacent="1"] { color: blue; }
.cell[data-adjacent="2"] { color: green; }
.cell[data-adjacent="3"] { color: red; }
.cell[data-adjacent="4"] { color: purple; }
.cell[data-adjacent="5"] { color: maroon; }
.cell[data-adjacent="6"] { color: turquoise; }
.cell[data-adjacent="7"] { color: black; }
.cell[data-adjacent="8"] { color: gray; }