/* v1.11 — the pet stays with the child while answering; rewards and growth are shown first. */

/* ── Quiz: the pet listens ─────────────────────────────────────────── */
.quiz-buddy{display:grid;grid-template-columns:84px 1fr 46px;align-items:center;gap:10px;margin:0 0 12px;padding:8px 12px 8px 8px;border-radius:20px;background:linear-gradient(135deg,#f3f7e8,#fdf7e6);border:1px solid #e3ead6}
.buddy-portrait{display:block;width:84px;height:84px;flex:none}
.buddy-portrait .dressed-pet{width:100%!important;height:100%!important;display:block}
.buddy-portrait .dressed-pet>.creature-illustration{width:100%;height:100%}
.buddy-bubble{position:relative;margin:0;padding:9px 13px;border-radius:16px;background:#fffef9;border:1px solid #e6ead9;font-size:14px;line-height:1.7;color:var(--ink)}
.buddy-bubble b{display:block;font-size:12px;color:var(--green);line-height:1.3;margin-bottom:1px}
.quiz-buddy .buddy-bubble:before{content:"";position:absolute;left:-7px;top:50%;width:12px;height:12px;margin-top:-6px;background:#fffef9;border-left:1px solid #e6ead9;border-bottom:1px solid #e6ead9;transform:rotate(45deg)}
.buddy-prop{width:46px;height:46px;object-fit:contain}
.quiz-buddy[data-buddy=thinking] .buddy-portrait{animation:buddy-think 3.2s ease-in-out infinite;transform-origin:50% 100%}
.quiz-calm{font-size:12px;text-align:center;margin-top:12px}
.plain-word{display:inline-block;padding:0 .28em;margin:0 .08em;border:2px solid #cfdcc2;border-radius:9px;background:#fbfdf4;line-height:1.5}
.choice .plain-word{border:0;background:none;padding:0;margin:0;font-size:1.25em;line-height:1.3}

/* ── Result: reaction, reward and growth come first ────────────────── */
.result-banner{display:grid;gap:6px}
.result-banner>p{margin:0;font-size:13px;line-height:1.8}
.result-buddy{position:relative;display:grid;grid-template-columns:104px 1fr;align-items:center;gap:12px;min-height:104px}
.result-buddy .buddy-portrait{width:104px;height:104px;grid-column:1;grid-row:1}
.result-buddy .buddy-bubble{grid-column:2;grid-row:1;font-size:15px;font-weight:700}
.result-buddy .buddy-bubble:before{content:"";position:absolute;left:-7px;top:50%;width:12px;height:12px;margin-top:-6px;background:#fffef9;border-left:1px solid #e6ead9;border-bottom:1px solid #e6ead9;transform:rotate(45deg)}
.result-buddy .buddy-prop{position:absolute;left:74px;top:6px;width:44px;height:44px;z-index:2;pointer-events:none}
.result-buddy.is-correct .buddy-prop{animation:buddy-give 1.5s cubic-bezier(.3,.8,.4,1) both}
.result-buddy.is-correct .buddy-portrait{animation:buddy-hop 1.5s ease both;transform-origin:50% 100%}
.result-buddy.is-try .buddy-prop{opacity:.55;transform:scale(.8)}
.result-buddy.is-try .buddy-portrait{animation:buddy-nod 1.6s ease both;transform-origin:50% 100%}

.reward-spotlight{margin:0 0 14px;padding:14px 14px 12px;border-radius:20px;background:linear-gradient(135deg,#fff6db,#fffbee);border:2px solid #efd79d;animation:reward-pop .7s cubic-bezier(.2,.9,.3,1.3) both}
.reward-spotlight h3{margin:0 0 9px;font-size:16px;color:#8a6a1f;text-align:center}
.reward-spotlight-items{display:grid;gap:9px}
.reward-spotlight article{display:grid;grid-template-columns:64px 1fr auto;align-items:center;gap:11px;padding:6px 8px;border-radius:15px;background:#fffdf4}
.reward-spotlight article img{width:64px;height:64px;object-fit:contain}
.reward-spotlight .reward-place-icon{display:grid;place-items:center;width:64px;height:64px;font-size:34px}
.reward-spotlight strong{display:block;font-size:15px;line-height:1.5}
.reward-spotlight small{display:block;font-size:12px;color:var(--muted);line-height:1.5}
.reward-spotlight .reward-use{padding:9px 12px;min-height:44px;font-size:13px;white-space:nowrap;background:#fff;border-color:#e7cf95}
.reward-spotlight>p{margin:8px 0 0;font-size:12px;text-align:center;color:#806a35}
.lesson-result .reward-line{margin-top:0;font-size:14px}
.growth-next{font-size:13px;margin:7px 2px 12px}
.lesson-result .curriculum-note{margin-top:16px}
.lesson-result .curriculum-note summary{font-size:12px;color:var(--muted)}
.lesson-result .curriculum-note a{display:block;margin-top:4px}

/* ── Growth scene: the new form is the largest thing on the screen ─── */
.evolution-v111{padding:4px 0 10px}
.evolution-stage{position:relative;width:min(100%,340px);height:min(68vw,300px);margin:0 auto 6px;display:grid;place-items:center}
.evolution-now{position:relative;z-index:2;width:min(68vw,300px);height:min(68vw,300px);animation:evo-reveal 1.7s cubic-bezier(.2,.9,.3,1.15) both}
.evolution-now .dressed-pet{width:100%!important;height:100%!important;display:block}
.evolution-now .dressed-pet>.creature-illustration{width:100%;height:100%}
.evolution-glow{position:absolute;z-index:1;inset:6% 10%;border-radius:50%;background:radial-gradient(circle,#fff3b8 0,#fff3b800 70%);animation:evo-glow 1.8s ease both}
.evolution-before{position:absolute;z-index:3;left:0;top:0;width:86px;display:grid;justify-items:center;gap:0;animation:evo-before 1.7s ease both;transform-origin:0 0}
.evolution-before svg{width:74px;height:74px;display:block}
.evolution-before small{font-size:11px;color:var(--muted);background:#fffef6d9;border-radius:9px;padding:1px 7px;line-height:1.6}
.evolution-v111 h2{margin:2px 0 4px;font-size:26px}
.evolution-species{margin:0 0 4px;font-size:13px;color:var(--green);font-weight:700}
.evolution-v111>p{margin:6px 0;line-height:1.9}
.evolution-naming{margin:14px auto 4px;max-width:380px;padding:12px 14px;border-radius:18px;background:#f6f8ee;border:1px solid #e3e9d6;text-align:left}
.evolution-naming label{display:block;font-size:14px;font-weight:800;margin-bottom:7px}
.evolution-naming-row{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:start}
.evolution-naming .name-input{margin:0;font-size:16px}
.evolution-naming small{display:block;margin-top:7px;font-size:12px;color:var(--muted);line-height:1.7}

/* ── Room: what decides the next form, and the new-egg invitation ───── */
.growth-hint{margin:12px 0 0;padding:10px 12px;border-radius:14px;background:#f7f6ea;border:1px dashed #d9dcc2;font-size:13px;line-height:1.8}
.growth-hint b{display:block}
.growth-focus{display:flex;flex-wrap:wrap;gap:6px;margin:7px 0 0;padding:0;list-style:none}
.growth-focus li{padding:3px 9px;border-radius:999px;background:#fff;border:1px solid #e0e4d1;font-size:12px;line-height:1.6}
.growth-focus li.lead{background:#e7f1dc;border-color:#b9d3a5;font-weight:800}
.habitat-card .adult-invite{display:block;width:calc(100% - 30px);margin:10px 15px 14px}

/* ── First registration: choose the question age ───────────────────── */
.entry-age{margin:12px 0 4px;padding:0;border:0;min-width:0}
.entry-age legend{padding:0;font-size:14px;font-weight:800;margin-bottom:8px}
.entry-age-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:8px}
.entry-age-options label{position:relative;display:grid;gap:1px;min-height:54px;align-content:center;padding:8px 12px;border-radius:14px;border:2px solid #dfe6d3;background:#fff;cursor:pointer;line-height:1.4}
.entry-age-options input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.entry-age-options strong{font-size:15px}
.entry-age-options small{font-size:11px;color:var(--muted)}
.entry-age-options label:has(input:checked){border-color:var(--deep);background:#eaf3e0}
.entry-age-options label:has(input:focus-visible){outline:3px solid #9fc28f;outline-offset:2px}

@keyframes buddy-think{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
@keyframes buddy-hop{0%,45%{transform:none}60%{transform:translateY(-12px) scale(1.04,.97)}75%{transform:none}86%{transform:translateY(-6px)}100%{transform:none}}
@keyframes buddy-nod{0%,30%{transform:none}50%{transform:rotate(-4deg)}70%{transform:rotate(3deg)}100%{transform:none}}
@keyframes buddy-give{0%{transform:translate(150px,-6px) scale(1.15);opacity:0}18%{opacity:1}55%{transform:translate(0,18px) scale(.9);opacity:1}72%{transform:translate(-18px,26px) scale(.45);opacity:.9}100%{transform:translate(-22px,28px) scale(.2);opacity:0}}
@keyframes reward-pop{0%{opacity:0;transform:scale(.85)}100%{opacity:1;transform:none}}
@keyframes evo-reveal{0%,48%{opacity:0;transform:scale(.4)}100%{opacity:1;transform:none}}
@keyframes evo-glow{0%{opacity:0;transform:scale(.4)}48%{opacity:1;transform:scale(1.2)}100%{opacity:.6;transform:none}}
@keyframes evo-before{0%,45%{transform:translate(96px,62px) scale(2)}100%{transform:none}}

@media(max-width:730px){
 .quiz-buddy{grid-template-columns:72px 1fr 40px;gap:8px;padding:6px 10px 6px 6px;margin-bottom:10px}
 .quiz-buddy .buddy-portrait{width:72px;height:72px}
 .buddy-prop{width:40px;height:40px}
 .buddy-bubble{font-size:13px;padding:8px 11px}
 .result-buddy{grid-template-columns:92px 1fr;min-height:92px;gap:10px}
 .result-buddy .buddy-portrait{width:92px;height:92px}
 .result-buddy .buddy-prop{left:64px}
 .result-buddy .buddy-bubble{font-size:14px}
 .reward-spotlight article{grid-template-columns:56px 1fr auto;gap:9px}
 .reward-spotlight article img,.reward-spotlight .reward-place-icon{width:56px;height:56px}
 .evolution-v111 h2{font-size:23px}
}
@media(max-height:620px){.quiz-buddy{display:none}}
@media(prefers-reduced-motion:reduce){
 .quiz-buddy .buddy-portrait,.result-buddy .buddy-portrait,.result-buddy .buddy-prop,.reward-spotlight,.evolution-now,.evolution-glow,.evolution-before{animation:none!important}
 .result-buddy.is-correct .buddy-prop{display:none}
}
body[data-effects=off] .quiz-buddy .buddy-portrait,body[data-effects=off] .result-buddy .buddy-portrait,body[data-effects=off] .result-buddy .buddy-prop,body[data-effects=off] .reward-spotlight,body[data-effects=off] .evolution-now,body[data-effects=off] .evolution-glow,body[data-effects=off] .evolution-before{animation:none!important}
body[data-effects=off] .result-buddy.is-correct .buddy-prop{display:none}