/* ═══════════════ Gamex / Mastermind ═══════════════
   Pegs carry their colour's initial too, so the game does not depend on
   telling six hues apart. */
.mm-top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
}
.mm-scores {
  font-family: var(--sans);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  color: var(--text-dim);
}
.mm-scores strong { color: var(--gold-lt); font-size: 1.05rem; }
.mm-help {
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--text);
}
.mm-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--text-dim);
}
.mm-key { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; margin-right: 10px; }

.mm-top, .mm-help, .mm-legend, .mm-secret, .mm-board, .mm-input, .mm-verdict {
  max-width: var(--w-form);
}

/* ─── Pegs ───────────────────────────────────────────────── */
.mm-pegs { display: flex; gap: 8px; align-items: center; }
.mm-peg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  border-radius: 50%;
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 700;
  color: #1a1005;
  box-shadow: inset 0 -3px 6px rgba(0, 0, 0, 0.35), inset 0 2px 4px rgba(255, 255, 255, 0.35);
}
.mm-peg.is-empty {
  background: rgba(26, 16, 5, 0.6);
  border: 1px dashed var(--gold-dim);
  box-shadow: none;
}
.mm-peg.is-hidden {
  background: repeating-linear-gradient(45deg, #2a1e00 0 5px, #1a1005 5px 10px);
  border: 1px solid var(--gold-dim);
  border-style: solid;
}
.mm-peg.is-hidden::after { content: "?"; color: var(--gold-dim); }
.mm-c-red    { background: #d8453a; }
.mm-c-green  { background: #3fae5a; }
.mm-c-blue   { background: #3f7fe0; color: #f4ecd8; }
.mm-c-yellow { background: #f2d33b; }
.mm-c-orange { background: #ee8a2c; }
.mm-c-purple { background: #9a5cd0; color: #f4ecd8; }

/* ─── Feedback pins ──────────────────────────────────────── */
.mm-pins {
  display: grid;
  grid-template-columns: repeat(2, 12px);
  gap: 4px;
  flex: 0 0 auto;
}
.mm-pin {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  vertical-align: middle;
}
.mm-pin.is-black { background: var(--gold-lt); box-shadow: 0 0 6px rgba(255, 215, 0, 0.5); }
.mm-pin.is-white { border: 2px solid var(--text); }
.mm-pin.is-none  { background: rgba(139, 105, 20, 0.2); }

/* ─── Secret row + board ─────────────────────────────────── */
.mm-secret {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 10px 14px;
  border-left: 2px solid var(--gold);
  border-radius: 0 6px 6px 0;
  background: rgba(26, 16, 5, 0.5);
}
.mm-secret[hidden] { display: none; }
.mm-secret-label {
  min-width: 6.5em;
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.mm-board { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.mm-board:empty { display: none; }
.mm-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border: 1px solid rgba(139, 105, 20, 0.35);
  border-radius: 6px;
  background: rgba(26, 16, 5, 0.4);
  animation: bubble-in 0.28s ease both;
}
.mm-row-n {
  width: 1.6em;
  font-family: var(--sans);
  font-size: 0.8rem;
  color: var(--gold-dim);
  text-align: right;
}
.mm-thought {
  flex: 1 1 100%;
  font-family: var(--serif);
  font-size: 0.98rem;
  font-style: italic;
  line-height: 1.45;
  color: var(--text-dim);
}

/* ─── Row editor + palette ───────────────────────────────── */
.mm-input { display: flex; flex-direction: column; gap: 14px; }
.mm-input[hidden] { display: none; }
.mm-slot,
.mm-swatch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  min-height: 48px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.mm-slot:hover,
.mm-swatch:hover,
.mm-slot:focus-visible,
.mm-swatch:focus-visible {
  border-color: var(--gold);
  background: rgba(212, 160, 23, 0.12);
  outline: none;
}
.mm-pegs--edit .mm-peg { width: 42px; height: 42px; font-size: 0.9rem; }
.mm-palette {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--gold-dim);
  border-radius: 8px;
  background: rgba(26, 16, 5, 0.5);
  width: fit-content;
}
.quiz-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.quiz-btn:disabled:hover { color: inherit; border-color: var(--gold-dim); }
.quiz-btn--primary:disabled:hover { color: var(--gold); border-color: var(--gold); }