@charset "UTF-8";
/*!
 * PC 大屏 · 项目侧覆盖样式（追加在 pc.css 之后引入）
 * ------------------------------------------------------------------
 * pc.css 是从设计源 02-html\PC大屏\styles\main.css 原样搬过来的（仅把
 * url("images/…") 改写为 url("../pc/…")），按模板约定"此文件别改"，
 * 因此所有为对接动态数据而新增/微调的规则一律写在本文件里。
 *
 * 内容：
 *   1) FYC 分档统计柱状图（person 屏，纯 CSS，无外部图表库）
 *   2) 小组提交变化闪烁动画（team 屏）
 *   3) 数据挂载点的占位与细节微调（含扫码二维码去装饰）
 */

/* ---------- 1) FYC 分档统计柱状图 ---------- */
.uc-person .band-chart {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  justify-content: space-between;
  height: 17vh;
  padding: 1vh 1.5vh 0;
  margin-top: 1vh;
}
.uc-person .band-chart .bcol {
  flex: 1;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: center;
}
/* 柱顶人数 */
.uc-person .band-chart .bval {
  font-family: "DIN-Regular", "Microsoft YaHei", sans-serif;
  font-size: 2.4vh;
  font-weight: bold;
  line-height: 1em;
  color: #a60a06;
  margin-bottom: 1vh;
}
/* 柱体轨道：占满"人数标签"与"档位标签"之间的剩余高度，
   柱高百分比以轨道为基准，避免与文字互相挤压后等高 */
