*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#e7d8c3;color:#372a24;font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif}body{padding:var(--safe-top,env(safe-area-inset-top,0px)) 0 var(--safe-bottom,env(safe-area-inset-bottom,0px))}main{max-width:480px;min-height:100vh;margin:auto;padding:28px 24px 36px;background:linear-gradient(150deg,#faf3e7,#efe1cd)}.ornament{color:#a2473b;letter-spacing:.4em;font-size:13px;text-align:center}.hero{text-align:center;padding:36px 0 18px}.seal{display:inline-block;padding:8px;border:1px solid #963f35;border-radius:4px;color:#963f35;letter-spacing:.25em}h1{font-family:serif;font-size:38px;letter-spacing:.15em;margin:20px 0 8px}h2{font-family:serif;font-size:25px;line-height:1.5}p{line-height:1.7;color:#6e5a4b}.panel{background:#fffaf1;border:1px solid #cdbba0;border-radius:12px;padding:22px;margin:20px 0;box-shadow:0 5px 16px #704b2212}.meta{font-size:14px;color:#8a6d59;display:flex;justify-content:space-between}.choices{display:grid;grid-template-columns:1fr;grid-gap:12px}button{font:inherit;min-height:52px;padding:12px 18px;color:#492e27;background:#fffaf1;border:1px solid #b9a48b;border-radius:7px;text-align:left;cursor:pointer;touch-action:manipulation}button:active{background:#e9d5bd;transform:scale(.985)}button:focus{outline:2px solid #9d5144;outline-offset:2px}.primary{width:100%;text-align:center;background:#963f35;color:white;border-color:#963f35}.primary:active{background:#6e2c25}.foot{text-align:center;font-size:12px;color:#917b69;margin-top:35px}.fail{color:#963f35}.muted{font-size:14px}progress{width:100%;height:6px;accent-color:#963f35}
.score{font-family:serif;font-size:30px;color:#963f35;margin:14px 0}.panel>button+button{width:100%;text-align:center;margin-top:12px}
.share-overlay{position:fixed;z-index:10;top:0;right:0;bottom:0;left:0;background:rgba(38,25,21,.76);display:flex;align-items:center;justify-content:center;padding:16px;overflow:auto}.share-box{width:100%;max-width:420px;max-height:calc(100vh - 32px);overflow:auto;background:#fff9ee;border:1px solid #bc9c76;border-radius:12px;padding:18px}.share-box h2{font-size:22px;margin:0}.share-box p{margin:6px 0 12px}.poster{display:block;width:100%;height:auto;border:1px solid #c5aa85}.share-actions{display:flex;flex-wrap:wrap;margin-top:10px}.share-actions>*{margin:5px 8px 0 0}.download{display:inline-block;padding:14px;border:1px solid #b9a48b;border-radius:7px;color:#492e27;text-decoration:none}
.choices button:disabled{opacity:1;color:#492e27}.choices button.selected-correct:disabled{background:#dceedd;border-color:#4f8b56;color:#205b29}.choices button.selected-wrong:disabled{background:#f9dedb;border-color:#b64b43;color:#8a2924}.next{margin-top:16px}
.pixel-scene{height:180px;max-height:29vh;min-height:130px;margin:10px 0 0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(#efe1cf,#f8efe1);border:1px solid #d8c5aa;border-radius:9px;overflow:hidden}.pixel-avatar{display:block;height:calc(100% - 27px);max-width:150px;image-rendering:pixelated}.pixel-label{font-size:12px;color:#765e50;padding-bottom:6px}.cheer .pixel-avatar{animation:pixel-cheer .35s steps(2,end) 3}.sad .pixel-avatar{animation:pixel-sad .45s steps(2,end) 2}@keyframes pixel-cheer{50%{transform:translateY(-8px)}}@keyframes pixel-sad{50%{transform:translateY(4px) rotate(-3deg)}}@media(prefers-reduced-motion:reduce){.cheer .pixel-avatar,.sad .pixel-avatar{animation:none}}
.progress-segments{display:flex;width:100%;height:7px;margin:5px 0}.progress-segments span{flex:1;min-width:0;margin-right:2px;border-radius:2px}.progress-segments span:last-child{margin-right:0}.segment-pending{background:#ddd3c6}.segment-correct{background:#54895b}.segment-wrong{background:#bd5149}.pixel-canvas{position:relative;height:calc(100% - 27px);width:150px}.pixel-canvas .pixel-avatar{position:absolute;left:0;right:0;top:0;margin:auto;height:100%}
.home-avatar{display:block;width:120px;height:120px;margin:12px auto 0;image-rendering:pixelated}
