/* The learner's handmade scrapbook. Reading cards retain a clear centre. */
.learner{background:#274e42;padding:22px;color:#253e32;--book-green:#245b48;--book-ink:#253e32}
.book-pages{position:relative;isolation:isolate;background:#fff9e9 url('./assets/scrapbook-border.png') center/100% 100% no-repeat;border:1px solid #d4c5a3;border-left:20px solid #be8d46;border-radius:8px 22px 22px 8px;box-shadow:7px 7px 0 #173b30,12px 12px 24px #14372d66;overflow:hidden}
.book-pages:before{content:"";position:absolute;left:3px;top:28px;bottom:28px;width:10px;background:repeating-linear-gradient(to bottom,transparent 0 34px,#70572f 34px 39px,#f5e3b4 39px 44px,transparent 44px 86px);pointer-events:none;z-index:2}
.book-pages:after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.35;background:repeating-linear-gradient(0deg,transparent 0 5px,#c7ac7920 5px 6px)}
.learner header{min-height:92px;padding-top:16px;padding-bottom:12px}
.learner main{position:relative;padding-top:12px;padding-bottom:24px}
.learner .picture-button{border-radius:18px 14px 19px 13px;background:#fffef7;border-color:#8aa88f;box-shadow:0 3px 0 #bccab1}
.learner .picture-button.primary{background:#245b48;border-color:#245b48;box-shadow:0 3px 0 #143b30}
.learner .picture-button.listen{background:#f2edc7;border-color:#b7ab68}
.learner .adult-entry{box-shadow:none;background:transparent;border-color:transparent}
.learner .task{border:1px solid #e1d4b8;border-radius:10px;background:#fffefa;box-shadow:2px 3px 0 #d7c8a244;position:relative}
.learner .task:before,.learner .art-button:before,.album-card:before{content:"";position:absolute;top:-10px;left:calc(50% - 36px);width:72px;height:22px;transform:rotate(-4deg);background:#d9a84e77;border-left:1px dashed #fff8;border-right:1px dashed #fff8;pointer-events:none;z-index:2}
.learner .sound-task{min-height:268px;padding:16px 20px}
.sound-observation .adult-notes{background:#fffaf0dd;border-top-color:#c7b897}
.learner .art-button{position:relative;border:1px solid #c3b38f;border-radius:3px;background:#fffef7;box-shadow:3px 5px 0 #a8936444;padding:10px;transform:rotate(-2deg)}
.picture-option:nth-child(2) .art-button{transform:rotate(2deg)}
.picture-option:nth-child(3) .art-button{transform:rotate(-1deg)}
.learner .art-button:hover:not(:disabled){background:#fffdf0;border-color:#627d62}
.picture-menu{gap:32px;padding-top:32px;padding-bottom:52px}
.picture-option{gap:24px}
.learner .section-art{width:84px;height:84px;mix-blend-mode:multiply}
.learner .lesson-top{min-height:72px;margin-bottom:20px}
.page-dots{background:#fffcf2aa;border-radius:20px}
.page-dots .current{background:#b36c35;border-color:#b36c35}
.album-heading{display:flex;align-items:center;gap:16px}
.album-total{display:flex;align-items:center;gap:8px;background:#fffdf4;border:1px solid #c5b48a;border-radius:50%;height:60px;min-width:60px;justify-content:center;font-size:1.5rem;font-weight:bold;padding:8px}
.album-total .icon{width:25px;height:25px}
.album-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 24px;padding:12px 4px 26px}
.learner .album-card{display:block;position:relative;padding:10px 10px 14px;border:1px solid #c6b88f;border-radius:4px;background:#fffef7;box-shadow:3px 5px 0 #b6a17644;transform:rotate(-1.5deg);min-height:0;overflow:visible}
.learner .album-card:nth-child(even){transform:rotate(1.5deg)}
.album-window{position:relative;aspect-ratio:1.38;background-color:#c8da9b;background-size:cover;background-position:center;border:1px solid #b6bf91;border-radius:3px;overflow:hidden;display:block}
.habitat-meadow{background-image:url('./assets/meadow-habitat.png')}
.habitat-woodland{background-image:url('./assets/woodland-habitat.png')}
.album-window img{position:absolute;width:42%;height:52%;object-fit:contain;mix-blend-mode:multiply;pointer-events:none}
.album-window img:nth-child(1){left:29%;top:23%;transform:rotate(-12deg)}
.album-window img:nth-child(2){left:4%;top:40%;transform:rotate(16deg)}
.album-window img:nth-child(3){left:53%;top:42%;transform:rotate(9deg)}
.album-window img:nth-child(4){left:33%;top:2%;transform:rotate(-8deg)}
.album-caption{display:flex;align-items:center;justify-content:space-between;padding:10px 4px 0;min-height:34px}
.album-caption .icon{width:26px;height:26px;color:#49643b}
.bug-count{display:flex;align-items:center;gap:6px;background:#f5d98a;border:1px solid #c9ab5e;border-radius:20px;padding:2px 12px;font:600 1.2rem var(--font-learner);color:#32472d}
.album-caption .bug-count img{width:24px;height:22px;object-fit:contain;mix-blend-mode:multiply}
.habitat-toolbar{display:flex;justify-content:center;gap:22px;padding:18px 0 4px;flex-wrap:wrap}
.habitat-toolbar .picture-button[aria-pressed="true"]{background:#f3d37c;border-color:#9c7633;box-shadow:0 3px 0 #b28e47}
.habitat-top .bug-count img{width:44px;height:38px;mix-blend-mode:multiply;object-fit:contain}
.habitat-top .bug-count{padding:6px 16px;gap:12px;font-size:1.5rem}
.garden-frame{position:relative;border:10px solid #fffef2;border-bottom-width:16px;border-radius:5px;box-shadow:2px 5px 0 #b6a17666;transform:rotate(-.5deg)}
.garden-frame:before,.garden-frame:after{content:"";position:absolute;top:-18px;width:80px;height:25px;background:#d9a84e88;border-inline:1px dashed #fff8;z-index:3;pointer-events:none}
.garden-frame:before{left:12%;transform:rotate(-7deg)}
.garden-frame:after{right:12%;transform:rotate(5deg)}
.garden-scene{position:relative;isolation:isolate;aspect-ratio:1.95;min-height:330px;border:1px solid #8d9c6e;overflow:hidden;background-color:#b3cd84;background-size:cover;background-position:center;cursor:default;touch-action:manipulation}
.garden-scene:before{content:"";position:absolute;inset:0;background:#173346;opacity:0;transition:opacity .4s;pointer-events:none;z-index:0}
.garden-scene.is-night:before{opacity:.35}
.garden-scene.is-night{background-color:#2d4b54}
.garden-scene.is-night .bug-sprite{filter:drop-shadow(0 0 7px #fff1b9cc)}
.garden-scene .bug-sprite{position:absolute;width:clamp(66px,9vw,98px);height:clamp(66px,9vw,98px);min-height:0;padding:6px;border:2px solid transparent;border-radius:50%;background:transparent;box-shadow:none;transform:translate(-50%,-50%);z-index:1;transition:left 1.1s ease-in-out,top 1.1s ease-in-out;touch-action:manipulation}
.garden-scene .bug-sprite:hover:not(:disabled){background:#fffae733;border-color:#fff7}
.bug-sprite .bug-body{display:block;width:100%;height:100%;transform:scale(1.65);pointer-events:none}
.bug-sprite img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none}
.garden-scene .bug-sprite[aria-pressed="true"]{border-color:#fff8dd;background:#fff5c13d;outline:3px solid #477758;outline-offset:2px;z-index:2}
.garden-scene .bug-sprite:focus-visible{outline:4px solid #fff9df;outline-offset:3px;border-color:#245b48}
.garden-scene .bug-sprite{mix-blend-mode:multiply}
.bug-selection{position:absolute;width:clamp(74px,10vw,110px);height:clamp(74px,10vw,110px);border:3px dashed #fff8d8;outline:3px solid #36543a;border-radius:50%;transform:translate(-50%,-50%);z-index:3;pointer-events:none;transition:left 1.1s ease-in-out,top 1.1s ease-in-out}
.bug-sprite.is-resting img{transform:rotate(-14deg) scale(.9);opacity:.85}
.bug-sprite .rest-mark{position:absolute;right:-2px;top:-3px;color:#fff7c9;width:26px;height:26px;filter:drop-shadow(0 1px 2px #284421)}
.bug-sprite.is-playing img{animation:bug-hello .9s ease-in-out 2}
.bug-sprite.is-playing.fly img{animation:bug-flight 1.2s ease-in-out 2}
.bug-sprite.is-playing.crawl img{animation:bug-crawl 1s ease-in-out 2}
.garden-star{position:absolute;color:#ffe49a;width:25px;height:25px;z-index:1;pointer-events:none}
.garden-star:nth-child(1){left:12%;top:12%}.garden-star:nth-child(2){left:47%;top:8%}.garden-star:nth-child(3){left:81%;top:16%}
.garden-pages{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px}
.garden-pages .page-dots{justify-content:center}
.reward-page{min-height:490px!important;padding:24px!important;background:#fffaf0!important;overflow:hidden;gap:16px!important}
.reward-page:before{display:none}
.discovery-stage{width:min(500px,100%);min-height:260px;position:relative;display:flex;align-items:center;justify-content:center;isolation:isolate}
.discovery-stage:before{content:"";position:absolute;width:230px;height:230px;border:18px solid #ecc35a66;border-radius:50%;background:#fae9ac77;z-index:-1}
.learner .new-bug{position:relative;width:240px;height:240px;padding:18px;background:#fffdf4;border:2px solid #d9b151;border-radius:48% 52% 49% 51%;box-shadow:0 6px 0 #c5a45766;transform:rotate(-5deg);animation:discovery-arrival .8s ease-out both}
.learner .new-bug{overflow:hidden}
.discovery-bug{display:block;width:100%;height:100%;transform:scale(1.4);pointer-events:none}
.new-bug img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;pointer-events:none}
.new-bug.is-playing img{animation:bug-hello .9s ease-in-out 2}
.discovery-seal{position:absolute;right:5%;top:10%;width:72px;height:72px;border:2px dashed #9c7338;background:#f5cf70;border-radius:50%;display:flex;align-items:center;justify-content:center;transform:rotate(12deg);box-shadow:0 3px 0 #ba914a44}
.discovery-seal .icon{width:40px;height:40px}
.confetti{position:absolute;width:10px;height:10px;border-radius:2px;left:50%;top:45%;background:var(--piece);z-index:-1;animation:scrapbook-confetti 1.5s ease-out both;animation-delay:var(--delay);pointer-events:none}
.new-roommates{display:flex;gap:10px;align-items:center;justify-content:center;padding:8px 16px;background:#fff8df;border:1px solid #d7c6a0;border-radius:30px;min-height:56px}
.new-roommates img{width:42px;height:42px;object-fit:contain;mix-blend-mode:multiply}
.new-roommates .bug-count{margin-left:4px}
.reward-actions{display:flex;align-items:center;justify-content:center;gap:24px;flex-wrap:wrap}
.learner .habitat-ticket{width:126px;height:92px;padding:7px;border:1px solid #c6b88f;background:#fffef7;border-radius:4px;box-shadow:2px 3px 0 #b6a17655;position:relative;transform:rotate(4deg)}
.habitat-ticket>span{width:100%;height:100%;background-size:cover;background-position:center;border-radius:3px;display:flex;align-items:center;justify-content:center}
.habitat-ticket img{width:62px;height:58px;object-fit:contain;mix-blend-mode:multiply}
.learner.quiet-scrapbook .confetti{display:none}
.learner.quiet-scrapbook *{animation:none!important;transition:none!important}
@keyframes bug-hello{0%,100%{transform:rotate(0)}25%{transform:translateY(-10px) rotate(-12deg)}65%{transform:translateY(-5px) rotate(12deg)}}
@keyframes bug-flight{0%,100%{transform:translate(0,0) rotate(-5deg)}35%{transform:translate(9px,-18px) rotate(10deg)}70%{transform:translate(-9px,-10px) rotate(-12deg)}}
@keyframes bug-crawl{0%,100%{transform:rotate(-4deg)}50%{transform:translateX(8px) rotate(4deg)}}
@keyframes discovery-arrival{0%{opacity:0;transform:translateY(24px) scale(.7) rotate(-18deg)}75%{opacity:1;transform:translateY(-6px) scale(1.04) rotate(-3deg)}100%{opacity:1;transform:translateY(0) scale(1) rotate(-5deg)}}
@keyframes scrapbook-confetti{0%{opacity:0;transform:translate(0,0) rotate(0)}15%{opacity:1}90%{opacity:1}100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(var(--spin))}}
@media(min-width:851px){.garden-scene{aspect-ratio:auto;height:clamp(260px,calc(100dvh - 440px),420px);min-height:260px}}
@media(max-width:850px){.learner{padding:16px}.book-pages{border-left-width:16px}.picture-menu{gap:22px;padding-bottom:40px}.album-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 22px}.garden-scene{min-height:380px;aspect-ratio:1.55}.garden-scene .bug-sprite{width:86px;height:86px}.reward-page{min-height:480px!important}}
@media(max-width:540px){.learner{padding:10px}.book-pages{border-left-width:10px;border-radius:6px 14px 14px 6px}.book-pages:before{display:none}.learner main{padding-inline:14px}.picture-menu{gap:24px;padding:14px 0}.picture-option{gap:18px}.album-grid{gap:25px 16px}.album-total{height:48px;min-width:48px;font-size:1.2rem}.album-heading{gap:8px}.garden-frame{border-width:6px;border-bottom-width:12px}.garden-scene{aspect-ratio:1;min-height:300px}.garden-scene .bug-sprite{width:64px;height:64px}.habitat-toolbar{gap:14px}.habitat-toolbar .picture-button{width:60px;height:60px;min-width:60px;min-height:60px;padding:12px}.reward-page{min-height:460px!important;padding:16px!important}.new-bug{width:200px!important;height:200px!important}.discovery-stage{min-height:240px}.discovery-seal{right:0;width:60px;height:60px}.reward-actions{gap:18px}.new-roommates img{width:34px;height:34px}.album-caption{padding-inline:0}.bug-count{padding-inline:9px}}
@media(prefers-reduced-motion:reduce){.learner .confetti{display:none}.learner *{animation:none!important;transition:none!important}}