/* ========== 全局配置：跑马灯样式变量（核心调节入口） ========== */
:root {
  /* 文字大小变量 */
  --normal-marquee-font-size: 20px;
  --fixed-marquee-font-size: 20px;
  --normal-marquee-mobile-size: 20px;
  --fixed-marquee-mobile-size: 20px;

  /* 速度控制变量（核心：数值越大，速度越快；默认1，建议范围0.5-3） */
  --normal-marquee-speed: 1;    /* 常规滚动字幕速度 */
  --fixed-marquee-speed: 1;     /* 底部固定滚动字幕速度 */
  --normal-marquee-mobile-speed: 1; /* 移动端常规字幕速度 */
  --fixed-marquee-mobile-speed: 1;  /* 移动端底部字幕速度 */

  /* 基础动画时长（可按需调整，与速度变量配合控制最终速度） */
  --normal-marquee-base-duration: 18s;
  --fixed-marquee-base-duration: 20s;
  --normal-marquee-mobile-base-duration: 15s;
  --fixed-marquee-mobile-base-duration: 15s;
}

/* ========== 全局基础重置（仅执行一次） ========== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  padding-bottom: 50px; /* 避免底部滚动字幕遮挡内容/倒计时 */
  font-family: "Microsoft Yahei", Arial, sans-serif;
}

/* ========== 第一段：常规滚动字幕（.title.marquee-container 专属） ========== */
.title.marquee-container {
  width: 100%;
  overflow: hidden;
  background-color: #ffefef;
  padding: 10px 0;
  border-radius: 6px;
  position: relative;
  zoom: 1;
  z-index: 1; /* 层级低于底部滚动字幕、高于普通内容 */
  margin: 10px 0; /* 与其他元素拉开间距 */
}
.title.marquee-container .marquee-content {
  white-space: nowrap;
  font-size: var(--normal-marquee-font-size); /* 使用文字大小变量 */
  color: #e53e3e;
  font-weight: 1000;
  display: inline-block;
  /* 关联速度变量：基础时长 / 速度 = 最终动画时长（速度越大，时长越短，滚动越快） */
  -webkit-animation: marquee-normal calc(var(--normal-marquee-base-duration) / var(--normal-marquee-speed)) linear infinite;
  animation: marquee-normal calc(var(--normal-marquee-base-duration) / var(--normal-marquee-speed)) linear infinite;
  padding-left: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* 常规滚动字幕动画关键帧 */
@-webkit-keyframes marquee-normal {
  0% { -webkit-transform: translateX(0); }
  100% { -webkit-transform: translateX(-100%); }
}
@keyframes marquee-normal {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

/* ========== 第二段：底部固定滚动字幕（.mq-btn.marquee-container 专属） ========== */
.mq-btn.marquee-container {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 9999; /* 最高层级，避免被遮挡 */
  width: 100%;
  overflow: hidden;
  background-color: #ff5722;
  padding: 12px 0;
  zoom: 1;
}
.mq-btn.marquee-container .marquee-content {
  white-space: nowrap;
  font-size: var(--fixed-marquee-font-size); /* 使用文字大小变量 */
  color: #ffffff;
  font-weight: 1000;
  display: inline-block;
  /* 关联速度变量：基础时长 / 速度 = 最终动画时长 */
  -webkit-animation: marquee-fixed calc(var(--fixed-marquee-base-duration) / var(--fixed-marquee-speed)) linear infinite;
  animation: marquee-fixed calc(var(--fixed-marquee-base-duration) / var(--fixed-marquee-speed)) linear infinite;
  padding-left: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* 底部滚动字幕动画关键帧 */
@-webkit-keyframes marquee-fixed {
  0% { -webkit-transform: translateX(0); }
  100% { -webkit-transform: translateX(-100%); }
}
@keyframes marquee-fixed {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

/* ========== 倒计时样式（.timeout/.show 专属） ========== */
.timeout {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: #fff1f0;
  border: 1px solid #ffccc7;
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 15px;
  color: #666;
  z-index: 10; /* 高于普通内容，低于底部滚动字幕 */
  margin: 10px 0; /* 与滚动字幕拉开间距 */
}
.timeout .show {
  font-size: 16px;
  font-weight: 700;
  color: #f5222d;
  background-color: #ffffff;
  padding: 4px 8px;
  border-radius: 4px;
  letter-spacing: 1px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* 倒计时紧急状态（可选） */
.timeout.urgent .show {
  color: #ffffff;
  background-color: #f5222d;
  animation: flash 1s linear infinite alternate;
}
@keyframes flash {
  0% { opacity: 1; }
  100% { opacity: 0.8; }
}

/* ========== 移动端适配（768px以下） ========== */
@media (max-width: 768px) {
  /* 常规滚动字幕 */
  .title.marquee-container .marquee-content {
    font-size: var(--normal-marquee-mobile-size); /* 移动端文字大小 */
    /* 移动端速度变量关联 */
    -webkit-animation-duration: calc(var(--normal-marquee-mobile-base-duration) / var(--normal-marquee-mobile-speed));
    animation-duration: calc(var(--normal-marquee-mobile-base-duration) / var(--normal-marquee-mobile-speed));
  }
  .title.marquee-container {
    padding: 8px 0;
  }
  /* 底部滚动字幕 */
  .mq-btn.marquee-container .marquee-content {
    font-size: var(--fixed-marquee-mobile-size); /* 移动端文字大小 */
    /* 移动端速度变量关联 */
    -webkit-animation-duration: calc(var(--fixed-marquee-mobile-base-duration) / var(--fixed-marquee-mobile-speed));
    animation-duration: calc(var(--fixed-marquee-mobile-base-duration) / var(--fixed-marquee-mobile-speed));
  }
  .mq-btn.marquee-container {
    padding: 10px 0;
  }
  /* 倒计时 */
  .timeout {
    font-size: 14px;
    padding: 8px 12px;
    gap: 6px;
  }
  .timeout .show {
    font-size: 15px;
    padding: 3px 6px;
  }
}