/* =====================================================================
   VOXEL SKIN  —  Material 之上的 Minecraft 原生視覺皮層
   設計原則：像素只用在「短拉丁 chrome / 數字 / 標籤」；
            內文與所有中文一律 Noto Sans TC、舒適行高 → 長教學好讀。
   ===================================================================== */

/* ---- 字體（latin-only 像素字 + 乾淨中文內文字） -------------------- */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Silkscreen:wght@400;700&family=Noto+Sans+TC:wght@400;500;700;900&family=JetBrains+Mono:wght@400;600&display=swap');

:root {
  --vx-pixel: "Press Start 2P", "Silkscreen", monospace;   /* hero / chrome */
  --vx-pixel-soft: "Silkscreen", "Press Start 2P", monospace; /* 標籤 / 步驟數字 */
  /* 內文：justfont 蘭陽黑體（動態子集，jf-65929）；未授權/離線時退 Noto Sans TC */
  --vx-body: "jf-lanyanghei", "Noto Sans TC", system-ui, sans-serif;
  --vx-mono: "JetBrains Mono", "Silkscreen", monospace;

  --mod-accent: #06bd37;        /* 品牌主綠（每模組可換，voxel.js 注入） */
  --mod-accent-deep: #047a26;
  --vx-thumb: 56px;             /* 行內縮圖統一尺寸：item sprite = WebGL 方塊 = 實機照 */

  /* 生態色票 */
  --vx-grass: #6fcf52;
  --vx-dirt:  #9c6b43;
  --vx-stone: #7c8896;
  --vx-gold:  #f4c542;
  --vx-redstone: #d8503f;
  --vx-emerald: #2ec07a;
  --vx-diamond: #4fd9d0;
}

/* =====================================================================
   配色 scheme（自訂；Material 讀 data-md-color-scheme 套用）
   ===================================================================== */
[data-md-color-scheme="voxel-dark"] {
  --md-default-bg-color:        #121821;
  --md-default-bg-color--light: #1b2531;
  --md-default-fg-color:        #e7eef5;
  --md-default-fg-color--light: #b9c6d2;
  --md-default-fg-color--lighter:#7e8c9a;
  --md-default-fg-color--lightest:#2a3744;
  --md-typeset-color:           #dde6ee;
  --md-typeset-a-color:         var(--mod-accent);
  --md-primary-fg-color:        #16202b;
  --md-primary-bg-color:        #eef4f8;
  --md-accent-fg-color:         var(--mod-accent);
  --md-code-bg-color:           #0d141c;
  --md-code-fg-color:           #cfe6e2;
  --vx-surface:  #1a2532;
  --vx-surface2: #223040;
  --vx-line:     #324458;
  --vx-shadow:   #05090d;
  --vx-grid:     rgba(120,150,170,.05);
  --vx-slot:      #5a636e;   /* MC 背包格中灰/石板（雙主題一致,不近黑）→ 淡色/透明 sprite 現形 */
  --vx-slot-edge: #343b44;
}
[data-md-color-scheme="voxel-light"] {
  --md-default-bg-color:        #ece3cf;   /* 羊皮紙 / 沙 */
  --md-default-bg-color--light: #f4eedd;
  --md-default-fg-color:        #21303a;
  --md-default-fg-color--light: #4a5a64;
  --md-default-fg-color--lighter:#7a8790;
  --md-default-fg-color--lightest:#d8cdb4;
  --md-typeset-color:           #25333d;
  --md-typeset-a-color:         var(--mod-accent-deep);
  --md-primary-fg-color:        #2c3a30;
  --md-primary-bg-color:        #f4eedd;
  --md-accent-fg-color:         var(--mod-accent-deep);
  --md-code-bg-color:           #e3d8bf;
  --md-code-fg-color:           #3a4a2e;
  --vx-surface:  #f6f0e0;
  --vx-surface2: #efe6d0;
  --vx-line:     #cdbf9d;
  --vx-shadow:   #bcae8b;
  --vx-grid:     rgba(90,70,40,.05);
  --vx-slot:      #5a636e;   /* 同中灰/石板（不隨亮色主題變淡）→ 淡色/透明 sprite 亮色模式也現形 */
  --vx-slot-edge: #343b44;
}

/* =====================================================================
   基底：背景方格紋 + 內文字體/行高（可讀性保險）
   ===================================================================== */
body {
  background-image:
    linear-gradient(var(--vx-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--vx-grid) 1px, transparent 1px);
  background-size: 28px 28px;
}
.md-typeset {
  font-family: var(--vx-body);
  font-size: .82rem;
  line-height: 1.85;            /* 長篇教學舒適行高 */
  letter-spacing: .01em;
}
.md-typeset p { margin: .7em 0 1.05em; }
.md-typeset code, .md-typeset pre, code { font-family: var(--vx-mono); }
.md-typeset li { margin-bottom: .35em; }

/* 圖片：像素感（sprite 放大不糊）＋方塊外框 */
.md-typeset img { image-rendering: pixelated; }
/* 內文行內物品 sprite：與方塊縮圖統一尺寸 --vx-thumb，對齊一致 */
.md-typeset p > img,
.md-typeset td > img,
.md-typeset li > img {
  height: var(--vx-thumb); width: var(--vx-thumb); object-fit: contain;
  vertical-align: middle; margin: 0 .25em; padding: 4px;
  background: var(--vx-slot);                  /* MC 背包格暗底：淡色/透明物品現形，不再像白框 */
  border: 2px solid var(--vx-slot-edge);
  box-shadow: 2px 2px 0 var(--vx-shadow),
              inset 0 0 0 1px rgba(255,255,255,.05),   /* 上緣高光 */
              inset 2px 2px 5px rgba(0,0,0,.5);        /* 內凹（背包格凹陷感） */
}

/* 實機照 / 配方圖 / 場景圖＝真實渲染，不像素化 */
.md-typeset img.vx-blockphoto,
.md-typeset img[src*="recipes/"],
.md-typeset img[src*="img/scenes/"],
.md-typeset img[src*="shots/scene_"],
.md-typeset .vx-scene img,
.vx-lb__img { image-rendering: auto; }

