/* หน้าแรก — ย้ายจากแคนวาส Main.dc.html (ต้นฉบับทั้งมือถือ 390 และเดสก์ท็อป 1440) */
input::placeholder { color: var(--muted); }
.page { width: 100%; min-width: 0; overflow-x: hidden; }

/* hero stage */
.stage{position:relative;width:100%;max-width:1040px;margin:0 auto;height:720px}
.ph{position:absolute;bottom:40px}
.ph-c{width:290px;left:50%;margin-left:-145px;z-index:3;bottom:70px}
.ph-l{width:250px;left:50%;margin-left:-370px;z-index:2}
.ph-r{width:250px;left:50%;margin-left:120px;z-index:2}
.fl{position:absolute;z-index:4;width:110px;height:auto}
@media (max-width:760px){
  .stage{height:500px}
  .ph-c{width:206px;margin-left:-103px;bottom:50px}
  .ph-l{width:170px;margin-left:-196px;bottom:24px}
  .ph-r{width:170px;margin-left:26px;bottom:24px}
  .fl{width:64px}
}
.frame{box-sizing:border-box;border:8px solid #16110D;border-radius:40px;overflow:hidden;background:#EBE6E1;aspect-ratio:1320/2868}
.frame img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}

/* motion */
@keyframes rise{from{opacity:0;transform:translateY(60px) rotate(var(--r,0deg))}to{opacity:1;transform:translateY(0) rotate(var(--r,0deg))}}
@keyframes fade-up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes float{0%,100%{transform:translateY(0) rotate(var(--a,0deg))}50%{transform:translateY(-16px) rotate(calc(var(--a,0deg) + 8deg))}}
@keyframes pop{0%{opacity:0;transform:scale(.6) rotate(var(--a,0deg))}70%{transform:scale(1.06) rotate(var(--a,0deg))}100%{opacity:1;transform:scale(1) rotate(var(--a,0deg))}}
@keyframes swipe{0%,22%{transform:translateX(0);opacity:1}38%{transform:translateX(118%);opacity:1}39%,86%{transform:translateX(118%);opacity:0}87%{transform:translateX(0);opacity:0}100%{transform:translateX(0);opacity:1}}
@keyframes check{0%,22%{opacity:0}30%,38%{opacity:1}46%,100%{opacity:0}}
@keyframes shift{0%,38%{transform:translateY(0)}50%,86%{transform:translateY(-80px)}100%{transform:translateY(0)}}
@keyframes hand{0%,8%{transform:translateX(0);opacity:0}14%{opacity:1}34%{transform:translateX(120px);opacity:1}40%,100%{transform:translateX(120px);opacity:0}}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-10px) rotate(3deg)}}
@keyframes reveal{from{opacity:0;transform:translateY(48px)}to{opacity:1;transform:none}}
@keyframes found{0%,18%{opacity:0;transform:translateY(-14px) scale(.94)}30%,84%{opacity:1;transform:none}94%,100%{opacity:0;transform:translateY(-14px) scale(.94)}}
@keyframes nudge{0%,18%{transform:translateY(-100px)}30%,84%{transform:translateY(0)}94%,100%{transform:translateY(-100px)}}
@keyframes suggest{0%,14%{opacity:0;transform:translateY(24px) scale(.92)}26%,80%{opacity:1;transform:none}90%,100%{opacity:0;transform:translateY(24px) scale(.92)}}
.found{animation:found 6s cubic-bezier(.2,.8,.2,1) infinite}
.nudge{animation:nudge 6s cubic-bezier(.2,.8,.2,1) infinite}
.suggest{animation:suggest 6s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes attach{0%,10%{opacity:0;transform:scale(.7)}18%,88%{opacity:1;transform:none}96%,100%{opacity:0;transform:scale(.7)}}
@keyframes paid{0%,40%{background:#FFFFFF}50%,88%{background:#3F5420}96%,100%{background:#FFFFFF}}
.attach{animation:attach 6s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes chatin{0%,12%{opacity:0;transform:translateX(40px)}24%,86%{opacity:1;transform:none}96%,100%{opacity:0;transform:translateX(40px)}}
@keyframes before{0%,40%{opacity:1}48%,90%{opacity:0}98%,100%{opacity:1}}
@keyframes after{0%,40%{opacity:0;transform:scale(.8)}48%,90%{opacity:1;transform:none}98%,100%{opacity:0;transform:scale(.8)}}
@keyframes fill3{0%,40%{transform:scaleX(.667)}50%,90%{transform:scaleX(1)}98%,100%{transform:scaleX(.667)}}
.chatin{animation:chatin 7s cubic-bezier(.2,.8,.2,1) infinite}
.before{animation:before 7s ease infinite}
.after{animation:after 7s cubic-bezier(.2,.8,.2,1) infinite}
.fill3{transform-origin:left;animation:fill3 7s cubic-bezier(.2,.8,.2,1) infinite}

/* hero: scattered slips fly into the phone · จังหวะผูกกับ home.js (1.8s + i×0.42s + 0.8s) */
.slip-fly{position:absolute;left:50%;top:var(--top);width:96px;height:auto;margin-left:-48px;z-index:5;opacity:0;--k:1;pointer-events:none;filter:drop-shadow(0 6px 10px rgba(22,17,13,.12))}
@media (max-width:760px){.slip-fly{width:64px;margin-left:-32px;--k:.42}}
@keyframes appear-a{from{opacity:0;transform:translate(calc(var(--sx)*var(--k)),calc(var(--sy)*var(--k))) rotate(var(--r)) scale(.5)}to{opacity:1;transform:translate(calc(var(--sx)*var(--k)),calc(var(--sy)*var(--k))) rotate(var(--r)) scale(1)}}
@keyframes fly-a{0%{opacity:1;transform:translate(calc(var(--sx)*var(--k)),calc(var(--sy)*var(--k))) rotate(var(--r)) scale(1)}70%{opacity:1}100%{opacity:0;transform:translate(0,0) rotate(0deg) scale(.18)}}
@keyframes appear-b{from{opacity:0;transform:translate(calc(var(--sx)*var(--k)),calc(var(--sy)*var(--k))) rotate(var(--r)) scale(.5)}to{opacity:1;transform:translate(calc(var(--sx)*var(--k)),calc(var(--sy)*var(--k))) rotate(var(--r)) scale(1)}}
@keyframes fly-b{0%{opacity:1;transform:translate(calc(var(--sx)*var(--k)),calc(var(--sy)*var(--k))) rotate(var(--r)) scale(1)}70%{opacity:1}100%{opacity:0;transform:translate(0,0) rotate(0deg) scale(.18)}}
.run-a .slip-fly{animation:appear-a .6s cubic-bezier(.2,.8,.2,1) calc(.3s + var(--i)*.09s) both, fly-a .85s cubic-bezier(.5,0,.2,1) calc(1.8s + var(--i)*.42s) forwards}
.run-b .slip-fly{animation:appear-b .6s cubic-bezier(.2,.8,.2,1) calc(.3s + var(--i)*.09s) both, fly-b .85s cubic-bezier(.5,0,.2,1) calc(1.8s + var(--i)*.42s) forwards}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.06)}100%{transform:scale(1)}}
.bump{animation:bump .35s ease}
.home{--pw:290px;font-size:calc(var(--pw)*.045)}
@media (max-width:760px){.home{--pw:206px}}

/* Ebb alive */
.ebb{position:absolute;z-index:6;width:150px;left:50%;margin-left:-250px;bottom:30px}
@media (max-width:760px){.ebb{width:92px;margin-left:-160px;bottom:10px}}
.ebb img,.ebb svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.ebb{aspect-ratio:1248/1480}
.eye{transform-box:fill-box;transform-origin:center;animation:blink 4.6s infinite}
.eye.r{animation-delay:.05s}
@keyframes blink{0%,93%,100%{transform:scaleY(1)}96%{transform:scaleY(.08)}}
.pupils{transition:transform .22s cubic-bezier(.2,.8,.2,1)}
@keyframes hop{0%{transform:translateY(0)}28%{transform:translateY(-38px) rotate(-7deg)}55%{transform:translateY(0) rotate(0)}72%{transform:translateY(-14px)}100%{transform:translateY(0)}}
.hop{animation:hop .85s cubic-bezier(.3,.7,.3,1)}
.mood-happy,.mood-sleepy{display:none}
.ebb[data-mood="happy"] .mood-calm,.ebb[data-mood="sleepy"] .mood-calm{display:none}
.ebb[data-mood="happy"] .mood-happy,.ebb[data-mood="sleepy"] .mood-sleepy{display:inline}

/* try it: drag a sample slip to Ebb */
.tslip{position:relative;width:150px;box-sizing:border-box;padding:0;border:0;background:transparent;font:inherit;color:#16110D;text-align:left;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .3s}
.tslip:active{cursor:grabbing}
.tslip.drag{transition:none;z-index:20;cursor:grabbing}
.tslip.done{opacity:.45}
.paper{background:#FFFFFF;border:2px solid #16110D;border-radius:14px 14px 4px 4px;padding:10px 10px 12px;display:flex;flex-direction:column;gap:5px;font-size:10.5px;line-height:1.35;box-shadow:0 10px 22px rgba(22,17,13,.10)}
.paper::after{content:"";display:block;height:8px;margin:4px -10px -12px;background:linear-gradient(135deg,transparent 50%,#FFFFFF 50%) 0 0/8px 8px,linear-gradient(225deg,transparent 50%,#FFFFFF 50%) 0 0/8px 8px;border-bottom:0}
.qr{width:34px;height:34px;background:conic-gradient(#16110D 25%,transparent 0 50%,#16110D 0 75%,transparent 0) 0 0/10px 10px;border:3px solid #16110D;border-radius:3px;box-sizing:border-box}
.dz{flex:1 1 320px;min-width:0;min-height:320px;box-sizing:border-box;border:2px dashed #675E57;border-radius:28px;background:#FAF7F4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:22px;transition:background .25s,border-color .25s,transform .25s}
.dz.over{background:#EFDDB9;border-color:#16110D;border-style:solid;transform:scale(1.02)}
.dz.has{border-style:solid;border-color:#16110D;background:#FFFFFF;justify-content:flex-start;align-items:stretch}
@keyframes scan{0%{top:8%}50%{top:88%}100%{top:8%}}
.scanline{position:absolute;left:10%;right:10%;height:3px;background:#FBBE2C;border-radius:999px;box-shadow:0 0 12px #FBBE2C;animation:scan 1.1s ease-in-out infinite}
.row-in{animation:fade-up .5s cubic-bezier(.2,.8,.2,1) both}
.dz [hidden]{display:none!important}

/* night (20:00–05:00 ตามเวลาเครื่องผู้ชม) — พื้นยังสว่าง เปลี่ยนแค่คำ ท่าน้องเอ็บ และดาว */
@keyframes twinkle{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}
.star{position:absolute;width:18px;height:18px;animation:twinkle 3.2s ease-in-out infinite;pointer-events:none;display:none}
html.night .star{display:block}
.night-only{display:none}
html.night .night-only{display:block}
.night-inline{display:none}
html.night .night-inline{display:inline}
html.night .day-only{display:none}
@keyframes zz{0%{opacity:0;transform:translate(0,10px) scale(.7)}30%{opacity:1}100%{opacity:0;transform:translate(26px,-70px) scale(1.2)}}
.zz{animation:zz 2.6s ease-out infinite;transform-box:fill-box;transform-origin:center}

/* form states (บอร์ด FormStates) */
.f-input{flex:1 1 230px;min-width:0;height:56px;box-sizing:border-box;padding:0 18px;border-radius:16px;background:#FFFFFF;font:inherit;font-size:17px;color:#16110D;outline-offset:2px;border:2px solid #16110D}
.f-input[aria-invalid="true"]{border:3px solid #E08A3C}
.f-input:disabled{background:#FAF7F4}
.f-submit{flex:1 1 170px;height:56px;border:0;border-radius:16px;background:#16110D;color:#FFFFFF;font:inherit;font-size:17px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px}
.f-submit[disabled]{opacity:.85;cursor:default}
.f-submit .spin{display:none}
.f-submit[aria-busy="true"] .spin{display:block;animation:rot .9s linear infinite}
@keyframes rot{to{transform:rotate(360deg)}}
.f-msg{margin:0;display:flex;align-items:center;justify-content:center;gap:8px;font-size:15px;font-weight:600}
.f-msg[hidden],.wl-form[hidden]{display:none!important}
.f-check{align-self:center;display:flex;align-items:center;gap:10px;font-size:15px;min-height:44px;text-align:left}
.f-check input{width:22px;height:22px;accent-color:#16110D;margin:0;flex:0 0 auto}
.tester-box{border:0;margin:0;padding:14px 14px 8px;background:#FAF7F4;border-radius:18px;display:flex;flex-direction:column;gap:10px;text-align:left}
.tester-box[hidden]{display:none}
.tester-box legend{float:left;padding:0;font-size:14.5px;font-weight:700}
.tester-box legend span{font-weight:500;font-size:13px;color:#675E57;margin-left:4px}
.chips{clear:both;display:flex;flex-wrap:wrap;gap:8px}
.chip{min-height:40px;padding:0 14px;border-radius:999px;font:inherit;font-size:14.5px;font-weight:600;cursor:pointer;background:#FFFFFF;color:#16110D;border:2px solid #EBE6E1}
.chip[aria-pressed="true"]{background:#16110D;color:#FFFFFF;border-color:#16110D}
.done-card{width:100%;max-width:540px;box-sizing:border-box;background:#FBBE2C;border-radius:24px;padding:22px 24px;display:flex;flex-direction:column;gap:10px;text-align:left;margin-top:8px}
.done-card[hidden]{display:none}
.done-card .head{display:flex;gap:14px;align-items:center}
.done-card .head img{width:72px;height:72px;object-fit:contain;flex:0 0 auto}
.done-card b.t{font-size:22px;line-height:1.35}
.done-card p{margin:0;font-size:16px;line-height:1.6}
.done-card .acts{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center}
.ghost-btn{min-height:44px;padding:0 16px;border:2px solid #16110D;border-radius:999px;background:transparent;font:inherit;font-size:15px;font-weight:700;cursor:pointer;color:#16110D}
.ghost-btn[disabled]{opacity:.6;cursor:default}
.android-box{background:#FAF7F4;border-radius:24px;padding:22px;display:flex;flex-direction:column;gap:10px;max-width:540px;box-sizing:border-box}
.android-box[hidden]{display:none}

/* ส่วนที่เลื่อนมาถึงค่อยเล่น (ตัวเลข/แถบ) */
.grow{transform-origin:left;transform:scaleX(0)}
.in .grow{animation:grow 1.2s cubic-bezier(.2,.8,.2,1) both}

@media (prefers-reduced-motion: reduce){
  .slip-fly{display:none}
  .eye,.hop,.bump,.scanline,.row-in,.star,.zz,.f-submit .spin{animation:none!important}
  .pupils,.tslip,.dz{transition:none}
  .grow{transform:none}
}
.paid{animation:paid 6s ease infinite}
.rise{animation:rise 1s cubic-bezier(.2,.8,.2,1) both}
.fade-up{animation:fade-up .8s cubic-bezier(.2,.8,.2,1) both}
.float{animation:pop .7s cubic-bezier(.2,.8,.2,1) both, float 7s ease-in-out infinite}
.swipe{animation:swipe 5s cubic-bezier(.4,0,.2,1) infinite}
.check{animation:check 5s ease infinite}
.shift{animation:shift 5s cubic-bezier(.4,0,.2,1) infinite}
.hand{animation:hand 5s cubic-bezier(.4,0,.2,1) infinite}
.bob{animation:bob 4s ease-in-out infinite}
@supports (animation-timeline: view()){
  .reveal{animation:reveal linear both;animation-timeline:view();animation-range:entry 0% entry 45%}
}
@media (prefers-reduced-motion: reduce){
  .rise,.fade-up,.float,.swipe,.check,.shift,.hand,.grow,.bob,.reveal,.found,.nudge,.suggest,.attach,.paid,.chatin,.before,.after,.fill3{animation:none!important}
  .before{opacity:0}
  .fill3{transform:none}
}

/* ยอดเงินในมือถือจำลองห้ามตัดบรรทัด (Chrome/Android ไม่มี SF Rounded ตัวเลขกว้างกว่า) */
[role="img"] b:last-child,[role="img"] b:only-child{white-space:nowrap}

/* ชื่อรายการในมือถือจำลองอยู่บรรทัดเดียว (Chrome/Android ใช้ IBM Plex ทั้งตัวอักษรละตินและไทย กว้างกว่า SF Rounded บน iPhone) */
[role="img"] span[style*="min-width: 0"]{overflow:hidden}
[role="img"] span[style*="min-width: 0"] > *{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Turnstile แบบ managed: ปกติไม่มีอะไรให้เห็น จะโผล่ช่องติ๊กก็ต่อเมื่อ Cloudflare ไม่แน่ใจ */
.ts-slot{display:flex;justify-content:center}
.ts-slot:empty{display:none}

/* ธนาคารที่ใช้บ่อย: โลโก้วงกลมแบบ BankBadge ในแอป · กดเลือกได้หลายอัน */
.banks{clear:both;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.bank{display:flex;flex-direction:column;align-items:center;gap:5px;padding:8px 2px 7px;border:2px solid transparent;border-radius:16px;background:transparent;font:inherit;color:#16110D;cursor:pointer;position:relative;min-height:44px}
.bank img,.bank i{width:40px;height:40px;border-radius:50%;box-shadow:0 0 0 1px rgba(22,17,13,.08);display:block}
.bank i{background:#EBE6E1;font-style:normal;font-weight:700;font-size:15px;line-height:40px;text-align:center;letter-spacing:1px}
.bank span{font-size:12.5px;font-weight:600;line-height:1.2;white-space:nowrap}
.bank[aria-pressed="true"]{background:#FFFFFF;border-color:#16110D;color:#16110D}
.bank[aria-pressed="true"]::after{content:"";position:absolute;top:4px;right:calc(50% - 26px);width:18px;height:18px;border-radius:50%;background:#16110D url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center/12px no-repeat}