/* Citation codée — Ludéales */
.cc-shell{padding:28px 0 64px}
.cc-panel{
  background:var(--creme);
  border:1px solid var(--ligne);
  border-radius:calc(var(--rayon) + 4px);
  box-shadow:var(--ombre);
  padding:22px 22px 20px;
}
.cc-intro .display{font-size:clamp(34px,5.5vw,52px);margin-bottom:10px}
.cc-rules{
  margin:18px 0 0;
  padding:0 0 0 1.15em;
  color:var(--encre-doux);
  max-width:62ch;
}
.cc-rules li{margin:8px 0}
.cc-helps-legend{
  display:flex;flex-wrap:wrap;gap:10px 18px;
  margin-top:16px;font-size:13px;color:var(--encre-doux);
}
.cc-helps-legend b{color:var(--encre)}

.cc-top{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;
  margin-bottom:14px;
}
.cc-timer-wrap{
  font-family:var(--serif);font-weight:700;font-size:28px;
  letter-spacing:-.02em;min-width:4.5ch;
}
.cc-penalty{font-size:13px;color:var(--corail);font-weight:700}
.cc-meta{margin-left:auto;text-align:right;font-size:13px;color:var(--encre-doux)}
.cc-meta strong{display:block;color:var(--encre);font-size:14px;font-weight:700}

.cc-stage{
  display:grid;
  grid-template-columns:52px 1fr 52px;
  gap:10px;
  align-items:start;
}
@media(max-width:720px){
  .cc-stage{grid-template-columns:1fr}
  .cc-alpha-side{display:none}
  .cc-alpha-mobile{display:flex !important}
}
.cc-alpha-mobile{display:none;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:14px}

.cc-alpha{
  display:flex;flex-direction:column;gap:4px;
  max-height:min(70vh,560px);overflow:auto;
  padding:2px;
}
.cc-letter{
  width:40px;height:28px;
  border:1px solid var(--ligne-forte);
  border-radius:8px;
  background:var(--blanc);
  color:var(--encre);
  font-family:var(--sans);font-weight:700;font-size:13px;
  cursor:pointer;
  transition:background .12s,transform .12s,opacity .12s;
}
.cc-letter:hover:not(:disabled){background:var(--lavande-moy);transform:translateY(-1px)}
.cc-letter.used{background:var(--lavande-pale);opacity:.7}
.cc-letter.locked-plain{
  background:var(--corail);color:#fff;border-color:transparent;opacity:1;cursor:default;
}
.cc-letter:disabled{cursor:default}

.cc-board-wrap{
  background:var(--blanc);
  border:1px solid var(--ligne);
  border-radius:var(--rayon);
  padding:10px 8px;
  min-height:180px;
  overflow:hidden;
}
#ccBoard{
  display:block;width:100%;
  cursor:pointer;
  touch-action:manipulation;
}

.cc-msg{
  margin-top:10px;font-size:14px;font-weight:600;color:var(--corail);
  min-height:1.2em;
}

.cc-actions{
  display:flex;flex-wrap:wrap;gap:10px;margin-top:16px;align-items:center;
}
.cc-actions .btn{cursor:pointer;border:none;font:inherit}
.cc-help{
  background:#F2D6D0;color:var(--encre);
  border:1px solid rgba(232,146,90,.35);
  border-radius:10px;
  padding:10px 14px;
  font-weight:700;font-size:13px;
  cursor:pointer;
  transition:background .15s,transform .15s;
}
.cc-help:hover:not(:disabled){background:#ecc4bb;transform:translateY(-1px)}
.cc-help:disabled{opacity:.45;cursor:default;transform:none}
.cc-help small{display:block;font-weight:600;opacity:.7;font-size:11px;margin-top:2px}

.cc-theme{
  margin-top:12px;
  padding:10px 14px;
  background:rgba(184,216,234,.35);
  border-radius:10px;
  font-weight:600;font-size:14px;
}

.cc-overlay{
  position:fixed;inset:0;z-index:80;
  background:rgba(61,53,88,.45);
  display:flex;align-items:center;justify-content:center;
  padding:22px;
  backdrop-filter:blur(4px);
}
.cc-overlay[hidden]{display:none !important}
.cc-result{
  background:var(--creme);
  border-radius:calc(var(--rayon) + 6px);
  border:1px solid var(--ligne);
  box-shadow:var(--ombre-forte);
  max-width:520px;width:100%;
  padding:28px 26px 24px;
  text-align:center;
}
.cc-result h2{font-size:28px;margin-bottom:12px}
.cc-result-quote{
  font-family:var(--serif);font-size:18px;line-height:1.45;
  color:var(--encre);margin:0 0 8px;
}
.cc-result-author{color:var(--encre-doux);font-weight:600;margin-bottom:18px}
.cc-result-score{
  font-family:var(--serif);font-size:42px;font-weight:700;
  color:var(--corail);letter-spacing:-.02em;
}
.cc-result-detail{font-size:13px;color:var(--encre-doux);margin:4px 0 18px}

.cc-legend-dots{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px;font-size:12px;color:var(--encre-doux)}
.cc-dot{
  display:inline-flex;align-items:center;gap:6px;
}
.cc-dot i{
  width:14px;height:14px;border-radius:50%;display:inline-block;
}
.cc-dot .c-cipher{background:#D4C4F0}
.cc-dot .c-guess{background:#F5E6A8}
.cc-dot .c-test{background:#7BC47F}
.cc-dot .c-ok{background:#E8925A}