/* ============================================================================================
   R45 (เจ้าของ 2026-10-09): หน้าเลือกค่าย /member/select/(casino|slot) + รายชื่อเกมทุก provider /member/<p>/game_list|gamelist[/sys] ออกแบบใหม่
   "ให้โหลดไว ใช้งานง่าย รูปโหลดไว หรือมี Loading" + "ขอสวยที่สุด คิดลึก" + "สวยและใช้งานง่ายที่สุด"
   - ทั้งไฟล์อยู่ใต้ .gl-root (โหลดเฉพาะ path เหล่านี้ — utils/nhf-css.ts isGamelistV2Path) ; ธีมแดง = .gl-theme-red (token) ; ภาษาภาพเดียวกับ member-pages/affiliate (ถ่านซ้อนชั้น แดงของเว็บเป็นสีหลัก)
   - ความเร็ว: การ์ดมี aspect-ratio คงที่ (ไม่กระโดด) ; skeleton shimmer อยู่ใต้รูปตั้งแต่ paint แรก (ไม่ต้องรอ JS) ; รูป fade เมื่อ .is-loaded (JS) — ไม่มี JS รูปแสดงปกติ
   - คนแก่/มือถือ: ตัวอักษร ≥ 16 px, เป้ากด ≥ 48 px, 2 คอลัมน์ (การ์ด ≥ 160 px บน 390) / 4 (≥ 768) / 6 (≥ 1200), "เล่น" เห็นเสมอไม่ต้อง hover, แถบค้นหา+ชิป sticky ใต้ header จริง (--site-header-h)
   ============================================================================================ */
