/**
 * style.css
 *
 * 設計 token 全部集中在 :root，改配色只要動這一段。
 * 深色模式用 body.dark 覆寫同一組變數，不重寫規則。
 *
 * 版面：桌機是內容加右欄，導覽在頂部列；900 以下導覽變成貼底的 bar。
 * 斷點兩個，900px（手機）與 1200px（右欄常駐）。
 */

:root {
  /*
   * 這份樣式屬於哪一版，**升版時要跟 `js/version.js` 一起改**（check 會擋）。
   *
   * GitHub Pages 讓每個檔各自快取 10 分鐘、網址又不帶版本號，上線之後
   * 手機可能拿到新的 JS 配舊的 CSS——1.27.01 上線時真的發生了：選秀會
   * 的加號縮成一條 4px 的細線，因為舊的 CSS 沒有那顆鈕的樣式。
   * `js/main.js` 的 `syncCss` 啟動時讀這個值，對不上就用帶版本號的網址
   * 再載一次。平常對得上，不會多下載任何東西。
   */
  --ver: "1.39.01";

  /*
   * 主色拆成兩個，因為同一個金色不能同時當文字與底色。
   * #b8860b 對白底只有 3.25:1，低於 AA 的 4.5:1，當文字看不清楚。
   * 所以 --gold 只做大面積填色與邊框，要當文字一律用 --gold-ink（5.3:1）。
   */
  --gold: #b8860b;
  --gold-ink: #8a6508;

  /*
   * 破壞性動作的顏色。原本借 --shiny 那個粉紅，但那是異色的顏色，
   * 同一個色既表示「異色」又表示「會刪掉東西」，讀起來是矛盾的。
   */
  --danger: #b3261e;
  --x-bg: #b3261e; /* 關閉鈕的紅圓。實心填色，跟當文字用的 --danger 分開 */
  --x-bg-hover: #8f1e18;

  /*
   * 中性階分四層，不是兩層。
   * 原本只有 bg 與 card，所有東西都是「白底加一條線」，
   * 側欄按鈕、圖鑑格子、收納夾長得一模一樣，看不出誰是導覽誰是資料。
   * 現在畫布、抬起、凹陷各自有底色，層級靠底色差不靠邊框。
   */
  --bg: #f2f2ef; /* 畫布。內容區與圖牆的底 */
  --card: #ffffff; /* 抬起來的面。頂部列、右欄、真正的卡片 */
  --sunk: #e8e8e4; /* 凹下去的面。輸入框、計數底 */
  --line: #dedcd6; /* 分隔線 */
  --hair: #e9e7e2; /* 髮絲線。段落標題那一條，比 line 更淡 */

  --ink: #1b1a17;
  --ink2: #56524b; /* 次級文字。6.9:1 */
  --dim: #6f6a62; /* 三級文字。4.8:1，原本的 #7d7870 只有 4.0:1 */

  --want: #c05621;
  --have: #2f6f4f;
  --shiny: #c94f7c;
  --xxl: #2f6f4f;
  --xxs: #8a5cc4;
  /*
   * 極巨化。這是 GO 自己的洋紅（Dittobase 的主題變數也用同一個值）。
   * **深色刻意不覆寫**：它跟 --x-bg 一樣是實心填色配白字，
   * 調亮會讓白字掉到 AA 以下（#e83fa0 上白字只有 3.7:1）。
   * 這個值上白字 4.8:1，兩套底色都過，而且在近黑上仍然醒目。
   */
  /*
   * 極巨化與超極巨化。**兩組色，用途不同**：
   *
   * `--max` / `--gmax` 是條件鈕的實心底色，配白字，深色不覆寫
   * （實心填色調亮白字就掉出 AA，跟 --x-bg 同一個道理）。
   *
   * `--max-mark` / `--gmax-mark` 是疊在寶可夢圖上那顆符號的顏色，
   * 照遊戲裡的寶可夢清單取——極巨化粉紅、超極巨化紫。
   * 那個位置不能用實心圓：交換表格子的刪除鈕就是右上角的紅圓白叉，
   * 再放一顆洋紅圓白符號，兩者一眼分不出來。
   * 官方也只在篩選標籤上用圓底，貼在寶可夢身上的是無底符號。
   */
  --max: #da0d86;
  --gmax: #9c0055;
  --max-mark: #ee6fb4;
  --gmax-mark: #a463d8;
  /*
   * 淨化。兩組色的用途跟極巨化那兩個一樣：
   * `--pur` 是條件鈕的實心底（白字 4.85:1，跟 --max 的 4.79 同級，
   * 深色一樣不覆寫），`--pur-mark` 是疊在寶可夢圖上那顆符號。
   *
   * **官方那個青色不能直接用**：`ic_purified.png` 是 rgb(180, 237, 240)，
   * 拿來當實心底白字只有 1.3:1，整顆鈕會糊成一片。
   * 符號那個也調深了些，2.85:1 對白底、6.69:1 對近黑，
   * 跟 --max-mark 的 2.77 / 6.86 對齊，兩顆符號在同一張卡上該一樣顯眼。
   */
  --pur: #0f7d8c;
  --pur-mark: #1aa8bd;
  /*
   * 公母。兩組色的分工跟極巨化、淨化那兩組一樣：
   * `--male` / `--female` 是條件鈕的實心底（白字 6.57:1 與 6.44:1，
   * 都比 --max 的 4.79 寬裕），`--male-mark` / `--female-mark` 是疊在
   * 寶可夢圖上那個 ♂ ♀ 的顏色，2.70／7.06 與 2.83／6.73，
   * 壓在 --max-mark 的 2.77／6.86 這條基準上。深色兩組都不覆寫。
   *
   * **粉色系這排已經有三個了**：異色 #c94f7c、極巨化 #da0d86、母。
   * 算過所有粉色候選，跟那兩顆的對比最高只有 1.50，**顏色本身分不開**，
   * 靠 ♀ 符號與「母」那個字區分。2026-09-21 使用者看過實際畫面拍板。
   * 藍色那顆沒有這個問題，站上在它之前沒有任何藍色。
   *
   * 符號那兩個刻意跟徽章錯開色相：母用偏紅的 #ef6f9c，
   * 極巨化那顆是偏紫的 #ee6fb4。兩者位置也不同（左下對右上），
   * 但同一格可能同時出現，色相拉開一點比較好認。
   */
  --male: #0b5fa5;
  --female: #b5195c;
  --male-mark: #4aa3f0;
  --female-mark: #ef6f9c;
  --bgcard: #4a7fb5;
  /*
   * 世界地圖的兩種點（2026-09-23）。色相照交接文件：野生藍、團體戰橘，
   * **之後的新分類不要再用這兩個色相**。淺色是加深過的版本，
   * 交接文件的 #58A6FF／#FF9F43 在白底上只有 2.6／2.0，點會糊掉；
   * 加深後對白底 4.9／5.0、對陸地 3.9／4.0，點上的白色數字也過 4.5。
   * `--spot-on` 是畫在點上的數字，深色那套點是亮的，字要反過來用深色。
   */
  --spot-wild: #1f6fd1;
  --spot-raid: #b65309;
  --spot-on: #ffffff;

  --type-bug: #96c22b;
  --type-dark: #5a5366;
  --type-dragon: #0a6dc4;
  --type-electric: #e5c531;
  --type-fairy: #e08fe0;
  --type-fighting: #cf4068;
  --type-fire: #e8672c;
  --type-flying: #8fa8dd;
  --type-ghost: #5a6cb5;
  --type-grass: #5dbe62;
  --type-ground: #d97746;
  --type-ice: #4fbfb2;
  --type-normal: #9199a1;
  --type-poison: #a864c8;
  --type-psychic: #e8688f;
  --type-rock: #c7b78b;
  --type-steel: #5a8fa2;
  --type-water: #4d90d5;

  /*
   * 唯一的陰影顏色。只有浮出來的那兩個面板（篩選、設定）用得到：
   * 它們蓋在內容上面，靠一條邊框分不出誰在上面。深色底上同一個值看不見，
   * 所以做成 token 讓 body.dark 調濃度，不另外寫一條深色規則。
   */
  --shadow-ink: rgba(0, 0, 0, 0.11);

  --radius: 10px;
  --topbar-h: 52px;
  --tab-h: 56px; /* 手機貼底的檢視 bar。900 以下才存在 */
  --bar-h: 44px; /* 資訊列。頂部列下面那條，寫「現在在看什麼」 */

  /*
   * 字級。原本全站只有 11 到 15px，標題跟內文差不多大，
   * 看不出層級。拉開到 11–26，主標題才有主標題的地位。
   */
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-13: 13px;
  --fs-base: 14px;
  --fs-md: 15px;
  --fs-lg: 17px;
  --fs-xl: 20px;
  --fs-2xl: 26px; /* 只有知識頁的 h1 用得到。:root 的字級註解本來就寫到 26 */

  /* 小型大寫。段落標題與控制列共用，抄 Letterboxd 那條細線上的標籤 */
  --caps: 600 var(--fs-xs) / 1 system-ui, sans-serif;

  /*
   * 格子寬度是兩段式的，桌機與手機各一組，共四個值。
   * 手機小圖示刻意讓一排剛好五隻，這是預設值。
   * 大小切換靠 body.big-icons，深淺色不影響這裡。
   */
  --cell-min: 88px;
  --cell-gap: 8px;
  --cell-img: 54px;
  --cell-pad: 7px 5px 6px;
  --cell-cols: 5;
  --pick-wide-cols: 7;
}

body.big-icons {
  --cell-min: 108px;
  --cell-gap: 10px;
  --cell-img: 62px;
  --cell-pad: 10px 8px 9px;
  --cell-cols: 3;
  --pick-wide-cols: 5;
}

/*
 * 深色不是把淺色反過來，是另一套。
 *
 * 原本的 #16150f 偏暖褐，寶可夢圖本身彩度就高，暖底會跟圖打架。
 * 改成中性近黑，圖才站得出來。層級一樣靠底色差不靠邊框，
 * 這是 Spotify 的做法：畫布近黑、面再亮一階、不畫框。
 * 不用純黑，OLED 上純黑與近黑交界會拖影。
 */
body.dark {
  --bg: #101010;
  --card: #191919;
  --sunk: #0b0b0b;
  --line: #2b2b2b;
  --hair: #232323;
  --ink: #e9e7e3;
  --ink2: #a9a49c;
  --dim: #8b867e;
  --gold-ink: #cf9a1a; /* 深色底上金色可以更亮，7.5:1 */
  --danger: #e8837c; /* 深色底上要調亮，深紅在近黑上看不出是紅的 */
  --x-bg: #c8352b; /* 填色不必跟著文字調亮，這個深度在近黑上仍然看得出是紅的，白叉 5.2:1 */
  --x-bg-hover: #d9453b;
  --want: #e08a52;
  --have: #5fae83;
  --shiny: #e87ba3;
  --xxl: #5fae83;
  --xxs: #b088e8;
  --bgcard: #6fa8dc;
  --spot-wild: #58a6ff; /* 交接文件的原色，近黑底上 7.0 */
  --spot-raid: #ff9f43; /* 8.6 */
  --spot-on: #101010;
  --shadow-ink: rgba(0, 0, 0, 0.55); /* 近黑底上要濃得多才看得出浮起來 */
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/*
 * hidden 屬性只有瀏覽器預設樣式在管，任何一條 display 規則都蓋得過它。
 * 搜尋列與收納夾都踩過這個坑，所以在這裡一次講死。
 */
[hidden] {
  display: none !important;
}

body {
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.6 system-ui, -apple-system, "Noto Sans TC", "Hiragino Sans", sans-serif;
  -webkit-text-size-adjust: 100%;
}

button,
input,
select {
  font: inherit;
  color: inherit;
}

.dim {
  color: var(--dim);
}

/* ─────────── 頂部列 ─────────── */

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  background: var(--card);
  border-bottom: 1px solid var(--line);
}

/*
 * 標題不再吃掉所有剩餘空間。檢視要緊接在它右邊，
 * 像一般網站的 wordmark 加導覽；靠右擠著語言鈕會離標題太遠。
 * （副標題 2026-09-26 改名時拿掉了，這裡只剩站名）
 */
.brand {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
  flex: 0 1 auto;
}

.brand strong {
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: -0.01em;
}

/*
 * **站名不換行只在桌機**。1.29.00 把它寫在外面，手機 320px 的英文站名
 * 就壓到語言鈕上了（2026-09-24 截圖才發現）；手機那邊照舊讓它折行。
 */
@media (min-width: 901px) {
  .brand strong {
    white-space: nowrap;
  }
}

/*
 * 手機的站名（2026-09-26 改名成「寶可夢 GO 工具箱」之後）：320px 放不下一行，
 * 日文 390px 也放不下。**只在空格處斷行**（使用者選的）：`keep-all` 讓中日文字之間不斷，
 * 斷出來是「寶可夢 GO／工具箱」「ポケモンGO／ツールボックス」，不會斷在「工具／箱」。
 * 字小一號、行距收緊，兩行才收得進 52px 的頂部列，不會被資訊列蓋掉第二行。
 */
@media (max-width: 900px) {
  .brand strong {
    font-size: 15px;
    line-height: 1.15;
    word-break: keep-all;
  }
}

/*
 * 語言與齒輪永遠貼著右緣。
 *
 * 靠 margin-left 自己推，不靠別人撐開：手機上三個檢視是 fixed 的，
 * 離開流排之後頂部列沒有任何東西會長大，這一段就會縮回標題旁邊。
 */
.top-right {
  position: relative; /* 設定面板的定位基準 */
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

/*
 * 圖示鈕。裡面是 inline SVG，不是文字符號。
 * 沒有邊框，hover 才浮出一塊底色，跟 Apple 工具列同一個做法：
 * 不操作的時候只看得到圖示本身，看不到容器。
 */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--ink2);
  cursor: pointer;
  line-height: 1;
}

.icon-btn svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-btn:hover {
  background: var(--sunk);
  color: var(--ink);
}

/* 語言。分段控制，底是凹下去那一階，選中的那一段才浮起來 */
.langs {
  display: flex;
  gap: 2px;
  padding: 2px;
  border-radius: 8px;
  background: var(--sunk);
}

.langs button {
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--dim);
  padding: 5px 9px;
  cursor: pointer;
  font-size: var(--fs-sm);
  font-weight: 600;
}

.langs button[aria-pressed="true"] {
  background: var(--card);
  color: var(--ink);
}

/*
 * 設定面板裡的那一條（搜尋字串語言）。頂部列那條的寬度由 header 收住，
 * 這裡的容器是整個面板寬，不改成 inline-flex 會拉出一條橫跨面板的凹槽。
 */
