:root{--gold:#B19534;--panel:#323232;--grey:#727272;--ink:#000000;}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#000;color:#fff;
  font-family:'Poppins','Avenir Next',Avenir,-apple-system,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
  -webkit-font-smoothing:antialiased;}

/* 顶栏：**半透明灰 + 毛玻璃**，让主视图的照片透上来（用户 2026-09-16 指定，
   参考 wwr-stardom.com 的站头）。
   · 主视图用 `margin-top:-75px` 顶到页面最上面，所以照片是**从 y=0 开始**的，
     顶栏就压在它上面 —— 这是「能透出后面的图」的前提，只改颜色是做不到的。
   · `backdrop-filter` 让背后的照片糊成一片底色，压着的白字才读得清；
     不支持的老浏览器退化成半透明灰（也能看，不会瞎）。
   · `--nav` 同时给高度和「主视图要往回缩多少 / 内边距要加多少」，改一处全跟着走。 */
:root{--nav:75px}
.nav{position:sticky;top:0;z-index:20;height:var(--nav);
  display:flex;align-items:center;padding:0 40px;
  /* ⚠️ 隐藏的是**这一条框（底色 + 毛玻璃 + 下边框）**，不是整条顶栏 ——
     用户 2026-09-16 明确：「我说是把栏目隐藏，WrestleCN 是一直存在的」。
     所以站名始终挂在左上角（浮在主视图照片上），只有框在滑动时出现。
     默认全透明（不占视觉），下滑时底色/边框/毛玻璃一起过渡进来。 */
  background:transparent;border-bottom:1px solid transparent;
  transition:background-color .34s ease,border-color .34s ease}
.nav--show{background:rgba(18,18,18,.55);border-bottom-color:rgba(255,255,255,.10);
  -webkit-backdrop-filter:blur(10px) saturate(1.15);backdrop-filter:blur(10px) saturate(1.15)}
/* 主视图完全离开视口之后转实底：照片已经不在顶栏背后了，再透就是纯噪音 */
.nav--solid{background:rgba(8,8,8,.88);border-bottom-color:rgba(255,255,255,.16)}
/* 框还没出现时文字直接压在照片上，给一层投影保证可读 */
.nav .brand,.nav .ttl{text-shadow:0 1px 10px rgba(0,0,0,.7)}
/* 左上角品牌（可点回首页）。原来是「腰带英文名 · 冠军历史」，用户 2026-09-16 换成品牌名 */
.nav .brand{display:flex;align-items:center;text-decoration:none;color:inherit}
.nav .brand__logo{height:38px;width:auto;display:block}
@media (prefers-reduced-motion: reduce){.nav{transition:none}}

/* ---------- 主视图（用户 2026-09-16 指定，照 AEW 官网历史页的版式做了三层）----------
   ① 联盟 logo ② 腰带的英文原名 ③ 中文名。
   **不铺照片**：83 个页面各配一张背景图不现实，而且那种「氛围图」会跟下面卡片的
   照片抢注意力。用一道自上而下的深灰渐变给开头一个「封面」感，边界用一条
   1px 白线收住（和 .strip 的下边框同一种语言）。
   金句：这里的层次是**内容层次**不是装饰 —— logo 是识别、英文名是对照原文、
   中文名才是读者真正看的名字，所以中文那行用品牌金而不是灰色。

   ⚠️ 2026-09-16 晚用户要求**把主视图下端一直延到原来那条「现任：…」衬线**，
   并把那条衬线连同文字一起删掉。所以下内边距从 54 加到 104（≈ 原 strip 的
   16+18+16+1 = 51px），**不是在下面补一块** —— 高度靠 padding 撑，
   横幅（封面图）才会跟着一起变高。改这里要同步 `make_hero_preview.py` 里的
   `heroHeight()`（那边是硬编码的 342 / 251）。 */
