/* =============================================================
 *  ธีม PRIME — สไตล์ชีตหลัก
 * -------------------------------------------------------------
 *  ทุกสีมาจากตัวแปร 11 ตัวที่ตั้งได้จากหลังบ้าน
 *  ที่เหลือคำนวณต่อจาก 11 ตัวนั้นด้วย color-mix() ทั้งหมด
 *  -> แอดมินเปลี่ยนสีเดียว ทั้งเว็บขยับตามโดยไม่ต้องแก้ CSS
 * ============================================================= */

:root{
  /* ค่าสำรอง เผื่อ PHP ยังไม่ได้พ่นตัวแปรลงมา */
  --theme-color-1:#00434F; --theme-color-2:#000000;
  --theme-color-font:#FFFFFF; --theme-font-color-1:#FFFFFF;
  --primary-color-1:#D2B286; --primary-color-2:#806637; --primary-font-color:#FFFFFF;
  --secondary-color-1:#6CADAD; --secondary-color-2:#417D85; --secondary-font-color:#FFFFFF;
  --pv-radius:12px;
  --background-pc:none; --background-mobile:none;

  /* ---- สีที่คำนวณต่อ ----
     surface-2/3 เป็นสีโปร่ง ไม่ใช่สีทึบ -> พื้นหลังธีมทะลุขึ้นมาได้
     ทำให้ทุกกล่องกลืนไปกับพื้น ไม่เป็นแผ่นสี่เหลี่ยมลอยเป็นชั้น ๆ
     (ดีไซน์ต้นแบบใช้ rgba ดำโปร่งกับทุกชิ้น แทบไม่ใช้เส้นขอบเลย) */
  --pv-surface   : color-mix(in srgb, var(--theme-color-1) 55%, #000 45%);   /* เมนูลอย ต้องทึบ */
  --pv-surface-2 : rgba(0,0,0,.38);
  --pv-surface-3 : rgba(255,255,255,.07);
  --pv-line      : color-mix(in srgb, var(--theme-color-font) 9%, transparent);
  --pv-line-soft : color-mix(in srgb, var(--theme-color-font) 5%, transparent);
  --pv-muted     : color-mix(in srgb, var(--theme-color-font) 58%, transparent);
  --pv-grad-pri  : linear-gradient(180deg, var(--primary-color-1), var(--primary-color-2));
  --pv-grad-sec  : linear-gradient(180deg, var(--secondary-color-1), var(--secondary-color-2));
  --pv-glow      : color-mix(in srgb, var(--primary-color-1) 34%, transparent);
  /* พื้นผิวแบบ "กระจกดำ" — โปร่งให้พื้นหลังทะลุขึ้นมา ดูนุ่มกว่าการตีกรอบเส้น
     (ดีไซน์ต้นแบบใช้ rgba(0,0,0,.4) กับแทบทุกชิ้น ไม่ใช้เส้นขอบเลย) */
  --pv-glass     : rgba(0,0,0,.38);
  --pv-glass-2   : rgba(0,0,0,.55);
  --pv-hair      : color-mix(in srgb, var(--theme-color-font) 8%, transparent);
  --pv-ease      : .2s cubic-bezier(.4,0,.2,1);

  --pv-head-h : 62px;
  --pv-side-w : 252px;
  --pv-bnav-h : 62px;
}

/* ---------- พื้นฐาน ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{
  font-size:16px;
  background:linear-gradient(175deg, var(--theme-color-1) 0%, var(--theme-color-2) 78%) fixed;
  min-height:100%;
}
body{
  font-family:"Noto Sans Thai","Prompt","Kanit",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--theme-color-font);
  background:var(--background-mobile) center top / cover no-repeat fixed;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
@media (min-width:900px){ body{ background-image:var(--background-pc); } }
img{ max-width:100%; display:block; }
/* รูปในโซนที่ลากเลื่อนได้ — ห้ามกลายเป็นการลากไฟล์รูป (ghost image) เวลาคลิกค้างแล้วลาก */
.pv-prail img, .pv-rail img, .pv-game img, .pv-brand img, .pv-pv img{
  -webkit-user-drag:none; user-select:none; pointer-events:none;
}
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
.pv-ic{ flex:0 0 auto; }
::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:color-mix(in srgb, var(--theme-color-font) 16%, transparent); border-radius:8px; }
::-webkit-scrollbar-thumb:hover{ background:color-mix(in srgb, var(--primary-color-1) 55%, transparent); }

/* =============================================================
 *  แถบบน
 * ============================================================= */
.pv-header{
  position:fixed; inset:0 0 auto 0; height:var(--pv-head-h); z-index:60;
  display:flex; align-items:center; gap:10px; padding:0 12px;
  background:color-mix(in srgb, var(--theme-color-2) 78%, transparent);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:inset 0 -1px 0 var(--pv-line);
}
.pv-header__left{ display:flex; align-items:center; gap:10px; flex:0 0 auto; }
/* โลโก้ลูกค้ามีทั้งแบบจัตุรัสและแนวนอน — คุมทั้งสูงและกว้าง
   แล้วใช้ contain เพื่อไม่ให้ภาพถูกครอบตัด */
.pv-logo{ display:flex; align-items:center; height:100%; padding:6px 2px; }
.pv-logo img{ max-height:46px; max-width:170px; width:auto; height:auto; object-fit:contain; }
.pv-burger{
  width:38px; height:38px; display:none; align-items:center; justify-content:center;
  border-radius:10px; box-shadow:inset 0 0 0 1px var(--pv-line);
}
.pv-burger:hover{ background:var(--pv-surface-2); }

