@charset "UTF-8";
/* ==========================================================================
 * 前台新组件：资源热榜（hotrank-*）
 *
 * 设计来源：mockups/hot-rank-design.html（已审核，取其 <style> 第二段「资源热榜」皮肤）
 * 皮肤配方：2px 墨边 + 硬投影 + 大圆角，全部复用 front/_tokens.scss 的令牌，
 *          明暗两态都跟着主题走。
 * 依赖：本表由 wp_enqueue_style('boxmoe-hotrank', …, array('boxmoe-style'), …) 加载，
 *      排在 style.css 之后，故优先级更高，无需 !important。
 * ========================================================================== */

/* 局部变量：明暗各一套（挂在 :root / html[data-bs-theme] 上，避免切到暗色卡旧色） */
:root {
  --hr-surface: var(--bs-white, #fff);
  --hr-surface-2: var(--paper-2, #fdf6f2);
  --hr-line: var(--ink);
  --hr-shadow: var(--ink);
  --hr-track: rgba(39, 39, 39, .12);
  --hr-amber: #a85f10;      /* 「热度」专用色：进度条 / 上升榜数字 / 购买动词。
                               原 #d9761a 只有 3.2:1，压白底和被白字压都不够 AA，
                               压深到 #a85f10 后两个方向都到 4.87:1，肉眼看仍是同一个橙 */
  --hr-teal: #0b7a63;
  --hr-violet: #8b3dff;
  --hr-mint: #b5f4e2;       /* 标记底色，明暗各一套 */
  --hr-cream: #ffd6a5;
  --hr-stripe: rgba(255, 255, 255, .13);  /* 页头斜纹，仅画在渐变上，明暗同值 */
}

html[data-bs-theme="dark"] {
  --hr-surface: #25232b;    /* 卡片底比页面底亮一档（2026-10-15 二轮与全局令牌同步提亮） */
  --hr-surface-2: #1e1c23;
  --hr-line: #f4f1ea;
  --hr-shadow: #000;
  --hr-track: rgba(255, 255, 255, .16);
  --hr-amber: #ffb057;
  --hr-teal: #5fd8bd;
  --hr-violet: #c9a6ff;
  /* 暗色下这两个浅底必须压暗，否则会在深底上「发白」刺眼 */
  --hr-mint: rgba(181, 244, 226, .16);
  --hr-cream: rgba(255, 214, 165, .16);
}

/* ---------- 通用卡片 ---------- */
.hotrank-card {
  border: 2px solid var(--hr-line);
  border-radius: var(--radius);
  background: var(--hr-surface);
  box-shadow: 4px 4px 0 0 var(--hr-shadow);
}

.hotrank-panel {
  padding: 18px 20px 8px;
}

/* 换档容器：它本身不产生视觉，只是个替换靶子。 */
.hotrank-slot {
  margin-top: 18px;
}

/* 换档时的半透明遮罩：请求在飞的时候压暗一下，别让人以为已经换好了 */
.hotrank-slot[data-hotrank-busy="1"] {
  opacity: .45;
  transition: opacity .15s linear;
}

/* 换档失败的一句话提示 */
.hotrank-slot-err {
  margin-bottom: 10px;
  padding: 9px 14px;
  border: 2px solid var(--coral);
  border-radius: var(--radius-pill);
  background: var(--coral-soft);
  color: var(--ink);
  font-size: var(--fs-sm);
  font-weight: 600;
}

/* 弹幕面板是最后一块，跟上面的榜单卡拉开距离（同级互不相邻，间距只能自己给），
   底部也要留足呼吸。 */
.hotrank-dm {
  margin-top: 18px;
}

.hotrank-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--coral);
  border: 1.5px solid currentColor;
  border-radius: var(--radius-pill);
  padding: 2px 9px;
  background: var(--coral-soft);
}

.hotrank-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1;
  padding: 9px 15px;
  border: 2px solid var(--hr-line);
  border-radius: var(--radius-pill);
  background: var(--hr-surface);
  color: var(--ink);
  cursor: pointer;
  box-shadow: 2px 2px 0 0 var(--hr-shadow);
  transition: all .22s var(--spring);
}

