/* ============================================================
   shell.css —— 视觉 v2 壳层（2026-10-20 新首页设计稿落地）
   ------------------------------------------------------------
   定位：叠加在 tokens.css + home.css 之后的「壳与卡片」层。
   不动 home.css：抽屉、评论、评测、认证弹窗等 20+ 组件仍由它负责，
   本文件只重绘三栏壳、榜单卡、信息流、右栏模块与按钮配色。
   DOM 契约与 home.js 保持一致（#search / #theme-toggle / #topbar-avatar /
   .topbar-actions / #lang-btn / .bottom-nav / .game-row / #load-more …），
   换壳不破交互逻辑。
   ============================================================ */

/* ---------- 画布与栅格 ---------- */
/* 设计稿几何：整站一个居中的三栏网格（导航 262 / 主列 620 / 右栏 350），
   导航用 sticky 而不是 fixed——窄屏靠 --nav-w 自动收窄成图标栏，
   宽屏则跟随内容一起居中，不会出现「导航贴左、内容居中」的错位。 */
body {
  background: var(--canvas);
  transition: background var(--t-panel), color var(--t-panel);
}
.pp-app {
  display: grid;
  grid-template-columns: var(--nav-w) minmax(0, calc(var(--col-main) + var(--col-rail) + 26px));
  justify-content: center;
  align-items: start;
  gap: 0 26px;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 20px;
}
.wrap {
  max-width: none;
  margin: 0;
  padding: 0;
}
.layout {
  grid-template-columns: minmax(0, var(--col-main)) var(--col-rail);
  gap: 0 26px;
  align-items: start;
  padding: 0;
  padding-bottom: 0;
}
.main-col {
  background: var(--surface);
  border-inline: 1px solid var(--border);
  min-height: 100vh;
  padding-bottom: 48px;
}
.rail {
  position: sticky;
  top: 0;
  max-height: 100vh;
  overflow-y: auto;
  scrollbar-width: none;
  gap: 16px;
  padding: 20px 0 40px;
}
.rail::-webkit-scrollbar { display: none; }
/* 设计稿 .rgt>*{flex:0 0 auto}（index.html:252）：容器有 max-height 时，
   flex 列的子项默认 flex-shrink:1 会被压扁到刚好塞进 100vh——卡片从中间截断、
   又因为「已经缩进来了」而没有可滚的余量。必须让子项不缩，溢出交给滚动。 */
.rail > * { flex: 0 0 auto; }

/* ---------- 左侧导航 ---------- */
.pp-nav {
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 0 18px;
  overflow-y: auto;
  scrollbar-width: none;
  background: var(--canvas);
}
.pp-nav::-webkit-scrollbar { display: none; }
.pp-nav .brand {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 12px 18px;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.035em;
  color: var(--ink);
}
.pp-nav .brand:hover { text-decoration: none; }
.pp-nav .brand svg {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  flex: none;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--brand) 32%, transparent);
}
.pp-nav .brand .b2 { color: var(--brand); }
.pp-nav .brand-slogan { display: none; }

.pp-nav-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 13px;
  margin: 0 12px;
  border-radius: var(--r-pill);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  transition: background var(--t-micro);
}
.pp-nav-item:hover { background: var(--surface-2); text-decoration: none; }
.pp-nav-item .ic-w { color: var(--ink-2); }
.pp-nav-item[aria-current="page"] { font-weight: 700; }
.pp-nav-item[aria-current="page"] .ic-w { color: var(--brand-600); }
.pp-nav-item[aria-current="page"] .ic-w .ic { stroke-width: 2.3; }
/* Notifications 这一项是按钮（点开账户抽屉的 Alerts 面板），要和 <a> 版本长得一样 */
button.pp-nav-item {
  width: auto;
  background: none;
  border: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
button.pp-nav-item:focus-visible { outline: 2px solid var(--brand-600); outline-offset: -2px; }
.pp-nav-badge {
  margin-left: auto;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: var(--r-pill);
  background: var(--brand);
  color: var(--ink);
  font-size: 11px;
  font-weight: 700;
  display: grid;
  place-items: center;
  font-variant-numeric: tabular-nums;
}
.pp-cta {
  display: block;
  margin: 14px 12px 0;
  padding: 13px 18px;
  border-radius: var(--r-pill);
  background: var(--brand);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  text-align: center;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--brand) 34%, transparent);
  transition: transform var(--t-micro), background var(--t-micro), color var(--t-micro);
}
.pp-cta:hover { background: var(--brand-600); color: #fff; text-decoration: none; }
.pp-cta:active { transform: scale(.97); }
.pp-nav-foot { margin-top: auto; padding: 10px 12px 0; }

/* 主题切换 + 语言 + 账户：沿用 home.js / auth.js / i18n.js 的既有钩子 */
.pp-nav .btn-icon { border: 0; background: none; width: 40px; height: 40px; border-radius: var(--r-pill); }
.pp-nav .btn-icon:hover { background: var(--surface-2); color: var(--ink); border-color: transparent; }
/* 底部三行（账户 / 语言 / 主题）与上方 .pp-nav-item 共用同一套几何：
   左右缩进只由 .pp-nav-foot 的 padding 提供一次，行内 padding 统一 10px 13px，
   于是悬浮胶囊都是 12 → W-12，图标左边缘都在 25px。 */
/* 主题行是整行按钮（见 shell-head.html 的注释），所以要补上 button 的 UA 重置，
   和上面 button.pp-nav-item 同一套：字体继承、去边框底色、文字左对齐。
   宽度用 100%：button 即使 display:flex 也按内容收缩。 */
.pp-theme-row {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 16px;
  padding: 10px 13px;
  border: 0;
  background: none;
  border-radius: var(--r-pill);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  text-align: left;
  color: var(--ink-2);
  cursor: pointer;
}
.pp-theme-row:hover { background: var(--surface-2); color: var(--ink); }
.pp-theme-row:focus-visible { outline: 2px solid var(--brand-600); outline-offset: -2px; }
.pp-theme-label { flex: 1; text-align: left; }

.topbar-actions {
  margin-left: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: stretch;
}
.avatar-menu-wrap { position: relative; }
.pp-me {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 13px;
  border-radius: var(--r-pill);
  transition: background var(--t-micro);
}
.pp-me:hover { background: var(--surface-2); }
.pp-me-txt { min-width: 0; text-align: left; line-height: 1.25; flex: 1; }
.pp-me-txt b {
  display: block;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pp-me-txt span { display: block; font-size: 13px; color: var(--ink-3); }
.pp-signin {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--surface);
  font-size: 15px;
  font-weight: 700;
}
[data-theme="dark"] .pp-signin { background: var(--brand); color: var(--ink); }
.pp-signin:hover { opacity: .88; text-decoration: none; }
/* 未登录：主按钮 Sign in + 次按钮 Create account，两枚叠在导航底部 */
.pp-signup {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  margin-top: 6px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: none;
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
}
.pp-signup:hover { background: var(--surface-2); text-decoration: none; }
/* width:100% 是必需的：button 即使 display:flex 也按内容收缩，不给宽度就只有文字那么宽 */
.pp-nav-lang { display: flex; width: 100%; align-items: center; gap: 16px; padding: 10px 13px; border-radius: var(--r-pill); font-size: 15px; color: var(--ink-2); }
.pp-nav-lang:hover { background: var(--surface-2); color: var(--ink); }

/* ---------- 搜索：桌面在右栏（.rail-search），窄屏在顶栏抽屉（#pp-search） ---------- */

/* ---------- 移动端顶栏 + 搜索抽屉 ---------- */
.pp-mtop {
  display: none;
  position: fixed;
  inset: 0 0 auto 0;
  height: 52px;
  z-index: 51;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  background: var(--surface-blur);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--border);
}
.pp-mtop .brand { gap: 8px; font-family: var(--font-display); font-size: 21px; font-weight: 700; letter-spacing: -.03em; color: var(--ink); }
.pp-mtop .brand svg { width: 26px; height: 26px; border-radius: 8px; }
.pp-mtop .brand .b2 { color: var(--brand); }
.pp-mtop .search-toggle { display: none; }
.search.pp-search-sheet .search-toggle { display: none; }
#search-toggle { display: none; }

