/* Little Legends: Animal Sounds and Bubble Playground */
.mp-shell{max-width:850px;margin:10px auto 34px;padding:0 2px 18px;color:#2e3252}
.mp-intro{text-align:center;border-radius:25px;background:linear-gradient(125deg,#eaf9ff,#fcf0ff);padding:22px 18px;margin:6px auto 20px;border:2px solid #cbdff4}
.mp-eyebrow{font-size:12px;font-weight:900;letter-spacing:2px;color:#6474a1}
.mp-intro h2{font-size:clamp(28px,5vw,40px);margin:11px 0;color:#34467d;line-height:1.18}
.mp-intro p{font-size:17px;line-height:1.5;margin:10px auto;max-width:610px;color:#485571}
.mp-animals-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.mp-animal{min-height:150px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border:3px solid #d4e4f5;border-radius:23px;padding:13px 6px;background:linear-gradient(160deg,#fff,#eff9ff);box-shadow:0 7px 15px #486caa11;color:#3e4e73;cursor:pointer;font-family:inherit;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.mp-animal:nth-child(2n){background:linear-gradient(160deg,#fff,#fdf0fb);border-color:#f1d5e9}
.mp-animal:nth-child(3n){background:linear-gradient(160deg,#fff,#efffee);border-color:#d6ecd1}
.mp-animal:active{transform:scale(.96)}
.mp-animal:focus-visible,.mp-quiz-option:focus-visible,.mp-bubble:focus-visible{outline:4px solid #8e63e4;outline-offset:4px}
.mp-animal-emoji{font-size:clamp(48px,7vw,71px);line-height:1.15}
.mp-animal strong{font-size:20px}
.mp-animal small{font-size:13px;color:#65708a}
.mp-sound-footer{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin:20px 0 12px;padding:14px 3px;font-weight:800;color:#4f5b81;font-size:16px}
.mp-sound-footer .button{font-size:17px;min-height:50px}
.mp-help{font-size:14px;color:#68758e;line-height:1.6;text-align:center}
.mp-credits{margin:24px auto 0;max-width:720px;border-radius:12px;padding:13px 17px;border:1px solid #dee7f5;background:#f8fbff;font-size:13px;color:#56627c}
.mp-credits summary{cursor:pointer;font-weight:800}
.mp-credits a{color:#344f9d;text-decoration:underline}
.mp-credits li{padding:3px 0}
.mp-quiz-status,.mp-bubble-bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:13px 17px;margin:14px 0;font-weight:850;border-radius:16px;background:#f5f3ff;color:#4e4075}
.mp-quiz-listen{text-align:center;margin:23px 0}
.mp-play-clip{min-height:83px;min-width:min(100%,380px);border:3px solid #83cbbb;border-radius:23px;background:linear-gradient(145deg,#e8fff5,#d5f4ff);color:#1b6465;font:900 clamp(20px,4vw,25px)/1.2 inherit;padding:17px 27px;cursor:pointer;touch-action:manipulation}
.mp-play-clip:active{transform:scale(.98)}
.mp-quiz-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.mp-quiz-option{border:2px solid #d3caee;border-radius:20px;background:#fff;min-height:148px;padding:17px 12px;color:#453d6f;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:11px;font-size:19px;font-weight:850;cursor:pointer;touch-action:manipulation}
.mp-quiz-option span{font-size:54px}
.mp-quiz-option.mp-right{border-color:#4faa76;background:#eaffee;color:#266443}
.mp-quiz-option.mp-try{border-color:#efa6ac;background:#fff3f3}
.mp-quiz-option:disabled{cursor:default}
.mp-result{text-align:center;border-radius:17px;padding:16px 20px;background:#ebfbf2;border:2px solid #9ed7b8;margin:20px auto}
.mp-result strong{font-size:23px;color:#2d6946}
.mp-result p{font-size:17px;color:#42624d}
.mp-next{display:block;margin:17px auto;padding:14px 26px;font-size:19px!important;min-height:54px}
.mp-controls{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin:14px auto}
.mp-controls .button{font-size:18px;min-height:57px;padding:12px 20px;touch-action:manipulation}
.mp-field{isolation:isolate;position:relative;width:100%;height:clamp(365px,53vw,560px);overflow:hidden;border:3px solid #cbdaf6;border-radius:31px;touch-action:manipulation;background:radial-gradient(ellipse at 9% 8%,#fff 0,transparent 36%),linear-gradient(160deg,#ebfaff 0%,#f5eafa 57%,#fff4ef 100%);box-shadow:0 12px 25px #6885a516 inset,0 14px 33px #6885a512}
.mp-field::before,.mp-field::after{pointer-events:none;position:absolute;content:"";height:80px;width:250px;border-radius:50%;background:#fff8;filter:blur(14px)}
.mp-field::before{left:-40px;top:20px}.mp-field::after{right:-90px;bottom:0}
.mp-bubble{appearance:none;position:absolute;z-index:1;left:var(--bubble-x);top:var(--bubble-y);width:var(--bubble-size);height:var(--bubble-size);border-radius:50%;border:2.5px solid #fffdf8;transform:translate(-50%,-50%);background:radial-gradient(circle at 28% 23%,#fffefbfa 0 7%,#ffffff4a 9% 20%,transparent 34%),radial-gradient(circle at 72% 73%,var(--bubble-colour),transparent 72%),radial-gradient(circle at 40% 50%,#ffffffba,var(--bubble-colour));box-shadow:inset -10px -13px 17px #6886b32a,inset 8px 8px 14px #ffffffdf,0 7px 18px #7982b421;cursor:pointer;animation:mp-float var(--bubble-duration) ease-in-out var(--bubble-delay) infinite alternate;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.mp-glint{position:absolute;top:13%;left:23%;width:21%;height:12%;border-radius:100%;background:#fff;transform:rotate(-31deg);opacity:.92;pointer-events:none}
.mp-bubble:focus-visible{z-index:5}
.mp-bubble:active{filter:brightness(1.12)}
.mp-bubble.mp-burst{pointer-events:none;animation:mp-burst .25s ease-out forwards!important}
.mp-bubble-message{text-align:center;margin:18px auto 6px;padding:12px 18px;min-height:55px;border-radius:17px;background:#f7f2ff;color:#55457c;font-size:19px;font-weight:800}
.mp-bubble-message strong{font-weight:950}
@keyframes mp-float{from{transform:translate(-50%,calc(-50% + 8px)) rotate(-5deg)}to{transform:translate(-50%,calc(-50% - 12px)) rotate(5deg)}}
@keyframes mp-burst{0%{opacity:1;transform:translate(-50%,-50%) scale(1)}60%{opacity:.8;transform:translate(-50%,-50%) scale(1.38)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.85)}}
@media(max-width:650px){.mp-animals-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.mp-animal{min-height:127px;border-radius:17px;padding:8px}.mp-animal-emoji{font-size:56px}.mp-quiz-option{min-height:130px;flex-direction:column;gap:2px;padding:12px}.mp-quiz-option span{font-size:48px}.mp-shell{padding:0 0 12px}.mp-intro{padding:17px 10px}.mp-intro p{font-size:15px}.mp-field{height:450px}.mp-bubble{width:min(var(--bubble-size),20vw);height:min(var(--bubble-size),20vw)}.mp-bubble-message{font-size:17px}.mp-sound-footer{font-size:14px}}
@media(prefers-reduced-motion:reduce){.mp-bubble{animation:none}.mp-bubble.mp-burst{animation:mp-burst .25s ease-out forwards!important}}