/* custom.css — Theme Mos v4 "Private Club" (โหมด + CSS)
   ────────────────────────────────────────────────────────────────
   ตรงกับ Figma "Theme Mos — UFA Luxe" หน้า v4 · ใช้คู่กับ theme.css
   กติกา: เลย์เอาต์ห้ามเปลี่ยน — ไม่แตะ width/height/margin/padding/grid/position ของกล่อง
          ปรับได้แค่ ฟอนต์ สี มุมโค้ง เส้นขอบ (ไม่เปลี่ยนความหนาที่กินพื้นที่) เงา พื้นผิว รูปพื้นหลังในกล่องเดิม
          ยกเว้นระยะเมนู desktop ใน P2 และระยะท้ายหน้า/ท้ายเว็บใน P13 ตามคำขอผู้ใช้ 26 ต.ค. 2026
   ทุกกฎขึ้นต้น html เพื่อชนะ CSS ระบบ · แบ่งบล็อก P0–P15 ลบทั้งบล็อกได้อิสระ
   ขึ้นเว็บจริง: ไฟล์ฟอนต์ (fonts/) และรูป (../assets/images/) ต้องอัปโหลดไว้ที่ฝากไฟล์ แล้วเปลี่ยน url เป็นลิงก์เต็ม */

/* ── P0 ฟอนต์ + ตัวแปร ─────────────────────────────────────────── */
@font-face { font-family: 'Cormorant Garamond'; font-weight: 400; font-display: swap; src: url('fonts/cormorant-garamond-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-weight: 500; font-display: swap; src: url('fonts/cormorant-garamond-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-weight: 600; font-display: swap; src: url('fonts/cormorant-garamond-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 300; font-display: swap; src: url('fonts/inter-latin-300-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 400; font-display: swap; src: url('fonts/inter-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 500; font-display: swap; src: url('fonts/inter-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 600; font-display: swap; src: url('fonts/inter-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Noto Sans Thai'; font-weight: 300; font-display: swap; src: url('fonts/noto-sans-thai-thai-300-normal.woff2') format('woff2'); unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: 'Noto Sans Thai'; font-weight: 400; font-display: swap; src: url('fonts/noto-sans-thai-thai-400-normal.woff2') format('woff2'); unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: 'Noto Sans Thai'; font-weight: 500; font-display: swap; src: url('fonts/noto-sans-thai-thai-500-normal.woff2') format('woff2'); unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: 'Noto Sans Thai'; font-weight: 600; font-display: swap; src: url('fonts/noto-sans-thai-thai-600-normal.woff2') format('woff2'); unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC; }
html {
  --pc-bg: #0d0e10; --pc-surface: #121416; --pc-surface-2: #16181a; --pc-line: #2b2d2b; --pc-line-gold: #6e5d39;
  --pc-gold: #cdb57b; --pc-gold-light: #e8d6a6; --pc-gold-value: #d9c189; --pc-ivory: #f2efe7; --pc-silver: #c5c8cc; --pc-grey: #92938f; --pc-on-gold: #19170f;
  --pc-gold-grad: linear-gradient(90deg, #e7d4a0 0%, #c8ae72 50%, #aa8d53 100%);
  --pc-coin: linear-gradient(135deg, #ead9a8 0%, #cdb57b 55%, #a88a50 100%);
  --pc-wallet: linear-gradient(150deg, #202426 0%, #171a1c 55%, #121416 100%);
  --pc-sans: 'Inter', 'Noto Sans Thai', ui-sans-serif, system-ui, sans-serif;
  --pc-serif: 'Cormorant Garamond', 'Noto Sans Thai', ui-serif, Georgia, serif;
  --mos-img-hero: url("../assets/images/hero-playnow-desktop.webp");
  --mos-img-hero-m: url("../assets/images/hero-playnow-mobile.webp");
  --mos-img-auth: url("../assets/images/auth-panel-desktop.webp");
  --mos-img-auth-m: url("../assets/images/auth-panel-mobile.webp");
}

/* ── P1 ตัวหนังสือ ──────────────────────────────────────────────── */
html body, html h1, html h2, html h3, html h4, html .font-display, html input, html button, html select, html textarea { font-family: var(--pc-sans); }
html body { background: var(--pc-bg); color: var(--pc-ivory); }
html .font-deco { font-family: var(--pc-sans); font-weight: 500; }
html .font-deco.font-black, html .font-deco.font-bold { font-weight: 500; }
html .font-display.font-bold, html .font-display.font-semibold, html h1.font-display, html h2.font-display { font-weight: 600; }
/* โลโก้ + หัวข้ออังกฤษใหญ่ = ตัวมีเชิง */
html .text-foil.font-deco.whitespace-nowrap, html footer .text-foil.font-deco, html h1.font-deco, html button.foil-frame .text-foil.font-deco {
  font-family: var(--pc-serif); font-weight: 600; letter-spacing: .06em;
}
html h1.font-deco { font-weight: 400; color: var(--pc-ivory); letter-spacing: .08em; }
html button.foil-frame .text-foil.font-deco { font-weight: 400; letter-spacing: .06em; background: none; color: var(--pc-ivory); -webkit-text-fill-color: var(--pc-ivory); }
/* หัวข้อเล็กอังกฤษ (THE CASHIER, MEMBER'S SUITE, LUCKY WHEEL ...) */
html .font-deco.tracking-\[0\.3em\] { font-size: 11px; font-weight: 500; letter-spacing: .24em; color: var(--pc-gold); }
/* ไล่ทองบนตัวหนังสือ → ทองด้าน */
html .text-foil { background-image: var(--pc-gold-grad); }
/* ยอดเงิน: ตัวบาง สีงาช้าง */
html .text-foil.tabular-nums { background: none; color: var(--pc-ivory); -webkit-text-fill-color: var(--pc-ivory); font-weight: 300; }
html .text-ivory { color: var(--pc-ivory); }
html .text-ivory-muted { color: var(--pc-grey); }
html .text-gold-1 { color: var(--pc-gold-light); }
html .text-gold-2, html .text-brand { color: var(--pc-gold); }
html .text-muted-foreground { color: var(--pc-grey); }
html .text-foreground\/85 { color: var(--pc-silver); }
/* ตัวเลขในกล่อง (ยอดโบนัส แต้ม ฯลฯ) */
html .font-deco.text-brand.tabular-nums, html .font-deco.text-gold-1 { color: var(--pc-gold-value); font-weight: 400; }

/* ── P2 หัวเว็บ ─────────────────────────────────────────────────── */
html header > div.bg-felt { background: var(--pc-bg); border-color: var(--pc-line); }
html header > div.bg-felt .text-gold-2 { color: var(--pc-grey); }
html header > div.bg-card\/90 { background: rgb(13 14 16 / .96); border-color: var(--pc-line); }
/* เมนู v4: ตัวหนังสือเงินน้ำหนักปกติ + หน้าปัจจุบันเป็นปุ่มทองด้าน
   ระบุ .font-display เพื่อชนะกฎหัวข้อ .font-display.font-semibold ใน P1 */
html header nav[aria-label="เมนูหลัก"] a.font-display,
html [role="dialog"] nav[aria-label="เมนูหลัก"] a.font-display {
  border-radius: 6px; background: transparent; border-color: transparent;
  color: var(--pc-silver); font-family: var(--pc-sans); font-weight: 400;
}
html header nav[aria-label="เมนูหลัก"] a[aria-current="page"],
html [role="dialog"] nav[aria-label="เมนูหลัก"] a[aria-current="page"] {
  background: var(--pc-gold-grad); border-color: transparent; color: var(--pc-on-gold); font-weight: 500;
}
html header nav[aria-label="เมนูหลัก"] a:not([aria-current="page"]):hover,
html [role="dialog"] nav[aria-label="เมนูหลัก"] a:not([aria-current="page"]):hover { color: var(--pc-gold-light); }
html header nav[aria-label="เมนูหลัก"] a:focus-visible,
html [role="dialog"] nav[aria-label="เมนูหลัก"] a:focus-visible { outline: 2px solid var(--pc-gold); outline-offset: 3px; }
@media (min-width: 1200px) {
  /* ปรับเฉพาะแถว navigation ตามภาพอ้างอิง ไม่กระทบกล่องเนื้อหา */
  html header a[aria-label="UFA หน้าแรก"] .text-foil { font-size: 26.5px; }
  html header nav[aria-label="เมนูหลัก"] a.font-display {
    /* ทุกเมนูได้พื้นที่เท่ากันเต็มแถว ทั้ง desktop ปกติและจอกว้าง */
    flex: 1 1 0; min-width: 0; text-align: center;
    font-size: 14px; line-height: 26px;
    padding-inline: 2px;
  }
}
html header button[aria-label="อัปเดตยอดเงิน"] { border-radius: 6px; border-color: var(--pc-line-gold); background: var(--pc-surface); color: var(--pc-gold-light); font-family: var(--pc-sans); font-weight: 500; }
html header button[aria-label="เปิดเมนู"] { border-radius: 6px; background: transparent; border-color: var(--pc-line); color: var(--pc-silver); }

/* ── P3 กรอบทอง (foil-frame) → เส้นทองบาง 1px ไม่เปลี่ยนขนาด ── */
html .foil-frame { background: var(--pc-surface); box-shadow: inset 0 0 0 1px var(--pc-line-gold); border-radius: 12px; }
html .foil-frame.rounded-\[2rem\] { border-radius: 14px; }
html .foil-frame > .bg-felt, html .foil-frame > span.bg-felt, html .foil-frame > div { border-radius: 10px; }
html .shadow-2xl.foil-frame { box-shadow: inset 0 0 0 1px var(--pc-line-gold), 0 30px 60px -30px rgb(0 0 0 / .8); }

/* ── P4 พื้นการ์ดเด่น (bg-felt) → ดำ/เงิน แตะแสงทองบาง ๆ ────────── */
html .bg-felt { background-image: radial-gradient(70% 60% at 85% 0%, rgb(205 181 123 / .08), transparent 70%), var(--pc-wallet); color: var(--pc-ivory); }
html footer.bg-felt, html header > div.bg-felt { background-image: none; }
html [data-slot="card"].bg-felt.border-gold-2 { border-color: #514732; }

/* ── P5 การ์ดทั่วไป + กล่องย่อย ─────────────────────────────────── */
html .rounded-3xl { border-radius: 12px; }
html .rounded-2xl { border-radius: 6px; }
html [data-slot="card"].bg-card, html .rounded-3xl.border.bg-card { background: var(--pc-surface); border-color: var(--pc-line); }
html .rounded-2xl.bg-secondary { background: #191b1d; box-shadow: inset 0 0 0 1px var(--pc-line); }
/* กระเป๋าโบนัส: ตัวเลขสีงาช้างแบบ v3 (เนียนกว่า) */
html .rounded-2xl.bg-secondary .font-deco.text-brand { color: var(--pc-ivory); font-weight: 400; }
html .border-gold-2\/40 { border-color: var(--pc-line); }
html .border-dashed { border-color: var(--pc-line-gold); }
html .border-border { border-color: var(--pc-line); }
html .divide-border > * { border-color: var(--pc-line); }
html a.rounded-3xl.bg-card:hover { border-color: var(--pc-line-gold); }

/* ── P6 ปุ่ม ────────────────────────────────────────────────────── */
html [data-slot="button"], html form button[type="submit"] { border-radius: 6px; font-family: var(--pc-sans); }
html .bg-foil, html .bg-gold-grad { background-image: var(--pc-gold-grad); color: var(--pc-on-gold); box-shadow: inset 0 1px 0 rgb(255 255 255 / .35); }
html .glow { box-shadow: inset 0 1px 0 rgb(255 255 255 / .35); }
html [data-slot="button"].border-gold-2 { border-color: var(--pc-gold); color: var(--pc-gold-light); background: transparent; }
html [data-slot="button"].bg-soft { background: transparent; border-color: var(--pc-line-gold); color: var(--pc-gold); }
html [data-slot="button"].size-11, html [data-slot="button"].size-10, html button.size-10.rounded-full, html button.size-11.rounded-full, html a.size-10.rounded-full { border-radius: 6px; border-color: var(--pc-line); color: var(--pc-silver); }
html [role="tablist"].rounded-full, html .inline-flex.rounded-full.border.w-full { border-radius: 8px; background: var(--pc-surface); border-color: var(--pc-line); }
html [role="tablist"] > a, html [role="tab"], html .inline-flex.rounded-full.border.w-full > button { border-radius: 6px; }

html section a.rounded-full, html form a.rounded-full, html main a.rounded-full.border { border-radius: 6px; }

/* ── P7 เหรียญ (W / CP / % / FR / PLAY / ตัวย่อชื่อ) → เหรียญทองด้าน ── */
html .chip {
  background-image: var(--pc-coin); color: var(--pc-on-gold);
  border: 1.5px dashed rgb(25 23 15 / .45); outline: 3px solid #d2bb83; outline-offset: 0;
  box-shadow: 0 0 0 4px rgb(242 227 181 / .45), 0 6px 14px rgb(0 0 0 / .55);
  font-family: var(--pc-serif); font-weight: 600; font-size: 18px;
}
html .chip.text-2xl { font-size: 26px; }
html .chip svg { color: var(--pc-on-gold); }

/* ── P8 เส้นไฟ (bulbs) → จุดทองเล็ก จางๆ · ท้ายเว็บซ่อน ───────────── */
html .bulbs { background-image: radial-gradient(circle, rgb(205 181 123 / .55) 0 1.3px, transparent 1.9px); background-size: 18px 14px; opacity: .8; }
html footer .bulbs { opacity: 0; }

/* ── P9 ช่องรูป: PLAY NOW (ภาพนิ่งโต๊ะคาสิโน) ───────────────────── */
html button.foil-frame > span.bg-felt {
  background-color: #111314;
  background-image: linear-gradient(90deg, #111314 0%, rgb(17 19 20 / .9) 36%, rgb(17 19 20 / .2) 62%, rgb(17 19 20 / 0) 100%), var(--mos-img-hero);
  background-size: 100% 100%, auto 100%; background-position: center, right center; background-repeat: no-repeat;
}
@media (max-width: 767px) {
  html button.foil-frame > span.bg-felt { background-image: linear-gradient(90deg, #111314 0%, rgb(17 19 20 / .9) 42%, rgb(17 19 20 / .2) 75%, rgb(17 19 20 / 0) 100%), var(--mos-img-hero-m); }
}
html button.foil-frame .chip { font-family: var(--pc-sans); font-weight: 500; letter-spacing: .16em; font-size: 11px; }
html button.foil-frame > span > span > svg { color: var(--pc-gold-light); }

/* ── P10 ช่องรูป: แผงซ้ายหน้าเข้าสู่ระบบ/สมัคร (นักบอล × นางแบบ) ───── */
html aside.bg-felt {
  background-color: #111314;
  background-image: linear-gradient(180deg, rgb(17 19 20 / .55) 0%, rgb(17 19 20 / .15) 45%, rgb(17 19 20 / .85) 100%), var(--mos-img-auth);
  background-size: 100% 100%, cover; background-position: center, center; background-repeat: no-repeat;
  outline: 1px solid rgb(205 181 123 / .45); outline-offset: -20px;
}
@media (max-width: 899px) {
  html aside.bg-felt { background-image: linear-gradient(180deg, rgb(17 19 20 / .5), rgb(17 19 20 / .2) 50%, rgb(17 19 20 / .8)), var(--mos-img-auth-m); outline: none; }
}
html aside.bg-felt .text-foil { filter: drop-shadow(0 2px 10px rgb(0 0 0 / .7)); }

/* ── P11 ช่องกรอก ───────────────────────────────────────────────── */
html input[data-slot="input"], html select, html textarea { background: var(--pc-bg); border-color: var(--pc-line); border-radius: 6px; color: var(--pc-ivory); }
html input[data-slot="input"]:focus-visible { border-color: var(--pc-gold); box-shadow: none; }
html input::placeholder { color: #656964; }

/* ── P12 แถบล่างมือถือ ───────────────────────────────────────────── */
html nav[aria-label="เมนูด่วน"] { background: rgb(13 14 16 / .97); border-color: var(--pc-line); }
html nav[aria-label="เมนูด่วน"] a.text-brand, html nav[aria-label="เมนูด่วน"] span.text-brand { color: var(--pc-gold-light); }
html nav[aria-label="เมนูด่วน"] a.text-muted-foreground { color: var(--pc-grey); font-weight: 400; }
html nav[aria-label="เมนูด่วน"] button[aria-label="เข้าเกม"] { border-color: var(--pc-bg); box-shadow: none; color: var(--pc-on-gold); }

/* ── P13 ท้ายเว็บ + เมนูข้าง ─────────────────────────────────────── */
html footer.bg-felt { background: var(--pc-bg); border-color: var(--pc-line); }
html footer .text-ivory-muted { color: #656964; }
html footer nav a { color: var(--pc-grey); }
html [role="dialog"].bg-card { background: var(--pc-bg); border-color: var(--pc-line); }
@media (min-width: 768px) {
  /* ลดระยะที่ซ้อนกันท้ายหน้าแรก ให้ footer อยู่ในจอเมื่อเนื้อหามีพื้นที่พอ
     คง flex-1 / min-h-dvh ของระบบ: หน้าสั้นชิดท้ายจอ หน้ายาวเลื่อนได้ตามเนื้อหา */
  html body[data-page="index"] main { padding-bottom: 0; }
  html body[data-page="index"] main > div { padding-bottom: 0; }
  html footer.bg-felt { margin-top: 32px; }
  html footer.bg-felt > .bulbs { display: none; }
  html footer.bg-felt > div:last-child { padding-block: 24px; }
}

/* ── P14 สถานะ ──────────────────────────────────────────────────── */
html .text-destructive { color: #d98a80; }
html .text-success { color: #93b59c; }

/* ── P15 รายละเอียดร่วม: พื้นเข้ม/ขอบบาง ทองเฉพาะจุด ───────────── */
/* จำนวนเงินลัดเป็นปุ่มรอง ปุ่มดำเนินการหลักยังใช้ทองด้าน */
html body[data-page] main button.chip.bg-felt {
  background: #101418; color: var(--pc-gold); border-style: solid; border-color: #514732;
  outline-color: transparent; box-shadow: inset 0 1px 0 #c5c8cc0d;
}
/* ป้ายบริการข้างข้อมูลใช้เส้นทองแบบเดียวกับหน้าบัญชี */
html body[data-page^="referral"] main .chip {
  background: #101418; color: var(--pc-gold); border-style: solid; border-color: #514732;
  outline-color: transparent; box-shadow: inset 0 1px 0 #c5c8cc0d;
}
html body[data-page^="referral"] main .chip svg { color: inherit; }
html body[data-page="contact"] main span.bg-foil {
  background: #101418; color: var(--pc-gold); box-shadow: inset 0 0 0 1px #514732;
}
/* data-state ของระบบเดิมเคยใช้ทองเงาและถูกสี muted ทับจนอ่านยาก */
html body[data-page] [role="tab"]:is([data-state="active"], [aria-selected="true"]) {
  background-image: var(--pc-gold-grad); color: var(--pc-on-gold);
  box-shadow: inset 0 1px 0 #ffffff38;
}
/* ฟอร์มที่ไม่มี data-slot ใช้พื้น/ขอบเดียวกับฟอร์มอื่นด้วย */
html body[data-page] input.mos-field:where(:not([type="checkbox"]):not([type="radio"])),
html body[data-page] select.mos-field,
html body[data-page] textarea.mos-field {
  background-color: var(--pc-bg); border-color: var(--pc-line); border-radius: 6px; color: var(--pc-ivory);
}
html body[data-page] .mos-field::placeholder { color: var(--pc-grey); }