/* Codebreaker. Shared game styles live in /play/play.css. */
:root {
  --peg: 44px;
  --c1: #d1495b; --c2: #e8913a; --c3: #e9c46a;
  --c4: #4f9d69; --c5: #3d7cc9; --c6: #8a5cc2;
}
@media (prefers-color-scheme: dark) {
  :root {
    --c1: #e0606f; --c2: #eea055; --c3: #edcf7e;
    --c4: #62b07c; --c5: #5a93d8; --c6: #a079d3;
  }
}
@media (max-width: 380px) { :root { --peg: 38px; } }

.hint-demo { display: inline-block; width: 11px; height: 11px; margin: 0 2px; border-radius: 50%; vertical-align: -1px; }

.board {
  display: grid; gap: 8px; margin: 0; padding: clamp(14px, 3vw, 22px);
  border: 1px solid var(--line); border-radius: 16px; background: var(--surface);
  list-style: none;
}
.row {
  display: grid; grid-template-columns: 1.6rem auto 1fr; align-items: center; gap: 12px;
  padding: 4px 8px; border-radius: 12px;
}
.row.active { background: var(--accent-soft); }
.row-num { color: var(--muted); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.slots { display: flex; gap: 8px; }

.peg {
  display: grid; place-items: center; width: var(--peg); height: var(--peg); flex: none;
  border: 2px dashed var(--line); border-radius: 50%;
  font: 600 14px/1 var(--sans); color: transparent; user-select: none;
}
.row.active .peg { border-color: var(--muted); }
.row.active .peg.set { cursor: pointer; }
.peg.set, .peg.swatch { border: 0; box-shadow: inset 0 -3px 0 rgb(0 0 0 / .14); }
.c1 { background: var(--c1); color: #fff; }
.c2 { background: var(--c2); color: #3a2410; }
.c3 { background: var(--c3); color: #3a2f10; }
.c4 { background: var(--c4); color: #fff; }
.c5 { background: var(--c5); color: #fff; }
.c6 { background: var(--c6); color: #fff; }
.peg.pop { animation: pop .16s ease-out; }

.hints { display: flex; gap: 12px; justify-self: start; }
.count {
  display: inline-flex; align-items: center; gap: 5px;
  font: 600 17px/1 var(--sans); font-variant-numeric: tabular-nums;
}
.count.zero { color: var(--muted); opacity: .55; }
.hint { display: inline-block; width: 12px; height: 12px; border-radius: 50%; flex: none; }
.hint.exact, .hint-demo.exact { background: var(--ink); }
.hint.near, .hint-demo.near { background: transparent; box-shadow: inset 0 0 0 2px var(--ink); }
.row.revealed .count { animation: pop .2s ease-out backwards; }
.row.revealed .count:nth-child(2) { animation-delay: .08s; }

.controls { display: grid; gap: 14px; justify-items: center; }
.palette { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.swatch {
  display: grid; place-items: center; width: 48px; height: 48px; padding: 0;
  border-radius: 50%; font: 600 15px/1 var(--sans); cursor: pointer;
  transition: transform .1s;
}
.swatch:hover { transform: translateY(-2px); }
.swatch:active { transform: scale(.94); }

.answer { display: flex; justify-content: center; gap: 8px; margin-bottom: 20px; }
.answer .peg { color: inherit; }

@media (prefers-reduced-motion: reduce) {
  .peg.pop, .row.revealed .count { animation: none; }
  .swatch { transition: none; }
}