/* ============================================================
   code-secret.css — styles propres à Code Secret.
   ============================================================ */

.cs-box { min-width: 300px; max-width: 460px; display: flex; flex-direction: column; gap: 14px; }

.cs-history { display: flex; flex-direction: column; gap: 8px; max-height: 260px; overflow-y: auto; }
.cs-row {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: 10px; padding: 8px 12px;
}
.cs-who { font-size: 13px; color: var(--text-soft); min-width: 60px; }
.cs-guess { display: flex; gap: 6px; }
.cs-fb { margin-left: auto; font-size: 14px; white-space: nowrap; }

.cs-peg { width: 22px; height: 22px; border-radius: 50%; display: inline-block; border: 1px solid rgba(0,0,0,.3); }
.cs-peg.c1 { background: #ff6b8a; }
.cs-peg.c2 { background: #ffce5c; }
.cs-peg.c3 { background: #4ad991; }
.cs-peg.c4 { background: #6c7bff; }
.cs-peg.c5 { background: #ff9f5c; }
.cs-peg.c6 { background: #c98bff; }

.cs-input { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; justify-content: center; }
.cs-selectors { display: flex; gap: 8px; }
.cs-sel {
  font-size: 18px; padding: 8px; border-radius: 10px;
  background: var(--bg-soft); color: var(--text); border: 1px solid var(--line);
}