*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:'Kanit',system-ui,sans-serif;color:#1d2b2b;background:#e9f2ec;overflow:hidden;-webkit-tap-highlight-color:transparent}
body::before{content:"";position:fixed;inset:-40px;background:var(--page-bg,url(/img/bg-landing.webp)) center/cover;filter:blur(24px) saturate(1.05);z-index:-1}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}

/* เวที 1620x2880 ย่อให้พอดีจอ: --u = 1 หน่วยของ mockup */
.stage{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(100vw,calc(100dvh * 0.5625));aspect-ratio:1620/2880;
  --u:calc(min(100vw,calc(100dvh * 0.5625)) / 1620);overflow:hidden;
  box-shadow:0 0 60px rgba(0,60,60,.15);overflow:clip}
@supports not (height:100dvh){.stage{width:min(100vw,calc(100vh * 0.5625));--u:calc(min(100vw,calc(100vh * 0.5625)) / 1620)}}
.page{position:absolute;inset:0;background-size:100% 100%;background-repeat:no-repeat;opacity:0;visibility:hidden;transition:opacity .35s ease}
.page.active{opacity:1;visibility:visible}
.abs{position:absolute;left:calc(var(--x)*var(--u));top:calc(var(--y)*var(--u));width:calc(var(--w)*var(--u));height:calc(var(--h)*var(--u))}
.arrow{font-weight:700;margin-left:calc(24*var(--u))}

