/* aaiixz — ฉากแผนที่ตลาด + HUD + แผงเมนู (คู่กับ world.js) · โหลดหลัง <style> ใน index.html จึงทับของเดิมได้
   หลัก: ของที่ขยับใช้ transform/opacity · แอนิเมชันปิดได้ด้วย prefers-reduced-motion หรือ html.lite (☰ เมนู › ประหยัดแบต) */

/* ---------- โครงหน้าจอเกม ---------- */
#phone > #ui { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; }
html.land #phone { display: block; }
#phone.game { background: #86C95A; }
#phone.game > #ui { z-index: 2; pointer-events: none; }
#phone.game > #ui > :not(.top):not(.tabs) { pointer-events: auto; }


.world { position: absolute; inset: 0; z-index: 1; overflow: hidden; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; background: #86C95A; cursor: grab; contain: strict; }
.world.dragging { cursor: grabbing; }
#phone:not(.game) > .world { display: none; }
.wmap { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.wgwrap, .wground { position: absolute; left: 0; top: 0; display: block; }
.wlayer { position: absolute; inset: 0; }
.went { position: absolute; pointer-events: none; }
.went > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; display: block; }
.went svg { pointer-events: none; }
.went[data-w] svg * { pointer-events: visiblePainted; }
.went[data-w] > :not(svg) { pointer-events: auto; cursor: pointer; }
.went[data-w] { cursor: pointer; }
.went[hidden] { display: none; }
.went.press > svg { transform: scale(.95, .97); transform-origin: 50% 100%; transition: transform .08s; }

/* ป้ายชื่อ/ตัวเลข: ขนาดคงที่บนจอ (--zs = 1/ซูม) */
.wlabel { position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%) scale(var(--zs, 1)); transform-origin: 50% 100%; background: linear-gradient(#FFF8E4, #F3E0B0); border: 2.5px solid #5A3110; border-radius: 10px; padding: 0 9px; font: 800 12.5px/1.55 var(--f-display); color: #5A3110; white-space: nowrap; box-shadow: 0 3px 0 rgba(60,30,8,.35); }
.wbadge { position: absolute; right: 6%; top: 2%; min-width: 28px; height: 28px; padding: 0 6px; box-sizing: border-box; border-radius: 14px; background: #E8453C; color: #fff; border: 3px solid #fff; font: 800 14px/22px var(--f-display); text-align: center; box-shadow: 0 3px 0 rgba(43,33,64,.35); transform: scale(var(--zs, 1)); transform-origin: 100% 0; animation: wbadge 1.4s ease-in-out infinite; }
.wbadge.go { background: #2FA65A; }
.wbadge.tk { background: #3E7FD6; animation: none; }
@keyframes wbadge { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }
.wlv { position: absolute; left: 50%; top: 38%; transform: translateX(-50%) scale(var(--zs, 1)); background: #2B2140; color: #FFE7A8; border-radius: 8px; padding: 0 7px; font: 800 11.5px/1.6 var(--f-display); white-space: nowrap; }

/* ---------- ร้าน + แมว ---------- */
.wshopname { position: absolute; left: 128px; top: 7px; width: 164px; height: 32px; display: flex; align-items: center; justify-content: center; padding: 0 8px; box-sizing: border-box; font: 800 17px/1 var(--f-display); color: #7A4618; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none !important; }
.wsignboard { position: absolute; left: -26px; top: 150px; transform: rotate(-6deg); background: #9A6A34; color: #FFE8B0; border: 3px solid #4E2F12; border-radius: 8px; padding: 2px 8px; font: 800 13px/1.4 var(--f-display); white-space: nowrap; box-shadow: 0 3px 0 rgba(0,0,0,.25); animation: wswing 3.6s ease-in-out infinite; transform-origin: 50% -10px; }
.wlamp { position: absolute; width: 28px; height: 52px; animation: wswing 3.2s ease-in-out infinite; transform-origin: 50% 0; }
.wlamp:nth-child(2n) { animation-delay: -1.3s; }
.wlamp svg { width: 100%; height: 100%; display: block; overflow: visible; }
@keyframes wswing { 0%, 100% { rotate: -4deg; } 50% { rotate: 4deg; } }
.wcat svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 3px 0 rgba(0,0,0,.18)); }
.wcat .m-bob { animation: mbob 2.4s ease-in-out infinite; }
.wcat .m-body { animation: mbreath 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
.wcat .m-tail { animation: mtail 1.8s ease-in-out infinite; transform-box: fill-box; transform-origin: 0% 100%; }
.wcat .m-arm { animation: mwave 5s ease-in-out infinite; transform-box: fill-box; transform-origin: 0% 100%; }
.wcat .m-eyes { animation: mblink 4s infinite; transform-box: fill-box; transform-origin: 50% 50%; }
.wcat.cheer svg { animation: cheerjump .6s cubic-bezier(.3,.7,.4,1) 4; }
.wsay { display: flex; justify-content: center; align-items: flex-end; pointer-events: none; transform: scale(var(--zs, 1)); transform-origin: 50% 100%; }
.wbub2 { display: inline-block; max-width: 230px; background: #fff; border: 3px solid #2B2140; border-radius: 14px; padding: 3px 10px; font: 700 14px/1.35 var(--f-display); color: #2B2140; text-align: center; box-shadow: 0 3px 0 rgba(0,0,0,.2); position: relative; }
.wbub2::after { content: ''; position: absolute; left: 50%; bottom: -9px; margin-left: -7px; border: 7px solid transparent; border-top-color: #2B2140; border-bottom: 0; }
.wpets .wpet { position: absolute; bottom: 0; width: 60px; height: 56px; }
.wpets .wpet.dog { left: 4px; }
.wpets .wpet.cat { right: 4px; }
.wpet svg { width: 100%; height: 100%; display: block; overflow: visible; }
.wpet .wtail { animation: wwag .5s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 0 100%; }
@keyframes wwag { to { rotate: 18deg; } }

/* ---------- ฟองบนเตา/แปลง ---------- */
.wbub { position: absolute; left: 50%; bottom: 96%; width: 54px; height: 54px; margin-left: -27px; box-sizing: border-box; display: grid; place-items: center; background: #fff; border: 3px solid #2B2140; border-radius: 50%; box-shadow: 0 4px 0 rgba(43,33,64,.25); }
.wbub::after { content: ''; position: absolute; bottom: -10px; left: 50%; margin-left: -7px; border: 7px solid transparent; border-top-color: #2B2140; border-bottom: 0; }
.wbub svg { width: 40px; height: 40px; overflow: visible; }
.wbub.ready, .wbub.ripe { animation: wbob .9s ease-in-out infinite; border-color: #2FA65A; box-shadow: 0 4px 0 rgba(43,33,64,.25), 0 0 0 4px rgba(79,192,106,.35); }
.wbub.plus { width: 40px; height: 40px; margin-left: -20px; background: #4FC06A; color: #fff; font: 800 28px/1 var(--f-display); text-shadow: 0 2px 0 #2B7A3E; animation: wbob 1.8s ease-in-out infinite; opacity: .92; }
.wbub.plus.seed { background: #C98A4A; text-shadow: 0 2px 0 #7A4618; }
.wbub.busy { width: auto; height: auto; margin-left: 0; transform: translateX(-50%); padding: 2px 3px; border-radius: 22px; display: flex; align-items: center; gap: 2px; background: #FFF8E6; }
.wbub.busy.sm { padding: 1px; }
.wbub.busy::after { display: none; }
.wring { width: 32px; height: 32px; display: block; }
.wleft { font: 800 11.5px/1 var(--f-display); padding-right: 6px; color: #2B2140; white-space: nowrap; }
@keyframes wbob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
.wspark { position: absolute; left: 50%; bottom: 120%; width: 70px; height: 70px; margin-left: -35px; pointer-events: none !important; background: radial-gradient(circle, rgba(255,233,120,.0) 40%, rgba(255,233,120,.55) 41%, rgba(255,233,120,0) 62%); animation: wspark 1.4s ease-out infinite; }
@keyframes wspark { from { transform: scale(.5); opacity: 1; } to { transform: scale(1.4); opacity: 0; } }

/* เตา: ไฟลุก กระทะโยก ไอร้อน */
.wstove[data-st="busy"] > svg { animation: wjig .45s ease-in-out infinite alternate; transform-origin: 50% 92%; }
@keyframes wjig { to { transform: scale(1.015, .985); } }
.wflame { animation: wflick .22s steps(2) infinite; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes wflick { 50% { transform: scale(1.12, .86); } }
.wcoal { animation: wcoal .9s ease-in-out infinite alternate; }
@keyframes wcoal { to { opacity: .45; } }
.wtoss { animation: wtoss .9s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes wtoss { 0%, 100% { transform: translateY(0) rotate(0); } 35% { transform: translateY(-12px) rotate(-12deg); } 60% { transform: translateY(-4px) rotate(6deg); } }
.wsteam { position: absolute; left: 44%; top: 20%; width: 14px; height: 14px; border-radius: 50%; background: rgba(255,255,255,.85); pointer-events: none !important; animation: wsteam 2s ease-out infinite; }
.wsteam.s2 { left: 56%; width: 11px; height: 11px; animation-delay: -.7s; }
.wsteam.s3 { left: 36%; width: 9px; height: 9px; animation-delay: -1.3s; }
@keyframes wsteam { 0% { transform: translateY(0) scale(.5); opacity: 0; } 20% { opacity: .9; } 100% { transform: translateY(-60px) scale(1.6); opacity: 0; } }

/* แปลง: พืชไหวลม · ลากเคียวเก็บ */
.wplot[data-st="grow"] .wplants, .wplot[data-st="ripe"] .wplants { animation: wsway 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes wsway { 0%, 100% { transform: skewX(-3deg); } 50% { transform: skewX(3deg); } }
.wplot.reaping .wplants { animation: wreap .45s ease-out forwards; }
.wplot.reaping .wbub { animation: wreap .45s ease-out forwards; }
@keyframes wreap { 0% { transform: translateY(0); opacity: 1; } 40% { transform: translateY(-16px) scale(1.15); opacity: 1; } 100% { transform: translateY(-30px) scale(.4); opacity: 0; } }
.wsickle { position: fixed; z-index: 120; width: 56px; height: 56px; margin: -46px 0 0 -10px; pointer-events: none; animation: wsickle .3s ease-in-out infinite alternate; filter: drop-shadow(0 3px 0 rgba(0,0,0,.25)); }
.wsickle svg { width: 100%; height: 100%; }
@keyframes wsickle { from { rotate: -14deg; } to { rotate: 18deg; } }

/* ---------- ลูกค้าเดินได้ ---------- */
.wcust { position: absolute; left: 0; top: 0; width: 64px; height: 104px; pointer-events: none; will-change: transform; }
.wcust .wwalker { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.wcust.flip .wwalker { transform: scaleX(-1); }
.wcust.walk .wlegL { animation: wleg .38s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 0; }
.wcust.walk .wlegR { animation: wleg .38s ease-in-out infinite alternate-reverse; transform-box: fill-box; transform-origin: 50% 0; }
.wcust.walk .wbody { animation: wstep .19s ease-in-out infinite alternate; }
@keyframes wleg { from { transform: rotate(-16deg); } to { transform: rotate(16deg); } }
@keyframes wstep { to { transform: translateY(-3px); } }
.wcust:not(.walk) .wbody { animation: widle 3s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes widle { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.02, .98); } }
.wcust.happy .wwalker { animation: whop .5s cubic-bezier(.3,.7,.4,1) 2; }
@keyframes whop { 50% { transform: translateY(-22px); } }
.wneed { position: absolute; left: 50%; bottom: 100%; width: 42px; height: 42px; margin-left: -21px; box-sizing: border-box; display: grid; place-items: center; background: #fff; border: 2.5px solid #2B2140; border-radius: 50%; box-shadow: 0 3px 0 rgba(43,33,64,.25); pointer-events: auto; cursor: pointer; }
.wneed svg { width: 30px; height: 30px; overflow: visible; }
.wneed.ok { border-color: #2FA65A; animation: wbob 1.1s ease-in-out infinite; }
.wneed i { position: absolute; right: -6px; top: -6px; width: 18px; height: 18px; border-radius: 50%; background: #2FA65A; color: #fff; font: 800 12px/18px var(--f-display); font-style: normal; text-align: center; border: 2px solid #fff; }
.wcust.sp .wneed { border-color: #C98A00; background: #FFF4C2; }
.wcust .wwalker { pointer-events: none; }
.wcust[data-w] .wwalker * { pointer-events: visiblePainted; }
.whearts { position: absolute; left: 50%; top: -8px; pointer-events: none; }
.whearts i { position: absolute; color: #F28AB2; font: 800 20px/1 var(--f-display); font-style: normal; animation: wheart 1.1s ease-out forwards; text-shadow: 0 2px 0 #fff; }
.whearts i:nth-child(2) { margin-left: -18px; animation-delay: .15s; }
.whearts i:nth-child(3) { margin-left: 14px; animation-delay: .3s; }
@keyframes wheart { from { transform: translateY(10px) scale(.4); opacity: 0; } 30% { opacity: 1; } to { transform: translateY(-40px) scale(1.1); opacity: 0; } }

/* ---------- สกู๊ตเตอร์ส่งของ ---------- */
.wscooter.ride { animation: wride 2.6s ease-in-out forwards; }
.wscooter.ride .wwheel { animation: wspin .3s linear infinite; transform-box: fill-box; transform-origin: center; }
@keyframes wride { 0% { transform: none; } 8% { transform: translateX(-10px) scale(1.04, .96); } 38% { transform: translateX(520px); opacity: 1; } 39% { transform: translateX(520px); opacity: 0; } 40% { transform: translateX(-1200px); opacity: 0; } 41% { opacity: 1; } 92% { transform: translateX(6px); } 100% { transform: none; } }
@keyframes wspin { to { transform: rotate(360deg); } }

/* ---------- ของประจำฉากที่ขยับ ---------- */
.wtree { position: absolute; pointer-events: none; animation: wtree 4.2s ease-in-out infinite; transform-origin: 50% 92%; }
.wtree svg { width: 100%; height: 100%; display: block; overflow: visible; }
@keyframes wtree { 0%, 100% { transform: rotate(-1.4deg); } 50% { transform: rotate(1.4deg); } }
.wduck { animation: wswim 16s ease-in-out infinite; }
.wduck.d2 { animation-duration: 21s; animation-delay: -7s; }
@keyframes wswim { 0% { transform: translateX(0) scaleX(1); } 45% { transform: translateX(110px) scaleX(1); } 50% { transform: translateX(110px) scaleX(-1); } 95% { transform: translateX(0) scaleX(-1); } 100% { transform: translateX(0) scaleX(1); } }
.when { animation: wpeck 2.6s ease-in-out infinite; transform-origin: 70% 90%; }
.when.h2 { animation-delay: -1.2s; }
@keyframes wpeck { 0%, 60%, 100% { transform: rotate(0); } 70%, 80% { transform: rotate(18deg); } 75% { transform: rotate(10deg); } }
.wbfly { animation: wflutter 9s ease-in-out infinite; }
.wbfly.b2 { animation-duration: 11s; animation-delay: -4s; }
.wbfly .wbwing { animation: wwingb .18s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 50%; }
@keyframes wflutter { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(60px, -30px); } 50% { transform: translate(120px, 10px); } 75% { transform: translate(50px, 30px); } }
@keyframes wwingb { to { transform: scaleX(.3); } }
.wbirds { animation: wbirds 28s linear infinite; }
.wbirds .wwing { animation: wflap .35s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes wbirds { 0% { transform: translate(0, 0); } 100% { transform: translate(1800px, 120px); } }
@keyframes wflap { to { transform: scaleY(-.6); } }
.wclouds { position: absolute; inset: 0; pointer-events: none; z-index: 5000; overflow: hidden; }
.wcloud { position: absolute; left: -600px; width: 560px; height: 280px; border-radius: 50%; background: radial-gradient(closest-side, rgba(30,60,30,.15), rgba(30,60,30,0)); animation: wcloud 80s linear infinite; }
.wcloud.c1 { top: 40px; }
.wcloud.c2 { top: 380px; animation-delay: -32s; animation-duration: 95s; }
.wcloud.c3 { top: 620px; animation-delay: -60s; animation-duration: 110s; }
@keyframes wcloud { to { transform: translateX(2100px); } }
.wflag { animation: wflagup .6s cubic-bezier(.3,1.6,.5,1); transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes wflagup { from { transform: scaleY(0); } }
.wpennant { animation: wpennant .8s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 0 50%; }
@keyframes wpennant { to { transform: scaleX(.8) skewY(6deg); } }
.wcrane { animation: wcrane 4s ease-in-out infinite; transform-box: fill-box; transform-origin: 100% 0; }
@keyframes wcrane { 50% { transform: rotate(-4deg); } }

/* ---------- กลางคืน ---------- */
/* กลางคืน (Kelvin 21 ต.ค. "ฉากดูมืดไป"): โทนฟ้าหัวค่ำบาง ๆ ยังเห็นสีของชัด + ขอบจอเข้มเล็กน้อย */
.wnight { position: absolute; inset: 0; pointer-events: none; z-index: 4000; background: rgba(48,62,150,.16); box-shadow: inset 0 0 220px rgba(20,26,80,.35); opacity: 0; transition: opacity 1.2s; }
.world.night .wnight { opacity: 1; }
.world.night .wlamp svg { filter: drop-shadow(0 0 8px #FFB347) drop-shadow(0 0 18px #FF8A3D); }
.world.night .wbulb { fill: #FFF2A8; }
.world.night .wwin { fill: #FFE7A0; }

/* หยุดแอนิเมชันเมื่อซ่อนแท็บ / ประหยัดแบต / ผู้ใช้ตั้งลดการเคลื่อนไหว */
.world.paused *, .world.paused { animation-play-state: paused !important; }
html.lite .wtree, html.lite .wduck, html.lite .when, html.lite .wbfly, html.lite .wbirds, html.lite .wcloud, html.lite .wplants, html.lite .wlamp, html.lite .wcat *, html.lite .wcust .wbody { animation: none !important; }
html.lite .wbirds, html.lite .wclouds, html.lite .wbfly { display: none; }
@media (prefers-reduced-motion: reduce) { .world *, .wsickle { animation: none !important; transition: none !important; } .wbirds, .wclouds, .wbfly, .wsteam, .wspark { display: none; } }

/* ---------- HUD บน: ป้ายร้าน + แต้ม ดาว บัตรคิว เมนู ---------- */
#phone.game .top { position: absolute; left: 0; right: 0; top: 0; z-index: 5; display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; padding: max(8px, env(safe-area-inset-top, 0px)) max(8px, env(safe-area-inset-right, 0px)) 0 max(8px, env(safe-area-inset-left, 0px)); background: none; border: 0; color: #4A2C10; pointer-events: none; }
#phone.game .top > * { pointer-events: auto; }
#phone.game .top .who { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 0 1 auto; max-width: 48%; padding: 3px 10px 4px 3px; background: linear-gradient(#FFF8E4, #F1DCA8); border: 3px solid #5A3110; border-radius: 18px; box-shadow: 0 4px 0 rgba(60,30,8,.4); font: 800 14px/1.2 var(--f-display); color: #4A2C10; white-space: nowrap; }
#phone.game .top .lvstar { position: relative; flex: none; width: 40px; height: 40px; display: grid; place-items: center; }
#phone.game .top .lvstar svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
#phone.game .top .lvstar b { position: relative; font: 800 15px/1 var(--f-display); color: #fff; text-shadow: 0 2px 0 #9A5A00, 0 0 3px #9A5A00; }
#phone.game .top .wn { display: grid; min-width: 0; gap: 1px; }
#phone.game .top .wn > span { overflow: hidden; text-overflow: ellipsis; }
#phone.game .top .who small { display: block; font: 600 11px/1.2 var(--f-body); color: #7A5230; opacity: 1; overflow: hidden; text-overflow: ellipsis; }
#phone.game .top .lvbar { display: block; position: relative; height: 13px; margin: 1px 0 0; border-radius: 7px; background: #E1C99A; border: 2px solid #5A3110; overflow: hidden; }
#phone.game .top .lvbar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; background: linear-gradient(#8BE07A, #3FB35A); }
#phone.game .top .lvbar em { position: relative; display: block; font: 800 8.5px/9px var(--f-display); color: #2B2140; font-style: normal; text-align: center; white-space: nowrap; overflow: hidden; }
#phone.game .topbtns { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 5px; min-width: 0; }
#phone.game .topbtns .pts, #phone.game .topbtns .dia, #phone.game .topbtns .tkchip, #phone.game .topbtns .menubtn { position: relative; display: inline-flex; align-items: center; gap: 4px; height: 38px; box-sizing: border-box; padding: 0 10px 0 6px; border-radius: 19px; background: linear-gradient(#FFF8E4, #F1DCA8); border: 3px solid #5A3110; box-shadow: 0 4px 0 rgba(60,30,8,.4); color: #4A2C10; font: 800 16px/1 var(--f-display); white-space: nowrap; }
#phone.game .topbtns .pts .pi { font-size: 20px; }
#phone.game .topbtns .pts .pv { display: flex; align-items: baseline; gap: 3px; }
#phone.game .topbtns .pts b, #phone.game .topbtns .dia b, #phone.game .topbtns .tkchip b { font: 800 17px/1 var(--f-display); color: #4A2C10; font-variant-numeric: tabular-nums; }
#phone.game .topbtns .pts small { font: 700 10.5px/1 var(--f-body); color: #7A5230; }
#phone.game .topbtns .dia svg { width: 24px; height: 24px; }
#phone.game .topbtns .dia .plus { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: #4FC06A; color: #fff; border: 2px solid #2B7A3E; font: 800 14px/1 var(--f-display); }
#phone.game .topbtns .tkchip { cursor: default; }
#phone.game .topbtns .tkchip small { font: 600 10px/1 var(--f-body); color: #7A5230; }
#phone.game .topbtns .menubtn { padding: 0 10px; background: linear-gradient(#FFE29A, #F2B84A); font-size: 18px; }
#phone.game .topbtns .ndot { position: absolute; right: -3px; top: -3px; width: 12px; height: 12px; border-radius: 50%; background: #E8453C; border: 2px solid #fff; }
#phone.game .capbar { display: none; }
#phone.game .topbtns .pts::after, #phone.game .topbtns .dia::after { display: none !important; }
#phone.game .topbtns button:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(60,30,8,.4); }

/* ---------- ปุ่มเมนูหลัก (ไม้กลม) ---------- */
#phone.game .tabs { position: absolute; z-index: 5; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; gap: 10px; padding: 0 8px max(8px, env(safe-area-inset-bottom, 0px)); background: none; border: 0; pointer-events: none; }
#phone.game .tabs button { pointer-events: auto; position: relative; width: 66px; min-height: 0; height: 62px; padding: 4px 2px 3px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; border-radius: 20px; background: linear-gradient(#FFE7A8, #F2B84A); border: 3px solid #5A3110; box-shadow: 0 5px 0 #5A3110, 0 8px 14px rgba(0,0,0,.2); color: #5A3110; font: 800 11.5px/1.1 var(--f-display); }
#phone.game .tabs button svg { width: 26px; height: 26px; stroke: #5A3110; stroke-width: 2.2; }
#phone.game .tabs button[aria-selected="true"] { background: linear-gradient(#A6EB8E, #4FC06A); color: #1F4A26; }
#phone.game .tabs button[aria-selected="true"] svg { stroke: #1F4A26; }
#phone.game .tabs button:active { transform: translateY(3px); box-shadow: 0 2px 0 #5A3110; }
#phone.game .tabs .dot { position: absolute; right: -4px; top: -4px; width: 16px; height: 16px; border-radius: 50%; background: #E8453C; border: 2.5px solid #fff; animation: wbadge 1.4s ease-in-out infinite; }
html.land #phone.game .tabs { top: 62px; bottom: 6px; right: auto; left: 0; flex-direction: column; justify-content: center; gap: 12px; padding: 0 0 0 max(8px, env(safe-area-inset-left, 0px)); zoom: 1; }
html.land #phone.game .tabs button { width: 62px; height: 56px; }

/* ---------- แผงเมนู (เปิดเมื่อแตะร้าน/อาคาร/ปุ่ม) ---------- */
#phone.game .panel { position: absolute; z-index: 4; left: 0; right: 0; bottom: calc(80px + env(safe-area-inset-bottom, 0px)); height: 57%; max-height: calc(100% - 150px); display: flex; flex-direction: column; background: #FFF8E8; border: 4px solid #5A3110; border-radius: 22px; box-shadow: 0 6px 0 rgba(60,30,8,.45), 0 14px 30px rgba(0,0,0,.28); overflow: hidden; animation: wpanel .34s cubic-bezier(.3,1.35,.5,1); }
@keyframes wpanel { from { transform: translateY(40px) scale(.96); opacity: 0; } }
html.land #phone.game .panel { left: auto; top: calc(58px + env(safe-area-inset-top, 0px)); bottom: 8px; right: max(8px, env(safe-area-inset-right, 0px)); width: min(56%, 540px); height: auto; max-height: none; animation-name: wpanell; }
@keyframes wpanell { from { transform: translateX(60px) scale(.97); opacity: 0; } }
#phone.game .phead { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 6px 5px 14px; background: repeating-linear-gradient(90deg, #B97A3D 0 38px, #A8692F 38px 40px); border-bottom: 3px solid #5A3110; color: #FFF4D6; font: 800 16px/1.3 var(--f-display); text-shadow: 0 2px 0 #5A3110; }
#phone.game .pclose { width: 34px; height: 34px; flex: none; padding: 0; border-radius: 50%; background: linear-gradient(#FF7A6E, #E8453C); color: #fff; border: 3px solid #5A3110; box-shadow: 0 3px 0 #5A3110; font: 800 16px/1 var(--f-display); text-shadow: none; }
#phone.game .pclose:active { transform: translateY(2px); box-shadow: 0 1px 0 #5A3110; }
#phone.game .panel .scrollarea { flex: 1 1 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 6px 2px 14px; background: none; }
html.land #phone.game .panel .scrollarea { padding: 4px 4px 12px; }
#phone.game .toast { z-index: 60; }
html:not(.land) #phone.game .toast { bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
html.land #phone.game .toast { left: 86px; right: auto; max-width: min(520px, 60%); }
/* 22 ต.ค. (Kelvin): เปิดป๊อปอัปอยู่ (.ontop จาก render) → ข้อความแจ้งขึ้นบนจอ ไม่บังปุ่มรับขั้นถัดไป */
html:not(.land) #phone.game .toast.ontop, html.land #phone.game .toast.ontop { top: 6px; bottom: auto; }
/* 22 ต.ค. (Kelvin): ข้อความแจ้ง = ลูกโป่ง · ลอยขึ้นมา (trise) → ค่อยๆ ลอยสูงขึ้นจนใต้แถบบน (tdrift ใช้ translate, ระยะ --rise จาก toastSync) → ค้างลอยเบาๆ (tbob)
   แตะตรงไหนบนจอ = ค่อยๆ จาง (bye) · กดทะลุได้ ไม่บังปุ่มข้างใต้ · มีเชือกลูกโป่งสั้นๆ ใต้กล่อง */
#phone > .toast { pointer-events: none; cursor: default; }
#phone.game .toast { transform-origin: 50% 100%; animation: trise .72s cubic-bezier(.22, 1.3, .42, 1) both, tbob 2.6s ease-in-out .72s infinite, tdrift 7s cubic-bezier(.3, .55, .35, 1) .55s forwards; }
#phone.game .toast.ontop { animation: trise .72s cubic-bezier(.22, 1.3, .42, 1) both, tbob 2.6s ease-in-out .72s infinite; }
#phone.game .toast.bye, #phone.game .toast.ontop.bye { animation: tbye .8s ease-out forwards; }
#phone.game .toast::after { content: ''; position: absolute; left: 50%; top: 100%; width: 2px; height: 12px; margin-left: -1px; margin-top: 3px; border-radius: 1px; background: #3A1E06; transform-origin: 50% 0; animation: tstring 2.6s ease-in-out infinite; }
@keyframes trise { 0% { opacity: 0; transform: translateY(70px) scale(.55) rotate(-4deg); } 55% { opacity: 1; transform: translateY(-10px) scale(1.04) rotate(2deg); } 80% { transform: translateY(3px) scale(.99) rotate(-1deg); } 100% { opacity: 1; transform: none; } }
@keyframes tbob { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-4px) rotate(.6deg); } }
@keyframes tdrift { from { translate: 0 0; } to { translate: 0 var(--rise, 0px); } }
@keyframes tbye { from { opacity: 1; } to { opacity: 0; transform: translateY(-24px) scale(.96); } }
@keyframes tstring { 0%, 100% { transform: rotate(6deg); } 50% { transform: rotate(-6deg); } }
@media (prefers-reduced-motion: reduce) { #phone.game .toast, #phone.game .toast::after { animation: none !important; } }
/* ฉากเก่าที่หัวแท็บร้าน/เวทีซ้ายไม่ใช้แล้ว (แผนที่แทน) */
#phone.game .stage { display: none; }
#phone.game .overlay { z-index: 30; }

/* HUD/ปุ่ม: ไม่ใช้ zoom 1.5 ของแผงเดิม (ออกแบบขนาดเองแล้ว) · แนวตั้ง 2 แถว: ป้ายร้าน / แต้ม ดาว บัตรคิว เมนู */
#phone.game .top, #phone.game .tabs { zoom: 1.12; }
/* ตัวหนังสือคมขึ้น (Kelvin 21 ต.ค. "ปรับ font ดูดีขึ้น ชัดขึ้น"): ฟอนต์หัวข้อ Anuphan มีหนาสุด 700 → ห้ามเบราว์เซอร์ทำตัวหนาปลอมจาก 800
   · ตัวหนังสือสีเข้มบนป้ายครีม/ปุ่มเหลือง ไม่ใส่เงาเข้มฟุ้ง (สืบมาจากธีมเดิมใน index.html) */
#phone, .fx-level, .fx-dlv, .toast { font-synthesis: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
#phone.game .top .who, #phone.game .top .who small, #phone.game .tabs button { text-shadow: none; }
#phone.game .top .who { letter-spacing: .1px; }
#phone.game .top .who small { font-weight: 600; color: #6B4524; }
#phone.game .top .lvbar { height: 15px; }
#phone.game .top .lvbar em { font: 700 9.5px/11px var(--f-body); color: #2B2140; text-shadow: 0 1px 0 rgba(255,255,255,.55); }
#phone.game .tabs button { font-weight: 700; letter-spacing: .2px; }
/* ตัวหนังสือใหญ่ขึ้นทุกโหมด (Kelvin 21 ต.ค.): HUD · ชื่อปุ่มเมนู · ป้าย/ฟองในแผนที่ (แผงขยายด้วย zoom ใน index.html) */
#phone.game .top .who { font-size: 16.5px; }
#phone.game .top .who small { font-size: 13px; }
#phone.game .top .lvbar { height: 18px; }
#phone.game .top .lvbar em { font-size: 11.5px; line-height: 14px; }
#phone.game .topbtns .pts b, #phone.game .topbtns .dia b, #phone.game .topbtns .tkchip b { font-size: 19px; }
#phone.game .topbtns .pts small, #phone.game .topbtns .tkchip small { font-size: 12px; }
#phone.game .tabs button { font-size: 13.5px; }
#phone .section h3 { flex-wrap: wrap; row-gap: 0; }   /* ตัวใหญ่แล้วหัวข้อยาว (กระดานออเดอร์ ฯลฯ) ไม่ตัดกลางคำ — คำอธิบายเล็กขึ้นบรรทัดใหม่แทน */
.wlabel { font-size: 14.5px; } .wlv { font-size: 13px; } .wleft { font-size: 13px; } .wbub2 { font-size: 16px; max-width: 250px; }
#phone.game .tabs button svg, #phone.game .tabs button[aria-selected="true"] svg { padding: 0 0 2px; background: none; box-shadow: none; }   /* ป้ายครีมหลังไอคอน (ธีมเดิม) ทับชื่อปุ่ม — ปุ่มเขียวบอกว่าเลือกอยู่แล้ว */
html.land #phone.game .top, html.land #phone.game .tabs { zoom: 1; }
html.land #phone.game .top { grid-column: auto; grid-row: auto; display: flex; border: 0; background: none; padding-top: max(6px, env(safe-area-inset-top, 0px)); }
html.land #phone.game .tabs { background: none; border: 0; }
html:not(.land) #phone.game .top { flex-wrap: wrap; row-gap: 6px; }
html:not(.land) #phone.game .top .who { max-width: none; flex: 1 1 100%; }
html:not(.land) #phone.game .topbtns { flex: 1 1 100%; justify-content: space-between; flex-wrap: nowrap; }
html:not(.land) #phone.game .topbtns .tkchip small { display: none; }
html:not(.land) #phone.game .top .wn { flex: 1; }
.wav { overflow: visible; }

/* ---------- ไอคอนวาดเองแทนอีโมจิ (icons.js) ---------- */
.ei { display: inline-block; width: 1.2em; height: 1.2em; vertical-align: -.24em; overflow: visible; flex: none; }
.btn .ei, .chip .ei { margin-right: .1em; }
.mtile .mic .ei { width: 30px; height: 30px; vertical-align: middle; }
.pts .pi .ei { width: 24px; height: 24px; vertical-align: middle; }
.fx-float .ei { width: 1.3em; height: 1.3em; }
.rot-phone .ei { width: 64px; height: 64px; }

/* ---------- ความรู้สึกแบบเกม: แผ่นเด้งเข้า ปุ่มยุบ ---------- */
#phone .overlay { animation: wfade .2s ease-out; }
@keyframes wfade { from { background: rgba(8,10,28,0); } }
#phone .overlay > .sheet { animation: wsheet .38s cubic-bezier(.25,1.4,.5,1); transform-origin: 50% 100%; }
html.land #phone .overlay > .sheet { transform-origin: 50% 50%; animation-name: wsheetc; }
@keyframes wsheet { from { transform: translateY(60px) scale(.94); opacity: 0; } }
@keyframes wsheetc { from { transform: scale(.82); opacity: 0; } 70% { transform: scale(1.02); opacity: 1; } }
#phone .btn, #phone .chip, #phone .menu-tile, #phone .mtile, #phone .pick, #phone .invtile, #phone .qcard .btn { transition: transform .08s ease-out; }
#phone .btn:not([disabled]):active, #phone .chip:not([disabled]):active, #phone .menu-tile:active, #phone .mtile:active, #phone .pick:active, #phone button.invtile:active { transform: scale(.94); }
#sc.enter > * { animation: wcardin .36s cubic-bezier(.25,1.3,.5,1) both; }
#sc.enter > :nth-child(2) { animation-delay: .04s; } #sc.enter > :nth-child(3) { animation-delay: .08s; } #sc.enter > :nth-child(4) { animation-delay: .12s; } #sc.enter > :nth-child(n+5) { animation-delay: .16s; }
@keyframes wcardin { from { transform: translateY(18px) scale(.97); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { #phone .overlay, #phone .overlay > .sheet, #sc.enter > *, #phone.game .panel { animation: none !important; } }

/* ---------- ร้านย่อส่วนในแผ่น (ตกแต่งร้าน / ส่องร้านเพื่อน) ---------- */
.wmini { position: relative; flex: none; height: 170px; border-radius: 16px; overflow: hidden; border: 3px solid #5A3110; background: radial-gradient(circle at 30% 120%, #A3DC7B 0 40%, transparent 41%), linear-gradient(#BFE8FF 0 34%, #94D46A 34%); }
.wmini.night { background: linear-gradient(#1B2050 0 34%, #3F6A3A 34%); }
.wmin { position: absolute; left: 50%; top: 8px; width: 420px; height: 300px; transform: translateX(-50%) scale(.52); transform-origin: 50% 0; }
.wmin > div { position: absolute; inset: 0; }
.wmin svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.wmin .wmc { left: 170px; top: 112px; width: 84px; height: 92px; inset: auto; }
.wmin .wmc svg { position: static; width: 100%; height: 100%; }
.wmin .wpets { top: 230px; height: 80px; left: -40px; right: -40px; inset: auto; }
.wmini.night .wlamp svg { filter: drop-shadow(0 0 8px #FFB347) drop-shadow(0 0 18px #FF8A3D); }
.wmini.night .wmb, .wmini.night .wmf { filter: brightness(.72) saturate(.9); }
.wmini.night .wmf .wlamp { filter: brightness(1.4); }
html:not(.land) #phone.game .panel .section { padding-left: 8px; padding-right: 8px; }
#phone.game .tabs button { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html:not(.land) #phone.game .topbtns .pts small { display: none; }

/* ---------- ถนนตลาดนัด (ทิศใต้) ---------- */
.wstop .wno { position: absolute; left: 50%; top: 34%; transform: translate(-50%, -50%); font: 800 20px/1 var(--f-display); color: #5A3110; text-shadow: 0 2px 0 rgba(255,255,255,.6); pointer-events: none; }
.wstop.past .wno { color: #8A7E68; }
.wstop .wok { position: absolute; right: 10px; top: -4px; width: 22px; height: 22px; border-radius: 50%; background: #4FC06A; color: #fff; font: 800 13px/22px var(--f-display); font-style: normal; text-align: center; border: 2px solid #fff; }
.wstop .wrw { position: absolute; left: 50%; bottom: 82%; transform: translateX(-50%) scale(var(--zs, 1)); transform-origin: 50% 100%; display: inline-flex; align-items: center; gap: 2px; padding: 2px 8px 2px 4px; border-radius: 14px; background: #fff; border: 2.5px solid #2B2140; box-shadow: 0 3px 0 rgba(43,33,64,.22); font: 800 14px/1.2 var(--f-display); color: #2B2140; white-space: nowrap; }
.wstop .wrw .ei { width: 20px; height: 20px; }
.wstop .wrw.st { padding: 2px; border-radius: 50%; }
.wstop .wrw.st svg { width: 30px; height: 30px; }
.wstop.next::after { content: ''; position: absolute; left: 4%; right: 4%; top: 18%; bottom: 0; border-radius: 50%; border: 4px solid #FFF27A; box-shadow: 0 0 14px #FFE15A; animation: wnext 1.2s ease-in-out infinite; pointer-events: none; }
@keyframes wnext { 50% { transform: scale(1.12); opacity: .5; } }
.wtoken { position: absolute; left: 0; top: 0; width: 70px; height: 120px; pointer-events: none; will-change: transform; }
.wtoken .wtcat { position: absolute; left: 4px; right: 4px; bottom: 0; height: 68px; pointer-events: auto; cursor: pointer; }
.wtoken .wtcat svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 3px 0 rgba(0,0,0,.2)); }
.wtoken .wtcat .m-bob { animation: mbob 2.4s ease-in-out infinite; }
.wtoken .wgo { position: absolute; left: 50%; top: 0; transform: translateX(-50%) scale(var(--zs, 1)); transform-origin: 50% 100%; white-space: nowrap; background: #4FC06A; color: #fff; border: 2.5px solid #2B7A3E; border-radius: 14px; padding: 2px 10px; font: 800 13px/1.4 var(--f-display); box-shadow: 0 3px 0 #2B7A3E; pointer-events: auto; cursor: pointer; animation: wbob 1.3s ease-in-out infinite; }
.wtoken .wgo .ei { width: 18px; height: 18px; }

/* ---------- โซนก่อสร้าง ---------- */
.wzone .zneed { left: 50%; bottom: auto; top: 44%; }
.wznext { position: absolute; left: 50%; bottom: -40px; transform: translateX(-50%) scale(var(--zs, 1)); transform-origin: 50% 0; white-space: nowrap; background: #2B2140; color: #FFE7A8; border-radius: 10px; padding: 1px 8px; font: 700 11.5px/1.6 var(--f-display); }
.wzlamp { animation: wswing 3s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 0; }
.whammer { animation: whammer .7s ease-in-out infinite; transform-box: fill-box; transform-origin: 0 100%; }
@keyframes whammer { 50% { transform: rotate(-24deg); } }
.wzone.building > svg { animation: wbuild .9s cubic-bezier(.3,1.5,.5,1); transform-origin: 50% 100%; }
.wzone.building::after { content: ''; position: absolute; left: 10%; right: 10%; bottom: 0; height: 40%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,255,255,.9), rgba(233,211,166,0)); animation: wdust 1.2s ease-out forwards; pointer-events: none; }
@keyframes wbuild { 0% { transform: scale(1, 1); } 30% { transform: scale(1.08, .9); } 60% { transform: scale(.97, 1.05); } 100% { transform: scale(1); } }
@keyframes wdust { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.6) translateY(-20px); opacity: 0; } }

/* ---------- ลานลีก (ทิศตะวันออก) ---------- */
.wleague .wlg-h { position: absolute; left: 60px; right: 60px; top: 10px; height: 34px; display: flex; align-items: center; justify-content: center; font: 800 17px/1 var(--f-display); color: #2B2140; white-space: nowrap; overflow: hidden; pointer-events: none !important; }
.wleague .wlg-b { position: absolute; left: 30px; right: 30px; top: 60px; height: 136px; display: grid; align-content: start; gap: 3px; pointer-events: none !important; }
.wleague .wlg-r { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 2px 8px; border-radius: 6px; color: #F3F8EE; font: 700 15px/1.45 var(--f-display); }
.wleague .wlg-r b { color: #FFE15A; text-align: center; }
.wleague .wlg-r span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wleague .wlg-r i { font-style: normal; font-variant-numeric: tabular-nums; }
.wleague .wlg-r.me { background: rgba(255,225,90,.25); outline: 2px dashed #FFE15A; }
.wleague .wlg-off { margin: 30px 0 0; text-align: center; color: #E9F2E2; font: 700 15px/1.5 var(--f-display); }
.wleague .wlg-me { position: absolute; left: 50%; bottom: 52px; transform: translateX(-50%); white-space: nowrap; color: #FFE7A8; font: 700 12px/1 var(--f-body); pointer-events: none !important; }
.wpodium .wpd { position: absolute; transform: translateX(-50%); max-width: 92px; padding: 1px 6px; border-radius: 8px; background: #fff; border: 2px solid #2B2140; font: 800 11.5px/1.4 var(--f-display); color: #2B2140; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 2px 0 rgba(0,0,0,.2); }
.wpodium .wpd.me { background: #FFE15A; }
.wpodium .p1 { left: 50%; top: 22%; } .wpodium .p2 { left: 19%; top: 40%; } .wpodium .p3 { left: 81%; top: 50%; }
.wtrophy { animation: wtrophy 2.2s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes wtrophy { 50% { transform: translateY(-6px) rotate(-4deg); } }
html.lite .wzlamp, html.lite .wtrophy, html.lite .whammer, html.lite .wstop.next::after { animation: none !important; }
/* แตะลูกค้าในแผนที่ → ใบออเดอร์ของคนนั้นกะพริบ */
#phone .panel .scrollarea { position: relative; }
#phone .order.oflash { animation: oflash 1.6s ease-out; }
@keyframes oflash { 0%, 40% { box-shadow: 0 0 0 5px #FFE15A, 0 0 22px 6px rgba(255,201,60,.8); transform: scale(1.02); } 100% { box-shadow: 0 0 0 0 rgba(255,225,90,0); transform: none; } }
@media (prefers-reduced-motion: reduce) { #phone .order.oflash { animation: none; outline: 4px solid #FFE15A; } }

/* ---------- ของประกอบฉากเฉพาะตลาด (world.js THEMEP) ---------- */
.wth > svg { overflow: visible; }
.wlant { animation: wswing 3.4s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 0; }
.world.night .wstr svg { filter: drop-shadow(0 0 6px #FFB347); }
/* เยาวราช: ป้ายนีออนแนวตั้ง (กลางคืนเรืองแสงกะพริบ) · มังกรเชิดผ่านถนน · ควันธูปศาลเจ้า · กระทะคั่วเกาลัด */
.wneon .wneonl { opacity: .55; }
.world.night .wneon .wneonl { opacity: 1; filter: drop-shadow(0 0 3px currentColor); animation: wneon 3s steps(1) infinite; }
.world.night .wneon svg { filter: drop-shadow(0 0 10px rgba(255,90,140,.7)); }
@keyframes wneon { 0%, 46%, 52%, 100% { opacity: 1; } 48% { opacity: .35; } }
.wdragon { animation: wcross 26s linear infinite; animation-delay: -6s; }
.wdragon .wdseg { animation: wdseg .7s ease-in-out infinite alternate; }
@keyframes wcross { 0% { transform: translateX(0); } 70%, 100% { transform: translateX(2300px); } }
@keyframes wdseg { from { transform: translateY(0); } to { transform: translateY(-9px); } }
.wshrine .wsteam, .wcart .wsteam { background: rgba(230,230,240,.85); }
.wshrine .wsteam { left: 46%; top: 18%; width: 8px; height: 8px; }
/* บรรทัดทอง: วินมอไซค์วิ่งผ่าน · ไฟสนามกีฬา */
.wmoto { animation: wcross 14s linear infinite; animation-delay: -3s; }
.wmoto svg { animation: wbump .25s ease-in-out infinite alternate; }
@keyframes wbump { to { transform: translateY(-2px); } }
.world.night .wflood { fill: #FFFBD0; filter: drop-shadow(0 0 10px #FFF6A0); }
/* กาดเมืองเหนือ: ตุงพลิ้ว · ร่มบ่อสร้างหมุนช้า · หมอกดอย · โคมลอยตอนกลางคืน */
.wtungf { animation: wtung 2.6s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 0; }
.wtung:nth-child(2n) .wtungf { animation-delay: -1.1s; }
@keyframes wtung { 0%, 100% { transform: skewX(0) scaleX(1); } 50% { transform: skewX(6deg) scaleX(.9); } }
.wumb { animation: wumb 12s linear infinite; }
@keyframes wumb { to { transform: rotate(360deg); } }
.wmist { background: radial-gradient(closest-side, rgba(255,255,255,.55), rgba(255,255,255,0)); border-radius: 50%; animation: wmist 40s ease-in-out infinite alternate; pointer-events: none; }
.wmist.m2 { animation-duration: 55s; animation-delay: -20s; }
@keyframes wmist { from { transform: translateX(-120px); } to { transform: translateX(260px); } }
.world.night .wmist { opacity: .35; }
.wkhom { display: none; }
.world.night .wkhom { display: block; animation: wkhom 16s linear infinite; }
.world.night .wkhom svg { filter: drop-shadow(0 0 8px #FFB347) drop-shadow(0 0 16px #FF8A3D); }
.wkhom.k1 { animation-delay: -3s !important; } .wkhom.k2 { animation-delay: -6s !important; } .wkhom.k3 { animation-delay: -9s !important; } .wkhom.k4 { animation-delay: -11s !important; } .wkhom.k5 { animation-delay: -14s !important; }
@keyframes wkhom { 0% { transform: translate(0, 0) scale(1); opacity: 0; } 8% { opacity: 1; } 100% { transform: translate(60px, -720px) scale(.5); opacity: 0; } }
/* ตลาดนัดอิ๊กซี: ลูกโป่งลอย */
.wballoon { animation: wbob 2.2s ease-in-out infinite; }
html.lite .wlant, html.lite .wdragon, html.lite .wmoto, html.lite .wtungf, html.lite .wumb, html.lite .wmist, html.lite .wkhom, html.lite .wballoon, html.lite .wneonl { animation: none !important; }
html.lite .wdragon, html.lite .wmoto, html.lite .wmist { display: none; }

/* ปุ่มปิดแผ่น (Kelvin 21 ต.ค. "ปุ่ม close ขึ้นมาอยู่ footer"): ติดขอบล่างของแผ่นเสมอ ไม่ต้องเลื่อนลงไปหา */
#phone .sheet > [data-act="close"], #phone .sheet > [data-act="receipts"]:last-child { position: sticky; bottom: 0; z-index: 3; box-shadow: 0 -12px 14px -4px #FFF6DA, 0 4px 0 rgba(60,30,8,.25); }
#phone .sheet > [data-act="close"]:not(:last-child) { order: 99; }

/* ===== ของเสร็จ / ผักสุก / ลูกค้าที่ส่งได้ — เด่นขึ้น (Kelvin 21 ต.ค. 2569) =====
   ฟองใหญ่ขึ้น (ทอง = อาหาร · เขียว = ผัก/ลูกค้า) + แสงหมุนหลังฟอง + วงกระเพื่อม + ดาวระยิบ + แสงที่ฐาน · ลูกค้าที่ส่งได้กระโดดดุ๊กดิ๊ก */
.wbub.ready, .wbub.ripe { width: 64px; height: 64px; margin-left: -32px; z-index: 2; animation: wdone 1s ease-in-out infinite; }
.wbub.ready { background: radial-gradient(circle at 50% 38%, #fff 0 48%, #FFF0A6 100%); border: 3.5px solid #D98A00; box-shadow: 0 4px 0 rgba(90,49,16,.35), 0 0 0 4px rgba(255,210,60,.6), 0 0 22px 8px rgba(255,196,30,.6); }
.wbub.ripe { background: radial-gradient(circle at 50% 38%, #fff 0 48%, #D6F6C2 100%); border: 3.5px solid #2E9A4E; box-shadow: 0 4px 0 rgba(30,70,30,.35), 0 0 0 4px rgba(120,222,110,.6), 0 0 22px 8px rgba(80,206,90,.55); }
.wbub.ready::after { border-top-color: #D98A00; } .wbub.ripe::after { border-top-color: #2E9A4E; }
.wbub.ready svg, .wbub.ripe svg { width: 48px; height: 48px; }
@keyframes wdone { 0%, 100% { translate: 0 0; scale: 1; } 40% { translate: 0 -10px; scale: 1.1; } 55% { translate: 0 -10px; scale: 1.1; } }
.wrays { position: absolute; left: 50%; bottom: calc(96% - 36px); width: 136px; height: 136px; margin-left: -68px; border-radius: 50%; pointer-events: none !important; z-index: 1;
  background: repeating-conic-gradient(rgba(255,214,60,.85) 0 11deg, rgba(255,214,60,0) 11deg 30deg);
  -webkit-mask: radial-gradient(circle, #000 28%, transparent 70%); mask: radial-gradient(circle, #000 28%, transparent 70%); animation: wspin 7s linear infinite; }
.wrays.ripe { background: repeating-conic-gradient(rgba(255,250,170,.95) 0 11deg, rgba(255,250,170,0) 11deg 30deg); }   /* บนหญ้าเขียว ใช้แสงเหลืองอ่อนให้ตัด */
.wping { position: absolute; left: 50%; bottom: 96%; width: 64px; height: 64px; margin-left: -32px; box-sizing: border-box; border-radius: 50%; border: 4px solid #FFD23F; pointer-events: none !important; z-index: 1; animation: wping 1.4s ease-out infinite; }
.wping.ripe { border-color: #FFF27A; }
@keyframes wping { from { transform: scale(1); opacity: .95; } to { transform: scale(2); opacity: 0; } }
.wstar { position: absolute; left: 50%; bottom: 96%; width: 16px; height: 16px; pointer-events: none !important; z-index: 3; background: #FFE25A; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: wtwinkle 1.5s ease-in-out infinite; }
.wstar.s1 { margin-left: -46px; bottom: calc(96% + 48px); }
.wstar.s2 { margin-left: 30px; bottom: calc(96% + 58px); width: 12px; height: 12px; animation-delay: .5s; }
.wstar.s3 { margin-left: 34px; bottom: calc(96% + 8px); width: 14px; height: 14px; animation-delay: 1s; }
@keyframes wtwinkle { 0%, 100% { transform: scale(.3) rotate(0); opacity: 0; } 50% { transform: scale(1.2) rotate(45deg); opacity: 1; } }
.wglow { position: absolute; left: -15%; right: -15%; bottom: -8%; height: 44%; border-radius: 50%; pointer-events: none !important; background: radial-gradient(ellipse, rgba(255,206,50,.75), rgba(255,206,50,0) 70%); animation: wglow 1.2s ease-in-out infinite alternate; }
.wglow.ripe { bottom: 0; height: 70%; background: radial-gradient(ellipse, rgba(255,246,150,.75), rgba(255,246,150,0) 70%); }
@keyframes wglow { from { opacity: .45; transform: scale(.92); } to { opacity: 1; transform: scale(1.06); } }
/* ลูกค้าที่ส่งออเดอร์ได้แล้ว */
.wcust .wneed.ok { width: 52px; height: 52px; margin-left: -26px; background: radial-gradient(circle at 50% 38%, #fff 0 48%, #D6F6C2 100%); border: 3px solid #2E9A4E; box-shadow: 0 3px 0 rgba(30,70,30,.3), 0 0 0 4px rgba(120,222,110,.55), 0 0 18px 6px rgba(80,206,90,.55); animation: wdone 1.1s ease-in-out infinite; }
.wcust .wneed.ok svg { width: 38px; height: 38px; }
.wcust .wneed.ok i { width: 24px; height: 24px; right: -9px; top: -9px; font-size: 15px; line-height: 24px; }
.wcust .wneed.ok::before { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 4px solid #6FD86A; pointer-events: none; animation: wping 1.4s ease-out infinite; }
.wcust.ok::before { content: ''; position: absolute; left: 50%; bottom: -8px; width: 84px; height: 28px; margin-left: -42px; border-radius: 50%; background: radial-gradient(ellipse, rgba(90,210,90,.7), rgba(90,210,90,0) 70%); animation: wglow 1.1s ease-in-out infinite alternate; }
.wcust.ok:not(.walk) .wwalker { animation: whop 1.2s ease-in-out infinite; }
@keyframes whop { 0%, 55%, 100% { translate: 0 0; } 70% { translate: 0 -12px; } 85% { translate: 0 0; } 92% { translate: 0 -4px; } }
/* ประหยัดแบต / ลดการเคลื่อนไหว: เหลือสีและแสงนิ่ง ไม่ขยับ */
html.lite .wbub.ready, html.lite .wbub.ripe, html.lite .wrays, html.lite .wglow, html.lite .wcust .wneed.ok, html.lite .wcust.ok::before, html.lite .wcust.ok .wwalker { animation: none !important; }
html.lite .wping, html.lite .wstar, html.lite .wcust .wneed.ok::before { display: none; }
@media (prefers-reduced-motion: reduce) { .wping, .wstar, .wcust .wneed.ok::before { display: none; } .wcust .wneed.ok, .wcust.ok::before { animation: none !important; } }

/* แผงเมนู (popup) เล็กลง ไม่บังหน้าจอหลัก (Kelvin 21 ต.ค.): แนวตั้งสูง 57% → 45% เว้นขอบข้าง · แนวนอนกว้าง 56% → 46% (เลื่อนดูของในแผงได้เหมือนเดิม) */
html:not(.land) #phone.game .panel { left: 6px; right: 6px; height: 45%; max-height: calc(100% - 190px); }
html.land #phone.game .panel { width: min(46%, 460px); }
/* แผงแคบลงแล้ว: ชื่อลูกค้าในใบออเดอร์ไม่ตัดกลางคำ — ป้ายความสนิทขึ้นบรรทัดใหม่แทน */
#phone.game .order .hd { flex-wrap: wrap; row-gap: 4px; }
#phone.game .order .hd > span:first-child { display: flex; align-items: center; white-space: nowrap; min-width: 0; max-width: 100%; overflow: hidden; }
/* วงเวลาเตา/แปลงมีรูปของที่กำลังทำ/ปลูกตรงกลาง → ขยายวงให้เห็นรูปชัด */
.wbub.busy .wring { width: 40px; height: 40px; }
.wbub.busy.sm .wring { width: 50px; height: 50px; }

/* ===== ย่อ/ขยายแถบเมนู (Kelvin 21 ต.ค. "ซ่อน ย่อขยายได้ ไม่บังหน้าจอหลัก · แสดงทุกแถบพร้อมกัน") =====
   ที่จับ .hudtog: แนวตั้งกลางขอบบนแถบล่าง · แนวนอนมุมล่างซ้าย · ย่อ = แถบบนเลื่อนขึ้น แถบล่างเลื่อนลง (แนวนอนเลื่อนซ้าย) พร้อมกัน */
#phone.game .top, #phone.game .tabs { transition: transform .3s cubic-bezier(.3,.8,.4,1), opacity .25s ease; }
#phone.game.hudmin .top { transform: translateY(calc(-100% - 24px)); opacity: 0; }
#phone.game.hudmin .tabs { transform: translateY(calc(100% + 24px)); opacity: 0; }
html.land #phone.game.hudmin .tabs { transform: translateX(calc(-100% - 24px)); }
#phone.game.hudmin .top, #phone.game.hudmin .top > *, #phone.game.hudmin .tabs button { pointer-events: none; }
#phone.game .hudtog { position: absolute; z-index: 6; left: 50%; bottom: calc(80px + env(safe-area-inset-bottom, 0px)); width: 60px; height: 26px; margin-left: -30px; padding: 0; display: grid; place-items: center; cursor: pointer;
  background: linear-gradient(#FFE7A8, #F2B84A); border: 2.5px solid #5A3110; border-bottom-width: 0; border-radius: 14px 14px 0 0; box-shadow: 0 -2px 6px rgba(0,0,0,.12);
  transition: bottom .3s cubic-bezier(.3,.8,.4,1), border-radius .3s; -webkit-tap-highlight-color: transparent; }
#phone.game .hudtog svg { width: 22px; height: 22px; fill: none; stroke: #5A3110; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s; }
#phone.game.hudmin .hudtog { bottom: calc(8px + env(safe-area-inset-bottom, 0px)); border-bottom-width: 2.5px; border-radius: 14px; box-shadow: 0 3px 0 #5A3110, 0 6px 12px rgba(0,0,0,.2); }
#phone.game.hudmin .hudtog svg { transform: rotate(180deg); }
html.land #phone.game .hudtog, html.land #phone.game.hudmin .hudtog { left: max(8px, env(safe-area-inset-left, 0px)); bottom: 6px; margin-left: 0; width: 62px; border-bottom-width: 2.5px; border-radius: 14px; box-shadow: 0 3px 0 #5A3110; }
html.land #phone.game .hudtog svg { transform: rotate(90deg); }
html.land #phone.game.hudmin .hudtog svg { transform: rotate(-90deg); }
/* ย่อแล้ว แผงที่เปิดจากการแตะในแผนที่ใช้พื้นที่ที่แถบเคยอยู่ */
html:not(.land) #phone.game.hudmin .panel { bottom: calc(42px + env(safe-area-inset-bottom, 0px)); max-height: calc(100% - 60px); }
html.land #phone.game.hudmin .panel { top: calc(8px + env(safe-area-inset-top, 0px)); }
@media (prefers-reduced-motion: reduce) { #phone.game .top, #phone.game .tabs, #phone.game .hudtog, #phone.game .hudtog svg { transition: none; } }
/* รูปดาวหน้ารายการของพรีเมียม (ร้านดาว/ตกแต่ง) */
#phone .pick.prem { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; row-gap: 8px; align-items: center; }
#phone .pick.prem > .btn { grid-column: 1 / -1; width: 100%; }
#phone .pick .startag { flex: none; position: relative; width: 44px; height: 44px; display: grid; place-items: center; }
#phone .pick .startag svg { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 2px 0 rgba(75,63,191,.35)); }
#phone .pick .startag b { position: relative; top: 2px; font: 700 11px/1 var(--f-display); color: #fff; text-shadow: 0 1px 0 #3A2F9F, 0 0 2px #3A2F9F; }
#phone .pick.prem .btn { white-space: nowrap; }
/* v6: ท่าเรือตลาดน้ำ · กระทง · โคมลอยประดับร้าน */
.wboat > svg { width: 100%; height: 100%; overflow: visible; }
.wkrat { animation: wkrat 26s linear infinite; }
.wkrat.r1 { animation-delay: -7s; } .wkrat.r2 { animation-delay: -13s; } .wkrat.r3 { animation-delay: -19s; }
.wkrat svg { width: 100%; height: 100%; }
@keyframes wkrat { 0% { transform: translate(0, -140px) rotate(-4deg); opacity: 0; } 6% { opacity: 1; } 50% { transform: translate(10px, 400px) rotate(4deg); } 94% { opacity: 1; } 100% { transform: translate(0, 960px) rotate(-4deg); opacity: 0; } }
.wkdeco { position: absolute; width: 26px; height: 36px; animation: wbob 3.2s ease-in-out infinite; }
.wkdeco svg { width: 100%; height: 100%; }
.world.night .wkdeco svg { filter: drop-shadow(0 0 6px #FFB347); }
html.lite .wkrat, html.lite .wkdeco { animation: none !important; }
/* v6 เฟส 2 */
.wjump { animation: wjump 1.4s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes wjump { 0%, 100% { transform: translateY(0) rotate(0); } 40% { transform: translateY(-14px) rotate(-12deg); } 60% { transform: translateY(-14px) rotate(10deg); } }
html.lite .wjump { animation: none !important; }
/* v6 เฟส 3: นักชิม · ลานขุด · อากาศ */
.wcritic { animation: widle 2.6s ease-in-out infinite; }
.wcritic > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.wbub.crit { position: absolute; left: 50%; top: -34px; transform: translateX(-50%); display: flex; gap: 2px; padding: 4px 6px; background: #FFF8E4; border: 3px solid #2B2140; border-radius: 16px; }
.wbub.crit svg { width: 28px; height: 28px; } .wbub.crit.ok { border-color: #2FA65A; }
.wdigsite > svg { width: 100%; height: 100%; }
.wwx { position: absolute; inset: 0; pointer-events: none; z-index: 3900; display: none; }
.world[data-wx="rain"] .wwx { display: block; background: repeating-linear-gradient(105deg, rgba(255,255,255,0) 0 22px, rgba(220,235,255,.55) 22px 24px, rgba(255,255,255,0) 24px 46px); background-size: 120px 120px; animation: wrain .5s linear infinite; opacity: .55; }
.world[data-wx="rain"] .wground { filter: saturate(.85) brightness(.94); }
.world[data-wx="hot"] .wwx { display: block; background: radial-gradient(ellipse at 70% 0%, rgba(255,170,60,.28), rgba(255,170,60,0) 60%); }
.world[data-wx="cool"] .wwx { display: block; background: linear-gradient(rgba(200,225,255,.16), rgba(200,225,255,.04)); }
@keyframes wrain { to { background-position: -40px 120px; } }
html.lite .wwx, html.lite .wcritic { animation: none !important; }
/* แผ่นเดิมที่วาดใหม่หลังกดปุ่ม: ไม่เล่นอนิเมชันเปิดซ้ำ */
#phone .overlay.still, #phone .overlay.still > .sheet { animation: none !important; }
/* 22 ต.ค. โซนเลี้ยงข้างร้าน: ป้ายของบ่อปลาอยู่บนผิวน้ำ (เหนือบ่อเป็นป้ายของโซนก่อสร้าง) · ป้าย + ของเล้าไก่ใช้สีเมล็ดพันธุ์ */
.wpond > .wbub { bottom: 52%; }
/* 22 ต.ค. ตลาดคึกคัก: คนเดินจับจ่าย (world.js shoppers) */
.wshop .wwalker { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.wshop.flip .wwalker { transform: scaleX(-1); }
.wshop { animation: wshopgo 46s linear infinite; will-change: transform; }
.wshop .wlegL { animation: wleg .42s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 0; }
.wshop .wlegR { animation: wleg .42s ease-in-out infinite alternate-reverse; transform-box: fill-box; transform-origin: 50% 0; }
.wshop .wbody { animation: wstep .21s ease-in-out infinite alternate; }
@keyframes wshopgo { 0% { transform: translateX(0); opacity: 0; } 4% { opacity: 1; } 96% { opacity: 1; } 100% { transform: translateX(var(--dx, 0px)); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .wshop, .wshop * { animation: none !important; } }
/* 22 ต.ค. (Kelvin): กล่องข้อความแจ้งกว้างเท่าตัวหนังสือ · ยาวเกินครึ่งจอ = ขึ้นบรรทัดใหม่ (--toastmax ตั้งจาก app.js ตามความกว้างจอ ÷ zoom) */
html:not(.land) #phone.game > .toast, html.land #phone.game > .toast { width: max-content; max-width: var(--toastmax, 50%); box-sizing: border-box; }
html:not(.land) #phone.game > .toast { left: 0; right: 0; margin: 0 auto; zoom: 1.36; }
#phone.game > .toast span { white-space: normal; overflow-wrap: break-word; }
/* 22 ต.ค. ป้ายชื่อตลาดบนแผนที่ (แตะ = รายการตลาด) */
.wmsign .wmsname { position: absolute; left: 8%; top: 19.5%; width: 84%; height: 40.7%; display: grid; place-items: center; text-align: center; padding: 0 6px; box-sizing: border-box;
  font: 700 20px/1.05 var(--f-display); color: #5A3110; overflow: hidden; }
.wmsign .wmsmore { position: absolute; left: 22.4%; top: 67.8%; width: 55.1%; height: 17%; display: flex; align-items: center; justify-content: center; gap: 3px; font: 700 11px/1 var(--f-body); color: #5A3110; white-space: nowrap; }
#phone.game .top .who small .mkname { font-weight: 700; color: #2E6A0E; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 2px; }   /* 22 ต.ค. ชื่อตลาดในแถบบน แตะ = รายการตลาด */
.howimg.fit { background: #FFF6DA; } .howimg.fit img { object-fit: contain; }   /* ภาพการ์ดอากาศ (ไม่ใช่ภาพแผนที่) */
.wmsign .wmsmore svg { width: 12px; height: 12px; flex: none; }
/* 22 ต.ค. เรือครบทุกลัง: เรือแล่นออกตามคลอง (ตัดเฉพาะตัวเรือ) + แมวโบกมือที่ท่า */
.wboatgo { clip-path: inset(0 0 0 47%); animation: wboatgo 5.6s cubic-bezier(.45, 0, .7, 1) .5s both; }
.wboatgo > svg { animation: wrock 1.1s ease-in-out infinite alternate; transform-origin: 75% 85%; }
@keyframes wboatgo { 0% { transform: translate(0, 0); opacity: 1; } 18% { transform: translate(6px, 20px); } 85% { opacity: 1; } 100% { transform: translate(14px, 820px); opacity: 0; } }
@keyframes wrock { from { transform: rotate(-2.5deg); } to { transform: rotate(2.5deg); } }
.wwave .wwcat { position: absolute; left: 6px; bottom: 0; width: 80px; height: 80px; transform-origin: 50% 100%; animation: wwave .38s ease-in-out infinite alternate; }
.wwave .wwcat svg { width: 100%; height: 100%; }
.wwave .wbye { position: absolute; left: 50%; bottom: 86px; transform: translateX(-50%); white-space: nowrap; padding: 4px 10px; border-radius: 14px; background: #FFFDF6; border: 2.5px solid #2B2140; font: 700 15px var(--f-display); color: #5A3110; animation: whop .5s ease-in-out infinite alternate; }
@keyframes wwave { from { transform: rotate(-10deg); } to { transform: rotate(10deg); } }
@media (prefers-reduced-motion: reduce) { .wboatgo, .wboatgo > svg, .wwave * { animation: none !important; } }
/* 0154 เมนูขายดีตอนนี้ (ตามอากาศ + ช่วงเวลา) */
.menu-tile { position: relative; }
.menu-tile.hotnow { box-shadow: 0 0 0 3px #FF8A3D inset; }
.menu-tile .hotb { position: absolute; left: 4px; top: 4px; padding: 1px 6px; border-radius: 999px; background: #FF5A2E; color: #fff; font: 700 10.5px/1.5 var(--f-body); font-style: normal; border: 1.5px solid #2B2140; }
.menu-tile .hotb svg { width: 11px; height: 11px; vertical-align: -1px; }

/* ---------- หน้าเข้าสู่ระบบ (26 ต.ค. Kelvin "แต่งหน้านี้ให้น่ารักๆเข้ากับสไตล์เกม") ----------
   ฟ้า→หญ้าแบบหน้าโหลด · ฉากแผงร้าน+แมว (คัดลอกจาก #splash) · ป้ายชื่อตัวเหลืองขอบไม้ · การ์ดไม้มีกันสาด · ลูกโป่ง/ดาวลอย
   ไม่ใช้ zoom 1.6 ของ .gate เดิม (ขนาดคุมเองด้วย clamp) · แนวนอน/จอกว้าง = ฉากซ้าย การ์ดขวา */
#phone .gate.login { zoom: 1; position: relative; overflow-x: hidden; overflow-y: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
  padding: max(14px, env(safe-area-inset-top, 0px)) 16px max(18px, env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, #8FD3F4 0%, #CBEEFF 34%, #FFF3D1 60%, #A6DC6E 60.2%, #7FC255 100%); font-family: var(--f-body); }
.gate.login .lg-hero { position: relative; z-index: 1; width: min(100%, 460px); display: flex; flex-direction: column; align-items: center; }
.gate.login .lg-art { display: block; width: 100%; height: auto; max-height: 34vh; animation: lgIn .6s cubic-bezier(.2,1.3,.4,1) both; }
.gate.login .lg-logo { margin: -4px 0 0; text-align: center; line-height: 1; animation: lgIn .6s .08s cubic-bezier(.2,1.3,.4,1) both; }
.gate.login .lg-logo b { display: block; font: 700 clamp(40px, 11vw, 64px)/1 var(--f-display); color: #FFC93C; letter-spacing: 1px; -webkit-text-stroke: 7px #5A3110; paint-order: stroke fill; text-shadow: 0 5px 0 #5A3110; }
.gate.login .lg-logo span { display: inline-block; margin-top: 8px; padding: 4px 16px; border-radius: 999px; background: #E8453C; border: 3px solid #5A3110; box-shadow: 0 3px 0 #5A3110; color: #FFF8E3; font: 700 clamp(15px, 4vw, 19px)/1.3 var(--f-display); letter-spacing: .3px; }
.gate.login .lg-card { position: relative; z-index: 1; width: min(100%, 420px); box-sizing: border-box; margin-top: 18px; padding: 40px 18px 16px; display: grid; gap: 10px; text-align: center;
  background: #FFF6DA; border: 5px solid #A9682F; border-radius: 24px; box-shadow: 0 6px 0 #5A3110, 0 14px 24px rgba(60,40,10,.18); color: #4A2C10; animation: lgIn .6s .16s cubic-bezier(.2,1.3,.4,1) both; }
.gate.login .lg-awn { position: absolute; left: -5px; right: -5px; top: -5px; height: 24px; border-radius: 22px 22px 0 0; border: 5px solid #5A3110; border-bottom: 0;
  background: repeating-linear-gradient(90deg, #0B8F73 0 26px, #FFFDF6 26px 52px); }
.gate.login .lg-awn::after { content: ""; position: absolute; left: 0; right: 0; bottom: -10px; height: 10px;
  background: radial-gradient(circle at 13px 0, #0B8F73 12px, transparent 13px) 0 0 / 52px 10px repeat-x, radial-gradient(circle at 39px 0, #FFFDF6 12px, transparent 13px) 0 0 / 52px 10px repeat-x; }
.gate.login .lg-card p { margin: 0; color: #5A3B1C; font-size: 15px; line-height: 1.55; }
#phone .gate.login .tag { color: #0B7A62; text-shadow: none; font: 700 18px/1.3 var(--f-display); }
#phone .gate.login .hint { color: #7A5530; font-size: 13px; }
.gate.login .refban { background: #FFE9A8; border: 2px dashed #C98A4A; border-radius: 14px; padding: 8px 10px; color: #5A3110; }
.gate.login .err { color: #B3261E; font-weight: 600; }
#phone .gate.login .btn.pri { min-height: 54px; font-size: 18px; border-radius: 16px; }
.gate.login #gbtn, .gate.login .lg-card > div:has(iframe) { justify-self: center; }
.gate.login .lg-deco { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.gate.login .lg-b { position: absolute; width: 34px; height: 42px; border-radius: 50% 50% 48% 48%; border: 2.5px solid #2B2140; animation: lgFloat 5s ease-in-out infinite; }
.gate.login .lg-b::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1.5px; height: 34px; background: #2B2140; transform: translateX(-50%); }
.gate.login .lg-b::before { content: ""; position: absolute; left: 7px; top: 7px; width: 8px; height: 11px; border-radius: 50%; background: rgba(255,255,255,.65); }
.gate.login .b1 { left: 6%; top: 9%; background: #E8453C; }
.gate.login .b2 { right: 7%; top: 6%; background: #FFC93C; animation-delay: -1.7s; }
.gate.login .b3 { right: 15%; top: 22%; width: 26px; height: 33px; background: #3E7FD6; animation-delay: -3.1s; }
.gate.login .lg-s { position: absolute; font-style: normal; color: #FFC93C; -webkit-text-stroke: 1.5px #5A3110; font-size: 22px; animation: lgTwinkle 2.6s ease-in-out infinite; }
.gate.login .s1 { left: 16%; top: 27%; }
.gate.login .s2 { left: 4%; bottom: 14%; font-size: 26px; animation-delay: -.9s; }
.gate.login .s3 { right: 6%; bottom: 20%; color: #FFFDF6; animation-delay: -1.8s; }
.gate.login .sp-bob { animation: spBob 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
.gate.login .sp-blink { animation: spBlink 4s infinite; transform-box: fill-box; transform-origin: 50% 50%; }
.gate.login .sp-glow { animation: spGlow 1.6s ease-in-out infinite alternate; }
@keyframes lgIn { from { opacity: 0; transform: translateY(16px) scale(.95); } }
@keyframes lgFloat { 50% { transform: translateY(-12px) rotate(4deg); } }
@keyframes lgTwinkle { 50% { transform: scale(.7) rotate(20deg); opacity: .6; } }
/* แนวนอน / จอกว้างเตี้ย: ฉากซ้าย การ์ดขวา */
@media (orientation: landscape) and (min-width: 640px) {
  #phone .gate.login { flex-direction: row; gap: clamp(16px, 4vw, 48px); background: linear-gradient(180deg, #8FD3F4 0%, #CBEEFF 38%, #FFF3D1 68%, #A6DC6E 68.2%, #7FC255 100%); }
  .gate.login .lg-hero { width: min(48%, 520px); }
  .gate.login .lg-art { max-height: 52vh; }
  .gate.login .lg-card { width: min(44%, 420px); margin-top: 0; }
}
@media (orientation: landscape) and (max-height: 460px) {
  .gate.login .lg-art { max-height: 44vh; }
  .gate.login .lg-logo b { font-size: 38px; -webkit-text-stroke-width: 6px; text-shadow: 0 4px 0 #5A3110; }
  .gate.login .lg-card { padding: 36px 14px 12px; gap: 8px; }
  .gate.login .lg-card p { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { .gate.login *, .gate.login *::after { animation: none !important; } }
html.lite .gate.login * { animation: none !important; }