.langs.seg-fit {
  display: inline-flex;
}

/* ─────────── 資訊列 ─────────── */

/*
 * 抄 Scryfall 頂部那條 context bar。
 * 它橫貫整個版面，不縮在內容區裡，因為它講的是整個畫面的狀態。
 * 黏在頂部列下面，捲到哪裡都看得到自己在看什麼、篩了什麼。
 */
.infobar {
  position: sticky;
  top: var(--topbar-h);
  z-index: 28;
  min-height: var(--bar-h);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  padding: 8px 16px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}

.ib-title {
  font-size: var(--fs-xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

/*
 * `margin-right: auto` 是為了把右端那兩顆（清除篩選、子檢視切換器）
 * 推到最右邊。2026-09-21 之前這件事是清除鈕自己的 `margin-left: auto`
 * 在做，但右端多了切換器之後**兩個都吃 auto 就會把剩餘空間平分**，
 * 清除鈕浮在中間。讓 stats 吃掉，那兩顆就自然貼在一起。
 */
.ib-stats {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  min-width: 0;
  margin-right: auto;
  font-size: var(--fs-13);
  color: var(--dim);
}

/* 每個數字之間一個間隔點。不畫框，不加底色 */
/*
 * 資訊列那幾顆數字的白框。
 *
 * **這個框的來歷是個意外**：它原本來自知識頁的 `.stat`（一節開頭的
 * 大數字方塊），那條沒有前綴，而資訊列剛好也叫 `.stat`，所以主站
 * 一直被它畫著框。2026-09-20 把知識的版面搬進各自的資料夾時發現了，
 * **使用者選擇主站維持原樣**，所以在這裡明確指名把它留下來。
 *
 * 也就是說：現在這個框是**刻意的**，不是又一次撞名。要拿掉是另一件事。
 */
.ib-stats .stat {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
}

.ib-stats .stat + .stat::before {
  content: "·";
  margin-right: 10px;
  color: var(--line);
}

.ib-clear {
  padding: 5px 11px;
  border: 0;
  border-radius: 999px;
  background: var(--sunk);
  color: var(--ink2);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
}

.ib-clear:hover {
  background: var(--gold);
  color: #fff;
}

/*
 * 圖鑑的子檢視切換（寶可夢／背卡），資訊列最右端。
 *
 * **只有圖示，沒有文字**（2026-09-21 使用者要求）。文字走 `aria-label`
 * 與 `title`，見 `js/ui.js` 的 `ibTabs`。
 *
 * **選中是金色實心配白圖示**（2026-09-22 使用者從三版裡挑的）。
 *
 * 第一版做的是「沿用頂部列檢視鈕那一套」（`--sunk` 淺底），**在深色下
 * 幾乎看不出哪顆選中**：深色的 `--sunk`（#0b0b0b）比畫布（#101010）
 * 只暗一階，而圖示鈕沒有頂部列那顆的粗體與文字色差可以幫忙。
 * 截圖才看得出來，check 抓不到這種錯。
 *
 * 金色的兩個好處：**跟手機底部 bar 的選中語言一致**（那裡選中就是金色，
 * 金色在這個站上本來就是「你在這裡」），而且**不跟 `.bg-scope` 的實心
 * 深底撞**——背卡子檢視時那三顆範圍鈕就在底下，兩排「選中」長成同一種
 * 視覺語言會讓人以為是同一組控制。**這一排是導覽，那一排是篩選。**
 *
 * `--gold` 深色不覆寫，跟 `--max` 同一條道理：填色不必跟著文字調亮。
 * 白圖示對 #b8860b 是 3.25:1，非文字 UI 元件的門檻是 3:1，過。
 * **注意 CLAUDE.md 那條「金色不能直接當文字」講的是金色當前景**，
 * 這裡方向相反（金底白前景），而且 `.ib-clear:hover` 早就是同一組值。
 *
 * `flex: none` 是因為 `.infobar` 會 wrap：放不下時整排掉到第二行，
 * 不要讓它被壓扁成半顆圖示。
 */
.ib-tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: none;
}

.ib-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 9px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--ink2);
  cursor: pointer;
}

.ib-tab svg {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ib-tab:hover {
  background: var(--sunk);
  color: var(--ink);
}

.ib-tab[aria-pressed="true"] {
  background: var(--gold);
  color: #fff;
}

/* ─────────── 版面 ─────────── */

.layout {
  display: flex;
  align-items: flex-start;
}

/*
 * `overflow-x: clip`（1.35.02）：extra 那批圖靠 `transform: scale()` 放大
 * （`img[style*="--iz"]`），元素框連透明留白一起放大。落在最右欄時
 * 框的右緣超出畫面（1280 寬時百變怪帽子那張 2.67 倍，多出 11px），
 * 整頁多一條橫向捲動。超出去的只有透明的部分，裁掉看不出差別。
 * **用 clip 不用 hidden**：hidden 會讓這裡變成捲動容器，裡面的 sticky 會失效。
 */
.content {
  flex: 1;
  min-width: 0;
  padding: 16px 18px 48px;
  overflow-x: clip;
}

/* ─────────── 浮出來的面板 ─────────── */

/*
 * 篩選與設定共用這個殼。桌機貼著自己那顆鈕浮著，
 * 900 以下同一段 DOM 變成置中的彈窗（2026-09-26 起，原本是貼底的抽屜）。
 * 位置與寬度各自寫在 `.fpanel` 與 `.settings`。
 *
 * absolute 不佔流排，所以浮出來不會把旁邊的東西推窄。
 */
.pop {
  position: absolute;
  z-index: 20;
  max-height: 70vh;
  overflow-y: auto;
  padding: 14px 16px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  box-shadow: 0 10px 26px var(--shadow-ink);
}

/* ─────────── 置中的彈窗 ─────────── */

/*
 * 設定用這一套，不再貼著齒輪往下展開（2026-09-12，使用者要求）。
 * 三層跟右欄一模一樣：遮罩、置中的殼、捲動區。
 * 視覺值也刻意跟 `.rail-inner` 對齊，兩片浮出來的東西不該長得不一樣。
 *
 * 值得注意的是它放在 `<header>` 外面。`.topbar` 是 sticky 帶 z-index，
 * 會開一個 stacking context，關在裡面的話 fixed 再高也蓋不過右欄。
 */
.modal {
  position: fixed;
  inset: 0;
  z-index: 45;
  background: rgba(0, 0, 0, 0.45);
}

.modal[hidden] {
  display: none;
}

.modal-inner {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  width: min(420px, calc(100% - 28px));
  max-height: min(84vh, 700px);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 18px 44px var(--shadow-ink);
}

.modal-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 20px 20px 16px;
}

.modal-scroll .side-block:first-child {
  padding-top: 0;
  border-top: 0;
}

.modal-scroll .side-block:last-child {
  margin-bottom: 0;
}

/*
 * 知識頁的出處夾在 #settingsTop 後面（2026-09-25，待辦 J）。上面那條
 * 把「資料」的下緣留白歸零了，因為它是容器裡最後一個——出處那一區
 * 要自己補回來，不然兩區會黏在一起。
 */
#settingsTop + .side-block {
  margin-top: 22px;
}

/* 面板裡的第一區不要那條線，最後一區不要留白 */
.pop .side-block:first-child {
  padding-top: 0;
  border-top: 0;
}

.pop .side-block:last-child {
  margin-bottom: 0;
}

/* ─────────── 右欄 ─────────── */

/*
 * 1200 以上是版面的第三欄，常駐；以下退回彈出。
 * 兩種形態共用同一段 DOM，繪製函式不需要知道自己在哪一種。
 *
 * 預設先寫彈出那一種，因為那是小螢幕的樣子，
 * 常駐那一種在下面的 min-width 查詢裡開啟。
 */
.rail {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: none;
  background: rgba(0, 0, 0, 0.45);
}

.rail.is-open {
  display: block;
}

/*
 * 彈出形態是置中的視窗，不是貼著右緣的抽屜。
 *
 * 靠右的話版面左右不對稱，而且會蓋住頂部列右上角的語言與齒輪。
 * 置中之後兩邊留白一樣寬，頂部列也完整露在遮罩底下。
 * 視覺沿用篩選與設定那個殼：一樣的圓角、框線與陰影。
 *
 * 900 以下同樣置中，只把左右留白縮窄，見底下的斷點。
 */
.rail-inner {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  width: min(520px, calc(100% - 48px));
  max-height: min(84vh, 780px);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 18px 44px var(--shadow-ink);
}

/*
 * 捲的是這一層不是外殼，所以右上角那顆 X 不會跟著內容捲走。
 * 上下留的空間由外殼的 max-height 決定，內容多的時候在這裡滑動。
 */
.rail-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 22px 22px 26px;
}

/*
 * 關閉鈕。紅色實心圓，浮在彈窗右上角。
 *
 * 位置用 absolute 疊在內容上，不佔流排，否則第一行標題要為它讓出一塊。
 * 內容區右側留了 22px 的 padding，標題不會被壓到。
 */
.btn-x {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--x-bg);
  cursor: pointer;
}

.btn-x svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: #fff;
  stroke-width: 2.4;
  stroke-linecap: round;
}

.btn-x:hover {
  background: var(--x-bg-hover);
}

/* ─────────── 側欄 ─────────── */

/*
 * 檢視切換。選中的那一項不是整塊塗成金色，而是文字變重變色、
 * 左邊一條金線。導覽是導覽，不是一顆大按鈕。
 */
/*
 * 三個檢視。桌機是頂部列裡的一排圖示加文字，
 * 900 以下同一段 DOM 變成貼底的 bar（手機那一段在檔案最後）。
 */
.views {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-right: auto; /* 把語言與齒輪推到最右邊 */
}

.views button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 7px 11px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--ink2);
  font: inherit;
  font-size: var(--fs-base);
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
}

.views button svg {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.views button:hover {
  background: var(--sunk);
  color: var(--ink);
}

.views button[aria-pressed="true"] {
  background: var(--sunk);
  color: var(--ink);
  font-weight: 700;
}

/* 設定面板裡的分區。標題是一條髮絲線上的小型大寫標籤，不是一行灰字 */
.side-block {
  margin-bottom: 22px;
  padding-top: 14px;
  border-top: 1px solid var(--hair);
}

.side-title {
  font: var(--caps);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 6px;
}

/* 顯示切換。兩顆開關，按下去是選起來的狀態 */
/*
 * 顯示選項：一項一組，小標題加兩張預覽縮圖二選一
 * （2026-09-14，使用者要求，參考他自己另一個站的設定面板）。
 *
 * 原本是三行方框打勾，後來換成圓形圖示開關，兩種都只是「開或關」。
 * 這三項講的都是畫面會長什麼樣，畫出來比寫出來好懂，
 * 而且三項並排的時候看得出彼此是同一類設定。
 */
.toggles {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.opt-label {
  margin-bottom: 7px;
  font-size: var(--fs-12);
  color: var(--dim);
}

.opt-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/*
 * 框線一律 1px，選中的那張只換顏色不加粗（2026-09-16，使用者要求）。
 *
 * 原本選中的多疊一層 inset 陰影，視覺上變成 2px，跟旁邊那張擺在一起
 * 一眼就看得出兩條線不一樣粗。深色的 `--ink` 對淺灰的 `--line` 已經
 * 夠分得出誰被選中，不必再靠粗細講第二次。
 * **不要改成 `border-width: 2px`**：兩張各差 1px 會讓整組跟著位移。
 */
.opt-card {
  display: block;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  font: inherit;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
}

.opt-card:hover {
  border-color: var(--dim);
}

.opt-card[aria-pressed="true"] {
  border-color: var(--ink);
}

.opt-card .thumb {
  display: block;
  background: var(--sunk);
}

.opt-card svg {
  display: block;
  width: 100%;
  height: auto;
}

/* 縮圖裡的格子與名稱線。外觀那兩張自己帶顏色，不吃這裡 */
.opt-card .tc {
  fill: var(--dim);
  opacity: 0.3;
}

.opt-card .tl {
  fill: var(--dim);
  opacity: 0.55;
}

.opt-card[aria-pressed="true"] .tc {
  fill: var(--gold);
  opacity: 0.55;
}

.opt-card[aria-pressed="true"] .tl {
  fill: var(--gold-ink);
  opacity: 0.75;
}

.opt-name {
  display: block;
  padding: 7px 6px;
  font-size: var(--fs-13);
  color: var(--dim);
}

.opt-card[aria-pressed="true"] .opt-name {
  color: var(--ink);
  font-weight: 600;
}

/* 右欄裡的標題區。選寶可夢面板也用這個 */
.f-head {
  margin-bottom: 14px;
}

/* ─────────── 篩選 chip ─────────── */

/*
 * 篩選。36 個條件收在搜尋框旁邊那顆漏斗裡，
 * 已選的留在外面，沒選就整條不長東西。
 */

/* 漏斗。跟輸入框一樣是圓角膠囊，高度靠 searchbar 的 stretch 對齊 */
.fbtn {
  width: auto;
  height: auto;
  flex: none;
  gap: 0;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
}

.fbtn:hover {
  border-color: var(--ink2);
  background: var(--card);
}

/* 開著的時候填實，跟底下的面板讀成一組 */
.fbtn[aria-expanded="true"] {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--bg);
}

/* 選了幾個。排在漏斗右邊，不做角落徽章，那個尺寸的鈕放不下 */
.fbtn-n {
  margin-left: 6px;
  font-size: var(--fs-13);
  font-variant-numeric: tabular-nums;
}

/*
 * 已選條件。塞不下就橫向捲，捲出去的那一段用邊緣淡出表示右邊還有。
 * flex-basis 給一個下限，窄螢幕排不下就整條掉到第二行，
 * 不跟搜尋框互相擠成兩個都打不了字的寬度。
 */
.fpicked {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 260px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
}

.fpicked::-webkit-scrollbar {
  display: none;
}

/* 空的時候連 gap 都不該佔，否則沒篩選時搜尋框右邊會多一段空白 */
.fpicked:empty {
  display: none;
}

/* 填實表示生效中，帶 ✕ 表示點了會移除 */
.fsel {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  padding: 5px 9px 5px 11px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  font: inherit;
  font-size: var(--fs-13);
  white-space: nowrap;
  cursor: pointer;
}

.fsel svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  opacity: 0.6;
}

.fsel:hover svg {
  opacity: 1;
}

/*
 * 篩選面板。共用的殼在 `.pop`，這裡只講它自己的寬度與位置：
 * 貼著搜尋列的左緣往下，最寬 560px。
 */
