/* PT TOWN mockup — ชิ้นส่วนกลางทุกหน้า (ต่อจาก av3d.css ของเกมจริง) · หน้าแต่ละหน้าเพิ่มกฎใน ptm-<หน้า>.css */
:root{--gold:#f5b301;--secret:#7b3fe4;--secret-wash:#f3ecff;--rare:#2f7de1;--sh:0 6px 18px rgba(60,30,20,.10)}
/* หน้ายาว: av3d.css ตั้ง html,body สูง 100% ทำให้แถบหัว (sticky) เลื่อนหลุดหลังจอแรก แล้วกล่องลองชุดลอยค้างกลางจอ (บัค 2 พ.ย. 2569) */
html,body{height:auto;min-height:100%}
body{overflow-x:hidden}
.ptm-coin{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:99px;background:#fff6dc;color:#7a5200;font-weight:700;white-space:nowrap}
.ptm-coin img,.ptm-coin i{width:18px;height:18px}
.ptm-page{max-width:1080px;margin:0 auto;padding:14px 16px 96px}
.ptm-h{display:flex;align-items:baseline;gap:8px;margin:18px 0 10px;font-size:16px;font-weight:700}
.ptm-h small{font-weight:500;font-size:12px;color:var(--muted)}
.ptm-h .av-sp{flex:1}
.ptm-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);padding:14px}
.ptm-tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px 0 8px}
.ptm-tabs::-webkit-scrollbar{display:none}
.ptm-tabs button{flex:none;border:1px solid var(--line);background:#fff;border-radius:99px;padding:7px 14px;font-weight:600;cursor:pointer;color:var(--ink2)}
.ptm-tabs button.on{background:var(--ink);border-color:var(--ink);color:#fff}
.ptm-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media(min-width:640px){.ptm-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:960px){.ptm-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
.ptm-item{position:relative;display:flex;flex-direction:column;gap:4px;padding:10px;border:1px solid var(--line);border-radius:var(--r);background:#fff;cursor:pointer;text-align:left;min-width:0}
a.ptm-item{color:var(--ink,#1f2937);text-decoration:none}
.ptm-item:hover{border-color:var(--brand)}
.ptm-item.on{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand-wash)}
.ptm-item b{font-size:13.5px;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ptm-item small{color:var(--muted);font-size:12px}
.ptm-price{display:inline-flex;align-items:center;gap:4px;font-weight:700;color:#7a5200}
.ptm-own{color:var(--ok);font-weight:700;font-size:12px}
.ptm-tag{position:absolute;top:8px;left:8px;padding:2px 8px;border-radius:99px;font-size:11px;font-weight:700;color:#fff;background:var(--brand)}
.ptm-tag.is-rare{background:var(--rare)}
.ptm-tag.is-secret{background:var(--secret)}
.ptm-tag.is-new{background:var(--ok)}
.ptm-lock{filter:grayscale(1) brightness(.6)}
.ptm-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0;border-radius:99px;background:var(--brand);color:#fff;font-weight:700;padding:10px 18px;cursor:pointer;text-decoration:none;white-space:nowrap}
.ptm-btn:hover{background:var(--brand-ink);color:#fff;text-decoration:none}
.ptm-btn.is-ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}
.ptm-btn.is-ghost:hover{background:var(--ground);color:var(--ink)}
.ptm-btn[disabled]{opacity:.5;cursor:not-allowed}
.ptm-note{font-size:12px;color:var(--muted);margin:8px 0 0}
/* กล่องยืนยัน: หัวล็อก + ปุ่มล่างล็อก (กฎเจ้าของ) */
.ptm-dlg{border:0;padding:0;border-radius:18px;width:min(420px,calc(100vw - 32px));max-height:calc(100dvh - 40px);overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.25)}
.ptm-dlg::backdrop{background:rgba(30,20,30,.45)}
.ptm-dlg[open]{display:flex;flex-direction:column}
.ptm-dlg-h{display:flex;align-items:center;gap:8px;padding:14px 16px;background:var(--ink);color:#fff;font-weight:700}
.ptm-dlg-h .av-sp{flex:1}
.ptm-dlg-x{border:0;background:transparent;color:#fff;font-size:20px;cursor:pointer;line-height:1}
.ptm-dlg-b{padding:16px;overflow:auto}
.ptm-dlg-f{display:flex;align-items:center;gap:10px;padding:12px 16px;border-top:1px solid var(--line);background:#fff}
.ptm-dlg-f .ptm-tot{flex:1;font-size:12px;color:var(--muted)}
.ptm-dlg-f .ptm-tot b{display:block;font-size:18px;color:var(--brand)}
.ptm-rows{display:grid;gap:6px}
.ptm-rows div{display:flex;justify-content:space-between;gap:10px}
.ptm-rows span{color:var(--muted)}
.ptm-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:50;padding:10px 18px;border-radius:99px;background:var(--ink);color:#fff;font-weight:600;box-shadow:var(--sh);max-width:calc(100vw - 32px)}
.ptm-stage{position:relative;height:min(52vh,460px);border-radius:var(--r);overflow:hidden;background:#f6e7d6;touch-action:none}
.ptm-stage canvas{display:block;width:100%;height:100%}
/* ไอคอน SVG แทนอีโมจิ (ptm-ic.svg · 7 พ.ย. 2569) */
.ptm-ic{display:inline-block;width:1.2em;height:1.2em;vertical-align:-.24em;flex:0 0 auto}
.pga-emo .ptm-ic{width:100%;height:100%}
/* ปุ่ม + ซื้อเหรียญที่ยอดเหรียญมุมบน + กล่องซื้อเหรียญ (7 พ.ย. 2569) */
.ptm-coin.is-buy{cursor:pointer;padding-right:5px}
.ptm-coin .ptm-add{display:inline-grid;place-items:center;width:24px;height:24px;margin-left:2px;border-radius:50%;background:#ee4d2d;color:#fff;font-weight:800;font-size:17px;line-height:1;box-shadow:0 2px 6px rgba(238,77,45,.35)}
.ptm-dlg.is-buy{width:min(440px,calc(100% - 24px))}
.ptm-buy-have{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ptm-buy-have div{padding:10px 12px;border-radius:14px;background:#fff8e6}
.ptm-buy-have div+div{background:#eef7ff}
.ptm-buy-have small{display:block;font-size:12px;color:#7d6f76}
.ptm-buy-have b{font-size:19px}
.ptm-buy-rate{margin:10px 0 6px;font-size:13px;color:#6b5f66}
.ptm-buy-pk{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ptm-buy-p{display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 6px 10px;border:1.5px solid #f1e3d6;border-radius:16px;background:#fffdfa;font:inherit;cursor:pointer}
.ptm-buy-p .ic{font-size:26px;line-height:1}
.ptm-buy-p .ic .ptm-ic{width:30px;height:30px}
.ptm-buy-p b{font-size:16px;color:#2a1f24}
.ptm-buy-p small{font-size:13px;color:#ee4d2d;font-weight:700}
.ptm-buy-p.on{border-color:#ee4d2d;background:#fff1ea;box-shadow:0 0 0 3px rgba(238,77,45,.15)}
.ptm-buy-sum{margin:10px 0 0;padding:10px 12px;border-radius:12px;background:#fff6ef;font-size:14px;color:#4a3d44}
.ptm-buy-sum:empty{display:none}
.ptm-buy-msg{margin:8px 0 0;font-size:13px;color:#6b5f66}
.ptm-buy-msg:empty{display:none}
.ptm-buy-msg.bad{color:#d0342c}
.ptm-buy-msg.ok{color:#1fa971;font-weight:700}
.ptm-btn.ghost{background:#f6efe8;color:#4a3d44;box-shadow:none}
.ptm-dlg.is-buy .ptm-dlg-h{background:#fff;color:#2a1f24;border-bottom:1px solid #f1e8df}.ptm-dlg.is-buy .ptm-dlg-x{background:#f6efe8;color:#6b5f66}
/* ไอคอนเหรียญใหญ่ขึ้น (เจ้าของสั่ง 7 พ.ย. 2569) */
.ptm-coin .ptm-ic{width:26px;height:26px;vertical-align:-7px}
.pga-b small .ptm-ic,.ptm-btn small .ptm-ic{width:1.6em;height:1.6em;vertical-align:-.42em}
.ptm-rows .ptm-ic,.ptm-tot .ptm-ic,.ptm-buy-have .ptm-ic{width:1.45em;height:1.45em;vertical-align:-.36em}