/* Distinct white facets stay visible without hiding the matching toast outline. */
.boss-objective-sugar .boss-tile-mark,.remix-sugar:not(.remix-done) .remix-tile-mark{right:-5%;bottom:-5%;width:54%;height:62%;min-width:19px;padding:0;border:0;border-radius:0;background:url('sugar-crystals.svg') center/contain no-repeat;color:transparent;font-size:0;box-shadow:none;text-shadow:none;filter:drop-shadow(0 1px 1px #59486065)}
.boss-objective-sugar:after,.remix-sugar:not(.remix-done):after{border:1px solid #f7faff99;box-shadow:0 0 0 1px #8a829c55;inset:4%;border-radius:16%;background:linear-gradient(135deg,#eaf3ff10,transparent 65%)}
.boss-recipe-icon[data-recipe=sugar]{background:url('sugar-crystals.svg') center/contain no-repeat;color:transparent;font-size:0;border-radius:0}
.boss-recipe-help.recipe-help-visual{display:block;padding:0 8px 8px}.recipe-help-visual>button{display:block;min-height:44px!important;margin:6px auto 0!important;padding:8px 22px!important}
.recipe-visual{--lesson-time:4.8s;width:100%;max-width:300px;margin:0 auto;color:#704f32}.recipe-visual-board{height:122px;position:relative;overflow:hidden;border:1px solid #c79c60;border-radius:12px;background:repeating-linear-gradient(0deg,#e3b77d 0,#e8c38e 29px,#d3a36a 30px,#e7bd87 32px);box-shadow:inset 0 2px 3px #85532526}
.recipe-visual-target{position:absolute;width:44px;height:47px;left:calc(50% - 22px);top:9px;isolation:isolate}.recipe-visual-target>svg{position:relative;width:100%;height:100%;z-index:1;filter:drop-shadow(0 2px 1px #77502b55)}
.recipe-visual-row{position:absolute;top:68px;left:calc(50% - 70px);display:flex;gap:8px}.recipe-visual-row>span{width:41px;height:44px;animation:recipe-row-pop var(--lesson-time) ease-in-out infinite}.recipe-visual-row svg{width:100%;height:100%;filter:drop-shadow(0 2px 1px #77502b55)}
.recipe-visual-honey{position:absolute;inset:-5% -7% -8%;z-index:0;background:url('honey-patch.svg') center/contain no-repeat;transform-origin:center bottom;animation:recipe-honey-melt var(--lesson-time) ease-in-out infinite}
.recipe-visual-count,.recipe-visual-check{position:absolute;right:-3px;bottom:-2px;z-index:3;display:grid;place-items:center;min-width:21px;height:22px;border:1px solid #fff3ba;border-radius:8px;background:#935019;color:#fff6d2;font:800 14px system-ui;animation:recipe-count-two var(--lesson-time) steps(1) infinite}
.recipe-visual-count.count-one{animation-name:recipe-count-one}.recipe-visual-count.count-done{animation-name:recipe-count-done;background:#5e7a47}.recipe-visual-check{background:#5e7a47;animation:recipe-sugar-check var(--lesson-time) steps(1) infinite}
.recipe-visual-swipe{position:absolute;left:calc(50% - 50px);top:89px;width:100px;height:3px;border-radius:9px;background:#fff9dd;box-shadow:0 0 0 1px #9c674a;transform-origin:left;animation:recipe-swipe var(--lesson-time) linear infinite}
.recipe-visual-finger{position:absolute;left:calc(50% - 56px);top:83px;width:13px;height:13px;border:2px solid #fffdf0;border-radius:50%;background:#fff2bd77;box-shadow:0 1px 2px #715033;animation:recipe-finger var(--lesson-time) linear infinite}
.recipe-visual-steps{display:flex;align-items:center;justify-content:center;gap:7px;padding:7px 0 2px;font:600 11px/1.3 system-ui}.recipe-visual-steps span{display:flex;align-items:center;gap:4px}.recipe-visual-steps b{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#e4c994;color:#68452b}.recipe-visual-steps i{font-style:normal;color:#a37a47}.recipe-visual-note{display:block;text-align:center;font-size:10px;line-height:1.4;color:#856742;margin-top:3px}
.recipe-visual-crystals{position:absolute;right:-4px;bottom:-4px;width:32px;height:35px;z-index:2;background:url('sugar-crystals.svg') center/contain no-repeat;filter:drop-shadow(0 1px 1px #65566e55);animation:recipe-crystal-break var(--lesson-time) ease-out infinite}
.recipe-visual-beam{position:absolute;left:calc(50% - 2px);top:27px;width:4px;height:64px;border-radius:5px;z-index:3;background:#fff9d5;box-shadow:0 0 0 1px #d09e4a,0 0 6px #fff4b8;transform-origin:center bottom;animation:recipe-sugar-beam var(--lesson-time) ease-out infinite}
.recipe-visual-shard{position:absolute;left:22px;top:29px;width:7px;height:10px;border:1px solid #8b809b;background:#eaf6ff;clip-path:polygon(50% 0,100% 45%,40% 100%,0 30%);z-index:3;--shard-x:-19px;--shard-y:-7px;animation:recipe-sugar-shard var(--lesson-time) ease-out infinite}.shard-b{--shard-x:22px;--shard-y:-13px}.shard-c{--shard-x:12px;--shard-y:19px}
.recipe-kind-sugar .recipe-visual-row>span{animation-name:recipe-sugar-row}.recipe-kind-sugar .recipe-visual-swipe{animation-name:recipe-sugar-swipe}.recipe-kind-sugar .recipe-visual-finger{animation-name:recipe-sugar-finger}
@keyframes recipe-swipe{0%,5%{transform:scaleX(0);opacity:0}8%{opacity:1}24%{transform:scaleX(1);opacity:1}28%,43%{opacity:0;transform:scaleX(1)}44%{transform:scaleX(0);opacity:0}48%{opacity:1}64%{transform:scaleX(1);opacity:1}68%,100%{opacity:0;transform:scaleX(1)}}
@keyframes recipe-finger{0%,5%{transform:translateX(0);opacity:0}8%{opacity:1}24%{transform:translateX(100px);opacity:1}28%,43%{opacity:0;transform:translateX(100px)}44%{transform:translateX(0);opacity:0}48%{opacity:1}64%{transform:translateX(100px);opacity:1}68%,100%{opacity:0;transform:translateX(100px)}}
@keyframes recipe-row-pop{0%,24%,42%,64%,94%,100%{transform:scale(1);opacity:1}28%,68%{transform:scale(1.12);opacity:1}34%,74%{transform:scale(.25);opacity:0}}
@keyframes recipe-honey-melt{0%,26%,100%{transform:scale(1);opacity:1}35%,66%{transform:scale(.84,.7);opacity:1}77%,94%{transform:translateY(8px) scale(1.05,.05);opacity:0}}
@keyframes recipe-count-two{0%,100%{opacity:1}28%,99%{opacity:0}}@keyframes recipe-count-one{0%,28%,68%,100%{opacity:0}29%,67%{opacity:1}}@keyframes recipe-count-done{0%,68%,100%{opacity:0}69%,94%{opacity:1}}
@keyframes recipe-sugar-swipe{0%,8%{transform:scaleX(0);opacity:0}12%{opacity:1}36%{transform:scaleX(1);opacity:1}41%,100%{transform:scaleX(1);opacity:0}}
@keyframes recipe-sugar-finger{0%,8%{transform:translateX(0);opacity:0}12%{opacity:1}36%{transform:translateX(100px);opacity:1}41%,100%{transform:translateX(100px);opacity:0}}
@keyframes recipe-sugar-row{0%,37%,94%,100%{transform:scale(1);opacity:1}42%{transform:scale(1.13);opacity:1}50%,85%{transform:scale(.25);opacity:0}}
@keyframes recipe-sugar-beam{0%,38%,60%,100%{opacity:0;transform:scaleY(0)}43%,49%{opacity:1;transform:scaleY(1)}56%{opacity:0;transform:scaleY(1)}}
@keyframes recipe-crystal-break{0%,45%,100%{transform:scale(1);opacity:1}49%{transform:scale(1.15) rotate(7deg);opacity:1}58%,94%{transform:scale(.3) rotate(-12deg);opacity:0}}
@keyframes recipe-sugar-shard{0%,46%,100%{opacity:0;transform:translate(0,0)}50%{opacity:1}65%,94%{opacity:0;transform:translate(var(--shard-x),var(--shard-y)) rotate(80deg)}}
@keyframes recipe-sugar-check{0%,58%,100%{opacity:0}59%,94%{opacity:1}}
@media(prefers-reduced-motion:reduce){.recipe-visual *{animation:none!important}.recipe-visual-count.count-one,.recipe-visual-count.count-done,.recipe-visual-check,.recipe-visual-shard,.recipe-visual-finger{display:none}.recipe-visual-swipe{opacity:.75}.recipe-visual-beam{opacity:.7}.recipe-visual-honey,.recipe-visual-crystals{opacity:1}.recipe-visual-steps{font-size:11px}}
