/* =============================================================================
   IAM English Engine — additional engines
   True/False · Builder · Unscramble · Cloze · Listen & Choose · Speak
   Reuses the :root tokens, .iam-btn, iam-shake / iam-pulse from iam-engine.css
   ============================================================================= */

/* shared header look for all new engines */
.iam-truefalse header, .iam-builder header, .iam-unscramble header,
.iam-cloze header, .iam-listen header, .iam-speak header { text-align:center; margin-bottom:1.25rem; }
.iam-tf__badge,.iam-build__badge,.iam-uns__badge,.iam-cloze__badge,.iam-listen__badge,.iam-speak__badge{
  display:inline-block;background:var(--iam-primary-light);color:var(--iam-primary);
  font-size:.8rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:.25rem .75rem;border-radius:999px;margin-bottom:.5rem;
}
.iam-tf__title,.iam-build__title,.iam-uns__title,.iam-cloze__title,.iam-listen__title,.iam-speak__title{ font-size:1.4rem;font-weight:800;margin-bottom:.25rem; }
.iam-tf__instruction,.iam-build__instruction,.iam-uns__instruction,.iam-cloze__instruction,.iam-listen__instruction,.iam-speak__instruction{ color:var(--iam-muted);font-size:.95rem; }

.iam-truefalse .iam-tf__controls,.iam-builder .iam-build__controls,.iam-unscramble .iam-uns__controls,
.iam-cloze .iam-cloze__controls,.iam-listen .iam-listen__controls,.iam-speak .iam-speak__controls{
  display:flex;gap:.75rem;flex-wrap:wrap;justify-content:center;margin-top:1.5rem;margin-bottom:1rem;
}
.iam-tf__complete,.iam-build__complete,.iam-uns__complete,.iam-cloze__complete,.iam-listen__complete,.iam-speak__complete{
  background:var(--iam-success-light);border:1.5px solid var(--iam-success);border-radius:var(--iam-radius);
  padding:1rem 1.5rem;text-align:center;color:var(--iam-success);font-size:1.05rem;
}
.iam-tf__audio-btn,.iam-build__audio-btn,.iam-uns__audio-btn{ cursor:pointer;font-size:1rem;line-height:1; }
.iam-tf__audio-btn.is-playing,.iam-build__audio-btn.is-playing,.iam-uns__audio-btn.is-playing{ animation:iam-pulse 1s ease infinite; }

/* ── TRUE / FALSE ─────────────────────────────────────────────────────────── */
.iam-tf__list{ display:flex;flex-direction:column;gap:.6rem; }
.iam-tf__row{
  display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;
  background:var(--iam-white);border:1.5px solid var(--iam-border);border-radius:var(--iam-radius);padding:.75rem 1rem;
  transition:border-color var(--iam-transition),background var(--iam-transition);
}
.iam-tf__text{ flex:1;min-width:180px;font-size:1rem;font-weight:600;display:flex;align-items:center;gap:.4rem; }
.iam-tf__choices{ display:flex;gap:.4rem; }
.iam-tf__opt{
  border:1.5px solid var(--iam-border);background:var(--iam-surface);color:var(--iam-text);
  font-family:var(--iam-font);font-weight:700;font-size:.9rem;padding:.4rem 1rem;border-radius:var(--iam-radius-sm);cursor:pointer;
  transition:all var(--iam-transition);
}
.iam-tf__opt.is-selected{ border-color:var(--iam-primary);background:var(--iam-primary-light);color:var(--iam-primary); }
.iam-tf__row.is-correct{ border-color:var(--iam-success);background:var(--iam-success-light); }
.iam-tf__row.is-wrong{ border-color:var(--iam-error);background:var(--iam-error-light);animation:iam-shake .35s ease; }
.iam-tf__feedback{ min-width:1.2rem;font-size:1.1rem; }

/* ── BUILDER + UNSCRAMBLE (shared token look) ─────────────────────────────── */
.iam-build__item,.iam-uns__item{
  background:var(--iam-white);border:1.5px solid var(--iam-border);border-radius:var(--iam-radius);
  padding:1rem;margin-bottom:1rem;transition:border-color var(--iam-transition);
}
.iam-build__item.is-correct,.iam-uns__item.is-correct{ border-color:var(--iam-success);background:var(--iam-success-light); }
.iam-build__item.is-wrong,.iam-uns__item.is-wrong{ border-color:var(--iam-error);background:var(--iam-error-light);animation:iam-shake .35s ease; }
.iam-uns__clue{ font-size:.95rem;color:var(--iam-muted);margin-bottom:.6rem; }
.iam-build__answer,.iam-uns__answer{
  min-height:2.8rem;display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;
  border-bottom:2px dashed var(--iam-border);padding:.4rem .2rem;margin-bottom:.75rem;
}
.iam-build__bank,.iam-uns__bank{ display:flex;flex-wrap:wrap;gap:.5rem; }
.iam-build__word,.iam-uns__letter{
  padding:.45rem .9rem;background:var(--iam-surface);border:1.5px solid var(--iam-primary);border-radius:var(--iam-radius-sm);
  color:var(--iam-primary);font-family:var(--iam-font);font-weight:700;font-size:.95rem;cursor:pointer;
  transition:transform var(--iam-transition),box-shadow var(--iam-transition);
}
.iam-uns__letter{ min-width:2.4rem;text-align:center; }
.iam-build__answer .iam-build__word,.iam-uns__answer .iam-uns__letter{ background:var(--iam-primary-light); }
.iam-build__word:hover,.iam-uns__letter:hover{ transform:translateY(-2px);box-shadow:var(--iam-shadow); }
.iam-build__feedback,.iam-uns__feedback{ font-size:1.1rem; }

