/* ==========================================================================
   gamehub.css — ล็อบบี้เกม (member/games.html) · เทา-ทอง
   โครงยืมจาก `member-game-categories` ของ lotto432 ที่เจ้าของส่งมา:
     eyebrow → h2 → คำอธิบาย → ตัวนับสรุป
     → แถบกระโดดหมวด (ไอคอน + ชื่อ + จำนวน)
     → ต่อหมวด: หัวข้อ + ปุ่มควบคุม → รางค่าย(เลื่อนเอง) → รางปกเกม 2 แถว(เลื่อนเอง)

   🔴 รางเลื่อนสวยได้เพราะ **ปกเกมจริง** ไม่ใช่เพราะ CSS
      แคตตาล็อกต้องมีรูปก่อน (ops/seed-game-catalog.mjs สำหรับ dev · /games/sync สำหรับของจริง)
   ========================================================================== */

.gh{
  --r:18px;
  --spring:cubic-bezier(.32,.72,0,1);
  --g1:var(--gg-lite,#FFF6DC); --g2:var(--gg-mid,#F0DCA0); --g3:var(--gg-core,#DCB863);
  --g4:var(--gg-deep,#A8822F); --g5:var(--gg-edge,#6B5116); --gink:var(--gg-ink,#2A1F06);
  --deep:#0C0D0F; --slab:#16181B; --slab-2:#1D2024;
  --hair:rgba(232,220,190,.10); --hair-2:rgba(232,220,190,.20);
  --ink-1:#F2EFE8; --ink-2:#A7A399; --sunk:rgba(0,0,0,.55);
  padding:16px 18px 40px;color:var(--ink-1);
  background:
    radial-gradient(1200px 620px at 88% -8%, rgba(220,184,99,.10) 0%, transparent 58%),
    radial-gradient(900px 520px at 8% 104%, rgba(220,184,99,.045) 0%, transparent 60%),
    radial-gradient(1400px 900px at 50% 40%, transparent 42%, rgba(0,0,0,.55) 100%),
    var(--deep);
}
:root[data-theme="light"] .gh{
  --deep:#EDECE8; --slab:#FFFFFF; --slab-2:#FBFAF7;
  --hair:rgba(60,52,32,.13); --hair-2:rgba(60,52,32,.22);
  --ink-1:#191A1C; --ink-2:#6C6F73; --sunk:rgba(40,34,20,.10);
  background:radial-gradient(1200px 620px at 88% -8%,rgba(168,132,46,.13) 0,transparent 58%),var(--deep);
}
@media(max-width:820px){.gh{padding:12px 12px 28px}}

/* ══ HERO ═══════════════════════════════════════════════════════════════════ */
.gh-hero{position:relative;overflow:hidden;border-radius:calc(var(--r) + 6px);padding:5px;margin-bottom:16px;
  background:linear-gradient(150deg,rgba(220,184,99,.34),rgba(220,184,99,.05) 44%,rgba(255,255,255,.03));
  box-shadow:0 26px 62px -34px rgba(0,0,0,.95)}
.gh-glow{position:absolute;border-radius:50%;filter:blur(56px);pointer-events:none;z-index:0}
.gh-glow.g1{width:280px;height:280px;top:-130px;right:-60px;background:rgba(220,184,99,.30)}
.gh-glow.g2{width:230px;height:230px;bottom:-140px;left:-50px;background:rgba(220,184,99,.14)}
.gh-hero-in{position:relative;z-index:1;border-radius:var(--r);padding:26px 28px;
  display:flex;align-items:center;gap:26px;flex-wrap:wrap;
  background:linear-gradient(180deg,rgba(35,38,43,.94),rgba(22,24,27,.97) 62%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),inset 0 0 0 1px rgba(0,0,0,.5)}
:root[data-theme="light"] .gh-hero-in{background:linear-gradient(180deg,#fff,#F7F5F0)}
.gh-hero-in::before{content:'';position:absolute;inset:0 0 auto 0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,240,200,.5) 22%,rgba(255,240,200,.16) 62%,transparent)}
.gh-intro{flex:1 1 340px;min-width:0;display:flex;flex-direction:column;gap:9px}
.gh-intro .eyebrow{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  padding:5px 12px 5px 9px;border-radius:99px;font-size:12px;font-weight:700;letter-spacing:.2em;
  color:var(--g2);background:rgba(220,184,99,.10);box-shadow:inset 0 0 0 1px rgba(220,184,99,.28)}
.gh-intro .eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--g3);box-shadow:0 0 0 3px rgba(220,184,99,.2)}
.gh-intro h2{margin:0;font-size:29px;font-weight:700;line-height:1.24;letter-spacing:-.01em;text-wrap:balance}
.gh-intro p{margin:0;font-size:15.5px;line-height:1.72;color:var(--ink-2);max-width:54ch}
.gh-intro p b{color:var(--g2);font-weight:600}
.gh-sum{flex:0 0 auto;display:flex;flex-direction:column;gap:9px;min-width:180px;padding:18px 20px;border-radius:16px;
  background:linear-gradient(180deg,#23262B,#15171A);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),inset 0 0 0 1px rgba(220,184,99,.3),0 14px 30px -18px rgba(0,0,0,.9)}
:root[data-theme="light"] .gh-sum{background:linear-gradient(180deg,#fff,#F5F2EA)}
.gh-sum .a{display:flex;align-items:baseline;gap:9px}
.gh-sum .a strong{font-size:44px;font-weight:700;line-height:.9;
  background:linear-gradient(180deg,#FFF7E0,var(--g3));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
:root[data-theme="light"] .gh-sum .a strong{background:linear-gradient(180deg,#8A6A18,#B8912F);-webkit-background-clip:text;background-clip:text}
.gh-sum .a span{font-size:14px;color:var(--ink-2);font-weight:600}
.gh-sum .b{display:flex;align-items:baseline;gap:7px;padding-top:9px;box-shadow:inset 0 1px 0 rgba(232,220,190,.10)}
.gh-sum .b b{font-size:19px;font-weight:700}.gh-sum .b span{font-size:13.5px;color:var(--ink-2)}

/* ══ แถบกระโดดหมวด ═════════════════════════════════════════════════════════ */
.gh-jump{display:flex;gap:9px;overflow-x:auto;padding:2px 2px 6px;margin-bottom:16px;scrollbar-width:none}
.gh-jump::-webkit-scrollbar{display:none}
.gh-jump button{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  padding:12px 18px 11px;border:0;border-radius:15px;cursor:pointer;font:inherit;text-align:left;color:var(--ink-1);
  background:linear-gradient(180deg,var(--slab-2),var(--slab));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),inset 0 0 0 1px var(--hair);
  transition:transform .3s var(--spring),box-shadow .3s var(--spring)}
.gh-jump button:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.09),inset 0 0 0 1px var(--hair-2)}
.gh-jump button:active{transform:scale(.96)}
.gh-jump button .ic{font-size:17px;line-height:1;color:var(--g3)}
.gh-jump button strong{font-size:16px;font-weight:700;white-space:nowrap}
.gh-jump button small{font-size:13px;color:var(--ink-2);white-space:nowrap;font-variant-numeric:tabular-nums}
.gh-jump button.on{box-shadow:inset 0 1px 0 rgba(255,255,255,.07),inset 0 0 0 1.5px rgba(220,184,99,.5)}
.gh-jump button.on small{color:var(--g2);font-weight:700}

/* ══ หมวด ═══════════════════════════════════════════════════════════════════ */
.gh-cat{margin-bottom:34px}
.gh-cat-h{display:flex;align-items:center;gap:13px;margin:0 2px 14px;flex-wrap:wrap}
.gh-cat-h .ic{width:42px;height:42px;border-radius:13px;flex:0 0 auto;display:grid;place-items:center;font-size:21px;
  color:var(--g2);background:linear-gradient(180deg,#23262B,#15171A);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),inset 0 0 0 1px rgba(220,184,99,.36),0 8px 18px -12px rgba(0,0,0,.9)}
:root[data-theme="light"] .gh-cat-h .ic{background:linear-gradient(180deg,#fff,#F5F2EA);color:#8A6A18}
.gh-cat-h .tx{min-width:0}
.gh-cat-h h3{margin:0;font-size:21px;font-weight:700;letter-spacing:-.01em}
.gh-cat-h small{display:block;font-size:14px;color:var(--ink-2);margin-top:2px}
.gh-cat-h .acts{margin-left:auto;display:flex;gap:7px}
.gh-cat-h .acts button{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border:0;border-radius:99px;
  cursor:pointer;font:inherit;font-size:14px;font-weight:700;color:var(--ink-1);
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.015));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 0 0 1px var(--hair);
  transition:transform .26s var(--spring)}
:root[data-theme="light"] .gh-cat-h .acts button{background:#F3F1EC;box-shadow:inset 0 0 0 1px rgba(60,52,32,.12)}
.gh-cat-h .acts button:active{transform:scale(.95)}
.gh-cat-h .acts button i{font-style:normal;opacity:.8}

.gh-sub{display:flex;align-items:baseline;gap:10px;margin:0 2px 9px;flex-wrap:wrap}
.gh-sub strong{display:flex;align-items:center;gap:8px;font-size:14.5px;font-weight:700}
.gh-sub strong::before{content:'';width:3px;height:13px;border-radius:2px;
  background:linear-gradient(180deg,var(--g2),var(--g4))}
.gh-sub small{font-size:13.5px;color:var(--ink-2)}

/* ══ รางเลื่อนอัตโนมัติ ═════════════════════════════════════════════════════
   หลักการเดียวกับของ lotto432: วางชุดเดิม **2 ชุดต่อกัน** แล้วเลื่อน -50%
   พอจบรอบ ภาพจะบรรจบพอดี = ลูปไม่มีรอยต่อ
   🔴 เลื่อนด้วย `transform` เท่านั้น (GPU) ห้ามใช้ left/margin — ไม่งั้นกระตุกบนมือถือ
   🔴 ชุดที่ 2 ต้อง `aria-hidden` + `tabindex=-1` ไม่งั้นโปรแกรมอ่านหน้าจอ/ปุ่ม Tab เจอของซ้ำ 2 เท่า */
.gh-rail{position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.gh-track{display:flex;width:max-content;animation:gh-slide var(--dur,60s) linear infinite;will-change:transform}
.gh-rail:hover .gh-track,.gh-rail.paused .gh-track{animation-play-state:paused}
@keyframes gh-slide{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.gh-set{display:flex;gap:11px;padding:3px}

/* — การ์ดค่ายเกม — */
.gh-prov{flex:0 0 auto;display:flex;align-items:center;gap:11px;width:230px;padding:9px 12px 9px 9px;
  border:0;border-radius:15px;cursor:pointer;font:inherit;text-align:left;color:var(--ink-1);
  background:linear-gradient(180deg,var(--slab-2),var(--slab));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),inset 0 0 0 1px var(--hair),0 12px 26px -20px rgba(0,0,0,.95);
  transition:transform .3s var(--spring),box-shadow .3s var(--spring)}
.gh-prov:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.09),inset 0 0 0 1px rgba(220,184,99,.34),0 16px 30px -18px rgba(0,0,0,.95)}
.gh-prov:active{transform:scale(.97)}
.gh-prov img{width:54px;height:54px;border-radius:11px;object-fit:cover;flex:0 0 auto;display:block;
  background:#0d0e10;box-shadow:0 0 0 1px rgba(0,0,0,.4)}
.gh-prov .tx{min-width:0;flex:1;display:flex;flex-direction:column;gap:1px}
.gh-prov .tx strong{font-size:15.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gh-prov .tx small{font-size:13px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.gh-prov i{font-style:normal;color:var(--g3);font-size:19px;flex:0 0 auto}

/* — การ์ดเกม (ปกจริง) — */
.gh-rows{display:flex;flex-direction:column;gap:11px}
.gh-game{flex:0 0 auto;width:150px;border:0;padding:0;background:none;cursor:pointer;font:inherit;
  color:var(--ink-1);text-align:left;transition:transform .3s var(--spring)}
.gh-game:hover{transform:translateY(-3px)}
.gh-game:active{transform:scale(.96)}
.gh-art{position:relative;display:block;border-radius:14px;overflow:hidden;aspect-ratio:4/3;
  background:linear-gradient(180deg,#212327,#141518);
  box-shadow:inset 0 0 0 1px var(--hair),0 12px 26px -18px rgba(0,0,0,.95)}
.gh-art img{width:100%;height:100%;object-fit:cover;display:block}
.gh-art .play{position:absolute;inset:0;display:grid;place-items:center;opacity:0;
  background:linear-gradient(180deg,rgba(10,8,3,.1),rgba(10,8,3,.62));
  transition:opacity .3s var(--spring)}
.gh-game:hover .gh-art .play{opacity:1}
.gh-art .play i{font-style:normal;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  font-size:16px;color:var(--gink);
  background:linear-gradient(180deg,var(--g1),var(--g2) 18%,var(--g3) 62%,var(--g4));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 0 0 1px var(--g5),0 8px 18px -8px rgba(0,0,0,.8)}
.gh-game .nm{display:block;margin-top:7px;font-size:14px;font-weight:700;line-height:1.35;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}
.gh-game .pv{display:block;font-size:12.5px;color:var(--ink-2);margin-top:1px}

/* ══ ค้นหา + ผลลัพธ์แบบตาราง (โหมดค้นหา) ═══════════════════════════════════ */
.gh-tools{display:flex;gap:10px;align-items:center;margin-bottom:18px;flex-wrap:wrap}
.gh-search{flex:1;min-width:200px;display:flex;align-items:center;gap:10px;padding:12px 18px;border-radius:99px;
  background:linear-gradient(180deg,#14161A,#101215);
  box-shadow:inset 0 2px 5px var(--sunk),inset 0 0 0 1px var(--hair)}
:root[data-theme="light"] .gh-search{background:#fff}
.gh-search svg{flex:0 0 auto;color:var(--ink-2)}
.gh-search input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--ink-1);font:inherit;font-size:16px}
.gh-search input::placeholder{color:var(--ink-2);opacity:.85}
.gh-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
@media(max-width:560px){.gh-grid{grid-template-columns:1fr 1fr;gap:11px}}

.gh-empty{padding:44px 16px;text-align:center;color:var(--ink-2);font-size:16px;border-radius:var(--r);
  background:linear-gradient(180deg,var(--slab),var(--deep));box-shadow:inset 0 0 0 1px var(--hair)}
.gh-msg{padding:12px 16px;border-radius:12px;margin-bottom:14px;font-size:15.5px;font-weight:600;
  background:color-mix(in srgb,#F2555F 12%,var(--slab));color:#F2777F;
  box-shadow:inset 0 0 0 1px rgba(242,85,95,.3)}

@media(max-width:820px){
  .gh-hero-in{padding:16px 16px 18px;gap:14px}
  .gh-intro{flex:1 1 100%;gap:7px}
  .gh-intro h2{font-size:22px}.gh-intro p{font-size:14.5px}
  .gh-intro .eyebrow{font-size:11px}
  .gh-sum{flex:1 1 100%;min-width:0;flex-direction:row;align-items:center;gap:16px;padding:13px 15px}
  .gh-sum .a strong{font-size:34px}
  .gh-sum .b{padding-top:0;box-shadow:none;flex-direction:column;gap:0;align-items:flex-start}
  .gh-cat-h .ic{width:36px;height:36px;font-size:19px}
  .gh-cat-h h3{font-size:19px}
  .gh-cat-h .acts{margin-left:0;flex:1 1 100%}
  .gh-game{width:126px}
  .gh-prov{width:196px}
}

/* 🔴 คนที่ตั้ง "ลดการเคลื่อนไหว" — รางต้องหยุดสนิท ไม่ใช่ช้าลง
   (คนที่แพ้ภาพเคลื่อนไหวจะเวียนหัวกับรางที่วิ่งไม่หยุด) */
@media(prefers-reduced-motion:reduce){
  .gh-track{animation:none!important}
  .gh-rail{overflow-x:auto;scrollbar-width:thin}
  .gh *{transition:none!important}
}

/* ══ กรอบทองร่วม — ทุก section ในหน้าเกมเข้าชุดกับ .gh-hero ══════════════════
   เจ้าของสั่ง (2026-08-24): "ให้ใส่ชุดเดียวกัน" (ชุดเดียวกับล็อบบี้หวย lobby.css)

   🔴 อีลิเมนต์เดียวได้กรอบ 2 ชั้น ไม่ต้องเพิ่ม <div> ครอบ:
      `border:5px solid transparent` + พื้น 2 ชั้นที่ตัดคนละกรอบ
        ชั้นบน (พื้นเข้ม)  → padding-box = เต็มเฉพาะข้างในเส้นขอบ
        ชั้นล่าง (ไล่ทอง) → border-box  = เต็มถึงขอบนอก ⇒ โผล่เป็นขอบทอง 5px
      จำเป็นเพราะ `.gh-cat` กับ `.gh-jump` ถูกสร้างจาก JS (template ใน games.html)

   🔴 ไม่มี drop shadow ตามที่สั่ง — ความลึกมาจาก inset ไฮไลต์เส้นบนอย่างเดียว
   🔴 ห้ามใส่ overflow:hidden ที่กรอบ — `.gh-jump` เลื่อนแนวนอน (overflow-x:auto) */
.gh-jump, .gh-tools, .gh-cat{
  position:relative;
  border:5px solid transparent;
  border-radius:calc(var(--r) + 6px);
  background:
    linear-gradient(180deg,rgba(35,38,43,.94),rgba(22,24,27,.97) 62%) padding-box,
    linear-gradient(150deg,rgba(220,184,99,.34),rgba(220,184,99,.05) 44%,rgba(255,255,255,.03)) border-box;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
}
/* หน้านี้รองรับธีมสว่างด้วย (ต่างจากล็อบบี้หวยที่คุมพื้นผิวเองล้วน)
   ⇒ ต้องมีพื้นชั้นในของธีมสว่าง ไม่งั้นแผ่นดำทับตัวหนังสือดำ = อ่านไม่ออก */
:root[data-theme="light"] .gh-jump,
:root[data-theme="light"] .gh-tools,
:root[data-theme="light"] .gh-cat{
  background:
    linear-gradient(180deg,#fff,#F7F5F0) padding-box,
    linear-gradient(150deg,rgba(190,150,60,.42),rgba(190,150,60,.10) 44%,rgba(0,0,0,.04)) border-box;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}

/* ระยะข้างในของแต่ละแผ่น — ทับ padding เดิมที่ตั้งไว้ตอนยังไม่มีกรอบ */
.gh-jump { padding:12px 12px 14px; margin-bottom:16px }
.gh-tools{ padding:12px;           margin-bottom:18px }
.gh-cat  { padding:16px 16px 18px; margin-bottom:22px }

/* hero: ถอด "เงาดำ" ออกให้เข้าชุดกับกรอบใหม่ */
.gh-hero{ box-shadow:none }

@media(max-width:520px){
  .gh-jump { padding:10px 10px 12px }
  .gh-tools{ padding:10px }
  .gh-cat  { padding:12px 12px 14px }
}