/* ---------- 左栏内的浮层：账户菜单 / 语言菜单 ---------- */
/* 导航从 fixed 改为居中网格里的 sticky 之后，浮层不能再用「贴视口左缘」定位：
   --pp-nav-left 复算 .pp-app（max-width 1320 / padding 20）中导航的左边缘，
   菜单仍以 position:fixed 挂在该边缘右侧——fixed 元素不受导航 overflow 裁剪。 */
:root { --pp-nav-left: calc(50% - min(640px, 50% - 20px)); }
/* 主题图标只用 .ic-w 收缩包裹，16px 宽的左边缘天然落在 25px（.pp-nav-foot 12 + 行 padding 13），
   和上面 Home / The Ladder / Language 的图标在同一条竖线上。
   原先那条「.btn-icon 收缩 + 右侧留 padding 保住可点面积」的补偿规则是给
   「小按钮 + 兄弟文字」那版结构写的——整行变成按钮后可点面积就是整行，规则已失效。 */
.pp-nav .pp-theme-row .ic-w { flex: none; }
#lang-menu {
  position: fixed;
  left: calc(var(--pp-nav-left) + var(--nav-w) + 8px);
  bottom: 84px;
  min-width: 168px;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  z-index: 9000;
}
#lang-menu button, #lang-menu a {
  display: block; width: 100%; text-align: left;
  padding: 8px 10px; border-radius: var(--r-sm); font-size: 13px; color: var(--ink);
}
#lang-menu button:hover, #lang-menu a:hover { background: var(--surface-2); text-decoration: none; }
.pp-nav .avatar-menu-wrap > .me-menu {
  position: fixed;
  top: auto;
  left: calc(var(--pp-nav-left) + var(--nav-w) + 8px);
  bottom: 132px;
  transform-origin: bottom left;
}

/* ---------- 榜单卡（.game-row 换皮，DOM 与 JS 契约不变） ---------- */
.game-list { gap: 0; margin-top: 0; }
.tab-pane { gap: 0; }
/* 列宽全部定死，标题列拿剩余空间。
   若把操作列写成 auto，auto 轨道会按 max-content 撑到 ~250px，
   minmax(0,1fr) 的标题列只剩 26px（榜单页实测）。 */
.game-row {
  grid-template-columns: 30px 46px minmax(0, 1fr) 96px 36px 180px;
  gap: 0 10px;
  padding: 13px 16px;
  background: var(--surface);
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  box-shadow: none;
  transition: background var(--t-micro);
}
.game-row:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--border);
  background: color-mix(in srgb, var(--canvas) 55%, var(--surface));
}
.game-row + .game-row { margin-top: 0; }
.game-row.rank-1,
.game-row.rank-2,
.game-row.rank-3 { box-shadow: none; }
.game-row.rank-1::before,
.game-row.rank-2::before,
.game-row.rank-3::before { display: none; }
.game-row.rank-1 {
  background: linear-gradient(180deg, var(--gold-tint), var(--surface) 78%);
  border-bottom-color: color-mix(in srgb, var(--gold) 34%, var(--border));
}
/* home.css 用 .game-row.rank-1/2/3 覆盖了列模板（大号封面），这里按同名选择器抢回紧凑列 */
.game-row.rank-1,
.game-row.rank-2,
.game-row.rank-3 {
  grid-template-columns: 30px 46px minmax(0, 1fr) 96px 36px 180px;
}
.game-row.rank-1 .rank-badge,
.game-row.rank-2 .rank-badge,
.game-row.rank-3 .rank-badge { width: auto; height: auto; font-size: 21px; }
.game-row.rank-1 .cover,
.game-row.rank-2 .cover,
.game-row.rank-3 .cover { width: 46px; height: 46px; font-size: 17px; }
.game-row.rank-1 .gr-title h3 { font-size: 15px; font-weight: 700; }
.game-row.rank-1 .gr-score b { font-size: 15px; }
.game-row.rank-1 .gr-score .ct { font-size: 11px; }

/* 中窄屏主栏变窄，定值列先瘦身，否则标题列会被压到 80px。
   下限写 640 而非 721：视口宽度可能是 720.6 这种小数，两条 media 都不命中就会退回桌面模板；
   640–720 区间由后面（文件顺序更靠后）的 ≤720 堆叠布局接管，不会冲突。 */
@media (min-width: 640px) and (max-width: 800px) {
  .game-row,
  .game-row.rank-1,
  .game-row.rank-2,
  .game-row.rank-3 {
    grid-template-columns: 26px 42px minmax(0, 1fr) 88px 34px 168px;
    gap: 0 8px;
  }
  .game-row.rank-1 .cover,
  .game-row.rank-2 .cover,
  .game-row.rank-3 .cover { width: 42px; height: 42px; }
  .gr-actions .btn { padding: 0 6px; font-size: 11.5px; }
}

.rank-badge {
  width: auto;
  height: auto;
  border-radius: 0;
  background: none !important;
  color: var(--ink-3);
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.05em;
  font-variant-numeric: tabular-nums;
  justify-content: flex-start;
}
.rank-badge.top1 { color: var(--gold); }
.rank-badge.top2,
.rank-badge.top3 { color: var(--ink-2); }
.rank-badge.top10 { background: none; color: var(--ink-3); }

.cover {
  width: 46px;
  height: 46px;
  border-radius: 26%;
  font-size: 17px;
  font-family: var(--font-display);
  box-shadow: 0 2px 8px rgba(17, 19, 24, .1);
}
.mini-cover { border-radius: 26%; }

.gr-main { gap: 2px; min-width: 0; }
/* flex 项默认 min-width:auto，长标题会把 .ellipsis 顶开溢出 11px（1240px 实测）：显式允许收缩 */
.gr-title h3 { flex: 1 1 auto; min-width: 0; font-size: 15px; font-weight: 700; line-height: 1.25; }
/* 认证徽章的统一上色口径（07 §SP-T36b）：形状来自 shell-head 的 #i-verified 精灵，
   这里只负责颜色。symbol 上故意不写 fill/stroke——两者都会继承进 <use> 的 shadow tree，
   所以各页按上下文覆盖 `color` 的规则（home.css 的 .drawer-hero、studio-page.css 的 .st-name 等）
   不必改动就能继续生效。 */
