/* khung câu hỏi */
.qcard {
  position: relative; background: var(--card); border: 5px solid #bfe0f5; border-radius: 28px;
  padding: 34px 18px 20px; display: grid; gap: 14px; justify-items: center; text-align: center;
  box-shadow: 0 8px 0 rgba(31, 90, 150, .15);
}
.qcard::before {
  content: ""; position: absolute; left: 18px; right: 18px; top: -9px; height: 18px; border-radius: 99px;
  background: #fff; box-shadow: 0 2px 0 #cfe6f6;
}
.prompt { font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--ink); }
.pic { width: min(210px, 52vw); aspect-ratio: 1; border-radius: 18px; background: #fff; border: 3px solid #f0c24b; overflow: hidden; display: grid; place-items: center; }
.pic.small { border-color: #bfe0f5; }
.pic img { width: 100%; height: 100%; object-fit: contain; display: block; }
.word { font-family: var(--font-display); font-weight: 700; font-size: clamp(34px, 9vw, 48px); line-height: 1.25; color: var(--ink); overflow-wrap: anywhere; }
.word.long { font-size: clamp(24px, 6vw, 30px); }
.slot {
  display: inline-block; min-width: 1.6em; padding: 0 .2em; margin: 0 .08em; border-bottom: 4px dashed var(--btn-orange);
  color: var(--btn-blue); text-align: center;
}
.slot.active { background: #fff3d8; border-radius: 10px 10px 0 0; }
.slot.filled { border-bottom-style: solid; border-color: var(--ok); color: var(--ok); }

/* đáp án */
.opts { width: 100%; display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.opts.single { grid-template-columns: minmax(0, 1fr); }
.opt {
  min-height: 62px; border-radius: 16px; color: #fff; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(24px, 6.5vw, 32px); padding: 8px 12px; overflow-wrap: anywhere; box-shadow: 0 5px 0 rgba(0,0,0,.22);
  transition: transform .1s;
}
.opt:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0,0,0,.22); }
.opt.c0 { background: var(--btn-blue); }
.opt.c1 { background: var(--btn-teal); }
.opt.c2 { background: var(--btn-orange); }
.opt.c3 { background: var(--btn-purple); }
.opt.words { font-size: clamp(20px, 5.4vw, 26px); }
.opt.bad { background: var(--bad); animation: shake .35s; }
.opt.good { background: var(--ok); }
.opt:disabled { cursor: default; }
.opt.gone { background: #8d98a8; opacity: .6; }