:root{--ink:#25445b;--gold:#ffd54e;--blue:#4e9fee}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;font-family:Tahoma,"Noto Sans Thai",sans-serif;background:#79dce8}button{font:inherit;border:0;cursor:pointer}.game{position:relative;width:100vw;height:100dvh;background:url('assets/fantasy-f-factory-bg.png') center/cover no-repeat;background-image:url('assets/f-set: url("assets/fantasy-factory-bg.png") 1x');background:url('assets/f-set: url("assets-set")');background:url('assets-set')}.game{background-image:url('assets/fantasy-factory-bg.png')}.hidden{display:none!important}.play{position:absolute;inset:0}.overlay{position:absolute;inset:0;z-index:50;display:grid;place-items:center;background:linear-gradient(100deg,#52cdd9ee 0 48%,#52cdd966)}.intro-card{width:min(1100px,86%);display:flex;align-items:center;justify-content:center;gap:4vw;color:white;text-align:center;text-shadow:0 3px 0 #247a87}.mascot{font-size:clamp(130px,22vw,340px);filter:drop-shadow(0 12px 3px #296f6f55)}.intro-card small{display:inline-block;background:#ff6f91;border:3px solid white;border-radius:99px;padding:.35em 1em;font-weight:bold}.intro-card h1,.result-card h1{font-size:clamp(42px,6vw,92px);line-height:.95;margin:.2em 0}.intro-card h1 span{color:#fff080}.intro-card p,.result-card p{font-size:clamp(16px,1.7vw,27px);font-weight:bold}.primary{background:linear-gradient(#fff178,#ffc32b);color:#704000;border:4px solid white;border-radius:20px;padding:.6em 1.7em;font-weight:900;font-size:clamp(17px,1.6vw,25px);box-shadow:0 7px 0 #b26b09}.primary:active{transform:translateY(4px);box-shadow:0 3px 0 #b26b09}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;background:#247c91e8;color:white;border:3px solid white;border-radius:18px;padding:5px 16px;box-shadow:0 5px 0 #14586d;font-size:clamp(12px,1.2vw,20px)}.progress{text-align:center;font-weight:bold}.progress i{display:block;height:10px;background:#ffffff55;border-radius:99px;overflow:hidden}.progress b{display:block;width:0;height:100%;background:linear-gradient(90deg,#64efff,#ff65a9);transition:.3s}.tools{display:flex;align-items:center;justify-content:flex-end;gap:10px;font-weight:bold}.tools button{width:clamp(32px,3vw,46px);aspect-ratio:1;border-radius:12px;background:white;color:var(--ink);box-shadow:0 3px 0 #9db5cb}.guide{position:absolute;z-index:15;left:50%;top:10%;transform:translateX(-50%);width:min(720px,55%);text-align:center;background:#fffaf0eF;border:4px solid var(--gold);border-radius:18px;padding:.55em 1em;color:var(--ink);box-shadow:0 5px 0 #d18a20}.guide b{display:block;font-size:clamp(14px,1.5vw,24px)}.guide span{font-size:clamp(10px,.9vw,15px);color:#e85f62}.belt-items{position:absolute;z-index:10;left:17%;right:17%;top:43%;height:18%;display:flex;align-items:center;justify-content:center;gap:clamp(12px,2vw,34px)}.item{position:relative;width:clamp(76px,8vw,135px);aspect-ratio:1;display:grid;place-items:center;background:#fffaf2;border:5px solid white;border-radius:24px;box-shadow:0 8px 0 #9e6235,0 10px 18px #4b2c2455;touch-action:none;user-select:none;cursor:grab;transition:transform .2s,opacity .25s}.item:active{cursor:grabbing}.item .emoji{font-size:clamp(42px,5.5vw,90px);filter:drop-shadow(0 5px 2px #0003)}.item small{position:absolute;bottom:3px;background:#3c9cec;color:white;border-radius:99px;padding:.15em .55em;font-weight:bold;font-size:clamp(8px,.7vw,12px)}.item.dragging{position:fixed;z-index:100;pointer-events:none;transform:scale(1.15) rotate(-3deg)}.item.done{transform:scale(.2);opacity:0}.bins{position:absolute;z-index:9;left:9%;right:8%;bottom:4%;height:23%;display:grid;grid-template-columns:repeat(4,1fr);gap:5%}.bin{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:1%;border-radius:28px;transition:.2s}.bin h3{margin:0;background:#fffaf0;border:4px solid white;border-radius:15px;padding:.35em .7em;color:var(--ink);font-size:clamp(12px,1.25vw,21px);box-shadow:0 4px 0 #bd7c3f;text-align:center}.bin .shape{font-size:clamp(28px,3.4vw,58px);line-height:1;filter:drop-shadow(0 3px 1px #0003)}.bin.over{background:#fff76c77;transform:scale(1.06);box-shadow:0 0 25px 10px #fff}.result-card{text-align:center;color:white;text-shadow:0 4px 0 #237a87}.result-card>div{font-size:clamp(100px,13vw,200px)}.shake{animation:shake .35s}@keyframes shake{25%{transform:translateX(-9px)}50%{transform:translateX(9px)}75%{transform:translateX(-5px)}}@media(max-height:650px){.guide{top:9%;padding:.3em}.belt-items{top:40%;height:19%}.bins{height:25%;bottom:2%}.item{width:clamp(65px,7vw,105px)}}