.peg-board {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
  width: min(94vw, 420px); margin: 0 auto; aspect-ratio: 1;
}
.pcell {
  position: relative; border-radius: 8px; display: grid; place-items: center;
  background: transparent;
}
.pcell.wall { background: transparent; }
.pcell.hole {
  background: var(--surface-2);
  box-shadow: inset 0 2px 4px rgba(0,0,0,.12);
}
.pcell.peg {
  background: var(--surface-2); cursor: pointer;
}
.pcell.peg::after {
  content: ""; width: 72%; height: 72%; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff6, transparent 45%), linear-gradient(180deg, var(--grape), #6a4bd6);
  box-shadow: var(--shadow-sm);
}
.pcell.sel.peg::after { background: radial-gradient(circle at 35% 30%, #fff8, transparent 45%), linear-gradient(180deg, var(--coral), #ff6b6b); }
.pcell.target { box-shadow: 0 0 0 3px var(--mint) inset; cursor: pointer; }