:root,
html[data-theme="dark"] {
  --bg: #0b1220;
  --bg2: #121a2b;
  --card: #172033;
  --border: #2a3650;
  --text: #e8eefc;
  --muted: #8b9bb8;
  --primary: #3d8bfd;
  --primary-hover: #5a9dff;
  --good: #3dd68c;
  --bad: #f07178;
  --warn: #e6b450;
  --pitch: #1a5c3a;
  --pitch-line: rgba(255, 255, 255, 0.35);
  --radius: 12px;
  --shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
  --toast-bg: #1e293b;
  --start-sky-top: #0a1020;
  --start-card-a: rgba(28, 38, 58, 0.88);
  --start-card-b: rgba(18, 26, 43, 0.92);
  --surface-inset: #1e293b;
  --row-hover: rgba(255, 255, 255, 0.03);
  --row-me: rgba(61, 139, 253, 0.12);
  --tab-active-bg: rgba(61, 139, 253, 0.15);
  --tab-active-border: rgba(61, 139, 253, 0.4);
  --event-red: #f87171;
  --event-injury: #fb923c;
  --event-pen: #fbbf24;
  --event-save: #38bdf8;
  --event-wood: #a78bfa;
  --event-sub: #94a3b8;
  --open-fg: #9aefc4;
  --open-border: #3dd68c66;
  --open-bg: transparent;
  --closed-fg: #f0a8ac;
  --closed-border: #f0717866;
  --closed-bg: transparent;
  --bar-track: #1e293b;
  --board-bg: rgba(30, 41, 59, 0.85);
  --board-border: #334155;
  --board-meta: #94a3b8;
  --input-bg: var(--bg2);
  --input-border: var(--border);
  /*
   * 字号标尺（2026-09-16）。
   * 改前全站有 45 个不同的 font-size 字面值（8.00–28.80px，低端每 0.2px 一档），
   * 是长期逐处微调累积出来的漂移，不是设计。这里贴着**现有密集簇**定 14 级，
   * 使绝大多数声明只移动 ≤0.5px；刻意不压到 6 级——那会把卡在 17px 圆圈里的
   * 球衣号（原 8px）和手机球场上的球员名（原 8px）顶到 10px 以上而撑破容器。
   * 真正偏大的是两端：8.00→9（+12.5%，2 处）与 23.20→22（−5.2%，2 处）。
   * 令牌只在 :root 定义一次：字号不随主题变化，light 块只覆盖颜色。
   */
  --fs-4xs: 0.5625rem;  /*  9px  极小角标（球衣号、微型徽标） */
  --fs-3xs: 0.625rem;   /* 10px  角标 */
  --fs-2xs: 0.6875rem;  /* 11px  次要标签 */
  --fs-xs: 0.75rem;     /* 12px  表格/密集列表 */
  --fs-sm: 0.8125rem;   /* 13px  次要正文 */
  --fs-base: 0.875rem;  /* 14px  正文 */
  --fs-md: 0.9375rem;   /* 15px  强调正文 */
  --fs-lg: 1rem;        /* 16px  卡片标题 */
  --fs-xl: 1.0625rem;   /* 17px  次级区块标题 */
  --fs-2xl: 1.125rem;   /* 18px  区块标题 */
  --fs-3xl: 1.25rem;    /* 20px  卡片主行（如「主队 vs 客队」） */
  --fs-4xl: 1.375rem;   /* 22px  页面标题 */
  --fs-5xl: 1.5625rem;  /* 25px  大数字 */
  --fs-6xl: 1.75rem;    /* 28px  比分等展示数字 */
  font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  color-scheme: dark;
}

/* 日间模式 */
html[data-theme="light"] {
  --bg: #e8eef8;
  --bg2: #f0f4fb;
  --card: #fff;
  --border: #c5d0e3;
  --text: #1a2438;
  --muted: #5a6b86;
  --primary: #2563eb;
  --primary-hover: #1d4ed8;
  --good: #0f8a4f;
  --bad: #c92a36;
  --warn: #a16207;
  --pitch: #2d8a52;
  --pitch-line: rgba(255, 255, 255, 0.55);
  --shadow: 0 8px 24px rgba(30, 50, 90, 0.1);
  --toast-bg: #fff;
  --start-sky-top: #9ec5ff;
  --start-card-a: rgba(255, 255, 255, 0.94);
  --start-card-b: rgba(244, 247, 252, 0.96);
  --surface-inset: #e2e8f4;
  --row-hover: rgba(37, 99, 235, 0.06);
  --row-me: rgba(37, 99, 235, 0.1);
  --tab-active-bg: rgba(37, 99, 235, 0.12);
  --tab-active-border: rgba(37, 99, 235, 0.35);
  --event-red: #c92a36;
  --event-injury: #c26a0a;
  --event-pen: #b45309;
  --event-save: #0369a1;
  --event-wood: #6d28d9;
  --event-sub: #5a6b86;
  --open-fg: #0f6b3e;
  --open-border: #86efac;
  --open-bg: #ecfdf5;
  --closed-fg: #b91c1c;
  --closed-border: #fca5a5;
  --closed-bg: #fef2f2;
  --bar-track: #d8e0ef;
  --board-bg: #f0f4fb;
  --board-border: #c5d0e3;
  --board-meta: #5a6b86;
  --input-bg: #fff;
  --input-border: #c5d0e3;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; background: var(--bg); color: var(--text); }
html { transition: background 0.25s ease, color 0.2s ease; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }

.screen { display: none; min-height: 100vh; }
.screen.active { display: block; }

/* 主题 / 语言切换 */
.prefs-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1rem;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--border);
}
.prefs-group {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--fs-sm);
  color: var(--muted);
}
.prefs-group > span { white-space: nowrap; }
.prefs-seg {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
  background: var(--bg2);
}
.prefs-seg button {
  border: none;
  background: transparent;
  color: var(--muted);
  padding: 0.3rem 0.7rem;
  font-size: var(--fs-sm);
  line-height: 1.3;
}
.prefs-seg button:hover { color: var(--text); }
.prefs-seg button.active {
  background: var(--primary);
  color: #fff;
  font-weight: 600;
}
.topbar-prefs {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-right: 0.25rem;
}
.topbar-prefs .prefs-seg button { padding: 0.25rem 0.55rem; font-size: var(--fs-xs); }

/* Start · 球场氛围（夜间/日间由主题变量驱动） */
#screen-start {
  display: none;
  position: relative;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
  background: var(--bg);
}
#screen-start.active { display: flex; }

.start-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* 天空渐变 */
.start-bg-sky {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 120% 80% at 50% -10%, #1a2744 0%, transparent 55%),
    radial-gradient(ellipse 90% 60% at 50% 100%, #0d2818 0%, transparent 50%),
    linear-gradient(180deg, #0a1020 0%, #0c1528 38%, #0a1a14 72%, #07140e 100%);
}
html[data-theme="light"] .start-bg-sky {
  background:
    radial-gradient(ellipse 100% 70% at 50% -5%, #b8d4ff 0%, transparent 55%),
    radial-gradient(ellipse 90% 50% at 50% 100%, #7ecf9a 0%, transparent 45%),
    linear-gradient(180deg, #8eb8f0 0%, #a8c8f0 35%, #6aaf7a 70%, #4a9a62 100%);
}
html[data-theme="light"] .start-bg-stars { opacity: 0.15; }
html[data-theme="light"] .floodlight { opacity: 0.08; }
html[data-theme="light"] .start-bg-stands {
  opacity: 0.75;
  filter: brightness(1.35);
}
html[data-theme="light"] .start-bg-vignette {
  background:
    radial-gradient(ellipse 70% 60% at 50% 42%, transparent 25%, rgba(232, 238, 248, 0.35) 80%, rgba(232, 238, 248, 0.75) 100%);
}
html[data-theme="light"] .start-bg-particles span {
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
}

/* 彩色氛围光 */
.start-bg-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(48px);
  opacity: 0.55;
  animation: start-glow-drift 14s ease-in-out infinite alternate;
}
.start-bg-glow-a {
  width: min(55vw, 420px);
  height: min(55vw, 420px);
  left: -8%;
  top: 8%;
  background: rgba(61, 139, 253, 0.35);
}
.start-bg-glow-b {
  width: min(50vw, 380px);
  height: min(50vw, 380px);
  right: -10%;
  top: 18%;
  background: rgba(61, 214, 140, 0.22);
  animation-delay: -4s;
  animation-duration: 18s;
}
.start-bg-glow-c {
  width: min(70vw, 520px);
  height: min(40vw, 280px);
  left: 50%;
  bottom: 5%;
  transform: translateX(-50%);
  background: rgba(230, 180, 80, 0.12);
  animation: start-glow-drift-c 16s ease-in-out infinite alternate;
  animation-delay: -7s;
}

@keyframes start-glow-drift {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(12px, -18px) scale(1.08); }
}
@keyframes start-glow-drift-c {
  from { transform: translateX(-50%) translate(0, 0) scale(1); }
  to { transform: translateX(-50%) translate(8px, -10px) scale(1.06); }
}

/* 星点 */
.start-bg-stars {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 8% 12%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1px 1px at 18% 28%, rgba(255,255,255,0.45), transparent),
    radial-gradient(1.5px 1.5px at 32% 8%, rgba(255,255,255,0.55), transparent),
    radial-gradient(1px 1px at 48% 18%, rgba(255,255,255,0.35), transparent),
    radial-gradient(2px 2px at 62% 10%, rgba(255,255,255,0.65), transparent),
    radial-gradient(1px 1px at 78% 22%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1.5px 1.5px at 88% 14%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 92% 32%, rgba(255,255,255,0.3), transparent),
    radial-gradient(1px 1px at 12% 42%, rgba(255,255,255,0.25), transparent),
    radial-gradient(1.5px 1.5px at 55% 6%, rgba(200,220,255,0.55), transparent);
  opacity: 0.85;
  animation: start-stars-twinkle 5s ease-in-out infinite alternate;
}
@keyframes start-stars-twinkle {
  from { opacity: 0.55; }
  to { opacity: 0.95; }
}

/* 探照灯锥光 */
.start-bg-floodlights {
  position: absolute;
  inset: 0;
}
.floodlight {
  position: absolute;
  top: -5%;
  width: 42%;
  height: 75%;
  opacity: 0.22;
  filter: blur(2px);
  animation: start-flood 7s ease-in-out infinite alternate;
}
.floodlight.fl-l {
  left: 2%;
  background: linear-gradient(
    165deg,
    rgba(255, 250, 230, 0.55) 0%,
    rgba(255, 240, 180, 0.12) 35%,
    transparent 70%
  );
  clip-path: polygon(18% 0, 38% 0, 95% 100%, 5% 100%);
  transform-origin: 28% 0;
}
.floodlight.fl-r {
  right: 2%;
  left: auto;
  background: linear-gradient(
    195deg,
    rgba(255, 250, 230, 0.5) 0%,
    rgba(200, 230, 255, 0.1) 35%,
    transparent 70%
  );
  clip-path: polygon(62% 0, 82% 0, 95% 100%, 5% 100%);
  transform-origin: 72% 0;
  animation-delay: -3.5s;
}
@keyframes start-flood {
  from { opacity: 0.14; filter: blur(2px) brightness(0.9); }
  to { opacity: 0.28; filter: blur(1px) brightness(1.15); }
}

/* 看台剪影 */
.start-bg-stands {
  position: absolute;
  left: -5%;
  right: -5%;
  bottom: 28%;
  height: 22%;
  background:
    /* 左看台 */
    linear-gradient(180deg, transparent 0%, rgba(8, 12, 22, 0.9) 40%),
    repeating-linear-gradient(
      90deg,
      transparent 0 14px,
      rgba(20, 28, 45, 0.5) 14px 16px
    ),
    linear-gradient(185deg, #121a2e 0%, #0a101c 100%);
  clip-path: polygon(
    0% 100%,
    0% 55%,
    8% 35%,
    18% 48%,
    28% 28%,
    38% 42%,
    48% 22%,
    58% 40%,
    68% 25%,
    78% 45%,
    88% 30%,
    100% 50%,
    100% 100%
  );
  opacity: 0.92;
  box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.4);
}
.start-bg-stands::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 35%;
  height: 3px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(61, 139, 253, 0.35) 20%,
    rgba(255, 240, 180, 0.25) 50%,
    rgba(61, 214, 140, 0.3) 80%,
    transparent
  );
  filter: blur(1px);
}
.start-bg-stands::after {
  /* 简易球门架剪影 */
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8%;
  width: min(28vw, 160px);
  height: 55%;
  transform: translateX(-50%);
  border: 2px solid rgba(230, 238, 252, 0.12);
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.04);
}

/* 俯视草皮 */
.start-bg-pitch {
  position: absolute;
  left: 50%;
  bottom: -8%;
  width: min(140vw, 1100px);
  height: 42%;
  transform: translateX(-50%) perspective(480px) rotateX(58deg);
  transform-origin: center bottom;
  border-radius: 8px;
  overflow: hidden;
  background:
    repeating-linear-gradient(
      90deg,
      #14532d 0px,
      #14532d 36px,
      #166534 36px,
      #166534 72px
    );
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.08),
    0 30px 80px rgba(0, 0, 0, 0.55),
    inset 0 0 80px rgba(0, 0, 0, 0.35);
  opacity: 0.88;
}
.pitch-stripe {
  position: absolute;
  inset: 6%;
  border: 2px solid rgba(255, 255, 255, 0.28);
  border-radius: 2px;
}
.pitch-center {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
}
.pitch-center::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -200%;
  bottom: -200%;
  width: 2px;
  background: rgba(255, 255, 255, 0.28);
  transform: translateX(-50%);
}
.pitch-center::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  transform: translate(-50%, -50%);
}
.pitch-box {
  position: absolute;
  top: 28%;
  bottom: 28%;
  width: 14%;
  border: 2px solid rgba(255, 255, 255, 0.22);
}
.pitch-box-l { left: 6%; border-left: none; }
.pitch-box-r { right: 6%; border-right: none; }
.pitch-spot {
  position: absolute;
  left: 50%;
  top: 18%;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  box-shadow: 0 55vh 0 0 rgba(255, 255, 255, 0.25);
}

.start-bg-vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 50% 42%, transparent 20%, rgba(6, 10, 18, 0.55) 75%, rgba(6, 10, 18, 0.88) 100%),
    linear-gradient(180deg, rgba(6, 10, 18, 0.25) 0%, transparent 30%, transparent 55%, rgba(6, 10, 18, 0.5) 100%);
}

/* 漂浮光点 */
.start-bg-particles {
  position: absolute;
  inset: 0;
}
.start-bg-particles span {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  box-shadow: 0 0 8px rgba(61, 139, 253, 0.5);
  animation: start-float 12s linear infinite;
  opacity: 0;
}
.start-bg-particles span:nth-child(1) { left: 12%; bottom: 20%; animation-delay: 0s; }
.start-bg-particles span:nth-child(2) { left: 28%; bottom: 35%; animation-delay: -2s; width: 3px; height: 3px; }
.start-bg-particles span:nth-child(3) { left: 45%; bottom: 15%; animation-delay: -4s; }
.start-bg-particles span:nth-child(4) { left: 62%; bottom: 40%; animation-delay: -1s; width: 5px; height: 5px; }
.start-bg-particles span:nth-child(5) { left: 78%; bottom: 25%; animation-delay: -6s; }
.start-bg-particles span:nth-child(6) { left: 88%; bottom: 45%; animation-delay: -3s; width: 3px; height: 3px; }
.start-bg-particles span:nth-child(7) { left: 35%; bottom: 50%; animation-delay: -8s; }
.start-bg-particles span:nth-child(8) { left: 55%; bottom: 30%; animation-delay: -5s; }
@keyframes start-float {
  0% { transform: translateY(0) scale(0.6); opacity: 0; }
  12% { opacity: 0.7; }
  70% { opacity: 0.35; }
  100% { transform: translateY(-55vh) scale(1); opacity: 0; }
}

/* 登录卡片 · 玻璃拟态 */
.start-card {
  position: relative;
  z-index: 1;
  width: min(440px, 94vw);
  max-height: min(92vh, 900px);
  overflow-y: auto;
  background: linear-gradient(
    165deg,
    var(--start-card-a) 0%,
    var(--start-card-b) 100%
  );
  border: 1px solid rgba(61, 139, 253, 0.22);
  border-radius: 18px;
  padding: 1.65rem 1.75rem 1.5rem;
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    0 0 60px rgba(61, 139, 253, 0.08);
  text-align: center;
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  animation: start-card-in 0.7s ease-out both;
}
html[data-theme="light"] .start-card {
  border-color: rgba(37, 99, 235, 0.2);
  box-shadow:
    0 8px 32px rgba(30, 60, 120, 0.15),
    0 0 0 1px rgba(255, 255, 255, 0.8) inset;
}
html[data-theme="light"] .start-card h1 {
  background: linear-gradient(120deg, var(--text) 15%, var(--primary) 55%, #15965a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@keyframes start-card-in {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.start-logo {
  width: 64px;
  height: 64px;
  margin: 0 auto 0.85rem;
  display: grid;
  place-items: center;
  border-radius: 18px;
  overflow: hidden;
  background:
    radial-gradient(circle at 30% 30%, rgba(61, 214, 140, 0.18), transparent 55%),
    linear-gradient(145deg, rgba(61, 139, 253, 0.22), rgba(23, 32, 51, 0.55));
  border: 1px solid rgba(61, 139, 253, 0.35);
  box-shadow: 0 8px 24px rgba(61, 139, 253, 0.22);
  animation: start-ball-bob 3.5s ease-in-out infinite;
}
.start-logo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  user-select: none;
  -webkit-user-drag: none;
}
@keyframes start-ball-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
.start-card h1 {
  margin: 0 0 0.25rem;
  letter-spacing: 0.06em;
  font-size: var(--fs-5xl);
  background: linear-gradient(120deg, #e8eefc 20%, #7eb6ff 55%, #6ee7b7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.subtitle { color: var(--muted); margin: 0 0 1.5rem; }

@media (prefers-reduced-motion: reduce) {
  .start-bg-glow,
  .floodlight,
  .start-bg-stars,
  .start-bg-particles span,
  .start-logo,
  .start-card {
    animation: none !important;
  }
  .start-card { opacity: 1; transform: none; }
}

@media (max-width: 480px) {
  .start-bg-pitch {
    height: 36%;
    bottom: -6%;
  }
  .start-bg-stands {
    bottom: 24%;
    height: 18%;
  }
  .floodlight { opacity: 0.16; }
}
.start-form { display: grid; gap: 0.9rem; text-align: left; }
.start-form label { display: grid; gap: 0.35rem; font-size: var(--fs-base); color: var(--muted); }
.start-club-preview {
  min-height: 4rem;
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: 0.75rem;
  align-items: center;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg2);
}
.start-club-preview > span { min-width: 0; display: grid; gap: 0.18rem; }
.start-club-preview strong,
.start-club-preview small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.start-club-preview strong { color: var(--text); font-size: var(--fs-md); }
.start-club-preview small { color: var(--muted); font-size: var(--fs-xs); }
.start-form input, .start-form select,
#formation-select,
.filters select,
.ht-subs select,
.ht-tactics select {
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: 8px;
  padding: 0.65rem 0.75rem;
  color: var(--text);
}
.start-form input:focus, .start-form select:focus,
#formation-select:focus, .filters select:focus {
  outline: 2px solid rgba(37, 99, 235, 0.35);
  outline-offset: 1px;
}
.hint { color: var(--muted); font-size: var(--fs-base); min-height: 1.2em; }

/* Buttons */
.btn {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.6rem 1rem;
  color: var(--text);
  transition: 0.15s ease;
}
.btn:hover:not(:disabled) { border-color: var(--primary); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn.primary {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  font-weight: 600;
}
.btn.primary:hover:not(:disabled) {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
  color: #fff;
}
.btn.small { padding: 0.35rem 0.7rem; font-size: var(--fs-base); }
.btn.ghost { background: transparent; }
.btn.danger { border-color: var(--bad); color: var(--bad); background: transparent; }

/* Main layout */
.topbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  align-items: center;
  padding: 0.75rem 1.25rem;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}
.brand { display: flex; flex-direction: column; min-width: 140px; }
.brand strong { font-size: var(--fs-xl); }
#club-name { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
#club-name > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.muted { color: var(--muted); font-size: var(--fs-base); }
.meta { display: flex; gap: 1rem; align-items: center; color: var(--muted); font-size: var(--fs-base); }
.money { color: var(--good); font-weight: 600; }
.tabs { display: flex; flex-wrap: wrap; gap: 0.35rem; flex: 1; justify-content: center; }
.tab {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0.4rem 0.85rem;
  color: var(--muted);
}
.tab:hover { color: var(--text); }
.tab.active { background: var(--tab-active-bg); border-color: var(--tab-active-border); color: var(--text); }
.actions { display: flex; gap: 0.4rem; align-items: center; }
#btn-global-search.icon-btn {
  width: 2.25rem;
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  display: inline-grid;
  place-items: center;
  font-size: var(--fs-md);
  line-height: 1;
}

.content { padding: 1.25rem; max-width: 1200px; margin: 0 auto; }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
  box-shadow: var(--shadow);
}
.card h2 { margin: 0 0 0.85rem; font-size: var(--fs-xl); }
.card h3 { margin: 1rem 0 0.5rem; font-size: var(--fs-md); color: var(--muted); font-weight: 600; }

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.span-2 { grid-column: 1 / -1; }
#tab-transfer .grid-2 > .card { min-width: 0; }
#tab-transfer .table-wrap { max-width: 100%; }
@media (max-width: 860px) {
  .grid-2 { grid-template-columns: 1fr; }
  .span-2 { grid-column: auto; }
}

.row-between { display: flex; justify-content: space-between; align-items: center; }

/* Tables */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: var(--fs-base); }
th, td { padding: 0.55rem 0.45rem; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
th { color: var(--muted); font-weight: 600; font-size: var(--fs-sm); }
tr.me { background: var(--row-me); }
tr.row-active td { background: var(--row-me); }
tr:hover td { background: var(--row-hover); }
.intl-nation-link:hover { text-decoration: underline; color: var(--accent, #6cf); }
.nation-flag {
  display: inline-flex;
  width: 1.45rem;
  height: 0.96rem;
  margin-right: 0.28rem;
  vertical-align: -0.12rem;
  flex: 0 0 auto;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.2);
  border-radius: 2px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
}
.nation-flag svg { width: 100%; height: 100%; display: block; }
.nation-flag-code {
  align-items: center;
  justify-content: center;
  background: var(--bg2);
  color: var(--muted);
  font-size: var(--fs-4xs);
  font-weight: 700;
  line-height: 1;
}

/* Dashboard */
.next-match {
  font-size: var(--fs-2xl);
  margin-bottom: 1rem;
  padding: 0.85rem;
  background: var(--bg2);
  border-radius: 8px;
  border: 1px solid var(--border);
}
#btn-play-match, #btn-advance { margin-right: 0.5rem; margin-top: 0.25rem; }
/* 联赛排名摘要（「联赛 第 N 名 · 积分 · 战绩 · 升降级」）以及青年队信息条。
   ⚠ 这里原本是 `--fs-4xl`（22px）——那是「页面标题」级字号，用在一行密集信息上
   会让它在窄栏里折成 3~5 行（实测 1440px 下 3 行、1024px 下 5 行），视觉上像坏了。
   降到 `--fs-base`（14px）＝本文件的「正文」级，并给 1.5 行高与 `text-wrap: pretty`
   （避免最后一行只剩一两个字）。`font-weight` 仍保持 700，数字依旧醒目。
   青年队那条（`#youth-info`）仍可用行内 `--fs-lg` 覆盖。 */
.rank-box {
  font-size: var(--fs-base);
  line-height: 1.5;
  font-weight: 700;
  text-wrap: pretty;
  padding: 0.75rem;
  background: var(--bg2);
  border-radius: 8px;
  border: 1px solid var(--border);
}
/* #my-rank 分段：只在段与段之间换行，不把「前 3 名升级」劈开 */
.rank-seg { white-space: nowrap; }
.rank-box .rank-record { font-weight: 600; }
.rank-box .rank-rules {
  margin-top: 0.2rem;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--muted);
}
.form-strip { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.form-dot {
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: var(--fs-xs); font-weight: 700;
}
.form-dot.W { background: rgba(61, 214, 140, 0.25); color: var(--good); }
.form-dot.D { background: rgba(230, 180, 80, 0.25); color: var(--warn); }
.form-dot.L { background: rgba(240, 113, 120, 0.25); color: var(--bad); }

/* ===== Inbox 信箱 ===== */
.tab.has-badge {
  color: var(--warn);
  font-weight: 700;
}
.inbox-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.5rem 0 0.75rem;
}
.inbox-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  max-height: min(70vh, 640px);
  overflow-y: auto;
}
.inbox-empty { margin: 0.75rem 0; }
.inbox-item {
  padding: 0.7rem 0.8rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(15, 23, 42, 0.35);
  cursor: default;
}
.inbox-item.status-pending {
  border-color: rgba(61, 139, 253, 0.45);
  box-shadow: 0 0 0 1px rgba(61, 139, 253, 0.12);
}
.inbox-item.status-done,
.inbox-item.status-expired {
  opacity: 0.72;
}
.inbox-item-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.55rem;
  margin-bottom: 0.3rem;
  font-size: var(--fs-xs);
}
.inbox-cat {
  display: inline-block;
  padding: 0.08rem 0.4rem;
  border-radius: 99px;
  font-weight: 700;
  font-size: var(--fs-2xs);
  background: rgba(61, 139, 253, 0.18);
  color: #93c5fd;
  border: 1px solid rgba(61, 139, 253, 0.3);
}
.inbox-cat.mini { font-size: var(--fs-3xs); }
.inbox-item.cat-board .inbox-cat { background: rgba(251, 191, 36, 0.15); color: #fbbf24; border-color: rgba(251, 191, 36, 0.35); }
.inbox-item.cat-transfer .inbox-cat { background: rgba(52, 211, 153, 0.15); color: #6ee7b7; border-color: rgba(52, 211, 153, 0.35); }
.inbox-item.cat-player .inbox-cat { background: rgba(248, 113, 113, 0.12); color: #fca5a5; border-color: rgba(248, 113, 113, 0.3); }
.inbox-item.cat-scout .inbox-cat { background: rgba(167, 139, 250, 0.15); color: #c4b5fd; border-color: rgba(167, 139, 250, 0.35); }
.inbox-pri {
  font-size: var(--fs-3xs);
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 0.05rem 0.3rem;
  border-radius: 4px;
}
.inbox-pri.high { background: rgba(239, 68, 68, 0.2); color: #f87171; }
.inbox-pri.mid { background: rgba(245, 158, 11, 0.18); color: #fbbf24; }
.inbox-day { margin-left: auto; }
.inbox-status { color: var(--muted); }
.inbox-title {
  margin: 0 0 0.25rem;
  font-size: var(--fs-md);
  font-weight: 700;
  line-height: 1.35;
}
.inbox-body {
  margin: 0 0 0.5rem;
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--muted);
}
.inbox-entity-link {
  display: inline;
  color: var(--primary);
  font-weight: 700;
  line-height: inherit;
}
.inbox-entity-link .club-link-crest { display: none; }
button.club-link.inbox-entity-link { display: inline; vertical-align: baseline; }
.inbox-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}
.inbox-result { font-size: var(--fs-sm); }
.dash-inbox { font-size: var(--fs-sm); line-height: 1.4; }
.dash-inbox-count {
  font-weight: 700;
  margin-bottom: 0.35rem;
  color: var(--text);
}
.dash-inbox-row {
  padding: 0.2rem 0;
  border-top: 1px solid rgba(148, 163, 184, 0.15);
  font-size: var(--fs-sm);
}
html[data-theme="light"] .inbox-item {
  background: #fff;
}
html[data-theme="light"] .inbox-body { color: #64748b; }

.news-list { display: grid; gap: 0.5rem; max-height: 220px; overflow-y: auto; }
.news-list li {
  padding: 0.55rem 0.7rem;
  background: var(--bg2);
  border-radius: 8px;
  border-left: 3px solid var(--primary);
  font-size: var(--fs-base);
  color: var(--muted);
}
.news-list li strong { color: var(--text); }

/* Pitch */
.pitch {
  margin-top: 1rem;
  background:
    linear-gradient(var(--pitch-line), var(--pitch-line)) center/100% 2px no-repeat,
    radial-gradient(circle at center, transparent 40px, var(--pitch-line) 41px, var(--pitch-line) 42px, transparent 43px),
    var(--pitch);
  border: 2px solid var(--pitch-line);
  border-radius: 8px;
  aspect-ratio: 4 / 5;
  max-width: 430px;
  width: 100%;
  position: relative;
  margin-inline: auto;
  /* 名牌可比头像宽，允许溢出球场边缘一点 */
  overflow: visible;
  padding: 0.15rem 0;
}
.player-dot {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 86px;
  text-align: center;
  z-index: 2;
  pointer-events: none;
}
/* 战术板槽位：可拖拽 / 点选 */
.player-dot.tac-slot {
  pointer-events: auto;
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.player-dot.tac-slot:active {
  cursor: grabbing;
}
.player-dot.tac-slot.dragging {
  opacity: 0.45;
  z-index: 5;
}
.player-dot.tac-slot.drag-over .circle {
  box-shadow: 0 0 0 3px var(--primary), 0 0 12px rgba(61, 139, 253, 0.55);
  transform: scale(1.08);
}
.player-dot.tac-slot.selected .circle {
  box-shadow: 0 0 0 3px #e6b450, 0 0 10px rgba(230, 180, 80, 0.45);
}
.player-dot.tac-slot.role-editing .circle {
  box-shadow: 0 0 0 3px var(--primary), 0 0 12px rgba(61, 139, 253, 0.42);
}
.player-dot.tac-slot.out-of-pos .circle {
  outline: 2px dashed rgba(251, 113, 133, 0.85);
  outline-offset: 1px;
}
.player-dot.tac-slot.empty .circle {
  border-style: dashed;
  opacity: 0.85;
}
.pitch-slot-pos {
  position: absolute;
  right: -4px;
  bottom: -4px;
  font-size: var(--fs-4xs);
  font-weight: 800;
  color: #fff;
  background: rgba(15, 23, 42, 0.65);
  border-radius: 4px;
  padding: 0 3px;
  line-height: 1.2;
}
.pitch-empty {
  font-size: var(--fs-3xs);
  opacity: 0.85;
}
.player-dot .circle {
  position: relative;
  width: 46px; height: 46px; margin: 0 auto 2px;
  border-radius: 50%;
  background: var(--primary);
  border: 2px solid #fff;
  display: grid; place-items: center;
  font-size: var(--fs-2xs); font-weight: 700;
  pointer-events: auto;
}
/* 球衣号角标（头像盖住圆圈内数字时仍可见） */
.player-dot .pitch-num {
  position: absolute;
  right: -6px;
  bottom: -5px;
  min-width: 1.05rem;
  height: 1.05rem;
  padding: 0 3px;
  border-radius: 999px;
  border: 1.5px solid rgba(255, 255, 255, 0.9);
  font-size: var(--fs-3xs);
  font-weight: 800;
  line-height: 1.05rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  z-index: 3;
}
html[data-theme="light"] .player-dot .pitch-num {
  border-color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
/* 槽位角色指令下拉（战术板） */
.tac-role-sel {
  display: block;
  width: min(92px, 22vw);
  max-width: 100%;
  margin: 2px auto 0;
  padding: 1px 2px;
  font-size: var(--fs-4xs);
  font-weight: 600;
  line-height: 1.3;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(15, 23, 42, 0.88);
  color: #e8eefc;
  cursor: pointer;
  pointer-events: auto;
  appearance: auto;
  z-index: 4;
}
html[data-theme="light"] .tac-role-sel {
  background: rgba(255, 255, 255, 0.95);
  color: var(--text);
  border-color: rgba(26, 36, 56, 0.2);
}
.tac-role-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.18rem;
  max-width: 84px;
  margin: 3px auto 0;
  padding: 2px 5px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.86);
  color: #f8fafc;
  font-size: var(--fs-4xs);
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  pointer-events: auto;
}
.tac-role-badge:hover,
.tac-role-badge:focus-visible {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(61, 139, 253, 0.22);
}
html[data-theme="light"] .tac-role-badge {
  background: rgba(255, 255, 255, 0.96);
  color: var(--text);
  border-color: rgba(26, 36, 56, 0.18);
}
.player-dot .name {
  font-size: var(--fs-2xs);
  font-weight: 600;
  line-height: 1.25;
  background: rgba(15, 23, 42, 0.78);
  color: #f8fafc;
  border-radius: 4px;
  padding: 2px 5px;
  /* #号 + 姓 单行显示，不换行 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 88px;
  width: max-content;
  min-width: 2.5rem;
  margin: 0 auto;
  pointer-events: auto;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}
/* 日间：绿茵上用浅色名牌，避免「夜间黑条」违和 */
html[data-theme="light"] .player-dot .name {
  background: rgba(255, 255, 255, 0.96) !important;
  color: #0f172a !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(15, 23, 42, 0.08);
}
html[data-theme="light"] .pitch {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2), 0 4px 16px rgba(30, 50, 90, 0.12);
}

#tab-tactics label {
  display: grid;
  gap: 0.3rem;
  margin-bottom: 0.85rem;
  color: var(--muted);
  font-size: var(--fs-base);
}
#tab-tactics select, #tab-tactics input[type="range"] { width: 100%; }
#formation-select {
  width: 100%;
  padding: 0.55rem;
}
.tac-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0 0 0.85rem;
}
.tac-preset-btn {
  font-size: var(--fs-xs);
  padding: 0.28rem 0.55rem;
}
.tac-slider-val {
  color: var(--text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.tac-summary {
  background: var(--bg2, rgba(15, 23, 42, 0.35));
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.65rem 0.75rem;
  margin: 0.25rem 0 0.85rem;
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--muted);
}
.tac-summary strong {
  color: var(--text);
}
.tac-phase-shapes {
  margin: 0.15rem 0 0.85rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--border);
}
.tac-phase-shapes h3 {
  margin: 0 0 0.55rem;
  font-size: var(--fs-base);
  color: var(--text);
}
.tac-phase-shape-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}
.tac-phase-shape-grid label {
  margin-bottom: 0;
}
.tac-phase-shapes > .hint {
  margin: 0.45rem 0 0;
  font-size: var(--fs-xs);
  line-height: 1.4;
}
.tac-shape-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
  margin: 0.1rem 0 0.2rem;
}
.tac-shape-fact {
  min-width: 0;
  display: grid;
  gap: 0.16rem;
  padding: 0.48rem 0.52rem;
  border-left: 3px solid var(--border);
  background: color-mix(in srgb, var(--card) 72%, transparent);
}
.tac-shape-fact[data-shape-phase="in-possession"] { border-left-color: var(--good); }
.tac-shape-fact[data-shape-phase="out-of-possession"] { border-left-color: var(--primary); }
.tac-shape-fact[data-shape-phase="transition"] { border-left-color: var(--warn); }
.tac-shape-fact strong { font-size: var(--fs-xs); }
.tac-shape-fact span {
  color: var(--muted);
  font-size: var(--fs-2xs);
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.tactics-workspace {
  grid-template-columns: minmax(27rem, 1.15fr) minmax(20rem, 0.85fr);
  align-items: start;
}
.tactics-pitch-card,
.tactics-controls-card { min-width: 0; }
.tac-role-panel {
  margin: 0 0 0.9rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg2, rgba(15, 23, 42, 0.35));
  overflow: hidden;
}
.tac-role-panel-head {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.72rem 0.78rem;
  border-bottom: 1px solid var(--border);
}
.tac-role-panel-head .avatar { flex: 0 0 auto; }
.tac-role-panel-player {
  min-width: 0;
  display: grid;
  gap: 0.08rem;
}
.tac-role-panel-player strong,
.tac-role-panel-player span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tac-role-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.42rem;
  padding: 0.68rem;
}
.tac-role-card {
  display: grid;
  gap: 0.12rem;
  min-width: 0;
  padding: 0.52rem 0.58rem;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--card);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.tac-role-card:hover { border-color: var(--primary); }
