/* ═══════════════════════════════════════════════════════════════════════════
   mobile.css — 手機版優化層
   ───────────────────────────────────────────────────────────────────────────
   規則：全檔只用 @media (max-width: …)，桌機（≥1024px）一行都不受影響。
   載在所有現有 CSS 之後，所以同分特異度時這裡贏；但遇到
   `.fs-dots .fs-dot`、`.filters input[type=x]` 這種高特異度選擇器時，
   下面一律把原選擇器照抄一遍再改，不用 !important 硬壓。

   斷點（由寬到窄，對應既有檔案已經用過的斷點，不另外發明）：
     880px  怪物圖鑑「書」已經是單頁本 → 在這裡修單頁本自己的毛病
     860px  頂部列已經換行 → 在這裡把它壓扁
     768px  平板直向以下：觸控尺寸、字級、篩選列
     720px  enhance.css 把 .filters 改成 grid 的點 → 跟著它修
     700px  職業輪播（layout.css 在這裡收成單欄）
     560px  手機：版心留白
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════════
   1. 頂部列：把 160px 的 sticky 頭壓下來，搜尋框吃滿整行
   ───────────────────────────────────────────────────────────────────────────
   原本 390px 下是三層（品牌+登入 / 搜尋 / 導覽）約 160px，佔掉 844 高的 19%，
   而且搜尋框只有 220px 寬、右邊留一大塊空白。
   這裡：把上下 padding 收緊、品牌撐到 40px 觸控高度、搜尋框拉滿整行。
   導覽列維持「橫向捲動」（enhance.css 已做 snap + 右緣漸層），不改成換行 ——
   換行會再多吃 44px 的 sticky 高度，捲動在這裡是對的選擇。
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
  .top { padding: 7px 14px; gap: 8px 10px; }

  /* 品牌：原本 30px，觸控目標不足 */
  .brand { min-height: 40px; }

  /* 搜尋框吃滿整行 —— 原本 220px/140px/40vw，右邊那塊空白沒有意義，
     而且窄輸入框在手機上打字時看不到自己打了什麼 */
  .search { order: 2; flex: 1 1 100%; width: 100%; margin-left: 0; }
  .search input { width: 100%; max-width: none; min-width: 0; font-size: 15px; padding: 10px 16px; }
  .search input:focus { width: 100%; }

  /* 導覽列：捲動時每顆之間留 8px，符合觸控間距 */
  .nav { gap: 8px; }

  /* 登入／頭像區塊不要被擠扁 */
  .auth-box { flex: 0 0 auto; }
  .auth-box .btn, .auth-box button, .auth-box a { min-height: 40px; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   2. 版心與行長
   ───────────────────────────────────────────────────────────────────────────
   390px 扣掉 16px 左右留白 = 358px 內容寬，15px 中文約 23 字／行，
   剛好落在「一行不超過 ~24 個中文字」的舒適區。
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 560px) {
  main { padding: 16px 16px 56px; }
  h1 { font-size: 25px; }
  h2 { font-size: 18px; margin: 28px 0 14px; }
  .sub { font-size: 14.5px; }
  /* 正文與說明段落不要短於 14px */
  body { font-size: 15px; }
  .crumb { font-size: 14px; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   3. 篩選列：裝備／外觀頁的「兩欄擠壓」
   ───────────────────────────────────────────────────────────────────────────
   enhance.css 在 ≤720px 把 .filters 改成 `grid-template-columns: 1fr 1fr`，
   這對怪物頁（子項是 input/select，本來就該兩欄）是對的，
   但裝備／外觀頁用的是 .filters.col，子項是整條 .frow ——
   實測 390px 時每條 .frow 只剩 161px 寬，九顆職業籌碼被迫一顆一行疊成一長條。
   → .filters.col 收成單欄，.frow 吃滿寬度。
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  .filters.col { grid-template-columns: 1fr; gap: 12px; }
  .filters.col > .frow { grid-column: 1 / -1; width: 100%; }
  .filters .frow { gap: 8px; }

  /* 外觀頁的籌碼是 .filters 的直接子項（沒有包 .frow），
     在 1fr 1fr 的格線裡每組只分到 159px —— 四顆「髮型／臉型／膚色／時裝」
     被迫折成 2×2，旁邊的「男／女」卻又孤零零佔另一格。
     讓每一組籌碼各自獨佔一整列，一組就是一行，掃一眼就讀完。 */
  .filters > .chips { grid-column: 1 / -1; }
}

@media (max-width: 768px) {
  /* 籌碼：高度 40px、彼此至少 8px（layout.css 在 ≤640 收到 4px，太密） */
  .filters .chips, .chips { gap: 8px; }
  .chip { min-height: 40px; display: inline-flex; align-items: center; padding: 6px 14px; font-size: 14px; }
  .filters .chips .chip small { font-size: 12px; margin-left: 3px; }

  /* 籌碼列在手機不要變成橫捲條（style.css ≤560 會 nowrap + overflow-x）——
     橫捲會把選項藏起來，換行才看得到全部 */
  .chips { flex-wrap: wrap; overflow-x: visible; }

  /* 檢視切換（書本／清單）也要 40px */
  .view-sw button { min-height: 40px; padding: 8px 16px; font-size: 14px; }

  /* 數字／搜尋欄位 */
  .filters input[type=search], .filters input[type=text], .filters select { min-height: 44px; font-size: 15px; }
  .filters input[type=number] { min-height: 44px; font-size: 15px; }
  .filters label { font-size: 14px; }

  /* ── 勾選框：原生的只有 13px，手機上根本點不到 ──────────────────────
     改成 40px 的觸控區 + 22px 的視覺方塊（外框透明，所以看起來還是小方塊，
     但可點範圍是 40px）。負邊界把多出來的觸控區吃回去，讓視覺方塊仍然
     對齊容器內距。 */
  .filters input[type="checkbox"] {
    -webkit-appearance: none; appearance: none;
    width: 40px; height: 40px; margin: 0 -9px; flex: none;
    display: inline-grid; place-items: center;
    background: none; border: 0; padding: 0; cursor: pointer;
  }
  .filters input[type="checkbox"]::before {
    content: ""; grid-area: 1 / 1;
    width: 22px; height: 22px; border-radius: 7px; box-sizing: border-box;
    border: 2px solid var(--wood-border-dark); background: #fdfbf7;
    transition: background .15s ease, border-color .15s ease;
  }
  .filters input[type="checkbox"]:checked::before {
    background: linear-gradient(180deg, #ff7a36, #e65100);
    border-color: var(--accent);
  }
  .filters input[type="checkbox"]::after {
    content: ""; grid-area: 1 / 1;
    width: 11px; height: 6px; margin-top: -3px;
    border-left: 2.5px solid #fff; border-bottom: 2.5px solid #fff;
    transform: rotate(-45deg) scale(0);
    transition: transform .15s ease;
  }
  .filters input[type="checkbox"]:checked::after { transform: rotate(-45deg) scale(1); }
  .filters input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--accent-orange); outline-offset: -7px; border-radius: 13px;
  }
  .filters .ck, .filters .cbx { min-height: 40px; gap: 8px; font-size: 14px; align-items: center; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   4. 怪物圖鑑「書」（.bk）
   ───────────────────────────────────────────────────────────────────────────
   dexbook.css 在 ≤880px 已經收成單頁本，但單頁本自己還有三個毛病：

   (a) 翻頁鈕 ‹ › 是 position:absolute 貼在左右邊，在單頁本上直接**壓在內文上**
       —— 實測 390px 時 › 蓋住數值列的「楓幣」欄位，讀不到也點不到。
       → 改成書本下方的一條翻頁列（上一頁 · 頁碼 · 下一頁），不再疊字。
   (b) .bk-stats 是寫死的四欄，在 358px 寬度下每欄 ~78px，
       「楓幣 8~12」這種較長的值被裁掉。→ 收成兩欄。
   (c) .bk-where / .bk-drops 有 max-height + overflow-y，在手機上變成
       「頁面裡的小捲軸」，手指很難操作也容易誤捲。→ 放開，讓它自然展開。
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 880px) {

  /* (a) 翻頁鈕移到書下方，不再蓋住內文 */
  .bk {
    display: grid;
    grid-template-columns: 46px 1fr 46px;
    grid-template-areas:
      "book book book"
      "prev idx  next";
    align-items: center;
    row-gap: 12px;
  }
  .bk-inner { grid-area: book; }
  .bk-idx { grid-area: idx; margin-top: 0; }
  .bk-nav {
    position: static; grid-area: prev;
    top: auto; left: auto; right: auto;
    width: 46px; height: 46px;
    transform: none;
  }
  .bk-nav.next { grid-area: next; }
  .bk-nav.prev { left: auto; }
  .bk-nav:hover:not(:disabled) { transform: scale(1.08); }
  /* 翻頁動畫的紙面只能蓋住「書」，不能蓋到下面那條翻頁列
     （46px 鈕 + 12px row-gap = 58px） */
  .bk-leaf { bottom: 58px; }

  /* (b) 數值列：四欄 → 兩欄，值不再被裁掉 */
  .bk-stats { grid-template-columns: 1fr 1fr; gap: 2px 16px; }
  .bk-stats div { font-size: 13.5px; padding: 5px 0; }

  /* (c) 拿掉頁面裡的小捲軸 */
  .bk-where { max-height: none; overflow: visible; gap: 8px; font-size: 13px; }
  .bk-drops { max-height: none; overflow: visible; }

  /* 出沒地圖：原本 23.8px 高，是觸控目標不是行內文字 → 撐到 40px */
  .bk-where a {
    min-height: 40px; display: inline-flex; align-items: center;
    padding: 4px 12px; border-radius: 10px;
  }

  /* 掉落清單：12px 太小 */
  .bk-drops li { font-size: 13px; padding: 4px 0; }
  .bk-drops img, .bk-drops i { width: 19px; height: 19px; }

  /* 內文與留白 */
  .bk-sheet { padding: 22px 18px 42px; }
  .bk-story { font-size: 14.5px; line-height: 1.9; padding: 13px 14px 13px 16px; }
  .bk-title h3 { font-size: 24px; }
  .bk-sec h4 { font-size: 13.5px; }
  .bk-traits { font-size: 12.5px; }
  .bk-traits span { min-height: 28px; display: inline-flex; align-items: center; }
}

@media (max-width: 430px) {
  /* 390/360：怪物圖與標題搶寬度，把圖縮一點讓名字有地方站 */
  .bk-head { grid-template-columns: 104px 1fr; gap: 13px; }
  .bk-plate { height: 104px; }
  .bk-title h3 { font-size: 22px; }
  .bk-page { min-height: 480px; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   5. 職業輪播（.famslide）
   ───────────────────────────────────────────────────────────────────────────
   layout.css 在 ≤700px 把左右箭頭 display:none，只留 5 顆 10px 的圓點 ——
   10px 的點是這個網站最難點的東西。
   → 箭頭放回來（排在圓點兩側，44px），圓點本身改成「40px 觸控區 + 10px 視覺點」。
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 700px) {
  .famslide {
    grid-template-columns: 44px 1fr 44px;
    grid-template-areas:
      "view view view"
      "prev dots next";
    gap: 14px 8px;
    padding: 20px 16px;
  }
  /* 把箭頭放回來：它們一直都在 DOM 裡，事件也綁好了，只是被藏起來 */
  .fs-nav { display: grid; width: 44px; height: 44px; }
  .fs-nav:hover { transform: none; }

  .fs-slide > p { font-size: 14.5px; }
  .fs-slide > header h3 { font-size: 20px; }
}

/* 圓點本身的觸控尺寸要蓋到平板直向（768）——
   layout.css 只在 ≤700 收單欄，但 701~768 的圓點一樣是 10px，一樣點不到。 */
@media (max-width: 768px) {
  .fs-dots { gap: 2px; }
  /* 特異度要對上 style.css 的 `.fs-dots .fs-dot` */
  .fs-dots .fs-dot {
    width: 40px; height: 40px; border-radius: 50%;
    background: none; border: 0; padding: 0;
    display: inline-grid; place-items: center;
    transform: none;
  }
  .fs-dots .fs-dot::before {
    content: ""; width: 10px; height: 10px; border-radius: 50%;
    background: var(--wood-border);
    transition: background .18s ease, transform .18s ease;
  }
  .fs-dots .fs-dot.on { background: none; transform: none; }
  .fs-dots .fs-dot.on::before { background: var(--accent-orange); transform: scale(1.35); }
  .fs-dots .fs-dot:focus-visible { outline: 2px solid var(--accent-orange); outline-offset: -4px; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   6. 地圖頁「旅程」（.jny）
   ───────────────────────────────────────────────────────────────────────────
   等級軸在 390px 佔 34px（9.5%），比例還行，但：
   - 離你越遠的段落 opacity 低到 .45，在手機的戶外亮度下等於看不見；
     手機把下限拉到 .7（仍然有「遠近」的層次，但讀得到）。
   - 卡片裡的怪物名字 11px 太小。
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  .jny-band { grid-template-columns: 30px 1fr; gap: 10px; }
  .jny-body { padding-bottom: 18px; }
  .jny-body h3 { font-size: 18px; margin: 2px 0 10px; }
  .jny-body h3 small { font-size: 13px; }

  /* 遠的段落不要淡到讀不出來 */
  .jny-band[data-far="1"] { opacity: .92; }
  .jny-band[data-far="2"] { opacity: .82; }
  .jny-band[data-far="3"] { opacity: .72; }

  /* 地圖卡：縮圖放大一點，文字級距拉到可讀 */
  .jny-map { grid-template-columns: 74px 1fr; gap: 3px 12px; padding: 10px 14px 10px 10px; }
  .jm-thumb { width: 74px; height: 54px; }
  .jm-n { font-size: 15px; }
  .jm-lv { font-size: 12.5px; }
  .jm-mobs { font-size: 12.5px; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   7. 首頁 hero
   ───────────────────────────────────────────────────────────────────────────
   enhance.css 在 ≤720px 已經把「左濃右淡」換成由下往上的深色遮罩，方向是對的。
   這裡只補兩件事：
   - 內文 14.5px → 15px，並限制行長（hero 是整頁字最大的一塊，行長最容易失控）。
   - 三顆按鈕換行後彼此至少 8px、每顆 44px。
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  .hero p { font-size: 15px; line-height: 1.75; max-width: 24em; }
  .hero .row { gap: 10px; }
  .hero .row .btn { min-height: 44px; }
}
@media (max-width: 430px) {
  .hero { padding: 22px 16px 24px; }
  .hero h1 { font-size: 27px; }
  /* 底部那條深色帶再壓實一點：390px 時文字塊幾乎貼著美術最亮的草地 */
  .hero .shade {
    background: linear-gradient(180deg,
      rgba(20, 12, 4, .34) 0%,
      rgba(24, 14, 5, .58) 30%,
      rgba(28, 17, 6, .86) 58%,
      rgba(30, 18, 7, .94) 100%);
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   8. 表格：不要為了讀一張表橫向捲動
   ───────────────────────────────────────────────────────────────────────────
   style.css 在 ≤960px 給 `table { min-width: 460px }` + `.panel { overflow-x: auto }`，
   結果突襲頁 6 張表（招式表、掉落表）在 390px 全部變成橫捲條。
   欄位其實不多（3~4 欄），問題出在 min-width 和 white-space:nowrap 兩條。
   → 放開寬度、允許換行，表格就直接塞進 358px。
     .panel 的 overflow-x:auto 保留當保險（內容塞得下就不會出現捲軸）。
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .panel table, .card table, details.card table, .skill table {
    min-width: 0; width: 100%;
  }
  .panel table th, .panel table td,
  .card table th, .card table td,
  .skill table th, .skill table td {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    padding: 9px 8px;
    font-size: 13.5px;
    vertical-align: top;
  }
  /* 第一欄（招式名／物品名）是找東西的依據，加粗好掃視 */
  .panel table td:first-child, .panel table th:first-child { font-weight: 700; }
  /* 數字欄用等寬數字對齊即可。
     ⚠️ 不要對「最後一欄」加 white-space: nowrap —— 突襲的招式表最後一欄是「說明」
     （長句），一加 nowrap 整張表就變回 433px 的橫捲條。*/
  .panel table { font-variant-numeric: tabular-nums; }
}

@media (max-width: 560px) {
  /* 突襲頁掉落表有 62 列，欄距再收一點才不會擠 */
  .panel table th, .panel table td { padding: 8px 6px; font-size: 13px; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   9. 其他頁面的密度與觸控
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* 首頁數據磚：兩欄剛好，但數字 30px 在 170px 寬的磚上會頂到邊 */
  .tile { padding: 14px 16px; }
  .tile b { font-size: 26px; }
  .tile span { font-size: 13.5px; }

  /* 怪物清單卡 */
  .dex { font-size: 14px; }
  .dex .maps summary { min-height: 40px; display: flex; align-items: center; }
  .dex .maps .mp { gap: 8px; }
  .dex .maps .mp a { min-height: 36px; display: inline-flex; align-items: center; padding: 2px 10px; font-size: 13px; }
  .dex .st { padding: 6px 9px; }

  /* 裝備展開內容 */
  details.card.gear > summary { padding: 14px 16px; min-height: 56px; }
  .gsec .st, .gsec .dl { font-size: 13.5px; padding: 6px 9px; }
  .gsec .tag { font-size: 13px; min-height: 30px; display: inline-flex; align-items: center; }
  .gsec .tags { gap: 8px; }
  /* 「看完整頁面」原本 21px 高的行內連結，在手機上給它一個像樣的按鈕 */
  .gb > a, a.gmore {
    display: inline-flex; align-items: center; min-height: 40px;
    padding: 0 14px; margin-top: 8px;
    border: 1.5px solid var(--wood-border); border-radius: 999px;
    background: #fff; color: var(--accent); font-weight: 800; font-size: 14px;
  }

  /* 突襲卡 */
  .card.raid { padding: 14px 16px; }
  .card.raid .meta b { font-size: 17px; }

  /* 外觀圖鑑：格子小一點會塞不下名字，維持 92px 但把名字放大 */
  .lookcell { font-size: 13px; }
  .lr-c { gap: 8px; }

  /* 線上試穿 */
  .tryon-act .chip, .tryon-side .chip { min-height: 40px; }
  /* 外觀頁的「Discord 登入」是這頁的主要行動點，量到 39.1px —— 差一點點就不合格 */
  .auth-btn, .tryon-empty .auth-btn { min-height: 44px; }

  /* 探險實況的清單項目 */
  .livebox #list a { min-height: 44px; display: flex; align-items: center; font-size: 14px; }
  .livebox #hud { font-size: 13.5px; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   10. prefers-reduced-motion
   ───────────────────────────────────────────────────────────────────────────
   enhance.css 已有一份全域的 reduce 規則。這裡只保險上面新加的東西：
   翻頁紙、籌碼勾選、輪播點都不能「只靠動畫才看得見」。
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 880px) and (prefers-reduced-motion: reduce) {
  .bk-leaf { transition: none; }
  .bk-face::after { opacity: 0; }
}
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  .filters input[type="checkbox"]::after { transition: none; }
  .filters input[type="checkbox"]:checked::after { transform: rotate(-45deg) scale(1); }
  .fs-dots .fs-dot::before { transition: none; }
  /* 旅程的遠近層次不靠動畫，但確保任何情況下都讀得到 */
  .jny-band[data-far] { opacity: 1; }
}