/* 足一把 · 38-0 欧冠版 —— 手机优先。
   **排版**：草坪竖条纹是整页背景而不是一个小部件，首页是竖向堆叠的大卡片菜单，
   主 CTA 是满宽大圆角按钮。
   **配色**照姊妹站《他是谁？》：三套，玩家自己选，由 <html> 上的 class 切换。

   ⚠️ 三套共用的规矩（从姊妹站继承，别破）：
   ① **强调色只出现在两个地方**：主按钮 + 选中态。所以每屏视线终点唯一。
   ② **先定文字规则再挑填色。** 规矩是"一行里的字只有一个颜色，换状态只换底色"，
      这条**决定了填色的取值范围**：亮色主题统一深字 → 绿必须亮到深字也有 4.5:1，
      所以是 #4E7F49 这种中绿不是深绿；深色主题统一浅字 → 金必须压到 #d9a63f。
      **别反过来先挑好看的颜色再配字**，顺序反了要全部返工。
   ③ **否定信息不该有视觉重量。** 输/出局的行只比底色差一点点，
      让胜和平自己浮出来。

   裸 html 给默认值，特异性 (0,0,1) 低于 html.bg-green 的 (0,1,1)，
   所以显式选了别的主题时不会被默认值盖掉，**与规则书写先后无关**。 */
html {
  /* 卡片底色务必是 6 位十六进制。写成 8 位(#16203551)会被当成带 alpha，
     整页所有卡片只剩 32% 不透明度，看着像蒙了层灰 —— 踩过一次。 */
  --bg: #0e100f;
  --bg-2: #151816;
  --card: #151816;
  --card-2: #1a1e1b;
  --line: #333a34;
  --line-soft: #1d211e;
  --line-strong: #414a42;
  --fg: #edefea;
  /* ⚠️ 次级文字**不许是灰的**。原来是 #c6cec3 / #aab2ab，用户连着提了两轮
     "灰色看着不舒服" —— 一屏里真正需要压暗的只有法务声明那一段，
     其余全是正文（提示、位置名、年份、表头）。现在两档都贴着 --fg 走，
     只留一点点层级差。**别再为了"层次感"把它们调回灰**。 */
  --dim: #e4e8e0;
  --faint: #ccd3c8;
  --accent: #4fb56a;
  --accent-2: #6cc884;    /* 悬停态，比 accent 亮一档 */
  --accent-on: #0e1a10;   /* 压在强调色块上的字，别再散写 */
  --gold: #d9a63f;
  --win: #4fb56a;
  /* 平局用中性灰绿而不是暗黄：黄和橙挨着会分不清平和负 */
  --draw: #7e877f;
  --loss: #e08a4e;
  /* 球场。深色主题下是夜场，浅色主题下是白天的草皮 */
  --pitch: #21462e;
  --pitch-2: #285339;
  --pitch-edge: #4c9061;
  --pitch-line: #ffffff40;
  /* 球场上的球员牌：深底浅字 */
  --slot-bg: #0e100fcc;
  --slot-bg-on: #0e100fee;
  --slot-ink: #ffffff;
  --slot-line: #ffffff44;
  --slot-sub: #ffffffdd;
  --slot-shadow: 0 1px 3px #000, 0 0 6px #000;
  /* 强调块（首页主入口、房间码卡、战报卡）用的深绿 */
  --feature: #1d3a26;
  --feature-line: #35563d;
  --toast-bg: #1a1e1bee;
  /* 和底色拉不开的队徽靠这圈描边显形。浅色主题要换成深色，否则等于没描 */
  --crest-outline: #f2f5ef;
  --chem: #7fe6a0;
  /* 战绩卡：一块比页面底明确亮一档的砖，别和背景糊在一起 */
  --verdict-bg: #25422e;
  --verdict-ink: #f4f8f2;
  /* 金/白金两档当**文字色**用时的取值。分档砖本身是渐变填充配深字，
     哪套主题都能用；但描边和总评那两处是拿这个色画字的，
     浅色主题下必须压暗，否则白卡上一行亮金完全读不了。 */
  --tier-gold-ink: #ffd75e;
  --tier-plat-ink: #fffaea;
  --r: 16px;
  --r-lg: 22px;
}

html.bg-warm {
  --bg: #f5f2eb;
  --bg-2: #ffffff;
  --card: #ffffff;
  --card-2: #faf7f0;
  --line: #e0dace;
  --line-soft: #efebe2;
  --line-strong: #a79d8a;
  --fg: #22201b;
  --dim: #2a271f;
  --faint: #3b362b;
  --accent: #4e7f49;
  --accent-2: #3d6839;
  --accent-on: #ffffff;
  /* 亮底 + 深字 → 金必须压到暗赭才有 4.5:1。写成亮琥珀就读不了了 */
  --gold: #8a6624;
  --win: #4e7f49;
  --draw: #6a6354;
  --loss: #b4541f;
  --pitch: #dcefc7;
  --pitch-2: #d3e8bc;
  --pitch-edge: #a9c795;
  --pitch-line: #ffffffdd;
  --slot-bg: #fffffff2;
  --slot-bg-on: #ffffff;
  --slot-ink: #22201b;
  --slot-line: #00000030;
  --slot-sub: #000000cc;
  --slot-shadow: 0 1px 2px #ffffffdd, 0 0 4px #ffffffdd;
  --feature: #e6eddd;
  --feature-line: #b9caa8;
  --toast-bg: #ffffffee;
  --crest-outline: #22201b;
  --chem: #1f5f2b;
  --verdict-bg: #dfe9d4;
  --verdict-ink: #1c2a18;
  --tier-gold-ink: #8a6624;
  --tier-plat-ink: #6d5a2e;
}

html.bg-grass {
  --bg: #edf2e6;
  --bg-2: #ffffff;
  --card: #ffffff;
  --card-2: #f6faf1;
  --line: #d5dfc8;
  --line-soft: #e6ecdd;
  --line-strong: #94a585;
  --fg: #1e2419;
  --dim: #262e20;
  --faint: #36402f;
  --accent: #3f7a46;
  --accent-2: #316237;
  --accent-on: #ffffff;
  --gold: #7d6020;
  --win: #3f7a46;
  --draw: #5d6b52;
  --loss: #a94f1c;
  --pitch: #d8ecc4;
  --pitch-2: #cfe5b9;
  --pitch-edge: #9dba8b;
  --pitch-line: #ffffffdd;
  --slot-bg: #fffffff2;
  --slot-bg-on: #ffffff;
  --slot-ink: #1e2419;
  --slot-line: #00000030;
  --slot-sub: #000000cc;
  --slot-shadow: 0 1px 2px #ffffffdd, 0 0 4px #ffffffdd;
  --feature: #e2eed9;
  --feature-line: #aac59a;
  --toast-bg: #ffffffee;
  --crest-outline: #1e2419;
  --chem: #1b5726;
  --verdict-bg: #d7e7c8;
  --verdict-ink: #16220f;
  --tier-gold-ink: #7d6020;
  --tier-plat-ink: #63552b;
}

* { box-sizing: border-box; }

/* ⚠️ `hidden` 属性靠的是 UA 样式表里的 `display: none`，**特异性 (0,0,0)，
   谁都盖得过它**。给元素写一条 `display: block/flex` 就会让 hidden 静默失效 ——
   表现是"关掉的东西还在页面上"，不报错。分享卡的 <img> 就这么露过一次
   （画布下面挂着一个碎图图标）。在这儿一次性堵死，比逐个补 [hidden] 规则可靠。 */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.6 system-ui, -apple-system, "Segoe UI", "PingFang SC",
        "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  -webkit-text-size-adjust: 100%;
}

/* 整页背景是**纯色**。
   原来是"草坪竖条纹 + 顶部一团球场灯光"，撤掉了：条纹在深色主题下还算含蓄，
   换到两套浅色主题就变成一片洗不掉的竖道，卡片和它挤在一起看着脏；
   而球场本来就画在 `.pitch` 里，整页再来一次是把同一个隐喻说了两遍。
   —— 排版驱动的极简那条规矩：能靠留白分层就别加纹理。 */

/* ---------- 顶栏 ---------- */
/* 照姊妹站《他是谁？》：左边站名两行，右边三颗配色胶囊。 */

#topbar {
  position: relative;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  width: 100%; max-width: 560px; margin: 0 auto;
  padding: 22px 16px 14px;
  border-bottom: 1px solid var(--line);
}
/* 首页的站名是大字居中摆在 hero 里的，顶栏那份小的收起来 ——
   同一个名字在一屏里出现两次，读起来像模板没填好。
   只收名字不收配色胶囊：胶囊每屏都得能点到。 */
body[data-screen="home"] #topbar {
  border-bottom: 0;
  padding-bottom: 0;
  justify-content: flex-end;
}
body[data-screen="home"] .tb-left { display: none; }

#topbar h1 {
  margin: 0;
  font-size: 30px; font-weight: 700;
  letter-spacing: .16em;          /* 中文标题，字距撑开 */
}
#topbar .sub {
  margin: 5px 0 0;
  font-size: 15px; font-weight: 600; letter-spacing: .1em;
  /* 比站名浅一档：两行不能一样重，否则分不出主副；但也不能是灰字，
     它是这个站是什么的说明 */
  color: var(--dim);
}

.tb-right { display: flex; gap: 8px; }

/* 配色胶囊。描边提重之后三个长得一样了，选中态用**双线圈**(inset box-shadow)，
   不引入新颜色也能一眼看出选了哪个。 */
.swatch {
  width: 30px; height: 22px; padding: 0;
  border: 1px solid var(--line-strong); border-radius: 4px;
  background: transparent; cursor: pointer;
}
.swatch span { display: block; width: 100%; height: 100%; border-radius: 3px; }
/* 选中态画在**外面**。姊妹站用的是 inset 双线圈，那边的色块留了内边距所以看得见；
   这边的色块是满格的，inset 阴影会被它整个盖住 —— 出图才发现选了哪个根本看不出来。 */
.swatch[aria-pressed="true"] {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent);
}

