/* ==========================================================================
   红警社区 · 战术指挥终端视觉（列表卡片 / 单位徽章 / 侧栏读数 / 筛选条）
   --------------------------------------------------------------------------
   适用：/community（通讯前线）、/strategy（攻略列表）
   设计语言（深色军事指挥风）：
     1. 分类色导轨 —— 每张卡片按 data-cat 取色，hover 时导轨点亮，一屏即可扫出板块
     2. 切角面板   —— 头像徽章用 clip-path 切角，做出 HUD 面板的硬朗轮廓
     3. 等宽微标签 —— 所有元信息（编号 / 计数 / 时间）统一走 --mono，读数感
     4. 分段电平条 —— 热度条改为逐格电平，替代原来的整条渐变
   加载顺序：本文件在 app_community.css / app_strategy.css 之后覆盖
   ========================================================================== */

/* ---------- 追加令牌 ---------- */
:root {
  --cmd-line: rgba(233, 226, 204, .10);   /* 面板内分隔线 */
  --cmd-line-soft: rgba(233, 226, 204, .07);
  --cmd-inset: rgba(14, 16, 10, .55);     /* 凹陷底（标签 / 读数槽） */
  --cmd-ease: cubic-bezier(.16, 1, .3, 1);
}

/* ---------- 分类取色：data-cat → --cat ---------- */
.forum .post { --cat: var(--muted); }
.forum .post[data-cat="red"]      { --cat: var(--red); }
.forum .post[data-cat="gold"]     { --cat: var(--gold); }
.forum .post[data-cat="green"]    { --cat: var(--green); }
.forum .post[data-cat="blue"]     { --cat: var(--blue); }
.forum .post[data-cat="purple"]   { --cat: var(--purple); }
.forum .post[data-cat="muted"]    { --cat: var(--muted); }
.forum .post[data-cat="pin"]      { --cat: var(--hazard); }
/* 攻略页分类 */
.forum .post[data-cat="campaign"] { --cat: var(--red); }
.forum .post[data-cat="unit"]     { --cat: var(--green); }
.forum .post[data-cat="tactic"]   { --cat: var(--gold); }
.forum .post[data-cat="online"]   { --cat: var(--blue); }
.forum .post[data-cat="newbie"]   { --cat: var(--purple); }
.forum .post[data-cat="mod"]      { --cat: var(--muted); }

/* ==========================================================================
   1. 列表卡片
   ========================================================================== */
.forum .post {
  position: relative;
  display: flex;
  gap: 15px;
  align-items: flex-start;
  padding: 16px 18px 15px 20px;
  margin-bottom: 12px;
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(233, 226, 204, .022), rgba(233, 226, 204, 0) 58%),
    var(--panel);
  transition: border-color .22s ease, box-shadow .22s ease,
              transform .22s var(--cmd-ease);
}

/* 左侧分类色导轨：静默 50% 透明，hover 点亮并溢出光晕 */
.forum .post::before {
  content: "";
  position: absolute;
  left: -1px; top: -1px; bottom: -1px;
  width: 3px;
  background: var(--cat);
  opacity: .5;
  transition: opacity .22s ease, box-shadow .22s ease;
}
.forum .post:hover::before {
  opacity: 1;
  box-shadow: 0 0 14px -2px var(--cat);
}
.forum .post:hover {
  transform: translateX(3px);
  border-color: var(--cat);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .34);
}

/* ---------- 单位徽章（头像位） ---------- */
.forum .post .pavatar {
  position: relative;
  flex: 0 0 auto;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  padding: 0;
  color: var(--cat);
  background: var(--line);                                     /* 备用（不支持 color-mix 时） */
  background: color-mix(in srgb, var(--cat) 40%, var(--line)); /* 外框色 */
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px));
  transition: background-color .2s ease;
}
.forum .post .pavatar::before {
  content: "";
  position: absolute; inset: 1px;
  background:
    linear-gradient(150deg, rgba(233, 226, 204, .07), rgba(233, 226, 204, 0) 52%),
    var(--bg-2);
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px));
}
.forum .post .pavatar > * { position: relative; z-index: 1; }
.forum .post .pavatar .rui {
  width: 24px; height: 24px;
  opacity: .94;
  transition: transform .2s var(--cmd-ease);
}
.forum .post:hover .pavatar {
  background: var(--cat);
}
.forum .post:hover .pavatar .rui { transform: scale(1.07); }

