/* น้องลีโอของฉัน (avatar 3D)  mockup_shop/leo.css  (24 ต.ค. 2569)
   แถบบนใช้ .pg-top ของ pg-zone.css · ฉาก 3D เต็มจอใต้แถบบน · แผงตัวละครเป็นแผ่นล่าง (มือถือ) / แผงขวา (คอม) */
.leo{--top:calc(56px + env(safe-area-inset-top));--sheet:56px;--sky:#cbe9dc;height:100%;overflow:hidden;background:var(--sky);-webkit-tap-highlight-color:transparent}
html:has(body.leo){height:100%;overflow:hidden}
.leo .leo-top{position:fixed;left:0;right:0;top:0;padding-top:env(safe-area-inset-top)}
.leo-logo{letter-spacing:.2em}
.leo-logo small,.leo .pg-logo.leo-logo small{display:inline;letter-spacing:.04em;font-family:var(--f);font-size:12px;color:#cfd3dc;white-space:nowrap}
.leo-logo{min-width:0}

/* ฉาก */
.leo-stage{position:fixed;left:0;right:0;top:var(--top);bottom:0;touch-action:none}
.leo-stage canvas{display:block;width:100%;height:100%}

/* ป้ายอายุบนฉาก */
.leo-hud{position:fixed;left:12px;top:calc(var(--top) + 10px);z-index:5;pointer-events:none;max-width:calc(100% - 24px);display:flex;flex-wrap:wrap;align-items:center;gap:6px}
/* ป้ายออนไลน์ + ปุ่มเดิน 2/4 ขา (กดได้) */
.leo-chip{pointer-events:auto;display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 11px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.94);font-size:13px;font-weight:700;color:var(--text);white-space:nowrap;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.leo-dot{flex:none;width:8px;height:8px;border-radius:50%;background:#9aa0a8}
.leo-net.is-on .leo-dot{background:#22a35a;box-shadow:0 0 0 3px rgba(34,163,90,.18)}
.leo-net[aria-pressed="false"]{color:var(--mute)}
.leo-walk{background:var(--ink);border-color:var(--ink);color:#fff}
.leo-walk.is-quad{background:var(--or);border-color:var(--or)}
.leo-chip:active{transform:scale(.96)}
/* ปุ่มกลับบ้านถ้ำ + ปุ่มเสียง (25 ต.ค. 2569 ฉากป่า) */
.leo-chip .i{flex:none;width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.leo-home{background:#5b3a1e;border-color:#5b3a1e;color:#fff}
.leo-snd.is-off{color:var(--mute)}
.leo-cavetip{position:fixed;left:50%;top:calc(var(--top) + 96px);z-index:5;transform:translateX(-50%);max-width:calc(100% - 32px);padding:8px 14px;border-radius:18px;background:rgba(58,34,16,.88);color:#fff;font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
.leo-cavetip[hidden]{display:none}
/* ปุ่มแก้ชื่อป้ายบ้าน (โผล่เมื่อเดินใกล้ถ้ำ) + กล่องแก้ชื่อ */
.leo-signbtn{position:fixed;left:50%;top:calc(var(--top) + 140px);z-index:5;transform:translateX(-50%);display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 16px;border-radius:20px;background:#ee4d2d;color:#fff;font-size:14px;font-weight:700;white-space:nowrap;text-decoration:none;box-shadow:0 4px 12px rgba(0,0,0,.2)}
.leo-signbtn[hidden]{display:none}
/* ---------- กิจกรรมในป่า (leo-act.js) ---------- */
.leo-quest .i{fill:#ffc928;stroke:#b07a00}
.leo-quest.is-done{background:#fff7d6;border-color:#f5c542}
.leo-toast{position:fixed;left:50%;top:calc(var(--top) + 96px);z-index:7;transform:translateX(-50%);max-width:calc(100% - 32px);padding:9px 16px;border-radius:18px;background:rgba(17,18,20,.86);color:#fff;font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
.leo-toast[hidden]{display:none}
.leo-actbtn{position:fixed;right:16px;bottom:calc(var(--sheet) + 196px);z-index:6;display:inline-flex;align-items:center;gap:6px;height:48px;padding:0 18px;border-radius:24px;background:#1f7ae0;color:#fff;font-size:15px;font-weight:700;box-shadow:0 4px 12px rgba(31,122,224,.4)}
.leo-actbtn[hidden]{display:none}
/* โลกขยาย (leo-zones.js): ปุ่มกิจกรรมโซน · แผนที่เล็ก · กล่องร้านค้า */
.leo-zonebtn{background:#2fb344;box-shadow:0 4px 12px rgba(47,179,68,.4)}
/* ภารกิจส่งพัสดุ: แถบนับถอยหลัง + ปุ่มยกเลิก · ระหว่างทำภารกิจซ่อนปุ่มบ้านถ้ำ (กันโกง) */
.leo-jobbar{position:fixed;left:16px;top:calc(var(--top) + 100px);z-index:6;display:flex;align-items:center;gap:8px;max-width:calc(100% - 140px);padding:6px 6px 6px 12px;border-radius:22px;background:rgba(17,18,20,.88);color:#fff;box-shadow:0 4px 12px rgba(0,0,0,.25)}
.leo-jobbar[hidden]{display:none}
.leo-jobt{flex:none;font:800 18px Barlow,Arial,sans-serif;color:#ffd23f;min-width:44px}
.leo-jobt.is-low{color:#ff6b5a}
.leo-jobto{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:13px;font-weight:700}
.leo-jobx{flex:none;height:32px;padding:0 12px;border-radius:16px;background:#ee4d2d;color:#fff;font-size:13px;font-weight:700}
.leo-job #caveBtn{display:none}
.leo:not(.touch) .leo-jobbar{top:calc(var(--top) + 60px);max-width:420px}
.leo-zonebtn .i{fill:none}
.leo-mini{position:fixed;right:12px;top:calc(var(--top) + 100px);z-index:5;width:104px;height:104px;border-radius:12px;border:2px solid rgba(255,255,255,.9);box-shadow:0 3px 10px rgba(0,0,0,.25);cursor:pointer;touch-action:manipulation}
.leo:not(.touch) .leo-mini{width:150px;height:150px;top:calc(var(--top) + 12px);right:16px}
/* มือถือ: ข้อความกลางจอเลื่อนลงใต้แผนที่เล็ก ไม่ทับกัน */
.touch .leo-toast{top:calc(var(--top) + 214px)}
.touch .leo-cavetip{top:calc(var(--top) + 214px)}
.touch .leo-signbtn{top:calc(var(--top) + 258px)}
.leo-mapdlg{width:min(560px,calc(100vw - 32px))}
.leo-mapdlg .pg-dlg-b,#shopDlg .pg-dlg-b,#questDlg .pg-dlg-b,#signDlg .pg-dlg-b{flex:1 1 auto;min-height:0}   /* Safari ไอโฟนเคยบีบเนื้อหากล่องเหลือ 0 */
.leo-mapbig{display:block;width:100%;height:auto;aspect-ratio:1;border-radius:10px}
.leo-shopline{margin:0 0 12px;padding:10px 12px;border-radius:10px;background:#fff4e5;font-size:14px;line-height:1.5;color:var(--text)}
.leo-foods{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.leo-food{display:flex;align-items:center;gap:8px;min-height:72px;padding:6px 10px 6px 6px;border:1px solid var(--line);border-radius:10px;background:#fff;text-align:left}
.leo-food img{flex:none;width:60px;height:60px;border-radius:8px;background:#fff7ec}
.leo-food span{display:flex;flex-direction:column;gap:2px;min-width:0}
.leo-food b{font-size:14px}
.leo-food small{font-size:12px;color:#2fb344;font-weight:700}
.leo-food:active{transform:scale(.97)}
.leo-actbtn .i{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.leo-actbtn kbd{font:700 11px Barlow,Arial,sans-serif;padding:1px 5px;border-radius:4px;background:rgba(255,255,255,.25)}
.touch .leo-actbtn kbd{display:none}
.leo:not(.touch) .leo-actbtn{right:auto;left:50%;bottom:72px;transform:translateX(-50%)}
.leo-fish{position:fixed;left:50%;bottom:calc(var(--sheet) + 16px);z-index:8;transform:translateX(-50%);width:min(360px,calc(100% - 32px));padding:14px 16px;border-radius:14px;background:#fff;color:var(--text);box-shadow:0 8px 24px rgba(0,0,0,.25);text-align:center}
.leo-fish[hidden]{display:none}
.leo-fish-pic:empty{display:none}
.leo-fish-pic svg{width:96px;height:60px}
.leo-fish-t{margin:0;font-size:18px;font-weight:700}
.leo-fish-m{margin:4px 0 0;min-height:20px;font-size:13px;color:var(--mute)}
.leo-fish-bar{position:relative;height:18px;margin:12px 0 2px;border-radius:9px;background:#e9edf2;overflow:hidden}
.leo-fish-bar[hidden]{display:none}
.leo-fish-zone{position:absolute;top:0;bottom:0;background:#2fb344}
.leo-fish-needle{position:absolute;top:-2px;bottom:-2px;width:4px;margin-left:-2px;border-radius:2px;background:#111214}
.leo-fish-f{display:flex;gap:10px;margin-top:12px}
.leo-fish-f .pg-btn{flex:1;height:44px}
.leo-qstar{display:inline-flex;align-items:center;gap:4px;margin-left:8px;font-size:13px;color:#ffd96a}
.leo-qstar .i{width:16px;height:16px;fill:#ffc928;stroke:none}
.leo-qnote{margin:0 0 10px;font-size:13px;color:var(--mute)}
.leo-qlist{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:8px}
.lq{padding:10px 12px;border:1px solid var(--line);border-radius:10px}
.lq.is-ok{border-color:#2fb344;background:#effaf1}
.lq-h{display:flex;justify-content:space-between;gap:8px;font-size:14px}
.lq-h span{font-weight:700;color:var(--or)}
.lq.is-ok .lq-h span{color:#2fb344}
.lq-bar{height:6px;margin:6px 0;border-radius:3px;background:#e9edf2;overflow:hidden}
.lq-bar i{display:block;height:100%;background:var(--or)}
.lq.is-ok .lq-bar i{background:#2fb344}
.lq p{margin:0;font-size:12px;color:var(--mute)}
.leo-qh{margin:4px 0 8px;font-size:15px}
.leo-fbook{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:14px}
.fb{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 4px;border:1px solid var(--line);border-radius:10px;text-align:center}
.fb svg{width:52px;height:32px}
.fb b{font-size:12px}
.fb small{font-size:11px;color:var(--mute)}
.fb.is-no b{color:var(--mute)}
.leo-signbtn .i{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.leo-signform{display:flex;flex-direction:column;min-height:0;flex:1 1 auto}
.leo-signin{width:100%;margin-top:8px;text-align:left;font-size:18px}
.leo-stage{transition:opacity .35s}
.leo-going .leo-stage{opacity:0}
.leo-hud-age{display:inline-block;background:rgba(255,255,255,.94);border:1px solid var(--line);border-radius:9px;padding:6px 11px;font-size:14px;font-weight:700;color:var(--text);box-shadow:0 2px 8px rgba(0,0,0,.08)}
.leo-keys{position:fixed;left:12px;bottom:12px;z-index:5;pointer-events:none;font-size:12px;color:#fff;background:rgba(11,12,15,.72);padding:6px 10px;border-radius:8px}

/* ปุ่มบังคับ (จอสัมผัส / จอแคบ) */
.leo-pad{position:fixed;left:0;right:0;bottom:calc(var(--sheet) + 14px);z-index:6;display:none;justify-content:space-between;align-items:flex-end;padding:0 16px;pointer-events:none}
.touch .leo-pad{display:flex}
.touch .leo-keys{display:none}
.leo-joy{position:relative;width:112px;height:112px;border-radius:50%;background:rgba(11,12,15,.28);border:2px solid rgba(255,255,255,.75);pointer-events:auto;touch-action:none}
.leo-knob{position:absolute;left:50%;top:50%;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.leo-pad-btns{display:grid;grid-template-columns:auto auto;gap:10px;align-items:end;justify-items:end;pointer-events:auto}
.leo-pad-btns .is-emo{grid-column:1;grid-row:1}
.leo-pad-btns .is-wave{grid-column:2;grid-row:1}
.leo-pad-btns .is-jump{grid-column:1 / span 2;grid-row:2}
.leo-pbtn{width:76px;height:76px;border-radius:50%;background:var(--or);color:#fff;font-size:15px;font-weight:700;box-shadow:0 3px 10px rgba(238,77,45,.45);touch-action:none}
.leo-pbtn.is-s{width:58px;height:58px;font-size:13px;background:var(--ink)}
.leo-pbtn:active{transform:scale(.94)}
.leo-pbtn.is-emo{background:#fff;color:var(--ink);border:2px solid var(--ink);box-shadow:0 3px 10px rgba(0,0,0,.18)}
.leo-pbtn.is-emo[aria-expanded="true"]{background:var(--ink);color:#fff}
/* คอม: ไม่มีจอยและปุ่มกระโดด/โบกมือ (ใช้แป้นพิมพ์) เหลือปุ่มท่าทาง */
.leo:not(.touch) .leo-pad{display:flex;justify-content:flex-start;bottom:calc(var(--sheet) + 50px)}
.leo:not(.touch) .leo-joy,.leo:not(.touch) .leo-pbtn.is-wave,.leo:not(.touch) .leo-pbtn.is-jump{display:none}
.leo:not(.touch) .leo-pbtn.is-emo{width:auto;height:44px;padding:0 20px;border-radius:22px;font-size:15px}

/* แผงเลือกท่าทาง: มือถือ = แถบล่างเหนือแผงตัวละคร · คอม = กล่องเหนือปุ่มท่าทาง */
.leo-emo{position:fixed;z-index:9;left:8px;right:8px;bottom:calc(var(--sheet) + 8px);padding:10px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.97);box-shadow:0 6px 24px rgba(0,0,0,.2)}
.leo-emo[hidden]{display:none}
.leo-emo-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.leo-emo-head b{flex:none;font-size:14px;font-weight:700;color:var(--text)}
.leo-emo-tip{flex:1;min-width:0;font-size:12px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.leo-emo-x{flex:none;height:30px;padding:0 14px;border:1px solid var(--line);border-radius:15px;background:var(--soft);font-size:13px;font-weight:700;color:var(--text)}
.leo-emo-tabs{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.leo-emo-seg{flex:1;min-width:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border:1px solid var(--ink);border-radius:9px;overflow:hidden}
.leo-emo-seg button{height:36px;background:#fff;font-size:14px;font-weight:700;color:var(--ink)}
.leo-emo-seg button.on{background:var(--ink);color:#fff}
.leo-emo-beat{flex:none;height:36px;padding:0 12px;border:1px solid var(--line);border-radius:18px;background:var(--soft);font-size:13px;font-weight:700;color:var(--text);white-space:nowrap}
.leo-emo-beat[aria-pressed="false"]{color:var(--mute)}
.leo-emo-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;max-height:46vh;overflow-y:auto;overscroll-behavior:contain}   /* มือถือ 4 ช่อง ชื่อท่าไม่โดนตัด */
.emo-t{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;min-height:64px;padding:6px 3px;border:1px solid var(--line);border-radius:10px;background:var(--soft);font-size:12px;font-weight:600;line-height:1.2;color:var(--text)}
.emo-t span{max-width:100%;overflow:hidden;text-align:center;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word}
.emo-i{flex:none;width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.emo-k{position:absolute;top:3px;right:5px;font-style:normal;font-size:10.5px;font-weight:700;color:var(--mute)}
.touch .emo-k{display:none}
.emo-t.on{background:var(--or);border-color:var(--or);color:#fff}
/* ท่าเสือ (โหมด 4 ขา) ขึ้นก่อน กรอบส้มอ่อน */
.emo-t.is-cat{background:var(--or-bg);border-color:var(--or-ln);color:#9a3412}
.emo-t.is-cat.on{background:var(--or);border-color:var(--or);color:#fff}
.emo-t.on .emo-k{color:#fff}
.emo-t[aria-disabled="true"]{opacity:.45}
.emo-t:active{transform:scale(.95)}
@media (hover:hover){.emo-t:hover{border-color:var(--ink)}}
.leo:not(.touch) .leo-emo{left:12px;right:auto;bottom:calc(var(--sheet) + 104px);width:372px}
.leo:not(.touch) .leo-emo-list{grid-template-columns:repeat(4,minmax(0,1fr))}
.leo:not(.touch) .emo-t{min-height:64px;font-size:13px}

/* แผงตัวละคร: แผ่นล่าง (มือถือ) */
.leo-panel{position:fixed;left:0;right:0;bottom:0;z-index:10;display:flex;flex-direction:column;max-height:56vh;background:var(--card);border-radius:16px 16px 0 0;box-shadow:0 -6px 24px rgba(0,0,0,.18);padding-bottom:env(safe-area-inset-bottom)}
.leo-panel-head{flex:none;display:flex;align-items:center;gap:10px;width:100%;height:56px;padding:0 16px;border-radius:16px 16px 0 0;background:var(--ink);color:#fff;text-align:left}
.ph-title{flex:none;font-size:15px;font-weight:700}
.ph-sum{flex:1;min-width:0;font-size:14px;color:#ffb39f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph-arrow{flex:none;width:10px;height:10px;margin-top:-4px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg);transition:transform .2s}
.leo-panel.closed .ph-arrow{transform:rotate(-135deg);margin-top:4px}
.leo-panel-body{overflow-y:auto;padding:2px 16px 14px;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.leo-panel.closed .leo-panel-body{display:none}

.leo-sec{padding:12px 0;border-bottom:1px solid var(--line)}
.leo-sec:last-child{border-bottom:0}
.leo-sec-t{margin-bottom:8px;font-size:13px;font-weight:700;color:var(--mute)}

/* อายุ */
.leo-age{display:flex;align-items:center;justify-content:space-between;gap:12px}
.leo-age-big{display:flex;align-items:baseline;gap:6px;color:var(--or)}
.leo-age-big b{font-size:44px;font-weight:800;line-height:1}
.leo-age-big span{font-size:18px;font-weight:700;color:var(--text)}
.leo-age-side{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.leo-lv{background:var(--ink);color:#fff;font-size:13px;font-weight:700;padding:2px 9px;border-radius:6px}
.leo-stage-name{font-size:15px;font-weight:700;color:var(--text)}
.leo-age-line{margin-top:8px;font-size:15px;font-weight:600;color:var(--text);line-height:1.5}
.leo-prog{display:block;width:100%;height:10px;margin-top:8px;border:0;border-radius:6px;background:var(--soft);overflow:hidden;-webkit-appearance:none;appearance:none}
.leo-prog::-webkit-progress-bar{background:var(--soft);border-radius:6px}
.leo-prog::-webkit-progress-value{background:var(--or);border-radius:6px}
.leo-prog::-moz-progress-bar{background:var(--or);border-radius:6px}
.leo-help{margin-top:8px;font-size:13px;color:var(--mute);line-height:1.55}

/* โหมดพรีวิว (เฉพาะ ?demo=1 ตอนยังไม่ล็อกอิน) */
.leo-demo{display:none;margin-top:10px;padding:10px;border:1px dashed var(--or-ln);border-radius:10px;background:var(--or-bg)}
.demo .leo-demo{display:block}
.leo-demo-t{font-size:13px;font-weight:700;color:#9a3412}
.leo-range{width:100%;height:28px;margin:6px 0;accent-color:var(--or)}

.leo .chips,.leo-chips{display:flex;flex-wrap:wrap;gap:6px}
.leo .chip{height:36px;padding:0 12px;border:1px solid var(--line);border-radius:18px;background:var(--soft);font-size:14px;font-weight:600;color:var(--text)}
.leo .chip.on{background:var(--or);border-color:var(--or);color:#fff}
.leo .chip[aria-disabled="true"]{opacity:.45}
.leo-unlock{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.leo .ul{padding:4px 8px;border-radius:6px;background:var(--soft);font-size:12.5px;color:var(--mute)}
.leo .ul.on{background:var(--or-bg);color:var(--or);font-weight:700}


.leo-outfit{font-size:14px;line-height:1.55;color:var(--text)}
/* ปุ่มไปห้องแต่งตัว */
.leo-dress-btn{display:flex;align-items:center;gap:12px;min-height:58px;margin-top:10px;padding:10px 16px;border-radius:12px;background:var(--or);color:#fff;text-decoration:none;font-size:16px;font-weight:700;box-shadow:0 3px 10px rgba(238,77,45,.3)}
.leo-dress-btn:hover,.leo-dress-btn:focus{color:#fff;text-decoration:none}
.leo-dress-btn .i{flex:none;width:26px;height:26px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.leo-dress-btn span{display:flex;flex-direction:column;min-width:0}
.leo-dress-btn small{font-size:12.5px;font-weight:500;opacity:.92}
.leo-dress-btn:active{transform:scale(.98)}
.leo-save{margin-top:4px;font-size:13px;font-weight:600;color:var(--ok)}
.leo-save.bad{color:var(--bad)}

/* กล่องแจ้งโหลดไม่ได้ */
.leo-err{position:fixed;left:16px;right:16px;top:calc(var(--top) + 56px);z-index:20;display:flex;align-items:center;gap:12px;padding:14px;border:2px solid var(--or);border-radius:12px;background:#fff;font-size:14px;color:var(--text)}
.leo-err[hidden]{display:none}
.leo-err p{flex:1;min-width:0}

/* แคปจอ */
.shot .leo-keys,.leo.shot .leo-pad,.leo.shot .leo-emo{display:none}

/* คอม: แผงขวา */
@media (min-width:900px){
  .leo{--sheet:0px}
  .leo-panel{left:auto;top:calc(var(--top) + 12px);right:12px;bottom:12px;width:360px;max-height:none;border-radius:14px}
  .leo-panel-head{border-radius:14px 14px 0 0}
  .leo-panel.closed{bottom:auto}
  .leo-panel.closed .leo-panel-head{border-radius:14px}
  .leo-pad{right:384px}
  .leo-err{left:auto;right:384px;width:420px}
}