/*
 * สกินกีฬาเป็นหลัก (data-skin="sport") — ธีมเฉพาะของระบบ "กีฬาเป็นหลัก (UFABET บน AMB)"
 *
 * ผู้ใช้ 2026-11-08 "สร้างเป็นธีมใหม่เฉพาะของหมวดเกม(กีฬา)นำ ไม่ใช้ธีมร่วมกับหมวดเกม แต่โครงสร้าง API ใช้ร่วมกัน"
 *   → คอมโพเนนต์ .ob-* และข้อมูล /site /games ชุดเดียวกับเว็บเกม แต่ token สี/ฟอนต์/รูปทรงเป็นของสกินนี้ทั้งชุด
 *   → ชุดสีคงที่ ไม่ตามชุดสีที่แอดมินเลือก (app.vue ไม่วาง token ของ ThemePreset เมื่อสกินนี้)
 *
 * ชุดสีปัจจุบัน: "ค่ำคืนฟุตบอลยุโรป" (ผู้ใช้ 2026-11-10 "ธีมเว็บและพื้นหลัง กลิ่นอาย Uefa champions league — ลองออกแบบใหม่")
 *   พื้นน้ำเงินเกือบดำ #02040F · การ์ดน้ำเงินเข้ม #0A0F2E · ตัวหนังสือขาวอมฟ้า · ข้อความรองเงินอมฟ้า #9FAAD0 (มืดลงตามผู้ใช้ 2026-11-10)
 *   · สีเน้น/ปุ่มหลัก = ฟ้าสว่าง #45E3FF (ตัวหนังสือบนปุ่มน้ำเงินเข้ม) · โลโก้ตัวหนังสือ = เงินโครเมียมเอียง
 *   · พื้นหลัง = ท้องฟ้ากลางคืนมืด ลำแสงเบลอไขว้จาง ๆ · ฉากสนาม (แถวไฟ อัฒจันทร์ หญ้า) อยู่ในฮีโร่หน้าแรก
 *   เป็นแค่กลิ่นอาย ไม่ใช้โลโก้หรือสัญลักษณ์ของ UEFA
 * ชุดก่อนหน้า: ดำ-ทอง-เงินแบบ UFABET (#0E0E11 · #D4AF37 · #B8BEC9) — อยู่ใน git ก่อน commit นี้
 *
 * เปลี่ยนชุดสีทั้งสกิน = แก้บล็อก --sp-* ข้างล่างบล็อกเดียว กฎที่เหลืออ้างตัวแปรทั้งหมด
 * ภาษาภาพ: ไม่มีหกเหลี่ยม ไม่มีกรอบวิ่ง · ตัวหนังสือใหญ่สะอาด Bai Jamjuree (หัวข้อ ตัวเลข) + Sarabun (เนื้อหา) · แถบล่างชิดขอบจอ
 *
 * วางบน html[data-skin="sport"]:root → ชนะทั้ง :root ของ obsidian.css และ html:root ของ token ชุดสี
 */

