body {
  font-family: system-ui, sans-serif;
  margin: 1rem;
}

.board {
  display: grid;
  /* A column and a row of labels, then the cells; the edge cells draw
     the outer border themselves, so the labels stay outside it */
  grid-template-columns: 1.5rem repeat(var(--size), 2.5rem);
  grid-template-rows: 1.5rem repeat(var(--size), 2.5rem);
  gap: 0;
  width: max-content;
}

.label {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  color: #666;
}

.cell {
  /* A flex box centers the glyph regardless of the font metrics */
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #999;
  padding: 0;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  background: hsl(calc(var(--zone) * 360 / var(--size)) 60% 85%);
}

.cell.border-top { border-top: 3px solid #222; }
.cell.border-right { border-right: 3px solid #222; }
.cell.border-bottom { border-bottom: 3px solid #222; }
.cell.border-left { border-left: 3px solid #222; }

.cell.queen::after { content: "\265B"; }
/* A cross drawn with CSS: a glyph would sit where its font puts it */
.cell.empty::after {
  content: "";
  width: 25%;
  height: 25%;
  opacity: 0.35;
  background:
    linear-gradient(45deg, transparent calc(50% - 1px), #000 0, #000 calc(50% + 1px), transparent 0),
    linear-gradient(-45deg, transparent calc(50% - 1px), #000 0, #000 calc(50% + 1px), transparent 0);
}

.status {
  min-height: 1.5rem;
  font-weight: bold;
}

/* The evidence of a hint is what to look at, the target is what to do */
.cell.hint-evidence {
  box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.45);
}

.cell.hint-target {
  outline: 3px solid #d0342c;
  outline-offset: -4px;
}

/* The number of a zone, in the corner of its first cell */
.zone-label {
  position: absolute;
  top: 1px;
  left: 3px;
  font-size: 0.6rem;
  line-height: 1;
  color: rgba(0, 0, 0, 0.55);
}