:root{font-family:ui-rounded,"Nunito",system-ui,-apple-system,sans-serif;color:#23473d;background:#f7f0db}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0}button{font:inherit;cursor:pointer}button:focus-visible{outline:4px solid #247a74;outline-offset:3px}.shell{width:min(780px,100%);min-height:100dvh;margin:auto;padding:12px 12px 30px}.top{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:16px}.top a{text-decoration:none;white-space:nowrap;background:#fff;border-radius:999px;padding:9px 11px;color:#285c52;font-weight:900;font-size:.75rem;box-shadow:0 4px 13px #476a5730}.top strong{font-size:.8rem;color:#4d7563;white-space:nowrap}.card{background:#fffdf6;border-radius:28px;overflow:hidden;box-shadow:0 17px 40px #5c634438}.hero{background:linear-gradient(165deg,#c7eee3,#f8dca7 78%);padding:23px 21px 0}.eyebrow{display:block;color:#8f5a2b;font-size:.7rem;font-weight:950;letter-spacing:.15em;text-transform:uppercase}.hero h1{font-size:clamp(2.55rem,9vw,4.7rem);letter-spacing:-.055em;line-height:.96;margin:11px 0}.hero p{max-width:390px;line-height:1.46;font-size:1rem;margin:0 0 16px}.primary,.secondary{border:0;border-radius:16px;padding:14px 18px;font-weight:950}.primary{background:#f5ba4e;color:#4c351b;box-shadow:0 6px 0 #d59133}.primary:active{transform:translateY(4px);box-shadow:0 2px 0 #d59133}.secondary{background:#e6f2e6;color:#285d4d}.hero .primary{position:relative;z-index:2;margin-bottom:10px}.hero-art{width:100%;height:auto;display:block;margin-top:-14px}.intro-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:15px}.intro-strip>div{border-radius:16px;background:#fff;padding:12px 9px;text-align:center;box-shadow:0 4px 14px #526e4d1b;font-weight:850;font-size:.75rem}.intro-strip span{display:block;font-size:1.65rem;margin-bottom:5px}.head{display:flex;justify-content:space-between;align-items:center;gap:9px;margin:11px 1px}.head p{margin:0;color:#738077;font-size:.72rem;font-weight:950;letter-spacing:.08em}.head h1{margin:3px 0 0;font-size:clamp(1.55rem,6vw,2.3rem);line-height:1.05}.badge{white-space:nowrap;background:white;border-radius:999px;padding:9px 12px;font-size:.86rem;font-weight:950;color:#388071}.scene{position:relative;overflow:hidden;border:6px solid white;border-radius:26px;background:#dbe9d4;box-shadow:0 13px 32px #4b604438}.scene svg,.scene canvas{display:block;width:100%;height:auto}.scene canvas{aspect-ratio:420/540;touch-action:none}.scene svg{aspect-ratio:420/460}.scene.narrow svg{aspect-ratio:420/390}.scene .help-bubble{position:absolute;top:10px;left:12px;right:12px;background:#fff9e9e8;border-radius:13px;padding:9px 11px;text-align:center;font-size:.78rem;font-weight:900;color:#4a6856;box-shadow:0 5px 15px #445c4330}.hint{text-align:center;color:#5d776b;font-weight:800;line-height:1.42;font-size:.9rem;margin:12px 4px}.care-card{margin:14px 0 0;background:#fff9ee;border:3px solid #e6c592;border-radius:22px;padding:14px;box-shadow:0 8px 23px #80684222}.care-card h2{font-size:1.12rem;margin:0 0 4px}.care-card p{margin:4px 0 13px;color:#6f765e;font-size:.85rem}.bag{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.item{border:2px solid #e4d6bd;border-radius:15px;background:white;padding:9px 3px;min-height:82px;color:#4f5a47}.item span{display:block;font-size:1.6rem}.item b{display:block;font-size:.68rem;margin-top:4px}.item.used{opacity:.42;pointer-events:none}.item.correct{border-color:#5faf78;background:#e9f6e8}.care-status{background:#e8f4e8;border-radius:14px;padding:10px;margin-top:12px;text-align:center;color:#2f7855;font-weight:850;min-height:40px}.care-status.wrong{background:#fff0e2;color:#a46235}.care-dots{display:flex;justify-content:center;gap:8px;margin:12px}.care-dots i{width:12px;height:12px;border-radius:50%;background:#d8ddca;border:2px solid #a4bfa2}.care-dots i.on{background:#67b27b;border-color:#67b27b}.moving-helper{animation:walkIn 2.4s ease-in-out forwards;transform-origin:155px 275px}.scene-board .lift-traveler{animation:liftUp 2.6s ease-in-out forwards}.scene-board .donkey-group{animation:donkeyIn 2.6s ease-in-out forwards}.scene-board .road{animation:roadMove 3s linear infinite}.stage-note{padding:15px;border-radius:17px;background:#fff;text-align:center;color:#4d7565;font-weight:850;margin:14px 0}.travel-controls{display:flex;gap:9px;justify-content:center;margin:13px auto 8px}.travel-controls button{width:min(45%,155px);height:68px;border:0;border-radius:19px;background:#f7c35f;box-shadow:0 6px 0 #cd9a3a;color:#543b1e;font-size:1.75rem;font-weight:950;touch-action:none}.travel-controls button:active{transform:translateY(4px);box-shadow:0 2px 0 #cd9a3a}.hearts{font-size:1.25rem}.travel-message{margin:9px 0;text-align:center;color:#4e7464;font-weight:850;min-height:28px}.dialogue{background:#fffdf6;border-radius:20px;padding:17px;text-align:center;margin:14px 0;box-shadow:0 8px 22px #5f6d4d26;font-weight:900;color:#416953}.coin{position:absolute;z-index:3;font-size:2.7rem;top:52%;left:32%;animation:coinFly 2.4s ease-in-out forwards}.final{text-align:center;background:#fff;border-radius:28px;padding:22px;box-shadow:0 15px 38px #54745536}.final h1{font-size:2.2rem;margin:5px 0}.final p{line-height:1.48;color:#648073}.stars{font-size:2.4rem;color:#edaa33;letter-spacing:.12em}.final .actions{display:flex;gap:9px;justify-content:center;flex-wrap:wrap}.save-note{font-size:.75rem}.care-effect{position:absolute;font-size:2.4rem;left:20%;bottom:25%;animation:itemFly 1.25s ease-in-out forwards;pointer-events:none}.scene-board .sparkles{animation:glow 1.2s ease-in-out infinite alternate}@keyframes walkIn{from{transform:translateX(-95px)}to{transform:translateX(0)}}@keyframes liftUp{0%{transform:translate(0,0) rotate(0)}80%,100%{transform:translate(70px,-60px) rotate(-8deg)}}@keyframes donkeyIn{0%{transform:translateX(120px)}100%{transform:translateX(0)}}@keyframes roadMove{to{transform:translateX(-80px)}}@keyframes coinFly{0%{transform:translate(0,0) scale(.6);opacity:0}25%{opacity:1}85%,100%{transform:translate(175px,-28px) scale(1.15);opacity:1}}@keyframes itemFly{0%{transform:translate(125px,135px) scale(.6);opacity:0}30%{opacity:1}100%{transform:translate(0,0) scale(1.1);opacity:0}}@keyframes glow{to{opacity:.4;transform:scale(1.06)}}@media(max-width:430px){.shell{padding:9px 9px 23px}.top a{font-size:.65rem;padding:8px}.top strong{font-size:.67rem}.hero{padding:22px 18px 0}.hero h1{font-size:2.7rem}.intro-strip>div{font-size:.68rem}.scene svg{aspect-ratio:420/460}.bag{gap:5px}.item{min-height:72px}.item span{font-size:1.35rem}.item b{font-size:.61rem}}
.speech{position:absolute;top:13%;left:5%;max-width:58%;padding:10px 13px;border-radius:16px;background:#fffdf1;color:#375b4b;font-size:.82rem;font-weight:900;box-shadow:0 5px 15px #3c58402b;animation:glow 1.4s ease-in-out infinite alternate}.speech.keeper{left:auto;right:5%}.speech.traveler{top:42%;left:5%;background:#e9f7e8}.final-art{position:relative;overflow:hidden;border-radius:18px;margin:13px auto 7px;max-width:400px;max-height:270px}.final-art svg{width:100%;height:auto;margin-top:-70px}.final-heart{position:absolute;top:15px;right:23px;font-size:2.5rem;animation:heartFloat 2s ease-in-out infinite}@keyframes heartFloat{50%{transform:translateY(-12px) scale(1.12)}}
.helper-approach{animation:walkIn 2.4s ease-in-out forwards}.scene-board .donkey-group,.scene-board .lift-traveler{animation:none}.scene-board .donkey-arrive{animation:donkeyIn 2.6s ease-in-out forwards}.scene-board .traveler-lift{animation:liftTraveler 2.6s ease-in-out forwards}@keyframes liftTraveler{0%{transform:translate(0,0)}80%,100%{transform:translate(-30px,-75px)}}
.scene-board .traveler-lift{animation:liftAndFade 2.7s ease-in-out forwards}.scene-board .traveler-rider{animation:riderAppear 2.8s ease-in forwards;opacity:0}@keyframes liftAndFade{0%{transform:translate(0,0);opacity:1}65%{transform:translate(-30px,-75px);opacity:1}85%,100%{transform:translate(-30px,-75px);opacity:0}}@keyframes riderAppear{0%,69%{opacity:0}85%,100%{opacity:1}}
.hero-art .story-image{display:block;width:100%;height:auto;max-height:490px;object-fit:cover;object-position:center 38%;border-radius:22px 22px 0 0}
.scene .story-image{display:block;width:100%;aspect-ratio:1/1.08;object-fit:cover;object-position:center 43%}
.scene.narrow .story-image{aspect-ratio:1/1;object-position:center 44%}
.scene .story-image.reveal{animation:photoReveal .65s ease-out both}
.bag{grid-template-columns:repeat(3,minmax(0,1fr))}
.final-art .story-image{display:block;width:100%;height:260px;object-fit:cover;object-position:center 40%}
@keyframes photoReveal{from{opacity:.4;transform:scale(1.035)}to{opacity:1;transform:scale(1)}}
@media(max-width:430px){.scene .story-image{aspect-ratio:1/1.08}.hero-art .story-image{max-height:360px}.scene .help-bubble{font-size:.72rem}}
.bag-many{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.bag-many .item{min-height:75px;box-shadow:0 4px 0 #e5d2ac;transition:transform .16s,border-color .16s,background .16s}
.bag-many .item:active{transform:translateY(3px);box-shadow:0 1px 0 #e5d2ac}
.bag-many .item.try-again{animation:bagShake .5s ease;background:#fff0e7;border-color:#dc9278}
.bag-many .item.correct{background:#e6f7e9;border-color:#5eaa74}
.bag-scene .story-image{aspect-ratio:1/1.05}
.clue-cloud{position:absolute;left:5%;right:5%;top:3%;display:flex;align-items:center;gap:8px;padding:9px 13px;border-radius:21px;background:#fffaf0f2;box-shadow:0 5px 20px #283f3930;color:#265648;font-weight:900}
.clue-cloud span{font-size:1.5rem}.clue-cloud p{margin:0;font-size:clamp(.8rem,3vw,1rem);line-height:1.28}
.journey-scene{isolation:isolate}.journey-scene .story-image{aspect-ratio:1/1.05}.journey-riders{position:absolute;bottom:4%;left:8%;width:43%;max-height:67%;object-fit:contain;filter:drop-shadow(0 9px 8px #3e332653);animation:journeyWalk 4.3s linear both}
@keyframes journeyWalk{0%{transform:translateX(-30%) translateY(2px);opacity:.6}10%{opacity:1}50%{transform:translateX(40%) translateY(-3px)}100%{transform:translateX(115%) translateY(1px)}}
@keyframes bagShake{20%,60%{transform:translateX(-4px)}40%,80%{transform:translateX(4px)}}
@media(max-width:430px){.bag-many{gap:5px}.bag-many .item{min-height:67px;padding:6px 2px}.bag-many .item span{font-size:1.3rem}.bag-many .item b{font-size:.62rem}.clue-cloud{left:3%;right:3%;padding:8px 10px}}