/* ==========================================================================
   Logica › Messaggi in codice (js/logica/codici.js)
   ========================================================================== */
.cd-game { --cd-box: 28px; }
.cd-streak { font-size: 14px; color: var(--ink-3); white-space: nowrap; }
.cd-streak b { color: var(--ink); font-variant-numeric: tabular-nums; }

/* riquadro del messaggio */
.cd-card {
  padding: 16px; border-radius: 18px; background: var(--fill);
  box-shadow: inset 0 0 0 1px var(--stroke);
}
.cd-info { font-size: 15px; color: var(--ink-2); margin: 0 0 14px; line-height: 1.45; }
.cd-info b { color: var(--ink); font-family: var(--mono); letter-spacing: 0.04em; }

/* testo cifrato: una casella per lettera, le parole vanno a capo intere */
.cd-text { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 18px; font-family: var(--mono); }
.cd-w { display: inline-flex; flex-wrap: wrap; align-items: flex-end; gap: 4px; max-width: 100%; }
.cd-c {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: var(--cd-box); padding: 5px 3px; border-radius: 8px;
  background: var(--fill-2); box-shadow: inset 0 0 0 1px var(--stroke);
  color: var(--ink); line-height: 1.15;
}
.cd-c b { font-size: 19px; font-weight: 650; }
.cd-c > i {
  font-style: normal; font-weight: 700; font-size: 16px; color: var(--ok);
  width: 100%; text-align: center; margin-top: 3px; padding-top: 3px; border-top: 1px dashed var(--stroke-2);
}
.cd-p { align-self: flex-end; padding: 0 1px 4px; color: var(--ink-3); font-size: 19px; font-family: var(--mono); }
.cd-done .cd-cipher .cd-c { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ok) 55%, transparent); }

/* gettoni lunghi: morse, numeri, binario */
.cd-text.cd-tok { gap: 14px 24px; }
.cd-tok .cd-c { padding: 6px 7px; }
.cd-tok .cd-c b { font-size: 16px; letter-spacing: 0.03em; }
.cd-morse .cd-c b { display: inline-flex; align-items: center; gap: 3px; height: 22px; }
.cd-md, .cd-mh { display: inline-block; height: 6px; border-radius: 3px; background: currentColor; }
.cd-md { width: 6px; }
.cd-mh { width: 17px; }
.cd-mc { display: inline-flex; align-items: center; gap: 2px; }
.cd-mc .cd-md { width: 5px; height: 5px; }
.cd-mc .cd-mh { width: 13px; height: 5px; }
.cd-bin .cd-c b { font-size: 14px; letter-spacing: 0.02em; }
.cd-pigt .cd-c { padding: 6px; }
.cd-pig { width: 24px; height: 24px; display: block; }

/* strumenti sotto il messaggio */
.cd-tool { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--stroke); }
.cd-tool > * + * { margin-top: 12px; }
.cd-tool > .cd-note { display: block; }
.cd-tool[hidden] { display: none; }
.cd-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.cd-note { font-size: 13px; color: var(--ink-3); line-height: 1.4; }
.cd-range { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 520px; font-size: 15px; color: var(--ink-2); }
.cd-range b { color: var(--ink); font-variant-numeric: tabular-nums; }
.cd-range input { width: 100%; accent-color: var(--ok); height: 28px; }
.cd-stripbox { width: 100%; }
.cd-tog.active { background: var(--fill-3); }
.cd-togbox { width: 100%; }
.cd-togbox[hidden] { display: none; }

/* due alfabeti uno sopra l'altro */
.cd-strip { display: inline-flex; flex-direction: column; max-width: 100%; overflow-x: auto; font-family: var(--mono); border-radius: 10px; box-shadow: inset 0 0 0 1px var(--stroke); -webkit-overflow-scrolling: touch; }
.cd-strip-row { display: flex; }
.cd-strip-row span { flex: 0 0 auto; width: 21px; text-align: center; padding: 4px 0; font-size: 14px; color: var(--ink); }
.cd-strip-b { background: var(--fill-2); }
.cd-strip-b span { color: var(--ok); font-weight: 700; }
.cd-strip-l:empty { display: none; }
.cd-strip-row .cd-strip-l { width: auto; padding: 4px 8px; font-family: inherit; font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.04em; min-width: 54px; text-align: left; position: sticky; left: 0; background: var(--fill); }
.cd-strip-b .cd-strip-l { background: var(--fill-2); }
.cd-hints .cd-strip { display: flex; margin-top: 6px; width: max-content; }

/* tabelle chiave: morse, pigpen, numeri */
.cd-keytab { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 6px; width: 100%; margin-top: 6px; }
.cd-keytab > span { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 5px 8px; border-radius: 8px; background: var(--fill-2); font-family: var(--mono); font-size: 14px; }
.cd-keytab > span > b { color: var(--ink); }
.cd-keytab > span > i { font-style: normal; color: var(--ink-2); font-weight: 600; }
.cd-keytab-m { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); }
.cd-keytab-pig { grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); }
.cd-keytab-pig > span > i { color: var(--ink); }