.tac-role-card.active {
  border-color: var(--primary);
  box-shadow: inset 0 0 0 1px var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, var(--card));
}
.tac-role-card strong { font-size: var(--fs-xs); }
.tac-role-card span { color: var(--muted); font-size: var(--fs-2xs); }
.tac-role-fit { font-variant-numeric: tabular-nums; }
.tac-role-detail {
  display: grid;
  gap: 0.5rem;
  padding: 0 0.72rem 0.72rem;
}
.tac-duty-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.tac-duty-btn {
  flex: 1 1 5rem;
  padding: 0.38rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  color: var(--text);
  cursor: pointer;
}
.tac-duty-btn.active {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, var(--card));
  font-weight: 700;
}
.tac-role-habit-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}
.tac-role-habit-facts span {
  padding: 0.18rem 0.38rem;
  border-radius: 999px;
  background: var(--bg3, rgba(148, 163, 184, 0.12));
  font-size: var(--fs-2xs);
}
.tac-role-habit-facts .conflict { color: var(--bad); }
@media (max-width: 1040px) {
  .tactics-workspace { grid-template-columns: 1fr; }
  .pitch { max-width: 460px; }
}
@media (max-width: 560px) {
  .pitch { max-width: 360px; }
  .player-dot { width: 72px; }
  .tac-shape-grid { grid-template-columns: 1fr; }
  .tac-phase-shape-grid { grid-template-columns: 1fr; }
  .tac-role-list { grid-template-columns: 1fr; }
  .tac-role-badge { max-width: 70px; font-size: var(--fs-4xs); }
}
.match-live-tac {
  flex-wrap: wrap;
  row-gap: 0.35rem;
}
.tac-bench-wrap {
  margin-top: 0.25rem;
}
.tac-bench-title {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: 700;
}
.tac-bench {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  max-height: 220px;
  overflow: auto;
  padding: 0.35rem 0.15rem 0.5rem;
  border-top: 1px solid var(--border);
}
.tac-bench-chip {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 132px;
  max-width: 180px;
  padding: 0.3rem 0.4rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg2, rgba(15, 23, 42, 0.4));
  cursor: grab;
  user-select: none;
  touch-action: none;
}
.tac-bench-chip:active { cursor: grabbing; }
.tac-bench-chip.dragging { opacity: 0.5; }
.tac-bench-chip.selected {
  border-color: #e6b450;
  box-shadow: 0 0 0 1px rgba(230, 180, 80, 0.5);
}
/* 核心球员 */
.tac-core-block {
  margin: 0.75rem 0 0.5rem;
  padding: 0.55rem 0.65rem;
  border-radius: 10px;
  border: 1px solid rgba(251, 191, 36, 0.35);
  background: rgba(251, 191, 36, 0.08);
}
.tac-core-title {
  margin: 0;
  font-size: var(--fs-md);
  color: #fbbf24;
}
.tac-core-display {
  font-size: var(--fs-base);
  line-height: 1.35;
}
.tac-responsibility-block {
  margin: 0.55rem 0 0.5rem;
  padding: 0.55rem 0.65rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg2) 82%, transparent);
}
.tac-responsibilities {
  display: grid;
  gap: 0.42rem;
  margin-top: 0.48rem;
}
.tac-responsibility-row {
  display: grid;
  grid-template-columns: minmax(6rem, 0.42fr) minmax(0, 1fr);
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  font-size: var(--fs-sm);
}
.tac-responsibility-row > span {
  color: var(--muted);
  font-weight: 700;
}
.tac-responsibility-row select {
  min-width: 0;
  width: 100%;
}
@media (max-width: 560px) {
  .tac-responsibility-row {
    grid-template-columns: 1fr;
    gap: 0.18rem;
  }
}
.tac-core-btn {
  appearance: none;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(15, 23, 42, 0.55);
  border-radius: 6px;
  padding: 0.08rem 0.28rem;
  font-size: var(--fs-xs);
  cursor: pointer;
  line-height: 1.2;
  margin-top: 0.15rem;
}
.tac-core-btn:hover { border-color: rgba(251, 191, 36, 0.7); }
.tac-core-btn.is-core {
  border-color: rgba(251, 191, 36, 0.95);
  background: rgba(251, 191, 36, 0.22);
  box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.35);
}
.player-dot.tac-slot.is-core .circle {
  box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.9), 0 0 12px rgba(251, 191, 36, 0.45);
}
.pitch-core-star {
  position: absolute;
  top: -4px;
  right: -4px;
  font-size: var(--fs-3xs);
  line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6));
}
.player-dot.tac-slot .circle { position: relative; }
.player-dot.tac-slot.unavailable .circle {
  opacity: 0.45;
  filter: grayscale(0.45);
  outline: 2px dashed var(--danger);
  outline-offset: 2px;
}

.tac-bench-chip.unavailable {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.4);
}
.tac-chip-meta {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
  flex: 1;
  font-size: var(--fs-xs);
  line-height: 1.2;
}
.tac-chip-meta strong {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--fs-xs);
}
.tac-chip-meta .badge {
  font-size: var(--fs-3xs);
  padding: 0.05rem 0.3rem;
}
.tac-chip-meta small,
.squad-position-detail {
  font-size: var(--fs-3xs);
  line-height: 1.15;
}
.tac-chip-meta em {
  font-style: normal;
  font-weight: 700;
  color: var(--text);
  margin-left: 0.2rem;
}
.tac-chip-warn { color: #e6b450 !important; }
.tac-chip-bad { color: #fb7185 !important; }
.tac-chip-info {
  flex-shrink: 0;
  padding: 0.15rem 0.35rem !important;
  min-width: 0;
  line-height: 1;
}

.filters { display: flex; gap: 0.5rem; margin-bottom: 0.75rem; flex-wrap: wrap; }
.filters select {
  padding: 0.4rem 0.6rem;
}

/* Match */
/* ── Matchday shell (FM-inspired) ── */
#screen-match {
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%, rgba(34, 80, 50, 0.35), transparent 55%),
    linear-gradient(180deg, #0a1018 0%, var(--bg) 45%, var(--bg) 100%);
}
html[data-theme="light"] #screen-match {
  background:
    radial-gradient(ellipse 90% 50% at 50% 0%, rgba(45, 120, 70, 0.18), transparent 55%),
    linear-gradient(180deg, #e8eef5 0%, var(--bg) 40%);
}
#screen-match.active {
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: var(--fmm-shell-pad);
}
/* 比赛外壳的上下内边距。
   🔴 **必须与横屏档的高度公式共用同一个变量**，否则会各算各的：
   2026-09-20 实测（`scripts/mobile-pitch-adaptation-verify.mjs` ②b，800×295）——
   `#screen-match` 实际高 **306px**，而视口只有 **295px** ⇒ 页面永远可滚 11px。
   原因：`.match-layout` 的 `max-height: calc(100dvh - 0.6rem)` **只减了一次** 0.6rem，
   而 `#screen-match.active` 的 padding **上下各占一次**（2 × 0.65rem = 20.8px）
   ⇒ 外壳总高 = 10.4 + 285.4 + 10.4 ≈ 306。
   ⚠ 这个溢出**用「扫所有元素 rect」都量不到**：页面此时已经滚到底
   （`window.scrollY = 11`），所有 `rect.y` 被整体上移 ⇒ 看起来「什么都没超界」。
   只有把 `#screen-match` 自己的 rect（y=-11 h=306）打出来才看得见。 */
:root {
  --fmm-shell-pad: 0.65rem;
}
.match-layout.fm-match {
  width: min(520px, 100%);
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  /* ⚠ 减 **2 × `--fmm-shell-pad`**（外壳上下 padding 各占一次），
     不是「0.6rem」（只减一次）—— 后者会让外壳总高比视口多 ~11px ⇒ 页面可滚。
     2026-09-20 在 1440×1000 与 800×295 两处都实测到这个 11px，见 `:root` 注释。 */
  max-height: calc(100vh - 2 * var(--fmm-shell-pad));
  max-height: calc(100dvh - 2 * var(--fmm-shell-pad));
  /* 赛前简报+讲话变高后必须可滚，否则底栏/下拉被裁切 */
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  margin-inline: auto;
}
/* FMM 竖栈：计分 → 球场 → 事件 → 底栏
   2026-09-05（表现层 A1）：480px 是手机竖栈的宽度，桌面上球场只占屏宽 33%、
   两侧全是黑边。放宽到 640px——窄屏 (<640px) 仍取 100% 不受影响，
   手机布局零变化。 */
.match-layout.fm-match.fmm-match {
  width: min(640px, 100%);
}

/* ── PC 宽屏（≥1060px）：横球场 | 事件流 两栏 ──
   宽屏下改栅格：计分条/底栏通栏，球场居左（高度跟行走、宽度按横向盒比反推），
   事件流/数据居右占满行高。手机布局仍是全宽横场 + 页面滚动。 */