.fpanel {
  top: calc(100% + 7px);
  left: 0;
  width: min(560px, 100%);
}

.fgroup + .fgroup {
  margin-top: 13px;
}

.fgroup-t {
  margin-bottom: 7px;
  color: var(--dim);
  font: var(--caps);
  letter-spacing: 0.04em;
}

.fopts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.fpanel-foot {
  display: flex;
  justify-content: flex-end;
  margin-top: 14px;
  padding-top: 11px;
  border-top: 1px solid var(--hair);
}

/* 描邊不填實。全站只有產生分享圖那一顆是實心的 */
.fdone {
  padding: 7px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-13);
  cursor: pointer;
}

.fdone:hover {
  border-color: var(--ink);
}

.fopt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink2);
  font: inherit;
  font-size: var(--fs-13);
  white-space: nowrap;
  cursor: pointer;
}

.fopt:hover {
  border-color: var(--ink2);
  color: var(--ink);
}

/* 選中的填實。描邊在一排 36 個裡面看不出來，填實才一眼認得出 */
.fopt[aria-pressed="true"] {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--bg);
}

/* 選了會變成零筆的條件直接停用，點了只會得到空畫面 */
.fopt:disabled {
  opacity: 0.35;
  cursor: default;
}

.fopt .count {
  font-size: var(--fs-xs);
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}

.fopt[aria-pressed="true"] .count {
  color: inherit;
  opacity: 0.65;
}

/* 屬性的代表色。面板裡的選項與搜尋列上的已選條件共用 */
.swatch {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: none;
}

.btn-clear {
  width: 100%;
  padding: 10px;
  margin-bottom: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: none;
  color: var(--dim);
  font: inherit;
  cursor: pointer;
}

.btn-clear:disabled {
  opacity: 0.4;
  cursor: default;
}

.data-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/*
 * 資料動作。三顆也去框。
 * 「清空這份清單」是破壞性的，平常就用警示色寫著，
 * 不要等到 hover 才變紅，那時手已經在上面了。
 */
.data-actions button {
  padding: 7px 10px;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--ink2);
  font-size: var(--fs-base);
  cursor: pointer;
  text-align: left;
}

.data-actions button:hover {
  background: var(--sunk);
  color: var(--ink);
}

.data-actions button.danger {
  margin-top: 6px;
  color: var(--danger);
}

.data-actions button.danger:hover {
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  color: var(--danger);
}

/*
 * 資料只存在這台裝置的警語。
 * iOS Safari 會清掉 localStorage，這擋不掉，只能靠這段提醒，
 * 所以它不能被做得太淡而讓人看不見。左邊一條線標示這是提示。
 */
.notice {
  margin-top: 12px;
  padding: 2px 0 2px 11px;
  border-left: 2px solid var(--gold);
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--dim);
}

/*
 * 設定面板最底下的版本號。它是註腳不是設定項，所以不給區塊的邊框與標題，
 * 只有一條上緣的髮絲線把它跟資料那一區分開。
 */
.ver {
  margin: 18px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: var(--fs-sm);
  color: var(--dim);
}

.notice strong {
  display: block;
  color: var(--ink);
  margin-bottom: 3px;
}

/* ─────────── 搜尋與標題 ─────────── */

.searchbar {
  position: relative; /* 篩選面板的定位基準 */
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: stretch;
  margin-bottom: 16px;
}

/* 輸入框是凹下去那一階，不是白底加框 */
.searchbar input {
  flex: 1 1 200px;
  min-width: 0;
  max-width: 420px;
  padding: 9px 13px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--sunk);
  font-size: var(--fs-base);
}

.searchbar input:focus {
  outline: 0;
  border-color: var(--gold);
  background: var(--card);
}

.empty {
  padding: 40px 0;
  text-align: center;
  color: var(--dim);
}

/* ─────────── 圖鑑格狀 ─────────── */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--cell-min), 1fr));
  gap: var(--cell-gap);
}

/*
 * 格子不畫框也不鋪白底。
 *
 * 這是整個改版的核心一條：原本 1484 個格子、側欄每一顆鈕、
 * 23 個收納夾全是「白底、10px 圓角、1px 邊線」，四種不同性質的
 * 東西長得一模一樣，看不出哪個是導覽、哪個是資料。
 * 現在圖直接站在畫布上，hover 才浮出一塊底色。
 */
.cell {
  position: relative;
  padding: var(--cell-pad, 10px 8px 9px);
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: none;
  color: inherit;
  cursor: pointer;
  text-align: center;
}

.cell:hover {
  background: var(--card);
}

.cell:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: -2px;
}

/* 圖與它上面的標記包在一起，標記才貼著圖不是貼著格子 */
.cell .shot {
  position: relative;
  display: block;
}

.cell img {
  width: 100%;
  height: var(--cell-img);
  object-fit: contain;
  display: block;
}

/*
 * extra.js 那批圖四周有大量透明留白，`contain` 依畫布縮放，
 * 不放大回來就只有 PokeMiners 那批的四成大。
 *
 * 放大之外還要平移：那批圖的主體不在畫布正中央（偏下約 19%），
 * 只 scale 的話偏移也跟著放大，腳會壓到底下的名稱。
 * 三個值都由 dex.js 的 iconAttrs 寫成 CSS 變數，逐張算。
 *
 * **順序不能顛倒**：`scale` 寫在前面，translate 的位移才會跟著放大，
 * 而位移本來就是要抵銷「放大後的偏移」。
 *
 * translate 的百分比是相對元素算的，所以元素必須等於圖框：
 * 這批圖都是正方形畫布，`.cell img` 平常是滿版寬、圖框只有那麼高，
 * 所以帶倍率的那些收成正方形再置中。交換表那邊改用 margin 達成同一件事。
 */
/*
 * 放大之後元素框跟著變大（實測 2.46 倍，向上溢出 61px），
 * 溢出的那一圈全是透明留白，卻照樣接得到點擊，會搶走隔壁格子的。
 * 圖本身沒有互動，點擊一律由格子委派，所以整個關掉。
 * 交換表格子拿掉 `overflow: hidden` 之後這件事才浮出來——
 * 在那之前是被裁掉的，圖鑑的格子則是一直沒裁。
 */
img[style*="--iz"] {
  transform: scale(var(--iz, 1)) translate(calc(var(--ix, 0px) * -1), calc(var(--iy, 0px) * -1));
  pointer-events: none;
}

.cell img[style*="--iz"] {
  width: var(--cell-img);
  margin-inline: auto;
}

/* 屬性色帶。雙屬性兩段，等寬 */
.cell .band {
  display: flex;
  height: 3px;
  margin: 6px auto 0;
  width: 62%;
  border-radius: 2px;
  overflow: hidden;
}

.cell .band i {
  flex: 1;
}

/* 關掉名稱之後色帶是唯一還認得出屬性的東西，所以留著並拉寬一點 */
body.no-names .cell .band {
  width: 74%;
  margin-top: 5px;
}

.cell .no {
  font-size: 10px;
  color: var(--dim);
}

/* 小圖示時沒有空間放編號，名稱優先 */
body:not(.big-icons) .cell .no {
  display: none;
}

/*
 * 小圖示的格子放不下換行的名稱。放任它換行的話，
 * 長的英文名會被硬切成「Metagros / s」，中文的型態名也會拆成兩行，
 * 整列跟著變高。限一行加省略號，認不出來就點進去看詳情。
 */
body:not(.big-icons) .cell .nm,
body:not(.big-icons) .cell .form {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.no-names .cell .nm,
body.no-names .cell .no {
  display: none;
}

.cell .nm {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.35;
  margin-top: 5px;
  overflow-wrap: anywhere;
}

.cell .form {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 400;
  color: var(--dim);
}

/* 已加進哪一欄。貼在圖的左上角，描一圈底色才壓得過圖本身 */
.tags {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.tag {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  box-shadow: 0 0 0 1.5px var(--bg);
}

.tag.want {
  background: var(--want);
}

.tag.have {
  background: var(--have);
}

/* ─────────── 詳情面板 ─────────── */

/* 版面在上面的「右欄」那一段，這裡只管面板裡的內容 */

.d-head {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 16px;
}

.d-head img {
  width: 92px;
  height: 92px;
  object-fit: contain;
  flex: 0 0 92px;
}

.d-name {
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
}

.d-form {
  color: var(--dim);
  font-size: 14px;
}

.d-meta {
  font-size: 12px;
  color: var(--dim);
  margin-top: 4px;
}

.d-sect {
  font-size: 12px;
  color: var(--dim);
  letter-spacing: 0.06em;
  margin: 18px 0 8px;
}

.type-row {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}

/*
 * IV100 的 CP。三個等級一排，凹下去那一階當底，
 * 數字用等寬數字，三格才對得齊。
 * 這是查閱用的資訊不是可以按的東西，所以沒有 hover 也沒有邊框。
 */
.cp-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.cp-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 7px 4px 8px;
  border-radius: 9px;
  background: var(--sunk);
}

.cp-box .k {
  font: var(--caps);
  letter-spacing: 0.04em;
  color: var(--dim);
}

.cp-box .v {
  font-size: var(--fs-lg);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}

.type {
  padding: 2px 9px;
  border-radius: 999px;
  color: #fff;
  font-size: 12px;
}

.d-actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}

/*
 * 右欄的兩顆加入鈕。描邊不填色，填色留給「產生分享圖」那一顆，
 * 全站只有一個實心按鈕，看到實心就知道那是主要動作。
 */
.d-actions button {
  flex: 1;
  padding: 10px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: none;
  font-size: var(--fs-base);
  font-weight: 600;
  cursor: pointer;
}

.d-actions button.want {
  border-color: var(--want);
  color: var(--want);
}

.d-actions button.have {
  border-color: var(--have);
  color: var(--have);
}

.d-actions button.want:hover {
  background: color-mix(in srgb, var(--want) 12%, transparent);
}

.d-actions button.have:hover {
  background: color-mix(in srgb, var(--have) 12%, transparent);
}

/*
 * 背卡清單。一整排不再是一疊白色方框，而是一份用髮絲線分隔的列表。
 * 每一列各自畫框的話，一隻寶可夢可選的背卡有十幾張，
 * 面板裡就會出現十幾個一模一樣的盒子。
 */
.bg-list {
  display: flex;
  flex-direction: column;
}

/*
 * 背卡列是按鈕不是清單：點一下就把那張背卡選進草稿，再按加入。
 * 選中的那一列整列變色，因為縮圖本身就有顏色，只描邊看不出來。
 */
.bg-row {
  position: relative;
  display: flex;
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 8px 8px 8px 10px;
  border: 0;
  border-bottom: 1px solid var(--hair);
  border-radius: 6px 6px 0 0;
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.bg-row:last-child {
  border-bottom: 0;
}

.bg-row:hover {
  background: var(--sunk);
}

.bg-row[aria-pressed="true"] {
  background: color-mix(in srgb, var(--bgcard) 14%, transparent);
}

/* 選中的那一列左邊一條，跟側欄選中的做法一致 */
.bg-row[aria-pressed="true"]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--bgcard);
}

/* 「不指定」沒有縮圖，高度補齊成一樣，不然那一列會矮一截 */
.bg-row.none {
  min-height: 56px;
}

.bg-row img {
  width: 62px;
  height: 40px;
  object-fit: cover;
  border-radius: 5px;
  flex: 0 0 62px;
}

.bg-row .tx {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.bg-row .t {
  font-size: 13px;
}

.bg-row .s {
  font-size: 11px;
  color: var(--dim);
}

/* ─────────── 交換表 ─────────── */

/*
 * 三份清單的分頁。標籤是清單自己的名字，右邊那個數字是那一份有幾項，
 * 不然取了名也看不出哪一份是空的。
 */
/*
 * 三份清單的分頁。抄 Letterboxd 的段落標籤：一條髮絲線，
 * 選中的那一段在線上加粗一截，不是三個白色大方塊。
 * 標籤是清單自己的名字，右邊那個數字是那一份有幾項，
 * 不然取了名也看不出哪一份是空的。
 */
.list-tabs {
  display: flex;
  gap: 2px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.tab {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 10px 11px;
  border: 0;
  background: none;
  color: var(--dim);
  font-size: var(--fs-base);
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tab:hover {
  color: var(--ink);
}

.tab[aria-pressed="true"] {
  color: var(--ink);
  font-weight: 700;
}

/* 選中的那一段在線上蓋一條粗的。線本身是共用的，蓋在同一個位置 */
.tab[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--gold);
}

.tab .n {
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--sunk);
  color: var(--dim);
}

.trade-head {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
  margin-bottom: 16px;
}

/* 兩個輸入框都帶看得見的標籤。只有提示文字的話，空著時看不出那欄要填什麼 */
.fld {
  flex: 0 1 240px;
  min-width: 160px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.fld > span {
  font: var(--caps);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--dim);
}

/* 輸入框跟搜尋列同一種：凹下去那一階，不是白底加框 */
.trade-head input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: var(--sunk);
  color: inherit;
  font-size: var(--fs-base);
}

.trade-head input:focus {
  outline: 0;
  border-color: var(--gold);
  background: var(--card);
}

/* 全站唯一的主要動作。只有它是實心填色，其他按鈕一律不填 */
.btn-share {
  padding: 9px 18px;
  border: 0;
  border-radius: 999px;
  background: var(--gold);
  color: #fff;
  font-size: var(--fs-base);
  font-weight: 600;
  cursor: pointer;
}

.btn-share:hover:not(:disabled) {
  background: var(--gold-ink);
}

.btn-share.wide {
  width: 100%;
}

.btn-share:disabled {
  background: var(--sunk);
  color: var(--dim);
  cursor: default;
}

.cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}

/* 欄標題也是髮絲線上的一行，跟分頁與側欄分區同一套 */
.col-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 8px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--hair);
}

/* 圓點認區塊，比一條底線好認，尤其兩區上下排的時候 */
.col-head .dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  flex: none;
  align-self: center;
}

.col.want .col-head .dot {
  background: var(--want);
}

.col.have .col-head .dot {
  background: var(--have);
}

.col-head .t {
  font-weight: 700;
  font-size: var(--fs-md);
}

.col-head .n {
  margin-left: auto;
}

/*
 * 格子牆不再框起來。
 * 兩區的界線靠欄標題那條髮絲線，框起來只是多一圈線。
 * 內距留著，格子才不會貼齊欄的邊緣。
 */
.panel {
  padding: var(--panel-pad, 4px 0 0);
}

.col.want .col-head .t {
  color: var(--want);
}

.col.have .col-head .t {
  color: var(--have);
}

