/* ═══════════════════════════════════════════════════════════════════════════════
   📱 เมนูจอแคบ + ตะแกรงของในร้านไอเทม (2026-08-25)
   user: "ดูเรื่อง responsive ด้วย ไม่เห็นเมนู navbar"
   ปัญหาเดิม: `site.css` สั่ง `.nav menu{display:none}` ที่จอ ≤980px **แล้วไม่มีอะไรมาแทน**
   ⇒ จอแคบเมนูหายทั้งแถบ เข้าหน้าอื่นไม่ได้เลยนอกจากพิมพ์ URL
   วิธีแก้: ปุ่มขีดสามขีด ทำด้วย **checkbox + CSS ล้วน ไม่ใช้ JavaScript**
   (CSP ของเราไม่อนุญาต inline script · ปิด JS ก็ยังใช้ได้ · ไม่ต้องเพิ่มไฟล์ js)
   ═════════════════════════════════════════════════════════════════════════════ */
.navtoggle{display:none}
.navbtn{display:none}

@media(max-width:980px){
  /* ปุ่มขีดสามขีด — อยู่ขวาสุดก่อนปุ่มเข้าสู่ระบบ */
  .navbtn{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;
    width:42px;height:36px;margin-left:auto;background:#fff;border:1px solid var(--edge);
    border-radius:4px;cursor:pointer;flex:none}
  .navbtn span{display:block;width:19px;height:2px;background:var(--ink2);transition:.2s}
  .navbtn:hover{border-color:var(--acc)}
  .navbtn:hover span{background:var(--acc)}
  .navtoggle:checked ~ .navbtn span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .navtoggle:checked ~ .navbtn span:nth-child(2){opacity:0}
  .navtoggle:checked ~ .navbtn span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

  .nav .right{margin-left:10px}

  /* แผงเมนูร่วงลงมาใต้แถบ — ปิดอยู่โดยปริยาย เปิดเมื่อกดปุ่ม */
  .nav menu{display:none;position:absolute;left:0;right:0;top:var(--nav-h);margin:0;padding:4px 0 8px;
    flex-direction:column;gap:0;background:#fff;border-bottom:2px solid var(--acc);
    box-shadow:0 10px 24px rgba(22,40,60,.12)}
  .navtoggle:checked ~ menu{display:flex}
  .nav menu li{padding:0 max(4vw,20px)}
  .nav menu a{display:block;padding:13px 0;font-size:15.5px;border-bottom:1px solid var(--line2)}
  .nav menu li:last-child a{border-bottom:0}
  .nav menu a::after{display:none}          /* เส้นใต้แบบจอกว้างไม่ต้องใช้ในแผงนี้ */
  .nav menu a.on{color:var(--acc)}
}

/* จอเล็กมาก: เหลือปุ่มหลักปุ่มเดียวในแถบ (ปุ่มเข้าสู่ระบบไปอยู่ในแผงเมนู) */
@media(max-width:620px){
  .nav .right .btn-line{display:none}
  .nav menu::after{content:"";display:block;height:1px;margin:6px max(4vw,20px) 0;background:var(--line2)}
}

/* ═══ ตะแกรงของในร้านไอเทม ═══════════════════════════════════════════════════ */
.shopgrid{display:grid;gap:14px;grid-template-columns:repeat(4,1fr)}   /* แถวละ 4 ช่อง (user สั่ง) */
/* คงแถวละ 4 ไว้ให้นานที่สุด (user สั่ง) — ลดเมื่อช่องแคบจนอ่านชื่อไม่ออกจริง ๆ */
@media(max-width:760px){ .shopgrid{grid-template-columns:repeat(3,1fr)} }
@media(max-width:520px){ .shopgrid{grid-template-columns:repeat(2,1fr)} }
.sitem{background:#fff;border:1px solid var(--edge);border-radius:4px;padding:14px 12px 12px;
  display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;
  transition:border-color .18s,box-shadow .18s}