@media (min-width: 1060px) {
  .match-layout.fm-match.fmm-match {
    width: min(1680px, 100%);
    /* 高度必须是确定值：1fr 行与列内 height:100% 的百分比链都从它解析。
       只写 max-height 时 grid 视可用空间为不定，1fr 退化为内容高，
       球场组件按固有尺寸撑出容器（实测 dock 溢出球场区 265px）。

       🔴 减的是 **2 × `--fmm-shell-pad`**，不是「0.6rem」：
       2026-09-20 实测 1440×1000 —— 原来写 `calc(100dvh - 0.6rem)` 时
       `#screen-match` 实际高 **1011px**（视口 1000），页面可滚 11px。
       原因与手机横屏档完全同源：外壳 padding 上下各占一次（0.65rem × 2 = 20.8px），
       公式却只减了一次 ⇒ 差 ≈ 11px。见 `:root` 处 `--fmm-shell-pad` 的注释。 */
    height: calc(100vh - 2 * var(--fmm-shell-pad));
    height: calc(100dvh - 2 * var(--fmm-shell-pad));
    display: grid;
    /* 球场列宽 ≈ 可用行高 × 1.374。横向后看台在上下，盒比是
       105/68 ÷ 0.89 = 1.374 = 93.45/68。1.48 留一点余量：球场按行高反推
       宽度（见下方 .live-kick/.ht-kick 的 .mp-field 规则），列只要不卡住它。 */
    grid-template-columns:
      minmax(360px, calc((100vh - 250px) * 1.48))
      minmax(300px, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    column-gap: 0.55rem;
  }
  .match-layout.fm-match.fmm-match > .fm-scoreboard {
    grid-column: 1 / -1;
    grid-row: 1;
  }
  /* 赛前简报 / 场边战术条 / 赛后战报：互斥出现的通栏层，同占第 2 行 */
  .match-layout.fm-match.fmm-match > .match-pre-brief,
  .match-layout.fm-match.fmm-match > .match-live-tac,
  .match-layout.fm-match.fmm-match > .match-report {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .match-layout.fm-match.fmm-match > .fmm-match-body {
    grid-column: 1;
    grid-row: 3;
  }
  .match-layout.fm-match.fmm-match > .fmm-commentary {
    grid-column: 2;
    grid-row: 3;
    max-height: none;
    min-height: 0;
    flex: 1 1 auto;
  }
  .match-layout.fm-match.fmm-match > .fmm-commentary .match-log {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
  }
  .match-layout.fm-match.fmm-match > .fmm-match-bar {
    grid-column: 1 / -1;
    grid-row: 4;
  }
  /* 赛前简报在屏时也保持同一套 1fr 行：球场列被拉伸成确定高度，
     .mp-wrap 的 height:100% 百分比链才成立。简报自身限高内滚，
     否则高简报会把球场行挤没（手机档仍走外层容器滚动，不受影响）。 */
  .match-layout.fm-match.fmm-match .match-pre-brief {
    max-height: min(56vh, 520px);
    overflow-y: auto;
  }
  .match-layout.fm-match.fmm-match .fm-pitch-col {
    max-height: 100%;
  }
  .match-layout.fm-match.fmm-match .mp-field {
    max-height: 100%;
  }
  /* 赛前：手机档的「宽度定高」在宽屏列上会撑出过宽的横场，
     挤掉底栏。改为高度跟行走、宽度按横向盒比反推，居中放置。
     dock 是 wrap 里的 position:relative 文档流块（非覆盖层），
     field 必须可收缩给它让位，否则 dock 溢出 wrap 底边。 */
  .match-layout.fm-match.fmm-match.pre-kickoff .fm-pitch-col {
    flex: 1 1 auto;
    min-height: 0;
  }
  .match-layout.fm-match.fmm-match.pre-kickoff .mp-wrap {
    height: 100%;
  }
  .match-layout.fm-match.fmm-match.pre-kickoff .mp-field {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    width: auto;
    max-width: 100%;
    margin-inline: auto;
  }
}

/* Broadcast / FMM compact scoreboard */
.fm-scoreboard {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: linear-gradient(180deg, #121a24 0%, #0d131c 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 0.55rem 0.75rem 0.4rem;
  flex-shrink: 0;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  color: #e8eef8;
}
.fmm-sb-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 0.35rem 0.5rem;
  align-items: center;
}
.fmm-stats-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  width: 100%;
  margin-top: 0.35rem;
  padding: 0.28rem 0.5rem;
  border: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(148, 163, 184, 0.95);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.fmm-stats-toggle:hover,
.fmm-stats-toggle[aria-expanded="true"] {
  background: rgba(61, 139, 253, 0.15);
  color: #93c5fd;
}
.fmm-stats-chevron {
  font-size: var(--fs-xs);
  transition: transform 0.2s ease;
  opacity: 0.8;
}
.fmm-stats-toggle[aria-expanded="true"] .fmm-stats-chevron {
  transform: rotate(180deg);
}
.fm-live-stats,
.fmm-live-stats {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  padding-top: 0.4rem;
  margin-top: 0.2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.fmm-live-stats.collapsed,
.fmm-live-stats[hidden] {
  display: none !important;
}
.fm-stat-row {
  display: grid;
  grid-template-columns: 3.4rem 1fr 3.4rem;
  gap: 0.45rem;
  align-items: center;
  font-variant-numeric: tabular-nums;
}
.fm-stat-val {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: rgba(226, 232, 240, 0.9);
  text-align: center;
}
.fm-stat-row .fm-stat-val:first-child { text-align: left; }
.fm-stat-row .fm-stat-val:last-child { text-align: right; }
.fm-stat-mid {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  min-width: 0;
}
.fm-stat-label {
  font-size: var(--fs-4xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(148, 163, 184, 0.85);
  text-align: center;
}
.fm-stat-bar {
  height: 5px;
  border-radius: 99px;
  background: rgba(248, 113, 113, 0.55);
  overflow: hidden;
  position: relative;
}
.fm-stat-bar > i.poss {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #3d8bfd, #60a5fa);
  border-radius: 99px;
  transition: width 0.35s ease;
}
.fm-stat-bar.dual {
  display: flex;
  flex-direction: row;
  background: rgba(15, 23, 42, 0.55);
  gap: 1px;
}
.fm-stat-bar.dual > i {
  display: block;
  height: 100%;
  transition: width 0.35s ease;
  border-radius: 2px;
  min-width: 0;
}
.fm-stat-bar.dual > i.h {
  background: linear-gradient(90deg, #1d4ed8, #3d8bfd);
}
.fm-stat-bar.dual > i.a {
  background: linear-gradient(90deg, #f87171, #dc2626);
}
html[data-theme="light"] .fm-scoreboard {
  background: linear-gradient(180deg, #1a2433 0%, #121a26 100%);
  color: #f1f5f9;
}
.fm-sb-side {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}
.fm-sb-side.away { justify-content: flex-end; text-align: right; }
.fm-sb-side.away .fm-sb-team { align-items: flex-end; }
.fm-sb-kit {
  width: 1.9rem;
  height: 1.9rem;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.fm-sb-team {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
  gap: 0.1rem;
}
.fm-sb-name {
  font-size: var(--fs-sm);
  font-weight: 800;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.fm-sb-short {
  font-size: var(--fs-xs);
  opacity: 0.65;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.fm-sb-score {
  font-size: var(--fs-6xl);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  min-width: 1.2ch;
  text-align: center;
  text-shadow: 0 0 24px rgba(61, 214, 140, 0.25);
  flex-shrink: 0;
}
.fm-sb-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  padding: 0 0.35rem;
  min-width: 0;
}
.fm-sb-comp {
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(226, 232, 240, 0.65);
  max-width: 8rem;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fm-sb-clock {
  font-size: var(--fs-2xl);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #fbbf24;
  letter-spacing: 0.04em;
}
.fm-sb-scoreline.hidden { display: none; }
.fm-sb-live {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--fs-3xs);
  font-weight: 800;
  letter-spacing: 0.14em;
  color: rgba(248, 113, 113, 0.95);
  margin-top: 0.1rem;
}
.fm-sb-live.is-idle { color: rgba(148, 163, 184, 0.75); }
.fm-sb-live.is-idle .fm-live-dot { background: #64748b; box-shadow: none; animation: none; }
.fm-sb-live.is-ft { color: #94a3b8; letter-spacing: 0.12em; }
.fm-sb-live.is-ft .fm-live-dot { display: none; }
.fm-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #f87171;
  box-shadow: 0 0 8px #f87171;
  animation: fm-live-pulse 1.2s ease-in-out infinite;
}
@keyframes fm-live-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* Pitch full-width + bottom event stream (FMM) */
.fm-match-body,
.fmm-match-body {
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: stretch;
  min-height: 0;
  flex: 1 1 auto;
}

/* 一键战报：弱化球场，突出评论与赛后报告 */
.match-layout.match-report-only .fm-pitch-col,
.match-layout.match-report-only .fmm-pitch-wrap,
.match-layout.match-report-only #match-pitch-root {
  max-height: 22vh;
  max-height: 22dvh;
  opacity: 0.55;
  pointer-events: none;
  filter: grayscale(0.15);
}
.match-layout.match-report-only .fm-commentary,
.match-layout.match-report-only .fmm-commentary {
  max-height: min(42vh, 360px);
  flex: 1 1 auto;
}
.match-layout.match-report-only .fmm-match-bar {
  position: static;
  box-shadow: none;
}
.match-layout.match-report-only .fmm-match-bar .match-transport,
.match-layout.match-report-only .fmm-match-bar .match-speed-bar,
.match-layout.match-report-only .fmm-match-bar .match-playback-bar,
.match-layout.match-report-only .fmm-match-bar #btn-sim-fast,
.match-layout.match-report-only .fmm-match-bar #btn-sim-live,
.match-layout.match-report-only .fmm-match-bar #btn-sim-instant {
  display: none;
}
.match-layout.match-report-only .fmm-match-bar .match-actions {
  justify-content: flex-end;
}
/* ── 沉浸模式：点空白球场隐藏全部 chrome（2026-09-22，v284） ──────────────
   用户诉求「下面的功能区能不能不用时隐藏」。实现成**用户主动切换**而不是
   「N 秒无操作自动隐藏」—— v276 刚做完全屏键的**可发现性**
   （控制条 6 个图标键同色同尺寸、用户找不到 ⇒ 主题色高亮 + 开赛 toast），
   自动隐藏会让那个按钮再次找不到。点球场是主动控制，且进入时给一次明确提示。

   为什么用 `display: none` 而不是 `opacity: 0`：只有真的移出布局流，
   高度才会还给球场。控球条在流里、控制条也在流里（横屏 body 的高度公式
   硬编码了 `- 58px`），隐藏后必须把这段高度补回去 —— 见横屏媒体查询里的
   `.mp-immersive .fmm-match-body` 覆盖。

   ⚠ 不隐藏 `.mp-wrap`：进球横幅（`.mp-banner`）与场内字幕胶囊（`setCaption`
   的 `captionEl`）都在 wrap 里，**它们是沉浸模式下唯一还能报事件的东西**
   （底栏 ticker 会跟着 dock 一起藏掉）。 */
.match-layout.mp-immersive > .fmm-scoreboard,
.match-layout.mp-immersive > .fmm-match-bar,
.match-layout.mp-immersive .mp-fmm-dock {
  display: none;
}
.fm-pitch-col {
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  /* 同时受视口和父容器约束：只写 70vh 时，窗口一高就会撑出 .fm-match-body，
     底栏溢出到下面的解说栏上，把折叠按钮盖住点不到。 */
  max-height: min(70vh, 100%);
  max-height: min(70dvh, 100%);
}
.fm-commentary,
.fmm-commentary {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  min-height: 0;
  max-height: min(14vh, 116px);
  background: linear-gradient(180deg, #121820 0%, #0e141c 100%);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
}
.fmm-commentary.is-collapsed {
  max-height: 2.35rem;
}
.fmm-commentary.is-collapsed .match-log {
  display: none;
}
.fm-com-tools {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.fm-com-toggle {
  display: inline-grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  min-width: 1.7rem;
  padding: 0;
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 5px;
  background: rgba(148, 163, 184, 0.12);
  color: inherit;
  cursor: pointer;
  line-height: 1;
}
.fm-com-toggle:hover { background: rgba(148, 163, 184, 0.24); }
html[data-theme="light"] .fm-commentary {
  background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
  border-color: var(--border);
}
.fm-com-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.34rem 0.6rem;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(226, 232, 240, 0.8);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
}
html[data-theme="light"] .fm-com-head {
  color: var(--muted);
  background: rgba(0, 0, 0, 0.03);
  border-bottom-color: var(--border);
}
.fm-com-badge {
  font-size: var(--fs-3xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  background: rgba(61, 139, 253, 0.2);
  color: #7db4ff;
}
.fm-com-badge.live { background: rgba(248, 113, 113, 0.2); color: #fca5a5; }
.fm-com-badge.ht { background: rgba(251, 191, 36, 0.2); color: #fcd34d; }
.fm-com-badge.ft { background: rgba(148, 163, 184, 0.25); color: #cbd5e1; }
/* 浅色主题：上面几条是「浅色文字 + 20% 半透明底」，为深色面板配的。
   叠到白底上底色变成近白，文字仍是浅粉/浅黄，就成了粉字白底、黄字白底。
   这里给浅色主题换成实底 + 深色文字。 */
html[data-theme="light"] .fm-com-badge { background: rgba(37, 99, 235, 0.14); color: #1d4ed8; }
html[data-theme="light"] .fm-com-badge.live { background: rgba(220, 38, 38, 0.14); color: #b91c1c; }
html[data-theme="light"] .fm-com-badge.ht { background: rgba(180, 83, 9, 0.14); color: #92400e; }
html[data-theme="light"] .fm-com-badge.ft { background: rgba(71, 85, 105, 0.16); color: #334155; }
.match-log.fm-com-log {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0.25rem 0.45rem 0.4rem;
  font-size: var(--fs-xs);
  scrollbar-width: thin;
  overscroll-behavior: contain;
}
.fm-com-log .event {
  display: grid;
  grid-template-columns: 2.2rem 1fr;
  gap: 0.35rem;
  padding: 0.28rem 0.3rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  border-left: 2px solid transparent;
  color: rgba(203, 213, 225, 0.88);
  line-height: 1.3;
  animation: fm-com-in 0.22s ease-out;
}
html[data-theme="light"] .fm-com-log .event {
  color: var(--muted);
  border-bottom-color: var(--border);
}
.fm-com-log .event .ev-min {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: var(--fs-xs);
  color: rgba(148, 163, 184, 0.95);
  text-align: right;
  padding-top: 0.05rem;
}
.fm-com-log .event .ev-text { min-width: 0; }
@keyframes fm-com-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.fm-match-bar,
.fmm-match-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.55rem;
  align-items: center;
  justify-content: space-between;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.4rem 0.5rem;
  flex-shrink: 0;
  /* 始终钉在视口底，避免被赛前长内容顶没 */
  position: sticky;
  bottom: 0;
  z-index: 25;
  box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.28);
  padding-bottom: max(0.4rem, env(safe-area-inset-bottom, 0px));
}
html[data-theme="light"] .fm-match-bar,
html[data-theme="light"] .fmm-match-bar {
  box-shadow: 0 -6px 16px rgba(15, 23, 42, 0.1);
}
/* 传输控件（播放键 + 倍速）压成一行 */
.match-transport {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 0 1 auto;
  min-width: 0;
}
.match-playback-bar {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.2rem;
  align-items: center;
}
.match-playback-bar .btn.active {
  background: rgba(61, 139, 253, 0.22);
  border-color: rgba(61, 139, 253, 0.55);
  color: #93c5fd;
}
/* 图标化的播放控制键：正方形、紧凑，但保持 ≥32px 触控区 */
.fmm-match-bar .btn.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  padding: 0;
  font-size: var(--fs-base);
  line-height: 1;
}
.fmm-match-bar .btn.icon-btn .mtb-glyph {
  pointer-events: none;
  font-size: var(--fs-base);
  line-height: 1;
}
.fmm-match-bar .btn.icon-btn.is-muted .mtb-glyph { opacity: 0.5; }
/* ⚠ 上面 `.fmm-match-bar .btn.icon-btn { display: inline-grid }`（特异性 0,3,0）
   会**压掉** UA 样式表里 `[hidden] { display: none }`（0,1,0）。
   所以「隐藏」的按钮照样会显示——必须显式声明。
   这直接关系到全屏按钮：iPhone Safari 不支持全屏，那里必须**真的看不到**它，
   否则就是一个点了没反应的按钮（用户会当成 bug）。 */
.fmm-match-bar .btn[hidden] { display: none !important; }
/* 全屏入口可发现性（v276）：控制条里 6 个图标键同色同尺寸，
   用户找不到全屏按钮。未全屏时用主题色把它从灰键里拎出来；
   进全屏后走 `.match-playback-bar .btn.active`。
   iPhone Safari 不支持时按钮仍是 hidden，本规则因 `:not([hidden])` 不会命中。 */
.fmm-match-bar #btn-match-fullscreen:not([hidden]) {
  color: var(--primary);
  border-color: var(--tab-active-border);
  background: var(--tab-active-bg);
}
.fmm-match-bar #btn-match-motion-capture[data-motion-incidents]:not([data-motion-incidents="0"]) {
  position: relative;
  color: #fbbf24;
  border-color: rgba(251, 191, 36, 0.55);
  background: rgba(120, 53, 15, 0.28);
}
.fmm-match-bar #btn-match-motion-capture[data-motion-incidents]:not([data-motion-incidents="0"])::after {
  content: attr(data-motion-incidents);
  position: absolute;
  top: -0.28rem;
  right: -0.28rem;
  display: grid;
  place-items: center;
  min-width: 1rem;
  height: 1rem;
  padding: 0 0.18rem;
  border-radius: 50%;
  background: #dc2626;
  color: #fff;
  font-size: var(--fs-4xs);
  font-weight: 800;
  line-height: 1;
}

.match-motion-review {
  position: fixed;
  inset: 0;
  z-index: 120;
  overflow: auto;
  padding: max(0.75rem, env(safe-area-inset-top)) max(0.75rem, env(safe-area-inset-right)) max(0.75rem, env(safe-area-inset-bottom)) max(0.75rem, env(safe-area-inset-left));
  background: rgba(5, 9, 14, 0.94);
  color: #e5edf6;
}
.match-motion-review.hidden { display: none; }
.motion-review-surface {
  width: min(1040px, 100%);
  min-height: calc(100vh - 1.5rem);
  min-height: calc(100dvh - 1.5rem);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.motion-review-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.3);
}
.motion-review-head h2 {
  margin: 0;
  font-size: var(--fs-xl);
  letter-spacing: 0;
}
.motion-review-head p {
  margin: 0.2rem 0 0;
  color: #9caec2;
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
}
.motion-review-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 0.3rem;
}
.motion-review-actions .icon-btn {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  padding: 0;
}
.motion-review-summary {
  min-height: 1.8rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.9rem;
  color: #cbd5e1;
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
}
.motion-review-summary strong { color: #fff; }
.motion-review-pitches {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  align-items: start;
}
.motion-review-pitches figure {
  min-width: 0;
  margin: 0;
}
.motion-review-pitches figcaption {
  margin-bottom: 0.35rem;
  color: #d5dfeb;
  font-size: var(--fs-xs);
  font-weight: 750;
  text-align: center;
}
.motion-review-pitch {
  width: min(100%, 350px);
  aspect-ratio: 105 / 68;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid rgba(226, 232, 240, 0.42);
  border-radius: 6px;
  background: #17633a;
}
.motion-review-pitch svg {
  display: block;
  width: 100%;
  height: 100%;
}
.motion-review-timeline {
  display: grid;
  grid-template-columns: 4.8rem minmax(0, 1fr) 4.8rem;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
}
.motion-review-timeline output:last-child { text-align: right; }
.motion-review-timeline input { width: 100%; }
.motion-review-incidents {
  min-height: 2.4rem;
  max-height: 7.5rem;
  overflow: auto;
  padding-top: 0.55rem;
  border-top: 1px solid rgba(148, 163, 184, 0.24);
  color: #b8c6d5;
  font-size: var(--fs-xs);
}
.motion-review-incident {
  appearance: none;
  width: 100%;
  display: grid;
  grid-template-columns: 4.4rem minmax(0, 1fr) auto;
  gap: 0.55rem;
  align-items: baseline;
  padding: 0.24rem 0;
  border: 0;
  border-left: 2px solid transparent;
  background: transparent;
  color: inherit;
  text-align: left;
}
.motion-review-incident:hover,
.motion-review-incident.active {
  border-left-color: #60a5fa;
  background: rgba(96, 165, 250, 0.08);
}
.motion-review-incident strong { color: #fbbf24; }
.motion-review-incident[data-severity="severe"] strong { color: #f87171; }
.motion-review-empty { color: #94a3b8; }

@media (max-width: 620px) {
  .match-motion-review { padding: 0.55rem; }
  .motion-review-surface { min-height: calc(100dvh - 1.1rem); }
  .motion-review-head { align-items: stretch; flex-direction: column; }
  .motion-review-actions { justify-content: flex-end; }
  .motion-review-pitches { grid-template-columns: minmax(0, 1fr); }
  .motion-review-pitch { width: min(100%, 300px); }
  .motion-review-timeline { grid-template-columns: 3.8rem minmax(0, 1fr) 3.8rem; }
  .motion-review-incident { grid-template-columns: 3.8rem minmax(0, 1fr); }
  .motion-review-incident span:last-child { grid-column: 2; }
}
.btn.tiny {
  font-size: var(--fs-2xs);
  padding: 0.12rem 0.4rem;
  line-height: 1.2;
  border-radius: 6px;
}
.goal-replay-btn {
  margin-left: 0.35rem;
  vertical-align: middle;
}
.report-scorer-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.35rem;
  margin: 0.25rem 0;
}
.report-replay-hint {
  margin: 0.45rem 0 0;
  font-size: var(--fs-xs);
}
.fm-com-log .event.event-replayable .ev-goal-link {
  appearance: none;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 600;
  padding: 0;
  margin: 0;
  text-align: left;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: rgba(74, 222, 128, 0.45);
  text-underline-offset: 2px;
}
.fm-com-log .event.event-replayable .ev-goal-link:hover {
  color: #4ade80;
  text-decoration-color: #4ade80;
}
.fmm-match-bar .match-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.3rem;
  justify-content: flex-end;
  flex: 1 1 auto;
  min-width: 0;
}
.fmm-match-bar .match-actions .btn {
  font-size: var(--fs-xs);
  padding: 0.4rem 0.5rem;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 倍速：一体化分段控件，去掉包裹与文字标签后更省高度 */
.fmm-match-bar .match-speed-bar {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0;
  margin: 0;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(148, 163, 184, 0.1);
}
.fmm-match-bar .match-speed-bar .btn {
  border: none;
  background: transparent;
  border-radius: 6px;
  font-size: var(--fs-xs);
  font-weight: 700;
  padding: 0.26rem 0.34rem;
  /* "0.5" 是三个字符，1.7rem 装不下：工具条一挤，首字符「0」就被裁掉，
     画面上看到的是「.5」，像是另一档倍速。给足宽度并禁止收缩。 */
  min-width: 2.1rem;
  flex: 0 0 auto;
  white-space: nowrap;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.fmm-match-bar .match-camera-bar {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(148, 163, 184, 0.1);
}
.fmm-match-bar .match-camera-bar .btn {
  border: none;
  background: transparent;
  border-radius: 6px;
  min-width: 2.8rem;
  padding: 0.26rem 0.42rem;
  font-size: var(--fs-2xs);
  font-weight: 750;
  line-height: 1.1;
  white-space: nowrap;
}
/* 倍速条与镜头条是并排的两个分段控件，选中态必须长一样：
   原来倍速用 var(--primary) 蓝、镜头用 #166534 绿，同一排两种「已选中」颜色，
   看上去像两种不同性质的开关。统一到主题强调色 + 内描边。 */
.fmm-match-bar .match-speed-bar .btn.active,
.fmm-match-bar .match-camera-bar .btn.active {
  color: #f8fafc;
  background: var(--primary);
  border-color: var(--primary);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}

/* 开赛后：模拟模式按钮已无意义，只留「赛后继续」，把底栏压到两行内 */
.match-layout.live-kick .fmm-match-bar #btn-sim-fast,
.match-layout.live-kick .fmm-match-bar #btn-sim-live,
.match-layout.live-kick .fmm-match-bar #btn-sim-instant,
.match-layout.ht-kick .fmm-match-bar #btn-sim-fast,
.match-layout.ht-kick .fmm-match-bar #btn-sim-live,
.match-layout.ht-kick .fmm-match-bar #btn-sim-instant,
.match-layout.ft-kick .fmm-match-bar #btn-sim-fast,
.match-layout.ft-kick .fmm-match-bar #btn-sim-live,
.match-layout.ft-kick .fmm-match-bar #btn-sim-instant {
  display: none;
}
/* 完场后播放控制无效，收掉整个传输区 */
.match-layout.ft-kick .fmm-match-bar .match-transport {
  display: none;
}
.match-layout.ft-kick .fmm-match-bar #btn-match-continue {
  flex: 1 1 auto;
}
/* 赛前「赛后继续」是 disabled 的，但 .match-actions 会换行，它独占一整行灰按钮，
   既点不动又白占高度。禁用期间直接收起，启用时（完场）自动回来。 */
.fmm-match-bar #btn-match-continue:disabled {
  display: none;
}

/* 中场底部抽屉 */
.match-ht-panel.fmm-ht-sheet {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: min(480px, 100%);
  max-height: min(82vh, 680px);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  z-index: 40;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.45);
  /* 多留底空，避免 select 下拉/换人列表贴边被裁 */
  padding-bottom: max(2.5rem, calc(env(safe-area-inset-bottom) + 1.25rem));
  animation: fmm-sheet-up 0.28s ease-out;
}
/* 中场战术/换人 select：保证可见高度与可点区域 */
.match-ht-panel .ht-tactics select,
.match-ht-panel .ht-role-edit select {
  max-width: 100%;
  min-height: 2rem;
}
.match-ht-panel .ht-subs select {
  min-height: 8.5rem;
  max-height: min(28vh, 12rem);
}
.match-ht-panel.fmm-ht-sheet.hidden {
  display: none;
}
.fmm-ht-handle {
  width: 40px;
  height: 4px;
  border-radius: 99px;
  background: rgba(148, 163, 184, 0.45);
  margin: 0 auto 0.55rem;
}
@keyframes fmm-sheet-up {
  from { transform: translateX(-50%) translateY(100%); opacity: 0.6; }
  to { transform: translateX(-50%) translateY(0); opacity: 1; }
}

@media (max-width: 860px) {
  .fmm-commentary { max-height: min(24vh, 180px); }
  .fm-sb-name { font-size: var(--fs-sm); }
  .fm-sb-score { font-size: var(--fs-5xl); }
  .fm-sb-comp { max-width: 7rem; }
}

/* ── FM 风格 2D 球场 ── */
.match-pitch-root {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
}
.mp-wrap {
  background: #0b1220;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.35),
    0 12px 36px rgba(0, 0, 0, 0.4);
  height: 100%;
  display: flex;
  flex-direction: column;
}
/* 球场槽：宽屏 contain 需要一块「宽高都确定」的盒子。
   .mp-field 的子元素全是绝对定位，没有固有尺寸；width/height:auto
   只会算出 0。槽在桌面吃掉 dock 以外的剩余空间，再用容器查询
   按 93.45/68 等比放下球场。手机档槽跟着球场走，不定高。 */
.mp-pitch-slot {
  width: 100%;
  min-width: 0;
  min-height: 0;
}
html[data-theme="light"] .mp-wrap {
  background: #0f1a28;
  border-color: rgba(15, 23, 42, 0.12);
}
.mp-boards {
  display: flex;
  gap: 2rem;
  justify-content: center;
  padding: 0.28rem 0.5rem;
  background: linear-gradient(90deg, #1a0a0a 0%, #3b0f14 40%, #1a0a0a 100%);
  color: rgba(255, 220, 180, 0.55);
  font-size: var(--fs-3xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  overflow: hidden;
  white-space: nowrap;
  flex-shrink: 0;
}
html[data-theme="light"] .mp-boards {
  background: linear-gradient(90deg, #1a0a0a 0%, #3b0f14 40%, #1a0a0a 100%);
  color: rgba(255, 220, 180, 0.7);
}
.mp-field {
  position: relative;
  width: 100%;
  /* 2026-09-20：横向球场。球场盒 = 看台 + 球场，不是球场本身。
     真正画球场的是 .mp-camera，它为了露出上下看台而上下各内缩 5.5%，
     所以「球场盒」必须比「球场」高 1/(1-2×0.055)=1.1236 倍：
         105/68 ÷ 0.89 = 1.5441 / 0.89 = 1.7349 = 93.45 / 68
     四处 aspect-ratio 必须同时改，只改一处会被更高特异性的规则盖掉。 */
  aspect-ratio: 93.45 / 68;
  /* 2026-09-05（表现层 A1 收尾）：这条 max-height 在唯一比赛屏上从未生效——
     index.html 的 match-layout 恒带 fmm-match，而 `.fmm-match .mp-field`（下文）
     以更高特异性设 max-height:none。实测比赛屏球场高由 flex 给（1440×1000 下
     ≈957px），56vh/560px 从未钳住过它；A1 曾把它调到 76vh/760px 属死代码，回退。
     真正起作用的 A1 杠杆是下面 .match-layout 的列宽 480→640。 */
  max-height: min(56vh, 560px);
  margin: 0 auto;
  overflow: hidden;
  background: #0a2e1c;
  cursor: default;
  flex: 1 1 auto;
  /* stadium bowl shadow */
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.45);
}
.mp-field.mp-clickable { cursor: crosshair; }
.mp-field.mp-paused { box-shadow: inset 0 0 0 2px rgba(61, 139, 253, 0.45), inset 0 0 60px rgba(0, 0, 0, 0.45); }
/* UI 暂停：冻结 AI，保留当前站位（区别于 HT/FT 钉阵型） */
.mp-field.mp-ui-paused { box-shadow: inset 0 0 0 2px rgba(250, 204, 21, 0.4), inset 0 0 50px rgba(0, 0, 0, 0.35); }

/* 球场角标：控球 / xG 迷你条 */
.mp-live-strip {
  display: none;
  margin: 0.25rem 0.35rem 0;
  padding: 0.28rem 0.45rem;
  border-radius: 8px;
  background: rgba(8, 12, 20, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.08);
  gap: 0.2rem;
  flex-direction: column;
}
.mp-live-strip.show { display: flex; }
.mp-strip-row {
  display: grid;
  grid-template-columns: 2.2rem 1fr 2.2rem;
  align-items: center;
  gap: 0.3rem;
  font-size: var(--fs-3xs);
  font-weight: 800;
  color: #e2e8f0;
}
.mp-strip-val { text-align: center; font-variant-numeric: tabular-nums; }
.mp-strip-mid { display: flex; flex-direction: column; gap: 0.12rem; min-width: 0; }
.mp-strip-label {
  font-size: var(--fs-4xs);
  letter-spacing: 0.08em;
  color: #94a3b8;
  text-align: center;
}
.mp-strip-bar {
  height: 4px;
  border-radius: 99px;
  background: rgba(248, 113, 113, 0.45);
  overflow: hidden;
}
.mp-strip-bar > i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #3d8bfd, #60a5fa);
  border-radius: 99px;
}
.mp-strip-bar.dual {
  display: flex;
  background: rgba(15, 23, 42, 0.8);
}
.mp-strip-bar.dual > i { flex: 0 0 auto; }
.mp-strip-bar.dual > i.h { background: #3d8bfd; border-radius: 99px 0 0 99px; }
.mp-strip-bar.dual > i.a { background: #f87171; border-radius: 0 99px 99px 0; }

.mp-player.motm .mp-dot {
  box-shadow: 0 0 0 2px #fbbf24, 0 0 14px rgba(251, 191, 36, 0.75);
  transform: scale(1.12);
}
.mp-player.motm .mp-name {
  color: #fde68a;
  font-weight: 800;
}

#btn-match-sfx.is-muted {
  opacity: 0.55;
  text-decoration: line-through;
}

/* 赛后 MOTM 大卡 + 复盘 */
.report-motm-card {
  margin: 0 0 0.75rem;
  padding: 0.65rem 0.8rem;
  border-radius: 10px;
  background: linear-gradient(120deg, rgba(6, 78, 45, 0.35), rgba(30, 58, 138, 0.25));
  border: 1px solid rgba(74, 222, 128, 0.35);
}
.report-motm-label {
  font-size: var(--fs-2xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #86efac;
  margin-bottom: 0.35rem;
}
.report-motm-body {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
.report-motm-pos {
  font-size: var(--fs-xs);
  font-weight: 800;
  color: #94a3b8;
  min-width: 1.6rem;
}
.report-motm-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.report-motm-info strong { font-size: var(--fs-lg); }
/* 浅色主题：卡片底是「半透明深绿」，叠到白底上变成浅绿，
   而标签字色 #86efac 也是浅绿——白底浅绿卡 + 浅绿字，「本场最佳」几个字看不见。
   浅色下换成实底浅绿 + 深绿字。 */
html[data-theme="light"] .report-motm-card {
  background: linear-gradient(120deg, rgba(16, 185, 129, 0.12), rgba(59, 130, 246, 0.1));
  border-color: rgba(5, 150, 105, 0.35);
}
html[data-theme="light"] .report-motm-label { color: #047857; }
html[data-theme="light"] .report-motm-pos { color: #475569; }
.report-motm-rating em {
  font-style: normal;
  font-size: var(--fs-4xl);
  font-weight: 900;
}
.report-narrative {
  margin: 0 0 0.85rem;
  padding: 0.55rem 0.7rem;
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(148, 163, 184, 0.2);
}
.report-narrative strong {
  display: block;
  font-size: var(--fs-xs);
  margin-bottom: 0.35rem;
  color: #cbd5e1;
}
.report-narrative ul {
  margin: 0;
  padding-left: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
}
.report-narrative li {
  font-size: var(--fs-sm);
  line-height: 1.4;
  color: #e2e8f0;
}

/* 队内讲话 */
.team-talk-panel {
  margin: 0.45rem 0 0.55rem;
  padding: 0.5rem 0.6rem 0.55rem;
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(96, 165, 250, 0.28);
}
.prematch-brief + .team-talk-panel,
.match-pre-brief .team-talk-panel {
  margin-top: 0.55rem;
}
.team-talk-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 0.6rem;
  margin-bottom: 0.4rem;
  font-size: var(--fs-base);
}
.team-talk-hint {
  font-size: var(--fs-xs);
}
.team-talk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: 0.4rem;
}
.team-talk-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.45rem 0.5rem 0.5rem;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: rgba(2, 6, 23, 0.45);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.team-talk-card:hover {
  border-color: rgba(96, 165, 250, 0.55);
}
.team-talk-card.selected {
  border-color: rgba(59, 130, 246, 0.9);
  background: rgba(37, 99, 235, 0.18);
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.35);
}
.team-talk-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.team-talk-label {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: #e2e8f0;
}
.team-talk-desc {
  font-size: var(--fs-2xs);
  line-height: 1.3;
  color: #94a3b8;
}
.team-talk-rec {
  position: absolute;
  top: 0.25rem;
  right: 0.3rem;
  font-size: var(--fs-4xs);
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 0.05rem 0.28rem;
  border-radius: 99px;
  background: rgba(251, 191, 36, 0.2);
  color: #fbbf24;
  border: 1px solid rgba(251, 191, 36, 0.4);
}
/* 讲话选项不被外层裁切：卡片完整换行可见 */
.match-pre-brief .team-talk-grid {
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  padding-bottom: 0.15rem;
}
.match-pre-brief .team-talk-card {
  min-height: 3.2rem;
}
html[data-theme="light"] .team-talk-panel {
  background: rgba(241, 245, 249, 0.95);
  border-color: rgba(37, 99, 235, 0.25);
}
html[data-theme="light"] .team-talk-card {
  background: #fff;
  border-color: rgba(148, 163, 184, 0.45);
}
html[data-theme="light"] .team-talk-card.selected {
  background: rgba(219, 234, 254, 0.85);
}
html[data-theme="light"] .team-talk-label {
  color: #0f172a;
}
html[data-theme="light"] .team-talk-desc {
  color: #64748b;
}

/* 中场角色复盘 / 编辑 */
.ht-role-review {
  margin: 0 0 0.65rem;
  padding: 0.5rem 0.65rem;
  border-radius: 8px;
  background: rgba(76, 29, 149, 0.15);
  border: 1px solid rgba(167, 139, 250, 0.3);
}
.ht-role-review.hidden { display: none; }
.ht-role-review-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.25rem 0.5rem;
  margin-bottom: 0.35rem;
  font-size: var(--fs-sm);
}
.ht-role-contrib {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-bottom: 0.3rem;
}
.ht-role-chip {
  font-size: var(--fs-xs);
  padding: 0.12rem 0.4rem;
  border-radius: 99px;
  background: rgba(52, 211, 153, 0.12);
  border: 1px solid rgba(52, 211, 153, 0.3);
  color: #a7f3d0;
}
.ht-role-chip em {
  font-style: normal;
  opacity: 0.8;
  margin: 0 0.15rem;
}
.ht-role-tips, .ht-role-tip {
  font-size: var(--fs-xs);
  color: #cbd5e1;
  line-height: 1.4;
}
.ht-roles {
  margin: 0 0 0.7rem;
  padding: 0.5rem 0.6rem;
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.5);
  border: 1px solid rgba(148, 163, 184, 0.22);
  max-height: 14rem;
  overflow-y: auto;
}
.ht-role-edit-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.25rem 0.5rem;
  margin-bottom: 0.4rem;
  font-size: var(--fs-sm);
}
.ht-role-edit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 0.35rem;
}
.ht-role-edit {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  gap: 0.1rem 0.35rem;
  padding: 0.3rem 0.4rem;
  border-radius: 6px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  background: rgba(2, 6, 23, 0.35);
  font-size: var(--fs-xs);
}
.ht-role-edit-pos {
  font-weight: 800;
  color: #93c5fd;
  grid-row: 1;
}
.ht-role-edit-name {
  grid-column: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #e2e8f0;
}
.ht-role-edit select {
  grid-column: 1 / -1;
  font-size: var(--fs-xs);
  padding: 0.15rem 0.25rem;
}
.report-role-review {
  margin-top: 0.85rem;
  padding: 0.55rem 0.65rem;
  border-radius: 10px;
  border: 1px solid rgba(167, 139, 250, 0.3);
  background: rgba(76, 29, 149, 0.1);
  font-size: var(--fs-base);
}
html[data-theme="light"] .ht-role-review,
html[data-theme="light"] .report-role-review {
  background: rgba(237, 233, 254, 0.85);
}
html[data-theme="light"] .ht-role-chip {
  color: #065f46;
  background: rgba(209, 250, 229, 0.9);
}
html[data-theme="light"] .ht-role-tips, html[data-theme="light"] .ht-role-tip {
  color: #475569;
}

/* 中场提示条 */
.ht-tips {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0 0 0.65rem;
  padding: 0.5rem 0.65rem;
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(148, 163, 184, 0.22);
}
.ht-tips.hidden { display: none; }
.ht-tip {
  font-size: var(--fs-xs);
  line-height: 1.35;
  color: #e2e8f0;
}
.ht-tip strong {
  margin-right: 0.35rem;
  color: #93c5fd;
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
}
.ht-tip.warn strong { color: #fdba74; }
.ht-tip.card strong { color: #fde047; }
.ht-tip em {
  font-style: normal;
  font-weight: 800;
  color: #fbbf24;
}
/* 浅色主题：上面整块是按深色面板配的（半透明深底 + 近白正文 + 亮黄强调）。
   叠到白底上底色变浅，#e2e8f0 正文和 #fde047 黄标题就成了白底白字 / 白底黄字。 */
html[data-theme="light"] .ht-tips {
  background: rgba(15, 23, 42, 0.04);
  border-color: var(--border);
}
html[data-theme="light"] .ht-tip { color: var(--text); }
html[data-theme="light"] .ht-tip strong { color: #1d4ed8; }
html[data-theme="light"] .ht-tip.warn strong { color: #b45309; }
html[data-theme="light"] .ht-tip.card strong { color: #a16207; }
html[data-theme="light"] .ht-tip em { color: #b45309; }

/* 中场首发体能条 */
.ht-fitness {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  margin: 0 0 0.7rem;
  padding: 0.5rem 0.6rem;
  max-height: 11.5rem;
  overflow-y: auto;
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.5);
  border: 1px solid rgba(148, 163, 184, 0.2);
}
.ht-fitness.hidden { display: none; }
.ht-fit-title {
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #93c5fd;
  margin-bottom: 0.15rem;
}
.ht-fit-row {
  display: grid;
  grid-template-columns: 2.2rem 1fr 4.5rem 2.4rem;
  gap: 0.35rem;
  align-items: center;
  font-size: var(--fs-xs);
  color: #e2e8f0;
}
.ht-fit-pos {
  color: #94a3b8;
  font-size: var(--fs-2xs);
  font-weight: 700;
}
.ht-fit-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ht-fit-bar {
  height: 7px;
  border-radius: 99px;
  background: rgba(30, 41, 59, 0.9);
  overflow: hidden;
}
.ht-fit-bar > i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #22c55e, #3b82f6);
  transition: width 0.25s ease;
}
.ht-fit-row.mid .ht-fit-bar > i {
  background: linear-gradient(90deg, #eab308, #f59e0b);
}
.ht-fit-row.low .ht-fit-bar > i {
  background: linear-gradient(90deg, #f97316, #ef4444);
}
.ht-fit-row.critical .ht-fit-bar > i {
  background: linear-gradient(90deg, #ef4444, #b91c1c);
}
.ht-fit-val {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: var(--fs-xs);
  color: #cbd5e1;
}
.ht-fit-row.low .ht-fit-val,
.ht-fit-row.critical .ht-fit-val {
  color: #fbbf24;
}

/* 赛程「战报」按钮 */
.fix-action {
  white-space: nowrap;
}
.fix-action .fix-report-btn {
  padding: 0.15rem 0.45rem;
  font-size: var(--fs-xs);
}
#fixtures-table tr.played .fix-score {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* 战报回顾角标 */
.report-review-badge {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.1rem 0.45rem;
  font-size: var(--fs-2xs);
  font-weight: 700;
  vertical-align: middle;
  border-radius: 99px;
  background: rgba(59, 130, 246, 0.2);
  color: #93c5fd;
  border: 1px solid rgba(59, 130, 246, 0.35);
}

/* 下半场场边战术条 */
.match-live-tac {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.65rem;
  padding: 0.4rem 0.65rem;
  margin: 0 0.35rem 0.25rem;
  border-radius: 10px;
  background: rgba(8, 12, 20, 0.88);
  border: 1px solid rgba(61, 139, 253, 0.35);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
}
.match-live-tac.hidden { display: none; }
.match-live-tac-label {
  font-size: var(--fs-2xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #93c5fd;
}
.match-live-tac-sel {
  font-size: var(--fs-xs);
  padding: 0.2rem 0.35rem;
  border-radius: 6px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(15, 23, 42, 0.9);
  color: #e2e8f0;
  max-width: 7rem;
}
.match-live-tac-range {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: #cbd5e1;
}
.match-live-tac-range input[type="range"] {
  width: 72px;
  accent-color: #3d8bfd;
}
.match-live-tac-range em {
  font-style: normal;
  min-width: 0.9rem;
  font-variant-numeric: tabular-nums;
  color: #f8fafc;
}

/* 镜头层：平移+缩放跟随球；上下留白给 FMM 看台 */
.mp-camera {
  position: absolute;
  left: 0;
  right: 0;
  top: 5.5%;
  bottom: 5.5%;
  transform-origin: 50% 50%;
  will-change: transform;
  transition: none;
  z-index: 1;
  overflow: hidden;
}
.mp-grass {
  position: absolute;
  inset: -2%;
  /* FMM：横条棋盘格草坪（对照 rec 录屏） */
  background: repeating-linear-gradient(
    90deg,
    #2d7a47 0px,
    #2d7a47 22px,
    #266938 22px,
    #266938 44px
  );
}
.mp-grass::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 90% 80% at 50% 50%, transparent 48%, rgba(0, 0, 0, 0.22) 100%);
  pointer-events: none;
}
.mp-grass::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.1) 0%,
    transparent 8%,
    transparent 92%,
    rgba(0, 0, 0, 0.1) 100%
  );
  pointer-events: none;
}
/* FMM 上下看台（横向球场） */
.mp-stands {
  position: absolute;
  left: 0;
  right: 0;
  height: 5.5%;
  /* 2026-09-20：看台要盖在 .mp-camera（z-index:1）之上，当固定画框用。
     看台高度正好等于相机的上下内缩量，所以相机在 1.0 倍时不会压到球场，
     只有放大/平移超出时才被看台切掉——这正是转播画框该有的行为。 */
  z-index: 2;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      90deg,
      #c5c9ce 0px,
      #c5c9ce 3px,
      #aeb4bb 3px,
      #aeb4bb 7px,
      #9aa1a9 7px,
      #9aa1a9 10px
    );
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.25);
}
.mp-stands.top {
  top: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
.mp-stands.bot {
  bottom: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
}
.mp-field.mp-fmm2d {
  background: #178a3f;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    inset 0 0 40px rgba(0, 0, 0, 0.28);
}
.fm-sb-clock-row {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
/* FMM 底栏 dock：解说 ↔ 控球 */
.mp-fmm-dock {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 0.2rem 0.45rem;
  margin: 0.2rem 0 0;
  min-height: 2.1rem;
  padding: 0.28rem 0.45rem;
  border-radius: 0 0 10px 10px;
  background: #f4f5f7;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-top: none;
  color: #0f172a;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.mp-bench-strip {
  grid-column: 1 / -1;
  grid-row: 2;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.22rem;
  min-height: 1.35rem;
  padding: 0.12rem 0.18rem 0;
  border-top: 1px solid rgba(15, 23, 42, 0.1);
}
.mp-bench-strip.empty { display: none; }
.mp-bench-side {
  width: 1rem;
  color: #64748b;
  font-size: var(--fs-3xs);
  font-weight: 900;
  text-align: center;
}
.mp-bench-side.home { color: #166534; }
.mp-bench-side.away { color: #b91c1c; }
.mp-bench-list {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.2rem;
  min-width: 0;
  /* 替补席不再截断到 7 人，人数随阵容浮动（可能十几个），
     必须能横向滚动，否则 overflow:hidden 会把多出来的人整块切掉。 */
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.mp-bench-list::-webkit-scrollbar { display: none; }
.mp-bench-list > * { flex: 0 0 auto; }
.mp-bench-list.away { justify-content: flex-end; }
.mp-bench-divider {
  width: 1px;
  height: 1rem;
  background: rgba(100, 116, 139, 0.35);
}
.mp-fmm-ticker {
  grid-column: 1;
  grid-row: 1;
  font-size: var(--fs-xs);
  font-weight: 700;
  text-align: center;
  color: #1e293b;
  min-height: 1.15em;
  /* 长事件句会把这一格撑成三四行，向下压到替补席条上。
     限制两行并省略，超长文案不再挤走别的东西。 */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}
.mp-fmm-ticker:not(.show) { display: none; }
.mp-fmm-ticker.show {
  opacity: 1;
}
.mp-fmm-ticker.goal {
  color: #0f172a;
  font-weight: 900;
}
.mp-fmm-ticker.shot,
.mp-fmm-ticker.chance {
  color: #0f172a;
}
.mp-fmm-ticker.dispute,
.mp-fmm-ticker.warn {
  background: #c62828;
  color: #fff;
  margin: -0.28rem -0.45rem;
  padding: 0.38rem 0.5rem;
  border-radius: 0 0 10px 10px;
  font-weight: 800;
}
.mp-fmm-ticker.replay {
  color: #5b21b6;
  font-weight: 900;
}
.mp-fmm-ticker.save {
  color: #1d4ed8;
}
.mp-fmm-poss {
  grid-column: 1;
  grid-row: 1;
  display: none;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
}
.mp-fmm-poss.show {
  display: flex;
}
.mp-fmm-poss-val {
  font-size: var(--fs-xs);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  min-width: 2.4rem;
  text-align: center;
  color: #334155;
}
.mp-fmm-poss-bar {
  /* 底色 = 客队份额，填充 = 主队份额；两者都由 JS 按球衣色覆盖
     （_applyPossessionBarKit）。这里只留中性兜底，不再写死红/灰，
     否则没有球衣数据时会重现「主队红衣却显示浅灰」的对调观感。 */
  flex: 1;
  height: 10px;
  border-radius: 2px;
  background: #94a3b8;
  overflow: hidden;
}
.mp-fmm-poss-bar > i {
  display: block;
  height: 100%;
  background: #e8eaed;
  border-right: 2px solid rgba(15, 23, 42, 0.55);
  transition: width 0.35s ease;
}
.mp-fmm-dock-meta {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}
.mp-fmm-speed {
  font-size: var(--fs-2xs);
  font-weight: 800;
  color: #64748b;
  letter-spacing: 0.02em;
}
.mp-fmm-skip {
  appearance: none;
  border: none;
  border-radius: 6px;
  padding: 0.28rem 0.55rem;
  font-size: var(--fs-xs);
  font-weight: 800;
  color: #fff;
  background: #7c3aed;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(91, 33, 182, 0.35);
}
.mp-fmm-skip.hidden {
  display: none;
}
.mp-fmm-skip:hover {
  background: #6d28d9;
}
/* 重播时顶角徽章更 FMM */
.mp-field.mp-fmm-replay .mp-replay-badge,
.mp-replay-badge:not(.hidden) {
  top: 8px;
  left: 8px;
  transform: none;
  border-radius: 4px;
  letter-spacing: 0.06em;
  font-size: var(--fs-2xs);
  padding: 0.22rem 0.5rem;
  background: rgba(15, 23, 42, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.2);
  animation: none;
}
.fm-sb-live.is-replay {
  color: #c4b5fd !important;
  letter-spacing: 0.1em;
}
.fm-sb-live.is-replay .fm-live-dot {
  background: #a78bfa;
  box-shadow: 0 0 8px #a78bfa;
}
.fmm-replay-badge {
  display: inline-flex;
  align-items: center;
  margin-right: 0.35rem;
  padding: 0.12rem 0.4rem;
  border-radius: 4px;
  font-size: var(--fs-3xs);
  font-weight: 900;
  letter-spacing: 0.08em;
  color: #f5f3ff;
  background: rgba(91, 33, 182, 0.95);
}
.fmm-replay-badge.hidden {
  display: none;
}
.fmm-skip-hdr {
  position: absolute;
  top: 0.45rem;
  right: 0.45rem;
  z-index: 5;
  appearance: none;
  border: none;
  border-radius: 8px;
  padding: 0.35rem 0.7rem;
  font-size: var(--fs-xs);
  font-weight: 800;
  color: #fff;
  background: #7c3aed;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.fmm-skip-hdr.hidden {
  display: none;
}
html[data-theme="dark"] .mp-fmm-dock {
  background: #e8eaed;
}
.fmm-match .mp-fmm-dock {
  max-width: 100%;
}
/* FMM 对齐：关掉重复的 POS/xG 条、图例、干扰角标（对照 rec 录屏更干净） */
.fmm-match .mp-live-strip,
.fmm-match .mp-legend,
.fmm-match .mp-tip {
  display: none !important;
}
.fmm-match .mp-rec-badge:not(.hidden) {
  opacity: 0.55;
  font-size: var(--fs-4xs);
  top: auto;
  bottom: 6px;
  left: 6px;
}
/* Ball, carrier and live movement carry the hierarchy; remove duplicate direction washes. */
.fmm-match .mp-poss-half,
.fmm-match .mp-attack-arrow {
  display: none !important;
}
/* 角球状态：角旗微亮 + 禁区呼吸，让「角球」一眼可认 */
.mp-field.mp-corner-active::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    radial-gradient(circle 18% at 4% 3.5%, rgba(253, 224, 71, 0.45), transparent 70%),
    radial-gradient(circle 18% at 96% 3.5%, rgba(253, 224, 71, 0.45), transparent 70%),
    radial-gradient(circle 18% at 4% 96.5%, rgba(253, 224, 71, 0.45), transparent 70%),
    radial-gradient(circle 18% at 96% 96.5%, rgba(253, 224, 71, 0.45), transparent 70%);
  animation: mp-corner-pulse 1.2s ease-in-out infinite alternate;
}
@keyframes mp-corner-pulse {
  from { opacity: 0.55; }
  to { opacity: 1; }
}

/* 球门网口：贴在左右端线外侧（与 SVG 门架一致），不伸进场内。
   ⚠ 高度必须对上引擎的 `SIM.GOAL_X0 = 44` / `GOAL_X1 = 56`——画面 top 轴就是引擎 x。
   `box-sizing: border-box` 让 1.5px 边框落在宽度内侧。 */
.mp-goal-mouth {
  position: absolute;
  top: 44%;
  height: 12%;
  width: 1.7%;
  z-index: 2;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.28) 0 1px,
      transparent 1px 3.5px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.18) 0 1px,
      transparent 1px 2.5px
    );
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
}
.mp-goal-mouth.left {
  left: 0;
  border-radius: 0 2px 2px 0;
  transform-origin: 0% 50%;
  border-left: none;
}
.mp-goal-mouth.right {
  right: 0;
  border-radius: 2px 0 0 2px;
  transform-origin: 100% 50%;
  border-right: none;
}
/* 进球：球门网微颤（克制可读，避免整框荧光绿爆炸） */
.mp-goal-mouth.mp-goal-mouth-hit {
  animation: mp-mouth-bulge 0.55s cubic-bezier(0.18, 0.92, 0.28, 1) forwards;
  border-color: rgba(255, 255, 255, 0.75);
  box-shadow:
    inset 0 0 6px rgba(255, 255, 255, 0.25),
    0 0 10px rgba(255, 255, 255, 0.2);
  z-index: 6;
}
@keyframes mp-mouth-bulge {
  0% { transform: scale(1, 1); filter: brightness(1); }
  20% { transform: scale(1.35, 1.12); filter: brightness(1.2); }
  55% { transform: scale(1.08, 0.97); }
  100% { transform: scale(1, 1); filter: brightness(1); }
}
/* 入网轻闪已改为独立元素 .mp-goal-flash-fx（见下方）。
   原来这里是 .mp-field.mp-goal-flash::after，与 .mp-field.mp-replay-slow::after
   （"慢镜"角标）抢同一个伪元素；进球时两个 class 同时挂着，后写的慢镜规则胜出，
   结果闪光在进球那一刻恰好不显示。 */
@keyframes mp-goal-flash {
  0% { opacity: 0; }
  30% { opacity: 1; }
  100% { opacity: 0; }
}
/* 半场方向标签 */
.mp-end-label {
  position: absolute;
  /* 横向后球门在左右中线高度。队名贴在端线上沿空白角，避开门将。 */
  top: 8%;
  z-index: 5;
  font-size: var(--fs-4xs);
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.38);
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.mp-end-label.mp-end-away { right: 4px; left: auto; }
.mp-end-label.mp-end-home { left: 4px; }
/* 换边后主队守右、客队守左：标签跟着端走，不改队名文字。 */
.mp-field.mp-ends-swapped .mp-end-label.mp-end-away {
  right: auto;
  left: 4px;
}
.mp-field.mp-ends-swapped .mp-end-label.mp-end-home {
  left: auto;
  right: 4px;
}
/* 控球半场高亮 */
.mp-poss-half {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  pointer-events: none;
  transition: left 0.45s ease, width 0.45s ease, background 0.45s ease, opacity 0.35s ease;
  opacity: 0.55;
}
.mp-poss-half.side-home {
  left: 0;
  width: 50%;
  background: linear-gradient(90deg, rgba(96, 165, 250, 0.14) 0%, transparent 88%);
}
.mp-poss-half.side-away {
  right: 0;
  left: auto;
  width: 50%;
  background: linear-gradient(270deg, rgba(248, 113, 113, 0.14) 0%, transparent 88%);
}
/* 换边后 class 仍跟控球队（颜色），位置翻到对面半场。FMM 屏把这两处藏掉了。 */
.mp-field.mp-ends-swapped .mp-poss-half.side-home {
  left: auto;
  right: 0;
  background: linear-gradient(270deg, rgba(96, 165, 250, 0.14) 0%, transparent 88%);
}
.mp-field.mp-ends-swapped .mp-poss-half.side-away {
  right: auto;
  left: 0;
  background: linear-gradient(90deg, rgba(248, 113, 113, 0.14) 0%, transparent 88%);
}
/* 进攻方向箭头 */
.mp-attack-arrow {
  position: absolute;
  top: 50%;
  z-index: 4;
  width: 0;
  height: 0;
  margin-top: -10px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, left 0.4s ease, right 0.4s ease;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}
.mp-attack-arrow.show { opacity: 0.85; }
.mp-attack-arrow.side-home {
  left: 18%;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 16px solid rgba(147, 197, 253, 0.85);
}
.mp-attack-arrow.side-away {
  right: 18%;
  left: auto;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 16px solid rgba(252, 165, 165, 0.85);
}
.mp-field.mp-ends-swapped .mp-attack-arrow.side-home {
  left: auto;
  right: 18%;
  border-left: none;
  border-right: 16px solid rgba(147, 197, 253, 0.85);
}
.mp-field.mp-ends-swapped .mp-attack-arrow.side-away {
  right: auto;
  left: 18%;
  border-right: none;
  border-left: 16px solid rgba(252, 165, 165, 0.85);
}
/* 阵型色块 */
.mp-form-zones {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.mp-zone {
  position: absolute;
  border-radius: 40%;
  opacity: 0.22;
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: opacity 0.3s ease;
}
.mp-zone.home.pos-def { background: rgba(59, 130, 246, 0.35); }
.mp-zone.home.pos-mid { background: rgba(96, 165, 250, 0.28); }
.mp-zone.home.pos-att { background: rgba(147, 197, 253, 0.22); }
.mp-zone.away.pos-def { background: rgba(239, 68, 68, 0.32); }
.mp-zone.away.pos-mid { background: rgba(248, 113, 113, 0.26); }
.mp-zone.away.pos-att { background: rgba(252, 165, 165, 0.2); }
.mp-field.mp-pre .mp-zone,
.mp-field.mp-paused .mp-zone { opacity: 0.32; }
/* 替补席：底栏横向排布，避免把号码误读成场上球员。
   空的一侧保留占位：整条是五列网格，display:none 会让后面的元素前移一列，
   把分隔线挤进替补席的位置。两边都空时由 .mp-bench-strip.empty 整条隐藏。 */
.mp-bench-chip {
  display: flex;
  justify-content: center;
  cursor: pointer;
  opacity: 0.88;
}
.mp-bench-chip:hover { opacity: 1; transform: scale(1.08); }
.mp-bench-dot {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.75);
  font-size: var(--fs-4xs);
  font-weight: 900;
  display: grid;
  place-items: center;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
/* 回放徽章 + 慢镜 */
.mp-replay-badge {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 14;
  padding: 0.28rem 0.7rem;
  border-radius: 6px;
  font-size: var(--fs-xs);
  font-weight: 900;
  letter-spacing: 0.12em;
  color: #f5f3ff;
  background: linear-gradient(90deg, rgba(91, 33, 182, 0.92), rgba(30, 64, 175, 0.92));
  border: 1px solid rgba(196, 181, 253, 0.55);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  pointer-events: none;
  animation: mp-replay-pulse 1.2s ease-in-out infinite;
}
.mp-replay-badge.hidden { display: none; }
@keyframes mp-replay-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.82; }
}
.mp-field.mp-replay-slow {
  /* 克制：细描边 + 极轻对比，不再整场紫滤镜 */
  outline: 1px solid rgba(226, 232, 240, 0.28);
  outline-offset: -1px;
  filter: contrast(1.02);
}
.mp-field.mp-replay-slow::after {
  content: "慢镜";
  position: absolute;
  /* 这几条 auto 是历史包袱：以前入网闪光也画在 .mp-field::after 上并带 inset:0，
     两者共存时小徽章会被拉成全场遮罩。闪光现在是独立元素，这里保留 auto 只为
     防止将来又有别的规则给 ::after 加 inset。 */
  left: auto;
  bottom: auto;
  width: auto;
  height: auto;
  top: 8px;
  right: 8px;
  z-index: 13;
  font-size: var(--fs-4xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(241, 245, 249, 0.92);
  background: rgba(15, 23, 42, 0.72);
  padding: 0.1rem 0.34rem;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.28);
  pointer-events: none;
  opacity: 0.9;
}
/* 导演 box 镜头时略收视野边缘（配合 camera scale） */
.mp-field.mp-sim-drive.mp-replay-slow .mp-camera {
  transition: transform 0.35s cubic-bezier(0.22, 0.8, 0.28, 1);
}
/* 高光段之间的剪辑转场（`_playSegmentCut`）。
   背景：相邻两个高光段之间可以隔十几分钟比赛时间，段入场那一帧 26 个实体
   一起位移（实测中位 44.9 m、球 83.4 m）。这不是「过渡不够顺」，而是
   「换场景没有做出换场景的样子」——观众只看到整队凭空换位。
   缓动在这里是错的解法：0.7 s 平移 45 m = 64 m/s 的扫掠，比硬切更难看。
   所以改成显式的剪辑提示，把这 0.26 s 讲成「换了条镜头」，
   和 `playHighlightPlanBridge` 的「⏩ 跳过平淡」是同一套语汇。
   只在 `.mp-camera` 之上、`.mp-banner` 之下，不抢事件横幅的层级。 */
/* ⚠ `.mp-field::before` 已被 `.mp-field.mp-corner-active::before`（角旗黄光，z-index 3）
   占用。两条规则特异性相同（0,2,1），所以**同一个伪元素只能有一条生效**——
   本规则在文件里更靠后，所以剪辑期间它整体覆盖角旗黄光（包括 z-index/background 等
   所有属性，CSS 不会把两条 ::before 合并）。这是想要的：剪辑本来就该盖住场景。
   移除 `.mp-seg-cut` 后角旗规则立刻恢复，因为那是「哪条匹配」的问题，不是层叠问题。
   若将来要给角旗光加持续动画并希望它在剪辑期间仍可见，必须改用独立元素。 */
.mp-field.mp-seg-cut::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: #0a0e14;
  animation: mp-seg-cut-fade 260ms ease-out both;
}
@keyframes mp-seg-cut-fade {
  /* 跳变发生在 0% 那一帧。峰值必须接近全遮，否则观众仍能看见整队位移
     （v276 实测 0.72 ⇒ 跳变帧仍有 28% 可见，用户报的就是这个「瞬移」）。
     先全遮住一小段再淡出：否则一跳完立刻变透，后半程仍会漏。 */
  0% { opacity: 1; }
  35% { opacity: 1; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  /* 用户要的是少动，不是少遮。animation:none 会停在初始 opacity；
     写成 0 等于完全没有遮罩，「一跳 76 m」原样裸露。
     改成静态全遮罩，由 `_playSegmentCut` 的定时器（SEGMENT_CUT_MS+40）到时摘 class。 */
  .mp-field.mp-seg-cut::before { animation: none; opacity: 1; }
}
.mp-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}
/* 热区叠层 */
.mp-heat {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.95;
}
.mp-heat-cell {
  position: absolute;
  transition: background 0.45s ease;
  mix-blend-mode: screen;
}
/* 压迫线 / 防线 */
.mp-press {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  overflow: visible;
}
.mp-press-line {
  fill: none;
  stroke-width: 0.45;
  stroke-dasharray: 2.5 1.8;
  opacity: 0.35;
}
.mp-press-line.home { stroke: rgba(96, 165, 250, 0.75); }
.mp-press-line.away { stroke: rgba(248, 113, 113, 0.75); }
.mp-press-line.active {
  opacity: 0.75;
  stroke-width: 0.55;
  filter: drop-shadow(0 0 2px currentColor);
}
.mp-def-line {
  fill: none;
  stroke-width: 0.35;
  stroke-dasharray: 1.2 1.2;
  opacity: 0.4;
}
.mp-def-line.home { stroke: rgba(147, 197, 253, 0.55); }
.mp-def-line.away { stroke: rgba(252, 165, 165, 0.55); }
/* 传球网络 */
.mp-network {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  overflow: visible;
}
.mp-network.hidden { display: none; }
.mp-net-edge {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: opacity 0.25s ease;
}
.mp-net-edge.home {
  stroke: rgba(96, 165, 250, 0.95);
  filter: drop-shadow(0 0 1.5px rgba(59, 130, 246, 0.45));
}
.mp-net-edge.away {
  stroke: rgba(251, 146, 146, 0.95);
  filter: drop-shadow(0 0 1.5px rgba(239, 68, 68, 0.4));
}
.mp-net-node {
  fill: rgba(255, 255, 255, 0.85);
  stroke-width: 0.35;
  pointer-events: none;
}
.mp-net-node.home {
  fill: rgba(147, 197, 253, 0.95);
  stroke: rgba(37, 99, 235, 0.9);
}
.mp-net-node.away {
  fill: rgba(252, 165, 165, 0.95);
  stroke: rgba(220, 38, 38, 0.85);
}
.mp-net-controls {
  display: inline-flex;
  gap: 0.25rem;
  align-items: center;
  flex: 1;
  justify-content: center;
}
.mp-net-btn {
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(203, 213, 225, 0.65);
  font-size: var(--fs-3xs);
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  cursor: pointer;
  line-height: 1.2;
  min-width: 1.6rem;
}
.mp-net-btn:hover {
  color: #e2e8f0;
  border-color: rgba(255, 255, 255, 0.22);
}
.mp-net-btn.active {
  color: #f1f5f9;
  background: rgba(61, 139, 253, 0.28);
  border-color: rgba(61, 139, 253, 0.45);
}
.mp-net-btn#mp-net-away.active {
  background: rgba(248, 113, 113, 0.25);
  border-color: rgba(248, 113, 113, 0.45);
}
/* 轨迹层 */
.mp-trails {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  overflow: visible;
}
.mp-trail {
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  opacity: 0.95;
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.35));
}
.mp-trail-pass {
  stroke: rgba(255, 255, 255, 0.55);
  stroke-width: 0.55;
}
.mp-trail-shot {
  stroke: rgba(251, 191, 36, 0.95);
  stroke-width: 0.85;
}
.mp-trail-goal {
  stroke: rgba(61, 214, 140, 1);
  stroke-width: 1.1;
  filter: drop-shadow(0 0 3px rgba(61, 214, 140, 0.8));
}
.mp-trail-save {
  stroke: rgba(56, 189, 248, 0.9);
  stroke-width: 0.8;
}
.mp-trail-wood {
  stroke: rgba(167, 139, 250, 0.95);
  stroke-width: 0.9;
}
.mp-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
}
/* Canvas 负责绘制；DOM 只留点击热区，视觉必须完全隐藏，否则会「重影」 */
.mp-field.mp-canvas-mode .mp-actors .mp-player {
  opacity: 1; /* 容器本身透明子元素 */
  background: transparent !important;
  box-shadow: none !important;
}
.mp-field.mp-canvas-mode .mp-actors .mp-player .mp-dot,
.mp-field.mp-canvas-mode .mp-actors .mp-player .mp-name,
.mp-field.mp-canvas-mode .mp-actors .mp-player .mp-shadow {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
.mp-field.mp-canvas-mode .mp-actors .mp-ball {
  opacity: 0 !important;
  visibility: hidden !important;
}
.mp-field.mp-canvas-mode .mp-form-zones {
  opacity: 0 !important;
  visibility: hidden !important;
}
/* 直播 sim 时清掉可能残留的轨迹层 */
.mp-field.mp-sim-drive .mp-trails,
.mp-field.mp-sim-drive .mp-network {
  display: none !important;
}
.mp-rec-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 14;
  padding: 0.2rem 0.45rem;
  border-radius: 4px;
  font-size: var(--fs-3xs);
  font-weight: 900;
  letter-spacing: 0.08em;
  color: #fecaca;
  background: rgba(127, 29, 29, 0.85);
  border: 1px solid rgba(248, 113, 113, 0.5);
  pointer-events: none;
  animation: mp-replay-pulse 1s ease-in-out infinite;
}

/* ── 隐藏/唤出 常驻开关（2026-09-22 v288） ────────────────────────────────
   v284 的沉浸模式本身没问题，问题是它**只能**靠「点空白球场」触发 ——
   屏幕上没有任何可见入口，用户看不见就等于不存在（截图里用户根本没用到它）。
   这个胶囊把那个开关变成**看得见、随时可用**的东西。

   为什么是「右下角 + 常驻」：
   · 实测四角命中地图（`scripts/_pitch-top-occlusion-probe.mjs`）：横屏手机上
     球场盒的左上/右上角被比分浮层压住（最上层是 `fm-sb-name`/`fm-sb-team`），
     在那里放按钮会被浮层吃掉点击；下半部分才真的点得到。
   · 左下角已被 `.mp-rec-badge` 占用。
   · 常驻（两个状态都在）而不是只在沉浸模式出现：沉浸时若按钮消失，
     用户又回到「找不到怎么退出」的老问题（v276 全屏键踩过的坑）。

   z-index 15：高于球员层（4）与卡片（8），低于比分浮层（30）——
   但它放在**右下角**、与比分条（顶部）不重叠，所以不会被盖。
   注意它是 `.mp-field` 的子元素，而沉浸模式只隐藏 `.mp-wrap` **外**的
   chrome（比分条/控制条/控球条）⇒ 沉浸时它**自动保留**，这正是我们要的。
   ⚠ 不要把它放进 `.mp-wrap` 之外：那样会被沉浸模式的隐藏规则一起带走。 */
.mp-chrome-toggle {
  position: absolute;
  right: 6px;
  bottom: 6px;
  z-index: 15;
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  min-width: 0;
  padding: 0;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(8, 12, 20, 0.5);
  color: rgba(255, 255, 255, 0.92);
  font-size: var(--fs-sm);
  line-height: 1;
  cursor: pointer;
  opacity: 0.72;
  backdrop-filter: blur(4px);
  transition: opacity 0.15s ease, background 0.15s ease;
}
.mp-chrome-toggle:hover,
.mp-chrome-toggle:focus-visible {
  opacity: 1;
  background: rgba(8, 12, 20, 0.78);
}
.mp-chrome-toggle[aria-pressed="true"] {
  opacity: 1;
  border-color: rgba(61, 139, 253, 0.75);
  background: rgba(30, 58, 138, 0.72);
  color: #dbeafe;
}
.mp-chrome-glyph {
  pointer-events: none;
  transform: translateY(-0.5px);
}
/* 竖持提示时球场本体被藏掉（`.mp-pitch-slot{display:none}`），
   按钮是 `.mp-field` 的子元素 ⇒ 跟着一起藏，无需额外规则。 */
/* 桌面：球场盒很大、chrome 占比不高，按钮照样常驻（一致性优先）。 */
html[data-theme="light"] .mp-chrome-toggle {
  background: rgba(255, 255, 255, 0.62);
  border-color: rgba(15, 23, 42, 0.25);
  color: #0f172a;
}
.mp-rec-badge.hidden { display: none; }
.match-rec-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.75rem;
  padding-top: 0.55rem;
  border-top: 1px solid var(--border);
}
.mp-actors {
  position: absolute;
  inset: 0;
  z-index: 4;
  /* 🔴 点击穿透（2026-09-22）：`.mp-actors` 铺满整个球场，但它是**绘制容器** ——
     canvas 模式下里面的 `.mp-player`/`.mp-dot`/`.mp-name` 全被
     `opacity:0 !important` 藏掉，只剩热区还需要点。
     不加这条，**空白球场的点击全被它吃掉**：`matchview.js` 里
     `e.target === fieldEl || closest(".mp-grass") || closest(".mp-lines")`
     那个「点空白关闭卡片」处理器**从来没有触发过**（守卫永远匹配不上），
     沉浸模式也点不动。只给热区开回点击。 */
  pointer-events: none;
}
.mp-actors .mp-player {
  pointer-events: auto;
}
.mp-fx {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}
.mp-banner {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  z-index: 6;
  padding: 0.45rem 1rem;
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.82);
  color: #fff;
  font-weight: 700;
  font-size: var(--fs-md);
  letter-spacing: 0.04em;
  pointer-events: none;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
  white-space: nowrap;
  max-width: 90%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mp-banner.hidden { display: none; }
.mp-banner.goal {
  background: rgba(22, 101, 52, 0.9);
  font-size: var(--fs-2xl);
  animation: mp-pop 0.35s ease-out;
}
.mp-banner.warn { background: rgba(120, 53, 15, 0.9); }
.mp-banner.info { background: rgba(30, 58, 138, 0.88); }
.mp-banner.replay {
  background: linear-gradient(90deg, rgba(88, 28, 135, 0.92), rgba(30, 58, 138, 0.92));
  letter-spacing: 0.08em;
  font-size: var(--fs-md);
}
/* FMM：场内事件字幕条 */
.mp-caption {
  position: absolute;
  left: 50%;
  bottom: 14%;
  transform: translateX(-50%);
  z-index: 11;
  max-width: min(92%, 320px);
  padding: 0.28rem 0.65rem;
  border-radius: 6px;
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-align: center;
  color: #f8fafc;
  background: rgba(8, 12, 20, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  pointer-events: none;
  animation: mp-caption-in 0.2s ease-out;
}
.mp-caption.hidden { display: none; }
.mp-caption.goal {
  background: rgba(6, 78, 45, 0.88);
  border-color: rgba(74, 222, 128, 0.45);
  color: #bbf7d0;
}
.mp-caption.chance,
.mp-caption.wood {
  background: rgba(30, 58, 138, 0.88);
  border-color: rgba(147, 197, 253, 0.4);
}
.mp-caption.save {
  background: rgba(12, 74, 110, 0.88);
  border-color: rgba(56, 189, 248, 0.45);
}
.mp-caption.warn {
  background: rgba(120, 53, 15, 0.9);
  border-color: rgba(251, 191, 36, 0.45);
}
.mp-caption.replay {
  background: rgba(76, 29, 149, 0.88);
  border-color: rgba(196, 181, 253, 0.5);
  letter-spacing: 0.1em;
}
.mp-caption.info {
  background: rgba(15, 23, 42, 0.85);
}
@keyframes mp-caption-in {
  from { opacity: 0; transform: translateX(-50%) translateY(6px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
/* 关键事件闪卡：进球/牌/伤/扑救 */
.mp-flash-card {
  position: absolute;
  left: 50%;
  top: 12%;
  transform: translateX(-50%);
  z-index: 12;
  min-width: 148px;
  max-width: min(88%, 260px);
  pointer-events: none;
  animation: mp-flash-in 0.22s ease-out;
}
.mp-flash-card.hidden { display: none; }
.mp-flash-inner {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.7rem 0.45rem 0.45rem;
  border-radius: 10px;
  background: rgba(8, 12, 20, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
}
.mp-flash-badge {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: var(--fs-base);
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.75);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.mp-flash-text {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  min-width: 0;
}
.mp-flash-text strong {
  font-size: var(--fs-sm);
  font-weight: 900;
  letter-spacing: 0.04em;
  color: #f8fafc;
}
.mp-flash-text em {
  font-style: normal;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: #e2e8f0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mp-flash-text span {
  font-size: var(--fs-3xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #94a3b8;
}
.mp-flash-card.goal .mp-flash-inner {
  border-color: rgba(74, 222, 128, 0.5);
  background: linear-gradient(120deg, rgba(6, 78, 45, 0.92), rgba(8, 12, 20, 0.9));
}
.mp-flash-card.chance .mp-flash-inner,
.mp-flash-card.save .mp-flash-inner {
  border-color: rgba(147, 197, 253, 0.45);
}
.mp-flash-card.warn .mp-flash-inner {
  border-color: rgba(251, 191, 36, 0.5);
  background: linear-gradient(120deg, rgba(120, 53, 15, 0.9), rgba(8, 12, 20, 0.9));
}
@keyframes mp-flash-in {
  from { opacity: 0; transform: translateX(-50%) translateY(-8px) scale(0.96); }
  to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
/* 关键戏：压暗非焦点球员 */
.mp-field.mp-focus-mode .mp-player.mp-dim {
  opacity: 0.38;
  filter: saturate(0.65);
}
.mp-field.mp-focus-mode .mp-player.mp-focus {
  z-index: 7;
  opacity: 1;
  filter: none;
}
.mp-field.mp-focus-mode .mp-player.mp-focus .mp-dot {
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.9),
    0 0 12px 3px rgba(251, 191, 36, 0.45);
}
.mp-field.mp-replay {
  outline: 2px solid rgba(196, 181, 253, 0.55);
  outline-offset: -2px;
  box-shadow: inset 0 0 40px rgba(139, 92, 246, 0.18);
}
/* 这里原有一条 .mp-field.mp-replay::after{content:"REPLAY"} 已删除，两个原因：
   1) 与 .mp-replay-badge 元素重复——那个元素由 JS 控制，写的是「重播 / 角球」，
      同一时刻画面右上角是英文 REPLAY、正上方是中文重播，等于同一状态两块角标；
   2) 它和下面的 .mp-field.mp-replay-slow::after{content:"慢镜"} 抢同一个 ::after，
      特异度相同而它在后面，导致回放+慢镜同时生效时「慢镜」永远画不出来。
   现在 ::after 只归慢镜用，回放状态只保留本规则的描边。 */
@keyframes mp-pop {
  from { transform: translate(-50%, -50%) scale(0.7); opacity: 0; }
  to { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

.mp-player {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 3;
  transition: none;
  will-change: left, top;
  cursor: pointer;
  touch-action: manipulation;
}
.mp-player.clickable:hover .mp-dot,
.mp-player.clickable:focus-visible .mp-dot {
  transform: scale(1.12);
  box-shadow: 0 0 0 2px #fff, 0 0 10px 2px rgba(255, 255, 255, 0.35);
}
.mp-player.selected .mp-dot {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(61, 139, 253, 0.85), 0 0 16px 4px rgba(61, 139, 253, 0.45);
  transform: scale(1.15);
}
.mp-player.pause-glow .mp-dot {
  animation: mp-idle-pulse 1.6s ease-in-out infinite;
}
@keyframes mp-idle-pulse {
  0%, 100% { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35); }
  50% { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5), 0 0 10px rgba(61, 139, 253, 0.35); }
}
.mp-player.highlight { z-index: 5; }
.mp-player.highlight .mp-dot {
  box-shadow: 0 0 0 2px #fff, 0 0 12px 3px rgba(61, 139, 253, 0.85);
}

/* ────────────────────────────────────────────────────────────────
   进场动画（用户 2026-09-19 提出「加一个进场的动画吧」）

   ⚠️ 这里**不放任何入场视觉规则**。这是一次重要返工的记录，别删这段注释。

   第一版把入场做成了 DOM/CSS 动画：给 `.mp-field` 挂 `.mp-intro`，
   用 `transform: translateY(var(--intro-dy))` 把 `.mp-player` 从场边
   推进来。单测 17/17 全绿、缓存审计全过、`node --check` 通过 ——
   **但浏览器实测里画面上什么都没发生**。

   真因（由 `scripts/intro-animation-browser-check.mjs` 逮到）：
   本项目的球员**不是用 DOM 画的**。`_initCanvas()` 无条件给球场加
   `mp-canvas-mode`，该模式下 CSS 把 `.mp-actors .mp-player` 及其
   `mp-dot`/`mp-name`/`mp-shadow` 全部 `opacity: 0 !important` +
   `visibility: hidden !important`（见下方 `.mp-canvas-mode` 规则）——
   DOM 球员只是**点击热区**，玩家看到的 22 个人是 `<canvas>` 画出来的。
   所以对 DOM 做 transform 只会移动「看不见的热区」。

   更糟的是优先级：`.mp-canvas-mode .mp-actors .mp-player`（0,3,1）高于
   `.mp-intro .mp-player`（0,2,1），我写的 `opacity: 0.35` 直接被
   `opacity: 1` 压回去，连「半透明着跑进来」都做不到。
   实测读数：起始位移 fy 恒为 -13px（那只是热区自身的
   `translate(-50%,-50%)`），opacity 恒为 1，且 `ms=0`（动画根本没跑）
   时读数一模一样 —— 三条一起证明了「CSS 完全没生效」。

   结论：入场位移必须做在 **canvas 绘制层** —— 见
   `js/matchview.js` 的 `_introOffsetX()`，它在 `_drawCanvas` 给每名
   球员的屏幕 x 坐标叠加一个按错峰衰减的偏移。CSS 这里不再承担视觉。
   ──────────────────────────────────────────────────────────────── */
.mp-player.scorer .mp-dot {
  box-shadow: 0 0 0 2px #fff, 0 0 14px 4px rgba(61, 214, 140, 0.95);
  animation: mp-score-pulse 0.5s ease-in-out 3;
}
.mp-player.has-ball .mp-dot {
  box-shadow:
    0 0 0 2px #fde68a,
    0 0 10px 3px rgba(251, 191, 36, 0.75),
    0 1px 3px rgba(0, 0, 0, 0.45);
  transform: scale(1.12);
  z-index: 4;
}
/* FSM 微提示：压迫 / 接应 */
.mp-player[data-fsm="press"] .mp-dot {
  box-shadow:
    0 0 0 1.5px rgba(248, 113, 113, 0.75),
    0 2px 4px rgba(0, 0, 0, 0.4);
}
.mp-player[data-fsm="support"] .mp-dot {
  box-shadow:
    0 0 0 1.5px rgba(96, 165, 250, 0.65),
    0 2px 4px rgba(0, 0, 0, 0.4);
}
.mp-player[data-fsm="home"] .mp-dot {
  /* 默认队服色环，保持干净 */
}
.mp-player.has-ball .mp-name {
  color: #fde68a;
}
.mp-player.sent-off { opacity: 0.25; pointer-events: none; }
.mp-player.injured .mp-dot { outline: 2px solid #fb923c; }
.mp-dot { transition: transform 0.12s ease, box-shadow 0.12s ease; }

/* 中场提示 */
.mp-tip {
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  z-index: 7;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.75);
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--fs-xs);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
  white-space: nowrap;
}
.mp-tip.show { opacity: 1; }

/* 场内球员小卡片 */
.mp-card {
  position: absolute;
  right: 8px;
  top: 8px;
  z-index: 8;
  width: min(220px, 72%);
  max-height: calc(100% - 16px);
  overflow-y: auto;
  background: rgba(15, 23, 42, 0.92);
  border: 1px solid rgba(61, 139, 253, 0.35);
  border-radius: 10px;
  padding: 0.65rem 0.7rem 0.55rem;
  color: #e8eefc;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
  font-size: var(--fs-sm);
  animation: mp-card-in 0.2s ease-out;
}
html[data-theme="light"] .mp-card {
  background: rgba(255, 255, 255, 0.95);
  color: var(--text);
  border-color: rgba(37, 99, 235, 0.3);
}
.mp-card.hidden { display: none; }
@keyframes mp-card-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
.mp-card-close {
  position: absolute;
  top: 4px;
  right: 6px;
  border: none;
  background: transparent;
  color: inherit;
  font-size: var(--fs-2xl);
  line-height: 1;
  opacity: 0.7;
  padding: 0.15rem 0.35rem;
}
.mp-card-close:hover { opacity: 1; }
.mp-card-head {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  padding-right: 1.2rem;
  margin-bottom: 0.4rem;
}
.mp-card-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.7);
  flex-shrink: 0;
  margin-top: 3px;
}
.mp-card-sub {
  font-size: var(--fs-xs);
  opacity: 0.75;
  margin-top: 0.1rem;
}
.mp-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.55rem;
  font-size: var(--fs-xs);
  margin-bottom: 0.45rem;
  opacity: 0.9;
}
.mp-card-meta .bad { color: #fb923c; font-weight: 600; }
.mp-card-row {
  display: grid;
  grid-template-columns: 2.2rem 1fr 1.2rem;
  gap: 0.3rem;
  align-items: center;
  margin-bottom: 0.22rem;
  font-size: var(--fs-xs);
}
.mp-card-row em { font-style: normal; text-align: right; font-variant-numeric: tabular-nums; }
.mp-card-bar {
  height: 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}
html[data-theme="light"] .mp-card-bar { background: rgba(0, 0, 0, 0.08); }
.mp-card-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #3d8bfd, #3dd68c);
  border-radius: 3px;
}
.mp-card-season {
  margin-top: 0.4rem;
  font-size: var(--fs-2xs);
  line-height: 1.35;
}
.mp-card-more {
  width: 100%;
  margin-top: 0.45rem;
}
.mp-leg-hint {
  font-size: var(--fs-xs);
  color: var(--muted);
  text-align: center;
  flex: 1;
}
@keyframes mp-score-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.18); }
}
/* 脚下阴影（FMM 立体感） */
.mp-shadow {
  position: absolute;
  left: 50%;
  top: 58%;
  width: 18px;
  height: 6px;
  margin-left: -9px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.28);
  filter: blur(1.5px);
  pointer-events: none;
  z-index: 0;
}
.mp-dot {
  position: relative;
  z-index: 1;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.95);
  display: grid;
  place-items: center;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(0, 0, 0, 0.25);
  margin: 0 auto;
}
.mp-player.home .mp-dot {
  border-color: #fff;
  box-shadow:
    0 2px 5px rgba(0, 0, 0, 0.5),
    0 0 0 1.5px rgba(15, 23, 42, 0.35);
}
.mp-player.away .mp-dot {
  border-color: rgba(15, 23, 42, 0.75);
  box-shadow:
    0 2px 5px rgba(0, 0, 0, 0.45),
    0 0 0 1.5px rgba(255, 255, 255, 0.45);
}
.mp-num {
  font-size: var(--fs-xs);
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  /* 浅色球衣号码可读：双描边感 */
  text-shadow:
    0 0 1px rgba(15, 23, 42, 0.55),
    0 1px 0 rgba(15, 23, 42, 0.35),
    0 -1px 0 rgba(255, 255, 255, 0.25);
}
/* FMM：默认只显示号码；持球/焦点/赛前中场显示姓名 */
.mp-name {
  display: none;
  margin-top: 2px;
  font-size: var(--fs-4xs);
  font-weight: 800;
  color: #f8fafc;
  text-shadow:
    0 0 4px rgba(0, 0, 0, 1),
    0 1px 2px rgba(0, 0, 0, 0.95);
  max-width: 48px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  margin-inline: auto;
  letter-spacing: 0.02em;
  line-height: 1.05;
}
.mp-player.show-name .mp-name,
.mp-player.has-ball .mp-name,
.mp-player.selected .mp-name,
.mp-player.highlight .mp-name,
.mp-player.mp-focus .mp-name,
.mp-player.scorer .mp-name {
  display: block;
}
html[data-theme="light"] .mp-name {
  color: #fff;
}

