/* Guidance on top of the original lessons: no replacement activity engine. */
#extra { overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; }
#coachCue { position:absolute; left:50%; bottom:2px; transform:translateX(-50%); z-index:4; max-width:94%; padding:8px 16px; background:#FFF8EA; border:2px solid #FFCA7A; border-radius:20px; font:600 17px/1.3 'Outfit','PingFang SC',sans-serif; color:#744200; cursor:pointer; white-space:nowrap; }
#coachCue[hidden], #coachNext[hidden] { display:none; }
#foot { position:relative; }
#coachNext { position:absolute; left:50%; bottom:0; transform:translateX(-50%); white-space:nowrap; color:#744200; font-size:13px; display:flex; align-items:center; gap:8px; z-index:5; }
#coachNext button { font:inherit; color:inherit; background:#FFF8EA; border:1px solid #F2C894; border-radius:12px; min-height:52px; padding:3px 12px; cursor:pointer; }
.knife { touch-action:none; }
.knife:focus-visible { outline:none; filter:drop-shadow(0 0 4px #6C5CE7); }
#next.pulse { background:linear-gradient(#FFAB32,#EF8500); box-shadow:0 6px 20px #FF8A0044; }
.coachTapHint { filter:drop-shadow(0 0 4px #FFB23E); }
.coachHalo { fill:none; stroke:#FF8A00; stroke-width:4; stroke-dasharray:8 7; pointer-events:none; }
.coachHand { pointer-events:none; }
@media (prefers-reduced-motion:reduce) { #next.pulse {animation:none;} }

#foot:has(#coachNext:not([hidden])) .mid { transform:translateY(-24px); }

/* A natural scene has no forward button, including while its task is unfinished. */
#next[hidden] { display:none !important; }
#foot .mid { grid-column:2; }
#next { grid-column:3; }
.cutReadyHalo { fill:none; stroke:#23A96C; stroke-width:4; opacity:0; }
.knife.cutReady .cutReadyHalo { opacity:1; animation:cutHalo 1.2s ease-in-out infinite; }
.knife.cutReady .knifeLine { stroke:#16945C; stroke-width:5; filter:drop-shadow(0 0 4px #22A86B88); }
.knife.cutReady .cutDirection { animation:cutDown 1.1s ease-in-out infinite; }
#coachCue.cutReadyCue { background:#E6F8EE; border-color:#22A86B; color:#126B43; }
@keyframes cutHalo { 50% { stroke-width:8; opacity:.45; } }
@keyframes cutDown { 50% { transform:translateY(9px); } }
@media(prefers-reduced-motion:reduce) { .knife.cutReady .cutReadyHalo,.knife.cutReady .cutDirection {animation:none;} }