/* 右侧抽屉：球队抽屉 + 球员面板。球队页和报道页共用。
   2026-10-05 从 clubs.html 原样搬出来（报道页正文里点名字也要打开它），
   注释都是当时写在球队页里的，说的「这一层」「右边」就是这两块抽屉。 */

/* 近五场小方块 —— 比文字更快读出走势。
   阴影比原来重一档：少了底条,方块直接压在照片上,
   浅色的天空里需要它自己撑出边界。 */
.frm{display:flex;gap:3px;flex:none}
.frm i{width:15px;height:15px;flex:none;border-radius:3px;display:grid;
  place-items:center;font:800 9px/1 var(--sans);color:#fff;font-style:normal;
  box-shadow:0 1px 4px rgba(0,0,0,.45)}
.frm i.W{background:var(--win)} .frm i.D{background:var(--draw)}
.frm i.L{background:var(--loss)}

/* ── 右抽屉 ── */
/* 时长和曲线走 site.css 的全站变量（--t-slow / --ease-out），和手机导航抽屉、展开收起是同一个节奏 */
.scrim{position:fixed;inset:0;background:rgba(18,0,22,.56);z-index:80;
  opacity:0;pointer-events:none;transition:opacity var(--t-slow) ease}
.scrim.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(520px,100vw);
  background:var(--paper);z-index:81;display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform var(--t-slow) var(--ease-out);
  box-shadow:-18px 0 50px rgba(20,0,24,.26)}
.drawer.on{transform:none}
/* ── 球员面板：球队抽屉的第二层 ──────────────────────────────
 *
 * **它落在球队抽屉的左边,不是盖在上面。** 点一个球员的目的通常不是
 * "看这一个人",而是"在这支队里看这些人" —— 盖住名单的话每看一个都要先
 * 退回去,层数变多而效率没变。并排放,名单始终可见,可以连着点下一个。
 *
 * **视觉语言照搬 person 页的刊头**,不另立一套。第一版我按"抽屉"的习惯做成
 * 头像圆圈 + 数字格子,结果和右边的球队抽屉（整幅球场大图压深色渐变）像两个
 * 网站,而它们是同时出现在屏幕上的两层。同一个人在站内应该长一个样。
 *
 * 宽度 470 + 520 = 990,所以 1080 以下并排会挤掉名单。那个断点以下改成
 * 盖满全屏 + 一个返回入口,回到"一次一件事"。
 */
.pdrawer{position:fixed;top:0;bottom:0;right:min(520px,100vw);
  width:min(470px,calc(100vw - 520px));background:var(--paper);z-index:82;
  display:flex;flex-direction:column;
  transform:translateX(24px);opacity:0;pointer-events:none;
  transition:transform var(--t-slow) var(--ease-out),opacity var(--t-base) ease;
  box-shadow:-16px 0 44px rgba(20,0,24,.22)}
.pdrawer.on{transform:none;opacity:1;pointer-events:auto}
.pd-scroll{overflow-y:auto;flex:1;overscroll-behavior:contain}

/* 顶栏浮在刊头上 —— 刊头是整幅深色图,顶栏再占一条白边就把它切矮了。 */
.pd-bar{position:absolute;top:0;left:0;right:0;z-index:6;
  display:flex;align-items:center;gap:7px;padding:11px 12px;
  background:linear-gradient(180deg,rgba(18,0,22,.5),transparent)}
.pd-bar button{width:30px;height:30px;border:0;border-radius:999px;
  background:rgba(255,255,255,.16);backdrop-filter:blur(5px);color:#fff;
  cursor:pointer;display:grid;place-items:center;
  transition:background .16s,opacity .16s}
.pd-bar button:hover:not(:disabled){background:rgba(255,255,255,.3)}
.pd-bar button:disabled{opacity:.3;cursor:default}
.pd-bar svg{width:14px;height:14px}
/* 翻人的两个键**并成一组**（中间一条细缝）,这样"上一位/下一位"读起来是
   一件事的两个方向。之前三个独立圆键并排,其中两个都是左向箭头,
   分不出哪个是返回哪个是上一位 —— 形状相同的按钮必须靠分组区分职责。 */
.pd-step{display:flex;gap:1px;background:rgba(255,255,255,.14);
  border-radius:999px;overflow:hidden;backdrop-filter:blur(5px)}
