/* ─────────────────────────────────────────────────────────────────────────────
   JUST ORACLE AI — พื้นหลังธีม "สนามฟุตบอลกลางคืน" (CSS + SVG ล้วน ไม่โหลดรูป)
   ชั้นพื้นหลัง:  ไฟสปอตไลท์ 2 ดวง → ไฮไลท์ฟ้าตรงกลาง → ลายตัดหญ้าเป็นแถบ → ไล่เขียวเข้ม
   body::before  เส้นสนาม (SVG data URI) วางแนวนอนบนจอกว้าง / หมุนเป็นแนวตั้งบนมือถือ
   body::after   วิกเน็ตขอบมืด ให้การ์ดตรงกลางเด่นขึ้น
   ใช้ selector "html body" ให้ชนะ body {background} ที่ประกาศในแต่ละหน้า โดยไม่ต้องแก้ทุกไฟล์
   ───────────────────────────────────────────────────────────────────────────── */

html body {
    position: relative;
    isolation: isolate;                    /* ให้ ::before / ::after ที่ z-index:-1 อยู่หลังเนื้อหาแต่หน้าพื้น */
    background-color: #04100b;
    background-image:
        radial-gradient(900px 520px at 12% -8%,  rgba(255, 255, 255, 0.10), transparent 60%),
        radial-gradient(900px 520px at 88% -8%,  rgba(255, 255, 255, 0.08), transparent 60%),
        radial-gradient(1200px 700px at 50% 0%,  rgba(0, 229, 255, 0.09), transparent 65%),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.024) 0 110px, rgba(0, 0, 0, 0) 110px 220px),
        linear-gradient(180deg, #0b2a1b 0%, #082016 40%, #05130d 100%);
}

@media (min-width: 900px) {
    html body { background-attachment: fixed; }   /* เดสก์ท็อป: สนามอยู่กับที่ เนื้อหาเลื่อนผ่าน */
}

/* เส้นสนาม: สนาม 105x68 ม. (viewBox 1050x680 + ขอบ) เส้นขาวจางๆ */
html body::before {
    content: "";
    position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background-repeat: no-repeat; background-position: center; background-size: cover;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-60 -60 1170 800'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.11' stroke-width='3'%3E%3Crect x='0' y='0' width='1050' height='680'/%3E%3Cline x1='525' y1='0' x2='525' y2='680'/%3E%3Ccircle cx='525' cy='340' r='91.5'/%3E%3Crect x='0' y='138.5' width='165' height='403'/%3E%3Crect x='885' y='138.5' width='165' height='403'/%3E%3Crect x='0' y='248.5' width='55' height='183'/%3E%3Crect x='995' y='248.5' width='55' height='183'/%3E%3Cpath d='M165 266.9 A91.5 91.5 0 0 1 165 413.1'/%3E%3Cpath d='M885 266.9 A91.5 91.5 0 0 0 885 413.1'/%3E%3Crect x='-22' y='303.4' width='22' height='73.2'/%3E%3Crect x='1050' y='303.4' width='22' height='73.2'/%3E%3Cpath d='M12 0 A12 12 0 0 1 0 12'/%3E%3Cpath d='M1038 0 A12 12 0 0 0 1050 12'/%3E%3Cpath d='M0 668 A12 12 0 0 1 12 680'/%3E%3Cpath d='M1050 668 A12 12 0 0 0 1038 680'/%3E%3C/g%3E%3Cg fill='%23ffffff' fill-opacity='0.14'%3E%3Ccircle cx='525' cy='340' r='4'/%3E%3Ccircle cx='110' cy='340' r='4'/%3E%3Ccircle cx='940' cy='340' r='4'/%3E%3C/g%3E%3C/svg%3E");
}

/* จอแนวตั้ง (มือถือ): หมุนสนามให้ยาวตามจอ จะได้เห็นทั้งกรอบเขตโทษและวงกลมกลาง */
@media (orientation: portrait) {
    html body::before {
        inset: auto; top: 50%; left: 50%;
        width: 100vh; height: 100vw;
        transform: translate(-50%, -50%) rotate(90deg);
        background-size: cover;
    }
}

/* วิกเน็ต: มืดที่ขอบ สว่างกลาง เหมือนไฟสนามส่องลงมา */
html body::after {
    content: "";
    position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background:
        radial-gradient(ellipse 70% 60% at 50% 35%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.55) 100%),
        linear-gradient(180deg, rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, 0.35) 100%);
}

/* ผู้ใช้ที่ตั้งค่าลดแอนิเมชัน/ประหยัดพลังงาน: ตัดเลเยอร์ fixed ออกให้เลื่อนลื่น */
@media (prefers-reduced-motion: reduce) {
    html body { background-attachment: scroll; }
}