/* ===========================================================
   Mastermind — game-specific styles only.
   Chrome, body, buttons, #status, .stat etc. come from shared.css
   =========================================================== */

body { gap: 14px; }

/* --- score chips row --- */
.stats-row {
  display: flex;
  gap: 14px;
}

/* --- the revealed/secret code row --- */
.secret-row {
  display: flex;
  gap: 8px;
  min-height: 38px;
  align-items: center;
  padding: 6px 12px;
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 2px 8px var(--shadow);
}
/* each hidden slot shows a "?" until the round ends */
.secret-row .peg.hidden {
  background: var(--surface-2);
  color: var(--muted);
}
.secret-row .peg.hidden::after { content: "?"; }

/* --- the history board: stacked guess rows --- */
#board {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--blue-board);
  padding: 10px;
  border-radius: 14px;
  box-shadow: 0 10px 30px var(--shadow);
  border-bottom: 6px solid var(--blue-board-dark);
}

/* one row = 4 guess pegs + a 2x2 feedback grid */
.row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.row .guess {
  display: flex;
  gap: 6px;
}

/* a coloured guess peg — letter inside for colour-blind clarity */
.peg {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
  box-shadow: inset 0 -3px 6px rgba(0,0,0,0.3), 0 1px 3px rgba(0,0,0,0.25);
  flex: none;
}
/* empty placeholder peg in the active row */
.peg.empty {
  background: var(--surface-2);
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.25);
}

/* the six code colours (also given letters in JS) */
.peg.c0 { background: var(--red); }
.peg.c1 { background: var(--green); }
.peg.c2 { background: var(--yellow); color: #3a2c00; text-shadow: none; }
.peg.c3 { background: #4f8cff; }  /* brighter than the blue board so it stands out */
.peg.c4 { background: var(--accent); color: var(--accent-text); text-shadow: none; }
.peg.c5 { background: var(--muted); }

/* --- feedback pegs (2x2 grid of small dots) --- */
.feedback {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 3px;
  padding: 4px;
  border-radius: 6px;
  background: rgba(0,0,0,0.18);
  flex: none;
}
.fb {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
}
.fb.black { background: #111; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25); }
.fb.white { background: #fff; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.3); }

/* --- the editable current guess --- */
.current-area {
  display: flex;
  justify-content: center;
}
.current-guess {
  display: flex;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 2px 8px var(--shadow);
  border: 2px solid var(--accent);
}
.current-guess .peg { width: 40px; height: 40px; font-size: 0.95rem; cursor: default; }
.current-guess .peg.empty { cursor: default; }

/* --- the colour palette --- */
.palette {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 340px;
}
.palette .peg {
  width: 44px;
  height: 44px;
  font-size: 1rem;
  cursor: pointer;
  transition: transform 0.1s;
}
.palette .peg:hover { transform: translateY(-3px); }
.palette .peg:active { transform: translateY(-1px); }

/* --- controls --- */
.controls {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.small-btn {
  padding: 10px 18px;
  font-size: 0.9rem;
  background: var(--surface-3);
  color: var(--text);
}

/* gentle celebration pulse on a winning code reveal */
.secret-row.win .peg { animation: pop 0.6s ease-in-out infinite alternate; }
@keyframes pop {
  from { transform: scale(1); }
  to   { transform: scale(1.12); filter: brightness(1.2); }
}

/* --- responsive: shrink for narrow phones (~360px) --- */
@media (max-width: 460px) {
  .peg { width: 28px; height: 28px; font-size: 0.75rem; }
  .current-guess .peg { width: 34px; height: 34px; }
  .palette .peg { width: 40px; height: 40px; }
  .row { gap: 7px; }
  .row .guess { gap: 4px; }
  .fb { width: 11px; height: 11px; }
  #board { padding: 8px; }
}