.hotrank-btn:hover {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 0 var(--hr-shadow);
}

.hotrank-btn:active {
  transform: translate(2px, 2px);
  box-shadow: none;
}

.hotrank-btn.is-primary {
  background: var(--coral);
  color: var(--bs-white);
}

html[data-bs-theme="dark"] .hotrank-btn.is-primary {
  color: #141414;
}

/* ---------- 页头 ---------- */
.hotrank-hero {
  border: 2px solid var(--hr-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--hr-surface);
  box-shadow: 6px 6px 0 0 var(--hr-shadow);
}

/* 页头彩条原来是 132px，实测整页 2068px 里它占了一截空白，
   而下面三块统计才是真内容。砍到 66px（保留斜纹质感，不至于像根细线）。 */
.hotrank-hero-banner {
  height: 66px;
  background:
    repeating-linear-gradient(135deg, var(--hr-stripe) 0 12px, transparent 12px 24px),
    linear-gradient(120deg, var(--coral), var(--violet));
}

.hotrank-hero-body {
  padding: 17px 22px 20px;
}

.hotrank-hero h2 {
  font-size: var(--fs-3xl);
  font-weight: 800;
  color: var(--ink);
  line-height: 1.25;
  margin-top: 10px;
}

/* 头部三块统计 */
.hotrank-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 16px;
}

/* 2026-10-15 二轮（业务反馈「要卡片内多列网格，不要单列多行」）：
   卡内改为两列网格 —— 左列 label + foot 说明、右列大数字（垂直居中、右对齐），
   窄屏三卡单列堆叠时每张卡内部仍是两列网格。 */
.hotrank-stat {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "label value"
    "foot  value";
  column-gap: 12px;
  row-gap: 5px;
  align-items: center;
  padding: 12px 14px;
  border: 2px solid var(--hr-line);
  border-radius: var(--radius-sm);
  background: var(--hr-surface-2);
  overflow: hidden;
}

.hotrank-stat::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--st-accent, var(--coral));
}

.hotrank-stat-label {
  grid-area: label;
  font-size: var(--fs-2xs);
  color: var(--ink-3);
  display: flex;
  align-items: center;
  gap: 5px;
}

.hotrank-stat-value {
  grid-area: value;
  margin: 0;
  font-size: var(--fs-2xl);
  font-weight: 800;
  color: var(--ink);
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.hotrank-stat-value .u {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-3);
  margin-left: 3px;
}

.hotrank-stat-foot {
  grid-area: foot;
  margin: 0;
  font-size: var(--fs-2xs);
  color: var(--ink-3);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* 2026-10-15：foot 里的图标此前无尺寸样式，内联 SVG 被按默认拉伸成异常大块；统一 12px */
.hotrank-stat-foot svg {
  width: 12px;
  height: 12px;
  flex: none;
}

/* ---------- 一级 tab：内容类型（下载榜 / 讨论榜） ----------
   放在页面最上面，跟页面大标题同级。之所以不跟「今日/本周」挤在一个条里：
   那两个是不同的维度——一个是「看哪类榜」，一个是「看哪个时间范围」，
   平铺在一起会让人以为「讨论榜」也是一种时间范围。
   两个按钮左右均分、居中：只有两档时平分比并排更稳，后面再加档位也不会歪。 */
.hotrank-kinds {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.hotrank-kinds button {
  flex: 1 1 0;
  min-width: 0;
  font: inherit;
  font-size: var(--fs-lg);
  font-weight: 800;
  line-height: 1.3;
  padding: 12px 8px;
  border: 2px solid var(--hr-line);
  border-radius: var(--radius-xs);
  background: var(--hr-surface);
  color: var(--ink-3);
  cursor: pointer;
  box-shadow: 3px 3px 0 0 var(--hr-shadow);
  transition: color .2s var(--ease), border-color .2s var(--ease),
              background .2s var(--ease), transform .12s var(--ease);
}

.hotrank-kinds button:hover {
  color: var(--ink);
  border-color: var(--ink-3);
}

.hotrank-kinds button:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 0 var(--hr-shadow);
}

/* 选中态：填珊瑚色，字反白——比单纯加下划线更容易一眼看出当前在看哪类榜 */
.hotrank-kinds button[aria-selected="true"] {
  color: #fff;
  background: var(--coral);
  border-color: var(--coral);
  box-shadow: 3px 3px 0 0 var(--hr-shadow);
}

html[data-bs-theme="dark"] .hotrank-kinds button[aria-selected="true"] {
  color: #141414;
}

/* 窄屏下两级 tab 都塞得下，但字要小一号才不至于挤到换行 */
@media (max-width: 575px) {
  .hotrank-kinds {
    gap: 8px;
  }
  .hotrank-kinds button {
    font-size: var(--fs-md);
    padding: 10px 4px;
  }
}

/* ---------- 二级 tab：时间范围（今日 / 本周 / 本月 / 总榜） ---------- */
.hotrank-tabs {
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  border: 2px solid var(--hr-line);
  border-radius: var(--radius-pill);
  background: var(--hr-surface);
  box-shadow: 2px 2px 0 0 var(--hr-shadow);
  flex-wrap: wrap;   /* 窄屏必须能换行，否则最后一档被挤出可视区 */
}

.hotrank-tabs button {
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1;
  padding: 7px 14px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  transition: all .2s var(--ease);
}

.hotrank-tabs button:hover {
  color: var(--ink);
  background: var(--hr-surface-2);
}

.hotrank-tabs button[aria-selected="true"] {
  background: var(--ink);
  color: var(--hr-surface);
}

html[data-bs-theme="dark"] .hotrank-tabs button[aria-selected="true"] {
  color: #141414;
}

/* ---------- 榜单行 ---------- */
.hotrank-panel-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 13px;
}

