/* ============================================================
   西域古城 · 背景音乐播放器
   ------------------------------------------------------------
   右下角药丸按钮 + 向上展开的曲目面板。
   样式自带变量兜底，所以在不加载 site.css 的 tour.html 里也能用。
   ============================================================ */

.bgm {
	position:fixed; z-index:60;
	right:calc(20px + env(safe-area-inset-right));
	bottom:var(--bgm-bottom, calc(20px + env(safe-area-inset-bottom)));
	font-family:var(--font, "PingFang SC","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",sans-serif);
	--bgm-accent:var(--accent, #d9a441);
	--bgm-accent-2:var(--accent-2, #e8b558);
	--bgm-line:rgba(255,255,255,.14);
	--bgm-fg:#f2f3f5;
	--bgm-muted:#98a0aa;
	-webkit-font-smoothing:antialiased;
}
.bgm * { box-sizing:border-box; }

/* ---------------- 药丸按钮 ---------------- */
.bgm-fab {
	display:inline-flex; align-items:center; gap:9px; cursor:pointer;
	height:42px; padding:0 16px 0 14px; border-radius:999px;
	background:rgba(11,12,14,.62); border:1px solid var(--bgm-line);
	-webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
	color:var(--bgm-fg); font-family:inherit; font-size:13px; letter-spacing:.02em;
	box-shadow:0 8px 26px rgba(0,0,0,.4);
	transition:transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
}
.bgm-fab:hover { transform:translateY(-2px); border-color:rgba(255,255,255,.34); }
.bgm-fab .lab { max-width:150px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bgm-ico { width:17px; height:17px; display:block; flex:0 0 auto; }
.bgm.is-playing .bgm-fab { border-color:rgba(217,164,65,.5); color:var(--bgm-accent); }

/* 播放中：音符换成跳动的电平条 */
.bgm-eq { display:none; align-items:flex-end; gap:2px; height:14px; flex:0 0 auto; }
.bgm.is-playing .bgm-eq { display:flex; }
.bgm.is-playing .bgm-ico { display:none; }
.bgm-eq i { width:2.5px; border-radius:1px; background:currentColor; transform-origin:bottom;
	animation:bgmEq 1.05s ease-in-out infinite; }
.bgm-eq i:nth-child(1) { height:7px;  animation-delay:0s; }
.bgm-eq i:nth-child(2) { height:14px; animation-delay:.18s; }
.bgm-eq i:nth-child(3) { height:9px;  animation-delay:.36s; }
.bgm-eq i:nth-child(4) { height:12px; animation-delay:.54s; }
@keyframes bgmEq { 0%,100% { transform:scaleY(.35); } 50% { transform:scaleY(1); } }
.bgm.is-paused .bgm-eq i { animation-play-state:paused; }

/* 没播放过时的呼吸提示 */
.bgm.hint .bgm-fab { border-color:rgba(217,164,65,.45); }
.bgm.hint .bgm-fab .lab { color:var(--bgm-accent); }
@keyframes bgmPulse { 0%,100% { box-shadow:0 8px 26px rgba(0,0,0,.4), 0 0 0 0 rgba(217,164,65,.4); }
	50% { box-shadow:0 8px 26px rgba(0,0,0,.4), 0 0 0 9px rgba(217,164,65,0); } }
.bgm.hint .bgm-fab { animation:bgmPulse 2.4s ease-out infinite; }

/* 静音自动播放中：已经在放了，只是还没声音，等访客碰一下页面 */
.bgm.waiting .bgm-fab {
	border-color:rgba(217,164,65,.5); color:var(--bgm-accent);
	animation:bgmPulse 2.4s ease-out infinite;
}

/* ---------------- 展开面板 ---------------- */
.bgm-panel {
	position:absolute; right:0; bottom:54px;
	width:min(330px, calc(100vw - 36px));
	border-radius:16px; overflow:hidden;
	background:rgba(16,17,21,.95);
	-webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
	border:1px solid var(--bgm-line);
	box-shadow:0 20px 52px rgba(0,0,0,.55);
	opacity:0; visibility:hidden; transform:translateY(10px) scale(.97);
	transform-origin:bottom right;
	transition:opacity .2s ease, transform .2s ease, visibility .2s;
}
.bgm.open .bgm-panel { opacity:1; visibility:visible; transform:none; }

.bgm-head { display:flex; align-items:center; gap:9px; padding:14px 14px 12px; border-bottom:1px solid var(--bgm-line); }
.bgm-info { flex:1 1 auto; min-width:0; }
.bgm-info b { display:block; font-size:13.5px; font-weight:500; color:var(--bgm-fg);
	white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bgm-info span { display:block; margin-top:2px; font-size:11.5px; color:var(--bgm-muted);
	white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-variant-numeric:tabular-nums; }

.bgm-btn { flex:0 0 auto; width:34px; height:34px; padding:0; border-radius:50%; cursor:pointer;
	display:grid; place-items:center; color:var(--bgm-fg);
	background:rgba(255,255,255,.07); border:1px solid var(--bgm-line);
	transition:background .18s ease, border-color .18s ease; }
.bgm-btn:hover { background:rgba(255,255,255,.15); }
.bgm-btn svg { width:15px; height:15px; display:block; }
.bgm-btn.main { background:var(--bgm-accent); border-color:var(--bgm-accent); color:#16130c; }
.bgm-btn.main:hover { background:var(--bgm-accent-2); border-color:var(--bgm-accent-2); }

.bgm-vol { display:flex; align-items:center; gap:10px; padding:11px 15px; border-bottom:1px solid var(--bgm-line); }
.bgm-vol svg { width:15px; height:15px; flex:0 0 auto; color:var(--bgm-muted); }
.bgm-vol input[type=range] { -webkit-appearance:none; appearance:none; flex:1 1 auto; height:3px; margin:0;
	border-radius:2px; background:rgba(255,255,255,.18); outline:none; cursor:pointer; }
.bgm-vol input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:13px; height:13px;
	border:none; border-radius:50%; background:var(--bgm-accent); cursor:pointer; }
.bgm-vol input[type=range]::-moz-range-thumb { width:13px; height:13px; border:none; border-radius:50%;
	background:var(--bgm-accent); cursor:pointer; }

/* ---------------- 曲目列表 ---------------- */
.bgm-list { list-style:none; margin:0; padding:6px; max-height:min(52vh, 348px);
	overflow-y:auto; overscroll-behavior:contain; }
.bgm-list::-webkit-scrollbar { width:6px; }
.bgm-list::-webkit-scrollbar-thumb { background:rgba(255,255,255,.18); border-radius:3px; }
.bgm-list li { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:9px;
	cursor:pointer; font-size:13px; color:#cfd5dd; transition:background .15s ease, color .15s ease; }
.bgm-list li:hover { background:rgba(255,255,255,.07); color:var(--bgm-fg); }
.bgm-list li.on { background:rgba(217,164,65,.14); color:var(--bgm-fg); }
.bgm-list li .num { flex:0 0 18px; text-align:right; font-size:11px; color:var(--bgm-muted);
	font-variant-numeric:tabular-nums; }
.bgm-list li.on .num { color:var(--bgm-accent); }
.bgm-list li .txt { flex:1 1 auto; min-width:0; line-height:1.35; }
.bgm-list li .t { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bgm-list li .a { display:block; margin-top:1px; font-size:11.5px; color:var(--bgm-muted);
	white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bgm-list li .dur { flex:0 0 auto; font-size:11px; color:var(--bgm-muted); font-variant-numeric:tabular-nums; }
.bgm-list li.on .dur { color:var(--bgm-accent); opacity:.9; }

.bgm-foot { padding:9px 15px 11px; border-top:1px solid var(--bgm-line);
	font-size:11.5px; color:var(--bgm-muted); line-height:1.6; }

/* ---------------- 小屏 ---------------- */
@media (max-width:560px) {
	.bgm { right:calc(14px + env(safe-area-inset-right));
		bottom:var(--bgm-bottom, calc(14px + env(safe-area-inset-bottom))); }
	.bgm-fab { height:40px; padding:0 14px 0 12px; font-size:12.5px; }
	.bgm-fab .lab { max-width:104px; }
	.bgm-panel { width:min(300px, calc(100vw - 28px)); bottom:50px; }
	.bgm-list { max-height:40vh; }
}

@media (prefers-reduced-motion: reduce) {
	.bgm-eq i { animation:none; }
	.bgm.hint .bgm-fab { animation:none; }
	.bgm-panel { transition:none; }
}