@font-face{font-family:Baloo;src:url('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:#087c88 url('world.webp') center/cover fixed}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:#102b3d}header{height:48px;padding:0 12px;background:#073e35;color:white;display:flex;align-items:center;justify-content:space-between}header a{color:white;min-width:48px;min-height:48px;display:flex;align-items:center;text-decoration:none}header span{font-size:15px}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:27px;line-height:1.05;margin:3px 0;background:#fff6d6;width:fit-content;padding:3px 5px}#world{position:relative;height:calc(100svh - 123px);min-height:500px;max-height:760px}#guide{position:absolute;left:-8px;top:20px;width:140px;height:256px;object-fit:contain;filter:drop-shadow(0 4px 3px #102b3d66);transition:transform .2s}.happy #guide{transform:rotate(-5deg)}#speech{position:absolute;right:0;top:10px;width:calc(100% - 130px);border:3px solid #102b3d;border-radius:18px;background:#fff2ae;padding:9px;font-size:20px;line-height:1.1;margin:0;z-index:2}#progress{position:absolute;top:113px;right:3px;background:#073e35;color:white;border-radius:20px;padding:2px 10px;font-size:16px;margin:0}.stations{position:absolute;right:0;top:148px;width:63%;display:flex;gap:8px;justify-content:center;align-items:flex-end}.station{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;min-height:154px;min-width:0;flex:1;border:0;background:transparent;padding:0;touch-action:manipulation}.station img{width:100%;height:125px;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:17px;line-height:1.1;display:block;width:100%}.station.done span{background:#bdf5ac}.station.done:after{content:'';position:absolute;top:0;right:0;width:48px;height:48px;background:url('sparkle.webp') center/contain no-repeat}.choices{position:absolute;bottom:54px;left:0;width:100%;display:flex;gap:5px;align-items:stretch}.piece{flex:1;min-width:0;min-height:109px;background:#fff6d6;border:2px solid #102b3d;border-radius:12px;padding:3px;line-height:1.1;font-size:16px;touch-action:none;user-select:none}.piece img{display:block;width:100%;height:65px;object-fit:contain;pointer-events:none}.piece[aria-pressed=true]{background:#ffdb40;outline:3px solid #102b3d;transform:translateY(-5px)}.piece:disabled{opacity:1;background:#bdf5ac}.piece:disabled img{opacity:.55}.over img{transform:translateY(-6px)}#feedback{position:absolute;bottom:0;left:0;width:100%;margin:0;padding:6px 9px;min-height:42px;border-radius:12px;background:#102b3d;color:white;font-size:16px;line-height:1.1}button:focus-visible,a:focus-visible{outline:3px solid white;outline-offset:3px;box-shadow:0 0 0 6px #102b3d}.ghost{position:fixed;width:100px;height:100px;object-fit:contain;pointer-events:none;z-index:40;transform:translate(-50%,-50%) rotate(-8deg);filter:drop-shadow(0 8px 5px #102b3d88)}#ending{position:absolute;top:250px;left:0;width:100%;padding:16px;background:#fff2ae;border:3px solid #102b3d;border-radius:24px;text-align:center;z-index:4}#ending h2{font-size:28px;line-height:1.1;margin:0 0 10px}#ending p{font-size:19px;line-height:1.1;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:52px;min-width:120px;padding:7px;font:19px Baloo,system-ui;text-decoration:none;display:flex;align-items:center;justify-content:center}.party{position:absolute;top:-45px;right:12px;width:76px;height:76px;object-fit:contain;animation:party 1s alternate infinite}.skip{position:fixed;top:-100px;background:white;padding:12px;z-index:50}.skip:focus{top:0}[hidden]{display:none!important}@keyframes party{to{transform:rotate(12deg) translateY(-6px)}}
.story8 .stations{top:228px;width:100%;gap:8px}.story8 .station{min-height:138px}.story8 .station img{height:105px}.story8 .choices{bottom:46px}.story8 .piece{font-size:15px}.story8 #guide{top:0;height:235px}.story9 .stations{top:132px;width:65%;display:grid;grid-template-columns:1fr 1fr;gap:5px}.story9 .station{min-height:127px}.story9 .station img{height:90px}.story9 .station:last-child{grid-column:1/3;width:55%;margin:auto}.story9 #feedback{bottom:7px;min-height:80px;font-size:18px;background:#fff2ae;color:#102b3d;border:2px solid #102b3d}.story9 .station span{font-size:16px}#lane-world{position:absolute;right:0;top:158px;width:62%;height:273px;background:#073e3566;border:2px solid #fff2ae;border-radius:18px;touch-action:none}#lane-world .stations{top:0;right:0;width:100%;gap:8px}#lane-world .station{min-height:105px}#lane-world .station img{height:66px}#lane-world .station span{font-size:16px}#token{position:absolute;left:25%;top:75%;transform:translate(-50%,-50%);width:82px;height:90px;padding:0;border:0;background:transparent;touch-action:none}#token img{width:100%;height:100%;object-fit:contain;pointer-events:none}#round{position:absolute;left:0;top:105px;background:#fff2ae;border:2px solid #102b3d;border-radius:12px;padding:6px;font-size:19px;line-height:1.1;margin:0;width:100%}.story10 #progress{top:67px}.story10 #speech{font-size:18px}.story10 #feedback{font-size:15px}.complete #progress,.complete #feedback{display:none}
@media(min-width:800px){main{padding:12px 20px}.book{font-size:16px}h1{font-size:42px}#world{height:calc(100svh - 150px);min-height:580px}#guide,.story8 #guide{left:0;top:120px;width:32%;height:440px}#speech{left:0;right:auto;top:10px;width:32%;font-size:27px;padding:15px}#progress,.story10 #progress{top:5px;right:0;font-size:22px}.stations,.story8 .stations{top:80px;right:0;width:65%;gap:20px}.station,.story8 .station{min-height:265px}.station img,.story8 .station img{height:225px}.station span,.story8 .station span{font-size:24px}.choices,.story8 .choices{left:35%;width:65%;bottom:70px;gap:12px}.piece,.story8 .piece{min-height:160px;font-size:21px}.piece img{height:110px}#feedback{left:35%;width:65%;font-size:23px;bottom:6px;min-height:50px}.story9 .stations{top:75px;width:65%;display:flex;gap:20px}.story9 .station{min-height:300px}.story9 .station img{height:245px}.story9 .station span{font-size:23px}.story9 .station:last-child{width:auto;margin:0;flex:1}.story9 #feedback{bottom:60px;font-size:27px;min-height:120px}#ending{left:37%;top:170px;width:60%;padding:30px}#ending h2{font-size:40px}#ending p{font-size:28px}.actions>*{font-size:24px;padding:12px;min-width:175px}.party{width:115px;height:115px;top:-80px}#lane-world{top:125px;width:62%;height:390px}#lane-world .station{min-height:165px}#lane-world .station img{height:120px}#lane-world .station span{font-size:25px}#token{width:125px;height:135px}#round{left:36%;top:52px;width:64%;font-size:26px}.story10 #speech{font-size:25px}.story10 #feedback{font-size:22px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.review-done{position:absolute;bottom:95px;right:0;min-height:48px;padding:5px 14px;border:2px solid #102b3d;border-radius:12px;background:#073e35;color:white;font-size:18px}@media(min-width:800px){.review-done{bottom:0;font-size:24px}}
/* Focus one setting panel; preserve the native storyboard pixels in the shipped file. */
body{background-size:max(215vw,260svh) auto;background-position:right 50%}.story10{background-position:right bottom}
body{background-position:97% 50%}.story10{background-position:97% 99%}h2[tabindex="-1"]:focus{outline:none}