/* 档位条那块头部：只有标题 + 档位 + 快照提示，不需要 .hotrank-panel 的重留白，
   之前是行内 style 硬凑的，改成类名才好维护。 */
.hotrank-range-bar {
  padding: 14px 20px;
  margin-top: 18px;
}

.hotrank-range-bar .hotrank-panel-head {
  margin-bottom: 0;
}

.hotrank-panel-title {
  font-size: var(--fs-xl);
  font-weight: 800;
  color: var(--ink);
  line-height: 1.3;
  display: flex;
  align-items: center;
  gap: 9px;
}

.hotrank-panel-title::before {
  content: "";
  width: 4px;
  height: 19px;
  border-radius: 2px;
  background: var(--hr-line);
  flex: none;
}

.hotrank-panel-hint {
  margin-left: auto;
  font-size: var(--fs-xs);
  color: var(--ink-3);
}

.hotrank-list {
  border-top: 2px solid var(--hr-line);
}

/* 榜单行：单行紧凑排版。
   原来是「缩略图 + 标题 + meta」三段竖排，行高被撑到 71px，50 条就 3550px。
   现在去掉行内缩略图、meta 并进右侧数字区，一行只留「名次 + 标题 + 数字 + 热度条」，
   行高降到 42px 上下，页面短了一半多。 */
.hotrank-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 4px;
  min-height: 42px;
  border-bottom: 1.5px solid var(--hr-track);
  transition: background .18s var(--ease);
  color: var(--ink);
}

.hotrank-row:hover {
  background: var(--hr-surface-2);
}

/* 排名徽章：前三名用实底 + 硬投影，其余用描边（用 .is-top-1/2/3 显式标注，
   不用 :nth-child —— 一旦榜单支持分页/插入空位，位置选择器就会错位） */
.hotrank-no {
  flex: none;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  font-size: var(--fs-xs);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  border: 2px solid var(--hr-line);
  background: var(--hr-surface);
  color: var(--ink-3);
}

.hotrank-no.is-top-1 {
  background: var(--coral);
  color: var(--bs-white);
  border-color: var(--coral);
  box-shadow: 2px 2px 0 0 var(--hr-shadow);
}

.hotrank-no.is-top-2 {
  background: var(--hr-amber);
  color: var(--bs-white);
  border-color: var(--hr-amber);
  box-shadow: 2px 2px 0 0 var(--hr-shadow);
}

