:root{--font-display:"Lilita One", "Arial Rounded MT Bold", system-ui, sans-serif;--font-body:"Nunito", system-ui, sans-serif;--ink:#14284a;--sky-top:#3aa6ff;--sky-mid:#7fd0ff;--sky-bottom:#c4f1ff;--gold-hi:#fff49a;--gold:#ffc61a;--gold-lo:#ff9500;--gold-edge:#6b3300;--red-hi:#ff8a7a;--red:#ff4b3e;--red-lo:#d1261c;--red-edge:#6e0f0a;--blue-edge:#0e3f7a;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--bounce:cubic-bezier(.3, 1.6, .5, 1)}html:lang(th){--font-display:"Noto Sans Thai", system-ui, sans-serif;--font-body:"Noto Sans Thai", system-ui, sans-serif}*,:before,:after{box-sizing:border-box}[hidden]{display:none!important}html{touch-action:manipulation;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}html,body{background:var(--sky-top);height:100%;margin:0;overflow:hidden}body{font-family:var(--font-body);color:var(--ink);-webkit-font-smoothing:antialiased;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;overscroll-behavior:none}#app{position:fixed;inset:0;overflow:hidden}.backdrop{background:linear-gradient(#1b97e6 0%,#4cc0f2 32%,#9ee6f9 45%,#cdf4ff 57%);position:absolute;inset:0;overflow:hidden}.backdrop:after{content:"";background:radial-gradient(120% 90% at 50% 38%,#0000 55%,#08285a4d 100%);position:absolute;inset:0}.backdrop__rays{background:repeating-conic-gradient(#ffffff21 0deg 8deg,#0000 8deg 22deg);width:180vmax;height:180vmax;margin-top:-90vmax;margin-left:-90vmax;animation:90s linear infinite spin;position:absolute;top:-10vmax;left:50%;-webkit-mask-image:radial-gradient(circle,#000 0%,#0000 55%);mask-image:radial-gradient(circle,#000 0%,#0000 55%)}.backdrop__sun{background:radial-gradient(circle,#ffffe6f2 0%,#fffac866 28%,#fff0 62%);width:90vmin;height:90vmin;position:absolute;top:-30vmin;left:50%;transform:translate(-50%)}.cloud{top:var(--y);width:var(--w);height:calc(var(--w) * .3);opacity:.95;animation:drift var(--t) linear var(--d) infinite;background:#fff;border-radius:999px;position:absolute;left:0;box-shadow:inset 0 -.6vmax #96c8f066}.cloud:before,.cloud:after{content:"";background:#fff;border-radius:50%;position:absolute}.cloud:before{width:46%;height:150%;bottom:25%;left:14%}.cloud:after{width:34%;height:115%;bottom:32%;left:50%}.backdrop__sea{background:repeating-linear-gradient(#ffffff2e 0 3px,#0000 3px 34px),linear-gradient(#8fe9ee 0%,#3fd0dc 16%,#12a6d6 58%,#0a78b8 100%);height:43%;position:absolute;bottom:0;left:0;right:0}.screen{z-index:1;padding:calc(24px + var(--safe-top)) 16px calc(24px + var(--safe-bottom));text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:clamp(18px,4vh,36px);display:flex;position:absolute;inset:0}.screen--enter{z-index:2;animation:.45s cubic-bezier(.2,.9,.3,1.15) both screen-in}.screen--leave{z-index:1;pointer-events:none;animation:.28s ease-in both screen-out}.btn{--hi:#a8ff70;--mid:#5fd22f;--lo:#3aa617;--edge:#1d5c10;appearance:none;cursor:pointer;font-family:var(--font-display);letter-spacing:.02em;color:#fff;text-shadow:0 .08em 0 var(--edge);background:linear-gradient(180deg, var(--hi) 0%, var(--mid) 55%, var(--lo) 100%);box-shadow:0 0 0 .12em var(--edge), inset 0 -.16em 0 #00000024, 0 .24em 0 .12em var(--edge), 0 .5em 1em #001e5059;border:none;border-radius:.6em;padding:.4em 1.3em .5em;font-size:clamp(20px,5.5vw,28px);transition:translate 80ms,scale 80ms,box-shadow 80ms;position:relative;overflow:hidden}.btn:before{content:"";pointer-events:none;background:linear-gradient(#ffffff8c,#ffffff14);border-radius:.45em .45em .6em .6em;height:42%;position:absolute;top:.12em;left:.3em;right:.3em}.btn:after{content:"";pointer-events:none;background:linear-gradient(90deg,#0000,#ffffff8c,#0000);width:30%;animation:3.2s ease-in-out 1.6s infinite shine;position:absolute;top:-50%;bottom:-50%;left:-40%;transform:skew(-20deg)}.btn:active,.btn.is-pressed{box-shadow:0 0 0 .12em var(--edge), inset 0 -.16em 0 #00000024, 0 .06em 0 .12em var(--edge), 0 .2em .5em #001e5059;translate:0 .18em;scale:.97}.btn--green{--hi:#a8ff70;--mid:#5fd22f;--lo:#3aa617;--edge:#1d5c10}.btn--blue{--hi:#9fe3ff;--mid:#3ea6ff;--lo:#1f7ae0;--edge:var(--blue-edge)}.btn--gold{--hi:var(--gold-hi);--mid:var(--gold);--lo:var(--gold-lo);--edge:var(--gold-edge)}.btn--red{--hi:var(--red-hi);--mid:var(--red);--lo:var(--red-lo);--edge:var(--red-edge)}.btn--orange{--hi:#ffd08a;--mid:#ff9a2f;--lo:#e66b16;--edge:#8a3908}.btn--big{padding:.3em 1.5em .42em;font-size:clamp(24px,min(9vw,8vh),46px)}.menu{padding-bottom:calc(10vh + var(--safe-bottom));gap:clamp(28px,8vh,72px)}.menu__scene{z-index:-1;background:linear-gradient(#1b97e6 0%,#4cc0f2 32%,#9ee6f9 45%,#cdf4ff 57%,#5fcfe6 75%,#2aa8d8 100%);position:absolute;inset:0;overflow:hidden}.menu__scene .menu__canvas{opacity:0;transition:opacity .9s ease-out}.menu__scene.is-ready .menu__canvas{opacity:1}.menu__canvas{object-fit:cover;width:100%;height:100%;display:block;position:absolute;inset:0}.logo{isolation:isolate;flex-direction:column;align-items:center;margin:0;font-weight:400;animation:4.5s ease-in-out 1.6s infinite logo-float;display:flex;position:relative}.logo:before{content:"";z-index:-1;aspect-ratio:1.5;background:radial-gradient(closest-side,#ffffeb8c,#ffffeb00);width:160%;animation:1s ease-out .4s both fade-in;position:absolute;top:42%;left:50%;translate:-50% -50%}.logo__mark{font-family:var(--font-display);letter-spacing:.02em;font-size:clamp(84px,min(34vw,25vh),220px);line-height:1;display:flex}.logo__letter{animation:letter-drop .75s var(--bounce) calc(.15s + var(--i) * .1s) both;display:inline-block;position:relative}.logo__sizer{visibility:hidden;display:block}.logo__svg{filter:drop-shadow(0 .2em .12em #001e5059);width:100%;height:100%;position:absolute;inset:0;overflow:visible}.logo__svg text{font-family:var(--font-display);letter-spacing:0;font-size:1em}.logo__outline,.logo__depth{stroke-width:.12em;stroke-linejoin:round}.logo__outline{fill:var(--gold-edge);stroke:var(--gold-edge)}.logo__depth{fill:#4a2000;stroke:#4a2000}.logo__fill{fill:url(#logo-gold)}.logo__defs{width:0;height:0;position:absolute}.logo__plate{z-index:1;font-family:var(--font-display);letter-spacing:.18em;text-transform:uppercase;color:#fff;margin-top:-.2em;font-size:clamp(17px,min(5.8vw,5vh),32px);animation:.6s cubic-bezier(.2,.9,.3,1.2) .55s both plate-in;position:relative}.logo__plate>span{text-shadow:0 .08em #000a2899;box-shadow:inset 0 1px 0 #ffffff4d, 0 0 0 .09em var(--gold), 0 0 0 .18em #0b1f45, 0 .35em .7em #001e5059;background:linear-gradient(#2a5ba3 0%,#173a73 55%,#0f2a57 100%);border-radius:.35em;padding:.3em 1.1em .36em 1.28em;display:block}.logo__plate:before,.logo__plate:after{content:"";z-index:1;background:linear-gradient(135deg, var(--gold-hi), var(--gold-lo));width:.55em;height:.55em;position:absolute;top:50%;transform:translateY(-50%)rotate(45deg);box-shadow:0 0 0 .09em #0b1f45}.logo__plate:before{left:-.3em}.logo__plate:after{right:-.3em}.menu__buttons{flex-direction:column;align-items:center;gap:26px;display:flex}.menu__install{top:calc(14px + var(--safe-top));right:calc(16px + env(safe-area-inset-right,0px));max-width:45%;min-height:44px;font-size:16px;position:absolute}.install-help,.unstuck-confirm{color:#14284a;width:min(380px,85vw);font-family:var(--font-body);background:#effaff;border:3px solid #14284a;border-radius:18px;padding:24px;font-size:18px}.install-help::backdrop,.unstuck-confirm::backdrop{background:#14284aaa}.install-help p,.unstuck-confirm p{line-height:1.5}.install-help .btn,.unstuck-confirm .btn{font-size:18px}.unstuck-confirm strong{font-size:22px}.unstuck-confirm__busy{color:#b3261e}.unstuck-confirm__buttons{justify-content:center;gap:12px;display:flex}.menu__languages{bottom:calc(14px + var(--safe-bottom));justify-content:center;gap:12px;max-width:100%;padding:0 16px;display:flex;position:absolute}.menu__language{min-width:90px;min-height:44px;padding:8px 18px;font-size:18px;line-height:1.5}.menu__language:lang(th){font-family:Noto Sans Thai,system-ui,sans-serif}.menu__language.is-active{--hi:#a8ff70;--mid:#5fd22f;--lo:#3aa617;--edge:#1d5c10}.menu__language:focus-visible{outline-offset:5px;outline:3px solid #fff}@media (height<=450px){.menu{padding-bottom:calc(70px + var(--safe-bottom));gap:16px}.menu__buttons{gap:12px}.menu__play{padding:10px 32px;font-size:26px}}.menu__new{--hi:#a6f0dc;--mid:#3fc2a6;--lo:#23917f;--edge:#0f4f48;min-width:min(70vw,300px);animation:pop-in .55s var(--bounce) 1s both}.menu__play{min-width:min(70vw,300px);animation:pop-in .55s var(--bounce) .85s both, breathe 1.8s ease-in-out 1.6s infinite}.rotate-hint{display:none}@media (orientation:portrait) and (pointer:coarse){.rotate-hint{z-index:20000;text-align:center;background:linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 60%, var(--sky-bottom) 100%);flex-direction:column;justify-content:center;align-items:center;gap:18px;padding:24px;display:flex;position:fixed;inset:0}.rotate-hint svg{filter:drop-shadow(0 6px #001e5040);width:96px;height:96px;animation:2.2s ease-in-out infinite rotate-hint}.rotate-hint p{font-family:var(--font-display);color:#fff;text-shadow:0 3px #0e3f7a8c;margin:0;font-size:26px}}@keyframes rotate-hint{0%,25%{transform:none}60%,to{transform:rotate(-90deg)}}@keyframes fade-in{0%{opacity:0}}@keyframes screen-in{0%{opacity:0;transform:scale(1.08)}to{opacity:1;transform:none}}@keyframes screen-out{to{opacity:0;transform:scale(.94)}}@keyframes letter-drop{0%{opacity:0;transform:translateY(-120%)scale(.6,1.4)}60%{opacity:1;transform:translateY(0)scale(1.25,.75)}to{transform:none}}@keyframes logo-float{0%,to{transform:none}50%{transform:translateY(-2%)}}@keyframes plate-in{0%{opacity:0;transform:scaleX(.3)}60%{opacity:1;transform:scaleX(1.05)}to{opacity:1;transform:none}}@keyframes pop-in{0%{opacity:0;transform:scale(.3)}to{opacity:1;transform:none}}@keyframes breathe{0%,to{transform:none}50%{transform:scale(1.05)}}@keyframes shine{0%,60%{left:-40%}to{left:130%}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes drift{0%{transform:translate(-40vmax)}to{transform:translate(calc(100vw + 10vmax))}}@media (prefers-reduced-motion:reduce){*,:before,:after{animation-duration:.01ms!important;animation-iteration-count:1!important}}.loading{z-index:10000;padding:calc(24px + var(--safe-top)) 16px calc(24px + var(--safe-bottom));background:linear-gradient(#0000 0 57%,#3fd0dc 57.2%,#12a6d6 80%,#0a78b8 100%),linear-gradient(#1b97e6 0%,#4cc0f2 32%,#cdf4ff 57%);flex-direction:column;justify-content:center;align-items:center;gap:clamp(22px,5vh,40px);animation:.35s ease-out both loading-in;display:flex;position:fixed;inset:0;overflow:hidden}.loading__glow{aspect-ratio:1;pointer-events:none;background:repeating-conic-gradient(#ffffff21 0deg 12deg,#fff0 12deg 24deg);width:150vmax;animation:24s linear infinite loading-spin;position:absolute;top:46%;left:50%;translate:-50% -50%;-webkit-mask-image:radial-gradient(closest-side,#000 0%,#0000 70%);mask-image:radial-gradient(closest-side,#000 0%,#0000 70%)}.loading--bay{background:var(--loading-bg) center / cover no-repeat, #4cc0f2}.loading .logo__mark{font-size:clamp(72px,min(28vw,20vh),170px)}.loading .logo__plate{font-size:clamp(15px,min(5vw,4.4vh),28px)}.loading__bar{width:min(100%,340px);animation:pop-in .5s var(--bounce) .15s both;padding-top:80px;position:relative}.loading__track{height:34px;box-shadow:0 0 0 4px var(--ink), inset 0 5px 0 #0000004d, 0 8px 0 4px var(--ink), 0 16px 24px #03183459;background:#1c3a66;border-radius:999px;position:relative;overflow:hidden}.loading__fill{background:linear-gradient(180deg, var(--gold-hi) 0%, var(--gold) 45%, var(--gold-lo) 100%);will-change:transform;border-radius:999px;position:absolute;inset:0;overflow:hidden;transform:translate(-100%);box-shadow:inset 0 -5px #6b33004d,inset 0 4px #fff9}.loading__stripes{background:repeating-linear-gradient(-45deg,#ffffff47 0 10px,#fff0 10px 20px);animation:.6s linear infinite loading-stripes;position:absolute;inset:0 -40px 0 0}.loading__rider{filter:drop-shadow(0 3px #001e3c40);width:70px;height:88px;margin-left:-35px;position:absolute;top:0;left:0}.loading__hero{background-repeat:no-repeat;background-size:calc(var(--frames) * 100%) 100%;width:100%;height:100%;animation:loading-run var(--cycle,.8s) steps(var(--frames)) infinite}.loading__hero--plain{background:0 0;place-items:end center;font-size:56px;line-height:1;animation:.3s ease-in-out infinite alternate loading-hop;display:grid;transform:scaleX(-1)}.loading__percent{height:34px;font-family:var(--font-display);color:#fff;text-shadow:0 2px 0 var(--ink), 0 -1px 0 var(--ink), 1.5px 0 0 var(--ink), -1.5px 0 0 var(--ink);font-variant-numeric:tabular-nums;pointer-events:none;place-items:center;font-size:20px;display:grid;position:absolute;bottom:0;left:0;right:0}.loading__text{color:#fff;text-shadow:0 2px #0e3f7a8c;min-height:1.4em;font-size:clamp(16px,4.6vw,20px);font-weight:900;position:relative}.loading__text--new{animation:pop-in .4s var(--bounce) both}.loading--full .loading__bar{animation:loading-full .3s var(--bounce) both}.loading--full .loading__hero{animation:loading-cheer .3s var(--bounce) both}.loading--leave{pointer-events:none;animation:.45s ease-in both loading-out}@keyframes loading-in{0%{opacity:0}}@keyframes loading-out{to{opacity:0;transform:scale(1.15)}}@keyframes loading-spin{to{rotate:360deg}}@keyframes loading-stripes{to{transform:translate(-28.28px)}}@keyframes loading-run{to{background-position-x:calc(var(--frames) * -70px)}}@keyframes loading-hop{to{translate:0 -5px}}@keyframes loading-full{40%{transform:scale(1.1)}}@keyframes loading-cheer{50%{transform:translateY(-18px)scale(1.25)rotate(-10deg)}}