* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Segoe UI', system-ui, sans-serif;
  background: #1a1a2e;
  color: #e0e0e0;
  min-height: 100vh;
  padding: 16px;
}

#app {
  max-width: 1100px;
  margin: 0 auto;
}

/* ── Header ── */
header {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

h1 {
  font-size: 1.4rem;
  color: #a0c4ff;
  letter-spacing: 1px;
}

#controls { display: flex; gap: 8px; align-items: center; }

select, button {
  padding: 6px 12px;
  border: 1px solid #3a5080;
  border-radius: 6px;
  background: #16213e;
  color: #e0e0e0;
  font-size: 0.88rem;
  cursor: pointer;
}

button {
  background: #0f3460;
  border-color: #4a80d0;
  transition: background 0.15s;
}
button:hover { background: #1a4a8a; }

#stats {
  margin-left: auto;
  display: flex;
  gap: 18px;
  font-size: 1.05rem;
  font-weight: bold;
  font-variant-numeric: tabular-nums;
}

/* ── Options bar ── */
#options {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
  padding: 8px 12px;
  background: #16213e;
  border-radius: 8px;
  margin-bottom: 10px;
  font-size: 0.88rem;
}

#options label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  white-space: nowrap;
}

#options label span { transition: opacity 0.2s; }
#lbl2.dimmed span, #lbl3.dimmed span { opacity: 0.35; }

#speed-control {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

#speed { width: 80px; cursor: pointer; }
#speed-label { min-width: 50px; }

/* ── Board ── */
#board-container {
  overflow: auto;
  background: #111827;
  border-radius: 8px;
  padding: 10px;
  display: inline-block;
  max-width: 100%;
}

#board {
  display: grid;
  gap: 2px;
}

/* ── Cells ── */
.cell {
  width: var(--cell-size);
  height: var(--cell-size);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: calc(var(--cell-size) * 0.5);
  border-radius: 3px;
  cursor: pointer;
  user-select: none;
  transition: background 0.08s, transform 0.1s;
}

.cell.hidden {
  background: #2d4a7a;
  border: 1px solid #3a5a90;
}
.cell.hidden:hover { background: #3d5a8a; }

.cell.flagged {
  background: #2d4a7a;
  border: 1px solid #3a5a90;
}

.cell.revealed {
  background: #0d1b2a;
  border: 1px solid #162030;
  cursor: default;
}

.cell.revealed.mine { background: #5a0a0a; }

/* Number colors — classic minesweeper palette */
.cell[data-num="1"] { color: #4fc3f7; }
.cell[data-num="2"] { color: #81c784; }
.cell[data-num="3"] { color: #ef5350; }
.cell[data-num="4"] { color: #7986cb; }
.cell[data-num="5"] { color: #ff8a65; }
.cell[data-num="6"] { color: #4db6ac; }
.cell[data-num="7"] { color: #f0f0f0; }
.cell[data-num="8"] { color: #90a4ae; }

/* ── Solver highlight animations ── */
.cell.act-flag {
  animation: pop-flag 0.25s ease;
}
.cell.act-reveal {
  animation: pop-reveal 0.25s ease;
}
.cell.act-guess {
  animation: pop-guess 0.25s ease;
}

@keyframes pop-flag   { 0%,100%{transform:scale(1)} 50%{transform:scale(1.35);background:#c0392b} }
@keyframes pop-reveal { 0%,100%{transform:scale(1)} 50%{transform:scale(1.35);background:#27ae60} }
@keyframes pop-guess  { 0%,100%{transform:scale(1)} 50%{transform:scale(1.35);background:#f39c12} }

/* ── Message ── */
#message {
  margin-top: 10px;
  font-size: 1.2rem;
  font-weight: bold;
  text-align: center;
  min-height: 1.6rem;
}

/* ── Legend ── */
#legend {
  display: flex;
  gap: 16px;
  margin-top: 8px;
  font-size: 0.8rem;
  opacity: 0.6;
}
.leg-safe { color: #27ae60; }
.leg-guess { color: #f39c12; }