/* สวิตช์ หน้าหลัก / เล่นเกม — พื้น #0006 ตามต้นแบบ */
.pv-switch{
  position:relative; display:flex; align-items:center; height:38px; padding:3px;
  border-radius:10px; background:#0006;
}
.pv-switch a{
  position:relative; z-index:1; min-width:96px; height:32px; padding:0 14px;
  display:flex; align-items:center; justify-content:center;
  font-size:.9rem; font-weight:600; border-radius:9px; color:var(--pv-muted);
  transition:color .18s ease;
}
.pv-switch a.is-on{ color:var(--primary-font-color); }
.pv-switch__pill{
  position:absolute; top:3px; bottom:3px; border-radius:9px;
  background:var(--pv-grad-pri); box-shadow:0 4px 14px -6px var(--primary-color-2);
  transition:left .24s cubic-bezier(.4,0,.2,1), width .24s cubic-bezier(.4,0,.2,1);
}

/* กระเป๋าเงินบนหัว */
.pv-eco{
  margin-left:auto; display:flex; align-items:center; gap:6px;
  min-width:0; overflow:hidden;
}
.pv-eco__avatar{
  width:34px; height:34px; border-radius:50%; flex:0 0 auto;
  background:var(--pv-grad-sec); display:flex; align-items:center; justify-content:center;
  box-shadow:inset 0 0 0 1px var(--pv-line);
}
/* กล่องตัวเลขบนหัว — ตาม CSS ต้นแบบเป๊ะ: พื้นดำโปร่ง #0006 มุม 7px ไม่มีเส้นขอบ */
.pv-amt{
  display:flex; align-items:center; gap:7px; height:38px; padding:0 11px;
  border-radius:7px; background:#0006;
  white-space:nowrap;
}
.pv-amt__ic{ color:var(--accent-text, var(--primary-color-1)); display:flex; }
.pv-amt__val{ font-weight:700; font-size:.95rem; font-variant-numeric:tabular-nums; }
.pv-amt__re{ display:flex; color:var(--pv-muted); transition:color .18s, transform .4s; }
.pv-amt__re:hover{ color:var(--accent-text, var(--primary-color-1)); }
.pv-amt__re.is-spin{ animation:pv-spin .7s linear infinite; }
@keyframes pv-spin{ to{ transform:rotate(360deg); } }
.pv-amt--tip{ position:relative; }
.pv-amt--tip::after{
  content:attr(data-tip); position:absolute; top:calc(100% + 7px); left:50%; translate:-50% 0;
  padding:5px 10px; font-size:.74rem; white-space:nowrap; border-radius:8px;
  background:var(--pv-surface-3); box-shadow:inset 0 0 0 1px var(--pv-line);
  opacity:0; pointer-events:none; transition:opacity .16s;
}
.pv-amt--tip:hover::after{ opacity:1; }

.pv-hbtn{
  width:38px; height:38px; border-radius:11px; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  box-shadow:inset 0 0 0 1px var(--pv-line); background:var(--pv-surface-2);
  transition:background .18s, box-shadow .18s;
}
.pv-hbtn:hover{ background:var(--pv-surface); }
.pv-hbtn--pri{ background:var(--pv-grad-pri); color:var(--primary-font-color); box-shadow:0 5px 16px -7px var(--primary-color-2); }
.pv-hbtn--pri:hover{ filter:brightness(1.07); }

