/* ==========================================================================================
   siren.css — 塞壬唱片（Monster Siren Records）全局 BGM 的三个 UI：悬浮按钮、迷你播放器、曲库面板。
   我方定制（2026-10-20）。视觉沿用项目自己的语言：近黑绿灰底 + 薄荷色描边 + 数字等宽。
   层级：--z-banner(40) < .siren-host(60) < --z-modal(80) < 曲库面板(86) —— 对局里按钮在战场之上、
   弹窗之下；容器 pointer-events: none，只有控件本身接收点击。

   字号（2026-10-20 服主反馈「整体太小」后统一放大，与 stats.css / lobby.css 同级）：
     标题 max(.26rem, 16px) · 正文 max(.19rem, 13px) · 次要 max(.16rem, 11px)
   1rem = 100 设计像素（theme.css 根字号随视口缩放），所以 1600×900 下分别约为 21.7 / 15.8 / 13.3px。
   ========================================================================================== */

.siren-host,
.siren-lib {
  --siren-title: max(.26rem, 16px);
  --siren-body: max(.19rem, 13px);
  --siren-sub: max(.16rem, 11px);
}

.siren-host {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  font-size: var(--siren-body);
}
.siren-host > * { pointer-events: auto; }

.siren-icon { display: block; flex: 0 0 auto; }

/* ---- 悬浮按钮 ------------------------------------------------------------------------------ */

