.mm-history {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  max-height: 320px;
  overflow-y: auto;
}

.mm-row {
  display: flex;
  align-items: center;
  gap: 0.8em;
  padding: 0.4em 0.6em;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.2);
}

.mm-row-pegs {
  display: flex;
  gap: 0.3em;
}

.mm-feedback {
  display: grid;
  grid-template-columns: repeat(2, 8px);
  grid-template-rows: repeat(2, 8px);
  gap: 3px;
  margin-left: auto;
}

.mm-feedback-peg {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.mm-feedback-peg.black { background: var(--ink-900); border: 1px solid var(--parchment-300); }
.mm-feedback-peg.white { background: var(--parchment-100); }
.mm-feedback-peg.empty { background: transparent; }

.mm-peg {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.4) inset;
}
.mm-peg.empty { background: rgba(0, 0, 0, 0.25); border-style: dashed; }
.mm-peg.color-red { background: radial-gradient(circle at 35% 30%, #d86a6a, #7a2333); }
.mm-peg.color-green { background: radial-gradient(circle at 35% 30%, #6fbb84, #1e4030); }
.mm-peg.color-blue { background: radial-gradient(circle at 35% 30%, #6f9bd8, #1c3252); }
.mm-peg.color-yellow { background: radial-gradient(circle at 35% 30%, #eac972, #7a5a1e); }
.mm-peg.color-brass { background: radial-gradient(circle at 35% 30%, var(--brass-500), var(--brass-800)); }
.mm-peg.color-wine { background: radial-gradient(circle at 35% 30%, var(--wine-500), var(--wine-900)); }

.mm-slots {
  display: flex;
  gap: 0.6em;
  justify-content: center;
}

.mm-slots .mm-peg {
  width: 44px;
  height: 44px;
  cursor: pointer;
}

.mm-palette {
  display: flex;
  gap: 0.6em;
  justify-content: center;
  margin-top: 1em;
}

.mm-palette .mm-peg {
  cursor: pointer;
  transition: transform 0.15s var(--ease-spring);
}
.mm-palette .mm-peg:hover { transform: scale(1.1); }