.col-head .n {
  font-size: 12px;
  color: var(--dim);
}

.col .empty {
  padding: 28px 12px;
  font-size: 13px;
}

/*
 * 交換表的格子。方塊本身是正方形，名稱與尺寸在方塊外面。
 * 這樣背卡底圖只鋪滿方塊，名稱不必再加一塊實色底去壓過它。
 */
/*
 * 交換表的格子不畫框，寶可夢直接站在面板上。
 * 一頁最多兩百隻，每一隻都框起來的話整面都是線條。
 * 指定了背卡的格子例外，底圖本身就是框。
 */
.want-cell,
.want-cell:hover {
  border-color: transparent;
  background: none;
  cursor: pointer;
}

/*
 * 不能 `overflow: hidden`：刪除鈕要有一半露在方塊外面。
 * 原本靠它裁背卡底圖的圓角，現在底圖自己帶一份（見 .want-bg）。
 * 圖示不必裁，`contain` 加 margin 本來就在框內，
 * 外部來源那批帶 scale 的也一樣——放大的是透明留白，主體仍佔 98%。
 */
.want-tile {
  position: relative;
  display: block;
  aspect-ratio: 1;
  border-radius: var(--radius);
}

/* 沒有框就沒有 hover 的邊框可以變色，改用淡底表示指到了 */
.want-cell:hover .want-tile {
  background: var(--card);
}

/*
 * 留白用 inset 撐開，元素本身仍然等於圖框（寬高就是 84%）。
 * 那批有透明留白的圖要靠 translate 修正偏移，而 translate 的百分比
 * 是相對元素算的，元素比圖框大就會平移過頭。
 *
 * **一定要 absolute，不能是 relative 加 margin**：`<img>` 是 inline，
 * 垂直 margin 會把它壓在行盒的基線上，整塊跟著往下沉——
 * 沉多少取決於 margin，所以背卡那批（18%）比沒背卡的（8%）低 7px，
 * 同一排的格子看起來一高一低，背卡像浮在空中。
 * absolute 脫離行流就沒有基線可言，兩種格子的圖框對齊到同一個位置。
 */
.want-cell img {
  position: absolute;
  inset: 8%;
  width: 84%;
  height: 84%;
  object-fit: contain;
}

/*
 * 有背卡的格子裡寶可夢縮小，背卡才露得出來。
 * 選擇器認的是相鄰的底圖那一層（`bgLayer` 畫在 `<img>` 前面），
 * 所以沒指定背卡的格子維持原本的大小——那些格子沒有要讓給誰。
 */
.want-bg + img {
  inset: 18%;
  width: 64%;
  height: 64%;
}

/*
 * 背卡底圖不套濾鏡，直接顯示（2026-09-12，使用者要求）。
 * 原本壓到 0.5（深色 0.42）是為了讓寶可夢站得出來，
 * 代價是背卡認不出來——而背卡是這個專案的差異化，看不清等於沒有。
 * 改成讓寶可夢縮小去讓出空間，見下面那條。
 */
.want-bg {
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  background-size: cover;
  background-position: center;
}

/* 異色的星星。疊在左上角，不佔版面 */
.spark {
  position: absolute;
  top: 2px;
  left: 3px;
  font-size: 11px;
  font-style: normal;
  line-height: 1;
  color: var(--shiny);
  text-shadow: 0 0 3px var(--card), 0 0 3px var(--card);
}

/*
 * 極巨化的徽章。右上角，跟左上角的異色星星分成兩個角落，
 * 同時勾也不會疊在一起。
 *
 * 不放進下方那行尺寸文字：「極巨化」三個字比 XXL 長太多，
 * 手機 68px 的格子排不下。
 *
 * 刪除鈕的圓心壓在同一個角上，兩顆圓會差一點點重疊，
 * 所以叉出現的時候徽章讓位——那一角一次只給一個圓。
 * 刪除是暫時的操作狀態，讓掉不影響平常看得到。
 */
/*
 * 疊在寶可夢圖右上角的符號，沒有底，就是符號本身——
 * 跟遊戲裡的寶可夢清單一致（2026-09-16，使用者給的參考圖）。
 *
 * **圖是官方那張**（`img/max-mark.png`），不是自己畫的 SVG：
 * 那顆符號是空心輪廓加分岔尖角，手工描摹差很多。
 * 用 mask 而不是 <img>，這樣同一張圖可以上兩種顏色——
 * 極巨化粉紅、超極巨化紫，遊戲裡也是只有顏色不同。
 *
 * 白邊是必要的，不是裝飾：背卡底圖有亮有暗，深色模式又是近黑，
 * 空心的線條在某些底上會整個糊掉。mask 沒辦法描邊，改用兩層
 * drop-shadow 疊出一圈——異色的星星也是同一個理由描邊。
 */
.maxb {
  position: absolute;
  top: 1px;
  right: 1px;
  display: block;
  width: 20px;
  height: 20px;
  background: var(--max-mark);
  -webkit-mask: url("../img/max-mark.png") center / contain no-repeat;
  mask: url("../img/max-mark.png") center / contain no-repeat;
  filter: drop-shadow(0 0 0.8px var(--card)) drop-shadow(0 0 0.8px var(--card));
  transition: opacity 0.12s;
}

.maxb.gmax {
  background: var(--gmax-mark);
}

/*
 * 淨化的符號。跟極巨化那顆同一個位置、同一套做法，只是換一張圖：
 * 官方的淨化符號是青色星芒，形狀跟極巨化那顆完全不同，
 * 不是同一張圖換顏色就能做到的（極巨化與超極巨化才是那種關係）。
 *
 * 三者互斥，所以那一角永遠只有一顆，不必處理疊在一起的情況。
 */
.purb {
  position: absolute;
  top: 1px;
  right: 1px;
  display: block;
  width: 20px;
  height: 20px;
  background: var(--pur-mark);
  -webkit-mask: url("../img/purified-mark.png") center / contain no-repeat;
  mask: url("../img/purified-mark.png") center / contain no-repeat;
  filter: drop-shadow(0 0 0.8px var(--card)) drop-shadow(0 0 0.8px var(--card));
  transition: opacity 0.12s;
}

.want-cell:hover .maxb,
.want-cell:hover .purb,
.grid.editing .maxb,
.grid.editing .purb {
  opacity: 0;
}

/*
 * 公母的符號。**左下角**，因為右上角那一角已經被極巨化／淨化的徽章
 * 與刪除鈕佔滿，而性別跟它們不互斥，兩顆真的會同時出現。
 *
 * 用文字不用圖：上游一張性別符號都沒有，而 ♂ ♀ 本來就是標準字元、
 * 遊戲裡用的也正是這兩個。站上已經有異色星星 ✦ 用文字畫的前例。
 *
 * 白描邊的理由跟星星、極巨化那顆一樣：背卡底圖有亮有暗，深色模式
 * 又是近黑，不描邊會在某些卡上整個糊掉。`paint-order` 讓描邊畫在
 * 字的後面，不然那圈白會吃掉筆畫。
 *
 * **不跟著 hover 讓位**：讓位是因為刪除鈕要用右上角那一格，
 * 左下角沒有人要，藏起來只會讓人以為性別被取消了。
 */
.gb {
  position: absolute;
  left: 1px;
  bottom: 1px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  font-style: normal;
  color: var(--male-mark);
  -webkit-text-stroke: 2.5px var(--card);
  paint-order: stroke fill;
  pointer-events: none;
}

.gb.female {
  color: var(--female-mark);
}



/*
 * 詳情面板上方那張圖的殼。徽章要疊在圖的右上角，
 * 所以圖不能直接當 flex 子元素，得包一層定出位置。
 *
 * 使用者要的是「按下去右上角就跳符號」——勾選當下就看得到，
 * 不必先加進清單再去交換表找。跟格子裡那顆是同一個 markBadge()。
 */
.d-icon {
  position: relative;
  flex: none;
  display: block;
  line-height: 0;
}

.d-icon .maxb,
.d-icon .purb {
  width: 30px;
  height: 30px;
  top: -2px;
  right: -2px;
}

/* 詳情面板那張圖比格子大，符號跟著放大，位置同樣是左下角 */
.d-icon .gb {
  font-size: 22px;
  left: -2px;
  bottom: -2px;
}

/*
 * 球種的符號。**右下角**，官方的球圖原色照畫（PokeMiners `Images/Items/`）。
 * 四個角到這裡用完了。跟性別一樣不跟著 hover 讓位：刪除鈕在右上角。
 *
 * **要蓋掉 `.want-cell img` 那條**：它把格子裡每一張圖都撐成 84% 加
 * 8% 內距，球不蓋的話會變成跟寶可夢一樣大、疊在正中央。
 * 不描邊：球本身就有深色外框，亮暗背卡上都看得見。
 */
.want-cell .ballb,
.d-icon .ballb {
  position: absolute;
  inset: auto 1px 1px auto;
  width: 17px;
  height: 17px;
  object-fit: contain;
  flex: none;
  pointer-events: none;
}

.d-icon .ballb {
  width: 26px;
  height: 26px;
  right: -2px;
  bottom: -2px;
}

/* 尺寸在方塊下方，跟名稱同一區 */
.want-cell .sz {
  display: block;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--dim);
}

.want-cell .nm {
  margin-top: 3px;
}

/*
 * 刪除鈕是紅圓白叉，圓心壓在圖框的右上角，一半在外一半在內
 * （2026-09-13，使用者要求）。
 *
 * 原本是灰底灰叉蹲在方塊裡面，背卡底圖改成原樣顯示之後
 * 它就壓在圖上看不清。紅圓跟彈窗那顆關閉鈕同一個 `--x-bg`，
 * 全站只有一種「按了會收掉東西」的紅圓叉。
 *
 * 溢出只取一半（-8px = 半徑）。格子間距只有 6~8px，
 * 溢出更多會跨進隔壁格子，而且交換表的格子本來就不畫框，
 * 沒背卡的格子上那顆紅點會懸在一片空白裡。
 */
.want-del {
  position: absolute;
  top: -8px;
  right: -8px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--x-bg);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s;
}

.want-del svg {
  width: 9px;
  height: 9px;
  fill: none;
  stroke: #fff;
  stroke-width: 3.2;
  stroke-linecap: round;
}

.want-cell:hover .want-del,
.want-del:focus {
  opacity: 1;
}

.want-del:hover {
  background: var(--x-bg-hover);
}

/*
 * 觸控裝置沒有 hover，一直顯示的話兩百隻就是兩百顆紅點。
 * 那跟格子不畫框是同一個理由，所以平常整顆不放，改成欄標題那顆鉛筆
 * 按下去才一起出現（2026-09-14，使用者要求）。
 * 詳情面板那顆「移除」仍然在，兩條路都通。
 */
@media (hover: none) {
  .want-del {
    display: none;
  }

  .grid.editing .want-del {
    display: grid;
    opacity: 1;
  }
}

/*
 * 欄標題右邊那顆鉛筆。只有觸控裝置要——桌機把滑鼠移過去就有叉了，
 * 再放一顆切換鈕是同一件事的第二條路。
 */
.edit-btn,
.copy-btn {
  display: none;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--dim);
  cursor: pointer;
}

/*
 * 複製鈕桌機手機都顯示。鉛筆是為了補觸控裝置格子上沒有刪除鈕才存在的，
 * 這顆兩邊都用得到，所以在上面那組共用外觀之後把 display 打開。
 */
.copy-btn {
  display: grid;
}

.edit-btn svg,
.copy-btn svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 開著的時候填實，跟其他 aria-pressed 的鈕同一種語彙 */
.edit-btn[aria-pressed="true"] {
  border-color: transparent;
  background: var(--ink);
  color: var(--bg);
}

@media (hover: none) {
  .edit-btn {
    display: grid;
  }
}


/*
 * 格子牆最後那一格加號。高度靠 aspect-ratio 跟旁邊的格子對齊，
 * 不寫死數字，因為格子大小有大圖示與小圖示兩段。
 */
/*
 * 格子不畫框之後，加號必須自己畫一個。
 * 它是唯一應該看起來像「可以放東西的空位」的格子，虛線就是那個意思。
 */
.add-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--cell-img);
  border: 1.5px dashed var(--line);
  color: var(--dim);
}

.add-cell:hover {
  border-color: var(--gold);
  background: none;
  color: var(--gold-ink);
}

.add-cell .plus {
  font-size: 26px;
  line-height: 1;
}

/* ─────────── 選寶可夢面板 ─────────── */

/*
 * 標題與右邊兩顆工具鈕。漏斗跟圖鑑那顆是同一個東西，
 * 只是這裡的面板沒有搜尋列可以掛，所以排在標題旁邊。
 */
.pick-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  /* 右上角那顆紅色 X 疊在這一行上面，標題不能鋪到底 */
  padding-right: 34px;
}

.pick-tools {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
}

.pick-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 32px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-13);
  cursor: pointer;
}

.pick-btn.wide {
  padding: 0 13px;
}

.pick-btn svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.pick-btn:hover {
  border-color: var(--ink);
}

/* 填實表示生效中，跟已選條件那排同一種語彙 */
.pick-btn[aria-pressed="true"] {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--bg);
}

.pick-n {
  font-size: var(--fs-12);
  font-weight: 600;
}

/*
 * 已選條件。跟圖鑑那排同一顆 chip，但這裡是直向的面板，
 * 排不下就換行，不橫捲——面板裡再開一條橫捲會捲到不知道自己在哪。
 */
.pick-picked {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

/*
 * 篩選表。排在流排裡，展開就把格子牆往下推。
 *
 * 不做成浮出來的面板：這一層本身就是捲動容器，浮層會被裁掉；
 * 而且這裡是直向清單，展開不像搜尋列那樣會把誰擠窄。
 */
.pick-f {
  margin-bottom: 14px;
  padding: 14px 14px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
}

.pick-f .fgroup + .fgroup {
  margin-top: 12px;
}

.pick-f .fpanel-foot {
  margin-top: 12px;
}

/* 靠左，另一顆「完成」仍然靠右。只有完成時它自己還是在右邊 */
.fclear {
  margin-right: auto;
  padding: 7px 4px;
  border: 0;
  background: none;
  color: var(--dim);
  font: inherit;
  font-size: var(--fs-13);
  cursor: pointer;
}

.fclear:hover {
  color: var(--ink);
}

/* 選起來的格子。邊框填實，右上角補一個勾，不是只有顏色差一點 */
.cell.picked {
  border-color: var(--ink);
  background: var(--card);
}

/*
 * 勾。沒選的不畫，只在滑鼠移過去時淡淡提示一下。
 * 150 格全掛一個灰圈就是 150 個雜訊，跟手機不放刪除鈕同一個理由：
 * 常駐的提示在滿版的格子牆上會變成整面的點。
 */
.pick-tick {
  opacity: 0;
  position: absolute;
  top: 4px;
  right: 4px;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--card);
}

