:root{font-family:Tahoma,"Noto Sans Thai",sans-serif;color:#fff;background:#087dd6;--navy:#092b54;--yellow:#ffd84b;--cyan:#45e4f4;--coral:#ff6f61}*{box-sizing:border-box}body{margin:0;min-height:100dvh;overflow:hidden}button{font:inherit}.start,.game,.win{width:100vw;height:100dvh;background:linear-gradient(#0785df55,#064f9a44),url('assets/floating-town.png') center/cover;position:relative}.start{display:grid;place-items:center;padding:5vw}.title{max-width:850px;text-align:center;background:#092b54e8;border:5px solid #fff;border-radius:40px;padding:clamp(25px,5vw,60px);box-shadow:0 15px 0 #051b38,0 0 45px #55e7ff}.title>b{color:var(--yellow);font-size:clamp(18px,2vw,28px)}h1{font-size:clamp(48px,7vw,100px);line-height:1;margin:.15em 0;text-shadow:0 7px #f07b20}.title p{font-size:clamp(19px,2vw,29px)}button{border:0;border-radius:18px;padding:13px 25px;background:linear-gradient(#ffed72,#ffb627);color:#092b54;font-weight:900;box-shadow:0 7px 0 #a55e00;cursor:pointer}button:active{transform:translateY(4px);box-shadow:0 3px 0 #a55e00}.sound{position:fixed;z-index:30;right:18px;bottom:18px;width:58px;height:58px;padding:0;border:3px solid #fff;border-radius:50%;background:#092b54;color:#fff;box-shadow:0 6px 0 #05182f;font-size:25px}.game{display:grid;grid-template-rows:auto 1fr auto;gap:12px;padding:clamp(8px,1.3vw,20px)}.hud{display:flex;align-items:center;gap:16px;justify-content:space-between;background:#092b54ed;border:3px solid #fff;border-radius:22px;padding:9px 18px}.progress{height:18px;flex:1;max-width:600px;border:2px solid #fff;background:#285174;border-radius:20px;overflow:hidden}.progress i{display:block;height:100%;background:linear-gradient(90deg,#45e4f4,#ffd84b,#ff785d);transition:.5s}.content{width:min(1180px,92vw);margin:auto;background:#f9fbfff0;color:#092b54;border:7px solid #092b54;border-radius:34px;box-shadow:0 15px 0 #051a35;padding:clamp(16px,2.5vw,34px);text-align:center}.badge{display:inline-block;background:#ff704f;color:#fff;border-radius:20px;padding:6px 18px;font-weight:900}.content h2{margin:10px 0;font-size:clamp(22px,2.6vw,38px)}.equation{font-size:clamp(38px,5vw,72px);font-weight:900;background:#e8f8ff;border:4px solid #37cfe8;border-radius:24px;padding:10px;margin:12px auto;max-width:760px}.box{display:inline-grid;place-items:center;min-width:1.45em;height:1.2em;border:5px dashed #ff704f;border-radius:14px;background:#fff;color:#ff704f}.story{font-size:clamp(21px,2.2vw,32px);line-height:1.5;background:#fff8d8;border:4px solid #ffd84b;border-radius:22px;padding:14px 24px;max-width:900px;margin:12px auto}.steps{display:flex;justify-content:center;gap:8px;margin:12px}.steps i{font-style:normal;border-radius:18px;padding:6px 14px;background:#d6e4ee;font-weight:900}.steps i.done{background:#55d68b;color:#fff}.steps i.current{background:#ff704f;color:#fff;transform:scale(1.06)}.prompt{font-size:clamp(19px,2vw,28px);font-weight:900;margin:12px}.choices{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:980px;margin:auto}.choice{min-height:70px;background:#fff;color:#092b54;border:4px solid #37cfe8;box-shadow:0 6px 0 #087c9b;font-size:clamp(18px,1.8vw,25px)}.choice:hover{background:#dffbff}.choice.wrong{animation:shake .35s;border-color:#ff536c}.hint{min-height:30px;margin:14px 0 0;font-weight:900;color:#078f68}.townbar{display:flex;align-items:center;justify-content:center;gap:8px;background:#092b54ed;border:3px solid #fff;border-radius:22px;padding:8px 75px 8px 14px}.plot{width:clamp(34px,4vw,58px);aspect-ratio:1;border-radius:12px;border:3px dashed #bcd0df;background:#294a69;display:grid;place-items:center;font-weight:900}.plot.built{border-style:solid;background:linear-gradient(#ffd84b 0 35%,#ff745d 35% 68%,#43c8e8 68%);box-shadow:0 0 14px #ffe65a}.plot.current{border-color:#ffe04d;animation:pulse 1s infinite}.win{display:grid;place-items:center;text-align:center}.win>div{background:#092b54ed;border:5px solid #fff;border-radius:38px;padding:45px;box-shadow:0 16px 0 #05182f}.win h1{margin:.15em}.city{font-size:80px}@keyframes shake{25%{transform:translateX(-9px)}75%{transform:translateX(9px)}}@keyframes pulse{50%{transform:scale(1.12);box-shadow:0 0 20px #ffe04d}}@media(max-aspect-ratio:4/3){body{overflow:auto}.game{height:auto;min-height:100dvh}.choices{grid-template-columns:1fr}.steps{flex-wrap:wrap}}@media(max-height:650px) and (orientation:landscape){.game{gap:5px;padding:6px}.content{padding:10px}.content h2{margin:4px}.equation,.story{margin:5px auto;padding:6px}.steps{margin:5px}.choice{min-height:54px}.townbar{padding-top:4px;padding-bottom:4px}.sound{width:48px;height:48px}}