/* 顶栏的"上一页"（P22：每个页面增加上一页功能）。
   绝对定位压左边，不把中间的站名往右顶；首页是根，showScreen 里按屏隐藏 */
.tb-back {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; padding: 0;
  font-size: 22px; line-height: 1; color: var(--fg);
  border: 1px solid var(--line-strong); border-radius: 50%;
  background: var(--card); cursor: pointer;
}
.tb-back:active { transform: translateY(-50%) scale(.92); }

#app {
  max-width: 560px;
  margin: 0 auto;
  padding: 16px 16px calc(28px + env(safe-area-inset-bottom));
}

.screen { animation: fade .22s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } }

/* ---------- 首页 ---------- */

.hero { text-align: center; padding: 26px 0 20px; }

/* 首页中上部的站名。两行不能一样重，否则分不出主副 */
.hero-name {
  margin: 0;
  font-size: 46px; font-weight: 700; letter-spacing: .18em;
  /* 字距是加在右边的，补一格才真居中 */
  text-indent: .18em;
  line-height: 1.1;
}
.hero-sub {
  margin: 8px 0 0;
  font-size: 17px; font-weight: 600; letter-spacing: .12em;
  text-indent: .12em;
  color: var(--dim);
}

.tagline { color: var(--dim); margin: 12px 0 0; font-size: 14px; }
.tagline.strong { color: var(--fg); font-weight: 600; margin-top: 10px; }

/* ---------- 首页菜单：竖向堆叠的大卡片 ---------- */

.menu { display: flex; flex-direction: column; gap: 10px; margin: 20px 0; }

.menu-item {
  appearance: none; cursor: pointer; width: 100%; text-align: left;
  display: flex; align-items: center; gap: 13px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 16px 18px;
  color: var(--fg); font-family: inherit; transition: .15s;
}
.menu-item:hover { border-color: var(--accent); background: var(--card-2); }
.menu-item .txt { flex: 1; min-width: 0; }
/* .t / .d 是 span，默认 inline 会挤在同一行，必须显式转块级 */
.menu-item .t { display: block; font-size: 16px; font-weight: 700; }
.menu-item .d { display: block; font-size: 13px; color: var(--faint); margin-top: 3px; }
.menu-item .go { color: var(--faint); font-size: 18px; }

.menu-item.feature {
  background: linear-gradient(150deg, var(--feature), var(--card));
  border-color: var(--feature-line);
}
.menu-item.feature .t { color: var(--accent-2); }
.menu-item.done { opacity: .55; }
.menu-item:disabled { cursor: default; opacity: .4; }

.stats-strip {
  display: flex; gap: 8px; margin: 4px 0 18px;
}
.stats-strip div {
  flex: 1; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r); padding: 10px 6px; text-align: center;
}
.stats-strip b { display: block; font-size: 19px; }
.stats-strip small { color: var(--faint); font-size: 12px; }

.field { margin: 18px 0; }
.field-label {
  display: block; font-size: 13px; color: var(--faint);
  letter-spacing: 1px; margin-bottom: 8px;
}

.chips { display: flex; flex-wrap: wrap; gap: 8px; }

.chip {
  appearance: none; cursor: pointer;
  background: var(--card); color: var(--dim);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 8px 14px; font-size: 14px; font-family: inherit;
  transition: .15s;
}
.chip:hover { border-color: var(--faint); }
.chip[aria-pressed="true"] {
  background: var(--accent); color: var(--accent-on); border-color: var(--accent);
  font-weight: 700;
}
.chip small { opacity: .7; margin-left: 5px; font-size: 12px; }

.hint { color: var(--faint); font-size: 13px; margin: 8px 0 0; min-height: 1em; }

/* ---------- 按钮 ---------- */

.btn {
  appearance: none; cursor: pointer; width: 100%;
  background: var(--bg-2); color: var(--fg);
  border: 1px solid var(--line); border-radius: var(--r);
  padding: 13px; font-size: 15px; font-family: inherit;
  margin-top: 10px; transition: .15s;
}
.btn:hover:not(:disabled) { border-color: var(--faint); }
.btn:disabled { opacity: .45; cursor: default; }
/* 主 CTA：满宽、亮绿、深色字、带箭头前缀 —— 抄 38-0 的做法，
   在深色页面上这是唯一的高饱和色块，视线一定先落在它上面 */
.btn.primary {
  background: var(--accent); border-color: transparent;
  color: var(--accent-on); font-weight: 800; border-radius: var(--r-lg);
}
.btn.primary:hover:not(:disabled) { background: var(--accent-2); }
.btn.primary::before { content: "→ "; }
.btn.big { padding: 17px; font-size: 17px; }
.btn.ghost { background: none; color: var(--dim); border-color: transparent; }
.btn.tiny { width: auto; padding: 6px 12px; font-size: 14px; margin: 0; }

/* ---------- 抽卡 ---------- */

.draft-top { margin-bottom: 12px; }

.progress { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.progress span { font-size: 13px; color: var(--faint); white-space: nowrap; }
.bar { flex: 1; height: 4px; background: var(--line); border-radius: 2px; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--accent); transition: width .3s; }

/* 队徽进来之后转盘卡从"居中两行字"改成"左徽右字"。居中的话徽章一挂上去
   整块就会随队名长短左右晃，而它每转一次都要重画一遍，晃得最明显。 */
.wheel-card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r); padding: 14px;
  display: flex; align-items: center; gap: 14px;
}
.wheel-text { min-width: 0; }
.wheel-card.spinning .wheel-club { opacity: .45; filter: blur(1px); }
.wheel-season { font-size: 13px; color: var(--gold); letter-spacing: 1px; }
.wheel-club {
  font-size: 22px; font-weight: 700; margin-top: 3px;
  transition: opacity .12s, filter .12s;
}

/* ---------- 队徽 ---------- */
/* 三条规矩，都是姊妹项目《他是谁？》上花时间才找到的，别改回去：
   ① **按高度对齐、宽度自适应。** 队徽裁到贴边之后宽高比从 0.4 到 3.5 都有
      (横幅型的很宽)，定成方格会让"看得见的间距"忽大忽小。
   ② **外面的格子固定宽。** 有 37 支队没有徽章，格子不固定的话有徽章的行
      往右挪一截、没徽章的不挪，36 行的总表读起来像被撕成两半。
   ③ **只给算出来看不见的那两枚加描边**(见 crest.js 的 CREST_OUTLINE)。
      每枚都镶白边比看不清还难看。 */

.crest-cell {
  flex: none; width: 22px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
}
.crest-cell.big { width: 52px; height: 52px; }

.crest {
  display: block; width: auto; height: 100%;
  max-width: 100%; object-fit: contain;
}
/* 四个方向各垫一层**不糊**的白影，等价于沿着轮廓描一圈 1px 白边。
   用 `0 0 Npx` 那种带模糊的写法不行：尤文那种大面积纯黑的徽章，
   糊出来的光晕会被自己盖掉，等于没描 —— 试过，18px 下几乎看不出差别。 */
/* `.kob-crest` 是对阵树里的 SVG <image>。它**不能挂 `.crest`**（那条规则
   `height:100%` 在 SVG 里是相对整个 viewport 算的，队徽会撑满全图），
   所以描边这条得把两个选择器一起写上。 */
.crest.outlined, .kob-crest.outlined {
  filter:
    drop-shadow(1px 0 0 var(--crest-outline)) drop-shadow(-1px 0 0 var(--crest-outline))
    drop-shadow(0 1px 0 var(--crest-outline)) drop-shadow(0 -1px 0 var(--crest-outline));
}

/* 没有队徽时垫在大格子里的缩写牌（见 crest.js 的 crestBox）。
   做得**明显是排版**而不是像素素材：描边方块 + 字距拉开的等宽字母，
   这样它读起来是"这队没徽章"，不是"图挂了"。 */
.crest-mark {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg); color: var(--faint);
  font-size: 14px; font-weight: 700; letter-spacing: .06em;
}

/* 冠军卡上的那一枚：整屏就这一处大图，给它一点呼吸 */
.champion-crest { height: 64px; max-width: 96px; margin: 0 auto 10px; }

/* ---------- 球场 ---------- */

.pitch-wrap { margin: 14px 0; }

/* 配置页的阵型预览：**收窄**。球场是 3:4 的，420 宽的手机上摊开就是 560 高，
   下面的难度和年代全被顶出屏幕 —— 这一屏的主角是三组选项，图是来解释其中一组的。
   ⚠️ 别再往下压：P9 试过 mini 小图，11 个点会挤成一团，那还不如不画。
   ⚠️ **也别再收窄回 250px。** 五后卫那三个阵型（5-2-1-2 / 5-3-2 / 5-4-1）的中卫
   在 `y:16`、门将在 `y:5`，摊开之后只差 12.1 个点 —— 250px 宽时那是 35.7px，
   而评分圈是 42px，**两个圈直接叠在一起**（另外十个阵型最近的一对是 42.2px，
   刚好擦过去，所以只有五后卫露馅）。310px 是让十三个阵型全部拉开的最小宽度。
   坐标一个都没动：这是显示密度问题，不是排布问题。冒烟里有一条真量像素的断言。 */
.setup-pitch { max-width: 310px; margin: 12px auto 0; }
/* ⚠️ 这张图上**一个球员都没有**（renderPitch 收到的是 11 个 null），所以
   `.slots` 那 58px 的下内缩（留给"名字 + 位置"两行的）在这里纯属浪费 ——
   而它是**绝对像素**，主球场上占 11%、这张 250px 宽的图上占到 17%，
   门将被顶到禁区线外面去了（用户原话："开始选阵容的时候 gk 太靠前"）。
   这里只要留下半个评分圈就够。
   ⚠️ **圈本身不能收小**（试过收到 32px，被否掉了）：ST 两个字母怎么排都放得下，
   LWB／RWB／CDM 三个字母就顶壁了 —— 要小的是字，不是圈。 */
.setup-pitch .slots { inset: 22px 4px 22px; }

/* 换位提示。**不能是灰色小字** —— 这是一条"你可以动手"的提示，
   压暗了等于没写（实测：加了灰字版之后没人会去拖球员）。
   做成一条带边框的浅色条，强调色只出现在那半句动作上 */
