/* =============================================================================
   brand.css —— 对 references 原始 shared.css 的最小补丁
   =============================================================================
   原则：shared.css / iconfont.css 保持与 references 字节级一致，不做任何改写；
   本文件只补两类「快照里缺失的资源」，以及 CCTV体育 的品牌替换。
   每条规则都注明存在理由，不做任何「更好看」的再设计。
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1) 缺失背景图
   shared.css 的 .main .principal 引用了 4 张弥散光斑背景图：
     ../img/bg1.png · ../tranquil/images/bg2.png · ../tranquil/images/bg3.png
   这几张图没有被保存进 references 快照（已核查，目录不存在），
   保留声明会产生 4 次 404 请求且不会有任何视觉效果，这里显式关掉。
   —— 若日后补齐这几张图，删掉本规则即可恢复 reference 原效果。
--------------------------------------------------------------------------- */
.main .principal {
  background-image: none;
}

/* ---------------------------------------------------------------------------
   2) 缺失图标字体
   iconfont.css 通过 ../fonts/iconfont.woff 加载字体，该文件同样不在快照里。
   为避免出现「豆腐块」，这里给实际用到的 3 个图标提供纯 CSS 替代：
     .icon-xiala  下拉/更多箭头   .icon-zuihouqixianshijianhuoyanshijian 时间
     .icon-icon-shequ-redu        热度
   仅还原图标语义，不改变其所在元素的尺寸与间距。
--------------------------------------------------------------------------- */
.iconfont {
  font-family: inherit !important;
  display: inline-block;
  line-height: 1;
}
.icon-xiala:before {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  vertical-align: middle;
}
.icon-zuihouqixianshijianhuoyanshijian:before {
  content: "";
  display: inline-block;
  width: 11px;
  height: 11px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  position: relative;
  vertical-align: -1px;
}
.icon-icon-shequ-redu:before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 11px;
  background: currentColor;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  vertical-align: -1px;
}

/* ---------------------------------------------------------------------------
   3) 品牌 Logo
   reference 的 .logo 为 200×62 的 PNG 图，按 height:49px 等比缩放。
   我方替换为同尺寸的 CCTV体育 SVG，DOM 与尺寸规则完全沿用 shared.css，
   这里只补一个 max-width，避免 SVG 在 width:100% 下被拉伸变形。
--------------------------------------------------------------------------- */
.header .enfold .logo a img {
  width: auto;
  max-width: 100%;
}

/* ---------------------------------------------------------------------------
   4) 数据兜底提示与空状态
   shared.css 里没有对应类（竞品页面不存在这些状态），
   属于我方新增的最小必要样式：标注数据来源、以及积分/射手榜等空模块的占位。
--------------------------------------------------------------------------- */
.data-note {
  padding: 10px 16px;
  font-size: 12px;
  color: #8e8ea3;
  background: #f7f5ff;
  border-radius: 6px;
  margin-bottom: 12px;
  line-height: 1.8;
}
.empty-state {
  padding: 48px 20px;
  text-align: center;
  color: #686a6b;
  font-size: 14px;
  line-height: 2;
}
.empty-state strong {
  display: block;
  font-size: 16px;
  color: #373743;
  margin-bottom: 6px;
  font-weight: bold;
}
.empty-state a {
  color: #765aff;
  font-weight: bold;
}


/* ---------------------------------------------------------------------------
   5) 分页样式
   reference 没有把分页样式放进 shared.css，而是写在 good/* 页面的内联 <style> 里。
   下面这段是从 references/.../good/zuqiuluxiang/index.html 原样取出的，未作改写。
--------------------------------------------------------------------------- */
.fenye {
display: flex;
justify-content: center;
align-items: center;
padding: 20px 0;
}
.fenye .epages {
display: flex;
gap: 8px;
align-items: center;
flex-wrap: wrap;
justify-content: center;
list-style: none;
margin: 0;
padding: 0;
}
.fenye .epages li {
list-style: none;
}
.fenye .epages a {
display: inline-block;
min-width: 36px;
height: 36px;
line-height: 36px;
text-align: center;
padding: 0 12px;
border: 1px solid #ddd;
border-radius: 6px;
text-decoration: none;
color: #333 !important;
transition: all 0.3s ease;
box-sizing: border-box;
}
.fenye .epages a:hover {
background-color: #459ADD;
color: #fff !important;
border-color: #459ADD;
}
.fenye .epages a.active {
background-color: #459ADD;
color: #fff !important;
border-color: #459ADD;
}
.fenye .epages span {
display: inline-block;
min-width: 36px;
height: 36px;
line-height: 36px;
text-align: center;
padding: 0 12px;
border: 1px solid #ddd;
border-radius: 6px;
color: #333;
box-sizing: border-box;
}



