#answerPanel {
  position: absolute; z-index: 14; inset-inline: var(--s-3);
  bottom: calc(var(--talk-raise) + 44px + var(--s-3));
  max-height: 52%; overflow-y: auto; overscroll-behavior: contain;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: var(--s-3); box-shadow: var(--shadow-raised);
}
#answerPanel button {
  font: inherit; font-weight: 500; min-height: 48px; padding: 8px 12px;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--c-teal-soft); color: var(--ink); cursor: pointer;
  overflow-wrap: anywhere;
}
#answerPanel button:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
#answerPanel button:disabled { cursor: default; opacity: .55; }
#answerPanel button[aria-pressed="true"], #answerPanel button.is-answer { background: var(--c-teal); box-shadow: inset 0 0 0 2px var(--ink); opacity: 1; }
.answer-options { display: grid; gap: 8px; }
#qCard[data-answer-type="spelling"], #qCard[data-answer-type="reading"] { max-height: 30%; overflow-y: auto; }
.answer-options button { text-align: start; }
.spelling-word { display: block; min-height: 40px; font-size: 26px; font-weight: 700; text-align: center; overflow-wrap: anywhere; }
.letter-bank { display: grid; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); gap: 6px; margin-block: 8px; }
#answerPanel .letter-bank button { padding: 4px; font-size: 22px; font-weight: 700; }
.spelling-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.spelling-actions button { flex: 1; }
#answerPanel .answer-submit { background: var(--c-yellow, #ffd04f); }
.answer-state { font-size: var(--fs-sm); font-weight: 500; margin-top: 8px; text-align: center; overflow-wrap: anywhere; }
#qReadingFields { border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px; min-width: 0; }
.choice-result { padding-block: 8px; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
@media (min-width: 700px) and (min-height: 501px) {
  #answerPanel { max-width: 560px; margin-inline: auto; }
  .answer-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (orientation: landscape) and (max-height: 500px) {
  #answerPanel { bottom: calc(env(safe-area-inset-bottom, 0px) + 40px); inset-inline: var(--s-2); max-height: 58%; padding: var(--s-2); }
  .answer-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}