.peg-board {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 8px; width: min(94vw, 460px); margin: 0 auto;
  align-items: end; height: 320px; padding: 0 4px;
}
.peg {
  position: relative; display: flex; flex-direction: column-reverse;
  align-items: center; justify-content: flex-start;
  height: 100%; cursor: pointer; border-radius: 12px;
  padding-top: 8px; transition: background .12s ease;
}
.peg.sel { background: rgba(139,92,246,.12); }
.peg::after {
  content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 8px; height: 100%; background: var(--surface-2); border-radius: 6px; z-index: 0;
}
.disk {
  position: relative; z-index: 1; height: 18px; margin: 2px 0;
  border-radius: 9px; box-shadow: var(--shadow-sm);
  background: linear-gradient(180deg, var(--grape), #7c5cff);
}
.disk.d1 { background: linear-gradient(180deg,#ff8a5b,#ff6b6b); }
.disk.d2 { background: linear-gradient(180deg,#ffd166,#ffb703); }
.disk.d3 { background: linear-gradient(180deg,#06d6a0,#04b48a); }
.disk.d4 { background: linear-gradient(180deg,#4cc9f0,#3a9ee0); }
.disk.d5 { background: linear-gradient(180deg,#b388ff,#9d6bff); }
.disk.d6 { background: linear-gradient(180deg,#f15bb5,#d94f9d); }
.disk.d7 { background: linear-gradient(180deg,#80ed99,#52c97a); }