/* ══════════════════════════════════════════════════════════════
   pg-ui.css — UI กลางของ PopGamer (แก้ที่นี่ที่เดียว ทุกหน้าเปลี่ยนตาม)
   ใช้ร่วม: หน้าแรก (www) · GameHub · Dashboard · Admin
   1) ปุ่ม  .pg-btn  (+ ชื่อคลาสเดิมของ admin/dashboard เป็น alias)
   2) ป้ายบนการ์ดเกม  .pg-medal / .pg-tag / .pg-ver
   ไม่พึ่ง :root ของหน้า — ตัวแปรสีประกาศที่ตัวปุ่มเอง และระบุสีพื้นทุกสถานะ
   (กันสไตล์อื่นมาทับตอน hover/กด)
   ══════════════════════════════════════════════════════════════ */

/* ── 1) ปุ่มนูน ──────────────────────────────────────────────── */
.pg-btn,
.btn, .bsm {
  --face: hsl(340 82% 70%);   /* ชมพูของเว็บ */
  --edge: hsl(340 62% 52%);   /* เงาแข็งด้านล่าง */
  --ink: #fff;
  --ring: transparent;
  --press: .86;               /* ตอนกด: สีเดิมเข้มขึ้น */
  --depth: 4px;
  --glow: rgba(0,0,0,.14);
}