.verified {
  fill: currentColor;
  stroke: var(--surface, #fff);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
/* 深色底上描边要压暗才能看出缺口，浅色底的 --surface 在这里会糊成一片 */
.drawer-hero .verified { stroke: rgba(0, 0, 0, .25); }

.gr-title .champ-chip, .gr-title .verified { flex: none; }
.gr-sub { font-size: 13px; color: var(--ink-2); line-height: 1.4; }
.gr-meta { font-size: 11.5px; color: var(--ink-3); }
.gr-title .verified { color: var(--brand); }

.gr-stats { align-items: stretch; min-width: 0; width: auto; gap: 4px; }
.gr-score { justify-content: flex-start; gap: 4px; color: var(--brand-600); }
.gr-score b { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.gr-score .ct { font-size: 11px; }
.gr-score .ic-w { color: var(--brand); }
/* 96px 的统计列放不下「进度条 + 88% positive」并排（实测溢出 46px，压到涨跌列）：条在上、文字在下 */
.game-row .pos { display: block; min-width: 0; font-size: 10.5px; color: var(--ink-3); line-height: 1.3; }
.game-row .pos .pos-bar { display: block; width: 100%; height: 5px; margin-bottom: 3px; border-radius: var(--r-pill); background: var(--surface-2); }
.game-row .pos .pos-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--brand), var(--accent)); }
/* 详情页头卡的支持率进度条：home.css 给 .pos-bar 定了 56px，这里撑满整行 */
.gh-support .pos-bar { width: 100%; }

.change { min-width: 0; justify-content: flex-start; gap: 2px; font-size: 11px; font-weight: 700; padding: 1px 5px; border-radius: var(--r-sm); font-variant-numeric: tabular-nums; }
.change-cell { min-width: 0; }
.change-cell .change, .change-cell .new-chip, .change-cell .rel-chip { display: block; width: fit-content; max-width: 100%; overflow: hidden; white-space: nowrap; }
.change.up { color: var(--up); background: color-mix(in srgb, var(--up) 13%, transparent); }
.change.down { color: var(--down); background: color-mix(in srgb, var(--down) 12%, transparent); }
.change.flat { color: var(--ink-3); background: var(--surface-2); }
.new-chip { background: color-mix(in srgb, var(--brand) 16%, transparent); color: var(--brand-600); font-weight: 700; }
.rel-chip { background: var(--surface-2); color: var(--ink-2); }

.gr-actions { gap: 5px; min-width: 0; }
.gr-actions .btn { height: 30px; padding: 0 8px; font-size: 12px; font-weight: 700; border-radius: var(--r-pill); flex: 0 1 auto; min-width: 0; }
/* 操作列只有 148px：关注按钮收成纯图标，文字靠 aria-label / aria-pressed 表达 */
.gr-actions .btn-follow > span:not(.ic-w) { display: none; }
.gr-actions .btn-follow { padding: 0 7px; }
.btn-support { background: var(--accent-tint); border-color: transparent; color: var(--accent-ink); }
.btn-support:hover { background: color-mix(in srgb, var(--accent) 20%, var(--surface)); border-color: transparent; color: var(--accent-ink); }
.btn-support.is-on { background: var(--accent-ink); color: #fff; }
.btn-support.is-on:hover { background: var(--accent-ink); }
.btn-dislike { background: none; border-color: var(--border); color: var(--ink-3); }
.btn-dislike:hover { background: var(--surface-2); border-color: var(--border); color: var(--ink-2); }
.btn-dislike.is-on { background: var(--down-tint); border-color: transparent; color: var(--down); }
.btn-follow { background: none; border-color: var(--border-strong); color: var(--ink); }
.btn-follow.is-on { background: var(--surface-2); border-color: var(--border-strong); color: var(--ink-2); }
.btn-reserve { background: var(--brand); color: var(--ink); }
.btn-reserve.is-on { background: var(--brand-600); color: #fff; }

.btn-primary { background: var(--brand-solid); color: #fff; font-weight: 700; }
.btn-primary:hover { background: var(--brand-hover); }
.btn-ghost { color: var(--brand-600); }

/* ---------- 榜单区头（Tab 即吸顶栏） ---------- */
.tabs {
  position: sticky;
  top: 0;
  z-index: 30;
  gap: 0;
  margin-top: 0;
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  position: relative;
  flex: 0 0 auto;
  padding: 14px 18px 15px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-2);
  border-radius: 0;
}
.tab:hover { background: var(--surface-2); color: var(--ink); }
.tab.is-active { color: var(--ink); font-weight: 700; }
.tab.is-active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 8px;
  translate: -50% 0;
  width: 26px;
  height: 4px;
  border-radius: var(--r-pill);
  background: var(--brand);
}
.tabs-meta { padding-bottom: 15px; font-size: 12px; font-weight: 600; }

.pp-page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  height: 54px;
  padding: 0 18px;
  border-bottom: 1px solid var(--border);
}
.pp-page-head h1,
.pp-page-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -.03em;
}
.pp-live-hint { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: var(--ink-3); }
.pp-live-hint .ic-w { color: var(--brand-600); }
.pp-live { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--ink-2); }
.pp-live .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 55%, transparent); animation: pp-ping 2.4s var(--t-micro) infinite; }
@keyframes pp-ping { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 50%, transparent); } 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

/* ---------- 发布框（设计稿观感，DOM 契约不变） ---------- */
.composer {
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  padding: 14px 18px 10px;
  background: var(--surface);
}
.composer .avatar { width: 46px; height: 46px; font-size: 16px; font-family: var(--font-display); }
.composer-input textarea { font-size: 18px; line-height: 1.5; min-height: 52px; }
.composer-toolbar { gap: 2px; padding: 6px 0 12px; margin-top: 8px; }
.ct-icon { width: 34px; height: 34px; }
.ct-icon .ic { width: 18px; height: 18px; }
.composer-count { font-size: 13px; font-weight: 600; color: var(--ink-3); }
#composer-post {
  background: var(--accent-ink);
  color: #fff;
  border-radius: var(--r-pill);
  padding: 0 17px;
  height: 36px;
  font-weight: 700;
  box-shadow: 0 5px 14px color-mix(in srgb, var(--accent) 30%, transparent);
}
#composer-post:hover { background: var(--accent); color: #fff; }
.mention { border-radius: var(--r-lg); box-shadow: var(--shadow-card); }

