.item {
  position: relative;
}

.item-glyph {
  display: block;
  color: var(--tile-tone, var(--ink));
  font-weight: 900;
  transform: rotate(var(--tile-turn, 0deg)) scale(var(--tile-scale, 1));
}

.item[data-mark="dot"]::after,
.item[data-mark="ring"]::after,
.item[data-mark="slash"]::after,
.item[data-mark="notch"]::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.item[data-mark="dot"]::after {
  width: 6px;
  height: 6px;
  right: 18%;
  top: 18%;
  border-radius: 50%;
  background: currentColor;
}

.item[data-mark="ring"]::after {
  width: 9px;
  height: 9px;
  left: 16%;
  bottom: 15%;
  border: 2px solid currentColor;
  border-radius: 50%;
}

.item[data-mark="slash"]::after {
  width: 15px;
  height: 2px;
  right: 12%;
  bottom: 20%;
  background: currentColor;
  transform: rotate(-32deg);
}

.item[data-mark="notch"]::after {
  width: 8px;
  height: 8px;
  left: 14%;
  top: 14%;
  border-left: 3px solid currentColor;
  border-top: 3px solid currentColor;
}

.board.dense {
  grid-template-columns: repeat(var(--scene-columns, 6), 1fr);
  gap: 4px;
  aspect-ratio: 1.2;
}

.board.dense .item {
  border-radius: 9px;
  font-size: clamp(1rem, 3.1vw, 2rem);
}

.difficulty-advanced {
  background: #fff4d7;
  color: #7a4d00;
}

.difficulty-expert {
  background: #fee7eb;
  color: #9f2340;
}

.boards.inspect {
  grid-template-columns: 1fr;
}

.boards.inspect .board {
  width: 100%;
  max-width: 820px;
  margin: auto;
}

.boards.inspect .board.dense .item {
  min-height: 52px;
  font-size: clamp(1.35rem, 5vw, 2.8rem);
}

@media (max-width: 700px) {
  .board.dense {
    gap: 3px;
  }

  .board.dense .item {
    border-radius: 6px;
  }

  .item[data-mark="dot"]::after {
    width: 4px;
    height: 4px;
  }

  .controls {
    flex-wrap: wrap;
  }

  .controls .button {
    min-width: calc(50% - 5px);
  }
}