/* ============================================================
   星海音乐 Web · adaptive.css（v6.21 · 从 style.css 结构化拆分）
   内容：v6.16-6.17 布局自适应：触屏电脑 / 横屏电脑 / 矮屏 / 窄横屏
   ⚠ 级联顺序即加载顺序（app.html 按本文件在链中的位置引入），
     调整 @media / 覆盖关系时请保持文件间相对顺序不变。
   ============================================================ */

/* ============================================================
   【v6.16】触屏电脑模式（横屏平板 / 横屏手机展开 / 触屏笔记本进入 ≥921px 档）
   用户会横屏下来进入电脑模式当平板用：侧栏适度收窄让出主区宽度，
   交互目标全部加大到拇指友好的 44px+ 级；纯鼠标桌面完全不受影响
   【v6.17】逗号扩展：宽 640–920 的横屏矮屏手机（新电脑布局块）同样享受 */
@media (hover: none) and (pointer: coarse) and (min-width: 921px),
       (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-height: 500px) and (min-width: 640px) {
  #app { grid-template-columns: 212px minmax(0, 1fr); }
  .sidebar { padding: 16px 12px 12px; }
  .logo { font-size: 18px; padding: 2px 8px 14px; }
  .nav { gap: 4px; }
  .nav-item { padding: 11px 12px; font-size: 14px; min-height: 46px; }
  .nav-item .icon { width: 20px; height: 20px; }
  .sidebar-foot { padding: 10px 8px 2px; }
  .main { padding: 0 18px 24px; }
  .btn-primary { height: 40px; }
  .icon-btn { width: 42px; height: 42px; }
  .song-row { padding: 11px 12px; }
  .settings-row { padding: 17px 18px; }
  .settings-select { padding: 12px 32px 12px 14px; min-height: 46px; }
  .seg-btn { padding: 11px 16px; font-size: 14px; }
  .selectors select { min-height: 44px; }
  /* 【v6.29.4】自绘下拉同款触屏加大（顶栏档 / 设置页档 + 选项热区） */
  .selectors .xsel-btn { min-height: 44px; }
  .settings-row .xsel-btn { min-height: 46px; padding-top: 12px; padding-bottom: 12px; font-size: 14px; }
  .xsel-opt { padding: 12px 12px; font-size: 14px; }
}

/* 【v6.16】横屏矮屏（高度 ≤640px 的电脑模式，如横屏手机/小平板）：
   侧栏纵向空间紧张 —— 收紧行距并允许滚动，防止 logo+导航+底部说明
   溢出被截断；正在播放封面随视口高度收缩防挤压
   【v6.17】逗号扩展：宽 640–920 的横屏手机（新电脑布局块）同样生效 */
@media (max-height: 640px) and (min-width: 921px),
       (orientation: landscape) and (max-height: 500px) and (min-width: 640px) {
  .sidebar { overflow-y: auto; }
  .logo { padding-bottom: 8px; }
  .nav-item { min-height: 38px; padding: 8px 12px; }
  .foot-text { display: none; }
  .welcome { margin-top: 4vh; padding: 22px 16px; }
  .np-cover-wrap, .np-cover-ring { width: min(34vh, 180px); height: min(34vh, 180px); }
  .np-cover, .np-cover-fallback { width: 58%; height: 58%; }
  .np-lyric { height: min(34vh, 190px); }
  .np-stage { gap: 14px; }
}

/* ============================================================
   【v6.17】横屏手机 → 电脑端布局（宽 640–920 × 高 ≤500 的横向屏幕）
   旧版这类屏落在 ≤920 平板档：顶部横排导航条 + 顶栏 + 高播放条层层吃高，
   375px 高的横屏手机实际内容区只剩 ~170px。现在直接切到跟电脑端一样的
   结构：左侧竖排侧栏（212px）+ 常驻顶栏 + 底部单行播放条，纵向滑页。
   ≥921px 的横屏手机（浏览器"电脑模式"）本就是桌面布局，无需处理。
   ============================================================ */
@media (orientation: landscape) and (max-height: 500px) and (min-width: 640px) {
  #app { grid-template-columns: 212px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .sidebar {
    grid-row: 1 / 3;
    flex-direction: column;
    align-items: stretch;
    padding: 14px 12px 10px;
    border-right: 1px solid var(--border);
    border-bottom: none;
    overflow-y: auto;
  }
  .logo { padding: 2px 8px 10px; font-size: 17px; }
  .nav { flex-direction: column; gap: 3px; touch-action: none; }
  .nav-item { padding: 9px 12px; font-size: 14px; min-height: 44px; }
  .nav-item .icon { width: 20px; height: 20px; }
  .sidebar-foot { display: none; }
  /* 手机端 chrome（底部导航/迷你条/全屏播放器）全部让位 —— 桌面行为 */
  .mini-bar, .bottom-nav, .fs-player { display: none !important; }
  /* 顶栏常驻（桌面行为；≤920 块"非发现页隐藏顶栏"是竖屏手机逻辑） */
  body[data-view]:not([data-view="discover"]) .topbar { display: flex; }
  body[data-view]:not([data-view="discover"]) .view { padding-top: 0; }
  /* 播放条：左信息窄列 + 中控单行（右音量列让位给宽度） */
  .player-bar {
    grid-column: 2;
    grid-template-columns: minmax(150px, 26%) minmax(0, 1fr);
    gap: 14px;
    padding: 0 14px;
  }
  .pb-left { display: flex; }
  .pb-right { display: none; }
  /* 列表行恢复桌面六列（≤920 块的紧凑四列是顶部横排导航时代的产物） */
  .song-row { grid-template-columns: 48px 34px minmax(0, 1fr) 84px 64px 118px; }
  .col-src { display: block; }
  .welcome { margin-top: 3vh; padding: 14px 16px; }
}

