/* Dart_huhu 官網 —— 共用樣式（0819）
 *
 * ═══ 背景：0819 起是靜態圖，⛔不再是每次 resize 重跑的 canvas ═══
 *
 * 使用者 0819 裁示「背景弄成圖片、不再隨意變動」。
 * 圖是 `docs/CloudFlare/prototype/bake-wall.cjs` 從原型的 drawWall() 烘出來的，
 * 參數凍結在那支腳本頂端（腳本執行時會自我斷言，對不上就報錯）。
 *
 * 🔴 兩張圖的差別是**涵蓋多寬的視窗**，⛔不是 devicePixelRatio 的兩檔。
 *    [讀碼 0819] 原型的 CELLPX = 8、CSS_PER_CELL = 4
 *    ⇒ 一個木頭格 = 8 個圖片像素 = 4 個 CSS px，圖片解析度恆為 CSS 的兩倍。
 *      bg-day.png       3840 圖片 px ÷ 2 = 涵蓋到 1920 CSS px 寬
 *      bg-day-wide.png  7680 圖片 px ÷ 2 = 涵蓋到 3840 CSS px 寬
 *
 * 🔴 background-size 一定要寫成「圖寬的一半 px」，⛔不可以用 cover / contain / 100%。
 *    理由：那三個會算出非整數的縮放比，每一格木紋都被重新取樣
 *    ⇒ 就是使用者 0816 抱怨過的「字有疊影」的同一個病，**而且不會報錯**。
 *    寫死一半之後：DPR=1 時是 2:1 整數縮小，DPR=2 時是 1:1，兩邊都乾淨。
 *
 * 圖比視窗窄時（超寬螢幕）露出來的部分用 --wall-flat 補。
 * 那個色是[實測 0819]從圖裡數出來的最大宗色（日間 40.7%、黃昏同比例），
 * ⛔不是憑感覺挑的。 */

:root {
  --wall-flat: #4c341d;
  --wall-img: url("bg-day.png");
  --wall-img-w: 1920px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --wall-flat: #362311;
    --wall-img: url("bg-dusk.png");
  }
}

:root[data-theme="dark"] {
  --wall-flat: #362311;
  --wall-img: url("bg-dusk.png");
}

/* 超過 1920 CSS px 寬才換大張的。⛔不要無條件載大張 ——
 * 675 KB vs 178 KB，而絕大多數視窗用不到那些像素。 */
@media (min-width: 1921px) {
  :root {
    --wall-img: url("bg-day-wide.png");
    --wall-img-w: 3840px;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) { --wall-img: url("bg-dusk-wide.png"); }
  }
  :root[data-theme="dark"] { --wall-img: url("bg-dusk-wide.png"); }
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--wall-flat);
  min-height: 100vh;
}

/* 牆固定在視窗，⛔不捲動、⛔不平鋪、⛔不視差 ——
 * 沿用原型 `#bg canvas` 那條註解的三個「不」。 */
#bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-color: var(--wall-flat);
  background-image: var(--wall-img);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: var(--wall-img-w) auto;
  image-rendering: pixelated;
  pointer-events: none;
}

/* ═══ 像素字型（0819 補）═══
 *
 * 🔴 兩支字型是站上像素字的**必要條件**，⛔不是裝飾。
 *    [讀碼] site.js 的 PX_FONT 寫死 '"Cubic 11","Ark Pixel 12",sans-serif'
 *    ⇒ 這兩支載不到就整批掉回系統 sans-serif，像素字全毀，**而且不報錯**。
 *    webview/README.md §6 把這條列為紅字（「這一條沒過，整頁會掉回系統字型」）。
 *
 * 🔴 光有 @font-face ⛔還不夠。canvas 的 fillText **不等字型** ——
 *    當下沒載好就用備援畫，畫完⛔不會自己補畫。
 *    ⇒ 每一頁都必須接 document.fonts.ready 再重畫一次（見兩頁的 <script>）。
 *    原型 wall-mock.html 切換韓文那段註解記過同一件事。
 *
 * 授權：兩支都是 SIL Open Font License，授權全文隨檔附在 fonts/ 底下
 * （OFL-Cubic-11.txt / OFL-ArkPixel.txt）。⛔不要只搬字型不搬授權。
 *
 * 大小：Cubic 11 約 391 KB、Ark Pixel 12 約 543 KB。font-display: swap
 * ⇒ 字型還沒到的時候頁面先用備援顯示，⛔不留白屏。 */

@font-face {
  font-family: 'Cubic 11';
  src: url('fonts/Cubic_11.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Ark Pixel 12';
  src: url('fonts/ark-pixel-12px-proportional-ko.otf.woff2') format('woff2');
  font-display: swap;
}