/* =====================================================================
 * lineage-next — mobile.css(手機直向 360~430px 優先,並含橫向 landscape)
 * 只在 @media(max-width:932px) 內生效;真桌機(≥933px)零影響。
 * 註:breakpoint 由 820→932,是為了涵蓋橫向手機(CSS 寬 844~932,如 iPhone landscape),
 *     否則橫向時會落回桌機版,頁首鈕擠成直排、標題斷行(實測 830px 破版)。
 * 注意:本檔在 index.html 內嵌 <style> 與各 JS 注入 <style> 之前載入,
 *       覆蓋既有屬性一律加 !important(後載者同權重會贏,靠 !important 反制)。
 * ===================================================================== */
@media (max-width: 932px) {

  /* ---------- 0. 通用:防水平捲軸 / 點擊區 / 防 iOS 聚焦放大 ---------- */
  body { overflow-x: hidden; }                    /* 只鎖 body 層;fixed 全螢幕場景(#hub/#rt/#cs-mask)不受影響 */
  #wrap { padding: 8px !important; }

  /* 所有可打字控件 font-size ≥16px:iOS Safari 聚焦 <16px 會整頁放大(本專案前科,務必保留) */
  input:not([type=checkbox]):not([type=radio]),
  select, textarea { font-size: 16px !important; }

  /* 最小點擊高度 40px(勾選框除外,否則 15px 的 checkbox 會被撐爆) */
  button,
  select,
  input:not([type=checkbox]):not([type=radio]) { min-height: 40px; }
  /* 例外:面板內的小型內嵌鈕,40px 會撐壞行高的地方縮回 32px(仍達可點下限) */
  .sub .quick button, .pd-back, .nx-ig-menu button, .wh-btn, .wh-gin, .wh-gout { min-height: 32px; }

  /* ---------- 1. 頁首 header:緊湊化、可換行 ---------- */
  header { flex-wrap: wrap !important; gap: 5px 6px !important; margin-bottom: 6px !important; }
  header h1 { font-size: 16px !important; }
  header .tag { display: none !important; }       /* 「重構原型 · Phase 0」小標手機不顯示 */
  header button { padding: 6px 9px !important; font-size: 12px !important; min-height: 36px; }
  #srv-save-hint { font-size: 12px !important; }
  /* hub.js 動態塞進 header 的「🏰 回主城」鈕 + charselect 的「角色/登出」鈕:手機壓緊,別讓「登出」被擠到多佔一整排 */
  .hub-open, .cs-hdrbtn { margin-left: 0 !important; padding: 5px 8px !important; font-size: 12px !important; min-height: 34px !important; }
  .cs-hdrbtn img, .hub-open img { height: 16px !important; width: 16px !important; }
  /* audio.js 注入的音效控制盒(🎵/🔊+兩支滑桿):手機收窄,少佔寬度→帳號鈕塞得進同一排 */
  #nx-audio-ctl { margin-left: 0 !important; padding: 2px 6px !important; gap: 4px !important; }
  #nx-audio-ctl input[type=range] { width: 38px !important; }

  /* ---------- 2. 頂部狀態列 .topbar:單欄堆疊 ---------- */
  .topbar { grid-template-columns: 1fr !important; padding: 8px 10px !important; gap: 5px !important; margin-bottom: 8px !important; }
  .topbar .hero { font-size: 14px !important; }
  .topbar .res { grid-column: 1 !important; gap: 4px 10px !important; font-size: 12px !important; }

  /* 頂部 header 手機減負:藏開發標籤 + 跟「更多」抽屜重複的功能鈕(卡丁車/排行/競技場/隊伍/跳跳皆已在更多) */
  header .tag { display: none !important; }
  header #kart-enter, header #lb-enter, header #ar-enter, header #pt-enter, header #mo-enter, header #st-enter { display: none !important; }
  header h1 { font-size: 16px !important; }
  /* 角色列(手機)只留 金幣/鑽石(靈魂)/本服倍率;拿掉攻擊/防禦/爆率/傷害倍率 */
  .topbar .res span[title="攻擊"],
  .topbar .res span[title="防禦"],
  .topbar .res span[title="爆擊率"],
  .topbar .res span.mult { display: none !important; }
  /* (A) 角色列 + 冒險地區:手機改「上下堆疊」(角色卡整寬在上、地區下拉整寬在下)——並排會把角色卡擠成一行一個字 */
  .headrow { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 8px !important; }
  .headrow .topbar { flex: none !important; width: 100% !important; min-width: 0 !important; margin-bottom: 0 !important; }
  .headrow .zonebar { flex: none !important; width: 100% !important; margin-bottom: 8px !important; padding: 6px 8px !important; }
  .headrow .zonebar .lbl { display: none !important; }

  /* ---------- 3. 主畫面 .main:單欄(戰鬥上、面板下,DOM 順序天然正確) ---------- */
  /* ⚠️ 關鍵:用 minmax(0,1fr) 而非裸 1fr。裸 1fr 的最小值=內容 min-content,面板內有寬元件(紙娃娃/背包格)時,
     整條軌道會被撐到 ~650px 超出手機 500px 視窗 → 面板/戰鬥畫面/聊天全部溢出被裁切。minmax(0,1fr)+min-width:0 讓軌道回到視窗寬。 */
  .main { grid-template-columns: minmax(0, 1fr) !important; gap: 8px !important; }
  .main > .stage, .main > .panel { min-width: 0 !important; }
  .stage { min-height: 42vh !important; max-height: 46vh !important; }   /* 固定高度戰鬥畫面:夠玩又不會把下方分頁推出畫面外 */
  .stage .herohp { width: 96px !important; bottom: 128px !important; }
  .hero-sprite .hero-img { height: 112px !important; }
  .mobslot .mobsprite { height: 88px !important; }
  .mobslot.boss .mobsprite { height: 118px !important; }
  .mobcard .bar.mob { width: 120px !important; }
  .zonebar { padding: 6px 8px !important; }
  .zonesel { padding: 8px 10px !important; }      /* font-size 已由通用 16px 規則接手 */
  /* 任務列壓成一排:不換行、獎勵不再各自佔整行、藏掉「(擊殺達標…)」子字(有 inline style 可辨識) */
  .questbar { font-size: 12px !important; flex-wrap: nowrap !important; white-space: nowrap; overflow: hidden; align-items: center; padding: 6px 10px !important; gap: 4px 8px !important; }
  .questbar .qr { width: auto !important; }
  .questbar .qr[style] { display: none !important; }

  /* 主城工具列(手機):下移到 top:96px,別擋住頂部的傳送下拉(.hub-maps 在 top:12px);桌機維持原位 */
  #hub .hub-tools { top: 96px !important; max-width: 96vw !important; }
  .progress { padding: 6px 10px !important; }

  /* 戰鬥底部常駐聊天:視窗縮小、輸入不被鍵盤擋(在文流內,聚焦時瀏覽器會自動捲入視野) */
  .battlebottom { margin-top: 6px !important; }
  .chatlog { height: 78px !important; margin-bottom: 6px !important; font-size: 12px !important; }
  .chatin { padding: 9px 10px !important; }       /* 16px 由通用規則保證 */
  .chatsend { padding: 0 14px !important; }
  #loot-toasts { bottom: 130px !important; }      /* 掉寶浮訊避開聊天輸入列 */

  /* ---------- 4. 分頁列 .tabs:橫向滑動、不換行、大點擊區、置頂常駐 ---------- */
  /* sticky top:0 → 捲動時分頁列黏在畫面頂端,隨時可切分頁,下方面板在其下捲動 */
  .tabs { position: sticky !important; top: 0; z-index: 30;
          overflow-x: auto; flex-wrap: nowrap !important; -webkit-overflow-scrolling: touch; scrollbar-width: none;
          box-shadow: 0 3px 8px rgba(0,0,0,.5); }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs .tab { flex: 0 0 auto !important; min-height: 40px; padding: 9px 13px !important; white-space: nowrap; font-size: 13px !important; }

  /* 右側面板:手機在下方,別再撐 340px 最小高;明確可垂直捲動、內容不被 clip */
  .panel { min-height: 0 !important; max-height: 62vh !important; padding: 10px !important;
           overflow-y: auto !important; overflow-x: hidden !important;
           -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
  .panel > .sub:first-child { margin-top: 0 !important; }   /* 首個標題(如「裝備 · 紙娃娃」)別被上緣吃掉 */

  /* ---------- 5. 面板內容模組微調 ---------- */
  /* 收藏(collection-ui):格子改 1/3 寬、字級升到 12px */
  .nxc-cell { width: calc(33.33% - 4px) !important; }
  .nxc-cell.card { width: calc(50% - 3px) !important; }
  .nxc-nm, .nxc-lv, .nxc-meta { font-size: 12px !important; }
  .nxc-book { min-height: 40px; }
  /* 倉庫(hub.js shop-mask 內):左右兩欄改上下堆疊 */
  .wh-cols { flex-direction: column !important; }
  /* 紙娃娃(手機):比照桌機「圖示紙娃娃」排版,只把格子/立繪縮小以塞進手機寬度。
     角色立繪居中、左右各一排裝備格、下方飾品 5 欄格;點任一格 → 屬性小卡(卸下/更換/賣出)。 */
  .paperdoll { flex-direction: row !important; align-items: center !important; justify-content: center !important; gap: 6px !important; margin: 4px 0 8px !important; }
  .pd-hero { flex: 1 !important; min-height: 118px !important; }
  .pd-fig { height: 118px !important; }
  .pd-fig.emoji { font-size: 62px !important; }
  .pd-col { display: flex !important; flex-direction: column !important; width: auto !important; gap: 6px !important; }
  .pd-acc { display: grid !important; grid-template-columns: repeat(5, 1fr) !important; gap: 6px !important; width: 100% !important; margin-top: 2px; justify-items: center; }
  .pd-slot { width: 48px !important; height: 48px !important; min-width: 0; min-height: 0 !important; flex-direction: column !important; justify-content: center !important; gap: 0 !important; padding: 0 !important; box-sizing: border-box; }
  .pd-slot .iico { width: 36px !important; height: 36px !important; flex: none; }
  .pd-slot .pd-lbl { display: block !important; }   /* 空格顯示部位名(比照桌機) */
  .pd-slot .pd-en { display: block !important; }    /* 強化角標 */
  .pd-info { display: none !important; }            /* 手機不再用文字清單 */
  .eqhint { margin-top: 6px !important; }
  /* 屬性小卡 / 道具點擊選單:字級與動作鈕手機加大(≥12px 文字、≥40px 鈕) */
  .eqd-btns button { min-height: 44px !important; font-size: 13px !important; }
  .nx-ig-menu { min-width: 150px !important; }
  .nx-ig-menu button { min-height: 40px !important; font-size: 13px !important; }
  .nx-ig-attrs .row { font-size: 12.5px !important; }
  /* 統計/能力表:字級保底 + 一致行高 + 過長數值換行不撐破(防面板內橫向溢出) */
  .strow { font-size: 12.5px !important; min-height: 34px; gap: 6px; }
  .strow span { flex: none; }
  .strow b { min-width: 0; text-align: right; overflow-wrap: anywhere; }
  .stgrid { gap: 6px 8px !important; }

  /* ---------- 6. 主城 hub:頂列重新分兩排,互不重疊 ---------- */
  /* 第一排:在線數(左)+ 換角/登出(右) */
  .hub-count { top: 10px !important; left: 10px !important; font-size: 12px !important; padding: 8px 10px !important; }
  .hub-acct { top: 10px !important; right: 10px !important; gap: 6px !important; }
  .hub-acct button { padding: 8px 10px !important; font-size: 12px !important; }
  /* 第二排:地圖傳送下拉置中縮窄(z-index 拉高、放最上面,別被工具列蓋住);商店鈕靠右 */
  .hub-maps { top: 52px !important; max-width: 58vw; padding: 8px 10px !important; z-index: 9 !important; }
  .hub-shop { top: 52px !important; right: 10px !important; padding: 8px 10px !important; font-size: 13px !important; z-index: 9 !important; }
  .hub-exit { top: 52px !important; right: 10px !important; padding: 8px 12px !important; z-index: 9 !important; }
  /* 聊天:視窗縮小、輸入列貼底 + 瀏海機安全區 */
  .hub-chat { padding: 8px 8px calc(8px + env(safe-area-inset-bottom)) !important; }
  .hub-log { max-height: 18vh !important; max-width: none !important; font-size: 12px !important; }
  .hub-inbar { max-width: none !important; }
  .hub-inbar input { padding: 9px 10px !important; }   /* 16px 由通用規則保證 */
  .hub-inbar button { padding: 0 14px !important; }
  /* NPC 名牌 / 玩家名牌字級縮小 */
  .hub-npc .npc-plate b { font-size: 12px !important; }
  .hub-npc .npc-plate i { font-size: 12px !important; }
  .hub-npc .npc-fig { height: 96px !important; }
  .hub-p .nm { font-size: 12px !important; }
  /* 主城路人/玩家立繪:手機縮小(桌機 idle 150px / 走路 181px 在手機太大→佔半螢幕、互相重疊) */
  .hub-p img, .hub-p .emoji { height: 66px !important; }
  .hub-p img.wf { height: 80px !important; }
  .hub-p .emoji { font-size: 36px !important; }
  .hub-p .bubble { max-width: 56vw !important; white-space: normal !important; font-size: 12.5px !important; padding: 5px 10px !important; margin-bottom: 12px !important; }
  /* 主城工具列:手機大幅壓縮(按鈕/圖示/滑桿都縮小),少佔上半畫面、讓城市與角色看得到 */
  /* 工具列:移到地圖傳送下拉「下方」+ 改成「單行橫排、可左右滑」(不再 3×3 方塊佔掉半個畫面) */
  #hub .hub-tools { top: 104px !important; left: 50% !important; transform: translateX(-50%) !important; gap: 3px !important; padding: 2px 6px !important; flex-wrap: nowrap !important; overflow-x: auto !important; overflow-y: hidden !important; justify-content: flex-start !important; align-items: center !important; max-width: 94vw !important; -webkit-overflow-scrolling: touch; }
  #hub .hub-tools::-webkit-scrollbar { display: none; }
  #hub .hub-tools > * { flex: 0 0 auto !important; }
  #hub .hub-tools button { white-space: nowrap !important; }
  #hub .hub-tools .hub-vol input[type=range] { width: 46px !important; }
  #hub .hub-tools button { padding: 2px 8px !important; font-size: 11px !important; line-height: 1.15 !important; min-height: 30px !important; }   /* 覆蓋通用 button min-height:40px → 免得橫排上下留一堆空白 */
  #hub .hub-tools .hub-ico { height: 14px !important; width: 14px !important; margin-right: 2px !important; }
  #hub .hub-tools .hub-vol { min-height: 0 !important; height: 30px !important; align-items: center !important; flex-wrap: nowrap !important; }   /* 音量區原本 62px 撐高整條 → 壓到 30px */
  #hub .hub-tools .hv-mute { min-height: 30px !important; padding: 3px 6px !important; }
  #hub .hub-tools .hub-vol img { height: 18px !important; width: auto !important; }
  #hub .hub-tools .hub-vol input[type=range] { width: 54px !important; }

  /* ---------- 7. 即時獵場 #rt:HUD 縮小靠左上、離開鈕加大、提示縮短 ---------- */
  .rt-hud { top: 8px !important; left: 8px !important; min-width: 0 !important; max-width: 46vw; padding: 6px 10px !important; font-size: 12px !important; }
  .rt-hud .hpt, .rt-hud .mpt { font-size: 12px !important; }
  .rt-exit { top: 8px !important; right: 8px !important; padding: 12px 16px !important; font-size: 15px !important; min-height: 44px; }
  .rt-tip { bottom: calc(8px + env(safe-area-inset-bottom)) !important; font-size: 12px !important; max-width: 92vw; white-space: normal; text-align: center; padding: 5px 10px !important; }
  .rt-dmg.miss, .rt-dmg.exp { font-size: 13px !important; }

  /* ---------- 8. 選角 / 創角:2 欄補齊 + 取名輸入 16px 防放大 ---------- */
  #cs-mask { padding: 16px 10px !important; }
  #cs-mask h2 { font-size: 18px !important; margin: 4px 0 12px !important; }
  .cs-grid { grid-template-columns: repeat(2, minmax(140px, 1fr)) !important; width: 100%; max-width: 400px; gap: 10px !important; }
  .cs-cls { grid-template-columns: repeat(2, minmax(140px, 1fr)) !important; width: 100%; max-width: 400px; gap: 10px !important; }
  .cs-gender button { padding: 9px 20px !important; min-height: 42px; }
  .cs-namebar { flex-wrap: wrap; justify-content: center; }
  .cs-namebar input { width: min(220px, 70vw) !important; min-height: 44px; }   /* 16px 由通用規則保證 */
  .cs-namebar button { min-height: 44px; padding: 10px 22px !important; }
  .cs-back { min-height: 40px; }

  /* ---------- 9. 登入 / 離線收益彈窗:窄幅收斂 ---------- */
  .login-box { width: min(320px, 92vw) !important; padding: 24px 20px !important; }
  .ofl-box { min-width: min(260px, 88vw) !important; padding: 18px 20px !important; }

  /* ---------- 10. 「更多」抽屜:攤平成單一 5 欄格 → 每排 5 張橫式卡,共 10 項剛好 2 排 ---------- */
  /* 把 4 個分類(功能/組隊/娛樂/帳號)攤平:.mgrid 用 display:contents 讓按鈕直接進 .sheet 這個 5 欄格;隱藏分類標題 */
  #nx-msheet .sheet { display: grid !important; grid-template-columns: repeat(5, 1fr) !important; gap: 7px !important; align-content: start !important; padding: 8px 12px calc(14px + env(safe-area-inset-bottom)) !important; }
  #nx-msheet .grip { grid-column: 1 / -1 !important; }
  #nx-msheet .msec { display: none !important; }
  #nx-msheet .mgrid { display: contents !important; }
  #nx-msheet .mgrid button { flex-direction: row !important; justify-content: center !important; align-items: center !important; gap: 5px !important; padding: 9px 4px !important; border-radius: 9px !important; min-height: 0 !important; font-size: 12px !important; }
  #nx-msheet .mgrid button .mi { font-size: 18px !important; }
  #nx-msheet .mgrid button.logout { grid-column: auto !important; }   /* 登出當一般橫式卡,不再整排 */
}