.swap-tip {
  margin: 10px 0 0; padding: 9px 12px;
  background: var(--card); border: 1px solid var(--line-strong);
  border-radius: var(--r); text-align: center;
  font-size: 14px; color: var(--fg);
}
.swap-tip b { color: var(--accent-2); }
/* 括号那半句不许拆行 —— 不加这条会断成 "（拖也
行）"，一个字孤零零挂在第二行 */
.swap-tip .nw { white-space: nowrap; }

.pitch {
  position: relative;
  aspect-ratio: 3 / 4;
  background:
    repeating-linear-gradient(0deg, var(--pitch) 0 8%, var(--pitch-2) 8% 16%);
  border: 1px solid var(--pitch-edge); border-radius: var(--r);
  overflow: hidden;
}
/* 抢人 lobby 的阵型预览 = **主球场**（复用 #live-pitch，不另做 mini 小图 ——
   小图 11 个点挤成一团，用户实测反馈过）。大球场自带左右留边和正常点位间距 */
/* 中圈和禁区，纯装饰 */
.pitch::before, .pitch::after {
  content: ""; position: absolute; border: 1px solid var(--pitch-line);
}
.pitch::before {
  width: 26%; aspect-ratio: 1; border-radius: 50%;
  left: 37%; top: 50%; transform: translateY(-50%);
}
.pitch::after { left: 22%; width: 56%; height: 13%; bottom: -1px; border-bottom: 0; }

/* 槽位层。**内缩**，不贴球场四边 —— 评分圈的圆心落在坐标点上、名字挂在下面，
   贴边的话门将(y=5)的名字会被球场的 overflow:hidden 裁掉半行。
   底下留得比顶上多，因为只有下面挂着名字和位置两行。
   引擎里的坐标一个都没动，这里改的只是那 0-100 落在多大的一块地方。 */
/* ⚠️ 内缩量是跟着 pitch.js 的摊开系数一起定的。
   坐标摊开之后 ST 到了 93、GK 到了 5，上下都更贴边：
   上面留 18px 给放大后的评分圈（半径就有 21px），
   下面留 58px 给"名字（可能两行）+ 位置"两行 ——
   少留的表现是**门将那一行被球场的 overflow:hidden 裁掉**，不报错。 */
.slots { position: absolute; inset: 18px 4px 58px; }

/* ⚠️ `.slot` 是个**零尺寸的点**，正好落在引擎给的坐标上；内容全在 .slot-body 里，
   往上提半个评分圈，于是**圆心正对着这个点**。
   羁绊连线是按同一套坐标画的（见 pitch.js 的 chemLayer），
   所以这样连出来的就是圆心到圆心。
   原来 `.slot` 自己有高度（圈 + 名字 + 位置）、用 translate(-50%,50%) 居中，
   坐标落在**整块**的中心 —— 端点在圈下面一截，而名字折两行的槽位偏得更多，
   满屏的线看着是歪的。改这里必须同时看 chemLayer。 */
.slot { position: absolute; width: 0; height: 0; cursor: default; }
.slot-body {
  position: absolute; left: 0; top: -21px;   /* 21px = 评分圈高度的一半 */
  width: 88px; margin-left: -44px;
  text-align: center;
}
.badge-wrap { position: relative; width: 42px; margin: 0 auto; }
.slot .badge {
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; font-size: 17px; font-weight: 800;
  /* ⚠️ 空位是**实线**。原来用虚线表示"还没人"，但一整块球场上十一个虚线圈
     看着像没画完 —— 空位靠"里面是位置名不是评分"就已经说清楚了，
     不需要再用线型说第二遍。抽卡那块棋盘同理。 */
  background: var(--slot-bg); border: 1.5px solid var(--slot-line); color: var(--slot-sub);
}
/* 空位里装的是位置名（最长三个字母 CDM），不是两位数评分 ——
   照 17px 排会顶到圈壁上 */
.slot:not(.filled) .badge { font-size: 13px; font-weight: 700; letter-spacing: .02em; }
/* 抽卡途中不画(见 pitch.js)，只有定稿的阵容才挂。压在评分圈右上角，
   不占额外高度 —— 球场上寸土寸金，多一行就把最下面那排挤出去了 */
.slot-crest {
  position: absolute; right: -12px; top: -6px;
  height: 21px; max-width: 28px; width: auto;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .55));
}
.slot-crest.outlined {
  filter:
    drop-shadow(1px 0 0 var(--crest-outline)) drop-shadow(-1px 0 0 var(--crest-outline))
    drop-shadow(0 1px 0 var(--crest-outline)) drop-shadow(0 -1px 0 var(--crest-outline));
}
.slot.filled .badge {
  border-style: solid; border-color: var(--slot-ink); background: var(--slot-bg-on);
  color: var(--slot-ink);
}
.slot.filled.hi .badge { border-color: var(--gold); color: var(--gold); }
/* 允许折两行：球员名(尤其中文名+外文姓)一行放不下，
   截成 "László Köt…" 比换行难认得多 */
.slot .nm {
  font-size: 13px; font-weight: 700; margin-top: 3px; line-height: 1.15;
  text-shadow: var(--slot-shadow);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; word-break: break-word;
}
.slot .ps { font-size: 12px; color: var(--slot-sub); text-shadow: var(--slot-shadow); }
/* 国旗贴在位置那一行前面。**不占一行** —— 占一行的代价是 11 个槽位一起长高，
   而球场那点纵向空间正是这一轮要省出来给评分圈和名字的 */
.natflag {
  display: inline-block; width: 15px; height: 10px; margin-right: 4px;
  vertical-align: -1px; border-radius: 1px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .45);
}
.natflag svg { display: block; width: 100%; height: 100%; }
/* 能换位的槽位：手指按上去要有反馈，不然玩家不知道这里可以拖。
   ⚠️ `touch-action: none` 必须给 —— 不给的话手机上一拖就变成页面滚动，
   pointermove 根本收不到几个点（拖动手感"很黏"的真正原因）。 */
/* 摆错位：位置名压暗，后面缀一个"本职 X"。**不用红色** ——
   否则一队里三四个人身上顶着红字，看着像报错，而摆错位本来就是玩法的一部分 */
.slot .ps.off { color: var(--faint); }
.slot .ps.off em { font-style: normal; opacity: .85; }

.slot.movable { touch-action: none; }
.slot.movable.filled .badge { cursor: grab; }
.slot.dragging .slot-body { opacity: .55; transform: scale(1.06); }
/* 选中（点一下）和落点（拖过去）用同一套描边：玩家要看的是"哪两个要换" */
.slot.picked .badge, .slot.drop .badge {
  border-color: var(--accent-2);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent);
}
.slot.drop .badge { transform: scale(1.1); }

.slot.target .badge { border-color: var(--accent-2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 40%, transparent); }

/* ---------- 评分分档 ---------- */
/* 照 D:\coporo 那套：铜 / 银 / 金 / 白金。最高一档是**暖白金**不是冰蓝白 ——
   在 30px 的小徽章里眼睛只认冷暖不认明度，冷色看着像从金掉回银，明明是升了一档。 */