.pick-tick svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: var(--line);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cell.picked .pick-tick {
  opacity: 1;
  border-color: var(--ink);
  background: var(--ink);
}

@media (hover: hover) {
  .cell:hover .pick-tick {
    opacity: 1;
  }
}

.cell.picked .pick-tick svg {
  stroke: var(--bg);
}

/*
 * 多選的動作列。在捲動區外面，所以選完不必捲到底才按得到。
 * 只有多選時才有內容，其餘面板一律 hidden。
 */
.pick-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 22px;
  border-top: 1px solid var(--line);
}

/*
 * 左半邊是「這批都套」的條件加已選數字，右半邊是加入鈕。
 * 條件開關用跟詳情面板一模一樣的 .mk，兩邊講同一種語彙。
 */
.pick-foot-l {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

/*
 * 背卡那條有兩顆加入鈕（想要／可以給）。桌機的常駐右欄只有 340 寬，
 * 一行擺不下左半邊加兩顆，所以整條允許換行，兩顆自己佔一行對半分。
 */
.pick-foot {
  flex-wrap: wrap;
}

.pick-foot-r {
  display: flex;
  flex: 1 1 auto;
  justify-content: flex-end;
  gap: 8px;
}

.pick-foot-r .pick-add {
  flex: 1 1 auto;
  padding: 9px 10px;
  white-space: nowrap;
}

/* 背卡詳情的清單標題那一行：左邊是「收集格 N」，右邊是多選鈕 */
.d-sect-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.pick-add {
  padding: 9px 18px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  font: inherit;
  font-size: var(--fs-13);
  cursor: pointer;
}

.pick-add:disabled {
  border-color: var(--line);
  background: none;
  color: var(--dim);
  cursor: default;
}

/*
 * 複製搜尋字串的確認面板。
 *
 * 版面沿用選寶可夢那一套（`.pick-head` 的留白、底部同一條動作列），
 * 所以標題也要讓開右上角那顆紅色 X。
 */
.copy-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px;
  padding-right: 34px;
}

/*
 * 標題與說明那一塊。
 *
 * **`min-width` 是那排語言鈕的換行門檻**，不是隨手填的保險。
 * 語言鈕固定 102px，而 `padding-right` 又要讓掉 34px 給紅 X，
 * 320px 的手機算下來這一塊只剩 106px——量過中文標題一行要 133px，
 * 所以「想要的搜尋字串」會斷成「想要的搜尋／字串」兩行。
 * 給它 136px 的下限，放不下時 `flex-wrap` 就讓整排鈕自己掉到下一行。
 *
 * 360px 起算得出 146px，標題回到一行，鈕留在右邊。
 * **這樣不必為它開第二個斷點**——全站只有 900 一個，而這件事是
 * 「這幾個字擠不擠得下」，本來就該由內容寬度自己決定。
 */
.copy-head-txt {
  flex: 1;
  min-width: 136px;
}

/*
 * 標題右邊那排語言鈕。`flex: none` 讓它保持原寬，要縮的一律是左邊
 * 那塊文字——說明本來就會換行，鈕擠扁了就認不出是哪三個語言。
 */
.copy-langs {
  flex: none;
}

/*
 * 「有幾隻的條件放不進去」「字串較長」。
 *
 * 金色只能大面積填色，當文字一定要用 `--gold-ink`——`#b8860b` 對白底
 * 只有 3.25:1，低於 AA。這裡是要人讀的一句話，不是裝飾。
 */
.copy-warn {
  margin: 12px 0 0;
  font-size: var(--fs-13);
  line-height: 1.5;
  color: var(--gold-ink);
}

/*
 * 字串本身。
 *
 * 等寬字是因為這串東西是要逐字核對的（`異色,4,19&7,4,19`），
 * 比例字型下逗號與 1 擠在一起看不出斷在哪。
 *
 * 斷行用 `word-break: break-all` 不是 `overflow-wrap: anywhere`：
 * 字串裡**一個空白都沒有**，兩者都擋得掉橫向捲動，但 anywhere 只在
 * 「這一行無論如何放不下」時才啟用任意斷點，所以開頭的「異色」會斷在
 * CJK 的正常機會上，第一行只剩孤零零一個「異」字，下一行才滿。
 * break-all 每個字元後都可以斷，排出來才是齊頭的一塊。
 *
 * 可以選取是刻意的：底下那顆鈕失敗時（舊瀏覽器、權限被拒）
 * 這裡就是唯一的出路，手機長按也複製得了。
 */
.copy-str {
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 15px;
  line-height: 1.7;
  word-break: break-all;
  user-select: text;
}

/*
 * 選寶可夢面板底下那行「還有 N 筆」。
 *
 * 它同時是捲到底的哨兵，所以**要佔一點高度**：貼著格子牆的最後一排
 * 會被誤讀成某一格的說明。置中是因為它講的是整片格子牆的狀態，
 * 不是某一欄的註腳。
 */
.pick-rest {
  margin: 16px 0 4px;
  text-align: center;
  font-size: var(--fs-13);
}

/* 底部只有一顆鈕時吃滿整條，不然 space-between 會把它丟在左邊 */
.pick-add.wide {
  flex: 1 1 auto;
}

.pick-q {
  width: 100%;
  margin: 12px 0;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  color: inherit;
}

/*
 * 欄數吃設定的 `--cell-cols`：小圖示五欄、大圖示三欄，桌機手機同一套。
 * 原本桌機寫死三欄，520 寬的彈窗除出來每格 152px，
 * 中間擺一張 54px 的小圖，設定選了小圖示卻看起來比圖鑑還大。
 *
 * minmax 的下限要寫 0，1fr 的預設下限是 auto，
 * 名稱長一點就把格子撐開，整排捲出面板右邊。
 */
.pick-grid {
  grid-template-columns: repeat(var(--cell-cols), minmax(0, 1fr));
}

/*
 * 多選時把整個彈窗放寬，一排五隻。**只在桌機**。
 *
 * 520 是「常駐右欄」時代留下的寬度。單選一次只挑一隻，那幾欄夠用；
 * 多選要一次挑二十隻，欄數少就得捲很多排，捲動本身變成瓶頸。
 * 寬彈窗的欄數另外記一組（`--pick-wide-cols`，小 7 大 5），
 * 一樣跟著設定走。**不要寫成 `--cell-cols + 2`**：那是算出來的，
 * 而這兩個值講的是兩種寬度各自排得好看的欄數，沒有固定差距。
 *
 * 一定要關在 min-width 裡：手機那段是 `.rail-inner`（0,1,0），
 * 特異性低於 `body.pick-wide .rail-inner`（0,2,1），寫在外面會反過來
 * 把手機的留白從 28 撐回 48。手機本來就吃滿寬度、本來就一排五隻
 * （`.grid` 吃 --cell-cols），所以按下多選只該讓那顆鈕變色，
 * 版面一個像素都不要動。
 */
@media (min-width: 901px) {
  body.pick-wide .rail-inner {
    width: min(720px, calc(100% - 48px));
  }

  body.pick-wide .pick-grid {
    grid-template-columns: repeat(var(--pick-wide-cols), minmax(0, 1fr));
  }
}

.btn-back {
  margin-bottom: 10px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--dim);
  font-size: 12px;
  cursor: pointer;
}

.btn-back:hover {
  border-color: var(--gold);
  color: var(--gold);
}

/* ─────────── 詳情面板的條件編輯 ─────────── */

.d-edit {
  padding: 10px 12px 12px;
  border: 1px solid var(--line);
  border-left-width: 3px;
  border-radius: 8px;
  margin-top: 12px;
}

.d-edit.want {
  border-left-color: var(--want);
}

.d-edit.have {
  border-left-color: var(--have);
}

/* 加入前的條件。跟已加入那幾筆用的是同一組小圓鈕，只是不包在框裡 */
.marks.draft {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.d-edit .marks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.mk {
  padding: 4px 11px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 12px;
  color: var(--dim);
  background: transparent;
  cursor: pointer;
}

.mk[aria-pressed="true"] {
  color: #fff;
  border-color: transparent;
}

.mk.shiny[aria-pressed="true"] {
  background: var(--shiny);
}

.mk.xxl[aria-pressed="true"] {
  background: var(--xxl);
}

.mk.xxs[aria-pressed="true"] {
  background: var(--xxs);
}

.mk.max[aria-pressed="true"] {
  background: var(--max);
}

/*
 * 每一種條件都要有自己的底色。漏掉一個不會報錯，會變成**整顆鈕隱形**：
 * `.mk[aria-pressed="true"]` 把字轉白、邊框轉透明，沒有底色就是
 * 白字畫在白面板上。超極巨化剛加進來時就漏了這條。
 */
.mk.gmax[aria-pressed="true"] {
  background: var(--gmax);
}

.mk.purified[aria-pressed="true"] {
  background: var(--pur);
}

.mk.male[aria-pressed="true"] {
  background: var(--male);
}

.mk.female[aria-pressed="true"] {
  background: var(--female);
}

/* 已經有一模一樣的一筆時閃一下，指出是哪一筆，而不是默默不動 */
.d-edit.flash {
  animation: flash 1.2s ease-out;
}

@keyframes flash {
  0%,
  40% {
    background: color-mix(in srgb, var(--gold) 22%, transparent);
  }
  100% {
    background: transparent;
  }
}

@media (prefers-reduced-motion: reduce) {
  .d-edit.flash {
    animation: none;
    background: color-mix(in srgb, var(--gold) 18%, transparent);
  }
}

.mk.del {
  margin-left: auto;
}

.mk.del:hover {
  color: #fff;
  border-color: transparent;
  background: var(--danger);
}

/*
 * 選球種：平常收成一顆跟條件鈕同樣形狀的膠囊，點開才展開七種。
 * 用 `<details>`，重畫之後自己收起來（見 ui.js 的 ballPicker）。
 * 預設標記要關兩條規則，Safari 只認後面那條。
 */
.ball-pick {
  margin-top: 8px;
}

.ball-pick summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 12px;
  color: var(--dim);
  cursor: pointer;
  list-style: none;
}

.ball-pick summary::marker {
  content: "";
}

.ball-pick summary::-webkit-details-marker {
  display: none;
}

.ball-pick summary::after {
  content: "\25BE";
  font-size: 10px;
}

.ball-pick[open] summary::after {
  content: "\25B4";
}

.ball-pick summary img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

.ball-pick summary .v {
  color: var(--ink);
}

.ball-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 6px;
  margin-top: 8px;
}

.ball-opt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 7px 4px 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  font-size: 11px;
  line-height: 1.25;
  color: var(--dim);
  cursor: pointer;
}

.ball-opt img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

/*
 * 選中的是金框加淡金底，金色在這個站上本來就是「你在這裡」。
 * 底色用混色不用 `--sunk`：深色的 `--sunk` 比畫布還暗，會變成一個黑洞。
 */
.ball-opt[aria-pressed="true"] {
  border-color: var(--gold);
  background: color-mix(in srgb, var(--gold) 14%, var(--card));
  color: var(--ink);
}

.d-edit select {
  margin-top: 9px;
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg);
  font-size: 13px;
}

/* ─────────── 背卡 ─────────── */

/*
 * 詳情裡的卡面圖要限高（2026-09-15，使用者要求）。
 *
 * 彈窗比它取代的那個常駐右欄寬（520 對 340），等比放大之後一張方形卡面
 * 就吃掉大半個視窗，底下的收集格全被推到摺線以下，得捲一下才知道有東西。
 *
 * **寬度是 auto 不是 100%**：寫 100% 再靠 object-fit 收的話，留白留在
 * 元素框裡，圓角就跟圖錯開一圈。讓元素自己等比縮到最高 38vh，
 * 左右留白但圓角貼著圖。
 */
.card-art {
  display: block;
  max-width: 100%;
  max-height: 38vh;
  margin: 14px auto;
  border-radius: 8px;
}

.bg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 16px 14px;
}

/*
 * 收合時的那一排。橫向捲，露出真的卡面。
 * 原本收合只剩一行字，23 個收納夾佔滿一屏卻一張圖都沒有，
 * 但這個檢視的內容就是圖。
 */
.bg-strip {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
  mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
}

.bg-strip .bg-card {
  flex: 0 0 190px;
}

/* 卡片不畫框。卡面圖本身就是卡片 */
.bg-card {
  display: block;
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.bg-card img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
  border-radius: var(--radius);
  background: var(--sunk);
}

.bg-card:hover img {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}

.bg-card .t {
  display: block;
  margin-top: 7px;
  font-size: var(--fs-13);
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.bg-card .s {
  display: block;
  font-size: var(--fs-xs);
  color: var(--dim);
  margin-top: 1px;
}

.ev-title {
  grid-column: 1 / -1;
  font: var(--caps);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--dim);
  margin-top: 6px;
}

/* 背卡的搜尋列與範圍切換 */

.bg-tools {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.bg-tools input {
  flex: 1 1 220px;
  min-width: 0;
  max-width: 420px;
  padding: 9px 13px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--sunk);
  color: var(--ink);
  font-size: var(--fs-base);
}

.bg-tools input:focus {
  outline: 0;
  border-color: var(--gold);
  background: var(--card);
}

.bg-scope {
  display: flex;
  gap: 6px;
}

/* 範圍切換跟圖鑑的 chip 是同一種東西，長相就該一樣 */
.bg-scope button {
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink2);
  font-size: var(--fs-13);
  cursor: pointer;
}

.bg-scope button:hover {
  border-color: var(--ink2);
  color: var(--ink);
}

.bg-scope button[aria-pressed="true"] {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--bg);
}

/* 收納夾。段標題是一條髮絲線上的標籤，不是一條白色長方形 */

.bg-folders {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.folder-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 0 7px;
  margin-bottom: 12px;
  border: 0;
  border-bottom: 1px solid var(--hair);
  background: none;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}

.folder-head:hover {
  border-bottom-color: var(--gold);
}

.folder-head .nm {
  font: var(--caps);
  font-size: var(--fs-sm);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.folder-head .ct {
  font-size: var(--fs-xs);
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}

/* 展開的箭頭。用 CSS 畫，不另外載圖 */
.folder-head .nm::before {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  margin-right: 8px;
  vertical-align: 1px;
  border-left: 5px solid var(--dim);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform 0.15s;
}

.folder-head[aria-expanded="true"] .nm::before {
  transform: rotate(90deg);
}

.pad {
  padding: 20px 2px;
}

/* ─────────── toast ─────────── */

.toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  z-index: 60;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  font-size: 13px;
  max-width: calc(100vw - 32px);
  text-align: center;
}