.siren-fab {
  position: absolute;
  right: max(.16rem, env(safe-area-inset-right, 0px));
  bottom: max(.16rem, env(safe-area-inset-bottom, 0px));
  width: .56rem;
  height: .56rem;
  padding: 0;
  display: grid;
  place-items: center;
  /* 方形、纯色，不要圆形 / 渐变（服主 2026-10-21 反馈） */
  border-radius: 0;
  border: 1px solid var(--mint-700);
  background: var(--bg-1);
  color: var(--mint-500);
  font-size: .24rem;
  cursor: grab;
  opacity: .9;
  box-shadow: 0 0 .16rem rgba(0, 0, 0, .55), 0 0 .14rem rgba(78, 216, 175, .16);
  /* 拖动：触屏必须禁止默认手势，否则 pointermove 会被页面滚动吃掉 */
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  transition: transform var(--t-fast) var(--ease-out), opacity var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.siren-fab:hover, .siren-fab:focus-visible { opacity: 1; transform: translateY(-1px); border-color: var(--mint-500); color: var(--mint-400); }
.siren-fab.is-dragging,
.siren-fab.is-dragging:hover { cursor: grabbing; opacity: 1; transform: none; border-color: var(--mint-400); }
.siren-fab.is-siren { border-color: var(--mint-500); color: var(--mint-400); }
.siren-fab.is-playing { opacity: 1; box-shadow: 0 0 .16rem rgba(0, 0, 0, .55), 0 0 .2rem rgba(23, 249, 183, .3); }
.siren-fab__eq {
  position: absolute;
  right: -.02rem;
  bottom: -.02rem;
  display: flex;
  align-items: flex-end;
  gap: 1px;
  height: .16rem;
  padding: .02rem .03rem;
  border-radius: .05rem;
  background: var(--bg-0);
  border: 1px solid var(--mint-800);
}
.siren-fab__eq i {
  display: block;
  width: 2px;
  height: 40%;
  background: var(--mint-400);
  animation: siren-eq .9s ease-in-out infinite alternate;
}
.siren-fab__eq i:nth-child(2) { animation-delay: -.3s; }
.siren-fab__eq i:nth-child(3) { animation-delay: -.55s; }
@keyframes siren-eq {
  from { height: 20%; opacity: .6; }
  to { height: 100%; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .siren-fab__eq i { animation: none; height: 60%; }
}

/* ---- 迷你播放器 ---------------------------------------------------------------------------- */

.siren-mini {
  position: absolute;
  right: max(.16rem, env(safe-area-inset-right, 0px));
  bottom: calc(max(.16rem, env(safe-area-inset-bottom, 0px)) + .68rem);
  width: 4.4rem;
  max-width: calc(100vw - .32rem);
  padding: .2rem;
  display: flex;
  flex-direction: column;
  gap: .14rem;
  border: 1px solid var(--line);
  border-top-color: var(--mint-700);
  background: linear-gradient(180deg, rgba(20, 24, 22, .97), rgba(12, 15, 14, .97));
  box-shadow: 0 .08rem .3rem rgba(0, 0, 0, .6), 0 0 .2rem rgba(78, 216, 175, .08);
  color: var(--text-md);
  font-size: var(--siren-body);
  line-height: 1.5;
  animation: siren-mini-in var(--t-med) var(--ease-out);
}
@keyframes siren-mini-in {
  from { opacity: 0; transform: translateY(.06rem); }
  to { opacity: 1; transform: none; }
}
.siren-mini__head {
  display: flex;
  align-items: center;
  flex-wrap: nowrap; /* 关闭按钮与标题必须同一行（服主 2026-10-21 指定） */
  gap: .08rem;
}
/* 关闭按钮在左上角，与标题同一行；28px 见方让两者 top 对齐 */
.siren-mini__close { width: .28rem; height: .28rem; flex: 0 0 auto; }
.siren-mini__brand {
  display: inline-flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  min-height: .28rem;
  color: var(--mint-500);
}
.siren-mini__brand span {
  font-family: var(--font-display);
  font-size: var(--siren-sub);
  letter-spacing: .08em;
  line-height: .28rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 实际音质（Hi-Res / FLAC / 320K …；服务端降级时显示真实档位） */
.siren-mini__quality {
  padding: .02rem .08rem;
  border: 1px solid var(--mint-700);
  color: var(--mint-400);
  font-family: var(--font-num);
  font-size: var(--siren-sub);
  letter-spacing: .06em;
  line-height: 1.4;
  white-space: nowrap;
}
.siren-mini__mode {
  padding: .02rem .08rem;
  border: 1px solid var(--mint-800);
  color: var(--mint-700);
  font-size: var(--siren-sub);
  letter-spacing: .06em;
  line-height: 1.4;
  white-space: nowrap;
  flex: 0 0 auto;
}
.siren-mini__quality { flex: 0 0 auto; }
.siren-mini__now { display: flex; align-items: center; gap: .16rem; min-width: 0; }
.siren-mini__cover {
  position: relative;
  width: .72rem;
  height: .72rem;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  background: var(--bg-2);
  color: var(--mint-800);
  font-size: .3rem;
  overflow: hidden;
}
.siren-mini__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.siren-mini__eq {
  position: absolute;
  right: .03rem;
  bottom: .03rem;
  display: flex;
  align-items: flex-end;
  gap: 1px;
  height: .16rem;
  padding: 1px 3px;
  background: rgba(6, 10, 8, .82);
}
.siren-mini__eq i { width: 2px; height: 35%; background: var(--mint-400); animation: siren-eq .8s ease-in-out infinite alternate; }
.siren-mini__eq i:nth-child(2) { animation-delay: -.25s; }
.siren-mini__eq i:nth-child(3) { animation-delay: -.5s; }
.siren-mini__meta { display: flex; flex-direction: column; gap: .03rem; min-width: 0; }
.siren-mini__name {
  color: var(--text-hi);
  font-size: var(--siren-body);
  font-weight: 700;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.siren-mini__album {
  color: var(--mint-500);
  font-size: var(--siren-sub);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.siren-mini__artist {
  color: var(--text-lo);
  font-size: var(--siren-sub);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.siren-mini__progress { display: flex; flex-direction: column; gap: .03rem; }
.siren-mini__times { display: flex; justify-content: space-between; color: var(--text-dim); font-size: var(--siren-sub); line-height: 1.4; }
.siren-mini__controls { display: flex; align-items: center; gap: .1rem; flex-wrap: nowrap; }
/* 音量 + 音质同一行：不新增整行高度，四个音质小按钮在右侧 */
.siren-mini__bottom { display: flex; align-items: center; gap: .08rem; min-width: 0; }
.siren-mini__bottom .siren-mini__vol { flex: 1 1 auto; min-width: 0; }
/*
 * 迷你播放器内的音质切换（服主 2026-10-21 追加）：四个紧凑小按钮，和设置页共用 sp.pref.siren.quality。
 * 放在播放控制同一行，行高由 .42rem 的主播放按钮决定 —— 切档不会改变面板高度。
 */
.siren-mini__qualities {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: .03rem;
  flex: 0 0 auto;
}
.siren-mini__q {
  padding: .02rem .05rem;
  min-width: .3rem;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text-lo);
  font-size: var(--siren-sub);
  line-height: 1.25;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.siren-mini__q:hover { border-color: var(--mint-700); color: var(--mint-400); }
.siren-mini__q.is-on { border-color: var(--mint-500); background: var(--mint-a10); color: var(--mint-400); }
/* 歌词开关 */
.siren-mini__lyric {
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-size: var(--siren-sub);
  letter-spacing: 0;
}
.siren-mini__lyric.is-on { border-color: var(--mint-500); background: var(--mint-a10); color: var(--mint-400); }
/* 播放模式：来源 = 播放列表时才显示；按钮文字只占一个紧凑格，不把控制行撑高 */
.siren-mini__playmode {
  width: auto;
  min-width: .42rem;
  padding: 0 .05rem;
  flex: 0 0 auto;
  font-size: var(--siren-sub);
  letter-spacing: 0;
  white-space: nowrap;
}
.siren-mini__playmode.is-on { border-color: var(--mint-500); background: var(--mint-a10); color: var(--mint-400); }
/* 播放来源（热度 / 随机 / 播放列表）：紧凑一格，和音量、音质同一行 */
.siren-mini__source {
  flex: 0 0 auto;
  min-width: .44rem;
  height: .28rem;
  padding: 0 .06rem;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text-md);
  font: inherit;
  font-size: var(--siren-sub);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}
.siren-mini__source:hover { border-color: var(--mint-700); color: var(--mint-400); }
.siren-mini__source.is-on { border-color: var(--mint-700); background: var(--mint-a10); color: var(--mint-400); }
.siren-mini__lib {
  margin-left: 0;
  flex: 0 0 auto;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: .05rem;
  padding: .07rem .12rem;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text-md);
  font-size: var(--siren-sub);
  cursor: pointer;
}
.siren-mini__lib:hover { border-color: var(--mint-700); color: var(--mint-400); }
.siren-mini__vol { display: flex; align-items: center; gap: .08rem; color: var(--text-lo); font-size: var(--siren-sub); }
.siren-mini__vol .num { width: .34rem; text-align: right; color: var(--text-dim); font-variant-numeric: tabular-nums; }
/* 固定一行状态位：错误 / 载入中 / 降级提示 / 实际音质。min-height 让切档时面板高度不变。 */
.siren-mini__note-slot {
  margin: 0;
  min-height: calc(var(--siren-sub) * 1.5);
  color: var(--text-lo);
  font-size: var(--siren-sub);
  line-height: 1.5;
}
.siren-mini__note-slot.is-warn,
.siren-mini__note-slot.is-err { color: var(--amber); }
.siren-mini__note-slot.is-ok { color: var(--text-dim); }

.siren-iconbtn {
  display: inline-grid;
  place-items: center;
  width: .34rem;
  height: .34rem;
  padding: 0;
  border: 1px solid var(--line);
  background: var(--bg-1);
  color: var(--text-md);
  font-size: .18rem;
  cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.siren-iconbtn:hover { color: var(--mint-400); border-color: var(--mint-700); }
.siren-iconbtn--main { width: .42rem; height: .42rem; margin: 0 .02rem; border-color: var(--mint-700); color: var(--mint-400); background: var(--mint-900); }
.siren-iconbtn--main:hover { background: var(--mint-800); color: var(--text-hi); }
.siren-iconbtn--close { border-color: transparent; background: transparent; color: var(--text-lo); }
.siren-iconbtn--close:hover { color: var(--red-premium); border-color: transparent; }

/* 进度条 / 音量条 */
.siren-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  margin: .06rem 0;
  border: 0;
  border-radius: 2px;
  background: linear-gradient(to right, var(--mint-500) 0 var(--pct, 0%), rgba(255, 255, 255, .13) var(--pct, 0%) 100%);
  cursor: pointer;
}
.siren-range:disabled { cursor: default; opacity: .5; }
.siren-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 0;
  background: var(--mint-400);
  box-shadow: 0 0 6px rgba(23, 249, 183, .55);
}
.siren-range::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 0;
  border-radius: 50%;
  background: var(--mint-400);
  box-shadow: 0 0 6px rgba(23, 249, 183, .55);
}
.siren-range::-moz-range-track { height: 4px; background: transparent; }

/* ---- 曲库面板（占满屏幕） ------------------------------------------------------------------ */

body.siren-lib-open { overflow: hidden; }

.siren-lib {
  position: fixed;
  inset: 0;
  z-index: 86;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(circle at 12% 0%, rgba(78, 216, 175, .1), transparent 46%),
    radial-gradient(circle at 100% 100%, rgba(78, 216, 175, .07), transparent 42%),
    linear-gradient(180deg, #0d1211, #0a0d0c);
  color: var(--text-md);
  font-size: var(--siren-body);
  line-height: 1.5;
  animation: siren-lib-in var(--t-med) var(--ease-out);
}
@keyframes siren-lib-in {
  from { opacity: 0; transform: scale(.995); }
  to { opacity: 1; transform: none; }
}
.siren-lib__head {
  display: flex;
  align-items: center;
  gap: .3rem;
  padding: .2rem .36rem .18rem;
  border-bottom: 1px solid var(--line);
  background: rgba(10, 13, 12, .72);
}
.siren-lib__brand { display: flex; flex-direction: column; gap: .03rem; min-width: 3.2rem; }
.siren-lib__brand .micro { font-size: var(--siren-sub); letter-spacing: .12em; }
.siren-lib__brand h2 {
  margin: 0;
  color: var(--text-hi);
  font-family: var(--font-display);
  /* 页面主标题保持醒目：不低于标题档位 max(.26rem, 16px)，大屏维持原 .3rem */
  font-size: max(.3rem, 18px);
  letter-spacing: .06em;
  line-height: 1.15;
}
.siren-lib__search {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: .1rem;
  max-width: 6.4rem;
  padding: .1rem .16rem;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, .28);
  color: var(--text-dim);
  font-size: .22rem;
}
.siren-lib__search:focus-within { border-color: var(--mint-700); color: var(--mint-500); }
.siren-lib__search input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--text-hi);
  font: inherit;
  font-size: var(--siren-body);
  line-height: 1.4;
  outline: none;
}
.siren-lib__search input::placeholder { color: var(--text-dim); }
.siren-lib__head-actions { margin-left: auto; display: flex; align-items: center; gap: .14rem; }
.siren-lib__count { color: var(--text-dim); font-size: var(--siren-sub); letter-spacing: .04em; }