.uc-person .band-chart .btrack {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
}
/* 柱体：高度由 JS 按 count/max 折算成百分比写入 style */
.uc-person .band-chart .bbar {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 3.4vh;
  height: 6%;
  min-height: 1vh;
  border-radius: 5px 5px 0 0;
  background: linear-gradient(to bottom, #ffedbb 0%, #f7a83c 45%, #dd4f1c 100%);
  box-shadow: 0 0.4vh 1.2vh rgba(150, 40, 0, 0.28);
  transition: height 0.5s linear;
}
/* 档位名 */
.uc-person .band-chart .blb {
  margin-top: 1.4vh;
  font-size: 1.9vh;
  font-weight: bold;
  line-height: 1em;
  white-space: nowrap;
  color: #8a2410;
}

/* ---------- 2) 小组提交状态变化闪烁 ---------- */
/* 闪烁仅靠切换背景图实现（不再用 box-shadow 亮光，避免圆角格子四角突出直角）。
   用 !important 覆盖 .style2（满员格）的同权重 background-image，回退后仍回到各自底色 */
.uc-team .list li.flash-bg {
  background-image: url("../pc/team-bg-3-3.png") !important;
}

/* ---------- 3) 数据挂载点细节 ---------- */
/* 倒计时三格：由 JS 按 data-cd 写时分秒，数字用 DIN */
.g-timeBox span {
  font-family: "DIN-Regular", "Microsoft YaHei", sans-serif;
}
/* 扫码提交：二维码由前端按 qr_url 实时生成，按普通图片处理——
   去掉 pc.css 给占位图 code.png 准备的米色底/圆角/阴影，并取消 padding
   （静区已画进图里），否则白底二维码会被米色框和投影干扰对比度 */
.g-codeBox .code {
  background-color: #fff;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}
/* a 必须铺满 .code 盒子，否则内部 img{height:100%} 失去高度基准会按原图尺寸渲染 */
.g-codeBox .code a {
  display: block;
  width: 100%;
  height: 100%;
}
.g-codeBox a,
.g-codeBox a:hover {
  color: inherit;
}
/* 总战力数字：等宽数字避免跳动时宽度抖动 */
.uc-power .main .number {
  font-family: "DIN-Regular", "Microsoft YaHei", sans-serif;
  font-variant-numeric: tabular-nums;
}
/* 战力进度条：宽度由 JS 按活动进度写入；光斑透明度（--pp）同步过渡，避免与宽度动画脱节 */
.uc-power .bottom-box .per-box {
  transition: width 0.6s linear;
}
.uc-power .percent .light {
  transition: opacity 0.6s linear;
}
/* 小组战力占比条：宽度由 JS 按第一名战力折算 */
.uc-team .percent .per {
  transition: width 0.5s linear;
}
/* 组名过长时收在格子里，不撑破 50 格网格 */
.uc-team .list .num {
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 战力榜：真实组名（机构-组名）比设计稿的"50组"长，改为单行省略，
   避免 pc.css 里 3.5em 的定宽把行高撑破、与相邻行重叠 */
.uc-team .list2 .num { flex: none }
.uc-team .list2 .t {
  width: auto;
  max-width: 11em;
  flex: 0 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-right: 0.5em;
}
.uc-team .list2 .txt { flex: none; white-space: nowrap }
.uc-team .list2 .r { white-space: nowrap }
/* 总战力横幅：标签文字已换成图片（three-title-txt-1/2.png），数字位数偏多时整条会超出横幅宽度出框，
   JS 检测到溢出加 .is-long 收字号（图片 height:1em 随字号一起缩），短数据仍保持设计稿字号 */
.uc-three .sub-title { flex-wrap: nowrap }
.uc-three .sub-title span { white-space: nowrap }
.uc-three .sub-title .lbl-img { display: inline-block; height: 1em; vertical-align: -0.16em; margin-right: 0.12em }
/* pc.css 将金色渐变（background-clip:text）放在 span 上，span 内一旦嵌入 <img>，
   Chrome 会把整段文字（数字/万c）一并隐藏。这里取消 span 的渐变，
   改由包一层的 .num-wrap 承载，图片与文字互不干扰；字号仍留在 span，
   .is-long 收缩时图片（height:1em）与 .num-wrap 一起变 */
.uc-three .sub-title span {
  display: inline-flex;
  align-items: center;
  color: inherit;
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: initial;
}
.uc-three .sub-title .num-wrap {
  font-style: normal;
  font-size: 4.8vh;
  color: #d08215;
  background: linear-gradient(to bottom, #f7e49d 0%, #d08215 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.uc-three .sub-title.is-long span { font-size: 4.2vh }
/* 行内数字统一等宽，榜单刷新不跳位 */
.uc-three .list .num, .uc-three .list .num2,
.uc-three .list2 .num, .uc-three .list2 .num2,
.uc-person .list .num, .uc-person .list .num2,
.uc-person .box-right .list .num2,
.uc-team .list2 .txt {
  font-variant-numeric: tabular-nums;
}
/* 机构排行榜：左右两列各最多 5 项，每行 5vh（line-height 4vh + margin-bottom 1vh），
   5 行 25vh + .list 上下 padding 2vh = 27vh（border-box 含内边距）。数据不足 5 项时
   预留 5 项高度，避免 .sub-box 背景（three-bg-3.png）随内容塌陷 */
.uc-three .list {
  min-height: 27vh;
}
/* 个人目标TOP20榜表头："与上一名差额"六字在 pc.css 的 0.75em（body 0.24rem = 18px，即 13.5px）
   下会撑出本列、与相邻列文字串行，单独把这一列收小 2 号（13.5px → 11.5px）并禁止换行 */
.uc-person .head-box span:last-child {
  font-size: 11.5px;
  white-space: nowrap;
}

/* ---------- 4) power 收尾动效：已按需求取消 ---------- */
/* 原始动效（放大 + 横向震动 + 光晕）定义在 pc.css 的 .power-finale / @keyframes power-finale，
   该文件约定不可修改；此处用同名规则（animation:none，后定义者胜）将其覆盖为空操作，
   screen.js 仍会在倒计时归零时挂/卸 .power-finale，但不再有任何视觉变化。 */
.uc-power .main .number.power-finale {
  animation: none;
}