/* 實機場景圖（![實機](render/shots/scene_x.png) → img/scenes/，或作者直接 shots/scene_x.png）：
   大圖、方塊框，不縮成 56px item thumb */
.md-typeset img[src*="img/scenes/"],
.md-typeset img[src*="shots/scene_"] {
  display: block; width: auto; height: auto; max-width: min(560px, 100%);
  margin: 1.4rem 0; padding: 8px; object-fit: unset; vertical-align: baseline;
  background: var(--vx-surface); border: 2px solid var(--vx-line);
  box-shadow: 5px 5px 0 var(--vx-shadow); cursor: zoom-in;
}

/* 配方合成圖：預設（教學等 doc）＝精簡縮圖 + hover 放大預覽 + 點擊 lightbox */
.md-typeset img[src*="recipes/"] {
  display: inline-block; height: 5.5em; width: auto; vertical-align: middle;
  margin: .3em; padding: 4px; position: relative; z-index: 1; transform-origin: center;
  background: var(--vx-surface); border: 2px solid var(--vx-line);
  box-shadow: 3px 3px 0 var(--vx-shadow); cursor: zoom-in;
  transition: transform .12s, box-shadow .12s;
}
.md-typeset img[src*="recipes/"]:hover { transform: scale(2.4); z-index: 50; box-shadow: 6px 6px 0 var(--mod-accent); }
/* 「配方速查」doc（含 .vx-gallery 標記）＝完整圖鑑大圖，不縮放 */
.md-typeset:has(.vx-gallery) img[src*="recipes/"] {
  display: block; height: auto; max-width: min(440px, 100%); margin: 1.1rem 0; padding: 8px;
  box-shadow: 5px 5px 0 var(--vx-shadow);
}
.md-typeset:has(.vx-gallery) img[src*="recipes/"]:hover { transform: translate(-2px,-2px); box-shadow: 7px 7px 0 var(--mod-accent); }

/* 表格「配方」欄縮圖：原文字保留 + 其下加一個可點縮圖（大圖只在 lightbox） */
.md-typeset td > img.vx-recipe-cell {
  display: block; height: 3.2em; width: auto; max-width: 150px; object-fit: contain; image-rendering: auto;
  margin: .45em 0 0; padding: 4px; cursor: zoom-in;
  background: var(--vx-slot); border: 2px solid var(--vx-slot-edge);
  box-shadow: 2px 2px 0 var(--vx-shadow), inset 2px 2px 5px rgba(0,0,0,.5);
  transition: transform .08s, box-shadow .08s;
}
.md-typeset td > img.vx-recipe-cell:hover { transform: translate(-1px,-1px); box-shadow: 4px 4px 0 var(--mod-accent); }

/* 方塊實機照縮圖（GeckoLib 機器等）：放大顯示、點擊看原圖 */
.md-typeset p > img.vx-blockphoto,
.md-typeset li > img.vx-blockphoto,
.md-typeset td > img.vx-blockphoto {
  width: var(--vx-thumb); height: var(--vx-thumb); object-fit: contain; vertical-align: middle;
  padding: 4px; margin: 0 .25em; background: var(--vx-slot);
  border: 2px solid var(--vx-slot-edge);
  box-shadow: 2px 2px 0 var(--vx-shadow), inset 2px 2px 5px rgba(0,0,0,.5);
  transition: transform .08s, box-shadow .08s;
}
.md-typeset img.vx-blockphoto:hover { transform: translate(-2px,-2px); box-shadow: 5px 5px 0 var(--mod-accent); }

/* 場景實景照（嵌教學步驟） */
.vx-scene {
  margin: 1.5rem 0; padding: 8px; display: block; max-width: min(560px, 100%);
  background: var(--vx-surface); border: 2px solid var(--vx-line); box-shadow: 5px 5px 0 var(--vx-shadow);
}
.vx-scene img { display: block; width: 100%; height: auto; cursor: zoom-in; }
.vx-scene figcaption {
  font-family: var(--vx-body); font-size: .76rem; color: var(--md-default-fg-color--light);
  padding-top: .5em; border-top: 1px dashed var(--vx-line); margin-top: .5em;
}

/* =====================================================================
   標題：中文走乾淨重體 Noto；用「像素裝飾塊 / 數字」帶 voxel 感
   （不把中文像素化）
   ===================================================================== */
.md-typeset h1, .md-typeset h2, .md-typeset h3,
.md-typeset h4, .md-typeset h5 {
  font-family: var(--vx-body);
  font-weight: 900;
  letter-spacing: .01em;
  color: var(--md-default-fg-color);
}
.md-typeset h1 {
  font-size: 1.75rem; line-height: 1.3; margin: .2em 0 .9em;
  padding-bottom: .35em;
  border-bottom: 4px solid var(--mod-accent);
  position: relative;
}
.md-typeset h1::before {
  content: ""; display: inline-block;
  width: .7em; height: .7em; margin-right: .45em; vertical-align: .02em;
  background: var(--mod-accent);
  box-shadow: 3px 3px 0 var(--vx-shadow), inset -3px -3px 0 rgba(0,0,0,.25);
}
.md-typeset h2 {
  font-size: 1.28rem; margin: 2.1em 0 .8em; padding: .35em 0 .35em .75em;
  border-left: 9px solid var(--mod-accent);
  background: linear-gradient(90deg, color-mix(in srgb, var(--mod-accent) 12%, transparent), transparent 70%);
}
.md-typeset h3 {
  font-size: 1.02rem; margin: 1.6em 0 .55em; padding-left: .65em;
  border-left: 4px solid var(--vx-stone);
}
/* 步驟 chip（Step x.x / 第 X 步）：自適應寬度，完整包住內容、不溢出 */
.md-typeset h3 .step-chip,
.md-typeset h4 .step-chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: auto; white-space: nowrap; box-sizing: border-box;
  font-family: var(--vx-pixel-soft); font-weight: 700;
  font-size: .6em; line-height: 1; letter-spacing: 0; color: #10181f;
  background: var(--mod-accent);
  padding: .4em .55em; margin-right: .5em;
  box-shadow: 2px 2px 0 var(--vx-shadow);
  vertical-align: middle;
}
/* 含 CJK 的 chip（第 X 步）：用乾淨中文字體，確保完整在框內 */
.md-typeset .step-chip--cjk {
  font-family: var(--vx-body); font-weight: 900; font-size: .66em;
}

