/* ============================================================================
   全站共用：配色 ＋ 趴在頁面頂端的毛孩（跟著滑鼠轉頭）。

   用法（每一頁三行）：
     <link rel="stylesheet" href="毛孩.css" />
     <script src="毛孩.js" defer></script>
     頁面自己的 <style> 放在 毛孩.css 後面

   ---------------------------------------------------------------------------
   ⚠️ 2026-08-31：把「整站是一台螢幕」的外框整個拿掉了。

   拿掉的原因有兩個，都不是喜好問題：
     1. 外框（上框 ＋ 底座 ＋ 上面留給耳朵的牆）**吃掉 54% 的視窗高度**。
        在沒有內容的測試頁上看不出來，一放真的內容，CTA 按鈕直接掉到第一屏外面。
     2. 用 CSS 畫的螢幕怎麼調都像「相框」不像「機器」。試過四種
        （奶油色／深色／深色＋材質／窄邊框，見 `螢幕質感測試.html`），
        深色有改善但仍不夠；要真的像就得生一張螢幕照片切九宮格，成本不划算。

   **貓還是趴在頁面頂端，只是不再趴在一台螢幕上。**
   舊的版本留在 `螢幕感測試.html` 和 `螢幕質感測試.html`，不要刪 ——
   之後要回頭找那些數字（外框厚度、底座比例）還用得到。
   ============================================================================ */

:root{
  /* --- 配色（跟桌寵設定視窗同一套，兩邊才像同一個品牌）--- */
  --paper:#F7EEE1;       /* 頁面底色 */
  --card:#FBF3E7;
  --sheet:#FEFCF7;       /* 卡片。⚠️ 要比底紙亮很多，只差幾階等於沒差 */
  --kraft:#E6D6BC;       /* 牛皮紙。卡片放在它上面才浮得起來 */
  --sub:#F0E2CE;
  --line:#E4D3BC;
  --text:#4A3A30;        /* 暖褐，不是黑 */
  --muted:#9B8574;
  --accent:#C2553D;      /* 陶土紅。全站只有這一個強調色，不用競品的橘 */
  --on-accent:#FFF8EF;

  --band:#EFE2CE;        /* 頂端那條帶子。比頁面深一點就好，太深會變回一個框 */

  /* ⚠️ 動作影片自己的底色。裝影片的卡片一定要用這個顏色，不能用 --card ——
     影片是 contain，裝不滿的地方會留邊，卡片只要差一點點顏色那條邊就現形，
     看起來就是「框裡面還有一個框」（2026-09-02 飼主圈出來的問題）。

     ⚠️⚠️ 這個顏色**一定要在瀏覽器裡量**，不能用 ffmpeg 取像素：

         ffmpeg -pix_fmt rgb24 取到的   rgb(251,235,220)   ← 錯的
         瀏覽器實際畫出來的             rgb(253,237,222)   ← 對的

     差 2 階，剛好足夠讓那條邊看得見。我第一次就是照 ffmpeg 的數字填，
     動作那段修好了、「住在你的電腦裡」那段的內框卻還在。
     影片解碼的色彩轉換（bt709 有限範圍 → 全範圍）兩邊算法不同。

     正確量法：把 <video> 畫進 canvas 再讀像素
       const c=document.createElement('canvas');const g=c.getContext('2d');
       c.width=v.videoWidth;c.height=v.videoHeight;g.drawImage(v,0,0);
       g.getImageData(2,2,1,1).data
     換素材要重量。tools/check-site.js 會自動對，不一致會報。 */
  --clipBg:#FDEDDE;

  /* --- 立體感靠三層影子，不是靠邊框 ---
     1 貼地的細影（東西壓在紙上）
     2 中距離的擴散影（東西離開紙面）
     3 最上面一道內光（東西自己有厚度）
     少了任何一層都會變回「投影片的圖片框」。 */
  --lift:
    0 1px 2px rgba(90,60,40,.07),
    0 14px 30px -14px rgba(90,60,40,.30),
    inset 0 1px 0 rgba(255,255,255,.75);
  --lift-hi:
    0 2px 4px rgba(90,60,40,.09),
    0 26px 44px -18px rgba(90,60,40,.38),
    inset 0 1px 0 rgba(255,255,255,.85);

  /* --- 頂端的毛孩 --- */
  /* 一隻的寬度。⚠️ 尺寸要在瀏覽器 100% 縮放下定，50% 縮放看起來差一倍。
     同時限制 vw 和 vh：只用 vw 的話，筆電那種扁視窗上毛孩會太高，把內容整個推下去。 */
  /* ⚠️ 這兩個數字是**飼主自己在 tune.html 上拉出來的**（2026-09-02），不要憑感覺改。
     上限的來源：調大會蓋到導覽列（實測 13vw 時最右邊那隻壓到「像不像」）。 */
  --catUnit:min(6vw, 10.9vh);
  --catGap:-0.05;           /* 每一隻往左靠多少，單位是「一隻貓寬度的幾成」，不是 px。
                               0 = 格子貼格子　負值 = 真的重疊　0.1 = 隔開一成
                               ⚠️ 一定要用比例不能用 px —— 螢幕一大一小，同樣的 px
                                  看起來的鬆緊差很多，飼主在他的螢幕上調好的數字
                                  換一台就不對了。
                               ⚠️ 格子比毛孩寬（左右有透明留白），所以設 0 看起來還是有距離。 */

  --navH:54px;              /* 帶子最上面那條給導覽列，毛孩掛在它下面 */

  /* --- 這兩個由 毛孩.js 算出來填進來 --- */
  --petPad:0px;             /* 內容從多低開始，才不會被貓壓到 */
  --petLedgeH:0px;          /* 頂端帶子的高度 = 貓高 × 0.826 */
}

