/* ==========================================================================
   The Cyclink — 像素菠蘿冰自訂滑鼠游標（pineapple cursor）
   建立：2026-10-11 ｜ 第 6 輪造型更新：2026-10-11 ｜ 第 18 輪（加透明包裝袋）造型更新：2026-10-11 ｜ 狀態：已修改，待驗收
   --------------------------------------------------------------------------
   這個檔案是「自訂游標」的唯一來源：所有 cursor 設定都集中在下面單一
   @media 區塊內，沒有散落在 HTML 元素或行內 style，第三方元件不受影響。

   ● 只在「有滑鼠 + 精準指標」的桌面裝置生效：
       @media (hover: hover) and (pointer: fine)
     手機、平板、觸控裝置完全不會套用（媒體查詢不成立，等同沒有這個檔案）。
   ● 沒有使用 `*` 萬用選擇器，沒有 JavaScript、沒有跟隨滑鼠的假游標、
     沒有尾巴／粒子／旋轉／跟隨動畫。
   ● 圖片載入失敗時，瀏覽器會自動退回 URL 後面的關鍵字：
       一般區域 → auto（普通箭嘴）    連結／按鈕 → pointer（手指）
   ● 保留原生游標：文字輸入／可編輯區域（文字 I-beam）、可拖拉／調整大小／
     range、file、color、iframe、地圖等特殊控制；disabled 元素顯示 not-allowed。

   ── 如何關閉（還原原生箭嘴及手指），任一項即可 ──
     1. 移除 <html> 上的 class="pc-cursor"（該頁即時還原；文字以外的檔案不變）
     2. 移除該頁的 <link href="css/pineapple-cursor.css" rel="stylesheet">
     3. 把 css/pineapple-cursor.css 改名或刪除（全站還原）
     4. 註解掉下面整個 @media 區塊

   ── 素材與 hotspot（點擊定位點）紀錄 ──
     實際套用：assets/cursors/pineapple-cursor-32.png  32 × 32 px（1x）
     hotspot：x = 7, y = 7（32px 圖的像素座標）＝ 菠蘿片左上「咬痕平台」最左邊那一粒
              描邊像素（左上方向最外的一粒），不在中央圓孔、也不在透明咬痕內。
              一般區域與可點擊元素使用同一個 hotspot，切換時不會跳動。
     ※ 第 6 輪造型更新（2026-10-11）：像素圖案改為逐格照抄客戶補回的參考圖，
        hotspot 由第 4 輪的 (2, 9) 改為 (3, 7)——同一個值由參考圖自己印出，
        亦由產生器按同一條選點規則重新推算得到（build/gen_cursor_pineapple.py 有自我檢查）。
        舊 (2, 9) 在新圖案上會落在透明咬痕內，點擊點會偏離圖案，故必須一併更新。
     ※ 第 18 輪造型更新（2026-10-11）：加透明包裝袋（客戶：「加一個透明嘅包裝袋喺出邊，
        露一半出嚟」，其後指定「袋要四方形，唔洗收口」）。菠蘿片由 29×29 縮為 21×21
        貼在畫布 (6, 2)，上半露喺四方形袋口外、下半插入袋；hotspot 由 (3, 7) 改為
        (7, 7)（同一條選點規則由新 ART 重新推算：click 點仍然落在「咬痕平台」最左的
        描邊像素上，唔會被包裝袋嘅輪廓線帶走）。下面兩處 cursor 宣告同步改為 7 7。
      未套用（備用，見 docs/website-refinement.md 第 4／6 輪、build/gen_cursor_pineapple.py
      第 18 輪說明）：
       assets/cursors/pineapple-cursor-64.png  64 × 64（2x，hotspot 14 14）
       assets/cursors/pineapple-cursor-40.png  40 × 40（試驗版：32px 圖最近鄰 1.25x，未套用）
   ========================================================================== */

@media (hover: hover) and (pointer: fine) {

  /* ① 一般桌面瀏覽區域（body 及其沒有自己 cursor 規則的子孫）：菠蘿冰 */
  html.pc-cursor,
  html.pc-cursor body {
    cursor: url("../assets/cursors/pineapple-cursor-32.png") 7 7, auto;
  }

  /* ② 連結、按鈕、可點擊卡片（a.card 等）、切換控制：同一張菠蘿冰，
        fallback 為 pointer。以下 class 清單＝網站本身已標示為可點擊的元件
        （見 css/styles.css、css/book.css 的 cursor: pointer），
        這樣才不會出現「手指＋菠蘿冰」兩種游標混用的情況。
        :not([disabled]):not([aria-disabled="true"]) 令已停用元件不會被當成
        可點擊（交由 ⑤ 顯示 not-allowed）。 */
  html.pc-cursor :is(
      a[href], area[href], button, select, label, summary,
      input[type="checkbox"], input[type="radio"], input[type="submit"],
      input[type="button"], input[type="reset"], input[type="color"],
      [role="button"], [role="link"], [role="tab"], [role="switch"],
      [role="checkbox"], [role="radio"], [role="menuitem"],
      .btn, .chip, .aud-nav-opt, .lang-btn, .nav__burger, .nav__menu-group-btn,
      .aud-tab, .acc__head, .finder__option, .result-restart, .course__toggle,
      .demo-banner__close, .book-btn
    ):not([disabled]):not([aria-disabled="true"]) {
    cursor: url("../assets/cursors/pineapple-cursor-32.png") 7 7, pointer;
  }

  /* ③ 保留原生：文字輸入欄、textarea、可編輯區域 → 文字游標（I-beam） */
  html.pc-cursor :where(
      input[type="text"], input[type="search"], input[type="email"], input[type="tel"],
      input[type="url"], input[type="password"], input[type="number"], input[type="date"],
      input[type="time"], input[type="datetime-local"], input[type="month"],
      input[type="week"], input:not([type]), textarea,
      [contenteditable=""], [contenteditable="true"]
    ) {
    cursor: text;
  }

  /* ④ 保留原生：可拖拉／調整大小／其他需要特殊游標的控制（一律不覆蓋） */
  html.pc-cursor :where(
      input[type="range"], input[type="file"],
      [draggable="true"], iframe, embed, object,
      .leaflet-container, .leaflet-interactive, .maplibregl-map,
      [contenteditable="plaintext-only"]
    ) {
    cursor: auto;
  }

  /* ⑤ disabled／aria-disabled：不要顯示為可點擊 */
  html.pc-cursor :where([disabled], [aria-disabled="true"]) {
    cursor: not-allowed;
  }
}