:root{font-family:Tahoma,"Noto Sans Thai",sans-serif;color:#26385a;--ink:#26385a;--pink:#f25a9c;--blue:#3ac8e9;--gold:#ffd34e}*{box-sizing:border-box}body{margin:0;overflow:hidden;background:#6dd1e7}button{font:inherit}.screen{width:100vw;height:100dvh;position:relative;background:radial-gradient(circle at 12% 18%,#fff8 0 2%,transparent 2.3%),radial-gradient(circle at 87% 72%,#fff7 0 2%,transparent 2.3%),linear-gradient(145deg,#45cfe6,#8c79dd)}.screen:before,.screen:after{content:"";position:absolute;border-radius:50%;background:#fff3;filter:blur(2px)}.screen:before{width:260px;height:260px;left:-80px;top:-90px}.screen:after{width:330px;height:330px;right:-100px;bottom:-120px}.start,.win{display:grid;place-items:center}.panel{z-index:2;width:min(790px,91vw);padding:clamp(28px,5vw,58px);text-align:center;background:#fffdf4f2;border:7px solid #fff;border-radius:42px;box-shadow:0 16px 0 #3b5594,0 28px 50px #27365c66}.panel h1{font-size:clamp(46px,7vw,86px);line-height:1;margin:.1em;color:#f05a9d;text-shadow:0 5px #ffe171,0 9px #a72f6e}.panel h2{font-size:clamp(22px,3vw,38px);color:#286eaf}.panel p{font-size:clamp(18px,2vw,27px);font-weight:800}.btn{border:4px solid #fff;border-radius:22px;padding:13px 28px;background:linear-gradient(#ffe66c,#ffb82e);color:#603b00;font-size:clamp(19px,2vw,27px);font-weight:900;box-shadow:0 8px 0 #9c5e09;cursor:pointer}.sound{position:fixed;z-index:30;right:18px;bottom:18px;width:58px;height:58px;border:4px solid #fff;border-radius:50%;background:#26385a;color:#fff;font-size:24px;box-shadow:0 6px 0 #111d38}.game{display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:8px;padding:clamp(7px,1.2vw,17px)}.hud,.tools{z-index:5;width:100%;display:flex;align-items:center;justify-content:center;gap:clamp(8px,2vw,22px);padding:8px 76px;background:#26385aed;border:4px solid #fff;border-radius:24px;color:#fff;box-shadow:0 7px 0 #111d38}.hud strong{white-space:nowrap}.progress{height:19px;max-width:650px;flex:1;border:3px solid #fff;border-radius:20px;background:#536684;overflow:hidden}.progress i{display:block;height:100%;background:linear-gradient(90deg,#4de2cf,#ffd34e,#f25a9c);transition:.4s}.small{border:2px solid #fff;border-radius:13px;padding:7px 12px;background:#ffd34e;color:#523400;font-weight:900}.book{z-index:3;align-self:center;justify-self:center;width:min(1320px,96vw);height:min(76vh,780px);position:relative;padding:clamp(12px,2vw,25px);background:#fffdf7;border:8px solid #f1c886;border-radius:38px;box-shadow:0 14px 0 #9d6546,0 25px 40px #25365d55}.book:before{content:"";position:absolute;inset:14px;border:3px dashed #ef9fc3;border-radius:25px;pointer-events:none}.title{position:absolute;z-index:5;top:2%;left:50%;transform:translateX(-50%);background:#fff;border:4px solid #42c8e7;border-radius:20px;padding:5px 22px;font-size:clamp(18px,2vw,28px);font-weight:900;box-shadow:0 5px 0 #1687aa;white-space:nowrap}.canvas{width:100%;height:100%;touch-action:none;user-select:none}.guide{fill:none;stroke:#bfd6e2;stroke-width:1.4;stroke-dasharray:2 3;opacity:.32}.reveal{opacity:0;transition:opacity .7s;filter:drop-shadow(0 4px 5px #38527b44)}.reveal.show{opacity:.9}.drawn{fill:none;stroke:#ef4f91;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}.rubber{fill:none;stroke:#fff;stroke-width:6;stroke-linecap:round;stroke-linejoin:round}.preview{stroke:#f8a8ca;stroke-width:1.7;stroke-dasharray:2 2}.dot{fill:#fff;stroke:#26385a;stroke-width:1.1}.dot.current{fill:#ffe159;stroke:#e34d8e;stroke-width:1.8;animation:pulse 1s infinite}.dot.done{fill:#63dfc2;stroke:#258f7a}.num{font-size:4.2px;font-weight:900;fill:#26385a;text-anchor:middle;dominant-baseline:middle;pointer-events:none}.num.done{opacity:.35}@keyframes pulse{50%{r:3.7}}.tools{min-height:83px}.tools b{color:#65f4d3}.hint{min-width:280px;font-weight:900}.win .stars{font-size:75px}@media(max-height:650px) and (orientation:landscape){.game{padding:5px;gap:4px}.hud,.tools{padding-top:4px;padding-bottom:4px}.book{height:77vh;padding:6px}.title{padding:2px 15px}.tools{min-height:58px}}@media(max-aspect-ratio:4/3){body{overflow:auto}.screen{height:auto;min-height:100dvh}.game{grid-template-rows:auto auto auto}.hud,.tools{flex-wrap:wrap;padding:8px 70px 8px 12px}.book{height:68vh;min-height:540px}.hint{min-width:0}}
.game .book{height:100%;max-height:780px;min-height:0}
@media(max-height:650px) and (orientation:landscape){.game .book{height:100%}}