.hu-stage { position:relative; overflow:hidden; border:1px solid var(--bs-border-color); border-radius:1rem; padding:1.25rem; background:var(--bs-body-bg); color:var(--bs-body-color); }
.hu-stage [hidden] { display:none !important; }
#sdStage[hidden], #hear-then-use[hidden] { display:none !important; }
.hu-stage progress { width:100%; height:.65rem; accent-color:#0e7490; margin-bottom:1rem; }
.hu-toolbar { display:flex; flex-wrap:wrap; gap:.65rem; align-items:center; margin:.8rem 0; }
.hu-toolbar select { width:auto; }
.hu-stage button { min-height:44px; }
.hu-choices { display:grid; gap:.75rem; }
.hu-choice { text-align:left; background:var(--bs-body-bg); color:var(--bs-body-color); border:2px solid var(--bs-border-color); padding:1rem; border-radius:.75rem; }
.hu-choice:active { transform:scale(.99); }
.hu-choice.hu-right { border-color:#198754; background:#d1e7dd; color:#0f5132; }
.hu-choice.hu-wrong { border-color:#b02a37; background:#f8d7da; color:#842029; }
[data-bs-theme="dark"] .hu-choice.hu-right { background:#123f32; color:#b7f7da; border-color:#75d9ac; }
[data-bs-theme="dark"] .hu-choice.hu-wrong { background:#542027; color:#ffd0d5; border-color:#ff8d9a; }
.hu-stage :focus-visible { outline:3px solid #0ea5e9; outline-offset:3px; }
.hu-words li { margin-bottom:.8rem; overflow-wrap:anywhere; }
#huFeedback { overflow-wrap:anywhere; }
#huReveal { margin-top:1rem; padding:1rem; background:var(--bs-tertiary-bg); border-radius:.75rem; }
.hu-effect { position:absolute; width:7px; height:7px; border-radius:50%; pointer-events:none; z-index:2; animation:hu-burst .7s ease-out forwards; }
@keyframes hu-burst { to { transform:translate(var(--dx),var(--dy)) rotate(180deg); opacity:0; } }
@media (hover:hover) { .hu-choice:enabled:hover { border-color:#0e7490; } }
@media (prefers-reduced-motion:reduce) { .hu-stage *, .hu-stage *::before, .hu-stage *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; } .hu-effect { display:none; } }