/* ---------- 信息流 ---------- */
.feed { margin-top: 0; }
.feed-tabs { margin: 0; gap: 0; }
.ft-tab {
  position: relative;
  padding: 14px 18px 15px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-2);
}
.ft-tab:hover { background: var(--surface-2); }
.ft-tab.is-on { color: var(--ink); font-weight: 700; }
.ft-tab.is-on::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 8px;
  translate: -50% 0;
  width: 26px;
  height: 4px;
  border-radius: var(--r-pill);
  background: var(--brand);
  opacity: 1;
}
.post {
  padding: 14px 18px 6px;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: var(--surface);
  transition: background var(--t-micro);
}
.post + .post { margin-top: 0; }
.post:hover { background: color-mix(in srgb, var(--canvas) 55%, var(--surface)); }
.post .avatar { width: 46px; height: 46px; font-size: 16px; font-family: var(--font-display); }
.post-body { min-width: 0; }
.post-head { gap: 5px; font-size: 15px; }
.post-name { font-size: 15px; font-weight: 700; }
.post-time { font-size: 13px; }
.post-time::before { margin-right: 5px; }
.post-text { font-size: 15px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.chip-official { background: var(--brand-tint); color: var(--brand-600); font-size: 10.5px; font-weight: 700; letter-spacing: .04em; padding: 1px 6px; }
.post-actions { gap: 0; margin-top: 6px; }
.p-act { padding: 7px 8px; font-size: 13px; font-weight: 600; color: var(--ink-2); border-radius: var(--r-pill); }
.p-act:hover { background: var(--brand-tint); color: var(--brand-600); }
.p-act[data-action="like"]:hover { background: var(--accent-tint); color: var(--accent-ink); }
.p-act.is-on { color: var(--brand-600); }
.p-act[data-action="like"].is-on { color: var(--accent-ink); }
.feed-foot { padding: 0; margin: 0; }
#feed-more, #load-more {
  display: block;
  width: 100%;
  padding: 16px;
  height: auto;
  border-radius: 0;
  border-bottom: 1px solid var(--border);
  font-size: 15px;
  font-weight: 600;
  color: var(--brand-600);
}
#feed-more:hover, #load-more:hover { background: var(--surface-2); }
.load-more-wrap { margin: 0; }

/* ---------- 右栏模块卡 ---------- */
/* 右栏顶部搜索框（照搬设计稿）：搜索只在右栏，左导航不放 */
.rail-search { flex: none; max-width: none; }
.rail-search input { height: 44px; font-size: 15px; padding-left: 42px; }
.rail-search .ic-w { left: 16px; width: 18px; height: 18px; }
.rail-search:focus-within input { border-color: var(--brand); }
.rail-card {
  padding: 0;
  border-radius: 22px;
  overflow: hidden;
}
.rail-card h3 {
  padding: 14px 18px 8px;
  margin: 0;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.02em;
  display: flex;
  align-items: baseline;
  gap: 8px;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.rail-hint { font-size: 12px; font-weight: 600; color: var(--ink-3); font-family: var(--font-sans); }
.rail-more { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--brand-600); }
/* 行状内容自带 18px 缩进，容器不能再加第二层：双缩进会让 hover 灰条两侧留白，
   而且各卡缩进不一致（Who to follow 一度缩进 36px）。非行状内容的容器才需要自己缩进。 */
.rail-card > div[id]:not(:has(> .rise-item, > .studio-item, > .who-item)) { padding-inline: 18px; }
.rail-card .rise-item, .rail-card .studio-item, .rail-card .who-item { padding-inline: 18px; }
/* 算法说明卡（rank-how）：清单与脚注也是裸子元素，同走 18px 缩进；
   脚注补底部留白（rail-card 通栏无 padding，不发就贴底边） */
.rail-card .rank-how-list, .rail-card .rank-how-foot { padding-inline: 18px; }
.rail-card .rank-how-foot { padding-bottom: 14px; }
/* /me 右栏说明卡：h3 下的裸 .me-hint 段落（me-hint 在面板里有面板兜底，
   在 rail-card 里没人发缩进，必须在这里下发） */
.rail-card .me-hint { padding-inline: 18px; padding-bottom: 14px; }
/* .rail-card 的 padding 是 0（色带要通栏），所以缩进逐个落在子元素上：h3 自带 18px，
   正文卡（cta-card）的裸 <p> 与按钮此前没人管，文字直接贴住色块左边缘、按钮还压着底边。 */
.cta-card > p { padding-inline: 18px; }
.cta-card > .btn { margin-inline: 18px; }
.cta-card { padding-bottom: 14px; }
.rise-item, .studio-item {
  gap: 12px;
  padding-block: 11px;
  border-top: 1px solid transparent;
  line-height: 1.35;
}
.rail-card .rise-item:first-child,
.rail-card .studio-item:first-child { border-top: 1px solid var(--border); }
.rise-item:hover, a.studio-item:hover { background: var(--surface-2); text-decoration: none; }
.rise-name { font-size: 14.5px; font-weight: 700; }
.rise-item:hover .rise-name { color: var(--brand-600); }
.rise-pct { margin-left: auto; font-size: 12.5px; color: var(--ink-3); }
.studio-name { font-size: 14.5px; font-weight: 700; }
a.studio-item:hover .studio-name { color: var(--brand-600); }
.studio-count { margin-left: auto; font-size: 12.5px; color: var(--ink-3); }
/* 名次列：等宽数字，第一名用品牌色点一下，其余压成背景层级 */
.studio-rank { flex: none; width: 16px; text-align: center; font-family: var(--font-display); font-size: 13px; font-weight: 700; color: var(--ink-3); }
#rail-studios .studio-item:first-child .studio-rank { color: var(--brand-600); }
.rise-item .mini-cover { width: 28px; height: 28px; border-radius: 30%; font-size: 12px; }
.rise-item .mini-cover.mini-topic { background: var(--brand-tint); color: var(--brand-600); }
.rail-card > [id] > .rise-item + .rise-item { border-top: 1px solid var(--border); }

/* 右栏「Who to follow」：头像 + 昵称/计数 + Follow 按钮。
   没有复用 .rise-item，因为 home.js 把 rise-item 的点击委托成「打开游戏抽屉」，
   人不能点出游戏的抽屉。who-main 的 min-width:0 是这行不撑破右栏的关键。 */
.who-item { display: flex; align-items: center; gap: 12px; padding: 11px 18px; line-height: 1.35; }
.who-item + .who-item { border-top: 1px solid var(--border); }
.who-av { display: inline-flex; border-radius: 50%; flex: none; }
.who-av:hover .avatar { filter: brightness(0.95); }
.who-main { flex: 1; min-width: 0; }
.who-name { display: block; font-size: 14.5px; font-weight: 700; color: var(--ink); }
.who-name:hover { color: var(--brand-600); text-decoration: none; }
.who-sub { font-size: 12.5px; color: var(--ink-3); }
.rail-who .btn-follow { flex: none; }

/* Trending tags 的 Show more：卡片里的一整行幽灵按钮 */
button.rail-more {
  display: block;
  width: calc(100% - 36px);
  margin: 4px 18px 14px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: none;
  color: var(--brand-600);
  font-size: 13px;
  font-weight: 700;
}
button.rail-more:hover { background: var(--surface-2); }

/* 「Your week」：/api/user/me/weekly-report 填进来，未登录整块 hidden */
.pp-week-sum { margin: 2px 0 4px; font-size: 12.5px; color: var(--ink-2); }
.pp-week-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 7px 0;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--ink-2);
}
.pp-week-row b { flex: 1; min-width: 0; color: var(--ink); font-weight: 700; }

/* 今日投票账本（SP-T2，设计稿 .ledger）：kind 图标 + 名称/口径 + 权重标签三列。
   行自带 18px 缩进，所以 .ledger 容器不带 id（带 id 会被上面的 rail-card > div[id] 规则再加一层 18px）。
   底部 Weighted points 是通栏色带，圆角交给 .rail-card 的 overflow:hidden。 */