/* ─────────── 手機 ─────────── */

@media (max-width: 900px) {
  /*
   * 手機直接指定欄數，不用 minmax 推算。
   * 推算出來的欄數會跟著螢幕寬度飄，360px 的手機會掉成四欄，
   * 而且圖鑑沒有面板內距、交換表有，同樣寬度會算出不同結果。
   * 講死欄數就沒有這些問題，五欄在哪支手機上都是五欄。
   */
  body {
    --cell-gap: 6px;
    --cell-img: 42px;
    --cell-pad: 5px 3px 5px;
  }

  body.big-icons {
    --cell-gap: 8px;
    --cell-img: 60px;
    --cell-pad: 9px 7px 8px;
  }

  .grid {
    grid-template-columns: repeat(var(--cell-cols), minmax(0, 1fr));
  }

  body {
    --panel-pad: 4px 0 0;
  }

  /*
   * 三個檢視從頂部列掉到貼底的 bar：圖示在上、小字在下，三等分。
   * 同一段 DOM，桌機是頂部列裡的一排文字鈕。
   * 拇指構得到的是下面不是上面，這也是手機把導覽放底部的唯一理由。
   */
  .views {
    position: fixed;
    inset: auto 0 0;
    z-index: 38;
    gap: 0;
    margin-right: 0; /* 桌機那條把語言推開的 auto，貼底時不需要 */
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--card);
    border-top: 1px solid var(--line);
  }

  .views button {
    flex: 1;
    flex-direction: column;
    gap: 3px;
    height: var(--tab-h);
    padding: 0;
    border-radius: 0;
    font-size: var(--fs-xs);
  }

  .views button svg {
    width: 22px;
    height: 22px;
  }

  /*
   * 選中的不填底色改用金色。底部 bar 只有三格，
   * 填一整格會變成一塊大色塊，比內容還搶眼。
   */
  .views button[aria-pressed="true"] {
    background: none;
    color: var(--gold-ink);
  }

  .views button[aria-pressed="true"]::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 26px;
    margin-left: -13px;
    height: 2px;
    border-radius: 0 0 2px 2px;
    background: var(--gold);
  }

  /* 最後一排格子不能被 bar 蓋住 */
  .content {
    padding-bottom: calc(var(--tab-h) + env(safe-area-inset-bottom) + 24px);
  }

  /*
   * 兩個篩選面板（圖鑑、地圖）在手機上是**置中的彈窗**（2026-09-26，使用者要求，
   * 原本從底部升起）。跟設定、右欄詳情同一種形態，全站浮出來的東西長一樣。
   * 遮罩用超大的 box-shadow 畫，不多一個元素；點遮罩只關面板、**不穿透**
   * 點到底下的格子或地圖點（main.js 的外點關閉在手機上會 return）。
   * z-index 壓過檢視 bar 與資訊列，但讓在右欄詳情之下。
   */
  .pop {
    position: fixed;
    inset: 50% auto auto 50%;
    z-index: 39;
    width: calc(100% - 28px);
    max-width: 520px;
    max-height: 84vh;
    padding: 14px 14px 12px;
    transform: translate(-50%, -50%);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow:
      0 0 0 100vmax rgba(0, 0, 0, 0.42),
      0 10px 26px var(--shadow-ink);
  }

  .infobar {
    padding: 7px 14px;
    gap: 8px 10px;
  }

  .ib-title {
    font-size: var(--fs-lg);
  }

  .cols {
    grid-template-columns: 1fr;
  }

  /*
   * 手機也置中（2026-09-12，使用者要求），不再從底部升起。
   * 只把左右留白縮窄一點，小螢幕上 48px 的留白吃掉太多可用寬度。
   * 上下仍然留著，內容多的時候在 .rail-scroll 裡滑動。
   */
  .rail-inner {
    width: calc(100% - 28px);
    max-height: 86vh;
  }

  .rail-scroll {
    padding: 20px 18px 24px;
  }
}

/* ═══════════ 選秀會 ═══════════
 *
 * 一欄置中，寬度收到 620：它是一張表單，不是格子牆，攤滿桌機
 * 整個寬度的話兩個輸入框會各自拉到四百多 px，眼睛得左右跑。
 * 元件盡量借現成的：搜尋框跟背卡那條同一種、欄位是交換表的 `.fld`、
 * 數字方塊是詳情面板 CP 那排的 `.cp-box`，**深色因此一行都不必另外寫**。
 */
.sc {
  max-width: 620px;
  margin: 0 auto;
}

/* 挑好的那一隻。圖比詳情面板小一號：這裡的主角是底下的分數 */
.sc-mon {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

/*
 * 圖的位置是一顆鈕：沒挑時是加號，挑了之後是那隻的圖，點了都是開
 * 選寶可夢面板（2026-09-23 使用者選的，拿掉了「換一隻」那顆文字鈕）。
 * 挑了之後的樣子平常跟一張圖沒兩樣，hover 才浮出一塊底色，
 * 跟圖鑑格子同一種提示。
 */
.sc-shot {
  flex: 0 0 72px;
  width: 72px;
  height: 72px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: none;
  cursor: pointer;
}

.sc-shot:hover {
  background: var(--card);
}

.sc-shot:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.sc-shot img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* 還沒挑的加號。虛線框跟交換表格子牆最後那一格加號同一個意思 */
.sc-add {
  display: grid;
  place-items: center;
  border: 1.5px dashed var(--line);
  color: var(--dim);
}

.sc-add:hover {
  border-color: var(--gold);
  background: none;
  color: var(--gold-ink);
}

.sc-add svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.sc-mon-tx {
  flex: 1;
  min-width: 0;
}

/*
 * 數字方塊借 CP 那排的 `.cp-box`，**但底色要換掉**：那邊的 `--sunk`
 * 是放在右欄白卡上的凹面，這裡直接站在畫布上，深色的 `--sunk`
 * 比畫布還暗，整排會變成黑洞（`.kb-note` 與費用矩陣踩過三次）。
 * 改用「浮一階」的混色，兩套配色都往抬起來走，深色不必覆寫。
 */
.sc .cp-box {
  background: color-mix(in srgb, var(--ink) 8%, var(--card));
}

/* 三個基準值字小一號，它們是參考不是答案 */
.sc-base .v {
  font-size: var(--fs-md);
}

.sc-form {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}

/* 在這裡欄位平分整排，不是交換表那種固定寬度 */
.sc-form .fld {
  flex: 1 1 0;
  min-width: 0;
}

/*
 * 選秀會的標籤是 `<label>` 不是 `<span>`：滑輪鈕不能包在 label 裡
 * （點了會跳鍵盤），所以欄位拆成標籤與 `.sc-in` 兩塊。樣式照 `.fld > span`。
 * 標籤帶單位，`.fld` 的全大寫會把 m、kg 變成 M、KG，所以不轉大寫。
 */
.sc-form .fld > label {
  font: var(--caps);
  letter-spacing: 0.09em;
  color: var(--dim);
}

/* 輸入框與滑輪鈕。鈕疊在輸入框右端裡面，輸入框右邊讓出它的位置 */
.sc-in {
  position: relative;
}

.sc-form input {
  width: 100%;
  padding: 8px 40px 8px 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: var(--sunk);
  color: inherit;
  font-size: var(--fs-md);
  font-variant-numeric: tabular-nums;
}

.sc-form input:focus {
  outline: 0;
  border-color: var(--gold);
  background: var(--card);
}

/*
 * 深色不能用 `--sunk`（1.35.02）：這裡直接站在畫布上，深色的 `--sunk`
 * （#0b0b0b）比畫布（#101010）還暗，五個欄位是五塊黑洞。
 * 改吃上面基準值那排（`.sc .cp-box`）同一個混色，**淺色維持原樣**。
 * 這條的特異性（0,2,2）蓋過 `.sc-form input:focus`（0,2,1），所以深色聚焦時
 * 底色不換，只靠金框。**這是刻意的**：聚焦那條換成 `--card`，在淺色是變亮，
 * 在深色（#191919）卻比這個混色更暗，方向反了。
 */
body.dark .sc-form input {
  background: color-mix(in srgb, var(--ink) 8%, var(--card));
}

/* 還沒挑寶可夢時鎖著。淡掉而不是藏起來，一進來就看得到要填哪五個 */
.sc-form input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.sc-wbtn {
  position: absolute;
  top: 3px;
  right: 3px;
  bottom: 3px;
  width: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--dim);
  cursor: pointer;
}

.sc-wbtn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sc-wbtn:hover {
  color: var(--ink);
}

/* 開著的那一欄，鈕跟輸入框聚焦時同一個金色 */
.sc-wbtn[aria-expanded="true"] {
  color: var(--gold-ink);
  background: color-mix(in srgb, var(--gold) 16%, transparent);
}

.sc-wbtn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: -2px;
}

.sc-wbtn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/*
 * 滑輪。放在那一排底下的槽裡，寬度與左邊界照那一欄算
 * （`--n` 欄、第 `--i` 欄、欄距 10px，跟 `.sc-form` 的 gap 一樣），
 * 看起來就長在欄位正下方。格高 `--row` 由 ui.js 的 `WHEEL_ROW` 給。
 *
 * 底色用 `--card` 加細框，**不用 `--sunk`**：這裡直接站在畫布上，
 * 深色的 `--sunk` 比畫布還暗（`.cp-box` 那條同一個坑）。
 */
.sc-wslot:empty {
  display: none;
}

.sc-wslot {
  margin-top: 8px;
}

.sc-wheel {
  --w: calc((100% - (var(--n) - 1) * 10px) / var(--n));
  position: relative;
  width: var(--w);
  margin-left: calc(var(--i) * (var(--w) + 10px));
  /* 內容區剛好五格，外框另外加：不加的話置中會偏 1px，格子對不上中間那條 */
  height: calc(var(--row) * 5 + 2px);
  display: flex;
  justify-content: center;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  scroll-margin: 12px;
}

/* 中間那一列是選中的值 */
.sc-wheel::before {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  top: calc(var(--row) * 2);
  height: var(--row);
  border-radius: 6px;
  background: color-mix(in srgb, var(--gold) 16%, transparent);
  pointer-events: none;
}

.wh-col {
  position: relative;
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
  padding: calc(var(--row) * 2) 0;
  text-align: center;
  font-size: var(--fs-md);
  font-variant-numeric: tabular-nums;
  -webkit-mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent);
  mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent);
}

.wh-col::-webkit-scrollbar {
  display: none;
}

.wh-col:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: -2px;
}

.wh-it {
  height: var(--row);
  line-height: var(--row);
  padding: 0 12px;
  scroll-snap-align: center;
  color: var(--dim);
  cursor: pointer;
}

.wh-it.on {
  color: var(--ink);
  font-weight: 700;
}

.wh-dot {
  align-self: center;
  font-size: var(--fs-md);
  font-weight: 700;
}

.sc-out {
  margin-top: 22px;
}

.sc-out > p {
  font-size: var(--fs-13);
}

.sc-bad {
  color: var(--danger);
}

/* 分數。整頁唯一的大字，其他東西都是在解釋它 */
.sc-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--radius);
  background: var(--card);
  border: 1px solid var(--line);
  margin-bottom: 10px;
}

.sc-total .k {
  font: var(--caps);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--dim);
}

.sc-total .v {
  font-size: 34px;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.sc-parts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

/*
 * 身高落在 XXL 門檻上時問的那一句。兩顆鈕上各寫著那種情況的分數，
 * 按之前就看得到兩個答案。選中的樣子照背卡範圍鈕：實心墨色。
 */
.sc-ask {
  padding: 12px 14px;
  margin-bottom: 10px;
  border-radius: var(--radius);
  border: 1px solid var(--gold);
  background: var(--card);
  font-size: var(--fs-13);
}

.sc-ask-btns {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.sc-ask-btns button {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  color: var(--ink2);
  cursor: pointer;
}

.sc-ask-btns button span {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.sc-ask-btns button[aria-pressed="true"] {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--bg);
}

.sc-ask-btns button[aria-pressed="true"] span {
  color: var(--bg);
}

.sc-notes {
  list-style: none;
  margin-top: 12px;
  font-size: var(--fs-sm);
  color: var(--dim);
}

.sc-notes li + li {
  margin-top: 4px;
}

.sc-notes li.warn {
  color: var(--danger);
}

@media (max-width: 900px) {
  .sc-total .v {
    font-size: 30px;
  }

  /* 320px 時四格各剩 65px，「783.41」擠得進去但要縮一級 */
  .sc-parts .v {
    font-size: var(--fs-md);
  }

  /* 捲到看得見時不要停在底部列後面 */
  .sc-wheel {
    scroll-margin-bottom: calc(var(--tab-h) + env(safe-area-inset-bottom) + 12px);
  }

  /* 個體值那排一欄只剩九十幾 px，輪的左右內距收窄 */
  .wh-it {
    padding: 0 8px;
  }
}

/* ═══════════ 世界地圖 ═══════════
 *
 * 工具列借背卡那條（`.bg-tools`／`.bg-scope`），跟選秀會借 `.cp-box`
 * 同一個理由：長得一樣的東西就該是同一條規則，深色也不必另外寫。
 *
 * 海是 `--card`、陸地是混了 10% 墨色的 `--card`，**不用 `--sunk`**：
 * 深色的 `--sunk` 比畫布還暗，那個坑站上踩過四次了。
 */
.map {
  max-width: 1100px;
  margin: 0 auto;
}

.map-frame {
  margin: 0 auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  overflow: hidden;
}

.map-svg {
  display: block;
  width: 100%;
  height: auto;
}

.map-svg .land {
  fill: color-mix(in srgb, var(--ink) 10%, var(--card));
}

/* 點的顏色。mix（一顆裡兩種都有）畫成兩個半圓，各自帶 wild／raid */
[data-kind="wild"] {
  --spot: var(--spot-wild);
}
[data-kind="raid"] {
  --spot: var(--spot-raid);
}

/*
 * 時區線。虛線、細、淡，排在陸地與點之間：它是背景資訊，不能搶點的戲。
 * `non-scaling-stroke` 讓線寬與虛線間距都用螢幕像素算，四個範圍看起來一樣。
 */
.map-svg .tz-line {
  fill: none;
  stroke: var(--ink2);
  stroke-width: 1px;
  stroke-dasharray: 3 3;
  stroke-opacity: 0.55;
  vector-effect: non-scaling-stroke;
}

/* 上緣的時差。描一圈海的顏色，壓在陸地或線上都讀得到 */
.map-svg .tz-label {
  fill: var(--ink2);
  font-weight: 600;
  text-anchor: middle;
  paint-order: stroke;
  stroke: var(--card);
  stroke-width: 3px;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.map-credit {
  margin-top: 4px;
  color: var(--dim);
  font-size: 11px;
}

.spot-mk {
  cursor: pointer;
  outline: none;
}

/*
 * 點本身只有 5.5px，手指按不到。底下墊一圈 16px 的透明圓當觸控範圍，
 * `fill: transparent` 仍然接得到點擊（`none` 就接不到了）。
 */
.spot-mk .hit {
  fill: transparent;
}

.spot-mk .dot {
  fill: var(--spot);
  stroke: var(--card);
  stroke-width: 1.5px;
  vector-effect: non-scaling-stroke;
}

/* 時區補位：空心。粗一點的邊才看得出是同一個顏色 */
.spot-mk .dot.hollow {
  fill: var(--card);
  stroke: var(--spot);
  stroke-width: 2.5px;
}

/* 兩種都有的那一顆：兩個半圓沒有描邊，外框另外一圈，才不會在中線多一條白線 */
.spot-mk .dot.half {
  stroke: none;
}
.spot-mk .ring {
  fill: none;
  stroke: var(--card);
  stroke-width: 1.5px;
  vector-effect: non-scaling-stroke;
}
.spot-mk:hover .ring,
.spot-mk:focus-visible .ring {
  stroke: var(--ink);
  stroke-width: 2px;
}

.spot-mk text {
  fill: var(--spot-on);
  font-weight: 700;
  text-anchor: middle;
  pointer-events: none;
}

.spot-mk:hover .dot,
.spot-mk:focus-visible .dot {
  stroke: var(--ink);
  stroke-width: 2px;
}

.map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: 10px;
  color: var(--dim);
  font-size: var(--fs-13);
}

.map-legend .lg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.map-legend i,
.spot-dot {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--spot);
}

.map-legend i.hollow,
.spot-dot.hollow {
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--spot);
}