.siren-chip {
  padding: .07rem .16rem;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text-md);
  font-size: var(--siren-sub);
  letter-spacing: .04em;
  line-height: 1.4;
  cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.siren-chip:hover:not(:disabled) { color: var(--mint-400); border-color: var(--mint-700); background: var(--mint-a10); }
.siren-chip:disabled { opacity: .4; cursor: default; }
.siren-chip--primary { border-color: var(--mint-700); color: var(--mint-400); }
.siren-chip--primary:hover:not(:disabled) { background: var(--mint-800); color: var(--text-hi); }

.siren-lib__body {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  /* 左：专辑 · 中：曲目 · 右：当前播放列表（和左上「我的播放列表」收藏分开） */
  grid-template-columns: 3.1rem minmax(0, 1fr) 4.2rem;
}
.siren-lib__albums {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: .16rem .14rem .26rem .3rem;
  display: flex;
  flex-direction: column;
  gap: .08rem;
  border-right: 1px solid var(--line);
  scrollbar-width: thin;
  scrollbar-gutter: stable;
}
.siren-album {
  display: flex;
  align-items: center;
  gap: .14rem;
  width: 100%;
  padding: .08rem;
  border: 1px solid transparent;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.siren-album:hover { background: rgba(255, 255, 255, .03); border-color: var(--line); }
.siren-album.is-active { border-color: var(--mint-700); background: var(--mint-a10); }
.siren-album img {
  width: .52rem;
  height: .52rem;
  flex: 0 0 auto;
  object-fit: cover;
  border: 1px solid var(--line);
  background: var(--bg-2);
}
.siren-album__text { display: flex; flex-direction: column; gap: .03rem; min-width: 0; }
.siren-album__text b {
  color: var(--text-md);
  font-size: var(--siren-body);
  font-weight: 600;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.siren-album.is-active .siren-album__text b { color: var(--mint-400); }
.siren-album__text em {
  color: var(--text-dim);
  font-size: var(--siren-sub);
  font-style: normal;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.siren-lib__songs { display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: .16rem .3rem 0; }
.siren-lib__songhead { display: flex; align-items: center; gap: .16rem; padding: 0 .08rem .12rem; border-bottom: 1px solid var(--line); }
.siren-lib__songhead b { color: var(--text-hi); font-size: var(--siren-title); line-height: 1.25; }
.siren-lib__songhead .num { color: var(--text-dim); font-size: var(--siren-sub); }
.siren-lib__songhead .siren-chip { margin-left: auto; }
.siren-songlist {
  margin: 0;
  padding: .08rem .08rem .26rem 0;
  list-style: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  flex: 1 1 auto;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-gutter: stable;
}
.siren-song {
  display: flex;
  align-items: stretch;
  gap: .08rem;
  min-height: .58rem;
  border-bottom: 1px solid rgba(47, 58, 53, .5);
  transition: background var(--t-fast);
}
.siren-song:hover { background: rgba(255, 255, 255, .025); }
.siren-song.is-current { background: linear-gradient(90deg, var(--mint-a10), transparent 70%); }
.siren-song__main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: .18rem;
  padding: .11rem .08rem;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.siren-song__main:hover .siren-song__text b { color: var(--mint-400); }
.siren-song__no { width: .38rem; color: var(--text-dim); font-size: var(--siren-sub); text-align: right; flex: 0 0 auto; }
.siren-song.is-current .siren-song__no { color: var(--mint-500); }
.siren-song__text { display: flex; flex-direction: column; gap: .03rem; min-width: 0; }
.siren-song__text b {
  color: var(--text-md);
  font-size: var(--siren-body);
  font-weight: 600;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color var(--t-fast);
}
.siren-song.is-current .siren-song__text b { color: var(--mint-400); }
.siren-song__text em {
  color: var(--text-lo);
  font-size: var(--siren-sub);
  font-style: normal;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.siren-song__add {
  flex: 0 0 auto;
  width: .42rem;
  margin: .07rem 0;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text-lo);
  font-size: var(--siren-body);
  cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.siren-song__add:hover { color: var(--mint-400); border-color: var(--mint-700); }
.siren-song__add.is-on { color: var(--mint-400); border-color: var(--mint-700); background: var(--mint-a10); }

/* ---- 当前播放列表（曲库右侧） ------------------------------------------------------------- */
/* 这里是「当前播放队列」，不是「我的播放列表」收藏；队列可点击切歌、拖动 / ↑↓ 排序、单删、清空。 */

.siren-lib__queue {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: .16rem .22rem .1rem .18rem;
  border-left: 1px solid var(--line);
  background: rgba(255, 255, 255, .012);
}
.siren-lib__queue-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .1rem;
  padding-bottom: .1rem;
  border-bottom: 1px solid var(--line);
}
.siren-lib__queue-head > div { display: flex; align-items: baseline; gap: .1rem; min-width: 0; }
.siren-lib__queue-head b { color: var(--text-hi); font-size: var(--siren-body); line-height: 1.35; }
.siren-lib__queue-head .num { color: var(--text-dim); font-size: var(--siren-sub); white-space: nowrap; }
.siren-queue__head-actions { display: inline-flex; align-items: center; gap: .04rem; flex: 0 0 auto; }
.siren-queue__clear { flex: 0 0 auto; padding: .04rem .1rem; }
.siren-queue__mode { padding: .04rem .08rem; white-space: nowrap; }
.siren-queue__mode.is-on { border-color: var(--mint-500); background: var(--mint-a10); color: var(--mint-400); }
.siren-lib__queue-hint {
  margin: .08rem 0;
  color: var(--text-dim);
  font-size: var(--siren-sub);
  line-height: 1.45;
}
.siren-queue {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding: 0 0 .16rem;
  list-style: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-gutter: stable;
}
.siren-queue::-webkit-scrollbar { width: 8px; }
.siren-queue::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
.siren-queue::-webkit-scrollbar-thumb:hover { background: var(--mint-800); }
.siren-queue__item {
  display: flex;
  align-items: center;
  gap: .06rem;
  min-height: .52rem;
  padding: .04rem .02rem;
  border-bottom: 1px solid rgba(47, 58, 53, .5);
  cursor: grab;
  transition: background var(--t-fast), box-shadow var(--t-fast);
}
.siren-queue__item:hover { background: rgba(255, 255, 255, .025); }
.siren-queue__item.is-current {
  background: linear-gradient(90deg, var(--mint-a10), transparent 78%);
  box-shadow: inset 2px 0 0 var(--mint-500);
}
.siren-queue__item.is-current .siren-queue__main b { color: var(--mint-400); }
.siren-queue__item.is-dragging { opacity: .45; }
.siren-queue__item.is-drop { box-shadow: inset 0 2px 0 var(--mint-500); }
.siren-queue__handle {
  flex: 0 0 auto;
  width: .16rem;
  color: var(--mint-800);
  font-size: var(--siren-sub);
  line-height: 1;
  cursor: grab;
  user-select: none;
}
.siren-queue__item:hover .siren-queue__handle { color: var(--mint-600); }
.siren-queue__main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .01rem;
  padding: .05rem 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.siren-queue__main b,
.siren-queue__main em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.siren-queue__main b {
  color: var(--text-md);
  font-size: var(--siren-body);
  font-weight: 600;
  line-height: 1.35;
}
.siren-queue__main em { color: var(--text-dim); font-size: var(--siren-sub); font-style: normal; line-height: 1.3; }
.siren-queue__main:hover b { color: var(--mint-400); }
.siren-queue__dur {
  flex: 0 0 auto;
  color: var(--text-dim);
  font-size: var(--siren-sub);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.siren-queue__acts { display: inline-flex; align-items: center; gap: 1px; flex: 0 0 auto; opacity: .35; transition: opacity var(--t-fast); }
.siren-queue__item:hover .siren-queue__acts,
.siren-queue__item.is-current .siren-queue__acts { opacity: 1; }
.siren-queue__acts button {
  width: .22rem;
  height: .24rem;
  padding: 0;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-lo);
  font: inherit;
  font-size: var(--siren-sub);
  line-height: 1;
  cursor: pointer;
}
.siren-queue__acts button:hover:not(:disabled) { border-color: var(--line); color: var(--mint-400); }
.siren-queue__acts button:last-child:hover:not(:disabled) { color: var(--red-premium); }
.siren-queue__acts button:disabled { opacity: .25; cursor: default; }
.siren-queue__empty { margin: 0; padding: .3rem .1rem; }

/* ---- 曲库底部：收藏条 + 固定播放控制栏 ---------------------------------------------------- */

.siren-lib__dock { flex: 0 0 auto; }
.siren-lib__foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .16rem;
  padding: .1rem .36rem;
  border-top: 1px solid var(--line);
  background: rgba(10, 13, 12, .8);
  font-size: var(--siren-sub);
  line-height: 1.5;
}
.siren-lib__pl { color: var(--text-md); }
.siren-lib__pl em {
  margin-left: .04rem;
  padding: 0 .05rem;
  border: 1px solid var(--line);
  color: var(--text-dim);
  font-size: var(--siren-sub);
  font-style: normal;
}
.siren-lib__pl .num { color: var(--mint-400); font-size: var(--siren-body); }

.siren-lib__controls {
  display: grid;
  grid-template-columns: minmax(150px, .95fr) auto minmax(240px, 1.2fr) minmax(130px, .6fr);
  align-items: center;
  gap: .18rem;
  padding: .12rem .36rem .14rem;
  border-top: 1px solid var(--line);
  background: rgba(8, 11, 10, .94);
}
.siren-lib__now { display: flex; align-items: center; gap: .1rem; min-width: 0; color: var(--mint-600); }
.siren-lib__now-text { display: flex; flex-direction: column; gap: .01rem; min-width: 0; }
.siren-lib__now-text b {
  max-width: 100%;
  color: var(--text-hi);
  font-size: var(--siren-body);
  font-weight: 700;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.siren-lib__now-text em {
  color: var(--text-dim);
  font-size: var(--siren-sub);
  font-style: normal;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.siren-lib__transport { display: flex; align-items: center; gap: .08rem; }
.siren-lib__mode {
  display: inline-flex;
  align-items: center;
  gap: .06rem;
  height: .34rem;
  padding: 0 .12rem;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text-md);
  font: inherit;
  font-size: var(--siren-sub);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.siren-lib__mode span { color: var(--text-dim); }
.siren-lib__mode b { color: var(--mint-500); font-weight: 600; }
.siren-lib__mode:hover { border-color: var(--mint-700); color: var(--mint-400); }
.siren-lib__mode.is-on { border-color: var(--mint-500); background: var(--mint-a10); }
.siren-lib__source span { color: var(--text-dim); }
.siren-lib__source b { color: var(--mint-500); }
.siren-lib__seek { display: flex; align-items: center; gap: .1rem; min-width: 0; }
.siren-lib__seek .siren-range { flex: 1 1 auto; min-width: 0; margin: .04rem 0; }
.siren-lib__seek .num { flex: 0 0 auto; color: var(--text-dim); font-size: var(--siren-sub); font-variant-numeric: tabular-nums; white-space: nowrap; }
.siren-lib__vol { display: flex; align-items: center; gap: .07rem; min-width: 0; color: var(--text-lo); font-size: var(--siren-sub); }
.siren-lib__vol .siren-range { flex: 1 1 auto; min-width: 80px; margin: .04rem 0; }
.siren-lib__vol .num { flex: 0 0 auto; width: .34rem; text-align: right; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.siren-lib__hint { margin-left: auto; color: var(--text-dim); font-size: var(--siren-sub); }
.siren-lib__empty { padding: .44rem .3rem; color: var(--text-lo); font-size: var(--siren-body); }
.siren-lib__empty.is-error { color: var(--amber); }

/* 抓取进度条（服务端还在从网易云抓曲库时显示在头部下面） */
.siren-crawl {
  display: flex;
  align-items: center;
  gap: .1rem;
  padding: .08rem .36rem;
  border-bottom: 1px solid var(--line);
  background: rgba(78, 216, 175, .06);
  color: var(--mint-700);
  font-size: var(--siren-sub);
  line-height: 1.5;
  letter-spacing: .02em;
}
.siren-crawl__dot {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--mint-500);
  animation: siren-pulse 1.2s ease-in-out infinite;
}
@keyframes siren-pulse {
  50% { opacity: .25; }
}

/* 专辑说明（QQ 音乐 /getAlbumInfo 的 desc，选中专辑时懒加载）：标题正下方，最多 3 行、超出省略，
   点「展开」看全文。字号单独给到 ≥12px（--siren-sub 的下限只有 11px，复用会违反要求）。 */
.siren-lib__descbox {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .04rem;
  margin: .1rem .08rem 0;
  min-width: 0;
}
.siren-lib__desc {
  width: 100%;
  margin: 0;
  color: var(--text-lo);          /* 偏淡：简介是次要信息，不能压过标题和曲目 */
  font-size: max(.17rem, 12px);   /* 要求 ≥12px */
  line-height: 1.6;
  white-space: pre-wrap;          /* 保留简介里的换行 / 空行（QQ 的段落分隔） */
  overflow-wrap: anywhere;        /* 长英文单词 / 无空格串也强制折行 */
  display: -webkit-box;
  -webkit-line-clamp: 3;          /* 最多 3 行 */
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* 展开：取消 3 行截断；超长简介给个高度上限 + 内部滚动，别把曲目列表挤没 */
.siren-lib__desc.is-open {
  display: block;
  -webkit-line-clamp: unset;
  overflow-y: auto;
  max-height: 34vh;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
/* 暂无简介 / 正在读取：再淡一档，明显是占位而不是正文 */
.siren-lib__desc.is-empty { color: var(--text-dim); }
.siren-lib__desc-toggle {
  padding: 0;
  border: 0;
  background: none;
  color: var(--mint-400);
  font-family: inherit;
  font-size: max(.17rem, 12px);
  line-height: 1.4;
  cursor: pointer;
  opacity: .85;
}
.siren-lib__desc-toggle:hover,
.siren-lib__desc-toggle:focus-visible { opacity: 1; text-decoration: underline; }
.siren-lib__albums .siren-lib__hint { margin: .24rem 0; }

/* 滚动条：内容区留出稳定槽位，放大字号后列表不会被滚动条压住 */
.siren-lib__albums::-webkit-scrollbar,
.siren-songlist::-webkit-scrollbar { width: 8px; }
.siren-lib__albums::-webkit-scrollbar-thumb,
.siren-songlist::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
.siren-lib__albums::-webkit-scrollbar-thumb:hover,
.siren-songlist::-webkit-scrollbar-thumb:hover { background: var(--mint-800); }

/* ---- 设置项：塞壬音质（一行四档，等宽；窄屏两列换行） ---------------------------------------- */

[data-testid="siren-quality"] .set-seg {
  justify-self: stretch;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
}
[data-testid="siren-quality"] .set-seg button {
  min-width: 0;
  padding: 0 .04rem;
  font-size: var(--siren-sub);
  letter-spacing: 0;
}
@media (max-width: 760px), (max-aspect-ratio: 1/1) {
  [data-testid="siren-quality"] .set-seg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 窄屏 / 竖屏：专辑栏窄一点，头部换行 */
@media (max-aspect-ratio: 1/1) {
  .siren-lib__body { grid-template-columns: 2.6rem minmax(0, 1fr); }
  .siren-lib__head { flex-wrap: wrap; gap: .12rem; }
  .siren-lib__search { max-width: none; order: 3; flex: 1 1 100%; }
  .siren-lib__brand { min-width: 0; }
  .siren-lib__songs { padding: .14rem .18rem 0; }
  .siren-lib__albums { padding: .14rem .1rem .2rem .18rem; }
}

/* ---- 歌词（纯文字，无窗口外壳） ------------------------------------------------------------ */
/* 迷你播放器的「词」按钮开关。没有边框 / 背景 / 标题栏 / 开关按钮行，只显示原文 + 译文。
   默认固定在右侧偏上，宽度随文字自适应、最大 42vw；整个文字块可拖动（位置存 prefs.lyricPos）。
   没有背景块，所以用多层深色 text-shadow 保证亮背景上也能看清。字号由 prefs.lyricSize 控制。 */

.siren-lyric {
  position: fixed;
  right: 24px;
  top: 120px;
  width: max-content;
  max-width: 42vw;
  max-height: min(44vh, 400px);
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: rgba(242, 255, 250, .7);
  font-size: var(--siren-lyric-size, 16px);
  line-height: 1.5;
  /* 无背景块：投影 + 一圈柔光描边，亮色场景 / 天空上也能读 */
  text-shadow:
    0 1px 2px rgba(0, 0, 0, .98),
    0 0 5px rgba(0, 0, 0, .92),
    0 2px 12px rgba(0, 0, 0, .78),
    0 0 1px rgba(0, 0, 0, 1);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}
.siren-lyric.is-dragging { cursor: grabbing; }

.siren-lyric__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0;
  scrollbar-width: none;
}
.siren-lyric__body::-webkit-scrollbar { width: 0; height: 0; display: none; }

.siren-lyric__lines { margin: 0; padding: 0; list-style: none; }
.siren-lyric__row { display: block; }
.siren-lyric__line {
  display: flex;
  flex-direction: column;
  gap: .02rem;
  width: 100%;
  margin: 0;
  padding: .03rem 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 1em;
  line-height: 1.5;
  text-align: left;
  text-shadow: inherit;
  cursor: grab;
  opacity: .5;
  transition: opacity var(--t-fast), color var(--t-fast);
}
.siren-lyric__line:hover { opacity: .82; }
.siren-lyric__line.is-active { opacity: 1; }
.siren-lyric__orig { display: block; font-size: 1em; line-height: 1.5; }
.siren-lyric__line.is-active .siren-lyric__orig {
  color: #f6fffc;
  /* 当前行比设置字号略大（译文仍以设置字号为基准的 0.8 倍） */
  font-size: 1.18em;
  font-weight: 700;
  line-height: 1.42;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, .98),
    0 0 7px rgba(0, 0, 0, .92),
    0 0 16px rgba(23, 249, 183, .32);
}
.siren-lyric__trans {
  display: block;
  font-size: .8em;
  line-height: 1.45;
  color: rgba(231, 247, 241, .62);
}
.siren-lyric__line.is-active .siren-lyric__trans { color: rgba(221, 255, 244, .9); }
/* 音译默认关；在设置里打开后才出现，字号比译文再小一点 */
.siren-lyric__roman {
  display: block;
  font-size: .72em;
  line-height: 1.4;
  color: rgba(196, 224, 215, .5);
}
.siren-lyric__line.is-active .siren-lyric__roman { color: rgba(196, 235, 223, .72); }

/* 窄屏 / 竖屏：默认位置往回收；宽度仍不超过 42vw（需求），拖动后位置存 prefs。 */
@media (max-width: 760px), (max-aspect-ratio: 1/1) {
  .siren-lyric { right: 16px; top: 96px; max-height: 44vh; }
}

/* 曲库窄屏 / 竖屏：当前播放列表落到曲目下方，控制栏换成两行（高度稳定，不压住列表） */
@media (max-width: 1180px) {
  .siren-lib__body { grid-template-columns: 2.6rem minmax(0, 1fr); }
  .siren-lib__queue {
    grid-column: 1 / -1;
    max-height: 30vh;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
  .siren-lib__body { grid-template-rows: minmax(0, 1fr) minmax(0, 30vh); }
  .siren-lib__controls { grid-template-columns: minmax(140px, .9fr) auto minmax(190px, 1fr); }
  .siren-lib__vol { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .siren-lib__head { flex-wrap: wrap; gap: .12rem; }
  .siren-lib__search { max-width: none; order: 3; flex: 1 1 100%; }
  .siren-lib__brand { min-width: 0; }
  .siren-lib__songs { padding: .14rem .18rem 0; }
  .siren-lib__albums { padding: .14rem .1rem .2rem .18rem; }
  .siren-lib__controls { grid-template-columns: 1fr; }
  .siren-lib__vol { grid-column: auto; }
  .siren-lib__foot { padding: .1rem .18rem; }
  .siren-lib__controls { padding: .1rem .18rem .12rem; }
}