.pill-white,.pill-teal{display:flex;align-items:center;justify-content:center;border-radius:999px;font-weight:600;font-size:calc(78*var(--u));transition:transform .15s}
.pill-white{background:#fff;color:#111;box-shadow:0 calc(10*var(--u)) calc(40*var(--u)) rgba(0,80,80,.15)}
.pill-white.small{font-size:calc(58*var(--u))}
.pill-teal{background:linear-gradient(180deg,#14bfb0,#0aa99c);color:#fff;box-shadow:0 calc(12*var(--u)) calc(30*var(--u)) rgba(0,150,140,.3)}
.pill-teal:disabled{filter:grayscale(.6);opacity:.55;cursor:not-allowed}
.pill-white:active,.pill-teal:not(:disabled):active,.hot:active{transform:scale(.97)}
.hot{border-radius:999px}
.hot:focus-visible,.pill-white:focus-visible,.pill-teal:focus-visible{outline:calc(8*var(--u)) solid #0aa99c;outline-offset:calc(6*var(--u))}

/* เงื่อนไข */
.terms-box{overflow:auto;font-size:calc(46*var(--u));line-height:1.55;color:#2c3a3a;padding-right:calc(20*var(--u))}
.terms-box ol{padding-left:calc(60*var(--u))}
.terms-box li{margin-bottom:calc(16*var(--u))}
.terms-box h3{font-size:calc(50*var(--u));font-weight:600;color:#1a6d63;margin:calc(10*var(--u)) 0 calc(14*var(--u))}
.terms-box h3:not(:first-child){margin-top:calc(40*var(--u))}
.terms-box ol.en{font-size:calc(38*var(--u));color:#5f7472;line-height:1.45;margin-top:calc(8*var(--u))}
.check-row{display:flex;align-items:center;gap:calc(26*var(--u));font-size:calc(48*var(--u));font-weight:500;color:#24504f;cursor:pointer}
.check-row input{width:calc(62*var(--u));height:calc(62*var(--u));accent-color:#0aa99c;flex:none}

/* ฟอร์ม */
.lbl{font-size:calc(56*var(--u));font-weight:600;color:#24504f;display:flex;align-items:flex-end}
.field{font-family:inherit;font-size:calc(52*var(--u));color:#1d2b2b;background:#fff;border:calc(5*var(--u)) solid #4f8a85;border-radius:calc(40*var(--u));padding:0 calc(56*var(--u));outline:none;appearance:none;-webkit-appearance:none}
.field::placeholder{color:#555}
.field:focus{border-color:#0aa99c;box-shadow:0 0 0 calc(10*var(--u)) rgba(10,169,156,.18)}
.field.bad{border-color:#d9534f}
.select-wrap .field{width:100%;height:100%}
.select-wrap::after{content:"";position:absolute;right:calc(70*var(--u));top:42%;width:calc(34*var(--u));height:calc(34*var(--u));border:solid #24504f;border-width:0 calc(8*var(--u)) calc(8*var(--u)) 0;transform:translateY(-50%) rotate(45deg);pointer-events:none}
.select-wrap select{color:#1d2b2b}
.select-wrap select:invalid,.select-wrap select.empty{color:#555}
.err{font-size:calc(44*var(--u));color:#c0392b;font-weight:500;line-height:1.4}
.err.center{text-align:center}

/* เป้าหมาย */

/* กาชา */
.gacha-canvas{display:block;touch-action:manipulation;pointer-events:none}
.gacha-msg{display:flex;align-items:center;justify-content:center;text-align:center;font-size:calc(54*var(--u));font-weight:500;color:#24504f}

/* รางวัล */
.v-title{display:flex;align-items:center;justify-content:center;font-weight:700;font-size:calc(110*var(--u));color:#000;letter-spacing:.01em}
.v-value{display:flex;align-items:center;justify-content:center;gap:calc(20*var(--u));white-space:nowrap}
#r-value{font-size:var(--vs,calc(300*var(--u)));font-weight:800;color:#d8eeee;-webkit-text-stroke:calc(11*var(--u)) #24504f;paint-order:stroke fill;text-shadow:calc(14*var(--u)) calc(14*var(--u)) 0 #24504f;line-height:1;letter-spacing:-.02em}
#r-unit{font-size:calc(130*var(--u));font-weight:700;color:#24504f;align-self:flex-end;margin-bottom:calc(40*var(--u))}
.v-sub{display:flex;align-items:center;justify-content:center;font-size:calc(54*var(--u));font-weight:500;color:#24504f;text-align:center}
.cond{font-size:calc(35*var(--u));line-height:1.36;color:#111;padding-left:calc(60*var(--u));overflow:hidden;font-weight:400}
.cond li{margin-bottom:calc(5*var(--u))}

/* สรุป */
.s-img{object-fit:cover;border-radius:calc(30*var(--u));background:#fff}
.s-title{display:flex;align-items:center;justify-content:center;text-align:center;font-weight:700;font-size:calc(92*var(--u));line-height:1;color:#000;white-space:nowrap}
.s-sub{display:flex;align-items:flex-start;justify-content:center;text-align:center;font-size:calc(62*var(--u));color:#111;white-space:nowrap}
.s-pill{display:flex;align-items:center;justify-content:center;font-size:calc(46*var(--u));color:#111;white-space:nowrap;overflow:hidden;padding:0 calc(26*var(--u))}
.s-pill u{text-underline-offset:calc(10*var(--u));text-decoration-thickness:calc(4*var(--u));overflow:hidden;text-overflow:ellipsis}
.s-prize{font-size:calc(52*var(--u))}
.s-prize b{font-size:calc(72*var(--u));font-weight:800;margin:0 calc(6*var(--u)) 0 calc(14*var(--u))}
.s-note{display:flex;align-items:center;justify-content:center;text-align:center;font-size:calc(40*var(--u));line-height:1.35;color:#24504f;font-weight:500}

/* modal / loading */
.modal{position:fixed;inset:0;background:rgba(10,40,40,.6);display:flex;align-items:center;justify-content:center;z-index:20;padding:16px}
.modal[hidden],.loading[hidden]{display:none}
.modal-box{background:#fff;border-radius:18px;padding:16px;max-width:420px;width:100%;max-height:92vh;display:flex;flex-direction:column;gap:10px;text-align:center}
.modal-box img{width:100%;min-height:0;flex:1;object-fit:contain;border-radius:10px}
.modal-box p{font-size:14px;color:#555}
.modal-actions{display:flex;gap:10px}
.modal-actions>*{flex:1;padding:12px;border-radius:999px;font-size:16px;font-weight:600;text-decoration:none;text-align:center}
.btn-dl{background:#0aa99c;color:#fff}
#modal-close{background:#eef3f2;color:#24504f}
.loading{position:fixed;inset:0;background:rgba(255,255,255,.5);display:flex;align-items:center;justify-content:center;z-index:30}
.spinner{width:46px;height:46px;border-radius:50%;border:5px solid #cdebe7;border-top-color:#0aa99c;animation:turn 1s linear infinite}

@keyframes shake{0%,100%{transform:none}25%{transform:translateX(-12px)}75%{transform:translateX(12px)}}
@keyframes wobble{0%,100%{transform:rotate(0)}25%{transform:rotate(-3deg)}75%{transform:rotate(3deg)}}
@keyframes turn{to{transform:rotate(720deg)}}
@keyframes drop{0%{opacity:0;transform:translateY(-40%) scale(.6)}20%{opacity:1}60%{transform:translateY(160%) scale(1)}75%{transform:translateY(120%)}88%{transform:translateY(160%)}100%{opacity:1;transform:translateY(150%) scale(1.05)}}
@keyframes pop{0%{opacity:1;transform:translateY(150%) scale(1.05)}100%{opacity:0;transform:translateY(-200%) scale(6)}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}
.s-note{white-space:pre-line}

/* ===== เปิดแคปซูล (จาก gacha-spin) ===== */
.reveal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;background:rgba(16,60,55,.45);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .35s;z-index:50;font-family:'Kanit',sans-serif}
.reveal[hidden]{display:none}
.reveal.show{opacity:1;pointer-events:auto}
.rv-burst{position:absolute;width:420px;height:420px;border-radius:50%;opacity:0;background:repeating-conic-gradient(from 0deg,rgba(255,240,180,.55) 0 10deg,transparent 10deg 24deg);-webkit-mask:radial-gradient(circle,#000 20%,transparent 70%);mask:radial-gradient(circle,#000 20%,transparent 70%)}
.reveal.opened .rv-burst{animation:rvburst 6s linear forwards}
@keyframes rvburst{0%{opacity:0;transform:scale(.3) rotate(0)}10%{opacity:1;transform:scale(1) rotate(20deg)}100%{opacity:.8;transform:scale(1.1) rotate(200deg)}}
.rv-cap{position:relative;width:170px;height:170px}
.reveal.show .rv-cap{animation:rvcapIn .55s cubic-bezier(.2,1.6,.4,1) both,rvshake .7s .6s ease-in-out both}
@keyframes rvcapIn{from{transform:translateY(240px) scale(.3)}to{transform:none}}
@keyframes rvshake{0%,100%{transform:rotate(0)}15%{transform:rotate(-12deg)}30%{transform:rotate(10deg)}45%{transform:rotate(-8deg)}60%{transform:rotate(6deg)}75%{transform:rotate(-3deg)}}
.rv-half{position:absolute;left:0;width:170px;height:85px;transition:transform .6s cubic-bezier(.3,1.4,.5,1),opacity .6s}
.rv-half.top{top:0;border-radius:85px 85px 0 0;background:radial-gradient(circle at 32% 30%,#fff 0 6%,transparent 30%),linear-gradient(180deg,var(--c1),var(--c2));box-shadow:inset 0 -6px 0 rgba(255,255,255,.6),inset 0 8px 18px rgba(255,255,255,.5)}
.rv-half.bot{bottom:0;border-radius:0 0 85px 85px;background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(235,240,245,.75));box-shadow:inset 0 -10px 20px rgba(0,0,0,.08),inset 0 4px 0 rgba(0,0,0,.05)}
.reveal.opened .rv-half.top{transform:translate(-40px,-190px) rotate(-38deg);opacity:0}
.reveal.opened .rv-half.bot{transform:translate(40px,200px) rotate(26deg);opacity:0}
.rv-prize{position:absolute;width:min(84vw,340px);background:#fff;border-radius:28px;padding:28px 22px 24px;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.25);transform:scale(.2);opacity:0;pointer-events:none;transition:transform .55s cubic-bezier(.2,1.6,.4,1) .15s,opacity .3s .15s}
.reveal.opened .rv-prize{transform:scale(1);opacity:1;pointer-events:auto}
.rv-lbl{font-size:16px;color:#6b8a84}
.rv-ttl{font-size:clamp(24px,7.4vw,32px);font-weight:700;color:#119C88;margin:4px 0;line-height:1.2;white-space:nowrap}
.rv-dtl{font-size:15px;color:#444;margin-bottom:18px;min-height:4px}
.rv-dot{width:56px;height:56px;border-radius:50%;margin:0 auto 10px;background:linear-gradient(180deg,var(--c1),var(--c2));box-shadow:inset 0 -6px 0 rgba(255,255,255,.6)}
.rv-btn{width:100%;border-radius:40px;padding:12px 0;font:600 20px 'Kanit',sans-serif;color:#fff;background:linear-gradient(180deg,#2AD0B8,#16AE97);box-shadow:0 6px 0 #0E8D7B,0 10px 24px rgba(22,174,151,.35);transition:transform .1s,box-shadow .1s}
.rv-btn:active{transform:translateY(4px);box-shadow:0 2px 0 #0E8D7B,0 6px 14px rgba(22,174,151,.3)}
#confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:60}