/* 時間列表。同一個時差一組，時間只寫在組標題上 */
/* 同一頁裡接在地圖（與圖例、出處）底下，拉開一段才看得出是另一塊 */
.map .tz-list {
  margin-top: 26px;
}

.tz-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 760px;
  margin: 0 auto;
}

.tz-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--hair);
}

/* 活動模式的狀態，組標題右端一顆。換行時自己掉到下一行，不擠時間 */
.tz-head {
  flex-wrap: wrap;
}

.ev-st {
  margin-left: auto;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.ev-st[data-evst="live"] {
  background: color-mix(in srgb, var(--have) 16%, var(--card));
  color: var(--have);
}

.ev-st[data-evst="soon"] {
  background: color-mix(in srgb, var(--gold) 18%, var(--card));
  color: var(--gold-ink);
}

.ev-st[data-evst="later"] {
  border: 1px solid var(--line);
  color: var(--ink2);
}

.ev-st[data-evst="done"] {
  color: var(--dim);
}

/* 漏斗面板裡的活動時間：日期、開始、結束三欄一排，窄的時候換行 */
.ev-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ev-f {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1 1 110px;
  min-width: 0;
  color: var(--dim);
  font-size: 12px;
}

/*
 * 日期獨佔一行，開始與結束並排：手機上三欄擠在一排，「下午 02:00」會被截掉。
 */
.ev-f.ev-date {
  flex-basis: 100%;
}

/*
 * **面板在 `.searchbar` 裡面**，那條 `.searchbar input { flex: 1 1 200px }`
 * 會套到這裡：在直向排的欄位裡 200px 的 flex-basis 變成高度，
 * 第一版三個輸入框各高兩百多 px。所以 flex 與 max-width 要蓋掉。
 */
.ev-f input {
  flex: none;
  max-width: none;
  width: 100%;
  min-width: 0;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-base);
}

.ev-f input:focus {
  outline: 0;
  border-color: var(--gold);
}

.ev-bad {
  margin-top: 6px;
  color: var(--danger);
  font-size: 12px;
}

.tz-time {
  font-size: var(--fs-lg);
  font-variant-numeric: tabular-nums;
}

.tz-day,
.tz-off {
  color: var(--dim);
  font-size: var(--fs-13);
}

/* 一個地點一列：點、名稱，底下一排敘述與座標 */
.spot-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 2px;
  border-bottom: 1px solid var(--hair);
}

.spot-row:last-child {
  border-bottom: 0;
}

.spot-row .spot-dot {
  margin-top: 5px;
}

.spot-tx {
  flex: 1;
  min-width: 0;
}

.spot-name {
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* 敘述在左、座標與複製鈕在右，放不下時右邊那組整塊換行、仍然靠右 */
.spot-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2px 10px;
  margin-top: 2px;
}

.spot-meta {
  color: var(--ink2);
  font-size: var(--fs-13);
}

/*
 * 國旗。一圈淡淡的框：日本、新加坡那種白底的旗子放在白色面板上
 * 會少掉一條邊，看起來像破圖。
 */
.spot-flag {
  display: inline-block;
  width: 16px;
  height: 12px;
  margin-right: 6px;
  vertical-align: -1px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px var(--line);
}

.spot-cp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.spot-coord {
  color: var(--dim);
  font-size: var(--fs-13);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* 複製鈕：一顆小圓，圖示是兩張疊著的紙（2026-09-24 使用者要求，原本是文字鈕） */
.spot-copy {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--card);
  color: var(--ink2);
  cursor: pointer;
}

.spot-copy svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.spot-copy:hover {
  border-color: var(--ink2);
  color: var(--ink);
}

.spot-sheet .d-name {
  margin-bottom: 14px;
}

/* ═══════════ 活動（2026-09-26，待辦 M-2）═══════════
 *
 * 列表與月曆兩個子檢視。class 一律 `act-` 開頭：`ev-` 是地圖活動模式的。
 *
 * **兩種點不用新色相**：遊戲內是金色，要到現場是 `--ink` 實心。站上的色相已經很擠
 * （異色、極巨化、母、刪除鈕、地圖兩種點都有自己的色），而這兩種只要一眼分得開。
 * 進行中那句用 `--have`，跟地圖活動模式的「進行中」同一個顏色。
 */
.act {
  max-width: 960px;
}

.act-dot {
  display: inline-block;
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
}

.act-dot.irl {
  background: var(--ink);
}

.act-legend {
  display: flex;
  gap: 14px;
  margin: 4px 0 6px;
  font-size: 12px;
  color: var(--dim);
}

.act-legend .act-dot {
  margin-right: 5px;
  vertical-align: 1px;
}

.act-grp {
  margin: 18px 0 4px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink2);
}

.act-item {
  display: flex;
  align-items: center;
  gap: 4px;
  border-bottom: 1px solid var(--hair);
}

.act-row {
  display: grid;
  flex: 1;
  min-width: 0;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 4px;
  color: inherit;
  text-decoration: none;
}

/* 「在地圖上看」。連結旁邊一顆小圓鈕，44px 的觸控範圍靠內距撐 */
.act-map {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--card);
  color: var(--ink2);
  cursor: pointer;
}

.act-map:hover {
  color: var(--ink);
  border-color: var(--ink2);
}

.act-map svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}

.act-row:hover {
  background: var(--card);
}

.act-row.over {
  opacity: 0.55;
}

.act-date {
  font-size: 12px;
  line-height: 1.25;
  color: var(--ink2);
}

.act-date b {
  display: block;
  font-size: 17px;
  color: var(--ink);
}

.act-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.act-name {
  display: flex;
  gap: 6px;
  align-items: center;
  min-width: 0;
  font-weight: 600;
}

.act-name > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.act-time {
  font-size: 12px;
  color: var(--dim);
}

.act-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-size: 12px;
  color: var(--dim);
  white-space: nowrap;
}

.act-side.live {
  color: var(--have);
  font-weight: 700;
}

.act-ext {
  font-weight: 400;
  color: var(--dim);
}

.act-empty,
.act-credit {
  margin: 16px 4px;
  font-size: 12px;
  color: var(--dim);
}

.act-empty {
  font-size: 14px;
}

/* 月曆 */
.act-cal-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0 8px;
}

.act-cal-head h2 {
  font-size: 17px;
}

.act-nav {
  width: 32px;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.act-long {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-bottom: 10px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  font-size: 12px;
}

.act-long-h {
  color: var(--dim);
}

.act-long a {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  color: var(--ink);
  text-decoration: none;
}

.act-until {
  color: var(--dim);
}

.act-cal {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  background: var(--card);
}

.act-wd {
  padding: 4px 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  font-size: 11px;
  color: var(--dim);
  text-align: center;
}

.act-cell {
  min-height: 92px;
  padding: 4px;
  overflow: hidden;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-size: 11px;
  cursor: pointer;
}

.act-cell.out {
  background: var(--bg);
  color: var(--dim);
}

/* 選中的那天。框線畫在裡面，不改格子大小 */
.act-cell.sel {
  box-shadow: inset 0 0 0 2px var(--gold);
}

.act-num {
  display: inline-block;
  margin-bottom: 2px;
  padding: 0 5px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
}

.act-cell.today .act-num {
  background: var(--gold);
  color: #fff;
}

.act-chip {
  display: flex;
  gap: 4px;
  align-items: center;
  margin-top: 2px;
  line-height: 1.3;
  color: var(--ink);
  text-decoration: none;
}

.act-chip:hover span {
  text-decoration: underline;
}

.act-chip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.act-chip.over {
  opacity: 0.55;
}

.act-day {
  margin-top: 4px;
}

/*
 * 手機：月曆格子太窄寫不下名字，只留色點，點那一天在月曆底下列出來。
 * 色點本身還是連結，但手指點不到 8px 的東西，所以把它的點擊關掉，一律當成點那一天。
 */
@media (max-width: 900px) {
  .act-cell {
    min-height: 58px;
    padding: 3px 2px;
  }

  .act-chip {
    display: inline-flex;
    margin: 0 1px;
    pointer-events: none;
  }

  .act-chip span {
    display: none;
  }

  .act-row {
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 8px;
  }

  /* 手機寬度只剩一百多 px，名稱截斷會看不出是哪一場（「ボクレー」の…），讓它換行 */
  .act-name {
    align-items: baseline;
  }

  .act-name > span {
    overflow: visible;
    white-space: normal;
  }
}

/*
 * 地圖上的活動（2026-09-26，待辦 M-3）。
 * 正在舉辦的時區塗 `--have`（站上「進行中」的顏色），半透明，底下的陸地還看得見。
 * 所有進行中的區塊是**同一條 path**，交界的重疊不會疊深。
 * 實體活動的點是金色實心加白邊，跟野生（藍）、團體戰（橘）的點分得開。
 */
.map-svg .tz-live {
  fill: var(--have);
  fill-opacity: 0.28;
  stroke: none;
  pointer-events: none;
}

.map-svg .act-place circle {
  fill: var(--gold);
  stroke: var(--card);
  stroke-width: 2px;
  vector-effect: non-scaling-stroke;
}

.map-svg .act-place .core {
  fill: var(--card);
  stroke: none;
}

.map-legend .lg-live i {
  border-radius: 2px;
  background: color-mix(in srgb, var(--have) 40%, var(--card));
}

.map-legend .lg-place i {
  background: var(--gold);
}

.map-act {
  width: 100%;
  max-width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
}

/*
 * 網站導覽（2026-09-26）。行為在 js/tour.js。
 * 三層：擋點擊的透明層、亮框（超大 box-shadow 把其他地方壓暗，框裡是透明的）、對話框。
 * 全部 fixed、壓在所有東西上面（設定彈窗 45、toast 60）。
 * 亮框本身不接點擊：導覽中不讓人按到底下的鈕，免得走到一半資料被改掉。
 */
#tour {
  position: fixed;
  inset: 0;
  z-index: 100;
}

.tour-block {
  position: absolute;
  inset: 0;
}

.tour-hole {
  position: fixed;
  border-radius: 10px;
  box-shadow:
    0 0 0 3px var(--gold),
    0 0 0 100vmax rgba(0, 0, 0, 0.55);
  pointer-events: none;
  transition:
    left 0.2s,
    top 0.2s,
    width 0.2s,
    height 0.2s;
}

/* 目標不在畫面上的那一步：沒有亮框，整片一樣暗 */
.tour-hole[hidden] + .tour-bubble.center {
  box-shadow:
    0 0 0 100vmax rgba(0, 0, 0, 0.55),
    0 10px 26px var(--shadow-ink);
}

.tour-bubble {
  position: fixed;
  padding: 14px 16px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  color: var(--ink);
  box-shadow: 0 10px 26px var(--shadow-ink);
}

.tour-n {
  font-size: 12px;
  color: var(--dim);
}

.tour-t {
  margin-top: 2px;
  font-size: 16px;
  font-weight: 700;
}

.tour-b {
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink2);
}

.tour-act {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

.tour-sp {
  flex: 1;
}

.tour-act button {
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

.tour-act .tour-end {
  padding-left: 4px;
  padding-right: 4px;
  border-color: transparent;
  color: var(--dim);
}

/*
 * 主要那顆（下一步）用 toast 那組：深底淺字，兩套配色都夠對比。
 * **不用金底白字**：#b8860b 上白字只有 3.25:1，文字要 4.5（金色只給亮框那一圈）。
 */
.tour-act .tour-next {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--bg);
  font-weight: 700;
}

/* ═══════════ 知識 ═══════════
 *
 * 這一整段是第四個檢視與那些靜態頁共用的，**放在檔尾自成一區**，
 * 連自己的手機覆寫都關在下面那個 @media 裡面。
 * 上面那個 900 的大 block 已經收尾了，把知識的幾條插進去只會讓
 * 兩件不相干的事交錯在一起；同一個 media query 寫兩次是合法的。
 *
 * 靜態頁（`kb/<slug>/index.html`）吃的就是這一份 style.css，
 * 為的是拿到 :root 那組 token 與 body.dark 那兩千行深色——
 * 另開一個 kb.css 等於深色要同步兩處。代價是靜態頁載進一份
 * 它用不到的 SPA 樣式，幾 KB，換掉一個會寫岔的地方划算。
 */

/*
 * 格子牆。**這是全站唯一純文字的格子牆**，知識沒有一張能代表它的圖。
 * 一格是一條真的 <a>，不是 button：中鍵開新分頁、右鍵複製連結都要能用。
 */
.kb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
  padding: 16px;
}

