:root{font-family:ui-rounded,'SF Pro Rounded','Nunito','Trebuchet MS',sans-serif;color:#3c414f;background:#f1efeb;color-scheme:light;font-synthesis:none;-webkit-font-smoothing:antialiased;--paper:#fff1df;--accent:#e99a54;--accent-dark:#945c37;--card-ink:#56483f;--grass:#cde5a4}
*{box-sizing:border-box}html,body{margin:0;overscroll-behavior:none;height:100%;overflow:hidden}body{display:grid;place-items:center}button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;color:inherit}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #5d74b5;outline-offset:4px}button:disabled{cursor:default}button svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}button{user-select:none}.app-shell{height:100dvh;width:100%;max-width:560px;background:var(--paper);position:relative;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 0 90px #57544a15;padding-top:env(safe-area-inset-top);transition:background .25s}.app-header{height:72px;min-height:72px;padding:14px 25px 8px;display:flex;align-items:center;justify-content:space-between;position:relative;z-index:4}.brand{display:flex;align-items:center;gap:9px;font-size:10px;line-height:1.2;color:#8d8173;letter-spacing:.3px}.brand b{color:#605646;font-size:12px}.brand-mark{font-size:36px;line-height:44px;font-weight:900;width:43px;height:43px;background:#ffce91;border-radius:15px;position:relative;text-align:center;color:#825136;transform:rotate(-8deg);box-shadow:0 3px 0 #deb787}.brand-mark>span{font-size:15px;position:absolute;top:-11px;right:-5px;color:#d79548}.header-actions{display:flex;gap:9px;align-items:center}.record-pill{border:1px solid #ffffffb5;background:#ffffff65;border-radius:25px;min-height:37px;display:flex;gap:7px;align-items:center;padding:8px 11px;font-size:10px;color:#9c9385;font-weight:600}.record-dot{height:6px;width:6px;border-radius:50%;background:#aab19b}.record-pill.active{background:#fff1ef;color:#ac6262;border-color:#e8b8b8}.record-pill.active .record-dot{background:#ce716d;box-shadow:0 0 0 3px #ce716d1c}.icon-button{display:grid;place-items:center;border:0;background:#ffffff70;border-radius:50%;width:39px;height:39px;font-size:27px}.feed{flex:1;min-height:0;position:relative;touch-action:none;outline:0;overflow:hidden;isolation:isolate}.card{height:100%;width:100%;display:flex;flex-direction:column;padding:12px 24px 0;will-change:transform;transform:translateY(0);position:relative;z-index:2}.card-title{text-align:center;flex:none;position:relative;z-index:2}.card-title .eyebrow{color:var(--accent-dark);opacity:.62;font-size:9px;letter-spacing:1.6px;font-weight:800}.card-title h1{margin:8px 0 0;font-family:ui-rounded,'SF Pro Rounded','Trebuchet MS',sans-serif;font-weight:800;font-size:31px;letter-spacing:-1.3px;color:var(--card-ink)}.card-title h1 .question-mark{color:var(--accent)}.world{position:relative;flex:1;min-height:150px;max-height:510px;width:100%;display:flex;align-items:center;justify-content:center;margin:7px auto 0;isolation:isolate}.world-disc{position:absolute;width:91%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 40% 24%,#ffffffda 0,#ffffff80 48%,#fff8 100%);z-index:-3;top:50%;transform:translateY(-50%)}.world-disc:after{content:'';position:absolute;inset:12px;border:1px solid #ffffff70;border-radius:50%}.sprite{background-size:200% 200%;background-repeat:no-repeat;background-position:0 0;flex-shrink:0;aspect-ratio:1;display:block}.hero-sprite{width:100%;height:auto;max-width:min(440px,calc(100dvh - 340px));position:relative;z-index:2;filter:drop-shadow(0 12px 7px #8d684512);transform:translateY(-2%)}.main-shadow{position:absolute;width:52%;height:20px;border-radius:50%;background:#8b82691c;bottom:12%;filter:blur(6px);z-index:-1}.cloud{position:absolute;height:19px;width:65px;border-radius:40px;background:#fff;opacity:.8;z-index:-2;top:24%;left:1%;box-shadow:0 4px 8px #9fbecc08}.cloud:before,.cloud:after{content:'';position:absolute;bottom:4px;border-radius:50%;background:inherit}.cloud:before{left:10px;width:29px;height:29px}.cloud:after{left:28px;width:25px;height:34px}.cloud.second{left:auto;right:-1%;top:12%;transform:scale(.75)}.decor-star{position:absolute;color:#e9b670;font-size:23px;top:9%;left:12%;transform:rotate(13deg);z-index:3;opacity:.55}.decor-star.s2{left:auto;right:8%;top:59%;font-size:15px}.garden-plant{position:absolute;bottom:9%;left:3%;width:43px;height:62px;z-index:0}.garden-plant:before{content:'';position:absolute;left:20px;bottom:0;width:4px;height:40px;background:#8ab482;border-radius:5px}.garden-plant:after{content:'✿';position:absolute;left:3px;top:0;font-size:44px;line-height:1;color:#e2a4ad;text-shadow:0 2px 0 #fff9}.garden-plant.p2{left:auto;right:2%;transform:scale(.72);bottom:15%}.garden-plant.p2:after{color:#eab674}.scene-sky .main-shadow,.scene-sky .garden-plant{display:none}.scene-sky .world-disc{background:radial-gradient(circle,#fff7cb 10%,#bfe2f078 75%)}.scene-road .hero-sprite{transform:translateY(7%);max-width:min(450px,calc(100dvh - 300px))}.scene-road .main-shadow{bottom:24%;width:77%}.road-strip{position:absolute;bottom:14%;left:-70%;width:240%;height:42px;background:#bac7b9;transform:rotate(-3deg);border-top:5px solid #dbe9c1;border-bottom:5px solid #dbe9c1;z-index:-1;overflow:hidden}.road-strip:after{content:'';position:absolute;left:0;right:0;top:15px;height:3px;background:repeating-linear-gradient(90deg,#fff9 0 30px,transparent 30px 64px)}.road-hills{position:absolute;bottom:25%;left:-10%;width:180%;height:39%;background:radial-gradient(ellipse at 20% 100%,#b4d4a3 0 25%,transparent 26%),radial-gradient(ellipse at 60% 100%,#c6deb1 0 32%,transparent 33%);z-index:-2;opacity:.55}.comparison{--comparison-max:calc((100dvh - 340px)*.72);position:absolute;top:50%;left:50%;width:min(72%,315px,var(--comparison-max));padding:7px 7px 9px;z-index:5;border:3px solid #fff;border-radius:25px;background:#f3f2ef;box-shadow:0 8px 27px #43483b2b;text-align:center;transform:translate(-66%,-43%);animation:comparison-in .2s ease-out;pointer-events:none}.comparison .sprite{width:100%;filter:grayscale(1);opacity:1;margin:auto}.comparison>span:not(.sprite){display:block;font-size:25px;font-weight:800;color:#737570;letter-spacing:.5px;line-height:1.1}.app-shell,.app-shell *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-user-drag:none}.app-shell{touch-action:none}.feed,.answer,.replay-button{touch-action:none}.sprite{pointer-events:none}.success-sparkles{position:absolute;inset:0;pointer-events:none;z-index:4}.success-sparkles i{position:absolute;font-style:normal;color:#ebb958;font-size:26px;opacity:0}.success-sparkles i:nth-child(1){left:5%;top:22%}.success-sparkles i:nth-child(2){right:7%;top:35%;color:#93c4a3}.success-sparkles i:nth-child(3){right:14%;top:2%;font-size:18px;color:#c6a0d0}.success-sparkles i:nth-child(4){left:14%;bottom:7%;font-size:16px;color:#e99583}.response-zone{flex:none;position:relative;z-index:3;padding-top:4px}.response-message{height:28px;text-align:center;font-size:12px;color:#9f9588;line-height:28px;margin:0 0 10px;letter-spacing:.2px}.response-message.correct{color:#609477;font-weight:700}.options{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.answer{background:#fffefb;border:2px solid #fff;border-radius:21px;height:83px;box-shadow:0 6px 0 #dfd8c78a,0 8px 14px #8872550a;font-size:37px;font-weight:800;letter-spacing:-1px;color:#635746;position:relative;transition:background .18s,transform .15s,box-shadow .18s;display:grid;place-items:center;padding:0;line-height:1}.answer:hover{background:#fff}.answer:active{transform:translateY(3px);box-shadow:0 3px 0 #dfd8c78a}.answer.correct{background:#e5f2d2;border-color:#9fc887;color:#568147;box-shadow:0 6px 0 #a9c799}.answer.correct:after{content:'✓';position:absolute;top:-9px;right:7px;width:23px;height:23px;background:#7aad60;color:white;border-radius:50%;font-size:14px;line-height:23px}.answer.wrong{background:#e9e8e1;border-color:#e2e1d9;color:#9a9c95;box-shadow:0 6px 0 #d5d6cd}.answer.new-wrong{animation:wrong-wobble .3s ease-out}.answer:disabled:not(.correct):not(.wrong){opacity:.58}.bottom-hint{height:43px;display:flex;align-items:center;justify-content:center;gap:8px;font-size:10px;color:#a29580;margin-top:9px}.bottom-hint span:first-child{font-size:18px;line-height:1;opacity:.7}.replay-button{border:0;background:transparent;padding:8px;color:#8a9b73;font-size:11px;min-height:36px}.card-nav{position:relative;z-index:5;display:flex;gap:20px;align-items:center;justify-content:center;min-height:43px;padding:0 25px}.nav-arrow{width:38px;height:35px;border-radius:50%;border:0;background:#ffffff60;color:#9a957d;font-size:19px}.nav-arrow:disabled{opacity:.25}.progress-dots{display:flex;align-items:center;gap:4px}.progress-dots i{display:block;width:4px;height:5px;background:#c9c3ad;border-radius:6px;opacity:.7}.progress-dots i.current{width:19px;background:var(--accent);opacity:1}.progress-dots i.solved{background:#8bb281}.record-strip{height:28px;min-height:28px;display:flex;align-items:center;justify-content:center;gap:5px;font-size:8px;color:#afa78f;padding-bottom:3px;margin-bottom:env(safe-area-inset-bottom)}.tiny-dot{width:4px;height:4px;background:#b1bc96;border-radius:50%}.record-strip.active{color:#ad7368}.record-strip.active .tiny-dot{background:#cb7770}.card.exiting-up{animation:exit-up .2s ease-in both}.card.exiting-down{animation:exit-down .2s ease-in both}.card.entering-up{animation:enter-up .32s cubic-bezier(.16,.85,.3,1) both}.card.entering-down{animation:enter-down .32s cubic-bezier(.16,.85,.3,1) both}.celebrating .hero-sprite{animation:character-frames 2.8s steps(1,end) both}.celebrating .success-sparkles i{animation:sparkle 2.8s ease-out both}.celebrating .success-sparkles i:nth-child(2){animation-delay:.13s}.celebrating .success-sparkles i:nth-child(3){animation-delay:.25s}.celebrating .success-sparkles i:nth-child(4){animation-delay:.18s}.motion-wave.celebrating .hero-sprite{animation-name:wave-frames}.motion-nod.celebrating .hero-sprite{animation-name:nod-frames}.motion-turns.celebrating .hero-sprite{animation-name:turn-frames}.motion-fly.celebrating .hero-sprite{animation:wing-frames 2.8s steps(1,end) both,bee-flight 2.8s ease-in-out both}.motion-drive.celebrating .hero-sprite{animation:character-frames 2.8s steps(1,end) both,car-drive 2.8s ease-in-out both}.motion-drive.celebrating .road-strip{animation:drive-road 2.8s linear both}.motion-drive.celebrating .road-hills{animation:drive-hills 2.8s linear both}.motion-door.celebrating .hero-sprite{animation-name:door-frames}.motion-flap.celebrating .hero-sprite{animation-name:wing-frames}.motion-wink.celebrating .hero-sprite{animation-name:turn-frames}.theme-peach{--paper:#fff1df;--accent:#e6a064;--accent-dark:#ac784e;--card-ink:#644d3d}.theme-lilac{--paper:#f0edff;--accent:#b3a1dd;--accent-dark:#8d7fb7;--card-ink:#655578}.theme-mint{--paper:#e9f5e8;--accent:#94b98d;--accent-dark:#789b71;--card-ink:#4f7251}.theme-blue{--paper:#e8f4fd;--accent:#99bdd4;--accent-dark:#7d9fb5;--card-ink:#52768c}.theme-rose{--paper:#ffedf0;--accent:#dba2ab;--accent-dark:#b67d8a;--card-ink:#926876}.theme-yellow{--paper:#fff5d7;--accent:#d8b877;--accent-dark:#ac934f;--card-ink:#86703e}.theme-sky{--paper:#e5f4fb;--accent:#e4bc73;--accent-dark:#899fa3;--card-ink:#698c9a}.toast{position:fixed;z-index:30;max-width:min(440px,calc(100% - 30px));bottom:24px;left:50%;transform:translateX(-50%);background:#47565b;color:#fff;padding:13px 18px;border-radius:15px;font-size:12px;line-height:1.5;box-shadow:0 7px 25px #0002}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}dialog{border:1px solid #e4e5da;background:#fbfaf5;color:#4c554f;border-radius:27px;width:calc(100% - 28px);max-width:530px;max-height:calc(100dvh - 30px);padding:23px;overflow:auto;touch-action:pan-y;box-shadow:0 20px 80px #293d3433}dialog::backdrop{background:#34433c80;backdrop-filter:blur(6px)}.dialog-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.dialog-header .icon-button{background:#eeeee6}.eyebrow{font-size:9px;letter-spacing:1.7px;color:#a1aa97;font-weight:800}.dialog-header h2{margin:7px 0 0;font-size:24px;letter-spacing:-.5px}.parent-section{padding:18px;border:1px solid #e3e7d9;border-radius:18px;margin-bottom:14px}.parent-section h3,.history-heading h3{font-size:14px;margin:0 0 10px;font-weight:800}.parent-section p{font-size:12px;line-height:1.65;color:#8d9384;margin:9px 0}.switch-row{display:flex;justify-content:space-between;align-items:center;gap:15px;font-size:11px;margin-top:16px;color:#727e69}.switch-row input{appearance:none;min-width:37px;height:23px;border-radius:15px;background:#d5dbcc;position:relative;margin:0;cursor:pointer}.switch-row input:before{content:'';position:absolute;width:17px;height:17px;border-radius:50%;background:white;left:3px;top:3px;transition:transform .2s}.switch-row input:checked{background:#89ac7e}.switch-row input:checked:before{transform:translateX(14px)}.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 18px;min-height:45px;border:0;border-radius:14px;font-size:12px;font-weight:700;text-decoration:none}.button.primary{background:#799974;color:white;box-shadow:0 3px 0 #63875e}.button.secondary{background:#e9ecdf;color:#7a896c}.button.quiet{background:transparent;color:#9b9e8c}.button.recording{background:#bd7a75;box-shadow:0 3px 0 #a16461}.parent-section .privacy-note{font-size:10px;line-height:1.6;margin-top:12px}.history-heading{display:flex;align-items:center;justify-content:space-between;margin:27px 3px 12px}.history-heading h3{margin:0}.small-text-button{border:0;background:none;color:#829874;font-size:10px;text-decoration:underline;text-underline-offset:3px;min-height:34px}.history-list{display:flex;flex-direction:column;gap:10px}.history-entry{background:#f0f1e8;border-radius:16px;padding:12px}.history-top{display:flex;gap:12px;align-items:center}.history-thumb{width:50px}.history-word{font-size:18px;font-weight:800;letter-spacing:.4px}.history-date{color:#a0a592;font-size:9px;margin-top:3px}.history-events{font-size:11px;line-height:1.6;color:#8d9781;margin:8px 0 0}.history-audio{margin-top:10px;border-top:1px solid #dfe3d5;padding-top:10px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}.history-audio audio{width:100%;height:34px}.clip-download{color:#7b9470;font-size:10px;display:inline-flex;align-items:center;min-height:30px;background:none;border:0;text-decoration:underline}.history-empty{font-size:12px;color:#a1a694;line-height:1.6;text-align:center;padding:20px}.parent-bottom{margin-top:24px;text-align:center}.parent-bottom p{font-size:10px;color:#a3a891;line-height:1.7}.finish-dialog{text-align:center;padding:34px 25px}.finish-sparkles{color:#d9b061;font-size:40px;letter-spacing:12px;margin:15px 0 25px}.finish-dialog h2{font-size:27px;letter-spacing:-.7px}.finish-dialog p{font-size:14px;line-height:1.6;color:#a1a68e}.finish-dialog .button{display:flex;margin:20px auto 0}
@keyframes character-frames{0%,10%{background-position:0 0}20%,30%{background-position:100% 0}40%,50%{background-position:0 100%}60%,70%{background-position:100% 100%}80%,100%{background-position:0 0}}
@keyframes wave-frames{0%,10%{background-position:0 0}18%,28%{background-position:100% 0}36%,46%{background-position:0 100%}54%,64%{background-position:100% 100%}72%,82%{background-position:0 100%}90%,100%{background-position:0 0}}
@keyframes nod-frames{0%,10%{background-position:0 0}20%{background-position:100% 0}35%{background-position:0 100%}50%{background-position:100% 100%}60%{background-position:0 0}72%{background-position:100% 0}83%{background-position:0 100%}94%,100%{background-position:0 0}}
@keyframes turn-frames{0%,10%{background-position:0 0}23%,35%{background-position:100% 0}45%,55%{background-position:0 100%}68%,80%{background-position:100% 100%}90%,100%{background-position:0 0}}
@keyframes door-frames{0%,15%{background-position:0 0}28%{background-position:100% 0}42%,65%{background-position:0 100%}78%,90%{background-position:100% 100%}100%{background-position:0 0}}
@keyframes wing-frames{0%,100%{background-position:0 0}12%,36%,60%,84%{background-position:100% 0}24%,48%,72%{background-position:0 100%}95%{background-position:100% 100%}}
@keyframes bee-flight{0%,100%{transform:translateY(-2%)}30%{transform:translate(8px,-18px) rotate(3deg)}60%{transform:translate(-8px,-9px) rotate(-3deg)}}
@keyframes car-drive{0%,100%{transform:translateY(7%)}20%,60%{transform:translate(3px,calc(7% - 3px))}40%,80%{transform:translate(-3px,calc(7% + 2px))}}
@keyframes drive-road{from{background-position:0 0;transform:translateX(0) rotate(-3deg)}to{background-position:-180px 0;transform:translateX(-130px) rotate(-3deg)}}
@keyframes drive-hills{from{transform:translateX(0)}to{transform:translateX(-90px)}}
@keyframes sparkle{0%,100%{opacity:0;transform:scale(.2) rotate(0)}25%,65%{opacity:1;transform:scale(1) rotate(20deg)}}
@keyframes comparison-in{from{opacity:0;transform:translate(-66%,-43%) scale(.94)}to{opacity:1;transform:translate(-66%,-43%) scale(1)}}
@keyframes wrong-wobble{0%,100%{transform:translateX(0)}25%{transform:translateX(-3px)}65%{transform:translateX(3px)}}
@keyframes exit-up{to{transform:translateY(-105%);opacity:.7}}@keyframes exit-down{to{transform:translateY(105%);opacity:.7}}@keyframes enter-up{from{transform:translateY(95%);opacity:.6}to{transform:translateY(0);opacity:1}}@keyframes enter-down{from{transform:translateY(-95%);opacity:.6}to{transform:translateY(0);opacity:1}}
@media(min-width:700px){.app-shell{max-height:940px;border-radius:32px;box-shadow:0 20px 80px #5b5a4930}.app-shell{height:calc(100dvh - 36px)}.card{padding-left:36px;padding-right:36px}.app-header{padding-left:36px;padding-right:36px}.hero-sprite{max-width:min(425px,calc(100dvh - 400px))}.comparison{--comparison-max:calc((100dvh - 400px)*.72)}.scene-road .hero-sprite{max-width:min(450px,calc(100dvh - 340px))}.card-title h1{font-size:35px}}
@media(max-height:730px){.app-header{height:61px;min-height:61px;padding-top:8px}.card{padding-top:6px}.card-title h1{font-size:27px;margin-top:5px}.world{margin-top:2px}.hero-sprite{max-width:min(370px,calc(100dvh - 315px))}.answer{height:69px;font-size:33px;border-radius:18px}.response-message{margin-bottom:7px;font-size:11px}.bottom-hint{height:32px;margin-top:7px}.card-nav{min-height:34px}.record-strip{height:22px;min-height:22px}.comparison{--comparison-max:calc((100dvh - 315px)*.72);border-radius:21px}.comparison>span:not(.sprite){font-size:22px}}
@media(max-height:600px){.app-header{height:53px;min-height:53px}.brand-mark{transform:scale(.8) rotate(-8deg);margin-right:-5px}.card-title .eyebrow{display:none}.card-title h1{font-size:23px}.world{min-height:100px}.hero-sprite{max-width:calc(100dvh - 275px)}.comparison{--comparison-max:calc((100dvh - 275px)*.72);padding:4px 4px 7px}.comparison>span:not(.sprite){font-size:19px}.answer{height:58px;font-size:29px}.response-message{height:20px;line-height:20px;margin-bottom:6px}.bottom-hint{height:26px;margin-top:6px}.card-nav{min-height:31px}.record-strip{font-size:7px;height:19px;min-height:19px}.cloud{transform:scale(.7)}}
@media(max-width:359px){.app-header{padding-left:18px;padding-right:18px}.card{padding-left:17px;padding-right:17px}.options{gap:8px}.answer{font-size:32px}.progress-dots{gap:4px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important}.card,.hero-sprite,.road-strip,.road-hills,.success-sparkles i,.comparison,.answer{animation:none!important}.celebrating .hero-sprite{background-position:100% 0}.celebrating .success-sparkles i{opacity:1}}

/* Wrong answer: brief response, then a visible, fully locked permutation. */
.hero-sprite{--hero-rest-y:-2%}.scene-road .hero-sprite{--hero-rest-y:7%}
.wrong-feedback .hero-sprite{animation:picture-no .44s ease-in-out both}
.options{position:relative;grid-template-columns:repeat(3,minmax(0,1fr))}.options.retrying .answer{opacity:1!important;cursor:default}
.answer.word-length-4{font-size:clamp(22px,6.8vw,34px)}.answer.word-length-5{font-size:clamp(19px,5.7vw,29px)}
.card-nav{min-height:70px;gap:12px;padding:6px 18px}.nav-arrow{width:50px;height:52px;font-size:30px;background:#fff9;color:#52694c;flex-shrink:0}.next-card{width:128px;border-radius:20px;background:#729b60;color:white;box-shadow:0 4px 0 #527b42;display:flex;align-items:center;justify-content:center;gap:14px;font-size:21px;font-weight:800}.next-card span:last-child{font-size:36px}.nav-arrow:disabled{opacity:.35}.next-card:not(:disabled):active{transform:translateY(3px);box-shadow:0 1px 0 #527b42}
@media(max-height:600px){.card-nav{min-height:60px}.nav-arrow{height:46px}.world{min-height:70px}}
.options.retrying .answer:active{transform:none}
.answer.word-travel{animation:swap-word var(--shuffle-duration,850ms) cubic-bezier(.4,0,.2,1) both;transition:none;will-change:transform}
.retry-progress{position:absolute;top:calc(100% - 47px);left:22%;right:22%;height:3px;border-radius:3px;overflow:hidden;background:#bca88c17;pointer-events:none}
.retry-progress i{display:block;height:100%;width:100%;border-radius:3px;background:var(--accent);transform-origin:left;animation:retry-time var(--retry-duration,2200ms) linear both;opacity:.65}
.motion-owl.celebrating .hero-sprite{animation-name:wave-frames}
.motion-bat.celebrating .hero-sprite{animation:wing-frames 2.8s steps(1,end) both,bat-hover 2.8s ease-in-out both}
.motion-rat.celebrating .hero-sprite{animation-name:wave-frames}
.motion-ram.celebrating .hero-sprite{animation-name:nod-frames}
.motion-ape.celebrating .hero-sprite{animation-name:clap-frames}
@keyframes picture-no{0%,100%{transform:translate(0,var(--hero-rest-y)) rotate(0)}20%{transform:translate(-7px,var(--hero-rest-y)) rotate(-1.5deg)}40%{transform:translate(7px,var(--hero-rest-y)) rotate(1.5deg)}60%{transform:translate(-5px,var(--hero-rest-y)) rotate(-1deg)}80%{transform:translate(3px,var(--hero-rest-y)) rotate(.5deg)}}
@keyframes swap-word{0%{transform:translate(var(--swap-x),0) scale(1)}50%{transform:translate(var(--swap-half-x),var(--swap-arc)) scale(.91)}100%{transform:translate(0,0) scale(1)}}
@keyframes retry-time{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@keyframes bat-hover{0%,100%{transform:translateY(-2%)}30%{transform:translate(5px,-16px) rotate(2deg)}65%{transform:translate(-5px,-10px) rotate(-2deg)}}
@keyframes clap-frames{0%,100%{background-position:0 0}15%,45%,75%{background-position:100% 0}30%,60%,90%{background-position:0 100%}95%{background-position:100% 100%}}
.audio-credits{font-size:11px;line-height:1.7;margin-top:18px;color:#8d9384}.audio-credits summary{cursor:pointer;min-height:32px}.audio-credits a{color:#6c8764;text-underline-offset:3px}.audio-credits ul{padding-left:18px}
@media(max-height:730px){.retry-progress{top:calc(100% - 36px)}}
@media(max-height:600px){.retry-progress{top:calc(100% - 30px)}}
@media(prefers-reduced-motion:reduce){.retry-progress i{animation:none;transform:none}}

/* Additional same-letter choices are single illustrations, not animation sheets. */
.sprite.still-picture{background-size:contain;background-position:center}
.picture-dot{position:relative;background:none}
.picture-dot:before{content:'';position:absolute;inset:15%;border-radius:50%;background:#aa75d0}

/* Video rewards occupy the same space as the inert original picture. */
.reward-visual{aspect-ratio:1;pointer-events:none}
.reward-picture{width:100%;height:100%}
.reward-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
.reward-video[hidden]{display:none}
.reward-playing .reward-picture{visibility:hidden}
.has-reward-video .hero-sprite,.has-reward-video .road-strip,.has-reward-video .road-hills,.has-reward-video .success-sparkles i{animation:none!important}
.static-reward .road-strip,.static-reward .road-hills{animation:none!important}
/* Whole pictures celebrate gently until an individual action clip is ready. */
@media(prefers-reduced-motion:no-preference){.static-reward.celebrating:not(.has-reward-video) .hero-sprite{animation:fallback-sway 2.8s ease-in-out both;transform-origin:50% 80%}}
@keyframes fallback-sway{0%,100%{transform:translate(0,var(--hero-rest-y)) rotate(0)}20%{transform:translate(-5px,calc(var(--hero-rest-y) - 2px)) rotate(-3deg)}40%{transform:translate(5px,calc(var(--hero-rest-y) - 4px)) rotate(3deg)}60%{transform:translate(-4px,calc(var(--hero-rest-y) - 2px)) rotate(-2deg)}80%{transform:translate(2px,var(--hero-rest-y)) rotate(1deg)}}

/* Keep both solved-card actions visible without crowding the swipe hint. */
.reward-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-width:280px;margin:6px auto 0}
.reward-actions .replay-button{min-width:0;border:1px solid #ffffffb5;border-radius:12px;background:#ffffff55;white-space:nowrap}
.hear-word-button:disabled{opacity:.45}
@media(max-height:600px){.reward-actions{margin-top:4px}.reward-actions .replay-button{min-height:32px;padding:6px 8px}}