/* 比赛官员（主裁 + 两名边裁）：纯表现层，不参与判定。
   刻意比球员小（16px vs 26px）且 z-index 2（球员 3、球 6），
   这样他们读起来是场上工作人员，不会被误当成第 12 个球员。
   pointer-events: none —— 绝不能抢球员的点击（球员点选是主交互）。 */
.mp-official {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  pointer-events: none;
  will-change: left, top;
  /* 传统裁判黑衫；绿草皮上对比度足够，且与两队球衣色不撞 */
  background: radial-gradient(circle at 32% 28%, #4b5563 0 30%, #1f2937 32% 100%);
  border: 1.5px solid rgba(255, 255, 255, 0.75);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  /* 圆点里的身份字母（主裁 R / 边裁 A）：直径差 16px vs 18px 在跟镜里读不出来，
     字母才是唯一可靠的区分。文字层不能吃掉 pointer-events: none（上面已声明，
     子内容继承），也不参与选中。 */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-3xs);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.95);
  user-select: none;
  /* 黑衫上的白字本身够亮，描边只用来压住草皮纹理透出的高频噪点 */
  text-shadow: 0 0 2px rgba(15, 23, 42, 0.85);
}
/* 主裁略大,便于与边裁区分 */
.mp-official.referee {
  width: 18px;
  height: 18px;
  font-size: var(--fs-3xs);
}
/* 边裁：袖标提示他们沿边线跑动 */
.mp-official.assistant {
  border-color: rgba(250, 204, 21, 0.9);
}
html[data-theme="light"] .mp-official {
  border-color: rgba(255, 255, 255, 0.9);
}

