/* APCHESS motion: feedback on the board, a gold medal at the end. */
.lesson-player{--lp-gold:#f7c650;--lp-gold-deep:#b47b17;--lp-night:#123253}
.lp-voice{margin:16px 0 0;padding:12px 0;border-top:1px solid var(--lp-border);font-size:.8rem;color:var(--lp-muted)}
.lp-voice-buttons{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.lp-voice-buttons button{min-height:44px;padding:7px 10px;font-size:.8rem;color:var(--lp-ink);background:var(--lp-surface);border-color:var(--lp-border)}
.lp-voice-buttons button[aria-pressed=true]{background:var(--lp-soft);border-color:var(--lp-accent)}
.lp-voice-status{display:flex;gap:8px;align-items:center;margin-top:7px;line-height:1.45}
.lp-voice-bars{display:flex;gap:3px;height:14px;align-items:center;flex-shrink:0}
.lp-voice-bars i{display:block;width:3px;height:5px;border-radius:3px;background:var(--lp-accent)}
.is-speaking .lp-voice-bars i{animation:lpVoiceBar .75s ease-in-out infinite alternate}
.is-speaking .lp-voice-bars i:nth-child(2){animation-delay:-.3s}.is-speaking .lp-voice-bars i:nth-child(3){animation-delay:-.55s}
@keyframes lpVoiceBar{to{height:14px}}
.lp-voice details{margin-top:8px}.lp-voice summary{cursor:pointer;min-height:44px;padding:10px 0}
.lp-voice label{display:block;margin:6px 0}
.lp-voice select{width:100%;min-height:44px;border:1px solid var(--lp-border);border-radius:8px;background:var(--lp-surface);color:var(--lp-ink);padding:8px;font:inherit}
.lp-voice select:focus-visible,.lp-voice summary:focus-visible{outline:3px solid var(--lp-accent);outline-offset:2px}
.lp-voice p{font-size:.78rem;line-height:1.45;margin-top:6px}
.lp-compact .lp-voice{border:0;margin:0 0 8px;padding:0}
.lp-recorded-controls{display:flex;align-items:center;gap:8px}
.lp-narration-replay{display:grid;place-items:center;width:44px;min-height:44px!important;padding:7px!important;border:1px solid var(--lp-border);border-radius:50%;color:var(--lp-accent);background:var(--lp-surface)}
.lp-narration-replay:focus-visible{outline:3px solid var(--lp-accent);outline-offset:3px}
#lpNarrationToggle[aria-pressed=false]{opacity:.65}
.lesson-player .lp-narration-replay{color:var(--lp-accent);background:var(--lp-surface);border-color:var(--lp-border)}
.lesson-player .lp-narration-replay:hover{background:var(--lp-soft);color:var(--lp-accent)}
.lp-narration-replay svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lp-narration-replay[aria-pressed=true]{background:var(--lp-soft);border-color:var(--lp-accent)}
/* The lesson surface keeps technical voice status out of sight; the speaker
   control remains labelled for assistive technology. */
.lesson-player .lp-voice{border:0;margin:0 0 8px;padding:0}
.lesson-player .lp-voice-status,.lesson-player .lp-voice details{display:none!important}
.lp-success-flash{position:absolute;inset:2px;z-index:7;border:3px solid var(--lp-gold);border-radius:5px;pointer-events:none;box-shadow:inset 0 0 20px rgba(247,198,80,.45);animation:lpCellGlow 1.3s ease-out both}
.lp-success-check{position:absolute;z-index:8;right:2px;top:2px;width:24px;height:24px;display:grid;place-items:center;background:var(--lp-gold);color:var(--lp-night);border:2px solid #fff3c6;border-radius:50%;font:900 17px/1 system-ui;box-shadow:0 3px 8px rgba(0,0,0,.18);pointer-events:none;animation:lpCheckFloat 1.3s ease-out both}
@keyframes lpCellGlow{0%{opacity:0}20%{opacity:1}75%{opacity:1}100%{opacity:0}}
@keyframes lpCheckFloat{0%{opacity:0;transform:translateY(7px) scale(.65)}20%,65%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-10px) scale(.96)}}
.lp-answer-success{animation:lpPanelSuccess .65s ease-out}
@keyframes lpPanelSuccess{35%{border-color:var(--lp-gold);box-shadow:0 0 0 3px rgba(247,198,80,.22)}}
.lp-wrap{scroll-margin-top:86px}
.lp-celebration[hidden]{display:none!important}
.lp-celebration{position:absolute;inset:0;z-index:9;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:22px;text-align:center;overflow:hidden;border-radius:3px;color:#fff;background:rgba(10,30,52,.89);animation:lpFinishReveal .45s ease-out;pointer-events:none}
.lp-celebration::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 42%,rgba(247,198,80,.25),transparent 65%)}
.lp-medal{position:relative;width:clamp(130px,42%,210px);aspect-ratio:1;display:grid;place-items:center;animation:lpMedalArrive .8s cubic-bezier(.2,.8,.3,1) both}
.lp-medal::before{content:'';position:absolute;inset:8%;border:2px solid rgba(247,198,80,.5);border-radius:50%;box-shadow:0 0 30px rgba(247,198,80,.25)}
.lp-medal svg{position:absolute;width:100%;height:100%;filter:drop-shadow(0 7px 0 var(--lp-gold-deep))}
.lp-medal img{position:relative;width:50%;height:50%;object-fit:contain;filter:drop-shadow(0 4px 5px rgba(12,31,49,.3))}
.lp-celebration strong{position:relative;font-size:clamp(20px,2.3vw,30px);line-height:1.2;max-width:100%;text-wrap:balance}
.lp-celebration>span{position:relative;color:#e5edf5;font-size:.9rem}
.lp-celebration .lp-finish-label{color:var(--lp-gold);font-size:.72rem;font-weight:750;text-transform:uppercase;letter-spacing:1.8px}
@keyframes lpFinishReveal{from{opacity:0}to{opacity:1}}
@keyframes lpMedalArrive{from{opacity:0;transform:translateY(18px) scale(.8) rotate(-7deg)}to{opacity:1;transform:translateY(0) scale(1) rotate(0)}}
@media(max-width:800px){.lp-voice{order:-2;margin:0;padding:12px 0}.lp-celebration{padding:18px;gap:7px}.lp-celebration strong{font-size:21px}}
@media(prefers-reduced-motion:reduce){.lp-voice-bars i,.lp-success-flash,.lp-success-check,.lp-answer-success,.lp-celebration,.lp-medal{animation:none!important;transform:none!important}.lp-success-flash,.lp-success-check{opacity:1}}