/* ชนิดสี */
.pg-btn--purple, .btn-pu, .b-edit { --face: hsl(270 65% 72%); --edge: hsl(270 45% 52%); }
.pg-btn--test   { --face: #1D9E75; --edge: #0B6B50; }                              /* ทดสอบ = เขียวเดียวกับป้าย */
.pg-btn--soon   { --face: #CFE6FA; --edge: #7FB1E6; --ink: #0C447C; --press: .9; } /* กำลังมา = ฟ้าอ่อนเดียวกับป้าย */
.pg-btn--danger, .btn-red, .btn-danger, .b-del { --face: #E5484D; --edge: #A82A2F; }
.pg-btn--green, .btn-gn, .btn-ok { --face: #1D9E75; --edge: #0B6B50; }
.pg-btn--sky, .b-upload { --face: #38BDF8; --edge: #0A84C1; --ink: #06324a; }
.pg-btn--muted  { --face: #B8BCC6; --edge: #8A8F9C; --ink: #fff; }
.pg-btn--white  { --face: #fff; --edge: rgba(255,255,255,.55); --ink: hsl(340 62% 48%); --press: .93; } /* บนภาพ/พื้นสีเข้ม */
.pg-btn--ghost, .btn-ghost, .b-cancel {
  --face: var(--pg-ghost-bg, #fff);
  --ink: var(--pg-ghost-ink, hsl(340 62% 46%));
  --ring: var(--pg-ghost-ring, hsl(340 82% 70%));
  --edge: var(--pg-ghost-edge, hsl(340 82% 70% / .55));
  --press: .94;
}

/* พื้นฐานรูปทรง */
.pg-btn,
.btn, .bsm {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  box-sizing: border-box;
  padding: .55rem 1.2rem; min-height: 2.1rem;
  border: none; border-radius: 9px;
  font-family: var(--font, 'Noto Sans Thai','Noto Color Emoji', sans-serif);
  font-size: .82rem; font-weight: 700; line-height: 1.2;
  text-decoration: none; white-space: nowrap;
  cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 0 0 1.5px var(--ring), 0 var(--depth) 0 var(--edge), 0 calc(var(--depth) * 2) 12px var(--glow);
  transition: filter .12s, transform .08s, box-shadow .08s;
}
/* ระบุสีพื้น/ตัวอักษรทุกสถานะ — ไม่ให้สไตล์อื่นทับตอน hover/focus/กด/ปิดใช้งาน */
.pg-btn, .pg-btn:hover, .pg-btn:focus, .pg-btn:active, .pg-btn:disabled,
.btn, .btn:hover, .btn:focus, .btn:active, .btn:disabled,
.bsm, .bsm:hover, .bsm:focus, .bsm:active, .bsm:disabled {
  background: var(--face); color: var(--ink); opacity: 1;
}
.pg-btn svg, .btn svg, .bsm svg { width: .75em; height: .75em; fill: currentColor; flex-shrink: 0; }
.pg-btn img, .btn img, .bsm img { width: 1.15em; height: 1.15em; object-fit: contain; border-radius: 3px; }

.pg-btn:hover, .btn:hover, .bsm:hover { filter: brightness(1.05); transform: none; }
.pg-btn:active, .btn:active, .bsm:active {
  transform: translateY(var(--depth)); filter: brightness(var(--press));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 0 0 1.5px var(--ring), inset 0 -1px 0 var(--edge);
}
.pg-btn:focus-visible, .btn:focus-visible, .bsm:focus-visible { outline: 2px solid hsl(340 82% 70% / .6); outline-offset: 2px; }

/* กดไม่ได้: ลดความสว่างลง ไม่ยุบ */
.pg-btn:disabled, .pg-btn[aria-disabled="true"], .btn:disabled, .bsm:disabled {
  cursor: not-allowed; filter: grayscale(.45) brightness(1.06); transform: none; opacity: .55;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 0 0 1.5px var(--ring), 0 var(--depth) 0 var(--edge);
}
/* กำลังมา = ไม่ใช่ error แค่ยังกดไม่ได้ → คงสีฟ้าอ่อนเต็ม */
.pg-btn--soon, .pg-btn--soon:hover, .pg-btn--soon:active, .pg-btn--soon:disabled {
  cursor: default; filter: none; transform: none; opacity: 1;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 var(--depth) 0 var(--edge), 0 calc(var(--depth) * 2) 12px rgba(0,0,0,.10);
}
.pg-btn--ghost:hover, .btn-ghost:hover, .b-cancel:hover { background: color-mix(in srgb, var(--face) 92%, hsl(340 82% 70%)); }

/* ขนาด */
.bsm, .btn-sm, .pg-btn--sm { --depth: 3px; padding: .3rem .85rem; min-height: 1.8rem; font-size: .74rem; border-radius: 8px; }
.pg-btn--lg { padding: .75rem 1.9rem; min-height: 2.8rem; font-size: .95rem; border-radius: 12px; }
.pg-btn--block, .btn-full { display: flex; width: 100%; }
.pg-btn--pill { border-radius: 99px; }

/* ชื่อคลาสเดิมที่ต้องการหน้าตาเฉพาะ */
.btn-login { width: 100%; padding: .75rem 1rem; }
.btn-login, .btn-pk, .b-save, .b-add, .btn-primary { /* ชมพูเว็บ = ค่าเริ่มต้น (ระบุไว้ให้ชัด) */ --face: hsl(340 82% 70%); --edge: hsl(340 62% 52%); }

/* ── ปุ่มช่องทางสั่งซื้อ/แพลตฟอร์ม (หน้าสินค้า) — สีตามแพลตฟอร์ม ใช้คู่กับ .pg-btn--plat ── */
.pg-btn--line      { --face: #06C755; --edge: #049440; }
.pg-btn--facebook  { --face: #1877F2; --edge: #0E4FA8; }
.pg-btn--tiktok    { --face: #161616; --edge: #000;    --press: .75; }
.pg-btn--shopee    { --face: #EE4D2D; --edge: #B8341A; }
.pg-btn--instagram { --face: #E1306C; --edge: #A81F4D; }
.pg-btn--lazada    { --face: #0F146D; --edge: #080B45; --press: .8; }
.pg-btn.pg-btn--plat { padding: .6rem .5rem; min-width: 0; }
.pg-btn.pg-btn--plat span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pg-btn.pg-btn--plat svg { width: 1.2em; height: 1.2em; }

/* ── 2) ป้ายบนการ์ดเกม (หน้าแรก + GameHub ใช้ชุดเดียวกัน) ───────── */
/* ต้องวางใน container ที่เป็น position:relative (ภาพปกการ์ด) */
.pg-medal {                      /* Featured: เหรียญสีมุมซ้ายบน */
  position: absolute; top: 5px; left: 6px; z-index: 3;
  width: 30px; height: 36px; pointer-events: none;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.35));
}
.pg-tag {                        /* สถานะ: กึ่งกลางขอบบนของภาพปก (ไม่มี icon) */
  position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 3;
  padding: 3px 14px 4px; border-radius: 0 0 10px 10px;
  font-family: var(--font, 'Noto Sans Thai','Noto Color Emoji', sans-serif); font-size: .72rem; font-weight: 700; line-height: 1.3; white-space: nowrap;
  box-shadow: 0 3px 8px rgba(0,0,0,.18); pointer-events: none;
}
.pg-tag--test { background: #1D9E75; color: #fff; }       /* ทดสอบ = เขียว */
.pg-tag--soon { background: #CFE6FA; color: #0C447C; }    /* กำลังมา = ฟ้าอ่อน */
.pg-ver {                        /* เวอร์ชัน: มุมขวาบน */
  position: absolute; top: 7px; right: 7px; z-index: 3;
  background: rgba(0,0,0,.55); color: #fff;
  font-family: monospace; font-size: .62rem; font-weight: 700; padding: 2px 6px; border-radius: 7px; pointer-events: none;
}