/* ============================================================
   index.html 专用样式（迷你音频浮窗）
   ============================================================ */
/* ===== 迷你音频浮窗 ===== */
.mini-audio{
  position:fixed; left:0; right:0; bottom:0; z-index:9999;
  display:flex; align-items:center; gap:11px;
  width:100%; max-width:none; min-width:0;
  padding:9px 13px calc(9px + env(safe-area-inset-bottom,0px));
  background:linear-gradient(180deg,rgba(20,19,16,.97),rgba(10,9,8,.99));
  border:0;
  border-top:1px solid rgba(212,175,55,.4);
  border-radius:0;
  box-shadow:0 -8px 26px rgba(0,0,0,.62);
  backdrop-filter:blur(16px);
  transition:opacity .2s, transform .2s;
  touch-action:none;
  user-select:none;
}
.mini-audio.hide{ opacity:0; transform:translateY(100%); pointer-events:none; }

.ma-info{ flex:1; min-width:0; cursor:grab; }
.ma-info:active{ cursor:grabbing; }
.ma-title{
  font-size:12.5px; font-weight:600; color:#f0e6c8;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  margin-bottom:5px;
}
.ma-bar{
  position:relative;
  height:5px; border-radius:3px; background:rgba(255,255,255,.14);
  cursor:pointer; touch-action:none;
  margin:7px 0 5px;
  transition:height .16s;
}
.ma-bar:hover{ height:7px; }
.ma-bar.dragging{ height:7px; }
.ma-bar i{
  display:block; height:100%; width:var(--pct,0%);
  background:linear-gradient(90deg,#d4af37,#f4d77a);
  border-radius:3px; transition:width .08s linear;
  position:relative;
}
.ma-bar i::after{
  content:'';
  position:absolute; right:-5px; top:50%;
  width:11px; height:11px; margin-top:-5.5px;
  border-radius:50%; background:#f4d77a;
  box-shadow:0 0 0 2px rgba(10,8,6,.9), 0 0 8px rgba(224,185,92,.7);
  opacity:0; transition:opacity .16s;
  pointer-events:none;
}
.ma-bar:hover i::after,
.ma-bar.dragging i::after{ opacity:1; }
.ma-time{
  font-size:10.5px; color:#9c9280; margin-top:4px;
  font-variant-numeric:tabular-nums;
}
.ma-close{
  flex:0 0 auto; width:26px; height:26px; border-radius:50%;
  border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.05);
  color:#9c9280; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.ma-close svg{ width:13px; height:13px; }
.ma-close:hover{ color:#e8b4b4; border-color:rgba(232,180,180,.4); }
@media (max-width:420px){
  .mini-audio{ left:0; right:0; bottom:0; width:100%; max-width:none; padding:8px 12px calc(8px + env(safe-area-inset-bottom,0px)); }
}

/* ---- 图标显隐（替代行内 style）---- */
.ico-on  { display: block; }
.ico-off { display: none; }
/* ============================================================
   迷你浮窗播放按钮 → CD 唱片（与详情页一致）
   ============================================================ */
.ma-play{
  position:relative;
  flex:0 0 auto;
  width:40px; height:40px;
  border-radius:50%;
  border:0;
  padding:0;
  cursor:pointer;
  background:transparent;
  display:flex; align-items:center; justify-content:center;
  transition:transform .18s;
}
.ma-play:hover{ transform:scale(1.06); }
.ma-play:active{ transform:scale(.95); }

/* CD 唱片本体（封面图）*/
.ma-disc{
  position:absolute; inset:0;
  border-radius:50%;
  background-size:cover;
  background-position:center;
  background-image:url('../images/disc-1.png');   /* 默认，JS 随机覆盖 */
  box-shadow:
    0 0 0 1.5px rgba(212,175,55,.5),
    0 2px 8px rgba(0,0,0,.7),
    0 0 10px rgba(212,175,55,.2);
  will-change:transform;
}
/* 三张封面随机 */
.ma-disc.cover-1{ background-image:url('../images/disc-1.png'); }
.ma-disc.cover-2{ background-image:url('../images/disc-2.png'); }
.ma-disc.cover-3{ background-image:url('../images/disc-3.png'); }

/* 唱片旋转：动画常驻，暂停保留角度不跳变 */
.ma-play .ma-disc{
  animation:discSpin 4s linear infinite;
  animation-play-state:paused;
}
.ma-play.playing .ma-disc{
  animation-play-state:running;
}
@keyframes discSpin{
  from{ transform:rotate(0deg); }
  to  { transform:rotate(360deg); }
}

/* 中心孔（复用全局 .disc-hole 样式，这里微调）*/
.ma-disc .disc-hole{
  position:absolute;
  left:50%; top:50%;
  width:8px; height:8px;
  margin:-4px 0 0 -4px;
  border-radius:50%;
  background:#0a0806;
  box-shadow:
    inset 0 0 2px rgba(0,0,0,.95),
    0 0 0 1.5px rgba(224,185,92,.35);
}

/* 播放三角（暂停时显示）*/
.ma-ico{
  position:relative;
  z-index:3;
  display:flex; align-items:center; justify-content:center;
  opacity:1;
  transition:opacity .2s;
}
.ma-ico svg{
  width:15px; height:15px;
  color:#fff;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.95))
         drop-shadow(0 0 5px rgba(224,185,92,.6));
  margin-left:1px;
}
.ma-ico-play{ display:block !important; }
.ma-ico-pause{ display:none !important; }
.ma-play.playing .ma-ico-play{ display:none !important; }
.ma-play.playing .ma-ico-pause{ display:block !important; }

/* ---- 手机端 ---- */
@media (max-width:420px){
  .ma-play{ width:38px; height:38px; }
  .ma-ico svg{ width:14px; height:14px; }
}