/* 29-rank.css — 实时收听榜（主页卡片 + 全屏榜单页）
 * ────────────────────────────────────────────────────────────
 * 设计语言与天气/星座卡一致：淡色渐变底 + 同色系描边 + 16px 圆角。
 * 全屏页表头 = 悬浮毛玻璃（--glass-thin-bg + blur），列表从表头下滚过。
 * 明暗双模式全部走 01-foundation.css 的变量 + 本文件的 dark 覆写。
 */

/* ══════════════ 1. 主页卡片 ══════════════ */
.home-rank-card {
  margin: 10px var(--edge-pad) 2px var(--edge-pad);
  padding: 12px 14px 8px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(255, 45, 85, 0.09), rgba(255, 45, 85, 0.02));
  border: 1px solid rgba(255, 45, 85, 0.14);
}
.home-rank-card.is-hidden { display: none; }

.rank-card-head { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; }
/* ★ v7.4.2 整个卡片头都是「查看全部」入口（29-rank.js 会给 head 加 .is-tappable）。
   Apple Music 的区块标题整行可点，箭头只是「可深入」的视觉暗示；
   命中区从右上 32×28 的小箭头扩大到整行标题。
   ★ v7.4.3 闪烁修复：这里只声明按压的【目标值】（压暗到 .55）；
   「快进慢出」的过渡时序由 01-foundation.css 的全站按压反馈规则统一提供
   （head 带 role="button"，自动命中 [role="button"] 选择器）——
   之前瞬进瞬出，轻点一下标题文字会闪一下，现在按下立即压暗、抬起 0.3s 淡回。 */
.rank-card-head.is-tappable { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.rank-card-head.is-tappable:active { opacity: .55; }
.rank-card-title { font-size: 15px; font-weight: 700; color: var(--text-dark); }
.rank-card-online { font-size: 12px; color: var(--text-dark); opacity: .5; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ★ v7.4.1 「查看全部」只留箭头：文字已从 HTML 移除。
   箭头放大到 18px 补足视觉分量；负 margin 抵消点击区外扩，
   保证箭头右缘与卡片内容右缘（榜单行的人数）对齐。 */
.rank-card-more {
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: transparent; cursor: pointer;
  width: 32px; height: 28px; padding: 0; margin: -2px -7px -2px 0;
  border-radius: 8px;
  color: #ff2d55;
  -webkit-tap-highlight-color: transparent;
}
.rank-card-more:active { opacity: .55; }
.rank-card-more svg { width: 18px; height: 18px; }

/* 实时红点（呼吸），榜单页 LIVE 徽标复用 */
.rank-live-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #ff2d55; flex: none;
  animation: rank-pulse 1.6s ease-in-out infinite;
}
@keyframes rank-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .35; transform: scale(.72); }
}
@media (prefers-reduced-motion: reduce) {
  .rank-live-dot { animation: none; }
}

