:root {
  --accent: #397a5d;
  --accent-dark: #285540;
  --wash: #dceae3;
  --wrong: #a84238;
}

body[data-choice-activity="opposites"] {
  --accent: #367a92;
  --accent-dark: #285d70;
  --wash: #dcecf1;
}

body[data-choice-activity="plurals"] {
  --accent: #7865a8;
  --accent-dark: #57457f;
  --wash: #e7e2f4;
}

.choice-stage {
  width: min(100%, 760px);
}

.choice-progress {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.prompt-card {
  display: grid;
  position: relative;
  min-height: min(32vh, 260px);
  min-height: min(32dvh, 260px);
  padding: 24px 20px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
  border-radius: 32px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.84), rgba(255, 255, 255, 0.36)), var(--wash);
  box-shadow: var(--shadow);
}

.hear-sentence {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  gap: 6px;
  padding: 8px 11px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--accent-dark);
  cursor: pointer;
  font-size: 0.74rem;
  font-weight: 900;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.hear-sentence:hover,
.hear-sentence.is-playing {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--wash) 52%, white);
}

.prompt-card.is-changing .choice-sentence {
  animation: choice-pop 260ms ease-out;
}

.choice-sentence {
  margin: 0;
  color: var(--ink);
  font-family: "Nunito", sans-serif;
  font-size: clamp(1.85rem, 7.3vw, 3rem);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1.22;
}

.choice-word {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  border-bottom: 2px dotted color-mix(in srgb, var(--accent) 45%, transparent);
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.choice-word:hover,
.choice-word.is-playing {
  border-bottom-style: solid;
  color: var(--accent-dark);
}

.prompt-blank {
  display: inline-grid;
  min-width: 2.3em;
  min-height: 1.18em;
  margin-inline: 0.08em;
  place-items: center;
  border-radius: 0.28em;
  background: rgba(255, 255, 255, 0.74);
  color: var(--accent-dark);
}

.prompt-card.is-complete .prompt-blank {
  background: color-mix(in srgb, var(--wash) 58%, white);
}

.choice-feedback {
  min-height: 25px;
  margin: 12px 0 9px;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 800;
}

.choice-feedback.is-correct { color: var(--accent-dark); }
.choice-feedback.is-wrong { color: var(--wrong); }

.choice-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.choice-answer {
  min-width: 0;
  min-height: 68px;
  padding: 8px 6px;
  border: 2px solid color-mix(in srgb, var(--accent) 20%, var(--line));
  border-radius: 22px;
  background: var(--surface);
  box-shadow: 0 8px 20px rgba(32, 48, 41, 0.07);
  color: var(--ink);
  cursor: pointer;
  font-family: "Nunito", sans-serif;
  font-size: clamp(1.35rem, 5.8vw, 2.15rem);
  font-weight: 900;
  overflow-wrap: anywhere;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.choice-answer:hover { transform: translateY(-2px); border-color: var(--accent); }
.choice-answer:active { transform: scale(0.97); }
.choice-answer:disabled { cursor: default; }
.choice-answer.is-correct { border-color: var(--accent); background: color-mix(in srgb, var(--wash) 54%, white); color: var(--accent-dark); }
.choice-answer.is-wrong { border-color: var(--wrong); animation: gentle-shake 280ms ease; }

@keyframes choice-pop {
  from { opacity: 0; transform: translateY(8px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes gentle-shake {
  0%, 100% { transform: translateX(0); }
  35% { transform: translateX(-5px); }
  70% { transform: translateX(5px); }
}

@media (min-width: 700px) {
  .prompt-card { min-height: min(38vh, 330px); border-radius: 40px; }
  .choice-options { gap: 14px; }
  .choice-answer { min-height: 80px; }
}

@media (max-height: 650px) {
  .instruction-replay { margin-bottom: 5px; }
  .choice-progress { margin-bottom: 4px; }
  .prompt-card { min-height: 180px; padding-block: 14px; }
  .choice-feedback { margin-block: 7px 5px; }
  .choice-answer { min-height: 56px; }
}

@media (max-width: 699px) {
  .hear-sentence {
    min-height: 38px;
    padding: 6px 9px;
  }
}