/* =========================================================================
   bgm.css · 背景音乐（🧀 公共 UI，芝士黄）
   🎵（页头 / 封面右上角）→ 展开面板（可见的 YouTube 播放器）→ 收起成 200×200 小窗继续播放 → ✕ 停止
   面板和小窗：手机在底部导航上方，电脑在右下角；地图页的小窗放到地图区域右上角
   ========================================================================= */

.bgm {
  --bgm-bottom: calc(var(--nav-h) + var(--safe-bottom) + 12px);
  --bgm-right: max(12px, env(safe-area-inset-right));
}
.bgm[data-view="cover"] { --bgm-bottom: calc(var(--safe-bottom) + 16px); }

/* ---- 🎵 入口：页头 ⚙ 左边；封面在语言切换旁边 ---- */
.bgm__launcher { position: relative; cursor: pointer; }
.bgm__launcher--header { font-size: 20px; }
.bgm__launcher--cover {
  display: grid; place-items: center; flex: none;
  width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--cheese-border); border-radius: 50%;
  background: var(--cheese-main); color: var(--cheese-text);
  box-shadow: var(--shadow-1);
}
.bgm__note { font-size: 20px; line-height: 1; transition: transform .2s; }
/* 播放中：按钮下沿三根小音柱轻轻跳动 */
.bgm__eq { position: absolute; left: 50%; bottom: 5px; display: none; gap: 2px; align-items: flex-end; height: 7px; transform: translateX(-50%); }
.bgm__eq i { width: 3px; height: 100%; border-radius: 2px; background: var(--cheese-text); animation: bgm-eq 0.9s ease-in-out infinite alternate; }
.bgm__eq i:nth-child(2) { animation-delay: -.3s; }
.bgm__eq i:nth-child(3) { animation-delay: -.6s; }
.bgm__launcher.is-playing .bgm__eq { display: flex; }
.bgm__launcher.is-playing .bgm__note { transform: translateY(-3px); }
@keyframes bgm-eq { from { transform: scaleY(.3); } to { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .bgm__eq i { animation: none; transform: scaleY(.7); } }
.app-header__end { gap: 4px; }
.cover__lang { display: flex; align-items: center; gap: 8px; }
/* 手机封面：给右上角的 🎵 和语言切换留出一行，不压在卡片的纸胶带上 */
@media (max-width: 1023px) { .cover { padding-top: 84px; } }

/* ---- 展开面板 ---- */
.bgm__window {
  position: fixed; z-index: 1200; left: 8px; right: 8px; bottom: var(--bgm-bottom);
  display: grid; gap: 8px;
  padding: 8px 10px 10px;
  border: 1px solid var(--cheese-border); border-radius: 18px;
  background: var(--bg-card); color: var(--text-main);
  box-shadow: var(--shadow-2);
}
.bgm__window[hidden] { display: none; }
.bgm__bar { display: flex; align-items: center; gap: 4px; min-width: 0; }
.bgm__title { flex: 1; min-width: 0; overflow: hidden; color: var(--cheese-text); font-size: 14px; white-space: nowrap; text-overflow: ellipsis; }
.bgm__artist { color: var(--text-sub); font-weight: 400; }
.bgm__icon-btn {
  flex: none; display: grid; place-items: center;
  width: 36px; height: 36px; padding: 0;
  border: 0; border-radius: 50%;
  background: transparent; color: var(--cheese-text);
  font-size: 16px; cursor: pointer;
}
.bgm__icon-btn:hover { background: var(--cheese-bg); }
/* 播放器：16:9，且可视高度不小于 200px（YouTube 最小尺寸要求） */
.bgm__frame {
  width: 100%; aspect-ratio: 16 / 9; min-height: 200px;
  overflow: hidden; border-radius: 10px;
  background: #1E1B18;
}
.bgm__frame > iframe, .bgm__screen { display: block; width: 100%; height: 100%; border: 0; }
/* 平台切换：YouTube | 网易云音乐 */
.bgm__switch {
  display: flex; gap: 2px; padding: 3px;
  border: 1px solid var(--cheese-border); border-radius: var(--radius-pill);
  background: var(--cheese-bg);
}
.bgm__switch-btn {
  flex: 1; min-height: 32px; padding: 0 10px;
  border: 0; border-radius: var(--radius-pill);
  background: transparent; color: var(--cheese-text);
  font-size: 13px; font-weight: 700; cursor: pointer;
}
.bgm__switch-btn[aria-pressed="true"] { background: var(--cheese-main); cursor: default; }
/* 网易云外链播放器：官方固定 330×86 的播放条，不需要 16:9 大窗 */
.bgm[data-provider="netease"] .bgm__frame {
  aspect-ratio: auto; min-height: 0; height: 86px;
  max-width: 330px; margin: 0 auto;
  background: transparent; border-radius: 6px;
}
.bgm__netease { display: block; width: 330px; max-width: 100%; height: 86px; border: 0; }
.bgm__message { color: var(--text-sub); font-size: 13px; }
.bgm__links { display: flex; flex-wrap: wrap; gap: 4px 12px; color: var(--text-sub); font-size: 13px; }
.bgm__links a { color: var(--cheese-text); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

/* ---- 收起：200×200 小窗继续播放（标题栏在播放器上方，不遮挡播放器） ---- */
.bgm[data-mode="mini"] .bgm__window {
  left: auto; right: var(--bgm-right);
  width: 202px; gap: 0; padding: 0;
  border-radius: 14px; overflow: hidden;
}
.bgm[data-mode="mini"] .bgm__bar { height: 36px; padding: 0 2px 0 10px; }
.bgm[data-mode="mini"] .bgm__title { font-size: 12px; }
.bgm[data-mode="mini"] .bgm__artist { display: none; }
.bgm[data-mode="mini"] .bgm__frame { width: 200px; height: 200px; min-height: 200px; aspect-ratio: auto; border-radius: 0; }
.bgm[data-mode="mini"] .bgm__message,
.bgm[data-mode="mini"] .bgm__links,
.bgm[data-mode="mini"] .bgm__switch { display: none; }
/* 网易云收起：只留标题栏 + 330×86 播放条 */
.bgm[data-mode="mini"][data-provider="netease"] .bgm__window { width: 332px; max-width: calc(100vw - 24px); }
.bgm[data-mode="mini"][data-provider="netease"] .bgm__frame { width: 330px; max-width: 100%; height: 86px; min-height: 0; margin: 0; }

/* 地图页：小窗在地图区域右上角，不挡地点抽屉 */
.bgm[data-anchor="map"][data-mode="mini"] .bgm__window { top: var(--bgm-map-top); right: var(--bgm-map-right); bottom: auto; }

@media (min-width: 1024px) {
  .bgm { --bgm-bottom: 24px; --bgm-right: 24px; }
  .bgm[data-mode="panel"] .bgm__window { left: auto; right: var(--bgm-right); width: 400px; }
  .bgm[data-anchor="map"][data-mode="panel"] .bgm__window { top: var(--bgm-map-top); right: var(--bgm-map-right); bottom: auto; }
}