/* ============================================================
   公告栏 —— 横向滚动幅
   ------------------------------------------------------------
   董事长要的：
     · 横着滚
     · 滚的是页面本身（在页面流里，往下滑会跟着走，不是悬浮）
     · 每一条能点开
     · 分四类，俱乐部下面再分暗区和三角洲

   实现要点
   ------------------------------------------------------------
     1. 无缝循环：内容复制一份，滚到 -50% 时回到 0，
        中间没有跳变。这是跑马灯的标准做法。
     2. 纯 CSS 动画，不动 JS —— 手机上也不掉帧。
     3. 鼠标移上去暂停，方便点。
     4. 尊重 prefers-reduced-motion：不想看动画的人
        看到的是一个可以直接左右滑的静态条。
   ============================================================ */

.mq {
  position: relative;                 /* 在页面流里，不是 fixed */
  overflow: hidden;
  border-top: 1px solid var(--sep);
  border-bottom: 1px solid var(--sep);
  background: linear-gradient(90deg,
              rgba(10,132,255,.055),
              rgba(255,122,69,.055) 50%,
              rgba(10,132,255,.055));
  margin-bottom: 4px;
}

/* 两头的渐隐，让文字像是从边上滑进来的 */
.mq::before, .mq::after {
  content: '';
  position: absolute; top: 0; bottom: 0; width: 54px;
  z-index: 2; pointer-events: none;
}
.mq::before { left: 0;  background: linear-gradient(90deg, var(--bg), transparent); }
.mq::after  { right: 0; background: linear-gradient(270deg, var(--bg), transparent); }

/* 左边的分类标签，固定不动 */
.mq-tag {
  position: absolute; left: 0; top: 0; bottom: 0; z-index: 3;
  display: flex; align-items: center; gap: 6px;
  padding: 0 14px 0 16px;
  background: linear-gradient(90deg, var(--bg) 62%, transparent);
  font-size: 12.5px; font-weight: 800; letter-spacing: .04em;
  color: var(--accent);
  white-space: nowrap;
}
.mq-tag .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
  animation: mqPulse 2s ease-in-out infinite;
}
@keyframes mqPulse {
  0%, 100% { opacity: 1;   transform: scale(1) }
  50%      { opacity: .45; transform: scale(.8) }
}

/* 滚动轨道 */
.mq-track {
  display: flex;
  align-items: center;
  width: max-content;
  padding: 11px 0 11px 84px;      /* 左边留出分类标签的位置 */
  animation: mqScroll var(--mq-dur, 46s) linear infinite;
  will-change: transform;
}
.mq:hover .mq-track { animation-play-state: paused; }

@keyframes mqScroll {
  from { transform: translate3d(0, 0, 0) }
  to   { transform: translate3d(-50%, 0, 0) }   /* 内容复制了一份，滚一半正好接上 */
}

/* 每一条 */
.mq-item {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 14px;
  margin-right: 10px;
  border-radius: 999px;
  border: 1px solid var(--sep);
  background: var(--surface-2);
  color: var(--label-2);
  font-size: 13px; line-height: 1.5;
  white-space: nowrap;
  text-decoration: none;
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.mq-item:hover {
  background: var(--surface-3, rgba(255,255,255,.09));
  border-color: var(--sep-strong);
  color: var(--label);
  transform: translateY(-1px);
}
.mq-item:active { transform: scale(.97); }

/* 分类配色 */
.mq-item .k {
  font-size: 11px; font-weight: 800; letter-spacing: .03em;
  padding: 1px 7px; border-radius: 5px;
}
.mq-item.c-club  .k { color:#ffb340; background:rgba(255,179,64,.15) }
.mq-item.c-game  .k { color:#4C8DFF; background:rgba(76,141,255,.15) }
.mq-item.c-site  .k { color:#34c759; background:rgba(52,199,89,.15) }
.mq-item.c-other .k { color:#bf5af2; background:rgba(191,90,242,.15) }

/* 置顶的那条加个高亮边 */
.mq-item.top {
  border-color: rgba(255,179,64,.42);
  background: rgba(255,179,64,.09);
}

/* 箭头，暗示可以点 */
.mq-item .go { opacity: .4; font-size: 11px; transition: opacity .18s, transform .18s }
.mq-item:hover .go { opacity: 1; transform: translateX(2px) }

/* ---- 手机端 ---- */
@media (max-width: 680px) {
  .mq-tag { padding: 0 10px 0 12px; font-size: 11.5px }
  .mq-tag .txt { display: none }      /* 只留圆点，省地方 */
  .mq-track { padding: 9px 0 9px 34px; animation-duration: var(--mq-dur-m, 30s) }
  .mq-item { font-size: 12px; padding: 4px 11px; margin-right: 8px }
  .mq-item .k { display: none }       /* 手机上分类标签太占地方，用左侧圆点代替 */
  .mq::before, .mq::after { width: 30px }
}

/* ---- 不想看动画的人：变成可以左右滑的静态条 ---- */
@media (prefers-reduced-motion: reduce) {
  .mq-track { animation: none; padding-left: 84px }
  .mq { overflow-x: auto; -webkit-overflow-scrolling: touch }
  .mq-tag .dot { animation: none }
}