.sitem:hover{border-color:var(--acc);box-shadow:0 2px 10px rgba(22,40,60,.10)}
/* ช่องรูปของ — **ใช้ภาพกราฟฟิคที่วาดเอง ไม่ใช่ไอคอนในเกม** (user 2026-08-25)
   ⇒ ช่องเต็มความกว้างการ์ด + สูงขึ้น · `contain` = ไม่บีบสัดส่วนภาพ
   🔑 ขนาดไฟล์ที่เหมาะ: ~**480×360** (หรือจัตุรัส 400×400) PNG/WebP วางที่ `wwwroot/img/items/<itemId>.png`
   ⛔ ไม่ใส่ image-rendering:pixelated แล้ว — ภาพวาดต้องเนียน (ไอคอนพิกเซลเดิมจะดูนุ่มขึ้นเล็กน้อย) */
.sitem .ico{width:100%;height:150px;border:1px dashed var(--edge2);border-radius:3px;background:#fafcfe;
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.sitem .ico img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
@media(max-width:760px){ .sitem .ico{height:132px} }
.sitem .nm{font-size:14px;font-weight:700;line-height:1.4}
.sitem .meta{font-size:12px;color:var(--mute)}
.sitem .price{font-size:15px;font-weight:800;color:var(--acc)}
.sitem .btn{padding:7px 12px;font-size:13px}
.sitem .tagline{font-size:11.5px;color:var(--mute)}

/* ═══ กล่องพอยต์คงเหลือ ═══════════════════════════════════════════════════════
   user: "แสดง point ที่มีด้วย ไว้ลอยๆ ทางซ้ายที่ว่าง ก็ได้"
   จอกว้างพอ (≥1660px) → **ลอยติดจอในช่องว่างซ้ายของเนื้อหา**
   จอแคบกว่านั้น → กลับมาเป็นการ์ดปกติหัวคอลัมน์เนื้อหา (ไม่ทับอะไร ไม่ต้องมี 2 ก้อนใน DOM) */
.ptfloat{background:#fff;border:1px solid var(--edge);border-left:4px solid var(--acc);border-radius:4px;
  padding:12px 16px;margin-bottom:18px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  box-shadow:0 1px 2px rgba(22,40,60,.05)}
.ptfloat .lbl{font-size:12px;font-weight:800;letter-spacing:.06em;color:var(--mute)}
.ptfloat .num{font-size:26px;font-weight:800;line-height:1;color:var(--acc)}
.ptfloat .sub2{font-size:12.5px;color:var(--mute);margin-left:auto}
.ptfloat .btn{font-size:13px;padding:8px 14px;width:auto}
@media(max-width:620px){ .ptfloat .sub2{margin-left:0} }


/* ── แถบข้างหน้าร้านไอเทม: **ไม่ใส่พื้นหลัง** (user เคาะ 2026-08-26) — แก้ที่ "ดูเล็กไป"
   ด้วยการขยายคอลัมน์ + ทำแถวในกล่องให้ใหญ่ขึ้นอย่างเดียว ────────────────────────────── */
body.p-itemshop .cols{grid-template-columns:1fr 380px}
body.p-itemshop .side .cityhead{padding:18px 20px 14px}
body.p-itemshop .side .cityhead h3{font-size:19.5px}
body.p-itemshop .side .cityhead div{font-size:13px}
body.p-itemshop .side .city{padding:16px 16px 20px;gap:12px}
body.p-itemshop .side .crow{padding:16px 16px}
body.p-itemshop .side .crow .nm{font-size:16px}
body.p-itemshop .side .free-badge{font-size:12.5px;padding:6px 12px}
@media(max-width:980px){ body.p-itemshop .cols{grid-template-columns:1fr} }

/* ── หน้ากิจกรรม: เนื้อในแผงกิจกรรม + สารบัญหัวข้อทางขวา ─────────────────────── */
.evbody{padding:18px 20px 20px}
.evbody .tbl th{width:150px;white-space:nowrap}
.evh3{font-size:15.5px;font-weight:800;margin:4px 0 10px}
.evgrid{grid-template-columns:repeat(3,1fr)}
.evgrid .ico{height:110px}
.phead .pill{margin-left:auto}
body.p-events .crow.soon{opacity:.62;cursor:default}
body.p-events .crow.soon:hover{border-color:var(--edge);background:#fff}
@media(max-width:620px){ .evgrid{grid-template-columns:repeat(2,1fr)} .evbody .tbl th{width:auto} }