.ledger-row { display: flex; align-items: center; gap: 12px; padding: 11px 18px; line-height: 1.35; }
.ledger-row:first-child, .ledger-row + .ledger-row { border-top: 1px solid var(--border); }
.ledger .kind { width: 26px; height: 26px; border-radius: var(--r-sm); display: grid; place-items: center; flex: none; }
.ledger .k-support { background: var(--brand-tint); color: var(--brand-600); }
.ledger .k-oppose { background: var(--down-tint); color: var(--down); }
.ledger .k-none { background: var(--surface-2); color: var(--ink-3); }
.ledger-row .grow { flex: 1; min-width: 0; }
.ledger-row .n { font-size: 14.5px; font-weight: 700; }
.ledger-row .n a { color: var(--ink); }
.ledger-row .n a:hover { color: var(--brand-600); text-decoration: none; }
.ledger-row .v { font-size: 12.5px; color: var(--ink-3); }
.ledger-row .wtag {
  flex: none; display: inline-grid; place-items: center; min-width: 24px; height: 18px; padding: 0 6px;
  border-radius: var(--r-pill); background: var(--brand-tint); color: var(--brand-600);
  font-size: 10.5px; font-weight: 700;
}
.ledger-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 18px; border-top: 1px solid var(--border); background: var(--surface-2);
  font-size: 12.5px; color: var(--ink-2);
}
.ledger-foot b { font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--ink); }

.pp-rules { padding: 2px 18px 16px; font-size: 13px; color: var(--ink-2); line-height: 1.6; }
.pp-rules ul { padding-left: 17px; margin: 0; }
.pp-rules li { margin-bottom: 7px; }
.pp-rules b { color: var(--ink); font-weight: 600; }
.pp-rules .ic-w { color: var(--brand-600); }

.tagbar-wrap, .subscribe-row { padding-inline: 18px; }
.tagbar { margin-top: 14px; }
.subscribe-row { margin-top: 4px; }
.tagchip { font-weight: 600; }
.tagchip.is-active { background: var(--brand-tint); border-color: transparent; color: var(--brand-600); }

