:root{font-family:Tahoma,"Noto Sans Thai",sans-serif;color:#fff;background:#11345c;--navy:#12365f;--cyan:#40dbe8;--yellow:#ffd64d;--coral:#ff765e;--purple:#8562dc}*{box-sizing:border-box}body{margin:0;min-height:100dvh;overflow:hidden;background:linear-gradient(150deg,#51d8ef,#5b80df 52%,#7753ba)}button{font:inherit}.start,.game,.win{width:100vw;height:100dvh;position:relative;overflow:hidden}.start:before,.game:before,.win:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 15% 20%,#fff5 0 6%,transparent 7%),radial-gradient(circle at 86% 25%,#fff3 0 5%,transparent 6%),linear-gradient(transparent 75%,#2cae8c 76%);pointer-events:none}.start{display:flex;align-items:center;justify-content:center;gap:clamp(30px,6vw,95px);padding:5vw}.intro,.machine-art{position:relative;z-index:1}.intro{max-width:720px;background:#12365fee;border:5px solid #fff;border-radius:38px;padding:clamp(24px,4vw,50px);box-shadow:0 16px 0 #09213e}.intro>b{color:var(--yellow);font-size:clamp(18px,2vw,28px)}h1{font-size:clamp(48px,6vw,91px);line-height:1;margin:.16em 0;text-shadow:0 7px #582b86}.intro p{font-size:clamp(18px,2vw,27px)}.modes{display:grid;grid-template-columns:1fr 1fr;gap:14px}.modes button{min-height:88px}.modes small{display:block;margin-top:5px}.machine-art{width:min(34vw,430px);aspect-ratio:1;border:10px solid #fff;border-radius:45px;background:#1d4775;box-shadow:0 16px 0 #09213e,inset 0 0 0 8px #40dbe8;display:grid;place-items:center}.gear{position:absolute;font-size:110px;color:#ffd64d;opacity:.5;animation:spin 12s linear infinite}.display{z-index:1;background:#09213e;border:6px solid #40dbe8;border-radius:25px;padding:20px;font-size:clamp(45px,6vw,80px);font-weight:900}.belt{position:absolute;bottom:30px;display:flex;gap:8px}.belt i{font-style:normal;background:#ff765e;border:3px solid #fff;border-radius:10px;padding:7px 12px;font-weight:900}.sound{position:fixed;z-index:30;right:18px;bottom:18px;width:58px;height:58px;padding:0;border:3px solid #fff;border-radius:50%;background:#12365f;color:#fff;box-shadow:0 6px 0 #09213e;font-size:25px}button{border:0;border-radius:18px;padding:13px 22px;background:linear-gradient(#ffec75,#ffb62a);color:#12365f;font-weight:900;box-shadow:0 7px 0 #9c5d00;cursor:pointer}button:active{transform:translateY(4px);box-shadow:0 3px 0 #9c5d00}.game{display:grid;grid-template-rows:auto 1fr auto;gap:12px;padding:clamp(8px,1.3vw,20px)}.hud{z-index:1;display:flex;align-items:center;justify-content:space-between;gap:15px;background:#12365fee;border:3px solid #fff;border-radius:22px;padding:9px 18px}.bar{height:18px;flex:1;max-width:580px;border:2px solid #fff;border-radius:20px;background:#315779;overflow:hidden}.bar i{display:block;height:100%;background:linear-gradient(90deg,#40dbe8,#ffd64d,#ff765e);transition:.4s}.workspace{z-index:1;align-self:center;width:min(1120px,94vw);margin:auto;background:#f8fbfff2;color:#12365f;border:7px solid #12365f;border-radius:36px;box-shadow:0 16px 0 #09213e;padding:clamp(17px,2.5vw,34px);text-align:center}.tag{display:inline-block;background:#8562dc;color:#fff;border-radius:18px;padding:6px 18px;font-weight:900}.prompt{font-size:clamp(25px,3vw,44px);margin:10px}.thai-word{font-size:clamp(42px,5.5vw,82px);font-weight:900;color:#764bb8;text-shadow:0 4px #e7d9ff}.place-boxes{display:flex;justify-content:center;align-items:end;gap:clamp(18px,5vw,70px);margin:18px}.place{position:relative}.place label{display:block;font-size:clamp(20px,2vw,29px);font-weight:900;margin-bottom:8px}.slot{width:clamp(105px,12vw,165px);height:clamp(120px,14vw,185px);display:grid;place-items:center;background:#fff;border:7px dashed #41cbdc;border-radius:28px;color:#12365f;font-size:clamp(65px,8vw,108px);font-weight:900;box-shadow:0 9px 0 #188293}.place.tens .slot{border-color:#ff765e;box-shadow:0 9px 0 #b64336}.slot.selected{outline:7px solid #ffd64d}.slot.filled{border-style:solid}.slot.wrong{animation:shake .35s;border-color:#e83555}.base-ten{position:absolute;right:-54px;bottom:8px;font-weight:900;color:#6a7d91}.equals{font-size:54px;font-weight:900;padding-bottom:55px}.controls{display:grid;grid-template-columns:repeat(2,clamp(105px,12vw,165px));justify-content:center;gap:clamp(18px,5vw,70px);margin:0 auto}.check{background:linear-gradient(#78f6af,#27c87f);box-shadow:0 7px 0 #08794b}.clear{background:linear-gradient(#f0dcff,#ba91ef);box-shadow:0 7px 0 #7243a8}.feedback{min-height:30px;margin:12px 0 0;font-weight:900;color:#078f68}.dock{z-index:1;display:flex;justify-content:center;align-items:center;gap:clamp(6px,1vw,13px);background:#12365fee;border:3px solid #fff;border-radius:22px;padding:10px 75px 10px 14px}.dock b{color:#ffd64d}.digit{width:clamp(48px,5vw,70px);aspect-ratio:1;padding:0;border-radius:18px;background:linear-gradient(#54e2ee,#25aeba);color:#0b3853;border:3px solid #fff;box-shadow:0 6px 0 #11727b;font-size:clamp(25px,3vw,40px)}.digit.active{outline:6px solid #ffd64d;transform:translateY(-5px)}.win{display:grid;place-items:center;text-align:center}.win>div{z-index:1;background:#12365fee;border:5px solid #fff;border-radius:38px;padding:45px;box-shadow:0 16px 0 #09213e}.win h1{margin:.15em}.celebrate{font-size:85px}@keyframes spin{to{transform:rotate(360deg)}}@keyframes shake{25%{transform:translateX(-9px)}75%{transform:translateX(9px)}}@media(max-aspect-ratio:4/3){body{overflow:auto}.start{height:auto;min-height:100dvh;flex-direction:column}.machine-art{width:min(60vw,330px)}.game{height:auto;min-height:100dvh}.dock{flex-wrap:wrap}}@media(max-height:650px) and (orientation:landscape){.game{padding:6px;gap:5px}.workspace{padding:9px}.prompt{margin:3px}.thai-word{font-size:42px}.place-boxes{margin:7px}.slot{width:85px;height:95px;font-size:56px}.controls button{padding:8px 18px}.dock{padding-top:4px;padding-bottom:4px}.sound{width:48px;height:48px}}