/*
 * 格子本身。索引頁（kb/index.html）那份清單長得一模一樣，
 * 所以兩個選擇器共用一條規則，不是抄兩份。
 */
.kb-card,
.kb-item > a {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 132px;
  padding: 14px 16px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  color: inherit;
  text-decoration: none;
}

.kb-card:hover,
.kb-item > a:hover {
  border-color: var(--gold);
}

/*
 * 分類標籤。`data-cat` 目前不上色——只有兩個分類，多兩個顏色 token
 * 換不到什麼辨識度。屬性先留著，之後分類多了要上色時 CSS 就位。
 */
.kb-cat {
  font: var(--caps);
  letter-spacing: 0.06em;
  color: var(--dim);
  text-transform: uppercase;
}

.kb-t {
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: 1.35;
}

/* 摘要那一行才是這面牆的內容。只有標題的話看不出值不值得點進去 */
.kb-s {
  font-size: var(--fs-13);
  line-height: 1.55;
  color: var(--ink2);
}

.kb-d {
  margin-top: auto;
  padding-top: 4px;
  font-size: var(--fs-xs);
  color: var(--dim);
}

/*
 * SPA 頁尾那條到 kb/ 的連結。**存在的理由是爬蟲**，所以它是一條
 * 真的 <a> 而不是那顆檢視鈕；對人來說它只是一行低調的小字。
 */
.kb-foot {
  padding: 8px 16px 28px;
  text-align: center;
  font-size: var(--fs-13);
}

.kb-foot a {
  color: var(--dim);
}

/* ── 靜態頁 ── */

.kb-top {
  border-bottom: 1px solid var(--line);
  background: var(--card);
}

/*
 * 頂部列是兩欄：麵包屑吃剩下的寬度，齒輪靠右。
 * 內距改由這一層管，`.kb-crumb` 只負責排自己那幾段文字——
 * 齒輪要是排進 `.kb-crumb`，那條 `> * + *::before` 會給它加一個 `›`。
 */
.kb-topin {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 760px;
  margin: 0 auto;
  padding: 5px 20px;
}

.kb-crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  padding: 7px 0;
  font-size: var(--fs-13);
  color: var(--dim);
}

.kb-crumb a {
  color: var(--ink2);
}

/* 分隔符用 ::before 產生，不寫進 HTML：它是裝飾，讀屏不該把它唸出來 */
.kb-crumb > * + *::before {
  content: "›";
  margin-right: 8px;
  color: var(--dim);
}

.kb-page {
  max-width: 760px;
  margin: 0 auto;
  padding: 28px 20px 64px;
}

.kb-page h1 {
  margin: 6px 0 10px;
  font-size: var(--fs-2xl);
  line-height: 1.3;
}

.kb-lead {
  font-size: var(--fs-md);
  line-height: 1.6;
  color: var(--ink2);
}

.kb-meta {
  margin-top: 10px;
  font-size: var(--fs-xs);
  color: var(--dim);
}

/*
 * 內文。行高比全站的 1.6 再鬆一點：這裡是一整篇要讀完的字，
 * 不是格子上的標籤。
 */
.kb-body {
  counter-reset: kbsec;
  margin-top: 26px;
  font-size: var(--fs-md);
  line-height: 1.8;
}

/*
 * **內文兩端對齊**（2026-09-18，使用者要求）。CJK 靠字元間距撐，
 * 不像英文會被拉出大空隙，整段右緣切齊讀起來比參差的乾淨。
 * **只給整段的內文**：標題、表格、出處那種短行對齊了反而更亂，
 * 最後一行照常靠左（justify 本來的行為）。
 */
.kb-lead,
.kb-body p,
.kb-body li {
  text-align: justify;
}

.kb-body h2 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 34px 0 12px;
  padding-top: 14px;
  border-top: 1px solid var(--hair);
  font-size: var(--fs-lg);
}

/*
 * 小標編號。**用 flex 的第一個子元素，不是絕對定位**——絕對定位對不準
 * 基線，行高一改就跑掉。`decimal-leading-zero` 補到兩位，一頁八節也齊。
 */
.kb-body h2::before {
  counter-increment: kbsec;
  content: counter(kbsec, decimal-leading-zero);
  flex: none;
  font: var(--caps);
  font-size: var(--fs-13);
  color: var(--gold-ink);
}

.kb-body h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/*
 * 要點清單。段落塌成可掃的短行，項目符號是一個小方塊不是圓點——
 * 圓點跟內文的標點在小字級下分不太出來。
 */
.kb-body ul.pts {
  padding-left: 0;
  list-style: none;
}

ul.pts > li {
  position: relative;
  margin-bottom: 9px;
  padding-left: 18px;
  line-height: 1.7;
}

ul.pts > li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 11px;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--gold);
}

.kb-body p,
.kb-body ul,
.kb-body ol,
.kb-body figure,
.kb-body table {
  margin-bottom: 16px;
}

.kb-body ul,
.kb-body ol {
  padding-left: 22px;
}

.kb-body li {
  margin-bottom: 4px;
}

.kb-body a {
  color: var(--gold-ink);
}

.kb-body strong {
  font-weight: 700;
}

/*
 * 插圖。**`<figcaption>` 不是裝飾**，它是給看不到圖的人唯一的內容，
 * 所以它有自己的地位（一條金線），不是一行縮在角落的灰字。
 */
.kb-body figure {
  margin-top: 22px;
}

.kb-body img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
}

.kb-body figcaption {
  margin-top: 8px;
  padding-left: 10px;
  border-left: 2px solid var(--gold);
  font-size: var(--fs-13);
  line-height: 1.6;
  color: var(--ink2);
}

/*
 * 沒有官方出處的那幾條。整段挑出來，讀的人一眼看得出這條的份量不同。
 *
 * 底色用 `--card` 不是 `--sunk`：深色的 `--sunk`（#0b0b0b）比畫布
 * （#101010）**更暗**，整段會變成頁面上一個黑洞。`--card` 兩套都是
 * 「比畫布亮一階」，淺色是白、深色是 #191919，方向一致。
 */
.kb-note {
  padding: 12px 14px;
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--card);
  font-size: var(--fs-base);
}

/*
 * 引用官方原文。第一次用在「必定變亮晶晶」那一則——那一頁的重點是
 * 官方到底寫了什麼，把原句整段挑出來比塞在內文裡有力得多。
 *
 * **左邊那條線刻意用 `--have`，跟來源清單的「官方」標籤同一個顏色。**
 * `.kb-note` 是金色，講的是「這條沒有官方依據」；兩者在同一頁上下相鄰，
 * 顏色一致就等於在說「這一段的份量跟那顆標籤一樣」。
 * 兩個都吃 token，深色不必另外覆寫。
 */
.kb-body blockquote {
  margin: 0 0 16px;
  padding: 12px 14px;
  border-left: 3px solid var(--have);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--card);
  font-size: var(--fs-base);
}

/*
 * 行內代碼。搜尋語法那一則整篇都是 `,` 與 `&`，不給它自己的樣子
 * 就跟旁邊的標點混在一起——上一版的截圖裡真的看不出哪個是符號。
 */
.kb-body code {
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--sunk);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.92em;
}

/*
 * 寬表格自己包一層 `<div class="kb-scroll">`。
 * 內文是手寫的 HTML，CSS 沒辦法替它加一層容器，所以這是寫內文時的
 * 責任，範本裡有寫。不包的話手機上整頁會被撐出橫向捲動。
 */
.kb-scroll {
  overflow-x: auto;
  margin-bottom: 16px;
}

.kb-scroll > table {
  margin-bottom: 0;
}

.kb-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-base);
}

.kb-body th,
.kb-body td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--hair);
  text-align: left;
}

.kb-body th {
  font: var(--caps);
  color: var(--dim);
  text-transform: uppercase;
}

/*
 * 列標題（`<th scope="row">`）是內容不是欄位名，所以走一般內文的樣子。
 * 不覆寫的話對照表最左邊那一欄會變成一排小灰字，比右邊的值還難讀。
 */
.kb-body th[scope="row"] {
  font: inherit;
  font-weight: 600;
  color: var(--ink);
  text-transform: none;
}

/*
 * 出處。**逐條列，而且官方與社群分得出來**——查不到官方出處的不是
 * 不能寫，是要講明白。圖鑑只能不列，頁面寫得出這句話，差別在這裡。
 */
/*
 * 設定面板裡那種一列一格的方塊：圓形圖示、標題、副標、右邊一個箭頭。
 *
 * **底色靠 color-mix 混 `--ink`，不用 `--sunk`。** 這個方塊要比它所在的
 * 面板**亮一階**，而深色的 `--sunk`（#0b0b0b）比畫布還暗，方向相反——
 * `.kb-note` 為同一條理由改吃 `--card`。混出來的值兩套配色都往「抬起來」
 * 的方向走，所以不必寫深色覆寫。
 */
.kb-row {
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--ink) 8%, var(--card));
}

.kb-row > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  cursor: pointer;
  list-style: none;
}

/* 三角形的預設標記要兩條規則才關得掉，Safari 走 -webkit 那條 */
.kb-row > summary::-webkit-details-marker {
  display: none;
}

.kb-row > summary::marker {
  content: "";
}

.kb-row > summary:hover {
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  border-radius: var(--radius);
}

.row-ic {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink2);
}

/* 這一區的圖示走描邊不走填色，齒輪那顆是填色的，兩種不要混用 */
.row-ic svg,
.row-ar {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.row-tx {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.row-t {
  font-size: var(--fs-md);
  font-weight: 600;
}

.row-s {
  font-size: var(--fs-13);
  color: var(--dim);
}

.row-ar {
  flex: none;
  color: var(--dim);
  transition: transform 0.15s;
}

/* 展開就把箭頭轉下去，收合與展開一眼分得出來 */
.kb-row[open] > summary .row-ar {
  transform: rotate(90deg);
}

/* 設定裡那一列「使用說明書」是鈕不是 <details>，長相照 summary */
.help-open {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 13px;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.help-open:hover {
  background: color-mix(in srgb, var(--ink) 11%, var(--card));
}

/*
 * 說明書的彈窗（1.35.01）。蓋在設定上面的第二層，放在 `#settings` 裡
 * 跟 `.modal-inner` 並排（那一層有 transform，放進去 fixed 會跑掉）。
 * 遮罩淡一點：底下已經有設定那一層的遮罩，疊兩層 0.45 會太黑。
 */
.help-modal {
  background: rgba(0, 0, 0, 0.25);
}

/*
 * 設定面板的使用說明（2026-09-25，待辦 J）。四個主題各一個 `.kb-row`，
 * 主站與知識頁吃同一份（js/settings.js 畫、js/help.js 寫字）。
 *
 * 每一項左邊是一個 26px 的小方塊：講到哪顆鈕就畫那顆鈕的圖示
 * （`.help-ic`），講到格子上的記號就畫一格縮小的格子、記號擺在
 * 它真正出現的角落（`.help-sw`）。記號沿用格子上那幾顆的 class，
 * 這裡只把尺寸縮小。
 */
.help-rows {
  display: grid;
  gap: 8px;
}

.help-body {
  padding: 0 14px 14px;
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--ink2);
}

.help-body p {
  margin: 10px 0 0;
}

.help-body b {
  font-weight: 600;
  color: var(--ink);
}

.help-list {
  display: grid;
  gap: 9px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.help-list > li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.help-list > li > span:last-child {
  flex: 1;
  min-width: 0;
  padding-top: 3px;
}

/* 沒有圖示的那一種（資料存在哪）就是一般的圓點清單 */
.help-list.plain {
  display: block;
  padding-left: 18px;
  list-style: disc;
}

.help-list.plain > li {
  display: list-item;
  margin-top: 6px;
}

.help-ic {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink2);
}

/* 「產生分享圖」那種只有字的鈕，留同寬的空位讓文字對齊 */
.help-ic:empty {
  border-color: transparent;
}

.help-ic svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.help-plus {
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
}

/* 一格縮小的格子。底色跟方塊一樣往上抬一階，不用 --sunk（深色會變黑洞） */
.help-sw {
  position: relative;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--ink) 12%, var(--card));
}

.help-sw .spark {
  top: 1px;
  left: 2px;
}

.help-sw .maxb,
.help-sw .purb {
  top: 1px;
  right: 1px;
  width: 13px;
  height: 13px;
}

.help-sw .gb {
  font-size: 12px;
  -webkit-text-stroke-width: 2px;
}

.help-sw .ballb {
  position: absolute;
  right: 1px;
  bottom: 1px;
  width: 11px;
  height: 11px;
  object-fit: contain;
}

.help-sz {
  position: absolute;
  right: 0;
  bottom: 2px;
  left: 0;
  font-size: 8px;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  color: var(--ink2);
}

/* 背卡：整格鋪一張示意的底圖。配色寫死，它代表的是「一張圖」不是任何介面色 */
.help-bgsw {
  position: absolute;
  inset: 0;
  border-radius: 6px;
  background: linear-gradient(135deg, #f2c14e 0%, #e86a5c 45%, #3f8fd2 100%);
}

/*
 * 出處。**逐條列，而且官方與社群分得出來**——這一段 2026-09-18 從頁面
 * 結尾搬進設定彈窗，再收進上面那個方塊裡。收合時內容仍然在 DOM，
 * 爬蟲讀得到。
 */
.kb-src > ol {
  margin: 0;
  padding: 4px 14px 12px 34px;
  font-size: var(--fs-13);
  line-height: 1.9;
}

.kb-src a {
  color: var(--gold-ink);
}

.kb-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  font: var(--caps);
  line-height: 1.7;
  text-transform: uppercase;
}

.kb-tag.official {
  border: 1px solid var(--have);
  color: var(--have);
}

/* 社群那顆用金色不用紅：它不是錯誤，是「這條的來源份量不同」 */
.kb-tag.community {
  border: 1px solid var(--gold);
  color: var(--gold-ink);
}

/* 索引頁的清單。項目符號拿掉，格子自己就是項目 */
.kb-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
  margin-top: 26px;
  list-style: none;
}

@media (max-width: 900px) {
  /*
   * 欄數講死，不推算。`minmax` 推出來的欄數會跟著螢幕寬度飄，
   * 這跟寶可夢格子那條是同一個理由。
   */
  .kb-grid,
  .kb-list {
    grid-template-columns: 1fr;
  }

  .kb-grid {
    padding: 12px;
  }

  .kb-card,
  .kb-item > a {
    min-height: 0;
  }

  .kb-page {
    padding: 22px 16px 48px;
  }

  .kb-page h1 {
    font-size: var(--fs-xl);
  }

  .kb-topin {
    padding: 4px 16px;
  }
}