:root{font-family:"Comic Sans MS","Comic Sans",cursive;color:#fff;background:#000;font-size:clamp(20px,2vw,28px);color-scheme:dark}
*{box-sizing:border-box}body{margin:0}main{max-width:1100px;margin:auto;padding:32px 24px 60px}a{color:inherit}.back{display:inline-block;margin-bottom:32px;font-size:.8rem}h1{font-size:clamp(2.2rem,6vw,4rem);line-height:1.15;margin:12px 0 24px;color:#ffdc62}h2{font-size:clamp(1.6rem,4vw,2.3rem);line-height:1.15;margin:0 0 12px;color:#193363}.eyebrow{font-weight:bold;color:#b5eeea;font-size:.75rem}button,input{font:inherit}button{cursor:pointer;border:3px solid #193363;background:#fff;color:#193363;border-radius:18px;padding:12px 20px;min-height:52px;box-shadow:0 4px 0 #193363;font-weight:bold;transition:transform .12s,background .12s}button:hover{background:#fff0b2;transform:translateY(-2px)}button:active{transform:translateY(2px);box-shadow:0 1px 0 #193363}button:disabled{cursor:default;opacity:.4;transform:none}button:focus-visible,a:focus-visible,input:focus-visible,video:focus-visible{outline:4px solid #ed70cb;outline-offset:4px}.primary{background:#ffda55}.primary:hover{background:#ffe990}.activity-card{display:flex;align-items:center;gap:24px;text-align:left;width:min(100%,740px);padding:32px;margin-top:36px;background:#fff9e7;border-color:#ffdc62;box-shadow:7px 7px 0 #6458b7}.activity-card strong{display:block;font-size:1.4rem}.activity-card small{display:block;margin-top:10px;font-size:.7rem}.card-icon{font-size:2.5rem}form{max-width:760px}label{display:block;font-weight:bold;margin-bottom:22px}input{display:block;width:100%;border:3px solid #193363;border-radius:12px;padding:12px;margin-top:8px;background:white;color:#193363}#setup{max-width:850px}
#activity{position:fixed;inset:0;z-index:10;background:#000;overflow:hidden}#video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}#video::-webkit-media-controls{display:none!important}.video-hud{position:absolute;inset:18px 24px auto;display:flex;justify-content:space-between;align-items:center;gap:16px;pointer-events:none;font-size:.65rem;text-shadow:0 2px 6px #000}.video-hud a,.video-hud p{margin:0;padding:8px 14px;border-radius:30px;background:#0009}.video-hud a{pointer-events:auto;text-decoration:none}#videoStatus:empty{display:none}#videoStatus{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(90%,700px);margin:0;padding:24px;border-radius:20px;background:#000d;text-align:center;pointer-events:none}
#responseOverlay{position:absolute;inset:68px 0 0;display:flex;align-items:flex-end;justify-content:center;padding:24px;background:linear-gradient(transparent,#0007);overflow:auto}.response-panel{flex:0 1 1040px;min-width:0;max-height:100%;overflow-y:auto;overscroll-behavior:contain;color:#193363;background:#fff9eef5;border:4px solid #193363;border-radius:32px;box-shadow:7px 7px 0 #ffdc62,0 12px 50px #0008;padding:clamp(18px,2.5vw,32px);animation:pop-in .22s ease-out}.activity-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:8px}.activity-header .eyebrow{color:#67538f;margin:0}.activity-header button{font-size:.6rem;min-height:40px;padding:6px 12px;box-shadow:none}#instruction{font-size:.78rem;line-height:1.45;margin:8px 0 18px}.words,.choices,.answer-line{display:flex;flex-wrap:wrap;gap:12px;margin:18px 0}.words button{font-size:1.2rem;background:#e5f6ff}.choices{display:grid;grid-template-columns:1fr 1fr}.choices button{text-align:left}.answer-line{min-height:80px;padding:12px;border:3px dashed #8f9ac3;border-radius:16px;background:#fff}.cloze{display:flex;align-items:center;flex-wrap:wrap;gap:10px;line-height:2;margin-bottom:20px;font-size:1.2rem}.cloze input{display:inline-block;width:160px;max-width:100%;margin:0;border-width:0 0 3px;border-radius:8px 8px 0 0;background:#e5f6ff}.cloze label{margin:0}#feedback{font-size:.8rem;font-weight:bold;color:#12624a;margin:16px 0}#feedback.error{color:#aa2a26}#feedback:empty,#audioStatus:empty{display:none}#audioStatus{font-size:.65rem}.response-actions{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;margin-top:22px}#replay{font-size:.7rem;box-shadow:none;background:transparent}#stages{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}#stages button{font-size:.5rem;min-height:36px;padding:5px 9px;border-width:2px;box-shadow:none}#stages [aria-current=step]{background:#193363;color:white}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}[hidden]{display:none!important}@keyframes pop-in{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:none}}@media(max-width:600px){main{padding:20px 16px}.video-hud{inset:12px 12px auto}#responseOverlay{padding:12px 12px 20px;inset:58px 0 0}.response-panel{border-radius:22px;padding:16px}.choices{grid-template-columns:1fr}.choices button{padding:10px 14px}.words{gap:8px}.words button{padding:10px 14px}.cloze input{width:125px}.response-actions .primary{flex:1}#stages{gap:6px}.activity-card{padding:20px;gap:14px}}@media(prefers-reduced-motion:reduce){.response-panel{animation:none}button{transition:none}}

/* Familiarisation: only the spoken response, its audio line and Next. */
.simple-practice .activity-header,.simple-practice #responseTitle,.simple-practice #instruction,.simple-practice #stages,.simple-practice #replay{display:none}
.simple-practice .response-panel{flex-basis:900px;padding:clamp(22px,4vw,48px)}
.simple-practice .response-actions{justify-content:flex-end;margin-top:24px}
.simple-practice .words{gap:.12em;margin:0;align-items:center}
.simple-practice .words button{border:0;border-radius:8px;background:transparent;box-shadow:none;padding:4px 6px;min-height:48px;font-size:clamp(28px,3.5vw,46px);font-weight:normal;transform:none}
.simple-practice .words button:hover,.simple-practice .words button:focus-visible{background:#ffe47a;color:#193363;box-shadow:none;transform:none}
.spoken-sentences{display:flex;flex-wrap:wrap;gap:12px 24px}
.spoken-sentence{max-width:100%}
.sentence-audio-line{display:block;position:relative;width:100%;height:28px;min-height:28px;padding:0;border:0;border-radius:6px;background:transparent;box-shadow:none;transform:none}
.sentence-audio-line::after{content:"";position:absolute;left:4px;right:4px;top:12px;height:3px;border-radius:3px;background:#74739d}
.sentence-audio-line:hover,.sentence-audio-line:focus-visible{background:#ffe47a;box-shadow:none;transform:none}
.sentence-audio-line:hover::after{background:#193363}
.simple-practice .personal-detail{max-width:600px;margin:10px 0;font-size:1.2rem}
#response:focus{outline:none}

/* Between levels, show only the button that continues the activity. */
.level-complete .activity-header,.level-complete #responseTitle,.level-complete #instruction,.level-complete #response,.level-complete #feedback,.level-complete #audioStatus,.level-complete #replay,.level-complete #stages{display:none}
.level-complete .response-panel{flex:0 1 auto;background:transparent;border:0;box-shadow:none;padding:20px}
.level-complete .response-actions{margin:0;justify-content:center}
.level-complete #next{font-size:clamp(28px,4vw,46px);padding:16px 42px}

/* Level 2: response choices with independent listening controls. */
.simple-choices .activity-header,.simple-choices #responseTitle,.simple-choices #instruction,.simple-choices #stages,.simple-choices #replay{display:none}
.simple-choices #feedback{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.simple-choices .choices{margin:0;gap:16px}
.choice-row{display:flex;align-items:stretch;gap:8px;min-width:0}
.choice-row .choice-option{flex:1;min-width:0;overflow-wrap:anywhere}
.choice-row .choice-speaker{flex:0 0 58px;padding:8px;text-align:center;background:#e5f6ff}
.choice-row .choice-option.correct{background:#d5f4dc;border-color:#12624a;box-shadow:0 4px 0 #12624a}
.choice-row .choice-option.incorrect{background:#ffe2df;border-color:#aa2a26;box-shadow:0 4px 0 #aa2a26}
.simple-choices .response-actions{justify-content:flex-end;margin-top:20px}
.simple-choices .response-actions:has(#next[hidden]){display:none}
@media(max-width:900px){.simple-choices .choices{grid-template-columns:1fr}}

/* Levels 3–6: only the exercise itself and Next after a correct response. */
.simple-response .activity-header,.simple-response #responseTitle,.simple-response #instruction,.simple-response #stages,.simple-response #replay{display:none}
.simple-response #feedback{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.simple-response .response-actions{justify-content:flex-end;margin-top:20px}
.simple-response .response-actions:has(#next[hidden]){display:none}
.simple-response .answer-line{margin-top:0}
.simple-response .words{margin-bottom:0}
.simple-response form{max-width:none}
.simple-response .cloze{margin:0}
.simple-response input{font-size:1.2rem}
.simple-response .correct{border-color:#12624a;background:#e3f6e9}
.simple-response .incorrect{border-color:#aa2a26;background:#fff0ee}

/* The underline and speaker are one sentence-audio target. */
.sentence-audio-line{height:64px;min-height:64px;padding:22px 0 4px;font-size:26px;line-height:1;text-align:center}
.sentence-audio-line::after{top:10px}

/* Keep progression outside the response panel so revealing Next never resizes it. */
#responseOverlay{padding-bottom:calc(112px + env(safe-area-inset-bottom, 0px))}
#responseOverlay .response-actions{position:fixed;right:calc(24px + env(safe-area-inset-right, 0px));bottom:calc(24px + env(safe-area-inset-bottom, 0px));z-index:2;margin:0}
#responseOverlay.level-complete{padding-bottom:24px}
#responseOverlay.level-complete .response-actions{left:24px;right:24px;justify-content:center}
@media(max-width:600px){#responseOverlay .response-actions{right:calc(16px + env(safe-area-inset-right, 0px));bottom:calc(16px + env(safe-area-inset-bottom, 0px))}.response-actions .primary{flex:initial}}

/* Keep personal details beside their sentence starter. */
.personal-response-row{display:flex;align-items:center;gap:14px;min-width:0}
.personal-response-row .words{flex:0 0 auto;flex-wrap:nowrap}
.simple-practice .personal-response-row .personal-detail{flex:1 1 260px;width:260px;min-width:0;max-width:360px;margin:0}
@media(max-width:600px){.personal-response-row{gap:8px}.simple-practice .personal-response-row .words{gap:0}.simple-practice .personal-response-row .words button{font-size:clamp(18px,4.7vw,28px);padding:4px 2px}.simple-practice .personal-response-row .personal-detail{font-size:clamp(18px,4.7vw,24px);padding:10px 8px}}

/* Replay the last clip without adding height to the response panel. */
#responseOverlay:not(.level-complete) > #replay{display:block;position:fixed;left:calc(24px + env(safe-area-inset-left, 0px));bottom:calc(24px + env(safe-area-inset-bottom, 0px));z-index:2;background:#fff9ee;border:3px solid #193363;box-shadow:0 4px 0 #193363;font-size:.85rem;padding:12px 18px;min-height:52px}
@media(max-width:600px){#responseOverlay:not(.level-complete) > #replay{left:calc(16px + env(safe-area-inset-left, 0px));bottom:calc(16px + env(safe-area-inset-bottom, 0px));font-size:18px;padding:10px 12px}}

/* Centre the floating controls together beneath the response panel. */
#responseOverlay .response-actions{left:16px;right:16px;display:flex;justify-content:center;align-items:center;gap:18px}
#responseOverlay:not(.level-complete) .response-actions #replay{display:block;position:static;background:#fff9ee;border:3px solid #193363;box-shadow:0 4px 0 #193363;font-size:.85rem;padding:12px 18px;min-height:52px}
@media(max-width:600px){#responseOverlay .response-actions{gap:12px}#responseOverlay:not(.level-complete) .response-actions #replay{font-size:18px;padding:10px 12px}}
#responseOverlay:not(.level-complete) .response-actions:has(#next[hidden]){display:flex}

/* An incorrect attempt briefly replaces the exercise with an emoji before replay. */
#responseOverlay.retrying .response-panel{visibility:hidden}
#responseOverlay.retrying .response-actions{visibility:hidden}
#incorrectIndicator{position:absolute;inset:0;display:grid;place-items:center;font-size:clamp(80px,14vw,160px);filter:drop-shadow(0 4px 12px #0008);pointer-events:none}

/* Pop and shake once, then let the existing replay delay finish. */
#responseOverlay.retrying #incorrectIndicator{animation:incorrect-pop-shake 750ms ease-in-out both;transform-origin:center}
@keyframes incorrect-pop-shake{
  0%{opacity:0;transform:scale(.35)}
  22%{opacity:1;transform:scale(1.18)}
  36%{transform:scale(1) rotate(-9deg)}
  48%{transform:rotate(9deg)}
  60%{transform:rotate(-6deg)}
  72%{transform:rotate(6deg)}
  85%,100%{opacity:1;transform:scale(1) rotate(0)}
}
@media(prefers-reduced-motion:reduce){#responseOverlay.retrying #incorrectIndicator{animation:none}}

/* Existing cloze words remain plain text, with click-to-listen controls. */
.cloze .cloze-word{font:inherit;font-weight:normal;line-height:inherit;padding:0 3px;min-height:44px;border:0;border-radius:7px;background:transparent;color:inherit;box-shadow:none;transform:none}
.cloze .cloze-word:hover,.cloze .cloze-word:focus-visible{background:#ffe47a;box-shadow:none;transform:none}

/* Automatic level title: fade in, hold briefly, then fade out. */
#levelTransition{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:clamp(64px,10vw,144px);font-weight:bold;text-shadow:0 4px 24px #000;pointer-events:none;animation:level-title-fade 2400ms ease-in-out both}
#levelTransition:focus{outline:none}
@keyframes level-title-fade{0%,100%{opacity:0}25%,70%{opacity:1}}
@media(prefers-reduced-motion:reduce){#levelTransition{animation:none}}

/* Celebration over the final closing clip; never blocks the controls. */
#confetti{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none}
#confetti span{position:absolute;left:var(--x);top:-24px;width:11px;height:18px;background:var(--color);opacity:0;animation:confetti-fall var(--duration) var(--delay) ease-in forwards}
#confetti span:nth-child(3n){border-radius:50%;width:12px;height:12px}
@keyframes confetti-fall{0%{opacity:1;transform:translate(0,0) rotate(0)}85%{opacity:1}100%{opacity:0;transform:translate(var(--drift),110vh) rotate(var(--rotation))}}
@media(prefers-reduced-motion:reduce){#confetti span{animation:none;top:calc(var(--x) * .8);opacity:.6}}

#startVideo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;font-size:clamp(30px,4vw,52px);padding:16px 48px}
#startVideo:hover,#startVideo:active{transform:translate(-50%,-50%)}

/* Smartboard handwriting replaces keyboard blanks; teachers judge the ink. */
.handwriting{position:relative;display:inline-block;flex:0 1 210px;width:210px;max-width:100%;height:120px;background:#e5f6ff;border-bottom:3px solid #193363;border-radius:12px 12px 0 0;overflow:hidden;line-height:normal}
.handwriting-wide{flex-basis:100%;width:100%;height:200px}
.handwriting canvas{display:block;position:relative;width:100%;height:100%;touch-action:none;cursor:crosshair}
.handwriting-guide{position:absolute;inset:0;display:grid;place-items:center;color:#19336355;font-size:clamp(26px,3vw,42px);pointer-events:none}
.handwriting>button{position:absolute;right:2px;top:2px;padding:0 6px;min-height:32px;font-size:22px;border:0;box-shadow:none;background:#ffffffb0}
#teacherNext{position:fixed;right:20px;top:16px;z-index:30;font-size:22px;padding:8px 18px;min-height:44px}
.smartboard-mode #next{display:none!important}
.smartboard-mode .handwriting-response{gap:12px}

/* Draw attention to required sentence listening until each speaker is clicked. */
.listen-icon{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;vertical-align:middle}
.sentence-audio-line[data-listen-pending="true"]:not(:disabled) .listen-icon{background:#ffe47a;animation:listen-prompt 1.4s ease-in-out infinite}
@keyframes listen-prompt{0%,100%{transform:scale(1);box-shadow:0 0 0 0 #ffcf5570}50%{transform:scale(1.18) rotate(-10deg);box-shadow:0 0 0 8px #ffcf5500}}
@media(prefers-reduced-motion:reduce){.sentence-audio-line[data-listen-pending="true"]:not(:disabled) .listen-icon{animation:none;outline:2px solid #193363}}