/* 24WASH Demo — สไตล์กลางทุกหน้า (สีส้มจากโลโก้ #f04b1e เหมือนเกมจริง) */
:root{--orange:#f04b1e;--orange2:#ff7a2f;--deep:#c7360f;--cream:#fff5ee;--peach:#ffe3d3;--panel:#fff;--line:#f2d6c6;
  --text:#2b1a12;--mute:#8a6a5a;--green:#16a34a;--yel:#ffc21a;--blue:#2f7fe0;
  font-family:"Kanit","Noto Sans Thai","Leelawadee UI",system-ui,sans-serif;color-scheme:light}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--cream);color:var(--text);line-height:1.5;overflow-x:hidden}
button{font-family:inherit}
img{max-width:100%}

/* ---------- หัวหน้า ---------- */
.top{background:var(--orange);color:#fff;box-shadow:0 3px 0 var(--deep)}
.top .in{max-width:1400px;margin:auto;padding:12px 16px;display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:14px;min-width:0}
.brand .logo{background:#fff;border-radius:12px;padding:6px 10px;display:flex;flex:none}
.brand .logo img{height:30px;display:block}
.brand h1{margin:0;font-size:clamp(20px,3vw,30px);font-weight:800;line-height:1.1}
.brand .sub{margin:2px 0 0;font-size:13px;opacity:.9}
.back{color:#fff;opacity:.85;text-decoration:none;font-size:13px}
.back:hover{opacity:1;text-decoration:underline}
.ctrl{display:flex;gap:8px;flex-wrap:wrap}
.btn{border:2px solid #fff;background:transparent;color:#fff;padding:6px 14px;border-radius:999px;font-size:14px;font-weight:600;cursor:pointer}
.btn.on{background:#fff;color:var(--orange)}
.cap{max-width:1400px;margin:14px auto 0;padding:0 16px}
.cap div{background:#fff;border-left:5px solid var(--orange);padding:10px 14px;border-radius:10px;min-height:50px;font-size:clamp(15px,1.8vw,18px);box-shadow:0 2px 10px rgba(240,75,30,.08)}
.cap b{color:var(--orange)}
main{max-width:1400px;margin:auto;padding:16px}
.lbl{font-size:13px;color:var(--mute);margin:0 0 8px;text-align:center}
.foot{max-width:1400px;margin:8px auto 24px;padding:0 16px;font-size:12px;color:var(--mute)}

/* ---------- กรอบมือถือ ---------- */
.phone{width:250px;height:500px;margin:auto;background:#fff;color:var(--text);border:9px solid #1d1410;border-radius:32px;overflow:hidden;
  box-shadow:0 18px 40px rgba(80,30,10,.28);position:relative;display:flex;flex-direction:column;flex:none}
.phone::before{content:"";position:absolute;top:5px;left:50%;width:62px;height:14px;transform:translateX(-50%);background:#1d1410;border-radius:9px;z-index:9}

/* ---------- จอใหญ่ 16:9 (ขนาดทุกอย่างใช้ cqw) ---------- */
.tv{position:relative;box-sizing:content-box;width:calc(100% - 20px);aspect-ratio:16/9;border:10px solid #1d1410;border-radius:14px;background:var(--peach);overflow:hidden;
  container-type:inline-size;box-shadow:0 18px 40px rgba(80,30,10,.25)}
.tv-stand{width:18%;height:14px;margin:0 auto;background:#1d1410;border-radius:0 0 10px 10px}

/* ---------- มือชี้ / กด ---------- */
#hand{position:absolute;left:0;top:0;z-index:100;font-size:34px;line-height:1;pointer-events:none;opacity:0;
  transition:left .55s cubic-bezier(.4,.1,.2,1),top .55s cubic-bezier(.4,.1,.2,1),opacity .25s,transform .12s;
  transform:translate(-30%,-8%);filter:drop-shadow(0 3px 4px rgba(0,0,0,.35));font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif}
#hand.on{opacity:1}
#hand.down{transform:translate(-30%,-8%) scale(.82)}
#hand.fast{transition:left .3s linear,top .3s linear,opacity .25s,transform .12s}
.press{transform:scale(.93)!important;filter:brightness(.92)}

.toast{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);background:rgba(43,26,18,.88);color:#fff;font-size:12px;padding:7px 14px;
  border-radius:999px;white-space:nowrap;z-index:20;animation:toastIn .2s}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,8px)}}
@keyframes pop{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.12);opacity:1}100%{transform:scale(1)}}
@keyframes floatUp{from{transform:translateY(0);opacity:1}to{transform:translateY(-40px);opacity:0}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

@media(max-width:600px){.brand .logo img{height:24px}.btn{padding:5px 11px;font-size:13px}}
