/* 首页专有部分。共用部分（token / 顶栏 / 页脚 / 原子）在 site.css。
   2026-10-27 从 index.html 的 <style> 里原样搬出来：页面壳是 no-cache 的，76KB 的样式每进一次首页都要重新下一遍；
   单独成文件以后带指纹（?v=），长缓存。**和 site.css 的先后不能换**（index.html 里紧跟在 site.css 后面）。 */
/* ══ 首屏 ══════════════════════════════════════════════════════════════
   **这一页原来没有主角。** 实测八节的高度全挤在 372~952px 一个区间里，
   而积分榜（952px）比英雄区（604px）还高 58% —— 一律满宽横条堆叠，
   读者进来第一眼看到的不是"今天最大的事"，是一份等权重的目录。
   更反的一点：hero 标题上限 34px，而文章页标题是 62px，**内页比首页气派**。

   改法是把尺度差拉开：照片**满宽 + 82vh**，标题上到 76px。
   首屏只讲一件事 —— 今天最大的那条新闻。别的往下放。

   赛程面板不再和照片**并排切掉它四分之一宽**（原来是 1fr + 372px 两栏，
   照片被压成 1040×468 的横幅），改成浮在照片右上的玻璃卡片：
   照片完整，面板照旧能用。 */
.hero{background:var(--plum);position:relative;
  /* 右边那一栏（赛程 + 倒计时）有多宽：标题按它让位，所以只在这里定一次 */
  --col-w:clamp(320px,23vw,420px);
  /* 标题和右栏的底边离画面下沿多远：两者落在同一条底线上 */
  --hero-pad:clamp(26px,3vw,52px)}
/* ══ 首屏是一整屏（2026-10-12 改）══
   **桌面上头图就是视口那么高**：顶栏透明压在照片上（.mp-under），倒计时收进右栏底部，
   所以一屏里放得下照片、标题、赛程和倒计时 —— 标题永远在折线上方，右栏从标题那条底线往上长。
   原来是满宽 2:1 的画框（下面那段记着为什么），在大显示器上出了两个毛病（用户截图）：
   2688×1289 的视口里 2:1 是 1344 高，加上顶栏，标题沉到折线以下；赛程卡片封顶 352×560，
   在两千多像素宽的照片上像一张贴纸。现在画框的比例就是视口的比例：笔记本 1568×807 是 1.94、
   1920 宽是 2.0，和原来的 2:1 差不多，照片裁得一样多；只有超宽屏（21:9）会裁得更狠，那种屏少，接受。
   太高的窗口（竖着的屏）封顶 72vw，不让照片被左右切成一条。

   下面这段是 2:1 的来历，留着 —— 「为了标题露在折线上方去压画框高度」栽过五次，那时倒计时占着首屏一条。 */
/* 画框固定 **16:9**，且**不加任何以 vh 为准的高度上限**。

   头条图的比例随当天来稿变 —— 实测轮播里有 1.88~2.00 的宽图（1200×630 这类
   og:image），也有 3:2（1.47）的现场照。`cover` 按短边撑满、长边两头切，
   所以画框越宽、3:2 被切得越狠：1.95 的画框切掉上下各 23%，切走的正是话筒和
   外套，只剩一张大脸。

   **这里我连着栽了三次，每次同一个形状**：加一个视口高度上限
   （`78vh` → `max-height:860px` → `calc(100vh - 213px)`），而那个上限总是比
   `aspect-ratio` 更紧，于是比例意图被顶掉、3:2 反而被裁到 28~39%，比不改还差。

   停下来算约束才看清：在 1440×900 上，「照片接近 3:2」+「标题压在照片里」
   +「倒计时条也在首屏」**三件事不可能同时成立** —— 可用高度只有
   900−63(顶栏)−136(倒计时)=700px，对应比例 2.06。"全塞进首屏"本身就要求宽画框。

   放弃第三件最便宜（倒计时是次要元素，露一半反而引导往下滚）。16:9 于是同时
   满足另外两件，而 3:2 只裁 16%。

   **结论：满宽 + 纯 16:9，标题照旧压在照片底部，不给任何高度上限。**

   我在这里栽了五次，每次同一个形状 —— 为了"标题要露在折线上方"加一个以 vh
   为准的高度上限（`78vh` → `max-height:860px` → `calc(100vh-213px)` →
   收宽度 → `min(56.25vw, 100vh-340px)`）。那个上限每次都比比例更紧，
   画框被压宽、3:2 的照片从 16% 一路裁到 66%，**每次都比不改更糟**。
   其中"收宽度"那次还引入了新毛病：两侧露出紫色底，在宽而矮的窗口上是
   一大块紫边 —— 而这个缺陷我自己的测量里就有（1920×1080 画框 1796px、
   两边各 62px），我当成通过了。

   也试过把标题搬到照片下面。约束确实解开了，但白底文案块只有版心宽、
   两侧照样露紫，**比原来更难看**（用户的判断：「不如原来的」）。

   最后回到最简单的一条：照片满宽、标题压在照片底部。

   **比例取 2:1，是量出来的最小可用值。** 14 寸 MacBook 100% 缩放下视口是
   1568×807，顶栏之后可用 744px —— 16:9 的画框有 882px 高，标题最后一行
   正好被切掉（实测标题底 897 / 视口 807）。
   逐档试下来 2:1 是第一个装得下的（画框 784px、标题底 799/807）。

   **代价是真实的，不要以为免费**：按最近 400 篇的来源占比加权，
   16:9 平均纵裁 7.6%，2:1 是 15.8%（Guardian 那种 1.25 的竖图要裁 38%）。
   换来的是"标题不被切"—— 一个被切掉半行的标题比裁紧一点的照片糟得多。

   **别想着靠缩标题解决。** 试过：标题是 `position:absolute; bottom:0`
   锚在照片底边上，**它的位置由照片高度决定，和字号、行数、内边距都无关**
   （实测把三行改两行、内边距减到 30px、字号降到 56px，标题底一直是 897px
   不动）。只有降照片高度这一条路。 */
.hero-in{position:relative;padding:0;width:100%;
  height:max(560px,min(100vh,72vw));height:max(560px,min(100svh,72vw))}
@media (max-width:1080px){
  .hero-in{height:auto;max-height:none;min-height:0}
}
/* 照片**满宽满高**，不再和面板分栏。 */
.hero-shot{position:relative;display:block;overflow:hidden;height:100%;
  min-height:0;background:#1a0a20}
/* 窄屏：照片顶上多出顶栏那么高（顶栏压在它上面），露出来的部分和原来一样大 */
@media (max-width:1080px){.hero-shot{height:calc(clamp(420px,60vh,560px) + var(--tb-h))}}
/* 多张图叠在一起，靠 .on 决定显示谁 —— 和榜单卡同一个做法。
   **不是改 src**：改 src 会闪白，而且新图有加载延迟，看起来像卡住。
   样板里这块每两秒换一条头条，图和文字一起交叉淡入。 */
/* 照片铺满画框（`cover`），**靠一层遮罩压住低清**。

   走到这里之前试过"模糊底 + 缩小前景"那一套：前景按原尺寸居中、两侧用同一张
   图模糊铺满。它确实解决了放大糊的问题，但边缘那圈颜色过渡怎么调都像硬拼上去的
   （用户的判断：「太丑了，感觉就是硬生生的瞎搞」），而且低清图缩在中间只占
   六成宽，首屏反而更弱。

   遮罩这条路干净得多：**图照旧 `cover` 铺满，整幅压一层暗色。**
   低清的软糊在压暗之后基本看不出来（这是海报设计的常规手法），
   而且白色标题因此有了干净的底 —— 一举两得，代价只是照片亮度低一些。

   `object-position:center 34%`：人物照的主体（头和肩）通常在画面上半部，
   而 2:1 的画框裁得比 16:9 更多（加权 15.8% vs 7.6%），取景点要再往上一点，
   否则裁掉的那部分会从人脸上切。 */
.hero-shot img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 34%;
  opacity:0;transition:opacity .7s ease}
.hero-shot img.on{opacity:1}
/* 往下滚时照片比页面走得慢（景深：浮在上面的赛程卡和标题是近景、照片是远景），标题跟着淡出 ——
   不然它一路滑到透明顶栏底下，和导航叠成一团。只挪不放大（见下面「不再额外放大」）：滚动为 0 时照片一像素都不动。
   浏览器不支持滚动驱动动画、或者读者要求减少动态效果，就是原来那样静止 */
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
    .hero-shot img{animation:hero-drift linear both;animation-timeline:scroll(root block);animation-range:0 100vh}
    .hero-cap{animation:hero-lift linear both;animation-timeline:scroll(root block);animation-range:12vh 62vh}
  }
}
@keyframes hero-drift{to{translate:0 24vh}}
@keyframes hero-lift{to{opacity:0;translate:0 -5vh}}
/* 等数据时照片那块放全站的加载动画（深底版）。桌面上赛程面板浮在右边，所以只居中在左边那片 */
.hero-load{position:absolute;inset:0 34% 22% 0;z-index:1;display:grid;place-items:center}
.hero-load .mpl-stage{min-height:0;padding:0}
@media (max-width:1080px){.hero-load{inset:0 0 26% 0}}
/* **不再额外放大。** 原来给显示中的那张加 `scale(1.045)`，在已经 `cover`
   裁过一次的图上再推 4.5% —— 本来只裁 9% 的照片变成裁 13%，
   而"呼吸感"这点收益远不值得再切掉主体。照片本身就是内容，不是背景纹理。 */
/* 两层遮罩叠加：左侧一层让标题有底、底部一层压住 chip 那一行。
   缺了它们白字会糊在浅色照片上，而且照片和紫色块之间没有过渡，
   看起来像"贴上去的图"而不是一整块设计。 */
/* 遮罩三层叠加，各有分工：
   1. **整幅一层平压**（.28）—— 这是"压住低清"的主力。低清图放大后的软糊
      在压暗之后基本看不出来；而高清图损失一点亮度换来整屏统一的质感，值得。
   2. **底部重压** —— 标题在这里，没有它白字会糊在亮处（草皮、天空）。
   3. **右上角一层** —— 那里浮着白色赛程面板，压暗让它的边缘能从亮照片里分出来。
   全部用品牌的深紫（`12 0 16`）而不是中性黑：黑色压在彩照上会发灰，
   带一点紫能和全站的调子接上。 */
/* 底部那层**收到正好是 --plum**：下面接着的「场边」（窄屏是倒计时条）上沿就是这个紫，照片直接化进下一块，没有接缝。
   **它得排在最上面一层**：排在整幅那层压暗下面的话，底边会被再压暗 28%，变成 (43,0,48)，和下一块的 --plum 差出一道边（实测） */
.hero-shot::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(to top,var(--plum) 0%,rgba(40,0,46,.84) 14%,rgba(14,0,18,.56) 34%,
      rgba(10,0,14,.2) 52%,transparent 68%),
    linear-gradient(rgba(12,0,16,.28),rgba(12,0,16,.28)),
    linear-gradient(215deg,rgba(18,0,22,.34) 0%,rgba(18,0,22,.08) 28%,
      transparent 48%)}
/* 盖满整张照片的链接，保住"点图任意处进文章"。
   **`z-index` 要低于 `.hero-cap`**（2 < 3）—— 高了就会盖住标题上那个真链接，
   表现是点标题和点图去的是同一篇（碰巧一样，所以很难发现），
   而键盘 Tab 也会停在一个空链接上。`aria-hidden` + `tabindex=-1`：
   它和标题链接指向同一篇，读屏器和键盘只需要后者。 */
.hero-hit{position:absolute;inset:0;z-index:2;display:block}
/* 文案区压在照片底部。收在版心里 —— 照片是满宽的，但字要和全站其余内容
   对齐在同一条左边线上，否则标题看起来是"浮在图上"而不是这一页的开头。
   **不要给它底色**：试过白底块，只有版心宽、两侧露出紫色底，比压在照片上难看。

   **它在 `.hero-shot` 里面，锚的是照片、不是 `.hero-in`。**
   放在 `.hero-in` 下面时窄屏会出事：那时赛程面板回到文档流、把 `.hero-in`
   从 461px 撑到 1299px，而 `bottom:0` 于是把标题带到面板**底下**
   （实测照片 63~524，标题却落在 1130~1264）。挂在照片自己的盒子上，
   任何宽度都贴着照片底边，不需要窄屏特例。 */