/* ── CLOZE ────────────────────────────────────────────────────────────────── */
.iam-cloze__bank{
  display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;
  background:var(--iam-surface);border:1.5px solid var(--iam-border);border-radius:var(--iam-radius);
  padding:1rem;margin-bottom:1.25rem;min-height:3.5rem;
}
.iam-cloze__word{
  padding:.4rem .85rem;background:var(--iam-white);border:1.5px solid var(--iam-primary);border-radius:var(--iam-radius-sm);
  color:var(--iam-primary);font-family:var(--iam-font);font-weight:700;font-size:.95rem;cursor:pointer;
  transition:transform var(--iam-transition),box-shadow var(--iam-transition);
}
.iam-cloze__word.is-selected{ background:var(--iam-primary);color:#fff; }
.iam-cloze__word:hover{ transform:translateY(-2px);box-shadow:var(--iam-shadow); }
.iam-cloze__body{
  background:var(--iam-white);border:1.5px solid var(--iam-border);border-radius:var(--iam-radius);
  padding:1.25rem 1.5rem;font-size:1.05rem;line-height:2.4;margin-bottom:1rem;
}
.iam-cloze__blank{
  display:inline-block;min-width:90px;padding:.1rem .5rem;margin:0 .15rem;
  border-bottom:2px dashed var(--iam-primary);background:var(--iam-primary-light);
  border-radius:var(--iam-radius-sm);cursor:pointer;vertical-align:middle;text-align:center;min-height:1.8rem;
}
.iam-cloze__blank.is-filled{ border-bottom-style:solid;background:var(--iam-surface); }
.iam-cloze__blank .iam-cloze__word{ border-color:var(--iam-primary);padding:.15rem .6rem;font-size:.9rem; }
.iam-cloze__blank.is-correct{ background:var(--iam-success-light);border-color:var(--iam-success); }
.iam-cloze__blank.is-wrong{ background:var(--iam-error-light);border-color:var(--iam-error);animation:iam-shake .35s ease; }

/* ── LISTEN & CHOOSE ──────────────────────────────────────────────────────── */
.iam-listen__q{
  background:var(--iam-white);border:1.5px solid var(--iam-border);border-radius:var(--iam-radius);
  padding:1rem 1.15rem;margin-bottom:1rem;
}
.iam-listen__q-head{ display:flex;align-items:center;gap:.7rem;margin-bottom:.75rem;flex-wrap:wrap; }
.iam-listen__play{
  background:var(--iam-primary);color:#fff;border:none;border-radius:var(--iam-radius-sm);
  font-family:var(--iam-font);font-weight:700;font-size:.85rem;padding:.4rem .9rem;cursor:pointer;flex-shrink:0;
}
.iam-listen__play.is-playing{ animation:iam-pulse 1s ease infinite; }
.iam-listen__q-text{ font-weight:700;font-size:1rem; }
.iam-listen__opts{ display:flex;flex-direction:column;gap:.5rem; }
.iam-listen__opt{
  display:flex;align-items:center;gap:.6rem;text-align:left;width:100%;
  background:var(--iam-surface);border:1.5px solid var(--iam-border);border-radius:var(--iam-radius-sm);
  padding:.55rem .8rem;cursor:pointer;font-family:var(--iam-font);font-size:.95rem;transition:all var(--iam-transition);
}
.iam-listen__opt-key{
  width:1.6rem;height:1.6rem;flex-shrink:0;border-radius:50%;background:var(--iam-primary-light);color:var(--iam-primary);
  font-weight:800;font-size:.8rem;display:flex;align-items:center;justify-content:center;
}
.iam-listen__opt.is-selected{ border-color:var(--iam-primary);background:var(--iam-primary-light); }
.iam-listen__opt.is-correct{ border-color:var(--iam-success);background:var(--iam-success-light); }
.iam-listen__opt.is-wrong{ border-color:var(--iam-error);background:var(--iam-error-light); }
.iam-listen__feedback{ display:inline-block;margin-top:.5rem;font-size:1.1rem; }

/* ── SPEAK ────────────────────────────────────────────────────────────────── */
.iam-speak__card{
  background:var(--iam-white);border:1.5px solid var(--iam-border);border-radius:var(--iam-radius);
  padding:1rem 1.15rem;margin-bottom:1rem;
}
.iam-speak__prompt{ display:flex;gap:.6rem;align-items:flex-start;font-size:1rem;line-height:1.5;margin-bottom:.75rem; }
.iam-speak__num{
  width:1.6rem;height:1.6rem;flex-shrink:0;border-radius:50%;background:var(--iam-primary-light);color:var(--iam-primary);
  font-weight:800;font-size:.8rem;display:flex;align-items:center;justify-content:center;
}
.iam-speak__row{ display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin-bottom:.5rem; }
.iam-speak__model,.iam-speak__rec,.iam-speak__play{
  border:1.5px solid var(--iam-border);background:var(--iam-surface);color:var(--iam-text);
  font-family:var(--iam-font);font-weight:700;font-size:.85rem;padding:.4rem .9rem;border-radius:var(--iam-radius-sm);cursor:pointer;
}
.iam-speak__rec.is-recording{ background:var(--iam-error);color:#fff;border-color:var(--iam-error);animation:iam-pulse 1.2s ease infinite; }
.iam-speak__play:disabled{ opacity:.45;cursor:not-allowed; }
.iam-speak__status{ font-size:.85rem;color:var(--iam-muted); }
.iam-speak__stars{ display:flex;gap:.2rem; }
.iam-speak__star{ background:none;border:none;font-size:1.4rem;cursor:pointer;color:var(--iam-warning);line-height:1; }
.iam-speak__star.is-on{ color:#F59E0B; }

@media (max-width:560px){
  .iam-cloze__body{ line-height:2.6; }
  .iam-tf__text{ min-width:100%; }
}