@import url('https://fonts.googleapis.com/css2?family=Jua&family=Noto+Sans+KR:wght@400;500;600;700&display=swap');
:root{color-scheme:light;--ink:#304a40;--green:#386651;--cream:#faf7ef;--orange:#e79672}*{box-sizing:border-box}body{margin:0;background:var(--cream);color:var(--ink);font-family:'Noto Sans KR',sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;touch-action:manipulation}button:focus-visible,a:focus-visible{outline:4px solid #e7a144;outline-offset:4px}button:disabled{cursor:default;opacity:.5}[hidden]{display:none!important}header{max-width:1320px;margin:auto;padding:23px 32px;border-bottom:1px solid #e5e5d9;display:flex;align-items:center;justify-content:space-between;gap:16px}header a{text-decoration:none;color:inherit;font-family:Jua,sans-serif;font-size:22px}header>span{font-size:13px}header b{font-size:10px;background:#efe7da;border-radius:5px;padding:4px 6px;margin-left:6px;letter-spacing:1px}#sound{border:0;background:none;font-size:13px;color:var(--green);padding:12px}main{max-width:1180px;margin:auto;padding:36px 32px}.heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.eyebrow{font-size:12px;letter-spacing:1px;color:#778476;margin:0 0 9px}h1,h2{font-family:Jua,sans-serif;font-weight:400}h1{font-size:40px;margin:0}.intro{font-size:14px;line-height:1.9;color:#778076;margin:0}.play-layout{display:grid;grid-template-columns:minmax(0,1fr) 135px;gap:18px}.scene{position:relative;aspect-ratio:3/2;isolation:isolate;border-radius:25px;overflow:hidden;background:#cfebe4;box-shadow:0 8px 30px #3655410c}.backdrop{width:100%;height:100%;object-fit:cover;display:block}.sprite{display:block;position:relative;aspect-ratio:1.5;overflow:hidden;pointer-events:none}.sprite img{position:absolute;width:200%;height:300%;max-width:none;pointer-events:none}#rabbit{position:absolute;width:22%;left:11%;top:42%;z-index:5;transform-origin:50% 90%}#route{position:absolute;left:25%;top:57%;width:50%;z-index:3}#route.plank{top:61%}#boat{position:absolute;width:29%;left:9%;top:57%;z-index:6}#target{position:absolute;left:34%;top:52%;width:32%;height:30%;z-index:8;border:3px dashed #fff9;border-radius:22px;color:#315e50;background:#ffffefb8;font-family:Jua,sans-serif;font-size:20px;box-shadow:0 0 0 6px #fff3}#target span{display:block;font-size:32px}#scene-caption{position:absolute;left:50%;bottom:5%;transform:translateX(-50%);background:#fff9e8ed;border-radius:30px;padding:9px 20px;white-space:nowrap;font-size:15px;z-index:9;box-shadow:0 4px 18px #34554110}#welcome{position:absolute;inset:0;background:#f4f7e86b;backdrop-filter:blur(3px);z-index:15;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px}#welcome h2{font-size:42px;margin:15px 0 0}#welcome p{margin-bottom:28px;font-size:16px}#welcome .tiny{background:#fff9e5;padding:9px 16px;border-radius:22px;font-size:12px}.primary{background:var(--green);color:white;border:0;border-radius:15px;padding:15px 24px;font-weight:600;min-height:50px;box-shadow:0 5px 0 #274d3b}.primary:active{transform:translateY(2px);box-shadow:0 3px 0 #274d3b}aside{background:#f0eee4;border-radius:24px;padding:12px;display:flex;flex-direction:column;align-items:stretch;gap:5px}.rail-title{text-align:center;font-size:13px;margin:0 0 7px;font-weight:600}#choices{display:flex;flex-direction:column;gap:9px}.choice{position:relative;background:#fffcf6;border:2px solid transparent;border-radius:17px;padding:3px 7px 8px;color:var(--ink);touch-action:none}.choice .sprite{width:100%}.choice strong{font-family:Jua,sans-serif;font-size:17px;font-weight:400}.choice[aria-pressed=true]{border-color:#d89165;background:#fff0d6;box-shadow:0 0 0 3px #f3d1af}.choice.hinted{border-color:#80ad86}.choice.done:after{content:'✓';position:absolute;right:6px;top:6px;width:20px;height:20px;border-radius:50%;background:#517357;color:white;font-size:12px}.rail-note{font-size:10px;line-height:1.5;text-align:center;color:#87907f;margin-top:auto;padding-top:7px}.story-panel{padding:25px 30px;background:white;border:1px solid #ecebdf;border-radius:23px;margin-top:18px}.story-top{display:flex;align-items:center;justify-content:space-between}.story-top .eyebrow{margin:0}.quiet{border:0;background:#f3f3e9;color:var(--green);border-radius:25px;padding:11px 17px;font-size:13px;min-height:44px}.story-panel h2{font-size:28px;margin:15px 0 6px}.story-panel p{font-size:17px;line-height:1.8;margin:6px 0}#feedback{color:#a66b45;font-size:14px;min-height:26px}.actions{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:13px}footer{margin-top:23px;padding:0 8px;display:flex;align-items:center;justify-content:space-between;gap:20px}#discoveries{display:flex;gap:8px}.badge{font-size:12px;padding:8px 12px;background:#eaece2;border-radius:20px;color:#98a18e}.badge.found{background:#dfeada;color:#416d47}#progress{font-size:13px;color:#778476;max-width:300px;line-height:1.7}.parent-note{font-size:12px;text-align:center;color:#87917f;line-height:1.9;margin-top:26px}.parent-note small{font-size:10px}#drag-preview{position:fixed;width:140px;z-index:50;pointer-events:none;filter:drop-shadow(0 8px 9px #45634444);transform:translate(-50%,-50%)}.ripple{position:absolute;width:9%;height:1%;border-bottom:2px solid #ffffff80;border-radius:50%;z-index:1;animation:ripple 3s ease-in-out infinite}.r1{left:46%;top:35%}.r2{left:54%;top:80%;animation-delay:1s}@keyframes ripple{50%{transform:translateX(12px);opacity:.3}}@media(max-width:700px){header{padding:13px 16px}header a{font-size:18px}header>span{display:none}main{padding:25px 14px}.heading{display:block;margin-bottom:18px}h1{font-size:30px}.intro{font-size:12px;margin-top:8px}.play-layout{grid-template-columns:minmax(0,1fr) 86px;gap:8px;align-items:stretch}.scene{aspect-ratio:3/2;align-self:center;border-radius:17px}aside{padding:8px 6px;border-radius:17px}.rail-title{font-size:10px}#choices{gap:5px}.choice{padding:0 3px 5px;border-radius:12px}.choice strong{font-size:13px}.rail-note{display:none}#scene-caption{font-size:9px;padding:6px 8px;bottom:4%}#welcome h2{font-size:25px;margin:8px 0}#welcome p{font-size:11px;margin:0 0 12px}#welcome .tiny{font-size:8px;padding:5px 8px}#start{font-size:12px;padding:9px 12px;min-height:44px}#target{font-size:12px;border-radius:12px;border-width:2px}#target span{font-size:20px}.story-panel{padding:18px;margin-top:14px}.story-panel h2{font-size:23px}.story-panel p{font-size:14px}.story-panel #feedback{font-size:12px}.quiet{font-size:11px;padding:9px 12px}.eyebrow{font-size:10px}.actions .primary{font-size:12px;padding:11px 14px}footer{display:block;padding:0 4px}#progress{max-width:none}.badge{font-size:11px;padding:7px 10px}.parent-note{font-size:10px}}@media(prefers-reduced-motion:reduce){.ripple{animation:none}*{scroll-behavior:auto!important}}

/* Tight sprite bounds keep each generated object isolated. */
#rabbit{width:14%;left:11%;top:36%}#route{left:24%;top:63%;width:52%}#route.plank{top:61%;width:53%}#boat{width:27%;top:58%}.thumb{display:flex;align-items:center;justify-content:center;aspect-ratio:1.5;width:100%}.choice .thumb .sprite{width:var(--thumb-width)}

#boat{left:22%;top:62%}
@media(max-width:700px){.choice .thumb{width:45px;margin:auto}.rail-title{margin-bottom:2px}.choice{min-height:50px}.play-layout{align-items:center}}
/* The illustrated scene is replaced as a whole; no floating scene sprites. */
.scene-next{position:absolute;inset:0;opacity:0;pointer-events:none;z-index:1}.review-link{text-align:center;margin:20px 0 0}.review-link a{font-size:12px;color:var(--green);text-underline-offset:4px}
@media(max-width:700px){.play-layout{grid-template-columns:minmax(0,1fr) 72px}.choice{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:48px;padding:3px 2px}.choice .thumb{width:36px;flex-shrink:0}.choice strong{font-size:12px;line-height:1.25}.rail-title{font-size:9px}}

#target{left:39%;top:46%;width:26%;height:23%}

#target{left:36%;top:52%;width:30%;height:23%}