/* styles.css */
/* Basic reset and dark background */
body {
  margin: 0;
  padding: 0;
  background: #000;   /* black background for neon contrast */
  color: #0f0;        /* default neon green text */
  font-family: Arial, sans-serif;
  font-size: 1rem;    /* base font size (scalable) */
}
/* Controls and header styles */
#controls {
  display: flex;
  align-items: center;
  padding: 10px;
  gap: 10px;
}
#controls select, #controls button, #settings button {
  background: #111;
  color: #0f0;
  border: 1px solid #0f0;
  padding: 5px;
  cursor: pointer;
}
#controls span {
  background: #000;
  padding: 5px 10px;
  border: 1px solid #0f0;
}
/* Board styles */
#board {
  display: grid;
  margin: 10px auto;
  /* Grid-template set dynamically via JS based on game size */
}
.cell {
  width: 40px;
  height: 40px;
  background: #222;
  border: 1px solid #0f0;
  box-shadow: 0 0 10px #0f0; /* neon glow on default */
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.3s;
}
.cell.revealed {
  background: #000;
  box-shadow: inset 0 0 10px #0f0;
  cursor: default;
}
.cell.flagged {
  background: #220;
  color: #f00;  /* red flag */
}
.cell.mine {
  background: #500;
  color: #f00;  /* red X */
}
/* Number colors */
.cell.revealed.number1 { color: #00f; }  /* 1 = blue */
.cell.revealed.number2 { color: #0f0; }  /* 2 = green */
.cell.revealed.number3 { color: #f00; }  /* 3 = red */
.cell.revealed.number4 { color: #009; }  /* 4 = navy */
.cell.revealed.number5 { color: #909; }
.cell.revealed.number6 { color: #090; }
.cell.revealed.number7 { color: #999; }
.cell.revealed.number8 { color: #555; }
/* Hover effect */
.cell:hover:not(.revealed) {
  background: #333;
  box-shadow: 0 0 20px #0f0;
}
/* High-contrast mode */
body.high-contrast {
  background: #000;
  color: #ff0; /* yellow on black for contrast */
}
.high-contrast .cell { border-color: #ff0; box-shadow: 0 0 10px #ff0; }
.high-contrast .cell.flagged { color: #f0f; }
.high-contrast .cell.mine { color: #f0f; }
/* Colorblind mode (example: add pattern backgrounds) */
body.colorblind .cell.revealed.number1 { background: url('patterns/one.png') center/contain no-repeat; }
body.colorblind .cell.revealed.number2 { background: url('patterns/two.png') center/contain no-repeat; }
/* ...and so on for other numbers */
/* Settings panel */
#settings {
  display: flex;
  padding: 10px;
  gap: 10px;
}
#settings button {
  background: #111;
  color: #0f0;
  border: 1px solid #0f0;
  padding: 5px;
}
/* Responsive: adjust cell size on small screens */
@media (max-width: 600px) {
  .cell {
    width: 30px;
    height: 30px;
  }
  body { font-size: 0.9rem; }
}