/* ==========================================================================
   圈子页「赛博暗黑 + 点阵」皮肤 v5（design/20261023_圈子页_皮肤对照_v5.html）
   --------------------------------------------------------------------------
   落地纪律（判断 v5 §6）：
     · 只新增文件，不改 styles.css / tokens.css / 其他 ds-*.css；
     · 本文件在 index.html 里最后引入，同特异性下天然胜出；
     · 颜色全部走 --cs-*：:root 给中性默认值，深色主题换成赛博暗黑色板，
       这样规则可以无条件书写而不用给每条都套 html[data-theme="dark"]。
   ========================================================================== */

:root {
  --cs-bg: #fcfaf6;
  --cs-surface: #ffffff;
  --cs-line: rgba(0, 0, 0, .10);
  --cs-ink: #241f1c;
  --cs-muted: #8b837c;
  --cs-accent: #e8a34a;
  --cs-on-accent: #ffffff;
  --cs-banner-bg: #efe9e2;
}

html[data-theme="dark"] {
  --cs-bg: #000000;
  --cs-surface: #0f0f0f;
  --cs-line: #1e1e1e;
  --cs-ink: #ffffff;
  --cs-muted: #8a8a8a;
  --cs-accent: #ff4d00;
  --cs-on-accent: #15121a;
  --cs-banner-bg: #0a0a0a;
}

/* ---- 通用：无障碍文本 + 点阵图形容器 ---- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* N12 兜底：所有点阵 svg 都带 class="px-art"，这里再钉一次尺寸语义，
   防止任何没走 renderArt 的图形退化成 svg 默认 300×150 */
.px-art {
  display: block;
  max-width: 100%;
  shape-rendering: crispEdges;
}

.pixnum {
  display: inline-block;
  line-height: 0;
  vertical-align: baseline;
  flex: 0 0 auto;
}

.pixnum-text {
  font-variant-numeric: tabular-nums;
}

.px-dot {
  animation: px-blink var(--px-dur, 1800ms) steps(2, end) infinite;
}

@keyframes px-blink {
  0%, 100% { opacity: .28; }
  50% { opacity: 1; }
}

/* F4：动态点阵在「减少动态效果」下静止 */
@media (prefers-reduced-motion: reduce) {
  .px-dot { animation: none; opacity: 1; }
}

/* ==========================================================================
   A0 · 顶栏（居中汉堡）与 Banner（390×219，四个 Tab 都显示）
   ========================================================================== */
/* 顶栏与 Banner 一起放在 .home-header 里：header 不再整块 sticky（否则 255px 常驻），
   改成 Tab 条单独 sticky，Banner 随内容滚走 —— 与骨架一致。 */
.home-header {
  position: relative;
  padding-top: 0;
  background: none;
  border-bottom: 0;
}

.home-topbar {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
}

/* 有轮播时顶栏叠在 Banner 上（设计 A0），无轮播时回到常规流，避免盖住内容 */
.home-topbar.over {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
}

.home-topbar.over::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .72), rgba(0, 0, 0, 0));
  pointer-events: none;
}

.home-crumb {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
  color: inherit;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .9));
}

.banner-wrap {
  aspect-ratio: 16 / 9;
  height: auto;
  min-height: 0;
  margin-bottom: 0;
  border-radius: 0;
  background: var(--cs-banner-bg);
}

/* 没有配图时 styles.css 给的是浅色渐变占位，在暗色皮肤里会亮得刺眼 —— 换成点阵网格底 */
html[data-theme="dark"] .banner-placeholder {
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 22px),
    radial-gradient(120% 90% at 28% 18%, rgba(255, 77, 0, .22), #0a0a0a 70%);
}

.banner-inner {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 14px 22px;
  pointer-events: none;
}

.banner-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .52), rgba(0, 0, 0, .12) 46%, rgba(0, 0, 0, .76));
  pointer-events: none;
}

