@font-face{font-family:"Kanit";src:url("kanit-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Kanit";src:url("kanit-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Noto Sans Thai";src:url("noto-sans-thai-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Noto Sans Thai";src:url("noto-sans-thai-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
*{box-sizing:border-box}
html{background:var(--bg)}
html,body{margin:0;padding:0;max-width:100%;overflow-x:hidden}
body{font-family:"Noto Sans Thai","Kanit",system-ui,sans-serif;background:var(--bg);color:var(--ink);line-height:1.55;word-break:keep-all;overflow-wrap:normal;line-break:strict;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;height:auto;display:block}
a{color:inherit}
.skip{position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip:focus{left:12px;top:12px;width:auto;height:auto;padding:.5rem 1rem;background:#fff;color:#000;z-index:80;border-radius:8px}
h1,h2,h3,p,li,dt,dd{overflow:visible}
h1,h2{font-family:"Kanit","Noto Sans Thai",sans-serif;font-weight:700;letter-spacing:0;line-height:1.45;padding-top:.18em;margin:0 0 .55em;text-wrap:balance}
.lock{white-space:nowrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:3.35rem;padding:.9rem 1.3rem .8rem 1.6rem;border:0;border-radius:999px;font-family:"Kanit","Noto Sans Thai",sans-serif;font-weight:700;font-size:1.125rem;line-height:1.5;text-decoration:none;white-space:nowrap;cursor:pointer;position:relative;isolation:isolate;overflow:hidden;animation:breathe 2.4s ease-in-out infinite}
.btn:hover,.btn:focus-visible{filter:brightness(1.05);outline:3px solid var(--focus);outline-offset:4px}
.btn .ic{width:1.5rem;height:1.5rem;flex:0 0 auto}
.btn::after{content:"";position:absolute;inset:-20%;background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.7) 50%,transparent 58%);transform:translateX(-120%);animation:sweep 2.8s ease-in-out infinite;pointer-events:none;z-index:1}
.btn > *{position:relative;z-index:2}
@keyframes sweep{0%,55%{transform:translateX(-120%)}80%,100%{transform:translateX(120%)}}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes reelspin{from{transform:translateY(0)}to{transform:translateY(-50%)}}
.rise{animation:rise .7s ease both}
.d1{animation-delay:.08s}.d2{animation-delay:.18s}.d3{animation-delay:.3s}

.stage{position:relative;overflow:hidden;isolation:isolate}
.stage .bg,.stage .bg img{position:absolute;inset:0;width:100%;height:100%;display:block}
.stage .bg img{object-fit:cover}
.layer{position:absolute;z-index:3;line-height:0}
.layer picture,.layer img{display:block;width:100%;height:auto}
.fly{animation:bob 5.2s ease-in-out infinite}
.fly.f2{animation-duration:6.4s;animation-delay:-1.6s}
.fly.f3{animation-duration:4.6s;animation-delay:-.8s}
.fly.f4{animation-duration:5.8s;animation-delay:-2.6s}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.2%)}}
.floorshadow{position:absolute;z-index:2;aspect-ratio:12/1;border-radius:50%;pointer-events:none;background:radial-gradient(ellipse at center,var(--shadow),transparent 70%);filter:blur(2px)}

.machine{position:relative;container-type:inline-size;line-height:0}
.machine .reels{position:absolute;inset:0;pointer-events:none}
.reel{position:absolute;top:var(--rt);height:var(--rh);overflow:hidden;border-radius:2.2cqw;background:linear-gradient(90deg,#050708,#151c1a 50%,#050708);box-shadow:inset 0 .6cqw 1.4cqw rgba(0,0,0,.7),inset 0 -.6cqw 1.4cqw rgba(0,0,0,.6)}
.reel.r1{left:var(--l1);width:var(--w1)}.reel.r2{left:var(--l2);width:var(--w2)}.reel.r3{left:var(--l3);width:var(--w3)}
.reel::before,.reel::after{content:"";position:absolute;left:0;right:0;height:22%;z-index:2;pointer-events:none}
.reel::before{top:0;background:linear-gradient(180deg,rgba(0,0,0,.72),transparent)}
.reel::after{bottom:0;background:linear-gradient(0deg,rgba(0,0,0,.72),transparent)}
.machine .strip{display:flex;flex-direction:column;height:400%;animation:reelspin 18s linear infinite}
.machine .s2{animation-duration:23.5s;animation-delay:-7.4s}
.machine .s3{animation-duration:29s;animation-delay:-13.2s}
.machine .sym{flex:0 0 calc(100% / 12);height:calc(100% / 12);display:flex;align-items:center;justify-content:center;font-family:"Kanit",sans-serif;font-weight:700;line-height:1}
.sym.seven{color:var(--seven);font-size:var(--sevfs,11cqw);text-shadow:0 0 1.6cqw var(--sevglow),0 .5cqw 0 var(--sevsh)}
.sym.bar{color:#fff;font-size:var(--barfs,4.2cqw);letter-spacing:.08em;text-shadow:0 0 1.2cqw var(--barglow)}
.sym.gem::before{content:"";width:var(--symw,38%);aspect-ratio:1;background:linear-gradient(135deg,var(--gem1),var(--gem2) 55%,var(--gem3));transform:rotate(45deg);border-radius:3px;box-shadow:0 0 10px var(--gemglow)}
.sym.coin::before{content:"";width:calc(var(--symw,38%) * 1.1);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff3c4,#ffd23a 45%,#b97a00);box-shadow:0 0 8px rgba(255,214,60,.7)}
.sym.chip::before{content:"";width:calc(var(--symw,38%) * 1.15);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,var(--chip) 0 38%,#fff 40% 48%,var(--chip) 50%);box-shadow:inset 0 0 0 .6cqw #fff,0 0 8px var(--chipglow)}
.sym.star::before{content:"";width:calc(var(--symw,38%) * 1.15);aspect-ratio:1;background:#ffe27a;clip-path:polygon(50% 0,61% 38%,100% 38%,68% 60%,80% 100%,50% 75%,20% 100%,32% 60%,0 38%,39% 38%);filter:drop-shadow(0 0 4px rgba(255,210,80,.9))}

.rain{position:absolute;inset:0;z-index:4;pointer-events:none;overflow:hidden}
.stage .rain{height:100%}
.cn{position:absolute;top:-8%;width:calc(var(--s) * clamp(14px,1.7vw,28px));aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff6c8 0 18%,#ffd23a 40%,#c98a00 75%,#8a5a00);box-shadow:inset 0 0 0 .14em #fff0a0,inset 0 0 0 .26em #d9a000,0 0 10px rgba(255,210,60,.6);animation:coinfall var(--d) linear var(--dl) infinite}
@keyframes coinfall{0%{transform:translate(0,0) scaleX(1);opacity:0}6%{opacity:1}25%{transform:translate(calc(var(--dx) * .25),30vh) scaleX(.15)}50%{transform:translate(calc(var(--dx) * .5),62vh) scaleX(1)}75%{transform:translate(calc(var(--dx) * .75),94vh) scaleX(.2)}100%{transform:translate(var(--dx),125vh) scaleX(1);opacity:1}}
.gm{position:absolute;top:-8%;width:calc(var(--s) * clamp(12px,1.4vw,22px));aspect-ratio:1;background:linear-gradient(135deg,var(--gem1),var(--gem2) 55%,var(--gem3));border-radius:3px;box-shadow:0 0 9px var(--gemglow);animation:gemfall var(--d) linear var(--dl) infinite}
@keyframes gemfall{0%{transform:translate(0,0) rotate(45deg);opacity:0}8%{opacity:1}100%{transform:translate(var(--dx),115vh) rotate(405deg);opacity:1}}
.sparks{position:absolute;inset:0;z-index:5;pointer-events:none}
.sp{position:absolute;width:calc(var(--s) * clamp(14px,1.6vw,26px));aspect-ratio:1;background:#fffbe6;clip-path:polygon(50% 0,59% 41%,100% 50%,59% 59%,50% 100%,41% 59%,0 50%,41% 41%);filter:drop-shadow(0 0 6px rgba(255,255,255,.95));animation:twinkle 2.8s ease-in-out var(--dl) infinite}
@keyframes twinkle{0%,100%{transform:scale(.2) rotate(0);opacity:0}45%{transform:scale(1) rotate(45deg);opacity:1}70%{transform:scale(.5) rotate(70deg);opacity:.5}}

.sign{position:relative;height:clamp(52px,5.6vw,82px);overflow:hidden}
.sign .bulbs{position:absolute;left:0;right:0;height:10px;background:radial-gradient(circle,#fff 0 28%,var(--bulb) 30% 46%,transparent 52%) 0 0/26px 10px repeat-x}
.sign .b-top{top:3px;animation:chase 1s steps(1) infinite}
.sign .b-bot{bottom:3px;animation:chase 1s steps(1) infinite reverse}
@keyframes chase{0%{background-position:0 0;opacity:1}50%{background-position:13px 0;opacity:.55}100%{background-position:26px 0;opacity:1}}
.sign .track{position:absolute;left:0;top:0;bottom:0;margin:0;padding:0;list-style:none;display:flex;align-items:center;gap:clamp(34px,5vw,80px);width:max-content;padding-inline:clamp(17px,2.5vw,40px);animation:ticker 40s linear infinite}
.sign li{display:flex;align-items:center;justify-content:center;width:clamp(28px,3.6vw,52px);height:clamp(28px,3.6vw,52px);font-size:clamp(22px,2.9vw,40px)}
.sign .sym{flex:none;width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-family:"Kanit",sans-serif;font-weight:700;line-height:1}
.sign .sym.seven{font-size:1em}
.sign .sym.bar{font-size:.46em;letter-spacing:.05em}
.sign .sym::before{width:70% !important}
.sign .star{width:100%;height:100%;background:#ffe27a;clip-path:polygon(50% 0,61% 38%,100% 38%,68% 60%,80% 100%,50% 75%,20% 100%,32% 60%,0 38%,39% 38%);filter:drop-shadow(0 0 8px rgba(255,210,80,.9))}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.bframe{position:absolute;inset:6px;z-index:6;pointer-events:none;border:2px solid var(--frame);border-radius:14px}
.bframe .bulbs{position:absolute;background:radial-gradient(circle,#fff 0 26%,var(--bulb) 30% 46%,transparent 52%)}
.bframe .h{left:8px;right:8px;height:10px;background-size:22px 10px;background-repeat:repeat-x;animation:chase 1.1s steps(1) infinite}
.bframe .v{top:8px;bottom:8px;width:10px;background-size:10px 22px;background-repeat:repeat-y;animation:chase 1.1s steps(1) infinite reverse}
.bframe .t{top:3px}.bframe .b{bottom:3px}.bframe .l{left:3px}.bframe .r{right:3px}
.hero{position:relative}
.dock{display:none}
.foot p{margin:0 0 .4rem;padding-top:.12em}

/* composed scene images */
.himg,.himg img{display:block;width:100%;height:auto}
.hero-art .himg,.gstage .himg{position:absolute;inset:0;height:100%}
.hero-art .himg img,.gstage .himg img{height:100%}
.mo{position:absolute;z-index:3;container-type:inline-size;pointer-events:none}
.mo .reels{position:absolute;inset:0}
.mo.wide{display:none}
@media (min-width:900px){.mo.wide{display:block}.mo.tall{display:none}}
.hero-art::before,.hero-art::after{display:none !important}
:root{--bg:#eef1ef;--ink:#12261b;--g:#06C755;--gd:#04a847;--dark:#12261b;--focus:#12261b;--shadow:rgba(8,60,30,.45);
 --rt:33.72%;--rh:30.9%;--l1:9.52%;--w1:19.84%;--l2:33.13%;--w2:20.04%;--l3:56.94%;--w3:20.04%;
 --seven:#ffd23a;--sevglow:rgba(255,210,60,.9);--sevsh:#a87400;--barglow:rgba(6,199,85,.95);
 --gem1:#c9ffe0;--gem2:#06C755;--gem3:#04703a;--gemglow:rgba(6,199,85,.85);--chip:#06C755;--chipglow:rgba(6,199,85,.8);
 --bulb:#fff;--frame:rgba(255,255,255,.9);--safe-dock:calc(4.9rem + env(safe-area-inset-bottom,0px))}
html{color-scheme:light}
.btn{color:var(--dark)}
.btn-white{background:#fff;box-shadow:0 0 0 3px rgba(18,38,27,.9),0 10px 26px rgba(8,60,30,.45)}
.btn-white .ic-bg{fill:var(--g)}.btn-white .ic{color:var(--dark)}
.btn-green{background:linear-gradient(180deg,#2de07c,#06C755);box-shadow:0 0 0 3px var(--dark),0 10px 26px rgba(6,199,85,.45)}
.btn-green .ic-bg{fill:var(--dark)}.btn-green .ic{color:#fff}
.btn{animation-name:breathe}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}

/* chat bubbles */
.bubble{position:relative;border-radius:22px;padding:.85rem 1.1rem .95rem;line-height:1.5}
.bubble::after{content:"";position:absolute;bottom:14px;width:16px;height:18px;background:inherit}
.bw{background:#fff;color:var(--dark);box-shadow:0 6px 18px rgba(8,60,30,.18)}
.bgr{background:var(--g);color:var(--dark);box-shadow:0 6px 18px rgba(6,160,70,.3)}
.bd{background:var(--dark);color:#fff}
.bubble h1,.bubble h2,.bubble h3,.bubble p{margin:0}
.bubble::after{left:-7px;clip-path:polygon(100% 0,100% 100%,0 70%);border-radius:0}
.msg.r .bubble::after,.hero-copy .bd::after{left:auto;right:-7px;clip-path:polygon(0 0,0 100%,100% 70%)}

/* hero */
.hero-art{aspect-ratio:3/4}
.hero-art .mark{z-index:7}
.hero-copy{padding:1.2rem 1.25rem 1.7rem;background:linear-gradient(180deg,#06C755,#05b84e);display:grid;gap:.8rem;justify-items:start}
.hero-copy .bw{border-bottom-left-radius:6px}
.hero-copy .bw::after{display:none}
.hero-copy h1{font-size:clamp(1.65rem,7vw,2.3rem);color:var(--dark);margin:0}
.hero-copy .amt{color:#05a345;white-space:nowrap}
.kick{display:inline-block;margin-bottom:.1rem;padding:.12rem .75rem 0;border-radius:999px;background:var(--g);color:var(--dark);font-family:"Kanit",sans-serif;font-weight:700;font-size:.85rem;line-height:1.7}
.hero-copy .bd{margin-left:14px;border-bottom-right-radius:6px}
.hero-copy .bd::after{display:none}
.hero-copy .bd p{font-size:1.05rem}
.hero-copy .btn{margin-top:.2rem}
@media (min-width:900px){
  .hero-art{aspect-ratio:16/9}
  .hero-copy{position:absolute;left:3.5%;top:50%;transform:translateY(-50%);width:26.5%;padding:0;z-index:6;background:none;justify-items:start}
  .hero-copy h1{font-size:clamp(1.8rem,2.8vw,3rem)}
  .hero-copy .bw{padding:1rem 1.4rem 1.15rem}
  .hero-copy .bw::after{display:block;left:22px;bottom:-14px;width:22px;height:16px;clip-path:polygon(0 0,100% 0,0 100%)}
  .hero-copy .bd{margin-left:0}
  .mark{top:22px;left:24px;width:44px;height:44px}
}

.sign{background:linear-gradient(180deg,#1b3a2a,#12261b);border-block:3px solid #06C755;box-shadow:0 0 24px rgba(6,199,85,.35)}
.sign .sym.seven{text-shadow:0 0 12px rgba(255,210,60,.8)}
.sign .sym.bar{text-shadow:0 0 10px rgba(6,199,85,.95)}

/* gifts */
.gifts{display:grid;background:#f4f6f5}
.gifts-copy{padding:1.5rem 1.25rem 1.6rem;display:grid;gap:1.1rem;justify-items:start}
.gifts-copy h2{font-size:clamp(1.4rem,5vw,2rem);margin:0 0 .25rem}
.gifts-copy p{font-size:1.02rem}
.gifts-copy .bw::after{left:22px;bottom:-12px;width:20px;height:14px;clip-path:polygon(0 0,100% 0,0 100%)}
.gstage{aspect-ratio:4/3.1}
@media (min-width:900px){.gifts{grid-template-columns:.85fr 1.15fr;align-items:center}.gifts-copy{padding:2.5rem 2rem 2.5rem 8%}.gifts-art{order:1}}

/* chat sections */
.chat{background:#e9eeeb;padding:2rem 1.25rem 1.2rem}
.chat h2{text-align:center;font-size:clamp(1.45rem,5vw,2rem);margin-bottom:1.2rem}
.msgs{list-style:none;margin:0 auto;padding:0;max-width:720px;display:grid;gap:.9rem}
.msg{display:flex;align-items:flex-end;gap:.6rem;margin:0}
.msg.r{justify-content:flex-end}
.msg .bubble{max-width:86%}
.msg h3{font-family:"Kanit","Noto Sans Thai",sans-serif;font-weight:700;font-size:1.1rem;line-height:1.5;padding-top:.12em}
.msg p{font-size:1rem;color:#26412f}
.msg .num{flex:0 0 auto;width:2.1rem;height:2.1rem;border-radius:50%;background:var(--dark);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-family:"Kanit",sans-serif;font-weight:700}
.msg.r{flex-direction:row-reverse}
.qa{display:grid;gap:.5rem;margin-bottom:.8rem}
.faq{background:#f4f6f5;padding-bottom:2rem}
@media (min-width:900px){.msg h3{font-size:1.3rem}.msg p{font-size:1.15rem}.msg .bubble{padding:1rem 1.4rem 1.1rem}.msgs{gap:1.1rem}}

/* close */
.close{position:relative;background:#06C755;text-align:center}
.close-copy{padding:1.8rem 1.25rem 2.2rem;display:grid;gap:1.1rem;justify-items:center}
.close-copy .bw{max-width:34rem;text-align:left}
.close-copy .bw::after{left:50%;margin-left:-11px;bottom:-12px;width:22px;height:14px;clip-path:polygon(0 0,100% 0,50% 100%)}
.close-copy h2{font-size:clamp(1.6rem,6vw,2.3rem);margin:0 0 .15rem}
.close-copy p{font-size:1.02rem}
@media (min-width:900px){.close-copy{padding:2.6rem 2rem 3rem}}
.foot{padding:1.4rem 1.25rem calc(1.4rem + var(--safe-dock));text-align:center;color:#c9e6d4;font-size:.92rem;line-height:1.55;background:var(--dark)}
@media (min-width:900px){.foot{padding:1.8rem 2rem 2rem}}
@media (max-width:899px){
  html{scroll-padding-bottom:var(--safe-dock)}
  .hero-copy{padding-bottom:calc(1.3rem + var(--safe-dock))}
  .dock{display:block;position:fixed;left:0;right:0;bottom:0;z-index:60;padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));background:rgba(18,38,27,.96);border-top:2px solid #06C755}
  .dock .btn{width:100%;min-height:3.4rem}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  .rain{display:none}
  .sp{opacity:.85;transform:scale(.7)}
  .rise{opacity:1}
  .machine .s1{transform:translateY(-8%)}
  .machine .s2{transform:translateY(-28%)}
  .machine .s3{transform:translateY(-46%)}
  .sign .track{transform:none}
}
html.force-motion .btn,html.force-motion .btn::after,html.force-motion .rise,html.force-motion .strip,html.force-motion .cn,html.force-motion .gm,html.force-motion .sp,html.force-motion .fly,html.force-motion .track,html.force-motion .bulbs,html.force-motion .cloud{animation-play-state:running !important}
html.force-motion .rise{opacity:1}