@charset "UTF-8";
:root{font-family:ui-rounded,"SF Pro Rounded",system-ui,-apple-system,"Segoe UI",sans-serif;color:#243e37;background:#f8f5eb;font-synthesis:none;--green:#246550;--muted:#587065}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 12% 6%,#dfebce 0,transparent 42%),radial-gradient(ellipse at 100% 65%,#ffead6 0,transparent 48%),#f8f5eb;min-height:100vh;min-height:100dvh}button,summary{-webkit-tap-highlight-color:transparent;touch-action:manipulation}button{font:inherit;cursor:pointer;border:0}button:focus-visible,summary:focus-visible{outline:4px solid #8656bc;outline-offset:4px}[hidden]{display:none!important}.shell{max-width:760px;margin:auto;padding:max(20px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}.brand{display:flex;align-items:center;gap:10px;margin-bottom:24px}.brand-icon{display:grid;place-items:center;width:48px;height:48px;background:#fff;border-radius:17px;font-size:27px}.brand p{margin:2px 0 0;font-weight:750;font-size:17px}.eyebrow{font-size:10px;font-weight:800;letter-spacing:1.8px;color:#536e55}.badge{margin-left:auto;background:#e3ecd9;padding:8px 11px;border-radius:25px;font-size:12px;white-space:nowrap}.panel{background:#fffdf8;border:1px solid #e9e7d9;border-radius:30px;padding:28px 24px;text-align:center;box-shadow:0 16px 48px #4656300c}h1{font-size:clamp(27px,6vw,40px);letter-spacing:-1.2px;line-height:1.2;margin:16px 0 12px}h1:focus{outline:none}.lead{font-size:16px;color:var(--muted);line-height:1.6;margin:0 0 20px}.garden{position:relative;display:flex;justify-content:center;align-items:center;gap:8px;min-height:150px;margin:0 auto 20px;background:linear-gradient(180deg,#edf3de,#e9f1df);border-radius:100px 100px 45px 45px;max-width:380px}.garden span{font-size:64px;filter:drop-shadow(0 9px 0 #52663710)}.garden span:nth-child(2){transform:translateY(-10px)}.garden i{position:absolute;right:22px;top:18px;color:#b78523;font-size:24px}.steps{list-style:none;padding:0;display:grid;gap:12px;margin:25px auto;text-align:left;max-width:265px;font-size:15px}.steps span{display:inline-grid;place-items:center;width:34px;height:34px;background:#f2f1e8;border-radius:12px;margin-right:10px}.primary{background:var(--green);color:white;min-height:56px;border-radius:18px;padding:15px 24px;font-weight:750;width:100%;max-width:360px;box-shadow:0 4px 0 #194836}.primary:hover{background:#1c5542}.primary:active{transform:translateY(2px);box-shadow:0 2px 0 #194836}.primary span{margin-left:12px}.small{font-size:12px;line-height:1.5;color:var(--muted);margin:17px 0 0}.round-top{display:flex;justify-content:space-between;align-items:center;font-size:14px;font-weight:700}.text-button{background:transparent;color:#3c6353;min-height:48px;padding:10px 12px;text-decoration:underline;text-underline-offset:4px}.progress{display:flex;gap:8px;margin:10px 0 25px}.progress span{height:8px;flex:1;border-radius:8px;background:#e5e9dc}.progress .done{background:#589571}.progress .current{background:#e9b961}.listen{display:inline-flex;align-items:center;gap:12px;background:#f9e8ab;color:#493c18;border:2px solid #ecd78b;border-radius:22px;padding:14px 30px;min-height:64px;font-weight:800;font-size:20px}.listen span{font-size:28px}.listen:active{background:#f2da83}#audio-status{min-height:36px;margin:12px 0 0}details{text-align:left;font-size:13px;color:var(--muted);line-height:1.6}summary{cursor:pointer;min-height:44px;display:list-item;padding:10px 0;list-style-position:inside}#hint{max-width:380px;margin:0 auto 18px;background:#f5f4ec;padding:0 12px;border-radius:12px}#hint p{margin:0 0 10px}#hint-word{font-size:24px;color:#243e37}.choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.animal{position:relative;min-width:0;min-height:150px;aspect-ratio:1/1.12;border:2px solid #e6e6d8;background:#f1f4e7;border-radius:24px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px;color:#324c40;box-shadow:0 5px 0 #dedfd1}.animal:nth-child(2){background:#fef0de}.animal:nth-child(3){background:#eeedf8}.animal .emoji{font-size:clamp(45px,12vw,78px);line-height:1.2}.animal .label{font-size:14px;font-weight:700}.animal:hover{border-color:#7da98b}.animal.correct{border-color:#347651;background:#e1f1d9;box-shadow:0 5px 0 #b7d0ac}.animal.correct:after{content:'✓';position:absolute;right:7px;top:5px;color:#246550;font-weight:900;font-size:23px}.animal[aria-disabled=true]{cursor:default}.feedback-area{min-height:126px;padding-top:10px}#feedback{font-weight:700;min-height:26px;font-size:16px;line-height:1.5;margin:12px 0 16px}.bouquet{font-size:65px;letter-spacing:-10px;margin:20px 0 28px}.learned{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:25px 0}.learned span{background:#edf1e4;border-radius:14px;padding:10px 12px;font-weight:650}.break-note{font-size:15px;line-height:1.7;margin:24px 0;color:var(--muted)}.complete .text-button{display:block;margin:10px auto 0}footer{text-align:center;font-size:12px;color:#6b7768;padding:24px 10px 0}footer details{margin-top:12px}footer summary{text-align:center}footer p{max-width:550px;margin:8px auto 15px}button{transition:background .15s,transform .15s}@media(max-width:380px){.shell{padding-left:12px;padding-right:12px}.panel{padding:22px 14px}.brand{gap:7px}.brand p{font-size:15px}.eyebrow{font-size:9px}.badge{font-size:10px;padding:7px 9px}.choices{gap:8px}.animal{min-height:126px;border-radius:18px}.animal .label{font-size:12px}.garden span{font-size:59px}}@media(orientation:landscape) and (max-height:550px){.shell{max-width:860px}.brand{margin-bottom:12px}.panel{padding:18px 24px}.garden{min-height:90px;max-width:300px}.garden span{font-size:48px}.choices{max-width:510px;margin:auto}.animal{min-height:120px;aspect-ratio:auto}.animal .emoji{font-size:52px}.progress{margin-bottom:12px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.categories{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:24px 0}.category{padding:14px 5px;border:2px solid #d1dccc;border-radius:16px;background:#f4f6ed;color:#243e37;font-weight:750;min-height:76px}.category small{display:block;margin-top:6px;font-weight:500}.category[aria-pressed=true]{border-color:#246550;background:#e0efd9;box-shadow:0 3px 0 #a7c299}.swatch{display:block;width:clamp(44px,13vw,78px);height:clamp(44px,13vw,78px);border:2px solid #667066;border-radius:16px}.animal .label{max-width:100%;overflow-wrap:anywhere;padding:0 3px}.mini-swatch{display:inline-block;width:20px;height:20px;border:2px solid #667066;border-radius:5px;margin-left:8px;vertical-align:middle}.progress{gap:5px}

/* Grid items must fit narrow phone columns, not derive width from min-height. */
.animal{width:100%;aspect-ratio:auto}

.feedback-face{display:block;font-size:56px;line-height:1.15;margin:10px auto 0}