:root{font-family:"Tahoma","Noto Sans Thai",sans-serif;color:#fff;--purple:#6c32c9;--deep:#24114d;--pink:#ff48ba;--cyan:#33e9ff;--gold:#ffd43b;--panel:#39206f;--outline:#21103f}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100dvh;overflow:hidden;background:#1c0c3c}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible{outline:5px solid var(--cyan);outline-offset:4px}.app{height:100dvh;display:flex;flex-direction:column;overflow:hidden;background:radial-gradient(circle at 50% 30%,#9144db66,transparent 42%),linear-gradient(#31135f,#190b38)}.topbar{height:clamp(70px,10dvh,108px);flex:0 0 auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:8px clamp(15px,3vw,55px);background:#24114deb;border-bottom:5px solid #9d50e8;box-shadow:0 5px 0 #14072c;z-index:10}.mini-logo{font-weight:1000;font-size:clamp(17px,1.5vw,25px);letter-spacing:.5px}.mini-logo span{color:var(--gold)}.sound-controls{justify-self:end;display:flex;gap:9px}.icon-btn{height:50px;min-width:50px;padding:0 12px;border:4px solid #c894ff;border-radius:17px;background:#4c2489;box-shadow:0 5px 0 #170936;font-weight:900}.icon-btn.off{opacity:.48;text-decoration:line-through}.progress-wrap{text-align:center;font-weight:900}.progress{width:clamp(180px,30vw,470px);height:18px;border:3px solid #dcb8ff;border-radius:15px;background:#16082e;overflow:hidden}.progress i{display:block;height:100%;background:linear-gradient(90deg,var(--cyan),var(--pink),var(--gold));box-shadow:0 0 12px var(--cyan);transition:.5s}.screen{position:relative;flex:1;min-height:0;width:min(1800px,100%);margin:auto;padding:clamp(12px,2vw,30px)}.game-stage{height:100%;display:grid;grid-template-columns:minmax(0,1.55fr) minmax(310px,.72fr);border:6px solid #c482ff;border-radius:35px;background:#322065;box-shadow:0 12px 0 #12062b,0 22px 50px #0008;overflow:hidden}.world{position:relative;min-height:0;overflow:hidden;background:linear-gradient(#29104d22,#25104499),url("assets/story-adventure-bg.png") center/cover no-repeat}.world:after{content:"";position:absolute;inset:auto 0 0;height:30%;background:linear-gradient(transparent,#250e49cc);pointer-events:none}.quest-banner{position:absolute;z-index:5;top:clamp(12px,2vh,25px);left:50%;transform:translateX(-50%);width:min(90%,900px);padding:11px 25px;text-align:center;background:#fff8e8;color:#3a1e61;border:5px solid var(--gold);border-radius:24px;box-shadow:0 7px 0 #9a4c27;font-size:clamp(17px,1.65vw,28px);font-weight:900}.arcade-btn{min-height:58px;padding:10px clamp(18px,2vw,34px);border:5px solid #fff;border-radius:22px;background:linear-gradient(#ff6fc9,#e932a6);box-shadow:0 7px 0 #78105b,0 0 18px #ff4fbe77;font-weight:1000;font-size:clamp(17px,1.5vw,24px);white-space:nowrap}.arcade-btn:hover{transform:translateY(-3px);filter:brightness(1.1)}.answer-panel{position:relative;padding:clamp(18px,2.3vw,38px);border-left:6px solid #8d4bd0;background:linear-gradient(#43247e,#291452);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.answer-panel:before{content:"";position:absolute;inset:10px;border:2px solid #a963e655;border-radius:24px;pointer-events:none}.gem{display:grid;place-items:center;width:clamp(65px,7vw,105px);aspect-ratio:1;clip-path:polygon(50% 0,95% 35%,77% 100%,23% 100%,5% 35%);background:linear-gradient(135deg,#fff,var(--cyan) 32%,#5640db 70%);font-weight:1000;font-size:clamp(23px,2.2vw,35px);filter:drop-shadow(0 8px 0 #16082e) drop-shadow(0 0 12px var(--cyan))}.answer-panel h2{margin:20px 0 6px;font-size:clamp(22px,2vw,35px)}.equation-builder{display:flex;align-items:center;justify-content:center;gap:clamp(7px,1vw,14px);margin:10px 0 18px;font-size:clamp(30px,3vw,48px);font-weight:1000;color:var(--gold)}.equation-slot{width:clamp(58px,5vw,86px);aspect-ratio:1;border:5px solid #d7b3ff;border-radius:18px;background:#fff;color:#3b1c66;box-shadow:0 7px 0 #792eb1;font-size:clamp(28px,3vw,48px);font-weight:1000}.equation-slot:empty{background:#ffffffbb}.equation-slot.wrong-slot{background:#ff8c9f;border-color:#fff;animation:shake .35s}.number-dock{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(7px,1vw,12px);width:min(100%,360px);padding:clamp(10px,1.2vw,17px);border:5px solid #8ff5ff;border-radius:25px;background:#170936cc;box-shadow:inset 0 0 25px #31eaff55,0 8px 0 #0c031e}.number-tile{min-height:clamp(48px,6vh,72px);border:4px solid #fff;border-radius:17px;background:linear-gradient(#8f58ed,#5b2cba);box-shadow:0 5px 0 #2a1261;font-size:clamp(24px,2.4vw,38px);font-weight:1000;touch-action:none}.number-tile:hover,.number-tile.selected{background:linear-gradient(#ffef6d,#ffae2e);color:#351753;transform:translateY(-3px);box-shadow:0 5px 0 #a44b18,0 0 18px var(--gold)}.number-tile:active{cursor:grabbing}.number-tile.dragging{opacity:.45;transform:scale(.88);cursor:grabbing}.dock-actions{display:flex;gap:10px;margin-top:14px;align-items:center;justify-content:center}.check-btn{min-height:52px}.clear-btn{min-height:46px;padding:7px 13px;border:3px solid #cda5ff;border-radius:15px;background:#4c2583;font-weight:800}.feedback{height:35px;margin-top:13px;color:#6effd9;font-weight:900;font-size:clamp(16px,1.4vw,22px)}.start{height:100%;display:grid;place-items:center;text-align:center;background:linear-gradient(#39136aaa,#15062ee8),url("assets/story-adventure-bg.png") center/cover}.start-card{width:min(900px,92%);padding:clamp(25px,4vw,60px);border:7px solid #d09cff;border-radius:45px;background:#321366e8;box-shadow:0 15px 0 #120525,0 0 50px #e44fff66}.game-logo{font-size:clamp(48px,8vw,120px);line-height:.82;margin:0;text-transform:uppercase;color:#fff;text-shadow:0 7px 0 #54239a,0 12px 0 #211049,0 0 25px #e650ff}.game-logo span{display:block;color:var(--gold);font-size:.65em;text-shadow:0 6px 0 #b04731,0 10px 0 #4c194e}.start-card p{font-size:clamp(18px,2vw,30px);font-weight:800}.modal{position:fixed;z-index:30;inset:0;display:grid;place-items:center;padding:20px;background:#120528dd}.modal-card{width:min(720px,94%);padding:clamp(30px,5vw,70px);text-align:center;border:7px solid var(--gold);border-radius:40px;background:linear-gradient(#6530b2,#321260);box-shadow:0 13px 0 #14052c,0 0 45px #ff4dcb88}.modal-card h2{font-size:clamp(42px,6vw,85px);margin:0;color:var(--gold);text-shadow:0 6px 0 #8c3460}.modal-card p{font-size:clamp(18px,2vw,28px);font-weight:800}  @keyframes shake{25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}@keyframes sparkle{to{opacity:.2;transform:rotate(135deg) scale(.5)}}
@media(max-width:900px){body{overflow:auto}.app{height:auto;min-height:100dvh}.topbar{grid-template-columns:1fr auto}.progress-wrap{grid-row:2;grid-column:1/-1}.topbar{height:auto}.game-stage{grid-template-columns:1fr}.world{min-height:520px}.answer-panel{border-left:0;border-top:6px solid #8d4bd0;min-height:360px}.screen{min-height:900px}}
@media(max-height:720px) and (orientation:landscape){.topbar{height:64px;padding-block:5px}.icon-btn{height:43px;min-width:43px}.screen{padding:9px 18px}.game-stage{border-radius:25px}.quest-banner{top:8px;padding:7px 18px}.arcade-btn{min-height:46px;padding-block:5px}.answer-panel{padding:12px}.answer-panel h2{margin:8px 0 2px}.feedback{height:25px;margin-top:5px}}
@media(min-width:1600px) and (min-height:850px){.screen{width:96vw}.game-stage{min-height:calc(100dvh - 145px)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

/* Visual story scene: decorative and deliberately separate from equation controls. */
.story-scene{position:absolute;z-index:4;top:18%;bottom:14%;left:3%;right:24%;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}.place-badge{padding:7px 20px;border:4px solid #fff;border-radius:18px;background:linear-gradient(#8750df,#5521a4);box-shadow:0 6px 0 #25104d,0 0 18px #9af5ff;color:#fff;font-size:clamp(15px,1.3vw,22px);font-weight:1000}.story-groups{flex:1;width:100%;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:clamp(7px,1vw,16px);align-items:center}.visual-group{min-width:0;text-align:center}.visual-group h3{display:inline-flex;gap:8px;align-items:center;margin:0 0 7px;padding:5px 12px;border:3px solid #d6b3ff;border-radius:14px;background:#291254d9;font-size:clamp(13px,1.15vw,19px)}.visual-group h3 b{display:grid;place-items:center;width:27px;aspect-ratio:1;border-radius:50%;background:var(--gold);color:#39134f}.item-field{min-height:clamp(120px,24vh,235px);padding:clamp(7px,1vw,14px);display:grid;grid-template-columns:repeat(3,minmax(34px,1fr));align-content:center;justify-items:center;gap:clamp(3px,.6vw,9px);border:4px solid #ffffffb8;border-radius:25px;background:#2a135db8;box-shadow:inset 0 0 25px #ad62ff55,0 8px 0 #16072f}.story-item{display:block;width:clamp(42px,4.3vw,76px);aspect-ratio:1;animation:item-enter .42s cubic-bezier(.2,.9,.3,1.3) both;animation-delay:var(--delay)}.story-item svg{display:block;width:100%;height:100%;filter:drop-shadow(0 6px 3px #12062999)}.story-plus{display:grid;place-items:center;width:clamp(45px,4vw,68px);aspect-ratio:1;border:4px solid #fff;border-radius:50%;background:var(--pink);box-shadow:0 6px 0 #741151,0 0 20px #ff55c6;font-size:clamp(29px,3vw,48px);font-weight:1000}.mission-path{position:absolute;z-index:6;left:4%;right:24%;bottom:2.5%;display:flex;align-items:center;justify-content:space-between}.mission-path:before{content:"";position:absolute;left:3%;right:3%;height:6px;border:2px solid #c9a7ff;background:#291354;box-shadow:0 0 10px #8cf8ff}.path-node{position:relative;display:grid;place-items:center;width:clamp(25px,2.3vw,38px);aspect-ratio:1;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 94%,50% 72%,21% 94%,32% 57%,2% 35%,39% 35%);background:#70509b;filter:drop-shadow(0 3px 0 #16072f)}.path-node span{font-style:normal;font-size:clamp(8px,.7vw,11px);font-weight:1000}.path-node.done{background:var(--cyan);color:#281247}.path-node.current{background:var(--gold);color:#3d194a;filter:drop-shadow(0 0 8px var(--gold));animation:node-glow .7s infinite alternate}@keyframes item-enter{from{opacity:0;transform:translateY(20px) scale(.65)}to{opacity:1;transform:none}}@keyframes node-glow{to{transform:scale(1.22)}}
@media(max-width:900px){.story-scene{right:5%;top:19%;bottom:15%}.mission-path{right:5%}.item-field{min-height:130px}.story-item{width:clamp(38px,8vw,62px)}}
@media(max-height:720px) and (orientation:landscape){.story-scene{top:20%;bottom:15%;right:23%}.place-badge{padding:3px 12px}.visual-group h3{margin-bottom:3px;padding:2px 8px}.item-field{min-height:105px;padding:4px}.story-item{width:clamp(34px,7vh,51px)}.mission-path{bottom:1.5%}.path-node{width:24px}}