/* =====================================================================
   Header / Nav chrome：像素字（短拉丁，安全）
   ===================================================================== */
.md-header { border-bottom: 3px solid var(--mod-accent); box-shadow: 0 3px 0 var(--vx-shadow); }
.md-header__title, .md-tabs__link {
  font-family: var(--vx-pixel-soft);
  font-weight: 700; letter-spacing: .02em;
}
.md-header__title { font-size: .72rem; }
.md-tabs { background: var(--md-primary-fg-color); border-bottom: 2px solid var(--vx-line); }
.md-tabs__link { font-size: .6rem; opacity: .85; }
.md-tabs__link--active, .md-tabs__link:hover { opacity: 1; color: var(--mod-accent); }
.md-nav__title { font-family: var(--vx-pixel-soft); font-size: .62rem; letter-spacing: .02em; }
.md-search__input { font-family: var(--vx-body); }
.md-search__input::placeholder { font-family: var(--vx-pixel-soft); font-size: .7em; }

/* 側欄連結 hover 像素塊 */
.md-nav__link:hover { color: var(--mod-accent); }
.md-nav__link--active { color: var(--mod-accent) !important; font-weight: 700; }

/* =====================================================================
   桌機 IA：左欄只列「當前項目」的頁面（兩層 nav：類型 → 主題 → 項目 → 頁面）
   - content_type（模組/插件/資料包…）為 top tabs（Material navigation.tabs +
     md-nav--lifted 已隱藏非當前類型）
   - 模組 tab 內再依主題分類次分組：主題＝nav L1、模組＝nav L2、頁面＝nav L3
     （插件/資料包等無主題層：項目直接在 nav L1）
   - 兩層各自收合「非 active 手足」：L1 隱藏非當前主題、L2 隱藏同主題其他模組
     → 左欄＝當前主題 › 當前項目 › 該項目頁面
   - :has() 守門：該層有 active 項目時才收合；停在類型 index 頁（無 active）時
     全部顯示，配合卡牆（依主題分組）當換項目清單
   - 僅桌機（≥76.25em）；手機抽屜維持階層瀏覽不動
   ===================================================================== */
@media screen and (min-width: 76.25em) {
  .md-nav--primary .md-nav[data-md-level="1"] > .md-nav__list:has(> .md-nav__item--active.md-nav__item--nested)
    > .md-nav__item--nested:not(.md-nav__item--active),
  .md-nav--primary .md-nav[data-md-level="2"] > .md-nav__list:has(> .md-nav__item--active.md-nav__item--nested)
    > .md-nav__item--nested:not(.md-nav__item--active) {
    display: none;
  }
  /* lifted 類型標題（= 回類型／換項目連結）做成可點的麵包屑感 */
  .md-nav--lifted > .md-nav__list > .md-nav__item--active > .md-nav__link.md-nav__container {
    border-bottom: 2px solid var(--vx-line);
    font-family: var(--vx-pixel-soft); font-size: .62rem;
  }
}
/* 首頁分類標題＝連到分類頁（卡牆換模組入口） */
.md-typeset h3.vx-cat-head a, .md-typeset h3.vx-cat-head { color: inherit; }
.md-typeset h3.vx-cat-head a:hover { color: var(--mod-accent); }

/* =====================================================================
   通用方塊卡 / 像素陰影
   ===================================================================== */
.md-typeset .admonition, .md-typeset details {
  border: 2px solid var(--vx-line);
  border-radius: 0;
  box-shadow: 5px 5px 0 var(--vx-shadow);
  background: var(--vx-surface);
}
.md-typeset .admonition-title, .md-typeset summary {
  font-family: var(--vx-body); font-weight: 700;
}
.md-typeset table:not([class]) {
  border: 2px solid var(--vx-line);
  border-radius: 0;
  box-shadow: 5px 5px 0 var(--vx-shadow);
  font-size: .76rem;
}
.md-typeset table:not([class]) th {
  background: var(--md-primary-fg-color);
  color: var(--md-primary-bg-color);
  font-family: var(--vx-pixel-soft); font-weight: 700;
  font-size: .82em; letter-spacing: .02em;
}
.md-typeset table:not([class]) tr:hover { background: color-mix(in srgb, var(--mod-accent) 8%, transparent); }
.md-typeset blockquote {
  border-left: 6px solid var(--mod-accent);
  background: color-mix(in srgb, var(--mod-accent) 7%, transparent);
}
.md-typeset code {
  border: 1px solid var(--vx-line); border-radius: 0;
  padding: .05em .4em; font-size: .82em;
}

/* =====================================================================
   驗證徽章（✓L1 / ✓L2 / (wiki)）— 由 voxel.js 包裝
   ===================================================================== */
