.muehle-board {
  position: relative;
  width: min(420px, 80vw);
  aspect-ratio: 1;
  background: var(--parchment-200);
  border-radius: 8px;
}

.muehle-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.muehle-lines line {
  stroke: var(--wood-800);
  stroke-width: 0.6;
}

.muehle-point {
  position: absolute;
  width: 26px;
  height: 26px;
  margin-left: -13px;
  margin-top: -13px;
  border-radius: 50%;
  background: var(--wood-800);
  border: none;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) inset;
}

.muehle-point.selectable {
  box-shadow: 0 0 0 3px rgba(212, 176, 108, 0.7);
}

.muehle-point.selected {
  box-shadow: 0 0 0 3px var(--brass-500);
}

.muehle-point .checker-piece {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.muehle-point .checker-piece.p0 { background: radial-gradient(circle at 32% 26%, var(--wine-500), var(--wine-800) 80%); }
.muehle-point .checker-piece.p1 { background: radial-gradient(circle at 32% 26%, var(--brass-500), var(--brass-800) 80%); }