.mp-ball {
  position: absolute;
  width: 13px;
  height: 13px;
  margin: -6.5px 0 0 -6.5px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 28%, #fff 0 22%, #f8fafc 24% 48%, #e2e8f0 50% 100%);
  border: 1.5px solid rgba(15, 23, 42, 0.65);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.35),
    0 2px 5px rgba(0, 0, 0, 0.55),
    0 0 8px rgba(255, 255, 255, 0.15);
  z-index: 6;
  will-change: left, top, transform;
  --ball-z: 0;
  transform: translateY(calc(var(--ball-z) * -1.1px)) scale(calc(1 + var(--ball-z) * 0.045));
  transition: transform 0.08s linear;
}
.mp-ball::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 110%;
  width: 10px;
  height: 4px;
  margin-left: -5px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.25);
  filter: blur(1px);
  pointer-events: none;
  /* 高空时阴影更远更淡 */
  transform: translateY(calc(var(--ball-z) * 0.9px)) scale(calc(1 + var(--ball-z) * 0.08));
  opacity: calc(0.9 - var(--ball-z) * 0.04);
}
.mp-ball.mp-ball-air {
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.35));
}
.mp-burst {
  position: absolute;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  pointer-events: none;
  animation: mp-burst 0.65s ease-out forwards;
}
.mp-burst.goal {
  background: rgba(61, 214, 140, 0.85);
  box-shadow: 0 0 20px 8px rgba(61, 214, 140, 0.5);
}
/* 进球入网：小网微颤（克制，贴合圆点球员比例） */
.mp-goal-net {
  position: absolute;
  width: 34px;
  height: 20px;
  margin: -6px 0 0 -17px;
  border-radius: 3px;
  pointer-events: none;
  z-index: 11;
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0 2px,
      rgba(255, 255, 255, 0.38) 2px 3px
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0 2px,
      rgba(255, 255, 255, 0.28) 2px 3px
    ),
    rgba(15, 23, 42, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.22);
  animation: mp-net-shake 0.7s cubic-bezier(0.2, 0.85, 0.3, 1) forwards;
}
.mp-goal-net.left { transform-origin: 0% 50%; }
.mp-goal-net.right { transform-origin: 100% 50%; }
@keyframes mp-net-shake {
  0% { transform: scale(0.7, 0.45); opacity: 0; }
  18% { transform: scale(1.12, 1.18); opacity: 0.95; }
  42% { transform: scale(0.96, 1.04); opacity: 0.85; }
  70% { transform: scale(1.04, 1.06); opacity: 0.55; }
  100% { transform: scale(1, 1); opacity: 0; }
}
/* 入网轻闪：独立元素，只提示球门区域。
   亮度/时长保持原来的克制值（0.12 / 0.26s）——加亮到 0.3 试过，太抢眼。
   之所以从 .mp-field.mp-goal-flash::after 改成独立元素，是因为那个伪元素被
   .mp-field.mp-replay-slow::after（"慢镜"角标）整条盖掉，进球时闪光根本不显示。 */
.mp-goal-flash-fx {
  position: absolute;
  inset: 0;
  z-index: 12;
  pointer-events: none;
  animation: mp-goal-flash 0.26s ease-out forwards;
}
.mp-goal-flash-fx.left {
  background: radial-gradient(
    ellipse 16% 28% at 6% 50%,
    rgba(255, 255, 255, 0.12) 0%,
    rgba(255, 255, 255, 0.04) 36%,
    transparent 62%
  );
}
.mp-goal-flash-fx.right {
  background: radial-gradient(
    ellipse 16% 28% at 94% 50%,
    rgba(255, 255, 255, 0.12) 0%,
    rgba(255, 255, 255, 0.04) 36%,
    transparent 62%
  );
}
.mp-goal-ring {
  position: absolute;
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 10;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.25);
  animation: mp-goal-ring 0.55s ease-out forwards;
}
@keyframes mp-goal-ring {
  0% { transform: scale(0.4); opacity: 0.8; }
  100% { transform: scale(1.8); opacity: 0; }
}
.mp-ball.mp-ball-goal {
  width: 11px;
  height: 11px;
  margin: -5.5px 0 0 -5.5px;
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.55),
    0 0 10px 2px rgba(255, 255, 255, 0.28);
  z-index: 12;
}
.mp-burst.save {
  background: rgba(56, 189, 248, 0.8);
  box-shadow: 0 0 16px 6px rgba(56, 189, 248, 0.45);
}
.mp-burst.wood {
  background: rgba(167, 139, 250, 0.85);
  box-shadow: 0 0 16px 6px rgba(167, 139, 250, 0.45);
}
@keyframes mp-burst {
  from { transform: scale(0.4); opacity: 1; }
  to { transform: scale(3.5); opacity: 0; }
}
.mp-legend {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.4rem 0.75rem 0.45rem;
  font-size: var(--fs-xs);
  color: rgba(203, 213, 225, 0.75);
  background: linear-gradient(180deg, #0f1620 0%, #0a1018 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}
.mp-leg {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
  color: #e2e8f0;
  font-size: var(--fs-xs);
}
.mp-leg i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.75);
  display: inline-block;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
.mp-leg-hint {
  font-size: var(--fs-2xs) !important;
  color: rgba(148, 163, 184, 0.75) !important;
  text-align: center;
  flex: 1;
  letter-spacing: 0.02em;
}

/* FMM 2D 球场布局：横屏全场、号码优先、少杂讯 */
.fmm-match .mp-boards {
  display: flex;
  padding: 0.18rem 0.4rem;
  font-size: var(--fs-4xs);
  letter-spacing: 0.2em;
  opacity: 0.75;
}
.fmm-match .mp-field {
  max-height: none;
  /* 93.45/68 的来历见 .mp-field 上方注释：球场盒要含上下 5.5% 看台 */
  aspect-ratio: 93.45 / 68;
  flex: 1 1 auto;
  min-height: 240px;
}
.fmm-match .mp-dot {
  width: 24px;
  height: 24px;
}
.fmm-match .mp-num { font-size: var(--fs-2xs); }
.fmm-match .mp-name {
  font-size: var(--fs-4xs);
  max-width: 44px;
}
.fmm-match .mp-ball {
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
}
.fmm-match .mp-heat {
  opacity: 0.28;
}
.fmm-match .mp-heat.fmm-heat-off {
  display: none !important;
}
.fmm-match .mp-network.fmm-net-off {
  display: none !important;
}
.fmm-match .mp-press {
  opacity: 0.4;
}
.fmm-match .mp-legend {
  padding: 0.28rem 0.5rem 0.32rem;
  font-size: var(--fs-xs);
  background: rgba(8, 12, 20, 0.55);
}
.fmm-match .mp-net-controls {
  gap: 0.2rem;
}
.fmm-match .mp-net-btn {
  font-size: var(--fs-3xs);
  padding: 0.12rem 0.32rem;
}
/* JS already uses time-based interpolation; a second CSS transition adds camera lag. */
.fmm-match .mp-camera {
  transition: none;
}

@media (max-width: 520px) {
  .match-layout.fm-match.fmm-match { width: 100%; border-radius: 0; }
  .fmm-match .mp-field { min-height: 210px; }
  .fmm-match .mp-dot { width: 22px; height: 22px; }
  .fmm-match .mp-num { font-size: var(--fs-2xs); }
  /* 号码/姓名是手机档唯一必须读的场上文字。原来 0.64rem=10.24px、
     姓名 0.46rem=7.36px，在 360px 宽的手机上已经是「看得出有字、读不出字」。 */
  .fmm-match .mp-name { font-size: var(--fs-4xs); max-width: 44px; }
  .fmm-match .mp-ball { width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; }
  .fmm-commentary { max-height: min(22vh, 150px); }
  .fmm-commentary.is-collapsed { max-height: 2.25rem; }
  .fm-sb-name { font-size: var(--fs-xs); }
  .fm-sb-score { font-size: var(--fs-4xl); }
  .fm-sb-comp { max-width: 6rem; font-size: var(--fs-2xs); }
  .fmm-match-bar { gap: 0.35rem 0.4rem; }
  .fmm-match-bar .match-actions .btn {
    font-size: var(--fs-2xs);
    padding: 0.38rem 0.4rem;
  }
  .fmm-match-bar .match-speed-bar .btn {
    font-size: var(--fs-xs);
    padding: 0.24rem 0.26rem;
    min-width: 1.9rem;
  }
  .match-transport { flex-wrap: wrap; }
  .fmm-match-bar .match-camera-bar {
    flex: 1 0 100%;
    justify-content: stretch;
    order: 3;
  }
  .fmm-match-bar .match-camera-bar .btn {
    flex: 1 1 0;
  }
  .fmm-match-bar .btn.icon-btn {
    width: 1.9rem;
    height: 1.9rem;
    min-width: 1.9rem;
  }
  .match-transport { gap: 0.35rem; }
}

@media (prefers-reduced-motion: reduce) {
  .mp-player.scorer .mp-dot,
  .mp-player.pause-glow .mp-dot,
  .mp-burst,
  .mp-banner.goal,
  .mp-card { animation: none; }
  .mp-camera { transform: none !important; }
}
.fm-com-log .event.goal {
  color: #4ade80;
  font-weight: 600;
  border-left-color: #4ade80;
  background: rgba(74, 222, 128, 0.12);
  border-radius: 6px;
  margin: 0.1rem 0;
  padding: 0.35rem 0.4rem;
}
.fm-com-log .event.card { color: #fbbf24; border-left-color: #fbbf24; }
.fm-com-log .event.red {
  color: #f87171;
  font-weight: 600;
  border-left-color: #f87171;
  background: rgba(248, 113, 113, 0.12);
  border-radius: 6px;
  margin: 0.1rem 0;
  padding: 0.35rem 0.4rem;
}
.fm-com-log .event.injury { color: #fb923c; border-left-color: #fb923c; }
.fm-com-log .event.penalty,
.fm-com-log .event.pen_miss {
  color: #c4b5fd;
  font-weight: 600;
  border-left-color: #a78bfa;
}
.fm-com-log .event.save { color: #38bdf8; border-left-color: #38bdf8; }
.fm-com-log .event.woodwork { color: #a78bfa; border-left-color: #a78bfa; }
.fm-com-log .event.sub,
.fm-com-log .event.tactics { color: #94a3b8; border-left-color: #64748b; }
.fm-com-log .event.context { color: rgba(148, 163, 184, 0.85); font-style: italic; }
.fm-com-log .event.kickoff,
.fm-com-log .event.ht,
.fm-com-log .event.ft {
  color: #f1f5f9;
  font-weight: 700;
  border-left-color: #e2e8f0;
  background: rgba(255, 255, 255, 0.04);
}
.fm-com-log .event.briefing {
  color: #7db4ff;
  font-weight: 600;
  border-left-color: #3d8bfd;
}
.fm-com-log .event.coach { color: #fbbf24; }
html[data-theme="light"] .fm-com-log .event.kickoff,
html[data-theme="light"] .fm-com-log .event.ht,
html[data-theme="light"] .fm-com-log .event.ft {
  color: var(--text);
  background: rgba(0, 0, 0, 0.03);
}
.match-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.match-speed-bar {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.match-speed-bar .btn.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

/* 中场调整 */
.match-ht-panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.match-ht-panel.hidden { display: none; }
.match-ht-panel h3 { margin: 0; font-size: var(--fs-xl); }
/* ⚠ 2026-09-17 修「中场两个面板被压成 16px」：
   `#match-ht-panel` 是 flex column（上面那条），`.ht-fitness` / `.ht-roles` 各有
   自己的 `max-height` + `overflow-y: auto`（设计意图＝**各自内部滚动**），但它们同时
   是 flex 子项、默认 `flex-shrink: 1`，在 11 个子项里是**唯一可收缩**的 ⇒ 把整抽屉的
   溢出全吸收，双双被压到 **16px**，连一行都放不下（实测 phone 390×844：
   fitness 16/270、roles 16/1140）。抽屉自己虽有 `overflow-y: auto` 且确实溢出
   （scrollH 1505 > clientH 678），但 flex 先压扁了子项，滚动条永远没机会生效。
   ⇒ 正解是**停止子项收缩**（不是"让它滚动"）：两个面板保持自身 max-height 内的完整高度，
      溢出交给抽屉滚动。实测 phone 390×844：fitness 16→182、roles 16→222。
   ⚠ 必须写在 `.ht-fitness` / `.ht-roles` 的定义之后（同特异性下后者胜）。 */
.ht-fitness,
.ht-roles {
  flex: 0 0 auto;
}
.ht-tactics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.75rem;
  align-items: end;
}
.ht-tactics label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: var(--fs-base);
  color: var(--muted);
}
.ht-tactics select, .ht-tactics input[type="range"] { width: 100%; }
.ht-subs {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 0.75rem;
  align-items: start;
}
@media (max-width: 640px) {
  .ht-subs { grid-template-columns: 1fr; }
}
.ht-sub-title { font-size: var(--fs-sm); color: var(--muted); margin-bottom: 0.3rem; }
.ht-subs select {
  width: 100%;
  min-height: 8rem;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.35rem;
  font-size: var(--fs-base);
}
.ht-sub-actions { display: flex; flex-direction: column; gap: 0.4rem; min-width: 8rem; }
.ht-subs-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--fs-sm);
  color: var(--muted);
}
.ht-subs-list li { padding: 0.15rem 0; }

/* 赛后报告 */
.match-report {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
}
.match-report.hidden { display: none; }
.match-report h3 { margin: 0 0 0.6rem; font-size: var(--fs-xl); }
.match-report-meta {
  font-size: var(--fs-base);
  color: var(--muted);
  margin-bottom: 0.75rem;
}
.report-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-base);
}
.report-table th, .report-table td {
  padding: 0.4rem 0.5rem;
  text-align: center;
  border-bottom: 1px solid var(--border);
}
.report-table th { color: var(--muted); font-weight: 500; font-size: var(--fs-sm); }
.report-table td.stat-label { text-align: left; color: var(--muted); font-size: var(--fs-base); }
.report-table .num { font-weight: 600; font-variant-numeric: tabular-nums; }
.report-bar-wrap {
  display: flex;
  height: 6px;
  background: var(--bar-track);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 0.2rem;
}
.report-bar-h { background: var(--accent, #3b82f6); height: 100%; }
.report-bar-a { background: #f59e0b; height: 100%; margin-left: auto; }
.report-scorers {
  margin-top: 0.75rem;
  font-size: var(--fs-base);
  color: var(--muted);
}
.report-scorers strong { color: var(--text); }

/* Spatial-event post-match analysis */
.match-analysis {
  margin: 1rem 0;
  padding: 0.9rem 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.analysis-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.8rem;
}
.analysis-heading h4 { margin: 0; font-size: var(--fs-md); }
.analysis-tabs {
  display: flex;
  gap: 0.15rem;
  overflow-x: auto;
  scrollbar-width: thin;
}
.analysis-tab {
  flex: 0 0 auto;
  min-height: 2rem;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--muted);
  padding: 0.35rem 0.55rem;
  font: inherit;
  font-size: var(--fs-xs);
  cursor: pointer;
}
.analysis-tab:hover { color: var(--text); }
.analysis-tab.active {
  color: var(--text);
  border-bottom-color: var(--accent);
  font-weight: 700;
}
.analysis-panel.hidden { display: none; }
.analysis-insights {
  margin: 0 0 0.8rem;
  padding-left: 1.15rem;
  color: var(--text);
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.analysis-insights li + li { margin-top: 0.25rem; }
.analysis-compare { max-width: 40rem; margin: 0 auto; }
.analysis-compare-row {
  display: grid;
  grid-template-columns: minmax(4.5rem, 1fr) minmax(9rem, 2fr) minmax(4.5rem, 1fr);
  align-items: center;
  min-height: 2.15rem;
  border-top: 1px solid var(--border);
  font-size: var(--fs-sm);
  text-align: center;
}
.analysis-compare-row:last-child { border-bottom: 1px solid var(--border); }
.analysis-compare-row strong { font-variant-numeric: tabular-nums; }
.analysis-compare-row span { color: var(--muted); }
.analysis-side-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.analysis-side-grid section { min-width: 0; }
.analysis-side-grid h5 {
  margin: 0 0 0.4rem;
  font-size: var(--fs-sm);
  text-align: center;
}
.analysis-pitch {
  display: block;
  width: min(100%, 17rem);
  aspect-ratio: 10 / 11;
  margin: 0 auto;
}
.analysis-pitch-grass { fill: #166534; }
.analysis-pitch-line {
  fill: none;
  stroke: rgba(255, 255, 255, 0.68);
  stroke-width: 0.7;
}
.analysis-shot {
  stroke: rgba(255, 255, 255, 0.9);
  stroke-width: 0.8;
}
.analysis-shot.goal,
.analysis-legend-dot.goal { fill: #22c55e; background: #22c55e; }
.analysis-shot.saved,
.analysis-legend-dot.saved { fill: #38bdf8; background: #38bdf8; }
.analysis-shot.blocked,
.analysis-legend-dot.blocked { fill: #f59e0b; background: #f59e0b; }
.analysis-shot.offTarget,
.analysis-legend-dot.offTarget { fill: #ef4444; background: #ef4444; }
.analysis-legend {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-bottom: 0.55rem;
  color: var(--muted);
  font-size: var(--fs-xs);
}
.analysis-legend span { display: inline-flex; align-items: center; gap: 0.25rem; }
.analysis-legend-dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; }
.analysis-heat-cell { fill: #facc15; stroke: rgba(255, 255, 255, 0.14); stroke-width: 0.25; }
.analysis-pass-edge { stroke: rgba(250, 204, 21, 0.65); stroke-linecap: round; }
.analysis-pass-node circle { fill: #f8fafc; stroke: #111827; stroke-width: 0.6; }
.analysis-pass-node text {
  fill: #f8fafc;
  stroke: rgba(0, 0, 0, 0.7);
  stroke-width: 0.35;
  paint-order: stroke;
  font-size: 3.2px;
  font-weight: 700;
  letter-spacing: 0;
}
.shape-usage-grid {
  max-width: 40rem;
  margin: 0 auto 0.9rem;
}
.shape-usage {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.shape-usage-total {
  padding: 0.4rem 0;
  color: var(--muted);
  font-size: var(--fs-xs);
  text-align: center;
}
.shape-usage-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 1.8rem;
  border-top: 1px solid var(--border);
  font-size: var(--fs-xs);
}
.shape-usage-row span { color: var(--muted); }
.shape-usage-row strong { font-variant-numeric: tabular-nums; }
.shape-position-grid { margin-top: 0.25rem; }
.analysis-average-position circle {
  fill: #f8fafc;
  stroke: #111827;
  stroke-width: 0.7;
}
.analysis-average-position text {
  fill: #111827;
  font-size: 2.8px;
  font-weight: 800;
  letter-spacing: 0;
}
.shape-timeline-heading {
  margin: 1rem 0 0.4rem;
  font-size: var(--fs-sm);
}
.shape-timeline { border-bottom: 1px solid var(--border); }
.shape-timeline-row {
  display: grid;
  grid-template-columns: 2.8rem minmax(5rem, 0.7fr) minmax(7rem, 0.9fr) minmax(11rem, 1.4fr) minmax(9rem, 1.2fr);
  align-items: center;
  gap: 0.55rem;
  min-height: 2.35rem;
  border-top: 1px solid var(--border);
  font-size: var(--fs-xs);
}
.shape-timeline-row time { font-variant-numeric: tabular-nums; color: var(--muted); }
.shape-timeline-row span,
.shape-timeline-row small { color: var(--muted); }
.shape-timeline-forms { color: var(--text) !important; font-variant-numeric: tabular-nums; }
.analysis-empty {
  display: grid;
  place-items: center;
  aspect-ratio: 10 / 11;
  margin: 0;
  font-size: var(--fs-xs);
}

@media (max-width: 700px) {
  .analysis-heading { align-items: flex-start; flex-direction: column; }
  .analysis-tabs { width: 100%; }
  .analysis-side-grid { gap: 0.5rem; }
  .analysis-compare-row { grid-template-columns: minmax(3.5rem, 1fr) minmax(7.5rem, 1.8fr) minmax(3.5rem, 1fr); }
  .shape-timeline-row {
    grid-template-columns: 2.6rem minmax(0, 1fr);
    gap: 0.2rem 0.55rem;
    padding: 0.45rem 0;
  }
  .shape-timeline-row time { grid-row: 1 / span 4; align-self: start; }
  .shape-timeline-row strong,
  .shape-timeline-row span,
  .shape-timeline-row small { grid-column: 2; }
}

/* Modal */
.modal {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  display: grid; place-items: center;
  z-index: 100;
  padding: 1rem;
}
.modal.hidden { display: none; }
.modal-card {
  width: min(480px, 100%);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.25rem 1.4rem;
  position: relative;
  box-shadow: var(--shadow);
  max-height: 85vh;
  overflow-y: auto;
}
.modal-card.wide {
  width: min(860px, 100%);
}
.modal-card.search-modal {
  width: min(620px, 100%);
}

.player-browse-nav {
  position: sticky;
  top: -1.25rem;
  z-index: 4;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.55rem;
  margin: -1.25rem -1.4rem 0.9rem;
  padding: 0.7rem 3.2rem 0.7rem 1rem;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--card) 94%, transparent);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(10px);
}
.player-browse-back {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}
.player-browse-position {
  color: var(--muted);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.player-browse-controls {
  display: inline-flex;
  gap: 0.35rem;
  white-space: nowrap;
}

@media (max-width: 560px) {
  .player-browse-nav {
    grid-template-columns: minmax(0, 1fr) auto;
    top: -1rem;
    margin: -1rem -1rem 0.8rem;
    padding: 0.65rem 2.7rem 0.65rem 0.75rem;
  }
  .player-browse-position { display: none; }
  .player-browse-controls .btn { padding-inline: 0.45rem; }
}

.global-search-shell {
  padding-right: 1.4rem;
}

.stats-scope-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.85rem;
}
.stats-scope-bar h2 { margin: 0; }
.league-centre-switch {
  display: inline-flex;
  gap: 0.25rem;
  margin-bottom: 0.85rem;
  padding: 0.25rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg2);
}
.league-centre-switch button {
  min-width: 7rem;
  padding: 0.48rem 1rem;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: var(--fs-base);
  font-weight: 750;
  cursor: pointer;
}
.league-centre-switch button:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--primary) 9%, transparent);
}
.league-centre-switch button.active {
  color: #fff;
  background: var(--primary);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--primary) 28%, transparent);
}
.competition-players-title {
  margin: 1.25rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  font-size: var(--fs-lg);
}
.competition-leaders-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.25rem;
  margin-top: 0.75rem;
}
.competition-leader-block {
  min-width: 0;
}
.competition-leader-block h3 {
  margin: 0 0 0.4rem;
  font-size: var(--fs-md);
}
.competition-leader-block .hint {
  margin: -0.15rem 0 0.4rem;
}
@media (max-width: 860px) {
  .competition-leaders-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .league-centre-switch { display: flex; }
  .league-centre-switch button { min-width: 0; flex: 1; }
}
.stats-scope-select {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 700;
  white-space: nowrap;
}
.stats-scope-select select {
  min-width: 13rem;
}
.stats-league-cell {
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 700;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .stats-scope-bar { align-items: stretch; flex-direction: column; }
  .stats-scope-select { justify-content: space-between; }
  .stats-scope-select select { min-width: 0; flex: 1; }
}
.global-search-shell h2 {
  margin: 0 0 0.85rem;
  font-size: var(--fs-2xl);
}
.global-search-input {
  width: 100%;
  min-height: 2.8rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg2);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-lg);
}
.global-search-input:focus {
  border-color: var(--primary);
  outline: 2px solid color-mix(in srgb, var(--primary) 24%, transparent);
  outline-offset: 1px;
}
.global-search-results {
  display: grid;
  gap: 0.9rem;
  margin-top: 0.9rem;
}
.global-search-status {
  margin: 0;
  padding: 1rem 0;
  color: var(--muted);
  text-align: center;
}
.global-search-group h3 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 0 0.35rem;
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 600;
}
.global-search-group h3 span:last-child {
  font-variant-numeric: tabular-nums;
}
.global-search-list {
  display: grid;
  gap: 0.3rem;
}
.global-search-result {
  width: 100%;
  min-height: 3.25rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.65rem;
  align-items: center;
  padding: 0.45rem 0.6rem;
  border: 1px solid transparent;
  border-radius: 6px;
  background: var(--bg2);
  color: var(--text);
  text-align: left;
}
.global-search-result:hover,
.global-search-result:focus-visible {
  border-color: var(--primary);
  outline: none;
}
.global-search-copy {
  min-width: 0;
  display: grid;
  gap: 0.15rem;
}
.global-search-copy strong,
.global-search-copy span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.global-search-copy strong {
  font-size: var(--fs-base);
}
.global-search-copy span,
.global-search-rating {
  color: var(--muted);
  font-size: var(--fs-xs);
}
.global-search-rating {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.global-search-club-crest {
  width: 2.1rem;
  height: 2.1rem;
}
.global-search-nation-flag {
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  flex: 0 0 2.1rem;
  font-size: var(--fs-4xl);
  line-height: 1;
}
.global-search-nation-flag .nation-flag {
  width: 2.1rem;
  height: 1.4rem;
  margin-right: 0;
  vertical-align: 0;
}

@media (max-width: 520px) {
  .modal-card.search-modal {
    padding: 1rem;
  }
  .global-search-shell {
    padding-right: 1.2rem;
  }
  .global-search-result {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .global-search-rating {
    grid-column: 2;
  }
}

/* 可点击队名 / 球员名 */
button.club-link,
button.player-link,
button.staff-link,
button.nation-link {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  color: var(--primary);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
button.club-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  max-width: 100%;
  vertical-align: middle;
}
.club-link-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
button.club-link:hover,
button.player-link:hover,
button.staff-link:hover,
button.nation-link:hover {
  border-bottom-color: var(--primary);
  color: var(--text);
}
button.player-link.pitch-player-link {
  color: inherit;
  font-weight: inherit;
  font-size: inherit;
  border-bottom: none;
}
button.player-link.pitch-player-link:hover {
  color: var(--primary);
  text-decoration: underline;
}
.player-dot.clickable-player {
  cursor: pointer;
}
.player-dot.clickable-player:hover .name {
  color: var(--primary);
}
.report-scorers .player-link {
  font-weight: 600;
}
.training-fit-row .player-link {
  font-size: inherit;
}
.form-pills {
  display: inline-flex;
  gap: 0.2rem;
  vertical-align: middle;
}
.form-pill {
  display: inline-grid;
  place-items: center;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 3px;
  font-size: var(--fs-3xs);
  font-style: normal;
  font-weight: 800;
  line-height: 1;
}
.form-pill.w { background: rgba(61, 214, 140, 0.25); color: var(--good); }
.form-pill.d { background: rgba(148, 163, 184, 0.25); color: var(--muted); }
.form-pill.l { background: rgba(240, 113, 120, 0.25); color: var(--bad); }

.club-staff-section {
  margin: 0.85rem 0 0.25rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.35);
}
.club-staff-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
  margin-top: 0.55rem;
}
.club-staff-card {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.55rem 0.6rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(2, 6, 23, 0.28);
}
.club-staff-card.is-head {
  border-color: rgba(61, 139, 253, 0.45);
  background: rgba(61, 139, 253, 0.1);
}
.club-staff-card-main {
  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
}
.club-staff-card .role {
  color: var(--primary);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.club-staff-card .name {
  display: block;
  margin: 0.1rem 0 0.15rem;
  font-size: var(--fs-md);
}
.club-staff-card .meta {
  color: var(--muted);
  font-size: var(--fs-xs);
  line-height: 1.35;
}
.staff-profile-nav {
  margin: 0 0 0.65rem;
}
.staff-approaches {
  margin: 0 0 0.75rem;
}
.staff-approach-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
  padding: 0.65rem 0.75rem;
  margin-bottom: 0.45rem;
  border-radius: 10px;
  border: 1px solid rgba(234, 179, 8, 0.35);
  background: rgba(234, 179, 8, 0.1);
  font-size: var(--fs-base);
}
.job-offer-list {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-top: 0.5rem;
}
.job-offer-card {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.55rem;
  padding: 0.7rem 0.8rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(15, 23, 42, 0.28);
}
.report-tickets {
  margin: 0.55rem 0 0.25rem;
  padding: 0.45rem 0.65rem;
  border-radius: 8px;
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.28);
  font-size: var(--fs-base);
}
.staff-diff-tag {
  display: inline-flex;
  align-items: center;
  margin-left: 0.25rem;
  padding: 0.08rem 0.38rem;
  border-radius: 4px;
  border: 1px solid transparent;
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.25;
  vertical-align: middle;
  background: rgba(148, 163, 184, 0.2);
  color: var(--muted);
}
.staff-diff-tag.short {
  background: rgba(34, 197, 94, 0.18);
  color: #86efac;
}
.staff-diff-tag.elite,
.staff-diff-tag.star {
  background: rgba(249, 115, 22, 0.2);
  color: #fdba74;
}
.staff-diff-tag.weaker {
  background: rgba(59, 130, 246, 0.18);
  color: #93c5fd;
}
tr.easy td:first-child { box-shadow: inset 3px 0 0 #22c55e; }
tr.hard td:first-child { box-shadow: inset 3px 0 0 #f97316; }
html[data-theme="light"] .job-offer-card {
  background: #fff;
}
html[data-theme="light"] .report-tickets {
  background: rgba(22, 163, 74, 0.08);
}
html[data-theme="light"] .staff-diff-tag {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #475569;
}
html[data-theme="light"] .staff-diff-tag.short {
  background: var(--open-bg);
  border-color: var(--open-border);
  color: #166534;
}
html[data-theme="light"] .staff-diff-tag.elite {
  background: #fff7ed;
  border-color: #fdba74;
  color: #9a3412;
}
html[data-theme="light"] .staff-diff-tag.star {
  background: #f0fdf4;
  border-color: var(--open-border);
  color: #166534;
}
html[data-theme="light"] .staff-diff-tag.weaker {
  background: #eff6ff;
  border-color: #93c5fd;
  color: #1e40af;
}
@media (max-width: 820px) {
  .club-staff-grid { grid-template-columns: 1fr; }
}
html[data-theme="light"] .club-staff-section {
  background: rgba(248, 250, 252, 0.95);
}
html[data-theme="light"] .club-staff-card {
  background: #fff;
}
html[data-theme="light"] .club-staff-card.is-head {
  background: rgba(59, 130, 246, 0.06);
}
.club-modal-head {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  padding-right: 1.5rem;
}
.club-modal-crest { width: 4.5rem; height: 4.5rem; }
.kit-chip.large {
  width: 2rem;
  height: 2rem;
  border-radius: 6px;
  flex-shrink: 0;
}
.club-modal-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 0.75rem 1.25rem;
}
.compact-table { font-size: var(--fs-sm); }
.compact-table th { font-size: var(--fs-xs); }
.me-side { font-weight: 700; color: var(--primary); }

@media (max-width: 720px) {
  .club-modal-grid { grid-template-columns: 1fr; }
  .modal-card.wide { width: min(480px, 100%); }
}
.modal-close {
  position: absolute;
  top: 0.5rem; right: 0.7rem;
  background: transparent;
  border: none;
  font-size: var(--fs-4xl);
  color: var(--muted);
  line-height: 1;
}
.attrs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem 1rem;
  margin-top: 0.75rem;
}
.attr-row {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-base);
  padding: 0.25rem 0;
  border-bottom: 1px solid var(--border);
}
.attr-row span:last-child { font-weight: 700; }
.bar {
  height: 6px;
  background: var(--bg);
  border-radius: 99px;
  overflow: hidden;
  margin-top: 0.2rem;
}
.bar > i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--good));
  border-radius: 99px;
}

.badge {
  display: inline-block;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  font-size: var(--fs-xs);
  font-weight: 700;
  background: rgba(61, 139, 253, 0.2);
  color: var(--primary);
}
.badge.GK { background: rgba(230, 180, 80, 0.2); color: var(--warn); }
.badge.DEF { background: rgba(61, 139, 253, 0.2); color: var(--primary); }
.badge.MID { background: rgba(61, 214, 140, 0.2); color: var(--good); }
.badge.ATT { background: rgba(240, 113, 120, 0.2); color: var(--bad); }

.stat-high { color: var(--good); }
.stat-mid { color: var(--warn); }
.stat-low { color: var(--bad); }

