:root{color-scheme:light;--sky:#edf7fc;--ink:#24445b;--blue:#328bd4;--yellow:#ffd564;--shadow:#bdd5e4;font-family:ui-rounded,'Arial Rounded MT Bold',system-ui,sans-serif;color:var(--ink);background:var(--sky)}
*{box-sizing:border-box}body{margin:0;min-width:280px;background:radial-gradient(ellipse at 50% 0,#fff 0,transparent 65%),var(--sky);min-height:100svh}button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;color:inherit;border:0}button:focus-visible{outline:4px solid #1f679f;outline-offset:6px}button:disabled{cursor:default}img{max-width:100%;user-select:none;-webkit-user-drag:none}svg{width:32px;height:32px;flex-shrink:0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}#app{max-width:1040px;margin:auto;padding:20px 36px 40px}.topbar{display:grid;grid-template-columns:76px 1fr 76px;align-items:center;min-height:90px;margin-bottom:28px}.brand{display:flex;align-items:center}.sun{width:80px;display:block}.header-center{display:flex;align-items:center;justify-content:center}.invitation{display:flex;align-items:center;gap:18px;color:var(--blue);transform:rotate(-12deg)}.invitation svg{width:38px;height:38px}.little-spark{font-size:26px;color:#dfa836}.round-button{width:68px;height:68px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:white;box-shadow:0 5px 0 #d2e4ee;transition:transform .16s,box-shadow .16s}.round-button:hover{transform:translateY(-3px)}.round-button:active{transform:translateY(3px);box-shadow:0 2px 0 #d2e4ee}.help-button{justify-self:end;color:var(--blue)}.category-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 30px}.category-tile{position:relative;aspect-ratio:1.28;background:#fff;border-radius:28px;box-shadow:0 8px 0 var(--tile-color),0 13px 20px #31536a0c;padding:18px 24px 26px;transition:transform .18s,box-shadow .18s;overflow:hidden}.category-tile:nth-child(3n+1){transform:rotate(-1.3deg)}.category-tile:nth-child(3n){transform:rotate(1.3deg)}.category-tile:hover{transform:translateY(-5px) rotate(0)}.category-tile:active{transform:translateY(4px)}.category-tile img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}.tile-sound{position:absolute;right:10px;bottom:10px;border-radius:50%;background:var(--tile-color);display:flex;padding:7px}.tile-sound svg{width:20px;height:20px}.category-badge{width:76px;height:70px;object-fit:contain;background:#fff;border-radius:22px;padding:9px;box-shadow:0 3px 0 #d7e7ef}.play-screen .topbar{margin-bottom:10px}.progress{display:flex;gap:12px;justify-content:center;align-items:center;height:26px;margin:0 0 24px}.dot{width:12px;height:12px;border-radius:50%;background:#ccdee9;transition:background .2s,transform .2s}.dot.complete{background:#62ad8b}.dot.current{background:var(--blue);box-shadow:0 0 0 5px #d8ebfa;transform:scale(1.12)}.play-area{max-width:540px;margin:0 auto}.card-stack{position:relative;perspective:1400px;margin:0 12px}.card-stack:before,.card-stack:after{content:'';position:absolute;inset:4px;background:#d6e7f1;border:3px solid white;border-radius:36px;transform:rotate(4deg);z-index:-1}.card-stack:after{background:#c2dded;transform:rotate(-3deg)}.flashcard{position:relative;display:block;width:100%;aspect-ratio:1.17;background:transparent;padding:0;transform-style:preserve-3d;transition:transform .65s cubic-bezier(.3,.75,.25,1);border-radius:32px}.flashcard.flipped{transform:rotateY(180deg)}.card-face{position:absolute;inset:0;border-radius:32px;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 22px #24445b12}.card-back{background:#328bd4;border:8px solid white;background-image:radial-gradient(circle at 12px 12px,#ffffff15 3px,transparent 4px);background-size:30px 30px;flex-direction:column;gap:26px}.card-sun{background:#f4fbff;border-radius:50%;padding:14px;box-shadow:0 0 0 14px #ffffff12}.card-sun .sun{width:132px}.card-invitation{display:flex;align-items:center;justify-content:center;background:#ffffff24;border-radius:50%;width:70px;height:70px;color:#fff}.card-invitation svg{width:39px;height:39px}.ready .card-invitation{background:var(--yellow);color:var(--ink);animation:beckon 2.3s ease-in-out infinite}.card-front{background:#fff;transform:rotateY(180deg);padding:28px}.card-front img{width:100%;height:100%;object-fit:contain}.card-actions{display:grid;grid-template-columns:80px 1fr 80px;align-items:center;min-height:100px;margin:22px 20px 0}.replay-button{color:var(--blue)}.next-button{background:var(--yellow);box-shadow:0 5px 0 #e2b64f;width:80px;height:80px}.next-button svg{width:38px;height:38px}.next-button:active{box-shadow:0 2px 0 #e2b64f}.action-hint{justify-self:center;color:#6c9bb5;transform:rotate(-12deg);opacity:.65}.hidden{visibility:hidden;pointer-events:none}#app[data-audio=playing] .help-button svg,#app[data-audio=playing] .replay-button svg{animation:talk .55s ease-in-out infinite alternate}#app[data-audio=playing] .flashcard:not(.ready) .card-invitation{animation:talk .55s ease-in-out infinite alternate}#app[data-audio=loading] [data-audio-button]{box-shadow:0 0 0 5px #ffd56480,0 5px 0 #d2e4ee}#app[data-audio=error] [data-audio-button]{background:var(--yellow);animation:beckon 1.8s ease-in-out infinite}.celebration{padding:30px 0;text-align:center}.celebration-sun{position:relative;width:280px;margin:20px auto 30px}.celebration-sun .sun{width:280px;animation:arrive .55s ease-out}.spark{position:absolute;color:#e8ad38;font-size:50px}.spark.one{top:0;left:-30px;transform:rotate(15deg)}.spark.two{bottom:10px;right:-30px;font-size:40px}.spark.three{top:15px;right:0;font-size:24px}.finished-dots{display:flex;flex-wrap:wrap;gap:8px;max-width:360px;justify-content:center;margin:0 auto 38px;color:#e8ad38;font-size:27px}.finish-actions{display:flex;gap:28px;align-items:center;justify-content:center}.again-button{width:90px;height:90px;background:var(--yellow);box-shadow:0 6px 0 #e2b64f}.again-button svg{width:42px;height:42px}.initial,.error-screen{min-height:70svh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:35px}.sun-wait{font-size:64px;animation:talk .8s ease-in-out infinite alternate}@keyframes talk{to{transform:scale(1.13)}}@keyframes beckon{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}@keyframes arrive{from{opacity:0;transform:scale(.7) rotate(-15deg)}to{opacity:1;transform:scale(1) rotate(0)}}
@media(min-width:1100px){#app{padding-top:22px}.category-grid{gap:28px 32px}.category-tile{aspect-ratio:1.4}.home-screen .topbar{margin-bottom:26px}}
@media(max-width:650px){#app{padding:12px 20px 30px}.topbar{grid-template-columns:64px 1fr 64px;min-height:72px;margin-bottom:22px}.sun{width:66px}.round-button{width:58px;height:58px}.round-button svg{width:29px;height:29px}.category-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:23px 18px}.category-tile{border-radius:23px;aspect-ratio:1.08;padding:14px 15px 24px}.category-tile:nth-child(n){transform:none}.category-tile:nth-child(odd){transform:rotate(-1deg)}.category-tile:nth-child(even){transform:rotate(1deg)}.category-tile:last-child{grid-column:1/-1;justify-self:center;width:calc(50% - 9px)}.tile-sound{padding:6px}.tile-sound svg{width:18px;height:18px}.category-badge{width:66px;height:60px}.progress{gap:10px;margin:8px 0 24px}.dot{width:10px;height:10px}.play-area{max-width:440px}.card-stack{margin:0 5px}.flashcard{aspect-ratio:.92}.card-back{gap:24px;border-width:7px}.card-sun .sun{width:112px}.card-front{padding:20px}.card-actions{margin:20px 6px 0;grid-template-columns:70px 1fr 70px}.next-button{width:70px;height:70px}.celebration-sun,.celebration-sun .sun{width:220px}.celebration{padding:22px 0}.again-button{width:84px;height:84px}}
@media(max-height:700px) and (min-width:651px){#app{padding-top:10px}.play-screen .topbar{min-height:66px}.play-area{max-width:390px}.flashcard{aspect-ratio:1.35}.progress{margin-bottom:14px}.card-sun .sun{width:88px}.card-back{gap:15px}.card-invitation{width:54px;height:54px}.card-actions{margin-top:15px}.category-tile{aspect-ratio:1.6}.category-grid{gap:22px}}
@media(max-height:500px) and (orientation:landscape){.play-screen .topbar{min-height:55px;margin:0}.play-area{max-width:480px;display:grid;grid-template-columns:1fr 90px;gap:20px}.progress{margin:0 0 12px}.flashcard{aspect-ratio:1.45}.card-sun .sun{width:65px}.card-back{gap:10px}.card-invitation{width:45px;height:45px}.card-invitation svg{width:28px;height:28px}.card-actions{display:flex;flex-direction:column;justify-content:space-around;margin:0;gap:8px}.action-hint{display:none}.celebration-sun,.celebration-sun .sun{width:130px}.celebration{padding:0}.celebration-sun{margin:0 auto}.finished-dots{margin-bottom:10px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* The image stays visible while the child recalls and listens to the answer. */
.picture-card{cursor:default;transform:none;transition:none}
.picture-face{background:white;padding:28px}
.picture-face img{width:100%;height:100%;object-fit:contain}
.answer-button{background:var(--yellow);color:var(--ink);box-shadow:0 5px 0 #e2b64f;animation:beckon 2.3s ease-in-out infinite}
@media(max-width:650px){.picture-face{padding:20px}}

.guess-card .picture-face{padding-bottom:48px}
.flip-cue,.answer-cue{position:absolute;bottom:14px;right:16px;display:flex;padding:9px;border-radius:50%;background:var(--yellow);color:var(--ink)}
.flip-cue svg,.answer-cue svg{width:26px;height:26px}
.answer-face{transform:rotateY(180deg);background:#fff;padding:28px 28px 64px}
.answer-face img{width:100%;height:100%;object-fit:contain}
.answer-cue{background:#deeffc;color:var(--blue);right:calc(50% - 22px)}
#app[data-audio=playing] .answer-cue svg{animation:talk .55s ease-in-out infinite alternate}

.assessment-actions{display:flex;justify-content:center;align-items:center;gap:30px;min-height:100px;margin:22px 0 0}
.good-button,.repeat-button{width:80px;height:80px}
.good-button{background:#94d6a0;color:#1f5634;box-shadow:0 5px 0 #69ad79}
.repeat-button{background:#ffc078;color:#70431b;box-shadow:0 5px 0 #dda05d}
.good-button:active{box-shadow:0 2px 0 #69ad79}.repeat-button:active{box-shadow:0 2px 0 #dda05d}
.good-button svg,.repeat-button svg{width:38px;height:38px}
@media(max-width:650px){.assessment-actions{gap:28px;margin-top:20px}.good-button,.repeat-button{width:74px;height:74px}}
@media(max-height:500px) and (orientation:landscape){.assessment-actions{flex-direction:column;gap:15px;margin:0}.good-button,.repeat-button{width:64px;height:64px}}

.session-counts{display:flex;justify-content:center;gap:10px}.session-count{display:flex;align-items:center;justify-content:center;gap:8px;min-width:72px;padding:12px;border-radius:20px;font-size:28px;font-weight:750;font-variant-numeric:tabular-nums}.session-count svg{width:25px;height:25px}.count-good{background:#ddf2df;color:#1f5634}.count-repeat{background:#ffead1;color:#70431b}@media(max-width:360px){.session-counts{gap:5px}.session-count{min-width:0;gap:4px;padding:10px 6px;font-size:24px}.session-count svg{width:21px;height:21px}}

.save-error .good-button{outline:4px solid #e3a340;outline-offset:5px}button:disabled{opacity:.6}

.basket-entry{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:12px 20px;background:#ddf2df;color:#1f5634;border-radius:22px;font-size:28px;font-weight:750;font-variant-numeric:tabular-nums}.remaining-badge{position:absolute;bottom:10px;right:10px;display:flex;align-items:center;gap:6px;background:#edf7fc;color:#24445b;border:2px solid white;border-radius:18px;padding:6px 10px;font-size:22px;font-weight:750}.remaining-badge svg{width:22px;height:22px}.basket-group{margin-bottom:34px}.basket-category{display:flex;align-items:center;gap:12px;margin:0 0 16px;font-size:25px;font-weight:700}.basket-category img{width:52px;height:52px;object-fit:contain;border-radius:14px;background:white;padding:5px}.learned-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}.learned-card{background:white;border-radius:24px;padding:12px;box-shadow:0 5px 0 #d2e4ee;display:flex;flex-direction:column;align-items:center;gap:12px}.learned-picture{position:relative;background:white;width:100%;aspect-ratio:1;padding:6px}.learned-picture img{width:100%;height:100%;object-fit:contain}.learned-picture .tile-sound{background:#edf7fc;right:0;bottom:0}.return-card{width:54px;height:54px!important;min-height:54px}.return-card svg{width:26px;height:26px}.empty-basket{min-height:50svh;display:flex;align-items:center;justify-content:center;gap:20px;font-size:52px;color:#71949d}.empty-basket svg{width:100px;height:100px}.save-retry{outline:4px solid #e3a340;outline-offset:4px}@media(max-width:650px){.learned-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.learned-card{padding:10px}.basket-entry{font-size:25px;padding:10px 16px}.remaining-badge{font-size:20px;padding:5px 8px}}