*{box-sizing:border-box}html,body,#root{margin:0;min-height:100%}body{font-family:Comic Sans MS,Trebuchet MS,system-ui,sans-serif;background:#fff8e1;color:#263238}button{font-family:inherit}.app{max-width:720px;margin:0 auto;padding:24px 16px calc(16px + env(safe-area-inset-bottom));text-align:center}h1{font-size:2.6rem;color:#ff6f00;margin:8px 0}.sub{font-size:1.4rem;margin:0}.grid{display:grid;grid-template-columns:1fr;gap:16px;margin-top:20px}@media(min-width:560px){.grid{grid-template-columns:1fr 1fr}.wide{grid-column:1 / -1}}.big{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:108px;padding:12px 14px;font-size:1.7rem;font-weight:700;line-height:1.1;border:none;border-radius:20px;background:#42a5f5;color:#fff;cursor:pointer;box-shadow:0 5px #1e88e5;touch-action:manipulation}.app>.big,.play>.big,.grid>.big,.stack>.big,.nav>.big{width:100%}.icon{width:48px;height:48px;flex:0 0 auto;display:block}.btn-text{max-width:100%}.icon-badge{width:56px;height:56px;flex:0 0 auto;display:grid;place-items:center;background:#fff;border-radius:16px;box-shadow:inset 0 0 0 3px #ffe082}.icon-badge .icon{width:46px;height:46px}.big:active:not(:disabled){transform:translateY(3px);box-shadow:0 2px #1e88e5}.big.alt{background:#ab47bc;box-shadow:0 5px #8e24aa}.big.alt:active:not(:disabled){box-shadow:0 2px #8e24aa}.big.speak{background:#26a69a;box-shadow:0 5px #00897b;min-height:124px;font-size:1.85rem;width:100%}.big.speak .icon{width:58px;height:58px}.big.speak:active:not(:disabled){box-shadow:0 2px #00897b}.big.speak.speaking{background:#00897b}.play{display:flex;flex-direction:column;gap:16px;min-height:100dvh;touch-action:pan-y}.top{display:flex;align-items:center;justify-content:space-between;gap:12px}.progress{font-size:1.15rem;color:#6d4c41;font-weight:700;text-align:right;line-height:1.25}.progress span{display:block}.grades{flex-direction:row;width:auto;min-height:56px;padding:0 16px;font-size:1.2rem;gap:8px;flex:0 0 auto}.grades .icon{width:32px;height:32px}.card{flex:1;display:flex;align-items:center;justify-content:center;font-size:clamp(2.75rem,13vw,6.5rem);font-weight:700;line-height:1.05;background:#fff;border-radius:28px;padding:28px 12px;box-shadow:0 6px 18px #0000001a;border:6px solid #ffca28;min-height:180px;user-select:none;-webkit-user-select:none;cursor:grab;touch-action:pan-y}.card:active{cursor:grabbing}.tricky{text-decoration:underline;text-decoration-thickness:.12em;text-underline-offset:.14em}.nav{display:grid;grid-template-columns:1fr 1fr;gap:16px}.nav>.big{min-height:112px;font-size:1.2rem;padding:10px 6px}.stack{display:grid;gap:16px;margin-top:20px}.story-name{flex-direction:row;justify-content:flex-start;text-align:left;gap:14px;font-size:1.35rem;line-height:1.2;padding:12px 14px;min-height:88px}.story-name .btn-text,.choice-main .btn-text{flex:1;min-width:0;text-align:left}.stage{margin-top:8px}.art{width:100%;height:auto;display:block}.mover{transition:transform .45s ease}.bob{animation:bob 2.4s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:center}@keyframes bob{0%{transform:translateY(0)}to{transform:translateY(-5px)}}.sentence{margin:8px 0;padding:8px 10px;background:#fff;border-radius:16px;font-size:1.35rem;line-height:1.45;text-align:left}.sentence.now{outline:4px solid #ffca28}.word-tap{border:0;background:transparent;color:inherit;font:inherit;font-weight:700;padding:2px;margin-right:.28em;cursor:pointer}.chips,.well{display:flex;flex-wrap:wrap;flex-shrink:0;gap:10px;justify-content:center}.well{min-height:92px;margin:8px 0 16px;padding:12px;border:4px dashed #ffca28;border-radius:20px;background:#fff}.chip{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:64px;min-width:72px;padding:8px 12px;border-radius:16px;border:4px solid #ffca28;background:#fff;color:#263238;font-size:1.5rem;font-weight:700;touch-action:none}.chip .icon{width:28px;height:28px}.line{min-height:2.6rem;margin:16px 0 8px;font-size:clamp(1.6rem,6vw,2.2rem);font-weight:700}.note{min-height:2rem;margin:8px 0;font-size:1.4rem;font-weight:700;color:#6d4c41}.note.ok{color:#2e7d32}.prompt{margin:12px 0;font-size:1.7rem;font-weight:700}.choice{display:flex;gap:10px;align-items:stretch}.hear{flex:0 0 72px;min-height:72px;display:flex;align-items:center;justify-content:center;padding:0;border:0;border-radius:16px;background:#26a69a;color:#fff;box-shadow:0 5px #00897b}.hear .icon{width:46px;height:46px}.choice-main{flex:1;flex-direction:row;justify-content:flex-start;text-align:left;gap:10px;min-height:72px;font-size:1.25rem;line-height:1.2;padding:10px 12px}.choice-main .icon{width:36px;height:36px}.celebrate{margin-top:24px}.star{width:120px;height:120px;animation:bob 1.6s ease-in-out infinite alternate}.big:disabled{background:#cfd8dc;color:#546e7a;box-shadow:0 5px #b0bec5;cursor:default}.nav+.big{margin-top:16px}@media(prefers-reduced-motion:reduce){.bob,.star,.mover{animation:none;transition:none}}