/* ---------- 正文区 ---------- */
.forum .post .pbody { flex: 1; min-width: 0; }

/* 标签：从「描边胶囊」改为「左色条 + 暗底」的军用铭牌 */
.forum .post .ptags { gap: 7px; margin-bottom: 9px; }
.forum .post .ptag {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--mono);
  font-size: 9.5px; letter-spacing: .14em;
  padding: 3px 8px 3px 7px;
  color: var(--accent, var(--muted));
  /* 9.5px 小字号下纯 accent 对比度不足（红 ≈3.0:1），掺入正文色提亮到 ≈4.6:1 */
  color: color-mix(in srgb, var(--accent, var(--muted)) 72%, var(--ink));
  background: var(--cmd-inset);
  border: 1px solid var(--cmd-line);
  border-left: 2px solid var(--accent, var(--line));
  transition: background-color .18s ease, border-color .18s ease;
}
.forum .post .ptag .rui { width: 12px; height: 12px; }
.forum .post .ptag.k-muted  { --accent: var(--muted); }
.forum .post .ptag.k-hazard { --accent: var(--hazard); }
.forum .post .ptag.k-pin    { --accent: var(--hazard); }

.forum .post h3 {
  font-size: 16.5px; font-weight: 700; line-height: 1.45;
  letter-spacing: .01em; color: var(--ink);
  transition: color .18s ease;
}
.forum .post h3 a { color: inherit; }
.forum .post:hover h3 { color: var(--cat); }

.forum .post .pdesc {
  font-size: 13px; line-height: 1.65;
  color: var(--muted);
  margin-top: 6px;
  -webkit-line-clamp: 2;
}

/* 元信息：加一条虚线分隔，让它成为「读数栏」而不是散落的文字 */
.forum .post .pmeta {
  display: flex; gap: 14px; flex-wrap: wrap; align-items: center;
  margin-top: 11px; padding-top: 10px;
  border-top: 1px dashed var(--cmd-line-soft);
  font-family: var(--mono);
  font-size: 10.5px; letter-spacing: .06em;
  color: var(--muted);
}
.forum .post .pmeta b { color: var(--ink); font-weight: 600; }
.forum .post .pmeta .hot { color: var(--red); }

/* 右读数块：竖分隔 + 大号等宽数字 */
.forum .post .pstat {
  flex: 0 0 auto;
  align-self: stretch;
  display: flex; flex-direction: column;
  justify-content: center; align-items: flex-end;
  min-width: 62px;
  padding-left: 14px;
  border-left: 1px solid var(--cmd-line-soft);
  text-align: right;
}
.forum .post .pstat .n {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 20px; font-weight: 600; line-height: 1.15;
  color: var(--ink);
  transition: color .18s ease;
}
.forum .post .pstat .l {
  font-family: var(--mono);
  font-size: 9.5px; letter-spacing: .18em;
  color: var(--muted); margin-top: 2px;
}
.forum .post:hover .pstat .n { color: var(--cat); }

/* ---------- 置顶：警戒条纹导轨 ---------- */
.forum .post.pin {
  background:
    linear-gradient(100deg, rgba(224, 185, 59, .10), rgba(233, 226, 204, 0) 55%),
    var(--panel);
  border-color: rgba(224, 185, 59, .30);
}
.forum .post.pin::before {
  background: repeating-linear-gradient(-45deg, var(--hazard) 0 4px, transparent 4px 9px);
  opacity: .9;
}
.forum .post.pin:hover { border-color: rgba(224, 185, 59, .55); }

