/* ===== ร้านค้า / ยา / บัฟ ===== */
/* ปุ่มร้านค้าอยู่ในแถบเมนูบน (shop.js) ส่วนไฟล์นี้คือหน้าต่างร้าน / ปุ่มกินยาด่วน / แถบบัฟ */
#shop-panel, #potion-quick, #potion-quick-r, .qs, #shop-panel button {
  font-family: 'Mitr', sans-serif; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
/* ตำแหน่งปุ่ม HP ขวา จัดโดย boxPanel.js (POT_CFG) -- ห้ามใส่ right/top/bottom ตรงนี้ */
#potion-quick-r { --qs: 46px; position: fixed; z-index: 900; }

/* ช่องยาด่วนแนวตั้ง (ตำแหน่ง/ขนาดถูกตั้งจาก shop.js ให้ตรงกับกรอบเกม) */
#potion-quick {
  --qs: 46px;
  position: fixed; left: 8px; top: 50%; z-index: 900;
  display: flex; flex-direction: column; gap: calc(var(--qs) * .2);
}
.qs {
  --pc: #e0413a;
  position: relative; width: var(--qs); height: var(--qs); padding: 0; overflow: hidden;
  border-radius: 12px; border: 2px solid var(--pc);
  background: linear-gradient(160deg, #3a1520 0%, #14070a 100%);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .15);
  color: #fff; transition: transform .08s;
}
.qs { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: manipulation; }
.qs:active { transform: scale(.92); }
.qs.hold::before {               /* วงสว่างขยายระหว่างกดค้าง บอกว่ากำลังจะสลับ */
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 226, 138, .55), rgba(255, 226, 138, 0) 70%);
  animation: qshold .5s linear forwards;
}
@keyframes qshold { from { transform: scale(0); opacity: 1; } to { transform: scale(1.6); opacity: .6; } }
.qs svg {
  position: absolute; left: 50%; top: 55%; width: 62%; height: 62%;
  transform: translate(-50%, -50%); filter: drop-shadow(0 1px 1px #000);
}
.qs-lab {
  position: absolute; top: 2px; left: 0; right: 0; text-align: center; line-height: 1;
  font-size: calc(var(--qs) * .2); color: #ffe28a; text-shadow: 0 0 3px #000;
}
.qs-cnt {
  position: absolute; right: 3px; bottom: 1px; font-weight: 500; line-height: 1.1;
  font-size: calc(var(--qs) * .27); text-shadow: 0 0 3px #000, 0 0 3px #000;
}
.qs-fill {                       /* แถบเวลาบัฟที่เหลือ ไล่ลงจากบนลงล่าง */
  position: absolute; left: 0; right: 0; bottom: 0; height: 0;
  background: var(--pc); opacity: .35; transition: height .5s linear;
}
.qs-time {
  position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
  text-align: center; font-style: normal; font-size: calc(var(--qs) * .36); line-height: 1;
  text-shadow: 0 0 4px #000, 0 0 4px #000;
}
.qs.on { box-shadow: 0 0 10px var(--pc), inset 0 0 8px rgba(255, 255, 255, .25); }
.qs.on svg { opacity: .55; }
.qs.empty { border-color: #5a4a2a; }
.qs.empty svg { opacity: .3; filter: grayscale(.7); }
.qs.empty .qs-cnt { color: #ffd45c; font-size: calc(var(--qs) * .34); }
.qs.cd::after {                  /* คูลดาวน์กินยา */
  content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, .55);
  transform-origin: top; animation: qscd var(--cd, 1s) linear forwards;
}
@keyframes qscd { from { transform: scaleY(1); } to { transform: scaleY(0); } }

#shop-panel {
  position: fixed; z-index: 9000; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(420px, 92vw); max-height: 88vh; display: flex; flex-direction: column;
  background: #1a0a0e; border: 2px solid #ffd45c; border-radius: 14px; color: #fff; overflow: hidden;
}
#shop-panel[hidden] { display: none; }
.sp-head { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: #26090f; font-size: 16px; }
.sp-head .sp-gold { margin-left: auto; color: #ffe28a; }
.sp-head button { background: none; border: 0; color: #fff; font-size: 20px; padding: 4px 8px; }
.sp-tabs { display: flex; }
.sp-tabs button {
  flex: 1; padding: 8px 0; font-size: 14px; background: #120609; color: #aaa; border: 0; border-bottom: 2px solid transparent;
}
.sp-tabs button.on { color: #ffe28a; border-bottom-color: #ffd45c; background: #1a0a0e; }
.sp-list { flex: 1; min-height: 0; overflow-y: auto; touch-action: pan-y; padding: 6px; }
.sp-row {
  display: flex; align-items: center; gap: 8px; padding: 6px; margin-bottom: 6px;
  background: #26090f; border-radius: 10px;
}
.sp-ico {
  width: 42px; height: 42px; flex: none; display: flex; align-items: center; justify-content: center;
  font-size: 24px; border: 2px solid #888; border-radius: 10px; background: #120609;
}
.sp-info { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.sp-info b { font-size: 14px; font-weight: 500; }
.sp-info small { font-size: 11px; color: #bbb; }
.sp-btns { display: flex; gap: 4px; flex: none; }
.sp-btns button { min-width: 48px; padding: 5px 6px; border-radius: 8px; border: 0; font-size: 12px; line-height: 1.2; color: #fff; }
.sp-buy { background: #b8860b; }
.sp-use { background: #2e7d4f; }
.sp-btns button.off { opacity: .35; }

/* ซ่อนช่องยาตอนมีหน้าต่างอื่นเปิด */
#potion-quick, #potion-quick-r { transition: opacity .12s; }
#potion-quick.hide, #potion-quick-r.hide { opacity: 0; visibility: hidden; pointer-events: none; }

/* แถบระบุจำนวนที่ซื้อ */
.sp-qty {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 8px 10px;
  background: #120609; border-top: 1px solid #3a1a22; border-bottom: 1px solid #3a1a22;
}
.sp-qlab { font-size: 13px; color: #ffe28a; margin-right: 2px; }
.sp-qty > button, .sp-chips button {
  min-width: 36px; height: 36px; padding: 0 8px; border-radius: 8px; border: 1px solid #6b4a2a;
  background: #26090f; color: #fff; font-size: 18px;
}
.sp-qty input {
  width: 74px; height: 36px; box-sizing: border-box; text-align: center; border-radius: 8px;
  border: 2px solid #ffd45c; background: #0d0406; color: #fff; font-family: 'Mitr', sans-serif;
  font-size: 18px; /* 16px ขึ้นไปกันมือถือซูมเอง */ -moz-appearance: textfield; appearance: textfield;
}
.sp-qty input::-webkit-outer-spin-button, .sp-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sp-chips { display: flex; gap: 4px; margin-left: auto; }
.sp-chips button { font-size: 13px; }
.sp-chips button.on { background: #b8860b; border-color: #ffd45c; }
.sp-qty button:active { transform: scale(.94); }
.sp-buy { white-space: nowrap; }