@font-face{font-family:Lilita;src:url(/fonts/LilitaOne.ttf);font-display:swap}@font-face{font-family:KanitB;src:url(/fonts/Kanit-Bold.ttf);font-weight:700;font-display:swap}@font-face{font-family:Mali;src:url(/fonts/Mali-Bold.ttf);font-weight:700;font-display:swap}@font-face{font-family:KanitM;src:url(/fonts/Kanit-Medium.ttf);font-weight:500;font-display:swap}:root{--ink:#5b3a1b;--card:#fff8e1;--edge:#f2c14e}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{height:100%;color:var(--ink);-webkit-user-select:none;user-select:none;touch-action:none;overscroll-behavior:none;background:#6fc04b;margin:0;font-family:KanitM,Lilita,sans-serif;overflow:hidden}#app{background:#6fc04b 50%/cover no-repeat;position:fixed;inset:0}#app.bg1{background-image:url(/art/bg/bg1.webp)}#app.bg2{background-image:url(/art/bg/bg2.webp)}.screen{width:min(100%,560px);padding:max(10px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));flex-direction:column;align-items:center;margin:0 auto;animation:.25s fadein;display:flex;position:absolute;inset:0}@keyframes fadein{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}img{-webkit-user-drag:none;pointer-events:none}.btn{appearance:none;font:inherit;color:#fff;cursor:pointer;text-shadow:0 2px #00000040;background:linear-gradient(#ffb04a,#ff7a1a);border:0;border-radius:26px;padding:12px 22px;font-family:Lilita,KanitB,sans-serif;font-size:24px;transition:transform 80ms,box-shadow 80ms;box-shadow:0 6px #c4560b,0 10px 14px #00000040,inset 0 3px #ffffff73}.btn:active{transform:translateY(5px);box-shadow:0 1px #c4560b,0 3px 6px #00000040,inset 0 3px #ffffff73}.btn.round{border-radius:50%;place-items:center;width:58px;height:58px;padding:0;font-size:28px;display:grid}.btn.green{background:linear-gradient(#78e275,#2fa84b);box-shadow:0 6px #1c7a33,0 10px 14px #00000040,inset 0 3px #ffffff73}.btn.blue{background:linear-gradient(#6ec6ff,#2f86e0);box-shadow:0 6px #1c5fb0,0 10px 14px #00000040,inset 0 3px #ffffff73}.btn.pink{background:linear-gradient(#ff9ec4,#ee5a96);box-shadow:0 6px #b83068,0 10px 14px #00000040,inset 0 3px #ffffff73}.btn.big{border-radius:36px;padding:16px 44px;font-size:38px}.btn[disabled]{opacity:.4;pointer-events:none}.title{text-align:center;justify-content:center;gap:8px}.logo{letter-spacing:2px;gap:4px;margin-top:2vh;font-family:Lilita,sans-serif;font-size:clamp(88px,28vw,150px);line-height:.95;display:flex}.logo span{text-shadow:0 6px #00000040;-webkit-text-stroke:6px #fff;paint-order:stroke fill;animation:2.4s ease-in-out infinite bob;display:inline-block}.logo span:first-child{color:#ff4d4d}.logo span:nth-child(2){color:#ffb020;animation-delay:.25s}.logo span:nth-child(3){color:#2f86e0;animation-delay:.5s}@keyframes bob{50%{transform:translateY(-10px)rotate(-3deg)}}.sub{color:#fff;text-shadow:0 3px #00000059;margin-bottom:4px;font-family:KanitB,sans-serif;font-size:26px}.hero{object-fit:contain;filter:drop-shadow(0 10px 8px #00000040);width:min(62vw,270px);max-height:34vh;animation:3s ease-in-out infinite bob}.kidlink{left:12px;top:max(10px, env(safe-area-inset-top));color:var(--ink);background:#fff8e1;border-radius:20px;padding:8px 14px;font-size:16px;text-decoration:none;position:absolute;box-shadow:0 4px #0003}.top{align-items:center;gap:10px;width:100%;display:flex}.top .grow{text-align:center;color:#fff;text-shadow:0 3px #00000059;flex:1;font-family:Lilita,sans-serif;font-size:34px}.map .panel{border:4px solid var(--edge);touch-action:pan-y;background:#fff8e1e0;border-radius:30px;flex:1;grid-template-columns:repeat(3,1fr);align-content:start;gap:10px;width:100%;margin:12px 0 4px;padding:12px;display:grid;overflow:auto;box-shadow:0 8px #0000002e}.tile{color:#fff;cursor:pointer;border:0;border-radius:22px;padding:0;font-family:Lilita;display:block;position:relative;box-shadow:0 5px #00000040,inset 0 3px #fff6}.tile:before{content:"";padding-top:112%;display:block}.tile:active{transform:translateY(4px);box-shadow:0 1px #00000040,inset 0 3px #fff6}.tile b{text-shadow:0 3px #0000004d;z-index:1;font-size:42px;font-weight:400;position:absolute;top:2px;left:12px}.tile>img{object-fit:contain;filter:drop-shadow(0 4px 3px #00000040);width:72%;height:66%;position:absolute;top:10%;left:14%}.tile .st{justify-content:center;gap:3px;display:flex;position:absolute;bottom:5px;left:0;right:0}.tile .st img{object-fit:contain;width:20px;height:20px}.pic{background:var(--card);border:4px solid var(--edge);cursor:pointer;border-radius:26px;align-items:center;gap:12px;margin-top:8px;padding:6px 18px 6px 8px;display:flex;box-shadow:0 6px #0000002e}.pic img{object-fit:contain;width:clamp(70px,20vw,96px);height:clamp(70px,20vw,96px)}.pic .w{font-family:Lilita,sans-serif;font-size:clamp(30px,8vw,40px);line-height:1}.pic .t{opacity:.8;font-family:KanitB,sans-serif;font-size:18px}.boardwrap{flex:1;place-items:center;width:100%;min-height:0;padding:6px 0;display:grid;container-type:size}.board{background:#fff8e1b8;border:4px solid #ffffffe6;border-radius:36px;width:min(100cqw,100cqh);height:min(100cqw,100cqh);position:relative;box-shadow:0 8px #00000029,inset 0 0 40px #ffffffb3}.board canvas{touch-action:none;border-radius:32px;width:100%;height:100%;position:absolute;inset:0}.bar{justify-content:center;align-items:center;gap:14px;padding:4px 0 2px;display:flex}.modal{z-index:20;background:#00280073;place-items:center;animation:.2s fadein;display:grid;position:absolute;inset:0}.card{background:var(--card);border:5px solid var(--edge);text-align:center;border-radius:36px;width:min(86vw,380px);padding:16px 18px 20px;animation:.35s cubic-bezier(.2,1.4,.4,1) pop;box-shadow:0 10px #00000040}@keyframes pop{0%{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}.card .bun{object-fit:contain;width:150px;height:150px;animation:1.4s ease-in-out infinite bob}.card h2{color:#e8590c;margin:2px 0 6px;font-family:Lilita,sans-serif;font-size:36px}.card .stars{justify-content:center;gap:6px;margin:4px 0 10px;display:flex}.card .stars img{object-fit:contain;width:54px;height:54px;animation:.5s both starin}.card .stars img:nth-child(2){animation-delay:.15s}.card .stars img:nth-child(3){animation-delay:.3s}@keyframes starin{0%{transform:scale(0)rotate(-90deg)}to{transform:none}}.card .row{justify-content:center;gap:12px;display:flex}#confetti{z-index:30;pointer-events:none;width:100%;height:100%;position:fixed;inset:0}.home{justify-content:center;gap:12px}.home .hero{max-height:22vh;margin-bottom:-6px}.home .sub{font-size:24px}.gcard{cursor:pointer;border:0;border-radius:34px;align-items:center;gap:6px;width:100%;max-width:440px;height:clamp(84px,15vh,120px);padding:0 14px 0 18px;transition:transform 80ms;animation:.3s both fadein;display:flex;position:relative;box-shadow:0 7px #00000038,0 12px 16px #0000002e,inset 0 4px #ffffff8c}.gcard:active{transform:translateY(5px);box-shadow:0 2px #00000038,inset 0 4px #ffffff8c}.gcard.yellow{background:linear-gradient(#ffe36e,#ffc93c)}.gcard.pink{background:linear-gradient(#ffb3cf,#ff8ab4);animation-delay:80ms}.gcard.blue{background:linear-gradient(#9fdcff,#5cb8f5);animation-delay:.16s}.glyphs{gap:2px;font-size:clamp(44px,12vw,64px);line-height:1;display:flex}.glyphs i{-webkit-text-stroke:5px #fff;paint-order:stroke fill;text-shadow:0 4px #0003;font-style:normal}.glyphs.latin{font-family:Lilita,sans-serif}.glyphs.thai{font-family:Mali,KanitB,sans-serif;font-weight:700}.glyphs i:first-child{color:#ff4d4d}.glyphs i:nth-child(2){color:#2fa84b}.glyphs i:nth-child(3){color:#7c4dff}.gpic{object-fit:contain;filter:drop-shadow(0 4px 3px #00000040);max-width:26%;height:78%}.gcard .gst{color:#fff;text-shadow:0 2px #0000004d;font-family:Lilita,sans-serif;font-size:14px;position:absolute;bottom:6px;left:22px}.gcard .play{color:#fff;background:linear-gradient(#78e275,#2fa84b);border-radius:50%;flex:none;place-items:center;width:62px;height:62px;margin-left:auto;font-size:30px;display:grid;box-shadow:0 5px #1c7a33,inset 0 3px #ffffff73}.top .grow.thai,.pic .w.thai,.tile.th b{font-family:Mali,KanitB,sans-serif;font-weight:700}.top .grow.thai{font-size:30px}.tile.th b{font-size:38px;line-height:1.3;top:0}.map .sec{color:var(--ink);grid-column:1/-1;padding:4px 6px 0;font-family:KanitB,sans-serif;font-size:20px}.tile.num>img{width:56%;height:52%;top:22%;left:34%}.tile.num .big{color:#ffffffe6;-webkit-text-stroke:3px #0000001f;place-items:center;font-family:Lilita;font-size:64px;display:grid;position:absolute;inset:14% 0 22%}.tile.write b{display:none}.pic .dots{flex-wrap:wrap;justify-content:center;width:clamp(70px,22vw,110px);display:flex}.pic .dots img{width:30%;height:auto}.pic .dots .zero{opacity:.7;font-family:KanitB;font-size:16px}.count .sign{background:var(--card);text-align:center;border:5px solid #c8843a;border-radius:28px;min-width:150px;margin-top:8px;padding:2px 22px 6px;box-shadow:0 7px #0003}.count .sign b{color:#ee3d6a;font-family:Lilita,sans-serif;font-size:64px;font-weight:400;line-height:1.05;display:block}.count .sign b.bump{animation:.3s bump}@keyframes bump{40%{transform:scale(1.35)}}.count .sign span{font-family:KanitB,sans-serif;font-size:17px}.field{grid-template-columns:repeat(var(--cols), 1fr);flex:1;align-content:center;justify-items:center;gap:6px;width:100%;min-height:0;padding:10px 4px;display:grid}.it{aspect-ratio:1;cursor:pointer;background:0 0;border:0;width:min(100%,120px);padding:0;animation:.35s cubic-bezier(.2,1.4,.4,1) both popin;position:relative}.it img{object-fit:contain;filter:drop-shadow(0 5px 3px #00000040);width:100%;height:100%}.it.on img{animation:.4s hop}.it .badge{color:#fff;background:linear-gradient(#78e275,#2fa84b);border-radius:17px;place-items:center;min-width:34px;height:34px;padding:0 6px;font-family:Lilita,sans-serif;font-size:22px;display:none;position:absolute;top:-4px;right:0;box-shadow:0 3px #1c7a33}.it.on .badge{animation:.3s cubic-bezier(.2,1.4,.4,1) popin;display:grid}@keyframes popin{0%{transform:scale(0)}to{transform:none}}@keyframes hop{40%{transform:translateY(-14px)scale(1.08)}}.answers{justify-content:center;gap:14px;padding:6px 0 4px;display:none}.answers.show{animation:.25s fadein;display:flex}.ansb{border-radius:28px;min-width:92px;height:92px;padding:0 12px;font-size:52px}.ansb.shake{animation:.4s shake}.ansb.right{transform:scale(1.12)}@keyframes shake{20%,60%{transform:translate(-8px)}40%,80%{transform:translate(8px)}}body.kid .top{padding-left:68px}body.kid .kidlink{left:76px}@media (orientation:landscape) and (max-height:560px){.screen{padding-top:8px;padding-bottom:8px}.logo{-webkit-text-stroke-width:4px;margin-top:0;font-size:clamp(56px,25vh,120px)}.sub{margin-bottom:0;font-size:20px}.hero{max-height:30vh}.btn.big{padding:10px 36px;font-size:28px}.top .grow{font-size:28px}.btn.round{width:48px;height:48px;font-size:22px}.map .panel{grid-template-columns:repeat(6,1fr);gap:8px}.tile b{font-size:30px;left:8px}.tile .st img{width:14px;height:14px}.screen.play{grid-template-rows:auto auto 1fr auto;grid-template-columns:minmax(200px,38%) 1fr;align-items:start;column-gap:12px;width:min(100%,1000px);display:grid}.play .top{grid-area:1/1}.play .pic{grid-area:2/1;align-self:start;width:100%;margin-top:4px}.play .pic img{width:64px;height:64px}.play .pic .w{font-size:28px}.play .bar{flex-wrap:wrap;grid-area:4/1;align-self:end;gap:8px}.play .boardwrap{grid-area:1/2/5;height:100%;padding:0}.card{padding:8px 14px 12px}.card .bun{width:90px;height:90px}.card h2{font-size:28px}.card .stars img{width:40px;height:40px}.home{grid-template-rows:auto 1fr;grid-template-columns:1fr 1fr 1fr;align-content:center;width:min(100%,1000px);display:grid}.home .hero{display:none}.home .sub{grid-column:1/-1}.gcard{flex-direction:column;justify-content:center;gap:2px;height:70vh;padding:8px}.glyphs{font-size:clamp(40px,16vh,72px)}.gcard .play{width:50px;height:50px;margin:0}.gpic{max-width:60%;height:30%}.gcard .gst{text-align:center;bottom:8px;left:0;right:0}.screen.count{grid-template-rows:auto auto 1fr;grid-template-columns:minmax(180px,30%) 1fr;column-gap:12px;width:min(100%,1000px);display:grid}.count .top{grid-column:1}.count .sign{grid-area:2/1;align-self:start}.count .answers{flex-wrap:wrap;grid-area:3/1;align-self:center}.count .field{grid-area:1/2/4}.ansb{min-width:70px;height:70px;font-size:40px}}