.banner-meta {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.banner-label {
  font-size: 9px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
}

.banner-label i {
  font-style: normal;
  color: var(--cs-accent);
  margin-right: 6px;
}

.banner-name {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1.15;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.banner-slogan {
  font-size: 11px;
  line-height: 15px;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .72);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.banner-slogan:empty { display: none; }

/* 右侧点阵图：尺寸在这里再钉一次，底部抬高 26 压在文字块之上 */
.banner-art {
  position: relative;
  flex: 0 0 auto;
  width: 112px;
  height: 112px;
  margin-bottom: 26px;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .8));
}

.banner-dots {
  bottom: 8px;
  gap: 5px;
  z-index: 3;
}

/* 分页点：方块化，active 拆成 5 个橙方块（4px 方块 / 2px 间隔） */
.banner-dot {
  width: 5px;
  height: 5px;
  border-radius: 1px;
  background: rgba(255, 255, 255, .28);
}

.banner-dot.active {
  width: 26px;
  height: 4px;
  border-radius: 1px;
  background: repeating-linear-gradient(90deg, var(--cs-accent) 0 4px, transparent 4px 6px);
}

.banner-manage {
  top: 10px;
  right: 10px;
  z-index: 4;
}

/* ==========================================================================
   B · Tab 条（36px，选中态是点阵下划线）
   ========================================================================== */
.home-tabs {
  position: sticky;
  top: 0;
  z-index: 15;
  gap: 0;
  padding: 0;
  height: 36px;
  background: var(--cs-bg);
  border-bottom: 1px solid var(--cs-line);
}

.home-tab {
  height: 36px;
  padding: 0;
  font-size: 11.5px;
  letter-spacing: .04em;
}

.home-tab.active {
  background: none;
  color: var(--cs-ink);
  font-weight: 700;
}

/* 下划线改成点阵方块串（4px 方块 / 4px 间隔）；ds-shell 把 content 置为 none，这里要写回来 */
.home-tab.active::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 0;
  height: 2px;
  border-radius: 0;
  background: repeating-linear-gradient(90deg, var(--cs-accent) 0 4px, transparent 4px 8px);
}

/* ==========================================================================
   C · hero（进行中主卡）：右下角点阵动态图
   ========================================================================== */
.hero-art { position: relative; }

.hero-live {
  position: absolute;
  left: 6px;
  bottom: 6px;
  z-index: 3;
  width: 48px;
  height: 48px;
  pointer-events: none;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .85));
}

/* F4：状态点 —— 圆点改 6×6 方块 */
.status-strip .dot,
.status .dot {
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background: var(--cs-accent);
}

/* ==========================================================================
   D · 成员图鉴（114×132 卡）
   ========================================================================== */
/* 设计口径 114×132：用固定列宽 + 居中，而不是 minmax(1fr)（1fr 会随容器留白漂移成 117） */
html.force-mobile #home-feed .member-grid {
  grid-template-columns: repeat(3, 114px);
  justify-content: center;
  gap: 10px;
}

html.force-mobile .member-card {
  height: 132px;
  padding: 8px 6px;
  gap: 2px;
  justify-content: flex-start;
  overflow: hidden;
  background: var(--cs-surface);
  border: 1px solid var(--cs-line);
  border-radius: 12px;
}

/* 昵称 16 + 身份 11 两行：8+64+2+16+2+11+2+14+8 = 127 ≤ 132，名字独占一行不被截断 */
.m-id {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  min-width: 0;
  line-height: 1.2;
}

.member-card .m-av {
  position: relative;
  display: block;
}

html.force-mobile .member-card .avatar {
  width: 64px;
  height: 64px;
  font-size: 18px;
}

.m-badge {
  position: absolute;
  right: -2px;
  top: -2px;
  padding: 1px 3px;
  border-radius: 3px;
  background: var(--cs-accent);
  color: var(--cs-on-accent);
  font-size: 7px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: .08em;
}

