/* ============================================================
   เคอร์เซอร์ประจำเว็บ — ดาวสี่แฉกแบบเดียวกับที่โปรยอยู่ทั่วหน้า
   แฉกบนซ้ายยาวกว่าแฉกอื่น ทำหน้าที่เป็นปลายชี้แทนหัวลูกศร
   จุดชี้ (hotspot) = 3 3 ซึ่งคือปลายแฉกยาวพอดี ห้ามแก้ตัวเลขนี้
   โดยไม่ขยับรูป ไม่งั้นตำแหน่งที่คลิกจะไม่ตรงกับที่ตาเห็น

   ★★ ต้องเป็น data: URI ห้ามชี้ไปที่ไฟล์ ★★
     บทเรียนเดียวกับ mask ใน zone-fx: บน file:// เบราว์เซอร์โหลดรูป
     ข้ามโปรโตคอลไม่ได้ เคอร์เซอร์จะเงียบ ๆ กลับไปเป็นลูกศรมาตรฐาน
     โดยไม่มี error ให้เห็น — หาสาเหตุยากมาก

   ★ ทำไมต้องมีสองโทน
     โซนชมพูพื้นสว่าง โซนน้ำเงินพื้นมืด ดาวสีเดียวจะจมไปกับพื้นด้านหนึ่งเสมอ
     ชมพู = ทองขอบแดงเข้ม · น้ำเงิน = ขาวขอบกรมท่า

   ⚠ ข้อแลกเปลี่ยนที่รู้อยู่: เคอร์เซอร์กำหนดเองจะทับการตั้งค่า
     "ตัวชี้ขนาดใหญ่/คอนทราสต์สูง" ของระบบปฏิบัติการ
     จึงจำกัดไว้เฉพาะเครื่องที่มีเมาส์จริง และคงเคอร์เซอร์มาตรฐานไว้
     ในช่องกรอกข้อความกับของที่กดไม่ได้
   ============================================================ */

/* เฉพาะเครื่องที่มีเมาส์จริง — มือถือ/แท็บเล็ตไม่มีเคอร์เซอร์อยู่แล้ว
   และถ้าใส่ไปจะทำให้เบราว์เซอร์บางตัวโหลดรูปทิ้งเปล่า ๆ */
@media (hover: hover) and (pointer: fine) {

  html[data-zone="pink"] { cursor: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='32'%20height='32'%20viewBox='0%200%2032%2032'%3E%3Cpath%20d='M2.48%202.48%20Q15.00%2014.09%2019.60%2010.40%20Q15.91%2015.00%2021.36%2021.36%20Q15.00%2015.91%2010.40%2019.60%20Q14.09%2015.00%202.48%202.48%20Z'%20fill='%23F2C45A'%20stroke='%235A1536'%20stroke-width='1.8'%20stroke-linejoin='round'/%3E%3C/svg%3E") 3 3, auto; }
  html[data-zone="blue"] { cursor: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='32'%20height='32'%20viewBox='0%200%2032%2032'%3E%3Cpath%20d='M2.48%202.48%20Q15.00%2014.09%2019.60%2010.40%20Q15.91%2015.00%2021.36%2021.36%20Q15.00%2015.91%2010.40%2019.60%20Q14.09%2015.00%202.48%202.48%20Z'%20fill='%23EAF1FF'%20stroke='%230B1230'%20stroke-width='1.8'%20stroke-linejoin='round'/%3E%3C/svg%3E") 3 3, auto; }

  /* ของที่กดได้ = ดาวดวงเดิม + ดาวเล็กตามหลัง (ประกายวิ้ง)
     ต้องเจาะจงกว่า `button{cursor:pointer}` ใน css/base.css จึงต้องนำหน้าด้วย [data-zone] */
  [data-zone="pink"] :is(a[href], button, [role="button"], label[for], summary, select, [data-zone-btn], [data-lang-btn]) { cursor: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='32'%20height='32'%20viewBox='0%200%2032%2032'%3E%3Cpath%20d='M2.48%202.48%20Q15.00%2014.09%2019.60%2010.40%20Q15.91%2015.00%2021.36%2021.36%20Q15.00%2015.91%2010.40%2019.60%20Q14.09%2015.00%202.48%202.48%20Z'%20fill='%23FFD978'%20stroke='%235A1536'%20stroke-width='1.8'%20stroke-linejoin='round'/%3E%3Cpath%20d='M21.26%2020.26%20Q25.50%2024.02%2027.62%2022.38%20Q25.98%2024.50%2029.74%2028.74%20Q25.50%2024.98%2023.38%2026.62%20Q25.02%2024.50%2021.26%2020.26%20Z'%20fill='%23FFF1BE'%20stroke='%235A1536'%20stroke-width='1.2'%20stroke-linejoin='round'/%3E%3C/svg%3E") 3 3, pointer; }
  [data-zone="blue"] :is(a[href], button, [role="button"], label[for], summary, select, [data-zone-btn], [data-lang-btn]) { cursor: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='32'%20height='32'%20viewBox='0%200%2032%2032'%3E%3Cpath%20d='M2.48%202.48%20Q15.00%2014.09%2019.60%2010.40%20Q15.91%2015.00%2021.36%2021.36%20Q15.00%2015.91%2010.40%2019.60%20Q14.09%2015.00%202.48%202.48%20Z'%20fill='%23FFFFFF'%20stroke='%230B1230'%20stroke-width='1.8'%20stroke-linejoin='round'/%3E%3Cpath%20d='M21.26%2020.26%20Q25.50%2024.02%2027.62%2022.38%20Q25.98%2024.50%2029.74%2028.74%20Q25.50%2024.98%2023.38%2026.62%20Q25.02%2024.50%2021.26%2020.26%20Z'%20fill='%23BBD8FF'%20stroke='%230B1230'%20stroke-width='1.2'%20stroke-linejoin='round'/%3E%3C/svg%3E") 3 3, pointer; }

  /* ช่องกรอกข้อความคงเคอร์เซอร์มาตรฐาน — ตัวชี้รูปดาวทำให้เล็งตำแหน่งตัวอักษรไม่ได้ */
  input, textarea { cursor: text; }

  /* ของที่กดไม่ได้ต้องไม่หลอกว่ากดได้ */
  [disabled], [aria-disabled="true"] { cursor: not-allowed; }
}