.target-grid {
  grid-template-columns: repeat(var(--target-columns, 4), 1fr);
  width: min(680px, 100%);
}

.target-grid .shape.target-soft { background: #e6e0ff; color: #8976e8; }
.target-grid .shape.target-outline { background: #f0ebff; color: #7f69dc; }
.target-grid .shape.target-subtle { background: #ece9fa; color: #7667ca; }
.target-grid .shape.target-tiny { background: #f0edfc; color: #7969d1; font-size: 30px; }
.target-grid .shape.target-hidden { background: #eeebf8; color: #725fbd; font-size: 34px; }
.target-grid.target-level-5 .shape,
.target-grid.target-level-6 .shape { height: 82px; border-radius: 17px; }

.completion-note { width: 100%; margin: 3px 0; color: #4d9a70; font-size: 13px; font-weight: 800; }

@media (max-width: 760px) {
  .target-grid.target-level-5 .shape,
  .target-grid.target-level-6 .shape { height: 52px; font-size: 24px; border-radius: 12px; }
}