.vx-badge {
  font-family: var(--vx-pixel-soft); font-weight: 700;
  font-size: .58em; letter-spacing: .02em;
  padding: .3em .5em; margin: 0 .12em;
  border: 2px solid var(--vx-shadow);
  box-shadow: 2px 2px 0 var(--vx-shadow);
  vertical-align: middle; white-space: nowrap;
  display: inline-flex; align-items: center; line-height: 1;
}
.vx-badge--l1 { background: var(--vx-grass);   color: #0c1a08; }
.vx-badge--l2 { background: var(--vx-diamond); color: #06201e; }
.vx-badge--wiki { background: var(--vx-stone); color: #0e1318; }
/* 需人工實測：琥珀警示色；中文 → 用乾淨內文字體（非像素） */
.vx-badge--manual {
  background: var(--vx-gold); color: #2a1c02;
  font-family: var(--vx-body); font-weight: 700; font-size: .64em;
  letter-spacing: 0;
}
/* 生成徽章（CJK → 乾淨字體）：✓生成綠（worldgen 已生成；IE 已標明＝靜態分析非實機）/ ✗未生成紅 / 待驗灰 */
.vx-badge--gen     { background: var(--vx-grass);    color: #0c1a08; font-family: var(--vx-body); font-weight: 700; font-size: .64em; letter-spacing: 0; }
.vx-badge--nogen   { background: var(--vx-redstone); color: #fff;    font-family: var(--vx-body); font-weight: 700; font-size: .64em; letter-spacing: 0; }
.vx-badge--pending { background: var(--vx-stone);    color: #0e1318; font-family: var(--vx-body); font-weight: 700; font-size: .64em; letter-spacing: 0; opacity: .85; }
/* [反編譯]：中性灰藍（資料來自反編譯/靜態分析，非實機驗證）；中文＋括號 → 乾淨字體 */
.vx-badge--decomp  { background: #4a5a6b;            color: #e8edf2; font-family: var(--vx-body); font-weight: 700; font-size: .64em; letter-spacing: 0; }
/* [官方指南]：靛藍（資料引自模組官方遊戲內指南書/Ponder，權威來源）；中文＋括號 → 乾淨字體 */
.vx-badge--guide   { background: #42548a;            color: #eef2fb; font-family: var(--vx-body); font-weight: 700; font-size: .64em; letter-spacing: 0; }

/* worldgen 生態域色票：voxel 硬邊小方塊 + 像素陰影（background 由 build_site inline 注入） */
.md-typeset span.vx-swatch {
  display: inline-block; width: 14px; height: 14px; vertical-align: middle;
  margin: 0 1px; border: 2px solid var(--vx-shadow); border-radius: 0;
  box-shadow: 1px 1px 0 var(--vx-shadow); image-rendering: pixelated;
}

/* worldgen 截圖（生態域/結構，截圖欄）：16:9 縮圖，點擊放大；shotsmith 覆寫同路徑 */
.md-typeset td > img[src*="biomes/"],
.md-typeset td > img[src*="structures/"] {
  width: 150px; height: auto; max-width: none; object-fit: cover; image-rendering: auto;
  padding: 3px; margin: 0; cursor: zoom-in; vertical-align: middle;
  background: var(--vx-surface2); border: 2px solid var(--vx-line); box-shadow: 2px 2px 0 var(--vx-shadow);
}
.md-typeset td > img[src*="biomes/"]:hover,
.md-typeset td > img[src*="structures/"]:hover { box-shadow: 4px 4px 0 var(--mod-accent); }

/* 拖曳提示 chip（cubemap 等檢視器共用） */
.md-typeset .vx-pano__hint {
  position: absolute; left: 0; bottom: 0; z-index: 2;
  font-family: var(--vx-body); font-weight: 700; font-size: .68rem; letter-spacing: .02em;
  background: var(--mod-accent); color: #0c1118; padding: .35em .7em; box-shadow: 2px 2px 0 var(--vx-shadow);
}

/* before/after 拖曳比較滑桿（client-visual 前後對比） */
.md-typeset .vx-compare {
  position: relative; margin: 1.3rem 0; overflow: hidden; user-select: none; touch-action: pan-y;
  border: 3px solid var(--mod-accent); box-shadow: 6px 6px 0 var(--vx-shadow);
  cursor: ew-resize; background: #0a0e12; line-height: 0;
}
.md-typeset .vx-compare__img { display: block; width: 100%; height: auto; pointer-events: none; image-rendering: auto; }
.md-typeset .vx-compare__after { position: relative; z-index: 1; }
.md-typeset .vx-compare__before { position: absolute; top: 0; left: 0; z-index: 2; }
.md-typeset .vx-compare__divider {
  position: absolute; top: 0; bottom: 0; left: 50%; z-index: 3; width: 0;
  border-left: 3px solid var(--mod-accent); transform: translateX(-1.5px); pointer-events: none;
}
.md-typeset .vx-compare__handle {
  position: absolute; top: 50%; left: 0; transform: translate(-50%, -50%);
  width: 2em; height: 2em; display: flex; align-items: center; justify-content: center;
  font-family: var(--vx-body); font-weight: 900; line-height: 1;
  background: var(--mod-accent); color: #0c1118; border: 2px solid var(--vx-shadow); box-shadow: 2px 2px 0 var(--vx-shadow);
}
.md-typeset .vx-compare__lbl {
  position: absolute; top: .5em; z-index: 4; line-height: 1;
  font-family: var(--vx-body); font-weight: 700; font-size: .66rem; letter-spacing: .02em;
  padding: .3em .55em; background: rgba(8, 12, 17, .72); color: #eef4f8;
}
.md-typeset .vx-compare__lbl--b { left: .5em; }
.md-typeset .vx-compare__lbl--a { right: .5em; }

/* 360 縮圖入口（表格列截圖旁；點開 → lightbox cubemap） */
.md-typeset a.vx-360 {
  position: relative; display: inline-block; width: var(--vx-thumb); height: var(--vx-thumb);
  margin: 0 .25em; vertical-align: middle; cursor: pointer; line-height: 0; overflow: hidden;
  border: 2px solid var(--mod-accent); box-shadow: 2px 2px 0 var(--vx-shadow); transition: box-shadow .08s, transform .08s;
}
.md-typeset a.vx-360:hover { transform: translate(-1px,-1px); box-shadow: 4px 4px 0 var(--mod-accent); }
.md-typeset a.vx-360 img { width: 100%; height: 100%; object-fit: cover; display: block; image-rendering: auto; }
.md-typeset .vx-360__badge {
  position: absolute; right: -1px; bottom: -1px; z-index: 2;
  font-family: var(--vx-pixel-soft); font-weight: 700; font-size: 7px; line-height: 1;
  padding: 2px 3px; background: var(--mod-accent); color: #0c1118; border: 1px solid var(--vx-shadow);
}

/* 教學步驟內 turntable：大靜圖(frame_00) + 右下「▶ 播放」鈕 → 點擊開 lightbox 播 360 */
.md-typeset a.vx-360.vx-360--big {
  display: block; width: auto; max-width: min(560px, 100%); height: auto;
  margin: 1.4rem 0; vertical-align: baseline; overflow: visible;
  border: none; box-shadow: none; line-height: 0;
}
.md-typeset a.vx-360.vx-360--big img {
  width: 100%; height: auto; object-fit: contain; padding: 8px;
  background: var(--vx-surface); border: 2px solid var(--vx-line);
  box-shadow: 5px 5px 0 var(--vx-shadow); image-rendering: auto;
}
.md-typeset a.vx-360.vx-360--big:hover { transform: none; }
.md-typeset a.vx-360.vx-360--big:hover img { box-shadow: 7px 7px 0 var(--mod-accent); }
.md-typeset a.vx-360--big .vx-360__play {
  position: absolute; right: 18px; bottom: 18px; z-index: 3; pointer-events: none;
  font-family: var(--vx-body); font-weight: 700; font-size: .74rem; line-height: 1;
  padding: .5em .85em; background: var(--mod-accent); color: #0c1118;
  border: 2px solid var(--vx-shadow); box-shadow: 2px 2px 0 var(--vx-shadow);
}
.md-typeset a.vx-360--big:hover .vx-360__play { background: #fff; }
/* turntable 大圖 figure + 圖說（作者 alt：「架設示意（未驗證運作）：…」誠實標示） */
.md-typeset figure.vx-turnfig { margin: 1.4rem 0; max-width: min(560px, 100%); }
.md-typeset figure.vx-turnfig a.vx-360.vx-360--big { margin: 0; }
.md-typeset figure.vx-turnfig > img { margin: 0; display: block; }
.md-typeset .vx-turnfig__cap {
  font-family: var(--vx-body); font-size: .76rem; line-height: 1.6;
  color: var(--md-default-fg-color--light);
  padding-top: .5em; margin-top: .5em; border-top: 1px dashed var(--vx-line);
}

/* 真 360 cubemap 檢視器（three.js；只在 lightbox 內，lazy-init；在 body 下非 .md-typeset） */
.vx-cubemap {
  position: relative; overflow: hidden;
  border: 3px solid var(--mod-accent); box-shadow: 6px 6px 0 #05090d;
  background: #0a0e12; cursor: grab; touch-action: none;
}
.vx-cubemap:active { cursor: grabbing; }
.vx-cubemap canvas { display: block; width: 100%; height: 100%; }
.vx-lb--360 .vx-cubemap--lb { width: min(86vw, 84vh); height: min(86vw, 84vh); margin: 0; }

/* 結構環繞 turntable 檢視器（lightbox 內，純圖序列拖曳 scrub） */
.vx-turn {
  position: relative; width: min(86vw, 84vh); height: min(86vw, 84vh); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  border: 3px solid var(--mod-accent); box-shadow: 6px 6px 0 #05090d;
  background: #0a0e12; cursor: grab; touch-action: none; user-select: none;
}
.vx-turn:active { cursor: grabbing; }
.vx-turn__img { max-width: 100%; max-height: 100%; display: block; pointer-events: none; image-rendering: auto; }

/* worldgen 廣角截圖 gallery（shotsmith 回填後用；現為文字佔位） */
.vx-shot-gallery {
  display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); margin: 1.4rem 0;
}
.vx-shot-gallery figure {
  margin: 0; padding: 6px; background: var(--vx-surface);
  border: 2px solid var(--vx-line); box-shadow: 5px 5px 0 var(--vx-shadow);
}
.vx-shot-gallery img { display: block; width: 100%; height: auto; cursor: zoom-in; }
.vx-shot-gallery figcaption { font-family: var(--vx-body); font-size: .76rem; color: var(--md-default-fg-color--light); padding-top: .4em; }

/* =====================================================================
   首頁 HERO
   ===================================================================== */
.vx-hero {
  position: relative; overflow: hidden;
  margin: -1.2rem -.8rem 2.4rem;
  padding: 4.2rem 1.5rem 3.4rem;
  text-align: center;
  background:
    radial-gradient(120% 90% at 50% -10%, color-mix(in srgb, var(--mod-accent) 22%, transparent), transparent 60%),
    repeating-linear-gradient(0deg, transparent 0 26px, var(--vx-grid) 26px 27px),
    repeating-linear-gradient(90deg, transparent 0 26px, var(--vx-grid) 26px 27px),
    var(--md-default-bg-color);
  border-bottom: 4px solid var(--mod-accent);
}
.vx-hero__kicker {
  font-family: var(--vx-pixel-soft); font-weight: 700;
  font-size: .62rem; letter-spacing: .18em;
  color: var(--mod-accent); margin-bottom: 1.1rem;
}
.vx-hero__title {
  font-family: var(--vx-pixel);
  font-size: clamp(1.3rem, 4.5vw, 2.7rem);
  line-height: 1.5; margin: 0 auto 1.1rem; max-width: 18ch;
  color: var(--md-default-fg-color);
  text-shadow: 4px 4px 0 var(--vx-shadow), 8px 8px 0 color-mix(in srgb, var(--mod-accent) 35%, transparent);
}
.vx-hero__title .em { color: var(--mod-accent); }
.vx-hero__sub {
  font-family: var(--vx-body); font-weight: 500;
  font-size: .95rem; line-height: 1.9; color: var(--md-default-fg-color--light);
  max-width: 40ch; margin: 0 auto 2rem;
}
.vx-cta {
  display: inline-flex; align-items: center; gap: .5em;
  font-family: var(--vx-pixel-soft); font-weight: 700; font-size: .72rem;
  padding: .9em 1.5em; color: #0c1118;
  background: var(--mod-accent);
  border: 3px solid var(--vx-shadow);
  box-shadow: 5px 5px 0 var(--vx-shadow);
  transition: transform .07s, box-shadow .07s;
}
.vx-cta:hover { transform: translate(-2px,-2px); box-shadow: 7px 7px 0 var(--vx-shadow); color:#0c1118; }
.vx-cta:active { transform: translate(2px,2px); box-shadow: 2px 2px 0 var(--vx-shadow); }
.vx-cta--ghost { background: transparent; color: var(--mod-accent); }

/* 漂浮像素方塊裝飾 */
.vx-hero__blocks { position:absolute; inset:0; pointer-events:none; z-index:0; }
.vx-hero__blocks i {
  position:absolute; display:block;
  width: var(--s,18px); height: var(--s,18px);
  background: var(--c, var(--mod-accent));
  box-shadow: inset -3px -3px 0 rgba(0,0,0,.3);
  opacity:.5; animation: vx-float 7s ease-in-out infinite;
}
@keyframes vx-float { 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-16px) rotate(8deg)} }
.vx-hero > * { position: relative; z-index: 1; }

/* HERO 內三欄「這站在做什麼」 */
.vx-pitch { display:grid; gap:1rem; grid-template-columns:repeat(3,1fr); margin:2.6rem 0; }
.vx-pitch__c {
  border:2px solid var(--vx-line); background:var(--vx-surface);
  box-shadow:5px 5px 0 var(--vx-shadow); padding:1.2rem 1.1rem; text-align:left;
}
.vx-pitch__c h3 { margin:.2em 0 .5em; font-size:1rem; font-weight:900; border:0; padding:0; }
.vx-pitch__c .ic { font-size:1.6rem; display:block; margin-bottom:.4rem; }
.vx-pitch__c p { font-size:.8rem; line-height:1.8; color:var(--md-default-fg-color--light); margin:0; }
@media (max-width:720px){ .vx-pitch{grid-template-columns:1fr;} }

/* =====================================================================
   模組卡片牆
   ===================================================================== */
.mc-card-wall, .vx-card-wall {
  display:grid; gap:1.2rem;
  grid-template-columns:repeat(auto-fill,minmax(255px,1fr));
  margin:1.6rem 0;
}
.mc-card {
  --accent: var(--mod-accent);
  display:flex; gap:.9rem; align-items:flex-start;
  padding:1.1rem; text-decoration:none; color:inherit;
  background:var(--vx-surface); border:2px solid var(--vx-line);
  border-top:5px solid var(--accent);
  box-shadow:6px 6px 0 var(--vx-shadow);
  transition:transform .08s, box-shadow .08s;
}
.mc-card:hover { transform:translate(-3px,-3px); box-shadow:9px 9px 0 var(--vx-shadow); }
.mc-card--off { opacity:.62; cursor:default; }
.mc-card img, .mc-card__ph {
  width:46px; height:46px; flex:0 0 46px; image-rendering:pixelated;
  background:var(--vx-surface2); border:2px solid var(--vx-line);
  padding:3px; box-shadow:2px 2px 0 var(--vx-shadow);
}
.mc-card__ph { position:relative; display:grid; place-items:center; font-size:1.6rem; line-height:1; }
.mc-card__ph:empty::after { content:"?"; font-family:var(--vx-pixel-soft); color:var(--vx-stone); font-size:1rem; }
.mc-card__body h3 { margin:0 0 .35em; font-size:1.04rem; font-weight:900; border:0; padding:0; }
.mc-card__body h3 small { font-family:var(--vx-body); font-weight:500; font-size:.7em; color:var(--md-default-fg-color--lighter); }
.mc-card__body p { margin:0 0 .7em; font-size:.76rem; line-height:1.7; color:var(--md-default-fg-color--light); }
.mc-card__meta { display:flex; align-items:center; gap:.6em; }
.mc-ver { font-family:var(--vx-mono); font-size:.62rem; color:var(--md-default-fg-color--lighter); }
.mc-tag {
  display:inline-flex; align-items:center; white-space:nowrap; line-height:1;
  font-family:var(--vx-body); font-weight:700; font-size:.62rem;   /* CJK：乾淨字體不溢出 */
  padding:.34em .55em; border:2px solid var(--vx-shadow); box-shadow:2px 2px 0 var(--vx-shadow);
}
.mc-tag--ready   { background:var(--vx-grass);  color:#0c1a08; }
.mc-tag--wip     { background:var(--vx-gold);   color:#1f1602; }
.mc-tag--planned { background:var(--vx-stone);  color:#0e1318; }
/* BER 即時渲染、無靜態圖的方塊 sprite：虛線框 + help 游標（hover 見 tooltip 說明） */
.md-typeset img.vx-ber { border-style: dashed !important; cursor: help; }

/* hybrid 交付的其他形式（forms[] 非主 content_type）→ accent 描邊小章 */
.mc-form {
  display:inline-flex; align-items:center; white-space:nowrap; line-height:1;
  font-family:var(--vx-body); font-weight:700; font-size:.58rem;
  padding:.3em .5em; color:var(--accent,#06bd37);
  border:2px solid var(--accent,#06bd37); box-shadow:2px 2px 0 var(--vx-shadow);
}

/* 每模組頁頂端版本條：資源版本 + 伺服器版本 */
.vx-verbar { display:flex; flex-wrap:wrap; gap:.5em; margin:.2rem 0 1.1rem; }
.vx-verbar .vx-vchip {
  display:inline-flex; align-items:center; gap:.5em; line-height:1;
  padding:.34em .6em; border:2px solid var(--vx-line); box-shadow:2px 2px 0 var(--vx-shadow);
  background:var(--md-default-bg-color); font-size:.66rem;
}
.vx-verbar .vx-vchip b {
  font-family:var(--vx-pixel-soft); font-weight:700; font-size:.84em;
  color:var(--mod-accent,#06bd37); letter-spacing:.02em;
}
.vx-verbar .vx-vchip span { font-family:var(--vx-mono); color:var(--md-default-fg-color); }

/* 「取得模組」連結列（教學頁頂部，版本條下方） */
.vx-getmod { display:flex; flex-wrap:wrap; align-items:center; gap:.5em; margin:-.4rem 0 1.3rem; }
.vx-getmod__t { font-family:var(--vx-pixel-soft); font-weight:700; font-size:.62rem; color:var(--md-default-fg-color--light); }
.vx-getmod__lnk {
  display:inline-flex; align-items:center; line-height:1; font-family:var(--vx-body); font-weight:700; font-size:.66rem;
  padding:.4em .7em; color:#0c1118 !important; background:var(--mod-accent,#06bd37);
  border:2px solid var(--vx-shadow); box-shadow:2px 2px 0 var(--vx-shadow); text-decoration:none;
  transition:transform .08s, box-shadow .08s;
}
.vx-getmod__lnk:hover { transform:translate(-1px,-1px); box-shadow:3px 3px 0 var(--vx-shadow); }

/* =====================================================================
   配方速查卡（recipes.md）
   ===================================================================== */
.recipe-grid { display:grid; gap:1.1rem; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); margin:1.4rem 0; }
.recipe-card {
  background:var(--vx-surface); border:2px solid var(--vx-line);
  border-top:5px solid var(--mod-accent);
  box-shadow:5px 5px 0 var(--vx-shadow); padding:.9rem;
}
.recipe-card--norecipe { opacity:.72; }
.rc-head { display:flex; align-items:center; gap:.6rem; margin-bottom:.7rem;
  border-bottom:2px dashed var(--vx-line); padding-bottom:.6rem; }
.rc-icon {
  width:52px; height:52px; flex:0 0 52px; image-rendering:pixelated;
  background:var(--vx-surface2); border:2px solid var(--vx-line); padding:4px;
  box-shadow:2px 2px 0 var(--vx-shadow);
}
.rc-icon--ph { position:relative; }
.rc-icon--ph::after{ content:"▢"; position:absolute; inset:0; display:grid; place-items:center; color:var(--vx-stone);}
.rc-id { display:flex; flex-direction:column; gap:.15em; min-width:0; }
.rc-name { font-weight:900; font-size:.92rem; }
.rc-id code { font-size:.62rem; background:transparent; border:0; padding:0; color:var(--md-default-fg-color--lighter); }
.rc-note { font-size:.72rem; color:var(--md-default-fg-color--lighter); font-style:italic; }
.rc-recipe { display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; padding:.5rem 0; }
.rc-recipe + .rc-recipe { border-top:1px solid var(--vx-line); }
.rc-station {
  flex-basis:100%; font-family:var(--vx-pixel-soft); font-weight:700; font-size:.56rem;
  color:var(--mod-accent); letter-spacing:.02em; margin-bottom:.2em;
}
.rc-ings { display:flex; flex-wrap:wrap; gap:.35rem; flex:1; }
.ing { display:inline-flex; align-items:center; gap:.25em;
  background:var(--vx-surface2); border:2px solid var(--vx-line); padding:.2em .4em .2em .2em;
  font-size:.72rem; }
.ing img, .ing-box { width:30px; height:30px; image-rendering:pixelated; flex:0 0 30px; }
.ing-box { background:repeating-conic-gradient(var(--vx-stone) 0 25%, transparent 0 50%) 0/8px 8px; border:1px solid var(--vx-line); }
.ing-name { white-space:nowrap; }
.ing-count { font-family:var(--vx-mono); font-weight:600; font-size:.85em; color:var(--mod-accent); }
.rc-arrow { font-size:1.1rem; color:var(--mod-accent); padding:0 .1em; }
.rc-result { display:inline-flex; align-items:center; gap:.4em;
  background:color-mix(in srgb, var(--mod-accent) 12%, transparent);
  border:2px solid var(--mod-accent); padding:.25em .5em; }
.rc-result .rc-icon { width:38px; height:38px; flex-basis:38px; }
.rc-extra { font-family:var(--vx-mono); font-size:.62rem; color:var(--vx-gold);
  border:1px solid var(--vx-gold); padding:.1em .35em; }

/* =====================================================================
   字典 / 下載
   ===================================================================== */
.mod-accent-dot{ display:inline-block; width:.7em; height:.7em; background:var(--c); box-shadow:2px 2px 0 var(--vx-shadow); vertical-align:.02em; }
.dl-btn {
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--vx-pixel-soft); font-weight:700; font-size:.72rem;
  padding:.85em 1.3em; color:#0c1118; text-decoration:none;
  background:var(--mod-accent); border:3px solid var(--vx-shadow);
  box-shadow:5px 5px 0 var(--vx-shadow); transition:transform .07s, box-shadow .07s;
}
.dl-btn:hover { transform:translate(-2px,-2px); box-shadow:7px 7px 0 var(--vx-shadow); color:#0c1118; }
.dl-btn:active { transform:translate(2px,2px); box-shadow:2px 2px 0 var(--vx-shadow); }
.dl-meta { font-size:.8em; opacity:.7; }

/* =====================================================================
   3D 方塊縮圖 + lightbox
   ===================================================================== */
.vx-block3d {
  display:inline-block; position:relative; padding:0; margin:0 .25em;
  width:var(--vx-thumb); height:var(--vx-thumb);   /* 與 item sprite 同尺寸、正方形 */
  vertical-align:middle; cursor:pointer; line-height:0;
  background:var(--vx-slot); border:2px solid var(--vx-slot-edge);
  box-shadow:3px 3px 0 var(--vx-shadow), inset 2px 2px 5px rgba(0,0,0,.5);
  transition:transform .08s, box-shadow .08s;
}
.vx-block3d:hover { transform:translate(-1px,-1px); box-shadow:4px 4px 0 var(--mod-accent); }
.vx-block3d__cv { width:100%; height:100%; display:block; image-rendering:pixelated; }
.vx-block3d__tag {
  position:absolute; right:-2px; bottom:-2px;
  font-family:var(--vx-pixel-soft); font-weight:700; font-size:7px; line-height:1;
  padding:2px 3px; background:var(--mod-accent); color:#0c1118;
  border:1px solid var(--vx-shadow);
}
/* 配方卡內的圖示也可被升級成 3D，維持尺寸 */
.ing .vx-block3d { width:30px !important; height:30px !important; vertical-align:middle; }
.rc-icon.vx-block3d, .vx-block3d.rc-icon { width:52px; height:52px; }

.vx-lb {
  position:fixed; inset:0; z-index:9999;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:
    repeating-linear-gradient(0deg, transparent 0 26px, rgba(255,255,255,.03) 26px 27px),
    repeating-linear-gradient(90deg, transparent 0 26px, rgba(255,255,255,.03) 26px 27px),
    rgba(8,12,17,.92);
  backdrop-filter:blur(2px);
  animation:vx-lb-in .12s ease-out;
}
@keyframes vx-lb-in { from{opacity:0} to{opacity:1} }
.vx-lb__chrome {
  position:absolute; top:0; left:0; right:0; display:flex; align-items:center; justify-content:space-between;
  padding:1rem 1.2rem; gap:1rem;
}
.vx-lb__title { font-family:var(--vx-body); font-weight:900; font-size:1.05rem; color:#eef4f8;
  border-left:7px solid var(--mod-accent); padding-left:.6em; }
.vx-lb__close {
  font-family:var(--vx-pixel-soft); font-size:.8rem; color:#0c1118; cursor:pointer;
  background:var(--mod-accent); border:3px solid #05090d; box-shadow:3px 3px 0 #05090d;
  width:2.4em; height:2.4em; line-height:1;
}
.vx-lb__close:hover { transform:translate(-1px,-1px); box-shadow:4px 4px 0 #05090d; }
.vx-lb__cv { width:min(70vw,70vh); height:min(70vw,70vh); cursor:grab; touch-action:none; image-rendering:pixelated; }
.vx-lb__cv:active { cursor:grabbing; }
/* 配方大圖 lightbox */
.vx-lb--img { cursor:zoom-out; }
.vx-lb__img {
  max-width:90vw; max-height:82vh; image-rendering:pixelated;
  background:var(--vx-surface); padding:10px;
  border:3px solid var(--mod-accent); box-shadow:8px 8px 0 #05090d;
}
.vx-lb__hint {
  position:absolute; bottom:1.1rem; font-family:var(--vx-pixel-soft); font-size:.6rem;
  letter-spacing:.05em; color:#9fb0bd;
}

/* 退化成 2D 的方塊（全面套用時用）：小角標 */
.vx-2d-tag { position:relative; }

/* =====================================================================
   進度 CTA / 章節 checkpoint 過場（減壓 + 成就感）
   兩種標記都吃：<div class="vx-progress-cta"> 與 admonition !!! progress
   ===================================================================== */
.md-typeset .vx-progress-cta,
.md-typeset .admonition.progress,
.md-typeset details.progress {
  position: relative; margin: 2.8rem 0; padding: 1.7rem 1.35rem 1.35rem;
  background: color-mix(in srgb, var(--mod-accent) 9%, var(--vx-surface));
  border: 0; border-left: 9px solid var(--mod-accent);
  outline: 3px solid var(--mod-accent); outline-offset: -3px;
  box-shadow: 7px 7px 0 var(--vx-shadow);
  font-size: .82rem; line-height: 1.9;
}
/* 頂部「🚩 進度檢查點」chip（中文用乾淨字體，不溢出） */
.md-typeset .vx-progress-cta::before {
  content: "🚩 進度檢查點";
  position: absolute; top: 0; left: -3px; transform: translateY(-50%);
  display: inline-flex; align-items: center;
  font-family: var(--vx-body); font-weight: 900; font-size: .72rem; letter-spacing: .02em;
  background: var(--mod-accent); color: #0c1118;
  padding: .3em .7em; box-shadow: 2px 2px 0 var(--vx-shadow); white-space: nowrap;
}
/* admonition 版：把標題列當 chip */
.md-typeset .admonition.progress > .admonition-title,
.md-typeset details.progress > summary {
  font-family: var(--vx-body); font-weight: 900;
  background: color-mix(in srgb, var(--mod-accent) 16%, transparent);
  border: 0; margin: -1.7rem -1.35rem 1rem; padding: .6em 1.35em;
}
.md-typeset .admonition.progress > .admonition-title::before,
.md-typeset details.progress > summary::before {
  content: "🚩"; background: none; -webkit-mask: none; mask: none; margin-right: .3em;
}
/* recap ✅ / lookahead ➡️ 的 <b> 標籤：accent 強調、好掃 */
.md-typeset .vx-progress-cta b,
.md-typeset .vx-progress-cta strong,
.md-typeset .admonition.progress b {
  color: var(--mod-accent-deep); font-weight: 900;
}
[data-md-color-scheme="voxel-dark"] .md-typeset .vx-progress-cta b,
[data-md-color-scheme="voxel-dark"] .md-typeset .vx-progress-cta strong {
  color: var(--mod-accent);
}

/* 術語互連：連到中英字典的術語 */
.md-typeset a.vx-term {
  color: var(--md-typeset-a-color); text-decoration: none;
  border-bottom: 1px dotted var(--mod-accent); cursor: help;
}
.md-typeset a.vx-term:hover { background: color-mix(in srgb, var(--mod-accent) 16%, transparent); }
/* 字典術語列錨點：跳轉不被 header 蓋住 + 命中高亮 */
.md-typeset tbody tr[id] { scroll-margin-top: 4.5rem; }
.md-typeset tbody tr[id]:target { background: color-mix(in srgb, var(--mod-accent) 20%, transparent); }

/* 捲動條（像素） */
* { scrollbar-width: thin; scrollbar-color: var(--mod-accent) var(--vx-surface); }

/* 頁尾 */
.md-footer { border-top:3px solid var(--mod-accent); }
.md-footer-meta { background:var(--md-primary-fg-color); }