/* ---------------------------------------------------------------------------
   6) 排行 / 积分 / 比分表格
   reference 的 jifen / sheshou / xgmUj / bifen 页面在本地快照中没有保存 HTML，
   shared.css 里也没有任何 table 规则。以下样式按 references/.../1/ 下的截图还原：
   白底卡片、细边框、全部居中、表头略深、比分列红字。
--------------------------------------------------------------------------- */
.rank-table {
  background: #fff;
  border-radius: 10px;
  box-shadow: rgba(62, 68, 90, .09) 0 1px 30px 0;
  overflow: hidden;
  margin-bottom: 20px;
}
.rank-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  color: #373743;
}
.rank-table th,
.rank-table td {
  padding: 11px 8px;
  text-align: center;
  border-bottom: 1px solid #eceaf6;
  border-right: 1px solid #eceaf6;
  white-space: nowrap;
}
.rank-table th:last-child,
.rank-table td:last-child { border-right: none; }
.rank-table tbody tr:last-child td { border-bottom: none; }
.rank-table th { font-weight: bold; background: #fff; }
.rank-table td.accent { color: #e60012; }

@media screen and (max-width: 768px) {
  .rank-table { overflow-x: auto; }
  .rank-table table { min-width: 640px; }
}

/* ---------------------------------------------------------------------------
   7) 热门联赛圆形卡片
   reference 首页 .comity .crew 的样式没有出现在 shared.css 里（该模块依赖的规则缺失），
   按 references/1 下的首页截图还原：5 列白色圆形卡片 + 下方名称。
--------------------------------------------------------------------------- */
.main .comity .crew ol {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px 12px;
  padding: 20px 16px;
}
.main .comity .crew ol li { width: 100%; }
.main .comity .crew ol li a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.main .comity .crew ol li a img {
  width: 74px;
  height: 74px;
  object-fit: contain;
  background: #fff;
  border-radius: 50%;
  padding: 12px;
  box-sizing: border-box;
  box-shadow: rgba(62, 68, 90, .12) 0 2px 12px 0;
}
.main .comity .crew ol li a strong {
  font-size: 14px;
  color: #373743;
  font-weight: bold;
  text-align: center;
}
.main .comity .crew ol li a:hover strong { color: #765aff; }

@media screen and (max-width: 768px) {
  .main .comity .crew ol { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .main .comity .crew ol li a img { width: 58px; height: 58px; padding: 8px; }
}


/* ---------------------------------------------------------------------------
   8) 比赛详情：主客队 / 比分时间 / 客队 三列区块
   纯色底 + 反白文字，不放背景图（背景图会淹没「高清直播」按钮）。
   shared.css 给 .explain 挂了 match_zuqiu/lanqiu.png 背景图，在第 12 节用更高优先级覆盖掉。
--------------------------------------------------------------------------- */
.literary .explain.has-hero {
  position: relative;
  margin: 12px 0 18px;
  border-radius: 10px;
  overflow: hidden;
  background: #2b2350;
}
.literary .explain.has-hero .mutual {
  position: relative;
  z-index: 1;
  min-height: 300px;
  padding: 26px 12px;
  box-sizing: border-box;
}
.literary .explain.has-hero .mutual,
.literary .explain.has-hero .mutual a,
.literary .explain.has-hero .mutual strong,
.literary .explain.has-hero .mutual time,
.literary .explain.has-hero .mutual .score span {
  color: #fff;
}
.literary .explain.has-hero .mutual .fleet strong {
  text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
}
@media screen and (max-width: 768px) {
  .literary .explain.has-hero .mutual { min-height: 3.6rem; padding: .3rem .1rem; }
}

/* ---------------------------------------------------------------------------
   9) 标签 / 专题 / 频道 详情页的文章区
   按 references/1 的详情页截图还原：标题与 meta 居中、正文上方大图居中，
   正文为一段说明文字。shared.css 里没有 .literary 内这几项的排版规则。
--------------------------------------------------------------------------- */
.literary h1 {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  color: #1b203e;
  padding: 18px 16px 0;
}
.literary .lore ul {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 10px 16px 0;
}
.literary .lore ul li {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #765aff;
}
.literary .lore ul li em { color: #686a6b; }

.literary article.writings {
  padding: 0 16px 20px;
  font-size: 14px;
  line-height: 2;
  color: #373743;
}
.literary article.writings center { display: block; text-align: center; margin: 16px 0; }
.literary article.writings center img {
  max-width: 62%;
  height: auto;
  border-radius: 6px;
}
.literary article.writings p { margin: 0 0 12px; }
.literary article.writings ol,
.literary article.writings ul:not(.navs2):not(.index_new_cont) {
  margin: 0 0 12px;
  padding-left: 22px;
  list-style: decimal;
}
.literary article.writings .index_new_cont li { list-style: none; margin-bottom: 8px; }


/* ---------------------------------------------------------------------------
   10) 录像/视频详情页的播放线路
   竞品 /luxiang/*.html 正文里没有大图，只有「完场录像:」「精彩集锦:」两组，
   每条线路是「圆形播放按钮 + 线路名」，下方一根浅色分隔线。
--------------------------------------------------------------------------- */
.writings .play-group { margin: 6px 0 18px; }
.writings .play-label {
  font-size: 16px;
  font-weight: 700;
  color: #333;
  line-height: 32px;
  margin: 0 0 4px;
}
.writings .play-lines { margin: 0; padding: 0; list-style: none; }
.writings .play-lines li { border-bottom: 1px solid #eee; }
.writings .play-lines li:last-child { border-bottom: 0; }
.writings .play-lines a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 2px;
  font-size: 15px;
  color: #333;
  line-height: 22px;
}
.writings .play-lines a:hover { color: #6a3ff5; }
.writings .play-lines a span { flex: 1; min-width: 0; }
/* 圆形播放按钮：用 CSS 三角形画，不额外引图片，避免再多一个可能 404 的资源 */
.writings .play-dot {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #6a3ff5;
  position: relative;
}
.writings .play-dot::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-40%, -50%);
  border-style: solid;
  border-width: 5px 0 5px 8px;
  border-color: transparent transparent transparent #fff;
}
/* 底部红色标签与竞品一样独占一行，navs2 的 margin-top 需要 inline-block 才生效 */
.writings .navs2 a { display: inline-block; }

/* 新闻、录像与视频详情页标题下方的全天候高清直播入口。 */
.detail-live-guide {
  display: flex;
  justify-content: center;
  margin: 12px 0 16px;
}
.detail-live-guide a {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  max-width: 440px;
  min-height: 48px;
  gap: 10px;
  padding: 6px 14px;
  border: 2px solid #ffd45a;
  border-radius: 8px;
  background: linear-gradient(135deg, #d91524 0%, #f42f36 58%, #bd0715 100%);
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(190, 7, 21, .24);
  text-decoration: none;
}
.detail-live-guide a:hover {
  background: linear-gradient(135deg, #bd0715 0%, #e51d2b 58%, #a5000c 100%);
  box-shadow: 0 5px 15px rgba(190, 7, 21, .32);
}
.detail-live-guide strong {
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 1px;
}
.detail-live-guide__live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 7px;
  border: 1px solid rgba(255, 255, 255, .75);
  border-radius: 999px;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
}
.detail-live-guide__live i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, .8);
  animation: detail-live-pulse 1.5s ease-out infinite;
}
.detail-live-guide__hint {
  color: #fff6cf;
  font-size: 13px;
  font-weight: 700;
}
@keyframes detail-live-pulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .8); }
  70% { box-shadow: 0 0 0 9px rgba(255, 255, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .detail-live-guide__live i { animation: none; }
}
@media screen and (max-width: 768px) {
  .detail-live-guide { margin: .2rem 0 .28rem; }
  .detail-live-guide a {
    width: 8rem;
    min-height: 1.17333rem;
    gap: .16rem;
    padding: .12rem .18rem;
    border-radius: .16rem;
  }
  .detail-live-guide strong { font-size: .37333rem; letter-spacing: .02rem; }
  .detail-live-guide__live { gap: .06rem; padding: .06rem .12rem; font-size: .24rem; }
  .detail-live-guide__live i { width: .14rem; height: .14rem; }
  .detail-live-guide__hint { font-size: .26rem; }
  .writings .play-label { font-size: .3rem; line-height: .6rem; }
  .writings .play-lines a { font-size: .28rem; padding: .18rem .04rem; }
  .writings .play-dot { width: .4rem; height: .4rem; }
}


/* ---------------------------------------------------------------------------
   11) 未开赛比赛的开赛倒计时
   竞品是正文里一条黑底居中的白字横条，位于【直播信号】与赛事介绍之间。
--------------------------------------------------------------------------- */
.expound .countdown {
  margin: 14px 0;
  padding: 8px 10px;
  background: #000;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  line-height: 32px;
  text-align: center;
  border-radius: 2px;
}
.expound .countdown .countdown-value { color: #fff; }
@media screen and (max-width: 768px) {
  .expound .countdown { font-size: .32rem; line-height: .56rem; padding: .12rem .1rem; }
}


/* ---------------------------------------------------------------------------
   12) 看直播入口 + 详情页头部收紧
   · 详情页头部原高 362px（队徽 114px），手机第一屏几乎被它占满，看直播入口被挤到屏外。
     这里把头部收成约 170px，队徽 56px，比分改小，入口按钮放在比分正下方。
   · .watch-btn 是全站看直播按钮：详情页「高清直播 / 观看直播」、列表行「观看直播」。
     只做轻微的 100% → 105% → 100% 呼吸，不闪烁；系统开启「减少动态效果」时不动。
--------------------------------------------------------------------------- */
.main .extrinsic .essence .literary .explain.has-hero {
  height: auto;
  margin: 12px 0 14px;
  /* 去掉 shared.css 的球场背景图（含 .ball 篮球变体），只留品牌深紫纯色 */
  background: #2b2350;
}
.main .extrinsic .essence .literary .explain.has-hero .mutual {
  min-height: 0;
  padding: 16px 12px;
}
.main .extrinsic .essence .literary .explain.has-hero .mutual .fleet a { gap: 6px; }
.main .extrinsic .essence .literary .explain.has-hero .mutual .fleet a img { height: 56px; }
.main .extrinsic .essence .literary .explain.has-hero .mutual .trust { gap: 4px; align-items: center; }
.main .extrinsic .essence .literary .explain.has-hero .mutual .trust .score span { font-size: 18px; }

.watch-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border-radius: 20px;
  background: #ff5b2e;
  color: #fff !important;
  font-weight: bold;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(255, 91, 46, .35);
  animation: watch-pulse 2.4s ease-in-out infinite;
}
.watch-btn:hover { background: #f04a1c; }
.main .extrinsic .essence .literary .explain.has-hero .mutual .trust .watch-btn-hero {
  width: 116px;
  height: 40px;
  margin-top: 6px;
  font-size: 15px;
}
/* 列表行：替换原先的动画位，尺寸随行高收小。
   PC 下第三列（情报 + 动画/按钮）给 140px 下限：按钮比动画宽，不设下限时
   带按钮的行会把网格撑开，与同一列表里其它行错位（详情页右侧栏旁的窄列表最明显） */
@media screen and (min-width: 769px) {
  .main .directory ol li { grid-template-columns: 3fr 3fr minmax(140px, 1fr); }
}
.main .directory ol li .reflect .stir.stir-watch {
  display: flex;
  align-items: center;
  justify-content: center;
}
.main .directory ol li .reflect .stir.stir-watch .watch-btn {
  width: 80px;
  height: 30px;
  font-size: 13px;
}
@keyframes watch-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
  .watch-btn { animation: none; }
}

/* 首页 NBA 专区说明（热门直播下方） */
.principal .nba-zone {
  margin: 16px 0 4px;
  padding: 14px 16px;
  background: #fff;
  border-left: 4px solid #765aff;
  border-radius: 6px;
}
.principal .nba-zone h2 { margin: 0 0 6px; font-size: 18px; font-weight: bold; }
.principal .nba-zone h2 a { color: #3e3471; }
.principal .nba-zone p { margin: 0; font-size: 14px; line-height: 1.8; color: #555; white-space: normal; }
.principal .nba-zone p a { color: #765aff; }

@media screen and (max-width: 768px) {
  .main .extrinsic .essence .literary .explain.has-hero { height: auto; margin: .21333rem 0; }
  .main .extrinsic .essence .literary .explain.has-hero .mutual { min-height: 0; padding: .26667rem .13333rem; }
  .main .extrinsic .essence .literary .explain.has-hero .mutual .fleet a { gap: .08rem; }
  .main .extrinsic .essence .literary .explain.has-hero .mutual .fleet a img { height: 1.17333rem; }
  .main .extrinsic .essence .literary .explain.has-hero .mutual .trust .score span { font-size: .37333rem; }
  /* WAP：约 140×40px（flexible.js 下 1rem = 视口宽 / 10，375 宽时 1rem = 37.5px） */
  .main .extrinsic .essence .literary .explain.has-hero .mutual .trust .watch-btn-hero {
    width: 3.73333rem;
    height: 1.06667rem;
    margin-top: .10667rem;
    font-size: .37333rem;
    border-radius: .53333rem;
  }
  .main .directory ol li .reflect .stir.stir-watch .watch-btn {
    width: 2.13333rem;
    height: .64rem;
    font-size: .29333rem;
  }
  .principal .nba-zone { margin: .26667rem 0 .10667rem; padding: .26667rem .26667rem; }
  .principal .nba-zone h2 { font-size: .42667rem; margin-bottom: .10667rem; }
  .principal .nba-zone p { font-size: .34667rem; }
}