.t-bronze { --tier-a: #c98a45; --tier-b: #8f5a22; --tier-ink: #2a1a08; }
.t-silver { --tier-a: #cfd8de; --tier-b: #8d9aa6; --tier-ink: #1c2429; }
.t-gold   { --tier-a: #ffd75e; --tier-b: #d99b1c; --tier-ink: #2b1f02; }
.t-plat   { --tier-a: #fffaea; --tier-b: #e8ac3c; --tier-ink: #16110a; }

.cand .ov.t-bronze, .cand .ov.t-silver, .cand .ov.t-gold, .cand .ov.t-plat {
  background: linear-gradient(155deg, var(--tier-a), var(--tier-b));
  border-color: transparent; color: var(--tier-ink);
}
.cand .ov.t-plat { box-shadow: 0 0 0 1px rgba(255,255,255,.6), 0 0 10px rgba(255,213,120,.35); }

/* 球场上的评分圈**按档填色**，和候选行的分档砖是同一套渐变。
   ⚠️ 原来只有金/白金改颜色，而且改的是**描边和字色**：
   白金的字色是 `--tier-plat-ink`(#fffaea，近白)，银档用的是默认的 `--slot-ink`(#ffffff)——
   于是**一个 88 和一个 78 在场上长得一模一样**，四档等于只剩两档。
   填色之后铜/银/金/白金一眼分得开，也和抽卡那一屏对上了（同一个人两处同一个颜色）。 */
.slot.t-bronze .badge, .slot.t-silver .badge,
.slot.t-gold .badge, .slot.t-plat .badge {
  background: linear-gradient(155deg, var(--tier-a), var(--tier-b));
  border-color: rgba(0, 0, 0, .35); color: var(--tier-ink);
}
/* 白金再加一圈光：它和金档的色相很近，只靠明度在 34px 的圈里分不开 */
.slot.t-plat .badge {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .75), 0 0 12px rgba(255, 213, 120, .55);
}

/* ---------- 羁绊连线（照 FUT 的阵容页）---------- */
/* **抽卡途中一条都不画**，定稿之后才画。抽的时候给等于让人照着线点最大值，
   知道哈维和伊涅斯塔是巴萨队友的人那份优势就没了；定稿了再给，
   玩家才看得到"我这套凑出了什么"。详见 engine/chemistry.js 开头。 */

.chem-layer {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 1;
}
/* 连线用**专门的一个色**，不直接用 --accent：主按钮也是 accent，
   而球场上这几条线要压在草皮上看得清，两边要的亮度不一样。 */
.chem-link { stroke: var(--chem); vector-effect: non-scaling-stroke; stroke-linecap: round; }
.chem-link.s1 { stroke-width: 2; opacity: .45; }
.chem-link.s2 { stroke-width: 3; opacity: .7; }
.chem-link.s3 { stroke-width: 4.5; opacity: .95; }

.slot { z-index: 2; }

/* 阵容评分：**一块总评 + 四条进度条**。
   五个等大的方格等于"这五个数一样重要"，可玩家要看的只有两件事：
   现在整体多少分、哪条线是短板。条形一眼比得出来，五个数字要一个个读。 */
.power {
  display: flex; align-items: stretch; gap: 12px; margin-top: 10px;
  background: var(--card-2); border: 1px solid var(--line-strong);
  border-radius: var(--r); padding: 12px 14px;
}
.pw-total {
  flex: none; width: 82px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px;
  border-right: 1px solid var(--line-strong); padding-right: 12px;
}
.pw-total b {
  font-size: 46px; font-weight: 900; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--fg);
}
.pw-total small { font-size: 13px; font-weight: 700; color: var(--fg); letter-spacing: .06em; }
.pw-total.t-gold b { color: var(--tier-gold-ink); }
.pw-total.t-plat b { color: var(--tier-plat-ink); text-shadow: 0 0 12px rgba(255,213,120,.5); }

.pw-bars { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px;
  justify-content: center; }
.pw-row { display: flex; align-items: center; gap: 8px; }
.pw-k { flex: none; width: 38px; font-size: 13px; font-weight: 700; color: var(--fg); }
.pw-bar {
  flex: 1; height: 9px; border-radius: 999px; overflow: hidden;
  background: var(--bg-2); border: 1px solid var(--line);
}
.pw-bar i { display: block; height: 100%; border-radius: 999px;
  background: var(--accent); transition: width .25s; }
/* 分档配色：短板那条自己会暗下来，不用额外标红 */
.pw-bar i.t-bronze, .pw-bar i.t-silver, .pw-bar i.t-gold, .pw-bar i.t-plat {
  background: linear-gradient(90deg, var(--tier-b), var(--tier-a));
}
.pw-v { flex: none; width: 30px; text-align: right; font-size: 17px; font-weight: 900;
  font-variant-numeric: tabular-nums; }

/* ---------- 候选球员 ---------- */

/* 进球者行：整行占位（flex 换行），小字灰，跟在比分下面 */
.scorers { width: 100%; font-size: 12px; color: var(--dim); }

/* 候选区标题条。**吸顶**：手机是单栏，往下翻看卡池的时候转盘卡早滚出屏幕了，
   这一条得一直贴在候选列表上方 —— 它是唯一还写着"哪一年的哪支队"的地方。
   底色必须显式给（整页是纯色 --bg），否则卡片会从字底下穿过去。 */
.cand-head {
  position: sticky; top: 0; z-index: 2; background: var(--bg);
  display: flex; justify-content: space-between; align-items: baseline;
  flex-wrap: wrap; row-gap: 2px; column-gap: 8px;
  margin: 4px 0 0; padding: 4px 0 8px; font-size: 13px; color: var(--faint);
}
/* 标题里的赛季。和转盘卡上的 .wheel-season 同一套金色，让人一眼认出是同一件事 */
.ct-season {
  font-style: normal; font-weight: 700; color: var(--gold);
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}
/* 一支球队最多 25 人，全铺开的话手机上要滑很久才看得到"放弃"按钮。
   限高 + 内部滚动，让球场和候选列表能同屏看见。 */
.cand-list {
  display: flex; flex-direction: column; gap: 6px;
  max-height: 46vh; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-right: 2px;
}

.cand {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 10px; padding: 9px 11px;
  cursor: pointer; font-family: inherit; color: var(--fg); text-align: left;
}
/* 已被抢走的卡池项（对面回合视角）：整行灰掉 + 名字划掉 */
.cand.claimed { opacity: .45; }
.cand.claimed .nm { text-decoration: line-through; }
.cand:hover { border-color: var(--accent); background: var(--card-2); }
.cand .ov {
  min-width: 34px; height: 34px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 15px;
  background: var(--bg); border: 1px solid var(--line);
}

/* ---------- 球员卡（照 FUT 的角块：大评分压着位置）---------- */

.cand-wrap { display: flex; flex-direction: column; }
.cand.futcard { border-radius: 12px; padding: 8px 10px; gap: 11px; }
.fc-badge {
  flex: none; width: 44px; padding: 3px 0; border-radius: 8px;
  display: flex; flex-direction: column; align-items: center; line-height: 1.05;
  background: var(--bg-2); border: 1px solid var(--line-strong); color: var(--fg);
}
.fc-badge b { font-size: 19px; font-weight: 900; font-variant-numeric: tabular-nums; }
.fc-badge span { font-size: 10px; letter-spacing: .06em; opacity: .9; }
/* 分档配色。和球场上的评分圈同一套 t-* 变量，两处看着才是同一个人 */
.cand.t-bronze .fc-badge, .cand.t-silver .fc-badge,
.cand.t-gold .fc-badge, .cand.t-plat .fc-badge {
  background: linear-gradient(155deg, var(--tier-a), var(--tier-b));
  border-color: transparent; color: var(--tier-ink);
}
.cand.t-plat .fc-badge { box-shadow: 0 0 0 1px rgba(255,255,255,.6), 0 0 10px rgba(255,213,120,.35); }

/* 点开之后的位置选择。**这是整个抽卡屏最关键的一次点击**，
   所以按钮做大、强调色描边，别做成一行灰色小字 */
/* 点开之后，球员卡和这条位置栏要读成**一张卡**。
   原来三件事各说各的：卡片是 --line 描边、位置栏是 --line-strong；卡片四个角
   都是圆的，位置栏却直接贴在它下面；再加一个 margin:-4px 把两者压在一起 ——
   接缝处横着一道断线，线上头还留着两个圆角，看着就是"两块硬拼的"。
   ⚠️ 用 `:has()` 而不是在 JS 里加 class：这套交互在 screen-draft.js 和
   screen-live.js 里**各写了一份**，加 class 要改两处，迟早漂移。 */
.cand-wrap:has(.pos-pick:not([hidden])) .cand.futcard {
  border-radius: 12px 12px 0 0;
  /* 用 transparent 不用 `border-bottom: 0`：后者会让卡片矮 1px，展开的一瞬间
     整行往上跳一格 */
  border-bottom-color: transparent;
  border-color: var(--accent);
  background: var(--card-2);
}
.pos-pick {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 4px 10px 10px; margin: 0 0 2px;
  background: var(--card-2); border: 1px solid var(--accent);
  border-top: 0; border-radius: 0 0 12px 12px;
}
.pchip {
  display: flex; align-items: baseline; gap: 5px;
  background: var(--bg-2); color: var(--fg);
  border: 1px solid var(--accent); border-radius: 999px;
  padding: 7px 13px; font-size: 14px; font-family: inherit; cursor: pointer;
}
.pchip b { font-weight: 800; }
.pchip i { font-style: normal; color: var(--accent-2); font-weight: 700;
  font-variant-numeric: tabular-nums; }
.pchip:hover { background: var(--accent); color: var(--accent-on); }
.pchip:hover i { color: var(--accent-on); }
.cand .ov.hi { color: var(--gold); border-color: var(--line-strong); }
.cand .info { flex: 1; min-width: 0; }
.cand .nm { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cand .sub { font-size: 12px; color: var(--faint); }
.cand .to { text-align: right; font-size: 12px; color: var(--dim); white-space: nowrap; }
.cand .to b { display: block; font-size: 15px; color: var(--accent-2); }

.draft-actions { margin-top: 14px; }

/* ---------- 赛程 ---------- */

.season-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 12px; gap: 10px;
}
.season-record { font-size: 14px; }
.season-record b { font-size: 20px; }

.fixtures { display: flex; flex-direction: column; gap: 5px; }

.fx {
  /* ⚠️ 一定要 wrap：进球者那一段是 `width:100%` 的块，不换行的话它会把
     `.opp` 挤成 0 宽 —— 表现是"有进球的那几场看不见对手是谁"（战报屏还在用） */
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  background: var(--card-2); border: 1px solid var(--line-strong);
  border-left-width: 4px; border-radius: 8px; padding: 9px 10px;
  font-size: 14px;
}
.fx.pending { opacity: .38; }
.fx.W { border-left-color: var(--win); }
.fx.D { border-left-color: var(--draw); }
.fx.L { border-left-color: var(--loss); }
.fx .rd { font-size: 12px; color: var(--dim); min-width: 56px; }
.fx .opp { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx .opp em { font-style: normal; color: var(--gold); font-size: 12px; opacity: .75; }
.fx .ha { font-size: 12px; color: var(--dim); }
.fx .sc { font-variant-numeric: tabular-nums; font-weight: 700; min-width: 40px; text-align: right; }
.fx .note { font-size: 11px; color: var(--gold); }
.fixtures.compact .fx { padding: 6px 9px; font-size: 13px; }

/* ---------- 赛季大屏：一场一场地看 ---------- */

.match-stage {
  background: var(--card); border: 1px solid var(--line-strong);
  border-radius: var(--r-lg); padding: 18px 14px 16px; margin-bottom: 14px;
  text-align: center;
}
.ms-round { font-size: 14px; color: var(--dim); letter-spacing: .04em; }
.ms-round .ms-ha { color: var(--faint); }

.ms-body {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 10px; margin: 14px 0 10px;
}
.ms-side { min-width: 0; }
.ms-crest {
  display: flex; align-items: center; justify-content: center;
  height: 54px; max-width: 100%; margin: 0 auto 6px; object-fit: contain;
}
/* 我方没有队徽，用一个字的圆牌占住同样的位置，两边才对称 */
.ms-crest.me, .ms-crest.none {
  width: 54px; border-radius: 50%; font-size: 20px; font-weight: 800;
  background: var(--card-2); border: 1px solid var(--line-strong); color: var(--fg);
}
.ms-nm {
  font-size: 14px; font-weight: 700; line-height: 1.25;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.ms-yr { font-size: 12px; color: var(--gold); opacity: .8; }

/* 比分是这一屏的主角。等宽数字 + 定宽，换到两位数也不会左右跳 */
.ms-score {
  display: flex; align-items: baseline; gap: 6px;
  font-variant-numeric: tabular-nums; font-weight: 900;
}
.ms-score b { font-size: 42px; line-height: 1; min-width: 32px; }
.ms-score i { font-style: normal; font-size: 24px; color: var(--faint); }

.ms-tag {
  display: inline-block; padding: 3px 14px; border-radius: 999px;
  font-size: 14px; font-weight: 700; border: 1px solid var(--line-strong);
}
.ms-tag.W { color: var(--accent-on); background: var(--win); border-color: transparent; }
.ms-tag.D { color: var(--fg); background: var(--card-2); }
.ms-tag.L { color: var(--fg); background: var(--card-2); border-color: var(--loss); }
.ms-tag.pending { color: var(--faint); }
/* 次回合那一场的两回合总比分 —— 输的人只看到单场比分会以为自己只输一个球 */
.ms-agg { margin-top: 8px; font-size: 13px; font-weight: 700; color: var(--dim); }

.ms-goals { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.gl {
  display: flex; gap: 8px; align-items: baseline; text-align: left;
  font-size: 13px; padding: 7px 10px; border-radius: 8px; background: var(--bg-2);
}
.gl .who { flex: none; max-width: 40%; color: var(--faint); font-size: 12px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gl .nm { flex: 1; min-width: 0; }
/* 进球的人要跳出来：自己人用强调色，对手用金色 —— 两边都亮，但一眼分得清 */
.gl.mine .nm { color: var(--accent-2); font-weight: 700; }
.gl.theirs .nm { color: var(--gold); }
.gl.mine::before, .gl.theirs::before { content: "⚽"; font-size: 13px; }

.new-result { animation: pop .35s ease; }
@keyframes pop { from { transform: scale(.94); opacity: .4; } }

/* ---------- 赛前 / 结算 ---------- */

.screen-title { font-size: 18px; margin: 6px 0 0; }
.sub { font-size: 14px; color: var(--dim); margin: 22px 0 8px; }

/* 赛前评估：**一句判词占一整块**。原来是"赛前评估 …… 夺冠大热"这样的一行，
   和下面四行数字一样重 —— 而玩家在这一屏只想知道一件事：这套阵容行不行。 */
.odds { margin: 14px 0; }
.odds-head {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 14px 12px; border-radius: var(--r) var(--r) 0 0;
  border: 2px solid var(--line-strong); border-bottom: 0;
  background: var(--card-2);
}
.odds-k { font-size: 13px; font-weight: 700; letter-spacing: .18em; color: var(--fg); }
.odds-grade { font-size: 34px; font-weight: 900; letter-spacing: .04em; line-height: 1.1; }
/* 五档各有各的颜色：一眼就知道这套阵容处在什么位置 */
.odds-head.hot { background: var(--feature); border-color: var(--gold); }
.odds-head.hot .odds-grade { color: var(--gold); }
.odds-head.good { background: var(--feature); border-color: var(--accent); }
.odds-head.good .odds-grade { color: var(--accent-2); }
.odds-head.mid .odds-grade { color: var(--fg); }
.odds-head.flat .odds-grade { color: var(--dim); }
.odds-head.cold { border-color: var(--loss); }
.odds-head.cold .odds-grade { color: var(--loss); }

.odds-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--line-strong);
  border: 2px solid var(--line-strong); border-top: 0;
  border-radius: 0 0 var(--r) var(--r); overflow: hidden;
}
.odds-cell { background: var(--card); padding: 10px 4px; text-align: center; }
.odds-cell b { display: block; font-size: 20px; font-weight: 900;
  font-variant-numeric: tabular-nums; }
.odds-cell small { font-size: 12px; font-weight: 600; color: var(--fg); }

/* ⚠️ 这张卡原来是 `--feature → --bg-2` 的渐变 + `--line` 描边，
   实测底色是 #192a1e，而页面底是 #0e100f —— **两者几乎贴在一起**，
   整块糊进背景里，一屏最该跳出来的东西反而最不显眼（文字倒是亮的，问题不在文字）。
   现在改成实底的**一块亮砖**：比页面底明确亮一档 + 描边用 --feature-line。
   这是姊妹站那条"近黑底 + 一排亮砖"的同一个道理 ——
   **暗色主题的直觉是"砖也要暗"，结果是一片糊。** */
/* 结算卡：这一屏最该跳出来的一块。⚠️ 边框用 2px 的 line-strong 而不是 1px 的
   feature-line —— 1px 浅描边在三套主题下都快和底色一样了，等于没有边 */
.verdict-card {
  background: var(--verdict-bg);
  border: 2px solid var(--line-strong); border-radius: var(--r);
  padding: 24px 16px; text-align: center; margin-bottom: 14px;
}
.verdict-card.perfect {
  border-color: var(--gold);
  box-shadow: 0 0 30px color-mix(in srgb, var(--gold) 16%, transparent);
}
.verdict-card h2 {
  margin: 0 0 8px;
  font-size: 34px; font-weight: 800; letter-spacing: -.5px;
  color: var(--verdict-ink);
}
.verdict-card.perfect h2 { color: var(--gold); }
.verdict-card p { margin: 0; color: var(--verdict-ink); opacity: .9; font-size: 15px; }

.badges { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.badge-pill {
  background: var(--feature); border: 1px solid var(--feature-line);
  border-radius: 999px; padding: 5px 12px; font-size: 13px;
}
.badge-pill b { color: var(--gold); }

.result-table {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
}
.result-table div {
  background: var(--card-2); border: 1px solid var(--line-strong);
  border-radius: 10px; padding: 9px 4px; text-align: center;
}
.result-table b { display: block; font-size: 18px; }
.result-table small { color: var(--dim); font-size: 12px; }

.awards { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.award {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--card-2); border: 1px solid var(--line-strong);
  border-radius: 10px; padding: 9px 12px; font-size: 14px;
}
.award .t { color: var(--dim); font-size: 13px; }
.award .v { font-weight: 600; }
.award .v small { color: var(--dim); font-weight: 400; margin-left: 6px; }

.player-stats { display: flex; flex-direction: column; gap: 4px; }
.pstat {
  display: flex; align-items: center; gap: 9px;
  background: var(--card-2); border: 1px solid var(--line-strong);
  border-radius: 8px; padding: 7px 10px; font-size: 14px;
}
.pstat .pos { font-size: 12px; color: var(--dim); min-width: 30px; font-weight: 700; }
.pstat .crest-cell { width: 20px; height: 18px; }
.pstat .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 年份紧跟名字、压暗一档 —— 和赛程行里 `Barcelona 2019/20` 是同一个写法 */
.pstat .yr { font-style: normal; color: var(--gold); font-size: 13px; }
.pstat .ga { font-variant-numeric: tabular-nums; color: var(--dim); font-size: 13px; }
.pstat .ga b { color: var(--fg); }

/* 一局打完，这三个键**都是出口**（分享 / 复制链接 / 再来一局），
   所以三个一起高亮。原来只有"再来一局"是绿的，另外两个是灰底 ——
   灰底在这一页读起来像"次要功能"，而分享恰恰是我们最想让人按的那个。
   ⚠️ 箭头前缀只留给"再来一局"：→ 表示"往下走"，分享和复制都不往下走 */
.share-row { display: flex; gap: 8px; margin-top: 16px; }
.share-row .btn { margin-top: 0; }
.share-row .btn.primary::before { content: none; }

/* ---------- 杂项 ---------- */

/* ---------- 排行榜 ---------- */

.rank-list { display: flex; flex-direction: column; gap: 5px; margin-top: 12px; }

.rank-row {
  display: flex; align-items: center; gap: 10px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 10px; padding: 9px 12px; font-size: 14px;
}
.rank-row.me { border-color: var(--accent); background: var(--card-2); }
.rank-row.perfect { border-color: var(--gold); }
.rank-row .no {
  min-width: 34px; font-variant-numeric: tabular-nums;
  color: var(--faint); font-weight: 700;
}
.rank-row .who { flex: 1; min-width: 0; }
/* P22：房内名字字大一点 —— 名次表是房里人最想看清的一行 */
.rank-row .who .nm { display: block; font-size: 16px; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-row .who .sub { display: block; font-size: 12px; color: var(--faint); }
.rank-row .res { font-weight: 700; white-space: nowrap; }
.rank-row .res.gold { color: var(--gold); }

.rank-me { margin-top: 14px; }
.rank-me-label { font-size: 13px; color: var(--faint); margin-bottom: 5px; }

.name-row { display: flex; gap: 8px; align-items: center; }
/* ⚠️ 描边直接给强调色，不等到 focus 才给。这一格是**进房间之前必须填的**，
   而它在一屏按钮里长得最不像"要动手的地方" —— 描成灰的就会被跳过，
   然后一屋子人全叫「云3721」。 */
.text-input {
  flex: 1; background: var(--card); color: var(--fg);
  border: 1.5px solid var(--accent); border-radius: var(--r);
  padding: 11px 13px; font-size: 15px; font-family: inherit;
}
.text-input::placeholder { color: var(--faint); }
.text-input:focus { outline: none; border-color: var(--accent-2);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); }

.submit-row { margin-top: 16px; }
.submit-done {
  text-align: center; color: var(--dim); font-size: 14px;
  padding: 12px; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--r);
}
.linkish {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--accent-2); font: inherit; text-decoration: underline;
}

.help-item {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r); padding: 14px 16px; margin-bottom: 10px;
}
.help-item h4 { margin: 0 0 6px; font-size: 14px; color: var(--accent-2); }
.help-item p {
  margin: 0; font-size: 14px; color: var(--dim); line-height: 1.7;
  white-space: pre-line;               /* 难度那段用 \n 分行 */
}

.history { margin-top: 20px; }
.history summary { cursor: pointer; color: var(--dim); font-size: 14px; }
.history-row {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  width: 100%; padding: 9px 0; border: 0; border-bottom: 1px solid var(--line);
  background: none; color: var(--fg); font: inherit; font-size: 13px;
  text-align: left;
}
.history-row b { color: var(--gold); }
/* 能点开战报卡的那些行（存了选人序列的）。老战绩点不开，就不给箭头也不给手型 ——
   一个点了没反应的行比一个明摆着不能点的行难受得多 */
.history-row.openable { cursor: pointer; }
.history-row.openable:hover { color: var(--accent-2); }
.history-row .hr-right { display: flex; align-items: center; gap: 2px; }
.history-row .hr-go { color: var(--accent-2); font-size: 16px; margin-left: 6px; }

/* ---------- 分享卡 ---------- */

.share-card {
  position: fixed; inset: 0; z-index: 30;
  display: flex; align-items: center; justify-content: center;
  padding: 18px;
  background: rgba(0, 0, 0, .62);
  overflow-y: auto;
}
.share-box {
  width: 100%; max-width: 420px;
  background: var(--bg-2); border: 1px solid var(--line-strong);
  border-radius: var(--r-lg); padding: 14px;
}
/* 卡本身按 canvas 的宽高比缩放。**不给固定高度** ——
   高度由阵容行数决定，写死的话换阵型就走形 */
#share-canvas, #share-img {
  display: block; width: 100%; height: auto;
  border-radius: 10px;
}
#share-actions .btn { margin-top: 8px; }
#share-actions .hint { margin-top: 10px; }

.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%);
  background: var(--toast-bg); border: 1px solid var(--line-strong);
  border-radius: 999px; padding: 9px 18px; font-size: 14px;
  /* 要压在分享卡(z-index:30)之上：「已保存」「复制失败」这类提示正是从卡上点出来的 */
  z-index: 40; animation: fade .2s;
}