.hero{position:relative;width:100%;text-align:center;
  /* 顶栏是浮在主视图**上面**的：负外边距把照片拉到 y=0，内边距再加回顶栏的高度，
     于是 logo 的位置、区块总高（417px）都跟以前完全一样。 */
  margin-top:calc(-1 * var(--nav));
  padding:calc(60px + var(--nav)) 24px 128px;
  /* ⚠️ 2026-09-17 这里本来是 `border-bottom:1px solid rgba(255,255,255,.08)`
     （"用一条 1px 白线收住边界"）—— 用户看主视图下沿时说**太丑**，要去掉。
     去掉之后就靠「渐弱最后一档收成纯黑」（见 HERO_FADE_SOFT/FULL 末段那段黑）
     把照片送进黑页面，不需要再画线。**别再把它加回来。** */
  /* 🔴 必须有**独立的 background-color**（长属性），不能只靠上面那条 gradient：
     `background:radial-gradient(...)` 把梯度放在 **background-image** 里，而页面上的
     `<section class="hero" style="background-image:url(封面)">` 那句**内联样式会把整层
     background-image 替换掉** → 于是"封面没加载出来"时 hero 一点底色都没有，
     白底 + 白色标题 = **一片空白**（用户 2026-09-17 用 4G 打开 world-tag 那页就是这个现象，
     他说"显示错误"）。background-color 是长属性，内联的 background-image 覆盖不掉它，
     所以照片没到 / 加载失败 / 被拦截时，hero 依然是深底白字，照样能读。 */
  background-color:#0d0d0e;
  background-image:radial-gradient(130% 150% at 50% -10%,#1e1e20 0%,#0d0d0e 55%,#000 100%)}
.hero__logo{display:block;height:70px;width:auto;max-width:min(440px,72vw);
  margin:0 auto 30px;object-fit:contain}
.hero__en{margin:0;font-size:30px;line-height:1.24;font-weight:600;color:#fff;
  letter-spacing:.01em;text-wrap:balance;
  /* 英文 30px，比中文 17px 大将近一倍 —— 同一组偏移量套在它身上几乎看不出来，
     所以按字号放大一档。用户 2026-09-17：中文那层阴影「喜欢」，要求英文原名也加上。 */
  text-shadow:0 2px 4px rgba(0,0,0,.9),0 4px 26px rgba(0,0,0,.78)}
.hero__zh{margin:14px 0 0;font-size:17px;line-height:1.5;color:var(--gold);letter-spacing:.06em;
  /* ① 1px 的近距硬阴影描出字形边界（关键，柔阴影给不出边界）
     ② 一大圈外发光把文字从照片里托出来。金色压在亮照片上全靠这两层才读得清。 */
  text-shadow:0 1px 2px rgba(0,0,0,.92),0 2px 18px rgba(0,0,0,.8)}
/* 🔴 投影**必须挂在标题本身**，不能挂在 `.hero--cover` 下面。
   原来写成 `.hero--cover .hero__en,.hero--cover .hero__zh` —— 于是 13 个
   **没有封面**的页面（NJPW 12 页 + NEVER 无差别级，主视图只有纯渐变）中英文标题
   一个投影都没有。用户 2026-09-17 拿着有封面的世界双打那页来对比，
   要求「放到所有历史界面、英文原名也加上」。
   渐变底不是纯黑（顶部 #1e1e20），黑投影压在上面是有层次的，不会白加。 */
/* 有品牌封面时：图铺满整条、按各自算好的位置裁。 */
.hero--cover{background-size:cover;background-repeat:no-repeat}
/* ⚠️ 渐弱那一层必须比盒子**高 2px**。
   主视图的高度是**小数**（`line-height:1.24` × 30px = 37.2、`1.5` × 17 = 25.5 撑出来的，
   实测 1400 视口下是 439.6875px）。而没有固有尺寸的渐变会被画成**恰好等于背景区的高度**，
   于是最后那一行只被盖住 68.75%，**下面那张照片从剩下的 31% 里透出来** ——
   在页面上就是主视图最底部一条 1px 的亮线（肉眼像一条描边，用户 2026-09-17 报「太丑」）。
   把渐弱层的高度补 2px（`background-position:center` 会让它上下各溢 1px，多出的被裁掉），
   亚像素缝就被盖实了。两个值按层对应：第一层渐变拿 `100% calc(100% + 2px)`，
   第二层照片继续 `cover`。所以这一条**只加在真有渐弱层的页面上**（`.hero--fade`）——
   只有 `url(…)` 一层时若套上它，`background-size` 会去拉伸照片，比例会坏。 */
.hero--fade{background-size:100% calc(100% + 2px),cover}
/* 中文标题的金色保留（站点主色，不动），投影见上面 `.hero__zh` —— 已提到不受
   `.hero--cover` 约束的层级，没封面的页面同样有。这里只补字重。 */
.hero--cover .hero__zh{font-weight:500}
.hero--cover .hero__logo{filter:drop-shadow(0 2px 12px rgba(0,0,0,.65))}

/* black 980px column, cards centred inside it (48px black on each side) */
.stage{width:980px;margin:0 auto;background:#000}
.list{display:grid;row-gap:50px;padding:36px 48px 90px}

/* ⚠️ 必须写成 `.entry.entry--note`（两个类）。只写 `.entry--note` 时特异性和
   `.entry{background:#fff}` 相同，而 .entry 那条排在后面 → 深色底被白色盖掉，
   说明块看起来就是一张普通白卡。 */
.entry.entry--note{grid-template-columns:1fr;width:884px;min-height:0;background:#141414;border-left:6px solid var(--gold)}
.entry--note .entry__text{grid-column:1;width:auto;padding:26px 32px 28px}
.entry--note .name{color:#fff;font-size:19px;min-height:0}
.entry--note .desc{color:#c9c9c9;max-width:none;min-height:0;-webkit-line-clamp:unset;
  display:block}
/* 用户在正文里敲出来的**空行**：占掉一行的高度（1.6em = 正文行高），
   但不带 .desc 的 8px 下边距 —— 不然「空一行」会变成「空一行半」。 */
.entry--note .desc--blank{height:1.6em;margin:0}
.entry{scroll-margin-top:120px}
.entry:target{box-shadow:0 0 0 3px var(--gold),0 0 0 9px rgba(177,149,52,.22)}
.entry{display:grid;grid-template-columns:260px 43px 400px 31px 150px;
  width:884px;min-height:260px;background:#fff;border-radius:0;
  /* ⚡ 性能：一页可能有一两百张卡片，`content-visibility:auto` 让浏览器**跳过
     视口外的卡片的渲染**（它们仍参与布局，只是不画）。`contain-intrinsic-size`
     给未渲染的卡片一个占位高度，避免滚动条乱跳 —— 用 `auto` 关键字，
     渲染过一次之后浏览器会记住真实高度。
     ⚠️ 实测确认过：加了它之后锚点跳转（`#r150`/`#r100`/`#r50`/`#r5`）仍然
        精确落在 scroll-margin-top（174 / 手机 142）上，不会被顶栏遮挡。
     Safari 18 以下不认这条，会直接忽略 —— 不影响任何功能。 */
  content-visibility:auto;contain-intrinsic-size:auto 260px}
.entry__photo{grid-column:1;align-self:stretch}
/* Reserve TWO lines for the champion name on every page. Long entries are common
   (`"Stone Cold" Steve Austin`, `The Judgment Day (Damian Priest & Finn Bálor)`)
   and without a reserved block those cards grow a line taller than their
   neighbours, so the column stops being uniform. The height is clawed back from
   the top padding: 25 + 52.5 + 46.4 + 136 ≈ 260. */
.entry__text{grid-column:3;width:400px;padding-top:25px}
.entry__days{grid-column:5;width:150px;min-height:100%;background:var(--panel);text-align:center}

/* Portrait panel is a dark grey block sitting flush against the white card,
   matching the reference. The dashed affordance lives on the ::after so it only
   shows while a photo is missing (the img covers the ::after once loaded). */
.ph{position:relative;width:260px;height:100%;background:#232323;overflow:hidden}
.ph::after{content:"待补图";position:absolute;inset:0;display:grid;place-items:center;
  font-size:12px;letter-spacing:.2em;color:#7a7a7a;border:1px dashed #454545;
  border-radius:2px}
/* the placeholder label is an ::after, so it paints ABOVE the img unless the
   img gets its own stacking level — without z-index the text ghosts over every
   photo once the user drops one in. */
.ph img{position:relative;z-index:1;display:block;width:260px;height:100%;object-fit:cover}

.name{margin:0;min-height:2.5em;font-weight:600;font-size:21px;line-height:1.25;color:#000}
.name .zh{margin-left:8px;font-weight:400;font-size:15px;color:#727272;letter-spacing:.01em;white-space:nowrap}
.range{margin:0 0 24px;font-weight:500;font-size:16px;line-height:1.4;color:#000}
/* 「兑现结果」小标识（MITB 两页，见 make_tournament.CASHIN）。
   实心色块 + 白字：卡片底是白的、说明块底是 #141414，半透明底在其中一种上会糊，
   实心色块两边都清楚。色档只有两个（绿=成功 / 红=不成功），但文案有三类 ——
   「兑现失败」和「合约被夺」都是红的，却是两回事（后者根本没兑现过），不能合成一句。 */
.cashin{display:inline-block;margin-left:9px;padding:1px 9px 2px;border-radius:999px;
  font-size:12px;font-weight:500;line-height:1.6;letter-spacing:.02em;
  color:#fff;vertical-align:2px;white-space:nowrap}
.cashin--ok{background:#1a7f37}
.cashin--bad{background:#c0392b}
.desc{margin:0 0 8px;font-size:14px;line-height:1.6em;min-height:136px;max-width:400px;color:#4d4d4d;
  display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}

.entry__days .n{margin:97px 0 0;font-size:34px;line-height:1;font-weight:600;
  color:var(--gold);letter-spacing:.2em;text-indent:.2em}
.entry__days .l{margin:6px 0 0;font-size:16px;line-height:1;color:#fff;letter-spacing:.2em;text-indent:.2em}
/* 缺图占位（见 `has_photo`）。别让缺图表现成「一块空白」—— 那看着像页面坏了。
   ⚠️ 用绝对定位铺满，不要用 height:100%：手机端 `.ph` 走的是
   `height:auto;aspect-ratio:1/1`，百分比高度会塌成 0，字就没了。
   `.ph` 本身是 position:relative，两种情况下都能兜住。 */
.entry__photo .noimg{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;color:#6f6f6f;font-size:12px;letter-spacing:.24em;text-indent:.24em}

/* Tag titles put a whole team in the heading (`The Hurt Business (Cedric
   Alexander & Shelton Benjamin)`), which overflows two lines at 21px. 18px fits
   every one of them in two lines, so the reserved block still holds and the
   cards stay uniform. */
.is-team .name{font-size:18px;min-height:3.75em}

@media (max-width:1023px){
  body{overflow-x:hidden}
  .stage{margin:0}
}
@media (max-width:700px){
  :root{--nav:64px}
  .nav{padding:0 16px}
  .nav .ttl{font-size:14px}
  .hero{padding:calc(38px + var(--nav)) 18px 109px}
  .hero__logo{height:48px;margin-bottom:20px}
  .hero__en{font-size:22px}
  .hero__zh{font-size:15px;margin-top:10px}
  .stage{width:auto;margin:0}
  .strip{padding:14px 16px}
  .list{row-gap:14px;padding:16px 12px 48px}
  /* ⚠️ 说明块必须**再覆盖一次**。`.entry.entry--note{width:884px}` 是**两个类**
     （特异性 0,2,0），比上面那条 `.entry{width:auto}`（一个类，0,1,0）高 ——
     光靠它压不住。而说明块一旦还是 884px，`.list` 里那条 auto 栏就被它撑到 884，
     **其余所有卡片跟着一起变成 884px**，整页在手机上横向溢出；
     body 在 ≤1023px 有 `overflow-x:hidden`，所以还会**静默裁掉**右边一截
     （用户看到的是「手机端排版乱了」，而不是「有个元素太宽」）。
     实测 390px 视口：修前 html.scrollWidth=900、498 个元素超出视口；修后 358、0 个。
     ⚠️ 吃这一条的**远不止** ECW 一个页面：凡是带说明块的都中招 ——
     退役说明（`id="retired"`，9 个页面，而且它在列表**最上面**，等于整页都错）、
     两段历史交界（世界重量级 / WWE 双打 / 世界双打 / ECW）、NOAH 硬核的 topNote。 */
  .entry.entry--note{width:auto;border-left-width:5px;grid-template-columns:1fr;padding:0}
  /* ── 卡片：小方图 + 文字并排（2026-09-19 改） ──────────────────────────
     🔴 旧写法是 `.entry__photo,.ph,.ph img{width:100%;height:auto;aspect-ratio:1/1}`
     —— 一张**整宽的正方图**（390 视口下 358×358），于是每张卡固定 628px 高。
     实测代价（deploy/probe_card.sh，390px）：
       · WWE 冠军页 158 张卡 = 106,572px ≈ **126 屏**；ECW 51 张 = 33,444px ≈ 40 屏；
       · 站内 3823 张冠军照的**中位宽度只有 380px**，其中 38% 不到 358px →
         全站 69% 的卡在手机上把照片**放大**，最狠 2.39 倍（ECW 那种老照片页
         37/49 张都在放大）—— 用户报的「历史页面图片尺寸有问题」就是它。
     改成 88px 小方图之后：卡片降到约 180px（WWE 页约 34 屏），
     而且 88px 的框对站内几乎所有源图是**缩小**而不是放大。
     ⚠️ 天数那一行的「天/届」是白字（`.entry__days .l{color:#fff}`），
        所以它**必须继续待在深色底上** —— 去掉 `background:var(--panel)`
        会让这个字在白卡上完全隐形。
     ⚠️ 卡片 padding 的下边是 0：让天数条用负 margin 铺到卡片底边。 */
  .entry{grid-template-columns:88px 1fr;column-gap:12px;width:auto;min-height:0;
    padding:14px 14px 0}
  .entry__photo{grid-column:1;grid-row:1;align-self:start}
  .entry__photo,.ph,.ph img{width:88px;height:88px;aspect-ratio:1/1}
  .entry__text{grid-column:2;grid-row:1;width:auto;padding:0}
  .name{font-size:19px;min-height:0;margin-bottom:3px}
  .name .zh{display:block;margin:3px 0 0;font-size:13px;white-space:normal}
  .range{margin:0 0 6px;font-size:13px}
  .desc{min-height:0;-webkit-line-clamp:unset;font-size:13px;line-height:1.55;margin:0}
  .entry__days{grid-column:1 / -1;grid-row:2;width:auto;min-height:0;
    margin:12px -14px 0;padding:7px 14px;background:var(--panel);
    display:flex;align-items:baseline;justify-content:center;gap:10px}
  .entry__days .n{margin:0;font-size:20px;letter-spacing:.14em}
  .entry__days .l{margin:0;font-size:11px;letter-spacing:.14em}
  /* 内边距按手机端的节奏收小：桌面上是 26/32/28，手机上那 32px 左右边距要吃掉近 1/5 宽度 */
  .entry--note .entry__text{padding:18px 16px 20px}
}
@media print{.nav{position:static}}
/* ── 排序条 ─────────────────────────────────────────────────────────
   粘在顶栏下面。放在 .stage **外面**是刻意的：视口 700–1024px 时页面尾部的脚本
   会给 .stage 加 zoom 缩放，而顶栏不缩放 —— 粘在缩放容器里 `top:var(--nav)`
   会被一起缩小，条子就滑到顶栏底下了。放外面与缩放无关。

   条子走**毛玻璃**，与站内既有的顶栏同一套语言（`.nav--show` =
   `rgba(18,18,18,.55)` + `blur(10px) saturate(1.15)`）。
   用户 2026-09-17：「类似于毛玻璃的感觉，现在这样太生硬了」——原来是
   `rgba(0,0,0,.94)` 实底 + `#1c1c1e` 硬边 + 实底按钮，压在黑页面上就是一块黑板子。 */
/* 🔴 三层关系（用户 2026-09-17 两次修正后定的）：
     顶栏毛玻璃 z-index 20  <  功能层 z-index 25
   用户的第二句要求是「搜索与排序的图层应该在毛玻璃层的上方」——
   所以功能层整层抬到顶栏之上：控件**始终全亮**，不会被毛玻璃压暗。
   那「毛玻璃扫过功能层」怎么演？—— 见 `.sortbar__bg`：**去掉的是那层玻璃底**，
   靠裁切假装被盖住，控件本身不受影响。 */
.sortbar{position:sticky;top:0;z-index:25;
  /* 空壳不吃事件（否则它会挡住顶栏左上角的 logo 链接）；
     真正可点的区域在下面的 `.sortbar__bg` 与 `.sortbar__in` 上。 */
  pointer-events:none}
/* 玻璃底单独一层。为什么非拆不可：桌面端「被毛玻璃扫过」是**裁掉它的上半部分**
   模拟的（见 SORT_JS），裁一个独立元素不会连带把里面的控件也裁掉；
   同时它比顶栏低、比控件高，于是玻璃可以被吃掉、控件不受影响。 */
.sortbar__bg{position:absolute;inset:0;pointer-events:auto;
  /* ⚠️ `brightness(.50)` 不是装饰，是**可读性保险**：
     条子粘住之后，从它底下滑过去的是 `.entry` 白卡片。只做 blur + 半透明黑的话，
     纯白卡透过来仍有 ~115 的亮度，按钮文字压上去只有 2.6:1，看不清。
     先把背后压暗再合成：纯白卡 → 约 74，文字 → 约 230，**实测 7.7:1**。
     而压在黑页面上时整条只剩 ~11，与页面差 0.0015 —— 几乎隐形，
     **不会出现一块硬板子**，这才是「不生硬」的来源。 */
  background:rgba(10,10,11,.46);
  -webkit-backdrop-filter:blur(16px) saturate(1.25) brightness(.50);
  backdrop-filter:blur(16px) saturate(1.25) brightness(.50);
  border-bottom:1px solid rgba(255,255,255,.09);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 12px 32px rgba(0,0,0,.38)}
/* 不支持 backdrop-filter 的浏览器（老 Firefox）退回实底 —— 宁可不好看，不能看不清 */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .sortbar__bg{background:rgba(10,10,11,.93)}
}
/* 交接之后玻璃底由顶栏接管，功能层只剩一个透明空壳 */
.sortbar.merged .sortbar__bg{display:none}
/* ⚠️ `max-width:100%` 不能少：700–1023px 这段视口里 .stage 仍是 980px 宽（只是被
   JS 加了 zoom 缩小），而 .sortbar__in 不会跟着缩 —— 写死 980px 就会在
   比如 760px 的视口上横向溢出 220px，整页多出一条横向滚动条。 */
/* 这里原本有个「排序」小标题（`.sortbar__t`），用户 2026-09-17 要求删掉 ——
   三颗标签本身已经说清是什么了，多一个词是噪音。
   紧接着他又说「把他移到右边吧」，所以现在靠 `justify-content:flex-end` 贴右。
   内边距仍是 980px 舞台的 48px：于是控件的**右边缘与白卡片的右边缘齐平**
   （1440 视口下都是 x=1162），和删标题时左边那种「自动对齐卡片列」是同一个巧合。 */
.sortbar__in{position:relative;z-index:1;pointer-events:auto;
  width:980px;max-width:100%;margin:0 auto;display:flex;align-items:center;
  justify-content:space-between;gap:12px;padding:12px 48px}

/* ── 排序段控件：苹果分段控件那种「选中项是一颗会滑过去的药丸」────────
   三颗按钮排在一条凹槽里，选中态不是给按钮上色，而是**背后那颗药丸滑过去**。
   用户 2026-09-17：「类似于苹果的那种滑动感？」 */
.seg{position:relative;display:inline-flex;align-items:center;padding:3px;
  border-radius:999px;background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.45);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
/* 药丸：绝对定位 + transform 平移，width 跟着目标按钮走。
   ⚠️ 定位基准是**padding box**（绝对定位元素的包含块），所以 JS 里算偏移量时
      要减掉 `seg.clientLeft`（边框宽度），否则整颗药丸偏右 1px。 */
.seg__pill{position:absolute;left:0;top:3px;width:0;height:calc(100% - 6px);
  border-radius:999px;pointer-events:none;z-index:0;
  background:linear-gradient(180deg,#cbb055,#a98d2c);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42),
             0 1px 3px rgba(0,0,0,.35),
             0 3px 14px rgba(177,149,52,.30);
  /* 苹果那种「到位前微微过冲、再收回来」的弹簧感：末段 y 超过 1。
     宽度也一起过冲，和 iOS 分段控件来回拨时的手感一致。 */
  transition:transform .40s cubic-bezier(.34,1.28,.5,1),
             width .40s cubic-bezier(.34,1.28,.5,1);
  will-change:transform,width}
/* 首帧定位不能有动画 —— 否则药丸会从左端「飞」到选中项 */
.seg--init .seg__pill{transition:none}
/* ⚠️ 三颗按钮的 font-weight **必须一致**（都 500）。选中态若加粗，
   该按钮的文字会变宽 → 整条 seg 的布局跟着变 → 药丸的目标位置也变，
   拨动时会看到相邻按钮在抖。选中感交给药丸和文字颜色，别交给字重。 */
.seg__b{position:relative;z-index:1;font:inherit;font-weight:500;font-size:13px;
  letter-spacing:.06em;line-height:1;color:rgba(255,255,255,.80);
  background:none;border:0;border-radius:999px;padding:8px 15px;cursor:pointer;
  /* 颜色渐变比药丸慢一点点：滑过来的同时字色交叉淡入，不会「啪」地变色 */
  transition:color .34s cubic-bezier(.32,.72,0,1),opacity .16s linear}
.seg__b:hover{color:#fff}
.seg__b:active{opacity:.72}
.seg__b[aria-pressed="true"]{color:#1a1608}
.seg__b:focus-visible{outline:2px solid rgba(203,176,85,.85);outline-offset:2px}

/* ── 左槽：按日期查那天的冠军 ─────────────────────────────────────────
   用户 2026-09-17：「在左侧原本的地方加入一个搜索栏：有点透明感，**不要药丸形状**。
   功能是输入某年某月某天（可以单独查某年、某年某月）查找该历史页面内那天的冠军；
   假如这一天超出了该头衔的最早历史，则直接跳到最早的那名冠军处。」
   所以这里是**方角**（6px 圆角），不是 .seg 那种胶囊。 */
.dayq{position:relative;display:flex;align-items:center}
/* 放大镜：用户给了一张 Safari 搜索框的参考图 ——「类似于这种感觉，但是稍微描个边」。
   参考图的核心特征是**左边一个小放大镜 + 扁平的底 + 几乎看不见的边**，
   所以这里回到「扁平 + 一道清楚的描边」，把上一版那圈玻璃厚度（内高光/内暗边/渐变）去掉。 */
/* ⚠️ 图标**必须显式给 z-index**：它跟 `<input>` 是兄弟，而 input 上有
   `backdrop-filter`（会建层叠上下文）。不写 z-index 时两者的绘制顺序靠
   “位置元素 vs 弹性元素”那套规则推，实测在真机上会被 input 的模糊糊到 ——
   用户报「左边的搜索符号是糊的」。
   另外尺寸给 16px（和 viewBox 1:1），stroke 1.7、不透明度 .55：
   14px 时描边只有 1.31px，配上 40% 的白，在 1x 屏上就是一团灰。 */
.dayq__ico{position:absolute;left:10px;top:50%;transform:translateY(-50%);
  width:16px;height:16px;color:#fff;z-index:2;
  /* ⚠️ 半透明要加在**整个元素**上（`opacity`），不要加在描边颜色上：
     放大镜的圆环和手柄在 45° 处是**叠在一起**的，用半透明描边色的话
     重叠处会二次合成（实测那里亮到 207，其余只有 149），接头处出现一个亮点。
     整元素 opacity 是先画完再统一透明，没有这个问题。 */
  opacity:.55;pointer-events:none;transition:color .18s,opacity .18s}
.dayq:focus-within .dayq__ico{color:#d8be69;opacity:.95}
.dayq__in{font:inherit;font-size:13px;line-height:1;width:250px;
  color:rgba(255,255,255,.95);
  background:rgba(255,255,255,.055);
  /* 🔴 「稍微描个边」= 就是这一条：边框比上一版的 .16 提到 .20，
     同时在**占位字没填满时**也能一眼看出这是一格输入框。
     上一版靠「上沿亮发丝 + 下沿暗发丝 + 渐变」堆出玻璃厚度，看着像块厚玻璃；
     参考图是扁平的，所以那些内影全部去掉。 */
  border:1px solid rgba(255,255,255,.20);
  border-radius:8px;                      /* ← 仍然是方角，不要药丸 */
  padding:9px 30px 9px 33px;              /* 左边留出放大镜的位置 */
  -webkit-backdrop-filter:blur(6px) saturate(1.4);
  backdrop-filter:blur(6px) saturate(1.4);
  transition:background .18s,border-color .18s,box-shadow .18s}
.dayq__in::placeholder{color:rgba(255,255,255,.45)}
.dayq__in:hover{background:rgba(255,255,255,.085);border-color:rgba(255,255,255,.30)}
.dayq__in:focus{outline:none;background:rgba(255,255,255,.085);
  border-color:rgba(203,176,85,.62);
  box-shadow:0 0 0 3px rgba(177,149,52,.18)}
/* 输入错格式时抖一下（用户明确「减少动态效果」时下面那条会关掉） */
.dayq--bad .dayq__in{border-color:rgba(214,96,77,.75);box-shadow:0 0 0 3px rgba(214,96,77,.16)}
.dayq__clr{position:absolute;right:3px;top:50%;transform:translateY(-50%);
  width:24px;height:24px;display:flex;align-items:center;justify-content:center;
  border:0;background:none;border-radius:5px;cursor:pointer;
  color:rgba(255,255,255,.42);font-size:15px;line-height:1}
.dayq__clr:hover{color:#fff;background:rgba(255,255,255,.09)}
.dayq__clr[hidden]{display:none}
/* 结果提示：绝对定位在输入框下方，不占布局、不改变条子高度 */
.dayq__msg{position:absolute;left:0;top:calc(100% + 9px);z-index:3;
  max-width:min(420px,72vw);font-size:12px;line-height:1.5;
  color:rgba(255,255,255,.88);
  background:rgba(18,18,19,.94);border:1px solid rgba(255,255,255,.12);
  border-radius:8px;padding:8px 11px;box-shadow:0 10px 28px rgba(0,0,0,.55);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  opacity:0;transform:translateY(-4px);pointer-events:none;
  transition:opacity .2s ease,transform .2s ease}
.dayq__msg.on{opacity:1;transform:translateY(0)}
.dayq__msg b{color:#cbb055;font-weight:600}
/* 结果列表：用户 2026-09-17「搜索时，如『科迪』我希望能**直接列出他所有的戴冠记录**，
   而不是定位。搜索『时间』才是定位。」——所以人名走列表、日期才跳转。 */
.dayq__res{position:absolute;left:0;top:calc(100% + 9px);z-index:4;
  width:min(430px,86vw);max-height:min(56vh,440px);overflow:auto;
  padding:6px;border-radius:10px;
  background:rgba(18,18,19,.96);border:1px solid rgba(255,255,255,.12);
  box-shadow:0 10px 28px rgba(0,0,0,.55);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  opacity:0;transform:translateY(-4px);pointer-events:none;
  transition:opacity .16s ease,transform .16s ease}
.dayq__res.on{opacity:1;transform:translateY(0);pointer-events:auto}
.dayq__reshead{margin:0;padding:8px 10px 7px;font-size:12px;line-height:1.4;
  color:rgba(255,255,255,.55);border-bottom:1px solid rgba(255,255,255,.08)}
.dayq__reshead b{color:#cbb055;font-weight:600}
.dayq__resrow{display:flex;align-items:center;gap:10px;margin-top:2px;
  padding:8px 10px;border-radius:7px;text-decoration:none;
  color:rgba(255,255,255,.92);font-size:13px;line-height:1.35}
.dayq__resrow:hover,.dayq__resrow:focus-visible{background:rgba(255,255,255,.09);outline:none}
.dayq__resrow .nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dayq__resrow .rg{margin-left:auto;flex:0 0 auto;
  color:rgba(255,255,255,.5);font-size:12px;font-variant-numeric:tabular-nums}

/* ── 合并：毛玻璃层撞上功能层时，把控制条并进毛玻璃层 ──────────────────
   用户 2026-09-17 报：「当我向下滑动页面，毛玻璃层撞上功能层后会黏在一起、
   一起滚动。我希望毛玻璃层撞上功能层后，功能层消失，但是其中的搜索栏与排列
   会并入毛玻璃层，与毛玻璃层一起上下移动。我希望这个过渡动画能做的自然一些。」

   做法：爬过阈值时，JS 把 `.sortbar__in`（980px 居中的那一块，含搜索+分段控件）
   **整个搬进导航栏的 `.navslot`**；`.sortbar` 自己只剩一个**透明的空壳**。
   为什么搬 `.sortbar__in` 而不是搬搜索框本身 —— 它是 `width:980px;margin:0 auto`
   的居中盒，搬进全宽的 `.navslot` 之后**左右位置一模一样**，位移只剩垂直方向，
   配合下面的 FLIP 就是一次干净的上滑，不会出现「同时横向飞走」的怪动作。 */
.navslot{position:absolute;left:0;right:0;top:0;bottom:0;
  display:flex;align-items:center;pointer-events:none}
.navslot > *{pointer-events:auto}
/* 「功能层消失」：底色 / 发丝边 / 投影 / 毛玻璃全部撤掉。
   它仍然 sticky、仍然占着原来的高度（高度由 JS 钉住），所以：
     · 内容不会因为控制条被搬走而下跳；
     · 空壳是透明的，从它下面滚过去的卡片照样看得见。 */
.sortbar.merged{background:none;border-bottom-color:transparent;
  box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
/* 说明块解释的是「默认顺序下上下两段的分界」，换了顺序那句话就不成立，藏掉 */
.list.is-sorted > .entry--note{display:none}
/* 深链（搜索结果里的 `#rN`）要同时避开顶栏和新加的排序条 —— 覆盖上面那条
   `.entry{scroll-margin-top:120px}`（同特异性，写在后面即生效）。 */
.entry{scroll-margin-top:174px}
/* 窄屏一行塞不下「logo + 搜索 + 分段控件」→ 并进去之后落在**第二行**。
   这一行自己补一层与顶栏同色同模糊的玻璃，所以两层看起来仍是一整块，
   而不是「两块玻璃叠在一起」。绝对定位 + 固定高度 = 不引起任何重排。 */
@media (max-width:1023px){
  /* 窄屏一行放不下「logo + 搜索 + 分段控件」，交接之后控件落在顶栏**下面那一行**，
     所以功能层必须停在 `var(--nav)`（不能像桌面那样钻到顶栏底下）。 */
  .sortbar{top:var(--nav)}
  .navslot{top:100%;bottom:auto;height:var(--ctlh,63px);padding:0}
  .navslot__bg{position:absolute;inset:0;pointer-events:none}
  body.merged .navslot__bg{background:rgba(8,8,8,.88);
    -webkit-backdrop-filter:blur(10px) saturate(1.15);
    backdrop-filter:blur(10px) saturate(1.15);
    border-bottom:1px solid rgba(255,255,255,.10)}
  /* ── 下滑阅读时把控件收起来（2026-09-19 加） ─────────────────────────
     用户报「顶栏/排序条挡内容」。实测（390px）：顶栏 64px + 控件那一行 63px
     = **常驻 127px，占 844px 屏幕的 15%**，而且 `.sortbar.merged` 只是把它变透明，
     **并没有让出空间**（注释里写明了「仍然占着原来的高度，内容不会因为控制条被搬走而下跳」）。
     `.navslot` 是 `position:absolute` 的，所以：
       · 收起它**不会引起任何重排**（页面高度、卡片位置都不变）——
         原作者担心的「下跳」不会发生；
       · 只是那 63px 的毛玻璃不再盖在内容上了。
     JS 只做一件事：向下滚超过 300px 加 `body.sbar-tuck`，向上滚（或回到顶部）去掉。
     卡片自己的 `scroll-margin-top:142px` 仍然覆盖住顶栏，锚点跳转不受影响。 */
  .navslot{transition:height .18s ease,opacity .18s ease}
  body.sbar-tuck .navslot{height:0;opacity:0;overflow:hidden}

}
@media (max-width:700px){
  .sortbar__in{width:auto;padding:10px 16px;gap:8px}
  .dayq{flex:1 1 auto;min-width:0}
  .dayq__in{width:100%;min-width:0;font-size:16px;padding:8px 28px 8px 32px}
  .dayq__ico{left:9px;width:15px;height:15px}
  .dayq__msg{max-width:min(300px,86vw)}
  .seg{flex:0 0 auto}
  .seg__b{font-size:12px;padding:7px 12px}
  .entry{scroll-margin-top:142px}
}
/* 尊重「减少动态效果」——药丸直接归位，不做滑动 */
@media (prefers-reduced-motion:reduce){
  .seg__pill,.seg__b{transition:none}
  .dayq__msg{transition:none}
  .navslot{transition:none}
}
@media print{
  .sortbar{display:none}
}