/* เมนูโปรไฟล์ */
.pv-pop{
  position:fixed; top:calc(var(--pv-head-h) + 6px); right:10px; width:246px; z-index:80;
  border-radius:calc(var(--pv-radius) + 3px); overflow:hidden;
  background:var(--pv-surface); box-shadow:inset 0 0 0 1px var(--pv-line), 0 22px 50px -20px #000;
  opacity:0; visibility:hidden; transform:translateY(-8px); transition:.18s ease;
}
.pv-pop.is-open{ opacity:1; visibility:visible; transform:none; }
.pv-pop__me{ display:flex; align-items:center; gap:10px; padding:13px 14px; box-shadow:inset 0 -1px 0 var(--pv-line); }
.pv-pop__ava{ width:38px; height:38px; border-radius:11px; background:var(--pv-grad-pri); display:flex; align-items:center; justify-content:center; color:var(--primary-font-color); }
.pv-pop__name{ font-weight:700; font-size:.92rem; line-height:1.25; word-break:break-all; }
.pv-pop__sub{ font-size:.74rem; color:var(--pv-muted); }
.pv-pop a{ display:flex; align-items:center; gap:11px; padding:11px 14px; font-size:.9rem; transition:background .15s; }
.pv-pop a:hover{ background:var(--pv-surface-3); }
.pv-pop a .pv-ic{ color:var(--pv-muted); }
.pv-pop a:hover .pv-ic{ color:var(--accent-text, var(--primary-color-1)); }
.pv-pop__out{ box-shadow:inset 0 1px 0 var(--pv-line); color:#ff8f9a; }

/* =============================================================
 *  เมนูซ้าย
 * ============================================================= */
/* เมนูซ้าย — ไล่เฉดสีธีมบน→ล่าง + เงารอบตัว ตามต้นแบบ */
.pv-side{
  position:fixed; top:var(--pv-head-h); bottom:0; left:0; width:var(--pv-side-w); z-index:55;
  display:flex; flex-direction:column; gap:10px; padding:14px 10px 24px;
  background:linear-gradient(180deg, var(--theme-color-1) 0%, var(--theme-color-2) 100%);
  box-shadow:0 0 4px 4px #00000040;
  overflow-y:auto; overscroll-behavior:contain;
  transition:transform .26s cubic-bezier(.4,0,.2,1);
}
/* ปุ่ม "เข้าเล่นเกม" — สีรองแบบเรียบ (ไม่ไล่เฉด) มุม 12px ตามต้นแบบ + ripple */
.pv-side__cta{
  position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center; gap:9px;
  height:46px; border-radius:12px; font-weight:700; font-size:1.05rem;
  background:var(--secondary-color-1); color:var(--secondary-font-color);
  transition:box-shadow .5s;
}
.pv-side__cta:hover{ box-shadow:0 0 10px #fff; }
.pv-side__cta::before{
  content:""; position:absolute; top:50%; left:50%; display:block;
  width:0; padding-top:0; border-radius:100%;
  background-color:#ecf0f14d; transform:translate(-50%,-50%);
}
.pv-side__cta:active::before{
  width:120%; padding-top:120%;
  transition:width .2s ease-out, padding-top .2s ease-out;
}
.pv-grp{ border-radius:var(--pv-radius); overflow:hidden; background:color-mix(in srgb, var(--theme-color-1) 26%, transparent); }
.pv-grp__hd{
  width:100%; display:flex; align-items:center; gap:10px; padding:11px 12px;
  font-weight:600; font-size:.92rem;
}
.pv-grp__hd .pv-ic:first-child{ color:var(--accent-text, var(--primary-color-1)); }
.pv-grp__chev{ margin-left:auto; color:var(--pv-muted); transition:transform .22s; }
.pv-grp.is-open .pv-grp__chev{ transform:rotate(90deg); }
.pv-grp__bd{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .24s ease; }
.pv-grp.is-open .pv-grp__bd{ grid-template-rows:1fr; }
.pv-grp__in{ overflow:hidden; }
.pv-nav a{
  display:flex; align-items:center; gap:11px; padding:10px 12px 10px 14px;
  font-size:.89rem; color:var(--pv-muted); border-radius:10px; margin:1px 6px;
  transition:background .15s, color .15s;
}
.pv-nav a .pv-ic{ opacity:.85; }
.pv-nav a:hover{ background:var(--pv-surface-3); color:var(--theme-color-font); }
.pv-nav a.is-on{ background:var(--pv-surface-3); color:var(--accent-text, var(--primary-color-1)); }
.pv-side__foot{ margin-top:auto; padding-top:8px; }
.pv-side__foot a{
  display:flex; align-items:center; gap:11px; padding:11px 12px; margin:2px 0;
  border-radius:var(--pv-radius); font-size:.89rem; color:var(--pv-muted);
  box-shadow:inset 0 0 0 1px var(--pv-line-soft); transition:.15s;
}
.pv-side__foot a:hover{ color:var(--theme-color-font); background:var(--pv-surface-3); }

.pv-scrim{
  position:fixed; inset:0; z-index:54; background:rgba(0,0,0,.55);
  opacity:0; visibility:hidden; transition:.22s;
}
.pv-scrim.is-on{ opacity:1; visibility:visible; }

/* =============================================================
 *  พื้นที่เนื้อหา
 * ============================================================= */
.pv-main{
  padding:calc(var(--pv-head-h) + 14px) 16px calc(var(--pv-bnav-h) + 28px);
  margin-left:var(--pv-side-w);
  max-width:1680px;
  transition:margin-left .26s cubic-bezier(.4,0,.2,1);
}
body.pv-side-off .pv-side{ transform:translateX(-100%); }
body.pv-side-off .pv-main{ margin-left:0; }

/* ประกาศวิ่ง */
.pv-marquee{
  display:flex; align-items:center; gap:10px; height:36px; margin-bottom:14px;
  padding:0 12px; border-radius:var(--pv-radius); overflow:hidden;
  background:var(--pv-surface-2); box-shadow:inset 0 0 0 1px var(--pv-line-soft);
  font-size:.85rem;
}
.pv-marquee__ic{ color:var(--accent-text, var(--primary-color-1)); flex:0 0 auto; }
.pv-marquee__tr{ flex:1; overflow:hidden; }
.pv-marquee__tx{ display:inline-block; white-space:nowrap; padding-left:100%; animation:pv-mq 26s linear infinite; }
@keyframes pv-mq{ to{ transform:translateX(-100%); } }

/* หัวข้อส่วน */
.pv-sec{ margin:22px 0 12px; display:flex; align-items:center; gap:10px; }
.pv-sec__ic{
  width:34px; height:34px; border-radius:10px; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  background:var(--pv-surface-3); color:var(--accent-text, var(--primary-color-1));
  box-shadow:inset 0 0 0 1px var(--pv-line);
}
/* ดัน "ทุกอย่างหลังชื่อหัวข้อ" ไปชิดขวา — วิธีนี้ได้ผลทั้งกรณีมีลูกศรและไม่มี */
.pv-sec__t{ font-size:1.06rem; font-weight:700; margin:0 auto 0 0; }
.pv-sec__nav{ display:flex; gap:6px; }
.pv-sec__more{
  font-size:.83rem; color:var(--pv-muted); white-space:nowrap;
  display:flex; align-items:center; gap:4px; transition:color .15s;
}
.pv-sec__more:hover{ color:var(--accent-text, var(--primary-color-1)); }
.pv-arrow{
  width:32px; height:32px; border-radius:9px; display:flex; align-items:center; justify-content:center;
  background:var(--pv-surface-2); color:var(--pv-muted);
  box-shadow:inset 0 0 0 1px var(--pv-line); transition:.15s;
}
.pv-arrow:hover{ color:var(--accent-text, var(--primary-color-1)); background:var(--pv-surface-3); }
.pv-arrow[disabled]{ opacity:.32; pointer-events:none; }

/* แถบเลื่อนแนวนอน */
.pv-rail{
  display:flex; gap:10px; overflow-x:auto; scroll-behavior:smooth;
  scrollbar-width:none; -ms-overflow-style:none; padding:2px 0 6px;
  scroll-snap-type:x proximity;
}
.pv-rail::-webkit-scrollbar{ display:none; }
.pv-rail > *{ flex:0 0 auto; scroll-snap-align:start; }

/* แบนเนอร์สไลด์ — จอใหญ่เห็นทีละ 2 ใบ มือถือ 1 ใบ เลื่อน/หมุนอัตโนมัติ */
.pv-banners{
  display:flex; gap:12px; overflow-x:auto; scroll-behavior:smooth;
  scroll-snap-type:x mandatory; scrollbar-width:none; -ms-overflow-style:none;
  touch-action:pan-x pan-y;
}
.pv-banners::-webkit-scrollbar{ display:none; }
.pv-banners .pv-banner{
  flex:0 0 100%; scroll-snap-align:start;
}
@media (min-width:760px){
  .pv-banners .pv-banner{ flex:0 0 calc(50% - 6px); }
}
/* มีใบเดียว -> ไม่ต้องสไลด์ กินเต็มความกว้าง */
.pv-banners--one .pv-banner{ flex:0 0 100%; aspect-ratio:16/5; }
.pv-banner{
  border-radius:calc(var(--pv-radius) + 2px); overflow:hidden; position:relative;
  box-shadow:inset 0 0 0 1px var(--pv-line), 0 12px 30px -18px #000;
  aspect-ratio:16/6.4; background:var(--pv-surface-2);
}
.pv-banner img{ width:100%; height:100%; object-fit:cover; }
/* รูปแบนเนอร์ที่โหลดไม่ขึ้น (ลิงก์เสีย) จะเหลือกล่องว่างโบ๋ — ซ่อนทั้งใบไปเลย */
.pv-banner.is-broken{ display:none; }

/* การ์ดค่ายเกม
   ต้นแบบเขาใช้ "ภาพโปสเตอร์" ของค่ายเลยวางเป็นการ์ดแนวตั้งได้สวย
   ของเราไม่มีภาพโปสเตอร์ มีแต่ไฟล์โลโก้แนวนอน -> ใช้การ์ดแนวนอนแทน
   โลโก้จะเต็มพื้นที่พอดี ไม่เหลือช่องว่างบน-ล่างเป็นกล่องโหว ๆ */
.pv-brand{ width:158px; text-align:center; }
.pv-brand__box{
  position:relative; aspect-ratio:16/9.4; border-radius:calc(var(--pv-radius) + 2px);
  overflow:hidden;
  background:linear-gradient(150deg, rgba(255,255,255,.09), rgba(0,0,0,.34));
  box-shadow:inset 0 0 0 1px var(--pv-line);
  transition:transform var(--pv-ease), box-shadow var(--pv-ease);
  display:flex; align-items:center; justify-content:center;
}
.pv-brand img{
  position:relative; z-index:2;
  max-width:100%; max-height:100%; width:auto; height:auto;
  object-fit:contain; padding:13px 15px;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.5));
}
/* ชื่อค่ายสำรอง — โชว์ระหว่างรอรูป แล้วซ่อนทิ้งเมื่อรูปมาแล้ว */
.pv-brand__fb{
  position:absolute; inset:0; z-index:1;
  display:flex; align-items:center; justify-content:center; padding:8px;
  font-size:.82rem; font-weight:700; text-align:center; line-height:1.25;
  color:var(--pv-muted); letter-spacing:.3px;
  transition:opacity var(--pv-ease);
}
.pv-brand__box.is-ready .pv-brand__fb{ opacity:0; }
.pv-brand:hover .pv-brand__box{
  transform:scale(1.045);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--primary-color-1) 70%, transparent),
             0 14px 28px -16px rgba(0,0,0,.8);
}
.pv-brand__n{ margin-top:8px; font-size:.84rem; font-weight:600; letter-spacing:.2px; }

