/* ==========================================================================
   网易云音乐外链播放器（居中展示）
   依赖：index.html 中 .landing-music / .music-stage 结构 + static/js/music-player.js
   ========================================================================== */

.landing-music{
  position:absolute;
  top:188px;
  left:0;
  width:100%;
  height:0;
  display:flex;
  justify-content:center;
  pointer-events:none;
  z-index:9;
}

.music-stage{
  position:relative;
  width:min(560px,100%);
  height:0;
}

/* ---------- 播放器主体：胶囊玻璃质感 ---------- */
.music-player{
  position:relative;
  pointer-events:auto;
  display:flex;
  align-items:center;
  gap:11px;
  width:100%;
  height:68px;
  padding:9px 14px 10px 10px;
  border-radius:999px;
  border:1px solid rgba(126,169,255,.2);
  background:linear-gradient(180deg,rgba(24,35,63,.86),rgba(11,17,35,.94));
  box-shadow:0 20px 54px rgba(3,8,22,.58),inset 0 1px 0 rgba(255,255,255,.08);
  -webkit-backdrop-filter:blur(28px) saturate(155%);
  backdrop-filter:blur(28px) saturate(155%);
  overflow:hidden;
  isolation:isolate;
  transition:box-shadow .35s ease,border-color .35s ease;
}
.music-player:hover{
  border-color:rgba(140,180,255,.34);
  box-shadow:0 24px 64px rgba(3,8,22,.64),inset 0 1px 0 rgba(255,255,255,.1);
}
.music-player.is-playing{
  border-color:rgba(120,168,255,.42);
  box-shadow:0 22px 60px rgba(3,8,22,.62),0 0 0 1px rgba(96,150,255,.16),0 0 46px rgba(80,130,255,.18),inset 0 1px 0 rgba(255,255,255,.1);
}
.music-player>*:not(.music-eq){position:relative;z-index:1}

