/* ============================================================
 * 音乐猫 · 歌词面板样式（黑金风，与底部播放条同源配色）
 * ------------------------------------------------------------
 * 配色沿用播放条：底 rgba(18,14,10) / 金 var(--brand) / 文字 #F2E9D8
 * 兼容：不用 inset、不用 gap 依赖，老内核有 @media 回退
 * ============================================================ */

/* ---------- 全屏遮罩 ---------- */
.ml-mask{
  position:fixed;top:0;right:0;bottom:0;left:0;z-index:200;
  background:rgba(18,14,10,.975);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  display:-webkit-box;display:-ms-flexbox;display:flex;
  -webkit-box-orient:vertical;-ms-flex-direction:column;flex-direction:column;
  color:#F2E9D8;
}
.ml-mask[hidden]{display:none}

/* ---------- 顶栏 ---------- */
.ml-head{
  height:64px;flex-shrink:0;-ms-flex:0 0 auto;
  display:-webkit-box;display:-ms-flexbox;display:flex;
  -webkit-box-align:center;-ms-flex-align:center;align-items:center;
  -webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;
  padding:0 24px;
  border-bottom:1px solid rgba(var(--brand-rgb),.18);
}
.ml-head-title{
  font-size:15px;font-weight:600;letter-spacing:.5px;
  max-width:80%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ml-close{
  width:38px;height:38px;border-radius:50%;padding:0;cursor:pointer;
  color:#C7A566;background:rgba(255,255,255,.05);
  border:none;
  display:-webkit-box;display:-ms-flexbox;display:flex;
  -webkit-box-align:center;-ms-flex-align:center;align-items:center;
  -webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;
  transition:.15s;
}
.ml-close:hover{background:rgba(var(--brand-rgb),.16);color:var(--brand)}
.ml-close svg{
  width:18px;height:18px;display:block;fill:none;
  stroke:#C7A566;stroke-width:1.8;stroke-linecap:round;
}
.ml-close:hover svg{stroke:var(--brand)}

/* ---------- 歌词舞台 ---------- */
.ml-stage{
  position:relative;overflow:hidden;
  -webkit-box-flex:1;-ms-flex:1;flex:1;
  cursor:pointer;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%);
}
.ml-inner{
  position:absolute;top:0;left:0;width:100%;
  padding:34% 0 46%;
  transition:transform .48s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}

/* ---------- 歌词行 ---------- */
.ml-line{
  margin:0;padding:9px 6%;
  font-size:19px;line-height:1.55;text-align:center;
  color:rgba(242,233,216,.34);
  transition:color .3s,transform .3s,font-size .3s;
  cursor:pointer;-webkit-user-select:none;-ms-user-select:none;user-select:none;
}
.ml-line:hover{color:rgba(242,233,216,.62)}

/* 当前行：放大 + 整体提亮（未唱到的字仍偏暗，唱到的字点亮成金色） */
.ml-line.on{
  font-size:23px;font-weight:600;
  color:rgba(242,233,216,.55);
  -webkit-transform:scale(1.02);-ms-transform:scale(1.02);transform:scale(1.02);
}

/* ---------- 逐字卡拉 OK ---------- */
.ml-line .c{
  color:rgba(242,233,216,.34);
  transition:color .16s linear;
}
.ml-line.on .c{color:rgba(242,233,216,.5)}
.ml-line.on .c.lit{
  color:var(--brand-2);
  text-shadow:0 0 14px rgba(var(--brand-rgb),.45);
}

.ml-empty{
  margin:0;padding:0 10%;text-align:center;
  font-size:15px;color:#8C8271;line-height:1.8;
}

/* ---------- 底部提示 ---------- */
.ml-foot{
  height:52px;flex-shrink:0;-ms-flex:0 0 auto;
  display:-webkit-box;display:-ms-flexbox;display:flex;
  -webkit-box-align:center;-ms-flex-align:center;align-items:center;
  -webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;
  font-size:12px;color:#8C8271;letter-spacing:.4px;
  border-top:1px solid rgba(var(--brand-rgb),.14);
}

/* ---------- 播放条上的「词」按钮 ---------- */
.ml-open-btn svg{
  width:17px;height:17px;display:block;fill:none;
  stroke:#C7A566;stroke-width:1.7;stroke-linecap:round;
}
.ml-open-btn:hover svg{stroke:var(--brand)}
.ml-open-btn.active{
  color:#1B1509;background:linear-gradient(135deg,var(--brand-2),var(--brand));
  box-shadow:0 2px 10px rgba(var(--brand-rgb),.4);
}
.ml-open-btn.active svg{stroke:#1B1509}

/* 面板打开时禁止底层滚动 */
body.ml-open{overflow:hidden}

/* ---------- 播放条上的单行歌词 ---------- */
.mb-lyric{
  height:30px;cursor:pointer;overflow:hidden;
  padding:0 24px;
  border-bottom:1px solid rgba(var(--brand-rgb),.12);
  display:-webkit-box;display:-ms-flexbox;display:flex;
  -webkit-box-align:center;-ms-flex-align:center;align-items:center;
  -webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;
}
.mb-lyric[hidden]{display:none}
.mb-lyric:hover{background:rgba(var(--brand-rgb),.06)}
.mb-lyric-txt{
  font-size:13px;line-height:30px;letter-spacing:.4px;
  color:var(--brand);
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  opacity:0;
}
.mb-lyric-txt.in{
  -webkit-animation:mlFade .42s ease both;animation:mlFade .42s ease both;
}
@-webkit-keyframes mlFade{from{opacity:0;-webkit-transform:translateY(4px)}to{opacity:1;-webkit-transform:none}}
@keyframes mlFade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* ---------- 移动端 ---------- */
@media screen and (max-width:640px){
  .ml-head{height:54px;padding:0 14px}
  .ml-head-title{font-size:14px}
  .ml-line{font-size:17px;padding:8px 8%}
  .ml-line.on{font-size:20px}
  .ml-foot{height:44px;font-size:11px}
}

/* ---------- Trident（IE10-11 / 360 兼容模式）回退 ----------
   不支持 flex / 遮罩渐变：降级为块级布局，滚动与逐字点亮照常 */
@media screen and (min-width:0\0){
  .ml-mask{display:block;position:fixed;top:0;left:0;width:100%;height:100%}
  .ml-head{height:60px;padding:0 20px}
  .ml-head-title{float:left;line-height:60px;max-width:70%}
  .ml-close{float:right;margin-top:11px}
  .ml-stage{position:absolute;top:60px;bottom:46px;left:0;width:100%;overflow:hidden}
  .ml-inner{position:absolute;top:0;left:0;width:100%;padding:40% 0}
  .ml-foot{position:absolute;bottom:0;left:0;width:100%;height:46px;line-height:46px;text-align:center}
  .ml-line{padding:9px 6%}
}