:root{--mp-ink:#20304d;--mp-blue:#447fa5;--mp-sand:#fff5d9;--mp-green:#4f9270}
body{background:#d9f1ff}.stage{background:linear-gradient(#dff5ff 0 62%,#efd49a 62%);color:var(--mp-ink)}.mp-intro,.mp-play{display:flex;align-items:center;justify-content:center;padding:14px}.mp-panel{width:min(680px,97%);max-height:calc(100dvh - 82px);overflow:auto;padding:clamp(20px,4vw,38px);border:3px solid #fff;border-radius:28px;background:rgba(255,253,247,.97);box-shadow:0 18px 50px rgba(36,69,90,.2);text-align:center}.mp-mark{font-size:clamp(3rem,9vw,5.2rem)}.mp-panel h1{margin:4px 0;font-size:clamp(2rem,7vw,3.4rem)}.mp-panel .tagline{margin:4px 0 16px;font-size:1.1rem}.mp-adult{display:grid;gap:12px;padding:16px;border:2px solid #c9dcae;border-radius:18px;background:#f5f9eb;text-align:left}.mp-adult>b{color:#41694f}.mp-adult label{display:grid;gap:5px;font-weight:850}.mp-adult select{width:100%;min-width:0;box-sizing:border-box;min-height:48px;padding:0 12px;border:2px solid #b7c9a5;border-radius:12px;background:#fff;color:var(--mp-ink);font:750 1rem system-ui}.mp-adult fieldset{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0;padding:10px;border:1px solid #ccd7bd;border-radius:13px}.mp-adult fieldset label{display:flex;min-height:44px;align-items:center;gap:8px}.mp-adult input{width:44px;height:44px;margin:0;accent-color:#2f73d9}.mp-adult p{margin:0;color:#53605c;font-size:.86rem;line-height:1.45}.mp-grown{margin-top:10px;padding:0 12px;border-radius:13px;background:#f5f7f8;text-align:left}.mp-grown summary{display:flex;min-height:44px;align-items:center;justify-content:center;font-weight:850;cursor:pointer}.mp-grown p{line-height:1.5}.mp-grown a{display:inline-flex;min-height:44px;align-items:center;color:#27634f;font-weight:800}
.mp-play{flex-direction:column;justify-content:flex-start;gap:14px}.mp-map{display:flex;gap:8px}.mp-map span{display:grid;width:46px;height:46px;place-items:center;border:2px solid rgba(32,48,77,.18);border-radius:50%;background:rgba(255,255,255,.7);font-size:1.3rem;filter:grayscale(1);opacity:.65}.mp-map span.done{filter:none;opacity:1;background:#fff0a9;border-color:#d5a945}.mp-map span.now{filter:none;opacity:1;outline:4px solid rgba(68,127,165,.2)}.mp-prompt{display:flex;width:min(720px,100%);min-height:76px;align-items:center;justify-content:space-between;gap:14px;padding:12px 16px;border:2px solid #c6d8e0;border-radius:20px;background:#fff;box-shadow:0 7px 20px rgba(37,73,91,.12)}.mp-prompt small,.mp-prompt b{display:block}.mp-prompt small{color:#5a6e7b;font-weight:750}.mp-prompt b{font-size:clamp(1.05rem,3vw,1.35rem)}.mp-prompt button{min-width:112px;min-height:52px;border:0;border-radius:15px;background:#447fa5;color:#fff;font-weight:900;font-size:1rem}.mp-choices{display:grid;width:min(720px,100%);grid-template-columns:1fr 1fr;gap:16px}.mp-card{position:relative;min-height:280px;padding:14px;border:4px solid #fff;border-radius:26px;background:#fff;box-shadow:0 10px 0 #9eb2ba,0 17px 30px rgba(42,69,80,.16);color:var(--mp-ink);font:900 clamp(1.25rem,4vw,1.8rem) system-ui;touch-action:manipulation}.mp-card img{width:100%;height:190px;object-fit:contain;border-radius:18px;background:var(--mp-sand)}.mp-card .mp-fallback{display:none;height:190px;place-items:center;border-radius:18px;background:var(--mp-sand);font-size:5rem}.mp-card.no-image img{display:none}.mp-card.no-image .mp-fallback{display:grid}.mp-card span{display:block;margin-top:9px}.mp-card.retry{animation:mp-wiggle .4s;border-color:#db8a73}.mp-card.correct{border-color:#65a982;background:#f1fbf5}.mp-feedback{min-height:28px;margin:0;padding:0 12px;color:#31445a;font-weight:850;text-align:center}.mp-card:disabled{opacity:.72}.mp-card.correct:disabled{opacity:1}@keyframes mp-wiggle{25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}
@media(max-width:560px){.mp-adult fieldset{grid-template-columns:1fr}.mp-play{padding:8px;gap:9px}.mp-prompt{min-height:66px;border-radius:16px}.mp-prompt button{min-width:56px;font-size:0}.mp-prompt button:before{content:'🔊';font-size:1.35rem}.mp-choices{gap:10px}.mp-card{min-height:205px;border-radius:20px;padding:9px}.mp-card img,.mp-card .mp-fallback{height:135px}.mp-card .mp-fallback{font-size:3.6rem}.mp-map span{width:40px;height:40px}}
@media(max-height:690px) and (min-width:650px){.mp-card{min-height:190px}.mp-card img,.mp-card .mp-fallback{height:125px}.mp-play{gap:7px}}@media(prefers-reduced-motion:reduce){.mp-card.retry{animation:none}}