:root{font-family:system-ui,sans-serif;color:#1c1c28;background:#f6f4ee}body{margin:0}main{max-width:640px;margin:0 auto;padding:16px}h1{font-size:1.4rem;margin:0 0 4px}.note{color:#555;font-size:.9rem;margin:4px 0 12px}.card{background:#fff;border-radius:12px;padding:16px;margin:12px 0;box-shadow:0 1px 3px #0002}label{display:block;margin:8px 0 4px;font-weight:600}select,button{font:inherit;padding:10px 14px;border-radius:8px;border:1px solid #aaa;background:#fff}button{cursor:pointer;min-height:44px}button.primary{background:#2d6a4f;color:#fff;border-color:#2d6a4f;font-weight:700}button:disabled{opacity:.5;cursor:default}.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.target{font-size:2.2rem;font-weight:800;margin:8px 0}.listening{color:#b00020;font-weight:700}.listening:before{content:"● "}.verdict{font-size:1.2rem;font-weight:700;margin-top:8px}.verdict.pass:before{content:"✓ "}.verdict.fail:before{content:"✗ "}.verdict.uncertain:before{content:"?  "}.pass{color:#1b6e3a}.fail{color:#a4262c}.uncertain{color:#8a5a00}table{border-collapse:collapse;width:100%;font-size:.9rem}th,td{border:1px solid #ddd;padding:6px;text-align:center}.error{background:#fff3cd;padding:10px;border-radius:8px}ol.alts{margin:4px 0 0;padding-left:20px}main.game{text-align:center}.game h1{font-size:2rem}.lead{font-size:1.2rem;margin:8px 0}.mascot{font-size:5rem}.mascot-small{font-size:2rem}.topbar{display:flex;justify-content:space-between;font-size:1.2rem;font-weight:700}.dots{letter-spacing:2px;margin:8px 0 16px;font-size:1.1rem}.quest{background:#fff;border-radius:16px;padding:16px;box-shadow:0 1px 3px #0002}.big-emoji{font-size:6rem;line-height:1.1}.word{font-size:3rem;font-weight:800}.center{justify-content:center;margin-top:16px}.big{font-size:1.4rem;min-height:64px;min-width:150px;padding:12px 24px;border-radius:14px}.status{min-height:2rem;margin-top:12px;font-size:1.2rem}.feedback{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;font-size:1.3rem;font-weight:700;margin-top:16px;padding:12px;border-radius:12px;background:#fff}.feedback.pass{border:3px solid #1b6e3a}.feedback.fail,.feedback.uncertain,.feedback.error{border:3px dashed #8a5a00}.reward{background:#ffe9a8;border-radius:999px;padding:2px 12px}.scene{--s: 1;--q: calc(1cqw * var(--s));position:relative;aspect-ratio:608 / 200;container-type:inline-size;border-radius:16px;overflow:hidden;margin:8px 0 12px;background:linear-gradient(#bfe3ff 0,#bfe3ff 62%,#7bc47f 62%);text-align:left}.scene .castle{position:absolute;left:1%;bottom:calc(8.5 * var(--q));font-size:calc(14.5 * var(--q));line-height:1}.scene .knight{position:absolute;left:var(--kto);bottom:calc(7.2 * var(--q));font-size:calc(8.9 * var(--q));line-height:1;--flip: -1}.scene .dragon{position:absolute;left:var(--to);bottom:calc(10.2 * var(--q));font-size:calc(10 * var(--q));line-height:1;--flip: 1}.scene .sprite,.scene .face{display:inline-block}.scene .face{transform:scaleX(var(--flip))}.scene .dragon .sprite{animation:bob 2.2s ease-in-out infinite}.scene .slash{position:absolute;left:70%;top:0;font-size:calc(6.3 * var(--q));transform-origin:0 100%;opacity:0}.scene .burst{position:absolute;left:0;top:calc(-1 * var(--q));font-size:calc(7.9 * var(--q));opacity:0}.scene.hit .knight .sprite{animation:lunge .5s ease-in-out both}.scene.hit .slash{animation:swing .5s ease-in-out both}.scene.hit .knight{animation:follow .7s ease-in-out .9s both}.scene.hit .dragon{animation:retreat .9s ease-out .3s both}.scene.hit .dragon .sprite{animation:hurt .6s ease-out .3s both}.scene.hit .burst{animation:pop .6s ease-out .3s both}.scene.miss .dragon .sprite{animation:growl .7s ease-in-out both}.scene.arrive .dragon{animation:arrive 1.4s ease-out both}.scene.leave .dragon{animation:fly-away 1.8s ease-in .2s both}@keyframes bob{50%{transform:translateY(calc(-1.3 * var(--q)))}}@keyframes lunge{50%{transform:translate(calc(5.6 * var(--q))) rotate(8deg)}}@keyframes swing{0%{opacity:1;transform:rotate(-70deg)}60%{opacity:1}to{opacity:0;transform:rotate(70deg)}}@keyframes follow{0%{left:var(--kfrom)}to{left:var(--kto)}}@keyframes retreat{0%{left:var(--from)}to{left:var(--to)}}@keyframes hurt{0%,to{transform:translate(0);filter:none}25%{transform:translate(calc(1.6 * var(--q)));filter:brightness(1.8)}60%{transform:translate(calc(-1 * var(--q)))}}@keyframes pop{0%{opacity:1;transform:scale(.4)}to{opacity:0;transform:scale(1.6)}}@keyframes growl{0%,to{transform:scale(1)}40%{transform:scale(1.15) rotate(-4deg)}}@keyframes arrive{0%{left:115%;bottom:calc(24.7 * var(--q));opacity:0}to{left:var(--to);bottom:calc(10.2 * var(--q));opacity:1}}@keyframes fly-away{0%{left:var(--to);bottom:calc(10.2 * var(--q));opacity:1}to{left:115%;bottom:calc(28 * var(--q));opacity:0}}@media(max-width:560px){.scene{--s: 1.6;aspect-ratio:1.9}}@media(prefers-reduced-motion:reduce){.scene *,.scene{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important}}.review{margin-top:12px;padding:12px;border-radius:12px;background:#fff3cd;border:2px solid #8a5a00;font-size:1.1rem}.new-sticker{background:#fff;border-radius:999px;padding:6px 14px;font-size:1.2rem;font-weight:700;box-shadow:0 1px 3px #0002}.sticker-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;margin:12px 0}.sticker{background:#fff;border-radius:12px;padding:12px 8px;box-shadow:0 1px 3px #0002;text-align:center}.sticker .emoji{font-size:3rem;line-height:1.2}.sticker.locked{background:#eceae3;color:#555}.sticker.locked .emoji{filter:grayscale(1);opacity:.4}.mt{margin-top:8px}.scroll-x{overflow-x:auto}.quest.pair{display:flex;gap:12px;justify-content:center;background:none;box-shadow:none;padding:0}.choice{flex:1;background:#fff;border-radius:16px;padding:12px 8px;box-shadow:0 1px 3px #0002;border:3px solid transparent}.choice.wanted{border-color:#2d6a4f}.choice.got{background:#e6f4ea}.quest.pair .big-emoji{font-size:4rem}.quest.pair .word{font-size:2rem}.tag{font-size:.9rem;font-weight:700;margin-top:4px}.choice.solo{box-shadow:none}html{-webkit-text-size-adjust:100%}main{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right));padding-bottom:max(16px,env(safe-area-inset-bottom))}.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}:focus-visible{outline:3px solid #1a56db;outline-offset:3px}button,a,select,input,label{touch-action:manipulation}.game button,.game a{user-select:none;-webkit-user-select:none}select{min-height:44px;max-width:100%}a{color:#0b4f9c}a.linkbtn,button,select{min-height:44px}a.linkbtn{display:inline-flex;align-items:center;justify-content:center;gap:6px;box-sizing:border-box;padding:10px 16px;border-radius:8px;border:1px solid #767676;background:#fff;color:#1c1c28;text-decoration:none;font:inherit}a.linkbtn.big{font-size:1.2rem;min-height:56px;border-radius:14px}.row.links{margin-top:12px}.row.links a.linkbtn{margin-top:0}fieldset{border:0;padding:0;margin:8px 0;min-width:0}legend{font-weight:600;padding:0;margin-bottom:4px}label.check{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px 0 12px;margin:0 8px 8px 0;font-weight:400;background:#fff;border:1px solid #767676;border-radius:8px}label.check input{width:24px;height:24px;margin:0}.level-name{font-size:1.1rem;margin:0;text-align:right}.card select{width:100%}@media(max-width:380px){.game h1{font-size:1.6rem}.word{font-size:2.4rem}}
