/* Grammar Quest: Pet Paradise — UI. © Aubeespace */
:root{--navy:#22307a;--navy2:#1d2a5b;--gold:#ffd166;--gold2:#c9a227;--pink:#ff5c8a;--green:#2fae66;--red:#e63946;--ink:#1f2235;--mut:#6b6f85;--cream:#fffaf0;--card:#fff;--line:#ece4d2}
body.gq-body{margin:0;background:radial-gradient(circle at 50% -10%,#3a5ad8 0,#22307a 38%,#151b46 100%) fixed;min-height:100vh}
.gq-root{font-family:Sarabun,'Noto Sans Thai',system-ui,sans-serif;color:var(--ink);max-width:1080px;margin:0 auto;padding:0 12px 40px;-webkit-tap-highlight-color:transparent;box-sizing:border-box}
.gq-root *{box-sizing:border-box}
.gq-root h1,.gq-root h2,.gq-root h3{font-family:Kanit,sans-serif;margin:.3em 0;line-height:1.25}
.gq-root button{font-family:inherit;cursor:pointer}
.gq-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0;border-radius:14px;padding:11px 18px;font:600 15px Kanit,sans-serif;background:#fff;color:var(--navy);box-shadow:0 3px 0 rgba(0,0,0,.15);text-decoration:none;transition:transform .12s}
.gq-btn:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(0,0,0,.15)}
.gq-btn.gold{background:linear-gradient(180deg,#ffe08a,#ffc53d);color:#3b2a00}.gq-btn.red{background:var(--red);color:#fff}.gq-btn.line{background:#06c755;color:#fff}
.gq-btn.ghost{background:rgba(255,255,255,.14);color:#fff;box-shadow:none}.gq-btn.big{padding:15px 26px;font-size:18px;width:100%}.gq-btn.sm{padding:6px 12px;font-size:13px;border-radius:10px}
.gq-btn:disabled{opacity:.6}
.gq-row{display:flex;gap:10px;margin-top:12px}.gq-row.center{justify-content:center}.gq-row.wrap{flex-wrap:wrap;justify-content:center}
.gq-loading{color:#fff;text-align:center;padding:80px 0;font:600 16px Kanit}.gq-spin{width:46px;height:46px;border-radius:50%;border:5px solid rgba(255,255,255,.25);border-top-color:var(--gold);margin:0 auto 12px;animation:gqspin 1s linear infinite}
@keyframes gqspin{to{transform:rotate(360deg)}}
/* gate / login */
.gq-center{min-height:100vh;display:flex;align-items:center;justify-content:center}
.gq-gate{background:#fff;border-radius:26px;padding:30px 26px;max-width:380px;width:100%;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.35);border:4px solid var(--gold)}
.gq-gate-logo{width:84px}.gq-gate-title{font:700 24px Kanit;color:var(--navy);margin:6px 0}.gq-gate-sub{color:var(--mut)}.gq-gate-ic{font-size:56px}
.gq-login input{display:block;width:100%;padding:13px 14px;border:2px solid #e3dccb;border-radius:14px;font-size:16px;margin:8px 0}
.gq-err{background:#ffe5e9;color:#b0243a;border-radius:10px;padding:8px;margin:8px 0}.gq-exp{background:#fff4d6;border-radius:10px;padding:6px;font-weight:600}
.gq-line-link,.gq-logout{display:block;margin-top:14px;color:var(--mut);font-size:14px}
/* hud */
.gq-hud{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px;padding:10px 4px;background:linear-gradient(180deg,#151b46 70%,rgba(21,27,70,0));color:#fff}
.gq-hud-logo{width:42px;height:42px;cursor:pointer}.gq-hud-me{flex:1;min-width:0}.gq-hud-me b{font:700 16px Kanit;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.gq-hud-me span{font-size:12px;opacity:.8}
.gq-hud-pills{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}.gq-pill{background:rgba(255,255,255,.14);border-radius:20px;padding:5px 10px;font:600 13px Kanit;white-space:nowrap;color:#fff;border:0}.gq-pill.money{background:#ffd166;color:#3b2a00}
.gq-back{display:flex;align-items:center;gap:12px;color:#fff;margin:6px 0 10px}.gq-back b{font:700 18px Kanit;display:block}.gq-back small{opacity:.8}
.gq-page{background:var(--cream);border-radius:24px;padding:18px;min-height:60vh}.gq-page.center{display:flex;justify-content:center;align-items:flex-start;background:transparent;padding:10px 0}
.gq-card{background:#fff;border-radius:24px;padding:22px;box-shadow:0 10px 30px rgba(0,0,0,.18);width:100%}.gq-card.hero{max-width:560px;text-align:center}
.gq-big{font:700 30px Kanit;color:var(--navy);margin:6px 0}.gq-empty{color:var(--mut);text-align:center;padding:20px}
/* pet */
.gq-pet{position:relative;width:200px;height:190px;transform:scale(var(--grow,1));transform-origin:50% 100%;cursor:pointer}
.gq-pet svg{width:100%;height:100%;overflow:visible}
.gq-pet .p-body,.gq-pet .p-head,.gq-pet .p-tail,.gq-pet .p-wing,.gq-pet .p-ear,.gq-pet .p-eyes,.gq-pet .w-back{transform-box:fill-box}
.gq-pet svg{animation:gqbob 2.6s ease-in-out infinite}
.gq-pet .p-eyes{transform-origin:center;animation:gqblink 4.2s infinite}
.gq-pet .p-tail{transform-origin:0% 100%;animation:gqwag 1.1s ease-in-out infinite alternate}
.gq-pet .p-ear{transform-origin:center bottom;animation:gqear 3.4s ease-in-out infinite}
.gq-pet .p-wing,.gq-pet .w-back{transform-origin:center;animation:gqflap 1.4s ease-in-out infinite}
.gq-pet .p-head{transform-origin:center bottom;animation:gqtilt 5s ease-in-out infinite}
@keyframes gqbob{50%{transform:translateY(-6px)}}@keyframes gqblink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
@keyframes gqwag{from{transform:rotate(-8deg)}to{transform:rotate(10deg)}}@keyframes gqear{0%,85%,100%{transform:rotate(0)}90%{transform:rotate(-7deg)}95%{transform:rotate(5deg)}}
@keyframes gqflap{50%{transform:scaleY(.86) translateY(3px)}}@keyframes gqtilt{0%,70%,100%{transform:rotate(0)}80%{transform:rotate(-5deg)}90%{transform:rotate(4deg)}}
.gq-pet.mood-sad svg{animation-duration:4.5s}.gq-pet.mood-sad .p-head{transform:rotate(-8deg) translateY(4px);animation:none}
.gq-pet.mood-thin .p-body{transform:scaleX(.8);transform-origin:center}.gq-pet.mood-thin svg{filter:saturate(.6)}
.gq-pet.mood-sick svg{filter:hue-rotate(70deg) saturate(.55) brightness(.95);animation:gqshiver .25s linear infinite}
@keyframes gqshiver{50%{transform:translateX(1.5px)}}
.gq-pet.react-jump svg{animation:gqjump .7s ease}.gq-pet.react-spin svg{animation:gqspinp .9s ease}.gq-pet.react-wiggle svg{animation:gqwig .6s ease}
.gq-pet.react-dance svg{animation:gqdance 1s ease-in-out 2}.gq-pet.react-eat svg{animation:gqeat .3s ease-in-out 5}.gq-pet.bounce svg{animation:gqjump 1s ease infinite}
@keyframes gqjump{30%{transform:translateY(-38px) scaleY(1.05)}60%{transform:translateY(0) scaleY(.9)}}@keyframes gqspinp{to{transform:rotate(360deg)}}
@keyframes gqwig{25%{transform:rotate(-10deg)}75%{transform:rotate(10deg)}}@keyframes gqdance{25%{transform:translateX(-12px) rotate(-8deg)}50%{transform:translateY(-14px)}75%{transform:translateX(12px) rotate(8deg)}}
@keyframes gqeat{50%{transform:scale(1.06,.94)}}
.gq-aura{position:absolute;inset:10% 10% 0;border-radius:50%;background:radial-gradient(circle,rgba(255,209,102,.55),rgba(255,209,102,0) 70%);z-index:-1;animation:gqglow 2s ease-in-out infinite}
@keyframes gqglow{50%{opacity:.4;transform:scale(1.1)}}
.gq-flame{animation:gqfl .2s infinite alternate}@keyframes gqfl{to{opacity:.6}}
.gq-pet.mini{width:110px;height:104px}.gq-pet.big{width:260px;height:250px}
/* avatar */
.avatar{width:100%;height:100%}.avatar .av-arm-r{transform-box:fill-box;transform-origin:10% 10%}.wave .av-arm-r,.avatar.wave .av-arm-r{animation:gqwave 1s ease-in-out 3}
@keyframes gqwave{50%{transform:rotate(-110deg)}}.avatar .p-eyes{transform-box:fill-box;transform-origin:center;animation:gqblink 5s infinite}
/* home scene */
.gq-scene{position:relative;border-radius:24px;overflow:hidden;aspect-ratio:400/260;background:#fff3dc;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.gq-scene .gq-scene-svg{position:absolute;inset:0;width:100%;height:100%}
.gq-scene .gq-me{position:absolute;left:10%;bottom:6%;width:22%;cursor:pointer}
.gq-scene .gq-pet{position:absolute;left:47%;bottom:5%;width:34%;height:auto;aspect-ratio:200/190}
.gq-bubble{position:absolute;left:4%;right:4%;top:4%;background:#fff;border-radius:16px;padding:9px 13px;font-size:15px;box-shadow:0 4px 14px rgba(0,0,0,.15);border:2px solid var(--gold);z-index:3}
.gq-bubble:empty{display:none}.gq-bubble b{color:var(--pink);font-family:Kanit}.gq-bubble.pop{animation:gqpop .35s ease}
@keyframes gqpop{from{transform:scale(.7);opacity:0}}
.gq-card .gq-bubble,.gq-qpet .gq-bubble{position:relative;left:auto;right:auto;top:auto;margin:8px auto}
.gq-tapme{position:absolute;right:6%;bottom:46%;background:var(--pink);color:#fff;font:600 13px Kanit;border-radius:20px;padding:5px 10px;animation:gqbob 1.4s infinite}
.gq-heart{position:absolute;bottom:30%;font-size:26px;animation:gqfloat 1.6s ease-out forwards;pointer-events:none;z-index:4}
@keyframes gqfloat{to{transform:translateY(-140px) scale(1.3);opacity:0}}
.gq-cloud{animation:gqcloud 18s linear infinite alternate}@keyframes gqcloud{to{transform:translateX(40px)}}
.gq-wave{animation:gqwv 3s linear infinite}@keyframes gqwv{to{transform:translateX(40px)}}
.gq-snow{animation:gqsn 6s linear infinite}@keyframes gqsn{to{transform:translateY(40px)}}.gq-twinkle{animation:gqblinkst 1.6s infinite alternate}@keyframes gqblinkst{to{opacity:.2}}
.gq-scene.flash::after{content:"";position:absolute;inset:0;background:#fff;animation:gqflash .5s}@keyframes gqflash{to{opacity:0}}
.gq-postcard{position:absolute;right:3%;bottom:4%;background:#fff;border-radius:10px;padding:6px 10px;font:600 13px Kanit;transform:rotate(-4deg);box-shadow:0 4px 10px rgba(0,0,0,.2)}
.gq-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0}
.gq-stat{background:#fff;border-radius:14px;padding:8px 10px;display:grid;grid-template-columns:auto 1fr auto;gap:6px;align-items:center;font:600 13px Kanit}
.gq-stat div{height:10px;border-radius:6px;background:#eee;overflow:hidden}.gq-stat i{display:block;height:100%;border-radius:6px;transition:width .6s}
.gq-stat.food i{background:#ff9f1c}.gq-stat.happy i{background:var(--pink)}.gq-stat.health i{background:var(--green)}
.gq-next{display:flex;align-items:center;gap:12px;background:linear-gradient(110deg,#fff,#fff6dc);border-radius:18px;padding:12px 16px;border:2px solid var(--gold)}
.gq-next div{flex:1}.gq-next small{color:var(--mut);display:block}.gq-next b{font:700 17px Kanit;color:var(--navy);display:block}.gq-next span{font-size:13px;color:var(--mut)}
.gq-dock{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:12px}
.gq-tile{background:#fff;border:0;border-radius:18px;padding:12px 6px;text-align:center;box-shadow:0 4px 0 rgba(0,0,0,.12);color:var(--ink);text-decoration:none;display:flex;flex-direction:column;align-items:center}
.gq-tile span{font-size:30px}.gq-tile b{font:600 14px Kanit;line-height:1.2;margin-top:3px}.gq-tile small{font-size:11px;color:var(--mut)}
.gq-tile.big{background:linear-gradient(160deg,#ffe08a,#ffc53d)}.gq-tile.locked{opacity:.55}.gq-tile.glow{box-shadow:0 0 0 3px var(--gold),0 4px 0 rgba(0,0,0,.12)}
/* setup */
.gq-setup,.gq-gift{background:var(--cream);border-radius:24px;padding:20px;margin-top:14px}.gq-setup h1{text-align:center;color:var(--navy)}.gq-setup h1 small{display:block;font-size:15px;color:var(--mut)}
.gq-steps{display:flex;align-items:center;justify-content:center;gap:6px;margin-bottom:6px}.gq-steps b{width:30px;height:30px;border-radius:50%;background:#e4dccb;color:#fff;display:grid;place-items:center;font:700 14px Kanit}.gq-steps b.on{background:var(--navy)}.gq-steps b.done{background:var(--green)}.gq-steps i{width:30px;height:4px;background:#e4dccb;border-radius:2px}.gq-steps i.on{background:var(--green)}
.gq-setup-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:20px;align-items:start}.gq-stage{background:linear-gradient(#e6f2ff,#fff);border-radius:20px;padding:10px;max-width:300px;margin:0 auto}
.gq-form label{display:block;font:600 14px Kanit;margin:12px 0 6px;color:var(--navy)}.gq-form input{width:100%;padding:12px;border:2px solid #e3dccb;border-radius:12px;font-size:16px}.gq-form.narrow{max-width:420px;margin:16px auto 0}
.gq-sws{display:flex;gap:8px;flex-wrap:wrap}.gq-sw{width:36px;height:36px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 2px #e3dccb}.gq-sw.on{box-shadow:0 0 0 3px var(--navy)}.gq-sw.none{background:#fff;color:#999}
.gq-seg{display:flex;gap:8px}.gq-seg button{flex:1;border:2px solid #e3dccb;background:#fff;border-radius:12px;padding:9px;font:600 14px Kanit}.gq-seg button.on{border-color:var(--navy);background:#eef2ff}
.gq-kind{color:var(--navy);margin-top:14px}.gq-petgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.gq-petcard{background:#fff;border:3px solid transparent;border-radius:18px;padding:8px;display:flex;flex-direction:column;align-items:center;box-shadow:0 3px 0 rgba(0,0,0,.08)}
.gq-petcard svg{width:110px;height:100px}.gq-petcard b{font:600 14px Kanit}.gq-petcard small{color:var(--mut)}.gq-petcard.on{border-color:var(--gold);background:#fffbe9;transform:translateY(-3px)}
.gq-giftbox{width:200px;height:200px;margin:30px auto;position:relative;cursor:pointer;text-align:center}.gq-giftbox .box{position:absolute;bottom:20px;left:30px;width:140px;height:110px;background:var(--pink);border-radius:10px;background-image:linear-gradient(90deg,transparent 60px,var(--gold) 60px,var(--gold) 80px,transparent 80px)}
.gq-giftbox .lid{position:absolute;top:50px;left:20px;width:160px;height:36px;background:#ff7aa2;border-radius:8px;z-index:2;background-image:linear-gradient(90deg,transparent 70px,var(--gold) 70px,var(--gold) 90px,transparent 90px);transition:transform .6s}
.gq-giftbox span{position:absolute;bottom:-14px;left:0;right:0;font:600 15px Kanit;color:var(--navy)}.gq-giftbox:not(.opened){animation:gqwig 1.2s infinite}.gq-giftbox.opened .lid{transform:translateY(-120px) rotate(-30deg);opacity:0}
.gq-giftres{text-align:center}.gq-giftres.hide{display:none}.gq-money-big{font:700 48px Kanit;color:#e0a400;animation:gqpop .6s}
.gq-duo{display:flex;justify-content:center;align-items:flex-end;gap:10px;margin:10px 0}.gq-duo .avatar{width:120px;height:160px}.gq-duo .gq-pet{width:170px;height:160px}
.gq-next-hint{background:#eef2ff;border-radius:12px;padding:10px}
.gq-lv{display:flex;justify-content:center;gap:8px;padding:0;list-style:none;flex-wrap:wrap}.gq-lv li{background:#f3efe6;border-radius:12px;padding:6px 10px;font-size:13px}.gq-lv b{display:block;font:700 16px Kanit;color:var(--navy)}
.gq-cefr{width:120px;height:120px;border-radius:50%;margin:0 auto;display:grid;place-items:center;font:700 44px Kanit;color:#fff;background:conic-gradient(var(--gold),var(--pink),var(--navy),var(--gold));box-shadow:0 0 0 8px #fff,0 0 0 12px var(--gold)}
/* map */
.gq-map{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;background:linear-gradient(#7bd389,#3bb273);border-radius:24px;padding:18px;position:relative}
.gq-node{border:0;background:#fff;border-radius:20px;padding:14px 8px 10px;display:flex;flex-direction:column;align-items:center;box-shadow:0 5px 0 rgba(0,0,0,.18);min-height:136px}
.gq-node .num{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font:700 20px Kanit;color:#fff;background:var(--navy);margin-bottom:6px}
.gq-node b{font:700 14px Kanit;text-align:center;line-height:1.2}.gq-node small{font-size:12px;color:var(--mut);text-align:center}.gq-node i{font-style:normal;color:#e0a400;font:600 13px Kanit;margin-top:3px}
.gq-node.locked{opacity:.65;background:#eef0f4}.gq-node.locked .num{background:#9aa5b1}.gq-node.open:not(.done) i{color:var(--pink);animation:gqbob 1.2s infinite}
.gq-node.final{grid-column:1/-1;background:linear-gradient(110deg,#ffe08a,#ffc53d);min-height:auto;flex-direction:row;gap:12px;justify-content:center}
.gq-node.final .num{background:var(--navy2);margin:0}
.gq-node.n1 .num,.gq-realm.c1{background:#ff5c8a}.gq-node.n2 .num,.gq-realm.c2{background:#2fae66}.gq-node.n3 .num,.gq-realm.c3{background:#7c5cff}.gq-node.n4 .num,.gq-realm.c4{background:#2a7fff}.gq-node.n5 .num,.gq-realm.c5{background:#f0a020}.gq-node.n6 .num,.gq-realm.c6{background:#14aec2}.gq-node.n7 .num,.gq-realm.c7{background:#ff7a2f}.gq-node.n8 .num,.gq-realm.c8{background:#e63946}.gq-node.n9 .num,.gq-realm.c9{background:#b06a2c}.gq-node.n10 .num,.gq-realm.c10{background:#5b4bff}.gq-node.n11 .num,.gq-realm.c11{background:#3d9bd6}.gq-node.n12 .num,.gq-realm.c12{background:#2f9e44}.gq-node.n13 .num,.gq-realm.c13{background:#3d348b}.gq-node.n14 .num,.gq-realm.c14{background:#c9a227}
.gq-node.locked .num{background:#9aa5b1!important}
.gq-lockbig{font-size:60px;text-align:center}
/* chapter */
.gq-realm{border-radius:22px;color:#fff;padding:16px 18px;display:flex;align-items:center;justify-content:space-between;gap:10px;background-image:radial-gradient(circle at 85% 50%,rgba(255,255,255,.35),transparent 60%)}
.gq-realm>div{flex:1;min-width:0}.gq-realm small{font:600 12px Kanit;letter-spacing:1.5px;opacity:.9}.gq-realm h1{color:#fff;font-size:24px}.gq-realm p{margin:0;opacity:.95}
.gq-tabs{display:flex;gap:6px;margin:14px 0;overflow-x:auto}.gq-tabs button{flex:1;border:0;border-radius:14px;padding:10px;background:#efe8d8;font:600 14px Kanit;white-space:nowrap}.gq-tabs button.on{background:var(--navy);color:#fff}
.gq-mission{background:#fff;border:2px dashed var(--gold);border-radius:16px;padding:12px 16px}.gq-mission b{font-family:Kanit;color:var(--navy)}.gq-mission ul{margin:6px 0 0;padding-left:20px}
.gq-sec{margin-top:18px}.gq-sec h2{font-size:19px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}.gq-sec h2 span{font:700 11px Kanit;background:var(--navy);color:#fff;border-radius:8px;padding:3px 8px;letter-spacing:1px}
.gq-sec p{line-height:1.65;margin:8px 0}.gq-sec p.li{border-left:4px solid var(--gold);padding-left:10px}
.gq-ex,.gq-good,.gq-bad{display:flex;gap:10px;align-items:flex-start;border-radius:14px;padding:10px 12px;margin:8px 0}
.gq-ex{background:#fff;border:1px solid var(--line);border-left:5px solid #7c5cff}.gq-ex .en,.gq-good .en{font-weight:600;color:#18203f}.gq-ex .th{font-size:13.5px;color:var(--mut)}.gq-ex .id{margin-left:auto;font:600 11px Kanit;color:#7c5cff}
.gq-good{background:#e9faf0}.gq-bad{background:#fff0f2;color:#8e2235}.gq-bad small{color:#b0485a}.gq-good .en{flex:1}
.gq-ic{border:0;background:#eef2ff;border-radius:50%;width:38px;height:38px;flex:none;font-size:17px;display:grid;place-items:center}.gq-ic.on{background:var(--gold);animation:gqpop .3s}.gq-ic.mic{background:#ffe5ec}.gq-ic.mic.rec{background:var(--red);animation:gqbob .6s infinite}
.gq-tipc,.gq-memc{border-radius:16px;padding:12px 14px;margin:10px 0}.gq-tipc{background:#fff7d6;border:2px dashed #f0b429}.gq-memc{background:#f1edff;border:2px dashed #8a6cff}
.gq-tipc span,.gq-memc span{font:700 11px Kanit;color:#fff;border-radius:8px;padding:2px 8px;letter-spacing:1px}.gq-tipc span{background:#f0a020}.gq-memc span{background:#7c5cff}
.gq-tipc b,.gq-memc b{display:block;font:700 16px Mali,Kanit;margin:6px 0 2px}.gq-tipc b{color:#9a6200}.gq-memc b{color:#4b2fc4}.gq-tipc p,.gq-memc p{margin:0}
.gq-tbl{overflow-x:auto;margin:10px 0}.gq-tbl table{border-collapse:collapse;width:100%;background:#fff;border-radius:14px;overflow:hidden;font-size:14px}.gq-tbl th{background:var(--navy);color:#fff;font:600 13px Kanit;padding:8px;text-align:left}.gq-tbl td{padding:8px;border-top:1px solid #f0eadb;vertical-align:top}
.gq-tbl.wide td,.gq-tbl.wide th{text-align:center;white-space:nowrap}.gq-tbl td.ok{background:#e3f7ea;color:#145c34;font-weight:700}.gq-tbl td.no{background:#ffe9ec;color:#a12;font-weight:700}
.gq-endcta{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:22px}
.gq-talkhead{display:flex;gap:14px;align-items:center;background:#fff;border-radius:18px;padding:12px}.gq-talkhead p{margin:4px 0 8px;font-size:14px}
.gq-chat{margin-top:12px}.gq-msg{max-width:86%;border-radius:18px;padding:10px 14px;margin:10px 0;position:relative}.gq-msg p{margin:2px 0 6px;font-weight:600;font-size:16px}
.gq-msg .who{font:700 12px Kanit;color:#fff;border-radius:8px;padding:2px 8px}.gq-msg.you{background:#e6f0ff;margin-left:auto}.gq-msg.you .who{background:#2a7fff}.gq-msg.pet{background:#fff1e6}.gq-msg.pet .who{background:#ff7a2f}
.gq-msg .acts{display:flex;align-items:center;gap:8px}.gq-msg em{font-style:normal;font:600 13px Kanit;color:var(--green)}.gq-msg.flash{animation:gqpop .5s}
/* quiz */
.gq-quiz{max-width:720px;margin:0 auto;position:relative}.gq-qtop{display:flex;justify-content:space-between;font:700 16px Kanit;color:var(--navy)}
.gq-prog{height:10px;background:#efe8d8;border-radius:6px;overflow:hidden;margin:8px 0}.gq-prog i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--pink));transition:width .4s}
.gq-hp{display:flex;gap:8px;align-items:center;font:700 12px Kanit;color:var(--red)}.gq-hp div{flex:1;height:14px;background:#2b2d42;border-radius:8px;overflow:hidden;border:2px solid #2b2d42}.gq-hp i{display:block;height:100%;background:linear-gradient(90deg,#ff5c8a,#e63946);transition:width .6s}
.gq-qcard{background:#fff;border-radius:22px;padding:20px;margin-top:12px;box-shadow:0 6px 20px rgba(0,0,0,.08)}.gq-q{font:600 19px Sarabun;line-height:1.5;margin-bottom:12px}
.gq-opts{display:grid;gap:10px}.gq-opt{display:flex;gap:12px;align-items:center;text-align:left;border:2px solid #e8e1cf;background:#fff;border-radius:16px;padding:12px 14px;font-size:16px;transition:.15s}
.gq-opt b{width:32px;height:32px;border-radius:50%;background:#f3efe6;display:grid;place-items:center;flex:none;font-family:Kanit}.gq-opt:hover:not(:disabled){border-color:var(--navy);transform:translateX(3px)}
.gq-opt.picked{border-color:var(--navy)}.gq-opt.right{border-color:var(--green);background:#e9faf0}.gq-opt.right b{background:var(--green);color:#fff}.gq-opt.wrong{border-color:var(--red);background:#fff0f2}.gq-opt.wrong b{background:var(--red);color:#fff}
.gq-fb{margin-top:12px}.gq-fb .ok,.gq-fb .no{border-radius:14px;padding:10px 12px;font-weight:700;margin-bottom:10px}.gq-fb .ok{background:#e9faf0;color:#145c34}.gq-fb .no{background:#fff0f2;color:#a12}.gq-fb span{display:block;font-weight:400;color:var(--ink);margin-top:4px}
.gq-qpet{display:flex;align-items:center;justify-content:center;gap:4px;margin-top:6px}.gq-qpet .gq-bubble{font-size:14px;max-width:260px}
.gq-quiz [data-quit]{position:absolute;right:0;top:-46px}.k-pre .gq-qpet .gq-bubble{display:none}
.gq-coinpop{position:absolute;z-index:99;font:700 22px Kanit;color:#e0a400;text-shadow:0 2px 0 #fff;animation:gqfloat 1.2s ease-out forwards;pointer-events:none}
.result .gq-res-title{font:700 40px Kanit;color:var(--pink)}.result.win .gq-res-title{color:var(--green)}.gq-stars{font-size:40px;color:#ffc53d;letter-spacing:4px}
.gq-newsticker{display:inline-flex;flex-direction:column;align-items:center;background:#fffbe9;border:2px dashed var(--gold);border-radius:16px;padding:10px}
.gq-finals{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}.gq-final{border:0;border-radius:20px;padding:20px;background:linear-gradient(160deg,#ffe08a,#ffc53d);box-shadow:0 5px 0 rgba(0,0,0,.15);display:flex;flex-direction:column;align-items:center}.gq-final span{font:600 15px Kanit}.gq-final b{font:700 32px Kanit;color:var(--navy)}.gq-final i{font-style:normal;color:#9a6200}
/* shop */
.gq-chips{display:flex;gap:6px;overflow-x:auto;padding-bottom:6px;margin-bottom:10px}.gq-chips button{border:0;border-radius:20px;padding:8px 14px;background:#efe8d8;font:600 14px Kanit;white-space:nowrap}.gq-chips button.on{background:var(--navy);color:#fff}
.gq-chips.scroll{margin-top:4px}
.gq-shop{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}.gq-shop.small{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}
.gq-item{background:#fff;border:2px solid transparent;border-radius:18px;padding:10px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;position:relative;box-shadow:0 3px 0 rgba(0,0,0,.07)}
.gq-item .art{width:100%;aspect-ratio:1.3;display:grid;place-items:center;background:#faf6ec;border-radius:12px;overflow:hidden}.gq-item .art svg{width:100%;height:100%}
.gq-item b{font:600 14px Kanit;line-height:1.2}.gq-item small{font-size:11.5px;color:var(--mut)}.gq-item em{position:absolute;top:6px;right:8px;font:600 11px Kanit;background:var(--pink);color:#fff;border-radius:10px;padding:1px 7px;font-style:normal}
.gq-item.owned{opacity:.75}.gq-item.locked .art{filter:grayscale(1);opacity:.6}.gq-item.on{border-color:var(--gold);background:#fffbe9}
.tag{font:600 12px Kanit;background:#e9faf0;color:#145c34;border-radius:10px;padding:3px 8px}.tag.lock{background:#f0f0f4;color:#666}
.gq-emo{font-size:44px}
.gq-wardrobe{display:grid;grid-template-columns:1fr 1.2fr;gap:14px;align-items:start}.gq-mirror{position:relative;border-radius:20px;overflow:hidden;aspect-ratio:400/300;background:#fff}
.gq-mirror .gq-scene-svg{position:absolute;inset:0;width:100%;height:100%}.gq-mirror .gq-pet{position:absolute;left:50%;bottom:4%;transform:translateX(-50%) scale(var(--grow,1));width:56%;height:auto;aspect-ratio:200/190}
.gq-trips{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}.gq-trip{background:#fff;border-radius:20px;overflow:hidden;box-shadow:0 4px 0 rgba(0,0,0,.08)}.gq-trip .art svg{display:block;width:100%;height:auto}.gq-trip .info{padding:12px;display:flex;flex-direction:column;gap:6px}.gq-trip b{font:700 17px Kanit}.gq-trip.locked .art{filter:grayscale(.8)}
.gq-album{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:10px;background:repeating-linear-gradient(#fffaf0 0 28px,#f3ead6 28px 29px);border-radius:18px;padding:14px}
.gq-slot{aspect-ratio:1;border-radius:16px;border:2px dashed #d9c38a;display:grid;place-items:center;background:rgba(255,255,255,.6);overflow:hidden}.gq-slot .q{font:700 26px Kanit;color:#d9c38a}
.gq-slot.got{border-style:solid;background:#fff;transform:rotate(-2deg);box-shadow:0 3px 8px rgba(0,0,0,.12)}.gq-slot.got:nth-child(2n){transform:rotate(2deg)}.gq-slot svg{width:100%;height:100%}.gq-slot .gq-emo{font-size:36px}
.gq-stk{width:84%;aspect-ratio:1;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;font:700 26px Kanit;color:#fff;background:var(--navy);border:4px solid #fff;box-shadow:0 0 0 2px var(--gold)}
.gq-stk small{font:600 9px Kanit;line-height:1.1;text-align:center;padding:0 4px}.gq-stk.final,.gq-stk.cert{background:linear-gradient(160deg,#ffe08a,#ffc53d);color:#3b2a00}.gq-stk.streak{background:#ff7a2f}.gq-stk.cefr{background:conic-gradient(var(--gold),var(--pink),var(--navy),var(--gold))}.gq-stk.welcome{background:var(--pink)}
.gq-stk.realm.c1{background:#ff5c8a}.gq-stk.realm.c2{background:#2fae66}.gq-stk.realm.c3{background:#7c5cff}.gq-stk.realm.c4{background:#2a7fff}.gq-stk.realm.c5{background:#f0a020}.gq-stk.realm.c6{background:#14aec2}.gq-stk.realm.c7{background:#ff7a2f}.gq-stk.realm.c8{background:#e63946}.gq-stk.realm.c9{background:#b06a2c}.gq-stk.realm.c10{background:#5b4bff}.gq-stk.realm.c11{background:#3d9bd6}.gq-stk.realm.c12{background:#2f9e44}.gq-stk.realm.c13{background:#3d348b}.gq-stk.realm.c14{background:#c9a227}
/* modal & toast */
.gq-modal-wrap{position:fixed;inset:0;background:rgba(10,14,40,.6);z-index:50;display:flex;align-items:center;justify-content:center;padding:14px}
.gq-modal{background:#fff;border-radius:24px;padding:20px;max-width:520px;width:100%;max-height:90vh;overflow:auto;position:relative;text-align:center;animation:gqpop .3s}
.gq-x{position:absolute;right:12px;top:10px;border:0;background:#f3efe6;border-radius:50%;width:34px;height:34px}
.gq-feedpet{position:relative;display:flex;justify-content:center}.gq-feedpet .gq-pet{width:170px;height:160px}
.gq-inv{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;margin:12px 0}.gq-invit{border:2px solid #efe8d8;background:#fff;border-radius:16px;padding:8px;display:flex;flex-direction:column;align-items:center}.gq-invit b{font:600 13px Kanit}.gq-invit small{font-size:11px;color:var(--mut)}
.gq-vet{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:400/220}.gq-vet .gq-scene-svg{position:absolute;inset:0;width:100%;height:100%}.gq-vetpet{position:absolute;left:50%;bottom:0;transform:translateX(-50%)}.gq-vetpet .gq-pet{width:150px;height:140px}
.gq-tip{background:#eef2ff;border-radius:12px;padding:8px;font-size:14px}
.gq-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--navy);color:#fff;padding:12px 18px;border-radius:16px;font:600 15px Kanit;z-index:99;box-shadow:0 8px 24px rgba(0,0,0,.3);transition:.4s;max-width:92vw;text-align:center}
.gq-toast.err{background:var(--red)}.gq-toast.ok{background:var(--green)}.gq-toast.gold{background:#ffc53d;color:#3b2a00}.gq-toast.out{opacity:0;transform:translate(-50%,20px)}
.gq-confetti{position:fixed;inset:0;pointer-events:none;z-index:98;overflow:hidden}.gq-confetti i{position:absolute;top:-20px;width:10px;height:16px;border-radius:2px;animation:gqconf 2.6s ease-in forwards}
@keyframes gqconf{to{top:110%;transform:rotate(720deg) translateX(60px)}}
.gq-check{list-style:none;padding:0;columns:2}.gq-check li{padding:6px 0;break-inside:avoid}.gq-check li b{float:right;margin-right:12px}.gq-check li.ok{color:#145c34}
/* certificate */
.gq-cert{max-width:1000px;margin:12px auto;aspect-ratio:1.414;background:#fffdf6;border-radius:6px;padding:18px;box-shadow:0 10px 40px rgba(0,0,0,.25)}
.gq-cert .frame{height:100%;border:6px double var(--gold2);border-radius:4px;padding:3% 6%;text-align:center;position:relative;background:radial-gradient(circle at 50% 40%,#fff 0,#fff8e6 100%)}
.gq-cert .logo{position:absolute;left:3%;top:4%;width:9%}.gq-cert .pets{position:absolute;right:3%;top:3%;display:flex;width:30%}.gq-cert .pets svg{width:20%;height:auto}
.gq-cert .k{font:600 1.6vmin Kanit;letter-spacing:.4em;color:var(--gold2)}.gq-cert h1{font:700 6.2vmin 'Playfair Display',Kanit,serif;color:var(--navy);margin:1% 0 0}.gq-cert .sub{font:italic 2.2vmin 'Playfair Display',serif;color:#8a7a55;margin:0}
.gq-cert h2{font:700 5vmin Kanit;color:var(--ink);border-bottom:2px solid var(--gold);display:inline-block;padding:0 4% 1%;margin:2% 0}.gq-cert p{font-size:2vmin;margin:1% 0}.gq-cert .body{color:#3b3f55}
.gq-cert .meta{display:flex;justify-content:space-around;align-items:center;margin-top:3%}.gq-cert .meta div{display:flex;flex-direction:column;font-size:1.8vmin}.gq-cert .meta span{border-top:1px solid #b8b2a0;padding-top:4px;color:var(--mut)}
.gq-cert .sig{font:600 3vmin 'Mali',cursive;color:var(--navy)}.gq-cert .seal{width:12vmin;height:12vmin;border-radius:50%;background:radial-gradient(#ffe08a,#c9a227);display:grid!important;place-items:center;color:#fff;font-size:5vmin!important;box-shadow:0 0 0 5px #fff,0 0 0 8px var(--gold2)}.gq-cert .seal small{font:700 1.2vmin Kanit;margin-top:-3vmin}
.gq-cert .no{position:absolute;bottom:3%;left:0;right:0;font-size:1.4vmin;color:#9a8d70}
@media print{body *{visibility:hidden}#gq-cert,#gq-cert *{visibility:visible}#gq-cert{position:fixed;left:0;top:0;width:100%;margin:0;box-shadow:none}@page{size:A4 landscape;margin:8mm}}
/* listen page */
.gq-lhead{text-align:center}.gq-lhead small{font:600 12px Kanit;letter-spacing:2px;color:var(--mut)}.gq-lhead h1{color:var(--navy)}
.gq-lline{display:flex;gap:10px;align-items:flex-start;width:100%;text-align:left;background:#fff;border:2px solid #efe8d8;border-radius:14px;padding:10px 12px;margin:6px 0;font-size:16px}
.gq-lline .id{font:600 12px Kanit;color:#7c5cff;white-space:nowrap;margin-top:2px}.gq-lline small{display:block;color:var(--mut);font-size:13px}.gq-lline.on{border-color:var(--gold);background:#fffbe9}.gq-lline.you{background:#eef4ff}.gq-lline.pet{background:#fff4ea}
.gq-rate{font:600 14px Kanit;display:flex;align-items:center;gap:6px}.gq-root h3{color:var(--navy);margin-top:18px}
@media (max-width:720px){.gq-hud-logo{width:34px;height:34px}.gq-hud{gap:6px}.gq-hud-pills{gap:4px;flex-wrap:nowrap}.gq-hud-me span{display:none}.gq-dock{grid-template-columns:repeat(3,1fr)}.gq-setup-grid,.gq-wardrobe{grid-template-columns:1fr}.gq-stats{grid-template-columns:1fr}.gq-hud-pills .gq-pill{padding:4px 8px;font-size:12px}.gq-realm .gq-pet.mini{width:80px;height:76px}.gq-check{columns:1}.gq-map{grid-template-columns:repeat(2,1fr)}.gq-bubble{font-size:13px}.gq-q{font-size:17px}.gq-cert{aspect-ratio:auto}}

.gq-note{background:#fff4d6;border:2px dashed #f0b429;border-radius:14px;padding:10px 14px;font-size:14px;margin-bottom:12px}.gq-note.small{font-size:13px;margin-top:10px}
.gq-docs{display:grid;gap:10px}.gq-doc{display:flex;align-items:center;gap:12px;background:#fff;border-radius:16px;padding:10px 12px;box-shadow:0 3px 0 rgba(0,0,0,.06)}
.gq-doc .n{width:40px;height:40px;border-radius:12px;color:#fff;display:grid;place-items:center;font:700 18px Kanit;flex:none;background:var(--navy)}.gq-doc .n.fin{background:#c9a227}
.gq-doc>div:nth-child(2){flex:1;min-width:0}.gq-doc b{font:600 15px Kanit;display:block}.gq-doc small{color:var(--mut)}.gq-doc .btns{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.gq-doc .n.c1{background:#ff5c8a}.gq-doc .n.c2{background:#2fae66}.gq-doc .n.c3{background:#7c5cff}.gq-doc .n.c4{background:#2a7fff}.gq-doc .n.c5{background:#f0a020}.gq-doc .n.c6{background:#14aec2}.gq-doc .n.c7{background:#ff7a2f}.gq-doc .n.c8{background:#e63946}.gq-doc .n.c9{background:#b06a2c}.gq-doc .n.c10{background:#5b4bff}.gq-doc .n.c11{background:#3d9bd6}.gq-doc .n.c12{background:#2f9e44}.gq-doc .n.c13{background:#3d348b}.gq-doc .n.c14{background:#c9a227}
@media (max-width:720px){.gq-doc{flex-wrap:wrap}.gq-doc .btns{width:100%;justify-content:stretch}.gq-doc .btns .gq-btn{flex:1}}
.gq-tinfo{background:#eef2ff;border-radius:12px;padding:8px 12px;margin-bottom:10px;font-size:14px}
.gq-linkbtn{border:0;background:none;padding:0;color:var(--navy);text-decoration:underline;cursor:pointer;font:inherit;text-align:left}
.gq-modal.wide{max-width:760px}.gq-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:10px 0}.gq-kpis div{background:#f6f3ea;border-radius:12px;padding:8px}.gq-kpis b{display:block;font:700 20px Kanit;color:var(--navy)}.gq-kpis span{font-size:12px;color:var(--mut)}
.gq-bestgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}.gq-bestgrid div{border:2px solid #e4dccb;border-radius:10px;padding:4px;text-align:center}.gq-bestgrid span{display:block;font-size:11px;color:var(--mut)}.gq-bestgrid b{font:700 15px Kanit}.gq-bestgrid .ok{background:#e9faf0;border-color:#9ad8b2}.gq-bestgrid .no{background:#fff3e8;border-color:#f5c08f}
@media (max-width:720px){.gq-bestgrid{grid-template-columns:repeat(4,1fr)}.gq-kpis{grid-template-columns:repeat(2,1fr)}}