@font-face{font-family:Baloo;src:url('../../../kit/fonts/baloo2-pilot.ttf');font-display:swap}*{box-sizing:border-box}html,body{margin:0;color:#102b3d;font-family:Baloo,system-ui,sans-serif}body{background:#146e78 url('world.webp') center/cover fixed}button,a{font:inherit;touch-action:manipulation}button{cursor:pointer;color:inherit}header{height:40px;padding:0 12px;background:#102b3d;color:#fff;display:flex;align-items:center;justify-content:space-between}header a{color:inherit;display:flex;align-items:center;min-height:48px;min-width:48px;text-decoration:none}main{height:calc(100svh - 40px);min-height:560px;position:relative;max-width:1440px;margin:auto;isolation:isolate}.heading{padding:5px 12px 7px;background:#ffdc47;text-align:center}.book{font-size:12px;line-height:1.15;margin:0}h1{font-size:26px;line-height:1.05;margin:3px 0}#instruction{font-size:17px;line-height:1.1;margin:0}.guide{position:absolute;left:-2%;top:27%;height:41%;width:43%;object-fit:contain;filter:drop-shadow(0 5px 3px #102b3d66);transition:transform .25s}.happy .guide{transform:rotate(-6deg) scale(1.04)}#speech{position:absolute;top:17%;left:4%;width:92%;margin:0;padding:7px 10px;min-height:49px;font-size:17px;line-height:1.15;background:#fff6c5;border:3px solid #102b3d;border-radius:18px;z-index:3}#progress{position:absolute;left:8px;top:70%;font-size:16px;color:#fff;background:#102b3d;border-radius:12px;padding:2px 9px;margin:0}.stations{position:absolute;right:8px;top:29%;height:45%;width:57%;display:flex;flex-direction:column;gap:4px;justify-content:space-around}.station{position:relative;flex:1;min-height:48px;border:0;background:transparent;padding:0;display:flex;align-items:center;justify-content:flex-end;text-align:center;filter:drop-shadow(0 4px 3px #102b3d55)}.station>img{position:absolute;left:0;width:49%;height:100%;object-fit:contain;pointer-events:none}.station>span{position:relative;width:73%;padding:5px 4px;border:2px solid #102b3d;border-radius:12px;background:#fff6c5;font-size:17px;line-height:1.05;pointer-events:none}.station.done>span{background:#c1f3ad}.station .spark{position:absolute;right:-3px;top:-6px;width:35px;height:35px}.tray{position:absolute;left:8px;right:8px;bottom:8px;height:22%;display:flex;gap:5px;align-items:stretch}.piece{flex:1;min-width:0;min-height:48px;border:2px solid #102b3d;border-radius:15px;padding:4px;background:#ffdf53;font-size:16px;line-height:1.05;display:flex;flex-direction:column;align-items:center;justify-content:center;touch-action:none;user-select:none}.piece img{height:52%;width:80%;object-fit:contain;pointer-events:none}.piece span{pointer-events:none}.piece[aria-pressed=true],.station.over>span{background:#fff6c5;outline:4px solid #102b3d;outline-offset:1px}.piece:disabled{background:#c1f3ad;color:#102b3d;opacity:1}.piece:disabled img{opacity:.5}.station:disabled{opacity:1;color:#102b3d}.dragging{opacity:.4}.ghost{position:fixed;pointer-events:none;z-index:20;width:95px;height:95px;object-fit:contain;transform:translate(-50%,-50%);filter:drop-shadow(0 12px 5px #102b3d99)}button:focus-visible,a:focus-visible{outline:3px solid white;box-shadow:0 0 0 6px #102b3d;z-index:9}#finish{position:absolute;bottom:15px;left:50%;transform:translateX(-50%);min-height:52px;padding:8px 22px;background:#ffdc47;border:3px solid #102b3d;border-radius:14px;font-size:21px;white-space:nowrap}#ending{position:absolute;inset:28% 12px 12px;background:#fff6c5;border:3px solid #102b3d;border-radius:24px;padding:14px;text-align:center;z-index:5;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:12px}#end-title{font-size:30px;line-height:1.1;margin:0}#ending p{font-size:20px;line-height:1.15;margin:0}.final-art{width:100px;height:100px;object-fit:contain}.actions{display:flex;gap:8px}.actions>*{background:#102b3d;color:#fff;border:3px solid #102b3d;border-radius:14px;min-height:52px;padding:8px 12px;font-size:19px;text-decoration:none;display:flex;align-items:center}.confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden}.confetti img{position:absolute;width:35px;height:35px;object-fit:contain;animation:float 1.2s ease-in-out alternate infinite}.skip{position:fixed;top:-90px;background:white;color:#102b3d;padding:12px;z-index:30}.skip:focus{top:0}[hidden]{display:none!important}.reveal .stations{top:30%;height:46%}.reveal .station>img{width:65%;left:-4%}.reveal .station>span{width:64%}.reveal #speech{min-height:60px}.reveal #progress{top:77%}@keyframes float{to{transform:translateY(12px) rotate(20deg)}}@media(min-width:800px){header{height:52px;font-size:20px;padding:0 28px}main{height:calc(100svh - 52px)}.heading{padding:9px}.book{font-size:16px}h1{font-size:40px}#instruction{font-size:23px}#speech{top:17%;left:7%;width:86%;font-size:25px;padding:12px}.guide{left:4%;top:29%;height:43%;width:32%}.stations{right:6%;top:30%;width:57%;height:43%;gap:12px}.station>span{font-size:25px;padding:10px;width:65%}.station>img{width:48%}.tray{left:39%;right:6%;height:21%;gap:14px}.piece{font-size:23px}.piece img{height:60%}#progress{left:13%;top:76%;font-size:24px}#ending{inset:28% 23% 7%;padding:25px}#end-title{font-size:42px}#ending p{font-size:27px}.final-art{width:145px;height:145px}.actions>*{font-size:24px}.reveal .stations{right:8%;top:30%;height:49%;width:56%}.reveal #progress{top:80%}#finish{bottom:5%;font-size:25px}.station .spark{width:55px;height:55px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

/* Select the middle-left scene from the native storyboard, rather than showing the comic grid. */
body{background-size:auto 310svh;background-position:3% 52%}#ending>:not(.confetti){position:relative;z-index:1}.confetti{height:65px}#end-title:focus{outline:none}#ending{background:#ffdc47}#ending .actions{margin-top:7px}
@media(min-width:800px){body{background-size:210% auto;background-position:0 48%}}

/* Compact outcome card: keep scene and reacting guide above the controls. */
#ending{position:fixed;top:auto;bottom:12px;left:12px;right:12px;width:auto;max-width:480px;margin:0 auto;padding:12px;background:#fff3c4;border:3px solid #102b3d;border-radius:18px;text-align:center;z-index:20;max-height:35svh}
#ending h2{font-size:17px;line-height:21px;margin:0 0 10px;font-weight:600}
#ending .actions{display:flex;flex-direction:row;justify-content:center;gap:8px}
#ending .actions>*{min-width:48px;min-height:48px;font-size:18px;line-height:22px;padding:7px 10px;background:#073e35;color:#fff;border:2px solid #102b3d;border-radius:12px;text-decoration:none;display:flex;align-items:center;justify-content:center}
#ending>img,#ending>p{display:none}
body:has(#ending:not([hidden])) #guide{position:fixed;left:28px;top:auto;bottom:calc(35svh + 24px);width:145px;height:230px;object-fit:contain;transform:rotate(-4deg)}
body:has(#ending:not([hidden])) .speech,body:has(#ending:not([hidden])) .bubble,body:has(#ending:not([hidden])) #speech{visibility:hidden}
@media(min-width:800px){body:has(#ending:not([hidden])) #guide{left:calc(50% - 330px);bottom:calc(35svh + 24px);width:260px;height:350px}}