/* 赛后评分 1–10 */
.rating-high { color: var(--good); font-weight: 700; }
.rating-mid { color: #7dd3a0; font-weight: 600; }
.rating-ok { color: var(--text); }
.rating-low { color: var(--bad); font-weight: 600; }
.rating-cell { font-variant-numeric: tabular-nums; text-align: center; }
/* 球员滚动状态（近 5 场评分均） */
.form-hot { color: #f97316; font-weight: 800; }
.form-good { color: var(--good); font-weight: 700; }
.form-ok { color: var(--text); font-weight: 600; }
.form-cold { color: #60a5fa; font-weight: 700; }
.form-pill.form-hot {
  background: rgba(249, 115, 22, 0.22);
  color: #fdba74;
}
.form-pill.form-good {
  background: rgba(61, 214, 140, 0.2);
  color: #86efac;
}
.form-pill.form-ok {
  background: rgba(148, 163, 184, 0.22);
  color: #cbd5e1;
}
.form-pill.form-cold {
  background: rgba(59, 130, 246, 0.2);
  color: #93c5fd;
}
html[data-theme="light"] .form-hot { color: #c2410c; }
html[data-theme="light"] .form-good { color: var(--good); }
html[data-theme="light"] .form-ok { color: var(--text); }
html[data-theme="light"] .form-cold { color: #1d4ed8; }
html[data-theme="light"] .form-pill.form-hot {
  background: rgba(234, 88, 12, 0.14);
  color: #c2410c;
}
html[data-theme="light"] .form-pill.form-good {
  background: rgba(15, 138, 79, 0.12);
  color: var(--good);
}
html[data-theme="light"] .form-pill.form-ok {
  background: rgba(100, 116, 139, 0.12);
  color: #475569;
}
html[data-theme="light"] .form-pill.form-cold {
  background: rgba(37, 99, 235, 0.12);
  color: var(--primary-hover);
}
.report-ratings {
  margin-top: 0.85rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--border);
}
.report-motm {
  margin: 0.4rem 0 0.55rem;
  font-size: var(--fs-md);
}
.report-ratings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-top: 0.4rem;
}
@media (max-width: 720px) {
  .report-ratings-grid { grid-template-columns: 1fr; }
}
.report-ratings-title {
  font-size: var(--fs-sm);
  color: var(--muted);
  margin-bottom: 0.25rem;
}
.report-ratings-table {
  width: 100%;
  font-size: var(--fs-sm);
  border-collapse: collapse;
}
.report-ratings-table td {
  padding: 0.15rem 0.25rem;
  border-bottom: 1px solid var(--border);
}
.report-ratings-table td.num { text-align: right; white-space: nowrap; }

.modal-card h3 { color: var(--text); font-weight: 600; }
.modal-card .table-wrap { margin-top: 0.25rem; }
.modal-card table th { font-size: var(--fs-xs); }

/* Media */
.media-feed {
  display: grid;
  gap: 0.75rem;
  max-height: 70vh;
  overflow-y: auto;
  margin-top: 0.75rem;
}
.media-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.85rem 1rem;
  border-left: 4px solid var(--primary);
}
.media-card.positive { border-left-color: var(--good); }
.media-card.negative { border-left-color: var(--bad); }
.media-card.rumor { border-left-color: var(--warn); }
.media-card .outlet {
  font-size: var(--fs-xs);
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}
.media-card h3 {
  margin: 0 0 0.4rem;
  font-size: var(--fs-lg);
  line-height: 1.35;
}
.media-card .body {
  color: var(--muted);
  font-size: var(--fs-base);
  line-height: 1.5;
  margin: 0;
}

.staff-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin-top: 0.75rem;
}
@media (max-width: 860px) {
  .staff-grid { grid-template-columns: 1fr; }
}
.staff-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.9rem 1rem;
}
.staff-card h3 { margin: 0 0 0.35rem; font-size: var(--fs-lg); }
.staff-card .role { color: var(--primary); font-size: var(--fs-base); font-weight: 600; }
.staff-card .meta { color: var(--muted); font-size: var(--fs-base); margin: 0.35rem 0; }
.staff-card-actions {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
}
.staff-profile-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.75rem;
}
.staff-profile-head h2 { margin: 0.15rem 0; }
.staff-profile-head .role { color: var(--primary); font-weight: 700; }
.staff-profile-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 1rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg2);
}
.staff-profile-subtitle { margin: 1rem 0 0.45rem; font-size: var(--fs-md); }
.staff-impact-list { display: grid; gap: 0.45rem; }
.staff-history-table { width: 100%; border-collapse: collapse; font-size: var(--fs-base); }
.staff-history-table th, .staff-history-table td { padding: 0.42rem 0.5rem; border-bottom: 1px solid var(--line); text-align: left; }
.staff-history-table th { color: var(--muted); font-weight: 700; }
.staff-impact-list > div {
  padding: 0.6rem 0.75rem;
  border-left: 3px solid var(--primary);
  border-radius: 6px;
  background: var(--bg2);
}
.honor-list {
  display: grid;
  gap: 0.35rem;
  margin-top: 0.4rem;
}
.honor-item {
  background: var(--bg2);
  border-radius: 6px;
  padding: 0.4rem 0.55rem;
  font-size: var(--fs-base);
  border-left: 3px solid var(--warn);
}
.honor-item .season { color: var(--muted); font-size: var(--fs-xs); }


/* 董事会目标 */
.board-box {
  margin: 0.5rem 0 0.75rem;
  padding: 0.65rem 0.75rem;
  border-radius: 8px;
  background: var(--board-bg);
  border: 1px solid var(--board-border);
  font-size: var(--fs-md);
  line-height: 1.45;
  color: var(--text);
}
.board-box .board-title { font-weight: 600; margin-bottom: 0.2rem; }
.board-box .board-meta { color: var(--board-meta); font-size: var(--fs-base); }
.board-box.ok {
  border-color: color-mix(in srgb, var(--good) 50%, var(--border));
  background: color-mix(in srgb, var(--good) 10%, var(--board-bg));
}
.board-box.warn {
  border-color: color-mix(in srgb, var(--warn) 55%, var(--border));
  background: color-mix(in srgb, var(--warn) 10%, var(--board-bg));
}
.board-box.danger {
  border-color: color-mix(in srgb, var(--bad) 55%, var(--border));
  background: color-mix(in srgb, var(--bad) 10%, var(--board-bg));
}
.board-box.done {
  border-color: color-mix(in srgb, var(--primary) 50%, var(--border));
  background: color-mix(in srgb, var(--primary) 8%, var(--board-bg));
}
/* 日间：强制浅色底，避免旧缓存/遗留深色规则 */
html[data-theme="light"] .board-box {
  background: #eef3fb !important;
  border-color: #c5d0e3 !important;
  color: var(--text) !important;
}
html[data-theme="light"] .board-box.ok {
  background: var(--open-bg) !important;
  border-color: var(--open-border) !important;
  color: #14532d !important;
}
html[data-theme="light"] .board-box.warn {
  background: #fffbeb !important;
  border-color: #fcd34d !important;
  color: #78350f !important;
}
html[data-theme="light"] .board-box.danger {
  background: var(--closed-bg) !important;
  border-color: var(--closed-border) !important;
  color: #7f1d1d !important;
}
html[data-theme="light"] .board-box.done {
  background: #eff6ff !important;
  border-color: #93c5fd !important;
  color: #1e3a8a !important;
}
.scout-range { color: var(--muted); font-size: 0.85em; }

.transfer-window-box {
  padding: 0.55rem 0.75rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg2);
  font-size: var(--fs-base);
  line-height: 1.4;
  margin-bottom: 0.35rem;
  color: var(--text);
}
.transfer-window-box.open {
  border-color: var(--open-border);
  color: var(--open-fg);
  background: var(--open-bg);
}
.transfer-window-box.closed {
  border-color: var(--closed-border);
  color: var(--closed-fg);
  background: var(--closed-bg);
}

/* 程序生成头像（polish） */
.avatar {
  display: inline-flex;
  flex-shrink: 0;
  /* 像素画风：复古方框（圆形会切掉飞机头/爆炸头的角） */
  border-radius: 18%;
  overflow: hidden;
  vertical-align: middle;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.14),
    0 2px 6px rgba(0, 0, 0, 0.28);
  line-height: 0;
  background: #3a4256;
  transition: box-shadow 0.15s ease, transform 0.12s ease;
}
html[data-theme="light"] .avatar {
  box-shadow:
    0 0 0 1px rgba(26, 36, 56, 0.12),
    0 2px 5px rgba(15, 23, 42, 0.1);
}
.avatar.mood-injured {
  box-shadow:
    0 0 0 2px rgba(239, 68, 68, 0.6),
    0 2px 8px rgba(239, 68, 68, 0.2);
}
.avatar.mood-happy {
  box-shadow:
    0 0 0 1.5px rgba(61, 214, 140, 0.5),
    0 2px 6px rgba(0, 0, 0, 0.22);
}
.avatar.mood-sad {
  box-shadow:
    0 0 0 1px rgba(148, 163, 184, 0.5),
    0 2px 5px rgba(0, 0, 0, 0.2);
  filter: saturate(0.92);
}
.avatar.mood-tired {
  box-shadow:
    0 0 0 1.5px rgba(125, 211, 252, 0.45),
    0 2px 5px rgba(0, 0, 0, 0.2);
  opacity: 0.96;
}


/* Formal portrait mood badge (status layer; base art stays neutral) */
.avatar {
  position: relative;
}
.avatar-mood-overlay {
  position: absolute;
  right: 1px;
  bottom: 1px;
  min-width: clamp(10px, calc(var(--avatar-size, 36px) * 0.24), 18px);
  height: clamp(10px, calc(var(--avatar-size, 36px) * 0.24), 18px);
  padding: 0 1px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(7px, calc(var(--avatar-size, 36px) * 0.11), 10px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  color: #fff;
  background: rgba(15, 23, 42, 0.78);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.18);
  pointer-events: none;
  z-index: 2;
}
.avatar-mood-overlay.mood-injured { background: rgba(220, 38, 38, 0.92); }
.avatar-mood-overlay.mood-happy { background: rgba(22, 163, 74, 0.9); }
.avatar-mood-overlay.mood-sad { background: rgba(100, 116, 139, 0.92); }
.avatar-mood-overlay.mood-tired { background: rgba(14, 165, 233, 0.9); }
.avatar.avatar-has-art.mood-injured .avatar-art { filter: saturate(0.92); }
.avatar.avatar-has-art.mood-sad .avatar-art { filter: saturate(0.88) brightness(0.97); }
.avatar.avatar-has-art.mood-tired .avatar-art { filter: saturate(0.9) brightness(1.02); }
/* 详情弹窗大头像 */
.player-modal-head .avatar {
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.16),
    0 6px 16px rgba(0, 0, 0, 0.35);
}
html[data-theme="light"] .player-modal-head .avatar {
  box-shadow:
    0 0 0 2px rgba(26, 36, 56, 0.1),
    0 6px 14px rgba(15, 23, 42, 0.12);
}

/* 设施 */
.facilities-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.85rem;
  margin-top: 0.75rem;
}
@media (max-width: 860px) {
  .facilities-grid { grid-template-columns: 1fr; }
}
.facility-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.9rem 1rem;
}
.facility-title {
  font-weight: 700;
  font-size: var(--fs-lg);
  margin-bottom: 0.25rem;
}
.facility-level {
  color: var(--primary);
  font-weight: 600;
  font-size: var(--fs-md);
  margin-bottom: 0.4rem;
}
.facility-effect {
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1.4;
  margin: 0 0 0.75rem;
  min-height: 2.6em;
}
.avatar-svg {
  display: block;
  width: 100%;
  height: 100%;
}
/* 程序脸保持像素硬边；显示尺寸尽量使用 32 的整数倍。 */
.avatar-px,
.avatar-svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}
/* 非像素肖像若重新启用，仍使用浏览器平滑缩放。 */
.avatar-art,
.avatar img:not(.avatar-px) {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  image-rendering: auto;
}
/* 正式肖像资产：略圆角已由 .avatar 裁切；禁止像素化放大 */
.avatar.avatar-has-art {
  background: #1a2233;
}
.avatar-art {
  background: #1a2233;
}
.nation-modal-mark {
  display: grid;
  place-items: center;
  flex: 0 0 3rem;
  width: 3rem;
  height: 3rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel-2);
  font-size: var(--fs-6xl);
  line-height: 1;
}
.name-with-avatar,
.avatar-cell {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  white-space: nowrap;
}
.name-with-avatar .avatar,
.avatar-cell .avatar {
  flex-shrink: 0;
}
.staff-card-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}
.staff-card-head h3 {
  font-size: var(--fs-xl);
}
#manager-name {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.player-dot .circle.kit-dot {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0;
}
.player-dot .circle.kit-dot .avatar {
  width: 100% !important;
  height: 100% !important;
  box-shadow: none;
  background: transparent;
  /* 战术板圆点内头像：去掉外圈阴影，避免叠出一圈脏边 */
  filter: none;
}
.player-modal-head .avatar {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}


/* 球衣 / 号码 */
.kit-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.75rem;
  height: 1.75rem;
  padding: 0 0.25rem;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.25);
  font-weight: 800;
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15);
}
.num-cell { width: 2.5rem; text-align: center; }
#squad-table .num-stat {
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  min-width: 2.2rem;
}
#squad-table th:nth-child(7),
#squad-table th:nth-child(8),
#squad-table th:nth-child(9) {
  text-align: center;
  white-space: nowrap;
}
.kit-chip {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 1px solid rgba(255,255,255,0.35);
  vertical-align: -2px;
  margin-right: 0.25rem;
}
.club-crest {
  display: inline-block;
  flex: 0 0 auto;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(2, 6, 23, 0.3));
  user-select: none;
  -webkit-user-drag: none;
}
.kit-shirt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px 8px 12px 12px;
  border: 2px solid;
  font-weight: 800;
  font-size: var(--fs-2xl);
  box-shadow: 0 4px 12px rgba(0,0,0,0.35);
  flex-shrink: 0;
  clip-path: polygon(15% 8%, 35% 0, 65% 0, 85% 8%, 100% 18%, 100% 100%, 0 100%, 0 18%);
}
.kit-shirt-num {
  text-shadow: 0 1px 2px rgba(0,0,0,0.45);
}
.player-modal-head {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  margin-bottom: 0.5rem;
}
.player-dot .circle.kit-dot {
  border-width: 2px;
  font-size: var(--fs-xs);
  font-weight: 800;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  font-variant-numeric: tabular-nums;
}

/* 训练日程 */
.training-title-row { align-items: center; gap: 0.75rem; }
.training-title-row h2 { margin-bottom: 0; }
.training-options {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.training-opt {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.65rem 0.8rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg2);
  color: var(--text);
  transition: border-color 0.15s, background 0.15s;
}
.training-opt:hover {
  border-color: var(--tab-active-border);
}
.training-opt.active {
  border-color: var(--primary);
  background: var(--tab-active-bg);
  box-shadow: inset 0 0 0 1px var(--tab-active-border);
}
.training-opt .opt-title {
  font-weight: 650;
  margin-bottom: 0.15rem;
}
.training-opt .opt-desc {
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1.35;
}
.training-options.intensity {
  flex-direction: row;
  flex-wrap: wrap;
}
.training-options.intensity .training-opt {
  flex: 1 1 30%;
  min-width: 6.5rem;
  text-align: center;
}
.training-summary {
  margin: 1rem 0 0.5rem;
  padding: 0.75rem 0.9rem;
  border-radius: 10px;
  background: var(--bg2);
  border: 1px solid var(--border);
  line-height: 1.5;
  font-size: var(--fs-md);
}
.training-fitness {
  display: grid;
  gap: 0.35rem;
  margin-top: 0.35rem;
}
.training-fit-row {
  display: grid;
  grid-template-columns: 1fr 3.2rem 5.5rem;
  gap: 0.5rem;
  align-items: center;
  font-size: var(--fs-base);
}
.training-fit-row .bar {
  height: 8px;
  border-radius: 99px;
  background: var(--bar-track);
  overflow: hidden;
}
.training-fit-row .bar > i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--good), var(--primary));
}
.training-fit-row.low .bar > i {
  background: linear-gradient(90deg, var(--bad), var(--warn));
}
.training-fit-row .fit-val {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

/* 概览操作按钮组 */
.dash-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.35rem;
}
.dash-actions .btn {
  margin: 0;
}

/* 存档槽 */
.slot-section {
  text-align: left;
  padding: 0.65rem 0.75rem;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.save-slots {
  display: grid;
  gap: 0.4rem;
}
.slot-row {
  display: flex;
  align-items: stretch;
  gap: 0.35rem;
}
.slot-row.active .slot-card {
  border-color: var(--primary);
  background: var(--tab-active-bg);
  box-shadow: inset 0 0 0 1px var(--tab-active-border);
}
.slot-card {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
  padding: 0.55rem 0.7rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  cursor: pointer;
}
.slot-card:hover { border-color: var(--tab-active-border); }
.slot-card.active {
  border-color: var(--primary);
  background: var(--tab-active-bg);
  box-shadow: inset 0 0 0 1px var(--tab-active-border);
}
.slot-card.empty { opacity: 0.85; }
.slot-title { font-size: var(--fs-base); font-weight: 600; }
.slot-sub { font-size: var(--fs-xs); color: var(--muted); margin-top: 0.15rem; }
.slot-delete {
  flex: 0 0 auto;
  align-self: stretch;
  min-width: 3.2rem;
  padding: 0.35rem 0.55rem;
  font-size: var(--fs-xs);
  white-space: nowrap;
}
html[data-theme="light"] .slot-delete {
  background: #fff;
}
.save-tip { margin: 0.45rem 0 0; font-size: var(--fs-xs); min-height: 0; }
.start-save-row {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.15rem;
}

/* —— 移动端 / 通勤优化 —— */
@media (max-width: 860px) {
  .topbar {
    padding: 0.55rem 0.75rem 0.45rem;
    gap: 0.45rem 0.6rem;
    align-items: flex-start;
  }
  .brand { min-width: 0; flex: 1 1 auto; }
  .brand strong { font-size: var(--fs-lg); }
  .meta {
    width: 100%;
    order: 3;
    gap: 0.55rem;
    font-size: var(--fs-sm);
    flex-wrap: wrap;
  }
  .actions {
    margin-left: auto;
    flex-shrink: 0;
  }
  .actions .btn {
    min-height: 36px;
    padding: 0.4rem 0.65rem;
  }
  /* 窄屏优先保推进键：它不参与压缩，存档键让位收窄 */
  .topbar-continue { flex-shrink: 0; }
  .topbar-continue-main {
    font-size: var(--fs-sm);
    padding: 0.4rem 0.6rem;
  }
  .actions #btn-save {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    font-size: var(--fs-xs);
  }
  /* 页签横滑，不换行堆叠 */
  .tabs {
    order: 4;
    width: 100%;
    flex: none;
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 0.3rem;
    padding: 0.15rem 0 0.35rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    mask-image: linear-gradient(90deg, #000 92%, transparent);
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab {
    flex: 0 0 auto;
    padding: 0.48rem 0.9rem;
    font-size: var(--fs-base);
    min-height: 36px;
  }
  .content {
    padding: 0.85rem 0.75rem 1.5rem;
  }
  .card {
    padding: 0.9rem 0.95rem;
  }
  .btn {
    min-height: 40px;
    padding: 0.55rem 0.9rem;
  }
  .btn.small {
    min-height: 36px;
  }
  .dash-actions .btn {
    flex: 1 1 calc(50% - 0.3rem);
    min-width: 7.5rem;
  }
  .table-wrap {
    margin: 0 -0.15rem;
    padding-bottom: 0.25rem;
    -webkit-overflow-scrolling: touch;
  }
  table { font-size: var(--fs-sm); }
  th, td { padding: 0.5rem 0.4rem; }
  .start-card {
    width: min(440px, 96vw);
    padding: 1.35rem 1.1rem;
    margin: 0.75rem auto;
  }
  .next-match { font-size: var(--fs-xl); }
  .pitch { min-height: 260px; }
  .training-options.intensity .training-opt {
    min-width: 5.5rem;
  }
}

@media (max-width: 420px) {
  .dash-actions .btn {
    flex: 1 1 100%;
  }
  .actions .btn.ghost { padding-left: 0.5rem; padding-right: 0.5rem; }
}

/* 安全区（刘海屏底部） */
@supports (padding: env(safe-area-inset-bottom)) {
  .content {
    padding-bottom: calc(1.25rem + env(safe-area-inset-bottom));
  }
  .topbar {
    padding-left: max(0.75rem, env(safe-area-inset-left));
    padding-right: max(0.75rem, env(safe-area-inset-right));
  }
}

/* ===== 合同 / 租借 ===== */
.contracts-loans-panel {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.cl-section h3 {
  margin: 0 0 0.45rem;
  font-size: var(--fs-md);
}
.cl-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.65rem;
  padding: 0.45rem 0.55rem;
  margin-bottom: 0.35rem;
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.45);
  border: 1px solid rgba(148, 163, 184, 0.18);
}
.cl-main {
  flex: 1 1 12rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  font-size: var(--fs-base);
}
.cl-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.cl-offer {
  flex: 1 1 100%;
  font-size: var(--fs-xs);
}
.grid-2-loans {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
@media (max-width: 720px) {
  .grid-2-loans { grid-template-columns: 1fr; }
}
.badge.loan {
  background: rgba(56, 189, 248, 0.2);
  color: #7dd3fc;
}
.badge.contract-urgent {
  background: rgba(239, 68, 68, 0.2);
  color: #fca5a5;
}
.badge.contract-short {
  background: rgba(245, 158, 11, 0.2);
  color: #fcd34d;
}
.contract-cell {
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.row-contract td {
  box-shadow: inset 3px 0 0 #f59e0b;
}
.contract-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.65rem 0 0.25rem;
}
.tr-actions {
  white-space: nowrap;
}
.tr-actions .btn {
  margin: 0.1rem;
}
html[data-theme="light"] .cl-row {
  background: rgba(0, 0, 0, 0.03);
}

/* ===== 球探 / 对手报告 ===== */
.scout-attr-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0.35rem 0;
}
.scout-attr-chip {
  display: inline-flex;
  gap: 0.3rem;
  align-items: baseline;
  padding: 0.18rem 0.48rem;
  border-radius: 5px;
  color: var(--text);
  font-size: var(--fs-xs);
  font-weight: 750;
  line-height: 1.35;
  background: rgba(15, 23, 42, 0.45);
  border: 1px solid rgba(148, 163, 184, 0.38);
}
.scout-attr-chip em {
  font-style: normal;
  color: #cbd5e1;
  font-weight: 700;
}
.attrs-fogged .attr-row span:last-child {
  font-variant-numeric: tabular-nums;
}
.opp-report {
  margin-top: 0.55rem;
  padding: 0.5rem 0.6rem;
  border-radius: 10px;
  border: 1px solid rgba(167, 139, 250, 0.35);
  background: rgba(76, 29, 149, 0.12);
}
.opp-report.compact {
  margin-top: 0.4rem;
  padding: 0.4rem 0.5rem;
}
.opp-report-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.25rem 0.6rem;
  margin-bottom: 0.4rem;
  font-size: var(--fs-base);
}
.opp-report-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
  gap: 0.3rem 0.55rem;
  font-size: var(--fs-xs);
  margin-bottom: 0.4rem;
}
.opp-report-grid .muted {
  display: block;
  font-size: var(--fs-3xs);
  margin-bottom: 0.05rem;
}
.opp-danger-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  margin: 0.25rem 0;
  font-size: var(--fs-xs);
}
.opp-danger-chip {
  display: inline-block;
  padding: 0.12rem 0.4rem;
  border-radius: 99px;
  background: rgba(248, 113, 113, 0.12);
  border: 1px solid rgba(248, 113, 113, 0.3);
  color: #fecaca;
  font-size: var(--fs-xs);
}
.opp-danger-chip em {
  font-style: normal;
  opacity: 0.75;
  margin: 0 0.15rem;
}
.opp-tips {
  margin: 0.25rem 0 0;
  padding-left: 1.1rem;
  font-size: var(--fs-xs);
  color: var(--muted);
  line-height: 1.4;
}
.opp-fog-hint {
  margin: 0.35rem 0 0;
  font-size: var(--fs-2xs);
}
html[data-theme="light"] .opp-report {
  background: rgba(237, 233, 254, 0.75);
  border-color: rgba(124, 58, 237, 0.25);
}
html[data-theme="light"] .opp-danger-chip {
  color: #9f1239;
  background: rgba(254, 226, 226, 0.9);
}
.scout-watch-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
}
.scout-watch-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  font-size: var(--fs-sm);
  padding: 0.35rem 0.45rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(15, 23, 42, 0.3);
}
html[data-theme="light"] .scout-watch-row {
  background: #fff;
}
.dash-atm.good { color: var(--good); }
.dash-atm.bad { color: var(--bad); }
.dash-finance { font-size: var(--fs-sm); line-height: 1.4; }
.dash-badges { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.badge-chip {
  display: inline-block;
  padding: 0.15rem 0.45rem;
  border-radius: 99px;
  font-size: var(--fs-xs);
  background: rgba(251, 191, 36, 0.12);
  border: 1px solid rgba(251, 191, 36, 0.35);
  color: #fde68a;
}
html[data-theme="light"] .badge-chip {
  color: #92400e;
  background: rgba(254, 243, 199, 0.95);
}
.rel-good { color: var(--good); font-weight: 700; }
.rel-bad { color: var(--bad); font-weight: 700; }
.rel-neutral { color: var(--muted); }
.player-talk-panel { margin-top: 0.35rem; }
.player-habits-panel { margin-top: 0.75rem; }
.player-habits-panel h3 { margin: 0 0 0.4rem; font-size: var(--fs-md); }
.player-habit-grid { display: grid; gap: 0.38rem; }
.player-habit-item {
  display: grid;
  gap: 0.12rem;
  padding: 0.48rem 0.58rem;
  border-left: 3px solid var(--accent);
  background: var(--bg2);
  font-size: var(--fs-sm);
  line-height: 1.4;
}
.player-habit-programme {
  display: grid;
  gap: 0.42rem;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border);
}
.player-habit-training { display: grid; gap: 0.4rem; }
.player-talk-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.playing-time-role-card {
  margin: 0.45rem 0;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg2);
}
.playing-time-role-card p { margin: 0.3rem 0; line-height: 1.45; }
.playing-time-role-head,
.playing-time-role-controls,
.player-development-entry-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.playing-time-role-controls select { flex: 1; min-width: 0; }
.player-development-log { display: grid; gap: 0.4rem; }
.player-development-entry {
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg2);
  font-size: var(--fs-sm);
  line-height: 1.45;
}
.player-development-entry-head { margin-bottom: 0.28rem; }
.player-development-entry-head span { color: var(--muted); white-space: nowrap; }
.development-change,
.development-overall {
  display: inline-block;
  margin: 0.1rem 0.2rem 0.1rem 0;
  padding: 0.1rem 0.35rem;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.12);
}
.development-change.positive { color: var(--good); }
.development-change.negative { color: var(--bad); }
@media (max-width: 520px) {
  .playing-time-role-controls { align-items: stretch; flex-direction: column; }
  .playing-time-role-controls .btn { width: 100%; }
}
.player-dot.dragging, .tac-slot.dragging { opacity: 0.55; }

/* ===== 赛前简报 / 生涯 / 设施 / 转会 / PWA ===== */
.prematch-brief {
  margin-top: 0.55rem;
  padding: 0.55rem 0.7rem;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: var(--fs-sm);
  line-height: 1.45;
}
.prematch-brief.full {
  margin: 0.35rem 0.5rem 0.15rem;
  /* 高度交给外层 #match-pre-brief 统一滚动，避免双滚动条裁切讲话 */
  max-height: none;
  overflow: visible;
  background: rgba(8, 12, 20, 0.92);
  border-color: rgba(61, 139, 253, 0.35);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
}
.prematch-brief.compact {
  margin-top: 0.5rem;
}
/* 简报 + 讲话整体：可滚、有上限，给全宽球场留位置 */
.match-pre-brief {
  /* 2026-09-16：窄屏（flex 列）下必须不可收缩。这里原本是 flex: 0 1 auto +
     min-height: 0，而同一个 flex 列里计分板 flex-shrink:0、.fmm-match-body
     开赛前 flex:0 0 auto、评论流 flex:0 0 auto——于是它成了**唯一可收缩项**，
     被全宽横场（手机 390 宽 → .mp-field 367×267，比例 93.45/68 正确）挤成
     2 px，819 px 简报内容全进滚动区、一屏都看不见。
     原设计意图由外层 .match-layout.fm-match 的 overflow-y:auto 承担
     （见下方「赛前简报+讲话变高后必须可滚」），所以这里取 0 0 auto，
     由本元素按 max-height 内滚，整页超出时交给外层滚。
     宽屏（≥1060px）是 grid，flex 属性对 grid item 无效 → 桌面零副作用。 */
  flex: 0 0 auto;
  min-height: 0;
  max-height: min(36vh, 300px);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 0 0.1rem 0.15rem;
  scrollbar-width: thin;
}
.match-pre-brief.hidden {
  display: none;
}
/*
 * 赛前球场：与计分板/评论同宽全宽横场。
 * 不再缩成中间窄条（会显得像「小窗叠在简报上」、阵型挤成一团）。
 * 高度随宽度走；整页可滚 + 底栏 sticky。
 */
.match-layout.pre-kickoff .fmm-match-body,
.match-pre-brief:not(.hidden) ~ .fmm-match-body {
  flex: 0 0 auto;
  width: 100%;
  min-height: 0;
  max-height: none;
  align-items: stretch;
}
.match-layout.pre-kickoff .fmm-match-body .fm-pitch-col,
.match-pre-brief:not(.hidden) ~ .fmm-match-body .fm-pitch-col {
  width: 100%;
  flex: 0 0 auto;
}
.match-layout.pre-kickoff .fmm-match-body .mp-wrap,
.match-pre-brief:not(.hidden) ~ .fmm-match-body .mp-wrap {
  width: 100%;
  max-width: none;
  height: auto;
  flex: 0 0 auto;
}
.match-layout.pre-kickoff .fmm-match-body .mp-field,
.match-pre-brief:not(.hidden) ~ .fmm-match-body .mp-field {
  /* 与计分板/评论同宽；高度由球场盒比例推出（页面可滚，不再缩成中间窄条） */
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: none;
  min-height: 0;
  flex: 0 0 auto;
  aspect-ratio: 93.45 / 68;
  margin-inline: 0;
}
/* 赛前：只显示号码，姓名默认隐藏（点选再出），避免 22 人名字糊成一团 */
.match-layout.pre-kickoff .fmm-match .mp-name {
  display: none !important;
}
.match-layout.pre-kickoff .fmm-match .mp-player.selected .mp-name,
.match-layout.pre-kickoff .fmm-match .mp-player.mp-focus .mp-name {
  display: block !important;
}
.match-layout.pre-kickoff .fmm-match .mp-dot {
  width: 26px;
  height: 26px;
}
.match-layout.pre-kickoff .fmm-match .mp-num {
  font-size: var(--fs-xs);
}
.match-layout.pre-kickoff .fmm-commentary,
.match-pre-brief:not(.hidden) ~ .fmm-commentary {
  max-height: min(18vh, 150px);
}
/* 开赛后恢复全宽横场 */
.match-layout.live-kick .fmm-match-body,
.match-layout.ht-kick .fmm-match-body {
  max-height: none;
  flex: 1 1 auto;
  min-height: 0;
  align-items: stretch;
}
.match-layout.live-kick .fmm-match-body .mp-wrap,
.match-layout.ht-kick .fmm-match-body .mp-wrap {
  width: 100%;
  max-width: none;
  height: 100%;
}
.match-layout.live-kick .fmm-match-body .mp-field,
.match-layout.ht-kick .fmm-match-body .mp-field {
  width: 100%;
  height: auto;
  max-height: none;
  min-height: 240px;
  aspect-ratio: 93.45 / 68;
  flex: 1 1 auto;
  margin-inline: 0;
}

/* Mobile live play must keep the pitch ratio. The desktop grid can give the
   body a bounded height; on a narrow screen that would squeeze the pitch into
   the remaining strip between commentary and controls. Let the page scroll
   instead. (The ratio itself is 93.45/68 — see .mp-field.) */
@media (max-width: 1059px) {
  .match-layout.live-kick .fmm-match-body,
  .match-layout.ht-kick .fmm-match-body {
    flex: 0 0 auto;
    height: auto;
  }
  .match-layout.live-kick .fmm-match-body .fm-pitch-col,
  .match-layout.ht-kick .fmm-match-body .fm-pitch-col,
  .match-layout.live-kick .fmm-match-body .mp-wrap,
  .match-layout.ht-kick .fmm-match-body .mp-wrap {
    height: auto;
  }
  .match-layout.live-kick .fmm-match-body .mp-field,
  .match-layout.ht-kick .fmm-match-body .mp-field {
    flex: 0 0 auto;
    height: auto;
  }
  .match-layout.live-kick .fmm-match-body .mp-pitch-slot,
  .match-layout.ht-kick .fmm-match-body .mp-pitch-slot {
    flex: 0 0 auto;
    height: auto;
  }
}
/* 2026-09-20：宽屏开赛/中场按列的可用宽高 contain。
   横向后盒比 93.45/68 ≈ 1.37，比竖场 0.73 宽得多：旧「height:100%」会把宽高
   同时钉死，aspect-ratio 失效，中圈被拉成竖椭圆（桌面实测 0.87）。
   第一版 width/height:auto + 只写 max-* 也不行：.mp-field 没有固有尺寸，
   会塌成 0 高。正解是给 .mp-pitch-slot 确定宽高（flex 吃剩余空间），
   再用容器查询把球场放进「列宽 × 行高」里最大的 93.45/68 矩形。
   手机档仍宽度定高、页面滚动。
   必须放在上面 .live-kick 基础规则之后：同特异性下后写的才生效。 */
