/*
 * สกินกีฬาเป็นหลัก (data-skin="sport") — ธีมเฉพาะของระบบ "กีฬาเป็นหลัก (UFABET บน AMB)" ตาม canvas "เว็บ UFABET บน AMB" (2026-11-07/08)
 *
 * ผู้ใช้ 2026-11-08 "สร้างเป็นธีมใหม่เฉพาะของหมวดเกม(กีฬา)นำ ไม่ใช้ธีมร่วมกับหมวดเกม แต่โครงสร้าง API ใช้ร่วมกัน"
 *   → คอมโพเนนต์ .ob-* และข้อมูล /site /games ชุดเดียวกับเว็บเกม แต่ token สี/ฟอนต์/รูปทรงเป็นของสกินนี้ทั้งชุด
 *   → ชุดสีคงที่ ไม่ตามชุดสีที่แอดมินเลือก (app.vue ไม่วาง token ของ ThemePreset เมื่อสกินนี้)
 *
 * ชุดสี (จาก canvas): พื้นดำนุ่ม #0E0E11 · การ์ด #17181C (ชี้ #1E2026) · ทองโลหะ #D4AF37 (ปุ่มหลัก คำที่ต้องเด่น ป้ายระดับ)
 *   · เงิน #B8BEC9 (ข้อความรอง) · ตัวหนังสือ #F4F4F6 · เขียวสถานะ #9BD9B0 (เข้าได้ ถอนได้) · ส้มเตือนคงไว้เฉพาะข้อผิดพลาด
 * ภาษาภาพ: สีแบน ไม่มีกรอบวิ่ง ไม่มีแสงเรืองลอย พื้นมีลายเฉียงจาง ๆ · ตัวหนังสือใหญ่สะอาด Bai Jamjuree (หัวข้อ ตัวเลข) + Sarabun (เนื้อหา)
 *   · ปุ่มทองไล่เฉดเล็กน้อยแบบโลหะ · แถบล่างชิดขอบจอ ปุ่มกลางทอง · โลโก้ตัวหนังสือเอียงไล่ทอง (เหมือนโลโก้ UFABET)
 *
 * วางบน html[data-skin="sport"]:root → ชนะทั้ง :root ของ obsidian.css และ html:root ของ token ชุดสี
 */

html[data-skin="sport"]:root {
    --ob-bg: #0E0E11;
    --ob-bg-rgb: 14, 14, 17;
    --ob-scheme: dark;
    --ob-sink: rgba(0, 0, 0, .35);
    --ob-sink-soft: rgba(0, 0, 0, .22);
    --ob-ink-rgb: 255, 255, 255;
    --ob-surface: #17181C;
    --ob-surface-2: #1E2026;
    --ob-surface-3: #26282E;
    --ob-card: #17181C;
    --ob-card-soft: #17181C;

    --ob-line: rgba(255, 255, 255, .1);
    --ob-line-soft: rgba(255, 255, 255, .06);
    --ob-line-mid: rgba(255, 255, 255, .14);

    --ob-text: #F4F4F6;
    --ob-white: #ffffff;
    --ob-muted: #B8BEC9;
    --ob-dim: #6B717C;

    /* สีเน้น (เดิมมินต์) = ทอง — ลิงก์ แท็บที่เลือก ไอคอนหัวข้อ */
    --ob-mint: #D4AF37;
    --ob-mint-2: #E6C457;
    --ob-mint-dark: #A6842A;
    --ob-mint-rgb: 212, 175, 55;

    --ob-gold: #D4AF37;
    --ob-gold-dark: #A6842A;
    --ob-gold-rgb: 212, 175, 55;

    /* ปุ่มหลัก (เดิมส้ม) = ทอง ตัวหนังสือดำ */
    --ob-orange: #D4AF37;
    --ob-orange-dark: #C9A227;
    --ob-orange-text: #E6C457;
    --ob-orange-ink: #1A1304;
    --ob-orange-rgb: 212, 175, 55;

    /* สถานะสด/เปิดอยู่ = เขียวนุ่ม */
    --ob-live: #9BD9B0;
    --ob-live-text: #9BD9B0;

    --ob-display: 'Bai Jamjuree', 'Sarabun', 'IBM Plex Sans Thai', sans-serif;
    --ob-sans: 'Sarabun', 'IBM Plex Sans Thai', 'Noto Sans Thai', system-ui, sans-serif;

    --ob-r-xl: 20px;
    --ob-r-lg: 16px;
    --ob-r-md: 14px;
    --ob-r-sm: 10px;

    --gold-light: #F8E7A8;
}