/* ชิปหมวด — เกินความกว้างให้ตกลงบรรทัดถัดไป ไม่ใช้แถบเลื่อนแนวนอน
   เหตุผล: แถบเลื่อนทำให้หมวดท้าย ๆ (เช่น หวย) ถูกซ่อนอยู่นอกจอ ลูกค้าไม่รู้ว่ามี */
.pv-chips{ display:flex; flex-wrap:wrap; gap:9px; padding:2px 0 4px; }
.pv-chip{
  flex:1 1 auto; min-width:92px; max-width:none; padding:11px 14px 9px;
  display:flex; flex-direction:column; align-items:center; gap:5px;
  border-radius:var(--pv-radius); background:var(--pv-glass); color:var(--pv-muted);
  font-size:.83rem; font-weight:600;
  transition:background var(--pv-ease), color var(--pv-ease), box-shadow var(--pv-ease);
}
.pv-chip:hover{ color:var(--theme-color-font); background:var(--pv-glass-2); }
.pv-chip.is-on{
  background:var(--pv-grad-pri); color:var(--primary-font-color);
  box-shadow:0 8px 20px -12px var(--primary-color-2);
}

/* การ์ดเกม */
.pv-grid{
  display:grid; gap:10px;
  grid-template-columns:repeat(auto-fill, minmax(104px, 1fr));
}
@media (min-width:600px){ .pv-grid{ grid-template-columns:repeat(auto-fill, minmax(124px,1fr)); gap:12px; } }
@media (min-width:1100px){ .pv-grid{ grid-template-columns:repeat(auto-fill, minmax(142px,1fr)); } }
@media (min-width:1500px){ .pv-grid{ grid-template-columns:repeat(auto-fill, minmax(158px,1fr)); } }

/* การ์ดเกม
   ชื่อเกมวางทับในรูปด้วยแถบไล่เฉดดำจาง ๆ ไม่ตีกรอบ ไม่ทำเป็นป้ายแยก
   -> ขอบการ์ดสะอาด ไม่มีเส้นตัด และการ์ดเตี้ยลง เห็นเกมต่อหน้าจอมากขึ้น */
.pv-game{ position:relative; display:block; touch-action:manipulation; }
.pv-game:active .pv-game__box{ transform:scale(.97); }
/* จอสัมผัสไม่มี hover — ม่าน "เล่นเลย" จะกินการแตะครั้งแรก (แตะแรกเป็น hover แตะสองถึงเข้า)
   ปิดม่านไปเลย แตะเดียวเข้าเกมทันที (คุมด้วยชนิดอุปกรณ์ ไม่ใช่ความกว้างจอ — กัน iPad ตกหล่น) */
@media (hover:none){
  .pv-game__play{ display:none !important; }
}
.pv-game__box{
  position:relative; aspect-ratio:1/1.38; border-radius:var(--pv-radius); overflow:hidden;
  background:var(--pv-glass);
  transition:transform var(--pv-ease), box-shadow var(--pv-ease);
}
.pv-game__box img{ width:100%; height:100%; object-fit:cover; display:block; }
/* การ์ดที่ใช้ "โลโก้ค่าย" แทนภาพเกม (หวย · กีฬา)
   โลโก้เป็นภาพจัตุรัสมีพื้นที่ว่างรอบตัว ถ้า cover จะถูกครอบตัดจนตัวหนังสือหาย
   -> ใช้ contain + เว้นขอบ + วางกลาง และเว้นที่ด้านล่างให้แถบชื่อไม่ทับโลโก้ */