.pd-step button{border-radius:0;background:transparent;width:32px}
.pd-step button:hover:not(:disabled){background:rgba(255,255,255,.22)}
/* 返回**只在盖满全屏时出现**,并且带文字 —— 桌面端名单就在右边,不需要它。
   （第一版写 `.pd-back{display:none}` 没生效:`.pd-bar button` 是类+元素,
   比单个类更具体,所以那条 display 从来没赢过。这里用同等具体度的选择器。） */
.pd-bar .pd-back{display:none}
/* 计数和关闭键之间要有间距 —— `margin-left:auto` 只把它推到右边,
   它和关闭键之间没有任何间隔,于是"第 2 / 24 人"被圆按钮压住一截。
   gap 管不到这里：那是 flex 项之间的统一间距,而这里需要的是这一对之间更大。 */
.pd-count{margin-left:auto;margin-right:4px;font-size:11.5px;
  color:rgba(255,255,255,.72);font-variant-numeric:tabular-nums;
  letter-spacing:.03em;font-weight:600;white-space:nowrap}

/* ── 刊头：没有底图,靠渐变 + 一束光 + 号码字撑起来 ──────────────
 *
 * **底图去掉了。** 那张"色带"是全联盟共用的一张球场照（接口在没有个人图时
 * 回退到 `_shared/band.webp`）,于是每个人的刊头长得一模一样 —— 它提供的
 * 不是信息,是噪点,还把去背写真压在一堆看不清的观众席上。
 * 现在只留三样东西：兰花色渐变、一束打在人身上的光、以及号码本身当图形。
 */
/* 高度和右边球队抽屉的球场图**对齐**。
 *
 * 那张图是 `aspect-ratio:16/9`、宽 520,所以是 292.5px；刊头原来写死 258,
 * 两块深色区差 35px,并排看就是一道错位的台阶（Sean 的截图里很明显）。
 * 用同一个算式跟着走：抽屉宽度变了两边一起变,不会再各走各的。
 */
/* 高度用 `cqw`（容器宽度的百分之一）—— 桌面端面板 470、球队抽屉 520,
   两块深色区要等高,所以按**球队抽屉**的宽度算；而手机端面板是满宽的,
   写死 520 会算出 219px 的矮刊头（实测）。媒体查询里改成按自身宽度。 */
