/* =====================================================================
 * lineage-next — mobile.css(手機直向 360~430px 優先)
 * 只在 @media(max-width:820px) 內生效;桌機零影響。
 * 注意:本檔在 index.html 內嵌 <style> 與各 JS 注入 <style> 之前載入,
 *       覆蓋既有屬性一律加 !important(後載者同權重會贏,靠 !important 反制)。
 * ===================================================================== */
@media (max-width: 820px) {

  /* ---------- 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: 6px 8px !important; margin-bottom: 8px !important; }
  header h1 { font-size: 16px !important; }
  header .tag { display: none !important; }       /* 「重構原型 · Phase 0」小標手機不顯示 */
  header button { padding: 8px 10px !important; font-size: 12px !important; }
  #srv-save-hint { font-size: 12px !important; }
  /* hub.js 動態塞進 header 的「🏰 回主城 / ⚡ 即時試煉場」鈕 */
  .hub-open { margin-left: 0 !important; padding: 8px 10px !important; font-size: 13px !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; }

  /* ---------- 3. 主畫面 .main:單欄(戰鬥上、面板下,DOM 順序天然正確) ---------- */
  .main { grid-template-columns: 1fr !important; gap: 8px !important; }
  .stage { min-height: 45vh !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 規則接手 */
  .questbar { font-size: 12px !important; flex-wrap: wrap !important; padding: 6px 10px !important; gap: 4px 8px !important; }
  .questbar .qr { width: 100%; }
  .progress { padding: 6px 10px !important; }

  /* 戰鬥底部常駐聊天:視窗縮小、輸入不被鍵盤擋(在文流內,聚焦時瀏覽器會自動捲入視野) */
  .battlebottom { margin-top: 6px !important; }
  .chatlog { height: 88px !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:橫向滑動、不換行、大點擊區 ---------- */
  .tabs { overflow-x: auto; flex-wrap: nowrap !important; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .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; }
  /* 紙娃娃:桌機「左直排|立繪|右直排」太高 → 手機改直向緊湊
     上排橫列槽位(頭盔/項鍊/盔甲/T恤/斗篷)→ 立繪 → 下排橫列(武器/盾/手套/腰帶/長靴)→ 飾品格 */
  .paperdoll { flex-direction: column !important; gap: 8px !important; margin: 2px 0 6px !important; }
  .pd-col { flex-direction: row !important; flex-wrap: wrap; justify-content: center; gap: 6px !important; }
  .pd-hero { flex: none !important; min-height: 0 !important; }
  .pd-fig { height: 104px !important; }
  .pd-fig.emoji { font-size: 56px !important; }
  .pd-slot { width: 46px !important; height: 46px !important; }
  .pd-slot .iico { width: 38px !important; height: 38px !important; }
  .pd-lbl { font-size: 12px !important; }
  .pd-acc { grid-template-columns: repeat(5, 46px) !important; justify-content: center !important; gap: 6px !important; }
  .eqhint { margin-top: 6px !important; }
  /* 統計/能力表字級保底 */
  .strow { font-size: 12.5px !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; }
  /* 第二排:地圖下拉置中縮窄;商店鈕靠右 */
  .hub-maps { top: 58px !important; max-width: 58vw; padding: 8px 10px !important; }
  .hub-shop { top: 58px !important; right: 10px !important; padding: 8px 10px !important; font-size: 13px !important; }
  .hub-exit { top: 58px !important; right: 10px !important; padding: 8px 12px !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; }
  .hub-p .bubble { max-width: 62vw !important; white-space: normal !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; }
}