/* ============================================================
   grammar-choice.css — Multiple Choice.

   Loaded alongside grammar-match.css (shared gm- frame chrome + tokens).
   Styles the question prompt, the verb display, and the choice buttons.
   ============================================================ */

.gm-mc-prompt {
  margin-top: 18px;
  text-align: center;
  font-size: clamp(15px, 3.6vw, 18px);
  font-weight: 600;
  color: var(--gm-acc);
}

/* Verb being asked about. */
.gm-mc-verb {
  margin-top: 12px;
  text-align: center;
}
.gm-mc-verb-jp {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: clamp(28px, 7vw, 40px);
  color: var(--gm-ink);
  line-height: 1.2;
}
.gm-mc-verb-jp ruby rt {
  font-size: 0.4em;
  color: var(--gm-faint);
  font-weight: 400;
}
.gm-mc-verb-rom {
  font-size: clamp(12px, 3vw, 14px);
  color: var(--gm-faint);
  margin-top: 2px;
}
.gm-mc-verb-gloss {
  font-size: clamp(13px, 3.2vw, 15px);
  color: var(--gm-muted);
  margin-top: 4px;
}
.gm-frame:not(.gm-show-romaji) .gm-mc-verb-rom,
.gm-frame:not(.gm-show-romaji) .gm-mc-choice .gm-mc-rom { display: none; }

/* Choices. */
.gm-mc-choices {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: clamp(8px, 1.8vw, 12px);
}
.gm-mc-choice {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 13px 16px;
  background: #fff;
  border: 1.5px solid var(--gm-line2);
  border-radius: 13px;
  cursor: pointer;
  font-family: inherit;
  color: var(--gm-ink);
  font-size: clamp(15px, 3.6vw, 18px);
  font-weight: 500;
  transition: border-color 0.15s, background 0.15s, transform 0.1s, opacity 0.2s;
}
@media (hover: hover) {
  .gm-mc-choice:not(:disabled):hover { border-color: var(--gm-acc); }
}
.gm-mc-choice:active:not(:disabled) { transform: translateY(1px); }
.gm-mc-choice:disabled { cursor: default; }
.gm-mc-jp {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: clamp(17px, 4.2vw, 21px);
  line-height: 1.2;
}
.gm-mc-rom {
  font-size: 11px;
  color: var(--gm-faint);
  font-weight: 400;
}
.gm-mc-choice.is-correct {
  border-color: var(--gm-green) !important;
  background: rgba(47, 143, 91, 0.12) !important;
  color: var(--gm-green);
}
.gm-mc-choice.is-wrong {
  border-color: var(--gm-red) !important;
  background: rgba(177, 50, 42, 0.08) !important;
  opacity: 0.6;
}
.gm-mc-choice.is-correct .gm-mc-rom,
.gm-mc-choice.is-wrong .gm-mc-rom { color: inherit; opacity: 0.7; }