.gl-root {
  --gl-primary: var(--nhf-red-hi, #d21414); --gl-primary-hi: #ef2b2b; --gl-primary-txt: #ff7070; --gl-primary-soft: rgba(210, 20, 20, .16); --gl-primary-line: rgba(255, 112, 112, .34);
  --gl-ink: #ffffff; --gl-ink-2: #e4e4ea; --gl-muted: #c2c2cc; --gl-faint: #9a9aa6;
  --gl-paper: #202026; --gl-paper-2: #2a2a31; --gl-bg: rgba(255, 255, 255, .06); --gl-bg-2: rgba(255, 255, 255, .11);
  --gl-line: rgba(255, 255, 255, .12); --gl-line-strong: rgba(255, 255, 255, .26);
  --gl-page-0: #1c1c21; --gl-page-1: #121215;
  --gl-gold: #f2c14e; --gl-gold-ink: #fde68a; --gl-gold-soft: rgba(242, 193, 78, .18);
  --gl-ok: #34d399; --gl-ok-ink: #86efac;
  --gl-radius: 18px; --gl-radius-sm: 14px; --gl-pill: 999px;
  --gl-shadow: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 10px 30px rgba(0, 0, 0, .35);
  --gl-shadow-lg: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 22px 50px rgba(0, 0, 0, .5);
  --gl-glow: 0 0 0 1px rgba(255, 112, 112, .35), 0 14px 40px rgba(210, 20, 20, .35);
  --gl-card-grad: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, 0) 42%);
  --gl-page-grad: linear-gradient(180deg, var(--gl-page-0) 0%, var(--gl-page-1) 100%);
  --gl-font: var(--nhf-font-body, 'NotosansThai', 'Mitr', system-ui, sans-serif);
  --gl-font-display: var(--nhf-font-display, 'Mitr', 'NotosansThai', system-ui, sans-serif);
  --gl-focus: rgba(255, 112, 112, .55);
  --gl-sticky-top: 101px; --gl-botnav-h: 53px;
  font-family: var(--gl-font); font-size: 17px; line-height: 1.5; color: var(--gl-ink); -webkit-font-smoothing: antialiased;
  padding: 8px 0 calc(28px + var(--gl-botnav-h)); position: relative;
}
.gl-root.gl-theme-red {
  --gl-primary: #DC2626; --gl-primary-hi: #EF4444; --gl-primary-txt: #ff7b7b; --gl-primary-soft: rgba(220, 38, 38, .16); --gl-primary-line: rgba(255, 123, 123, .34);
  --gl-glow: 0 0 0 1px rgba(255, 123, 123, .35), 0 14px 40px rgba(220, 38, 38, .35); --gl-focus: rgba(255, 123, 123, .55);
  --gl-sticky-top: 111px; --gl-botnav-h: 64px;
}
.gl-root *, .gl-root *::before, .gl-root *::after { box-sizing: border-box; }
.gl-root h1, .gl-root h2, .gl-root h3 { color: #fff !important; }
.gl-root a { color: inherit; text-decoration: none; }
.gl-root a:focus-visible, .gl-root button:focus-visible, .gl-root input:focus-visible { outline: 3px solid var(--gl-focus); outline-offset: 2px; border-radius: 10px; }
.gl-root .gl-num { font-variant-numeric: tabular-nums lining-nums; }
.gl-root .visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.gl-root [hidden] { display: none !important; }

/* ---------- layout: แผงมืดกว้าง 1180 (6 คอลัมน์ desktop) ---------- */
.gl-wrap { max-width: 1180px; margin: 0 auto; padding: 12px 12px 18px; background: var(--gl-page-grad); border: 1px solid var(--gl-line); border-radius: var(--gl-radius); box-shadow: var(--gl-shadow-lg); }
@media (min-width: 992px) { .gl-root { padding: 16px 0 48px; } .gl-wrap { padding: 22px 26px 26px; } }
.gl-root .nhf-backpill { margin: 0 0 10px; }

/* ---------- hero (หน้าเลือกค่าย / หัวค่าย) ---------- */
.gl-hero { position: relative; overflow: hidden; border-radius: var(--gl-radius); padding: 18px 16px 16px; margin: 0 0 14px; border: 1px solid var(--gl-primary-line);
  background: radial-gradient(120% 140% at 0% 0%, rgba(210, 20, 20, .45), rgba(210, 20, 20, 0) 55%), radial-gradient(90% 120% at 100% 100%, rgba(255, 255, 255, .06), rgba(255, 255, 255, 0) 60%), var(--gl-paper); box-shadow: var(--gl-shadow); }
.gl-hero__row { display: flex; align-items: center; gap: 14px; }
.gl-hero__icon { flex: none; width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: var(--gl-primary); color: #fff; font-size: 24px; box-shadow: 0 10px 24px rgba(210, 20, 20, .38); }
.gl-hero__logo { flex: none; width: 96px; height: 54px; border-radius: 12px; overflow: hidden; background: var(--gl-bg-2); border: 1px solid var(--gl-line-strong); display: grid; place-items: center; }
.gl-hero__logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gl-hero h1 { margin: 0; font-family: var(--gl-font-display); font-size: 26px; font-weight: 700; line-height: 1.2; letter-spacing: .2px; }
.gl-hero__sub { margin: 4px 0 0; color: var(--gl-muted); font-size: 16px; line-height: 1.45; }
.gl-hero__meta { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 10px 0 0; color: var(--gl-ink-2); font-size: 16px; }
.gl-hero__meta b { color: #fff; }
.gl-switch { display: flex; gap: 8px; margin: 14px 0 0; }
.gl-switch a { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 14px; border-radius: var(--gl-pill); border: 1px solid var(--gl-line-strong); background: var(--gl-bg); color: var(--gl-ink-2); font-size: 17px; font-weight: 600; }
.gl-switch a[aria-current="page"], .gl-switch a.is-active { background: var(--gl-primary); border-color: var(--gl-primary); color: #fff; box-shadow: 0 8px 20px rgba(210, 20, 20, .35); }
.gl-switch a:active { transform: scale(.98); }

/* ---------- แถบ sticky: ค้นหา + ชิป (ใต้ header จริง) ---------- */
.gl-sticky { position: sticky; top: var(--site-header-h, var(--gl-sticky-top)); z-index: 30; margin: 0 -12px 14px; padding: 10px 12px 10px; background: rgba(20, 20, 23, .94); backdrop-filter: saturate(1.3) blur(12px); -webkit-backdrop-filter: saturate(1.3) blur(12px); border-bottom: 1px solid var(--gl-line); }
@media (min-width: 992px) { .gl-sticky { margin: 0 -26px 16px; padding: 12px 26px; border-radius: 0; } }
.gl-search { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 8px 0 14px; border-radius: var(--gl-pill); background: var(--gl-paper-2); border: 1px solid var(--gl-line-strong); }
.gl-search:focus-within { border-color: var(--gl-primary-txt); box-shadow: 0 0 0 3px var(--gl-primary-soft); }
.gl-search i { color: var(--gl-muted); font-size: 18px; }
.gl-search input { flex: 1 1 auto; min-width: 0; height: 48px; border: 0; background: transparent; color: #fff; font-family: inherit; font-size: 17px; outline: none; }
.gl-search input::placeholder { color: var(--gl-faint); }
.gl-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.gl-search button { flex: none; min-width: 48px; min-height: 44px; border-radius: var(--gl-pill); border: 0; background: var(--gl-primary); color: #fff; font-family: inherit; font-size: 16px; font-weight: 700; padding: 0 16px; cursor: pointer; }
.gl-search__clear { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--gl-bg-2); color: var(--gl-ink-2); font-size: 18px; cursor: pointer; }
.gl-search__hint { margin: 8px 4px 0; font-size: 15px; color: var(--gl-faint); }
/* R45 + ผู้ทดสอบรอบ 3 ข้อ 7: ชิปหมวด **ขึ้นบรรทัดใหม่ทุกความกว้าง** ไม่มีเลื่อนแนวนอน (อยู่ใต้ช่องค้นหา ไม่ sticky — กันแถบกินจอ 360×640) */
.gl-filters { margin: 0 0 14px; }
.gl-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; overflow: visible; }
.gl-chip { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 18px; border-radius: var(--gl-pill); border: 1px solid var(--gl-line-strong); background: var(--gl-bg); color: var(--gl-ink-2); font-size: 16px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.gl-chip i { font-size: 15px; color: var(--gl-primary-txt); }
.gl-chip__n { font-size: 14px; padding: 2px 8px; border-radius: var(--gl-pill); background: var(--gl-bg-2); color: var(--gl-muted); }
.gl-chip.is-active, .gl-chip[aria-current] { background: var(--gl-primary); border-color: var(--gl-primary); color: #fff; box-shadow: 0 8px 20px rgba(210, 20, 20, .35); }
.gl-chip.is-active i, .gl-chip.is-active .gl-chip__n { color: #fff; background: rgba(255, 255, 255, .18); }
.gl-chip:active { transform: scale(.97); }

/* ---------- แถว รายการโปรด / เล่นล่าสุด (เลื่อนแนวนอน) ---------- */
.gl-row { margin: 0 0 16px; }
.gl-row__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 2px 8px; }
.gl-row__head h2 { margin: 0; font-size: 19px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.gl-row__head h2 i { color: var(--gl-gold-ink); }
.gl-row__head span { font-size: 15px; color: var(--gl-muted); }
.gl-row__scroll::-webkit-scrollbar { display: none; }
.gl-row__empty { padding: 14px 16px; border-radius: var(--gl-radius-sm); background: var(--gl-bg); border: 1px dashed var(--gl-line-strong); color: var(--gl-muted); font-size: 16px; line-height: 1.5; }

/* ---------- หัวกลุ่ม / สถานะแสดงผล ---------- */
.gl-status { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 2px 10px; font-size: 16px; color: var(--gl-muted); }
.gl-status b { color: var(--gl-ink-2); font-weight: 600; }

/* ---------- grid การ์ดเกม ---------- */
/* R45d (เจ้าของ 2026-10-09 19:35 ดูหน้า PG บนมือถือ: "รูป Mobile mode ไม่ค่อยพอดีเลย … ขอ 3 col") — การ์ดเกมแบบใหม่ (สเปกเดียวกับ R DEV-043c):
   มือถือ < 600 px = 3 คอลัมน์ gap 8 (การ์ด ≈ 108 px ที่ 360) / 600–1023 = 4 / ≥ 1024 = 6 ; กล่องรูป 1:1 มุม 12 px **ไม่ครอป** (contain) บนสำเนาเบลอของรูปเดียวกัน + ม่านมืด 35 % ;
   บนรูปมีแค่หัวใจ 36 px (บนขวา) + ป้าย NEW ≤ 40 % (บนซ้าย) ; ชื่อใต้รูป 15.5 px/700 ≤ 2 บรรทัด ; แถบ "▶ เล่น" เต็มความกว้าง 30 px ; ทั้งใบคือลิงก์ */
.gl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 600px) { .gl-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } }
@media (min-width: 1024px) { .gl-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; } }
@media (max-width: 599px) { .gl-root[data-gl="list"] .gl-wrap { padding: 10px 10px 18px; } .gl-root[data-gl="list"] .gl-sticky { margin-left: -10px; margin-right: -10px; padding-left: 10px; padding-right: 10px; } }
.gl-tile .gl-thumb { aspect-ratio: 1 / 1; border-radius: 12px; }
.gl-tile .gl-thumb__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(14px) saturate(1.2); transform: scale(1.15); z-index: 1; display: block; }
.gl-tile .gl-thumb::after { content: ""; position: absolute; inset: 0; left: 0; top: 0; width: auto; height: auto; transform: none; border-radius: 0; border: 0; z-index: 2; background: rgba(0, 0, 0, .35); pointer-events: none; }
.gl-tile .gl-thumb img.gl-thumb__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; z-index: 3; display: block; transition: transform .5s ease; }
/* R45e: ให้รูป 2 ใบแรก (= ใบที่ fetchpriority=high) ใหญ่กว่าใบอื่น 1 px (ล้นกรอบ ถูก overflow:hidden ตัด มองไม่เห็น) → LCP element = รูปแถวแรกที่ eager/high เสมอ
   ไม่ใช่ใบแถวหลังที่สูงกว่าเศษพิกเซลแล้วโหลดช้ากว่า (วัดจริง: LCP กระโดดไปใบที่ 5/8 ที่ 4.8–5.4 s ทั้งที่แถวแรกวาดตั้งแต่ ≈ 3 s) */
.gl-grid > .gl-tile:nth-child(-n+2) .gl-thumb img.gl-thumb__img { inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); }
.gl-tile:hover .gl-thumb img.gl-thumb__img { transform: scale(1.04); }
.gl-tile__name { padding: 8px 8px 4px; color: inherit; font-size: 15.5px; font-weight: 700; line-height: 1.2; min-height: 49px; }
.gl-tile__name span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
.gl-tile__when { display: block; padding: 0 8px 4px; font-size: 13px; line-height: 1.2; color: var(--gl-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gl-play { display: flex; align-items: center; justify-content: center; gap: 6px; height: 30px; margin: 2px 0 0; background: linear-gradient(90deg, #e3252c, #b4121a); color: #fff; font-size: 14.5px; font-weight: 700; letter-spacing: .2px; }
.gl-play i { font-size: 13px; }
.gl-badge { position: absolute; top: 8px; left: 8px; z-index: 4; max-width: 40%; padding: 3px 8px; border-radius: var(--gl-pill); background: var(--gl-primary); color: #fff; font-size: 13px; line-height: 1.2; font-weight: 700; letter-spacing: .3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 2px 8px rgba(210, 20, 20, .4); }
.gl-fav { position: absolute; top: 6px; right: 6px; z-index: 4; width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .5); color: #fff; font-size: 16px; display: grid; place-items: center; cursor: pointer; transition: transform .15s ease, background .15s ease; }
/* R45e (ผู้ประสานงาน 2026-10-09 — "ผู้เล่นต้องเห็นเกมตั้งแต่ scroll 0" บน 360×640): ส่วนบนของหน้ารายชื่อเกมบนมือถือ < 600 กะทัดรัด โดยไม่แตะสเปกการ์ด —
   hero แถวเดียว ≤ 72 px (โลโก้ 40×40 · ชื่อ 20 px · บรรทัดสอง "320 เกม · สล็อต" 15.5 px ; คำอธิบายซ่อน) · ชิป 36 px/ตัวอักษร 15.5/ไม่มีไอคอน (≤ 2 แถว) + เป้าแตะ 44 px ด้วย ::after ·
   "แสดง 24/320 เกม" เล็กจางท้ายแถวชิป · คำใบ้ค้นหาเป็น placeholder → grid เริ่ม ≈ 420 px → เห็นการ์ดแถวแรกเต็มที่ 360×640, 2 แถวที่ 390×844 */
.gl-status--showing { flex-basis: 100%; margin: 4px 2px 0; } /* ≥ 600: บรรทัดของตัวเองใต้ชิป ; มือถือ: ท้ายแถวชิป (ด้านล่าง) */
@media (max-width: 599px) { .gl-root[data-gl="list"] .gl-hero { display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-areas: "logo title" "logo meta"; column-gap: 10px; row-gap: 2px; align-items: center; padding: 10px 12px; margin-bottom: 10px; } .gl-root[data-gl="list"] .gl-hero__row { display: contents; } .gl-root[data-gl="list"] .gl-hero__logo, .gl-root[data-gl="list"] .gl-hero__icon { grid-area: logo; width: 40px; height: 40px; border-radius: 10px; font-size: 18px; box-shadow: none; } .gl-root[data-gl="list"] .gl-hero__row > div { grid-area: title; min-width: 0; } .gl-root[data-gl="list"] .gl-hero h1 { font-size: 20px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gl-root[data-gl="list"] .gl-hero__sub { display: none; } .gl-root[data-gl="list"] .gl-hero__meta { grid-area: meta; margin: 0; gap: 0 6px; font-size: 15.5px; line-height: 1.2; } .gl-root[data-gl="list"] .gl-hero__meta span + span::before { content: "· "; color: var(--gl-muted); } .gl-root[data-gl="list"] .gl-hero__meta span + span i { display: none; }
  .gl-root[data-gl="list"] .gl-chips { gap: 6px; } .gl-root[data-gl="list"] .gl-chip { position: relative; min-height: 36px; padding: 0 11px; gap: 6px; font-size: 15.5px; } /* 11 px + gap 6: 3 ชิปแรก (ทั้งหมด N · รายการโปรด · เล่นล่าสุด) อยู่แถวเดียวที่ 360 (340 px เกินไป 2 px ถ้า 12/8) */ .gl-root[data-gl="list"] .gl-chip::after { content: ""; position: absolute; left: 0; right: 0; top: -4px; bottom: -4px; } .gl-root[data-gl="list"] .gl-chip i { display: none; } .gl-root[data-gl="list"] .gl-chip__n { font-size: 13px; padding: 1px 7px; }
  .gl-root[data-gl="list"] .gl-filters { margin-bottom: 10px; } .gl-root[data-gl="list"] .gl-status--showing { flex-basis: auto; margin: 0 0 0 auto; font-size: 13px; align-self: center; } .gl-root[data-gl="list"] .gl-sticky { margin-bottom: 10px; } }
/* แถว "เล่นล่าสุด"/"รายการโปรด": การ์ดใบเดียวกัน เลื่อนแนวนอน เห็น 3 ใบ gap 8 (desktop 6) + บรรทัด "9 นาทีก่อน" ใต้ชื่อ */
.gl-row__scroll { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 8px; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
.gl-row__scroll .gl-tile { flex: 0 0 calc((100% - 16px) / 3); width: auto; scroll-snap-align: start; }
@media (min-width: 600px) { .gl-row__scroll .gl-tile { flex-basis: calc((100% - 36px) / 4); } }
@media (min-width: 1024px) { .gl-row__scroll .gl-tile { flex-basis: calc((100% - 70px) / 6); } }
.gl-tile { position: relative; display: block; border-radius: var(--gl-radius); overflow: hidden; background: var(--gl-card-grad), var(--gl-paper); border: 1px solid var(--gl-line); box-shadow: var(--gl-shadow); transform: translateZ(0); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.gl-tile:hover { transform: translateY(-3px); box-shadow: var(--gl-shadow-lg); border-color: var(--gl-line-strong); }
.gl-tile:active { transform: scale(.97); transition-duration: .08s; }
.gl-tile.is-fav { border-color: var(--gl-primary-line); }
.gl-tile__link { display: block; position: relative; color: inherit; }
.gl-root:not(.has-js) .gl-chip--js { display: none; }
.gl-thumb { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: var(--gl-paper-2); }
/* skeleton shimmer อยู่ใต้รูปตั้งแต่ paint แรก (ไม่พึ่ง JS) */
.gl-thumb::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .08) 50%, rgba(255, 255, 255, 0) 70%), var(--gl-paper-2); background-size: 220% 100%; animation: gl-shimmer 1.4s linear infinite; }
.gl-thumb::after { content: ""; position: absolute; left: 50%; top: 50%; width: 34%; height: 34%; transform: translate(-50%, -50%); border-radius: 22%; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .08); }
.gl-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; z-index: 1; opacity: 1; transition: opacity .25s ease, transform .5s ease; }
.gl-root.has-js .gl-thumb img:not(.is-loaded) { opacity: 0; }
.gl-thumb img.is-error { opacity: 0 !important; }
@keyframes gl-shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.gl-fav:active { transform: scale(.9); }
.gl-fav[aria-pressed="true"] { background: var(--gl-primary); color: #fff; }
.gl-fav[aria-pressed="true"] i::before { content: "\f004"; }
.gl-root:not(.has-js) .gl-fav { display: none; }
.gl-root.has-js .gl-showall { display: none; }
.gl-showall { display: flex; justify-content: center; margin: 16px 0 0; }
.gl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 20px; border-radius: 14px; font-size: 17px; font-weight: 700; border: 1px solid var(--gl-line-strong); background: var(--gl-bg); color: #fff; cursor: pointer; font-family: inherit; }
.gl-btn--primary { background: var(--gl-primary); border-color: var(--gl-primary); box-shadow: 0 10px 24px rgba(210, 20, 20, .38); }
.gl-btn:active { transform: scale(.98); }

/* ---------- โหลดเพิ่ม / ว่าง / ปิดปรับปรุง ---------- */
.gl-loader { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; margin: 8px 0 0; color: var(--gl-muted); font-size: 16px; }
.gl-loader i { color: var(--gl-primary-txt); }
.gl-loader.is-done { color: var(--gl-faint); }
.gl-sentinel { height: 1px; }
.gl-empty { display: grid; justify-items: center; text-align: center; gap: 8px; padding: 30px 18px; border-radius: var(--gl-radius); background: var(--gl-bg); border: 1px dashed var(--gl-line-strong); color: var(--gl-muted); font-size: 16px; line-height: 1.5; }
.gl-empty i { font-size: 30px; color: var(--gl-primary-txt); }
.gl-empty b { color: #fff; font-size: 18px; }
.gl-tip { margin: 12px 2px 0; font-size: 15px; color: var(--gl-faint); display: flex; gap: 8px; align-items: center; }

/* ---------- หน้าเลือกค่าย: การ์ดค่ายใหญ่ เรืองแสงนุ่ม ---------- */
.gl-pgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 768px) { .gl-pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } }
@media (min-width: 1200px) { .gl-pgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.gl-ptile { position: relative; display: block; border-radius: var(--gl-radius); overflow: hidden; background: var(--gl-card-grad), var(--gl-paper); border: 1px solid var(--gl-line); box-shadow: var(--gl-shadow); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.gl-ptile:hover { transform: translateY(-3px); box-shadow: var(--gl-glow); border-color: var(--gl-primary-line); }
.gl-ptile:active { transform: scale(.97); }
.gl-ptile .gl-thumb { aspect-ratio: 16 / 10; }
/* R45b (ผู้ประสานงาน 2026-10-09): ชื่อค่ายถูกตัดกลางคำ ("SimplePla", "GAMediaW", "Aristocrat") เพราะคำเดียวยาวกว่าช่อง + ปุ่มลูกศร 40 px กินที่ข้างชื่อ → ปุ่มลูกศร 32 px ย้ายไปมุมบนขวาของการ์ด (ป้ายชื่อได้เต็มความกว้าง 100 %) ; ชื่อ 16 px/lh 1.15 ขึ้นได้ 2 บรรทัด + ตัดคำยาวได้ (overflow-wrap: anywhere) ; ตรวจด้วย tools/qa/chip_rows_check.mjs (ชื่อค่ายทุกใบต้องเห็นครบ ไม่ถูก clamp/clip) */
.gl-ptile__name { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 36px 12px 12px; background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .82) 70%); display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.gl-ptile__name b { font-family: var(--gl-font-display); font-size: 16px; font-weight: 700; color: #fff; line-height: 1.15; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
.gl-ptile__go { position: absolute; top: 10px; right: 10px; z-index: 3; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--gl-primary); color: #fff; font-size: 13px; box-shadow: 0 6px 16px rgba(210, 20, 20, .4); }
.gl-section { margin: 0 0 18px; }
.gl-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 2px 10px; }
.gl-section__head h2 { margin: 0; font-size: 20px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.gl-section__head h2 i { color: var(--gl-primary-txt); }
.gl-section__head span { color: var(--gl-muted); font-size: 15px; }
.gl-promo { display: block; position: relative; border-radius: var(--gl-radius); overflow: hidden; margin: 0 0 14px; border: 1px solid var(--gl-primary-line); box-shadow: var(--gl-glow); }
/* R45 วัดจริง 360×640: แบนเนอร์เต็มภาพดันค่ายแรกตกจอ (0 ใบในจอแรก) → แบนเนอร์เป็นแถบเตี้ย object-fit: cover (มือถือ 104 px / desktop 150 px) + hero กะทัดรัดบนมือถือ → เห็นค่ายแถวแรกตั้งแต่จอแรก */
.gl-promo img { display: block; width: 100%; height: 104px; object-fit: cover; object-position: center; }
@media (min-width: 768px) { .gl-promo img { height: 150px; } }
@media (max-width: 575px) { .gl-root[data-gl="hub"] .gl-hero { padding: 12px 14px 12px; } .gl-root[data-gl="hub"] .gl-hero__icon { width: 46px; height: 46px; font-size: 20px; border-radius: 14px; } .gl-root[data-gl="hub"] .gl-hero__sub { font-size: 15.5px; line-height: 1.35; margin-top: 2px; } .gl-root[data-gl="hub"] .gl-hero__meta { margin-top: 6px; } .gl-root[data-gl="hub"] .gl-switch { margin-top: 10px; } .gl-root[data-gl="hub"] .gl-switch a { min-height: 44px; } }
.gl-promo .gl-badge { top: 12px; left: 12px; }
@media (prefers-reduced-motion: reduce) { .gl-root * { transition: none !important; animation: none !important; } }