.spelling-area{max-width:500px;margin:12px auto 0}.correction-slot{min-height:88px;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:12px}.answer-feedback{outline:none}.answer-letters{display:flex;justify-content:center;gap:3px;flex-wrap:wrap;font:clamp(32px,9vw,44px) var(--sans);letter-spacing:1px;line-height:1}.answer-letter{display:inline-flex;flex-direction:column;align-items:center;min-width:.7em;position:relative;padding:4px 1px}.answer-letter small{position:absolute;bottom:-8px;font:12px var(--sans);line-height:1}.answer-label{font:12px var(--sans);color:var(--muted,#b6c3db);margin:0 0 6px;line-height:16px}.answer-frame{position:relative;min-height:85px;display:flex;align-items:center;justify-content:center;padding:8px 35px;border:2px solid #49647e;background:#0a1322;border-radius:2px}.answer-result-mark{position:absolute;right:10px;top:10px;font:22px var(--sans)}.answer-success .answer-frame{border-color:#c2f970;background:#162b22;box-shadow:0 0 0 3px #c2f97018}.answer-success .answer-letter,.answer-success .answer-result-mark{color:#c2f970}.answer-missed .answer-frame{border-color:#ffcb8b;background:#30241f}.answer-missed .wrong-letter{color:#ff8566;background:#ff856622;border-bottom:2px dashed #ff8566;border-radius:2px}.answer-missed .correction-letter.different{color:#c2f970;background:#c2f9701a;border-bottom:2px solid #c2f970;border-radius:2px}.alignment-gap{visibility:hidden}.correction-slot .answer-letters{margin:0 35px}.answer-missed .answer-result-mark{color:#ffcb8b}.answer-outcome{font:600 16px var(--sans);margin-top:12px;min-height:24px}.outcome-correct{color:#c2f970}.outcome-missed{color:#ffcb8b}.outcome-neutral{color:var(--muted,#b6c3db)}.answer-skipped{font:22px var(--sans)}.answer-animate.answer-success .answer-letter{animation:spelling-celebrate 720ms steps(1,end) both;animation-delay:calc(var(--letter-order)*60ms)}
.answer-animate.answer-success .answer-letter::after{content:"";position:absolute;top:0;left:50%;width:3px;height:3px;background:#c2f970;box-shadow:-9px -3px #73f8e1,9px -6px #c2f970,3px -15px #c2f970;pointer-events:none;opacity:0;animation:spelling-sparks 720ms steps(1,end) both;animation-delay:calc(var(--letter-order)*60ms)}
.answer-animate.answer-success .answer-frame{animation:correct-frame 720ms steps(1,end) both}
.answer-animate.answer-missed .answer-frame{animation:spelling-nudge 480ms steps(1,end) both}
.answer-animate.answer-missed .different:not(.correction-letter){animation:changed-letter 800ms steps(1,end) both}
.answer-animate.answer-missed .correction-letter.different{animation:correction-reveal 480ms steps(1,end) both}.spelling-rule-panel{max-width:600px;margin:20px auto;padding:18px;text-align:left;border:1px solid #3b4d66;background:#151e2d;border-radius:4px}.spelling-rule-panel h2{font-size:18px;margin:0 0 12px}.spelling-rule-panel p{font-size:14px;line-height:1.7}.spelling-rule-panel summary{min-height:44px;display:flex;align-items:center;font-size:13px;cursor:pointer}.optional-keyboard summary{min-height:44px}.letter-key{min-height:44px}.spelling-input{width:100%;min-width:0}.answer-feedback+.feedback{margin-top:12px}.effects-toggle{font-size:12px;min-height:44px;padding:8px 12px;display:inline-flex;align-items:center;gap:8px;white-space:normal}.session-header .effects-toggle{margin-left:auto}.assessment .spelling-area .spelling-input{margin:0;width:100%;max-width:none}.assessment .answer-outcome{text-align:center}.assessment-effects{display:flex;justify-content:center;margin-top:6px}.answer-feedback:focus-visible .answer-frame{outline:2px solid var(--cyan);outline-offset:5px}
@keyframes spelling-celebrate{0%,100%{transform:translateY(0)}16%,64%{transform:translateY(-4px)}32%{transform:translateY(-8px)}48%,80%{transform:translateY(0)}}
@keyframes spelling-sparks{0%,100%{opacity:0;transform:translateY(0)}16%{opacity:1;transform:translateY(-4px)}48%{opacity:1;transform:translateY(-12px)}80%{opacity:0;transform:translateY(-16px)}}
@keyframes correct-frame{0%,100%{box-shadow:0 0 0 3px #c2f97018}32%,64%{box-shadow:4px 4px 0 #c2f97044,-4px -4px 0 #73f8e133}}
@keyframes spelling-nudge{0%,100%{transform:translateX(0)}20%{transform:translateX(-4px)}40%{transform:translateX(4px)}60%{transform:translateX(-2px)}80%{transform:translateX(2px)}}
@keyframes changed-letter{0%,100%{background:#ff856622}35%,65%{background:#ff856644}}
@keyframes correction-reveal{0%{transform:translateY(4px);opacity:.35}40%{transform:translateY(2px);opacity:.7}80%,100%{transform:translateY(0);opacity:1}}
.spelling-area>.input-caption,.answer-outcome{display:block;min-height:24px;margin:12px 0 0;font-size:13px;line-height:24px}
.spelling-controls{max-width:600px;margin:20px auto 0}
.spelling-buttons{display:flex;justify-content:center;align-items:center;gap:18px}
.spelling-controls .spelling-control{width:64px;height:64px;min-width:64px;min-height:64px;display:flex;flex-direction:column;justify-content:center;gap:4px;padding:6px;border-radius:2px;font-size:11px;line-height:1;box-shadow:3px 3px 0 #0005;transition:none}
.spelling-controls .spelling-control:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #0005}
.spelling-replay{background:#18303d;border:2px solid #6da5b8;color:#b4f3f0}
.spelling-replay:hover{background:#214152;color:#e0fffd}
.spelling-controls .audio-status{min-height:24px;line-height:1.7;margin:8px 0 0!important}
.spelling-controls .audio-status:empty{height:24px}
.spelling-skip{min-height:44px;font-size:13px;padding:8px 14px}
.spelling-controls+.optional-keyboard{max-width:600px;margin:8px auto 0;text-align:left}
.spelling-rule-panel .form-note{margin-top:14px}
@media(max-width:560px){.answer-frame{min-height:70px}.session-header{flex-wrap:wrap}.session-header .session-name{display:none}.session-header .effects-toggle{font-size:11px}.correction-slot{min-height:80px}}
@media(prefers-reduced-motion:reduce){.answer-animate .answer-letter,.answer-animate .answer-frame,.answer-animate .answer-letter::after{animation:none!important}.answer-animate .answer-letter::after{display:none}}

/* Teaching stays visible after a mistake, beside a clear pixel memory cue. */
.celebration>.audio-status{margin:14px 0 0!important;min-height:24px;line-height:1.7}
.teaching-card{max-width:680px;padding:24px;border-left:4px solid var(--cyan)}
.teaching-card-title{display:flex;align-items:center;gap:20px}.teaching-card-title h2{font-size:24px;line-height:1.4;margin:0 0 10px}.teaching-memory-icon{display:flex;padding:14px;background:#213c43;color:var(--cyan);flex-shrink:0}.teaching-target{display:flex;flex-wrap:wrap;gap:6px}.teaching-target>span{padding:4px 10px;background:#273b4b;color:#fff;font:700 25px var(--display)}.teaching-card .teaching-explanation{font-size:19px;line-height:1.8;margin:24px 0;color:#e0eaf5}.teaching-card .button{margin-top:18px}.teaching-card .word-breakdown{font-size:16px}
.listening-choices{align-items:stretch}.listening-choice{display:flex;flex-direction:column;align-items:center;gap:16px;max-width:260px;overflow-wrap:anywhere}.listening-choice.selected,.listening-choice[aria-pressed=true]{border-color:var(--cyan);box-shadow:inset 0 -4px var(--cyan);background:#21414d}.choice-listen{display:flex;align-items:center;gap:7px;font:12px var(--display);color:var(--cyan)}
.celebration{position:relative;max-width:880px}.quest-recap{text-align:left;margin:32px auto;padding:28px;background:#0b1422e8;border:1px solid #536777}.quest-recap h2{font-size:28px}.quest-recap>p{font-size:14px;color:var(--muted);line-height:1.7;margin:18px 0}.quest-score{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:24px 0}.quest-score>div{display:flex;flex-direction:column;gap:8px;padding:18px;background:#213c4359}.quest-score strong{font:700 34px var(--display);color:var(--lime)}.quest-score small{color:var(--muted);line-height:1.6}.quest-results{list-style:none;margin:0;padding:0}.quest-result{display:flex;gap:14px;align-items:center;padding:18px 0;border-top:1px solid #53677766}.quest-result-symbol{color:var(--cyan)}.quest-result>div{flex:1;min-width:0}.quest-result strong,.quest-result small{display:block;overflow-wrap:anywhere}.quest-result strong{font-size:17px;line-height:1.6}.quest-result small{font-size:13px;color:var(--muted);margin-top:6px}.quest-result-kind{display:block;font-size:11px;color:var(--cyan);margin-bottom:4px}.quest-result-outcome{max-width:155px;font-size:13px;color:var(--lime);text-align:right;line-height:1.6}.needs-practice .quest-result-outcome,.needs-practice .quest-result-symbol{color:#ffd17b}
.completion-navigation{margin:24px auto;flex-wrap:wrap}
/* The shower belongs to the viewport, with a quiet layer below dialogs and
   annotation controls. It never captures a pointer or changes page geometry. */
.quest-confetti{position:fixed;inset:0;width:100%;height:100vh;height:100dvh;overflow:hidden;pointer-events:none;user-select:none;z-index:8}
.quest-confetti>i{position:absolute;top:-24px;left:var(--x);width:var(--width);height:var(--height);background:var(--color);opacity:0;animation:quest-confetti-fall var(--duration) steps(64,end) var(--delay) 1 both}
@keyframes quest-confetti-fall{0%{transform:translate3d(0,-24px,0) rotate(0);opacity:1}85%{opacity:1}100%{transform:translate3d(var(--drift),calc(100vh + 48px),0) rotate(var(--turn));transform:translate3d(var(--drift),calc(100dvh + 48px),0) rotate(var(--turn));opacity:0}}
.rule-progress-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin:24px 0}.rule-progress-item{padding:16px;background:#0c192b;border:1px solid var(--line)}.rule-progress-item strong{display:block;margin-bottom:10px}.rule-progress-item progress{width:100%;height:8px;accent-color:var(--cyan)}.rule-progress-item small{display:block;font-size:12px;line-height:1.7;margin-top:8px;color:var(--muted)}
@media(max-width:560px){.teaching-card{padding:18px}.teaching-card-title{gap:12px}.teaching-memory-icon{padding:8px}.teaching-memory-icon svg{width:36px;height:36px}.teaching-card-title h2{font-size:20px}.teaching-card .teaching-explanation{font-size:17px}.listening-choices{gap:8px}.listening-choice{min-width:0;flex:1;padding:16px 10px;font-size:22px}.quest-recap{padding:18px}.quest-score{gap:10px}.quest-score>div{padding:12px}.quest-score strong{font-size:28px}.quest-score span{font-size:12px;line-height:1.6}.quest-result{flex-wrap:wrap}.quest-result-outcome{max-width:none;text-align:left;margin-left:36px;width:100%}}
@media(prefers-reduced-motion:reduce){.quest-confetti{display:none}}
.session-shell {
  display:flex;
  flex-direction:column;
  min-height:100vh;
  min-height:100svh;
  padding-bottom:0;
}
.session-shell>.session-header { flex-shrink:0; }
.session-shell>.session-progress { flex:0 0 auto; width:100%; margin:0 auto; }
.session-shell>.activity { flex:1 0 auto; width:100%; }
.session-shell>.session-footer { flex:0 0 auto; }