.hero-cap{position:absolute;left:0;right:0;bottom:0;z-index:3;
  max-width:var(--wrap);margin:0 auto;
  padding:var(--hero-pad) var(--gut)}
/* 标题层也叠着，跟着图一起切。

   **文字不能交叉淡入。** 照片可以 —— 两张图各半透明叠着是个过渡效果；
   但两行大号粗体白字各半透明叠着是**重影**，两条标题都还看得清，
   读者看到的是一团糊字。实测叠加窗口 250ms、占 6% 的时间，
   随手截图三张里两张拍到，不是偶然。

   所以出场快、入场延后：退场 .18s 走完，入场等 .2s 再开始 ——
   中间留一小段空白，任何时刻都只有一层文字。空白比重影好读。 */
/* 五条标题叠在一起轮换，绝对定位（父容器自己是绝对定位的，不会塌）。 */
/* 底下多留 30px 给那排进度条（.hero-segs）：标题落在它上面，进度条的底边和右栏底边同一条线 */
.hero-cap .slide{position:absolute;left:0;right:0;bottom:0;
  max-width:var(--wrap);margin:0 auto;
  padding:var(--hero-pad) var(--gut) calc(var(--hero-pad) + 30px);opacity:0;pointer-events:none;
  transition:opacity .18s ease-in,transform .18s ease-in;
  transform:translateY(9px)}
.hero-cap .slide.on{opacity:1;pointer-events:auto;transform:none;
  transition:opacity .4s ease-out .2s,transform .4s ease-out .2s}
/* **chip 用青色，深字。** 样板里那个 "CHELSEA · 12 AUG" 是亮青底黑字，
   在深色照片上比紫色显眼得多 —— 紫 chip 压在紫遮罩上等于没有。 */
/* **chip 用青色，深字。** 在深色照片上比紫色显眼得多 ——
   紫 chip 压在紫遮罩上等于没有。 */
