@font-face{font-family:Baloo;src:url('baloo.ttf') format('truetype');font-display:swap}
*{box-sizing:border-box}html,body{margin:0;color:#172947;font-family:Baloo,system-ui,sans-serif}body{background:#ffe3a1}a{color:inherit}header{height:48px;padding:0 14px;display:flex;align-items:center;justify-content:space-between;background:#133b6a;color:white}header a{display:flex;align-items:center;min-height:48px;text-decoration:none}main{height:calc(100svh - 48px);display:flex;flex-direction:column;align-items:center}.book{font-size:13px;margin:5px 0 0}h1{font-size:28px;line-height:1.1;margin:2px 8px;text-align:center}#instruction{font-size:16px;line-height:1.2;text-align:center;margin:4px 8px 7px}#activity-shell{width:100%;flex:1;min-height:0;display:flex;flex-direction:column}.room{position:relative;flex:1;min-height:245px;background:#e8cc97;overflow:hidden;isolation:isolate}.set{position:absolute;inset:0;background:linear-gradient(#f3dca9 0 67%,#c38a50 67%);pointer-events:none}.prop{position:absolute;object-fit:contain;filter:drop-shadow(0 3px 2px #17294730)}.shelf{left:-5%;top:0;width:24%;height:60%}.window{right:6%;top:-9%;width:34%;height:62%}.sofa{left:12%;top:27%;width:67%;height:48%}.girl{right:23%;top:23%;width:20%;height:40%}.lucy{right:7%;top:29%;width:16%;height:33%}.table{left:0;bottom:-16%;width:100%;height:58%;object-fit:fill}.open-book{left:34%;bottom:3%;width:20%;height:18%}.guide{position:absolute;inset:0;pointer-events:none}.guide img{position:absolute;left:-4%;bottom:16%;height:79%;width:50%;object-fit:contain;object-position:bottom;transform-origin:bottom;filter:drop-shadow(0 4px 2px #17294730)}.guide img.happy{transform:rotate(-6deg)}.guide img.thinking{transform:rotate(4deg)}#speech{position:absolute;top:12px;left:38%;right:10px;max-width:330px;margin:0;padding:9px 12px;background:#fff5cf;border:2px solid #172947;border-radius:18px;font-size:17px;line-height:1.15;box-shadow:0 3px 0 #172947}#progress{position:absolute;top:8px;left:8px;background:#133b6a;color:white;border-radius:15px;padding:0 9px;font-size:14px}.target{position:absolute;bottom:3%;padding:0;border:0;background:transparent;color:#172947;font:inherit;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;cursor:pointer;min-width:48px;min-height:48px}.target[data-id=quiet]{left:8%;width:34%;height:38%}.target[data-id=remind]{right:4%;width:34%;height:61%}.target img{width:100%;height:calc(100% - 28px);object-fit:contain;filter:drop-shadow(0 4px 3px #17294740)}.target span{background:#fff5cf;border:2px solid #172947;border-radius:10px;padding:2px 9px;line-height:1.1;font-size:17px}.target[aria-pressed=true],.target.over{outline:3px dashed #172947;outline-offset:0;border-radius:18px;background:#fff5cf70}.target.matched span{background:#17644d;color:white;border-color:#17644d}.target.matched img{filter:drop-shadow(0 0 12px #fff176)}.target[data-id=remind].matched{background:radial-gradient(ellipse,#fff17699,transparent 70%)}#tray{width:min(100%,900px);margin:auto;padding:0 10px 10px}.tip{font-size:14px;line-height:1.2;text-align:center;margin:6px 0}#problems{display:flex;gap:10px}.card{font:inherit;color:#172947;flex:1;min-width:0;min-height:115px;padding:4px;background:#fff5cf;border:3px solid #172947;border-radius:16px;box-shadow:0 4px 0 #172947;cursor:grab;touch-action:none;user-select:none;line-height:1.05;font-size:16px}.card img{display:block;width:100%;height:74px;object-fit:contain;margin:auto}.card span{display:block}.card[aria-pressed=true]{outline:3px solid #172947;outline-offset:2px;background:#ffe047}.card.dragging{position:relative;z-index:30;pointer-events:none;filter:drop-shadow(0 8px 5px #17294765);cursor:grabbing}.card:disabled{background:#17644d;color:white;opacity:1}.card.bounce{animation:bounce .35s}button:focus-visible,a:focus-visible{outline:4px solid #172947;outline-offset:3px}header a:focus-visible{outline-color:white}#ending{width:100%;text-align:center;background:#ffe047;padding:8px 10px 12px}#ending h2{font-size:25px;line-height:1.1;margin:0}#ending p{font-size:16px;line-height:1.15;margin:4px auto 8px;max-width:500px}.stars{height:30px}.stars img{width:30px;height:30px;object-fit:contain}.actions{display:flex;justify-content:center;gap:10px}.actions button,.actions a{font:inherit;display:flex;align-items:center;justify-content:center;min-height:48px;padding:7px 16px;background:#133b6a;color:white;border:2px solid #172947;border-radius:12px;text-decoration:none;font-size:18px;cursor:pointer}#confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden}#confetti img{position:absolute;top:-30px;width:20px;height:20px;animation:fall 2.6s ease-in forwards}.skip{position:fixed;left:8px;top:-100px;z-index:40;background:white;padding:12px}.skip:focus{top:0}[hidden]{display:none!important}@keyframes fall{to{transform:translateY(105svh) rotate(720deg)}}@keyframes bounce{30%{transform:translateX(-8px)}65%{transform:translateX(8px)}}@media(min-width:700px){h1{font-size:38px}.book{font-size:14px}#instruction{font-size:20px}.room{min-height:330px}.set,.guide,#helpers{position:absolute;width:min(100%,1050px);left:50%;transform:translateX(-50%);height:100%}.set{background:transparent}.room{background:linear-gradient(#f3dca9 0 67%,#c38a50 67%)}.guide img{height:90%;width:43%;left:0;bottom:6%}#speech{font-size:24px;left:37%;top:25px;max-width:370px}.target[data-id=quiet]{left:35%;width:23%;height:49%}.target[data-id=remind]{right:6%;width:24%;height:74%}.target span{font-size:23px}.card{min-height:140px;font-size:22px}.card img{height:100px}.tip{font-size:16px}#ending h2{font-size:30px}#ending p{font-size:19px}.stars{height:36px}.stars img{width:36px;height:36px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}#confetti{display:none}}