.pd-mast{position:relative;min-height:calc(min(520px,100vw) * 9 / 16);
  display:flex;align-items:flex-end;
  /* **竖向不能裁** —— 人物要探到下面的浅色区里去。横向仍然裁掉。 */
  overflow-x:clip;
  background:
    radial-gradient(112% 88% at 84% 8%,rgba(150,60,255,.42),transparent 62%),
    linear-gradient(168deg,#2a0730 0%,#1b0320 58%,#14001a 100%)}
/* 打在人身上的光 —— 让写真站在场景里,而不是贴在一块纯色上 */
.pd-mast::before{content:"";position:absolute;right:2px;bottom:0;
  width:216px;height:216px;border-radius:50%;
  background:radial-gradient(circle,rgba(214,168,255,.3),transparent 66%);
  pointer-events:none}
/* **这里原来有一块"地面阴影"（椭圆）和人物的轮廓投影，两个都删了。**
 *
 * 它们的理由写的是"脚下得有影子，否则人是贴上去的"—— 但那个理由只在
 * 影子落在**深色区**上时成立。这一层的人是**跨过明暗边界**站着的，
 * 椭圆挂在 `bottom:-16px`，整块都在白纸上；轮廓投影往左下偏 18/16px，
 * 于是腿和鞋周围在白区拖出一团灰。
 *
 * 白区里没有任何光源交代，那团灰就不是影子，是脏印子 —— 而且它正好糊掉了
 * 这一层唯一的立体感来源：**人跨在那条线上**。立体感来自跨界本身，
 * 不来自给他加一层影子。 */
/* 人物**向下探出刊头**,跨在深浅交界上 —— 这是这一层的立体感来源：
 * 他不在深色块里面,而是站在它前面。
 *
 * **探出量按图高的比例给,不能写死像素。** 抠图底部有一段透明留白,
 * 而这段留白每个人都不一样 —— 实测 597 张图里从 0% 到 6.8%、平均 2.8%
 * （751x1120 的画布上是 0~76px）。原来写死 `30px`,对留白大的人几乎
 * 等于没探出去（Sean 截图里赖斯的脚就还压在深色区内）。
 * 按比例给,留白大的人也能真正跨过那条线。
 *
 * 22% 是留出最大留白（6.8%）之后仍有约 15% 的实体落在浅色区里 ——
 * 看得出是"站在前面",而不是"贴在边上"。
 */
.pd-figure{--spill:22%;
  position:absolute;z-index:4;right:-4px;bottom:calc(-1 * var(--spill));
  width:188px;pointer-events:none}
.pd-figure img{display:block;width:100%;height:auto}
.pd-mast-in{position:relative;z-index:2;width:100%;
  padding:46px 18px 17px;padding-right:126px}
/* 号码**不再咬名字**。470px 宽里中文名本来就长,号码贴着名字右缘就落到人身上
   （截图里凯帕的 13 压在大腿上）。放到文字块顶端当一个独立的图形,
   描边不填色 —— 它是刊头的装饰,不该比名字还抢。 */
.pd-num{display:block;font:800 52px/.8 var(--sans);letter-spacing:-.05em;
  color:transparent;-webkit-text-stroke:1.6px rgba(255,255,255,.34);
  font-variant-numeric:tabular-nums;margin-bottom:9px;user-select:none}
.pd-en{font:700 10.5px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;
  color:rgba(255,255,255,.5);margin-bottom:9px}
.pd-name{margin:0;color:#fff;font-weight:800;font-size:27px;line-height:1.06;
  letter-spacing:-.03em}
/* facts：**不用药丸。** 俱乐部是归属、其余是属性,有主次,
   所以细线分隔的一行、队徽领头,靠字重分级不靠形状。 */
.pd-facts{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-top:14px}
.pd-facts>span{display:inline-flex;align-items:center;gap:6px;
  font:600 11.5px/1 var(--sans);color:rgba(255,255,255,.82)}
.pd-facts>span+span{padding-left:9px;border-left:1px solid rgba(255,255,255,.2)}
.pd-facts img{display:block}
.pd-facts .crest img{width:16px;height:16px;object-fit:contain}
.pd-facts .flag img{width:17px;height:12px;object-fit:cover;border-radius:2px}

/* ── 正文 ── */
.pd-sec{padding:22px 18px 9px;font:700 10.5px/1 var(--sans);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-4);
  display:flex;align-items:center;gap:10px}
/* 标题后面一条发丝线拉到右边 —— 分段靠线而不是靠留白,
   于是滚动时能看出"这是新的一节",而不是一长条连续的内容。 */
.pd-sec::after{content:"";flex:1;height:1px;background:var(--line)}
/* 本赛季：**不要格子。** 数字之间靠留白和基线对齐分开就够了,
   画格子会把六个数字变成一张小表格,而这一页别处都不是表格。 */
/* 本赛季数字。
   **第一行要给探出来的人物让开右边。** 他的腿现在落到这一行里,
   实测 414（第三格）正被腿横穿 —— 标题那条装饰线被盖住无所谓,
   一个数值被盖住就读不出来了。
   所以第一行只放两格、第三格从第二行开始排；人物下方就没有数字了。 */
/* 本赛季数字。六项排三列,**不给人物留空位**。
   我一度以为腿压住了 414,为此插了个占位格,结果第一行空一格、末行剩一个,
   反而更难看。按可见像素量过：数字那一行人物的不透明像素从 x=924 开始,
   而面板右缘是 920 —— **那一行根本没有人体**,只有透明的外接盒在重叠。
   碰撞检测量 `getBoundingClientRect()` 会把透明留白算进去,所以它报的
   "重叠"和读者看到的遮挡是两件事。 */
.pd-nums{display:grid;grid-template-columns:repeat(3,1fr);
  gap:17px 10px;padding:15px 18px 0;position:relative;z-index:3}
.pd-nums div{min-width:0}
.pd-nums b{display:block;font-size:23px;line-height:1;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;color:var(--ink)}
.pd-nums span{display:block;margin-top:4px;font-size:10.5px;color:var(--ink-4);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 首段要给探出来的人物让开右边,否则文字跑到他身上。
   探出 30px、人物宽 184 —— 让出约六成宽度就够，再多首段会太窄。 */
/* 浅色正文区**压在刊头之上**：顶边一条阴影,于是交界不是一条平接的缝,
   而是上面那层盖下来 —— 人物正从这两层之间穿出来,立体感来自这里。

   **阴影只能挂在紧跟刊头的那一块上。** 原来挂在 `.pd-bio` 上,而刊头之后
   先是「本赛季」那一块（也是白底）—— 于是这道向上投的影子落在**白区中间**,
   从白投到白,成了一条无来由的横线（Sean 截图里传球那行下面那道灰）。
   影子要有意义,必须正好落在明暗交界上,所以用「刊头的下一个兄弟」这个
   选择器来定位,而不是指名某一块。 */
/* **底色要一起给。** 这一块（实际是 `.pd-sec`「本赛季」那行）原来是透明的,
   透明块上挂阴影等于让阴影从它自己身上透出来 —— 必须有底才挡得住刊头。 */
.pd-scroll > .pd-mast + *{position:relative;z-index:3;background:var(--paper);
  box-shadow:0 -7px 16px -6px rgba(20,0,26,.16)}
.pd-bio{position:relative;z-index:3;padding:22px 18px 0;padding-right:122px;
  font-size:12.5px;line-height:1.7;color:var(--ink-3);background:var(--paper)}
.pd-spill{position:relative;z-index:3;background:var(--paper)}
/* 没有简介时也得留出这段高度,否则下一节的标题会顶到人腿上 */
.pd-spill{height:34px}

/* ── 履历时间线 ──────────────────────────────────────────────
 *
 * **队徽要占一条定宽的槽,有没有图都占。** 上一版名字紧跟队徽排,
 * 于是"蓬费拉迪纳"（没有队徽）比"切尔西"（有）左移 30px,竖轴看着是歪的。
 * 对齐要靠结构保证,不能指望每条数据都有图。
 *
 * **俱乐部和国家队分开两段。** 国家队从来没有队徽（实测全部 14 条履历里
 * 4 条国家队一条图都没有）,和俱乐部混排必然一半有图一半没有;拆开之后
 * 每一段内部一致,而且列表短了一截、读起来是两件事 —— 效力和入选本来就是两件事。
 */
.pd-career{padding:14px 18px 0}
.pd-crs{position:relative}
/* 竖线一条画到底,两端各缩半行 —— 这样线正好从第一个点连到最后一个点,
   而不是从容器顶端悬到容器底端。 */
.pd-crs::before{content:"";position:absolute;left:4px;top:15px;bottom:15px;
  width:1.5px;background:var(--line)}
.pd-cr{display:grid;grid-template-columns:18px 22px 1fr auto;align-items:center;
  gap:0 9px;height:30px;position:relative}
.pd-cr i{position:relative;width:9px;height:9px;border-radius:50%;
  background:var(--paper);border:2px solid var(--plum-3);
  justify-self:start;margin-left:0}
/* 现在效力的那一段实心 —— 时间线上该看得出终点在哪 */
.pd-cr.now i{background:var(--plum);border-color:var(--plum)}
.pd-cr .cb{width:22px;height:22px;display:grid;place-items:center}
.pd-cr .cb img{max-width:22px;max-height:22px;object-fit:contain}
.pd-cr b{font-size:12.5px;font-weight:650;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pd-cr em{font-style:normal;font-size:11px;color:var(--ink-4);
  font-variant-numeric:tabular-nums;
  display:inline-flex;align-items:center;gap:6px}
/* 租借。**这一格没有它就自相矛盾** —— 马丁内斯的阿森纳 2010–2020 和
   牛津联、雷丁那几段年份完全重叠,不标出来读起来是"同时效力好几家",
   而读者最自然的结论是数据错了。
   做成描边小字而不是色块:这一列本来就窄（一行 30px）,实心底色会让
   六行外租变成面板上最跳的东西,反而盖过"他在阿森纳待了十年"这条主线。 */
.pd-cr .ln{font-size:9.5px;font-weight:650;letter-spacing:.02em;
  color:var(--ink-4);border:1px solid var(--line);border-radius:3px;
  padding:1.5px 4px;line-height:1.2;white-space:nowrap}
/* 收起来的更早几段。**用类而不是 `hidden` 属性。**
   第一版写的是 `[hidden]` + `.pd-crs.open .pd-cr[hidden]{display:grid}`：
   类名切换了、按钮文字和箭头都变了,行却不出来 —— 浏览器对 `[hidden]` 的
   `display:none` 来自 UA 样式表,而我那条选择器压不住它（实测点完仍然只有
   5 行可见）。用自己的类就没有这层较量。
   **不拆成两个容器**：竖线画在容器上,拆开会在"展开"那一行断掉。 */
.pd-cr.more{display:none}
.pd-crs.open .pd-cr.more{display:grid}
.pd-more{display:flex;align-items:center;gap:6px;margin:5px 0 0 27px;
  padding:5px 0;border:0;background:none;cursor:pointer;
  font:650 11.5px var(--sans);color:var(--plum)}
.pd-more svg{width:13px;height:13px;transition:transform .22s}
.pd-crs.open + .pd-more svg{transform:rotate(180deg)}
/* 国家队：一行小标签,不进时间线 —— 它们没有队徽,
   排成时间线只会是一列孤零零的圆点。 */
.pd-nat{display:flex;flex-wrap:wrap;gap:6px;padding:13px 18px 0}
.pd-nat span{display:inline-flex;align-items:center;gap:6px;
  padding:5px 10px;border:1px solid var(--line);border-radius:8px;
  font-size:11.5px;font-weight:650;color:var(--ink-2)}
/* 国旗。**`align-items` 从 baseline 改成 center** —— 图片没有基线,
   baseline 对齐会把它按底边排,和文字差几个像素。 */
.pd-nat img{width:15px;height:15px;object-fit:contain;flex:none}
.pd-nat span i{font-style:normal;font-size:10.5px;color:var(--ink-4);
  font-variant-numeric:tabular-nums}

.pd-tail{height:16px}

/* 两个按钮**固定在底部**,不跟着内容滚 —— 它们是这个面板的出口,
   履历长的人（凯帕 14 段）得滚到最底下才看得见,等于没有。
   所以它在 `.pd-scroll` 外面,是 flex 列的第二个孩子。 */
.pd-foot{flex:none;display:flex;gap:8px;padding:13px 18px;
  border-top:1px solid var(--line);background:var(--paper)}
.pd-foot a{flex:1;text-align:center;padding:10px;border-radius:10px;
  font-size:12.5px;font-weight:650;text-decoration:none;transition:filter .16s}
.pd-foot a.pri{background:var(--plum);color:#fff}
.pd-foot a.sec{border:1px solid var(--line);color:var(--ink-2)}
.pd-foot a:hover{filter:brightness(1.08)}

/* 名单里正在看的那一行。
   **不用左边框** —— 一条竖色条既丑又和站内别处没有呼应。
   改成整行淡底 + 名字变主题色:强调的是"这一行是当前项",
   而不是在行首挂一个标记。 */
.prow.cur{background:var(--plum-1)}
.prow.cur .who b{color:var(--plum)}

/* 球员面板出现时,球队抽屉压一层淡遮罩 —— 告诉眼睛"现在在读左边"。
   **淡**是关键:名单还要能看清、能点,它不是被禁用,只是退到后面。 */
/* 遮罩**挂在抽屉外面、盖住整个抽屉**,不是挂在抽屉自己身上。
 *
 * 前两版都错在层级上,而且"样式生效了但屏幕没变化"最难查:
 * 第一版 `z-index:9`,第二版提到 40,计算值都是 opacity:1、颜色也对,
 * 可是看不见。问浏览器"这个点最上面是谁"才知道是 `.dr-art` ——
 * 抽屉是 flex 列、内容在 `.dr-scroll` 里,伪元素盖的是抽屉的盒子,
 * 而滚动容器的子元素在同一个层叠上下文里画在伪元素之上。
 * 给 `.drawer` 加 `overflow:hidden` 或 `isolation` 都会牵动已有布局,
 * 所以改成独立一层、z-index 落在两个抽屉之间,和抽屉内部结构无关。
 */
/* 浓度：**0.14 等于没有。** 截图对比过,盖上和不盖几乎分不出来 ——
   遮罩的作用是让眼睛知道"现在在读左边",太淡就只是多画一层。
   0.34 能明显退后,同时名单的字和队徽仍然清楚可读（它不是被禁用,
   只是退到后面；`pointer-events:none` 让它照样能点）。 */
/* **遮罩要接住点击。** 原来写 `pointer-events:none`,想法是"名单还能点",
   但那和遮罩表达的意思相反：它看着已经退到后面,点上去却直接换了人 ——
   用户报的就是这个（点抽屉外侧会切换球员）。
   现在点暗区 = 收起球员面板,一次点击回到名单,名单随即恢复可点。 */
.pd-veil{position:fixed;top:0;bottom:0;right:0;width:min(520px,100vw);
  z-index:81;background:rgba(22,2,28,.34);opacity:0;pointer-events:none;
  transition:opacity .26s;cursor:pointer}
body.pd-open .pd-veil{pointer-events:auto}
body.pd-open .pd-veil{opacity:1}

@media (max-width:1080px){
  /* 并排放不下了 —— 盖满全屏,靠返回回名单。
     `right:0` 和 `width:100%` **必须一起改**：只改宽度的话面板仍然
     从 520px 处起算,右边会空出一条。 */
  .pdrawer{right:0;width:100%;transform:translateX(100%);
    box-shadow:-16px 0 44px rgba(20,0,24,.26)}
  .pd-bar .pd-back{display:inline-flex;align-items:center;gap:5px;
    width:auto;padding:0 11px;font-size:11.5px;font-weight:650}
  /* 满宽时按自己的宽度算 16:9,不再绑 520 */
  .pd-mast{min-height:calc(100vw * 9 / 16)}
  .pd-mast-in{padding-right:120px}
  .pd-figure{width:178px}
  .pd-bio{padding-right:108px}
  /* 盖满全屏时右边的遮罩没人看见,省掉这层绘制 */
  body.pd-open .pd-veil{opacity:0}
}
.dr-close{position:absolute;right:13px;top:13px;z-index:5;width:34px;height:34px;
  border:0;border-radius:50%;background:rgba(0,0,0,.42);backdrop-filter:blur(4px);
  color:#fff;cursor:pointer;display:grid;place-items:center}
.dr-close:hover{background:rgba(0,0,0,.62)}
.dr-close svg{width:15px;height:15px}
.dr-scroll{overflow-y:auto;flex:1}
/* 球场头图 */
.dr-art{position:relative;aspect-ratio:16/9;background:var(--plum-2)}
/* **只管球场大图，不要管里面所有的 img。**
   队徽也在 .dr-art 里（它在标题块 .dr-cap 中），写成 `.dr-art img` 会把
   `position:absolute; inset:0` 一起套到队徽上 —— 队徽因此脱离 flex 行、
   吃不到内边距，压在队名上。这个重叠我修过一次没修对：当时以为是对齐问题，
   给文字容器加了 flex，但根因是定位被抢。 */
.dr-art>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform-origin:50% 55%;
  animation:drArt 22s cubic-bezier(.2,.7,.25,1) both}
/* 抽屉打开时照片极缓慢地推近 8%，给静态页一点"进场"的感觉；
   幅度小、周期长，不制造晕动。 */
@keyframes drArt{from{transform:scale(1.02)}to{transform:scale(1.1)}}
@media (prefers-reduced-motion:reduce){
  .dr-art>img{animation:none;transform:none}
}
/* 许可要求署名。放在左上角：右上角是关闭按钮，底部是队名和球场名。 */
.dr-credit{position:absolute;left:13px;top:13px;z-index:3;
  max-width:calc(100% - 66px);padding:5px 9px;border-radius:8px;
  background:rgba(16,0,20,.42);backdrop-filter:blur(6px);
  color:rgba(255,255,255,.78);text-decoration:none;
  font:600 10.5px/1.3 var(--sans);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dr-credit:hover{color:#fff;background:rgba(16,0,20,.62)}
.dr-art::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(24,0,28,.95) 0%,rgba(24,0,28,.45) 42%,
    rgba(24,0,28,.06) 100%)}
.dr-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:18px 20px;
  display:flex;align-items:center;gap:14px}
.dr-cap>div{min-width:0;flex:1}
.dr-cap img.crest{width:50px;height:50px;object-fit:contain;flex:none;
  filter:drop-shadow(0 2px 7px rgba(0,0,0,.55))}
.dr-cap h2{color:#fff;font-size:23px;line-height:1.12;letter-spacing:-.5px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dr-cap .gd{margin-top:3px;font-size:12px;color:rgba(255,255,255,.78)}
/* 战绩一行数字 */
.dr-stories{padding:0 20px 4px}
.dr-stats{display:grid;grid-template-columns:repeat(4,1fr);
  border-bottom:1px solid var(--line)}
.dr-stats div{padding:14px 8px;text-align:center;
  border-right:1px solid var(--line-2)}
.dr-stats div:last-child{border-right:0}
.dr-stats b{display:block;font-size:19px;font-weight:800;color:var(--ink);
  font-variant-numeric:tabular-nums}
.dr-stats span{display:block;margin-top:3px;font-size:10.5px;font-weight:700;
  color:var(--ink-3);letter-spacing:.06em;text-transform:uppercase}
.dr-sec{padding:16px 20px 6px;font-size:11.5px;font-weight:800;
  color:var(--ink-3);letter-spacing:.1em;text-transform:uppercase}
/* 阵容按位置分组 */
.pos-grp{padding:0 20px 10px}
.pos-ttl{display:flex;align-items:center;gap:8px;padding:9px 0 7px;
  font-size:12.5px;font-weight:800;color:var(--plum)}
.pos-ttl s{flex:1;height:1px;background:var(--line);text-decoration:none}
.plist{display:grid;gap:1px}
/* 这一行是 <a>（指向人物页），所以要把链接的默认色和下划线摘掉 ——
   否则一整列名字变成蓝色带线，像一堆待办链接。 */
/* 五列：头像 / 号码 / 名字+位置 / 国籍 / 身价。
   **身价列定宽 96px**，不给 auto —— auto 会让每行的列宽随数字位数变
   （`€7.5M` 和 `€159.3M` 差一位），于是一列数字左右各自对不齐，
   而这一列正是要竖着比的。定宽 + 右对齐 + 等宽数字，小数点才成一条线。 */
/* **国旗那列给定宽，不用 `auto`。**
   每一行 `.prow` 是**各自独立的 grid**（`.plist` 只负责把行摞起来），
   所以 `auto` 列的宽度是按**那一行自己的**内容算的 —— 带 `Netherlands`
   的行宽、带 `Italy` 的行窄，一列国旗于是左右错开（这就是"国旗没对齐"的
   真因，不是对齐属性写错了）。定宽之后对齐是构造出来的，不靠调。 */
.prow{display:grid;
  grid-template-columns:34px 30px minmax(0,1fr) 16px 93px;
  align-items:center;gap:10px;padding:7px 0;
  color:inherit;text-decoration:none;border-radius:8px;
  transition:background .15s}
.prow:hover{background:var(--paper-2)}
.prow:hover .who b{color:var(--orchid)}
.prow .face{width:34px;height:34px;border-radius:50%;overflow:hidden;
  background:var(--plum);display:grid;place-items:center;
  color:#fff;font:800 12px/1 var(--sans)}
.prow .face img{width:100%;height:100%;object-fit:cover}
.prow .no{font:800 13px/1 var(--sans);color:var(--ink-3);text-align:center;
  font-variant-numeric:tabular-nums}
.prow .who b{display:block;font-size:13.5px;font-weight:700;line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prow .who span{font-size:11px;color:var(--ink-3)}
/* 国籍：**只留圆形国旗，不写国名。**
   国名是这一行里信息密度最低的一样东西（读者认旗比读字快），而它的
   可变宽度既把国旗推得左右错开、又一路顶到身价那条曲线上。
   去掉它，国旗对齐和曲线的留白一起解决 —— 国名移到 `alt`/`title` 里，
   鼠标悬停和读屏器都还能拿到，信息没丢。
   旗是 SVG，给一圈极淡的描边，免得白色为主的旗（日本、英格兰）
   在白底上看不出边界。 */
.prow .nat{display:flex;align-items:center;justify-content:center}
.prow .nat img.flag{width:16px;height:16px;border-radius:50%;flex:none;
  box-shadow:0 0 0 1px rgba(28,10,32,.12)}
/* ── 身价：一条迷你曲线 + 现价 ──────────────────────────────────────
   **曲线在左、数字在右。** 视线于是是"先看走势、再落到数字上"，
   而不是读完数字再回头找那条线。
   曲线和数字**基线不对齐，是居中对齐** —— 那条线是个图形，
   让它的视觉重心和数字的 x-height 中点齐平才像一组。 */
/* 曲线和数字是**一组**，不是两样并排的东西：缝只留 5px，
   读起来是"这条走势最后落到这个数"。 */
.prow .mv{display:flex;align-items:center;justify-content:flex-end;gap:5px}
/* **字号收到 11.5px/700。** 原来 12.5px/800 比球员名字（13.5px/700）
   还重，一列身价于是比一列人名更抢眼 —— 而读者是来看人的，
   身价是补充信息。现在它和位置那行（11px）同一个量级。

   **定宽 + 右对齐。** 整组右对齐，而数字位数不齐（`€3.7M` 对 `€159.3M`
   差一位），不定宽时曲线会被推得左右错开 —— 实测曲线有两个 x 值
   （1328 / 1334）。46px 按最长的 `€159.3M` 量。 */
.prow .mv b{font:700 11.5px/1 var(--sans);color:var(--ink-2);
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;
  min-width:46px;text-align:right}
/* 悬停时数字跟着名字一起变色 —— 整行是一个链接，反馈要整行一致 */
.prow:hover .mv b{color:var(--ink)}
/* 迷你曲线：只有一条线。**不画轴、不画点、不画区间带** ——
   它在 42×14px 里，多一样东西就是一团墨。
   线宽 1.3：1.2 在这个尺寸下发虚，1.6 显得笨重。 */
.prow .mv svg.spark{display:block;flex:none;overflow:visible}
.prow .mv svg.spark path{fill:none;stroke:var(--ink-4);stroke-width:1.3;
  stroke-linecap:round;stroke-linejoin:round}
/* 涨用品牌紫，跌或平用灰。**不用红绿** —— 红绿是股票行情的语言，
   会把一份球队名单读成一张持仓表。 */
.prow .mv svg.spark.up path{stroke:var(--orchid)}
/* 没有身价的人（上游确实没估值的那 42 个）这一格空着。
   **不写"—"也不写"暂无"** —— 一列破折号是噪音，空着本身就是答案。 */
/* 真手机屏：收紧列宽。国名已经不占地方了，所以这里只需要把头像、号码和
   身价列各让出几个像素；**曲线保到最后**，它是这一列的全部意义。
   360px 以下连曲线一起撤，只留数字 —— 42px 的图挤在那个宽度里已经失真。 */
@media (max-width:430px){
  .prow{grid-template-columns:32px 26px minmax(0,1fr) 16px 84px;gap:8px}
}
@media (max-width:360px){
  .prow{grid-template-columns:32px 26px minmax(0,1fr) 16px 52px}
  .prow .mv svg.spark{display:none}
}
/* 抽屉底部的相关报道 */
.dr-news{padding:4px 20px 22px}
.dr-news a{display:grid;grid-template-columns:minmax(0,1fr) 62px;gap:11px;
  padding:9px 0;border-bottom:1px solid var(--line-2)}
.dr-news a:last-child{border-bottom:0}
.dr-news h4{font-size:13px;line-height:1.35;font-weight:660}
.dr-news .m{margin-top:3px;font-size:10.5px;color:var(--ink-3)}
.dr-news .sh{aspect-ratio:1/1;border-radius:5px;overflow:hidden;
  background:var(--paper-2)}
.dr-news .sh img{width:100%;height:100%;object-fit:cover}
.dr-foot{padding:0 20px 24px}
.dr-foot a{display:block;text-align:center;padding:11px;border-radius:7px;
  background:var(--plum);color:#fff;font-size:13.5px;font-weight:700}
.dr-foot a:hover{background:var(--orchid)}
.drload{padding:40px;text-align:center;color:var(--ink-3);font-size:13px}

/* ── 单独打开的球员面板（报道页正文里点人名）──────────────────────────
 * 没有球队抽屉在旁边，所以它不落在 520px 那条线左边，而是**贴着右边缘从外面滑进来**
 * —— 和球队抽屉同一个动作、同一个宽度。刊头按自己的宽度算 16:9。
 * 翻人、计数、返回阵容都没有意义（他不在任何名单里），收起来；关闭键靠右。 */
.pdrawer.solo{right:0;width:min(470px,100vw);transform:translateX(100%);opacity:1;
  box-shadow:-18px 0 50px rgba(20,0,24,.26)}
.pdrawer.solo.on{transform:none}
.pdrawer.solo .pd-mast{min-height:calc(min(470px,100vw) * 9 / 16)}
.pdrawer.solo .pd-bar .pd-back,.pdrawer.solo .pd-step,.pdrawer.solo .pd-count{display:none}
.pdrawer.solo #pdclose{margin-left:auto}