/* ═══════════════════════════════════════════════════════════════════════════
   motion.css — 全站微互動層（2026-10-12）
   ─────────────────────────────────────────────────────────────────────────
   載入順序：style → layout → enhance → dexbook → pages → login → mobile → **這一份最後**。
   所以同特異度時這裡贏；要蓋高特異度的舊規則就把原選擇器照抄一遍，不用 !important。

   只做「所有頁面都受惠」的事（舊頁與 React 頁共用同一套 class）：
     ① 按鈕／籌碼／藥丸／導覽的 hover 抬升、active 下壓、一致的鍵盤焦點環
     ② <details> 展開：箭頭旋轉、內容淡入（高度用 ::details-content 做漸進增強）
     ③ 表格：列 hover 底色、表頭黏頂、數字欄等寬；手機可橫捲時右緣有漸層提示
     ④ 輸入框 focus 的邊框／光暈過渡
     ⑤ 骨架屏掃光的交錯
     ⑥ 觸控裝置：可點目標 ≥ 44px
   時長與曲線一律用 style.css 的代幣（--dur-1/2/3、--ease-out/--ease-spring/--ease-in-out）；
   prefers-reduced-motion 時代幣歸零，這裡不用再寫一份 reduce 區塊（純 opacity 的留 --dur-fade）。
   ⚠️ 動畫只動 transform / opacity / background-position / box-shadow —— tests/test-site-motion.js 會抓。
   ⚠️ 不可以改 class 名稱（site/app.js 與 React 頁都在用），只加規則。
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── ① 可點元件：抬升 / 下壓 / 焦點環 ────────────────────────────────────── */
/* 主按鈕：enhance.css 的磁吸用 --mx/--my 位移，hover 要把它**疊上去**而不是蓋掉
   （style.css 的 .btn:hover 寫死 translateY(-2px)，磁吸在 hover 時其實一直沒生效）。 */
.btn:hover {
  transform: translate3d(var(--mx, 0px), calc(var(--my, 0px) - 2px), 0);
  box-shadow: 0 10px 24px rgba(230, 81, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .5);
}
.btn.ghost:hover { box-shadow: var(--e2, 0 8px 20px rgba(92, 58, 20, .12)); }
.btn:active {
  transform: translate3d(var(--mx, 0px), var(--my, 0px), 0) scale(.98);
  filter: brightness(.97);
  transition-duration: var(--dur-1);
}
.chip:active, .rk-chip:active, .nav a:active, .view-sw button:active, .fs-nav:active, .bk-nav:active,
.btn-inspect-gear:active, .auth-btn:active, .cf-npc:active, .pl-gear:active { transform: scale(.98); }
.nav a:hover { transform: translateY(-1px); box-shadow: var(--e1, 0 2px 6px rgba(92, 58, 20, .08)); }
.nav a.on:hover, .nav a[aria-current="page"]:hover { transform: translateY(-1px); }
.rk-chip:hover { transform: translateY(-1px); box-shadow: var(--e1, 0 2px 6px rgba(92, 58, 20, .08)); }
/* 藥丸：只有「可以點」的才抬升（純標籤抬升會騙人以為可點） */
.pill { transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out); }
a.pill:hover, button.pill:hover, .pill[role="button"]:hover, .pill[tabindex]:hover {
  transform: translateY(-1px); box-shadow: var(--e1, 0 2px 6px rgba(92, 58, 20, .08)); border-color: var(--accent-orange);
}
a.pill:active, button.pill:active, .pill[role="button"]:active { transform: scale(.98); }
.auth-btn, .btn-inspect-gear, .btn-shop-enter, .btn-shop-buy, .btn-qty-chip, .btn-modal-close, .pl-gear {
  transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out), filter var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.auth-btn:hover, .btn-shop-enter:hover, .btn-shop-buy:hover { transform: translateY(-2px); filter: brightness(1.06); }
.auth-btn:active, .btn-shop-enter:active, .btn-shop-buy:active { transform: scale(.98); filter: none; }

/* 鍵盤焦點環：全站一致 2px 主色、外推 2px。
   --accent #e65100 在淺色底（#fdfbf7）3.7:1、深色底（#14110c）4.3:1，兩邊都 ≥ 3:1（焦點指示的門檻）。
   不用 box-shadow 做光暈 —— 會蓋掉按鈕自己的陰影。
   特異度 0,2,0：剛好壓過 style.css 的 :where(…):focus-visible 與 enhance.css 的 .btn:focus-visible。 */
