:root{--ink:#173b5f;--orange:#ffb524}*{box-sizing:border-box}html,body{margin:0;min-height:100%;overflow-x:hidden}body{font-family:"Arial Rounded MT Bold","Noto Sans Thai",Tahoma,sans-serif;color:var(--ink)}button{font:inherit;touch-action:manipulation}.game-shell{min-height:100dvh;width:100%;position:relative;overflow:hidden;background:linear-gradient(180deg,#54c9ed,#a4ecf5 52%,#65cf83)}.game-shell:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 10% 18%,#fff 0 6%,transparent 6.5%),radial-gradient(ellipse at 18% 20%,#fff 0 8%,transparent 8.5%),radial-gradient(ellipse at 88% 23%,#fff 0 7%,transparent 7.5%),linear-gradient(155deg,transparent 65%,#28a45566 65% 70%,#17753d88 70%);opacity:.75}.center{display:grid;place-items:center;padding:clamp(16px,4vw,48px)}.card{position:relative;z-index:1;width:min(760px,94vw);padding:clamp(28px,5vw,60px);text-align:center;border:5px solid #fff;border-radius:42px;background:#fffdf2f5;box-shadow:0 14px 0 #2782a6,0 28px 60px #11617b55}.mark{width:max-content;margin:0 auto 14px;padding:8px 22px;border-radius:999px;color:#fff;background:#ff634f;font-size:clamp(25px,4vw,46px);letter-spacing:8px;box-shadow:0 6px 0 #c94338}.eyebrow{margin:0 0 6px;color:#2087ad;font-weight:900}.card h1{margin:5px 0 14px;font-size:clamp(36px,6vw,70px);line-height:1.05}.lead{font-size:clamp(17px,2vw,24px);line-height:1.55}.steps{margin:24px auto 30px;display:grid;grid-template-columns:auto 1fr;gap:10px 12px;width:min(470px,100%);text-align:left}.steps span{display:grid;place-items:center;width:32px;height:32px;color:#fff;background:var(--orange);border-radius:50%;box-shadow:0 3px 0 #d38709}.steps p{margin:3px 0;font-weight:700}.primary,.check,.next{border:0;border-radius:16px;min-height:58px;padding:12px 28px;color:#fff;background:linear-gradient(#4bd67d,#25a95a);box-shadow:0 6px 0 #147b43;font-size:clamp(18px,2vw,24px);font-weight:900;cursor:pointer}.sound-note{margin:22px 0 0;color:#56748d}.topbar{position:relative;z-index:2;min-height:76px;margin:clamp(10px,1.5vw,22px);padding:10px clamp(14px,2vw,28px);display:grid;grid-template-columns:1fr minmax(220px,1fr) 1fr;align-items:center;gap:16px;border:4px solid #fff;border-radius:28px;background:#fffdf2f2;box-shadow:0 7px 0 #1d80a6}.brand{font-size:clamp(16px,1.5vw,22px);font-weight:900}.progress-wrap{text-align:center}.wave{font-weight:900}.progress{height:12px;margin-top:6px;overflow:hidden;border-radius:99px;background:#d6e5e8}.progress i{display:block;height:100%;background:linear-gradient(90deg,#ffb826,#44d482)}.actions{display:flex;align-items:center;justify-content:flex-end;gap:8px}.actions button{width:48px;height:48px;border:2px solid #d3e9ed;border-radius:14px;background:#fff;cursor:pointer}.layout{position:relative;z-index:1;width:min(1460px,calc(100% - 32px));min-height:calc(100dvh - 122px);margin:0 auto 18px;padding:clamp(18px,2.6vw,38px);display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,340px);gap:clamp(18px,2vw,30px);border:5px solid #fff;border-radius:36px;background:#fffdf2e8;box-shadow:0 10px 0 #1b86a8}.board{min-width:0;display:flex;flex-direction:column}.board h2,.controls h2{margin:0 0 14px;font-size:clamp(22px,2.6vw,38px)}.grid{flex:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(104px,1fr);gap:14px}.puzzle{position:relative;display:grid;grid-template-columns:1fr .55fr 1fr 1fr 1fr;place-items:center;gap:4px;padding:14px;border:3px solid #9ad5e8;border-radius:22px;background:#eaf9ff;box-shadow:0 6px 0 #63acc4}.puzzle.active{border-color:#ffb625;background:#fff8dc;box-shadow:0 6px 0 #db8e0d,0 0 0 5px #ffd76255}.puzzle.correct{border-color:#45c879;background:#e9ffef}.puzzle.wrong{border-color:#f16a5d;background:#fff0ee}.puzzle small{position:absolute;top:6px;left:9px;color:#7190a5}.num,.op{font-size:clamp(24px,3vw,46px);font-weight:900}.op{color:#eb614f}.slot{width:clamp(52px,5vw,72px);aspect-ratio:1;border:3px dashed #2e88b6;border-radius:16px;background:#fff;color:var(--ink);font-size:clamp(28px,3.4vw,50px);font-weight:900;cursor:pointer}.controls{display:flex;flex-direction:column;justify-content:center;gap:clamp(14px,2.4vh,26px);padding:clamp(18px,2.5vw,30px);border:3px solid #ace9d0;border-radius:28px;background:#edfff5;box-shadow:0 7px 0 #278f61;text-align:center}.helper{line-height:1.55;color:#52718a}.helper b{color:#f05b49}.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%}.pad button{min-width:0;min-height:70px;border:3px solid #fff;border-radius:18px;color:#fff;background:linear-gradient(#55bff0,#2d96ca);box-shadow:0 6px 0 #1c6d9a;font-size:clamp(34px,4vw,56px);font-weight:900;cursor:pointer}.feedback{display:grid;place-items:center;min-height:64px;padding:10px;border:2px dashed #9ec6d2;border-radius:16px;background:#fff;font-weight:700}.check,.next{width:100%}.check:disabled{color:#81928d;background:#cdd7d2;box-shadow:0 6px 0 #91a09a}.next{background:linear-gradient(#ffbf37,#f49a17);box-shadow:0 6px 0 #bc6b05}.scorebox{margin:24px auto 30px;padding:18px;border-radius:22px;background:#e6f8ff;box-shadow:0 6px 0 #4ca4c4;font-size:clamp(40px,7vw,70px);font-weight:900}
@media(max-width:900px){.topbar{grid-template-columns:1fr auto}.progress-wrap{grid-row:2;grid-column:1/-1}.layout{grid-template-columns:1fr;min-height:auto}.controls{display:grid;grid-template-columns:1fr 1fr}.controls .feedback,.controls .check,.controls .next{grid-column:1/-1}}
@media(max-width:620px){.game-shell{overflow:auto}.topbar{margin:8px;padding:8px 10px}.brand{font-size:14px}.actions button{width:42px;height:42px}.layout{width:calc(100% - 16px);padding:14px;border-radius:24px}.grid{grid-template-columns:1fr;grid-auto-rows:minmax(88px,auto)}.puzzle{padding:12px 8px}.controls{display:flex;position:sticky;bottom:8px;z-index:5;padding:15px}.controls h2,.helper{display:none}.pad button{min-height:60px}}
@media(max-height:500px) and (orientation:landscape){.topbar{min-height:58px;margin:6px 10px;padding:5px 10px;border-width:3px}.progress-wrap{grid-row:auto;grid-column:auto}.layout{width:calc(100% - 20px);min-height:calc(100dvh - 74px);padding:12px;grid-template-columns:minmax(0,1fr) 230px;gap:12px}.board h2{font-size:20px;margin-bottom:7px}.grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(74px,1fr);gap:7px}.puzzle{padding:6px;border-radius:14px}.num,.op{font-size:23px}.slot{width:44px;font-size:27px}.controls{display:flex;position:static;gap:9px;padding:11px}.controls h2{display:none}.helper{display:block;margin:0;font-size:12px}.pad{gap:5px}.pad button{min-height:52px;font-size:30px}.feedback{min-height:42px;padding:6px;font-size:11px}.check,.next{min-height:46px;padding:7px;font-size:16px}}
.gate-overlay{position:fixed;z-index:100;inset:0;display:none;place-items:center;padding:20px;background:linear-gradient(180deg,#54c9ed,#8be1ee)}.gate-overlay.show{display:grid}.gate-overlay article{width:min(520px,92vw);padding:clamp(28px,6vw,54px);text-align:center;border:5px solid #fff;border-radius:36px;background:#fffdf2;box-shadow:0 12px 0 #2782a6,0 24px 50px #11617b55}.gate-overlay h1{margin:10px 0;font-size:clamp(30px,6vw,52px)}.gate-overlay p{line-height:1.6;color:#55738b}.gate-overlay a{display:inline-block;margin-top:14px;padding:15px 25px;border-radius:18px;background:#7053e4;color:#fff;text-decoration:none;font-weight:900;box-shadow:0 7px #46339b}.lock-icon{font-size:clamp(56px,10vw,88px)}