.ms-board {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 4px;
  width: min(430px, 100%);
}

.ms-cell {
  aspect-ratio: 1;
  border: 1px solid var(--hairline-strong);
  border-radius: 6px;
  background: var(--canvas);
  box-shadow: var(--shadow-sm);
  color: var(--ink);
  font-size: clamp(13px, 3vw, 17px);
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition:
    border-color 120ms ease,
    background 120ms ease;
}

.ms-cell:hover:not(.is-revealed),
.ms-cell:focus-visible:not(.is-revealed) {
  border-color: var(--ink);
}

.ms-cell.is-revealed {
  border-color: var(--hairline-cool);
  background: var(--canvas-soft);
  box-shadow: none;
  cursor: default;
}

.ms-cell.is-flagged {
  background: rgba(217, 119, 6, 0.14);
  border-color: rgba(217, 119, 6, 0.55);
}

.ms-cell.is-mine {
  background: rgba(220, 38, 38, 0.16);
  border-color: rgba(220, 38, 38, 0.6);
}

.ms-cell.is-hit {
  background: #dc2626;
  border-color: #dc2626;
  color: #fff;
}

.ms-cell[data-n="1"] { color: #2563eb; }
.ms-cell[data-n="2"] { color: #16a34a; }
.ms-cell[data-n="3"] { color: #dc2626; }
.ms-cell[data-n="4"] { color: #7c3aed; }
.ms-cell[data-n="5"] { color: #b45309; }
.ms-cell[data-n="6"] { color: #0891b2; }
.ms-cell[data-n="7"] { color: #111827; }
.ms-cell[data-n="8"] { color: #6b7280; }