.hotrank-no.is-top-3 {
  background: var(--hr-violet);
  color: var(--bs-white);
  border-color: var(--hr-violet);
  box-shadow: 2px 2px 0 0 var(--hr-shadow);
}

html[data-bs-theme="dark"] .hotrank-no.is-top-1,
html[data-bs-theme="dark"] .hotrank-no.is-top-2,
html[data-bs-theme="dark"] .hotrank-no.is-top-3 {
  color: #141414;
}

.hotrank-main {
  flex: 1;
  min-width: 0;
}

/* 收藏 / 点赞：排在标题下面一行，跟标题一起构成「这条资源怎么样」的信息组。
   主榜每行都输出（没数据就是 0，数字始终可见），侧栏迷你榜有才输出。 */
.hotrank-socials {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 1px;
  font-size: var(--fs-2xs);
  font-weight: 600;
  line-height: 1.4;
}

.hotrank-social {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.hotrank-social svg {
  width: 12px;
  height: 12px;
  flex: none;
}

/* 收藏（星）琥珀、点赞（心）紫。图标颜色挂各自的类上——
   不能用 :first-child / :last-child：同一行里两个都是 .hotrank-social，
   最后一个会同时命中 first 和 last，两种颜色叠在一起只剩一个。 */
.hotrank-social.is-fav svg {
  color: var(--hr-amber);
}

.hotrank-social.is-like svg {
  color: var(--hr-violet);
}

html[data-bs-theme="dark"] .hotrank-social.is-fav svg {
  color: #ffc94d;
}

html[data-bs-theme="dark"] .hotrank-social.is-like svg {
  color: #c4a2ff;
}

/* 标题单行、过长截断。加 min-width:0 是必需的——flex 子项默认不肯缩到内容宽度以下，
   不加的话长标题会把右侧数字区顶出容器（这是单行布局最容易踩的坑）。 */
.hotrank-name {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.4;
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.hotrank-name a {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 标记（VIP / 上升 / 新入榜）不能被长标题挤掉，固定不被压缩 */
.hotrank-name .hotrank-flag {
  flex: none;
}

/* 主题给全局 a 加了链接色（theme.min.css 的 a{color:rgba(var(--bs-link-color-rgb)...)}），
   这条直接命中 a 元素本身，会盖过从 .hotrank-name 继承来的文字色，
   于是暗色下榜单标题变成深灰压深底、整行看不见。
   这里直接写死 var(--ink) 并加上 .hotrank-page 前缀提高特异性，
   不依赖继承、也不怕别处的 a 规则再来覆盖——明暗两态都由 --ink 接管，
   暗色下 --ink 会翻成白色，自动正确。 */
.hotrank-page .hotrank-name a,
.hotrank-page .hotrank-dm-item,
.hotrank-page .hotrank-mini .hotrank-name a {
  color: var(--ink);
  text-decoration: none;
}

.hotrank-page .hotrank-name a:hover,
.hotrank-page .hotrank-dm-item:hover {
  color: var(--coral);
}

/* 名次标记 */
.hotrank-flag {
  font-size: var(--fs-2xs);
  font-weight: 800;
  line-height: 1.6;
  padding: 1px 7px;
  border-radius: var(--radius-pill);
}

.hotrank-flag.is-new {
  background: var(--coral-soft);
  color: var(--coral-ink);
  border: 1.5px solid currentColor;
}

.hotrank-flag.is-up {
  background: var(--hr-track);
  color: var(--hr-teal);
  border: 1.5px solid currentColor;
}

.hotrank-flag.is-vip {
  background: var(--hr-mint);
  color: var(--hr-teal);
  border: 1.5px solid currentColor;
}

/* 上升榜的「新晋黑馬」：前一天为 0 的新资源，不参与除法，单独给个提示位。
   暗色下 --hr-surface-2 本身已是深色底（约 #161519），若照其它实底的规矩压 #141414，
   文字会变成「深字压深底」（实测约 1.0:1，等于看不见），所以这里一律用亮侧的紫色。 */
.hotrank-flag.is-dark {
  background: var(--hr-surface-2);
  color: var(--hr-violet);
  border: 1.5px solid currentColor;
}

.hotrank-flag.is-free {
  background: var(--hr-cream);
  color: var(--hr-amber);
  border: 1.5px solid currentColor;
}

/* 暗色下 --hr-mint / --hr-cream 已压成深色半透明底（不是浅底），
   照设计稿压 #141414 同样是「深字压深底」，所以这两处改回亮侧的强调色。
   实测：is-vip 6.4:1、is-free 6.3:1，均过 AA。 */
html[data-bs-theme="dark"] .hotrank-flag.is-vip {
  color: var(--hr-teal);
}

html[data-bs-theme="dark"] .hotrank-flag.is-free {
  color: var(--hr-amber);
}

/* 右侧数字区：数字在上、细热度条在下，固定宽度不参与伸缩。
   数字放到热度条上面（原来是热度条在上、数字在下），是因为单行布局里
   「先看到数字、再看到条」比反过来更好读，条退成辅助信息。 */
.hotrank-bar {
  position: relative;
  width: 104px;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
}

.hotrank-bar-track {
  width: 100%;
  height: 6px;
  border: 1.5px solid var(--hr-line);
  border-radius: var(--radius-pill);
  background: var(--hr-surface-2);
  overflow: hidden;
}

.hotrank-bar-track i {
  display: block;
  height: 100%;
  background: var(--coral);
}

/* 讨论榜：进度条改紫，一眼和下载榜分开 */
.hotrank-row.is-talk .hotrank-bar-track i {
  background: var(--hr-violet);
}

/* 上升榜：进度条与数字用暖色（涨），名次徽章保持珊瑚色不跟着换 */
.hotrank-row.is-rise .hotrank-bar-track i {
  background: var(--hr-amber);
}

.hotrank-row.is-rise .hotrank-bar-num b {
  color: var(--hr-amber);
}

/* 人气榜：进度条与分数用紫色，跟「下载量」这个语义彻底分开，
   让人一眼看出这一档排的不是下载次数 */
.hotrank-row.is-pop .hotrank-bar-track i {
  background: var(--hr-violet);
}

.hotrank-row.is-pop .hotrank-bar-num b {
  color: var(--hr-violet);
}

/* 上升榜里第二、三名换回珊瑚色：琥珀色已经被这一档的进度条和数字占用了，
   徽章再跟着变暖会跟数字糊成一片 */
.hotrank-row.is-rise .hotrank-no.is-top-2,
.hotrank-row.is-rise .hotrank-no.is-top-3 {
  background: var(--coral);
  border-color: var(--coral);
}

.hotrank-bar-num {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 3px;
}

.hotrank-bar-num b {
  font-size: var(--fs-md);
  font-weight: 800;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.hotrank-bar-num span {
  font-size: var(--fs-2xs);
  color: var(--ink-3);
}

.hotrank-bar-num em {
  font-style: normal;
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--hr-teal);
}

/* 榜单底部「查看完整榜单」按钮的容器 */
.hotrank-inline {
  padding: 13px 2px 15px;
  text-align: center;
}

/* ---------- 下载弹幕 ---------- */
.hotrank-dm {
  overflow: hidden;
  /*纵向滚动容器按「三条」算高度：单条高度 + 间距，窄屏断点里直接引用这两个变量 */
  --hr-dm-item-h: 42px;
  --hr-dm-gap: 6px;
}

/* 2026-10-15 收官二轮：弹幕拆「静止窗口(lane) + 滚动轨道(track)」两层——
   轨道做 transform 动画，窗口用 overflow:hidden 罩住；
   窄屏纵向滚动时窗口固定不动、条目一移出窗口即被裁，从根本上不盖面板标题。 */
.hotrank-dm-lane {
  display: flex;
  width: 100%;
  overflow: hidden;
  padding: 5px 0;
}

.hotrank-dm-track {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: max-content;
  flex: none;
  /* 横滚速度 2026-10-15 提速一倍（原 92s 偏慢） */
  animation: hrdm 45s linear infinite;
}

.hotrank-dm:hover .hotrank-dm-track {
  animation-play-state: paused;
}

/* 双保险：lane 里不允许再嵌 lane——旧版 JS 曾 cloneNode 出第二根滚动轨道，
   两根轨道各自滚动叠加，造成「重叠滚动 / 悬停后越滚越快」 */
.hotrank-dm-lane .hotrank-dm-lane {
  display: none;
}

@keyframes hrdm {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* 窄屏纵向循环：整组条目向上平移一半，正好接上第二份副本 */
@keyframes hrdm-v {
  from { transform: translateY(0); }
  to { transform: translateY(-50%); }
}

.hotrank-dm-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  padding: 7px 13px 7px 8px;
  border: 2px solid var(--hr-line);
  border-radius: var(--radius-pill);
  background: var(--hr-surface);
  box-shadow: 2px 2px 0 0 var(--hr-shadow);
  text-decoration: none;
  color: inherit;
}

.hotrank-dm-item:hover {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 0 var(--hr-shadow);
}

.hotrank-dm-ava {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--hr-line);
  display: grid;
  place-items: center;
  font-size: var(--fs-2xs);
  font-weight: 800;
  color: var(--bs-white);
  overflow: hidden;
  background: var(--hr-ava, var(--hr-violet));
}

html[data-bs-theme="dark"] .hotrank-dm-ava {
  color: #141414;
}

.hotrank-dm-txt {
  font-size: var(--fs-sm);
  color: var(--ink-2);
  white-space: nowrap;
  line-height: 1.4;
}

.hotrank-dm-txt b {
  color: var(--ink);
  font-weight: 700;
}

.hotrank-dm-txt i {
  font-style: normal;
  color: var(--ink-3);
  font-size: var(--fs-xs);
}

.hotrank-dm-verb {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-2xs);
  font-weight: 800;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--coral);
  color: var(--bs-white);
  flex: none;
}

