body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #2c3e50;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    padding: 20px;
}

h1 { margin-bottom: 10px; }

/* Controls Section */
.controls {
    background: #34495e;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    display: flex;
    gap: 15px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}

.input-group {
    display: flex;
    flex-direction: column;
}

label { font-size: 0.8rem; margin-bottom: 5px; color: #bdc3c7; }

input {
    padding: 8px;
    border-radius: 4px;
    border: none;
    width: 60px;
}

button {
    padding: 10px 20px;
    background-color: #27ae60;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    height: 100%;
    margin-top: auto;
}

button:hover { background-color: #2ecc71; }

/* Game Board */
#game-board {
    display: grid;
    gap: 1px;
    background-color: #7f8c8d;
    border: 5px solid #34495e;
    user-select: none; /* Prevents text highlighting */
}

.cell {
    width: 30px;
    height: 30px;
    background-color: #bdc3c7;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    cursor: pointer;
    font-size: 18px;
}

/* 3D effect for unclicked cells */
.cell:not(.revealed) {
    border-top: 3px solid #ecf0f1;
    border-left: 3px solid #ecf0f1;
    border-bottom: 3px solid #7f8c8d;
    border-right: 3px solid #7f8c8d;
    box-sizing: border-box;
}

.cell:hover:not(.revealed) { background-color: #d5dbdb; }

/* Statuses */
.revealed {
    background-color: #ecf0f1;
    color: #2c3e50;
    border: 1px solid #bdc3c7;
}

.mine { background-color: #e74c3c !important; color: white; }
.flag { color: #c0392b; }

/* Number Colors */
.c-1 { color: blue; }
.c-2 { color: green; }
.c-3 { color: red; }
.c-4 { color: darkblue; }
.c-5 { color: brown; }
.c-6 { color: cyan; }
.c-7 { color: black; }
.c-8 { color: gray; }

#message {
    margin-top: 20px;
    font-size: 1.2rem;
    font-weight: bold;
    height: 30px;
}