body {
  font-family: sans-serif;
  margin: 20px;
  background: #f2f2f2;
}

h1 {
  margin-bottom: 10px;
}

.controls {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

#status {
  font-weight: bold;
}

.board {
  display: grid;
  gap: 2px;
  margin-top: 10px;
}

.cell {
  width: 30px;
  height: 30px;
  border: 1px solid #ccc;
  background: #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  font-size: 16px;
  font-weight: bold;
}

.cell.revealed {
  background: #eee;
  cursor: default;
}

.cell.mine {
  background: #e57373;
}

.cell.flagged {
  background: #ffeb3b;
}

.cell0 { color: #000; }
.cell1 { color: #1976d2; }
.cell2 { color: #388e3c; }
.cell3 { color: #d32f2f; }
.cell4 { color: #7b1fa2; }
.cell5 { color: #5d4037; }
.cell6 { color: #0097a7; }
.cell7 { color: #455a64; }
.cell8 { color: #000000; }