.rail-footer { padding: 6px 18px 0; }
.footer-links { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.footer-links a { font-size: 12px; color: var(--ink-3); }
.footer-links a:hover { color: var(--ink-2); text-decoration: underline; }
.footer-brand { margin-top: 8px; font-size: 12px; color: var(--ink-3); }

/* ---------- 内容页：主列内边距（榜单页由卡片自己控制） ---------- */
.main-col > .card:not(.composer),
.main-col > section.card { margin: 20px 18px 0; }

/* ---------- 断点 ---------- */
@media (max-width: 1180px) {
  :root {
    --nav-w: 88px;
    /* 图标栏 + 单主列（右栏隐藏）：列块宽 88 + 26 + 620 */
    --pp-nav-left: calc(50% - min(367px, 50% - 20px));
  }
  body { padding-top: 52px; }
  .pp-app { grid-template-columns: var(--nav-w) minmax(0, calc(var(--col-main) + 2px)); }
  .pp-nav { top: 52px; height: calc(100vh - 52px); }
  .pp-mtop { display: flex; }
  #search-toggle { display: inline-flex; }
  .pp-nav { align-items: stretch; padding-top: 12px; }
  .pp-nav .brand { justify-content: center; padding: 0 0 14px; }
  .pp-nav .brand-word, .pp-nav-label, .pp-me-txt, .pp-theme-label, .pp-cta { display: none; }
  .pp-nav-item { position: relative; justify-content: center; padding: 12px; margin-inline: 14px; }
  .pp-nav-badge { position: absolute; top: 4px; right: 10px; font-size: 10px; }
  /* 图标栏模式：底部三行的胶囊宽度要和 .pp-nav-item 一致（同为 14 → 74），
     所以缩进同样只交给 .pp-nav-foot（14px），行自身不再叠加 margin。 */
  .pp-nav-foot { padding-inline: 14px; }
  /* 头像 36px，纵向只留 2px：这样这枚胶囊和图标栏里其他行一样是 60×40，节奏整齐 */
  .pp-me { justify-content: center; padding: 2px; }
  /* 图标栏里两枚按钮只剩图标：收窄到与胶囊同宽，靠 title / aria-label 说明 */
  .pp-signin, .pp-signup { height: 40px; margin-inline: 0; padding: 0; }
  .pp-theme-row { justify-content: center; padding: 12px; }
  .pp-nav-lang { justify-content: center; padding: 12px; }
  .pp-cta-m {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin: 12px auto 0;
    padding: 0;
    border-radius: 50%;
    font-size: 0;
  }
  .pp-cta-m::after { content: "+"; font-size: 26px; font-weight: 600; line-height: 0; }
  /* 搜索改为顶栏抽屉 */
  .search.pp-search-sheet {
    display: block;
    position: fixed;
    inset: 52px 0 auto 0;
    z-index: 52;
    margin: 0;
    padding: 10px 14px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    transform: translateY(-120%);
    transition: transform var(--t-panel);
  }
  body.search-open .search.pp-search-sheet { transform: none; }
  .rail { display: none; }
  .layout { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 1181px) {
  .pp-cta-m { display: none; }
}
@media (max-width: 980px) {
  /* 主列随视口收窄（设计稿 980 断点：右栏已隐藏，620 定宽会溢出） */
  .pp-app { grid-template-columns: var(--nav-w) minmax(0, 1fr); }
}
@media (max-width: 767px) {
  /* 顶栏搜索抽屉里仍需搜索框；home.css 的 .topbar 规则已失效 */
  .search.pp-search-sheet { max-width: none; }
  .search.pp-search-sheet input { height: 40px; }
  .search.pp-search-sheet .ic-w { left: 26px; }
}
@media (max-width: 720px) {
  :root { --nav-w: 0px; }
  .pp-app { grid-template-columns: minmax(0, 1fr); padding: 0; }
  .pp-nav { display: none; }
  .pp-nav .avatar-menu-wrap > .me-menu, #lang-menu { display: none; }
  .main-col { border: 0; padding-bottom: 84px; }
  .wrap { padding-inline: 12px; }
  .search.pp-search-sheet { inset: 52px 0 auto 0; }
  .game-row,
  .game-row.rank-1,
  .game-row.rank-2,
  .game-row.rank-3 {
    grid-template-columns: 28px 42px minmax(0, 1fr);
    /* 每行只能有 3 个区域名：写满 6 个会凭空长出 auto 列，
       380px 下 .gr-actions 被塞进隐式列，整行溢出 200px */
    grid-template-areas:
      "rk   cv    main"
      ".    .     stats"
      "ch   acts  acts";
    gap: 6px 10px;
    padding: 12px;
  }
  .game-row .rank-badge,
  .game-row.rank-1 .rank-badge,
  .game-row.rank-2 .rank-badge,
  .game-row.rank-3 .rank-badge { grid-area: rk; width: auto; height: auto; font-size: 22px; }
  .game-row .cover,
  .game-row.rank-1 .cover,
  .game-row.rank-2 .cover,
  .game-row.rank-3 .cover { grid-area: cv; width: 42px; height: 42px; font-size: 16px; }
  .game-row .gr-main { grid-area: main; }
  .game-row .gr-stats { grid-area: stats; width: 100%; }
  /* 窄屏统计列横向排：定宽小条 + 文字并排，不需要桌面端的上下两行 */
  .game-row .pos { display: flex; align-items: center; gap: 6px; font-size: 11px; }
  .game-row .pos .pos-bar { display: inline-block; width: 42px; margin: 0; }
  .game-row .change-cell { grid-area: ch; }
  .game-row .gr-actions { grid-area: acts; justify-content: flex-end; }
  .tab { padding: 13px 14px; font-size: 14px; }
  .composer { padding: 12px 12px 8px; }
  .composer .avatar { width: 40px; height: 40px; font-size: 14px; }
  .composer-input textarea { font-size: 16px; }
  .post { padding: 12px 12px 4px; gap: 10px; }
  .post .avatar { width: 40px; height: 40px; font-size: 14px; }
  .tabs { top: 52px; }
}

/* 底部导航：沿用 shell-late.js 注入的 .bottom-nav 结构，按设计稿重绘 */
@media (max-width: 720px) {
  .bottom-nav {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    inset: auto 0 0 0;
    padding: 6px 0 max(6px, env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--border);
    border-radius: 0;
    box-shadow: none;
    gap: 0;
  }
  .bottom-nav .bn-item,
  .bottom-nav .bn-fab {
    display: grid;
    place-items: center;
    gap: 2px;
    width: auto;
    height: auto;
    padding: 6px 2px;
    min-width: 0;
    border-radius: 0;
    background: none;
    border: 0;
    box-shadow: none;
    color: var(--ink-2);
    font-size: 9.5px;
    font-weight: 600;
  }
  .bottom-nav .bn-item.is-active,
  .bottom-nav .bn-item[aria-current="page"] { color: var(--brand-600); background: none; }
  .bottom-nav .bn-item .ic-w .ic { width: 19px; height: 19px; }
  .bottom-nav .bn-item { position: relative; }
  .bottom-nav .bn-fab { color: var(--accent); }
  /* fab 这一格没有文字标签，内容盒只有 34px（其余四格 48px=图标19+间隙2+文字15），
     在 48px 的行里被居中后整格下沉，加号的图标中心比邻居低 9px。
     把行高补齐到 48px 并让内容顶对齐，图标就回到同一条中心线上；
     22px 的图标比邻居大 3px，所以上边距让掉 1.5px 差值，取 4.5px 保证中心精确对齐。 */
  .bottom-nav .bn-fab { min-height: 48px; align-content: start; padding-top: 4.5px; }
  /* 只能改尺寸，不能改 fill/stroke：图标注册表里的 plus 是两条开放线段
     （M12 5v14 / M5 12h14），靠 stroke 描边才看得见。这里一旦写
     `fill: currentColor; stroke: none`，CSS 会盖掉 <svg> 上的 fill="none"
     stroke="currentColor" 呈现属性，零面积的线段既描不出边也填不出色，
     中间这格就直接空了。其余四格（home/up/bell/user）同为描边图标，保持描边才统一。 */
  .bottom-nav .bn-fab .ic-w .ic { width: 22px; height: 22px; }
  /* 未读数贴在铃铛右上角：移动端不放数字，超过 0 就是一个点，避免 9 宫格挤爆 */
  .bn-badge {
    position: absolute;
    top: 4px;
    left: 58%;
    min-width: 8px;
    height: 8px;
    padding: 0;
    border: 2px solid var(--surface);
    border-radius: var(--r-pill);
    background: var(--accent);
    box-sizing: border-box;
  }
}

/* ---------- /me 移动端：push 式全屏页 ----------
   桌面端和 721~1180 完全不接管：这一段只在底部 tab bar 真正存在的那条 ≤720 里生效。
   形态按「App 里 push 一个新页面」做——自己的标题栏、隐藏 tab bar 与站点顶栏、内容贴边。 */
.me-appbar { display: none; }

@media (max-width: 720px) {
  .me-appbar {
    display: flex;
    position: fixed;
    top: 0; left: 0; right: 0;
    /* 54：压过 .pp-mtop(50) 与 .tabs；这一页已经把 .pp-mtop 藏了，同层也不会撞 */
    z-index: 54;
    align-items: center;
    gap: 4px;
    height: 52px;
    padding: 0 10px 0 2px;
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border);
  }
  .me-back {
    display: grid;
    place-items: center;
    /* 44×44：移动端最小可点尺寸，箭头视觉居中靠 grid 而不是 padding 凑 */
    width: 44px; height: 44px; flex: none;
    border-radius: var(--r-pill);
    color: var(--ink); text-decoration: none;
  }
  .me-back:active { background: var(--surface-2); }
  /* 图标注册表里只有右向 chev（m9 6 6 6-6 6），转 180° 就是返回箭头，不必新增一个图标 */
  .me-back .ic { transform: rotate(180deg); }
  .me-appbar-title {
    margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -.02em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  /* 顶栏那 52px 的 body padding 留着——正好是这条栏的高度，页签的 sticky 偏移也用它对齐 */
  body:has(.me-page) { padding-bottom: 0; }
  body:has(.me-page) .pp-mtop,
  body:has(.me-page) .bottom-nav { display: none; }
  /* .main-col 的 84px 是给 tab bar 让位的；这一页没有 tab bar，收回成正常留白 */
  .me-page .main-col { padding-bottom: 24px; }
  /* 全出血：栅格外边距归零，卡片贴边，圆角与左右描边去掉后由横向分隔线分组。
     注意 .wrap 和 .me-page 是同一个元素（<div class="layout wrap me-page">），
     写成后代选择器匹配不到，必须用复合选择器；两条 .wrap 的窄屏规则各 0,1,0，
     这里 0,2,0 才压得住。 */
  .layout.me-page { padding-inline: 0; }
  .me-page .main-col > .card:not(.composer),
  .me-page .main-col > section.card { margin: 0; border-inline: 0; border-radius: 0; }
  /* 贴边之后，行内留白改由面板自己承担（分隔线随之内缩，就是设置页那种分组） */
  .me-page .me-panel { padding-inline: 12px; }
  .me-page .me-tabs {
    position: sticky; top: 52px; z-index: 3;
    margin: 0; padding: 0 4px;
    background: var(--surface);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  /* 7 个页签在 390px 下放不下：不换行、可横向滑，压扁反而会让文字截断 */
  .me-page .me-tab { flex: none; }
}

/* ============================================================
   首页（社交信息流）与排行榜页组件 —— 2026-10-20 设计稿落地第二批
   ------------------------------------------------------------
   首页 = 设计稿的社交首页：吸顶列头 → 发布框 → 横向 The Ladder 卡片条
   → 信息流；完整榜单（Tab + 分类 + 翻页）搬到 /rank。
   设计稿里的 Clash 对战、Guide ×2 票权、帖子投票与浏览量、
   「1,284 voting now」实时人数、今日投票账本、推荐关注
   —— 后端喂不出真实数据，整块不渲染（用户 2026-10-20 决策：先降级）。
   ============================================================ */

/* ---------- 列头（吸顶） ---------- */
.pp-fhead {
  position: sticky;
  top: 0;
  z-index: 30;
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--border);
}
.pp-fhead-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  height: 54px;
  padding: 0 18px;
}
.pp-fhead-top h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -.03em;
}

