/* C5 · 다음을 맞히는 놀이 */

.c5-screen {
  max-width: 460px; margin: 0 auto;
  min-height: 92px; padding: var(--s4);
  display: grid; place-items: center;
  background: var(--paper);
  border: var(--stroke) solid var(--ink); border-radius: var(--radius);
  box-shadow: var(--drop-2);
}
.c5-line {
  margin: 0; text-align: center;
  font-size: 1.25rem; font-weight: 800; line-height: 1.6;
}
.c5-word { margin-right: .28em; }
/* 아이가 방금 고른 낱말이 마지막입니다 — 눈이 거기 머물게 */
.c5-word:last-of-type { background: var(--yellow); border-radius: 6px; padding: 0 .18em; }
.c5-dot { margin-left: -.2em; }

.c5-ask {
  margin: 0 0 var(--s2); text-align: center;
  font-size: .85rem; font-weight: 800; color: var(--ink-3);
}
.c5-cands {
  display: grid; gap: var(--s2);
  max-width: 460px; margin: var(--s4) auto 0;
}
/* 후보 한 줄 = 낱말 · 막대 · 횟수. **막대가 이 실습의 본론입니다** */
.c5-cand {
  display: grid; grid-template-columns: 6.5em 1fr 3.2em; gap: var(--s3);
  align-items: center; text-align: left;
  padding: var(--s3) var(--s4);
}
.c5-cand b { font-size: 1.05rem; }
.c5-bar {
  display: block; height: 16px;
  background: var(--cream-2); border-radius: var(--radius-pill);
  border: 2px solid var(--ink); overflow: hidden;
}
.c5-bar i { display: block; height: 100%; background: var(--leaf); }
.c5-cand em {
  font-style: normal; font-size: .8rem; font-weight: 800;
  color: var(--ink-3); text-align: right;
}

.c5-done {
  margin: 0; padding: var(--s3) var(--s4);
  background: var(--yellow);
  border: var(--stroke) solid var(--ink); border-radius: var(--radius);
  box-shadow: var(--drop-2); font-weight: 800; text-align: center;
}
.c5-tools { display: flex; justify-content: center; margin-top: var(--s3); }

/* AI 가 고르는 중 — 아이는 보기만 합니다. 방금 고른 것에 표시가 붙습니다 */
.c5-cand:disabled { opacity: .55; }
.c5-cand.is-picked { opacity: 1; background: var(--yellow); }
.c5-cand.is-picked .c5-bar i { background: var(--orange); }
/* 문장이 끝나면 `새 문장` 이 다음에 할 일이 됩니다 */
.c5-tools .is-next {
  background: var(--leaf); box-shadow: var(--drop-3);
  font-size: 1.05rem; padding: var(--s3) var(--s5);
}