/* 卡片内 Top3 行（button 复位） */
.rank-row {
  display: flex; align-items: center; gap: 10px; width: 100%;
  border: 0; background: transparent; padding: 7px 0; margin: 0;
  text-align: left; cursor: pointer; color: inherit; font: inherit;
  -webkit-tap-highlight-color: transparent;
}
.rank-row:active { opacity: .6; }
.rank-num {
  width: 18px; flex: none; text-align: center;
  font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums;
  color: var(--text-dark); opacity: .38;
}
.rank-num.is-1 { color: #ff9500; opacity: 1; }
.rank-num.is-2 { color: #8e8e93; opacity: 1; }
.rank-num.is-3 { color: #c47b4a; opacity: 1; }
.rank-logo {
  width: 34px; height: 34px; border-radius: 9px; flex: none;
  object-fit: cover; background: rgba(120, 120, 128, 0.12);
}
.rank-logo-fallback {
  width: 34px; height: 34px; border-radius: 9px; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #ff2d55, #af52de);
}
.rank-name {
  flex: 1; min-width: 0; font-size: 14px; font-weight: 600; color: var(--text-dark);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rank-count {
  flex: none; display: inline-flex; align-items: center; gap: 5px;
  font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--text-dark);
}
.rank-count .rank-count-dot {
  width: 6px; height: 6px; border-radius: 50%; background: #34c759; flex: none;
  animation: rank-pulse 1.6s ease-in-out infinite;
}
.rank-count .rank-count-unit { font-size: 11px; font-weight: 500; opacity: .5; margin-left: -1px; }
/* 数字变化时的轻微弹跳（JS 加 .is-bump，动画结束移除） */
.rank-count.is-bump { animation: rank-bump .45s ease; }
@keyframes rank-bump { 30% { transform: scale(1.18); } }

/* 卡片空态 */
.rank-empty {
  padding: 10px 0 8px; font-size: 13px; color: var(--text-dark); opacity: .55;
}

/* ══════════════ 2. 全屏榜单页 ══════════════ */
#rank-page {
  position: fixed; inset: 0;
  /* ★ v7.4.3 z-index 940 → 110。原来的 940 卡在 tab bar(900) 之上、迷你播放器(950)
     之下 —— 于是出现了「播放器孤零零浮在底部、底栏却没了」的怪异三明治。
     Apple Music 的推入式详情页（排行榜/歌单页）是【底栏和迷你播放条都留着】的：
     页面从右滑入、从两颗玻璃胶囊【底下】穿过，胶囊恒定在顶层 —— 这也正是
     本站分类详情页(z:100)已经在用的约定。110 = 分类详情之上、tab bar(900) 之下，
     100~900 区间此前无人占用（见各文件 z-index 盘点）。
     切到别的 tab 时本页由 11a-ui-core 的「停放/还原」机制接管（v6.1 约定：
     全屏子页切 tab 不关闭、回来原样还原），29-rank.js init 里已把 #rank-page
     注册进 UI.OVERLAY_SEL。 */
  z-index: 110;
  /* ★ v7.4.2 底色 --glass-bg → --main-bg（不透明）。
     原来的 --glass-bg 是 96% 不透明的玻璃变量：主页内容会以 4% 的浓度隐约透出来，
     且没配 backdrop-filter，透出的不是"毛玻璃"而是裸露的半透明，看着像渲染瑕疵；
     深色模式下它的 rgba(28,28,30) 还与 App 纯黑页面底(--main-bg: #000)色调不符。
     Apple Music 的推入式详情页（排行榜/歌单页）底色是【完全不透明】的系统背景，
     半透明只出现在顶部导航栏 —— 即本页 sticky 表头的毛玻璃，保留不动。
     改用 --main-bg 后与同款推入页「分类详情」(10-category-detail.css) 完全同源，
     明暗模式自动跟随（浅 #f2f2f7 / 深 #000），下方的 dark 覆写块无需再管它。 */
  background: var(--main-bg);
  transform: translate3d(100%, 0, 0);
  transition: transform .32s cubic-bezier(.32, .72, .28, 1);
  display: flex; flex-direction: column;
  overscroll-behavior: contain;
}
#rank-page.show { transform: translate3d(0, 0, 0); }
/* ★ v7.4.3 停放态（切 tab 瞬间隐藏/还原，见 02-tabs.css 同名规则的长注）：
   只关外壳自身的 transform 过渡，不通配子元素。 */
#rank-page.tab-parked { transition: none !important; }

/* 滚动容器：表头 sticky 在它里面，列表从表头下滚过 → 毛玻璃透出封面颜色 */
.rank-scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }

.rank-header {
  position: sticky; top: 0; z-index: 5;
  padding: calc(env(safe-area-inset-top) + 10px) var(--edge-pad) 10px;
  background: var(--glass-thin-bg);
  backdrop-filter: saturate(180%) blur(var(--glass-thin-blur));
  -webkit-backdrop-filter: saturate(180%) blur(var(--glass-thin-blur));
  border-bottom: 0.5px solid var(--hairline);
}
.rank-header-top { display: flex; align-items: center; gap: 8px; }
.rank-back {
  width: 32px; height: 32px; border: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(120, 120, 128, 0.14); color: var(--text-dark); cursor: pointer;
  flex: none; margin-left: -4px;
}
.rank-back svg { width: 18px; height: 18px; }
.rank-title { font-size: 20px; font-weight: 800; color: var(--text-dark); flex: 1; }
.rank-live-pill {
  display: inline-flex; align-items: center; gap: 5px; flex: none;
  padding: 3px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 800; letter-spacing: .04em; color: #ff2d55;
  background: rgba(255, 45, 85, 0.12); border: 0.5px solid rgba(255, 45, 85, 0.32);
}

/* 实时 / 今日累计 分段器（玻璃 pill） */
.rank-seg { display: flex; gap: 6px; margin-top: 10px; }
.rank-seg-btn {
  border: 0; border-radius: 999px; padding: 5px 13px; cursor: pointer;
  font-size: 13px; font-weight: 600;
  background: rgba(120, 120, 128, 0.12); color: var(--text-dark);
}
.rank-seg-btn.is-active { background: rgba(255, 45, 85, 0.14); color: #ff2d55; font-weight: 700; }

/* 榜单列表 */
/* ★ v7.4.3 底部留白换公式：env(safe-area)+90px → var(--tabbar-top)+80px。
   本页降层后底栏与迷你播放器都压在列表上方，旧公式只算了安全区，
   最后几行会被两颗胶囊挡住。--tabbar-top = 胶囊顶边到屏幕底的距离（含安全区，
   01-foundation.css 的几何 token），+80px 再清掉浮在其上的迷你播放器 ——
   与分类详情页(10-category-detail.css)同一条公式，滚到底最后一行完整可见。 */
.rank-list { padding: 6px var(--edge-pad) calc(var(--tabbar-top) + 80px); }
.rank-list .rank-row { padding: 9px 0; }
.rank-list .rank-logo, .rank-list .rank-logo-fallback { width: 44px; height: 44px; border-radius: 11px; font-size: 16px; }
.rank-list .rank-name { font-size: 15px; }
.rank-list .rank-num { font-size: 15px; width: 22px; }
.rank-sub {
  display: block; font-size: 12px; font-weight: 400; color: var(--text-dark);
  opacity: .5; margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rank-trend { flex: none; width: 26px; text-align: center; font-size: 12px; font-weight: 700; }
.rank-trend.up   { color: #34c759; }
.rank-trend.down { color: #ff3b30; }
.rank-trend.flat { color: var(--text-dark); opacity: .28; }

/* ★ v7.4.2 「我正在听」改投 Apple 学派，与全站统一（缘由见 04-cards.css v6.9.13 长注：
   整名染红读起来像告警）。台名回归常规色（.rank-name 本来就是 var(--text-dark)，
   直接删掉旧的染红规则即可），改在名字前跳三根红色小竖条 ——
   与主页横滑卡片 / 收藏 / 分组列表 / 搜索结果的「正在播放」指示是同一套视觉语言。
   关键帧 nowPlayingEq 全站唯一，定义在 04-cards.css，这里只复用不重定义。 */
.rank-row.is-mine .rank-name::before {
  content: '';
  display: inline-block;
  width: 13px;
  height: 10px;
  margin-right: 5px;
  vertical-align: -1px;
  /* 与全站指示条同源用 #ff3b30（04-cards.css），不用榜单自己的 #ff2d55 ——
     「三根小竖条」是一枚全站通用的指示灯，颜色统一才认得出是同一个东西 */
  --eq-c: #ff3b30;
  background:
    linear-gradient(var(--eq-c), var(--eq-c)) 0    100% / 3px 45%  no-repeat,
    linear-gradient(var(--eq-c), var(--eq-c)) 50%  100% / 3px 100% no-repeat,
    linear-gradient(var(--eq-c), var(--eq-c)) 100% 100% / 3px 65%  no-repeat;
  animation: nowPlayingEq 1.05s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .rank-row.is-mine .rank-name::before { animation: none; }
}

/* 全屏页空态 */
.rank-page-empty {
  padding: 64px 32px; text-align: center;
  font-size: 15px; color: var(--text-dark); opacity: .6; line-height: 1.7;
}

/* ══════════════ 深色模式 ══════════════ */
@media (prefers-color-scheme: dark) {
  .home-rank-card {
    background: linear-gradient(135deg, rgba(255, 69, 88, 0.16), rgba(255, 69, 88, 0.04));
    border-color: rgba(255, 69, 88, 0.22);
  }
  .rank-logo { background: rgba(120, 120, 128, 0.24); }
  .rank-back, .rank-seg-btn { background: rgba(120, 120, 128, 0.26); }
  .rank-seg-btn.is-active { background: rgba(255, 69, 88, 0.22); }
}