:root{font-family:Tahoma,"Noto Sans Thai",sans-serif;color:#29475a;--navy:#29475a;--pink:#ef6595;--gold:#ffd45c;--mint:#54d4b0}*{box-sizing:border-box}body{margin:0;overflow:hidden;background:#74d8df}button{font:inherit}.screen{width:100vw;height:100dvh;position:relative;background:linear-gradient(#a8f0ed22,#519d8f22),url('assets/floating-garden.png') center/cover}.start,.win{display:grid;place-items:center}.panel{width:min(790px,91vw);padding:clamp(28px,4vw,55px);text-align:center;background:#fffdf4f2;border:7px solid #fff;border-radius:40px;box-shadow:0 16px 0 #3d7d6d,0 26px 50px #27586666}.panel h1{font-size:clamp(45px,7vw,84px);line-height:1;margin:.1em;color:#e85f86;text-shadow:0 5px #ffe271,0 9px #9c3d65}.panel h2{font-size:clamp(23px,3vw,39px);color:#268698}.panel p{font-size:clamp(18px,2vw,27px);font-weight:800}.btn{border:4px solid #fff;border-radius:21px;padding:13px 27px;background:linear-gradient(#ffe66f,#ffb739);color:#633c00;font-size:clamp(18px,2vw,27px);font-weight:900;box-shadow:0 8px 0 #a26012;cursor:pointer}.sound{position:fixed;z-index:30;right:18px;bottom:18px;width:58px;height:58px;border:4px solid #fff;border-radius:50%;background:#29475a;color:#fff;font-size:24px;box-shadow:0 6px 0 #142c3a}.game{display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:8px;padding:clamp(7px,1.2vw,17px)}.hud,.path{z-index:5;width:100%;display:flex;align-items:center;justify-content:center;gap:clamp(8px,2vw,22px);padding:8px 74px;background:#29475aeb;border:4px solid #fff;border-radius:24px;color:#fff;box-shadow:0 7px 0 #142c3a}.hud strong{white-space:nowrap}.progress{height:19px;max-width:650px;flex:1;border:3px solid #fff;border-radius:20px;background:#567383;overflow:hidden}.progress i{display:block;height:100%;background:linear-gradient(90deg,#56e2c0,#ffd45c,#ef6595);transition:.45s}.small{border:2px solid #fff;border-radius:12px;padding:7px 12px;background:#ffd45c;color:#5b3900;font-weight:900}.quest{z-index:3;align-self:center;justify-self:center;width:min(1120px,91vw);max-height:100%;overflow:auto;padding:clamp(15px,2.4vw,30px);background:#fffdf6ee;border:7px solid #fff;border-radius:36px;box-shadow:0 14px 0 #4d826e,0 22px 38px #29475a55;text-align:center}.badge{display:inline-block;padding:5px 16px;border-radius:16px;background:#8265d9;color:#fff;font-weight:900}.story{font-size:clamp(21px,2.35vw,34px);font-weight:900;line-height:1.45;margin:10px auto;max-width:940px;color:#355267}.visual{display:flex;align-items:center;justify-content:center;gap:clamp(10px,2vw,25px);margin:8px}.group{min-width:170px;min-height:88px;display:flex;flex-wrap:wrap;justify-content:center;align-content:center;gap:5px;padding:8px;border:4px solid #9bded4;border-radius:20px;background:#edfffa}.item{width:clamp(25px,2.7vw,38px);aspect-ratio:1;border-radius:50% 48% 52% 46%;background:linear-gradient(145deg,var(--c),#fff3);border:3px solid #fff;box-shadow:0 4px 0 #397d7366;position:relative}.item:after{content:"✦";position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:15px}.sign{font-size:40px;font-weight:900;color:#e7688f}.equation{display:inline-flex;align-items:center;gap:13px;padding:8px 22px;border-radius:22px;background:#dff9fb;border:5px solid #54cad5;color:#245f74;font-size:clamp(30px,4vw,52px);font-weight:900;box-shadow:0 7px 0 #238291}.choices{display:flex;justify-content:center;gap:clamp(12px,2vw,25px);margin:16px 0 5px}.choice{width:clamp(100px,12vw,160px);height:clamp(62px,8vh,83px);border:5px solid #fff;border-radius:22px;background:linear-gradient(#9e79e8,#7350ca);color:#fff;font-size:clamp(30px,4vw,48px);font-weight:900;box-shadow:0 8px 0 #4c338c;cursor:pointer}.choice:hover{transform:translateY(-4px)}.choice.wrong{background:#e95e64;animation:shake .35s}.choice.correct{background:#3fc997}.feedback{min-height:28px;font-weight:900;color:#14826c}.path{min-height:72px}.stones{display:flex;align-items:center;justify-content:center;gap:clamp(5px,1vw,12px)}.stone{width:clamp(27px,3vw,42px);aspect-ratio:1;display:grid;place-items:center;border-radius:50%;background:#668097;border:3px solid #fff;font-weight:900}.stone.done{background:#48cf9d}.stone.current{background:#ffd45c;color:#6b4200;transform:scale(1.18)}.win .stars{font-size:78px}@keyframes shake{25%{transform:translateX(-9px)}75%{transform:translateX(9px)}}@media(max-height:680px) and (orientation:landscape){.game{padding:5px;gap:4px}.hud,.path{padding-top:4px;padding-bottom:4px}.quest{padding:8px}.story{margin:3px}.visual{margin:3px}.group{min-height:62px}.item{width:26px}.equation{padding:3px 18px}.choices{margin:7px 0 2px}.choice{height:54px}.path{min-height:55px}}@media(max-aspect-ratio:4/3){body{overflow:auto}.screen{height:auto;min-height:100dvh}.game{grid-template-rows:auto auto auto}.hud,.path{flex-wrap:wrap;padding:8px 68px 8px 12px}.visual{flex-direction:column}.quest{max-height:none}.choices{flex-wrap:wrap}}
.quest.split{width:min(1510px,97vw);height:100%;max-height:100%;padding:0;overflow:hidden;display:grid;grid-template-columns:minmax(0,2fr) minmax(340px,1fr);text-align:center;background:#fffdf6e8}
.story-side{min-width:0;padding:clamp(14px,2vw,28px);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;border-right:6px solid #fff}
.story-side .story{width:min(920px,95%);padding:9px 18px;background:#fff9e8;border:4px solid #ffd45c;border-radius:22px;box-shadow:0 6px 0 #b67524}
.story-side .visual{width:94%;flex:1;min-height:0;margin:15px 0;align-items:stretch}
.story-side .group{flex:1;min-width:0;min-height:210px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:12px;background:#f4fffbd9;border:5px solid #8edccd;box-shadow:0 8px 0 #4c8e81}
.story-side .group>b{display:inline-block;margin:-30px 0 10px;padding:5px 14px;border-radius:13px;background:#2f806f;color:#fff;border:3px solid #fff;white-space:nowrap}
.items{display:flex;flex-wrap:wrap;align-content:center;justify-content:center;gap:7px;flex:1;width:100%}
.story-side .item{width:clamp(31px,3.4vw,54px)}
.story-side .sign{align-self:center;width:72px;height:72px;display:grid;place-items:center;border-radius:50%;background:#ef6595;color:#fff;border:5px solid #fff;box-shadow:0 7px 0 #9d3f67}
.answer-side{min-width:0;padding:clamp(15px,2vw,28px);display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(160deg,#275d72f2,#263c68f5);color:#fff}
.wave-gem{width:72px;height:72px;display:grid;place-items:center;clip-path:polygon(50% 0,92% 35%,77% 100%,23% 100%,8% 35%);background:linear-gradient(145deg,#54e2df,#5974df);font-size:32px;font-weight:900;text-shadow:0 3px #31558a}
.answer-side h2{font-size:clamp(23px,2.5vw,35px);margin:8px 0}.answer-side h3{margin:17px 0 4px;color:#73f1d1}
.answer-side .equation{display:flex;width:100%;justify-content:center;gap:7px;padding:0;border:0;background:transparent;box-shadow:none}
.answer-side .equation span{min-width:clamp(48px,4.7vw,73px);height:clamp(57px,7vh,78px);display:grid;place-items:center;border-radius:17px;background:#fff;color:#29475a;border:4px solid #c6adf2;box-shadow:0 7px 0 #6d4da2}
.answer-side .equation span:nth-child(2),.answer-side .equation span:nth-child(4){min-width:34px;background:transparent;border:0;box-shadow:none;color:#ffd45c}
.answer-side .choices{width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:7px 0}
.answer-side .choice{width:100%;height:clamp(62px,8vh,82px)}
.answer-side .feedback{color:#73f1d1;margin-top:8px}
@media(max-height:680px) and (orientation:landscape){.story-side{padding:10px}.story-side .story{padding:4px 13px}.story-side .visual{margin:10px 0 3px}.story-side .group{min-height:150px;padding:7px}.story-side .item{width:31px}.answer-side{padding:10px}.wave-gem{width:55px;height:55px}.answer-side h2{margin:3px}.answer-side h3{margin:8px 0 2px}}
@media(max-aspect-ratio:4/3){.quest.split{height:auto;grid-template-columns:1fr}.story-side{border-right:0;border-bottom:6px solid #fff}.answer-side{min-height:470px}.story-side .visual{flex-direction:row}}
.build-equation{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;margin:3px 0 7px}.build-equation>span{font-size:34px;font-weight:900;color:#ffd45c}.slot{width:clamp(50px,4.6vw,70px);height:clamp(58px,7vh,74px);border:4px solid #c6adf2;border-radius:16px;background:#fff;color:#29475a;font:900 clamp(26px,3vw,39px)/1 inherit;box-shadow:0 7px 0 #6d4da2;cursor:pointer}.slot.operator-slot{color:#d6438c}.slot.filled{background:#f7fbff}.slot.wrong{animation:shake .35s;border-color:#ff6e7d;background:#fff0f2}.token-bank{width:min(100%,330px);padding:9px;border:4px solid #72e8ef;border-radius:18px;background:#142f51;box-shadow:0 7px 0 #10213c}.operator-bank,.number-bank{display:grid;gap:7px}.operator-bank{grid-template-columns:repeat(2,1fr);margin-bottom:7px}.number-bank{grid-template-columns:repeat(3,1fr)}.token{min-height:45px;border:3px solid #fff;border-radius:13px;background:linear-gradient(#8a55e9,#6132bc);color:#fff;font:900 25px/1 inherit;box-shadow:0 4px 0 #381a78;cursor:grab}.op-token{background:linear-gradient(#ffbf3f,#ed7b2f);color:#3b2452}.token.selected{outline:4px solid #79ffe0;transform:translateY(-2px)}.build-actions{display:flex;gap:9px;margin-top:12px}.check-build,.clear-build{border:3px solid #fff;border-radius:14px;padding:9px 17px;color:#fff;font:900 17px/1 inherit;cursor:pointer}.check-build{background:#ef3f9a;box-shadow:0 5px 0 #9c1e63}.clear-build{background:#67509d;box-shadow:0 5px 0 #392b62}.answer-side .feedback{min-height:35px;text-align:center}.answer-side h3{font-size:16px}@media(max-height:680px) and (orientation:landscape){.build-equation{margin:1px}.slot{height:48px}.token{min-height:35px;font-size:20px}.token-bank{padding:6px}.build-actions{margin-top:7px}.check-build,.clear-build{padding:7px 13px}.answer-side .feedback{font-size:13px}}