.ms-board {
  display: grid;
  gap: 3px;
  background: #26263a;
  border: 2px solid #26263a;
  border-radius: 8px;
  padding: 3px;
  width: fit-content;
}

.ms-cell {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Courier New', monospace;
  font-weight: bold;
  font-size: 0.9rem;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  background: #3a3a52;
  color: transparent;
  padding: 0;
}

.ms-cell:hover:not(:disabled) {
  background: #46466a;
}

.ms-cell:disabled {
  cursor: default;
}

.ms-cell--revealed {
  background: #0b0b12;
  cursor: default;
}

.ms-cell--pending-mine {
  background: #ff2d95;
}

.ms-cell--safe-zone {
  background: #14141f;
  opacity: 0.5;
}

.ms-cell--mine {
  background: #ff2d95;
  color: #f2f2f8;
}

.ms-cell--mine-hit {
  background: #ffe94a;
  color: #0b0b12;
}

.ms-cell--n1 { color: #2de2ff; }
.ms-cell--n2 { color: #7CFFB2; }
.ms-cell--n3 { color: #ff2d95; }
.ms-cell--n4 { color: #a78bfa; }
.ms-cell--n5 { color: #ffe94a; }
.ms-cell--n6 { color: #2de2ff; }
.ms-cell--n7 { color: #f2f2f8; }
.ms-cell--n8 { color: #9a9ab0; }

.ms-placer-controls {
  margin-top: 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  color: #9a9ab0;
  font-size: 0.9rem;
}

.ms-placer-controls[hidden] {
  display: none;
}