/* 署名照姊妹站《他是谁？》的 #credit：**用正文色不用灰字** ——
   署名压成灰的等于藏起来。下面的法务声明是另一档，那个才该压暗。 */
#credit {
  margin: 34px auto 0;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  text-align: center;
  color: var(--fg);
  font-size: 13px; letter-spacing: .08em; line-height: 1.9;
}
#credit a {
  display: inline-block; margin-top: 3px;
  color: var(--fg); text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
  word-break: break-all;         /* 窄屏上这串网址一行装不下，得允许断开 */
}
#credit a:hover { border-bottom-color: var(--fg); }

/* 页脚一排：爱发电 + 署名。窄屏靠 flex-wrap 自己折成两块，
   **别改成 nowrap** —— 360px 下挤一行会把页脚撑出横向滚动 */
.foot-row {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 12px 28px;
}
/* 网址和胶囊是一个整体，折行时得一起走，所以自己再包一层 */
.afd-row {
  display: inline-flex; align-items: center; flex-wrap: wrap;
  justify-content: center; gap: 10px;
}
.credit-one { display: block; }
/* ⚠️ 这里**破了"强调色只给主按钮和选中态"那条规矩**（见文件开头第 ① 条）。
   是故意的，和姊妹站一致：页脚在所有内容下面，不和任何一屏的视线终点抢。
   ⚠️ `#credit a` 的特异性是 (1,0,1)，压得过 `.afd-pill` 的 (0,1,0) ——
   不显式盖掉的话胶囊会继承 inline-block + 下边框，变成"绿色块底下拖一条横线"，
   圆点和文字也不再居中。 */