:is(a, button, input, select, textarea, summary, [tabindex], [role="button"]):focus-visible,
.btn:focus-visible, .chip:focus-visible, .nav a:focus-visible, .rk-chip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: none;
}
.btn:focus-visible, .chip:focus-visible, .nav a:focus-visible, .pill:focus-visible, .rk-chip:focus-visible, .auth-btn:focus-visible { border-radius: var(--rad-pill); }
/* 表格區塊（enhance.js 給 .panel tabindex=0 讓鍵盤能捲）聚焦時不要整塊套圓角外框，內縮一點就好 */
.panel[tabindex]:focus-visible { outline-offset: -2px; }

/* ── ② <details>：箭頭旋轉 + 內容淡入 ────────────────────────────────────── */
summary { transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out); }
/* 裝備卡自己有 ::after 雪佛龍（style.css），只把旋轉改成回彈曲線 */
details.card.gear > summary::after { transition: transform var(--dur-2) var(--ease-spring); }
/* 其他用原生三角的 details（怪物卡出沒地圖、技能表）：換成會轉的雪佛龍。
   ⚠️ .famlater（pages.css）與 .cf-calc 有自己的標記，不在這一組。 */
.dex .maps > summary, .skill details > summary, .skcard details > summary {
  list-style: none; display: flex; align-items: center; gap: 8px;
}
.dex .maps > summary::-webkit-details-marker, .skill details > summary::-webkit-details-marker, .skcard details > summary::-webkit-details-marker { display: none; }
.dex .maps > summary::before, .skill details > summary::before, .skcard details > summary::before {
  content: ""; flex: none; width: 7px; height: 7px; margin: 0 3px 0 1px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg) translateY(1px); opacity: .75;
  transition: transform var(--dur-2) var(--ease-spring);
}
.dex .maps[open] > summary::before, .skill details[open] > summary::before, .skcard details[open] > summary::before { transform: rotate(45deg) translateY(-1px); }
/* 內容淡入（所有瀏覽器）：展開那一刻，summary 以外的子元素從下方浮上來 */
@keyframes dt-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
details[open] > :not(summary) { animation: dt-in var(--dur-3) var(--ease-out) both; }
details[open] > :not(summary):nth-child(3) { animation-delay: calc(var(--stagger) * .6); }
details[open] > :not(summary):nth-child(n + 4) { animation-delay: var(--stagger); }
/* 高度動畫（漸進增強，Chrome 131+ / Safari 18.4+）：::details-content 是包住所有內容的匿名盒，
   從 0 長到 auto 要靠 interpolate-size: allow-keywords；不支援的瀏覽器就是直接展開（上面的淡入照跑）。
   ⚠️ 實測 Chrome 152：在 ::details-content 上做 grid-template-rows 0fr→1fr 不會插補（內容多個子元素時
      也只有第一列會動），改用 block-size。content-visibility 要 allow-discrete 才能在收合時先播完再藏。 */
@supports selector(details::details-content) and (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  details::details-content {
    block-size: 0; overflow: clip;
    transition: block-size var(--dur-3) var(--ease-out), content-visibility var(--dur-3) allow-discrete;
  }
  details[open]::details-content { block-size: auto; }
}

/* ── ③ 表格 ──────────────────────────────────────────────────────────────── */
td { transition: background-color var(--dur-1) var(--ease-out); }
tbody tr:hover > td { background-color: var(--row-hover); }
/* 數字欄：等寬數字，欄位才不會跟著位數抖 */
td.num, th.num, .panel table td:last-child:not(:first-child), .rk-solorate td { font-variant-numeric: tabular-nums lining-nums; }
/* 表頭黏在頁首底下（--top-h 由 enhance.js 量 .top 的高度寫進來；量不到就 0）。
   ⚠️ 只對桌機的長表有意義：手機時 .panel 自己是橫捲容器（overflow-x:auto），sticky 會改以它為基準 → 等於沒有，無害。
   底色一定要不透明，否則捲過去的列會從表頭後面透出來。 */