html[data-bs-theme="dark"] .hotrank-dm-verb {
  color: #141414;
}

.hotrank-dm-verb.is-buy {
  background: var(--hr-amber);
}

/* 弹幕面板上的「实时」提示 */
.hotrank-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--hr-teal);
}

.hotrank-live i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--hr-teal);
  animation: hrpulse 1.8s var(--ease) infinite;
}

@keyframes hrpulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .3; transform: scale(.82); }
}

/* ---------- 空态 / 降级提示 ---------- */
.hotrank-empty {
  padding: 30px 20px;
  text-align: center;
}

.hotrank-empty-ico {
  width: 58px;
  height: 58px;
  margin: 0 auto 12px;
  display: grid;
  place-items: center;
  border: 2px solid var(--hr-line);
  border-radius: 50%;
  background: var(--hr-surface-2);
  color: var(--ink-3);
}

.hotrank-empty-ico svg {
  width: 26px;
  height: 26px;
}

.hotrank-empty h4 {
  font-size: var(--fs-lg);
  font-weight: 800;
  color: var(--ink);
}

.hotrank-empty p {
  margin: 6px 0 0;
  font-size: var(--fs-sm);
  color: var(--ink-3);
  line-height: 1.7;
}

.hotrank-empty code {
  font-family: ui-monospace, Consolas, Menlo, monospace;
  font-size: var(--fs-xs);
  padding: 1px 5px;
  border-radius: 5px;
  background: var(--hr-surface-2);
  color: var(--ink-2);
}