/* พื้นหลัง: ดำนุ่ม + ลายเฉียงจาง ๆ (canvas) — ไม่มีแสงเรืองมินต์/ทองของออบซิเดียน */
[data-skin="sport"] body {
    background-color: #0E0E11;
    background-image: repeating-linear-gradient(112deg, rgba(255, 255, 255, .02) 0 96px, rgba(255, 255, 255, 0) 96px 192px);
}
[data-skin="sport"] .ob-ambient { display: none; }

/* การ์ด: กรอบนิ่ง ไม่มีแสงวิ่ง */
[data-skin="sport"] .ob-ring::before,
[data-skin="sport"] .ob-ring--fast::before { animation: none; inset: 0; background: rgba(255, 255, 255, .08); }

/* หัวเว็บและโลโก้ตัวหนังสือ: ดำเกือบทึบ โลโก้เอียงไล่ทองแบบโลโก้ UFABET */
[data-skin="sport"] .ob-header { background: rgba(14, 14, 17, .92); border-bottom-color: rgba(255, 255, 255, .08); }
[data-skin="sport"] .ob-brand__name {
    font-style: italic;
    letter-spacing: -.03em;
    font-size: 20px;
    background: linear-gradient(180deg, #F8E7A8 0%, #D4AF37 50%, #A6842A 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ปุ่ม: หลัก = ทองโลหะ ตัวหนังสือดำ · รอง = ขาวโปร่ง ไม่มีเส้นขอบ */
[data-skin="sport"] .ob-btn--orange,
[data-skin="sport"] .ob-btn--gold,
[data-skin="sport"] .ob-btn--mint {
    background: linear-gradient(180deg, #EACF6B, #C9A227);
    color: #1A1304;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4);
}
[data-skin="sport"] .ob-btn--ghost,
[data-skin="sport"] .ob-btn--mint-ghost,
[data-skin="sport"] .ob-btn--orange-ghost {
    background: rgba(255, 255, 255, .08);
    border-color: transparent;
    color: #F4F4F6;
}
[data-skin="sport"] .ob-chip { background: rgba(255, 255, 255, .08); border-color: transparent; }

/* หัวข้อส่วน: ใหญ่ขึ้นตามดีไซน์ (ตัวหนังสือสะอาดเป็นตัวเด่น) */
[data-skin="sport"] .ob-sec__h h2 { font-family: var(--ob-display); font-size: 22px; letter-spacing: -.01em; }

/* แถบล่าง (มือถือ): ชิดขอบจอ ไม่ลอย · ปุ่มกลางทองโค้งบนแบบที่ลูกค้า UFABET คุ้น */
[data-skin="sport"] .ob-bottomnav {
    left: 0; right: 0; bottom: 0;
    border-radius: 0; border: 0; border-top: 1px solid rgba(255, 255, 255, .1);
    background: #0E0E11;
    box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
}
[data-skin="sport"] .ob-bottomnav__fab { border-radius: 16px 16px 0 0; background: #D4AF37; color: #1A1304; box-shadow: none; }

/* การ์ดค่าย: สีแบน มุมมน 14 ไม่มีแสงส้มของคาสิโนสด (สถานะบอกด้วยคำ) */
[data-skin="sport"] .ob-tile { border-radius: 14px; background: #17181C; }
[data-skin="sport"] .ob-tile:hover { background: #1E2026; }
/* การ์ดที่เป็นรูปล้วนของ AMB ไม่มีกล่องเทาหลังรูป (เห็นในพรีวิว 2026-11-08) */
[data-skin="sport"] .ob-tile--art, [data-skin="sport"] .ob-tile--art:hover { background: none; }
[data-skin="sport"] .ob-tile__glow { display: none; }

/* ── ลบภาษาภาพของสายเกม (หกเหลี่ยม ไฟวิ่ง รังผึ้ง ตัวอักษรโมโนเว้นระยะ) ทั้งเว็บ — ผู้ใช้ 2026-11-08 "ธีมส่วนใหญ่ยังเป็นของหน้าเกมอยู่"
   สไตล์พวกนี้อยู่ใน <style scoped> ของคอมโพเนนต์ จึงต้องชนะด้วย html[data-skin] (specificity สูงกว่า .class[data-v-*]) ── */

/* ตัวเลขเงินและป้ายเล็ก: Bai Jamjuree แทนโมโน ไม่มีตัวพิมพ์ใหญ่เว้นระยะ */
html[data-skin="sport"]:root { --ob-mono: 'Bai Jamjuree', 'Sarabun', ui-monospace, monospace; }
html[data-skin="sport"] .ob-eyebrow { font-family: var(--ob-sans); font-size: 13px; letter-spacing: 0; text-transform: none; font-weight: 600; color: #D4AF37; }
html[data-skin="sport"] .ob-money { font-family: var(--ob-display); letter-spacing: -.01em; }

/* หกเหลี่ยมทุกแบบ → สี่เหลี่ยมมุมมน (โลโก้ตัวย่อ ไอคอนหัวข้อ ปุ่มรีเฟรช เบ้าทางลัด ป้ายระดับ) */
html[data-skin="sport"] .ob-hex { clip-path: none; border-radius: 10px; background: #D4AF37; color: #1A1304; }
html[data-skin="sport"] .ob-secic { clip-path: none; border-radius: 8px; width: 28px; height: 28px; background: rgba(212, 175, 55, .16); color: #D4AF37; }
html[data-skin="sport"] .ob-wallet__refresh,
html[data-skin="sport"] .ob-wallet__sock { clip-path: none; border-radius: 10px; }
html[data-skin="sport"] .ob-wallet__sock { background: rgba(255, 255, 255, .06); color: #D4AF37; }
html[data-skin="sport"] .ob-wallet__tier-chip { clip-path: none; border-radius: 999px; background: rgba(212, 175, 55, .16); color: #D4AF37; }
html[data-skin="sport"] .ob-wallet__comb { display: none; }
html[data-skin="sport"] .ob-wallet__hi { font-family: var(--ob-sans); font-size: 13px; letter-spacing: 0; color: #B8BEC9; opacity: 1; }
html[data-skin="sport"] .ob-wallet__body { background: #17181C; border-radius: 19px; }
html[data-skin="sport"] .ob-wallet__actions .ob-btn--orange { background: linear-gradient(180deg, #EACF6B, #C9A227); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); color: #1A1304; }
html[data-skin="sport"] .ob-wallet__links,
html[data-skin="sport"] .ob-wallet__tier { background: #0E0E11; border-color: transparent; }
html[data-skin="sport"] .ob-wallet__tier-track > i::after { box-shadow: none; }

/* ยอดเงินในหัวเว็บ: แคปซูลเรียบ ไม่มีขอบมินต์ */
html[data-skin="sport"] .ob-pill { border-color: transparent; background: #17181C; }
html[data-skin="sport"] .ob-pill__amt { color: #F4F4F6; }
html[data-skin="sport"] .ob-iconbtn { border-color: transparent; background: rgba(255, 255, 255, .08); border-radius: 12px; }
html[data-skin="sport"] .ob-topnav a.router-link-active,
html[data-skin="sport"] .ob-topnav a.is-on { background: none; color: #F4F4F6; }
html[data-skin="sport"] .ob-topnav__gold { color: #D4AF37; }

/* ชิปหมวดในล็อบบี้: มุมมน 14 ไม่มีเงาเรือง */
html[data-skin="sport"] .ob-cat { border-radius: 14px; border-color: transparent; }
html[data-skin="sport"] .ob-cat.is-on { box-shadow: none; border-color: #D4AF37; background: rgba(212, 175, 55, .12); }

/* การ์ดชวนสมัคร/การ์ดทั่วไป: แบน ไม่ไล่สี */
html[data-skin="sport"] .ob-card--mint { border-color: rgba(255, 255, 255, .08); background: #17181C; }
html[data-skin="sport"] .ob-guest__body { background: #17181C; }

/* แถบล่างสกินกีฬา (ObBottomNav v-else-if="isSportSkin"): 5 ช่องเท่ากัน (4 เมื่อไม่มี LINE) ไม่มีปุ่มลอยกลาง สีเมื่ออยู่ = ขาว ไม่มีไฟวิ่ง */
html[data-skin="sport"] .ob-bottomnav--sport { grid-template-columns: repeat(5, minmax(0, 1fr)); }
html[data-skin="sport"] .ob-bottomnav--sport.ob-bottomnav--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
html[data-skin="sport"] .ob-bottomnav--sport a { color: #B8BEC9; }
html[data-skin="sport"] .ob-bottomnav--sport a.is-on { color: #F4F4F6; }

@media (prefers-reduced-motion: reduce) {
    [data-skin="sport"] .ob-ring::before { animation: none; }
}