/* ============================================================
 * 手機版殼層樣式（≤900px）— Claude Design「手機PWA版本UI改善」定案
 * 結構性隱藏一律鎖 html.m（mobile.js 啟動時才加，避免桌面縮視窗時破版）
 * ============================================================ */
@media (max-width: 900px) {
  :root { --mtab-h: 88px; --mtop-h: 62px; }

  /* ---------- 底部 Tab bar（4a） ---------- */
  #mtab {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    display: flex; padding: 10px 8px calc(22px + env(safe-area-inset-bottom, 0px));
    background: rgba(10, 12, 30, .82);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255, 255, 255, .1);
  }
  body.light #mtab { background: rgba(245, 244, 252, .88); border-top-color: rgba(20, 18, 40, .1); }
  #mtab button {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 6px 0 2px; background: none; border: none; color: var(--ink);
    opacity: .55; font-size: 10px; font-weight: 600; letter-spacing: .02em;
  }
  #mtab button svg { width: 20px; height: 20px; }
  #mtab button.active { opacity: 1; color: #9db4ff; font-weight: 700; }
  body.light #mtab button.active { color: #4a5fd6; }
  /* 歌曲頁不顯示 tab（4b：底部是 HUD 膠囊） */
  body.m-on-song #mtab { display: none; }
  html.m #home, html.m #help-view { padding-bottom: calc(var(--mtab-h) + 24px); }

  /* ---------- 頂欄（4a）：logo＋搜尋；主題/說明/語言切換收進「更多」（3a） ---------- */
  html.m #theme-btn, html.m #help-btn, html.m .lang-switch { display: none; }
  #m-search-btn svg { width: 16px; height: 16px; }
  body.m-on-song #m-search-btn { display: none; }
  /* 搜尋列預設收合，點放大鏡展開；數量字樣由 #m-filter 常駐顯示，這裡的藏掉免重複 */
  html.m #search-row { display: none; }
  html.m body.m-search-open #search-row { display: flex; }
  html.m #search-row #song-count { display: none; }

  /* ---------- 首頁篩選列（零橫捲）＝目前篩選＋「專輯 ▾」＋數量 ---------- */
  html.m #album-filter { display: none; }
  #m-filter { display: flex; align-items: center; gap: 8px; margin: 2px 0 10px; }
  #m-filter .mf-cur {
    border: none; border-radius: 999px; padding: 8px 16px; font-size: 12.5px; font-weight: 700;
    background: linear-gradient(90deg, #5b7cfa, #a45bfa); color: #fff;
  }
  #m-filter .mf-albums {
    display: inline-flex; align-items: center; gap: 5px;
    border: 1px solid var(--line-2); border-radius: 999px; padding: 8px 14px;
    font-size: 12.5px; background: none; color: var(--ink); opacity: .85;
  }
  #m-filter .mf-albums svg { width: 11px; height: 11px; }
  #m-filter .mf-count { margin-left: auto; font-size: 11.5px; opacity: .5; color: var(--ink); }
  /* 公告壓縮成單行卡（4a） */
  html.m #site-news p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.m #site-news p + p { display: none; }

  /* ---------- 歌曲頁（4b） ---------- */
  /* 頂欄變：‹＋歌名/專輯＋♥＋分享＋版本 ▾ */
  #m-songbar { display: none; min-width: 0; flex: 1; align-items: center; gap: 8px; }
  body.m-on-song #m-songbar { display: flex; }
  body.m-on-song #brand { display: none; }
  #m-songbar .msb-meta { min-width: 0; flex: 1; }
  #m-songbar .msb-title {
    font-size: 15px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  #m-songbar .msb-sub {
    font-size: 10.5px; opacity: .55; letter-spacing: .12em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  /* 頂欄鈕依 mockup：38px 圓、無框、半透明底 */
  body.m-on-song #back-btn, #m-songbar .icon-btn {
    width: 38px; height: 38px; flex: none; border: none; border-radius: 50%;
    background: rgba(255, 255, 255, .12);
  }
  body.light.m-on-song #back-btn, body.light #m-songbar .icon-btn { background: rgba(20, 18, 40, .08); }
  #m-songbar .icon-btn svg { width: 15px; height: 15px; }
  #m-songbar .msb-fav.on { color: #ff7ab8; }
  #m-songbar .msb-fav.on svg { fill: currentColor; }
  #m-songbar .msb-ver {
    display: inline-flex; align-items: center; gap: 5px; height: 38px; flex: none;
    border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; background: rgba(255, 255, 255, .06);
    color: var(--ink); padding: 0 11px; font-size: 12px; font-weight: 700; max-width: 96px;
  }
  body.light #m-songbar .msb-ver { border-color: rgba(20, 18, 40, .18); }
  #m-songbar .msb-ver span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #m-songbar .msb-ver svg { width: 11px; height: 11px; flex: none; }
  body.light #m-songbar .msb-ver { background: rgba(20, 18, 40, .05); }

  /* sticky 影片：捲動時固定在頂欄下 */
  body.m-on-song #song-hero {
    position: sticky; top: var(--mtop-h); z-index: 5;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .45);
  }
  /* 歌名/介紹/動作列都到頂欄了；版本膠囊改成下拉
     （#source-chips 要壓過 style.css 的雙 id 規則 #song-view #source-chips） */
  html.m body.m-on-song #hero-meta { display: none; }
  body.m-on-song #song-view #source-chips { display: none; }
  /* 4b 取捨：手機不做逐句愛心/分享 */
  html.m .line-social { display: none; }

  /* ---------- HUD 圓角面板兩列（4b mockup 定版）：
     把手（#m-hud-grip，mobile.js 注入）
     第一列 ‹ ▶ › 連播 隨機 ｜ 練唱 全螢幕（練唱/全螢幕藍描邊，與播放控制區別）
     第二列 顯示開關 dot-pill 等寬排滿
     下滑只收合第二列（#hud.m-mini），播放控制留著 ---------- */
  html.m #hud-toggle, html.m #volume-group, html.m #pip-btn, html.m .hud-label {
    display: none;
  }
  /* 舊收合狀態的保險：桌面收合過再切手機時，讓小圓鈕現身才點得回來 */
  html.m #hud.min #hud-toggle { display: grid; }
  html.m #hud {
    left: 12px; right: 12px; bottom: 24px; transform: none; width: auto; max-width: none;
    flex-wrap: wrap; justify-content: space-between; align-items: center;
    border-radius: 22px; padding: 5px 12px 10px; overflow-x: hidden;
  }
  html.m #hud.min { left: 14px; right: auto; border-radius: 999px; padding: 8px; }
  /* 拖曳把手：獨立一行置中 */
  #m-hud-grip { flex-basis: 100%; order: -1; height: 14px; display: grid; place-items: center; }
  #m-hud-grip::after {
    content: ''; width: 36px; height: 4px; border-radius: 999px;
    background: rgba(255, 255, 255, .3);
  }
  body.light #m-hud-grip::after { background: rgba(20, 18, 40, .25); }
  /* 第一列順序：‹ ▶ ›（order 沿用 style.css 的 2）→ 連播/隨機 → 分隔線 → 練唱 → 全螢幕 */
  html.m #autoplay-btn, html.m #shuffle-btn { display: grid; order: 3; }
  html.m #hud > .hud-sep { display: none; }
  html.m #hud > span.hud-sep:first-of-type {
    display: block; order: 4; width: 1px; height: 24px;
    background: rgba(255, 255, 255, .14); flex: none;
  }
  html.m body.light #hud > span.hud-sep:first-of-type { background: rgba(20, 18, 40, .14); }
  html.m #practice-btn { order: 5; }
  html.m #fs-btn { order: 6; }
  /* 鈕型（依 mockup）：38px 圓；播放鈕 46px 白底實心 */
  html.m #hud .hud-round { width: 38px; height: 38px; border-color: rgba(255, 255, 255, .2); }
  html.m body.light #hud .hud-round { border-color: rgba(20, 18, 40, .18); }
  html.m #play-btn { width: 46px; height: 46px; background: #fff; color: #0a0c1e; border: none; opacity: 1; }
  html.m body.light #play-btn { background: #1a1830; color: #fff; }
  html.m #autoplay-btn, html.m #shuffle-btn { opacity: .55; }
  html.m #autoplay-btn.active, html.m #shuffle-btn.active {
    opacity: 1; color: #9db4ff;
    border-color: rgba(157, 180, 255, .5); background: rgba(91, 124, 250, .18);
  }
  /* 練唱/全螢幕：icon-only 藍描邊圓鈕（span 文字由 style.css ≤1300 斷點隱藏） */
  html.m #practice-btn, html.m #fs-btn {
    width: 38px; height: 38px; border-radius: 50%; padding: 0; flex: none;
    border: 1px solid rgba(157, 180, 255, .5); background: none; color: #9db4ff;
    display: grid; place-items: center;
  }
  html.m #practice-btn.active { background: rgba(91, 124, 250, .3); }
  /* 第二列：顯示開關等寬排滿 */
  html.m #display-toggles {
    display: flex; width: 100%; order: 10; gap: 6px; margin-top: 9px;
  }
  html.m #display-toggles .dot-pill { flex: 1; justify-content: center; min-height: 32px; }
  /* 下滑收合：只藏第二列 */
  html.m #hud.m-mini #display-toggles { display: none; }

  /* ---------- 通用 bottom sheet ---------- */
  #msheet { position: fixed; inset: 0; z-index: 60; }
  #msheet .msheet-bg { position: absolute; inset: 0; background: rgba(0, 0, 0, .5); opacity: 0; transition: opacity .18s; }
  #msheet .msheet-panel {
    position: absolute; left: 0; right: 0; bottom: 0; max-height: 76vh; overflow-y: auto;
    background: rgba(18, 20, 42, .97); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    border-radius: 24px 24px 0 0; border-top: 1px solid rgba(255, 255, 255, .14);
    padding: 10px 20px calc(24px + env(safe-area-inset-bottom, 10px));
    transform: translateY(24px); opacity: 0; transition: transform .2s, opacity .2s;
    color: #fff;
  }
  body.light #msheet .msheet-panel { background: rgba(248, 247, 253, .97); color: #16142c; border-top-color: rgba(20, 18, 40, .12); }
  #msheet.open .msheet-bg { opacity: 1; }
  #msheet.open .msheet-panel { transform: none; opacity: 1; }
  .msheet-grip { width: 40px; height: 4px; border-radius: 999px; background: rgba(128, 128, 150, .45); margin: 4px auto 14px; }
  .msheet-title { font-size: 12px; letter-spacing: .22em; opacity: .5; font-weight: 700; margin-bottom: 10px; }
  .msheet-list { display: flex; flex-direction: column; }
  .msheet-item {
    text-align: left; background: none; border: none; color: inherit;
    font-size: 15px; font-weight: 600; padding: 14px 4px;
    border-bottom: 1px solid rgba(128, 128, 150, .15);
  }
  .msheet-item.on { color: #9db4ff; font-weight: 800; }
  body.light .msheet-item.on { color: #4a5fd6; }
  .msheet-item .msheet-note { margin-left: 8px; font-size: 11px; opacity: .45; font-weight: 500; }

  /* ---------- 「更多」半頁 sheet（3a） ---------- */
  #msheet .mm-body { padding: 2px 0 6px; }
  .mm-sec { font-size: 11px; letter-spacing: .18em; opacity: .5; font-weight: 700; margin: 18px 2px 8px; }
  .mm-sec:first-child { margin-top: 4px; }
  .mm-card { border: 1px solid var(--line-2); border-radius: 14px; overflow: hidden; }
  .mm-row {
    display: flex; align-items: center; gap: 12px; width: 100%; min-height: 54px; padding: 0 14px;
    background: none; border: none; color: inherit; font-size: 14.5px; font-weight: 600;
    text-decoration: none; text-align: left;
  }
  .mm-row + .mm-row { border-top: 1px solid var(--line-2); }
  .mm-row .mm-tail { margin-left: auto; font-size: 12px; opacity: .45; }
  .mm-seg {
    margin-left: auto; display: flex; border: 1px solid var(--line-2); border-radius: 999px;
    overflow: hidden; font-size: 12px; font-weight: 700;
  }
  .mm-seg button { border: none; background: none; color: inherit; padding: 7px 13px; opacity: .6; font-weight: 700; }
  .mm-seg button.on { background: linear-gradient(90deg, #5b7cfa, #a45bfa); color: #fff; opacity: 1; }
  .mm-note { margin-top: 16px; font-size: 11px; opacity: .45; line-height: 1.7; }
}