/* ============================================================
   【v6.17】矮屏紧凑（高 ≤520 的电脑布局：横屏手机 / 电脑模式手机 / 矮桌面窗）
   —— "播放界面上下窄显示不全"的整套适配：顶栏压扁、正在播放双列收紧、
   播放条压缩高度，整页内容一屏内完整可见（配合同块 .np 双列规则） */
@media (max-height: 520px) and (min-width: 640px) {
  :root { --pb-h: 58px; }
  .topbar { padding-top: 8px; padding-bottom: 8px; }
  .search-box input { height: 36px; }
  .btn-primary { height: 30px; }
  .selectors select { height: 36px; min-height: 36px; }
  .selectors .xsel-btn { height: 36px; min-height: 36px; }
  .np-stage { grid-template-columns: minmax(140px, 30vh) minmax(0, 1fr); gap: 12px; padding: 6px 4px 8px; }
  .np-left { position: static; gap: 10px; }
  .np-cover-wrap, .np-cover-ring { width: min(32vh, 180px); height: min(32vh, 180px); }
  .np-cover, .np-cover-fallback { width: 58%; height: 58%; }
  .np-name { font-size: 17px; }
  .np-singer { font-size: 12px; }
  .np-info { gap: 4px; }
  .np-lyric { height: min(22vh, 96px); }
  .np-right { gap: 8px; }
  .np-buttons { gap: 8px; }
  .np-buttons .icon-btn.big { width: 36px; height: 36px; }
  .np-buttons .play-btn { width: 44px; height: 44px; }
  .np-actions { gap: 10px; }
  .np-actions .icon-btn.big { width: 36px; height: 36px; }
  .np-actions .play-btn { width: 44px; height: 44px; }
  .btn-download { height: 34px; padding: 0 14px; }
  .np-empty { margin-top: 4vh; }
  .np-empty-icon { width: 64px; height: 64px; }
  .player-bar { padding: 0 12px; }
  .pb-cover-box { width: 40px; height: 40px; }
  .pb-name { font-size: 12.5px; }
  .pb-singer { font-size: 10.5px; margin-top: 2px; }
  .pb-center { gap: 4px; }
  .pb-buttons { gap: 8px; }
  .pb-buttons .icon-btn { width: 32px; height: 32px; }
  .pb-buttons .icon-btn .icon { width: 17px; height: 17px; }
  .pb-buttons .icon-btn.big { width: 36px; height: 36px; }
  .pb-buttons .play-btn { width: 38px; height: 38px; }
  .pb-buttons .play-btn .icon { width: 17px; height: 17px; }
  .pb-progress { gap: 8px; }
}

/* ============================================================
   【v6.17】窄横屏手机（宽 <640，仍为手机布局）：全屏播放器改横向双栏
   竖版布局在 320–430px 高度下封面+信息+进度+按钮纵向堆叠必然溢出裁切；
   横向后：左封面 + 右信息/歌词预览/进度/控制，一屏完整 */
@media (orientation: landscape) and (max-height: 480px) and (max-width: 639px) {
  .fs-body {
    display: grid;
    grid-template-columns: min(42vh, 200px) minmax(0, 1fr);
    grid-template-rows: auto auto auto auto minmax(0, 1fr) auto auto;
    column-gap: 22px;
    align-items: center;
    align-content: center;
    padding: 4px 24px calc(10px + env(safe-area-inset-bottom, 0px));
    gap: 0;
  }
  .fs-cover-wrap { grid-area: 1 / 1 / 8 / 2; width: min(42vh, 200px); margin-top: 0; }
  .fs-info { grid-area: 1 / 2; justify-self: start; }
  .fs-name { grid-area: 2 / 2; text-align: left; font-size: 18px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 1; }
  .fs-singer { grid-area: 3 / 2; justify-self: start; max-width: 70%; }
  .fs-now-line { grid-area: 4 / 2; justify-self: start; align-items: flex-start; margin-top: 2px; }
  .fs-lyric { grid-area: 5 / 2; min-height: 0; }
  .fs-progress { grid-area: 6 / 2; }
  .fs-buttons { grid-area: 7 / 2; justify-content: flex-start; gap: 18px; }
  /* 歌词模式：恢复纵向铺满（大歌词独占全屏，横向双栏无意义） */
  .fs-player.lm .fs-body { display: flex; flex-direction: column; align-items: center; gap: 12px; }
}