/* ==========================================================
   foot-news —— 页脚最下方的「彩蛋活动进展」公告条
   ----------------------------------------------------------
   6 个页面共用：index / calc / chronicle / drops / guides / swap
   （404.html 没有页脚，不引）。

   为什么单独开一个文件，而不是写进各页内联 <style>：
     这行公告是**全站同一份内容**，改文案、改样式都只该改一个地方。
     6 个页脚 HTML 已经是逐页手写复制的了，样式再复制 6 份必然走样。
   （站点唯一的另一个共用样式表 data/borderglow.css 是专给光边用的，
     里面用 :where() 把特异性压到 0 以便各页覆盖它 —— 往里塞无关规则
     会破坏那个约定，所以另开文件。）

   ⚠️ 插入位置必须在 <footer> 里、**.foot 外面**：
     .foot 的第一个 div（版权那一行）是彩蛋二的触发区
     （见 data/easter.js 的 rkQuiz()→bind()），公告塞进 .foot 内部
     会和它抢点击区域；而且 .foot 是 flex 布局，多一个子元素还会改排版。
   ========================================================== */

.foot-news{
  margin-top:22px;
  padding-top:18px;
  border-top:1px dashed rgba(var(--rgb-1),.22);
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:10px 12px;
  font-size:var(--fs-xs);
  line-height:1.9;
}

/* 左侧的小胶囊标签 */
.foot-news .fn-tag{
  flex:0 0 auto;
  padding:3px 10px;
  border-radius:100px;
  background:rgba(var(--rgb-1),.14);
  border:1px solid rgba(var(--rgb-1),.32);
  color:var(--accent-1);
  letter-spacing:.06em;
  white-space:nowrap;
}

/* 正文；flex-basis 给足，窄屏才会自然换到标签下面一行 */
.foot-news .fn-txt{
  flex:1 1 260px;
  color:var(--text-dim);
}

.foot-news .fn-txt strong{
  color:var(--text);
  font-weight:500;
}

/* 「还剩几枚」这类计数，用点缀色点一下 */
.foot-news .fn-num{
  color:var(--accent-3);
  font-weight:500;
}

@media (max-width:520px){
  .foot-news{ margin-top:18px; padding-top:14px; }
}