.pv-game--logo .pv-game__box{
  background:linear-gradient(160deg, var(--pv-glass-2), var(--pv-glass));
}
.pv-game--logo .pv-game__box img{
  object-fit:contain; padding:16% 14% 26%;
}
.pv-game:hover .pv-game__box{
  transform:scale(1.045);
  box-shadow:0 12px 26px -14px rgba(0,0,0,.85);
}
/* แถบชื่อเกม — สูตรไล่เฉดเดียวกับต้นแบบ: โปร่งบน → #000c ตั้งแต่ 20.51% */
.pv-game__n{
  position:absolute; left:0; right:0; bottom:0; z-index:1;
  margin:0; padding:14px 8px 6px;
  font-size:.76rem; font-weight:600; text-align:center; line-height:1.3;
  color:#fff;
  background:linear-gradient(180deg, #00163c00, #000c 20.51%);
  border-radius:0 0 var(--pv-radius) var(--pv-radius);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.pv-game__tag{
  position:absolute; top:6px; left:6px; z-index:2; padding:2px 7px; border-radius:7px;
  font-size:.65rem; font-weight:700; letter-spacing:.3px;
  background:var(--pv-grad-sec); color:var(--secondary-font-color);
}
.pv-game__tag--new{ background:linear-gradient(180deg,#57d97e,#25914b); color:#04180c; }
/* hover การ์ดเกม — ตาม CSS ต้นแบบ: ม่านดำ #000000bf เลื่อนขึ้นจากล่าง .4s
   ข้างในมีปุ่ม "เล่นเลย" ลอยกลาง (ต้นแบบใช้ .overlay-page-game top:100% -> 0) */
.pv-game__play{
  position:absolute; top:100%; left:0; width:100%; height:100%; z-index:2;
  display:flex; align-items:center; justify-content:center;
  background:#000000bf; border-radius:var(--pv-radius);
  transition:top .4s; overflow:hidden;
  font-size:0;                       /* ซ่อนข้อความดิบ ใช้ป้ายด้านใน */
}
.pv-game__play::after{
  content:"เล่นเลย";
  font-size:.8rem; font-weight:700;
  padding:8px 20px; border-radius:9px;
  background:var(--pv-grad-pri); color:var(--primary-font-color);
}
.pv-game:hover .pv-game__play{ top:0; }
/* มีม่านทับแล้ว ไม่ต้องขยายการ์ดอีก (ต้นแบบไม่ scale ตัวการ์ดในหน้า game) */
.pv-game:hover .pv-game__box{ transform:none; box-shadow:0 10px 22px -14px rgba(0,0,0,.8); }

/* รางค่ายแนวตั้ง (ล็อบบี้) */
.pv-lobby{ display:grid; grid-template-columns:76px 1fr; gap:12px; align-items:start; }
@media (min-width:760px){ .pv-lobby{ grid-template-columns:96px 1fr; gap:14px; } }
.pv-prail{
  position:sticky; top:calc(var(--pv-head-h) + 12px);
  max-height:calc(100vh - var(--pv-head-h) - 30px);
  display:flex; flex-direction:column; gap:6px; padding:6px;
  border-radius:var(--pv-radius); background:color-mix(in srgb, var(--theme-color-2) 62%, transparent);
  box-shadow:inset 0 0 0 1px var(--pv-line-soft);
  overflow-y:auto; scrollbar-width:none;
}
.pv-prail::-webkit-scrollbar{ display:none; }
.pv-pv{
  flex:0 0 auto; height:52px; border-radius:10px; overflow:hidden; position:relative;
  display:flex; align-items:center; justify-content:center; padding:5px;
  background:var(--pv-surface-2); box-shadow:inset 0 0 0 1px var(--pv-line-soft);
  transition:.16s;
}
@media (min-width:760px){ .pv-pv{ height:60px; } }
.pv-pv img{ max-height:100%; max-width:100%; width:auto; object-fit:contain; }
.pv-pv__t{ font-size:.68rem; font-weight:700; text-align:center; line-height:1.1; color:var(--pv-muted); }
.pv-pv:hover{ background:var(--pv-surface-3); box-shadow:inset 0 0 0 1px var(--pv-line); }
.pv-pv.is-on{ box-shadow:inset 0 0 0 1.6px var(--primary-color-1), 0 6px 16px -10px var(--pv-glow); background:var(--pv-surface-3); }
.pv-pv.is-on .pv-pv__t{ color:var(--accent-text, var(--primary-color-1)); }

/* breadcrumb + ค้นหา */
.pv-bar{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:14px 0 12px; }
.pv-crumb{ display:flex; align-items:center; gap:7px; font-size:.95rem; font-weight:700; }
.pv-crumb span{ color:var(--pv-muted); font-weight:500; }
.pv-crumb b{ color:var(--accent-text, var(--primary-color-1)); }
.pv-search{
  margin-left:auto; display:flex; align-items:center; gap:8px; height:40px; padding:0 13px;
  border-radius:calc(var(--pv-radius) - 1px); min-width:200px;
  background:var(--pv-surface-2); box-shadow:inset 0 0 0 1px var(--pv-line);
}
.pv-search input{
  flex:1; min-width:0; border:0; background:none; outline:none;
  color:var(--theme-color-font); font-size:.9rem;
}
.pv-search input::placeholder{ color:var(--pv-muted); }
.pv-search .pv-ic{ color:var(--pv-muted); }

/* สถานะ */
.pv-empty{
  padding:44px 20px; text-align:center; color:var(--pv-muted); font-size:.92rem;
  border-radius:var(--pv-radius); background:var(--pv-surface-2);
  box-shadow:inset 0 0 0 1px var(--pv-line-soft);
}
.pv-more{ display:flex; justify-content:center; margin:20px 0 4px; }
/* ปุ่ม — เอฟเฟกต์ตาม CSS ต้นแบบเป๊ะ:
   hover = เรืองแสงขาว 0 0 10px (ไม่ยกปุ่ม ไม่เปลี่ยนสี)
   กด   = คลื่นวงกลมกระเพื่อมจากกลางปุ่ม (ripple ด้วย ::before) */
.pv-btn{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:44px; padding:0 26px; border-radius:10px; font-weight:700; font-size:.94rem;
  background:var(--pv-grad-pri); color:var(--primary-font-color);
  transition:box-shadow .5s;
}
.pv-btn:hover{ box-shadow:0 0 10px #fff; }
.pv-btn::before{
  content:""; position:absolute; top:50%; left:50%; display:block;
  width:0; padding-top:0; border-radius:100%;
  background-color:#ecf0f14d; transform:translate(-50%,-50%);
}
.pv-btn:active::before{
  width:120%; padding-top:120%;
  transition:width .2s ease-out, padding-top .2s ease-out;
}
.pv-btn--ghost{ background:var(--pv-surface-2); color:var(--theme-color-font); box-shadow:inset 0 0 0 1px var(--pv-line); }
.pv-btn--ghost:hover{ box-shadow:inset 0 0 0 1px var(--pv-line), 0 0 10px #fff9; }
.pv-btn--sec{ background:var(--pv-grad-sec); color:var(--secondary-font-color); }
.pv-btn[disabled]{ opacity:.7; pointer-events:none; }
.pv-btn[disabled]::before{ display:none; }

.pv-skel{ position:relative; overflow:hidden; background:var(--pv-surface-2); }
.pv-skel::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--theme-color-font) 8%, transparent), transparent);
  animation:pv-sh 1.2s infinite;
}
@keyframes pv-sh{ to{ transform:translateX(100%); } }

/* =============================================================
 *  หน้าหลัก — การ์ดยอดเงิน + เมนูไอคอน
 * ============================================================= */
.pv-hero{
  display:grid; gap:12px; grid-template-columns:1fr; margin-bottom:6px;
}
@media (min-width:880px){ .pv-hero{ grid-template-columns:minmax(0,340px) 1fr; align-items:stretch; } }
.pv-wallet{
  padding:16px 18px; border-radius:calc(var(--pv-radius) + 4px);
  background:linear-gradient(150deg, color-mix(in srgb, var(--theme-color-1) 88%, #fff 12%), var(--pv-surface-2));
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--primary-color-1) 30%, transparent), 0 16px 36px -22px #000;
}
.pv-wallet__lb{ font-size:.8rem; color:var(--pv-muted); display:flex; align-items:center; gap:7px; }
.pv-wallet__v{
  margin:4px 0 2px; font-size:1.9rem; font-weight:800; line-height:1.1;
  color:var(--accent-text, var(--primary-color-1)); font-variant-numeric:tabular-nums; word-break:break-all;
}
.pv-wallet__u{ font-size:.8rem; color:var(--pv-muted); display:flex; align-items:center; gap:6px; }
.pv-wallet__u b{ color:var(--theme-color-font); font-weight:600; }
.pv-wallet__act{ display:flex; gap:9px; margin-top:14px; }
.pv-wallet__act .pv-btn{ flex:1; height:42px; padding:0 10px; font-size:.9rem; }

.pv-quick{ display:grid; grid-template-columns:repeat(4,1fr); gap:9px; }
@media (min-width:520px){ .pv-quick{ grid-template-columns:repeat(4,1fr); } }
@media (min-width:880px){ .pv-quick{ grid-template-columns:repeat(4,1fr); align-content:start; } }
.pv-q{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px;
  padding:14px 6px; border-radius:var(--pv-radius); text-align:center;
  background:var(--pv-surface-2); box-shadow:inset 0 0 0 1px var(--pv-line);
  font-size:.78rem; font-weight:600; color:var(--pv-muted); transition:.18s;
}
.pv-q .pv-ic{ color:var(--accent-text, var(--primary-color-1)); transition:transform var(--pv-ease); }
.pv-q:hover{
  color:var(--theme-color-font); background:var(--pv-surface-3);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--primary-color-1) 45%, transparent);
}
.pv-q:hover .pv-ic{ transform:scale(1.12); }