/* ==========================================================================
   2. 侧栏
   ========================================================================== */
.forum .side-card {
  position: relative;
  padding: 0 18px 16px;
  margin-bottom: 18px;
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(233, 226, 204, .022), rgba(233, 226, 204, 0) 42%),
    var(--panel);
  counter-reset: cmdmem;
}
/* 顶部渐隐色条，区分侧栏与主区 */
.forum .side-card::before {
  content: "";
  position: absolute; left: -1px; right: -1px; top: -1px;
  height: 2px;
  background: linear-gradient(90deg, var(--green), rgba(166, 201, 74, 0) 78%);
  opacity: .65;
}
.forum .side-card h4 {
  position: relative;
  margin: 0 -18px 14px;
  padding: 16px 18px 13px 30px;
  border-bottom: 1px solid var(--cmd-line-soft);
  font-family: var(--mono);
  font-size: 10.5px; letter-spacing: .22em;
  color: var(--ink);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.forum .side-card h4::before {
  content: "";
  position: absolute; left: 18px; top: 50%;
  width: 3px; height: 12px;
  transform: translateY(-50%);
  background: var(--green);
}
.forum .side-card h4 span { color: var(--muted); letter-spacing: .14em; }

/* ---------- 榜单行 ---------- */
.forum .rank-item {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 0;
  border-bottom: 1px dashed var(--cmd-line-soft);
  font-size: 13px;
}
.forum .rank-item:last-child { border-bottom: none; }
.forum .rank-item .idx {
  flex: 0 0 auto;
  min-width: 26px; height: 21px;
  display: grid; place-items: center;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 10.5px; letter-spacing: .06em;
  color: var(--muted);
  background: var(--cmd-inset);
  border: 1px solid var(--cmd-line);
}
.forum .rank-item .idx.top {
  color: #fff; font-weight: 700;
  background: linear-gradient(135deg, var(--red), var(--red-deep));
  border-color: transparent;
}
.forum .rank-item .rt {
  flex: 1; min-width: 0;
  color: var(--ink); font-size: 13px; line-height: 1.5;
}
.forum .rank-item .rt a { color: var(--ink); transition: color .15s ease; }
.forum .rank-item .rt a:hover { color: var(--gold); }
.forum .rank-item .heat {
  font-family: var(--mono); font-size: 11px; color: var(--gold);
}

/* 热度条：整条渐变 → 分段电平 */
.forum .rank-item .heatbar {
  height: 5px; margin-top: 6px;
  background: rgba(14, 16, 10, .75);
  box-shadow: inset 0 0 0 1px var(--cmd-line-soft);
  overflow: hidden;
}
.forum .rank-item .heatbar i {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--red), var(--gold));
  background: repeating-linear-gradient(90deg, var(--gold) 0 4px, transparent 4px 7px);
}

/* 难度图例：序号列改成宽窄自适应，星标不换行 */
.forum .diff-legend .rank-item .idx {
  min-width: 0; height: auto;
  display: inline-block;
  background: none; border: none; padding: 0;
  letter-spacing: .04em; white-space: nowrap;
}

/* ---------- 活跃会员 ---------- */
.forum .member {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 0;
  border-bottom: 1px dashed var(--cmd-line-soft);
  counter-increment: cmdmem;
}
.forum .member:last-child { border-bottom: none; }
.forum .member::before {
  content: counter(cmdmem, decimal-leading-zero);
  flex: 0 0 auto;
  font-family: var(--mono); font-size: 10.5px;
  color: var(--muted);
}
.forum .member .av {
  position: relative;
  flex: 0 0 auto;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  color: var(--gold);
  background: rgba(217, 164, 65, .34);
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}
.forum .member .av::before {
  content: "";
  position: absolute; inset: 1px;
  background:
    linear-gradient(150deg, rgba(217, 164, 65, .12), rgba(217, 164, 65, 0) 55%),
    var(--panel);
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}
.forum .member .av > * { position: relative; z-index: 1; }
.forum .member .av .rui { width: 21px; height: 21px; }
.forum .member .mn {
  font-size: 13px; font-weight: 600; color: var(--ink);
  transition: color .15s ease;
}
.forum .member .mp {
  font-family: var(--mono); font-size: 10.5px;
  color: var(--muted); margin-top: 1px;
}
.forum .member:hover .mn { color: var(--gold); }
.forum .member:hover .av { background: var(--gold); }

