/* 楓之谷世界 · 挑戰者服 - 經典冒險童話主題（羊皮紙、楓木邊框與冒險者世界觀） */
:root {
  --bg: #f5f0e4;
  --bg-sky: #e9f4ff;
  --bg-paper: #fdfbf7;
  --card: #ffffff;
  /* ⚠️ 「畫在有色/深色底上的字」專用，**不跟著深色模式翻轉**。
     之前這些地方寫的是 var(--card)：淺色模式下它是白色，看起來沒問題，
     但深色模式 --card 會變成 #1f1a14 —— 底色（登入頁 #0b1016、實況 #0f1218、
     橘色按鈕、Discord 藍）都是寫死的不會跟著變，結果就是深字配深底，**字直接不見**。
     這是 2026-10-03 代幣遷移時我自己弄出來的，Kevin 回報「字體看不到」。 */
  --on-solid: #ffffff;
  /* 「白字要畫在上面」的橘色。品牌橘 #e65100 配白字只有 3.79:1，
     而按鈕字是 14px 粗體 —— 不到 WCAG 的大字門檻（18.66px 粗體），所以要 4.5:1。
     漸層的**上端更亮更難過**（#ff7a36 只有 2.60:1），所以兩端都要換，
     不是只改下端。這一組是 4.74 / 6.62，看起來還是楓谷橘，只是深一階。
     ⚠️ --accent 本身不動 —— 它還用在文字、邊框、焦點框上，那些是深色字配淺底。 */
  --accent-ink: #c74b00;
  --accent-ink-deep: #a83500;
  --card-parchment: #fdfaf2;
  --card-wood: #faf5eb;
  --wood-border: #dfcaa8;
  --wood-border-dark: #b89a74;
  --line: rgba(184, 154, 118, 0.28);
  --line-strong: rgba(184, 154, 118, 0.55);
  --line-gold: rgba(214, 158, 46, 0.5);
  
  --text: #2d3748;
  --text-dark: #1a202c;
  --text-brown: #4a2d11;
  --text-title: #381e08;
  --muted: #545e6d;   /* 2026-10-15 再深一階：#687486 配白卡 4.7，但壓在頁面底（光暈＋官方地圖）或紙色格子上只剩 3.9~4.4 */
  --muted-brown: #725a40;   /* 同上：#836a50 在頁尾／頁面底只有 4.2 */
  
  --accent: #e65100;
  /* 「橘色的字」專用（2026-10-15 全站對比稽核）：--accent #e65100 當字只有 3.3~3.7:1（14px 以下全都不及格）。
     --accent 留給底色、邊框、焦點框；字一律 --accent-text。深色模式翻成亮橘（深底上 7:1）。 */
  --accent-text: #a83f00;
  --gold-text: #87500f;   /* 金色字（原本 --accent-gold #b7791f 當字 3.5:1） */
  --accent-orange: #f26522;
  --accent-hover: #ff7836;
  --accent-gold: #b7791f;
  --accent-gold-light: #d69e2e;
  --gold: #975a16;
  --green: #2e7d32;
  --blue: #1976d2;
  --purple: #7b1fa2;
  --red: #c62828;
  
  --r: 16px;
  --r-sm: 10px;
  --shadow-wood: 0 8px 24px rgba(100, 65, 25, 0.09), 0 2px 6px rgba(100, 65, 25, 0.05);
  --shadow-card: 0 4px 16px rgba(90, 60, 20, 0.07);
  --shadow-hover: 0 12px 32px rgba(120, 75, 20, 0.15);

  /* ── 互動狀態的底色（2026-10-12）──
     表格列 hover / 表頭 / 籌碼底原本寫死 #fff8f0、#fcf9f2、#f7efe1：淺色模式沒事，
     深色模式字翻成米白、底還是米白 → hover 那一列直接消失。改成代幣，深色區塊一起翻。 */
  --row-hover: #fff8f0;
  --th-bg: #fcf9f2;
  --chip-bg: #f7efe1;
  --input-bg: #fdfbf7;
  --sk-hi: #f3eadb;          /* 骨架屏掃光的亮帶 */
  /* 有色的淺底（2026-10-15 對比稽核：原本寫死 #fff3e0 / #fdeeee…，深色模式字翻亮、底沒翻 → 字不見） */
  --tint-warm: #fff3e0;
  --tint-red: #fdeeee;
  --paper-edge: #f6ead4;              /* 紙張漸層的下緣（怪物書本、盤子） */
  --paper-glow: rgba(255, 250, 240, .9);
  --red-text: #9b2f2f;
  --gloss: rgba(255, 255, 255, .5);   /* 卡片左上斜向柔光（深色模式幾乎拿掉，不然深底被刷亮一角、亮字讀不到） */
  --green-text: #1e7a45;
  --tint-green: #eefaf2;

  /* ── 動態代幣（2026-10-12 全站統一）──
     三階時長：--dur-1 微互動（hover/active）、--dur-2 狀態切換、--dur-3 進場／展開。
     曲線：--ease-out 一般進場、--ease-spring 帶一點回彈（只給小元件，大面板會暈）、
     --ease-in-out 來回對稱（轉場、翻頁）。
     ⚠️ 不要再寫 `.16s ease` 這種散值 —— 時間不一致，動起來就不像同一個產品。
     prefers-reduced-motion 時三個時長一起歸零（見下方），所有用代幣的過渡自然就直接就位。 */
  --dur-1: 120ms; --dur-2: 220ms; --dur-3: 360ms;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --stagger: 55ms;           /* 交錯進場每一階的間隔（enhance.js 捲動浮現、fx 換頁進場共用） */
  --dur-fade: var(--dur-3);  /* 純 opacity 淡入；reduced-motion 時是 1ms 而不是 0（見下方說明） */
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  /* 🍁 官方地圖背景（site/hero/106010000.jpg ＝ 火焰之地）壓在光暈底下。
     原本只有三層 radial-gradient ＋ 純米色，乾淨但沒有質感，看起來像任何一個產品官網。
     疊一層很淡（.10）的官方背景就有景深，而且不會干擾文字 —— 參考
     deadline-defense 的做法（那邊是 bg_home.jpg + 漸層 + background-attachment: fixed）。 */
  background:
    radial-gradient(1300px 700px at 50% -80px, #fff4d1 0%, transparent 75%),
    radial-gradient(1000px 600px at 95% 15%, #e1f1ff 0%, transparent 65%),
    radial-gradient(800px 500px at 5% 45%, #eff9ee 0%, transparent 60%),
    linear-gradient(180deg, rgba(245, 240, 228, 0.93), rgba(245, 240, 228, 0.97)),
    url("/hero/106010000.jpg") center / cover no-repeat,
    var(--bg);
  background-attachment: fixed;
  color: var(--text);
  font: 15px/1.65 "Noto Sans TC", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  /* 🖱️ 官方楓之谷白手套鼠標（UI.wz Basic.img/Cursor）。素材從 deadline-defense 搬過來，
     三個檔共 1.7KB。數字是熱點座標 —— 不是隨便填的，填錯點擊位置會偏。 */
  cursor: url("/ui/cursor.png") 5 2, auto;
}
/* 可點元素 → 官方指向手指（Cursor 12）／按下 → Cursor 13 */
a, button:not(:disabled), [role="button"], summary, label, select, .tab, .chip, .qbox a {
  cursor: url("/ui/cursor-link.png") 10 2, pointer;
}
a:active, button:active:not(:disabled), [role="button"]:active {
  cursor: url("/ui/cursor-click.png") 6 2, pointer;
}
/* ⚠️ 自訂鼠標在觸控裝置上沒有意義，而且 iOS Safari 對 url() cursor 支援不一致 →
   指標不是滑鼠時整組關掉，回系統預設。 */
@media (hover: none), (pointer: coarse) {
  html, body, a, button, [role="button"], summary, label, select { cursor: auto; }
  a, button:not(:disabled), [role="button"] { cursor: pointer; }
}
a { color: inherit; text-decoration: none; }
img { image-rendering: pixelated; }
b, strong { font-weight: 700; color: var(--text-dark); }
.muted { color: var(--muted); }
small { color: var(--muted); }

/* ── 頂部導覽列：維多利亞晨曦港灣質感 ── */
.top {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 18px; padding: 11px 24px;
  /* ⚠️ 這裡原本有 backdrop-filter: blur(14px)。導覽列是 sticky、**永遠在畫面上**，
     等於每一幀捲動都要把整條的背景重新模糊一次 —— 這是全站最貴的一筆。
     底色已經 94% 不透明，模糊幾乎看不出來，拿掉純賺。 */
  background: rgba(255, 252, 246, 0.97);
  border-bottom: 2px solid var(--wood-border);
  box-shadow: 0 4px 20px rgba(130, 90, 35, 0.08);
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand .leaf {
  width: 30px; height: 30px;
  color: var(--accent-text);
  fill: currentColor;
  filter: drop-shadow(0 2px 6px rgba(242, 101, 34, 0.4));
  transition: transform var(--dur-2) var(--ease-spring);
}
.brand:hover .leaf { transform: rotate(-10deg) scale(1.1); }
.brand-t { display: flex; flex-direction: column; line-height: 1.15; }
.brand-t b { font-size: var(--fs-md); letter-spacing: .5px; color: var(--text-title); font-weight: 900; }
.brand-t small {
  font: 800 10.5px Nunito, sans-serif;
  letter-spacing: 2px;
  color: var(--accent-text);
  text-transform: uppercase;
}
.nav {
  display: flex; gap: 6px; margin-left: 12px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; white-space: nowrap;
}
.nav::-webkit-scrollbar { display: none; }
.nav a {
  padding: 8px 15px; border-radius: var(--rad-pill);
  color: #555d6e; font-weight: 700; font-size: var(--fs-xs);
  transition: color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
  border: 1px solid transparent;
}
.nav a:hover { color: var(--text-title); background: rgba(223, 202, 168, 0.28); }
.nav a.on {
  background: linear-gradient(180deg, var(--accent-ink) 0%, var(--accent-ink-deep) 100%);
  color: var(--on-solid);
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: 0 4px 14px rgba(230, 81, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.nav .live-link { color: var(--gold-text); font-weight: 800; display: inline-flex; align-items: center; gap: 5px; }
.nav .live-link:hover { color: var(--accent-text); }

/* 全站搜尋框：冒險者手冊索引風 */
.search { margin-left: auto; position: relative; }
.search input {
  width: 260px; padding: 9px 18px; border-radius: var(--rad-pill);
  border: 1.5px solid var(--wood-border);
  background: var(--card); color: var(--text-dark);
  font: inherit; outline: none;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out), width var(--dur-2) var(--ease-out);
}
.search input::placeholder { color: var(--muted-brown); }   /* 原本 #8a7865 配白底 4.0:1 */
.search input:focus {
  border-color: var(--accent-orange);
  background: var(--card);
  box-shadow: 0 0 0 3px rgba(242, 101, 34, 0.18);
}
.qbox {
  position: absolute; right: 0; top: 48px; width: 380px; max-height: 60vh;
  overflow: auto; background: var(--card);
  border: 2px solid var(--wood-border); border-radius: var(--r);
  box-shadow: 0 18px 45px rgba(90, 60, 20, 0.16); padding: 8px;
}
.qbox a {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border-radius: var(--rad-sm); color: var(--text-dark); font-weight: 600;
}
.qbox a:hover, .qbox a.active { background: var(--row-hover); color: var(--accent-text); }
.qbox .tag {
  font-size: var(--fs-3xs); padding: 2px 9px; border-radius: var(--rad-pill);
  background: var(--card-wood); color: var(--text-brown); font-weight: 700;
  border: 1px solid var(--wood-border);
}
.qbox img { width: 32px; height: 32px; object-fit: contain; }

/* ── 版型容器與冒險風標題 ── */
main { max-width: 1220px; margin: 0 auto; padding: 26px 20px 70px; }
.loading {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 12px; width: 100%; padding: 56px 20px;
  color: var(--accent-text); font-weight: 800; font-size: var(--fs-sm);
}
.loading::before {
  content: ""; width: 22px; height: 22px;
  border: 3px solid var(--wood-border); border-top-color: var(--accent-orange);
  border-radius: 50%; animation: mapleSpin .75s linear infinite;
}
@keyframes mapleSpin { to { transform: rotate(360deg); } }

h1 {
  font-size: var(--fs-xl); margin: 8px 0 6px; letter-spacing: .4px;
  color: var(--text-title); font-weight: 900;
}
/* 全站統一一致的冒險風 h2 標題（楓葉標記 + 楓木金裝飾線） */
h2 {
  font-size: var(--fs-md); margin: 36px 0 16px; font-weight: 900;
  display: flex; align-items: center; gap: 10px; color: var(--text-title);
}
h2::before {
  content: "🍁";
  font-size: var(--fs-md);
  filter: drop-shadow(0 1px 2px rgba(230, 81, 0, 0.3));
}
h2::after {
  content: ""; flex: 1; height: 2px;
  background: linear-gradient(90deg, var(--wood-border-dark) 0%, rgba(223, 202, 168, 0.4) 60%, transparent 100%);
  border-radius: var(--rad-sm);
}
.sub { color: var(--muted); margin: 0 0 18px; font-size: var(--fs-xs); }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.crumb { color: var(--muted-brown); font-size: var(--fs-2xs); margin-bottom: 12px; font-weight: 600; }
.crumb a { color: var(--gold-text); }
.crumb a:hover { color: var(--accent-text); text-decoration: underline; }

/* ── 官網首頁 Hero：弓箭手村晨曦、藍天森林與像素冒險感 ── */
.hero {
  position: relative; overflow: hidden; border-radius: var(--rad-lg);
  min-height: 330px; display: flex; align-items: flex-end; padding: 40px;
  background:
    radial-gradient(circle at 85% 20%, rgba(255, 230, 150, 0.45) 0%, transparent 50%),
    linear-gradient(180deg, #cbe5ff 0%, #eef6ff 45%, #fff6e8 100%);
  border: 2px solid var(--wood-border);
  box-shadow: 0 16px 40px rgba(110, 70, 20, 0.1);
  margin-bottom: 28px;
}
/* 像素雲朵與楓葉落英環境效果 */
.hero::before {
  content: "";
  position: absolute; top: 12px; right: 28px; width: 140px; height: 60px;
  background: radial-gradient(circle at 40% 50%, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0) 65%);
  border-radius: 50%; filter: blur(6px); pointer-events: none;
}
.hero .bg {
  position: absolute; inset: 0; background-size: cover; background-position: center bottom;
  filter: saturate(1.2) brightness(0.96); transform: scale(1.02);
  mix-blend-mode: multiply; opacity: 0.35;
}
.hero .shade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(235, 245, 255, 0.15) 0%, rgba(255, 248, 235, 0.88) 60%, rgba(255, 246, 230, 0.98) 100%);
}
.hero .in { position: relative; z-index: 2; }
.hero h1 {
  font-size: var(--fs-3xl); margin: 0; font-weight: 900;
  color: #381a03;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9);
  letter-spacing: .5px;
}
.hero p {
  margin: 10px 0 20px; color: #4a2e15; max-width: 680px;
  font-size: var(--fs-sm); font-weight: 600; line-height: 1.7;
}

/* 冒險者風格按鈕 */
.btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px;
  border-radius: var(--rad-pill);
  background: linear-gradient(180deg, var(--accent-ink) 0%, var(--accent-ink-deep) 100%);
  color: var(--on-solid); font-weight: 800; font-size: var(--fs-xs);
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 4px 16px rgba(230, 81, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transition: transform var(--dur-1) var(--ease-out), filter var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
  cursor: pointer;
}
.btn:hover { filter: brightness(1.07); transform: translateY(-2px); box-shadow: 0 8px 22px rgba(230, 81, 0, 0.45); }
.btn.ghost {
  background: var(--card); color: var(--text-title);
  border: 1.5px solid var(--wood-border);
  box-shadow: 0 2px 8px rgba(90, 60, 20, 0.08);
}
.btn.ghost:hover { background: var(--row-hover); border-color: var(--accent-orange); color: var(--accent-text); }

/* ── 數據磁磚（Tiles）：冒險者告示牌徽章 ── */
.tiles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 16px; margin-top: 18px;
}
.tile {
  background: linear-gradient(180deg, var(--card) 0%, var(--card-wood) 100%);
  border: 2px solid var(--wood-border);
  border-radius: var(--r); padding: 16px 20px;
  box-shadow: var(--shadow-wood);
  position: relative; overflow: hidden;
  transition: transform var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
.tile:hover { transform: translateY(-3px); border-color: var(--wood-border-dark); }
.tile::before {
  content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 4.5px;
  background: linear-gradient(180deg, #ff7a36, #e65100);
}
.tile b {
  display: block; font: 900 30px Nunito, sans-serif;
  color: var(--accent-text); line-height: 1.1;
}
.tile span { color: var(--muted-brown); font-size: var(--fs-xs); font-weight: 700; margin-top: 4px; display: block; }

/* ── 羊皮紙面板與卡片統一系統（Parchment & Wood Cards） ── */
.panel {
  background: var(--card); border: 2px solid var(--wood-border);
  border-radius: var(--r); padding: 20px 22px;
  box-shadow: var(--shadow-wood);
}
.panel h3 {
  margin: 0 0 14px; font-size: var(--fs-sm); color: var(--text-title); font-weight: 900;
  border-bottom: 2px solid #f2e4cf; padding-bottom: 9px;
  display: flex; align-items: center; gap: 8px;
}
.panel + .panel { margin-top: 18px; }

/* 篩選工具列 */
.filters {
  display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
  margin: 12px 0 20px; padding: 15px 18px;
  background: var(--card); border: 2px solid var(--wood-border);
  border-radius: var(--r); box-shadow: var(--shadow-card);
}
.filters input[type=search], .filters select {
  padding: 8px 14px; border-radius: var(--rad-md);
  border: 1.5px solid var(--wood-border); background: var(--bg-paper);
  color: var(--text-dark); font: inherit; outline: none; font-weight: 600;
  transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out);
}
.filters input[type=search]:focus, .filters select:focus {
  border-color: var(--accent-orange); background: var(--card);
}
.filters label { color: var(--text-brown); font-size: var(--fs-xs); display: flex; gap: 6px; align-items: center; font-weight: 700; }
.filters .range { display: flex; gap: 6px; align-items: center; }
.filters input[type=number] {
  width: 72px; padding: 7px 8px; border-radius: var(--rad-sm);
  border: 1.5px solid var(--wood-border); background: var(--bg-paper);
  color: var(--text-dark); font: inherit; text-align: center; font-weight: 700;
}
.chips { display: flex; gap: 7px; flex-wrap: wrap; }
.chip {
  padding: 6px 15px; border-radius: var(--rad-pill);
  background: var(--chip-bg); border: 1.5px solid var(--wood-border);
  color: var(--text-brown); font-size: var(--fs-2xs); font-weight: 700;
  cursor: pointer; user-select: none;
  transition: color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.chip:hover { color: var(--accent-text); border-color: var(--accent-orange); background: var(--row-hover); }
.chip.on {
  background: linear-gradient(180deg, var(--accent-ink) 0%, var(--accent-ink-deep) 100%);
  color: var(--on-solid); border-color: var(--accent);
  box-shadow: 0 3px 10px rgba(230, 81, 0, 0.3);
}
.chip.on .muted, .chip.on small { color: inherit; }   /* 實心橘底上的灰字（轉蛋機率、篩選筆數）只有 1:1 */

/* ── 資訊卡片網格（Cards Grid） ── */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; }
.grid.wide { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.card {
  position: relative; background: var(--card);
  border: 2px solid var(--wood-border); border-radius: var(--r);
  overflow: hidden; transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
  display: block; box-shadow: var(--shadow-card);
}
.card:hover {
  transform: translateY(-4px);
  border-color: var(--wood-border-dark);
  box-shadow: var(--shadow-hover);
}
.card .thumb {
  aspect-ratio: 16/10;
  background: radial-gradient(circle at center, var(--card) 10%, #f6edd9 100%);
  border-bottom: 2px solid var(--wood-border);
}
.card .thumb.none { display: grid; place-items: center; color: var(--muted-brown); font-size: var(--fs-2xs); font-weight: 600; }
.card .body { padding: 14px 16px; background: var(--card); }
.card .title {
  font-weight: 800; display: flex; justify-content: space-between;
  gap: 8px; align-items: baseline; color: var(--text-title); font-size: var(--fs-sm);
}
.card .title small { color: var(--accent-text); font-weight: 800; white-space: nowrap; }
.card .meta { color: var(--muted); font-size: var(--fs-2xs); margin-top: 3px; font-weight: 500; }
.lv { font: 900 13px Nunito, sans-serif; color: var(--gold-text); }
.badge {
  position: absolute; top: 10px; left: 10px;
  padding: 3px 11px; border-radius: var(--rad-pill);
  background: rgba(255, 255, 255, 0.96);
  font-size: var(--fs-3xs); font-weight: 800; color: var(--text-brown);
  border: 1.5px solid var(--wood-border); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* ── 怪物卡（Mob card） ── */
.mob { display: flex; gap: 14px; align-items: center; padding: 14px 16px; }
.mob .sp {
  width: 78px; height: 78px; display: grid; place-items: center;
  background: radial-gradient(circle, var(--card) 40%, var(--card-wood) 100%);
  border: 1.5px solid var(--wood-border); border-radius: var(--rad-md); flex: none;
}
.mob .sp img { max-width: 72px; max-height: 72px; object-fit: contain; }
.mob .name { font-weight: 800; color: var(--text-title); font-size: var(--fs-xs); }
.mob .stats { display: flex; gap: 10px; color: var(--muted); font-size: var(--fs-2xs); }
.mob .stats b { color: var(--text-dark); font-weight: 700; }

/* ── 裝備卡（Gear card） ── */
.gear { display: flex; gap: 12px; align-items: center; padding: 12px 15px; }
.gear .ic {
  width: 48px; height: 48px; display: grid; place-items: center;
  background: radial-gradient(circle, var(--card) 40%, var(--card-wood) 100%);
  border: 1.5px solid var(--wood-border); border-radius: var(--rad-md); flex: none;
}
.gear .ic img { max-width: 40px; max-height: 40px; object-fit: contain; }
.gear .name { font-weight: 800; color: var(--text-title); font-size: var(--fs-xs); }
.gear .line { color: var(--muted); font-size: var(--fs-2xs); }
.stat {
  display: inline-block; padding: 2px 8px; border-radius: var(--rad-sm);
  background: var(--card-wood); border: 1px solid var(--wood-border);
  font-size: var(--fs-3xs); color: var(--text-brown); font-weight: 700;
  margin: 2px 2px 0 0;
}
.stat.hi { border-color: var(--accent-gold); background: var(--card-wood); color: var(--gold-text); }

/* ── 詳情頁（Detail） ── */
.detail { display: grid; grid-template-columns: 1.1fr .9fr; gap: 22px; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; font-size: var(--fs-xs); }
.kv dt { color: var(--muted-brown); font-weight: 700; }
.kv dd { margin: 0; color: var(--text-dark); font-weight: 600; }
.bigthumb {
  border-radius: var(--r); overflow: hidden; aspect-ratio: 16/10;
  background: #f6eedc center/cover; box-shadow: var(--shadow-card);
  border: 2px solid var(--wood-border);
}
/* ── 官方小地圖面板（單張地圖頁，app.js officialMiniMap）──
   舞台寬 = min(容器寬, 原圖 × 2.5)，但不小於原圖 1 倍：手機上 437px 的弓箭手村塞不進 358px 時
   在 .mm-scroll 裡橫捲，不撐破頁面。標記用百分比定位，跟著舞台一起縮放。 */
.mm-panel { margin: 0 0 18px; }
.mm-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.mm-mark { width: 38px; height: 38px; flex: none; image-rendering: pixelated; }
.mm-title { display: flex; flex-direction: column; min-width: 0; }
.mm-name { font-weight: 900; color: var(--text-title); font-size: var(--fs-md); line-height: 1.2; }
.mm-bgm { color: var(--muted-brown); font-size: var(--fs-xs); font-weight: 600; }
.mm-legend { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--muted-brown); font-size: var(--fs-2xs); font-weight: 700; }
.mm-legend img { width: 16px; height: 16px; image-rendering: pixelated; }
.mm-spawn-ico { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); border: 1px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .25); }
.mm-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
.mm-stage {
  position: relative; width: min(100%, calc(var(--mm-w, 320) * 2.5px)); min-width: calc(var(--mm-w, 320) * 1px);
  aspect-ratio: var(--mm-w, 16) / var(--mm-h, 10);
  background: #dbe7ef; border: 2px solid var(--wood-border); border-radius: var(--r); overflow: hidden;
}
.mm-img { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.mm-portal, .mm-spawn { position: absolute; transform: translate(-50%, -50%); }
.mm-portal { width: 24px; height: 24px; display: grid; place-items: center; z-index: 2; border-radius: 50%; }
.mm-portal img { width: 16px; height: 16px; image-rendering: pixelated; display: block; transition: transform var(--dur-2) var(--ease-out); }
a.mm-portal:hover img, a.mm-portal:focus-visible img { transform: scale(1.4); }
a.mm-portal:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.mm-spawn { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); border: 1px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .25); z-index: 1; }
.hero-mob {
  display: grid; place-items: center; min-height: 240px;
  background: radial-gradient(circle at 50% 70%, var(--card) 0%, var(--tint-warm) 65%, #f6ebd5 100%);
  border-radius: var(--r); border: 2px solid var(--wood-border);
}
.hero-mob img { max-height: 180px; max-width: 90%; object-fit: contain; transform: scale(2); image-rendering: pixelated; }
.hero-mob.small img { transform: scale(1.4); }

/* 資料表格 */
table { width: 100%; border-collapse: collapse; font-size: var(--fs-xs); }
td.num, th.num { font-variant-numeric: tabular-nums lining-nums; text-align: right; }
th, td { padding: 10px 12px; text-align: left; border-bottom: 1px solid #eee1cb; vertical-align: middle; }
th { color: var(--text-title); font-weight: 800; font-size: var(--fs-2xs); background: var(--th-bg); }
tr:hover td { background: var(--row-hover); }
td .ic {
  display: inline-grid; place-items: center; width: 28px; height: 28px;
  vertical-align: middle; margin-right: 6px;
  background: var(--card-wood); border-radius: var(--rad-sm);
}
td .ic img { max-width: 24px; max-height: 24px; }
.list a:hover { color: var(--accent-text); }
.pill {
  display: inline-block; padding: 2px 10px; border-radius: var(--rad-pill);
  background: var(--card-wood); border: 1px solid var(--wood-border);
  font-size: var(--fs-3xs); font-weight: 700; margin: 2px 4px 2px 0;
}
.pill.job { border-color: rgba(25, 118, 210, 0.4); color: var(--blue); background: #edf5fd; }
.pill.ok { border-color: rgba(46, 125, 50, 0.4); color: var(--green); background: #eff8f0; }
.pill.no { border-color: rgba(198, 40, 40, 0.4); color: var(--red); background: var(--tint-red); }

/* ── 職業介紹（Classes Tree）：五大家族冒險風徽飾 ── */
.jtree-start { display: flex; align-items: center; gap: 14px; margin: 16px 0 10px; flex-wrap: wrap; }
.jtree-start .jcard { flex: 0 0 260px; --fc: #718096; }
.jtree { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin: 14px 0 12px; align-items: start; }
.famcol {
  background: var(--card);
  border: 2px solid var(--wood-border); border-top: 4px solid var(--fc);
  border-radius: var(--r); padding: 16px; display: grid; gap: 12px;
  box-shadow: var(--shadow-wood);
}
.famhead { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; min-height: 48px; border-bottom: 2px solid #f2e4cf; }
.fportrait { width: 50px; max-height: 56px; flex: none; object-fit: contain; object-position: bottom; }
.famhead .fn { font: 900 18px Nunito, "Noto Sans TC", sans-serif; color: color-mix(in srgb, var(--fc) 40%, var(--text-title)); }   /* 家族色是亮色，直接當字在淺底上只有 1.4~2.4:1；跟標題色混（標題色會跟深淺模式翻，所以兩邊都讀得到） */
.famhead .fs { color: var(--muted-brown); font-size: var(--fs-2xs); font-weight: 700; }
.jemb { width: 40px; height: 40px; flex: none; object-fit: contain; }

.janim {
  display: block; flex: none; background-repeat: no-repeat; background-position: 0 0; image-rendering: pixelated;
  width: calc(var(--fw) * 1px * var(--z, .42)); height: calc(var(--fh) * 1px * var(--z, .42));
  background-size: calc(var(--fw) * 1px * var(--z, .42) * var(--n, 1)) calc(var(--fh) * 1px * var(--z, .42));
}
.jcard .janim { --z: .40; margin: -8px 0; }
.proscard .janim { --z: .38; }
.jhero .janim { --z: .95; }
.famhead .janim { --z: .42; }
.jart { width: 54px; height: 64px; flex: none; object-fit: contain; object-position: bottom; image-rendering: pixelated; }
.jemb.ph { display: grid; place-items: center; color: var(--fc); }
.jemb.ph .i { width: 22px; height: 22px; }
.jcard {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  background: var(--card-wood); border: 1.5px solid var(--wood-border); border-radius: var(--rad-md);
  transition: transform var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
.jcard:hover {
  border-color: var(--fc); transform: translateY(-2px);
  background: var(--card); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}
.jcard .jemb { width: 34px; height: 34px; }
.jcard .jart { width: 48px; height: 58px; margin: -6px 0; }
.jcard .n { font-weight: 800; font-size: var(--fs-xs); color: var(--text-title); }
.jcard .s { color: var(--muted-brown); font-size: var(--fs-3xs); font-weight: 600; }
.jcard.locked { opacity: .92; }   /* 2026-10-15：.55 讓「本季未開」等字只剩 1.8~3.2:1 */
.famarrow { height: 16px; position: relative; }
.famarrow::before {
  content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(180deg, var(--fc), transparent); opacity: .75;
}
.famlater { margin-top: 4px; }
.famlater summary { cursor: pointer; color: var(--muted-brown); font-size: var(--fs-2xs); font-weight: 700; padding: 4px 0; }
.famlater .jcard { margin-top: 8px; }

/* ── 職業詳情頁 Hero ── */
.jhero {
  display: flex; gap: 20px; align-items: flex-start; padding: 22px 26px; margin: 8px 0 18px;
  background: linear-gradient(135deg, var(--card) 0%, var(--card-wood) 100%);
  border: 2px solid var(--wood-border); border-left: 6px solid var(--fc);
  border-radius: var(--r); box-shadow: var(--shadow-wood);
}
.jhero .jemb { width: 62px; height: 62px; }
.jhero .jart { width: 108px; height: 128px; }
.jhero h1 { margin: 0 0 4px; color: var(--text-title); }
.jh-s { color: var(--muted-brown); font-size: var(--fs-xs); font-weight: 700; }
.jh-d { margin: 10px 0 0; color: var(--text-brown); font-size: var(--fs-xs); max-width: 72ch; font-weight: 500; }
.lockpill { background: var(--tint-red); color: var(--red); border: 1.5px solid rgba(198, 40, 40, 0.3); border-radius: var(--rad-sm); padding: 2px 9px; font-size: var(--fs-2xs); font-weight: 800; }

/* ── 外觀圖鑑（Looks）：皇家美髮店與彩妝展櫃 ── */
.lookrow {
  background: var(--card); border: 2px solid var(--wood-border); border-radius: var(--r);
  padding: 18px 20px; margin-bottom: 20px; box-shadow: var(--shadow-wood);
}
.lr-h {
  display: flex; align-items: baseline; gap: 10px; margin: 0 0 12px;
  padding-bottom: 9px; border-bottom: 2px solid #f2e4cf;
}
.lr-h b { font-size: var(--fs-sm); color: var(--text-title); font-weight: 900; }
.lr-c { display: flex; gap: 8px; flex-wrap: wrap; }
.lookgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 14px; }
.lookcell {
  margin: 0; background: radial-gradient(circle at 50% 30%, var(--card) 20%, var(--card-wood) 100%);
  border: 1.5px solid var(--wood-border); border-radius: var(--rad-md);
  padding: 12px 6px 10px; text-align: center;
  transition: transform var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
  box-shadow: 0 2px 8px rgba(90, 60, 20, 0.05);
}
.lookcell:hover {
  border-color: var(--accent-orange); transform: translateY(-4px);
  box-shadow: 0 8px 22px rgba(120, 80, 20, 0.14);
}
.lookcell img { width: 58px; height: 58px; object-fit: contain; display: block; margin: 0 auto; }
.lookcell.big img { width: 66px; height: 66px; }
.lookcell.body img { width: 74px; height: 96px; }
.lookcell figcaption { font-size: var(--fs-3xs); color: var(--text-brown); font-weight: 700; margin-top: 6px; line-height: 1.35; }
.lookcell .dia {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--gold-text); font-weight: 800; font-size: var(--fs-3xs);
  background: var(--card-wood); border: 1px solid var(--wood-border);
  padding: 2px 9px; border-radius: var(--rad-pill); margin-top: 5px;
}
.lookcell .dia::before { content: "♦"; color: var(--accent-text); }

/* ── 五大職業輪播（Famslide） ── */
.famslide {
  position: relative; display: grid; grid-template-columns: 42px 1fr 42px;
  grid-template-areas: "prev view next" "dots dots dots"; gap: 14px;
  align-items: center; background: var(--card); border: 2px solid var(--wood-border);
  border-radius: var(--r); padding: 26px; box-shadow: var(--shadow-wood);
}
.fs-slide { display: flex; gap: 26px; align-items: center; }
.fs-art-wrap {
  position: relative; padding: 18px; border-radius: var(--rad-lg);
  background: radial-gradient(circle, color-mix(in srgb, var(--fc) 22%, var(--card)) 0%, var(--card) 75%);
}
.fs-nav {
  background: var(--card-parchment); border: 1.5px solid var(--wood-border); color: var(--text-brown);
  border-radius: 50%; width: 42px; height: 42px;
  display: grid; place-items: center; font-size: var(--fs-md); font-weight: 800;
  cursor: pointer; transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.fs-nav:hover { background: var(--accent-ink); color: var(--on-solid); border-color: var(--accent); transform: scale(1.08); }
.fs-dots .fs-dot {
  width: 10px; height: 10px; border-radius: 50%; background: var(--wood-border);
  border: 1px solid transparent; cursor: pointer; transition: background-color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-spring);
}
.fs-dots .fs-dot.on { background: var(--accent-orange); transform: scale(1.3); }

/* ── 職業優缺點與技能卡片 ── */
.proscard { background: var(--card); border: 2px solid var(--wood-border); border-radius: var(--r); box-shadow: var(--shadow-wood); }
.pro { color: #1e5e3a; background: #eef8f2; border: 1.5px solid #bce2cb; border-radius: var(--rad-sm); font-weight: 800; }
.con { color: #a34710; background: var(--row-hover); border: 1.5px solid #f9d2bc; border-radius: var(--rad-sm); font-weight: 800; }

.skcard {
  border: 2px solid var(--wood-border); background: var(--card);
  border-radius: var(--rad-md); box-shadow: var(--shadow-card); transition: border-color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
.skcard:hover { border-color: var(--accent-orange); transform: translateY(-2px); }
.skcard .skicon {
  border-radius: var(--rad-md); border: 1.5px solid var(--wood-border); background: var(--card-parchment);
}
.skcard summary { color: var(--text-title); cursor: pointer; font-weight: 800; padding: 6px 0; }

/* ── 掛機中冒險者（Players）：冒險者公會告示欄 ── */
.players { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.player {
  display: flex; gap: 12px; align-items: center; padding: 14px 16px;
  background: var(--card); border: 2px solid var(--wood-border); border-radius: var(--r);
  box-shadow: var(--shadow-wood); transition: transform var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
.player:hover { transform: translateY(-2px); border-color: var(--accent-orange); }
.player img { width: 58px; height: 74px; object-fit: contain; }
.player .n { font-weight: 800; color: var(--text-title); font-size: var(--fs-xs); }
.player .m { color: var(--muted); font-size: var(--fs-2xs); font-weight: 500; }
.dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: var(--green); box-shadow: 0 0 6px rgba(46, 125, 50, 0.4); margin-right: 6px;
}
.empty { color: var(--muted-brown); padding: 30px; text-align: center; border: 2px dashed var(--wood-border); border-radius: var(--r); font-weight: 600; }

/* ── 任務步驟（Steps）與賽季規則（Rules）：任務卷軸質感 ── */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.step {
  display: flex; gap: 14px; background: var(--card); border: 2px solid var(--wood-border);
  border-radius: var(--r); padding: 18px; box-shadow: var(--shadow-wood);
}
.step > b {
  width: 34px; height: 34px; flex: none; display: grid; place-items: center;
  border-radius: 50%; background: linear-gradient(180deg, var(--accent-ink) 0%, var(--accent-ink-deep) 100%);
  color: var(--on-solid); font-size: var(--fs-sm); font-weight: 900;
  box-shadow: 0 3px 8px rgba(230, 81, 0, 0.35);
}
.step h4 { margin: 0 0 5px; font-size: var(--fs-sm); color: var(--text-title); font-weight: 800; }
.step p { margin: 0; color: var(--text-brown); font-size: var(--fs-xs); line-height: 1.65; font-weight: 500; }
.step code {
  background: var(--card-wood); border: 1px solid var(--wood-border); border-radius: var(--rad-sm);
  padding: 2px 6px; font-size: var(--fs-2xs); color: var(--accent-text); font-weight: 700;
}
.rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.rule {
  background: var(--card); border: 2px solid var(--wood-border); border-radius: var(--r);
  padding: 16px 18px; display: flex; flex-direction: column; gap: 3px;
  box-shadow: var(--shadow-wood);
}
.rule span { color: var(--muted-brown); font-size: var(--fs-2xs); font-weight: 700; }
.rule b { font-size: var(--fs-sm); color: var(--text-title); font-weight: 800; }
.rule small { color: var(--muted); font-size: var(--fs-3xs); }

/* ── 怪物圖鑑卡（Dexgrid） ── */
.dexgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(234px, 1fr)); gap: 16px; margin-top: 16px; align-items: start; }
.dex {
  background: var(--card); border: 2px solid var(--wood-border); border-radius: var(--rad-md);
  padding: 14px; font-size: var(--fs-2xs); box-shadow: var(--shadow-wood);
}
.dex header { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 4px 0 8px; }
.dex .sp {
  height: 66px; width: 100%; display: grid; place-items: end center;
  background: radial-gradient(circle, var(--card) 40%, var(--card-wood) 100%);
  border-radius: var(--rad-md);
}
.dex .sp img { max-height: 62px; max-width: 90px; image-rendering: pixelated; }
.dex .nm { font-weight: 900; font-size: var(--fs-sm); color: var(--text-title); text-decoration: none; }
.dex .nm:hover { color: var(--accent-text); text-decoration: underline; }
.dex .sts { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.dex .st {
  display: flex; justify-content: space-between; gap: 6px;
  background: var(--card-wood); border-radius: var(--rad-sm); padding: 4px 8px; font-weight: 700;
}
.dex .st span { color: var(--muted-brown); font-weight: 600; }
.dex .maps { margin: 8px 0; }
.dex .maps summary { cursor: pointer; background: var(--card-wood); border-radius: var(--rad-sm); padding: 5px 10px; color: var(--text-brown); font-weight: 700; }
.dex .maps .mp { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px 2px; }
.dex .maps .mp a { background: var(--card); border: 1.5px solid var(--wood-border); border-radius: var(--rad-sm); padding: 2px 7px; color: var(--text-dark); font-size: var(--fs-3xs); font-weight: 600; }
.dex .dg { border: 1.5px solid var(--wood-border); border-radius: var(--rad-sm); padding: 6px 8px; margin-top: 6px; background: var(--card-parchment); }
.dex .dg-h { font-size: var(--fs-3xs); color: var(--text-brown); font-weight: 800; margin-bottom: 4px; }
.dex .dl { display: flex; align-items: center; gap: 6px; padding: 2px 0; font-size: var(--fs-3xs); }
.dex .dl span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-dark); font-weight: 600; }
.dex .dl i { font-style: normal; color: var(--muted); font-size: var(--fs-3xs); }

/* ── 展開式裝備清單（Gearlist） ── */
.gearlist { column-width: min(100%, 300px); column-gap: 16px; margin-top: 16px; }
.gearlist > details { break-inside: avoid; margin: 0 0 16px; display: block; width: 100%; }
details.card.gear { display: block; padding: 0; cursor: default; }
details.card.gear > summary { display: flex; gap: 10px; align-items: center; padding: 13px 16px; cursor: pointer; list-style: none; }
details.card.gear > summary::-webkit-details-marker { display: none; }
details.card.gear > summary::after {
  content: ''; width: 8px; height: 8px; border-right: 2px solid var(--muted-brown);
  border-bottom: 2px solid var(--muted-brown); transform: rotate(45deg);
  margin-left: auto; flex: none; transition: transform var(--dur-2) var(--ease-out);
}
details.card.gear[open] > summary::after { transform: rotate(-135deg); }
.gb { padding: 0 16px 16px; border-top: 1.5px solid var(--wood-border); margin-top: 2px; background: var(--bg-paper); }
.gsec { margin-top: 12px; }
.gsec h5 { margin: 0 0 6px; font-size: var(--fs-2xs); color: var(--text-brown); font-weight: 800; }
.gsec .sts { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.gsec .st { display: flex; justify-content: space-between; gap: 6px; background: var(--card); border: 1.5px solid var(--wood-border); border-radius: var(--rad-sm); padding: 4px 8px; font-size: var(--fs-2xs); font-weight: 600; }
.gsec .st span { color: var(--muted-brown); }
.gsec .dl { display: flex; justify-content: space-between; gap: 8px; font-size: var(--fs-2xs); padding: 2px 0; }
.gsec .dl i { font-style: normal; color: var(--muted); }
.gsec .tags { display: flex; flex-wrap: wrap; gap: 4px; }
.gsec .tag { background: var(--card); border: 1.5px solid var(--wood-border); border-radius: var(--rad-sm); padding: 2px 8px; font-size: var(--fs-3xs); font-weight: 600; }

/* ── 藥水商店 Modal ── */
.btn-shop-pill {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  display: inline-flex; align-items: center; gap: 5px; padding: 5px 14px;
  border-radius: var(--rad-pill); background: #2e7d32; color: var(--on-solid);
  font-size: var(--fs-2xs); font-weight: 800; border: none; cursor: pointer;
  box-shadow: 0 2px 8px rgba(46, 125, 50, 0.35); transition: transform var(--dur-1) var(--ease-out);
}
.btn-shop-pill:hover { transform: scale(1.06); }
.shop-banner {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  margin: 18px 0; background: #eff8f0; border: 2px solid #a5d6a7;
  border-radius: var(--r); padding: 16px 20px;
}
.btn-shop-enter {
  background: linear-gradient(180deg, #43a047, #2e7d32);
  color: var(--on-solid); font-weight: 800; padding: 9px 20px; border-radius: var(--rad-pill);
  border: none; cursor: pointer; box-shadow: 0 3px 10px rgba(46, 125, 50, 0.35);
}
.shop-modal-overlay {
  position: fixed; inset: 0; background: rgba(50, 35, 18, 0.5);
  backdrop-filter: blur(6px); z-index: 1000; display: grid; place-items: center; padding: 20px;
}
.shop-modal {
  width: 100%; max-width: 680px; max-height: 90vh;
  background: var(--card); border: 3px solid var(--wood-border-dark); border-radius: var(--r);
  box-shadow: 0 24px 60px rgba(60, 35, 10, 0.25); display: flex; flex-direction: column;
  overflow: hidden; animation: popIn var(--dur-2) var(--ease-out);
}
.shop-modal-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 18px 22px; border-bottom: 2px solid var(--wood-border); background: var(--card-parchment);
}
.shop-modal-header h2 { margin: 0; font-size: var(--fs-md); color: var(--text-title); }
.btn-modal-close { background: none; border: none; color: var(--muted-brown); font-size: var(--fs-lg); cursor: pointer; padding: 4px 8px; border-radius: var(--rad-sm); }
.shop-player-bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 22px; background: var(--card-wood); border-bottom: 1.5px solid var(--wood-border); font-size: var(--fs-xs); font-weight: 600;
}
.shop-player-bar b { color: var(--accent-text); }
.shop-modal-body { padding: 18px 22px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; }
.shop-items-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.shop-item-card {
  display: flex; align-items: center; gap: 12px; padding: 11px 14px;
  background: var(--card); border: 1.5px solid var(--wood-border); border-radius: var(--rad-md);
  cursor: pointer; transition: border-color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
.shop-item-card:hover { border-color: var(--accent-orange); background: var(--row-hover); }
.shop-item-card.selected { border-color: var(--green); background: #edf7ee; box-shadow: 0 0 0 1.5px var(--green); }
.shop-item-icon { width: 38px; height: 38px; object-fit: contain; }
.shop-item-info { flex: 1; min-width: 0; }
.shop-item-info .n { font-weight: 800; font-size: var(--fs-xs); color: var(--text-title); }
.shop-item-info .d { font-size: var(--fs-2xs); color: var(--muted); margin: 2px 0; }
.shop-item-info .p { font-size: var(--fs-2xs); font-weight: 800; color: var(--accent-text); }
.shop-buy-box { background: var(--card-parchment); border: 2px solid var(--wood-border); border-radius: var(--rad-md); padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; }
.shop-qty-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.shop-qty-input { width: 96px; padding: 7px 10px; border-radius: var(--rad-sm); border: 1.5px solid var(--wood-border); background: var(--card); color: var(--text-dark); text-align: center; font: inherit; font-weight: 800; }
.btn-qty-chip { background: var(--card); border: 1.5px solid var(--wood-border); color: var(--text-brown); padding: 5px 11px; border-radius: var(--rad-sm); font-size: var(--fs-2xs); cursor: pointer; font-weight: 700; }
.btn-qty-chip:hover { border-color: var(--accent-orange); color: var(--accent-text); }
.shop-checkout-row { display: flex; justify-content: space-between; align-items: center; padding-top: 10px; border-top: 1.5px solid var(--wood-border); }
.btn-shop-buy {
  padding: 10px 28px; border-radius: var(--rad-pill);
  background: linear-gradient(180deg, #43a047, #2e7d32);
  color: var(--on-solid); font-weight: 800; border: none; cursor: pointer;
  box-shadow: 0 4px 14px rgba(46, 125, 50, 0.35);
}

/* ── 突襲頁（Raids） ── */
.card.raid { display: flex; align-items: center; gap: 14px; padding: 16px 18px; }
.card.raid .ico.big { font-size: var(--fs-2xl); line-height: 1; width: 46px; text-align: center; }
.card.raid .ico.big img { width: 44px; height: auto; image-rendering: pixelated; }
.card.raid .meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.card.raid .meta b { font-size: var(--fs-sm); color: var(--text-title); font-weight: 800; }
.card.raid .meta .rk-need { color: var(--gold-text); font-weight: 700; }

/* 機制與應對（2026-10-02：玩家被封印／被爬上樹冠打空氣之後，要查得到「那是什麼、下次怎麼辦」） */
.rk-solo {
  display: flex; align-items: center; gap: 8px; margin: 0 0 18px;
  background: var(--row-hover); border: 1px solid var(--line-gold); border-left: 4px solid var(--accent);
  border-radius: var(--r-sm); padding: 11px 14px; font-size: var(--fs-xs); font-weight: 600; color: var(--text-brown);
}
.rk-solo .i { color: var(--accent-text); flex: none; }
/* 單人通關率實測表（2026-10-03）：人數下限降到 1 之後，要講清楚「過得了，但條件很硬」。
   ⚠️ 顏色不要只靠文字講 —— 綠/黃/紅三檔一眼看得出哪些情境真的過得去。 */
.rk-solorate { margin: 0 0 18px; }
.rk-solorate h4 { margin: 0 0 8px; font-size: var(--fs-xs); color: var(--text-title); }
.rk-solorate h4 small { font-weight: 500; color: var(--muted-brown); margin-left: 6px; }
.rk-solorate table { width: 100%; border-collapse: collapse; font-size: var(--fs-2xs); }
.rk-solorate th, .rk-solorate td {
  border: 1px solid var(--line); padding: 7px 10px; text-align: center;
}
.rk-solorate thead th { background: var(--card-parchment); color: var(--text-title); font-weight: 800; }
.rk-solorate tbody td:first-child, .rk-solorate thead th:first-child { text-align: left; white-space: nowrap; }
.rk-solorate td.ok  { color: var(--green-text); font-weight: 800; background: var(--tint-green); }
.rk-solorate td.mid { color: var(--gold-text); font-weight: 700; background: var(--card-wood); }
.rk-solorate td.no  { color: var(--red-text); font-weight: 700; background: var(--tint-red); }
/* 手機：表格會爆版 → 橫向捲，不要讓整頁跟著橫捲 */
@media (max-width: 640px) {
  .rk-solorate { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .rk-solorate table { min-width: 420px; }
}

.rk-team {
  margin: 12px 0 0; padding: 10px 14px; font-size: var(--fs-2xs); line-height: 1.8;
  background: var(--card-parchment); border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--text-brown);
}
.rk-team em { font-style: normal; font-weight: 800; color: var(--accent-text); }
.rk-mechs { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; margin-top: 4px; }
.rk-mech { background: var(--card-wood); border: 1px solid var(--line); border-radius: var(--rad-md); padding: 12px 14px; display: flex; flex-direction: column; }
.rk-mech .rk-mc { margin-top: auto; }   /* 卡片高度不一樣時，應對那段一律貼底對齊 */
.rk-mh { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.rk-mh b { font-size: var(--fs-sm); color: var(--text-title); }
.rk-tag {
  font-size: var(--fs-3xs); font-weight: 800; letter-spacing: .02em; padding: 2px 8px; border-radius: var(--rad-pill);
  background: rgba(230, 81, 0, .1); color: var(--accent-text); border: 1px solid var(--line-gold);
}
.rk-w {
  margin-left: auto; font-size: var(--fs-3xs); font-weight: 800; color: var(--muted-brown);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.rk-w.sched { font-weight: 600; font-size: var(--fs-3xs); color: var(--gold-text); white-space: normal; }
.rk-md { margin: 8px 0 0; font-size: var(--fs-2xs); line-height: 1.75; color: var(--muted); }
.rk-md b, .rk-mc b { color: var(--text-brown); font-weight: 800; }
.rk-mc {
  display: flex; gap: 7px; margin: 9px 0 0; padding-top: 9px; border-top: 1px solid var(--line);
  font-size: var(--fs-2xs); line-height: 1.8; color: var(--text-brown);
}
.rk-mc .i { color: var(--green); flex: none; margin-top: .3em; }

/* 專屬掉落 */
.rk-ex { display: flex; gap: 14px; align-items: flex-start; background: var(--card-parchment); border: 1px solid var(--line-gold); border-radius: var(--rad-md); padding: 14px 16px; }
.rk-exi {
  width: 52px; height: 52px; flex: none; display: grid; place-items: center;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--rad-md); color: var(--gold-text); font-size: var(--fs-lg);
}
.rk-exi img { max-width: 40px; max-height: 40px; image-rendering: pixelated; }
.rk-exb { min-width: 0; }
.rk-exb > b { font-size: var(--fs-sm); color: var(--text-title); }
.rk-exb > small { display: block; margin-top: 3px; font-size: var(--fs-2xs); color: var(--muted-brown); font-variant-numeric: tabular-nums; }
.rk-exb p { margin: 8px 0 0; font-size: var(--fs-2xs); line-height: 1.75; }
.rk-exs { display: flex; flex-wrap: wrap; gap: 6px; margin: 9px 0 7px; }
.rk-st {
  font-size: var(--fs-2xs); font-weight: 700; padding: 3px 9px; border-radius: var(--rad-pill);
  background: var(--card); border: 1px solid var(--line); color: var(--text-brown); font-variant-numeric: tabular-nums;
}
@media (max-width: 700px) {
  .rk-mechs { grid-template-columns: 1fr; }
  .rk-w { margin-left: 0; }
  .rk-ex { flex-direction: column; }
}

.i { width: 1.05em; height: 1.05em; vertical-align: -.16em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.it-ico { width: 18px; height: 18px; object-fit: contain; image-rendering: pixelated; flex: none; }

/* ── 頁尾 ── */
.foot {
  max-width: 1220px; margin: 0 auto; padding: 26px 20px;
  color: var(--muted-brown); font-size: var(--fs-2xs); display: flex; gap: 16px;
  flex-wrap: wrap; border-top: 2px solid var(--wood-border); line-height: 1.7; font-weight: 500;
}

/* ── Auth Box ── */
.auth-box { display: flex; align-items: center; gap: 10px; margin-left: 10px; }
.auth-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px;
  border-radius: var(--rad-pill); background: #5865f2; color: var(--on-solid);
  font-size: var(--fs-xs); font-weight: 800; border: none; cursor: pointer;
  box-shadow: 0 3px 10px rgba(88, 101, 242, 0.3); text-decoration: none;
}
.user-panel {
  display: flex; align-items: center; gap: 8px; background: var(--card);
  padding: 4px 12px 4px 6px; border-radius: var(--rad-pill);
  border: 1.5px solid var(--wood-border); font-size: var(--fs-xs);
}
.user-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.user-name { font-weight: 800; color: var(--text-title); max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn-logout { background: none; border: none; color: var(--muted-brown); cursor: pointer; padding: 2px 6px; font-size: var(--fs-3xs); font-weight: 700; }
.btn-logout:hover { color: var(--red); }

/* ── 響應式 RWD & 無障礙 ── */
:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 2px; }
.nav a { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }
.search input { min-height: 44px; }
.qbox a { min-height: 44px; }

@media (max-width: 960px) {
  .top { flex-wrap: wrap; gap: 10px 12px; padding: 10px 14px; }
  .brand-t small { display: none; }
  .search { margin-left: auto; order: 2; }
  .search input { width: 44vw; max-width: 220px; }
  .qbox { width: min(92vw, 380px); right: 0; }
  .nav { order: 3; width: 100%; margin-left: 0; padding-bottom: 4px; }
  main { padding: 18px 14px 50px; }
  .hero { padding: 24px 20px; min-height: 260px; }
  .hero h1 { font-size: var(--fs-xl); }
  .detail { grid-template-columns: 1fr; }
  h1 { font-size: var(--fs-xl); }
  h2 { font-size: var(--fs-md); }
  .panel { overflow-x: auto; }
  table { min-width: 460px; }
  .jtree { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .top { gap: 8px 12px; }
  .search input { width: 140px; font-size: var(--fs-2xs); padding: 6px 12px; }
  .search input:focus { width: 180px; }
  .qbox { position: fixed; top: 54px; left: 8px; right: 8px; width: auto; max-height: 70vh; z-index: 100; }
}

@media (max-width: 560px) {
  .hero { padding: 20px 16px; border-radius: var(--rad-md); }
  .hero h1 { font-size: var(--fs-xl); }
  .hero p { font-size: var(--fs-xs); }
  .search input { width: 40vw; }
  .rules { grid-template-columns: 1fr; }
  .jtree { grid-template-columns: 1fr; }
  .filters { flex-direction: column; align-items: stretch; gap: 9px; padding: 12px 14px; }
  .filters input[type=search], .filters select { width: 100%; min-height: 44px; }
  .filters .range { justify-content: space-between; }
  .filters input[type=number] { flex: 1; width: auto; }
  .chips { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
  .chip { min-height: 40px; display: inline-flex; align-items: center; }
  .grid { grid-template-columns: 1fr; }
}

.card table, details.card table, .skill table, .modal table {
  display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.card table th, .card table td { white-space: nowrap; }

/* ═══════════════════════════════════════════════════════════════
   🍁 名人堂排行榜與經典原版裝備檢視面板
   ═══════════════════════════════════════════════════════════════ */
.rk-page { display: flex; flex-direction: column; gap: 18px; }
.rk-hero {
  background: linear-gradient(135deg, var(--card-wood) 0%, var(--paper-edge) 100%);
  border: 2px solid var(--wood-border); border-radius: var(--r);
  padding: 22px 26px; box-shadow: var(--shadow-card);
}
.rk-hero h1 { margin: 0 0 8px; font-size: var(--fs-xl); color: var(--text-title); display: flex; align-items: center; gap: 8px; }
.rk-hero p { margin: 0; color: var(--muted-brown); font-size: var(--fs-xs); font-weight: 600; line-height: 1.6; }

.rk-toolbar {
  display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--card); border: 1.5px solid var(--wood-border); border-radius: var(--rad-md); padding: 12px 16px;
}
.rk-chips { display: flex; gap: 8px; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
.rk-chip {
  padding: 6px 14px; border-radius: var(--rad-pill); border: 1.5px solid var(--wood-border);
  background: var(--card); color: var(--text-brown); font-size: var(--fs-2xs); font-weight: 700;
  cursor: pointer; transition: border-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.rk-chip:hover { border-color: var(--accent-orange); color: var(--accent-text); }
.rk-chip.on { background: var(--accent-ink); border-color: var(--accent-ink); color: var(--on-solid); box-shadow: 0 2px 8px rgba(230,81,0,0.3); }

.rk-search-box { position: relative; min-width: 220px; }
.rk-search-input {
  width: 100%; padding: 8px 14px; border-radius: var(--rad-pill); border: 1.5px solid var(--wood-border);
  background: var(--card); color: var(--text-dark); font-size: var(--fs-2xs); font-family: inherit; font-weight: 600;
}
.rk-search-input:focus { outline: none; border-color: var(--accent); }

.rk-list { display: flex; flex-direction: column; gap: 10px; }
.rk-card {
  display: flex; align-items: center; gap: 16px; padding: 12px 18px;
  background: var(--card); border: 1.5px solid var(--wood-border); border-radius: var(--rad-md);
  transition: border-color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out); cursor: pointer; box-shadow: 0 2px 6px rgba(120,75,20,0.04);
}
.rk-card:hover {
  border-color: var(--accent-orange); background: var(--card-parchment);
  transform: translateY(-1px); box-shadow: 0 6px 18px rgba(184, 154, 118, 0.22);
}
.rk-rank-badge { flex: 0 0 54px; display: flex; justify-content: center; }
.rank-crown {
  font-weight: 900; font-size: var(--fs-xs); padding: 5px 11px; border-radius: var(--rad-pill);
  display: inline-flex; align-items: center; justify-content: center; gap: 3px;
}
.rank-crown.gold {
  background: linear-gradient(135deg, #ffd700, #ffb300); color: #5a3800;
  border: 1.5px solid #d49a00; box-shadow: 0 2px 8px rgba(255, 179, 0, 0.45);
}
.rank-crown.silver {
  background: linear-gradient(135deg, #ffffff, #cfd8dc); color: #37474f;
  border: 1.5px solid #90a4ae; box-shadow: 0 2px 8px rgba(144, 164, 174, 0.4);
}
.rank-crown.bronze {
  background: linear-gradient(135deg, #ffe0b2, #d87d3a); color: #4a2200;
  border: 1.5px solid #b8621d; box-shadow: 0 2px 8px rgba(216, 125, 58, 0.35);
}
.rank-num {
  min-width: 38px; text-align: center; font-weight: 800; font-size: var(--fs-xs);
  color: var(--muted-brown); background: var(--card-parchment); border: 1px solid var(--wood-border);
  border-radius: var(--rad-sm); padding: 4px 8px;
}

.rk-avatar {
  flex: 0 0 54px; height: 54px; border-radius: var(--rad-md);
  background: radial-gradient(circle, var(--bg-paper) 30%, #f4e7d3 100%);
  border: 1.5px solid var(--wood-border); display: grid; place-items: center; overflow: hidden;
}
.rk-avatar img { width: 48px; height: 48px; object-fit: contain; }

.rk-main-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.rk-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rk-name { font-size: var(--fs-sm); font-weight: 800; color: var(--text-title); }
.rk-badge-group { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rk-sub-badge {
  font-size: var(--fs-3xs); font-weight: 700; padding: 2px 8px; border-radius: var(--rad-sm);
  border: 1px solid var(--wood-border); background: var(--bg-paper); color: var(--text-brown);
}
.rk-sub-badge.lv { background: var(--tint-warm); border-color: #ffcc80; color: var(--accent-text); font-weight: 800; }
.rk-sub-badge.job { background: #e8f5e9; border-color: #a5d6a7; color: #256b29; }
.rk-sub-badge b { color: inherit; }   /* 徽章底是寫死的淺色，裡面的 <b> 不能吃會翻轉的 --text-dark */
.rk-sub-badge.fame { background: #fce4ec; border-color: #f48fb1; color: #c2185b; }

.rk-actions { flex: 0 0 auto; }
.btn-inspect-gear {
  background: linear-gradient(180deg, var(--accent-ink) 0%, var(--accent-ink-deep) 100%); color: var(--on-solid);
  font-weight: 800; font-size: var(--fs-2xs); padding: 8px 18px; border-radius: var(--rad-pill);
  border: none; cursor: pointer; transition: filter var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
  box-shadow: 0 3px 10px rgba(230, 81, 0, 0.3);
}
.btn-inspect-gear:hover { filter: brightness(1.1); transform: translateY(-1px); }

/* ── 經典原版裝備面板浮動彈窗 ── */
.gear-modal-overlay {
  position: fixed; inset: 0; background: rgba(35, 25, 15, 0.6);
  backdrop-filter: blur(6px); z-index: 2000; display: grid; place-items: center; padding: 16px;
}
.gear-modal {
  width: 100%; max-width: 880px; max-height: 92vh;
  background: var(--card); border: 3px solid var(--wood-border-dark); border-radius: var(--r);
  box-shadow: 0 24px 60px rgba(45, 25, 10, 0.35); display: flex; flex-direction: column;
  overflow: hidden; animation: popIn var(--dur-2) var(--ease-out);
}
.gear-modal-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 20px; border-bottom: 2px solid var(--wood-border); background: var(--card-parchment);
}
.gear-modal-header h2 { margin: 0; font-size: var(--fs-md); color: var(--text-title); display: flex; align-items: center; gap: 8px; }
.gear-modal-body {
  padding: 18px 22px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px;
}

.gear-main-layout {
  display: grid; grid-template-columns: 240px 1fr; gap: 18px;
}
.gear-profile-card {
  background: var(--bg-paper); border: 1.5px solid var(--wood-border); border-radius: var(--rad-md);
  padding: 16px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px;
}
.gear-avatar-stage {
  width: 130px; height: 130px; border-radius: var(--rad-md);
  background: radial-gradient(circle, var(--bg-paper) 35%, #f4e5cb 100%);
  border: 1.5px solid var(--wood-border); display: grid; place-items: center; overflow: hidden;
  box-shadow: inset 0 2px 6px rgba(120,75,20,0.06);
}
.gear-avatar-stage img { width: 110px; height: 110px; object-fit: contain; }
.gear-avatar-stage .gear-avatar-anim { width: 120px; height: 120px; image-rendering: pixelated; }
.gear-avatar-stage .gear-avatar-anim[hidden] { display: none; }
.gear-profile-name { font-size: var(--fs-sm); font-weight: 800; color: var(--text-title); }
.gear-profile-badges { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.gear-profile-comment {
  font-size: var(--fs-2xs); color: var(--muted-brown); font-weight: 600; line-height: 1.5;
  background: var(--card); border: 1px solid var(--wood-border); border-radius: var(--rad-sm);
  padding: 8px 10px; text-align: left; width: 100%;
}

.gear-grid-section {
  display: flex; flex-direction: column; gap: 14px;
}
.gear-grid-title {
  margin: 0; font-size: var(--fs-xs); font-weight: 800; color: var(--text-title);
  display: flex; align-items: center; gap: 6px;
}
.equip-9grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
}
.equip-slot-cell {
  position: relative; min-height: 72px; background: var(--card);
  border: 1.5px solid var(--wood-border); border-radius: var(--rad-md);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 6px 4px; cursor: pointer; transition: border-color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.03);
}
.equip-slot-cell:hover {
  border-color: var(--accent); background: var(--card-wood); transform: translateY(-1px);
}
.equip-slot-cell.active {
  border-color: var(--accent); background: var(--row-hover);
  box-shadow: 0 0 0 2px var(--accent);
}
.equip-slot-cell.empty {
  background: var(--card-parchment); border-style: dashed; cursor: default;
}
.equip-slot-cell.empty:hover { transform: none; border-color: var(--wood-border); background: var(--card-parchment); }

.slot-tag { font-size: var(--fs-3xs); color: var(--muted-brown); font-weight: 700; }
.slot-icon-box { width: 34px; height: 34px; display: grid; place-items: center; margin: 2px 0; }
.slot-icon-box img { width: 32px; height: 32px; object-fit: contain; }
.slot-name-txt {
  font-size: var(--fs-3xs); font-weight: 700; color: var(--text-dark);
  max-width: 90%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── Net 色階標籤（公佈欄 8 階色標規範）── */
.net-badge {
  font-size: var(--fs-3xs); font-weight: 800; padding: 1px 6px; border-radius: var(--rad-sm);
  display: inline-block; line-height: 1.3;
}
.net-gray   { background: #eeeeee; color: #616161; border: 1px solid #cccccc; }
.net-white  { background: var(--card); color: #212121; border: 1px solid #e0e0e0; }
.net-orange { background: var(--tint-warm); color: var(--accent-text); border: 1px solid #ffb74d; }
.net-blue   { background: #e3f2fd; color: #0d47a1; border: 1px solid #64b5f6; }
.net-purple { background: #f3e5f5; color: #4a148c; border: 1px solid #ba68c8; }
.net-gold   { background: var(--tint-warm); color: var(--gold-text); border: 1px solid #ffd54f; font-weight: 900; }
.net-green  { background: #e8f5e9; color: #1b5e20; border: 1px solid #81c784; font-weight: 900; }
.net-red    { background: var(--tint-red); color: #b71c1c; border: 1px solid #e57373; font-weight: 900; }

/* ── 裝備詳細素質卡片 ── */
.gear-detail-card {
  background: var(--card-parchment); border: 1.5px solid var(--wood-border); border-radius: var(--rad-md);
  padding: 14px 16px; display: flex; flex-direction: column; gap: 8px;
}
.gear-detail-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); padding-bottom: 6px; }
.gear-detail-name { font-size: var(--fs-xs); font-weight: 800; color: var(--text-title); display: flex; align-items: center; gap: 6px; }
.gear-detail-stats {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 6px 12px;
  font-size: var(--fs-2xs); font-weight: 600; color: var(--text);
}
.gear-detail-stats b { color: var(--text-title); }
.gear-detail-stats .stat-hl { color: var(--accent-text); }

/* ── SSR 典藏卡展示區 ── */
.ssr-showcase-container {
  background: linear-gradient(135deg, #1b263b 0%, #0d1b2a 100%);
  border: 2px solid #e0c068; border-radius: var(--rad-md); padding: 14px 18px;
  color: var(--on-solid); display: flex; flex-direction: column; gap: 10px;
  box-shadow: 0 6px 18px rgba(224, 192, 104, 0.25);
}
.ssr-header-row { display: flex; justify-content: space-between; align-items: center; }
.ssr-title { font-size: var(--fs-xs); font-weight: 800; color: #ffd700; margin: 0; display: flex; align-items: center; gap: 6px; }
.ssr-desc { font-size: var(--fs-2xs); color: #cbd5e1; margin: 0; }
.ssr-card-list { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
.ssr-card-item {
  background: rgba(255, 255, 255, 0.08); border: 1.5px solid #ffd700;
  border-radius: var(--rad-sm); padding: 8px 12px; display: flex; flex-direction: column;
  align-items: center; min-width: 100px; text-align: center; gap: 2px;
}
.ssr-card-name { font-size: var(--fs-2xs); font-weight: 800; color: var(--on-solid); }
.ssr-card-stars { font-size: var(--fs-3xs); color: #ffd700; letter-spacing: 1px; }

/* ── 釣魚外觀稱號與椅子標記 ── */
.gear-fishing-decor {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 2px;
}
.gear-fishing-title,
.gear-fishing-chair {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 3px 8px;
  border-radius: var(--rad-sm);
  font-size: var(--fs-3xs);
  font-weight: 700;
  text-align: left;
}
.gear-fishing-title {
  background: #f0fdf4;
  border: 1px solid #86efac;
  color: #166534;
}
.gear-fishing-chair {
  background: #eff6ff;
  border: 1px solid #93c5fd;
  color: #1e40af;
}
.decor-tag {
  font-size: var(--fs-3xs);
  padding: 1px 4px;
  border-radius: var(--rad-sm);
  font-weight: 800;
  background: rgba(0, 0, 0, 0.06);
  flex-shrink: 0;
}
.decor-val {
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════════════
   動態水族箱（Aquarium Tank Showcase）
   ═══════════════════════════════════════════════════════════════════════════ */
.aquarium-showcase-container {
  background: linear-gradient(135deg, #091e3a 0%, #031124 100%);
  border: 2px solid #38bdf8;
  border-radius: var(--rad-md);
  padding: 14px 18px;
  color: #f0f9ff;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 8px 24px rgba(3, 17, 36, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.aquarium-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.aqua-title-box {
  display: flex;
  align-items: center;
  gap: 8px;
}

.aqua-svg-icon {
  flex-shrink: 0;
}

.aqua-title {
  font-size: var(--fs-xs);
  font-weight: 800;
  color: #7dd3fc;
  margin: 0;
  letter-spacing: 0.5px;
}

.aqua-level-badge {
  font-size: var(--fs-3xs);
  font-weight: 800;
  background: rgba(56, 189, 248, 0.18);
  border: 1px solid #38bdf8;
  color: #bae6fd;
  padding: 1px 8px;
  border-radius: var(--rad-pill);
}

.aqua-desc {
  font-size: var(--fs-2xs);
  color: #94a3b8;
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
}

.aqua-desc b {
  color: #f0f9ff;
}

.aqua-desc .aqua-hl {
  color: #38bdf8;
}

.aqua-next {
  color: #fbbf24;
  font-size: var(--fs-3xs);
}

.aqua-max {
  color: #34d399;
  font-size: var(--fs-3xs);
  font-weight: 800;
}

/* ── 水族箱魚缸本體 ── */
.aquarium-tank {
  position: relative;
  min-height: 200px;
  height: 220px;
  background: radial-gradient(ellipse at 50% 20%, #0d3b66 0%, #051930 70%, #020b17 100%);
  border: 1.5px solid rgba(56, 189, 248, 0.6);
  border-radius: var(--rad-sm);
  overflow: hidden;
  box-shadow: inset 0 0 35px rgba(2, 11, 23, 0.8), inset 0 2px 10px rgba(56, 189, 248, 0.35);
}

/* 水面微光與焦散波紋 */
.aqua-water-light {
  position: absolute;
  top: 0; left: 0; right: 0; height: 35px;
  background: linear-gradient(180deg, rgba(125, 211, 252, 0.28) 0%, rgba(56, 189, 248, 0.08) 50%, transparent 100%);
  pointer-events: none;
  animation: causticShimmer 4s ease-in-out infinite alternate;
}

@keyframes causticShimmer {
  0% { opacity: 0.7; transform: scaleX(1); }
  50% { opacity: 0.95; transform: scaleX(1.05); }
  100% { opacity: 0.65; transform: scaleX(0.98); }
}

/* 浮動氣泡 */
.aqua-bubble {
  position: absolute;
  bottom: -15px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.8), rgba(56, 189, 248, 0.25) 60%, rgba(255, 255, 255, 0.1) 100%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  pointer-events: none;
  animation: bubbleRise linear infinite;
}

.aqua-bubble.b1 { left: 12%; width: 6px; height: 6px; animation-duration: 5.5s; animation-delay: 0.2s; }
.aqua-bubble.b2 { left: 28%; width: 10px; height: 10px; animation-duration: 7s; animation-delay: 1.5s; }
.aqua-bubble.b3 { left: 45%; width: 5px; height: 5px; animation-duration: 6s; animation-delay: 2.8s; }
.aqua-bubble.b4 { left: 63%; width: 8px; height: 8px; animation-duration: 6.8s; animation-delay: 0.8s; }
.aqua-bubble.b5 { left: 80%; width: 7px; height: 7px; animation-duration: 5.8s; animation-delay: 3.2s; }
.aqua-bubble.b6 { left: 92%; width: 9px; height: 9px; animation-duration: 7.5s; animation-delay: 2.1s; }

@keyframes bubbleRise {
  0% { transform: translateY(0) translateX(0); opacity: 0; }
  10% { opacity: 0.8; }
  50% { transform: translateY(-110px) translateX(8px); opacity: 0.9; }
  90% { opacity: 0.7; }
  100% { transform: translateY(-230px) translateX(-6px); opacity: 0; }
}

/* 空魚缸提示 */
.aqua-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 10px;
  color: #94a3b8;
  font-size: var(--fs-xs);
  font-weight: 700;
  text-align: center;
  padding: 20px;
}

.aqua-empty-state p {
  margin: 0;
  color: #cbd5e1;
}

/* 游泳區域 */
.aqua-swimming-area {
  --aqua-w: 600px;   /* 游泳區寬；ranking.js 載入後用 clientWidth 覆寫，魚的位移全靠 transform 乘它 */
  position: absolute;
  inset: 0;
}

/* 游動魚兒與 keyframes */
.aqua-swimmer {
  position: absolute;
  left: 0;   /* 位移全靠 transform：--aqua-w 是游泳區寬（ranking.js 量），keyframes 只動合成器屬性 */
  cursor: pointer;
  z-index: 10;
  transition: transform var(--dur-2) var(--ease-out);
}

.aqua-swimmer:focus {
  outline: none;
}

.aqua-swimmer:focus-visible .aqua-fish-sprite {
  filter: drop-shadow(0 0 6px #38bdf8);
}

.aqua-swimmer:hover {
  z-index: 20;
}

.aqua-swimmer:hover .aqua-fish-sprite {
  filter: drop-shadow(0 0 8px rgba(56, 189, 248, 0.9)) brightness(1.2);
  transform: scale(1.15);
}

.aqua-swimmer:hover .aqua-fish-tooltip,
.aqua-swimmer:focus .aqua-fish-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.aqua-fish-sprite {
  transition: transform var(--dur-2) var(--ease-out), filter var(--dur-2) var(--ease-out);
}

.aqua-fish-sprite img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  display: block;
}

/* Hover 浮動提示框 */
.aqua-fish-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: rgba(10, 25, 47, 0.95);
  border: 1px solid #38bdf8;
  border-radius: var(--rad-sm);
  padding: 6px 10px;
  min-width: 120px;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out), visibility var(--dur-2);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6);
  z-index: 30;
  white-space: nowrap;
  text-align: center;
}

.tooltip-name {
  font-size: var(--fs-2xs);
  font-weight: 800;
  color: #f0f9ff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.tooltip-rarity {
  font-size: var(--fs-3xs);
  padding: 0 4px;
  border-radius: var(--rad-sm);
  font-weight: 700;
}

.tooltip-rarity.rarity-1 { background: #334155; color: #cbd5e1; }
.tooltip-rarity.rarity-2 { background: #1e3a8a; color: #93c5fd; }
.tooltip-rarity.rarity-3 { background: #581c87; color: #d8b4fe; }
.tooltip-rarity.rarity-4 { background: #78350f; color: #fde047; }

.tooltip-cm {
  font-size: var(--fs-3xs);
  color: #94a3b8;
  margin-top: 2px;
}

.tooltip-cm b {
  color: #38bdf8;
}

.tooltip-stars {
  font-size: var(--fs-3xs);
  color: #94a3b8;
  margin-top: 1px;
}

.stars-hl {
  color: #fbbf24;
  letter-spacing: 1px;
}

/* 5 條不同游動軌道（帶浮動與轉向） */
.aqua-swimmer.track-1 {
  top: 18%;
  animation: swimTrack1 16s ease-in-out infinite;
}
.aqua-swimmer.track-2 {
  top: 42%;
  animation: swimTrack2 20s ease-in-out infinite;
}
.aqua-swimmer.track-3 {
  top: 68%;
  animation: swimTrack3 14s ease-in-out infinite;
}
.aqua-swimmer.track-4 {
  top: 30%;
  animation: swimTrack4 24s ease-in-out infinite;
}
.aqua-swimmer.track-5 {
  top: 55%;
  animation: swimTrack5 18s ease-in-out infinite;
}

@keyframes swimTrack1 {
  0%   { transform: translateX(calc(var(--aqua-w, 600px) * 0.04)) translateY(0) scaleX(1); }
  22%  { transform: translateX(calc(var(--aqua-w, 600px) * 0.45)) translateY(-10px) scaleX(1); }
  45%  { transform: translateX(calc(var(--aqua-w, 600px) * 0.88)) translateY(6px) scaleX(1); }
  49%  { transform: translateX(calc(var(--aqua-w, 600px) * 0.90)) translateY(6px) scaleX(1); }
  50%  { transform: translateX(calc(var(--aqua-w, 600px) * 0.90)) translateY(6px) scaleX(-1); }
  72%  { transform: translateX(calc(var(--aqua-w, 600px) * 0.48)) translateY(-8px) scaleX(-1); }
  95%  { transform: translateX(calc(var(--aqua-w, 600px) * 0.05)) translateY(4px) scaleX(-1); }
  99%  { transform: translateX(calc(var(--aqua-w, 600px) * 0.04)) translateY(0) scaleX(-1); }
  100% { transform: translateX(calc(var(--aqua-w, 600px) * 0.04)) translateY(0) scaleX(1); }
}

@keyframes swimTrack2 {
  0%   { transform: translateX(calc(var(--aqua-w, 600px) * 0.95 - 100%)) translateY(0) scaleX(-1); }
  25%  { transform: translateX(calc(var(--aqua-w, 600px) * 0.58 - 100%)) translateY(12px) scaleX(-1); }
  48%  { transform: translateX(calc(var(--aqua-w, 600px) * 0.14 - 100%)) translateY(-6px) scaleX(-1); }
  49%  { transform: translateX(calc(var(--aqua-w, 600px) * 0.12 - 100%)) translateY(-6px) scaleX(-1); }
  50%  { transform: translateX(calc(var(--aqua-w, 600px) * 0.12 - 100%)) translateY(-6px) scaleX(1); }
  75%  { transform: translateX(calc(var(--aqua-w, 600px) * 0.50 - 100%)) translateY(8px) scaleX(1); }
  98%  { transform: translateX(calc(var(--aqua-w, 600px) * 0.94 - 100%)) translateY(-4px) scaleX(1); }
  99%  { transform: translateX(calc(var(--aqua-w, 600px) * 0.95 - 100%)) translateY(0) scaleX(1); }
  100% { transform: translateX(calc(var(--aqua-w, 600px) * 0.95 - 100%)) translateY(0) scaleX(-1); }
}

@keyframes swimTrack3 {
  0%   { transform: translateX(calc(var(--aqua-w, 600px) * 0.08)) translateY(0) scaleX(1); }
  24%  { transform: translateX(calc(var(--aqua-w, 600px) * 0.40)) translateY(-14px) scaleX(1); }
  47%  { transform: translateX(calc(var(--aqua-w, 600px) * 0.82)) translateY(8px) scaleX(1); }
  49%  { transform: translateX(calc(var(--aqua-w, 600px) * 0.84)) translateY(8px) scaleX(1); }
  50%  { transform: translateX(calc(var(--aqua-w, 600px) * 0.84)) translateY(8px) scaleX(-1); }
  74%  { transform: translateX(calc(var(--aqua-w, 600px) * 0.45)) translateY(-10px) scaleX(-1); }
  98%  { transform: translateX(calc(var(--aqua-w, 600px) * 0.09)) translateY(5px) scaleX(-1); }
  99%  { transform: translateX(calc(var(--aqua-w, 600px) * 0.08)) translateY(0) scaleX(-1); }
  100% { transform: translateX(calc(var(--aqua-w, 600px) * 0.08)) translateY(0) scaleX(1); }
}

@keyframes swimTrack4 {
  0%   { transform: translateX(calc(var(--aqua-w, 600px) * 0.88 - 100%)) translateY(0) scaleX(-1); }
  22%  { transform: translateX(calc(var(--aqua-w, 600px) * 0.52 - 100%)) translateY(-8px) scaleX(-1); }
  48%  { transform: translateX(calc(var(--aqua-w, 600px) * 0.18 - 100%)) translateY(10px) scaleX(-1); }
  49%  { transform: translateX(calc(var(--aqua-w, 600px) * 0.16 - 100%)) translateY(10px) scaleX(-1); }
  50%  { transform: translateX(calc(var(--aqua-w, 600px) * 0.16 - 100%)) translateY(10px) scaleX(1); }
  72%  { transform: translateX(calc(var(--aqua-w, 600px) * 0.60 - 100%)) translateY(-6px) scaleX(1); }
  98%  { transform: translateX(calc(var(--aqua-w, 600px) * 0.87 - 100%)) translateY(8px) scaleX(1); }
  99%  { transform: translateX(calc(var(--aqua-w, 600px) * 0.88 - 100%)) translateY(0) scaleX(1); }
  100% { transform: translateX(calc(var(--aqua-w, 600px) * 0.88 - 100%)) translateY(0) scaleX(-1); }
}

@keyframes swimTrack5 {
  0%   { transform: translateX(calc(var(--aqua-w, 600px) * 0.15)) translateY(0) scaleX(1); }
  26%  { transform: translateX(calc(var(--aqua-w, 600px) * 0.52)) translateY(10px) scaleX(1); }
  48%  { transform: translateX(calc(var(--aqua-w, 600px) * 0.85)) translateY(-8px) scaleX(1); }
  49%  { transform: translateX(calc(var(--aqua-w, 600px) * 0.87)) translateY(-8px) scaleX(1); }
  50%  { transform: translateX(calc(var(--aqua-w, 600px) * 0.87)) translateY(-8px) scaleX(-1); }
  75%  { transform: translateX(calc(var(--aqua-w, 600px) * 0.46)) translateY(12px) scaleX(-1); }
  98%  { transform: translateX(calc(var(--aqua-w, 600px) * 0.16)) translateY(-4px) scaleX(-1); }
  99%  { transform: translateX(calc(var(--aqua-w, 600px) * 0.15)) translateY(0) scaleX(-1); }
  100% { transform: translateX(calc(var(--aqua-w, 600px) * 0.15)) translateY(0) scaleX(1); }
}

/* 停用動畫偏好 */
@media (prefers-reduced-motion: reduce) {
  .aqua-swimmer { animation: none !important; position: static !important; }
  .aqua-swimming-area { display: flex; flex-wrap: wrap; gap: 10px; padding: 12px; position: relative; }
  .aqua-bubble, .aqua-water-light { display: none !important; }
}

@media (max-width: 720px) {
  .gear-main-layout { grid-template-columns: 1fr; }
  .equip-9grid { grid-template-columns: repeat(3, 1fr); }
  .rk-toolbar { flex-direction: column; align-items: stretch; }
  .rk-search-box { width: 100%; }
  .aquarium-tank { height: 180px; min-height: 180px; }
  .aquarium-header-row { flex-direction: column; align-items: flex-start; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   品質基線（2026-10-03）—— 由 tools/site/audit-quality.js 把關，改完要重跑。
   這一段處理的是「評審一看就扣分」的項目，不是視覺風格本身。
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 跳至主要內容：鍵盤使用者按下的第一個 Tab ──
   ⚠️ 不可以用 display:none 藏 —— 那樣鍵盤也聚焦不到，等於沒做。
      用位移藏，聚焦時才滑進畫面。 */
.skip-link {
  position: fixed; top: 0; left: 50%; z-index: 9999;
  transform: translate(-50%, -120%);
  padding: 10px 20px; border-radius: 0 0 var(--r-sm) var(--r-sm);
  background: var(--accent-ink); color: var(--on-solid); font-weight: 800; text-decoration: none;
  box-shadow: var(--shadow-card);
  transition: transform var(--dur-2) var(--ease-out);
}
.skip-link:focus { transform: translate(-50%, 0); }

/* ── 鍵盤焦點：只在鍵盤操作時顯示，滑鼠點擊不會出現難看的外框 ── */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--accent-gold);
  outline-offset: 2px;
  border-radius: var(--rad-sm);
}
#app:focus { outline: none; }          /* 跳轉目標本身不需要外框 */

/* ── 選取顏色：細節分，而且深色模式下預設藍很醜 ── */
::selection { background: var(--accent-gold-light, #f6e3b4); color: var(--text-dark); }

/* ── 錨點捲動：有固定頁首就要留偏移，否則標題會被蓋住 ── */
html { scroll-behavior: smooth; }
:target { scroll-margin-top: 84px; }

/* ── 瀏海機／圓角螢幕的安全區 ── */
body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
.foot { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }

/* ── 尊重「減少動態效果」：WCAG 與評審的硬門檻 ──
   ⚠️ 不是只關 transition —— 自動播放的動畫、平滑捲動都要一起關掉，
      否則前庭敏感的使用者還是會不舒服。 */
@media (prefers-reduced-motion: reduce) {
  /* 代幣歸零：所有用 --dur-* 的過渡／動畫直接就位。
     ⚠️ 只歸零時長、不動曲線；opacity 淡入用 1ms（0ms 在部分瀏覽器會讓 transitionend 不發、
        依賴它收尾的元件卡在中間態）。 */
  :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; --stagger: 0ms; --dur-fade: 1ms; }
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── 深色模式：只換色票，版面與元件一行都不用改 ──
   ⚠️ 用 :root:not([data-theme="light"]) 包住，讓使用者之後能手動切回淺色。 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #14110c;
    --bg-sky: #10161d;
    --bg-paper: #1b1712;
    --card: #1f1a14;
    --card-parchment: #221d16;
    --card-wood: #241e17;
    --wood-border: #4a3c2c;
    --wood-border-dark: #6b5740;
    --line: rgba(184, 154, 118, 0.22);
    --line-strong: rgba(184, 154, 118, 0.42);
    --text: #e8e2d6;
    --text-dark: #f6f2ea;
    --text-brown: #d9cdb8;
    --text-title: #f2e9d8;
    --muted: #aaa196;
    --muted-brown: #b5a58c;
    --accent-text: #ff9a5c;
    --gold-text: #e4b25a;
    --shadow-wood: 0 2px 0 rgba(0, 0, 0, .5);
    --shadow-card: 0 6px 18px rgba(0, 0, 0, .45);
    --shadow-hover: 0 10px 28px rgba(0, 0, 0, .55);
    --row-hover: #2b2419;
    --th-bg: #26201a;
    --chip-bg: #2a231b;
    --input-bg: #16130f;
    --sk-hi: #332a20;
    --tint-warm: #3a2a18;
    --tint-red: #3a1d1d;
    --paper-edge: #1b1611;
    --paper-glow: rgba(255, 236, 200, .05);
    --red-text: #ff8a80;
    --gloss: rgba(255, 255, 255, .035);
    --green-text: #6fdc9a;
    --tint-green: #16301f;
  }
  /* 頁面底：上面 html, body 的光暈是寫死的淺色（#fff4d1…），深色模式字翻成米白、底還是米白 → 標題整個消失。
     （2026-10-15 對比稽核量到：深色模式每一頁的 h1 都是 1.0:1） */
  :root:not([data-theme="light"]), :root:not([data-theme="light"]) body {
    background:
      radial-gradient(1300px 700px at 50% -80px, rgba(255, 170, 60, .10) 0%, transparent 75%),
      radial-gradient(1000px 600px at 95% 15%, rgba(80, 140, 220, .07) 0%, transparent 65%),
      linear-gradient(180deg, rgba(20, 17, 12, 0.94), rgba(20, 17, 12, 0.97)),
      url("/hero/106010000.jpg") center / cover no-repeat,
      var(--bg);
    background-attachment: fixed;
  }
  :root:not([data-theme="light"]) img.mob-ico,
  :root:not([data-theme="light"]) .ico img { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6)); }
}
:root[data-theme="dark"] { color-scheme: dark; }

/* ── 列印：把導航、搜尋、播放器這些互動元件拿掉，留內容 ── */
@media print {
  .top, .foot, .search, .auth-box, .skip-link, .bgm, .live-link { display: none !important; }
  body { background: var(--card); color: #000; }
  .card, .panel { break-inside: avoid; box-shadow: none; border: 1px solid #ccc; }
  a[href^="#"]::after { content: ""; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   設計系統代幣（2026-10-03）

   量出來的現況：36 種字級（含 11.5px / 12.5px 這種隨手值）、237 種間距、
   29 種圓角、208 個寫死色碼對上只有 42 個變數 —— 也就是「有變數但大家繞過它」。
   那是 Awwwards 評分裡占 40% 的「設計」最常被扣分的地方：看得出來沒有系統。

   這裡先把**地基**放好（模組比例 + 4pt 節奏），新寫的 UI 一律用代幣；
   既有 237 個間距值要逐頁遷移，那是另一次工程，不在這一刀裡。
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  /* 字級：1.200 大三度比例，從 16px 基準往兩頭長。
     流體上限用 clamp，手機不會因為標題太大而斷行斷得難看。 */
  --fs-3xs: 0.694rem;   /* 11.1 */
  --fs-2xs: 0.833rem;   /* 13.3 */
  --fs-xs:  0.875rem;   /* 14   */
  --fs-sm:  1rem;       /* 16   */
  --fs-md:  1.2rem;     /* 19.2 */
  --fs-lg:  1.44rem;    /* 23   */
  --fs-xl:  clamp(1.5rem, 1.2rem + 1.4vw, 1.728rem);
  --fs-2xl: clamp(1.75rem, 1.3rem + 2.2vw, 2.074rem);
  --fs-3xl: clamp(2rem, 1.4rem + 3vw, 2.488rem);
  /* 展示級距：首頁大數字／空狀態插圖用。沒有這幾階的話，
     46px / 92px 這種值只能硬寫，看起來就像隨手打的。 */
  --fs-4xl: clamp(2.4rem, 1.6rem + 4vw, 2.986rem);
  --fs-display: clamp(3rem, 2rem + 5vw, 4.3rem);
  --fs-hero: clamp(3.6rem, 2rem + 8vw, 5.75rem);

  /* 間距：4pt 節奏。一個畫面裡的留白只該來自這幾格，不該出現 13px、27px。 */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

  /* 圓角：三階就夠。29 種圓角等於沒有圓角語彙。 */
  --rad-sm: 6px; --rad-md: 12px; --rad-lg: 20px; --rad-pill: 999px;

  /* 動態：舊名字保留當別名，實際值在最上面的 :root（--dur-1/2/3、--ease-*）。
     ⚠️ 不要在這裡再定義一次 --ease-out —— 兩處定義誰贏取決於檔案順序，之前 enhance.css
        又蓋了第三次，三個檔三種曲線。 */
  --dur-fast: var(--dur-1); --dur: var(--dur-2); --dur-slow: var(--dur-3);
}

/* ── 換頁轉場：跟 app.js 的 startViewTransition 搭配 ──
   舊內容往上淡出、新內容從下方淡入 —— 方向一致才有「翻頁」的感覺，
   而不是單純的交叉溶解。 */
@keyframes vt-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(14px); } }
::view-transition-old(root) { animation: vt-out var(--dur) var(--ease-in-out) both; }
::view-transition-new(root) { animation: vt-in var(--dur-slow) var(--ease-out) both; }
/* 頁首不要跟著整頁淡 —— 它是固定的框，跟著動會讓人覺得整站在抖 */
.top { view-transition-name: site-header; }

/* ── 卡片進場：依序錯開，不是一整排同時出現 ──
   ⚠️ 只做前 12 張。再多的話最後一張要等 1 秒才出現，那是「慢」不是「精緻」。 */
@media (prefers-reduced-motion: no-preference) {
  .grid > .card { animation: card-in var(--dur-slow) var(--ease-out) both; }
  .grid > .card:nth-child(1) { animation-delay: 20ms; }
  .grid > .card:nth-child(2) { animation-delay: 45ms; }
  .grid > .card:nth-child(3) { animation-delay: 70ms; }
  .grid > .card:nth-child(4) { animation-delay: 95ms; }
  .grid > .card:nth-child(5) { animation-delay: 120ms; }
  .grid > .card:nth-child(6) { animation-delay: 145ms; }
  .grid > .card:nth-child(7) { animation-delay: 170ms; }
  .grid > .card:nth-child(8) { animation-delay: 195ms; }
  .grid > .card:nth-child(9) { animation-delay: 220ms; }
  .grid > .card:nth-child(10) { animation-delay: 245ms; }
  .grid > .card:nth-child(11) { animation-delay: 270ms; }
  .grid > .card:nth-child(n+12) { animation-delay: 290ms; }
}
@keyframes card-in { from { opacity: 0; transform: translateY(10px) scale(.985); } }

/* 減少動態：轉場與進場一起關掉（上面那段品質基線已經把 duration 歸零，
   這裡把 view transition 也明確停掉 —— 它不吃 transition-duration）。 */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   捲動驅動與載入體驗（2026-10-03）

   這一段的依據不是我自己的想像，是去看 Awwwards 近期 Site of the Day 的共同特徵：
   **捲動驅動動態、精心設計的載入體驗、把排版當視覺主角**。
   我們三項都缺（捲動完全沒有、載入是一行「載入中…」）。

   ⚠️ 但資料型網站不該為了奇觀犧牲易讀性 —— 所以這裡只做兩件：
     ① 捲動進場用**原生** animation-timeline（不引 GSAP，不多一支 JS，不擋首屏）
     ② 骨架屏取代純文字載入（讓人知道**將會出現什麼**，而不是盯著三個點）
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 捲動驅動進場 ──
   原生 scroll-driven animation：元素進入視窗時自己淡入上移，不需要 JS 觀察器。
   ⚠️ 用 @supports 包住：不支援的瀏覽器會直接看到完整內容（而不是永遠透明），
      這個降級方向很重要 —— 反過來寫會讓舊瀏覽器整頁空白。 */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .panel, .grid, .rk-mechs, .kv, table {
      animation: reveal-up linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 42%;
    }
    /* 首屏的東西不要等捲動 —— 一進站就該是完成態 */
    main > :first-child, main > h1, main > .sub { animation: none; }
    /* 外觀（時裝預覽）頁：左側時裝格不套捲動淡入，捲到哪都保持完全不透明 */
    #app:has(#lookbody) :is(.panel, .grid, .kv, table, .lookrow, .lookgrid, .lookcell) {
      animation: none;
    }
  }
}
@keyframes reveal-up {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: none; }
}

/* ── 骨架屏 ──
   取代「載入中…」。骨架的形狀要像**真的會出現的東西**（標題條 + 卡片格），
   否則只是另一種轉圈圈。 */
.skeleton { display: grid; gap: var(--sp-5); }
.sk-title { height: 38px; width: min(46%, 320px); border-radius: var(--rad-sm); }
.sk-sub { height: 18px; width: min(72%, 560px); border-radius: var(--rad-sm); }
.sk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--sp-4); }
.sk-card { height: 112px; border-radius: var(--rad-md); }
.sk-title, .sk-sub, .sk-card {
  background: linear-gradient(100deg,
    var(--card-parchment) 28%, var(--sk-hi) 42%, var(--card-parchment) 58%);
  background-size: 280% 100%;
  animation: sk-sweep 1.5s var(--ease-in-out) infinite;   /* 只動 background-position；交錯延遲在 motion.css */
  border: 1px solid var(--line);
}
@keyframes sk-sweep { from { background-position: 180% 0; } to { background-position: -80% 0; } }
/* 減少動態：不要掃光，但保留形狀（形狀本身就有資訊） */
@media (prefers-reduced-motion: reduce) {
  .sk-title, .sk-sub, .sk-card { animation: none; background: var(--card-parchment); }
}