.hero-chip{display:inline-flex;align-items:center;gap:9px;margin-bottom:13px;
  font-size:11.5px;font-weight:700;color:#fff}
.hero-chip b{background:var(--teal);color:var(--teal-ink);padding:4px 10px;
  border-radius:3px;letter-spacing:.07em;text-transform:uppercase;font-size:10.5px}
.hero-chip span{color:rgba(255,255,255,.78);font-weight:600}
/* **标题拉到 76px。** 原来上限 34px —— 在一张 82vh 的照片上那是个说明文字，
   而这是全站最该被远看的一行字。
   测量用 `ch` 不用 `em`（em 随字号放大，等于没有上限，文章页标题栽过这个坑），
   `text-wrap:balance` 治末行孤字。 */
/* 压在照片上：白字 + 投影。**投影不是装饰** —— 照片亮处（草皮、天空）
   没有它白字就糊掉了。 */
/* **最多三行。** 有些标题很长（实测克洛普那条中文 46 字，占了五行、
   几乎压满整张照片）—— 首屏的标题是"钩子"，不是摘要，超过三行就该截断。
   `-webkit-line-clamp` 是这里唯一可靠的做法：按行截而不是按字数截，
   中英文都适用。 */
/* **宽度要给赛程面板让位。**
   面板是绝对定位浮在右上的，而标题原来只有 `max-width:26ch` —— 它完全不知道
   右边有块面板，于是标题一长就钻到面板底下（实测 1568 宽时重叠 178px，
   1440 和 1200 也各重叠约 100px）。
   `26ch` 保留（长标题的舒适测量），再叠一个**按面板宽度算出来的上限**：
   版心宽 − 面板宽 − 40px 间隔。两者取小的那个。
   面板宽是 `clamp(300px,26vw,352px)`，这里要写同一个值 —— 改面板宽度时
   记得一起改，否则重叠会悄悄回来。 */
.hero-cap h1{font-size:clamp(26px,4.2vw,68px);line-height:1.04;color:#fff;
  letter-spacing:-.035em;font-weight:800;text-wrap:balance;
  max-width:min(26ch, calc(100% - var(--col-w) - 56px));
  margin:0;text-shadow:0 2px 28px rgba(0,0,0,.6);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden}
/* 大显示器上标题跟着画面放大：68px 压在两千多像素宽的照片上显得小气 */
@media (min-width:1600px){.hero-cap h1{font-size:clamp(64px,3.2vw + 14px,92px)}}
/* 标题自己也是链接（整块 `.hero-shot` 也是 `<a>`，两处都能点）。 */
.hero-cap h1 a{color:#fff;text-decoration:none}
/* 首屏第一张：MCP 上线的海报（2026-10-26）。照片墙 + 玻璃小人是一张图（assets/promo，十张最近的现场照片拼的），
   字是网页上的字，跟着切语言。点了去「账号设置」的 MCP 那一块，没登录先登录 */
.hero-shot img.promo-img{object-position:center}
.hero-sub{margin:14px 0 0;max-width:min(38em,calc(100% - var(--col-w) - 56px));color:rgba(255,255,255,.88);
  font-size:clamp(14px,1.1vw,19px);line-height:1.6;text-shadow:0 1px 18px rgba(0,0,0,.6)}
.hero-cta{display:inline-flex;align-items:center;gap:8px;margin-top:20px;height:46px;padding:0 24px;border-radius:999px;
  background:#fff;color:var(--plum);font-weight:800;font-size:15px;text-decoration:none;
  box-shadow:0 12px 34px rgba(150,60,255,.4);transition:background .2s,color .2s,transform .2s}
.hero-cta:hover{background:var(--teal);color:var(--teal-ink);transform:translateY(-1px)}
@media (max-width:1080px){.hero-sub{max-width:none}.hero-cta{height:42px;margin-top:16px}}
/* 进度条：贴在照片**下边缘**（照片和白色文案区的交界处），走完就换下一条。
   原来它压在照片里、用白色半透明底 —— 现在那个位置既没有文字也没有遮罩，
   一条白线浮在照片上没有依据。贴在交界线上它就成了"照片这一块的进度"。 */
/* 进度条换成一条一段（像「快拍」）：几条头条就几段，走过的满、正在看的那段在长、后面的空着；点哪段就跳到哪条。
   在标题下面、和标题同一条左边线，底边和右栏底边同一条线 —— 原来那条满宽细线贴在照片下沿，
   头图成了一整屏以后它落在折线上，和标题也没有关系了。按钮上下各留 8px，点得到。 */
.hero-segs{position:absolute;z-index:4;left:var(--gut);bottom:calc(var(--hero-pad) - 8px);
  display:flex;gap:6px;width:min(300px,calc(100% - 2 * var(--gut)))}
.hero-segs button{position:relative;flex:1;height:19px;padding:8px 0;border:0;background:none;cursor:pointer}
.hero-segs button::before{content:"";display:block;height:3px;border-radius:2px;background:rgba(255,255,255,.26)}
.hero-segs button i{position:absolute;left:0;right:0;top:8px;height:3px;border-radius:2px;background:#fff;
  transform:scaleX(0);transform-origin:left;transition:transform .12s linear}
.hero-segs button.done i{transform:scaleX(1);transition:none}
.hero-segs button:hover::before{background:rgba(255,255,255,.46)}
.hero-segs button:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:3px}
/* 暂停 / 继续（home.js 的 heroPP）：进度条最右边一颗圆按钮。32px 见方，手指点得到；
   上下用负边距收回去，那一排进度条的高度和位置不变 */
.hero-segs .hero-pp{flex:none;display:grid;place-items:center;width:32px;height:32px;margin:-6.5px 0 -6.5px 4px;padding:0;
  border-radius:50%;background:rgba(255,255,255,.16);color:#fff;transition:background-color var(--t-fast)}
.hero-segs .hero-pp::before{content:none}
.hero-segs .hero-pp svg{width:14px;height:14px}
.hero-segs .hero-pp:hover{background:rgba(255,255,255,.3)}
.hero-segs .hero-pp:focus-visible{border-radius:50%}
/* 首页数据没取到（SITE.fail）：那句话和重试按钮放在照片框里，要压在遮罩（::after）上面才点得到 */
.hero-shot>.mp-fail{position:relative;z-index:3;height:100%;padding-top:calc(var(--tb-h) + 24px)}

/* ── 赛程面板 ──
   **白底，日期是深紫横条。** 这是样板里这块的骨架：面板本身是白色卡片，
   只有两处深紫 —— 选中的 tab 和每个日期分组的标题条。比赛行是白底深字。
   我之前整块做成深紫，结果它和左边的照片糊成一片，而样板里这块是"亮的"，
   和照片形成明暗对比。 */
/* **浮在照片右上，不再和照片分栏。**
   原来它是网格的第二列（372px），把照片压成 1040px 宽的横幅 ——
   而首屏只该讲一件事。现在它绝对定位在版心右侧，照片完整铺满。
   仍然是白底：和深色照片的明暗对比是这块存在感的来源，做成半透明
   玻璃会让比分糊在照片上（这块的注释原来就记着"我之前整块做成深紫，
   结果和照片糊成一片"）。
   投影给得比全站其余卡片重 —— 它是**浮在**照片上的，不是排在纸上的。 */
.sched{background:#fff;overflow:hidden;display:flex;flex-direction:column}
/* ── 右栏：赛程面板在上、倒计时在下，一起从标题那条底线往上长（2026-10-12）──
   原来面板钉在照片右上、最高 560px，倒计时是照片下面单独一条紫带 —— 大显示器上面板只占右上角一小块、
   和压在左下的标题隔着大半张照片，倒计时还掉在折线下面（用户：「table 很短，标题沉到很下面」）。
   现在两块叠成一栏、和标题同一条底边；内容多高就多高，顶到顶栏下面为止，再多就面板里自己滚。
   桌面上两块都是深色毛玻璃（见下面 min-width:1081px 那段）：一整屏照片上浮着一张白卡片，
   读起来是「贴上去的」；压暗、模糊过的玻璃是照片的一部分。窄屏不变：面板回到文档流、白底。 */
.hcol{position:absolute;z-index:4;
  right:max(var(--gut),calc((100% - var(--wrap)) / 2 + var(--gut)));
  bottom:var(--hero-pad);width:var(--col-w);
  max-height:calc(100% - var(--tb-h) - var(--hero-pad) - 20px);
  display:flex;flex-direction:column;gap:10px}
.hcol>.sched{flex:0 1 auto;min-height:0}
.hcol>.cdbar{flex:none}
/* 首屏进场：标题从下面浮上来（home.js 的 paintHero），右栏两块玻璃卡跟着依次浮上来，一屏的东西不在同一帧里一下子全出来。
   两块是页面里写死的元素、不会重画，所以只在第一次画的时候走一次；要求少动效就不动 */
@media (min-width:1081px) and (prefers-reduced-motion:no-preference){
  .hcol>*{animation:hcol-in .9s var(--ease-out) .18s both}
  .hcol>.cdbar{animation-delay:.3s}
}
@keyframes hcol-in{from{opacity:0;transform:translateY(18px)}}
@media (max-width:1080px){
  /* 窄屏回到文档流：浮在照片上会把照片主体全遮住。右栏这一层也拆掉，两块各自排进 .hero 的顺序里 */
  .hcol{display:contents}
  /* 面板不再浮在右上，标题也就不用给它让位了 —— 这里要解除那个上限，
     否则窄屏上标题白白被压窄一半。 */
  .hero-cap h1{max-width:26ch}
}
/* 选择器要对着真实标记写：这里是两个 <button>，不是 b/span。
   写错的后果是两个 tab 都没有选中态 —— 底色透明、看不出当前在哪一页。 */
.sched-tabs{display:grid;grid-template-columns:1fr 1fr;flex:none}
/* **选中态靠"亮"，不靠"深"。**
   原来选中的那个是紫底白字、没选的是白底 —— 在一块白色面板上，白底那个
   反而更跳，于是选中态看起来像没选中（实测截图里「积分榜」比当前的
   「赛程」显眼）。改成：没选的压暗、选中的保持白底 + 一条品牌色底线。
   这也和全站 `.tabrow` 的做法一致（选中项用 `inset 0 -2px` 那条线）。 */
.sched-tabs button{padding:13px 0;text-align:center;font-size:12.5px;
  font-weight:700;background:var(--paper-2);color:var(--ink-3);cursor:pointer;
  transition:.15s}
.sched-tabs button:hover{color:var(--plum);background:#fff}
.sched-tabs button.on{background:#fff;color:var(--plum);
  box-shadow:inset 0 -2px 0 var(--orchid)}
/* 轮次条：深紫，左右箭头 */
.sched-mw{display:flex;align-items:center;justify-content:space-between;
  padding:10px 14px;background:var(--plum);flex:none;
  font-size:12.5px;font-weight:700;color:#fff}
.sched-mw i{font-style:normal;color:rgba(255,255,255,.55);cursor:pointer;
  width:22px;height:22px;display:grid;place-items:center;border-radius:3px;
  transition:.15s;font-size:15px}
.sched-mw i:hover{color:#fff;background:rgba(255,255,255,.16)}
.sched-body{flex:1;min-height:0;overflow-y:auto}
/* 日期分组标题：深紫条、白字 —— 样板里最醒目的分隔 */
.day-h{background:var(--plum);padding:8px 14px;font-size:11.5px;
  font-weight:700;color:#fff;letter-spacing:.02em}
.fxr{display:grid;grid-template-columns:minmax(0,1fr) 48px minmax(0,1fr) auto;
  align-items:center;gap:7px;padding:9px 14px;
  border-bottom:1px solid var(--line-2);transition:background .14s}
.fxr:last-child{border-bottom:0}
.fxr:hover{background:var(--paper-2)}
/* 还没踢的比赛没有数据页可去，所以不可点、也不给 hover 反馈 ——
   变色是「这能点」的承诺，不该对着一个死行做出来。 */
.fxr.nolink:hover{background:none;cursor:default}
.fxr.nolink .ex{visibility:hidden}
.fxr .sd{display:flex;align-items:center;gap:7px;min-width:0}
/* 主队整体靠右、客队整体靠左，两枚队徽因此都落在中间那格旁边 */
.fxr .sd.h{justify-content:flex-end}
.fxr .sd.a{justify-content:flex-start}
.fxr .sd img{width:18px;height:18px;object-fit:contain;flex:none}
.fxr .sd .ph{width:18px;height:18px;background:var(--paper-2);flex:none;
  border-radius:50%}
.fxr .sd span{font-size:11.5px;font-weight:700;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 时间/比分：**深紫字**，不能用浅灰字配浅灰底 —— 那样比分基本看不见，
   而比分是这一行里读者最想看的东西。 */
.fxr .tm{text-align:center;font-size:12px;font-weight:800;color:var(--plum);
  background:var(--paper-2);border-radius:3px;padding:4px 0}
.fxr .ex{width:22px;height:22px;border-radius:3px;display:grid;place-items:center;
  background:var(--paper-2);color:var(--ink-3);flex:none;transition:.15s}
.fxr:hover .ex{background:var(--plum);color:#fff}
.fxr .ex svg{width:11px;height:11px}

/* ── 桌面：右栏两块是深色毛玻璃 ──
   **压暗 + 重模糊，比分才不会糊在照片上。** 以前试过半透明面板，比分和照片里的细节混在一起；
   模糊到 24px 以后背后只剩大块颜色，再压一层 .6 的深紫，白字和白卡上的深字一样清楚。
   日期条不再是实心紫条（压在玻璃上太重），改成一行小号大写字 + 极浅的底。 */
@media (min-width:1081px){
  .hcol>.sched,.hcol>.cdbar{background:rgba(18,4,24,.6);
    -webkit-backdrop-filter:blur(24px) saturate(1.5);backdrop-filter:blur(24px) saturate(1.5);
    border:1px solid rgba(255,255,255,.12);border-radius:18px;
    box-shadow:0 24px 60px rgba(8,0,12,.42),inset 0 1px 0 rgba(255,255,255,.07)}
  .hcol .sched-tabs{padding:6px;gap:4px}
  .hcol .sched-tabs button{border-radius:12px;background:none;color:rgba(255,255,255,.6)}
  .hcol .sched-tabs button:hover{background:rgba(255,255,255,.08);color:#fff}
  .hcol .sched-tabs button.on{background:rgba(255,255,255,.14);color:#fff;box-shadow:none}
  .hcol .sched-mw{background:none;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08)}
  .hcol .day-h{background:rgba(255,255,255,.045);color:rgba(255,255,255,.6);font-size:10.5px;
    letter-spacing:.12em;text-transform:uppercase;padding:9px 16px}
  .hcol .fxr{padding:clamp(9px,1.05vh,13px) 16px;border-bottom-color:rgba(255,255,255,.06)}
  .hcol .fxr:hover{background:rgba(255,255,255,.06)}
  .hcol .fxr.nolink:hover{background:none}
  .hcol .fxr .sd span{color:#fff}
  .hcol .fxr .sd .ph{background:rgba(255,255,255,.12)}
  .hcol .fxr .tm{background:rgba(255,255,255,.1);color:#fff}
  .hcol .fxr .ex{background:rgba(255,255,255,.08);color:rgba(255,255,255,.6)}
  .hcol .fxr:hover .ex{background:#fff;color:var(--plum)}
  .hcol .strow{border-bottom-color:rgba(255,255,255,.06)}
  .hcol .strow:hover{background:rgba(255,255,255,.06)}
  .hcol .strow .cl{color:#fff}
  .hcol .strow :is(.pos,.pl){color:rgba(255,255,255,.55)}
  .hcol .strow .pos.ucl{color:#fff}
  .hcol .strow .pos.rel{color:#ff8a80}
  .hcol .strow .pt{color:#fff}
  .hcol .litescroll{scrollbar-color:rgba(255,255,255,.28) transparent}
  .hcol .litescroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.24)}
  /* 面板里等数据时的加载动画：图深浅底通用，只把字换白（容器写的是浅底那一档，因为窄屏上面板是白的） */
  .hcol .mpl-cap{color:rgba(255,255,255,.62)}
  /* 倒计时收进右栏：标签一行、四格数字一行、下一轮的场次一行，和面板同宽 */
  .hcol .cdbar-in{max-width:none;margin:0;padding:16px 18px 15px;display:block}
  .hcol .cdclock{padding-left:0;flex-wrap:wrap;gap:6px 18px}
  .hcol .cdlabel{flex:1 1 100%}
  .hcol .cdcell b{font-size:26px}
  .hcol .cdnext{margin-top:14px}
  .hcol .cdnext-in{padding:0;gap:16px}
}

/* **深紫，不是亮紫。** 样板里这条和顶栏选中项、日期条是同一个紫；
   亮紫太抢，会把它变成整页最响的东西，而它只是一条辅助信息。
   也不要 margin-top —— 样板里它紧贴着照片，是拼接的一部分。 */
/* ── 首屏的页脚行 ──

   **倒计时和下一轮是一行，不是两条横带。** 它们原来各占一条（52+80=133px），
   一条居中、一条左对齐，而头图标题的左边线又在第三个位置 —— 三种对齐摞在
   一起，看起来就是"一个个加上去的"，而不是一块设计。

   现在两者共用一行：左边倒计时，右边下一轮，左边线和头图标题对齐、
   右边线和赛程面板的右边缘对齐。整块和头图同一个底色、中间没有分隔线，
   所以它读起来是头图的页脚，而不是新的一节。 */
.cdbar{background:var(--plum)}
/* **上下要有真实的内边距，不能只靠 `min-height` 居中。**
   原来是 `padding:0` + `min-height:76px`：倒计时在 76px 里垂直居中，
   于是它和照片下边缘之间**一点缓冲都没有**，读起来是"吸在照片底下"
   而不是"照片的页脚"（用户指出的正是这个）。
   页脚和内容之间的呼吸感来自留白，而 `min-height` 给的是盒子高度，不是留白。 */
.cdbar-in{max-width:var(--wrap);margin:0 auto;
  padding:clamp(18px,2.2vw,28px) 0 clamp(16px,2vw,24px);
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(16px,3vw,40px);flex-wrap:wrap}
/* 左格的内缩和 .hero-cap 一致 —— 倒计时的标签正落在标题下方 */
.cdclock{display:flex;align-items:center;flex:none;
  gap:clamp(10px,1.8vw,24px);padding-left:clamp(20px,3vw,40px)}
/* 四格（天 / 时 / 分 / 秒）是一组，间距跟着 .cdclock 走（inherit：窄屏、右栏里各自的那一档） */
.cdcells{display:flex;align-items:center;gap:inherit;flex-wrap:wrap}
.cdlabel{font-size:11px;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:rgba(255,255,255,.72)}
.cdcell{display:flex;align-items:baseline;gap:5px;color:#fff}
/* 比原来小三档：这一行是页脚，不该和标题抢分量 */
.cdcell b{font-size:23px;font-weight:800;line-height:1;min-width:2ch;
  text-align:center;letter-spacing:-.01em}
.cdcell span{font-size:11px;font-weight:700;opacity:.76}

@media (max-width:1080px){
  /* 窄屏头图变单栏，页脚也跟着回到普通栅格并换行堆叠 */
  .cdbar-in{padding:12px var(--gut);justify-content:flex-start;min-height:0}
  /* 英文一行（标签 + Days/Hrs/Min/Sec）在手机上比屏幕宽（390 宽宽出 10px，「Sec」被切掉）：
     放不下时四格整组换到标签下面一行（和桌面右栏里的排法一样），中文放得下就照旧一行 */
  .cdclock{padding-left:0;flex:0 1 auto;flex-wrap:wrap;row-gap:6px}

  /* **页脚行插到照片和赛程面板之间。**
     两栏并排时"在两栏下面"就是紧贴头图；堆成一列之后，同一个位置变成了
     "在整块赛程面板下面" —— 手机上要滑过五行比分才看得到倒计时，
     而它恰恰是最该先看到的（两行高、还带时间压力）。

     `.cdbar` 是 `.hero-in` 的兄弟，不是那两栏的兄弟，所以单靠 order 跨不过
     这层嵌套。`display:contents` 把 `.hero-in` 的盒子去掉，三块就成了同一层
     的兄弟，order 才能排。（它在窄屏上只承担 max-width 居中，而这里视口
     本来就比 --wrap 窄，去掉没有视觉影响。） */
  .hero{display:flex;flex-direction:column}
  .hero-in{display:contents}
  .hero-shot{order:1}
  .cdbar{order:2}
  .sched{order:3}
  /* 窄屏的面板是白卡片接在倒计时条下面，圆角和投影只在桌面浮着的时候要 */
  .sched{border-radius:0}
}

/* ── 倒计时后面的「下一轮」赛程 ──

   **按开球时刻成组，不是排成一列清单。** 下一轮常有三四场同一时刻开球
   （实测第 6 轮有三场都是 21:00），把它们摊成四行等于说了四遍同一个时间；
   成组之后读者看到的是"这个点有三场"，那才是他要的信息。

   整条压在倒计时下面、共用同一块深紫底 —— 它是倒计时的下文，不是新的一节。 */
/* 下一轮是页脚行的右格。没有 border-top —— 它不再是独立的一条，
   加分隔线就等于又把它切出去。右边线和上方赛程面板的右边缘同一条
   （两者都是 max-width:var(--wrap) 居中，所以任何宽度下都对得齐）。 */
/* **它事实上总是独立一行，所以按独立一行来排。**
   原来的设计是"左倒计时、右下一轮"共用一行、两端对齐。但实测在
   1200~1568px 下这两块**永远换行**（下一轮有五六组，横向放不下）——
   也就是说那个两端对齐从来没生效过，而 `.cdnext` 还带着为它准备的右内缩，
   于是这一行的左边线比倒计时缩进了一截，看起来是歪的。
   现在让它占满整行、左对齐 —— 和倒计时、和头图标题同一条左边线。 */
.cdnext{flex:1 1 100%;min-width:0;display:flex;justify-content:flex-start}
.cdnext-in{display:flex;align-items:center;gap:clamp(14px,2.2vw,28px);
  padding:0 clamp(20px,3vw,40px);
  overflow-x:auto;scrollbar-width:none}
.cdnext-in::-webkit-scrollbar{display:none}

/* 每个开球时刻一组 */
/* 一组 = 时刻 + 它那几场。**竖排（时刻在上、胶囊在下）** ——
   横排会让"21:00"和三枚胶囊连成一条长龙，读者分不清哪几场属于哪个时刻。 */
.cdslot{flex:none;display:flex;flex-direction:column;gap:6px}
.cdslot-t{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;
  font-weight:800;letter-spacing:.08em;color:rgba(255,255,255,.62);
  white-space:nowrap}
/* 时刻前面那个点：同一时刻的多场共用一个，强调"这是一个时间点" */
.cdslot-t::before{content:"";width:5px;height:5px;border-radius:50%;
  background:var(--orchid-2);flex:none}
.cdslot.soon .cdslot-t{color:#fff}
.cdslot.soon .cdslot-t::before{background:var(--teal);
  box-shadow:0 0 0 3px rgba(0,224,198,.2)}

/* 一场比赛：两枚队徽夹一个 vs。**不写队名** —— 队徽在这个尺寸上认得出来，
   而四场比赛的队名会把整条挤成两行。 */
.cdgames{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cdgame{display:inline-flex;align-items:center;gap:5px;
  padding:5px 9px;border-radius:999px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);
  color:#fff;text-decoration:none;transition:background .16s,border-color .16s}
.cdgame:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.26)}
.cdgame img{width:17px;height:17px;object-fit:contain;display:block}
.cdgame i{font-style:normal;font-size:9px;font-weight:800;
  color:rgba(255,255,255,.45);letter-spacing:.04em}
/* 最近那一组的胶囊亮一档，和它的青色时间点呼应 */
.cdslot.soon .cdgame{background:rgba(0,224,198,.1);
  border-color:rgba(0,224,198,.28)}
.cdslot.soon .cdgame:hover{background:rgba(0,224,198,.18)}

@media (max-width:700px){
  .cdnext-in{padding-top:11px;padding-bottom:12px;gap:16px}
  .cdgame{padding:4px 7px}
  .cdgame img{width:15px;height:15px}
}

/* 列线和正下方的新闻区（.news-grid）用同一套：同样的 1.32fr / 1fr、同样的 20px 间距、同样在 900px 折成一列。
   原来这里是等宽两列、间距 44px，上下两块的列线差了 80px，读起来像两个拼在一起的页面 */
.brief-radio{font:750 12px var(--sans);color:var(--teal);padding:10px 0;margin-left:auto;white-space:nowrap}
.brief-radio:hover{text-decoration:underline;text-underline-offset:4px}
.stgrid{display:grid;grid-template-columns:1.32fr 1fr;column-gap:20px;border-top:1px solid var(--line)}
@media (max-width:900px){.stgrid{grid-template-columns:minmax(0,1fr)}}
.news{padding:30px 0 34px}
/* ── 话题 tab ──
   **药丸，选中项深紫实心。** 样板里是一排圆角块，不是带下划线的文字。
   右边一个「全部新闻 →」。 */
.tabs{display:flex;align-items:center;gap:6px;margin-bottom:20px;
  overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{height:34px;padding:0 16px;border-radius:5px;font-size:13px;
  font-weight:700;color:var(--ink-2);background:var(--paper-2);
  white-space:nowrap;cursor:pointer;transition:.15s}
.tabs button:hover{background:#ece7ee;color:var(--plum)}
.tabs button.on{background:var(--plum);color:#fff}
.tabs .all{margin-left:auto;color:var(--plum);font-weight:700;font-size:13px;
  white-space:nowrap}
.news-grid{display:grid;grid-template-columns:1.32fr 1fr;gap:20px}
@media (max-width:900px){.news-grid{grid-template-columns:1fr}}
/* 主卡：图上直接压标题（样板就是这样，不是图在上、字在下） */
.nlead{position:relative;display:block;overflow:hidden;min-height:340px;
  background:var(--plum-2)}
.nlead .shot{position:absolute;inset:0}
.nlead .shot img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.nlead:hover .shot img{transform:scale(1.04)}
.nlead::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(20,0,24,.94) 0%,rgba(20,0,24,.5) 38%,
    transparent 72%)}
.nlead .txt{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:22px}
.nlead h3{font-size:clamp(19px,1.9vw,26px);line-height:1.2;color:#fff;
  margin:10px 0 0}
.nlead .meta{font-size:11.5px;color:rgba(255,255,255,.72);display:flex;gap:9px;
  align-items:center}
/* 侧栏三张：零间隙拼接，**悬停整块变深紫** —— 样板里那张深色卡就是悬停态 */
.nside{display:flex;flex-direction:column;border:1px solid var(--line)}
.ncard{display:grid;grid-template-columns:minmax(0,1fr) 116px;gap:13px;
  padding:13px;border-bottom:1px solid var(--line);
  transition:background .18s,color .18s}
.ncard:last-child{border-bottom:0}
.ncard:hover{background:var(--plum)}
.ncard h4{font-size:14px;line-height:1.34;font-weight:700;margin:7px 0 0;
  transition:color .18s}
.ncard:hover h4,.ncard:hover .meta{color:#fff}
.ncard .shot{aspect-ratio:4/3;overflow:hidden;background:var(--paper-2)}
.ncard .shot img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.ncard:hover .shot img{transform:scale(1.05)}
.ncard .meta{font-size:11px;color:var(--ink-3);transition:color .18s}
/* 悬停时那个青色小标签要翻成白底深字，否则青底白字看不清 */
.ncard:hover .nbadge{background:var(--teal);color:var(--teal-ink)}

.promo{padding:0 0 42px}
.promo-in{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut);
  display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:16px}
/* minmax(0,…)：裸 1fr 的下限是内容最小宽度，订阅框（输入框 + 英文按钮）比手机屏宽，整页被撑出横滚 */
@media (max-width:900px){.promo-in{grid-template-columns:minmax(0,1fr)}}
.pflat{background:var(--paper-2);border:1px solid var(--line);min-height:230px;
  padding:22px;display:flex;flex-direction:column;justify-content:space-between}
.pflat h4{font-size:17px;line-height:1.26;margin-bottom:10px}
.pflat p{font-size:12.5px;color:var(--ink-2);line-height:1.6;margin:0}
.go{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;
  border-bottom:1px solid rgba(255,255,255,.4);padding-bottom:2px;color:#fff}
.pflat .go{color:var(--plum);border-bottom-color:var(--line)}
.pflat .go:hover{color:var(--orchid);border-bottom-color:var(--orchid)}

/* ── 每日简报 ──
   **深色通栏，不是白底列表。** 第一版是一条竖线加编号，夹在两片白色卡片区
   中间 —— 它和周围的东西长得一样，于是读者眼里它就只是"又一个列表"。
   简报是一天的总账，值得一块自己的版面。

   深色还有一个实际好处：它把首页切成"头图 / 简报 / 报道"三段，
   而之前头图下面直接接列表，两块白色连在一起分不出层次。 */
/* 上沿不画线。原来有一道兰花色渐变细线，因为它上面贴着同样深紫的倒计时条、两块分不开；
   2026-10-12 起倒计时收进了头图右栏，简报上面要么是「场边」（下沿就是 --plum-2，接得上），
   要么（没比赛的日子）直接是头图的底（--plum，见下面 .touch[hidden]+.brief）—— 都用不着线。 */
.brief{position:relative;background:var(--plum-2);overflow:hidden;
  padding:clamp(26px,3.4vw,44px) 0 clamp(24px,3vw,38px)}
/* 左上角一团兰花色光。和人物页头部同一套手法，让纯深色不至于发闷 */
.brief::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 100% at 8% 0%,rgba(150,60,255,.34),transparent 60%)}
/* 右下角一团青色，两团颜色对角呼应 */
.brief::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 80% at 96% 100%,rgba(0,224,198,.13),transparent 62%)}
.brief .wrap{position:relative;z-index:2}

.brief-hd{display:flex;align-items:flex-end;justify-content:space-between;
  gap:16px;flex-wrap:wrap;margin-bottom:clamp(16px,2vw,24px)}
.brief-hd h2{color:#fff;font-size:clamp(22px,3.1vw,38px);line-height:1.02;
  letter-spacing:-1.1px}
/* 日期那行贴在标题右侧下沿，带一个青色小点 —— 一眼能看出"这是今天的" */
.brief-m{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;
  font-weight:700;color:rgba(255,255,255,.72);letter-spacing:.02em;
  padding-bottom:4px}
.brief-m::before{content:"";width:6px;height:6px;border-radius:50%;
  background:var(--teal);box-shadow:0 0 0 3px rgba(0,224,198,.22)}

/* 要点排成两列。一列在宽屏上会拉出很长的行，读起来费劲；
   两列同时让这一块的高度收在一屏内。 */
/* **最多两列，而且按列排。** `auto-fit` 在 1460px 上排出了三列，于是
   01 02 03 在上排、04 05 在下排 —— 而眼睛在多列文字里是往下走的，
   读出来的顺序变成 01→04。`grid-auto-flow:column` 让它先填满左列再到右列，
   顺序就和编号一致了。 */
/* **行数跟着条数走（`--rows` = 条数/2 向上取整，脚本里设），不能写死。**
   原来写死 3 行，只装得下 6 条：2026-10-02 的中文简报有 13 条，多出来的被自动流
   排进第 3、4、5 列，这三列按内容取宽、把两根正经的 `1fr` 列挤成一条缝 ——
   每行两三个字，序号叠在一起。 */
.brief-list{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:repeat(var(--rows,3),auto);grid-auto-flow:column;
  gap:2px clamp(24px,3vw,56px)}
.brief-list li{position:relative;display:grid;
  grid-template-columns:clamp(38px,3.4vw,52px) 1fr;align-items:start;
  gap:clamp(8px,1vw,14px);padding:13px 0;
  border-top:1px solid rgba(255,255,255,.1);
  color:rgba(255,255,255,.9);font-size:14.5px;line-height:1.6;
  /* 逐条淡入。**不是装饰** —— 五条同时出现时眼睛不知道从哪读起，
     错开 60ms 就自然有了顺序。序号 `--i` 由脚本给，原来只给前五条写了延迟，
     第六条起全都同时冒出来；第八条以后不再加，条数多时也不让人干等。 */
  animation:briefIn .5s cubic-bezier(.2,.7,.3,1) both;
  animation-delay:calc(.02s + min(var(--i,0),8) * .06s)}
@keyframes briefIn{from{opacity:0;transform:translateY(9px)}
  to{opacity:1;transform:none}}
/* 大号序号。数字本身是装饰（顺序已经由排列表达），所以可以放大压淡；
   放大之后它同时起到分隔作用，两列之间不需要再画竖线。 */
.brief-list li b{font:800 clamp(26px,2.6vw,40px)/.86 var(--sans);
  color:transparent;-webkit-text-stroke:1.4px rgba(178,118,255,.85);
  font-variant-numeric:tabular-nums;letter-spacing:-1px}
.brief-list li span{padding-top:clamp(3px,.5vw,7px)}
/* 悬停时那条要点提亮，并把序号填实 —— 给一点"读到这儿了"的反馈 */
.brief-list li:hover{color:#fff}
.brief-list li:hover b{color:rgba(178,118,255,.9);-webkit-text-stroke:0}

/* 争议那行是简报里唯一的编辑观点，所以给它青色 —— 全站只有这里用，
   读者扫一眼就知道"这行不是事实陈述"。 */
.brief-hot{margin-top:clamp(16px,2vw,24px);display:flex;gap:12px;
  align-items:flex-start;padding:14px clamp(14px,1.6vw,20px);
  border-radius:13px;background:rgba(0,224,198,.09);
  border:1px solid rgba(0,224,198,.26);
  font-size:13.5px;line-height:1.62;color:rgba(255,255,255,.9)}
/* `hidden` 要压得住上面那句 display:flex —— 浏览器自带的 [hidden]{display:none} 权重比它低，
   不写这一句的话「没有争议」的那天这里会留一个空的青色框。下面的 .cdnext 同理。 */
.brief-hot[hidden],.cdnext[hidden]{display:none}
.brief .source-links a,.brief .source-links.compact a{color:rgba(255,255,255,.72);text-decoration-color:rgba(255,255,255,.25)}
.brief .source-links a:hover{color:#fff;text-decoration-color:#fff}
.brief .source-links small{color:rgba(255,255,255,.5)}
.brief-sources{margin-top:24px;padding-top:16px;border-top:1px solid rgba(255,255,255,.14)}
.brief-sources summary{cursor:pointer;font-size:12px;color:rgba(255,255,255,.72)}
.brief-sources p{font-size:12px;line-height:1.6;color:rgba(255,255,255,.6);margin:12px 0}
.brief-hot b{flex:none;font-size:10.5px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--teal);
  padding:3px 8px;border-radius:999px;background:rgba(0,224,198,.14);
  white-space:nowrap;margin:1px 0 0}
/* 「节目里在聊」：简报下面一排（最多三条，窄屏一条一行）。一条是一句主张，下面一行「谁 · 节目 · 第几分钟」是链接。
   和上面的要点同一种安静的排法：发丝线隔开、直角、不加底色；小标题用要点序号描边的那个兰花色 */
.brief-views{margin-top:clamp(18px,2.2vw,28px)}
.brief-views h3{margin:0 0 4px;font-size:10.5px;font-weight:800;line-height:1.4;letter-spacing:.08em;
  text-transform:uppercase;color:var(--orchid-2)}
.brief-views ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0 clamp(24px,3vw,56px)}
.brief-views li{min-width:0;padding:12px 0 4px;border-top:1px solid rgba(255,255,255,.1)}
.brief-views li b{display:block;font-size:14px;font-weight:650;line-height:1.55;color:rgba(255,255,255,.92);
  overflow-wrap:anywhere}
/* 这一行是链接：至少 24px 高，手机上按得准 */
.brief-views li a{display:inline-block;margin-top:2px;padding:3px 0;font-size:12px;line-height:1.5;
  color:rgba(255,255,255,.62);overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.brief-views li a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.brief-views li a:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
@media (max-width:700px){
  /* **`grid-auto-flow` 和 `grid-template-rows` 都要重置,不只是列。**
     这一块用 `grid-auto-flow:column` + `grid-template-rows:repeat(3,auto)`
     排成「每列三行」。只把 `grid-template-columns` 改成 `1fr` 不起作用 ——
     自动流仍然横着建新列,于是 390px 的手机上还是两列,每条文字只剩
     约 90px:中文一行排 2~3 个字,`He is Absolute Guff` 断成四行,
     而且 01/02/03 在左栏、04/05 在右栏,读的时候要跨过中间空隙跳。
     实测计算值是 `119px 214.9px` —— 两列宽度还不相等,那是内容在决定列宽,
     一眼就能看出模板没在管事。 */
  .brief-list{grid-template-columns:1fr;grid-template-rows:none;
    grid-auto-flow:row;gap:0}
  .brief-list li{font-size:14.5px;line-height:1.65;
    padding:13px 0;border-top:1px solid rgba(255,255,255,.1)}
  .brief-list li:first-child{border-top:0}
  /* 序号窄屏收小一档:它是次要信息,不该和正文抢宽度 */
  .brief-list li>i{font-size:15px}
  .brief-hot{flex-direction:column;gap:8px}
  .brief-views ul{grid-template-columns:1fr}
}
/* 有人把动效关了就别动 —— 这条不是可选的礼貌，是无障碍要求 */
@media (prefers-reduced-motion:reduce){
  .brief-list li{animation:none}
}

/* 正在踢的那一行：比分给青色（全站只有实况用它），后面跟一个跳动的分钟数。
   **不改行高也不改列宽** —— 分钟数用绝对定位挂在比分右侧，
   否则一场比赛开踢会让整张赛程表的列宽跳一下。 */
.fxr.islive .sc{color:var(--teal)}
.fxr .tm{position:relative}
/* **分钟数放在比分下面，不放右边。** 挂在右侧会压到客队队徽上 ——
   实测它落在 x=1109 而比分容器右边界是 1104，正好盖住徽章，
   读起来像个噪点而不是分钟数。垫在下方则不与任何东西重叠，
   也仍然不影响行高（绝对定位）。 */
.fxr .mn{position:absolute;left:50%;top:100%;transform:translateX(-50%);
  margin-top:-1px;font-style:normal;font-size:9px;font-weight:800;
  color:var(--teal);white-space:nowrap;letter-spacing:.02em;
  animation:livePulse 2s ease-in-out infinite}
@keyframes livePulse{0%,100%{opacity:1}50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){.fxr .mn{animation:none}}

.leaders{padding:0 0 46px}
/* **零间隙拼接**：三张卡贴在一起成一整条，靠 1px 分隔线断开，
   而不是靠间距。样板里所有并排的块都是这么接的 —— 有间距就散了。 */
.lead-cardsw{display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border:1px solid var(--plum-2);overflow:hidden}
.lead-cardsw>.lcard+.lcard{border-left:1px solid rgba(255,255,255,.12)}
@media (max-width:940px){
  .lead-cardsw{grid-template-columns:1fr}
  .lead-cardsw>.lcard+.lcard{border-left:0;border-top:1px solid rgba(255,255,255,.12)}
}
/* 卡片本身是「竖色条 + 内容」两列 —— 那条竖色块是样板里最醒目的元素 */
.lcard{background:var(--plum);display:grid;grid-template-columns:34px minmax(0,1fr)}
.lc-rail{position:relative;display:grid;place-items:center;
  border-right:1px solid rgba(255,255,255,.1)}
/* 竖排的组名。writing-mode 比 rotate 稳：它参与布局，不会溢出容器。
   **不要再加 rotate(180deg)** —— 那是拉丁字母竖排的习惯（让它从下往上读），
   套在中文上会把字整个倒过来。中文在 vertical-rl 下本来就是正着往下读的。 */
.lc-rail b{writing-mode:vertical-rl;
  font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:#fff;white-space:nowrap}
/* 三组各一个色，让这一排读起来是三块颜色而不是一片紫 */
.lcard:nth-child(1) .lc-rail{background:var(--orchid)}
.lcard:nth-child(2) .lc-rail{background:var(--teal)}
.lcard:nth-child(3) .lc-rail{background:var(--plum-2)}
.lc-main{display:flex;flex-direction:column;min-width:0}
.lc-hd{display:flex;align-items:baseline;justify-content:space-between;
  gap:10px;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.1)}
.lc-hd b{color:#fff;font-size:14px;font-weight:800}
/* 报道量：.45 的白在深紫上 4.13，还差一点，提到 .6 */
.lc-hd span{color:rgba(255,255,255,.6);font-size:11px;font-weight:600}
/* ── 榜单卡的人像区 ──
   样板里这块有三层：**最底是大号淡球衣号**、中间是球员照片、
   **右上角一块斜切的国旗**。这三样我一个都没做，所以卡片看起来是空的。 */
.lc-hero{position:relative;aspect-ratio:1/.92;overflow:hidden}
/* 大号球衣号。
   **样板把它放在球员身后，我们做不到** —— 样板用的是抠好的透明人像，数字能从
   身后透出来；我们的 `thumb` 是整幅照片，压在后面等于完全看不见（试过，
   截图上一点痕迹都没有）。所以改成压在照片**之上**的左上角，
   用低透明度 + 混合模式让它像印在画面里，而不是贴上去的标签。 */
.lc-num{position:absolute;left:12px;top:4px;z-index:2;
  font:900 clamp(56px,7vw,86px)/1 var(--sans);color:rgba(255,255,255,.3);
  letter-spacing:-.05em;pointer-events:none;font-variant-numeric:tabular-nums;
  mix-blend-mode:overlay;text-shadow:0 2px 18px rgba(0,0,0,.3)}
/* 右上角斜切国旗：用 clip-path 切一个三角，国旗填在里面 */
.lc-flag{position:absolute;right:0;top:0;z-index:3;width:74px;height:74px;
  clip-path:polygon(100% 0,100% 100%,0 0);overflow:hidden;pointer-events:none}
.lc-flag img{position:absolute;right:0;top:0;width:100%;height:100%;
  object-fit:cover}
/* 所有人的图叠在一起，靠 .on 决定显示谁（.xfade 负责淡入淡出）。
   object-position:top center 是因为球员图多为半身，人脸在上半部分。 */
.lc-hero>img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:top center}
/* 外联赛用透明底全身像（751×1120）。原样 cover 会塞进整个人、脸很小；
   放大到 2.5 倍、从头顶往下取，画面落在头到腰 —— 和英超官方半身照同一构图
   （1.75 倍实测是头到大腿，还是全身照的感觉）。
   全身像顶部约 10% 是留白，但各人头顶位置不一（实测上移 20% 会切掉个子高的人的头顶），
   所以只上移 12%，头顶留一点空不贴边。 */
.lc-hero>img.cut{height:250%;top:-12%;object-position:center top}
.lc-hero .nm small.why{color:rgba(255,255,255,.78);margin-top:4px}
/* 名牌也叠着，跟着图一起切 */
.lc-hero .nm{transition:opacity .32s ease}
/* 遮罩由 .veiled 提供，这里把它的伪元素压在图之上、名牌之下 */
.lc-hero.veiled::after{z-index:1}
.lc-hero .nm{z-index:2}
.lc-hero .nm{position:absolute;left:0;right:0;bottom:0;padding:40px 16px 14px;
  display:flex;align-items:flex-end;justify-content:space-between;gap:12px;
  background:linear-gradient(to top,rgba(42,0,46,.98) 0%,rgba(42,0,46,.66) 46%,transparent 100%)}
.lc-hero .nm b{color:#fff;font-size:17px;font-weight:800;line-height:1.16;
  display:block}
.lc-hero .nm small{display:flex;align-items:center;gap:6px;margin-top:5px;
  color:rgba(255,255,255,.62);font-size:11px;font-weight:600}
.lc-hero .nm small img{width:14px;height:14px;object-fit:contain}
.lc-hero .big{font-size:42px;font-weight:800;color:#fff;line-height:.84;
  flex:none;letter-spacing:-.03em}
.lc-list{display:flex;flex-direction:column}
.lc-row{display:grid;grid-template-columns:20px 17px minmax(0,1fr) auto;
  align-items:center;gap:10px;padding:8px 16px;
  border-top:1px solid rgba(255,255,255,.07);transition:background .14s}
.lc-row:hover{background:rgba(255,255,255,.06)}
/* 排名序号：.38 的白在深紫上只有 3.24，提到 .55 才够读（5.4） */
.lc-row .rk{font-size:11.5px;font-weight:700;color:rgba(255,255,255,.55)}
.lc-row img{width:17px;height:17px;object-fit:contain}
.lc-row .nmz{font-size:12.5px;font-weight:500;color:rgba(255,255,255,.9);
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lc-row .vl{font-size:13.5px;font-weight:700;color:#fff}

/* ── 赛果轮播 ──
   **样板的结构是「左文字栏 + 右深紫面板」**，不是一整条深紫通栏。
   左边：标题、说明、按钮、翻页箭头（箭头在左下角，不在右上角）。
   右边：深紫面板里一排竖向卡，每张卡是 上人像 / 中大图 / 下比分条。
   面板向右出血到屏幕边缘 —— 样板里卡片是被裁断的，暗示"还有更多"。 */
.reels{background:#fff;padding:34px 0 40px;overflow:hidden}
.reels-in{max-width:var(--wrap);margin:0 auto;padding:0 0 0 var(--gut);
  display:grid;grid-template-columns:270px minmax(0,1fr);gap:30px;
  align-items:start}
@media (max-width:900px){
  .reels-in{grid-template-columns:1fr;gap:18px;padding:0 var(--gut)}
}
.reels-txt .eyebrow{font-size:11px;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:9px;
  padding-bottom:9px;border-bottom:2px solid var(--teal);display:inline-block}
.reels-txt h2{font-size:clamp(24px,2.6vw,34px);line-height:1.06;
  letter-spacing:-.6px;margin-bottom:12px}
.reels-txt p{color:var(--ink-2);font-size:13px;line-height:1.7;margin:0 0 18px}
.reels-nav{display:flex;gap:8px;margin-top:22px}
.reels-nav button{width:34px;height:34px;border:1px solid var(--line);
  background:#fff;color:var(--plum);cursor:pointer;border-radius:50%;
  display:grid;place-items:center;font-size:15px;line-height:1;transition:.15s}
.reels-nav button:hover{background:var(--plum);border-color:var(--plum);color:#fff}
.reels-nav button:disabled{opacity:.3;cursor:default;
  background:#fff;border-color:var(--line);color:var(--plum)}
/* 深紫面板。scroll-snap 用 proximity —— mandatory 会和拖动打架。 */
.reel{display:flex;gap:0;overflow-x:auto;scroll-snap-type:x proximity;
  scroll-behavior:smooth;background:var(--plum);padding:16px 0 16px 16px}
.reel.dragging{scroll-behavior:auto;cursor:grabbing;scroll-snap-type:none}
.reel-card{flex:0 0 218px;scroll-snap-align:start;margin-right:14px;
  background:#fff;user-select:none;position:relative;
  transition:transform .18s;display:flex;flex-direction:column}
.reel-card:hover{transform:translateY(-3px)}
/* 当前第一张左边一道青色竖条 —— 样板里的活动标记 */
.reel-card.lead::before{content:"";position:absolute;left:0;top:0;bottom:0;
  width:3px;background:var(--teal);z-index:2}
/* 上：轮次 + 日期 */
.reel-card .who{display:flex;align-items:center;gap:9px;padding:11px 12px;
  border-bottom:1px solid var(--line-2)}
.reel-card .who img{width:26px;height:26px;object-fit:contain;flex:none}
.reel-card .who .ph{width:26px;height:26px;background:var(--paper-2);flex:none;
  border-radius:50%}
.reel-card .who b{font-size:12.5px;font-weight:700;display:block;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.reel-card .who span{font-size:10.5px;color:var(--ink-3);font-weight:600}
.reel-card .who>div{min-width:0;flex:1}
/* 中：大图 */
.reel-card .art{position:relative;aspect-ratio:4/3;overflow:hidden;
  background:var(--paper-2)}
.reel-card .art img{width:100%;height:100%;object-fit:cover;
  transition:transform .5s}
.reel-card:hover .art img{transform:scale(1.05)}
/* 下：比分条 —— 深紫底，两队徽 + 比分 */
.reel-card .sc{display:flex;align-items:center;justify-content:center;gap:9px;
  background:var(--plum-2);padding:9px 10px}
.reel-card .sc img{width:19px;height:19px;object-fit:contain;flex:none}
.reel-card .sc .ph{width:19px;height:19px;flex:none}
.reel-card .sc b{color:#fff;font:800 14px/1 var(--sans);
  font-variant-numeric:tabular-nums;letter-spacing:.04em}
@media (max-width:560px){.reel-card{flex:0 0 76vw}}

/* ══ 播客带 ══════════════════════════════════════════════════════════
   首页其余全是白纸底，这一块是夜色（和 /podcasts 同一组颜色）：一眼看出「这里是另一种内容」，
   而且点进去不突兀。左边一栏说明 + 入口 + 几档节目的小封面，右边一排横滑的单集卡（有文字稿的优先 ——
   那是我们自己的东西）。卡片是方封面 + 节目名 + 标题 + 时长，和播客区里的单集卡同一个比例。 */
.pods{--pd-bg:#0b090d;--pd-bg-2:#151219;--pd-bg-3:#1e1a24;--pd-ink:#f5f2f7;--pd-ink-2:#c7bfcd;
  --pd-ink-3:#91879a;--pd-acc:#00e0c6;--pd-line:rgba(255,255,255,.08);
  background:radial-gradient(90% 140% at 100% 0%,#24132b 0%,var(--pd-bg) 60%);color:var(--pd-ink);
  padding:44px 0 40px;overflow:hidden}
.pods[hidden]{display:none}
.pods-in{max-width:var(--wrap);margin:0 auto;padding:0 0 0 var(--gut);
  display:grid;grid-template-columns:270px minmax(0,1fr);gap:30px;align-items:start}
@media (max-width:900px){.pods-in{grid-template-columns:1fr;gap:20px;padding:0 var(--gut)}.pods{padding:34px 0 30px}}
.pods-eyebrow{font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--pd-ink-3);
  margin-bottom:9px;padding-bottom:9px;border-bottom:2px solid var(--pd-acc);display:inline-flex;align-items:center;gap:7px}
.pods-eyebrow svg{width:14px;height:14px;color:var(--pd-acc)}
.pods-txt h2{font-size:clamp(24px,2.6vw,34px);line-height:1.06;letter-spacing:-.6px;margin-bottom:12px;color:var(--pd-ink)}
.pods-txt p{color:var(--pd-ink-2);font-size:13px;line-height:1.7;margin:0 0 18px}
.pods-go{display:inline-flex;align-items:center;gap:6px;background:var(--pd-acc);color:#002b26;
  font-weight:800;font-size:13px;padding:10px 18px;border-radius:999px;text-decoration:none;
  transition:transform var(--t-fast,.14s) var(--ease-out,ease),background var(--t-fast,.14s)}
.pods-go:hover{background:#5ff0dc}
.pods-go:active{transform:scale(.97)}
.pods-go:focus-visible,.pod-card:focus-visible,.pods-shows a:focus-visible{outline:2px solid var(--pd-acc);outline-offset:3px}
/* 几档节目的小封面：叠在一起的一排，告诉读者「这里有很多档」 */
.pods-shows{display:flex;margin-top:22px;padding-left:8px}
.pods-shows a{width:38px;height:38px;border-radius:9px;margin-left:-8px;border:2px solid var(--pd-bg);
  background:var(--pd-bg-3) center/cover no-repeat;transition:transform .18s var(--ease-out,ease)}
.pods-shows a:hover{transform:translateY(-3px);z-index:1}
.pods-shows span{align-self:center;margin-left:10px;font-size:12px;font-weight:700;color:var(--pd-ink-3)}
@media (max-width:900px){.pods-shows{display:none}}
.pods-row{display:flex;align-items:flex-start;gap:14px;overflow-x:auto;scroll-snap-type:x proximity;padding:2px 26px 6px 2px;
  scrollbar-width:none}
.pods-row::-webkit-scrollbar{display:none}
.pod-card{flex:0 0 188px;width:188px;min-width:0;scroll-snap-align:start;text-decoration:none;color:inherit;display:flex;flex-direction:column;
  gap:10px;transition:transform .18s var(--ease-out,ease)}
.pod-card:hover{transform:translateY(-3px)}
.pod-card .cv{position:relative;width:100%;aspect-ratio:1;flex:none;border-radius:12px;overflow:hidden;background:var(--pd-bg-3);
  box-shadow:0 10px 26px rgba(0,0,0,.45)}
.pod-card .cv img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.pod-card:hover .cv img{transform:scale(1.05)}
/* 有文字稿的角标 —— 我们站上独有的东西，值得在卡上说出来 */
.pod-card .tx{position:absolute;left:8px;top:8px;font-size:10px;font-weight:800;letter-spacing:.04em;
  background:rgba(11,9,13,.72);color:var(--pd-acc);padding:4px 7px;border-radius:6px;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.pod-card .pl{position:absolute;right:8px;bottom:8px;width:34px;height:34px;border-radius:50%;
  background:var(--pd-acc);color:#002b26;display:grid;place-items:center;opacity:0;transform:translateY(6px);
  transition:opacity .18s,transform .18s var(--ease-out,ease)}
.pod-card .pl svg{width:14px;height:14px;margin-left:2px}
.pod-card:hover .pl,.pod-card:focus-visible .pl{opacity:1;transform:none}
.pod-card small{display:block;font-size:11px;font-weight:700;color:var(--pd-ink-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pod-card>div:last-child{min-width:0}
.pod-card b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-size:13.5px;line-height:1.35;font-weight:700;color:var(--pd-ink);margin-top:3px}
.pod-card em{display:block;font-style:normal;font-size:11px;color:var(--pd-ink-3);margin-top:5px}
@media (max-width:560px){.pod-card{flex:0 0 42vw;width:42vw}}
/* 「接着来」：听到一半的播客、看到一半的视频（足迹，site.js 的 S.trail）。**不另开一条深色带** ——
   放在播客带的最上面，同一片夜色、同一套排法（左边一栏说明，右边横滑）。卡片宽一点、16:9：视频是横的，
   播客的方封面摆在中间、后面垫一层同一张图的糊光。卡片底下一两行「停下之后还聊了什么」，点了从那一秒接着来 */
.pods-cont[hidden],.pods-in[hidden]{display:none}
.pods-cont{max-width:var(--wrap);margin:0 auto 38px;padding:0 0 34px var(--gut);border-bottom:1px solid var(--pd-line);
  display:grid;grid-template-columns:270px minmax(0,1fr);gap:30px;align-items:start}
@media (max-width:900px){.pods-cont{grid-template-columns:1fr;gap:18px;padding:0 var(--gut) 28px;margin-bottom:30px}}
.cont-row{display:flex;align-items:flex-start;gap:16px;overflow-x:auto;scroll-snap-type:x proximity;padding:2px 26px 6px 2px;
  scrollbar-width:none}
.cont-row::-webkit-scrollbar{display:none}
.cont{flex:0 0 300px;width:300px;min-width:0;scroll-snap-align:start}
@media (max-width:560px){.cont{flex:0 0 78vw;width:78vw}}
.cont-card{display:flex;flex-direction:column;gap:10px;color:inherit;text-decoration:none;transition:transform .18s var(--ease-out,ease)}
.cont-card:hover{transform:translateY(-3px)}
.cont-card:focus-visible,.cont-next a:focus-visible{outline:2px solid var(--pd-acc);outline-offset:3px}
.cont-card .cv{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:var(--pd-bg-3);
  box-shadow:0 10px 26px rgba(0,0,0,.45);isolation:isolate}
.cont-card .cv>img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
.cont-card:hover .cv>img{transform:scale(1.04)}
.cont-card .cv.sq::before{content:"";position:absolute;inset:-24px;z-index:-1;background:var(--art) center/cover;
  filter:blur(22px) brightness(.55) saturate(1.3)}
.cont-card .cv.sq>img{width:auto;height:100%;aspect-ratio:1;margin:0 auto;box-shadow:0 8px 30px rgba(0,0,0,.5)}
.cont-card .cv .k{position:absolute;left:8px;top:8px;font-size:10px;font-weight:800;letter-spacing:.06em;
  background:rgba(11,9,13,.72);color:var(--pd-acc);padding:4px 7px;border-radius:6px;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.cont-card .cv .bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.25)}
.cont-card .cv .bar>i{display:block;height:100%;background:var(--pd-acc)}
.cont-card .cv .pl{position:absolute;right:10px;bottom:12px;width:38px;height:38px;border-radius:50%;
  background:var(--pd-acc);color:#002b26;display:grid;place-items:center;box-shadow:0 6px 18px rgba(0,0,0,.4)}
.cont-card .cv .pl svg{width:15px;height:15px;margin-left:2px}
.cont-card small{display:block;font-size:11px;font-weight:700;color:var(--pd-ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cont-card b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-size:14px;line-height:1.35;font-weight:700;color:var(--pd-ink);margin-top:3px}
.cont-card em{display:block;font-style:normal;font-size:11.5px;color:var(--pd-ink-2);margin-top:5px;font-variant-numeric:tabular-nums}
.cont-next{margin-top:10px;padding-top:9px;border-top:1px solid var(--pd-line)}
.cont-next p{font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--pd-ink-3);margin:0 0 4px}
.cont-next a{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px;padding:4px 0;font-size:12.5px;line-height:1.45;
  color:var(--pd-ink-2);text-decoration:none}
.cont-next a span{color:var(--pd-acc);font-weight:800;font-variant-numeric:tabular-nums}
.cont-next a em{font-style:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cont-next a:hover em{color:var(--pd-ink)}
@media (prefers-reduced-motion:reduce){.pod-card,.pod-card .cv img,.pods-shows a,.pod-card .pl{transition:none}}

/* 场边：左边大卡是最值得看的那一场（正在踢的先），右边其他场，下面一排图和视频。
   **底色和上下邻居是同一家的紫，交界处不画线。** 它夹在头图（桌面上照片底部收到 --plum；手机上是倒计时条和
   白底赛程面板之后）和每日简报（--plum-2）中间：上沿是 --plum、往下压暗让卡片跳出来、下沿收回到简报的颜色，
   两头都没有色差，连成一整片深紫，
   靠留白和标题分段。原来上下各有一道渐变细线 —— 颜色接上以后它就成了唯一的断口（用户指出多余）。
   更早是近黑底、两个上角打红蓝光：夹在两条紫色中间上下各一道硬接缝，红光压在紫上发脏（用户指出过渡不自然）。
   两队的颜色只从大卡后面透出来一点，像卡片自己在发光，不再铺满整条。 */
.touch{--tc-ink:#f6f3f8;--tc-ink-2:rgba(246,243,248,.66);--tc-ink-3:rgba(246,243,248,.44);--tc-line:rgba(255,255,255,.12);
  position:relative;overflow:hidden;padding:60px 0 58px;color:var(--tc-ink);
  /* 左下角那团兰花色光是简报左上角那团（.brief::before）的另一半：光源落在两块的交界上、上下都照到，
     接缝两侧逐点同色（横向半径一样、都在交界处最亮） */
  background:radial-gradient(120% 34% at 8% 100%,rgba(150,60,255,.34),transparent 60%),
             linear-gradient(180deg,var(--plum) 0,#22072a 26%,#1a0520 62%,var(--plum-2) 100%)}
/* 没比赛的日子场边不出现，简报直接接在头图下面：上沿从头图底部那个 --plum 起、往下收到自己的 --plum-2；
   左上角那团兰花色光也从上沿往下渐显 —— 不然它最亮的地方正好落在交界上，切出一道边 */
.touch[hidden]+.brief{background:linear-gradient(180deg,var(--plum),var(--plum-2) 140px)}
.touch[hidden]+.brief::before{-webkit-mask-image:linear-gradient(180deg,transparent,#000 160px);
  mask-image:linear-gradient(180deg,transparent,#000 160px)}
.tc-grid{position:relative}
.tc-grid::before{content:"";position:absolute;z-index:0;pointer-events:none;left:-6%;top:-14%;width:72%;height:128%;
  background:radial-gradient(38% 46% at 26% 50%,color-mix(in srgb,var(--c1,#c8102e) 30%,transparent),transparent 72%),
             radial-gradient(38% 46% at 72% 50%,color-mix(in srgb,var(--c2,#6cabdd) 30%,transparent),transparent 72%)}
.tc-grid>*{position:relative;z-index:1}
.touch[hidden]{display:none}
.tc-in{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.tc-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:26px}
.tc-head small{font-size:12px;font-weight:800;letter-spacing:.2em;color:var(--teal)}
.tc-head h2{font-size:clamp(28px,3.2vw,44px);font-weight:900;line-height:1.08;margin:10px 0 0;color:var(--tc-ink);letter-spacing:.01em}
.tc-head p{font-size:14px;color:var(--tc-ink-2);margin:10px 0 0;line-height:1.6}
.tc-grid{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(0,1fr);gap:16px}
/* 这一轮只有一场够格：大卡铺满整行，不在右边留一块空 */
.tc-grid.solo{grid-template-columns:minmax(0,1fr)}
.tc-grid.solo::before{left:-4%;width:108%}
.tc-grid.solo .tc-pair{left:max(24px,calc(50% - 440px));right:max(24px,calc(50% - 440px))}
.tc-feat{position:relative;display:block;height:480px;border-radius:26px;overflow:hidden;isolation:isolate;color:#fff;text-decoration:none}
.tc-half{position:absolute;inset:0}
.tc-half.l{clip-path:polygon(0 0,var(--st) 0,var(--sb) 100%,0 100%);background:var(--c1)}
.tc-half.r{clip-path:polygon(var(--st) 0,100% 0,100% 100%,var(--sb) 100%);background:var(--c2)}
.tc-half img{position:absolute;top:0;height:100%;width:62%;object-fit:cover;object-position:50% 25%;filter:grayscale(1) contrast(1.12) brightness(1.45);
  mix-blend-mode:multiply;transition:scale 1.4s var(--ease-out)}
.tc-half.l img{left:0}.tc-half.r img{right:0}
.tc-feat:hover .tc-half img{scale:1.04}
.tc-seam{position:absolute;inset:0;z-index:2;pointer-events:none}
.tc-seam i{position:absolute;inset:0;background:#fff;clip-path:polygon(calc(var(--st) - 1px) 0,calc(var(--st) + 1px) 0,calc(var(--sb) + 1px) 100%,calc(var(--sb) - 1px) 100%)}
.tc-feat::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(10,7,16,.2),rgba(10,7,16,0) 40%,rgba(10,7,16,.86))}
.tc-top{position:absolute;top:22px;left:24px;right:24px;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:10px}
.tc-chip{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:800;letter-spacing:.1em;padding:7px 12px;border-radius:99px;
  background:rgba(10,7,16,.6);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);white-space:nowrap}
.tc-chip i{width:7px;height:7px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 4px rgba(0,224,198,.2)}
.tc-chip.live i{background:#ff3b4e;box-shadow:0 0 0 4px rgba(255,59,78,.25)}
.tc-vs{position:absolute;top:86px;left:0;right:0;z-index:3;display:flex;align-items:center;justify-content:center;gap:30px}
.tc-vs img{width:88px;height:88px;object-fit:contain;filter:drop-shadow(0 14px 30px rgba(0,0,0,.45))}
.tc-vs b{font-size:88px;font-weight:800;letter-spacing:-.05em;line-height:.8;font-variant-numeric:tabular-nums}
.tc-pair{position:absolute;left:24px;right:24px;bottom:24px;z-index:3;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tc-q{padding:16px 18px;border-radius:18px;background:rgba(10,7,16,.6);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.14);min-width:0}
.tc-q.l{box-shadow:inset 3px 0 0 color-mix(in srgb,var(--c1) 60%,#fff)}.tc-q.r{box-shadow:inset -3px 0 0 color-mix(in srgb,var(--c2) 60%,#fff);text-align:right}
.tc-q small{display:block;font-size:12px;color:var(--tc-ink-2);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tc-q b{display:block;font-size:26px;font-weight:900;margin-top:6px;line-height:1.15;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.tc-side{display:grid;gap:16px;align-content:start}
.tc-mc{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:14px;min-height:232px;padding:20px;border-radius:22px;
  overflow:hidden;color:#fff;text-decoration:none;background:linear-gradient(115deg,var(--c1) 0 49.6%,var(--c2) 50.4% 100%)}
.tc-mc::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,7,16,.25),rgba(10,7,16,.86))}
.tc-mc>*{position:relative;z-index:1}
.tc-mc .vs2{display:flex;align-items:center;gap:14px}
.tc-mc .vs2 img{width:50px;height:50px;object-fit:contain}
.tc-mc .vs2 b{font-size:42px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.tc-mc .vs2 span{font-size:12.5px;color:rgba(255,255,255,.82);font-weight:700;line-height:1.5}
.tc-mc p{margin:0;font-size:15px;line-height:1.55;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.tc-mc p small{display:block;font-size:12px;color:var(--tc-ink-3);margin-top:3px}
.tc-mc:hover,.tc-tile:hover{filter:brightness(1.08)}
.tc-reel{display:flex;gap:12px;margin-top:18px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;padding-bottom:2px}
.tc-reel::-webkit-scrollbar{display:none}
.tc-tile{position:relative;flex:0 0 calc((100% - 6 * 12px) / 7);min-width:150px;height:290px;border-radius:18px;overflow:hidden;scroll-snap-align:start;
  color:#fff;text-decoration:none;background:#17121c}
.tc-tile>img,.tc-tile>video{width:100%;height:100%;object-fit:cover;display:block}
.tc-tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(10,7,16,.92))}
.tc-tile .edge{position:absolute;left:0;right:0;top:0;height:4px;z-index:2}
.tc-tile .pl{position:absolute;right:10px;top:14px;z-index:2;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.22);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:grid;place-items:center}
.tc-tile .pl::before{content:"";margin-left:3px;border-left:10px solid #fff;border-top:6px solid transparent;border-bottom:6px solid transparent}
.tc-tile .tm{position:absolute;left:12px;right:12px;bottom:12px;z-index:2;font-size:13px;line-height:1.45;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.tc-tile .tm div{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:800;color:var(--tc-ink-2);margin-bottom:5px}
.tc-tile .tm img{width:16px;height:16px;object-fit:contain}
.tc-feat:focus-visible,.tc-mc:focus-visible,.tc-tile:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
@media (max-width:900px){
  .touch{padding:40px 0 36px}.tc-grid{grid-template-columns:1fr}.tc-feat{height:420px}
  .tc-grid::before{left:-12%;width:124%;top:-6%;height:62%}
  .tc-side{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}.tc-mc{min-height:190px}
  .tc-vs{top:76px;gap:20px}.tc-vs img{width:64px;height:64px}.tc-vs b{font-size:64px}
  .tc-q b{font-size:20px}.tc-tile{flex-basis:40vw;height:250px}
}
@media (prefers-reduced-motion:reduce){.tc-half img{transition:none}}

/* 订阅日报：页脚前最后一块。浅紫一张圆角卡（右上一团兰紫光），左边信封 + 标题，右边一条药丸输入框、按钮嵌在里面。
   上面通常是深色的播客通栏，所以上边留足；下面直接接页脚（页脚自己有上外边距） */
#sub{padding:clamp(40px,5vw,72px) 0 0}
#sub .pflat{position:relative;overflow:hidden;min-height:auto;flex-direction:row;align-items:center;
  justify-content:space-between;gap:24px 40px;flex-wrap:wrap;padding:clamp(24px,3vw,36px) clamp(22px,3.4vw,44px);
  border:0;border-radius:20px;background:linear-gradient(135deg,#faf7fc 0%,#f3edf7 100%);
  box-shadow:inset 0 0 0 1px rgba(55,0,60,.06)}
#sub .pflat::before{content:"";position:absolute;right:-8%;top:-60%;width:46%;height:160%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(150,60,255,.13),transparent)}
#sub .subtxt{position:relative;display:flex;align-items:flex-start;gap:18px;flex:1 1 380px;min-width:0}
#sub .sub-ic{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:15px;color:#fff;
  background:linear-gradient(150deg,var(--plum-3,#5a1a66),var(--plum));box-shadow:0 10px 22px -12px rgba(55,0,60,.8)}
#sub .sub-ic svg{width:22px;height:22px}
#sub h4{margin:0 0 6px;font-size:clamp(18px,1.7vw,22px);line-height:1.25;font-weight:800;letter-spacing:-.01em}
#sub .pflat p{font-size:13.5px}
#sub .pflat .subnote{margin-top:6px;font-size:12px;color:var(--ink-3)}
#sub .subwrap{position:relative;flex:0 1 440px;min-width:0}
#sub .suform{display:flex;align-items:center;gap:6px;padding:5px;border-radius:999px;background:#fff;
  box-shadow:0 0 0 1px var(--line),0 12px 28px -20px rgba(55,0,60,.45);
  transition:box-shadow var(--t-base) var(--ease-out)}
#sub .suform:focus-within{box-shadow:0 0 0 1px var(--orchid),0 0 0 5px rgba(150,60,255,.14)}
#sub .suform:has(input.bad){box-shadow:0 0 0 1px var(--loss),0 0 0 5px rgba(229,72,77,.12)}
/* 输入框可以让：英文的按钮字长，手机上「输入框 + 按钮」比卡片宽的话整页横滚 */
#sub .suform input{flex:1 1 auto;width:0;min-width:0;height:42px;padding:0 6px 0 16px;border:0;outline:none;
  background:none;font:inherit;font-size:14px;color:var(--ink)}
#sub .suform button{flex:none;min-width:88px;box-shadow:none;transition:opacity .15s,background-color var(--t-base) var(--ease-out)}
#sub .suform button[disabled]{opacity:.6;cursor:progress}
/* 结果就写在框下面：原来写在左边标题下那一行小字里，离按钮半个屏，点了像没反应 */
#sub .submsg{margin:8px 0 0 18px;font-size:13px;font-weight:600;min-height:1.2em}
#sub .submsg.ok{color:#0f9d58}#sub .submsg.err{color:var(--loss)}
#sub .subwrap.done .suform{display:none}
#sub .subwrap.done .submsg{display:flex;align-items:center;gap:10px;margin:0;padding:13px 20px;border-radius:999px;
  font-size:14.5px;color:#0b7a45;background:#e6f6ee;box-shadow:inset 0 0 0 1px rgba(15,157,88,.16)}
#sub .subwrap.done .submsg::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:#0f9d58}
@media (max-width:760px){
  #sub .subtxt{gap:14px}
  #sub .sub-ic{width:42px;height:42px;border-radius:13px}
  #sub .subwrap{flex-basis:100%}
}
@media (max-width:760px){.hero-shot{min-height:320px}.cdcell b{font-size:21px}}
/* 360 宽的手机上英文那一行（标签 + 四格 Days/Hrs/Min/Sec）比屏幕宽 21px，整页被撑得能左右拖：间距收一点 */
@media (max-width:380px){.cdclock{gap:8px}.cdcell{gap:3px}.cdcell b{font-size:19px}.cdlabel{letter-spacing:.08em}}

/* ══ 今天（2026-11-05 改版）══════════════════════════════════════════
   简报和「正在发生」合在同一条深色通栏里：两样都有时左右排（.today.two），左边简报改成一列、右边一张白卡放事件；
   只有一样时那一样铺满（简报照旧两列）。简报默认露 5 条，多的收起来，按钮放出来 */
.today{display:block}
.today.two{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(22px,3vw,48px);align-items:start}
.today.two .brief-list{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-auto-flow:row}
.today.two .brief-list li{padding:10px 0;font-size:14px;line-height:1.55;grid-template-columns:clamp(34px,2.8vw,44px) 1fr}
.today.two .brief-list li b{font-size:clamp(22px,2.1vw,32px)}
.brief-list.folded li.more{display:none}
.brief-more{margin:10px 0 0;padding:8px 14px;border:1px solid rgba(255,255,255,.22);border-radius:999px;background:transparent;
  color:rgba(255,255,255,.85);font:700 12.5px var(--sans);cursor:pointer;transition:background var(--t-fast),border-color var(--t-fast)}
.brief-more:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.45)}
.brief-more:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.today-side{min-width:0;padding:18px 20px 8px;border-radius:18px;background:#fff;box-shadow:0 24px 48px -28px rgba(0,0,0,.6)}
.today-shd{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:0 0 10px}
.today-shd h2{font-size:clamp(18px,1.8vw,22px);color:var(--ink)}
.today-shd span{font-size:11.5px;color:var(--ink-3)}
.today-side .stgrid{grid-template-columns:minmax(0,1fr)}
/* 白卡里的事件行收紧一点：要点只留两行、媒体名那一排不出（点进去都有） */
.today-side .evlead{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.today-side .evouts{display:none}
@media (max-width:700px){
  /* 手机上「节目里在聊」只留第一条：简报、事件、观点叠起来一屏半都滑不完 */
  .brief-views li:nth-child(n+2){display:none}
}
.today-main[hidden],.today-side[hidden]{display:none}
@media (max-width:980px){.today.two{grid-template-columns:minmax(0,1fr)}}

/* ══ 数据实验室（2026-11-05）══════════════════════════════════════════
   编辑部数据栏：白底，顶上一道粗线压住栏名；格子之间是发丝线（网格的 1px 间隙露出底色），不用圆角卡、阴影和发光。
   每格：小号大写栏名 → 对象 → 一个大数（等宽数字）→ 细线小图 → 一行口径。颜色只用墨色和一个强调色（兰花紫），
   正负用站上的输赢色。大格（预测准确度）占 2×2，夺冠概率横跨两格，最后一格是其余榜单的目录 */
.labx{padding:clamp(36px,4vw,56px) 0 clamp(8px,1vw,14px)}
.labx-in{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.lxhd{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:baseline;gap:6px 24px;padding:14px 0 16px;border-top:3px solid var(--ink)}
.lxhd h2{margin:0;font-size:clamp(20px,2vw,26px);font-weight:800;letter-spacing:-.4px;color:var(--ink)}
.lxhd p{margin:0;font-size:13px;line-height:1.5;color:var(--ink-3)}
.lxall{font-size:13px;font-weight:700;color:var(--ink);white-space:nowrap;border-bottom:1px solid var(--ink-4);padding-bottom:1px;
  transition:color var(--t-fast),border-color var(--t-fast)}
.lxall:hover{color:var(--orchid);border-bottom-color:var(--orchid)}
.lxgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-flow:dense;gap:1px;background:var(--line);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.lxc{position:relative;display:flex;flex-direction:column;min-width:0;min-height:176px;padding:16px 20px 18px;background:var(--paper);
  color:var(--ink);text-decoration:none;transition:background var(--t-base)}
a.lxc:hover{background:var(--paper-2)}
a.lxc:focus-visible{outline:2px solid var(--orchid);outline-offset:-2px}
.lxc.acc{grid-column:span 2;grid-row:span 2;padding:18px 24px 20px}
.lxc.od{grid-column:span 2}
.lxk{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.lxa{position:absolute;top:14px;right:16px;font-style:normal;font-size:13px;color:var(--ink-4);opacity:0;transform:translateX(-4px);
  transition:opacity var(--t-base),transform var(--t-base),color var(--t-base)}
a.lxc:hover .lxa{opacity:1;transform:none;color:var(--orchid)}
.lxt{display:flex;align-items:center;gap:7px;margin:10px 0 0;font-size:14px;font-weight:700;line-height:1.35;color:var(--ink);min-width:0}
.lxt img{width:18px;height:18px;object-fit:contain;flex:none}
.lxt span{margin-left:4px;font-weight:500;color:var(--ink-3)}
/* 人的那两格（单球价值、关注度）：圆头像领头，名字和球队跟在后面 */
.lxt .lxav{flex:none;width:32px;height:32px;border-radius:50%;object-fit:cover;object-position:center top;background:var(--paper-2);
  box-shadow:0 0 0 1px var(--line)}
.lxt i.lxav{display:grid;place-items:center;font:800 13px/1 var(--sans);font-style:normal;color:var(--ink-3)}
.lxt .lxw{margin:0;display:flex;align-items:center;flex-wrap:wrap;gap:2px 0;min-width:0;font-weight:700;color:var(--ink)}
.lxt .lxw>span{display:inline-flex;align-items:center;gap:5px;margin-left:8px}
.lxt .lxw img{width:16px;height:16px}
.lxn{margin:auto 0 0;padding-top:12px;font:700 clamp(30px,2.8vw,40px)/1 var(--sans);letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--ink)}
.lxn small{margin-left:6px;font-size:12px;font-weight:600;letter-spacing:0;color:var(--ink-3)}
.lxcap{margin:8px 0 0;font-size:12px;line-height:1.5;color:var(--ink-3);font-variant-numeric:tabular-nums}
/* 预测准确度：一张小表 + 累计 Brier 走势 */
.lxc.acc .lxcap{margin-top:6px}
.lxtbl{width:100%;margin:16px 0 0;border-collapse:collapse;font-variant-numeric:tabular-nums}
.lxtbl th,.lxtbl td{padding:10px 0;border-top:1px solid var(--line-2);text-align:right;font-size:14px}
.lxtbl thead th{padding-top:0;border-top:0;font-size:11px;font-weight:700;letter-spacing:.02em;color:var(--ink-3)}
.lxtbl tbody th{text-align:left;font-weight:700;color:var(--ink)}
.lxtbl tbody th i{display:inline-block;width:14px;height:0;margin:0 9px 3px 0;vertical-align:middle;border-top:2px solid var(--ink)}
.lxtbl tr.model th i{border-top:2px dashed var(--ink-3)} .lxtbl tr.ai th i{border-top-color:var(--orchid)}
.lxtbl tbody th small{display:block;margin:2px 0 0 23px;font-size:11px;font-weight:500;color:var(--ink-3)}
.lxtbl td{width:22%;font-weight:600;color:var(--ink-2)}
.lxtbl tr.lead td:nth-child(2){font-weight:800;color:var(--ink)}
.lxtbl tr.pending th,.lxtbl tr.pending td{color:var(--ink-4)} .lxtbl tr.pending th small{color:var(--ink-4)}
.lxrace{display:block;width:100%;height:clamp(88px,8vw,120px);margin:auto 0 0;padding-top:16px;overflow:visible}
.lxrace line,.lxodds line{stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke}
.lxrace path,.lxodds path{fill:none;stroke-width:1.75;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}
.lxrace .market{stroke:var(--ink);stroke-width:2.25} .lxrace .model{stroke:var(--ink-3);stroke-dasharray:4 4} .lxrace .ai{stroke:var(--orchid)}
/* 分歧：模型 ○ 到市场 ● */
.lxdb{position:relative;height:18px;margin:12px 0 0;background:linear-gradient(var(--line),var(--line)) center/100% 1px no-repeat}
.lxdb s{position:absolute;top:50%;height:3px;margin-top:-1.5px;background:var(--orchid)}
.lxdb i{position:absolute;top:50%;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%;box-sizing:border-box}
.lxdb i.mdl{background:var(--paper);border:2px solid var(--ink)} .lxdb i.mkt{background:var(--ink)}
/* 一根细条：逆转时的胜率、命中率；进球价值那根带一道中位数的刻度 */
.lxbar{position:relative;height:3px;margin:12px 0 0;background:var(--line-2)}
.lxbar i{position:absolute;left:0;top:0;bottom:0;background:var(--ink)}
.lxbar.two i{background:var(--orchid)}
.lxbar.two b{position:absolute;top:-4px;bottom:-4px;width:1.5px;margin-left:-.75px;background:var(--ink)}
/* 夺冠概率 */
.lxodds{display:block;width:100%;height:clamp(48px,4.4vw,64px);margin:10px 0 0;overflow:visible}
.lxodds .s0{stroke:var(--ink);stroke-width:2.25} .lxodds .s1{stroke:var(--orchid)}
.lxlg{display:flex;flex-wrap:wrap;gap:4px 16px;margin:8px 0 0;font-size:12px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.lxlg span{display:inline-flex;align-items:center;gap:6px}
.lxlg i{width:12px;height:0;border-top:2px solid var(--ink)} .lxlg .s1 i{border-top-color:var(--orchid)}
.lxc.od .lxn{margin-top:8px;padding-top:6px}
/* 目录格 */
.lxc.idx{padding-bottom:10px}
.lxc.idx a{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-top:1px solid var(--line-2);font-size:13.5px;font-weight:600;
  color:var(--ink);transition:color var(--t-fast)}
.lxc.idx .lxk+a{margin-top:8px}
.lxc.idx a i{font-style:normal;color:var(--ink-4);transition:transform var(--t-fast),color var(--t-fast)}
.lxc.idx a:hover{color:var(--orchid)} .lxc.idx a:hover i{color:var(--orchid);transform:translateX(3px)}
@media (max-width:1100px){.lxgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){
  .lxhd{grid-template-columns:minmax(0,1fr) auto}
  .lxhd p{grid-column:1/-1;grid-row:2}
}
@media (max-width:560px){
  .lxc{min-height:0;padding:14px 14px 16px}
  .lxc.acc{padding:16px 14px 18px}
  .lxn{font-size:28px}
  .lxa{display:none}
}

/* ══ 联赛焦点人物：收成一排（2026-11-05）══════════════════════════════
   原来三张竖卡（大图在上、名单在下），一块 650px 高。现在每张卡里大图在左、名单在右，整排矮下来；窄屏横着滑 */
@media (min-width:941px){
  .lc-main{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);grid-template-rows:auto 1fr}
  .lc-hd{grid-column:1/-1}
  .lc-hero{aspect-ratio:auto;min-height:250px;height:100%}
  .lc-list{justify-content:center}
  .lc-hero .nm{padding:30px 12px 12px}
  .lc-hero .nm b{font-size:15px}
  .lc-hero .big{font-size:32px}
}
@media (max-width:940px){
  .lead-cardsw{display:flex;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none}
  .lead-cardsw::-webkit-scrollbar{display:none}
  .lead-cardsw>.lcard{flex:0 0 min(84vw,380px);scroll-snap-align:start}
  .lead-cardsw>.lcard+.lcard{border-top:0;border-left:1px solid rgba(255,255,255,.12)}
}