@font-face{font-family:Baloo;src:url('../../../kit/fonts/baloo2-pilot.ttf');font-display:swap}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;font-family:Baloo,system-ui,sans-serif;color:#102b3d}body{background:#af713c url('world.webp') 75% center/cover no-repeat;overflow:hidden}button,a{touch-action:manipulation;font:inherit;-webkit-tap-highlight-color:transparent}button{color:#102b3d;cursor:pointer}header{height:48px;padding:0 12px;display:flex;align-items:center;justify-content:space-between;background:#073e35;color:#fff}header a{display:flex;align-items:center;color:white;text-decoration:none;min-width:48px;min-height:48px;font-size:18px}header span{font-size:15px}.heading{height:68px;padding:2px 10px;background:#fff3c4}.book{font-size:11px;line-height:16px;margin:0;white-space:nowrap}h1{font-size:28px;line-height:45px;margin:0}main{position:relative;height:calc(100svh - 116px);max-width:1360px;margin:auto}.speech{position:absolute;top:7px;left:10px;right:10px;min-height:96px;max-height:110px;padding:8px 10px;border:3px solid #102b3d;border-radius:19px;background:#fff3c4;z-index:4;font-size:20px;line-height:1.12}.speech p{margin:0}#guide{position:absolute;left:0;bottom:60px;width:145px;height:256px;object-fit:contain;filter:drop-shadow(0 5px 3px #102b3d66);transition:transform .25s;pointer-events:none}#guide.happy{transform:rotate(-5deg) scale(1.04)}#play{position:absolute;inset:0}#need{position:absolute;top:115px;left:8px;width:128px;min-height:132px;padding:5px;border:3px solid #102b3d;border-radius:18px;background:#ffda42;font-size:19px;line-height:1.05;touch-action:none;user-select:none}#need img{width:86px;height:82px;object-fit:contain;display:block;margin:auto;pointer-events:none}#need span{pointer-events:none}#need[aria-pressed=true]{background:#bdf2b1;outline:3px solid #102b3d;outline-offset:2px}#need:disabled{opacity:1;color:#102b3d}#need.dragging{z-index:12;filter:drop-shadow(0 10px 5px #102b3d88);pointer-events:none}#stations{position:absolute;top:108px;bottom:65px;left:144px;right:8px;display:grid;grid-template-columns:1fr;grid-template-rows:repeat(3,1fr);gap:6px;align-items:center}#stations.four{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,1fr);gap:8px}.station{min-width:0;position:relative;border:0;background:transparent;min-height:100px;padding:0;touch-action:manipulation;align-self:center}.object{display:block;object-fit:contain;width:100%;height:77px;filter:drop-shadow(0 5px 3px #102b3d77);pointer-events:none;transition:transform .2s}.station span{display:block;background:#fff3c4;border:2px solid #102b3d;border-radius:10px;padding:3px;font-size:18px;line-height:1.05}.station:disabled{opacity:1;color:#102b3d;cursor:default}.station.done span{background:#bdf2b1}.station.done .object{transform:translateY(-4px) rotate(-4deg)}.station.over span{background:#ffda42}.badge{position:absolute;top:5px;right:4px;width:34px;height:34px;object-fit:contain;pointer-events:none}.station .badge{display:none}.station.done .badge{display:block}#stations.four .object{height:96px}#stations.four span{min-height:47px;display:flex;align-items:center;justify-content:center;font-size:17px}.reveal #stations{left:148px}.reveal #stations.four{left:132px}#bar{position:absolute;left:8px;right:8px;bottom:8px;display:flex;gap:8px;align-items:center;justify-content:space-between;z-index:5}#progress{background:#073e35;color:white;padding:6px 10px;border-radius:16px;font-size:18px;line-height:1.1}#continue,.actions>*{display:flex;align-items:center;justify-content:center;min-width:48px;min-height:52px;padding:5px 12px;background:#ffda42;color:#102b3d;border:3px solid #102b3d;border-radius:14px;font-size:20px;line-height:1.1;text-decoration:none}#ending{position:absolute;top:135px;right:10px;left:145px;padding:14px 10px;background:#fff3c4;border:3px solid #102b3d;border-radius:22px;text-align:center;z-index:6}#ending h2{margin:0;font-size:27px;line-height:1.05}#ending p{font-size:20px;line-height:1.15;margin:10px 0}.end-star{width:65px;height:68px;object-fit:contain}.actions{display:flex;flex-direction:column;gap:8px}.actions>*{background:#073e35;color:#fff;font-size:19px}.celebration{position:absolute;inset:0;pointer-events:none;overflow:hidden}.celebration img{position:absolute;width:32px;height:32px;top:100px;animation:fall 1.4s ease-in infinite}@keyframes fall{to{transform:translateY(450px) rotate(150deg);opacity:0}}button:focus-visible,a:focus-visible{outline:3px solid #fff;outline-offset:2px;box-shadow:0 0 0 6px #102b3d}.skip{position:fixed;top:-100px;left:8px;min-height:48px;background:#fff3c4;color:#102b3d;z-index:30;padding:10px}.skip:focus{top:0}[hidden]{display:none!important}.dimmed{filter:brightness(.65) drop-shadow(0 5px 3px #102b3d77)}
@media(min-width:800px){header{padding:0 30px}.heading{height:96px;padding:4px 30px}.book{font-size:15px;line-height:21px}h1{font-size:40px;line-height:64px}main{height:calc(100svh - 144px)}.speech{left:25px;right:auto;top:22px;width:390px;max-height:none;min-height:115px;font-size:25px;padding:16px}#guide{left:15px;bottom:80px;width:360px;height:450px}#need{left:460px;top:160px;width:210px;min-height:210px;font-size:27px;padding:12px}#need img{width:150px;height:135px}#stations{left:760px;right:40px;top:40px;bottom:100px;gap:16px}.object{height:125px}.station span{font-size:24px;padding:6px}#stations.four{left:700px;gap:25px}#stations.four .object{height:170px}#stations.four span{font-size:24px;min-height:66px}.reveal #stations,.reveal #stations.four{left:490px;right:50px;top:50px;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,1fr);gap:25px}.reveal .object{height:170px}.reveal .station span{font-size:25px}#bar{left:450px;right:40px;bottom:28px}#progress{font-size:24px}#continue{font-size:25px;min-height:58px}#ending{left:470px;right:100px;top:140px;padding:30px}#ending h2{font-size:40px}#ending p{font-size:27px}.actions{flex-direction:row;justify-content:center}.actions>*{font-size:24px;min-height:60px}.end-star{width:100px;height:100px}.badge{width:50px;height:50px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}


/* r11-b: three reusable destinations; reveal feedback stays above objects. */
.book{font-size:10px}h1{font-size:27px}.speech{min-height:70px;max-height:none;font-size:19px}#need{top:110px;min-height:145px}#need img{height:75px}#guide{width:132px;height:240px;bottom:62px}#stations{top:110px;grid-template-rows:repeat(3,1fr)}.object{height:66px}.station span{font-size:17px}.reveal #stations.four{left:135px;top:155px;gap:9px 6px}.reveal #stations.four .object{height:76px}.reveal #stations.four span{font-size:17px;min-height:42px}.reveal #guide{width:135px;height:270px}#ending{top:145px}#ending p{font-size:19px}body{background-size:auto 350%;background-position:left top}
@media(min-width:800px){.book{font-size:15px}h1{font-size:40px}.speech{font-size:25px;width:420px;min-height:120px}#need{top:170px}#need img{height:135px}#guide{width:330px;height:450px;bottom:75px}#stations{top:50px}.object{height:125px}.station span{font-size:24px}.reveal #stations.four{left:510px;right:50px;top:60px;gap:25px}.reveal #stations.four .object{height:170px}.reveal #stations.four span{font-size:24px;min-height:66px}.reveal #guide{width:330px;height:450px}#ending{top:150px}#ending p{font-size:27px}}

.object{width:90%;margin-inline:auto}

body{background-size:cover;background-position:left center}

body{background-position:30% center}

/* 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}}