/* ---------- 侧栏迷你榜（文章页侧栏 / 首页区块，Top 5 不带缩略图） ---------- */
.hotrank-mini {
  padding: 14px 16px 12px;
}

/* 迷你榜里那行「昨日共 N 次下载」和它下面的列表间距，
   原来写在 HTML 的 style 属性里，挪进样式表跟着 .hotrank-mini 走 */
.hotrank-mini > .hotrank-panel-hint {
  margin: 6px 0 0;
}

.hotrank-mini > .hotrank-list {
  margin-top: 11px;
}

.hotrank-mini-num {
  font-size: var(--fs-sm);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  flex: none;
}

/* 侧栏迷你榜复用了主榜的行，行高本来就紧凑，这里只微调留白 */
.hotrank-mini .hotrank-row {
  padding: 6px 2px;
  min-height: 0;
}

.hotrank-mini .hotrank-btn {
  width: 100%;
  justify-content: center;
  margin-top: 11px;
}

/* ---------- 窄屏 ---------- */
@media (max-width: 767px) {
  /* 三块统计挤成三列会各自只剩几十像素，改单列 */
  .hotrank-stats {
    grid-template-columns: 1fr;
  }

  .hotrank-no {
    width: 22px;
    height: 22px;
    font-size: var(--fs-2xs);
  }

  .hotrank-bar {
    width: 84px;
  }

  .hotrank-hero h2 {
    font-size: var(--fs-2xl);
  }
}