*{ box-sizing:border-box }
html{ background:var(--paper) }

/* ⚠️ 用 body.hasPet 而不是 body，特異性才贏得過各頁自己的 body 規則，
   不管 <style> 的先後順序都不會被蓋掉。 */
body.hasPet{
  margin:0;
  background:var(--paper);
  color:var(--text);
  font:16px/1.7 "Noto Sans TC","Microsoft JhengHei",ui-sans-serif,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  padding-top:var(--petPad);
  min-height:100vh;
}

/* ---------------------------------------------------------------- 頂端的毛孩 */
/* ⚠️ 這隻貓「本來就是趴在一個檯面上」畫的，不是憑空探出來的。
   量過素材（一格 1100×1203）：

       貓的上緣      3.0%
       胸口那條橫線  82.6%   ← 檯面高度。這一列的不透明寬度從 854 掉到 557
       手尖          99.4%

   82.6% 是胸口被「切平」的地方，下面只剩兩隻垂下來的手。
   **所以牠一定要有東西可以趴** —— 沒有的話那條平切線會直接露出來，
   看起來像一隻被裁掉半身的貓浮在空中。

   以前那條線被螢幕的上框蓋住，拿掉外框之後就穿幫了。
   現在改成用「頁面頂端的一條色帶」當檯面：不是螢幕、不是任何實體物件，
   就是一條比頁面深一點的橫帶，貓趴在它的下緣上。 */
.pet-perch{
  position:fixed; top:0; left:0; right:0;
  height:var(--petLedgeH);
  background:var(--band);
  z-index:20; pointer-events:none;
  /* 下緣一條細線 ＋ 往下的柔影，帶子才有厚度，貓才像真的趴在上面 */
  box-shadow:
    0 1px 0 rgba(120,90,60,.20),
    0 12px 24px -16px rgba(90,60,40,.55);
}
/* 一排毛孩：橫向並排、整組置中。
   ⚠️ 不要用「平均散在整個寬度」—— 隻數少的時候會離很遠，像各站各的。
   ⚠️ 格子本身比毛孩寬（左右有透明留白），所以間隔設 0 看起來還是有距離，
      要拉到負值才會真的貼在一起。
   毛孩比帶子高，手會垂到帶子外面 —— 這正是要的效果，所以不能 overflow:hidden。 */
/* ⚠️ 導覽列和毛孩**不能擠在同一條水平線上** —— 視窗一窄一定會撞
   （實測 784px 寬時最右邊那隻壓到導覽連結）。
   分成上下兩層：導覽列佔最上面 --navH，毛孩從那條線以下才開始。
   這樣不管視窗多寬多窄都不會撞。 */
.pet-perch{
  display:flex; align-items:flex-start; justify-content:center;
  padding-top:var(--navH);
}
.pet-perch .pet{
  flex:none;
  width:var(--catUnit);
  background-repeat:no-repeat;
  /* background-size 和 aspect-ratio 由 毛孩.js 各自填，因為每隻的序列圖規格不同 */
}
/* ⚠️ 橫向間距由 毛孩.js 的 layout() 設 margin-left，**這裡不要寫**。
   兩個原因：
     1. flex 的 gap **不吃負數**，寫負值整條宣告會被丟掉 ——
        手機那條 `--catGap:-10px` 從頭到尾沒生效過（2026-09-02 才發現）。
     2. 每一隻序列圖左右留的空白不一樣多（大佬B 7.3%，虎克 0%），
        四隻設同一個數字的話看得到的縫會差兩三倍寬。
        要各自扣掉自己的留白，那是 JS 才做得到的事。 */
.pet-perch .pet.flip{ transform:scaleX(-1) }

/* 手機：貓佔掉太多高度，縮小一點 */
@media (max-width: 720px){
  :root{ --catUnit:min(24vw, 16vh); --catGap:-0.12 }
}

/* ============================================================================
   逗貓棒游標（只在首頁最上面那一段生效，程式在 逗貓棒.js）

   ⚠️ body.wandOn 是「現在正在用逗貓棒」的狀態，藏掉系統游標。
      可以點的東西（連結、按鈕、輸入框）要留著一般游標，
      不然使用者不知道那裡能按 —— 這條不要拿掉。
   ============================================================================ */
body.wandOn{ cursor:none }
body.wandOn a,body.wandOn button,body.wandOn input,
body.wandOn textarea,body.wandOn select,body.wandOn label{ cursor:pointer }

/* ⚠️ will-change 不是裝飾，是效能。這一層蓋滿整個畫面，而且每一格都在改線的形狀。
   不把它推成獨立的一層的話，每改一次線，**底下的東西（那排貓）也要跟著重畫**。
   飼主 2026-09-02 回報「左右來回動很快會 LAG」，這是其中一個成本。 */
#wandStr{ position:fixed; left:0; top:0; z-index:59; pointer-events:none;
          width:100vw; height:100vh; overflow:visible; display:none;
          will-change:transform }
#wandFea{ position:fixed; left:0; top:0; z-index:60; pointer-events:none;
          display:none; will-change:transform }
#wandFea img{ display:block; width:100% }