/* ---------- 精选资源 ---------- */
.forum .side-res {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 0;
  border-bottom: 1px dashed var(--cmd-line-soft);
  font-size: 13px;
}
.forum .side-res:last-child { border-bottom: none; }
.forum .side-res .si {
  flex: 0 0 auto;
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .06em; color: var(--red);
}
.forum .side-res a {
  color: var(--ink);
  transition: color .15s ease, transform .15s var(--cmd-ease);
  display: inline-block;
}
.forum .side-res:hover a { color: var(--gold); transform: translateX(3px); }

/* ==========================================================================
   3. 筛选条（分段式控件）
   ========================================================================== */
.forum .filters {
  display: flex; flex-wrap: wrap; gap: 0;
  width: fit-content; max-width: 100%;
  margin-bottom: 16px;
  padding: 3px;
  border: 1px solid var(--line);
  background: rgba(14, 16, 10, .45);
}
.forum .filters button {
  position: relative;
  font-family: var(--mono);
  font-size: 11.5px; letter-spacing: .1em;
  color: var(--muted);
  background: transparent; border: 0;
  padding: 8px 14px;
  cursor: pointer;
  transition: color .15s ease, background-color .15s ease;
}
.forum .filters button + button::before {
  content: "";
  position: absolute; left: 0; top: 50%;
  width: 1px; height: 14px;
  transform: translateY(-50%);
  background: var(--cmd-line);
}
.forum .filters button:hover { color: var(--ink); background: rgba(233, 226, 204, .045); }
.forum .filters button.on {
  color: #fff;
  font-weight: 700;
  background: linear-gradient(135deg, var(--red), var(--red-deep));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
}
.forum .filters button.on::before,
.forum .filters button.on + button::before { background: transparent; }

/* ==========================================================================
   4. 空态 / 加载态
   ========================================================================== */
.forum .ra-empty {
  padding: 38px 20px;
  text-align: center;
  font-family: var(--mono);
  font-size: 12.5px; letter-spacing: .06em;
  color: var(--muted);
  border: 1px dashed var(--line);
  background: rgba(14, 16, 10, .3);
}

/* ==========================================================================
   5. 响应式
   ========================================================================== */
@media (max-width: 700px) {
  .forum .post { gap: 12px; padding: 14px 14px 13px 16px; }
  .forum .post .pavatar { width: 40px; height: 40px; }
  .forum .post .pavatar .rui { width: 21px; height: 21px; }
  .forum .post .pstat { min-width: 44px; padding-left: 10px; }
  .forum .post .pstat .n { font-size: 16px; }
  .forum .post .pstat .l { font-size: 8.5px; letter-spacing: .1em; }
  .forum .post h3 { font-size: 15.5px; }
  .forum .filters { width: 100%; }
  .forum .filters button { padding: 8px 11px; font-size: 11px; }
  .forum .side-card { padding: 0 15px 14px; }
  .forum .side-card h4 { margin: 0 -15px 12px; padding-left: 28px; }
  .forum .side-card h4::before { left: 15px; }
}

/* ---------- 降低动效偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
  .forum .post,
  .forum .post::before,
  .forum .post .pavatar,
  .forum .post .pavatar .rui,
  .forum .side-res a,
  .forum .post .pstat .n,
  .forum .post h3 {
    transition: none !important;
  }
  .forum .post:hover { transform: none; }
  .forum .side-res:hover a { transform: none; }
  .forum .post:hover .pavatar .rui { transform: none; }
}