@media (max-width: 575px) {
  .hotrank-panel-title {
    font-size: var(--fs-lg);
  }

  .hotrank-tabs button {
    padding: 6px 10px;
  }

  /* 手机上改成纵向循环滚动：整组条目不断向上平移，走完一半高度时正好接上第二份副本。
     容器固定三条的高度：用 --hr-dm-item-h 乘 3 再加两个间距，多出来的条目被裁掉看不见。
     overflow 留 hidden 兜底：弹幕文字是 nowrap 的，靠这道裁掉超长标题，
     一旦放开成 visible，长标题会把整页横向撑破（实测能撑到 900px 宽）。 */
  /* 2026-10-15 收官修复：高度与裁剪从整卡移到 lane 自己身上——
     原先把「三条高 + overflow」压在 .hotrank-dm 整个卡上，lane 纵向滚动
     translateY(-50%) 上移时条目不裁剪、直接盖住面板标题；现在 lane 自裁。 */
  .hotrank-dm {
    overflow: hidden;
    height: auto;
  }

  /* 纵向窗口固定不动：三条高度 + 自身裁剪 */
  .hotrank-dm-lane {
    flex-direction: column;
    width: auto;
    height: calc(var(--hr-dm-item-h) * 3 + var(--hr-dm-gap) * 2);
    overflow: hidden;
  }

  .hotrank-dm-track {
    flex-direction: column;
    gap: var(--hr-dm-gap);
    width: 100%;
    min-width: 0;
    /* 纵向速度 2026-10-15 提速一倍（原 24s 偏慢） */
    animation: hrdm-v 12s linear infinite;
  }

  /* 纵向滚动时条目自己撑满一行宽、高度压成一条定高，
     这样「三条」的高度计算才准（标题截断在框内，不会把行高撑高） */
  .hotrank-dm-item {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    flex: none;
    height: var(--hr-dm-item-h);
    overflow: hidden;
  }

  /* 定高单行：标题与时间并排在一条竖线上，超长标题用省略号 */
  .hotrank-dm-txt {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
  }

  /* b 默认 inline，宽高不生效，靠外层 .hotrank-dm-txt 的 overflow 做裁剪；
     这里只保证它自己不会把行高撑起来 */
  .hotrank-dm-txt b {
    font-weight: 700;
  }

  /* 时间跟在标题后面，窄屏挤掉也不影响阅读 */
  .hotrank-dm-txt i {
    flex: none;
  }

  /* 纵向滚动靠第二份副本 (.hr-dup) 接力，必须显示；
     补足用的假条目 (.hr-pad) 是为横滚凑宽度才造的，竖排里藏掉，否则会重复刷屏 */
  .hotrank-dm .hr-pad {
    display: none;
  }
}

/* ---------- 降级：用户开了「减少动态效果」 ---------- */
@media (prefers-reduced-motion: reduce) {
  .hotrank-dm-track {
    animation: none;
  }

  /* 滚动停下来后放开高度让人看全 */
  .hotrank-dm-lane {
    height: auto;
    overflow: visible;
  }

  .hotrank-dm {
    height: auto;
  }

  .hotrank-btn {
    transition: none;
  }

  .hotrank-row {
    transition: none;
  }

  .hotrank-live i {
    animation: none;
  }
}

/* ---------- 打印：去掉硬投影与弹幕 ---------- */
@media print {
  .hotrank-card,
  .hotrank-hero,
  .hotrank-btn,
  .hotrank-no,
  .hotrank-dm-item,
  .hotrank-tabs {
    box-shadow: none;
  }

  .hotrank-dm {
    display: none;
  }
}