/* ==========================================================================
   components/ranking-board.css — 首页排行榜（纯文字）
   --------------------------------------------------------------------------
   结构：薄荷面板 + 标题条 + 名次行（徽章 / 名字+备注+彩带 / 行尾颜文字）
   视觉：Creamy Candy Brutal —— ink 硬描边 + 实心硬影 + 金/银/铜名次贴纸
   --------------------------------------------------------------------------
   ⚠️ 配色选 mint 的原因：首页上下都是橙色系面板（官号 / 价格表 / 留言板 /
      点单须知），中间夹一块薄荷绿是页面上唯一的绿色，最容易被眼睛抓住。
      金/银/铜贴纸在浅绿底上的对比也最清楚。

   ⚠️ 名次条是固定宽度的装饰条，宽度恒定，不表达任何数值。
      它只负责给每行一个"有重量"的色块，右侧留给颜文字，整行才透气。

   ⚠️ 动效只用独立属性 rotate / translate，不用 transform 复合写法，
      并且不写 forwards/both 填充 —— 否则会把卡片 hover 的抬起永久锁死
      （详见 CLAUDE 项目笔记里的 transform 陷阱）。
   ========================================================================== */

.ranking-board {
  /* 标题条用 .bar-mint（tokens.css 已有），这里只补行内节奏 */
  padding-bottom: clamp(14px, 3.5vw, 20px);
}

/* ⚠️ 标题条加深：tokens 里的 .bar-mint 用的是 mint-soft（#c6f6e4），
   跟本面板的 mint-wash 底（#effcf6）几乎一个色，标题会"陷"进面板里。
   这里换成正色 --candy-mint（#7fe3bd），与上下橙色板块的对比也更明确。 */
.ranking-board .section-bar.bar-mint {
  background: var(--candy-mint);
}

/* --------------------------------------------------------------------------
   1 · 名次列表
   -------------------------------------------------------------------------- */

.rank-board-list {
  list-style: none;
  margin: 0;
  padding: 4px 2px 0;
  display: grid;
  gap: 1px;
}

.rank-board-row {
  /* 第 4 名起的默认配色：主色粉的浅调；前三名在下面覆盖 */
  --rank-accent: var(--candy-pink-soft);
  --rank-accent-deep: #b8446c;

  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 9px 16px 9px 10px;
  border-bottom: var(--stroke-thin) dashed rgba(62, 44, 74, 0.26);
  border-radius: 14px;
  transition: background var(--t-fast, 0.18s) var(--ease-out);
}

.rank-board-row:last-child {
  border-bottom: 0;
}

.rank-board-row:hover {
  background: rgba(255, 255, 255, 0.72);
}

.rank-board-row.tier-gold {
  --rank-accent: var(--champagne);
  --rank-accent-deep: var(--champagne-deep);
}

.rank-board-row.tier-silver {
  /* 比 #dfe3ee 压深一档：原来的银在白底/浅绿底上几乎看不见 */
  --rank-accent: #c5ccdf;
  --rank-accent-deep: #8b91a8;
}

.rank-board-row.tier-bronze {
  --rank-accent: #f0c3a0;
  --rank-accent-deep: #b5764a;
}

/* --------------------------------------------------------------------------
   2 · 名次贴纸
   -------------------------------------------------------------------------- */

.rank-board-badge {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  font-family: var(--font-num, inherit);
  font-size: 20px;
  font-weight: var(--fw-blackest);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
  background: var(--rank-accent);
  border: var(--stroke-thin) solid var(--ink);
  border-radius: 11px;
  box-shadow: 2px 2px 0 0 var(--ink);
  /* 独立属性：不占 transform，行 hover 时归正 */
  rotate: -3deg;
  transition: rotate var(--t-fast, 0.18s) var(--ease-pop);
}

.rank-board-row:hover .rank-board-badge {
  rotate: 0deg;
}

/* 第一名镶一圈金边 */
.rank-board-row.tier-gold .rank-board-badge {
  outline: 2px solid var(--champagne-deep);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   3 · 名字与备注
   -------------------------------------------------------------------------- */

.rank-board-main {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.rank-board-name {
  font-size: var(--fs-base);
  font-weight: var(--fw-black);
  line-height: 1.32;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.rank-board-note {
  font-size: 13px;
  font-weight: var(--fw-normal);
  line-height: 1.4;
  color: var(--muted);
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   4 · 名次彩带（固定宽度装饰条，颜色随档位变化）
   -------------------------------------------------------------------------- */

.rank-board-meter {
  display: block;
  height: 13px;
  margin-top: 6px;
  /* 右端留一点余量，不贴着名字那列的边缘 */
  margin-right: 10px;
  background: rgba(255, 255, 255, 0.82);
  border: var(--stroke-thin) solid var(--ink);
  border-radius: 999px;
  overflow: hidden;
}

.rank-board-meter > i {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--rank-accent);
  border-radius: 999px;
  /* 右侧压一档深色 + 顶部一道奶釉高光，做出糖果管的光泽 */
  box-shadow:
    inset -2px 0 0 0 var(--rank-accent-deep),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

/* --------------------------------------------------------------------------
   5 · 行尾颜文字（替代原来的票数位）
   -------------------------------------------------------------------------- */

.rank-board-kao {
  justify-self: end;
  font-family: var(--font-kaomoji, inherit);
  font-size: 18px;
  font-weight: var(--fw-bold);
  line-height: 1;
  white-space: nowrap;
  /* 统一用 ink 降透明度：金银铜的 deep 色在浅绿底上偏淡，颜文字会看不见 */
  color: var(--ink);
  opacity: 0.68;
  /* 独立属性，不占 transform */
  rotate: -2deg;
  transition:
    rotate var(--t-fast, 0.18s) var(--ease-pop),
    opacity var(--t-fast, 0.18s) var(--ease-out);
}

.rank-board-row:hover .rank-board-kao {
  rotate: 0deg;
  opacity: 0.9;
}

/* --------------------------------------------------------------------------
   6 · 窄屏
   -------------------------------------------------------------------------- */

@media (max-width: 760px) {
  .rank-board-row {
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: 10px;
  }

  .rank-board-meter {
    height: 12px;
    margin-top: 5px;
  }

  .rank-board-kao {
    font-size: 14px;
  }
}

@media (max-width: 620px) {
  .rank-board-list {
    padding-top: 2px;
  }

  .rank-board-row {
    grid-template-columns: 32px minmax(0, 1fr) auto;
    gap: 8px;
    padding: 8px 10px 8px 4px;
  }

  .rank-board-badge {
    width: 30px;
    height: 30px;
    font-size: 17px;
    border-radius: 9px;
    box-shadow: 1.5px 1.5px 0 0 var(--ink);
  }

  .rank-board-meter {
    height: 11px;
    margin-top: 5px;
    margin-right: 0;
  }

  .rank-board-kao {
    font-size: 13px;
  }

  .rank-board-note {
    font-size: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rank-board-row,
  .rank-board-badge,
  .rank-board-kao {
    transition: none;
  }
}