@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{min-height:100svh;background:#087c88 url('world.webp') center/cover fixed}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:#102b3d}header{height:44px;padding:0 12px;background:#073e35;color:white;display:flex;align-items:center;justify-content:space-between}header a{color:white;min-width:44px;min-height:44px;display:flex;align-items:center;text-decoration:none}header span{font-size:14px}main{max-width:1300px;margin:auto;padding:5px 10px}.book{font-size:12px;line-height:1.1;margin:0;background:#fff6d6;width:fit-content;padding:2px 4px}h1{font-size:24px;line-height:1.05;margin:3px 0;background:#fff6d6;width:fit-content;padding:3px 5px;max-width:100%}#world{position:relative}.guide-scene{height:139px;position:relative}#guide{position:absolute;left:-4px;top:0;width:100px;height:139px;object-fit:contain;filter:drop-shadow(0 4px 3px #102b3d66);transition:transform .2s}.happy #guide{transform:rotate(-5deg)}.bubble{position:absolute;right:0;top:5px;width:calc(100% - 98px);border:2px solid #102b3d;border-radius:16px;background:#fff2ae;padding:8px;z-index:2}#speech{font-size:17px;line-height:1.12;margin:0}#feedback{margin:5px 0 0;font-size:15px;line-height:1.15}#feedback:empty{display:none}#progress{background:#073e35;color:white;border-radius:20px;padding:1px 10px;font-size:14px;line-height:1.1;margin:0 0 2px auto;width:fit-content}.stations{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;align-items:end}.station{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;min-height:110px;min-width:0;border:0;background:transparent;padding:0;touch-action:manipulation}.station img{width:100%;height:72px;object-fit:contain;filter:drop-shadow(0 5px 3px #102b3d66);pointer-events:none}.station span{background:#fff6d6;border:2px solid #102b3d;border-radius:9px;padding:4px;font-size:15px;line-height:1.1;display:block;width:100%;overflow-wrap:anywhere}.station.done span{background:#bdf5ac}.tray{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;margin:8px 0}.piece{min-width:0;min-height:92px;background:#fff6d6;border:2px solid #102b3d;border-radius:12px;padding:3px;line-height:1.1;font-size:14px;touch-action:none;user-select:none}.piece img{display:block;width:100%;height:48px;object-fit:contain;pointer-events:none}.piece[aria-pressed=true]{background:#ffdb40;outline:3px solid #102b3d;outline-offset:1px}.piece:disabled{opacity:1;background:#bdf5ac}.piece:disabled img{opacity:.55}.over img{transform:translateY(-6px)}button:focus-visible,a:focus-visible{outline:3px solid white;outline-offset:2px;box-shadow:0 0 0 5px #102b3d}.ghost{position:fixed;width:90px;height:90px;object-fit:contain;pointer-events:none;z-index:40;transform:translate(-50%,-50%) rotate(-8deg)}#ending{padding:16px;background:#fff2ae;border:3px solid #102b3d;border-radius:24px;text-align:center;position:relative;margin-top:15px}#ending h2{font-size:28px;line-height:1.1;margin:0 0 10px}#ending p{font-size:19px;line-height:1.15;margin:7px 0 14px}.actions{display:flex;gap:8px;justify-content:center}.actions>*{background:#073e35;color:white;border:2px solid #102b3d;border-radius:12px;min-height:48px;padding:7px;font:18px Baloo,system-ui;text-decoration:none;display:flex;align-items:center;justify-content:center}.party{width:56px;height:56px;object-fit:contain}.skip{position:fixed;top:-100px;background:white;padding:12px;z-index:50}.skip:focus{top:0}[hidden]{display:none!important}#finish{min-height:44px;padding:5px 14px;border:2px solid #102b3d;border-radius:12px;background:#073e35;color:white;font-size:18px;display:block;margin:6px auto}.spark{position:absolute;top:0;right:0;width:35px!important;height:35px!important}.reveal .stations{grid-template-columns:repeat(2,minmax(0,1fr))}.game-prompt{background:#fff2ae;border:2px solid #102b3d;border-radius:10px;padding:7px;margin:0 0 4px;font-size:17px;line-height:1.1}.game .station[aria-pressed=true]{outline:3px solid #ffdb40}.game-token{display:block;width:65px;height:65px;object-fit:contain;margin:6px auto;touch-action:none}.game-controls{display:flex;gap:5px;justify-content:center}.game-controls button{min-height:44px;padding:5px 12px;background:#fff2ae;border:2px solid #102b3d;border-radius:10px}.many .station img{height:49px}.many .station{min-height:90px}.many .station span{font-size:14px}.many .piece{font-size:13px}.many .guide-scene{height:130px}.complete #progress{display:none}
@media(min-width:800px){main{padding:12px 20px}.book{font-size:16px}h1{font-size:36px}#world{min-height:650px}.guide-scene{position:absolute;width:30%;top:20px;height:600px}#guide{top:180px;width:100%;height:390px}.bubble{top:0;width:100%;font-size:24px}#speech{font-size:24px}#feedback{font-size:21px}#play,#ending{position:absolute;top:45px;right:0;width:66%}#progress{font-size:20px}.station{min-height:180px}.station img,.many .station img{height:140px}.station span,.many .station span{font-size:21px}.tray{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.piece,.many .piece{font-size:19px;min-height:130px}.piece img{height:85px}.many .guide-scene{height:600px}.game-prompt{font-size:24px}.game-token{height:100px;width:100px}.game-controls button{font-size:22px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

.game .tray{display:block}

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

/* 10D masked scenes: HTML dialogue and board targets in frame coordinates. */
body{background:#f7f1df;color:#102b3d}main{max-width:1440px;padding:8px 0}.book,h1{margin-left:10px}h1{font-size:24px}.page-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}.story-art{position:relative;width:100%;aspect-ratio:9/16;container-type:inline-size;overflow:hidden;background:#e9dbb9}.frame{display:block;width:100%;height:100%;object-fit:fill}.mask-feature{position:absolute;z-index:2;margin:0;color:#102b3d;background:#fff6d6;border:2px solid #102b3d;border-radius:7px;padding:3px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:clamp(12px,3.9cqw,22px);line-height:1.1;overflow-wrap:anywhere;font-weight:600}.dialogue{background:#fff;border-color:#173476;border-radius:22px;font-size:clamp(14px,3.9cqw,22px);padding:5px}.activity-pane{padding:0 10px 18px;min-width:0}#world{min-height:0}.guide-scene,.many .guide-scene{position:relative;width:100%;height:auto;min-height:115px;top:auto}.bubble{position:relative;top:auto;right:auto;width:100%;margin:0 0 8px;padding:10px}#speech{font-size:17px}#guide{display:none}#play{position:relative;top:auto;right:auto;width:100%}.stations,.reveal .stations{grid-template-columns:repeat(2,minmax(0,1fr))}.station,.many .station{min-height:98px}.station img,.many .station img{height:56px}.station span,.many .station span{font-size:15px}.tray{grid-template-columns:repeat(2,minmax(0,1fr))}.piece,.many .piece{font-size:14px;min-height:98px}.piece img{height:48px}#progress{font-size:16px}#feedback{font-size:16px}.game-token{width:65px;height:65px}.game-prompt{font-size:17px}.game-controls{display:none}#ending{position:relative;left:auto;right:auto;bottom:auto;top:auto;width:100%;max-height:none;max-width:none;margin:12px 0}#ending h2{font-size:19px;line-height:1.2}body:has(#ending:not([hidden])) .bubble,body:has(#ending:not([hidden])) #speech{visibility:visible}body:has(#ending:not([hidden])) #guide{display:none}.complete .guide-scene{min-height:60px}.mask-feature:focus-visible{outline:3px solid white;outline-offset:1px;box-shadow:0 0 0 5px #102b3d}
@media(min-width:800px){main{padding:12px 20px}.book,h1{margin-left:0}h1{font-size:32px}.page-grid{grid-template-columns:minmax(360px,506.25px) minmax(0,1fr);align-items:start;gap:24px}.activity-pane{padding:0}.station,.many .station{min-height:115px}.station img,.many .station img{height:65px}.station span,.many .station span{font-size:18px}.piece,.many .piece{font-size:17px;min-height:115px}.piece img{height:60px}#speech{font-size:21px}#feedback{font-size:18px}.game-prompt{font-size:21px}}

.story-art{aspect-ratio:720 / var(--scene-bottom)}.frame-plane{position:absolute;left:0;top:0;width:100%;aspect-ratio:9/16}.frame{position:absolute;inset:0}.dialogue{background:transparent;border:0;border-radius:0;padding:0;font-size:clamp(14px,3.9cqw,22px);line-height:1.1;z-index:2}.read-together{background:#fff6d6;border:2px solid #173476;border-radius:16px;padding:12px;margin-bottom:12px}.read-together h2{font-size:18px;margin:0 0 6px}.read-together p{margin:0;font-size:17px;line-height:1.4}#speech{display:none}.guide-scene,.many .guide-scene{min-height:40px}.bubble{padding:0;border:0;background:transparent;box-shadow:none}.board-target{font-size:clamp(12px,3.3cqw,18px)}

.story-art-20 .frame-plane{width:130.0%;left:-7.222222222222221%}