:root {
  --theme-color: #fa7298;
  --font-family: 'Times New Roman', serif;
}

/* 统一外观 */
.info-widget,
.time-widget,
.control-widget {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.18);
  box-shadow: 0 4px 20px rgba(0,0,0,0.35);
  backdrop-filter: blur(6px);
  border-radius: 12px;
  width: min(90%, 400px);
  color: var(--theme-color);
  z-index: 10;
  font-family: var(--font-family);

    /* 文字描边 */
  text-shadow:
    -1px -1px 0 #ffffff,
    1px -1px 0 #ffffff,
    -1px 1px 0 #ffffff,
    1px 1px 0 #ffffff;
}

/* 信息面板（顶部） */
.info-widget {
  top: 6vh;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.8rem;
  gap: 0.8rem;
}

.info-widget #info-cover {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
}

.info-widget .info-list {
  flex: 1;
}

.info-widget .info-list dl {
  display: flex;
  justify-content: space-between;
  font-size: 15px;
  margin: 3px 0;
}

/* 时间面板（中部） */
.time-widget {
  top: calc(6vh + 120px);
  width: min(70%, 300px);
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-family);
  font-size: 26px;
}

/* 控制按钮组（底部 ✅） */
.control-widget {
  bottom: 4vh; /* ✅ 下移到底部 */
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  text-shadow: none;
}

.control-widget .control-btn {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.35);
  transition: transform 0.3s ease-out;
}

.control-widget .control-btn:hover {
  transform: scale(1.15);
}

.control-widget .control-btn i {
  font-size: 28px;
  color: var(--theme-color);
}

.control-widget .control-btn.animation {
  animation: zoom 3.5s linear infinite;
}

@keyframes zoom {
  0% { transform: scale(1.0) translateZ(0); }
  60% { transform: scale(1.2) translateZ(0); }
  100% { transform: scale(1.0) translateZ(0); }
}

/* ✅ 移动端优化：按钮更大、靠底，避免与歌词重叠 */
@media (max-width: 600px) {
  .info-widget { top: 3vh; }
  .time-widget { top: calc(3vh + 110px); }
  .control-widget {
    bottom: 2vh;    /* ✅ 真正贴底 */
    gap: 18px;
  }
  .control-widget .control-btn {
    width: 70px;
    height: 70px;
  }
  .control-widget .control-btn i {
    font-size: 32px;
  }
}