/* สลิปถอน / รีวิว */
.pv-slip{
  width:214px; padding:13px 14px; border-radius:var(--pv-radius);
  background:var(--pv-surface-2); box-shadow:inset 0 0 0 1px var(--pv-line-soft);
}
.pv-slip__u{ font-weight:700; font-size:.9rem; }
.pv-slip__d{ font-size:.72rem; color:var(--pv-muted); margin-top:2px; }
.pv-slip__a{ margin-top:8px; font-size:1.24rem; font-weight:800; color:var(--accent-text, var(--primary-color-1)); }
.pv-slip__g{ margin-top:6px; font-size:.73rem; color:var(--pv-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* footer */
.pv-foot{ margin-top:34px; padding-top:20px; box-shadow:inset 0 1px 0 var(--pv-line-soft); }
.pv-foot__t{ font-size:.82rem; font-weight:700; color:var(--pv-muted); margin:0 0 10px; }
.pv-foot__logos{ display:flex; flex-wrap:wrap; gap:8px; }
.pv-foot__logos span{
  height:34px; min-width:64px; padding:5px 9px; border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  background:var(--pv-surface-2); box-shadow:inset 0 0 0 1px var(--pv-line-soft);
  font-size:.68rem; font-weight:700; color:var(--pv-muted);
}
.pv-foot__logos img{ max-height:24px; width:auto; }
.pv-foot__cr{ margin-top:18px; font-size:.75rem; color:var(--pv-muted); text-align:center; }

/* =============================================================
 *  หน้าก่อนล็อกอิน — ปุ่มหัวเว็บ + โมดัลล็อกอิน
 * ============================================================= */
.pv-gbtn{ height:38px; padding:0 18px; font-size:.9rem; white-space:nowrap; }

.pv-auth{
  position:fixed; inset:0; z-index:90; display:flex; align-items:center; justify-content:center;
  padding:16px; background:rgba(0,0,0,.66);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  opacity:0; visibility:hidden; transition:opacity .22s, visibility .22s;
}
.pv-auth.is-open{ opacity:1; visibility:visible; }
.pv-auth__card{
  position:relative; width:100%; max-width:400px; padding:26px 24px 22px;
  border-radius:calc(var(--pv-radius) + 8px);
  background:linear-gradient(180deg, var(--pv-surface), color-mix(in srgb, var(--theme-color-2) 88%, transparent));
  box-shadow:inset 0 0 0 1px var(--pv-line), 0 30px 80px -30px #000;
  display:flex; flex-direction:column; gap:11px;
  transform:translateY(14px) scale(.98); transition:transform .22s;
}
.pv-auth.is-open .pv-auth__card{ transform:none; }
.pv-auth__x{
  position:absolute; top:10px; right:10px; width:34px; height:34px;
  display:flex; align-items:center; justify-content:center;
  border-radius:9px; color:var(--pv-muted); transform:rotate(45deg);
  transition:color .15s, background .15s;
}
.pv-auth__x:hover{ color:#fff; background:var(--pv-surface-3); }
.pv-auth__logo{ max-height:56px; width:auto; margin:0 auto 2px; object-fit:contain; }
.pv-auth__t{
  margin:0 0 6px; text-align:center; font-size:1.35rem; font-weight:800;
  background:linear-gradient(180deg, var(--theme-color-font), var(--primary-color-1));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.pv-auth__in{
  width:100%; height:50px; padding:0 16px; border:0; outline:none;
  border-radius:var(--pv-radius); font-size:1rem; text-align:center;
  background:var(--pv-surface-3); color:var(--theme-color-font);
  box-shadow:inset 0 0 0 1px var(--pv-line);
}
.pv-auth__in:focus{ box-shadow:inset 0 0 0 1.5px var(--primary-color-1); }
.pv-auth__in::placeholder{ color:var(--pv-muted); }
.pv-auth__pw{ position:relative; }
.pv-auth__eye{
  position:absolute; top:50%; right:10px; translate:0 -50%;
  width:32px; height:32px; display:flex; align-items:center; justify-content:center;
  color:var(--pv-muted); border-radius:8px;
}
.pv-auth__eye:hover{ color:var(--theme-color-font); }
.pv-auth__go{ width:100%; height:48px; }
.pv-auth__sel{ text-align-last:center; appearance:none; -webkit-appearance:none; cursor:pointer; }
.pv-auth__sel option{ color:#111; }
/* โมดัลสมัคร: จัดการหลายสเต็ป */
.pv-auth__card--reg{ max-width:420px; max-height:92vh; overflow-y:auto; }
.pv-reg__lb{ font-size:.82rem; color:var(--pv-muted); align-self:flex-start; margin:2px 0 -4px; }
.pv-reg__lb small{ opacity:.8; }
.pv-reg__pane{ display:flex; flex-direction:column; gap:11px; }
/* display:flex ทับ [hidden] ของเบราว์เซอร์ — ต้องบังคับซ่อนเอง ไม่งั้นทุกสเต็ปโผล่พร้อมกัน */
.pv-reg__pane[hidden]{ display:none !important; }
.pv-reg__row{ display:flex; gap:10px; }
.pv-reg__row .pv-auth__go{ flex:1; }
.pv-reg__steps{
  display:flex; align-items:center; justify-content:center; gap:0; margin:2px 0 6px;
}
.pv-reg__steps span{
  width:30px; height:30px; flex:0 0 auto; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.9rem;
  background:var(--pv-surface-3); color:var(--pv-muted);
  box-shadow:inset 0 0 0 1px var(--pv-line);
}
.pv-reg__steps i{ width:34px; height:2px; background:var(--pv-line); }
.pv-reg__steps span.is-on{ background:var(--pv-grad-pri); color:var(--primary-font-color); box-shadow:none; }
.pv-reg__steps span.is-done{ background:color-mix(in srgb, var(--primary-color-1) 30%, transparent); color:var(--theme-color-font); }
.pv-auth__help{ text-align:center; font-size:.82rem; color:var(--pv-muted); margin-top:2px; }
.pv-auth__help:hover{ color:var(--accent-text, var(--primary-color-1)); }
/* กัน autofill ของ Chrome ทาพื้นขาวในโมดัล */
.pv-auth__in:-webkit-autofill,
.pv-auth__in:-webkit-autofill:hover,
.pv-auth__in:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--theme-color-font);
  -webkit-box-shadow:inset 0 0 0 1000px var(--pv-surface-3);
  caret-color:var(--theme-color-font);
  transition:background-color 9999s ease-out 0s;
}
@media (max-width:719px){
  .pv-gbtn{ height:34px; padding:0 12px; font-size:.8rem; }
  .pv-auth__card{ max-width:360px; padding:22px 18px 18px; }
}

/* =============================================================
 *  แถบล่าง (มือถือ)
 * ============================================================= */
.pv-bnav{
  position:fixed; inset:auto 0 0 0; height:var(--pv-bnav-h); z-index:58; display:none;
  background:color-mix(in srgb, var(--theme-color-2) 88%, transparent);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:inset 0 1px 0 var(--pv-line);
  padding-bottom:env(safe-area-inset-bottom);
}
.pv-bnav ul{ display:flex; margin:0; padding:0; list-style:none; height:100%; }
.pv-bnav li{ flex:1; }
.pv-bnav a{
  height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  font-size:.68rem; color:var(--pv-muted); transition:color .15s;
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
}
.pv-bnav a.is-on{ color:var(--accent-text, var(--primary-color-1)); }
.pv-bnav__fab{ position:relative; }
/* วงกลมทองอยู่ในลิงก์ — ยื่นพ้นแถบขึ้นไป แตะได้ทั้งวง */
.pv-bnav__fab .pv-bnav__c{
  position:absolute; top:-19px; left:50%; translate:-50% 0;
  width:52px; height:52px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--pv-grad-pri); color:var(--primary-font-color);
  box-shadow:0 10px 24px -10px var(--primary-color-2), inset 0 0 0 3px color-mix(in srgb, var(--theme-color-2) 80%, transparent);
}
.pv-bnav__fab a{ padding-top:26px; position:relative; }
.pv-bnav__fab a:active .pv-bnav__c{ transform:scale(.94); }

/* =============================================================
 *  จอเล็ก
 * ============================================================= */
@media (max-width:1023px){
  .pv-burger{ display:flex; }
  .pv-side{
    width:min(82vw, 300px);
    transform:translateX(-100%);
    box-shadow:inset -1px 0 0 var(--pv-line), 14px 0 40px -14px #000;
    padding-bottom:calc(24px + env(safe-area-inset-bottom));
  }
  body.pv-side-open .pv-side{ transform:none; }
  /* เปิดเมนูอยู่แล้วเลื่อนหน้าหลังไปด้วย จะงงว่าอ่านอะไรอยู่ — ล็อกไว้ก่อน */
  body.pv-side-open{ overflow:hidden; }
  .pv-main{ margin-left:0 !important; }
  .pv-bnav{ display:block; }
  .pv-switch a{ min-width:76px; padding:0 10px; font-size:.84rem; }
}

@media (max-width:719px){
  :root{ --pv-head-h:56px; --pv-bnav-h:58px; }
  .pv-header{ padding:0 8px; gap:6px; }
  .pv-logo{ padding:5px 0; }
  .pv-logo img{ max-height:34px; max-width:112px; }
  .pv-switch{ display:none; }

  /* แถบเครดิตบนหัว — พื้นที่มีจำกัด ตัดของรองออก เหลือเฉพาะที่ต้องเห็นจริง */
  .pv-eco{ gap:4px; }
  .pv-amt{ height:34px; padding:0 9px; gap:5px; }
  .pv-amt__val{ font-size:.88rem; }
  .pv-amt--hide-sm{ display:none; }
  .pv-eco__avatar{ display:none; }
  .pv-hbtn{ width:34px; height:34px; }
  .pv-pop{ right:8px; left:8px; width:auto; }

  .pv-main{ padding-left:10px; padding-right:10px; }
  .pv-marquee{ height:32px; font-size:.8rem; }

  .pv-wallet{ padding:14px 15px; }
  .pv-wallet__v{ font-size:1.65rem; }
  .pv-wallet__act .pv-btn{ height:44px; font-size:.88rem; }
  .pv-quick{ grid-template-columns:repeat(4,1fr); gap:7px; }
  .pv-q{ padding:11px 3px; font-size:.7rem; gap:5px; }
  .pv-q .pv-ic{ width:21px; height:21px; }

  .pv-sec{ margin:18px 0 10px; gap:8px; }
  .pv-sec__ic{ width:30px; height:30px; }
  .pv-sec__t{ font-size:.98rem; }
  .pv-sec__nav{ display:none; }          /* มือถือปัดนิ้วเอา ไม่ต้องมีลูกศร */
  .pv-brand{ width:136px; }
  .pv-brand img{ padding:10px 12px; }
  .pv-brand__n{ font-size:.78rem; margin-top:6px; }
  .pv-slip{ width:180px; }
  .pv-chip{ min-width:0; padding:9px 10px 8px; font-size:.76rem; }
  .pv-chip .pv-ic{ width:21px; height:21px; }

  .pv-bar{ gap:9px; margin:12px 0 10px; }
  .pv-search{ margin-left:0; width:100%; height:38px; }
  .pv-crumb{ font-size:.88rem; }

  /* มือถือ: ย้ายรางค่ายจากคอลัมน์ซ้ายมาเป็นแถบเลื่อนแนวนอนด้านบน
     คอลัมน์ซ้ายกินความกว้างไปเยอะ เหลือให้กริดไม่พอ การ์ดเลยดูใหญ่เทอะทะ
     touch-action:pan-x = ปัดแนวนอนเลื่อนรางแน่นอน ไม่โดนหน้าแย่งไปเลื่อนขึ้นลง */
  .pv-lobby{ display:block; }
  /* touch-action:none = ปิดตัวจัดการ gesture ของเบราว์เซอร์บนรางนี้
     แล้วใช้ตัวลากของเราเอง (ใน lobby.php) คุมทั้งนิ้วและเมาส์ — ผลเหมือนกันทุกเครื่อง */
  .pv-prail{
    position:static; flex-direction:row; max-height:none;
    overflow-x:auto; overflow-y:hidden; margin-bottom:10px; padding:6px; gap:7px;
    touch-action:none; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain;
  }
  /* ชิปหมวดบนมือถือ: แถวละ 3 ใบเท่า ๆ กัน เกินแล้วตกบรรทัดเอง
     (6 หมวด = 2 แถวพอดี ไม่มีหมวดไหนหลุดออกนอกจอ) */
  .pv-chips{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; }
  .pv-chip{ min-width:0; padding:10px 6px 8px; font-size:.78rem; }

  .pv-pv{ height:54px; min-width:96px; padding:7px 12px; }
  .pv-pv .pv-pv__t{ font-size:.8rem; }
  .pv-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; }
  .pv-game__n{ font-size:.68rem; padding:10px 5px 4px; }
  .pv-game__play{ display:none; }        /* ไม่มี hover บนมือถือ */

  .pv-foot__logos span{ height:30px; min-width:56px; }
}

/* จอเล็กมาก (iPhone SE ฯลฯ) */
@media (max-width:389px){
  .pv-logo img{ max-width:92px; }
  .pv-amt{ padding:0 7px; }
  .pv-quick{ grid-template-columns:repeat(3,1fr); }
  .pv-grid{ gap:7px; }
}