html[data-skin="sport"]:root {
    /* ── ชุดสีของสกิน (แก้ที่นี่ที่เดียว) ── */
    --sp-bg: #02040F;
    --sp-bg-rgb: 2, 4, 15;
    --sp-bg-deep: #01030B;
    --sp-bg-top: #040B33;
    --sp-surface: #0A0F2E;
    --sp-surface-2: #101742;
    --sp-surface-3: #18215A;
    --sp-text: #F3F6FF;
    --sp-muted: #9FAAD0;
    --sp-dim: #636F9C;
    --sp-line-rgb: 140, 165, 255;
    --sp-accent: #45E3FF;
    --sp-accent-2: #8AF0FF;
    --sp-accent-dark: #1B9FD0;
    --sp-accent-rgb: 69, 227, 255;
    --sp-accent-ink: #031033;
    --sp-btn: linear-gradient(180deg, #8DF1FF, #2FB8FF);
    --sp-btn-shine: inset 0 1px 0 rgba(255, 255, 255, .55);
    --sp-chrome: linear-gradient(180deg, #FFFFFF 0%, #C8D6FF 48%, #7F93D8 100%);
    --sp-soft: rgba(var(--sp-line-rgb), .12);
    --sp-ok: #6CF5B5;

    --ob-bg: var(--sp-bg);
    --ob-bg-rgb: var(--sp-bg-rgb);
    --ob-scheme: dark;
    --ob-sink: rgba(1, 4, 24, .45);
    --ob-sink-soft: rgba(1, 4, 24, .3);
    --ob-ink-rgb: var(--sp-line-rgb);
    --ob-surface: var(--sp-surface);
    --ob-surface-2: var(--sp-surface-2);
    --ob-surface-3: var(--sp-surface-3);
    --ob-card: var(--sp-surface);
    --ob-card-soft: var(--sp-surface);

    --ob-line: rgba(var(--sp-line-rgb), .16);
    --ob-line-soft: rgba(var(--sp-line-rgb), .1);
    --ob-line-mid: rgba(var(--sp-line-rgb), .22);

    --ob-text: var(--sp-text);
    --ob-white: #ffffff;
    --ob-muted: var(--sp-muted);
    --ob-dim: var(--sp-dim);

    /* สีเน้น (เดิมมินต์) — ลิงก์ แท็บที่เลือก ไอคอนหัวข้อ */
    --ob-mint: var(--sp-accent);
    --ob-mint-2: var(--sp-accent-2);
    --ob-mint-dark: var(--sp-accent-dark);
    --ob-mint-rgb: var(--sp-accent-rgb);

    --ob-gold: var(--sp-accent);
    --ob-gold-dark: var(--sp-accent-dark);
    --ob-gold-rgb: var(--sp-accent-rgb);

    /* ปุ่มหลัก (เดิมส้ม) */
    --ob-orange: var(--sp-accent);
    --ob-orange-dark: var(--sp-accent-dark);
    --ob-orange-text: var(--sp-accent-2);
    --ob-orange-ink: var(--sp-accent-ink);
    --ob-orange-rgb: var(--sp-accent-rgb);

    /* สถานะสด/เปิดอยู่ = เขียวนุ่ม */
    --ob-live: var(--sp-ok);
    --ob-live-text: var(--sp-ok);

    --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: #C8D6FF;
}

/* ── พื้นหลังทั้งเว็บ: ท้องฟ้ากลางคืนโทนมืด ใช้ชั้น .ob-ambient เดิม (fixed z-index -1) ทุกขนาดจอ ──
     ตัวชั้น   = น้ำเงินเกือบดำ สว่างขึ้นเล็กน้อยช่วงบนแล้วกลับมืด
     ::before = ลำแสงเบลอไขว้จาง ๆ (public/sport/night-beams.svg) เฉพาะครึ่งบน
     ::after  = ขอบบนมืด + แสงน้ำเงินจางขอบล่าง · i (แสงลอยของสายเกม) = ซ่อน
   ฉากสนาม (แถวไฟโบเก้ อัฒจันทร์ สนามหญ้า) อยู่ในฮีโร่ของหน้าแรก (SportHome .sp-stage) ไม่ตรึงทั้งจอแล้ว — ดีไซน์ "คืนแข่งขัน" รอบ 2
   body ต้องโปร่ง ไม่งั้นสีพื้นของ body ทับชั้นนี้ (html มี --ob-bg)
   ประวัติ: พื้นดำลายเฉียง → "มันจะโล่ง" · สนามบอลเส้นทองเต็มจอ → "ไม่สวยเลย" · ตาข่ายทอง+สปอตไลต์ → ลูกโลกดาวห้าแฉก
            → คลื่นแสง → ฉากสนามเต็มจอตามภาพอ้างอิง → "ธีม ยูฟ่า จะต้องเป็นแนวมืดกว่านี้" + โครงหน้าใหม่ → ชุดนี้ ── */
[data-skin="sport"] body { background-color: transparent; background-image: none; }
[data-skin="sport"] .ob-ambient { display: block; background: linear-gradient(180deg, #01030D 0%, var(--sp-bg-top) 22%, #071653 40%, #050E3A 56%, var(--sp-bg) 80%); }
[data-skin="sport"] .ob-ambient i { display: none; }
[data-skin="sport"] .ob-ambient::before {
    content: ""; position: absolute; inset: 0 0 34% 0; opacity: .55;
    background: url("/sport/night-beams.svg") center / cover no-repeat;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 60%, rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 60%, rgba(0, 0, 0, 0) 100%);
}
[data-skin="sport"] .ob-ambient::after {
    content: ""; position: absolute; inset: 0; opacity: 1; -webkit-mask-image: none; mask-image: none;
    background:
        linear-gradient(180deg, rgba(1, 2, 10, .6) 0%, rgba(1, 2, 10, 0) 20%),
        radial-gradient(110% 26% at 50% 110%, rgba(40, 80, 220, .16), rgba(40, 80, 220, 0) 72%);
}

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

/* หัวเว็บและโลโก้ตัวหนังสือ: น้ำเงินเกือบทึบ โลโก้เอียงเงินโครเมียม */
[data-skin="sport"] .ob-header { background: rgba(var(--sp-bg-rgb), .9); border-bottom-color: var(--ob-line-soft); }
[data-skin="sport"] .ob-brand__name {
    font-style: italic;
    letter-spacing: -.03em;
    font-size: 20px;
    background: var(--sp-chrome);
    -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: var(--sp-btn);
    color: var(--sp-accent-ink);
    box-shadow: var(--sp-btn-shine);
}
[data-skin="sport"] .ob-btn--ghost,
[data-skin="sport"] .ob-btn--mint-ghost,
[data-skin="sport"] .ob-btn--orange-ghost {
    background: var(--sp-soft);
    border-color: transparent;
    color: var(--sp-text);
}
[data-skin="sport"] .ob-chip { background: var(--sp-soft); border-color: transparent; }

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

/* แถบล่าง (มือถือ): ชิดขอบจอ ไม่ลอย */
[data-skin="sport"] .ob-bottomnav {
    left: 0; right: 0; bottom: 0;
    border-radius: 0; border: 0; border-top: 1px solid var(--ob-line);
    background: var(--sp-bg-deep);
    box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
}
[data-skin="sport"] .ob-bottomnav__fab { border-radius: 16px 16px 0 0; background: var(--sp-accent); color: var(--sp-accent-ink); box-shadow: none; }

/* การ์ดค่าย: สีแบน มุมมน 14 ไม่มีแสงส้มของคาสิโนสด (สถานะบอกด้วยคำ) */
[data-skin="sport"] .ob-tile { border-radius: 14px; background: var(--sp-surface); }
[data-skin="sport"] .ob-tile:hover { background: var(--sp-surface-2); }
/* การ์ดที่เป็นรูปล้วนของ 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: var(--sp-accent); }
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: var(--sp-accent); color: var(--sp-accent-ink); }
html[data-skin="sport"] .ob-secic { clip-path: none; border-radius: 8px; width: 28px; height: 28px; background: rgba(var(--sp-accent-rgb), .16); color: var(--sp-accent); }
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: var(--sp-soft); color: var(--sp-accent); }
html[data-skin="sport"] .ob-wallet__tier-chip { clip-path: none; border-radius: 999px; background: rgba(var(--sp-accent-rgb), .16); color: var(--sp-accent); }
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: var(--sp-muted); opacity: 1; }
html[data-skin="sport"] .ob-wallet__body { background: var(--sp-surface); border-radius: 19px; }
html[data-skin="sport"] .ob-wallet__actions .ob-btn--orange { background: var(--sp-btn); box-shadow: var(--sp-btn-shine); color: var(--sp-accent-ink); }
html[data-skin="sport"] .ob-wallet__links,
html[data-skin="sport"] .ob-wallet__tier { background: var(--sp-bg); 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: var(--sp-surface); }
html[data-skin="sport"] .ob-pill__amt { color: var(--sp-text); }
html[data-skin="sport"] .ob-iconbtn { border-color: transparent; background: var(--sp-soft); 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: var(--sp-text); }
html[data-skin="sport"] .ob-topnav__gold { color: var(--sp-accent); }

/* ชิปหมวดในล็อบบี้: มุมมน 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: var(--sp-accent); background: rgba(var(--sp-accent-rgb), .12); }

/* การ์ดชวนสมัคร/การ์ดทั่วไป: แบน ไม่ไล่สี */
html[data-skin="sport"] .ob-card--mint { border-color: var(--ob-line-soft); background: var(--sp-surface); }
html[data-skin="sport"] .ob-guest__body { background: var(--sp-surface); }

/* แถบล่างสกินกีฬา (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: var(--sp-muted); }
html[data-skin="sport"] .ob-bottomnav--sport a.is-on { color: var(--sp-text); }

/* ── หน้าเข้าสู่ระบบ / สมัครสมาชิก (layout guest) (ผู้ใช้ 2026-11-10 "หน้าสมัคร หน้าล็อกอินต้องมีกลิ่นอาย UFA")
   รังผึ้งของสายเกมออก (พื้นหลังท้องฟ้าของสกินอยู่ข้างหลังแล้ว) · โลโก้ตัวหนังสือเอียงโครเมียม
   · แท็บที่เลือก ปุ่มไป ขั้นตอน ใช้สีปุ่มหลักของสกิน มุมมน ไม่ตัดหกเหลี่ยม · การ์ดขอบสีเน้นบาง
   สไตล์ของหน้าอยู่ใน <style scoped> จึงชนะด้วย html[data-skin] (เหมือนส่วนบน) ── */
html[data-skin="sport"] .au-comb { display: none; }

/* หัวหน้า: ป้ายสีเน้น "ทางเข้า UFABET" · โลโก้ตัวหนังสือเอียง · คำโปรย · ชิปสิ่งที่มีข้างใน */
html[data-skin="sport"] .sp-eyebrow { font-family: var(--ob-sans); font-size: 13px; font-weight: 600; letter-spacing: 0; color: var(--sp-accent); }
html[data-skin="sport"] .sp-wordmark {
    display: inline-block; font-family: var(--ob-display); font-weight: 700; font-style: italic; font-size: 38px; line-height: 1.05; letter-spacing: -.03em;
    background: var(--sp-chrome);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    padding-right: .08em; /* ตัวเอียงตัวท้ายไม่โดนตัด */
}
html[data-skin="sport"] .sp-wordmark--sm { font-size: 20px; }
html[data-skin="sport"] .sp-lead { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--sp-muted); max-width: 32ch; }
html[data-skin="sport"] .sp-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
html[data-skin="sport"] .sp-chips span { height: 30px; padding: 0 12px; border-radius: 999px; background: var(--sp-soft); display: inline-flex; align-items: center; font-size: 12.5px; font-weight: 600; color: var(--sp-text); }

/* การ์ดฟอร์ม: ขอบสีเน้นบาง เงาลึก */
html[data-skin="sport"] .au-card { border-radius: 20px; border-color: rgba(var(--sp-accent-rgb), .32); background: var(--sp-surface); box-shadow: 0 30px 70px -36px rgba(0, 2, 20, .95); }

/* แท็บ เข้าสู่ระบบ ⇄ สมัคร: ช่องที่เลือกเป็นสีปุ่มหลักทั้งสองฝั่ง ไม่ตัดหกเหลี่ยม */
html[data-skin="sport"] .au-tabs { background: var(--ob-sink); border-color: transparent; }
html[data-skin="sport"] .au-tabs__t[aria-current='page'] {
    clip-path: none; border-radius: 12px;
    background: var(--sp-btn); color: var(--sp-accent-ink); box-shadow: var(--sp-btn-shine);
}

/* ปุ่มไปต่อ/สมัคร: สีปุ่มหลักของสกิน (ของเดิมไล่ส้มพีชของสายเกม) */
html[data-skin="sport"] .lg-go:not(:disabled),
html[data-skin="sport"] .rg-go:not(:disabled) { background: var(--sp-btn); color: var(--sp-accent-ink); }
html[data-skin="sport"] .rg-go { box-shadow: var(--sp-btn-shine); }
html[data-skin="sport"] .lg-forgot { color: var(--sp-accent); }

/* ขั้นตอนสมัคร: เลขขั้นเป็นสี่เหลี่ยมมุมมน ขั้นที่อยู่ = สีเน้น ผ่านแล้ว = สีเน้นจาง */
html[data-skin="sport"] .rg-step i { clip-path: none; border-radius: 9px; width: 30px; height: 30px; font-family: var(--ob-display); background: var(--sp-soft); }
html[data-skin="sport"] .rg-step.done i { background: rgba(var(--sp-accent-rgb), .2); color: var(--sp-accent); }
html[data-skin="sport"] .rg-step.on i { background: var(--sp-accent); color: var(--sp-accent-ink); }
html[data-skin="sport"] .rg-step + .rg-step::before { top: 14px; }
html[data-skin="sport"] .rg-bank { border-radius: 12px; border-color: transparent; background: var(--sp-surface-2); }
html[data-skin="sport"] .rg-bank.on { border-color: var(--sp-accent); background: rgba(var(--sp-accent-rgb), .1); }

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