.panel table thead th, .panel table > tbody > tr:first-child > th, .panel table > tr:first-child > th {
  position: sticky; top: var(--top-h, 0px); z-index: 2;
  background-color: var(--th-bg);
  box-shadow: 0 1px 0 var(--line);
}
/* 手機：表格超出 .panel 寬度時，右緣（與左緣）露出一道漸層陰影提示「可以橫捲」。
   用 background-attachment: local 的老招：兩層「遮罩」跟著內容捲，捲到底時正好蓋住陰影；
   沒有溢出時陰影永遠被蓋住 → 塞得下的表格什麼都看不到，不用 JS 偵測。
   陰影色從 --text 取 22%：深色模式字是淺色，陰影就變成一道淺光，兩種模式都看得到。 */
@media (max-width: 960px) {
  .panel:has(> table), .panel:has(> div > table), .rk-solorate {
    background:
      linear-gradient(90deg, var(--card) 45%, transparent) left / 36px 100% no-repeat local,
      linear-gradient(270deg, var(--card) 45%, transparent) right / 36px 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%, color-mix(in srgb, var(--text) 22%, transparent), transparent) left / 16px 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, color-mix(in srgb, var(--text) 22%, transparent), transparent) right / 16px 100% no-repeat scroll,
      var(--card);
  }
  .card table, details.card table, .skill table, .modal table {
    background:
      linear-gradient(90deg, var(--card) 45%, transparent) left / 36px 100% no-repeat local,
      linear-gradient(270deg, var(--card) 45%, transparent) right / 36px 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%, color-mix(in srgb, var(--text) 22%, transparent), transparent) left / 16px 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, color-mix(in srgb, var(--text) 22%, transparent), transparent) right / 16px 100% no-repeat scroll;
  }
}

/* ── ④ 輸入框：focus 的邊框與光暈過渡 ─────────────────────────────────────── */
.filters input, .filters select, .search input, .rk-search-input, .shop-qty-input, textarea {
  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), width var(--dur-2) var(--ease-out);
}
.filters input[type=search], .filters input[type=text], .filters input[type=number], .filters select, .rk-search-input { background-color: var(--input-bg); }
.filters input:focus, .filters select:focus, .rk-search-input:focus, .shop-qty-input:focus {
  border-color: var(--accent-orange);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}
/* 文字輸入框一聚焦就會被當成 :focus-visible（瀏覽器規則），有了光暈就不要再疊一圈外框 */
.filters input:focus-visible, .filters select:focus-visible, .search input:focus-visible, .rk-search-input:focus-visible, .shop-qty-input:focus-visible { outline: none; }

/* ── ⑤ 骨架屏：掃光交錯（style.css 的 sk-sweep 只動 background-position）──── */
.skeleton .sk-sub { animation-delay: -.18s; }
.sk-grid > .sk-card:nth-child(2n) { animation-delay: -.32s; }
.sk-grid > .sk-card:nth-child(3n) { animation-delay: -.64s; }
.sk-grid > .sk-card:nth-child(4n) { animation-delay: -.96s; }
/* 骨架整塊淡入，資料秒回時不會閃一下灰塊 */
@keyframes sk-in { from { opacity: 0; } to { opacity: 1; } }
.skeleton { animation: sk-in var(--dur-fade) var(--ease-out) both; animation-delay: 80ms; }

/* 彈窗進場（style.css 的 .shop-modal / .gear-modal 引用 popIn，但之前沒人定義它） */
@keyframes popIn { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
.shop-modal-overlay, .gear-modal-overlay { animation: sk-in var(--dur-2) var(--ease-out) both; }

/* ── ⑥ 觸控裝置：可點目標 ≥ 44px ──────────────────────────────────────────── */
@media (pointer: coarse) {
  .btn, .chip, .rk-chip, .view-sw button, .fs-nav, .bk-nav, .btn-inspect-gear, .auth-btn, .btn-shop-enter, .btn-shop-buy,
  .btn-qty-chip, .pl-gear, .cf-npc, .gb > a, a.gmore, .dex .maps > summary, details.card.gear > summary, .bk-where a {
    min-height: 44px;
  }
  .chip, .rk-chip, .btn-qty-chip, .bk-where a { display: inline-flex; align-items: center; }
  .fs-dots .fs-dot { width: 44px; height: 44px; }
  .nav { gap: 8px; }
  .nav a { min-height: 44px; padding-inline: 16px; }
  .filters input, .filters select { min-height: 44px; }
  .search input { min-height: 44px; }
  /* 觸控沒有 hover：抬升狀態拿掉，免得點一下卡在「浮起」 */
  .btn:hover, .chip:hover, .nav a:hover, .rk-chip:hover, a.pill:hover { transform: none; }
}