@media (min-width: 1060px) {
  .match-layout.fm-match.fmm-match.live-kick .fmm-match-body .mp-pitch-slot,
  .match-layout.fm-match.fmm-match.ht-kick .fmm-match-body .mp-pitch-slot,
  .match-layout.fm-match.fmm-match.pre-kickoff .fmm-match-body .mp-pitch-slot {
    flex: 1 1 0%;
    min-height: 0;
    width: 100%;
    display: grid;
    place-items: center;
    container-type: size;
  }
  .match-layout.fm-match.fmm-match.live-kick .fmm-match-body .mp-field,
  .match-layout.fm-match.fmm-match.ht-kick .fmm-match-body .mp-field,
  .match-layout.fm-match.fmm-match.pre-kickoff .fmm-match-body .mp-field {
    flex: none;
    width: min(100cqw, calc(100cqh * 93.45 / 68));
    height: min(100cqh, calc(100cqw * 68 / 93.45));
    max-width: 100%;
    max-height: 100%;
    min-height: 0;
    aspect-ratio: 93.45 / 68;
    place-self: center;
    margin-inline: auto;
  }
}
/* 2026-09-20：手机横持也走 contain（B 方案）。
   手机横屏的逻辑宽常 >1059px（如 844×390 横过来是 844 宽，触屏却仍是手机），
   所以**不能用宽度阈值**判断，要用 `pointer: coarse` 认触屏。
   竖持时球场先天不匹配（横长比 1.37 塞进竖屏只会变成很小一条），
   因此竖屏不渲染球场，改由 .mp-rotate-hint 提示横持。
   与上面桌面档同款 contain；`@media` 优先级相同、后写生效，
   但两档的媒体条件互斥（桌面 pointer:fine），所以不会打架。

   ⚠ **必须给容器链一个「由视口算出的确定高度」**：
   `container-type: size` 的 `100cqh/100cqw` 要求容器有确定尺寸。桌面档之所以能
   工作，是因为 `@media (min-width:1060px)` 的 `.match-layout` 写了
   `height: calc(100dvh - 0.6rem)`（确定值）。
   手机档若只靠 `@media (max-width:1059px)` 的 `flex: 0 0 auto; height: auto`，
   容器高度就由**内容**决定，而球场高度又依赖 `100cqh` ⇒ **循环依赖** ⇒
   球场被算成 0×0（实测横屏：slotDisplay 是 grid、规则命中了，
   但 fieldRect 是 0×0——极易误判成「规则没生效」）。
   这里显式把高度钉在本视口上，打断循环。 */
@media (pointer: coarse) and (orientation: landscape) {
  /* 上下内边距压到最小：0.65rem × 2 = 20.8px 全还给球场（横屏每一像素都值钱）。
     ⚠ 改这里必须靠 `--fmm-shell-pad`，不能直接写 `padding`——
     下面的高度公式引用的是同一个变量，写死就会出现「公式与 padding 各算各的」
     那类 11px 溢出（见 `:root` 处的注释）。 */
  #screen-match.active {
    --fmm-shell-pad: 0.15rem;
  }
  /* `.match-layout` 的 `max-height: calc(100dvh - 0.6rem)` 是**桌面/竖屏**口径
     （那时外壳 padding 只减一次刚好够）。横屏档必须减**两次** padding。 */
  .match-layout.fm-match.fmm-match.live-kick,
  .match-layout.fm-match.fmm-match.ht-kick,
  .match-layout.fm-match.fmm-match.pre-kickoff {
    max-height: calc(100dvh - 2 * var(--fmm-shell-pad));
    /* 高度已按公式算好，不需要任何滚动。留着 `auto` 会让偶发 1~2px 取整差
       变成一条可拖动的内滚条（触摸端尤其难看）。 */
    overflow: hidden;
  }
  /* 球场区高度 = 视口高 − chrome。这里**必须**给一个「由视口算出」的确定值：
     `container-type: size` 的 `100cqh/100cqw` 要求容器有确定尺寸。桌面档之所以
     能工作，是因为 `.match-layout` 写了 `height: calc(100dvh - 0.6rem)`。
     手机档若只靠 `@media (max-width:1059px)` 的 `flex: 0 0 auto; height: auto`，
     容器高度就由**内容**决定，而内容里的 `.mp-field` 又依赖 `100cqh`
     ⇒ **循环依赖** ⇒ 球场被算成极小值（实测一度只有 61×44px，比例还是对的
     1.374——比例对、尺寸错，最容易误判成「本来就该这么小」）。

     N 的取值由实测标定。**旧值 N=72 是错的**：它假设计分条+控制条只占 72px，
     但 844×390 实测计分条 115px、控制条 57px ⇒ 布局被挤爆（解说栏掉出视口、
     控制条压到球场上，见下方注释）。
     现在计分条已改成**浮层**（见下），所以 body 只需给控制条让位：
     控制条 51 + 间隙 7 ⇒ **N=58**。
     `h 与 N 呈 1:1`（球场高度 = 视口高 − N − dock 高），故 N 每减 1，球场就高 1px。

     🔴 还要再减**外壳上下 padding**（`2 * var(--fmm-shell-pad)`）：
     上面 `.match-layout` 的 max-height 是「外壳内容盒」的高度，body 在里面，
     所以 body 的可用高度 = 外壳内容盒高 − 控制条。2026-09-20 之前这里只减 58
     ⇒ body 比容器还高 20.8px ⇒ 溢出（详见 `:root` 处 `--fmm-shell-pad` 的注释）。 */
  .match-layout.fm-match.fmm-match.live-kick .fmm-match-body,
  .match-layout.fm-match.fmm-match.ht-kick .fmm-match-body,
  .match-layout.fm-match.fmm-match.pre-kickoff .fmm-match-body {
    flex: 0 0 auto;
    height: calc(100vh - 58px - 2 * var(--fmm-shell-pad));
    height: calc(100dvh - 58px - 2 * var(--fmm-shell-pad));
    min-height: 0;
    max-height: none;
  }
  /* 沉浸模式：控制条被 `display: none` 掉了 ⇒ 把那 58px 还给 body。
     ⚠ 必须补这一条：上面的高度公式把 58 写死了，不补的话隐藏控制条
     **只会让页面底下空一块**，球场一点都不会变大（实测过）。
     特异性 0,6,0 > 上面那条的 0,5,0，且写在后面。 */
  .match-layout.fm-match.fmm-match.live-kick.mp-immersive .fmm-match-body,
  .match-layout.fm-match.fmm-match.ht-kick.mp-immersive .fmm-match-body,
  .match-layout.fm-match.fmm-match.pre-kickoff.mp-immersive .fmm-match-body {
    height: calc(100vh - 2 * var(--fmm-shell-pad));
    height: calc(100dvh - 2 * var(--fmm-shell-pad));
  }
  .match-layout.fm-match.fmm-match.live-kick .fmm-match-body .fm-pitch-col,
  .match-layout.fm-match.fmm-match.ht-kick .fmm-match-body .fm-pitch-col,
  .match-layout.fm-match.fmm-match.pre-kickoff .fmm-match-body .fm-pitch-col {
    flex: 1 1 auto;
    height: 100%;
    min-height: 0;
    max-height: none;
  }
  .match-layout.fm-match.fmm-match.live-kick .fmm-match-body .mp-wrap,
  .match-layout.fm-match.fmm-match.ht-kick .fmm-match-body .mp-wrap,
  .match-layout.fm-match.fmm-match.pre-kickoff .fmm-match-body .mp-wrap {
    flex: 1 1 auto;
    height: 100%;
    min-height: 0;
  }
  .match-layout.fm-match.fmm-match.live-kick .fmm-match-body .mp-pitch-slot,
  .match-layout.fm-match.fmm-match.ht-kick .fmm-match-body .mp-pitch-slot,
  .match-layout.fm-match.fmm-match.pre-kickoff .fmm-match-body .mp-pitch-slot {
    flex: 1 1 0%;
    min-height: 0;
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    container-type: size;
  }
  .match-layout.fm-match.fmm-match.live-kick .fmm-match-body .mp-field,
  .match-layout.fm-match.fmm-match.ht-kick .fmm-match-body .mp-field,
  .match-layout.fm-match.fmm-match.pre-kickoff .fmm-match-body .mp-field {
    flex: none;
    width: min(100cqw, calc(100cqh * 93.45 / 68));
    height: min(100cqh, calc(100cqw * 68 / 93.45));
    max-width: 100%;
    max-height: 100%;
    min-height: 0;
    aspect-ratio: 93.45 / 68;
    place-self: center;
    margin-inline: auto;
  }
  /* 横屏手机屏幕极矮：把「非球场」的三块都压到最小，高度全让给球场。
     2026-09-20 实测（844×390，`mobile-pitch-adaptation-verify.mjs` 的 stack 分解）：
       计分条 y=0..115（**115px！**）· body y=115 h=318（底边 433 **溢出视口 43px**）
       · dock y=381 h=51 · 解说栏 y=440 h=70（**完全在视口外**）· 控制条 y=323 h=57（**与球场重叠**）
     ⇒ 旧实现只写了 `height: calc(100dvh - 72px)`，而真实 chrome 远超 72px，
        于是布局被挤爆：解说栏掉出视口、控制条压到球场上。 */
  /* 解说栏：横屏本来就在视口外，显式藏掉（否则它继续参与布局、把 body 顶出去） */
  .match-layout.fm-match.fmm-match.live-kick .fmm-commentary,
  .match-layout.fm-match.fmm-match.ht-kick .fmm-commentary,
  .match-layout.fm-match.fmm-match.pre-kickoff .fmm-commentary {
    display: none;
  }
  /* 计分条：改成**浮层**（横屏可用高度只有 ~295px，它占 62px 就是 21%）。
     绝对定位到球场上方、半透明 + 模糊 ⇒ 这 62px 全部还给球场。
     代价：遮住球场盒顶部约 62px —— 那里是**看台装饰带**（`.mp-stands.top`），
     不是比赛区域，所以观感损失很小。
     实测收益（844×390）：球场高 262 → 310（+18%）；
     真机等效 800×295：167 → 215（+29%）。 */
  .match-layout.fm-match.fmm-match.live-kick,
  .match-layout.fm-match.fmm-match.ht-kick,
  .match-layout.fm-match.fmm-match.pre-kickoff {
    position: relative;
  }
  .match-layout.fm-match.fmm-match.live-kick .fmm-scoreboard,
  .match-layout.fm-match.fmm-match.ht-kick .fmm-scoreboard,
  .match-layout.fm-match.fmm-match.pre-kickoff .fmm-scoreboard {
    /* ⚠ 必须 `!important`：`index.html:1219` 给这个 header 写了内联
       `style="position:relative"`，**内联样式优先级高于任何样式表规则**，
       不加 `!important` 这条 `position: absolute` 会被静默忽略
       （伪装成「规则没生效」）。 */
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 30;
    padding: 0.18rem 0.5rem;
    border-radius: 0 0 8px 8px;
    background: rgba(13, 19, 28, 0.62);
    backdrop-filter: blur(6px);
  }
  .match-layout.fm-match.fmm-match.live-kick .fmm-scoreboard .fmm-stats-toggle,
  .match-layout.fm-match.fmm-match.ht-kick .fmm-scoreboard .fmm-stats-toggle,
  .match-layout.fm-match.fmm-match.pre-kickoff .fmm-scoreboard .fmm-stats-toggle {
    display: none;
  }
  .match-layout.fm-match.fmm-match.live-kick .fmm-scoreboard .fm-sb-name,
  .match-layout.fm-match.fmm-match.ht-kick .fmm-scoreboard .fm-sb-name,
  .match-layout.fm-match.fmm-match.pre-kickoff .fmm-scoreboard .fm-sb-name {
    font-size: 0.86rem;
    line-height: 1.1;
  }
  .match-layout.fm-match.fmm-match.live-kick .fmm-scoreboard .fm-sb-short,
  .match-layout.fm-match.fmm-match.ht-kick .fmm-scoreboard .fm-sb-short,
  .match-layout.fm-match.fmm-match.pre-kickoff .fmm-scoreboard .fm-sb-short {
    display: none;
  }
  .match-layout.fm-match.fmm-match.live-kick .fmm-scoreboard .fm-sb-clock,
  .match-layout.fm-match.fmm-match.ht-kick .fmm-scoreboard .fm-sb-clock,
  .match-layout.fm-match.fmm-match.pre-kickoff .fmm-scoreboard .fm-sb-clock {
    font-size: 1.05rem;
    line-height: 1.1;
  }
  /* ── 2026-09-22：横屏「非球场高度」再压一轮（用户报「比分模块太大」） ──
     🔴 先纠一条**错的注释**：上面 7252-7257 声称比分浮层「遮住的是看台装饰带
     （`.mp-stands.top`），不是比赛区域，所以观感损失很小」——**实测证伪**。
     `.mp-stands { height: 5.5% }`，800×295 下看台带只有 **11.3px**，
     而比分条 61.6px **整块都与 `.mp-camera` 相交** ⇒ 约 **50px 压在真实比赛区**。

     实测（`scripts/_mobile-match-chrome-lab.mjs`，800×295 = 等效真机去掉浏览器工具栏）：
       比分条 61.6px（占视口 **20.9%**）· 控球条 22.1 · 控制条 51 ⇒ 三块合计 **45.7%**
       球场盒 206.2，被比分条压掉 61.6 ⇒ 可见球场只有 **160.9**
     （844×390 三块合计 34.5% —— **屏幕越矮，chrome 占比越夸张**，而 800×295 才是常见形态）

     本轮改两处（lab 候选 C7）：**可见球场 160.9 → 189.0（+28.1px，+17.5%）**，零信息损失。
       ① 比分条中列**三行压成一行** —— 高度主因是中列竖排 赛事名/时钟/LIVE，
          **不是队徽**（队徽 30px 才是下限）。
          ⚠ 实测「省掉赛事名」与「保留赛事名」高度**完全一样**（都是 38.1px）
            ⇒ 那就保留，别白丢信息。
       ② 控球条去掉上下留白（22.1 → 18.3）。
     未做（需要交互决策，别静默上）：控球条整条隐藏还能再 +35px，
       但它同时承载 `.mp-fmm-ticker` 字幕（「⚽ 进球」这类提示）⇒ 要配自动淡出，
       不能直接藏。详见 `docs/measurements/mobile-match-chrome-2026-09-22.txt`。 */
  .match-layout.fm-match.fmm-match.live-kick .fmm-scoreboard .fm-sb-center,
  .match-layout.fm-match.fmm-match.ht-kick .fmm-scoreboard .fm-sb-center,
  .match-layout.fm-match.fmm-match.pre-kickoff .fmm-scoreboard .fm-sb-center {
    flex-direction: row;
    align-items: center;
    gap: 0.4rem;
  }
  .match-layout.fm-match.fmm-match.live-kick .fmm-scoreboard .fm-sb-comp,
  .match-layout.fm-match.fmm-match.ht-kick .fmm-scoreboard .fm-sb-comp,
  .match-layout.fm-match.fmm-match.pre-kickoff .fmm-scoreboard .fm-sb-comp {
    font-size: 0.6rem;
    max-width: 5rem;
  }
  .match-layout.fm-match.fmm-match.live-kick .fmm-scoreboard .fm-sb-live,
  .match-layout.fm-match.fmm-match.ht-kick .fmm-scoreboard .fm-sb-live,
  .match-layout.fm-match.fmm-match.pre-kickoff .fmm-scoreboard .fm-sb-live {
    margin-top: 0;
  }
  /* 底栏里的「替补席条」在横屏是纯装饰，藏掉让 dock 从 51px 降到 ~24px */
  .match-layout.fm-match.fmm-match.live-kick .mp-bench-strip,
  .match-layout.fm-match.fmm-match.ht-kick .mp-bench-strip,
  .match-layout.fm-match.fmm-match.pre-kickoff .mp-bench-strip {
    display: none;
  }
  .match-layout.fm-match.fmm-match.live-kick .mp-fmm-dock,
  .match-layout.fm-match.fmm-match.ht-kick .mp-fmm-dock,
  .match-layout.fm-match.fmm-match.pre-kickoff .mp-fmm-dock {
    min-height: 0;
    /* 0.16 → 0.04rem：控球条去掉上下留白（22.1 → 18.3px，实测） */
    padding: 0.04rem 0.45rem;
    margin-top: 0.06rem;
    grid-template-rows: auto;
  }
  /* 控制条：压薄 */
  .match-layout.fm-match.fmm-match.live-kick .fmm-match-bar,
  .match-layout.fm-match.fmm-match.ht-kick .fmm-match-bar,
  .match-layout.fm-match.fmm-match.pre-kickoff .fmm-match-bar {
    padding: 0.22rem 0.4rem;
    padding-bottom: max(0.22rem, env(safe-area-inset-bottom, 0px));
    border-radius: 8px;
    gap: 0.25rem 0.4rem;
  }
}
/* 竖持手机：不渲染小球场，给「请横持」提示。
   只在触屏 + 竖屏 + 窄宽时出现；桌面永远不命中（pointer: fine）。 */
.mp-rotate-hint {
  display: none;
}
@media (pointer: coarse) and (orientation: portrait) {
  .match-layout.fm-match.fmm-match.live-kick .mp-rotate-hint,
  .match-layout.fm-match.fmm-match.ht-kick .mp-rotate-hint,
  .match-layout.fm-match.fmm-match.pre-kickoff .mp-rotate-hint {
    display: flex;
  }
  /* 竖屏藏球场（它只会是屏幕中间很小一条，没有观看价值）。
     ⚠ 要藏的是 `.mp-pitch-slot`（球场本体），**不是 `.mp-wrap`**——
     `.mp-rotate-hint` 是 `.mp-wrap` 的**子元素**（与 `.mp-pitch-slot` 同级），
     藏 `.mp-wrap` 会把提示自己一起藏掉（实测：hint 祖先 display:none ⇒ 尺寸 0，
     而它自身的 `display: flex` 规则明明命中了，极易误判成「规则没生效」）。 */
  .match-layout.fm-match.fmm-match.live-kick .fmm-match-body .mp-pitch-slot,
  .match-layout.fm-match.fmm-match.ht-kick .fmm-match-body .mp-pitch-slot,
  .match-layout.fm-match.fmm-match.pre-kickoff .fmm-match-body .mp-pitch-slot {
    display: none;
  }
  /* ⚠ 藏掉球场后 .fmm-match-body / .fm-pitch-col 会塌成 0 高（它们的高度原本
     由球场撑起），提示元素就跟着变 0 高、看不见。给容器兜最小高度把提示托起来。
     三层都要给：`.fmm-match-body` 是对外高度、`.fm-pitch-col` 与 `.mp-wrap`
     是 hint 的祖先链（都是 flex 容器），少给一层就会在那一层塌掉。 */
  .match-layout.fm-match.fmm-match.live-kick .fmm-match-body,
  .match-layout.fm-match.fmm-match.ht-kick .fmm-match-body,
  .match-layout.fm-match.fmm-match.pre-kickoff .fmm-match-body {
    min-height: 40vh;
    flex: 1 1 auto;
    height: auto;
  }
  .match-layout.fm-match.fmm-match.live-kick .fmm-match-body .fm-pitch-col,
  .match-layout.fm-match.fmm-match.ht-kick .fmm-match-body .fm-pitch-col,
  .match-layout.fm-match.fmm-match.pre-kickoff .fmm-match-body .fm-pitch-col {
    min-height: 40vh;
    flex: 1 1 auto;
    height: auto;
    max-height: none;
  }
  .match-layout.fm-match.fmm-match.live-kick .fmm-match-body .mp-wrap,
  .match-layout.fm-match.fmm-match.ht-kick .fmm-match-body .mp-wrap,
  .match-layout.fm-match.fmm-match.pre-kickoff .fmm-match-body .mp-wrap {
    min-height: 40vh;
    flex: 1 1 auto;
    height: auto;
    display: flex;
    flex-direction: column;
  }
  .match-layout.fm-match.fmm-match.live-kick .mp-rotate-hint,
  .match-layout.fm-match.fmm-match.ht-kick .mp-rotate-hint,
  .match-layout.fm-match.fmm-match.pre-kickoff .mp-rotate-hint {
    display: flex;
    flex: 1 1 auto;
    min-height: 8rem;
  }
}

/* ── 全屏观赛 `:fullscreen`（2026-09-20）────────────────────────────────
   为什么这条最重要：手机横持时视口高只有 ~390px，浏览器工具栏（地址栏）
   还要吃掉 ~95px ⇒ `100dvh ≈ 295px`。**这才是「手机横屏看比赛还是太小」
   的根因**——CSS 里再怎么调 padding 也补不回那 95px。
   进全屏后工具栏消失，`dvh` 直接等于屏幕高（295 → 390，**+32%**）。
   上面的横屏档写的是 `height: calc(100dvh - 58px)`，`dvh` 变大 ⇒ 高度公式
   **一个字都不用改**，球场自动变大。这里只处理「全屏外壳」的观感。

   支持面（2026-09 查证）：Android Chrome/Edge、桌面 Chrome/Edge/Firefox、
   iPadOS Safari ✅；**iPhone Safari ❌ 不支持任意元素全屏**（只有 <video>）。
   不支持时 JS 会把按钮 `hidden`，用户看不到这个入口。

   ⚠ 必须显式写 `position: fixed; inset: 0`，**不能只依赖 UA 的 `:fullscreen` 样式**：
   横屏档给 `.match-layout.….live-kick` 写了 `position: relative`（特异性 0,4,0），
   author 样式优先于 UA 样式 ⇒ 会把 UA 的 `position: fixed` 顶掉，
   而 `position: relative` 下 `width/height: 100%` 的百分比基准不再是视口
   ⇒ 全屏元素可能只有内容那么高。所以这里用 `!important` 钉死。 */
.match-layout.fm-match.fmm-match:fullscreen,
.match-layout.fm-match.fmm-match:-webkit-full-screen {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none;
  /* `.match-layout.fm-match` 有 `max-height: calc(100dvh - 0.6rem)` 与
     `overflow-y: auto`：全屏时必须去掉，否则留下 0.6rem 黑边、还多出滚动条 */
  max-height: none;
  overflow: hidden;
  margin: 0;
  border-radius: 0;
  /* 横屏全屏时刘海/圆角屏在**左右**也有安全区；不处理球场会贴进切角里。
     只加左右内边距 ⇒ 不影响上面 `100dvh - 58px` 的纵向计算。 */
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  /* UA 给全屏元素铺黑底；换成应用底色，与页面其余部分一致 */
  background: var(--bg, #0d131c);
}
/* 终场战报长于一屏，允许滚动；底栏继续用 sticky 保留退出入口。
   直播时的 overflow:hidden 仍保留，避免球场播放期间产生页面滚动。 */
.match-layout.fm-match.fmm-match.ft-kick:fullscreen,
.match-layout.fm-match.fmm-match.ft-kick:-webkit-full-screen {
  overflow-y: auto;
}
.mp-rotate-hint {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 2rem 1rem;
  text-align: center;
  color: var(--text-2, #cbd5e1);
}
.mp-rotate-hint .mp-rotate-icon {
  width: 3.25rem;
  height: 3.25rem;
  border: 2px solid currentColor;
  border-radius: 0.45rem;
  animation: mp-rotate-sway 1.8s ease-in-out infinite;
}
.mp-rotate-hint .mp-rotate-title {
  font-size: var(--fs-lg, 1.05rem);
  font-weight: 600;
}
.mp-rotate-hint .mp-rotate-sub {
  font-size: var(--fs-sm, 0.85rem);
  opacity: 0.75;
}
@keyframes mp-rotate-sway {
  0%, 40% { transform: rotate(0deg); }
  60%, 100% { transform: rotate(90deg); }
}
@media (prefers-reduced-motion: reduce) {
  .mp-rotate-hint .mp-rotate-icon { animation: none; }
}
.brief-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem 0.75rem;
  margin-bottom: 0.4rem;
  font-size: var(--fs-base);
}
.brief-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-bottom: 0.4rem;
}
.brief-chip {
  display: inline-block;
  padding: 0.12rem 0.45rem;
  border-radius: 99px;
  font-size: var(--fs-2xs);
  font-weight: 700;
  background: rgba(148, 163, 184, 0.15);
  color: #cbd5e1;
  border: 1px solid rgba(148, 163, 184, 0.25);
}
.brief-chip.weather {
  background: rgba(56, 189, 248, 0.12);
  color: #7dd3fc;
  border-color: rgba(56, 189, 248, 0.3);
}
.brief-chip.hot {
  background: rgba(239, 68, 68, 0.15);
  color: #fca5a5;
  border-color: rgba(239, 68, 68, 0.35);
}
.brief-chip.good {
  background: rgba(34, 197, 94, 0.12);
  color: #86efac;
  border-color: rgba(34, 197, 94, 0.3);
}
.brief-chip.warn {
  background: rgba(245, 158, 11, 0.12);
  color: #fcd34d;
  border-color: rgba(245, 158, 11, 0.3);
}
.brief-chip.board {
  background: rgba(167, 139, 250, 0.12);
  color: #c4b5fd;
  border-color: rgba(167, 139, 250, 0.3);
}
.brief-form-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.65rem;
  margin-bottom: 0.4rem;
  font-size: var(--fs-sm);
}
/* 队名与方块之间不换行 */
.brief-form-team {
  white-space: nowrap;
  font-weight: 600;
}
.brief-form-vs {
  font-size: var(--fs-xs);
  opacity: 0.7;
}
/* 最近五场：5 个独立结果方块（W 绿 / D 灰 / L 红），代替旧的「WWDLW」一坨 pill。
   方块等宽、可换行不散；不足 5 场用 · 占位保持视觉对齐。 */
.form-strip {
  display: inline-flex;
  gap: 0.16rem;
  align-items: center;
  line-height: 1;
  vertical-align: middle;
}
.form-cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 4px;
  font-size: var(--fs-2xs);
  font-weight: 800;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}
