/* Objects keep their physical form throughout selection, flight and placement. */
.piece-art{position:relative;display:inline-flex;align-items:center;justify-content:center;width:100%;height:100%;pointer-events:none;flex-shrink:0;isolation:isolate}
.piece-art>.shell{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;filter:drop-shadow(0 3px 2px #3d4d6b25);z-index:0}
.piece-art>.object{position:absolute;width:58%;height:64%;left:21%;top:20%;object-fit:contain;z-index:1;filter:none}
.piece-letter{width:100%;height:auto;aspect-ratio:1.43;max-height:100%}.piece-letter>.object{left:23%;top:34%;width:50%;height:56%}
.piece-mallow{height:100%;width:auto;aspect-ratio:.86}.piece-mallow>.object{left:16%;top:27%;width:68%;height:55%}
.piece-mitten{height:100%;width:auto;aspect-ratio:.92}.piece-mitten>.object{left:33%;top:24%;width:49%;height:49%}
.piece-ice{height:100%;width:100%}.piece-ice>.object{left:23%;top:6%;width:58%;height:63%}
.piece-carriage>.object{left:27%;top:0%;width:52%;height:61%}
.envelope,.marshmallow,.mitten,.stone{background:none;border:0;box-shadow:none;border-radius:0;padding:0}.envelope:before,.mitten:before,.mitten:after{display:none}
.scene-piece.stock{align-items:flex-end}.stock>.object{height:100%;width:92%;object-position:center bottom;filter:drop-shadow(0 4px 2px #44352233)}
.scene-piece:active{translate:none}.destination .piece-art{animation:land .4s ease-out}.destination .piece-art>.object{animation:none;background:none;border:0;border-radius:0;padding:0}
.cargo-flight,.cargo-ghost{display:flex;align-items:center;justify-content:center;padding:0;background:none!important;border:0!important;border-radius:0;box-shadow:none!important;pointer-events:none;z-index:1000}
.cargo-flight>.object{width:85%;height:90%}.cargo-ghost{position:fixed;transform:none!important}.cargo-ghost>.object{width:85%;height:90%}.cargo-flight{transition:transform .65s cubic-bezier(.2,.6,.4,1)}.cargo-flight.cargo-6{transition:transform .8s ease-in}.cargo-6 .art{animation:roll-ball .8s linear}
.prop>.art{position:absolute;inset:0;object-fit:fill}.cocoa .destination.cocoa-surface{left:7%;top:8%;width:66%;height:39%;border-radius:50%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:43%;gap:0;align-content:center;justify-items:center;padding:3% 9%;overflow:hidden;isolation:isolate}
.cocoa .destination .piece-mallow{width:auto;height:100%;animation:gentle-bob 3s ease-in-out infinite}.cocoa .destination .piece-mallow:nth-child(even){animation-delay:-1s}.cocoa .destination .piece-mallow>.object{width:68%;height:55%;left:16%;top:27%;animation:none}
.cocoa .destination.ready{outline:2px dashed #ffdf8acc;outline-offset:-3px}.cocoa .steam{left:25%;top:-12%;height:26%;z-index:4}.cocoa .steam:nth-child(3){left:52%}.cocoa .spoon{left:40%;top:8%;height:42%;width:3%;transform-origin:50% 70%;z-index:9}.stirring .spoon{animation:stir-spoon .6s ease-in-out 4}.stirring .piece-mallow{animation:swirl-mallow 1.2s linear 2!important}
.mallow-tray{border:2px solid #e3b981;border-radius:16px;background:linear-gradient(140deg,#dfb57fdd,#b58048dd);box-shadow:0 4px 2px #7e513d55;z-index:2}.mallow-tray:after{content:'';position:absolute;inset:4%;border:2px solid #f4d3a1;border-radius:12px}
.toy-rack{background:linear-gradient(180deg,#fff0 0 48%,#ebbc82 48% 52%,#aa6d39 52% 57%,#fff0 57% 94%,#ebbc82 94% 97%,#a56c38 97%);border-left:5px solid #c69057;border-right:5px solid #c69057;box-shadow:0 5px 4px #56391e33;border-radius:5px}.basket .destination{flex-wrap:nowrap}.basket .destination>.object{height:90%;width:32%;object-position:center bottom}
/* Tied ribbons and paper folds are visible during the helper's packing action. */
.gift-wrap{position:absolute;inset:0;pointer-events:none;z-index:12}.finished-gift{position:absolute;inset:-8% 0 0;width:100%;height:108%;object-fit:fill;opacity:0;transform:scale(.8);transition:opacity .5s,transform .5s;filter:drop-shadow(0 5px 2px #67452f55)}.paper{position:absolute;top:0;height:95%;width:55%;opacity:0;background:repeating-linear-gradient(45deg,#fff5d9 0 10px,#f1d9b1 10px 11px);border:1px solid #c7a575;transition:transform 1.3s,opacity .2s;transform:scaleX(0)}.paper-left{left:0;transform-origin:0 50%}.paper-right{right:0;transform-origin:100% 50%}.wrapping .paper{opacity:1;transform:scaleX(1)}.wrapped .finished-gift{opacity:1;transform:scale(1)}.wrapped .paper{opacity:0}.wrapped .destination{opacity:0;transition:opacity .4s}
/* Every articulated pose shares a foot baseline. No whole-character hovering. */
.helper{animation:none;filter:none;transition:left .6s ease;z-index:5}.helper:after{content:'';position:absolute;width:53%;height:4%;left:24%;bottom:-.5%;border-radius:50%;background:#47322439;filter:blur(3px);z-index:-1}.helper>.pose{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center bottom;opacity:0;pointer-events:none;transform-origin:50% 97%}.helper>.pose-0{opacity:1;animation:grounded-idle 4s ease-in-out infinite}.helper>.pose-1{animation:hello-pose 9s step-end infinite}.helper:not(.working):not(.clap):not(.wave):not(.walking):not(.bowling):not(.pulling)>.pose-0{animation:grounded-idle 4s ease-in-out infinite,hello-hide 9s step-end infinite}
.helper.wave>.pose,.helper.clap>.pose,.helper.working>.pose,.helper.bowling>.pose,.helper.pulling>.pose,.helper.walking>.pose{animation:none;opacity:0}.helper.wave>.pose-1{opacity:1;animation:wave-body .55s ease-in-out infinite}.helper.clap>.pose-2{opacity:1;animation:clapping .32s ease-in-out infinite}.helper.working>.pose-3{opacity:1;animation:busy-hands .45s ease-in-out infinite}.helper.celebrate{animation:none}.helper.celebrate>.pose-2{animation:clapping .32s ease-in-out 8}.helper.working:after{transform:translateX(5%)}
#scene[data-game="5"] .helper:not(.walking)>.pose{animation:none;opacity:0}#scene[data-game="5"] .helper:not(.walking)>.pose-0{opacity:1}.helper.walking{animation:none}.helper.walking>.pose{animation:walk-frame .72s steps(1,end) infinite}.helper.walking>.pose-1{animation-delay:-.54s}.helper.walking>.pose-2{animation-delay:-.36s}.helper.walking>.pose-3{animation-delay:-.18s}
#scene[data-game="6"] .helper>.pose{animation:none;opacity:0}#scene[data-game="6"] .helper>.pose-0{opacity:1}#scene[data-game="6"] .helper.bowling>.pose-0{opacity:0}#scene[data-game="6"] .helper.bowling>.pose-1{opacity:1;animation:bowl-release .8s ease-in-out}#scene[data-game="6"] .helper.wave>.pose-0,#scene[data-game="6"] .helper.clap>.pose-0{opacity:0}#scene[data-game="6"] .helper.wave>.pose-2{opacity:1;animation:wave-body .55s infinite}#scene[data-game="6"] .helper.clap>.pose-3{opacity:1;animation:clapping .32s infinite}
#scene[data-game="7"] .helper>.pose{animation:none;opacity:0}#scene[data-game="7"] .helper>.pose-0{opacity:1}#scene[data-game="7"] .helper.wave>.pose-0,#scene[data-game="7"] .helper.clap>.pose-0,#scene[data-game="7"] .helper.pulling>.pose-0{opacity:0}#scene[data-game="7"] .helper.wave>.pose-3,#scene[data-game="7"] .helper.clap>.pose-3{opacity:1;animation:wave-body .55s infinite}#scene[data-game="7"] .helper.pulling>.pose-1{animation:pull-one .7s steps(1,end) infinite}#scene[data-game="7"] .helper.pulling>.pose-2{animation:pull-two .7s steps(1,end) infinite}
/* Mitten palms and picture ice stones remain attached to their pictures. */
.hang-spot{border:2px dashed #e6f2f9;background:#ffffff22;border-radius:15px}.hang-spot.filled{border:0}.hang-spot>.hanging{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;transform-origin:50% 0}.hanging:before{top:-5%;height:15%;width:10%;left:48%;box-shadow:1px 0 0 #815932}.hanging>.piece-mitten{height:100%;width:auto;max-width:100%}.trail-spot{border:2px dashed #c1e8ff;background:#9ddcfa33;border-radius:50%}.trail-spot.filled{border:0;background:none;box-shadow:none}.stone-bank{border:2px solid #e0f4ff;background:#d3edf734;border-radius:30px}.trail-spot>.piece-ice{width:100%;height:100%;animation:land .4s}.trail-spot .piece-ice>.object{left:23%;top:6%;width:58%;height:63%;animation:none}
/* Pins have a narrow neck, two red stripes and a stable flat foot. */
.pin{background:none;border:0;box-shadow:none;z-index:6}.pin>.pin-shell{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;filter:drop-shadow(2px 5px 2px #35567240)}.pin .object{left:21%;top:48%;width:58%;height:36%;filter:none}.pin.knocked{opacity:.7;transform:translate(13%,48%) rotate(82deg);transition:transform .6s,opacity .6s}.bowling-lane{background:linear-gradient(#f9feff33,#c7e7f255);border:2px solid #e9faff;border-radius:45% 45% 10% 10%;transform:perspective(600px) rotateX(9deg);box-shadow:inset 0 0 20px #d6f6ff66}
/* The tow rope joins the rescuer's gloves to the moving boat bow. */
.boat-wrap{position:absolute;z-index:4;transition:transform 2.6s ease-in-out;animation:boat-bob 4s ease-in-out infinite}.boat-wrap>.art{position:absolute;inset:0;object-fit:fill}.boat{animation:none;z-index:5}.boat-piece{background:none;border:0;box-shadow:none}.boat-piece>.object{height:100%;width:90%;object-fit:contain;filter:drop-shadow(0 3px 2px #694c3233)}.tow-rope{position:absolute;inset:0;width:100%;height:100%;z-index:6;pointer-events:none;overflow:visible}.tow-rope path{fill:none;stroke:#d9b97d;stroke-width:4;stroke-linecap:round;stroke-dasharray:3 1}.tow-rope .rope-shadow{stroke:#71552f;stroke-width:6;stroke-dasharray:none;opacity:.55}.towing .boat-wrap{animation:none;transform:translate(-27%,-8%)}.towing .tow-rope path{animation:taut-rope 2.6s ease-in-out forwards}.dock-target{border:0;background:none}.dock-target>.object{object-position:center bottom}
.train .engine>.art{object-fit:fill}.train .picture-carriage>.piece-art>.shell{object-fit:fill}.train .picture-carriage>.piece-art>.object{left:27%;top:0;width:52%;height:61%}.train .destination{z-index:3}.train .destination.filled{pointer-events:none}.train .picture-carriage{z-index:4}.train-track{box-shadow:0 3px 0 #58646d66}.picture-carriage>.piece-art{position:absolute;inset:0}.train .picture-carriage .piece-art>.object{width:52%;height:61%}
/* Real wood panels, brass hinges and a handle on each opening door. */
.fox-house{background:repeating-linear-gradient(90deg,#aa6e3e 0 6px,#d69d61 6px 48px,#ad7444 49px 51px);box-shadow:inset 0 0 20px #7e422944,0 8px 0 #805733}.fox-door>.cover{background:repeating-linear-gradient(90deg,#ac3f38 0 2px,#da6554 3px 16px,#c35443 17px 18px);box-shadow:inset 0 0 0 4px #e98969,inset 0 0 0 6px #a54638,inset 8px 2px 8px #8d302744,3px 0 4px #30221c66;border:2px solid #e5ae65}.fox-door:nth-child(even)>.cover{background:repeating-linear-gradient(90deg,#267f7b 0 2px,#55b1a2 3px 16px,#389085 17px 18px);box-shadow:inset 0 0 0 4px #8fceaf,inset 0 0 0 6px #267d77,3px 0 4px #30221c66}.fox-door>.cover:after{display:none}.door-hinge{position:absolute;left:1%;top:26%;width:12%;height:5%;border:1px solid #8c652c;background:linear-gradient(#ebca73,#9b6f32);z-index:3}.door-hinge.lower{top:74%}.door-handle{position:absolute;right:8%;top:66%;width:6%;height:11%;background:linear-gradient(90deg,#9c6b2b,#f4d88a,#a17431);border:1px solid #97712b;border-radius:50%;box-shadow:1px 2px 1px #704727}.fox-guide>.art{transform-origin:50% 95%;animation:guide-look 6s ease-in-out infinite}.fox-friend{animation:fox-wave 1s ease-in-out infinite;transform-origin:50% 95%}
@keyframes hello-pose{0%,65%,90%,100%{opacity:0}66%,89%{opacity:1}}@keyframes hello-hide{0%,65%,90%,100%{opacity:1}66%,89%{opacity:0}}@keyframes grounded-idle{50%{transform:scaleY(1.012)}}@keyframes wave-body{50%{transform:rotate(-2deg) scaleY(1.01)}}@keyframes clapping{50%{transform:scaleX(.97) scaleY(1.015)}}@keyframes busy-hands{50%{transform:rotate(1.5deg)}}@keyframes walk-frame{0%,24%{opacity:1}25%,100%{opacity:0}}@keyframes pull-one{0%,49%{opacity:1}50%,100%{opacity:0}}@keyframes pull-two{0%,49%{opacity:0}50%,100%{opacity:1}}@keyframes bowl-release{0%{transform:rotate(-4deg)}40%{transform:translateX(4%) rotate(3deg)}100%{transform:none}}@keyframes roll-ball{to{rotate:540deg}}@keyframes land{from{transform:scale(.8);opacity:.3}70%{transform:scale(1.04)}}@keyframes gentle-bob{50%{translate:0 -2%}}@keyframes stir-spoon{50%{transform:translateX(80%) rotate(15deg)}}@keyframes swirl-mallow{50%{transform:translate(6%,-5%) rotate(12deg)}}@keyframes boat-bob{50%{translate:0 -1%}}@keyframes taut-rope{to{d:path('M 175 318 Q 265 340 307 398')}}@keyframes guide-look{50%{transform:rotate(-1.5deg)}}@keyframes fox-wave{50%{transform:rotate(-4deg)}}
@media(max-width:700px){.piece-mallow{max-width:100%}.cargo-ghost{min-width:0!important;min-height:0!important}.destination .piece-art{min-height:0;min-width:0}.pin .object{min-height:0}.mallow-tray{border-width:1px}.toy-rack{border-width:3px}.fox-door>.cover{box-shadow:inset 0 0 0 2px #e98969,inset 0 0 0 3px #a54638}.tow-rope path{stroke-width:4}}
@media(prefers-reduced-motion:reduce){.helper>.pose{animation:none!important}.helper>.pose-0{opacity:1}.helper>.pose-1{opacity:0}.boat-wrap,.fox-friend,.hanging{animation:none!important}}
/* Alternate open and closed hand frames make an actual clap cycle. */
.helper.clap>.pose-2{animation:clap-closed .45s steps(1,end) infinite}.helper.clap>.pose-4{animation:clap-open .45s steps(1,end) infinite}.helper.celebrate>.pose-2{animation:clap-closed .45s steps(1,end) 6}.helper.celebrate>.pose-4{animation:clap-open .45s steps(1,end) 6}
.helper>.wave-body{clip-path:polygon(0 0,100% 0,100% 14%,70% 14%,70% 54%,100% 54%,100% 100%,0 100%)}.helper>.wave-arm{clip-path:polygon(70% 14%,100% 14%,100% 54%,70% 54%);transform-origin:70% 50%;animation:hello-pose 9s step-end infinite,wave-joint .5s ease-in-out infinite}.helper.wave>.wave-body{opacity:1;animation:none}.helper.wave>.wave-arm{opacity:1;animation:wave-joint .5s ease-in-out infinite}
#scene[data-game="6"] .helper.clap>.pose-3{animation:clap-closed .45s steps(1,end) infinite}#scene[data-game="6"] .helper.clap>.pose-4{animation:clap-open .45s steps(1,end) infinite}#scene[data-game="7"] .helper.clap>.pose-2{opacity:1;animation:clap-closed .45s steps(1,end) infinite}#scene[data-game="7"] .helper.clap>.pose-3{opacity:0;animation:none}#scene[data-game="7"] .helper.clap>.pose-4{animation:clap-open .45s steps(1,end) infinite}
#scene[data-game="9"] .helper>.pose-0{animation:grounded-idle 4s ease-in-out infinite!important;opacity:1}#scene[data-game="9"] .helper.clap>.pose-0{opacity:0}#scene[data-game="9"] .helper.clap>.pose-4{opacity:1;animation:clapping .4s infinite}
@keyframes clap-closed{0%,49%{opacity:1}50%,100%{opacity:0}}@keyframes clap-open{0%,49%{opacity:0}50%,100%{opacity:1}}@keyframes wave-joint{50%{transform:rotate(-13deg)}}
.helper.wrapping-helper{z-index:13}.scene-piece.dragging,.snowball-action.dragging{opacity:.15}.snowball-action.ball-finished{visibility:hidden}.helper.wave~.snowball-action,.helper.clap~.snowball-action,.helper.bowling~.snowball-action{opacity:0}#scene[data-game="8"] .helper{z-index:8}
.cocoa .destination.cocoa-surface{grid-auto-rows:66%}
@media(prefers-reduced-motion:reduce){.helper>.wave-arm{animation:none!important;opacity:0}.helper.clap>.pose-2,.helper.clap>.pose-4{animation:none!important}.helper.clap>.pose-2{opacity:1}.helper.clap>.pose-4{opacity:0}}

/* Embedded single-storey lowercase a for child-friendly letter formation. */
@font-face{font-family:SchoolA;src:url("media/school-a-400.woff") format("woff");font-style:normal;font-weight:400;font-display:swap;unicode-range:U+0061}
@font-face{font-family:SchoolA;src:url("media/school-a-700.woff") format("woff");font-style:normal;font-weight:700;font-display:swap;unicode-range:U+0061}
body,button,select{font-family:SchoolA,"Trebuchet MS",Arial,sans-serif}