#credit .afd-url { margin-top: 0; }
#credit .afd-pill {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 0;
  padding: 6px 13px; border: 0; border-radius: 999px;
  background: var(--accent); color: var(--accent-on);
  font-weight: 700; letter-spacing: .08em; white-space: nowrap;
}
#credit .afd-pill:hover { filter: brightness(1.08); }
/* 小圆点会呼吸，把眼睛勾过来；系统开了"减少动态效果"就停掉 */
.afd-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent-on); opacity: .85;
  animation: afd-pulse 1.9s ease-in-out infinite;
}
@keyframes afd-pulse {
  0%, 100% { opacity: .25; transform: scale(.8); }
  50%      { opacity: 1;   transform: scale(1.15); }
}
@media (prefers-reduced-motion: reduce) { .afd-dot { animation: none; opacity: .85; } }


.legal {
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line-soft);
  color: var(--faint); font-size: 11px; line-height: 1.6; text-align: center;
}

.loading { text-align: center; color: var(--faint); padding: 30px 0; font-size: 14px; }

/* ---------- 联机杯赛 ---------- */

/* 房间码用和 logo 同一套路：巨大字符当视觉锚点。
   房间码要靠嘴念进群里，所以字距拉开、用等宽数字，别让 8/B 挨着看不清。 */
/* 大厅先二选一：创建 / 加入。加入的人不该看到创建设置，反之亦然 */
.mode-row { display: flex; gap: 10px; margin: 8px 0 18px; }
.mode-row .btn { flex: 1; margin: 0; }

/* 房间顶部横幅：房间码**单独居中**、meta 小字在下方一行、离开**贴最右**。
   之前 flex 居中的是"房间码+meta 组合"，meta 一长房间码就被挤到左边
   （实测偏 69px）—— 改成纵向：code 独占一行居中，meta 不再参与横向布局 */
.room-bar {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px 14px;
  background: linear-gradient(150deg, var(--feature), var(--card));
  border: 1px solid var(--feature-line); border-radius: var(--r-lg);
}
.room-bar .code {
  font-weight: 900; letter-spacing: .14em; color: var(--fg);
  font-variant-numeric: tabular-nums; font-size: 28px; line-height: 1.1;
}
.room-bar .meta {
  color: var(--dim); font-size: 12px;
  /* 按钮搬走之后这行不用再给左右两个角让位，可以用满整条横幅 */
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}

/* 邀请 / 离开：横幅下面**两个独立按钮**，各占一半。
   原来它们绝对定位压在横幅左右角上，小得像角标，而「邀请」是人没齐之前
   房主要反复按的东西。⚠️ .btn 默认 width:100%，所以这里靠 grid 分栏而不是
   靠 width:auto —— 后者会让两个按钮宽度跟着字数走，「邀请」比「离开」窄一截 */
.room-actions {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  margin: 8px 0 12px;
}
.room-actions .btn { margin-top: 0; }

/* 轮到谁选人：盖在抢人屏中间的一块大字，1.6 秒自己消失。
   ⚠️ pointer-events:none —— 它盖着的那 1.6 秒里，下面的卡池必须照样点得动，
   否则每换一手就有一秒多点不了人，抢人屏抢的就是这一秒 */
.turn-pop {
  position: fixed; left: 50%; top: 38%; transform: translate(-50%, -50%) scale(.92);
  z-index: 60; pointer-events: none;
  padding: 14px 26px; border-radius: var(--r-lg);
  background: var(--card); border: 1px solid var(--line);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .45);
  text-align: center; opacity: 0;
  transition: opacity .18s ease, transform .18s ease;
}
.turn-pop.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.turn-pop .tp-who { font-size: 22px; font-weight: 900; line-height: 1.2; }
.turn-pop .tp-sub { margin-top: 4px; font-size: 12px; color: var(--dim); }
/* 轮到自己那一下要**看得出不一样**：这是唯一需要玩家立刻动手的时刻 */
.turn-pop.mine { border-color: var(--accent); background: var(--card-2); }
.turn-pop.mine .tp-who { color: var(--accent); }

.seats { display: flex; flex-direction: column; gap: 5px; }