.member-card .m-name {
  max-width: 100%;
  font-size: 12px;
  line-height: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.member-card .member-who {
  max-width: 100%;
  font-size: 8.5px;
  line-height: 11px;
  color: var(--cs-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 酒量条：5 段 8×4 方块（后端没给 capacity 时模板不输出，:empty 不占位） */
.m-cap {
  display: flex;
  gap: 3px;
  justify-content: center;
}

.m-cap:empty { display: none; }

.m-cap i {
  width: 8px;
  height: 4px;
  border-radius: 1px;
  background: rgba(255, 255, 255, .16);
}

.m-cap i.on { background: var(--cs-accent); }

.m-data {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
  margin-top: auto;
}

.m-data .unit {
  font-style: normal;
  font-size: 8.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cs-muted);
  margin-left: 2px;
}

/* ==========================================================================
   E · 排行榜：奖台 → 桌面上的像素酒瓶（1 名 3 瓶 / 2 名 2 瓶 / 3 名 1 瓶）
   ========================================================================== */
.podium {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 8px;
  min-height: 184px;
  margin: 12px 0 0;
  padding: 0;
}

html.force-mobile .podium-card,
.podium-card.rank-1,
.podium-card.rank-2,
.podium-card.rank-3 {
  min-height: 184px;
  padding: 10px 4px 12px;
  border-radius: 12px;
  background: var(--cs-surface);
  border: 1px solid var(--cs-line);
}

.podium-card.rank-1 { border-color: #ffc24d; }
.podium-card.rank-2 { border-color: #4da3ff; }
.podium-card.rank-3 { border-color: #52e08a; }

/* 名次徽章改成点阵数字，不再用彩色胶囊。
   ds-social.css 有 .podium-card.rank-2 .podium-medal（0,3,0）会给 2/3 名加蓝/绿圆底，
   必须用同等特异性覆盖，否则点阵数字后面挂着一颗彩色球。 */
.podium .podium-card .podium-medal {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  min-width: 0;
  height: auto;
  padding: 0;
  background: none;
  line-height: 0;
}

.podium-bottle {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin-top: 16px;
}

.podium-card.rank-1 .podium-bottle { height: 120px; }
.podium-card.rank-2 .podium-bottle { height: 102px; }
.podium-card.rank-3 .podium-bottle { height: 86px; }

.podium-bottle .px-art {
  width: auto;
  height: 100%;
}

.podium-card b {
  max-width: 100%;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.podium-wine {
  font-size: 9px;
  letter-spacing: .1em;
  color: var(--cs-muted);
}

.podium-value {
  font-weight: 800;
  color: var(--cs-accent);
}

/* 总榜从第 4 名起：行高 40，分隔线走深色。
   必须带 html.force-mobile 前缀：ds-refine-social.css 有同名的 html.force-mobile .rank-row（0,2,0），
   单写 .rank-row（0,1,0）压不过它。 */
.rank-row,
html.force-mobile .rank-row {
  height: 40px;
  min-height: 40px;
  border-top: 1px solid var(--cs-line);
}

.rank-row:first-child { border-top: 0; }

.rank-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  line-height: 0;
}

/* 「我的排名」原先是 position:sticky 常驻视口底部，会压住加高后的酒瓶区（184）。
   设计 v5 没有这条浮层，这里改成随内容排列（功能保留、不再遮挡）。 */
html[data-theme="dark"] .my-rank {
  position: static;
  margin: 16px 0 8px;
}

/* ==========================================================================
   F · 悬浮按钮 44×44 像素 logo / 空态点阵插画
   ========================================================================== */
.fab-group { gap: 10px; }

.fab {
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  gap: 0;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.fab .fab-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.fab-primary {
  background: var(--cs-accent);
  color: var(--cs-on-accent);
}

.fab-ghost {
  background: var(--cs-surface);
  color: var(--cs-ink);
  border: 1px solid var(--cs-line);
}

.fab .px-art { filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .55)); }

.empty-art .px-art {
  margin: 0 auto 8px;
  opacity: .85;
}