/* ---------- 发布框：设计稿的 Voting for 快捷选游戏 ---------- */
.pp-cta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.pp-cta-lead { font-size: 13px; font-weight: 600; color: var(--ink-3); }
.pp-tag-pick {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px 4px 5px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface-2);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  transition: background var(--t-micro), color var(--t-micro), border-color var(--t-micro);
}
.pp-tag-pick:hover { border-color: var(--brand); color: var(--brand-600); }
.pp-tag-pick .mini-cover { width: 22px; height: 22px; border-radius: 7px; font-size: 11px; }
.pp-tag-pick[aria-pressed="true"] { background: var(--brand-tint); border-color: transparent; color: var(--brand-600); }
/* 选择器入口：跟 chips 同尺寸但虚线框，视觉上明确「这不是一个候选，这是一个动作」 */
.pp-tag-more {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  border: 1px dashed var(--border-2, var(--border));
  border-radius: var(--r-pill);
  background: transparent;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-3);
  transition: border-color var(--t-micro), color var(--t-micro);
}
.pp-tag-more:hover, .pp-tag-more[aria-expanded="true"] { border-color: var(--brand); color: var(--brand-600); }
.pp-tag-more .ic-w { width: 13px; height: 13px; }
.pp-hint {
  padding: 0 18px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  color: var(--ink-3);
}
.pp-hint b { color: var(--accent-ink); font-weight: 600; }

/* ---------- The Ladder 横向卡片条 ---------- */
.pp-ladder {
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
}
.pp-ladder-head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 14px;
}
.pp-ladder-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.02em;
}
.pp-ladder-head .ic-w { color: var(--brand-600); }
.pp-ladder-upd { margin-left: auto; font-size: 12px; color: var(--ink-3); }
.pp-ladder-all { font-size: 13px; font-weight: 700; color: var(--brand-600); white-space: nowrap; }
/* 自动滚动只在桌面指针下跑，触屏设备不该看到这个暂停键 */
.pp-strip-auto { display: none; }
@media (hover: hover) and (pointer: fine) {
  .pp-strip-auto {
    display: inline-grid;
    place-items: center;
    width: 24px; height: 24px; padding: 0;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: transparent;
    color: var(--ink-3);
    cursor: pointer;
  }
  .pp-strip-auto:hover { border-color: var(--brand); color: var(--brand-600); }
}
.pp-strip {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  /* 不用 scroll-snap：横条会自动缓慢滚动，位置本来就不对齐卡片起点，
     mandatory 吸附会在每帧程序化滚动后把位移拽回去，表现为「卡住不动」。 */
  scrollbar-width: none;
  padding-bottom: 4px;
}
.pp-strip::-webkit-scrollbar { display: none; }
@media (hover: hover) and (pointer: fine) {
  .pp-strip { cursor: grab; }
  .pp-strip.is-drag { cursor: grabbing; }
  /* 拖拽中屏蔽卡片命中：否则松手那一下会误点进详情页 */
  .pp-strip.is-drag .pp-lcard { pointer-events: none; }
}
.pp-lcard {
  position: relative;
  flex: 0 0 292px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 0 11px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  color: inherit;
  transition: border-color var(--t-panel), box-shadow var(--t-panel), transform var(--t-panel);
}
.pp-lcard:hover {
  border-color: var(--brand);
  box-shadow: var(--shadow-card);
  transform: translateY(-2px);
  text-decoration: none;
}
.pp-lcard.p1 {
  background: linear-gradient(180deg, var(--gold-tint), var(--surface) 70%);
  border-color: color-mix(in srgb, var(--gold) 40%, var(--border));
}
.pp-lrk {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.05em;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.pp-lcard.p1 .pp-lrk { color: var(--gold); }
.pp-lcard.p2 .pp-lrk,
.pp-lcard.p3 .pp-lrk { color: var(--ink-2); }
.pp-lbody { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pp-ltop { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pp-lname { font-size: 15px; font-weight: 700; line-height: 1.25; min-width: 0; }
.pp-lcov { width: 26px; height: 26px; border-radius: 30%; font-size: 12px; flex: none; }
.pp-ldelta {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 1px 5px;
  border-radius: var(--r-sm);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.pp-ldelta.up { color: var(--up); background: color-mix(in srgb, var(--up) 13%, transparent); }
.pp-ldelta.down { color: var(--down); background: color-mix(in srgb, var(--down) 12%, transparent); }
.pp-ldelta.flat { color: var(--ink-3); background: var(--surface-2); }
.pp-ldelta.fresh { color: var(--brand-600); background: var(--brand-tint); }
.pp-lmeta {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  font-size: 12px;
  color: var(--ink-2);
}
.pp-lscore { color: var(--brand-600); font-weight: 700; font-variant-numeric: tabular-nums; }
.pp-lbar {
  height: 5px;
  margin-top: 6px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  overflow: hidden;
}
.pp-lbar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--brand), var(--accent));
}
.pp-lfoot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--ink-3);
}

/* ---------- 帖子内联的关联游戏卡（设计稿 attached） ---------- */
.pp-attached {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 11px;
  align-items: center;
  margin-top: 12px;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  color: inherit;
  transition: border-color var(--t-panel);
}
.pp-attached:hover { border-color: var(--brand); text-decoration: none; }
.pp-attached .a-cov { width: 44px; height: 44px; border-radius: 26%; font-size: 16px; }
.pp-attached .a-t { font-size: 14px; font-weight: 700; line-height: 1.3; }
/* .ellipsis 只给 overflow，inline 盒子不生效：游戏名撑破中间列压到右侧「View on ladder」上（380px 实测溢出 33px） */
.pp-attached .a-t, .pp-attached .a-s { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-attached .a-s { font-size: 12.5px; color: var(--ink-2); margin-top: 1px; }
.pp-attached .a-go { font-size: 12.5px; font-weight: 700; color: var(--brand-600); white-space: nowrap; }

/* ---------- 排行榜页 /rank（参照 TapTap 榜单） ---------- */
.pp-rank-head {
  padding: 20px 18px 14px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, var(--brand-tint), transparent);
}
.pp-rank-head h2 {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -.035em;
}
.pp-rank-head p { margin: 0; font-size: 13.5px; color: var(--ink-2); line-height: 1.5; }
.pp-rank-upd {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-3);
}
.pp-rank-upd .ic-w { color: var(--brand-600); }
.pp-rank-note {
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.5;
}
.pp-rank-note b { color: var(--ink-2); font-weight: 600; }
/* TapTap 式榜单类型：选中态是深色实心药丸，而不是下划线。
   容器仍用 .tabs、按钮仍用 .tab + data-tab，home.js 的切换逻辑零改动。 */