/* tastiera del telefono */
.cd-pad { display: grid; grid-template-columns: repeat(3, 72px); gap: 6px; }
.cd-pad span { display: flex; flex-direction: column; align-items: center; padding: 6px 0; border-radius: 12px; background: var(--fill-2); box-shadow: inset 0 0 0 1px var(--stroke); }
.cd-pad b { font-size: 19px; color: var(--ink); }
.cd-pad i { font-style: normal; font-size: 11px; letter-spacing: 0.08em; color: var(--ink-3); min-height: 14px; }
.cd-bits { display: flex; flex-wrap: wrap; gap: 4px; font-family: var(--mono); }
.cd-bits span { min-width: 32px; text-align: center; padding: 4px 6px; border-radius: 8px; background: var(--fill-2); font-size: 14px; color: var(--ink-2); }
.cd-kbd { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-top: 6px; font-family: var(--mono); }
.cd-kbd div { display: flex; gap: 3px; }
.cd-kbd div:nth-child(2) { margin-left: 10px; }
.cd-kbd div:nth-child(3) { margin-left: 24px; }
.cd-kbd span { width: 24px; text-align: center; padding: 3px 0; border-radius: 6px; background: var(--fill-2); box-shadow: inset 0 0 0 1px var(--stroke); font-size: 13px; color: var(--ink); }

/* Vigenère */
.cd-try { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-size: 15px; color: var(--ink-2); }
.cd-vk { width: 170px; font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.08em; }
.cd-tabula { max-width: 100%; overflow: auto; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--stroke); -webkit-overflow-scrolling: touch; }
.cd-tabula table { border-collapse: collapse; font-family: var(--mono); font-size: 11.5px; }
.cd-tabula th, .cd-tabula td { width: 18px; height: 18px; padding: 0; text-align: center; color: var(--ink-2); }
.cd-tabula th { color: var(--ink); font-weight: 700; background: var(--fill-2); position: sticky; top: 0; }
.cd-tabula tr th:first-child { left: 0; z-index: 1; }
.cd-tabula tr:nth-child(even) td { background: var(--fill); }
.cd-tabula tr.cd-hl td { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ink); }

/* risposta */
.cd-answer { display: flex; gap: 8px; margin: 16px 0 0; }
.cd-answer .cd-in { flex: 1; min-width: 0; font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.04em; }
.cd-answer .cd-in::placeholder, .cd-vk::placeholder { text-transform: none; letter-spacing: 0; font-family: var(--font, inherit); color: var(--ink-3); }
.cd-answer .btn { flex: 0 0 auto; }
.cd-actions { margin: 12px 0 0; }
.cd-hints { margin: 12px 0 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; font-size: 15px; color: var(--ink-2); line-height: 1.45; }
.cd-hints:empty { display: none; }
.cd-hints b { color: var(--ink); }
.cd-exp { display: block; margin-top: 6px; font-weight: 500; color: var(--ink-2); }
.cd-done .cd-in { border-color: var(--ok); }

/* crittogramma: lettera da indovinare sopra, cifrata sotto */
.cd-ctext { gap: 14px 18px; }
.cd-k { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; cursor: text; }
.cd-k input {
  width: var(--cd-box); height: 34px; padding: 0; border: 0; border-radius: 8px; text-align: center;
  background: var(--fill-2); box-shadow: inset 0 0 0 1px var(--stroke); color: var(--ink);
  font: 700 19px var(--mono); text-transform: uppercase; caret-color: transparent; outline: none;
  -webkit-appearance: none; appearance: none;
}
.cd-k b { font-size: 13px; font-weight: 600; color: var(--ink-3); }
.cd-k.cd-sel input { box-shadow: inset 0 0 0 2px #5e9cff; background: color-mix(in srgb, #5e9cff 12%, var(--fill-2)); }
.cd-k input:focus { box-shadow: inset 0 0 0 2.5px #5e9cff; }
.cd-k.cd-fixed input { color: var(--ink-2); background: var(--fill-3); }
.cd-k.cd-conf input { color: var(--ko); background: var(--ko-fill); box-shadow: inset 0 0 0 1.5px var(--ko); }
.cd-done .cd-k input { color: var(--ok); background: var(--ok-fill); box-shadow: none; }

.cd-freqbox { margin-top: 14px; }
.cd-freqhead { font-size: 14px; font-weight: 600; color: var(--ink-2); margin-bottom: 8px; }
.cd-freqhead span { font-weight: 400; color: var(--ink-3); }
.cd-freq { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.cd-fi {
  display: inline-flex; flex-direction: column; align-items: center; min-width: 34px; padding: 4px 3px 3px;
  border: 0; border-radius: 9px; background: var(--fill); box-shadow: inset 0 0 0 1px var(--stroke);
  font-family: var(--mono); color: var(--ink); cursor: pointer; line-height: 1.15;
}
.cd-fi b { font-size: 13px; color: var(--ink-3); font-weight: 600; }
.cd-fi i { font-style: normal; font-size: 16px; font-weight: 700; color: var(--ink-3); }
.cd-fi.cd-set i { color: var(--ink); }
.cd-fi small { font-size: 11px; color: var(--ink-3); }
.cd-fi.cd-sel { box-shadow: inset 0 0 0 2px #5e9cff; }
.cd-fi.cd-conf i { color: var(--ko); }

@media (max-width: 520px) {
  .cd-game { --cd-box: 24px; }
  .cd-card { padding: 13px 12px; border-radius: 16px; }
  .cd-text { gap: 10px 13px; }
  .cd-w { gap: 3px; }
  .cd-c { padding: 4px 2px; border-radius: 7px; }
  .cd-c b { font-size: 17px; }
  .cd-c i { font-size: 15px; }
  .cd-tok .cd-c { padding: 5px 5px; }
  .cd-tok .cd-c b { font-size: 15px; }
  .cd-bin .cd-c b { font-size: 12.5px; }
  .cd-mh { width: 15px; }
  .cd-ctext { gap: 12px 14px; }
  .cd-k input { height: 32px; font-size: 17px; }
  .cd-pad { grid-template-columns: repeat(3, 64px); }
  .cd-lv button { padding-left: 11px; padding-right: 11px; }
}