/* ===== หน้าเกมควิซ ===== */
.qbody{padding-top:env(safe-area-inset-top);min-height:100vh;min-height:100dvh;overflow-x:hidden;background:linear-gradient(135deg,#ffd6e8,#e6d4ff,#d4ecff,#ffe1f0);background-size:400% 400%;animation:shift 18s ease infinite}
@keyframes shift{50%{background-position:100% 50%}}
#sky{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.cloud{position:absolute;width:160px;height:50px;background:#fff;border-radius:50px;opacity:.8;animation:drift linear infinite}
.cloud::before,.cloud::after{content:"";position:absolute;background:#fff;border-radius:50%}.cloud::before{width:70px;height:70px;top:-35px;left:25px}.cloud::after{width:50px;height:50px;top:-22px;left:80px}
.c1{top:12%;animation-duration:45s;animation-delay:-10s}.c2{top:40%;transform:scale(.7);animation-duration:60s;animation-delay:-30s}.c3{top:75%;animation-duration:52s;animation-delay:-5s}
@keyframes drift{from{left:-200px}to{left:110vw}}
.tw{position:absolute;color:#fff;animation:twinkle ease-in-out infinite;text-shadow:0 0 8px #fff}@keyframes twinkle{0%,100%{opacity:.15;transform:scale(.6)}50%{opacity:1;transform:scale(1.2) rotate(20deg)}}
.home{position:fixed;top:12px;left:12px;z-index:5;font-size:1.6rem;background:#fff;border-radius:50%;width:48px;height:48px;display:flex;align-items:center;justify-content:center;text-decoration:none;box-shadow:0 4px 0 #cdb4db}
#stage{position:relative;z-index:1;max-width:560px;margin:auto;padding:20px 14px 90px;text-align:center}
#mascotWrap{height:150px;margin-top:10px}#mascot{overflow:visible}
#mascot .happyEyes,#mascot .sadEyes,#mascot .sadMouth{display:none}
#mascot.happy .eyes,#mascot.sad .eyes{display:none}#mascot.happy .happyEyes,#mascot.dance .happyEyes{display:inline}#mascot.dance .eyes{display:none}
#mascot.sad .sadEyes,#mascot.sad .sadMouth{display:inline}#mascot.sad .mouth{display:none}
#mascot.idle .body{animation:bob 2.4s ease-in-out infinite;transform-origin:center bottom}
#mascot.happy .body{animation:jump .6s cubic-bezier(.3,1.6,.5,1)}@keyframes jump{40%{transform:translateY(-40px) scale(1.05,.95)}}
#mascot.sad .body{animation:droop 1s ease}@keyframes droop{50%{transform:translateY(8px) rotate(-6deg)}}
#mascot.dance .body{animation:dance .8s ease-in-out infinite;transform-origin:center bottom}@keyframes dance{25%{transform:rotate(-12deg) translateY(-10px)}75%{transform:rotate(12deg) translateY(-10px)}}
#mascot .eye{animation:blink 4s infinite;transform-box:fill-box;transform-origin:center}@keyframes blink{0%,94%,100%{transform:scaleY(1)}97%{transform:scaleY(.1)}}
.panel{background:#fffe;border-radius:30px;padding:22px 18px;box-shadow:0 10px 30px #b98bd066;border:4px solid #fff;animation:popIn .5s cubic-bezier(.3,1.6,.5,1)}
.panel.out{animation:slideOut .3s ease forwards}@keyframes popIn{from{opacity:0;transform:translateX(60px) scale(.85)}}@keyframes slideOut{to{opacity:0;transform:translateX(-60px) scale(.9)}}
.bigTitle{font-size:2.4rem;margin:.2em 0;color:#d4559a;text-shadow:3px 3px 0 #fff,5px 5px 0 #cdb4db}.bigTitle span{display:inline-block;animation:bounceL 1.2s ease-in-out infinite}
@keyframes bounceL{0%,100%{transform:translateY(0)}30%{transform:translateY(-14px) rotate(-5deg)}}
.startBtn{font-size:1.5rem;padding:16px 40px;margin-top:14px}
.top{display:flex;justify-content:space-between;align-items:center;font-weight:700}.scoreBox{background:#ffafcc;color:#fff;border-radius:999px;padding:4px 14px}.scoreBox.bump{animation:pop .5s}
.bar{position:relative;height:16px;background:#fff;border-radius:999px;margin:16px 4px 22px;box-shadow:inset 0 2px 4px #cdb4db}
.fill{height:100%;border-radius:999px;background:linear-gradient(90deg,#ffafcc,#cdb4db);transition:width .6s ease}
.runner{position:absolute;top:-12px;font-size:1.6rem;transition:left .6s cubic-bezier(.3,1.5,.5,1);transform:translateX(-50%);animation:bob 1s infinite}
.qtext{font-size:1.35rem;margin:6px 0 16px}
.opt{display:block;width:100%;margin:10px 0;padding:14px;font:inherit;font-size:1.05rem;color:#7a3e6b;background:#fff;border:3px solid #e6d4ff;border-radius:20px;cursor:pointer;transition:transform .2s;box-shadow:0 4px 0 #e6d4ff}
.opt:hover{animation:wiggle .4s;background:#fff0f7}.opt.correct{background:#c9f7d6;border-color:#55c983;box-shadow:0 4px 0 #55c983;animation:pop .5s}
.opt.wrong{background:#ffd9dc;border-color:#ff8f9a;animation:shakeX .45s}@keyframes shakeX{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
.opt.reveal{background:#c9f7d6;border-color:#55c983;animation:glow 1s}@keyframes glow{50%{box-shadow:0 0 18px #55c983}}
.spark{position:fixed;pointer-events:none;z-index:9;font-size:1.3rem;animation:burst .9s ease-out forwards}
.plus{position:fixed;z-index:9;font-weight:700;color:#2fa865;font-size:1.6rem;animation:rise 1s ease-out forwards;pointer-events:none}@keyframes rise{to{transform:translateY(-60px);opacity:0}}
.stars{font-size:3rem;margin:8px 0}.star{display:inline-block;opacity:0;animation:starIn .6s cubic-bezier(.3,1.8,.5,1) forwards}.star.dim{filter:grayscale(1);opacity:.3}
@keyframes starIn{from{opacity:0;transform:scale(0) rotate(-180deg)}to{opacity:1;transform:scale(1)}}
.feedback{min-height:1.6em;font-weight:700;margin-top:6px}
@media (prefers-reduced-motion:reduce){.qbody{animation:none}.cloud,.tw{display:none}}