/* ---------- 均衡器音律（贴底、播放时跳动） ---------- */
.music-eq{
  position:absolute;
  inset:auto 0 -1px 0;
  height:32px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:2px;
  padding:0 16px;
  z-index:0;
  opacity:.42;
  pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 72%);
  mask-image:linear-gradient(180deg,transparent,#000 72%);
  transition:opacity .35s ease;
}
.music-player.is-playing .music-eq{opacity:.7}
.music-eq i{
  flex:1 1 auto;
  min-width:1px;
  height:4px;
  border-radius:2px;
  background:linear-gradient(180deg,var(--cyan,#59d7ff),var(--blue,#4c91ff) 60%,rgba(76,145,255,.35));
  transform-origin:bottom center;
  transition:height .3s ease;
}
.music-player.is-playing .music-eq i{
  animation:eqPulse var(--eq-d,.85s) ease-in-out infinite alternate;
  animation-delay:var(--eq-delay,0s);
}

/* ---------- 封面 ---------- */
.music-cover{
  flex:0 0 46px;
  width:46px;
  height:46px;
  border-radius:50%;
  display:grid;
  place-items:center;
  overflow:hidden;
  font-size:18px;
  color:#eaf3ff;
  background:linear-gradient(145deg,rgba(76,145,255,.5),rgba(134,103,255,.42));
  border:1px solid rgba(150,190,255,.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 6px 18px rgba(6,14,34,.4);
}
.music-cover img{width:100%;height:100%;object-fit:cover}
.music-player.is-playing .music-cover{animation:coverSpin 9s linear infinite}

/* ---------- 歌曲信息 ---------- */
.music-meta{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
}
.music-title{
  font-size:13px;
  font-weight:600;
  line-height:1.25;
  color:#f2f7ff;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.music-artist{
  font-size:11px;
  line-height:1.2;
  color:#8fa4c8;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.music-time{
  font-size:10px;
  color:#6c81a8;
  font-variant-numeric:tabular-nums;
  letter-spacing:.04em;
}
.music-info-row{display:flex;align-items:center;gap:8px;min-width:0}
.music-info-row .music-artist{flex:1 1 auto;min-width:0}

/* ---------- 进度条 ---------- */
.music-progress{
  position:absolute;
  left:34px;
  right:34px;
  bottom:5px;
  height:3px;
  border-radius:999px;
  background:rgba(140,175,235,.16);
  cursor:pointer;
  pointer-events:auto;
  overflow:hidden;
}
.music-progress:hover{height:5px;background:rgba(140,175,235,.24)}
.music-progress i{
  display:block;
  width:0;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,var(--cyan,#59d7ff),var(--blue,#4c91ff));
  box-shadow:0 0 12px rgba(88,150,255,.55);
  transition:width .12s linear;
}
.music-progress.is-seeking i{transition:none}

/* ---------- 控制按钮 ---------- */
.music-controls{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:3px;
}
.music-btn{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border:0;
  border-radius:50%;
  background:transparent;
  color:#a7bbdd;
  cursor:pointer;
  transition:color .18s ease,background .18s ease,transform .18s ease;
}
.music-btn svg{width:17px;height:17px}
.music-btn:hover{color:#eaf3ff;background:rgba(96,140,222,.18)}
.music-btn:active{transform:scale(.92)}
.music-play{
  width:44px;
  height:44px;
  color:#0a1222;
  background:linear-gradient(145deg,#8fc2ff,#5d8cff 55%,#8a6cff);
  box-shadow:0 8px 22px rgba(76,126,255,.4),inset 0 1px 0 rgba(255,255,255,.5);
  position:relative;
}
.music-play svg{width:19px;height:19px}
.music-play:hover{color:#0a1222;background:linear-gradient(145deg,#a3cfff,#6f9bff 55%,#9b81ff);transform:translateY(-1px)}
.music-player.is-playing .music-play:after{
  content:"";
  position:absolute;
  inset:-5px;
  border-radius:50%;
  border:1px solid rgba(130,175,255,.5);
  animation:playRing 1.8s ease-out infinite;
}
.music-player.is-buffering .music-play svg{animation:spin 1s linear infinite}

/* 自动播放被浏览器拦下时，播放按钮做呼吸提示（用户点一下即开始播放） */
.music-player.needs-gesture .music-play{animation:playHintPulse 2s ease-in-out infinite}
.music-player.needs-gesture .music-play:after{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:50%;
  border:1px solid rgba(140,180,255,.55);
  animation:playHintRing 2s ease-out infinite;
}

/* ---------- 歌单面板 ---------- */
/* 面板打开时抬高整块播放器的层级，避免被搜索框（z-index 12）盖住 */
.landing-music.is-panel-open{z-index:32}
.music-panel{
  position:absolute;
  left:50%;
  right:auto;
  bottom:calc(100% + 12px);
  transform:translateX(-50%);
  /* 宽度由 JS 设为「播放器宽度」与「搜索框宽度」的较大值（--music-panel-w），
     这样桌面端能完整盖住搜索框，而不会露出两截边角 */
  width:var(--music-panel-w,100%);
  max-height:min(48vh,340px);
  overflow:auto;
  padding:0;
  border-radius:20px;
  border:1px solid rgba(126,169,255,.2);
  background:linear-gradient(180deg,rgba(20,30,55,.95),rgba(10,16,32,.97));
  box-shadow:0 26px 64px rgba(3,8,22,.66);
  -webkit-backdrop-filter:blur(26px) saturate(150%);
  backdrop-filter:blur(26px) saturate(150%);
  pointer-events:auto;
  scrollbar-width:thin;
  overscroll-behavior:contain;
}
.music-panel-head{
  position:sticky;
  top:0;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:11px 14px 9px;
  border-radius:19px 19px 0 0;
  background:linear-gradient(180deg,#151f38 62%,rgba(21,31,56,.86));
  box-shadow:0 1px 0 rgba(126,169,255,.12);
  font-size:11px;
  letter-spacing:.14em;
  color:#7d92b8;
  text-transform:uppercase;
}
#musicPanelList{padding:8px 10px 10px}
/* 宽屏下歌单排成两列，13 首左右可一屏看全 */
@media (min-width:760px){
  #musicPanelList{display:grid;grid-template-columns:1fr 1fr;gap:2px 10px}
  #musicPanelList .music-item{padding:5px 10px}
  .music-panel{max-height:min(50vh,360px)}
}
.music-panel-head b{color:#cfdcf5;font-weight:600;letter-spacing:.06em}
.music-panel-head>span{display:flex;align-items:center;gap:8px}
.music-panel-count{color:#7d92b8;letter-spacing:.08em}
.music-panel-link{
  padding:2px 8px;
  border:1px solid rgba(111,155,246,.22);
  border-radius:999px;
  background:rgba(46,84,171,.16);
  color:#9fc0ff;
  font-size:10px;
  letter-spacing:.06em;
  text-decoration:none;
  white-space:nowrap;
  transition:border-color .2s,background .2s,color .2s,transform .2s;
}
.music-panel-link:hover{background:rgba(66,112,214,.26);border-color:rgba(137,182,255,.45);color:#d4e4ff;transform:translateY(-1px)}
.music-item{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  padding:8px 10px;
  border:0;
  border-radius:12px;
  background:transparent;
  color:#c3d2ec;
  cursor:pointer;
  text-align:left;
  font-size:12px;
  transition:background .16s ease,color .16s ease;
}
/* 歌单读取中的占位行 */
.music-item.is-empty{justify-content:center;color:#7d92b8;cursor:default}
.music-item.is-empty:hover{background:transparent;color:#7d92b8}
.music-item:hover{background:rgba(88,132,214,.16);color:#f0f6ff}
.music-item.is-active{background:linear-gradient(100deg,rgba(60,110,220,.3),rgba(110,80,210,.18));color:#f2f7ff}
.music-item-index{
  flex:0 0 20px;
  font-size:10px;
  color:#67809f;
  font-variant-numeric:tabular-nums;
  text-align:center;
}
.music-item.is-active .music-item-index{color:#8fb6f5}
.music-item-copy{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px}
.music-item-copy strong{font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.music-item-copy small{font-size:10px;color:#7f94b8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.music-item.is-playing .music-item-index:after{content:"♫";font-size:11px}
.music-item.is-playing .music-item-index{color:#9ed8ff}

/* ---------- 浮动音符 ---------- */
.music-notes{
  position:absolute;
  inset:auto 0 30px 0;
  height:0;
  z-index:2;
  pointer-events:none;
}
.music-notes i{
  position:absolute;
  bottom:0;
  font-style:normal;
  font-size:14px;
  line-height:1;
  color:#9fd0ff;
  opacity:0;
  text-shadow:0 0 12px rgba(110,165,255,.75);
  will-change:transform,opacity;
}
.music-stage.is-playing .music-notes i{
  animation:noteFloat var(--nd,5.2s) linear infinite;
  animation-delay:var(--ndl,0s);
}

/* ---------- 提示气泡 ---------- */
.music-toast{
  position:absolute;
  left:50%;
  bottom:calc(100% + 10px);
  transform:translateX(-50%) translateY(6px);
  padding:7px 14px;
  border-radius:999px;
  border:1px solid rgba(126,169,255,.24);
  background:rgba(12,20,40,.94);
  color:#cfe0ff;
  font-size:11.5px;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease,transform .25s ease;
}
.music-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- 动画 ---------- */
@keyframes eqPulse{from{height:3px}to{height:var(--eq-h,22px)}}
@keyframes noteFloat{
  0%{transform:translate3d(0,8px,0) scale(.55);opacity:0}
  12%{opacity:.95}
  55%{opacity:.7}
  100%{transform:translate3d(var(--nx,0px),-78px,0) scale(1.08) rotate(var(--nr,0deg));opacity:0}
}
@keyframes coverSpin{to{transform:rotate(360deg)}}
@keyframes playRing{0%{transform:scale(.85);opacity:.65}100%{transform:scale(1.35);opacity:0}}
@keyframes playHintPulse{
  0%,100%{box-shadow:0 8px 22px rgba(76,126,255,.4),0 0 0 0 rgba(120,170,255,.5),inset 0 1px 0 rgba(255,255,255,.5)}
  50%{box-shadow:0 8px 26px rgba(76,126,255,.52),0 0 0 7px rgba(120,170,255,0),inset 0 1px 0 rgba(255,255,255,.5)}
}
@keyframes playHintRing{0%{transform:scale(.9);opacity:.85}100%{transform:scale(1.35);opacity:0}}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- 响应式 ---------- */
/* 播放器位置： playerTop = 视口高/2 + top，而下方快捷键区 top ≈ 视口高 - 144，
   所以「不被快捷键区压住」要求 top ≤ 视口高/2 - 212。下面按这个关系分档，
   否则矮窗口（常见笔记本 1280×720 左右）快捷键区会盖住播放按钮。 */
@media (max-height:820px){
  .landing-music{top:166px}
}
@media (max-height:760px){
  .landing-music{top:136px}
}
@media (max-height:700px){
  .landing-music{top:106px}
}
@media (max-height:640px){
  .landing-music{top:76px}
}
@media (max-height:580px){
  .landing-music{top:74px}
  .music-player{height:56px}
  .music-notes{display:none}
}
@media (max-height:470px){
  .landing-music{display:none}
}
/* 手机端：首页为纵向流式布局，播放器改为文档流中的最后一项，避免与快捷键区重叠 */
@media (max-width:700px){
  .landing-music{position:relative;top:auto;left:auto;right:auto;bottom:auto;width:100%;height:auto;margin:12px auto 0}
  .music-stage{height:auto}
  .music-player{height:58px;padding:7px 10px 8px 8px;gap:8px}
  .music-cover{flex-basis:38px;width:38px;height:38px;font-size:16px}
  .music-play{width:38px;height:38px}
  .music-btn{width:31px;height:31px}
  .music-btn svg{width:16px;height:16px}
  .music-notes i{font-size:12px}
}
@media (max-width:560px){
  .music-cover{display:none}
}
@media (max-width:430px){
  .music-meta{display:none}
  .music-player{justify-content:center}
  .music-btn{width:34px;height:34px}
}
@media (prefers-reduced-motion:reduce){
  .music-player.is-playing .music-eq i,
  .music-player.is-playing .music-cover,
  .music-player.is-playing .music-play:after,
  .music-player.needs-gesture .music-play,
  .music-player.needs-gesture .music-play:after,
  .music-stage.is-playing .music-notes i{animation:none!important}
  .music-notes{display:none}
}