:root{--ink:#385470;--pink:#ef8faf;--mint:#72d4bc;--gold:#ffd561;--blue:#70ccef}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;font-family:Tahoma,"Noto Sans Thai",sans-serif;background:#9edcf4}button{font:inherit;border:0;cursor:pointer}.game{position:relative;width:100vw;height:100dvh;background:url('assets/pastel-playground-lab.png') center/100% 100% no-repeat;overflow:hidden}.hidden{display:none!important}.overlay{position:absolute;inset:0;z-index:50;display:grid;place-items:center;text-align:center;background:linear-gradient(100deg,#8cdef0db,#97e6bb99)}.intro-card{width:min(740px,82%);padding:clamp(25px,4vw,60px);border:7px solid white;border-radius:40px;background:#fff9f0ed;color:var(--ink);box-shadow:0 12px 0 #69b3c8,0 20px 38px #3a718055}.intro-card small{display:inline-block;padding:.35em 1em;border-radius:99px;background:var(--pink);color:white;font-weight:bold}.intro-card h1,.result-card h1{font-size:clamp(42px,6vw,90px);line-height:.95;margin:.22em 0}.intro-card h1 span{color:#e889a9}.intro-card p,.result-card p{font-size:clamp(16px,1.7vw,26px);font-weight:bold}.primary{padding:.6em 1.7em;border:4px solid white;border-radius:20px;background:linear-gradient(#fff080,#ffc945);color:#6b4d16;font-weight:900;font-size:clamp(17px,1.5vw,24px);box-shadow:0 7px 0 #b97a24}.play{position:absolute;inset:0}header{position:absolute;z-index:20;left:1%;right:1%;top:1%;height:8%;display:grid;grid-template-columns:1fr minmax(220px,35%) 1fr;align-items:center;padding:5px 15px;border:3px solid white;border-radius:18px;background:#599fc5e8;color:white;box-shadow:0 5px 0 #346d91;font-size:clamp(12px,1.15vw,19px)}.progress{text-align:center;font-weight:bold}.progress i{display:block;height:10px;border-radius:99px;background:#ffffff66;overflow:hidden}.progress b{display:block;width:0;height:100%;background:linear-gradient(90deg,#7df5dd,#ff87b1);transition:.3s}.tools{display:flex;justify-content:flex-end;align-items:center;gap:9px;font-weight:bold}.tools button{width:clamp(32px,3vw,45px);aspect-ratio:1;border-radius:12px;background:white;color:var(--ink);box-shadow:0 3px 0 #8baec2}.mission{position:absolute;z-index:15;left:50%;top:10%;transform:translateX(-50%);width:min(820px,62%);text-align:center;padding:.7em 1.3em;border:5px solid white;border-radius:23px;background:#fffaf0ed;color:var(--ink);box-shadow:0 7px 0 #e5a861}.mission small{font-weight:bold;color:#e7799c}.mission h2{margin:.12em 0;font-size:clamp(17px,1.8vw,29px)}.mission p{margin:0;font-size:clamp(10px,.9vw,15px)}.stage{position:absolute;z-index:8;left:8%;right:7%;top:28%;bottom:22%;pointer-events:none}.stations{position:absolute;z-index:11;left:10%;right:8%;top:57%;height:12%;display:grid;grid-template-columns:repeat(3,1fr);gap:8%}.station{border:4px solid white;border-radius:18px;color:white;font-weight:900;box-shadow:0 6px 0 #526b83;display:flex;align-items:center;justify-content:center;gap:10px;font-size:clamp(12px,1.2vw,20px)}.station b{font-size:1.8em}.station.roll{background:linear-gradient(#65cbed,#3e9bd4)}.station.stand{background:linear-gradient(#ffd66b,#e9a63e)}.station.stack{background:linear-gradient(#98dfba,#4eb78a)}.station.active{outline:7px solid white;filter:brightness(1.15)}.palette{position:absolute;z-index:12;left:25%;right:25%;bottom:3%;height:15%;display:grid;grid-template-columns:repeat(4,1fr);gap:3%}.shape-btn{position:relative;border:4px solid white;border-radius:20px;background:#fffaf0ed;box-shadow:0 6px 0 #9c8290;color:var(--ink);font-weight:bold}.shape-btn.selected{outline:8px solid #ffdc55;transform:translateY(-6px)}.shape-btn .mini{display:block;margin:auto;transform:scale(.65)}.shape-btn span:last-child{position:absolute;left:4px;right:4px;bottom:4px}.moving-shape{position:absolute;z-index:10;left:13%;top:22%;width:110px;height:110px;transition:none}.moving-shape.second{opacity:.95}.solid{position:relative;display:block;width:90px;height:90px;margin:auto;filter:drop-shadow(0 8px 4px #0003)}.solid.sphere{border-radius:50%;background:radial-gradient(circle at 32% 25%,#fff 0 8%,#ff8ca9 25%,#e75f88 70%)}.solid.box{width:92px;height:76px;margin-top:10px;background:linear-gradient(135deg,#ffcb61,#e69035);border-radius:9px;box-shadow:inset -15px -12px 0 #c8752c}.solid.cylinder{width:70px;height:86px;background:linear-gradient(90deg,#69c6ed,#b9eeff 45%,#4aa6d0);border-radius:50%/12%}.solid.cylinder:before,.solid.cylinder:after{content:"";position:absolute;left:0;width:100%;height:20px;border-radius:50%;background:#a9e8ff}.solid.cylinder:before{top:-2px}.solid.cylinder:after{bottom:-2px;background:#459ec9}.solid.cone{width:88px;height:92px;background:linear-gradient(90deg,#99e1b9,#d4f7dd 45%,#5fc390);clip-path:polygon(50% 0,100% 88%,94% 96%,6% 96%,0 88%);border-radius:45%}.feedback{position:absolute;z-index:14;left:50%;bottom:19%;transform:translateX(-50%);min-width:35%;padding:.55em 1.3em;border:4px solid white;border-radius:99px;background:#53677ee8;color:white;text-align:center;font-weight:bold;font-size:clamp(11px,1.1vw,18px)}.moving-shape.roll-ok{animation:roll 1.4s ease-in-out forwards}.moving-shape.roll-circle{animation:rollCircle 1.5s ease-in-out forwards}.moving-shape.wobble{animation:wobble .9s ease-in-out}.moving-shape.fall{animation:fall .9s ease-in forwards}.moving-shape.stack-ok{animation:stackIn .8s ease-out forwards}.result-card{color:white;text-shadow:0 4px 0 #3d8aa7}.result-card>div{font-size:clamp(100px,13vw,190px)}@keyframes roll{to{left:75%;transform:rotate(720deg)}}@keyframes rollCircle{50%{left:42%;top:45%;transform:rotate(320deg)}100%{left:25%;top:55%;transform:rotate(600deg)}}@keyframes wobble{25%{transform:rotate(-8deg)}50%{transform:rotate(7deg)}75%{transform:rotate(-3deg)}}@keyframes fall{40%{transform:rotate(20deg)}100%{transform:rotate(83deg) translate(35px,15px)}}@keyframes stackIn{from{transform:translateY(-90px);opacity:0}to{transform:translateY(0);opacity:1}}@media(max-height:650px){.mission{top:9%;padding:.4em}.stations{top:55%}.palette{height:16%}.solid{transform:scale(.75)}}