.form-cell.win {
  background: rgba(34, 197, 94, 0.22);
  color: #86efac;
}
.form-cell.draw {
  background: rgba(148, 163, 184, 0.2);
  color: #cbd5e1;
}
.form-cell.loss {
  background: rgba(239, 68, 68, 0.2);
  color: #fca5a5;
}
.form-cell.none {
  background: rgba(148, 163, 184, 0.1);
  color: rgba(148, 163, 184, 0.5);
}
.form-cell.empty {
  width: auto;
  padding: 0.08rem 0.4rem;
  background: rgba(30, 41, 59, 0.9);
  color: #e2e8f0;
}
/* 浅色主题下方块文字加深，避免在白底上太淡 */
html[data-theme="light"] .form-cell.win { color: #15803d; }
html[data-theme="light"] .form-cell.draw { color: #475569; }
html[data-theme="light"] .form-cell.loss { color: #b91c1c; }
html[data-theme="light"] .form-cell.none { color: rgba(100, 116, 139, 0.6); }
html[data-theme="light"] .form-cell.empty { background: rgba(241, 245, 249, 0.9); color: var(--text); }
.form-pill {
  display: inline-block;
  margin-left: 0.25rem;
  padding: 0.08rem 0.4rem;
  border-radius: 6px;
  font-weight: 800;
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  background: rgba(30, 41, 59, 0.9);
  color: #e2e8f0;
}
.form-pill.tone-hot {
  background: rgba(34, 197, 94, 0.2);
  color: #86efac;
}
.form-pill.tone-cold {
  background: rgba(239, 68, 68, 0.18);
  color: #fca5a5;
}
.brief-line {
  font-size: var(--fs-sm);
  color: #cbd5e1;
  margin: 0.12rem 0;
}
.prematch-brief.compact .brief-line {
  color: var(--muted, #94a3b8);
}

/* ── 双方**预计**首发（赛前简报尾部，可折叠）────────────────────────────
   为什么要折叠：手机横屏下 `#match-pre-brief` 只有 `min(36vh, 300px)` 高、内滚
   （见上面 `.match-pre-brief`），而赛前讲话是**必填**交互。本块在 DOM 里排在
   讲话**之后**（`renderLineupsPreviewHtml` 在 `openMatch` 里 `insertAdjacentHTML`
   追加）⇒ 折叠时只多占一行 `summary`，讲话的几何位移是 **0**。
   桌面（pointer: fine 且 ≥900px）由 JS 默认写 `open`。
   ⚠ 展开后的高度不设上限：外层面板本身有 `max-height` + `overflow-y: auto`，
     在这里再套一层滚动条会出双滚动条（历史坑，见 `.prematch-brief.full` 注释）。 */
.brief-lineups {
  margin: 0.5rem 0 0.15rem;
  border-top: 1px solid rgba(148, 163, 184, 0.22);
  padding-top: 0.3rem;
}
.brief-lineups > summary {
  display: flex;
  align-items: center;
  min-height: 1.6rem;
  padding: 0.1rem 0;
  cursor: pointer;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: #cbd5e1;
}
.brief-lineups[open] > summary {
  margin-bottom: 0.3rem;
}
.brief-lineup-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.3rem 0.8rem;
}
.brief-lineup-col {
  min-width: 0;
}
.brief-lineup-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.35rem;
  margin-bottom: 0.15rem;
  font-size: var(--fs-sm);
}
.brief-lineup-team {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.brief-lineup-formation {
  font-size: var(--fs-2xs);
}
.brief-lineup-row {
  display: grid;
  grid-template-columns: 2.4rem 1.4rem minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0.25rem;
  padding: 0.05rem 0;
  font-size: var(--fs-sm);
  line-height: 1.35;
}
.brief-lineup-row .ln-pos {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-2xs);
  color: var(--muted, #94a3b8);
}
.brief-lineup-row .ln-num {
  text-align: right;
  font-weight: 700;
  color: #cbd5e1;
  font-variant-numeric: tabular-nums;
}
.brief-lineup-row .ln-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.brief-lineup-row .ln-ovr {
  font-size: var(--fs-2xs);
  color: var(--muted, #94a3b8);
}
.brief-lineup-note {
  margin-top: 0.3rem;
  font-size: var(--fs-2xs);
  line-height: 1.35;
}
html[data-theme="light"] .brief-lineups > summary,
html[data-theme="light"] .brief-lineup-row .ln-num {
  color: var(--text);
}
html[data-theme="light"] .prematch-brief.full {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(59, 130, 246, 0.28);
}
html[data-theme="light"] .brief-line {
  color: var(--text);
}
html[data-theme="light"] .brief-chip {
  color: var(--text);
}
.career-dash {
  font-size: var(--fs-base);
  line-height: 1.45;
}
.career-stats {
  margin: 0.4rem 0 0;
  padding-left: 1.1rem;
  line-height: 1.55;
}
.row-unavailable {
  opacity: 0.72;
}
.match-speed-bar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin: 0.35rem 0 0.15rem;
}
.match-speed-bar .btn.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.poach-bids {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.poach-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.55rem 0.7rem;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.poach-actions {
  display: flex;
  gap: 0.35rem;
}
.scout-report {
  margin: 0.75rem 0;
  padding: 0.65rem 0.75rem;
  background: var(--bg2);
  border-left: 3px solid var(--primary);
  border-radius: 0 8px 8px 0;
  font-size: var(--fs-base);
}
.scout-report-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.35rem;
}
.scout-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0.35rem 0 0;
}
.scout-risks {
  margin: 0.4rem 0 0;
  padding-left: 1.1rem;
  color: var(--muted);
  font-size: var(--fs-base);
}
.export-reminder {
  margin: 0.5rem 0 0;
  padding: 0.45rem 0.6rem;
  background: rgba(230, 180, 80, 0.15);
  border: 1px solid var(--warn);
  border-radius: 8px;
  color: var(--warn);
  font-size: var(--fs-base);
}
.export-reminder.hidden { display: none; }
.season-summary {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  padding: 1rem;
}
.season-summary.hidden { display: none; }
.season-summary-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.25rem 1.4rem;
  max-width: 420px;
  width: 100%;
  text-align: center;
}
.season-trop-list {
  text-align: left;
  margin: 0.5rem auto;
  max-width: 18rem;
}
.match-log .event.briefing {
  color: var(--primary);
  font-weight: 600;
}
.match-log .event.coach {
  color: var(--warn);
}
/* 触屏：按钮加大一档 */
@media (pointer: coarse) {
  .btn {
    min-height: 2.5rem;
    padding-left: 0.9rem;
    padding-right: 0.9rem;
  }
  .tabs .tab {
    min-height: 2.4rem;
    padding: 0.45rem 0.65rem;
  }
  .match-actions .btn {
    flex: 1 1 auto;
    min-width: 7rem;
  }
  .table-wrap {
    -webkit-overflow-scrolling: touch;
  }
}

/* ===== 日间模式全面补丁 ===== */
html[data-theme="light"] .btn {
  background: #fff;
  color: var(--text);
  box-shadow: 0 1px 2px rgba(30, 50, 90, 0.06);
}
html[data-theme="light"] .btn:hover:not(:disabled) {
  background: #f8fafc;
}
/* primary 必须覆盖白底，否则白底白字 */
html[data-theme="light"] .btn.primary,
html[data-theme="light"] button.btn.primary,
html[data-theme="light"] #btn-new-game,
html[data-theme="light"] #btn-play-match,
html[data-theme="light"] #btn-next-season,
html[data-theme="light"] #btn-sim-fast,
html[data-theme="light"] #btn-ht-continue {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.28);
}
html[data-theme="light"] .btn.primary:hover:not(:disabled),
html[data-theme="light"] button.btn.primary:hover:not(:disabled),
html[data-theme="light"] #btn-new-game:hover:not(:disabled) {
  background: var(--primary-hover) !important;
  border-color: var(--primary-hover) !important;
  color: #fff !important;
}
html[data-theme="light"] .btn.danger {
  background: #fff;
  color: var(--bad);
  border-color: color-mix(in srgb, var(--bad) 45%, var(--border));
}
html[data-theme="light"] .btn.ghost {
  background: transparent;
  box-shadow: none;
  color: var(--text);
}
html[data-theme="light"] .topbar {
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  border-bottom-color: var(--border);
}
html[data-theme="light"] .card {
  box-shadow: 0 2px 12px rgba(30, 50, 90, 0.06);
}
html[data-theme="light"] .bar,
html[data-theme="light"] .training-fit-row .bar,
html[data-theme="light"] .report-bar-wrap {
  background: var(--bar-track);
}
html[data-theme="light"] select,
html[data-theme="light"] input[type="text"],
html[data-theme="light"] input:not([type]),
html[data-theme="light"] .ht-subs select,
html[data-theme="light"] .ht-tactics select,
html[data-theme="light"] .ht-tactics input[type="range"],
html[data-theme="light"] #formation-select,
html[data-theme="light"] .filters select,
html[data-theme="light"] .start-form input,
html[data-theme="light"] .start-form select {
  background: #fff;
  color: var(--text);
  border-color: var(--input-border);
}
html[data-theme="light"] option {
  background: #fff;
  color: var(--text);
}
html[data-theme="light"] .export-reminder {
  background: #fffbeb;
  border-color: #f59e0b;
  color: #92400e;
}
html[data-theme="light"] .season-summary {
  background: rgba(15, 23, 42, 0.4);
}
html[data-theme="light"] .season-summary-card {
  background: #fff;
  border-color: var(--border);
  color: var(--text);
}
html[data-theme="light"] .match-speed-bar .btn.active {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
}
html[data-theme="light"] .modal {
  background: rgba(15, 23, 42, 0.4);
}
html[data-theme="light"] #toast {
  background: #fff !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  box-shadow: 0 8px 24px rgba(30, 50, 90, 0.15) !important;
}
html[data-theme="light"] .mp-card-meta .bad {
  color: var(--event-injury);
}
html[data-theme="light"] .badge {
  background: rgba(37, 99, 235, 0.12);
  color: var(--primary);
}
html[data-theme="light"] .badge.GK { background: rgba(161, 98, 7, 0.12); color: var(--warn); }
html[data-theme="light"] .badge.DEF { background: rgba(37, 99, 235, 0.12); color: var(--primary); }
html[data-theme="light"] .badge.MID { background: rgba(15, 138, 79, 0.12); color: var(--good); }
html[data-theme="light"] .badge.ATT { background: rgba(201, 42, 54, 0.12); color: var(--bad); }
html[data-theme="light"] .scout-attr-chip {
  background: #e8edf4;
  border-color: #b8c3d1;
  color: #0f172a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}
html[data-theme="light"] .scout-attr-chip em {
  color: #475569;
}
html[data-theme="light"] .news-list li,
html[data-theme="light"] .prematch-brief,
html[data-theme="light"] .facility-card,
html[data-theme="light"] .staff-card,
html[data-theme="light"] .media-card,
html[data-theme="light"] .honor-item,
html[data-theme="light"] .next-match,
html[data-theme="light"] .rank-box,
html[data-theme="light"] .training-summary,
html[data-theme="light"] .career-dash,
html[data-theme="light"] .slot-section {
  background: #f8fafc;
  color: var(--text);
}
html[data-theme="light"] .training-opt,
html[data-theme="light"] .slot-card,
html[data-theme="light"] .poach-row {
  background: #fff;
  color: var(--text);
}
html[data-theme="light"] .match-log,
html[data-theme="light"] .match-header,
html[data-theme="light"] .match-ht-panel,
html[data-theme="light"] .match-report,
html[data-theme="light"] .mp-wrap {
  background: #fff;
  border-color: var(--border);
  color: var(--text);
}
html[data-theme="light"] .match-log .event {
  border-bottom-color: var(--border);
}
html[data-theme="light"] .transfer-window-box {
  background: #f8fafc;
  color: var(--text);
}
html[data-theme="light"] .transfer-window-box.open {
  background: var(--open-bg) !important;
  border-color: var(--open-border) !important;
  color: var(--open-fg) !important;
}
html[data-theme="light"] .transfer-window-box.closed {
  background: var(--closed-bg) !important;
  border-color: var(--closed-border) !important;
  color: var(--closed-fg) !important;
}
html[data-theme="light"] .prefs-seg {
  background: #fff;
}
html[data-theme="light"] .prefs-seg button.active {
  color: #fff;
}
html[data-theme="light"] .tab.active {
  color: var(--text);
}
html[data-theme="light"] .money {
  color: var(--good);
}
html[data-theme="light"] .hint,
html[data-theme="light"] .muted,
html[data-theme="light"] .slot-sub,
html[data-theme="light"] .save-tip {
  color: var(--muted);
}
html[data-theme="light"] .scout-report {
  background: #f8fafc;
  color: var(--text);
}
html[data-theme="light"] .modal-card {
  background: #fff;
  color: var(--text);
}
html[data-theme="light"] table th {
  color: var(--muted);
}
html[data-theme="light"] .form-dot.W {
  background: rgba(15, 138, 79, 0.15);
  color: var(--good);
}
html[data-theme="light"] .form-dot.D {
  background: rgba(161, 98, 7, 0.14);
  color: var(--warn);
}
html[data-theme="light"] .form-dot.L {
  background: rgba(201, 42, 54, 0.12);
  color: var(--bad);
}
/* range 滑块日间可读 */
html[data-theme="light"] input[type="range"] {
  accent-color: var(--primary);
}
/* 滚动条（WebKit） */
html[data-theme="light"] ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
html[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: #c5d0e3;
  border-radius: 99px;
}
html[data-theme="light"] ::-webkit-scrollbar-track {
  background: #eef2f8;
}


/* ===== v168 UI hierarchy and responsive information design ===== */
.nav-stack {
  flex: 1 1 34rem;
  min-width: 20rem;
  display: grid;
  gap: 0.38rem;
}
.primary-nav,
.tabs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.28rem;
}
.primary-tab {
  border: 0;
  border-radius: 8px;
  padding: 0.42rem 0.8rem;
  background: transparent;
  color: var(--muted);
  font-weight: 750;
  font-size: var(--fs-base);
}
.primary-tab:hover { color: var(--text); background: var(--row-hover); }
.primary-tab.active {
  color: #fff;
  background: var(--primary);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--primary) 28%, transparent);
}
.tabs {
  flex-wrap: nowrap;
  min-height: 2rem;
}
.tab { padding: 0.3rem 0.72rem; font-size: var(--fs-sm); }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.topbar-more { position: relative; }
.topbar-more > summary {
  list-style: none;
  display: inline-grid;
  place-items: center;
  min-width: 2.5rem;
  user-select: none;
}
.topbar-more > summary::-webkit-details-marker { display: none; }
.topbar-more-menu {
  position: absolute;
  top: calc(100% + 0.45rem);
  right: 0;
  z-index: 40;
  min-width: 12rem;
  display: grid;
  gap: 0.55rem;
  padding: 0.7rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  box-shadow: var(--shadow);
}
.topbar-more-menu .topbar-prefs { margin: 0; justify-content: space-between; }
.topbar-more-menu > .btn { width: 100%; }

/* 顶栏常驻推进键：主键 + ▾ 菜单，拼成一个分段控件 */
.topbar-continue {
  display: flex;
  align-items: stretch;
  flex-shrink: 0;
}
.topbar-continue-main {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  font-size: var(--fs-base);
  font-weight: 700;
  padding: 0.4rem 0.8rem;
  white-space: nowrap;
}
.topbar-continue-main[data-advance-busy]::before {
  content: "";
  width: 0.78rem;
  height: 0.78rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: calendar-spin 0.8s linear infinite;
}
@keyframes calendar-spin { to { transform: rotate(360deg); } }
/* 比赛日：换个色，一眼看出该踢球了 */
.topbar-continue-main.is-matchday {
  background: var(--good);
  border-color: var(--good);
}
.topbar-continue-more { position: relative; display: flex; }
.topbar-continue-caret {
  list-style: none;
  display: inline-grid;
  place-items: center;
  min-width: 1.9rem;
  padding: 0 0.35rem;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.28);
  user-select: none;
  cursor: pointer;
  font-size: var(--fs-xs);
}
.topbar-continue-caret::-webkit-details-marker { display: none; }
.topbar-continue-more[open] .topbar-continue-caret span { transform: rotate(180deg); }
.topbar-continue-caret span { display: block; transition: transform 0.18s ease; }
.topbar-continue-menu {
  position: absolute;
  top: calc(100% + 0.45rem);
  right: 0;
  z-index: 40;
  min-width: 11rem;
  display: grid;
  gap: 0.35rem;
  padding: 0.5rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  box-shadow: var(--shadow);
}
.topbar-continue-menu > .btn {
  width: 100%;
  text-align: left;
  white-space: nowrap;
}

.content { max-width: 1480px; }
#tab-dashboard { max-width: 1240px; margin-inline: auto; }
.dashboard-layout {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1rem;
}
.dashboard-workbench-card { grid-column: 1 / -1; }
.dashboard-onboarding-card { grid-column: 1 / -1; }
.dashboard-match-card { grid-column: span 8; }
.dashboard-pulse-card { grid-column: span 4; }
.dashboard-operations-card { grid-column: span 8; }
.dashboard-inbox-card { grid-column: span 4; }
.dashboard-career-card { grid-column: span 4; }
.dashboard-news-card { grid-column: span 8; }
.dashboard-section-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.dashboard-section-head h2 { margin-bottom: 0.75rem; }
.dashboard-eyebrow {
  display: block;
  margin-bottom: 0.18rem;
  color: var(--primary);
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.dashboard-match-card .next-match {
  min-height: 9rem;
  display: grid;
  align-content: center;
  padding: 1.1rem;
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 12%, var(--bg2)), var(--bg2));
}
.dash-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.dashboard-mini-block { min-width: 0; }
.dashboard-mini-block + .dashboard-mini-block { margin-top: 0.8rem; }
.dashboard-mini-block h3 { margin: 0 0 0.4rem; }
.dashboard-ops-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
  margin-top: 0.85rem;
}
.dashboard-ops-grid .dashboard-mini-block + .dashboard-mini-block { margin-top: 0; }
.dashboard-finance-block {
  margin-top: 0.85rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--border);
}
.dashboard-career-card .dash-badges { margin-top: 0.5rem; }
.dashboard-news-card .news-list { max-height: 18rem; }
.dashboard-workbench-status {
  display: inline-flex;
  align-items: center;
  min-height: 1.8rem;
  padding: 0.2rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: 800;
  white-space: nowrap;
}
.dashboard-workbench-status.ready { color: var(--good); border-color: color-mix(in srgb, var(--good) 45%, var(--border)); }
.dashboard-workbench-status.warning { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 48%, var(--border)); }
.dashboard-workbench-status.critical { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 50%, var(--border)); }
.dashboard-priorities { display: grid; gap: 0.5rem; }

/* 今日焦点:把最高优先级的一件事放大到行首,给整页一个“现在该干嘛”的主心骨。 */
.dashboard-focus {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 0.7rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--focus-tone, var(--primary)) 13%, var(--card)), var(--card));
  box-shadow: 0 1px 0 color-mix(in srgb, var(--focus-tone, var(--primary)) 8%, transparent);
}
.dashboard-focus.critical { --focus-tone: var(--bad); }
.dashboard-focus.warning { --focus-tone: var(--warn); }
.dashboard-focus.info { --focus-tone: var(--primary); }
.dashboard-focus-icon {
  font-size: var(--fs-5xl);
  line-height: 1;
}
.dashboard-focus-kicker {
  display: block;
  margin-bottom: 0.14rem;
  color: var(--focus-tone, var(--primary));
  font-size: var(--fs-2xs);
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.dashboard-focus-title {
  font-size: var(--fs-2xl);
  font-weight: 800;
  line-height: 1.3;
}
.dashboard-focus-detail {
  margin-top: 0.2rem;
  color: var(--muted);
  font-size: var(--fs-sm);
}
.dashboard-focus-action .btn { margin: 0; }
.dashboard-priority-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--border);
  border-left-width: 4px;
  border-radius: 10px;
  background: var(--bg2);
}
.dashboard-priority-item.critical { border-left-color: var(--bad); }
.dashboard-priority-item.warning { border-left-color: var(--warn); }
.dashboard-priority-item.info { border-left-color: var(--primary); }
.dashboard-priority-icon { font-size: var(--fs-xl); }
.dashboard-priority-copy { min-width: 0; }
.dashboard-priority-title { display: flex; align-items: center; flex-wrap: wrap; gap: 0.45rem; }
.dashboard-priority-title strong,
.dashboard-priority-copy p { overflow-wrap: anywhere; }
.dashboard-priority-copy p { margin: 0.24rem 0 0; color: var(--muted); font-size: var(--fs-xs); }
.dashboard-severity {
  display: inline-flex;
  padding: 0.1rem 0.38rem;
  border-radius: 999px;
  font-size: var(--fs-2xs);
  font-weight: 900;
  line-height: 1.35;
}
.dashboard-severity.critical { color: var(--bad); background: color-mix(in srgb, var(--bad) 12%, var(--card)); }
.dashboard-severity.warning { color: var(--warn); background: color-mix(in srgb, var(--warn) 13%, var(--card)); }
.dashboard-severity.info { color: var(--primary); background: color-mix(in srgb, var(--primary) 11%, var(--card)); }
.dashboard-priority-empty {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.9rem;
  border: 1px dashed color-mix(in srgb, var(--good) 45%, var(--border));
  border-radius: 10px;
  color: var(--good);
  background: color-mix(in srgb, var(--good) 7%, var(--card));
}
.dashboard-priority-empty span { color: var(--muted); font-size: var(--fs-xs); }
.dashboard-priority-empty-secondary { border-style: solid; color: var(--text); }
.dashboard-workbench-foot {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 1rem;
  margin-top: 0.9rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--border);
}
.dashboard-workbench-foot h3 { margin: 0 0 0.5rem; }
.dashboard-quick-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.45rem; }
.dashboard-quick-action {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
  padding: 0.6rem 0.68rem;
  border: 1px solid var(--border);
  border-radius: 9px;
  color: var(--text);
  background: var(--card);
  text-align: left;
  cursor: pointer;
}
.dashboard-quick-action:hover { border-color: color-mix(in srgb, var(--primary) 50%, var(--border)); background: color-mix(in srgb, var(--primary) 6%, var(--card)); }
.dashboard-quick-action span:last-child { min-width: 0; }
.dashboard-quick-action strong,
.dashboard-quick-action small { display: block; overflow-wrap: anywhere; }
.dashboard-quick-action small { margin-top: 0.1rem; color: var(--muted); font-size: var(--fs-2xs); }
.dashboard-quick-icon { font-size: var(--fs-lg); }
.dashboard-advance-summary,
.dashboard-advance-empty { min-height: 4.5rem; }

.dashboard-onboarding {
  display: grid;
  gap: 0.7rem;
}
.dashboard-onboarding-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.dashboard-onboarding-head h2 { margin: 0; }
.dashboard-onboarding-progress {
  flex: 0 0 auto;
  padding: 0.22rem 0.55rem;
  border: 1px solid color-mix(in srgb, var(--primary) 45%, var(--border));
  border-radius: 999px;
  color: var(--primary);
  font-size: var(--fs-xs);
  font-weight: 800;
}
.dashboard-onboarding-intro {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-sm);
}
.dashboard-onboarding-steps {
  display: grid;
  gap: 0.45rem;
}
.dashboard-onboarding-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--bg2);
}
.dashboard-onboarding-step.current {
  border-color: color-mix(in srgb, var(--primary) 55%, var(--border));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 16%, transparent);
}
.dashboard-onboarding-step.done { opacity: 0.72; }
.dashboard-onboarding-icon { font-size: var(--fs-xl); }
.dashboard-onboarding-copy { min-width: 0; }
.dashboard-onboarding-copy strong,
.dashboard-onboarding-copy small { display: block; overflow-wrap: anywhere; }
.dashboard-onboarding-copy small { margin-top: 0.14rem; color: var(--muted); font-size: var(--fs-xs); }
.dashboard-onboarding-state { color: var(--muted); font-size: var(--fs-xs); white-space: nowrap; }
.dashboard-onboarding-dismiss { justify-self: start; }
.dashboard-advance-empty {
  display: grid;
  align-content: center;
  padding: 0.7rem;
  border-radius: 9px;
  color: var(--muted);
  background: var(--bg2);
  font-size: var(--fs-xs);
}
.dashboard-advance-head { display: flex; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.4rem; }
.dashboard-advance-head span { color: var(--muted); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.dashboard-advance-items { display: grid; gap: 0.32rem; }
.dashboard-advance-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.42rem; align-items: start; font-size: var(--fs-xs); }
.dashboard-advance-item strong,
.dashboard-advance-item small { display: block; overflow-wrap: anywhere; }
.dashboard-advance-item small { margin-top: 0.08rem; color: var(--muted); font-size: var(--fs-2xs); }
.dashboard-advance-item.critical strong { color: var(--bad); }
.dashboard-advance-item.warning strong { color: var(--warn); }

#tab-finance { max-width: 1240px; margin-inline: auto; }
.finance-layout {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1rem;
}
.finance-summary-card,
.finance-ledger-card { grid-column: 1 / -1; }
.finance-sponsorship-card { grid-column: 1 / -1; }
.finance-debt-card { grid-column: 1 / -1; }
.finance-budget-card { grid-column: span 7; }
.finance-breakdown-card { grid-column: span 5; }
.finance-section-head { gap: 1rem; align-items: center; }
.finance-section-head h2 { margin: 0; }
.finance-status {
  display: inline-flex;
  align-items: center;
  min-height: 1.8rem;
  padding: 0.2rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: 800;
}
.finance-status.stable { color: var(--good); border-color: color-mix(in srgb, var(--good) 48%, var(--border)); }
.finance-status.tight { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 48%, var(--border)); }
.finance-status.critical { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 48%, var(--border)); }
.finance-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 1rem;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.finance-metrics > div {
  min-width: 0;
  padding: 0.9rem 1rem;
  border-right: 1px solid var(--border);
}
.finance-metrics > div:last-child { border-right: 0; }
.finance-metrics span,
.finance-budget-projection span {
  display: block;
  margin-bottom: 0.22rem;
  color: var(--muted);
  font-size: var(--fs-xs);
}
.finance-metrics strong,
.finance-budget-projection strong {
  display: block;
  overflow-wrap: anywhere;
  font-size: var(--fs-lg);
}
.finance-budget-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}
.finance-budget-controls label {
  display: grid;
  grid-template-columns: minmax(7rem, auto) minmax(7rem, 1fr) minmax(4rem, auto);
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
  color: var(--muted);
  font-size: var(--fs-sm);
}
.finance-budget-controls input { width: 100%; min-width: 0; }
.finance-budget-controls strong { color: var(--text); text-align: right; }
.finance-budget-projection {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-top: 1rem;
  border-top: 1px solid var(--border);
}
.finance-budget-projection > div {
  min-width: 0;
  padding: 0.75rem 0.8rem;
  border-bottom: 1px solid var(--border);
}
.finance-sponsorship {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin-top: 0.85rem;
  border-top: 1px solid var(--border);
}
.finance-sponsorship > div {
  min-width: 0;
  padding: 0.75rem 0.8rem;
  border-bottom: 1px solid var(--border);
}
.finance-sponsorship span { display: block; color: var(--muted); font-size: var(--fs-xs); }
.finance-sponsorship strong { display: block; margin-top: 0.2rem; overflow-wrap: anywhere; }
.finance-sponsorship .sponsor-offers { grid-column: 1 / -1; }
.finance-sponsorship .sponsor-offer-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 0.55rem; border-top: 1px solid var(--border); }
.finance-sponsorship .sponsor-offer { padding: 0.6rem; border-right: 1px solid var(--border); }
.finance-sponsorship .sponsor-offer:last-child { border-right: 0; }
.finance-sponsorship .sponsor-offer button { margin-top: 0.5rem; }
.finance-debt {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  margin-top: 0.85rem;
  border-top: 1px solid var(--border);
}
.finance-debt > div { min-width: 0; padding: 0.75rem 0.8rem; border-bottom: 1px solid var(--border); }
.finance-debt span { display: block; color: var(--muted); font-size: var(--fs-xs); }
.finance-debt strong { display: block; margin-top: 0.2rem; overflow-wrap: anywhere; }
.finance-debt .debt-facilities { grid-column: 1 / -1; }
.debt-facility-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0; margin-top: 0.55rem; border-top: 1px solid var(--border); }
.debt-facility { padding: 0.6rem; border-right: 1px solid var(--border); }
.debt-facility:last-child { border-right: 0; }
.debt-facility button { margin-top: 0.5rem; }
.finance-category-label { display: inline-flex; align-items: center; gap: 0.45rem; white-space: nowrap; }
.finance-category-dot { width: 0.62rem; height: 0.62rem; flex: 0 0 0.62rem; border-radius: 2px; background: #94a3b8; }
.finance-cat-ticket { background: #22c55e; }
.finance-cat-matchday { background: #84cc16; }
.finance-cat-commercial { background: #14b8a6; }
.finance-cat-broadcast { background: #38bdf8; }
.finance-cat-prize { background: #eab308; }
.finance-cat-competition { background: #10b981; }
.finance-cat-league { background: #06b6d4; }
.finance-cat-financing { background: #6366f1; }
.finance-cat-transfer { background: #f97316; }
.finance-cat-loan { background: #fb7185; }
.finance-cat-wage { background: #ef4444; }
.finance-cat-facility { background: #a78bfa; }
.finance-cat-contract { background: #c084fc; }
.finance-cat-staff { background: #818cf8; }
.finance-cat-scouting { background: #2dd4bf; }
.finance-cat-board { background: #f59e0b; }
.finance-ledger-wrap { max-height: 32rem; overflow: auto; }
#finance-breakdown-table,
#finance-ledger-table { min-width: 38rem; }
#finance-ledger-table th:nth-last-child(-n + 2),
#finance-ledger-table td:nth-last-child(-n + 2),
#finance-breakdown-table th:not(:first-child),
#finance-breakdown-table td:not(:first-child) { text-align: right; }
#finance-category-filter { min-width: 9rem; }

.squad-heading-tools { display: flex; align-items: center; gap: 0.65rem; }
.registration-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0.75rem 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel-2);
}
.registration-summary > div {
  min-width: 0;
  padding: 0.65rem 0.75rem;
  border-right: 1px solid var(--border);
}
.registration-summary > div:last-child { border-right: 0; }
.registration-summary span,
.registration-summary strong { display: block; }
.registration-summary span { color: var(--muted); font-size: var(--fs-xs); }
.registration-summary strong { margin-top: 0.2rem; font-size: var(--fs-base); }
.squad-registration-card input[type="checkbox"] { width: 1rem; height: 1rem; }
.squad-plan-heading { align-items: flex-start; gap: 1rem; }
.squad-plan-heading h2 { margin: 0; }
.squad-plan-heading .hint { max-width: 62rem; margin: 0.3rem 0 0; }
.squad-plan-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg2);
}
.squad-plan-metrics > div { padding: 0.65rem 0.75rem; border-right: 1px solid var(--border); }
.squad-plan-metrics > div:last-child { border-right: 0; }
.squad-plan-metrics span,
.squad-plan-metrics strong { display: block; }
.squad-plan-metrics span { color: var(--muted); font-size: var(--fs-xs); }
.squad-plan-metrics strong { margin-top: 0.2rem; }
.squad-plan-registration {
  margin: 0.65rem 0;
  padding: 0.5rem 0.65rem;
  border-left: 3px solid var(--good);
  background: color-mix(in srgb, var(--good) 8%, transparent);
  color: var(--muted);
}
.squad-plan-registration.risk {
  border-left-color: var(--bad);
  background: color-mix(in srgb, var(--bad) 8%, transparent);
}
.squad-plan-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(17rem, 1fr); gap: 0.85rem; align-items: start; }
.squad-plan-table { min-width: 48rem; }
.squad-plan-table td:last-child { min-width: 14rem; color: var(--muted); }
.squad-plan-priorities {
  padding: 0.7rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg2);
}
.squad-plan-priorities h3 { margin: 0 0 0.55rem; font-size: var(--fs-md); }
.squad-plan-priorities ul { display: grid; gap: 0.55rem; margin: 0; padding: 0; list-style: none; }
.squad-plan-priorities li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.25rem 0.45rem; align-items: center; }
.squad-plan-priorities li .muted { grid-column: 2; font-size: var(--fs-xs); line-height: 1.35; }
/* 更衣室：领袖 / 小圈子 / 不合三列等宽，与阵容规划同一套视觉 */
.dressing-room-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dressing-room-block {
  padding: 0.7rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg2);
  min-width: 0;
}
.dressing-room-block h3 { margin: 0 0 0.55rem; font-size: var(--fs-md); }
.dressing-room-block ul { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.dressing-room-block li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.4rem; min-width: 0; }
.dressing-room-block li .muted { font-size: var(--fs-xs); }
.view-switch {
  display: inline-flex;
  padding: 0.18rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg2);
}
.view-switch button {
  border: 0;
  border-radius: 6px;
  padding: 0.34rem 0.65rem;
  background: transparent;
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 700;
}
.view-switch button.active { background: var(--primary); color: #fff; }
#squad-table.squad-compact .squad-detail { display: none; }
#squad-table.squad-compact { min-width: 46rem; }
#squad-table.squad-full { min-width: 84rem; }
#squad-table th:first-child,
#squad-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  width: 3.1rem;
  background: var(--card);
}
#squad-table th:nth-child(2),
#squad-table td:nth-child(2) {
  position: sticky;
  left: 3.1rem;
  z-index: 2;
  background: var(--card);
  box-shadow: 1px 0 0 var(--border);
}
#squad-table thead th:first-child,
#squad-table thead th:nth-child(2) { z-index: 4; top: 0; position: sticky; }
#squad-table thead th { position: sticky; top: 0; background: var(--card); }
#squad-table thead th:nth-child(-n + 2) { z-index: 5; }
#squad-table tr.me td:first-child,
#squad-table tr.me td:nth-child(2) { background: color-mix(in srgb, var(--primary) 12%, var(--card)); }
#squad-table thead th { color: var(--muted); font-weight: 700; font-size: var(--fs-xs); letter-spacing: 0.02em; }

.btn:focus-visible,
.tab:focus-visible,
.primary-tab:focus-visible,
.view-switch button:focus-visible,
button.club-link:focus-visible,
button.player-link:focus-visible,
button.staff-link:focus-visible,
button.nation-link:focus-visible,
select:focus-visible,
input:focus-visible,
summary:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--primary) 48%, transparent);
  outline-offset: 2px;
}

@media (max-width: 980px) {
  .dashboard-match-card,
  .dashboard-operations-card,
  .dashboard-news-card { grid-column: span 7; }
  .dashboard-pulse-card,
  .dashboard-inbox-card,
  .dashboard-career-card { grid-column: span 5; }
  .finance-budget-card,
  .finance-breakdown-card { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  .topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
  .brand { grid-column: 1; grid-row: 1; }
  .actions { grid-column: 2; grid-row: 1; }
  .meta { grid-column: 1 / -1; grid-row: 2; order: initial; width: auto; }
  .nav-stack { grid-column: 1 / -1; grid-row: 3; min-width: 0; width: 100%; }
  .primary-nav,
  .tabs {
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .primary-nav::-webkit-scrollbar,
  .tabs::-webkit-scrollbar { display: none; }
  .primary-tab { flex: 1 0 auto; min-height: 2.4rem; }
  .tabs { order: initial; width: auto; padding: 0.05rem 0 0.18rem; mask-image: none; }
  .tab { min-height: 2.2rem; }
  .topbar-more-menu { position: fixed; top: 4.25rem; right: 0.75rem; }
  .dashboard-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-layout > .card { grid-column: span 1; }
  .dashboard-workbench-card,
  .dashboard-onboarding-card,
  .dashboard-match-card,
  .dashboard-operations-card,
  .dashboard-news-card { grid-column: 1 / -1 !important; }
  .finance-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .finance-metrics > div:nth-child(2) { border-right: 0; }
  .finance-metrics > div:nth-child(-n + 2) { border-bottom: 1px solid var(--border); }
  .finance-budget-controls { grid-template-columns: minmax(0, 1fr); }
  .finance-sponsorship .sponsor-offer-list { grid-template-columns: minmax(0, 1fr); }
  .finance-sponsorship .sponsor-offer { border-right: 0; border-bottom: 1px solid var(--border); }
  .finance-sponsorship .sponsor-offer:last-child { border-bottom: 0; }
  .debt-facility { border-right: 0; border-bottom: 1px solid var(--border); }
  .debt-facility:last-child { border-bottom: 0; }
  .finance-debt { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .modal { padding: 0; align-items: stretch; }
  .modal-card,
  .modal-card.wide,
  .modal-card.search-modal {
    width: 100%;
    max-width: none;
    min-height: 100dvh;
    max-height: 100dvh;
    border: 0;
    border-radius: 0;
    padding: 1rem;
  }
}

@media (max-width: 620px) {
  .meta { gap: 0.45rem 0.75rem; }
  .meta span { font-size: var(--fs-xs); }
  .primary-tab { padding-inline: 0.72rem; font-size: var(--fs-sm); }
  .dashboard-layout { grid-template-columns: minmax(0, 1fr); }
  .dashboard-layout > .card { grid-column: 1 !important; }
  .dashboard-workbench-foot,
  .dashboard-quick-actions { grid-template-columns: minmax(0, 1fr); }
  .dashboard-priority-item { grid-template-columns: auto minmax(0, 1fr); }
  .dashboard-issue-action { grid-column: 2; justify-self: start; }
  .dashboard-onboarding-step { grid-template-columns: auto minmax(0, 1fr); }
  .dashboard-onboarding-state { grid-column: 2; justify-self: start; white-space: normal; }
  .dashboard-ops-grid { grid-template-columns: minmax(0, 1fr); }
  .dashboard-match-card .next-match { min-height: 7rem; }
  .finance-budget-controls label { grid-template-columns: minmax(6.8rem, auto) minmax(5rem, 1fr) minmax(4rem, auto); }
  .finance-budget-projection { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .finance-sponsorship { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .squad-heading { align-items: flex-start; gap: 0.6rem; }
  .squad-heading-tools { align-items: flex-end; flex-direction: column; }
  .squad-plan-heading { flex-direction: column; }
  .squad-plan-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .squad-plan-metrics > div:nth-child(2) { border-right: 0; }
  .squad-plan-metrics > div:nth-child(-n + 2) { border-bottom: 1px solid var(--border); }
  .squad-plan-grid { grid-template-columns: minmax(0, 1fr); }
  .dressing-room-grid { grid-template-columns: minmax(0, 1fr); }
  .registration-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .registration-summary > div:nth-child(2) { border-right: 0; }
  .registration-summary > div:nth-child(-n + 2) { border-bottom: 1px solid var(--border); }
  #squad-table { font-size: var(--fs-sm); }
  #squad-table.squad-compact { min-width: 42rem; }
  .modal-close { width: 2.75rem; height: 2.75rem; top: 0.25rem; right: 0.25rem; }
}

/* Keep auxiliary interface text readable; pitch labels remain separately calibrated. */
.inbox-cat.mini,
.inbox-pri,
.brief-chip,
.form-pill,
.contract-cell,
.stats-league-cell { font-size: max(0.75rem, 12px); }
.delegation-heading {
  align-items: flex-start;
  gap: 1rem;
}

.delegation-heading h2 {
  margin-bottom: 0.3rem;
}

.delegation-mode,
.delegation-field,
.delegation-principles label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}

.delegation-mode {
  min-width: 12rem;
}

.delegation-status,
.delegation-director-note {
  margin: 0.65rem 0;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 0.6rem;
  background: color-mix(in srgb, var(--surface-inset) 78%, transparent);
}

.delegation-grid,
.delegation-principles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.7rem;
  margin-top: 0.7rem;
}

.delegation-principles {
  padding-top: 0.8rem;
  border-top: 1px solid var(--border);
}

.delegation-principles .delegation-check {
  flex-direction: row;
  align-items: center;
  align-self: end;
  min-height: 2.45rem;
}

.delegation-player-lock {
  grid-column: span 2;
}

.delegation-player-lock select {
  min-height: 7.5rem;
}

.delegation-actions {
  margin-top: 0.8rem;
  flex-wrap: wrap;
}

.pitch.delegation-readonly .tac-slot {
  cursor: default;
}

@media (max-width: 720px) {
  .delegation-heading {
    flex-direction: column;
  }

  .delegation-mode,
  .delegation-player-lock {
    width: 100%;
    grid-column: auto;
  }
}