nav.tabs.pp-chips {
  gap: 8px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.pp-chips .tab {
  flex: 0 0 auto;
  padding: 8px 15px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-2);
  transition: background var(--t-micro), color var(--t-micro), border-color var(--t-micro);
}
.pp-chips .tab:hover { background: var(--surface-2); color: var(--ink); }
.pp-chips .tab.is-active { background: var(--ink); border-color: var(--ink); color: var(--surface); font-weight: 700; }
.pp-chips .tab.is-active::after { display: none; }
[data-theme="dark"] .pp-chips .tab.is-active { background: var(--brand); border-color: var(--brand); color: var(--ink); }
.pp-chips .tabs-meta { display: none; }
/* 右栏「其他榜单」紧凑卡 */
.pp-mini-row {
  display: grid;
  grid-template-columns: 22px 28px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  padding: 9px 18px;
  border-top: 1px solid var(--border);
  color: inherit;
  font-size: 13.5px;
}
.pp-mini-row:first-child { border-top: 0; }
.pp-mini-row:hover { background: var(--surface-2); text-decoration: none; }
.pp-mini-rk { font-family: var(--font-display); font-weight: 700; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.pp-mini-rk.rk-top { color: var(--ink); }
.pp-mini-cov { width: 28px; height: 28px; border-radius: 30%; font-size: 12px; }
.pp-mini-name { min-width: 0; font-weight: 600; }
.pp-mini-n { color: var(--ink-3); font-size: 12px; font-variant-numeric: tabular-nums; }
/* mini 行右列：分值在上、位移/徽标在下（TapTap 右栏的紧凑信息列） */
.pp-mini-side { display: inline-grid; gap: 1px; justify-items: end; text-align: right; }
.pp-mini-chg { font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; }
.pp-mini-chg.up { color: var(--up); }
.pp-mini-chg.down { color: var(--down); }
.pp-mini-chip { font-size: 9.5px; font-weight: 700; border-radius: var(--r-pill); padding: 1px 6px; letter-spacing: .03em; line-height: 1.35; }
.pp-mini-chip.new { background: var(--up-tint); color: var(--up); }
.pp-mini-chip.soon { background: var(--brand-tint); color: var(--brand-600); }
/* 右栏算法说明卡（主栏算法长文的右栏化，参照 TapTap 右栏辅助信息区） */
.rank-how-list { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 10px; }
.rank-how-list li { display: flex; gap: 9px; align-items: flex-start; font-size: 12px; line-height: 1.5; color: var(--ink-2); }
.rank-how-list b { color: var(--ink); font-weight: 600; }
.rank-how-ic { flex: none; width: 22px; height: 22px; border-radius: 7px; background: var(--brand-tint); color: var(--brand-600); display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; }
.rank-how-foot { margin: 11px 0 0; padding-top: 9px; border-top: 1px dashed var(--border); font-size: 11px; font-weight: 600; color: var(--ink-3); display: flex; align-items: center; gap: 5px; }
.rank-how-foot .ic-w { color: var(--brand-600); flex: none; }
/* 榜卡卡头：kind 图标 + 标题组 */
.rail-card h3 .rh-ic { display: inline-flex; align-items: center; color: var(--brand-600); }
.rh-title { display: inline-flex; align-items: baseline; gap: 5px; min-width: 0; }

@media (max-width: 720px) {
  .pp-fhead { top: 52px; }
  .pp-lcard { flex-basis: 260px; }
  .pp-rank-head h2 { font-size: 23px; }
  .pp-chips { padding: 12px; }
}

/* ============================================================
   就地播放器（assets/video.js）
   ------------------------------------------------------------
   预告片不再跳去第三方站点：直链文件用 <video>，YouTube/Vimeo 用
   facade —— 首次只画一枚播放按钮，用户按下才插入 iframe，
   第三方脚本不随页面加载（隐私 + 首屏开销）。
   ============================================================ */

.pv-root { position: fixed; inset: 0; z-index: 108; }
.pv-root[hidden] { display: none; }
.pv-scrim { position: absolute; inset: 0; background: rgba(12, 12, 11, .82); }
.pv-box {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(920px, calc(100vw - 24px));
  display: flex; flex-direction: column;
  background: var(--surface); border-radius: var(--r-lg); overflow: hidden;
  box-shadow: 0 24px 60px rgba(8, 12, 20, .45);
}
.pv-head { display: flex; align-items: center; gap: 10px; padding: 11px 14px; }
.pv-title {
  flex: 1; min-width: 0; font-size: 15px; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pv-x {
  flex: none; width: 32px; height: 32px; display: inline-flex;
  align-items: center; justify-content: center;
  border: none; border-radius: 50%; background: var(--surface-2);
  color: var(--ink-2); cursor: pointer; transition: background var(--t-micro);
}
.pv-x:hover { background: var(--brand-tint); color: var(--brand-800); }
.pv-x svg {
  width: 18px; height: 18px;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round;
}
.pv-stage {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  max-height: min(62vh, calc(100vh - 132px));
  display: grid; place-items: center; background: #08090b; overflow: hidden;
}
.pv-frame, .pv-video { display: block; width: 100%; height: 100%; border: 0; background: #000; }
.pv-video { object-fit: contain; }
.pv-gate { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 22px; text-align: center; }
.pv-gate-lead { margin: 0; max-width: 40ch; font-size: 13.5px; line-height: 1.5; color: rgba(255, 255, 255, .82); }
.pv-gate-btn svg { width: 16px; height: 16px; fill: currentColor; stroke: none; }
.pv-foot {
  display: flex; align-items: center; gap: 10px; margin: 0;
  padding: 10px 14px; border-top: 1px solid var(--border);
  font-size: 12.5px; color: var(--ink-3);
}
.pv-out { color: var(--brand-600); font-weight: 700; }
.pv-out[hidden] { display: none; }
.pv-note { margin-left: auto; }

/* 抽屉里的预告片入口：紧跟截图托盘，没有视频时整行不出现 */
.dl-trailer { padding: 12px 20px 0; }
.dl-trailer .btn svg { fill: currentColor; stroke: none; }

@media (max-width: 720px) {
  .pv-box { width: calc(100vw - 12px); border-radius: var(--r-md); }
  .pv-stage { max-height: calc(100vh - 118px); }
  .pv-foot { padding: 9px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- 友情链接（rail 卡 + 页脚行，wx_flink） ---------- */
/* rail-card 是 padding:0 + 逐子元素下发缩进的模式：h3 被头部行接管，
   .flinks-row 必须自带缩进（否则贴边，与 rank-how 同一类漏网）。 */
.flinks-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 18px 8px;
}
.flinks-head h3 { padding: 0; margin: 0; }
.flink-apply {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 700;
  color: var(--brand-600);
  background: var(--brand-tint);
  border: 0;
  border-radius: var(--r-pill);
  padding: 5px 12px;
  cursor: pointer;
}
.flink-apply:hover { background: rgba(0, 208, 156, .18); }
.flinks-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  padding: 2px 18px 14px;
}
.flink {
  font-size: 12px; color: var(--ink-2);
  text-decoration: none;
}
.flink:hover { color: var(--brand-600); text-decoration: underline; }
.footer-flinks {
  display: flex; flex-wrap: wrap; gap: 4px 12px;
  margin-bottom: 4px;
}
.footer-flinks .ff-label { font-size: 11px; color: var(--ink-3); }
.footer-flinks a { font-size: 11px; color: var(--ink-3); text-decoration: none; }
.footer-flinks a:hover { color: var(--brand-600); }