.seat {
  display: flex; align-items: center; gap: 10px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 10px; padding: 9px 12px; font-size: 14px;
}
.seat.me { border-color: var(--accent); background: var(--card-2); }
.seat.empty { border-style: dashed; opacity: .5; }
.seat .no {
  min-width: 22px; color: var(--faint); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.seat .nm { flex: 1; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 600; }
.seat .st { font-size: 12px; color: var(--faint); white-space: nowrap; }
.seat .st.ready { color: var(--accent-2); }

/* ---------- 抢完之后：赛前评分 / 分档抽签 ---------- */

/* 房内实力榜。**抢人这个玩法的第一个答案就是"我抢赢了没有"** ——
   一场没踢就能回答，而且它和最后的名次常常不一样，这才有得聊 */
.room-power { display: flex; flex-direction: column; gap: 5px; }
.rp-row {
  display: flex; align-items: center; gap: 10px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 10px; padding: 9px 12px; font-size: 14px;
}
.rp-row.me { border-color: var(--accent); background: var(--card-2); }
.rp-row .no {
  min-width: 22px; color: var(--faint); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.rp-row .nm { flex: 1; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; font-size: 16px; font-weight: 700; }
.rp-row .fm { font-size: 12px; color: var(--faint); white-space: nowrap; }
/* 总评那格用和球员卡同一套分档配色，看惯了卡的人不用再学一遍 */
.rp-row .ov {
  min-width: 42px; text-align: center; font-weight: 900; font-size: 17px;
  font-variant-numeric: tabular-nums;
  border-radius: 8px; padding: 2px 6px;
}

/* 抽签那一屏顶上的判决：先回答"我在第几档" ——
   档位直接决定 8 个对手的强弱，是看到总表之前唯一能拿到的判断依据 */
.draw-verdict {
  background: var(--verdict-bg);
  border: 2px solid var(--line-strong); border-radius: var(--r);
  padding: 14px 16px; margin-bottom: 14px;
}
.dv-kicker { font-size: 12px; color: var(--dim); }
.dv-main { display: flex; align-items: baseline; gap: 10px; margin: 4px 0 6px; }
.dv-main b { font-size: 26px; font-weight: 900; color: var(--accent-2); }
.dv-main span { font-size: 13px; color: var(--dim); }
.dv-note { font-size: 12px; color: var(--faint); line-height: 1.6; }

/* 四个档。⚠️ 用 auto-fit 而不是写死 4 列：手机上 4 列每列只剩 80px，
   队名全被截成"皇家马..."，而这一屏看的就是队名 */
.pots {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.pot {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 10px; padding: 8px 10px;
}
.pot-name {
  font-size: 12px; font-weight: 700; color: var(--dim);
  padding-bottom: 6px; margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
}
.pot-row {
  display: flex; align-items: center; gap: 7px;
  padding: 3px 0; font-size: 13px; color: var(--dim);
}
.pot-row .crest-cell { width: 18px; height: 16px; }
.pot-row .nm { flex: 1; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
/* 房里的人标出来：扫一眼就知道"他在第一档、我在第三档"，
   后面在淘汰赛碰上的时候才有故事 */
.pot-row.human { color: var(--fg); font-weight: 700; }
.pot-row.me { color: var(--accent-2); }

/* ---------- 联赛阶段总表 ---------- */

.league-box { margin-top: 16px; }
.league-box summary {
  cursor: pointer; color: var(--dim); font-size: 14px; padding: 4px 0;
}
.league-box summary::marker { color: var(--faint); }

.ltable { margin-top: 8px; }

.lrow {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; font-size: 13px;
  border: 1px solid transparent; border-radius: 8px;
}
.lrow:nth-child(odd) { background: var(--card); }
/* 前 8 和第 24 名两条分界线：上面是直进 16 强，中间打附加赛，下面回家。
   画在行的下边框上，比插一个分隔元素省事，也不会打乱奇偶底色 */
.lrow.cut { border-bottom-color: var(--line-strong); border-radius: 8px 8px 0 0; }
.lrow.human { color: var(--fg); }
.lrow.human .nm { font-weight: 700; }
.lrow.me { border-color: var(--accent); background: var(--card-2); }
.lrow .no {
  min-width: 22px; text-align: right; color: var(--faint);
  font-variant-numeric: tabular-nums;
}
/* 36 行的表，徽章格收窄一档：横向本来就紧，队名那列才是要留的 */
.lrow .crest-cell { width: 18px; height: 16px; }
.lrow .nm { flex: 1; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; color: var(--dim); }
.lrow.human .nm, .lrow.me .nm { color: var(--fg); }
.lrow .wd, .lrow .gd {
  color: var(--faint); font-variant-numeric: tabular-nums;
  min-width: 40px; text-align: right;
}
.lrow .pt {
  font-weight: 700; min-width: 24px; text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ---------- 联机抢人 ---------- */

/* 轮次时钟。抢人屏上最重要的一行 —— 玩家进来第一眼要知道"是不是轮到我" */
.live-clock {
  margin: 12px 0 10px; padding: 10px 14px; border-radius: var(--r);
  background: var(--card); border: 1px solid var(--line);
  text-align: center; font-size: 14px; color: var(--dim);
  font-variant-numeric: tabular-nums;
}
.live-clock:empty { display: none; }
.live-clock.mine {
  background: linear-gradient(150deg, var(--feature), var(--card));
  border-color: var(--accent); color: var(--fg); font-weight: 700;
}
/* 最后 10 秒才闪。一直闪的话玩家会忽略它，真到关头就没有提示效果了 */
.live-clock.urgent { color: var(--loss); animation: clockpulse 1s ease-in-out infinite; }
@keyframes clockpulse { 50% { opacity: .5; } }

/* 正在选人的座位：整行高亮 + 徽标，一眼知道轮到谁 */
.seat.onclock {
  border-color: var(--accent);
  background: linear-gradient(150deg, var(--feature), var(--card));
}
.seat .picking {
  margin-left: auto; font-size: 12px; font-weight: 700; color: var(--fg);
  background: var(--accent); border-radius: 6px; padding: 2px 8px;
}
/* 在线状态点：默认 = 在线（绿），.off = 离开/断线 */
.seat .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #4caf7d; flex: none;
}
.seat .dot.off { background: var(--faint); }

/* 我的阵容画在球场上（和单机抽卡同一个 renderPitch），
   power 条也随之显示 —— 抢人阶段就能看到自己阵容的总评涨落 */
.board-title { font-size: 13px; color: var(--faint); margin: 12px 0 6px; }
.board {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 5px;
}
.board-cell {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 8px; padding: 5px 7px; font-size: 12px;
  border-left-width: 3px; border-left-color: var(--line);
}
.board-cell.on { border-left-color: var(--accent); }
.board-cell .pos { display: block; color: var(--faint); font-size: 11px; }
.board-cell .who {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.board-cell.on .who { color: var(--fg); font-weight: 600; }

/* ---------- 对阵树 ---------- */

.bracket { display: flex; flex-direction: column; gap: 14px; }
.bracket-round > .rd-name {
  font-size: 13px; color: var(--faint); letter-spacing: 1px; margin-bottom: 6px;
}
.bracket-round.final > .rd-name { color: var(--gold); }

.tie {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 10px; padding: 8px 11px; margin-bottom: 6px;
}
/* align-items 从 baseline 改成 center：baseline 会把图片按下边缘去对齐文字基线，
   队徽会整个沉下去半格 */
.tie .side {
  display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 14px;
}
.tie .crest-cell { width: 20px; height: 18px; }
/* 输的一方压暗而不是给红色：一屏最多 7 场对阵，全上判定色会花 */
.tie .side.out { color: var(--faint); }
.tie .side.won .nm { font-weight: 700; }
.tie .side .nm { flex: 1; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.tie .side.human .nm::before {
  content: "●"; color: var(--accent); font-size: 10px; margin-right: 5px;
  vertical-align: middle;
}
.tie .side.me .nm { color: var(--accent-2); }
.tie .side .sc { font-variant-numeric: tabular-nums; font-weight: 700; }
.tie .note { font-size: 11px; color: var(--gold); margin-top: 3px; }

/* ---------- 桌面（≥900px）---------- */
/* 手机优先写下来的东西直接放到 1440 上有两个具体毛病，这一段只治这两个：
   ① 球场是 `aspect-ratio: 3/4`，版心 560 宽就意味着 747 高，
      而球员牌还是手机尺寸 —— 一片巨大的草皮上散着十一个小点。
   ② 候选列表限了 `max-height: 46vh`（为的是手机上球场和候选能同屏），
      桌面上变成"自己内部滚动，而左右两边全是空的"。
   两个都是"竖着排"造成的，所以桌面把抽卡/赛前改成**双栏**：左球场，右转盘+候选。 */
@media (min-width: 900px) {
  #topbar, #app { max-width: 1180px; }

  /* 内容整体放宽到 900。赛程、36 队总表、球员数据都是**表格型**的行
     （左边名字右边数字），拉宽等于给队名更多余地，比挤着好读。
     ⚠️ 只有**成段的文字**不能跟着拉 —— 署名和法务声明单独收窄，见下面。 */
  .screen { max-width: 900px; margin: 0 auto; }

  /* ⚠️ **一栏 900 宽的行，靠加内边距是治不好的** —— 那只是把空白从中间挪到两边，
     行本身还是那么长，"谁"和"几个球"之间照样隔着一大片。
     真正的解法是**让行变短**：排成两栏，每行 430 上下，和手机上差不多，
     顺带把整页高度砍掉一半。 */
  .player-stats, .fixtures.compact, .awards, .seats {
    display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px;
  }
  /* 八块统计一行排完，不用挤成两行四列 */
  .result-table { grid-template-columns: repeat(8, 1fr); }

  /* 剩下这几种是**必须单栏**的，只能收内边距：
     赛季页的赛程是按顺序一场场揭晓的、36 队总表和名次表是排名 ——
     拆成两栏就读不出先后了。 */
  .fixtures:not(.compact) .fx, .rank-row, .lrow, .history-row {
    padding-left: 140px; padding-right: 140px;
  }
  /* 淘汰赛树是两行一组的小卡，本来就窄，再缩就挤了 —— 只收一半 */
  .tie { padding-left: 70px; padding-right: 70px; }

  /* 轮次标签定宽。`第 1 轮` 和 `附加赛 首回合` 差着一倍，min-width 挡不住，
     后面的队徽和队名会被推得一行一个位置 —— 一列本该对齐的东西看着像没对齐。
     手机上不定宽是因为那儿横向本来就紧，让它自己伸缩更划算。 */
  .fx .rd { width: 86px; flex: none; }

  #screen-draft {
    max-width: none;
    display: grid;
    grid-template-columns: 480px minmax(0, 1fr);
    gap: 0 26px;
    align-items: start;
    grid-template-areas: "pitch top" "pitch cands" "pitch acts";
    grid-template-rows: auto auto 1fr;
  }
  #screen-draft .draft-top { grid-area: top; }
  /* 球场吸顶跟着滚。候选列表比球场长得多，不吸的话往下翻两屏
     左边就只剩一片空底色 —— 而"球场和候选同屏"正是手机上限高 46vh 要的效果，
     桌面上不用限高也能拿到。 */
  #screen-draft .pitch-wrap {
    grid-area: pitch; margin-top: 0;
    position: sticky; top: 12px;
  }
  #screen-draft .candidates { grid-area: cands; }
  #screen-draft .draft-actions { grid-area: acts; align-self: end; }
  /* 双栏之后右边整栏都归候选，不用再限高自己滚 */
  #screen-draft .cand-list { max-height: none; }

  /* 抢人房和单机抽卡**同一套桌面网格**：左球场吸顶，右栏头/候选/操作。
     抢人附加（房间码/时钟/座位）包在 .live-head 里，整块占右栏顶部 */
  #screen-liveroom {
    max-width: none;
    display: grid;
    grid-template-columns: 480px minmax(0, 1fr);
    gap: 0 26px;
    align-items: start;
    grid-template-areas: "pitch head" "pitch cands" "pitch acts";
    grid-template-rows: auto auto 1fr;
  }
  #screen-liveroom .live-head { grid-area: head; }
  #screen-liveroom .pitch-wrap {
    grid-area: pitch; margin-top: 0;
    position: sticky; top: 12px;
  }
  #screen-liveroom .candidates { grid-area: cands; }
  /* 抢人时右栏的按钮区贴着底走（候选列表在它上面，越长越好读）；
     但**大厅阶段候选是收起来的**，贴底就变成"选阵型和准备按钮孤零零吊在
     一屏空白的最下面"，得贴顶 */
  #screen-liveroom #live-actions { grid-area: acts; align-self: end; }
  #screen-liveroom[data-phase="lobby"] #live-actions { align-self: start; }
  #screen-liveroom .cand-list { max-height: none; }

  /* 赛前确认**不分栏**：这一屏的主角就是那张阵容图，分栏等于把它压小一半
     去给右边腾地方。改成单栏、球场放大，评估和按钮全部挪到下面。 */
  #screen-preview { max-width: 640px; }

  /* 球场大了，球员牌得跟着大 —— 不然就是"一片大草皮上散着十一个小点"，
     和分栏那版的毛病一模一样，只是换了个方向。
     ⚠️ `.slot-body` 的 `top` 必须等于**评分圈高度的一半的负数**，
     圆心才落在坐标点上（羁绊连线按同一套坐标画，见 pitch.js 的 chemLayer）。
     改圈的尺寸就得同时改这个 top，46 / 2 = 23。 */
  #screen-preview .badge-wrap, #screen-preview .slot .badge { width: 56px; }
  #screen-preview .slot .badge { height: 56px; font-size: 21px; border-width: 2px; }
  #screen-preview .slot-body { width: 130px; margin-left: -65px; top: -28px; }
  #screen-preview .slot .nm { font-size: 16px; line-height: 1.2; }
  #screen-preview .slot .ps { font-size: 14px; }
  #screen-preview .natflag { width: 18px; height: 12px; }
  #screen-preview .slot-crest { right: -13px; top: -6px; height: 24px; max-width: 32px; }
  /* 圈变大了，槽位层要多留一点边，否则门将那行名字又要贴到底 */
  #screen-preview .slots { inset: 26px 8px 56px; }

  /* 球场 480 宽(=640 高)，球员牌跟着回到"看得清但不挤"的比例 */
  .slot-body { width: 104px; margin-left: -52px; }
  .slot .nm { font-size: 14px; }
  .slot .ps { font-size: 13px; }

  /* 成段的文字不跟着版心拉宽：一行 900px 的中文，眼睛回行时会跟丢下一行的行首。
     表格型的行没这个问题（左名字右数字，视线是纵向扫的），所以只收这两块。 */
  #credit, .legal { max-width: 620px; margin-left: auto; margin-right: auto; }
  .hero .tagline { max-width: 620px; margin-left: auto; margin-right: auto; }

  /* 抢人屏"轮到谁"的弹框：PC 上字再大一点（P22：pc 端要再大一点）。
     手机上保持原来那档 —— 一屏就那么点地方，大了反而挡候选卡 */
  .turn-pop { padding: 20px 40px; }
  .turn-pop .tp-who { font-size: 28px; }
  .turn-pop .tp-sub { font-size: 14px; }
}

@media (max-width: 380px) {
  .code-card .code { font-size: 42px; }
  .slot-body { width: 50px; margin-left: -25px; top: -15px; }
  .badge-wrap, .slot .badge { width: 30px; }
  .slot .badge { height: 30px; font-size: 13px; }
  /* 圈收到 30px 了，位置名（CDM）得再收一档才不顶壁。
     ⚠️ 这条的特异性 (0,3,0) 压得过上面那条 (0,2,0)，顺序无关 */
  .slot:not(.filled) .badge { font-size: 11px; }
  .slot-crest { right: -8px; top: -4px; height: 15px; max-width: 20px; }
  /* 转盘卡的大徽章跟着收一档，否则窄屏上队名只剩两三个字的宽度 */
  .crest-cell.big { width: 42px; height: 42px; }
  .wheel-club { font-size: 19px; }
  /* 36 行的总表在这一档最挤，徽章格再收一次给队名让位 */
  .lrow { gap: 6px; }
  .lrow .crest-cell { width: 16px; height: 14px; }
}

/* ---------- 联赛阶段中场休息 ---------- */
/* 8 场打完卡的那一屏：一张 9 队积分榜 + 接下来五轮打谁。
   ⚠️ 表里的对手互相之间那 28 场是 standings.js **补算**出来的，不是引擎的结果 ——
   引擎眼里联赛阶段只有"我够不够 11 分"这一件事。 */
.interlude { margin: 4px 0 8px; }

.il-head { text-align: center; margin-bottom: 14px; }
.il-kicker {
  font-size: 13px; font-weight: 700; letter-spacing: .18em; color: var(--fg);
}
.il-verdict {
  margin-top: 6px; font-size: 26px; font-weight: 900; line-height: 1.2;
}
.il-verdict.ok { color: var(--accent-2); }
.il-verdict.out { color: var(--loss); }
/* 联赛阶段"等全房打完"那一屏的判决 —— 不是晋级/出局，只是个等待 */
.il-verdict.wait { color: var(--dim); font-size: 20px; }

/* 等待列表：谁已完成 / 还差谁。用"完成"那一格的颜色当进度看 */
.cw-list {
  display: flex; flex-direction: column; gap: 6px;
  margin: 4px auto 0; max-width: 340px;
}
.cw-row {
  display: flex; align-items: center; gap: 10px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 10px; padding: 9px 12px; font-size: 14px;
}
.cw-row.me { border-color: var(--accent); background: var(--card-2); }
.cw-nm { flex: 1; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.cw-st { font-size: 12px; color: var(--faint); white-space: nowrap; }
.cw-st.done { color: var(--accent-2); font-weight: 700; }

.il-tablehead, .il-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; font-size: 14px;
}
.il-tablehead {
  font-size: 12px; font-weight: 700; color: var(--fg);
  border-bottom: 1px solid var(--line-strong); padding-bottom: 6px;
}
/* 表头没有队徽格，得手动把那 22px 补回去，否则每一列都错开 */
.il-tablehead .c-nm { margin-left: 30px; }

.il-table { display: flex; flex-direction: column; }
.il-row {
  background: var(--card-2); border: 1px solid var(--line-strong);
  border-radius: 8px; margin-top: 5px;
}
/* 我这一行要一眼找得到 —— 一张 9 行的表，找自己不该花时间 */
.il-row.me {
  background: var(--feature); border-color: var(--accent);
  font-weight: 800;
}
.il-row .c-rk { flex: none; width: 18px; text-align: right;
  font-variant-numeric: tabular-nums; color: var(--dim); }
.il-row.me .c-rk { color: var(--accent-2); }
.il-row .c-nm, .il-tablehead .c-nm {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.il-row .c-nm em { font-style: normal; font-size: 12px; color: var(--dim); }
.il-row .c-wd, .il-tablehead .c-wd { flex: none; width: 52px; text-align: center;
  font-variant-numeric: tabular-nums; }
.il-row .c-gd, .il-tablehead .c-gd { flex: none; width: 30px; text-align: right;
  font-variant-numeric: tabular-nums; color: var(--dim); }
.il-row.me .c-gd { color: var(--fg); }
.il-row .c-pt, .il-tablehead .c-pt { flex: none; width: 26px; text-align: right;
  font-weight: 900; font-variant-numeric: tabular-nums; }
.crest-cell.mine {
  font-size: 11px; font-weight: 800; color: var(--accent-2);
  border: 1px solid var(--accent); border-radius: 50%;
  width: 20px; height: 20px;
}

/* 晋级线。画在**分数**上不是名次上 —— 引擎的规则就是 11 分这条线 */
.il-cut {
  margin: 8px 0 3px; font-size: 12px; font-weight: 700; color: var(--gold);
  text-align: center; position: relative;
}
.il-cut::before, .il-cut::after {
  content: ""; position: absolute; top: 50%; width: calc(50% - 52px);
  border-top: 1px dashed var(--gold);
}
.il-cut::before { left: 0; }
.il-cut::after { right: 0; }

.il-road { margin-top: 18px; }
.il-road.out {
  text-align: center; font-size: 15px; font-weight: 700; color: var(--loss);
  background: var(--card-2); border: 1px solid var(--loss);
  border-radius: var(--r); padding: 14px;
}
.il-ko {
  display: flex; align-items: center; gap: 8px; margin-top: 6px;
  background: var(--card-2); border: 1px solid var(--line-strong);
  border-radius: 8px; padding: 9px 10px; font-size: 14px;
}
.il-ko .k-rd { flex: none; width: 60px; font-size: 12px; font-weight: 700; color: var(--fg); }
.il-ko .k-nm { flex: 1; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.il-ko .k-nm em { font-style: normal; font-size: 12px; color: var(--dim); }
.il-ko .k-legs { flex: none; font-size: 12px; color: var(--dim); }
.il-kicker.mt { margin-top: 16px; }
.il-note {
  margin: 6px 0 2px; font-size: 12px; line-height: 1.5; color: var(--faint);
  text-align: center;
}

/* ---------- 淘汰赛对阵树 ---------- */
/* 一整张 SVG，viewBox 固定 + width:100%。坐标是 bracket-tree.js 算出来的 px，
   媒体查询在这儿改不动任何东西 —— 窄屏靠 viewBox 自己缩，别在这里加断点。
   ⚠️ 图上**没有一个结果是编出来的**：空圈就是还没定的位置。 */

.kob { display: block; width: 100%; height: auto; margin: 10px 0 2px; }
.kob-ln { fill: none; stroke: var(--line-strong); stroke-width: 1; }
/* 我那条路。整屏的强调色只给"主按钮 + 选中态"，这里算选中态：
   一张 16 队的图，找自己不该花时间。
   ⚠️ 它标的是**路线**不是战绩 —— 里面几列一个格子都没填，见 bracket-tree.js */
.kob-ln.on { stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; }

.kob-me .ring { fill: var(--feature); stroke: var(--accent); stroke-width: 1.6; }
.kob-me .tx { fill: var(--accent-2); font-size: 11px; font-weight: 800; }
/* 没队徽的队：缩写牌。这儿不能留空 —— 留空会和"空圈"撞意思 */
.kob-mono { fill: var(--faint); font-size: 9px; font-weight: 700; }
/* 年份牌只在同一枚队徽出现两次时才画（拜仁 2013 / 拜仁 2020）——
   平时 16 个位置都不带年份，别在这儿加"总是显示"的规则 */
.kob-yr { fill: var(--gold); font-size: 7.5px; font-weight: 700; }
.kob-rd { fill: var(--faint); font-size: 9px; letter-spacing: .04em; }
/* 大耳朵杯本身是浅银色的抠图。深色主题下直接看得见；两套浅色主题下它和底色
   贴得太近，照队徽那套补一圈深色描边（同一个 --crest-outline，同一种做法）。 */
html.bg-warm .kob-cup, html.bg-grass .kob-cup {
  filter:
    drop-shadow(1px 0 0 var(--crest-outline)) drop-shadow(-1px 0 0 var(--crest-outline))
    drop-shadow(0 1px 0 var(--crest-outline)) drop-shadow(0 -1px 0 var(--crest-outline));
}