/* =============================================================================
 * CS2 CUP FOR NUAA —— 样式层
 * 深色底 + CS2 橙，无第三方依赖、无动画特效，加载快
 * 断点：> 900px 双栏（左侧赛事列表 + 右侧内容），<= 900px 单栏上下堆叠
 * ========================================================================== */

/* ---------------------------------------------------------------------------
   0. 展示字体 Rajdhani（原来是引 Google Fonts 的，但国内打不开，
      所以改成把字体文件放在站内自己托管 —— 少一个外部请求，国内也能正常显示）。
      文件就是同目录下的 rajdhani-500/600/700.woff2，只有 latin 子集（15KB×3），
      中文不在这里面，会自动回退到系统字体。
   ------------------------------------------------------------------------ */
@font-face {
  font-family: "Rajdhani";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("rajdhani-500.woff2") format("woff2");
}
@font-face {
  font-family: "Rajdhani";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("rajdhani-600.woff2") format("woff2");
}
@font-face {
  font-family: "Rajdhani";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("rajdhani-700.woff2") format("woff2");
}

/* ---------------------------------------------------------------------------
   1. 主题变量（想整体换色改这里就行）
   ------------------------------------------------------------------------ */
:root {
  /* 底色 / 层次：采用改版建议的冷调基色（#0D1118 底 + #151B24 卡片） */
  --bg:            #0d1118;  /* 页面底色 */
  --bg-elev:       #151b24;  /* 卡片 / 侧边栏底色 */
  --bg-elev-2:     #1c232e;  /* 悬停 / 高亮底色 */
  --border:        #232b36;
  --border-strong: #333e4c;

  /* 文字：按建议提亮次要文字，保证小字也过 WCAG AA（对比度写在后面注释里） */
  --text:          #f3f5f7;  /* 主要文字 */
  --text-dim:      #a7b0bd;  /* 次要文字  卡片上约 8.5:1 */
  --text-faint:    #7d8b9c;  /* 最弱文字  卡片上约 5.4:1（原来 #6b7887 只有 4.1:1，不达标） */

  --orange:        #f5a623;  /* CS2 橙（主色）：只用于选中/可点/近期 */
  --orange-hi:     #ffc04d;
  --orange-dim:    rgba(245, 166, 35, 0.14);
  --orange-glow:   rgba(245, 166, 35, 0.35);

  --win:           #3fd37c;  /* 胜者 / 已结束 */
  --live:          #ff5d55;  /* 进行中 */
  --wait:          #8b98a8;  /* 未开始（原来 #7f8d9e 偏暗，提亮一档） */

  --radius:        12px;
  --radius-sm:     7px;
  --gap:           16px;
  --sidebar-w:     280px;    /* 280 → 248：当前只有一届赛事，把横向空间还给内容 */

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei",
          "PingFang SC", "Hiragino Sans GB", Roboto, Helvetica, Arial, sans-serif;
  /* 展示字体（标题 / 队名 / 比分 / 赛制徽章），拉丁字母和数字用它，中文自动回退系统字体 */
  --font-display: "Rajdhani", "Segoe UI", "Microsoft YaHei", "PingFang SC", sans-serif;

  --shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.35);
  --shadow-md:   0 6px 20px rgba(0, 0, 0, 0.45);
  --shadow-glow: 0 8px 26px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--orange-dim), 0 0 26px rgba(245, 166, 35, 0.12);
}

/* ---------------------------------------------------------------------------
   2. 基础重置
   ------------------------------------------------------------------------ */
*,
*::before,
*::after { box-sizing: border-box; }

/* 保证 hidden 属性永远生效（display 覆盖 hidden 会导致遮罩永远盖在页面上） */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15.5px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------------------------------------------------------------------------
   2b. 环境背景（v4：冷调暗场 + 极淡网格 + 颗粒）
   ---------------------------------------------------------------------------
 * 档位：DESIGN_VARIANCE 5 / MOTION_INTENSITY 2 / VISUAL_DENSITY 4
 *
 * v3 的问题：主光是暖橙的，整块背景是"暖"的，跟想要的方向相反。
 * v4 按用户要求改成：
 *   ① 主背景【统一】为偏冷的深蓝黑 —— 几乎均匀，不再有冷暖拉锯
 *   ② 网格和光晕都【减弱】—— 全局那束暖光直接去掉
 *   ③ 氛围效果【只在标题附近】保留（见下方 .tournament-head::before）
 *
 * 所以这一层现在只干一件事：铺一块干净、偏冷的暗底 + 一层几乎看不见的网格。
 * 图层（下→上）：.bg 底色 → ::after 网格 → .bg-grain 颗粒
 * ------------------------------------------------------------------------ */

.bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background:
    /* 极轻的收边，只为不让四角"发飘"。不留任何颜色倾向 */
    radial-gradient(142% 100% at 50% 0%, transparent 58%, rgba(4, 7, 13, 0.5) 100%),
    /* 冷调深蓝黑：上、中、下只差一点点，追求"统一"而不是"层次" */
    linear-gradient(180deg, #0c1017 0%, #0e131b 52%, #0c1017 100%);
}

/* 网格：比 v3 再淡一档（0.026 → 0.016），并改成冷色调的白，
   和冷底子同一色系，不会跳出来。四周照旧用遮罩淡出。 */
.bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(158, 190, 235, 0.016) 1px, transparent 1px),
    linear-gradient(90deg, rgba(158, 190, 235, 0.016) 1px, transparent 1px);
  background-size: 44px 44px;
  background-position: center;
  -webkit-mask-image: radial-gradient(112% 84% at 50% 34%, #000 0%, rgba(0, 0, 0, 0.25) 52%, transparent 76%);
  mask-image: radial-gradient(112% 84% at 50% 34%, #000 0%, rgba(0, 0, 0, 0.25) 52%, transparent 76%);
}

/* 细腻颗粒，压住渐变的色带感 */
.bg-grain {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* 手机上：网格加密一档（屏幕小，44px 显得太空），颗粒略减 */
@media (max-width: 900px) {
  .bg::after { background-size: 32px 32px; }
  .bg-grain { opacity: 0.045; }
}

/* 滚动条与文字选中 */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 999px;
  border: 3px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }
html { scrollbar-color: var(--border-strong) var(--bg); }
::selection { background: var(--orange-dim); color: var(--text); }

h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* 标题 / 队名 / 比分 / 徽章 / 数字用展示字体（中文自动回退系统字体） */
.brand__name,
.tournament-head__name,
.stage__title,
.stage__format,
.match-card__score,
.match-card__map,
.team,
.detail-head__team,
.stat-nav__item,
.stat-table,
.team-card__name {
  font-family: var(--font-display);
}

/* ---------------------------------------------------------------------------
   3. 整体骨架
   ------------------------------------------------------------------------ */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  min-height: 100vh;
}

/* ---------------------------------------------------------------------------
   4. 左侧边栏
   ------------------------------------------------------------------------ */
.sidebar {
  background: linear-gradient(180deg, rgba(17, 21, 28, 0.98), rgba(12, 15, 21, 0.95));
  border-right: 1px solid var(--border);
  padding: 24px 16px;
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  overflow-y: auto;
}

.brand { padding: 0 6px 20px; border-bottom: 1px solid var(--border); }

.brand__name {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 1.6px;
  line-height: 1.2;
}
.brand__for {
  color: var(--orange); /* 回退颜色 */
  background: linear-gradient(120deg, var(--orange), var(--orange-hi));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.brand__sub {
  margin-top: 6px;
  font-size: 13px;
  color: var(--text-faint);
  letter-spacing: 1px;
}

.side-section { margin-top: 20px; }

.side-section__title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--text-faint);
  padding: 0 6px 10px;
}

.tournament-list { display: flex; flex-direction: column; gap: 6px; }

/* --- 侧边栏的赛事选项卡 ---
   效果全部挂在 .tournament-item 这个类上，所以以后新增多少届赛事都自动带着，
   不需要为某一届单独写任何东西。 */
.tournament-item {
  display: block;
  width: 100%;
  padding: 14px 19px 14px 17px;
  border-radius: var(--radius-sm);
  background: transparent;
  border-left: 3px solid transparent;
  color: var(--text-dim);
  text-align: left;
  transition: background-color 0.18s ease, color 0.18s ease,
              border-left-color 0.2s ease, box-shadow 0.24s ease,
              transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 悬停：往右让一点，左侧竖条亮起"半档"橙色，底色浮起 —— 和比赛卡"灯条亮起"是同一套语言。
   半档是有意的：整档橙色留给"当前选中"，这样悬停和选中一眼能分清。 */
.tournament-item:hover {
  background: var(--bg-elev-2);
  border-left-color: rgba(245, 166, 35, 0.5);
  color: var(--text);
  transform: translateX(3px);
  box-shadow: -2px 0 14px -8px rgba(245, 166, 35, 0.8);
}
.tournament-item:hover .tournament-item__sub { color: var(--text-dim); }

/* 按下：很快地"沉"一下再弹回 —— 手感上确认点到了 */
.tournament-item:active {
  transform: translateX(3px) scale(0.98);
  background: rgba(245, 166, 35, 0.17);
  transition-duration: 0.07s;
}

/* 选中：整档橙色竖条 + 底色 + 光晕，并播一次"落定"的小动画 */
.tournament-item.is-active {
  background: var(--orange-dim);
  border-left-color: var(--orange);
  color: var(--text);
  box-shadow: 0 0 0 1px var(--orange-dim), -2px 0 14px -6px rgba(245, 166, 35, 0.85);
  animation: navSettle 0.42s cubic-bezier(0.16, 1, 0.3, 1);
}
/* 从左边轻轻荡过来再稳住（列表每次切换赛事都会重建，所以点一下就会重播一次） */
@keyframes navSettle {
  0%   { transform: translateX(-6px); }
  55%  { transform: translateX(2px); }
  100% { transform: translateX(0); }
}
.tournament-item.is-active:hover { transform: translateX(0); }
.tournament-item.is-active:active { transform: scale(0.98); }

.tournament-item__name {
  display: block;
  font-size: 14.5px;
  font-weight: 600;
  word-break: break-word;
}
.tournament-item__sub {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  color: var(--text-faint);
  transition: color 0.18s ease;
}

.side-note {
  margin-top: 22px;
  padding: 10px 12px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-faint);
}

/* ---------------------------------------------------------------------------
   5. 右侧主区域
   ------------------------------------------------------------------------ */
.main {
  min-width: 0;
  padding: 24px 26px 48px;
  /* 靠左，不居中 —— 居中会在左右各留一大块空，看着散。
     宽度从最初的 1180 收到 940 再回到 1040：比原来紧凑一点，
     但比赛卡改成单列后每张卡仍然拿得到接近 990px 的完整宽度。
     不加 margin-inline —— 让它老老实实贴着侧边栏往右排。 */
  max-width: 1400px;
}

.tournament-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  /* 整页只有这一处有"氛围"：标题背后一圈极淡的暖光。
     背景已经是统一的冷调，所以这里用暖橙不是为了暖，是为了
     "把视线第一眼引到赛事名上"——全站唯一的光源在这里。

     isolation + z-index:-1 是刻意的：这样光晕一定在标题文字【背后】、
     又在页面背景【之上】，而且被锁在这个元素里不会漏出去影响别的层。 */
  position: relative;
  isolation: isolate;
}
.tournament-head::before {
  content: "";
  position: absolute;
  left: -72px;
  top: 50%;
  width: min(660px, 98%);
  height: 250px;
  transform: translateY(-50%);
  background: radial-gradient(closest-side ellipse at 36% 50%,
    rgba(245, 166, 35, 0.12),
    rgba(245, 166, 35, 0.04) 44%,
    transparent 76%);
  filter: blur(30px);
  pointer-events: none;
  z-index: -1;
}
.tournament-head__text { min-width: 0; }

.tournament-head__name {
  font-size: 27.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  line-height: 1.25;
}
.tournament-head__sub {
  margin-top: 6px;
  font-size: 13.5px;
  color: var(--text-dim);
}

/* ---------------------------------------------------------------------------
   5b. 右上角悬浮入口：两个 bilibili 链接（固定定位，滚动时一直在）
   ------------------------------------------------------------------------ */
.quicklinks {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  pointer-events: none;          /* 空白处不挡底下的内容 */
}
.ql {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  max-width: min(88vw, 460px);
  padding: 5px 13px 5px 6px;
  border: 1px solid var(--border);
  border-radius: 999px;
  /* 降权：原来是浅灰底 + 明显投影，和赛事标题抢注意力。
     现在做成"安静的小入口"—— 半透明、无投影、字缩小、整条降低不透明度，
     鼠标放上去才恢复完整可见。文字保留，信息一点没少。 */
  background: rgba(15, 19, 26, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--text-faint);
  font-size: 13px;
  line-height: 1.3;
  text-decoration: none;
  opacity: 0.82;
  transition: transform 0.18s ease, border-color 0.18s ease, background-color 0.18s ease,
              color 0.18s ease, opacity 0.18s ease;
}
.ql:hover,
.ql:focus-visible {
  transform: translateX(-3px);
  background: rgba(23, 28, 37, 0.95);
  border-color: var(--border-strong);
  color: var(--text);
  opacity: 1;
}
.ql:active { transform: translateX(-3px) scale(0.98); }

.ql__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  transition: transform 0.22s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.ql__icon svg { width: 17px; height: 17px; display: block; }
.ql:hover .ql__icon,
.ql:focus-visible .ql__icon { transform: scale(1.1); }

/* 看直播 → 用"直播红"；bilibili 主页 → 用 bilibili 蓝
   底色饱和度也一起压低，不跟站内的橙色主色争 */
.ql__icon--live { color: #e0706b; background: rgba(255, 93, 85, 0.11); }
.ql__icon--bili { color: #4aa8cc; background: rgba(0, 161, 214, 0.11); }
.ql:hover .ql__icon--live { color: #ff8f89; background: rgba(255, 93, 85, 0.16); }
.ql:hover .ql__icon--bili { color: #5cc8ec; background: rgba(0, 161, 214, 0.16); }

.ql__text {
  min-width: 0;
  /* 绝不换行 —— 之前第二条（20 个字）需要 336px，容器却卡在 330px，
     结果"小电视"那条被挤成两行。这里三个属性一起兜底：
     nowrap 不许换行、overflow 超出裁掉、ellipsis 真的放不下时显示省略号
     （正常宽度下永远用不到省略号，但比换行好看）。 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------------------------------------------------------------------------
   6. 标签页
   ------------------------------------------------------------------------ */
.tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 18px;
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }

.tab {
  flex: 0 0 auto;
  padding: 13px 21px;
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--text-dim);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color 0.16s ease, border-color 0.16s ease;
}
.tab:hover { color: var(--text); transform: translateY(-1px); }
.tab.is-active {
  color: var(--orange);
  border-bottom-color: var(--orange);
  text-shadow: 0 0 16px rgba(245, 166, 35, 0.45);
}

/* 切标签时，下面整块内容重新淡入上浮（.view 已经在做），这里只管按钮本身的手感 */
.tab { transition: color 0.16s ease, border-color 0.16s ease,
                   transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), text-shadow 0.2s ease; }

/* 约赛在非开放时段：页签上挂一个灰色小点（提示"现在点进去也用不了"） */
.tab { position: relative; }
.tab__lock {
  position: absolute;
  top: 11px;
  right: 7px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-faint);
  opacity: 0.75;
}

/* ---------------------------------------------------------------------------
   7b. 约赛（队长通道）
   ------------------------------------------------------------------------ */
.scrim-login {
  max-width: 470px;
  padding: 22px 24px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-left: 3px solid var(--orange);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  animation: cardIn 0.42s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
.scrim-login__head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.scrim-login__badge {
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--orange);
  border: 1px solid rgba(245, 166, 35, 0.42);
  background: rgba(245, 166, 35, 0.1);
}
.scrim-login__title { font-size: 16.5px; font-weight: 700; }
.scrim-login__tip { color: var(--text-dim); font-size: 14.5px; margin-bottom: 14px; }
.scrim-login__note {
  margin-top: 13px;
  padding-top: 12px;
  border-top: 1px dashed var(--border-strong);
  color: var(--text-faint);
  font-size: 13px;
  line-height: 1.75;
}
.scrim-login__form { display: flex; gap: 10px; }
.scrim-code {
  flex: 1 1 auto;
  min-width: 0;
  padding: 11px 13px;
  font: inherit;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text);
  background: var(--bg-elev-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.scrim-code::placeholder {
  letter-spacing: 1px;
  font-weight: 400;
  text-transform: none;
  color: var(--text-faint);
}
.scrim-code:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.14);
}

.scrim-btn {
  flex: 0 0 auto;
  padding: 10px 22px;
  font: inherit;
  font-weight: 700;
  color: #15100a;
  background: var(--orange);
  border: 0;
  border-radius: 999px;          /* 约赛的按钮做成全圆角（胶囊），和上面的状态胶囊是一套形状语言 */
  cursor: pointer;
  transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease,
              transform 0.16s ease, box-shadow 0.16s ease;
}
.scrim-btn:hover { background: var(--orange-hi); box-shadow: 0 8px 20px -10px rgba(245, 166, 35, 0.95); }
.scrim-btn:active { transform: scale(0.98); }          /* 按下去"缩一下"的物理反馈 */
.scrim-btn:focus-visible { outline: 2px solid var(--orange-hi); outline-offset: 2px; }
.scrim-btn--ghost {
  color: var(--text-dim);
  background: transparent;
  border: 1px solid var(--border-strong);
}
.scrim-btn--ghost:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
  box-shadow: none;
}

/* 报错/提醒：一条带色条的窄条，比一行红字好认 */
.scrim-error {
  padding: 8px 12px;
  color: var(--live);
  font-size: 14px;
  line-height: 1.65;
  background: rgba(255, 93, 85, 0.08);
  border-left: 3px solid var(--live);
  border-radius: var(--radius-sm);
}

/* 约赛页的小胶囊：和状态徽章同一套形状规则（色字 + 淡底 + 同色描边 + 必带文字），
   所以不看颜色也能分辨 */
.scrim-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.3px;
  white-space: nowrap;
  color: var(--text-dim);
  border: 1px solid var(--border-strong);
  background: rgba(255, 255, 255, 0.03);
}
.scrim-chip--ask {
  color: var(--orange);
  border-color: rgba(245, 166, 35, 0.42);
  background: rgba(245, 166, 35, 0.1);
}
.scrim-chip--wait {
  color: var(--wait);
  border-color: rgba(139, 152, 168, 0.4);
  background: rgba(139, 152, 168, 0.1);
}
.scrim-chip--done {
  color: var(--win);
  border-color: rgba(63, 211, 124, 0.42);
  background: rgba(63, 211, 124, 0.1);
}

.scrim-me {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
  padding: 12px 16px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-left: 3px solid var(--orange);
  border-radius: var(--radius);
  animation: cardIn 0.42s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
.scrim-me .team__logo { width: 44px; height: 44px; }
.scrim-me .team__logo--placeholder { font-size: 15px; }
.scrim-me__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.scrim-me__team { font-weight: 700; font-size: 16px; }
.scrim-me__hint { color: var(--text-faint); font-size: 13px; }
.scrim-me__stats { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.scrim-me__out { padding: 7px 17px; font-size: 13.5px; }

.scrim-list { display: flex; flex-direction: column; gap: 18px; }
.scrim-match { display: flex; flex-direction: column; }

/* 约赛页的比赛卡 = 主页那张卡，悬停一样"抬手 + 状态色光晕 + 比分轻轻顶一下"，
   但它点了不出详情 —— 所以不给 pointer 光标，也不亮橙色入口，
   光晕用的是这张卡自己的状态色（--light-rgb）*/
.match-card--static { cursor: default; }
.match-card--static:hover {
  border-color: var(--border-strong);
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5), -3px 0 22px -6px rgba(var(--light-rgb), 0.85);
}
.match-card--static:hover .match-card__score { transform: scale(1.06); }

/* 点按钮重绘时不要重播入场动画（只有刚进页面 / 刚验证完码才播一次），
   否则每点一下整页都闪一遍 */
.scrim-list--settled .match-card,
.scrim-list--settled .scrim-zone,
.scrim-me.is-settled { animation: none; }

/* 空状态下面那行小字 */
.scrim-empty__hint { margin-top: 8px; color: var(--text-faint); font-size: 13px; }

/* 卡正下方的约时间区 */
.scrim-zone {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
  padding: 13px 16px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  animation: zoneIn 0.34s cubic-bezier(0.16, 1, 0.3, 1) backwards;
  animation-delay: calc(var(--i, 0) * 48ms + 40ms);
}
.scrim-zone__head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.scrim-ask { color: var(--text-dim); font-size: 14.5px; line-height: 1.7; }
.scrim-when { color: var(--text); font-weight: 700; letter-spacing: 0.3px; }
.scrim-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.scrim-edit {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 2px;
  padding-top: 13px;
  border-top: 1px dashed var(--border-strong);
  animation: zoneIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
.scrim-edit__warn {
  padding: 8px 12px;
  color: var(--orange-hi);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
  background: rgba(245, 166, 35, 0.08);
  border-left: 3px solid var(--orange);
  border-radius: var(--radius-sm);
}
.scrim-time {
  display: block;
  width: 100%;
  max-width: 260px;
  padding: 10px 12px;
  font: inherit;
  color: var(--text);
  background: var(--bg-elev-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.scrim-time:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.14);
}

/* 确认弹窗 */
.modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(6, 9, 14, 0.72);
  animation: fadeIn 0.16s ease;
}
.modal__box {
  width: 100%;
  max-width: 420px;
  padding: 22px 24px;
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  animation: modalIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
.modal__text { white-space: pre-line; color: var(--text); font-size: 15px; line-height: 1.75; margin-bottom: 18px; }
.modal__actions { display: flex; justify-content: flex-end; gap: 10px; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalIn {
  from { opacity: 0; transform: translateY(6px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}
@keyframes zoneIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------------------
   7. 面板通用
   ------------------------------------------------------------------------ */
.panel { min-height: 120px; }

.panel__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.panel__title { font-size: 15.5px; font-weight: 700; }
.panel__meta { font-size: 13px; color: var(--text-faint); }
.panel__meta--right { margin-left: auto; }

.empty-state {
  padding: 34px 18px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  text-align: center;
  color: var(--text-faint);
  font-size: 14.5px;
}

/* 详情页：隐藏顶部的赛事标题和"赛程"标签 */
.tournament-head.is-hidden,
.tabs.is-hidden { display: none; }

/* 入场过渡：淡入 + 轻微上移，统一用一条平滑的缓动曲线 */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.view { animation: fadeUp 0.24s cubic-bezier(0.16, 1, 0.3, 1); }

/* ---------------------------------------------------------------------------
   7b. 全站共用动效
   ---------------------------------------------------------------------------
 * 入场（卡片、列表项）：配合元素的 --i 序号错开，一张接一张浮现。
 * 必须用 backwards 而不是 both —— both 会把最后一帧的 transform 永久锁住，
 * 之后鼠标悬停的"上浮"就再也不生效了（这是个很隐蔽的坑）。
 * ------------------------------------------------------------------------ */
@keyframes cardIn {
  from { opacity: 0; transform: translateY(12px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}
/* 表格行：从下方轻轻滑上来 */
@keyframes rowIn {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------------------
   8. 状态徽章（未开始 / 进行中 / 已结束，赛程卡顶部用到）
   ------------------------------------------------------------------------ */
/* 状态徽章：三种状态用【同一套】样式规则 —— 同样的形状、同样的内边距、
   同样的"色字 + 淡底 + 同色描边"，只有色相不同。
   每条都带文字，所以不依赖颜色也能分辨（色盲友好）。 */
.status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.4px;
  border: 1px solid;
  white-space: nowrap;
}
.status--scheduled {
  color: var(--wait);
  border-color: rgba(139, 152, 168, 0.4);
  background: rgba(139, 152, 168, 0.1);
}
.status--live {
  color: var(--live);
  border-color: rgba(255, 93, 85, 0.45);
  background: rgba(255, 93, 85, 0.12);
}
.status--finished {
  color: var(--win);
  border-color: rgba(63, 211, 124, 0.42);
  background: rgba(63, 211, 124, 0.1);
}
/* 进行中的小红点（带呼吸动画） */
.status--live::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: livePulse 1.6s ease-in-out infinite;
}
@keyframes livePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* ---------------------------------------------------------------------------
   9. 赛程（Major 风格：阶段 → 日期 → 比赛卡）
   比分在中间，左队 / 右队分居两侧，卡片底部是地图与开赛时间
   ------------------------------------------------------------------------ */

/* --- 阶段 --- */
.stage {
  margin-bottom: 30px;
  /* 跟着主列走，左边缘和标题 / 标签栏严格对齐（不要单独限宽，一限就错开） */
}

.stage__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  /* 上下留一样多 —— 文字才会正好落在横条的垂直中线上。
     之前是 padding: 0 0 12px 11px（上 0、下 12px），字贴在顶部，
     橙色竖条比字高出一截，所以看着别扭。 */
  padding: 14px 19px 14px 16px;
  border-bottom: 1px solid var(--border);
  /* 这条竖条原来一直是橙色，但每个阶段都有一条 —— 橙色出现太多次就不值钱了。
     改成中性深灰：悬停时它才亮起橙色光晕，橙色重新变成"这里有反应"的信号。 */
  border-left: 3px solid var(--border-strong);
  margin-bottom: 18px;
  /* 这个元素同时挂着 .stage__head 和 .stage__toggle 两个类，
     transition 只能写一处 —— 写两处的话后一条会把前一条整个覆盖掉。 */
  transition: background-color 0.18s ease, border-left-color 0.2s ease, box-shadow 0.24s ease;
}
/* 阶段标题是个可点击的折叠按钮 */
.stage__toggle {
  width: 100%;
  text-align: left;
}
/* 悬停：整条横条的底色亮起（只变颜色，不挪位置 ——
   之前这里还改了 padding-left，字会突然往左跳一下） */
.stage__toggle:hover { background: rgba(245, 166, 35, 0.06); }
.stage__toggle:active { background: rgba(245, 166, 35, 0.11); }

.stage__chevron {
  margin-left: auto;
  font-size: 13px;
  color: var(--text-faint);
  transition: transform 0.26s cubic-bezier(0.16, 1, 0.3, 1), color 0.18s ease;
}
.stage__toggle:hover .stage__chevron { color: var(--orange); }
.stage--collapsed .stage__chevron { transform: rotate(-90deg); }

/* 鼠标真的放在这条标题栏上，左侧橙色竖条才亮起光晕。
   ⚠️ 不能用 .stage:hover —— .stage 把下面所有比赛卡也包在里面，
   那样鼠标只要停在这个阶段区块内的任何位置（哪怕是某张比赛卡上），
   标题栏都会亮起来，看着像"没碰它自己亮了"。 */
.stage__head:hover { box-shadow: -2px 0 16px -8px rgba(245, 166, 35, 0.9); }

/* 折叠/展开：用 grid-template-rows 0fr↔1fr 做平滑的高度动画 */
.stage__body {
  display: grid;
  grid-template-rows: 1fr;
  opacity: 1;
  transition: grid-template-rows 0.32s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.22s ease;
}
.stage__body-inner { overflow: hidden; min-height: 0; }
.stage__body-inner .day-group:last-child { margin-bottom: 0; }
.stage--collapsed .stage__body {
  grid-template-rows: 0fr;
  opacity: 0;
}
.stage__title { font-size: 18px; font-weight: 800; letter-spacing: 0.3px; }

.stage__format {
  padding: 2px 8px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-dim);
  white-space: nowrap;
}
.stage__note { font-size: 13px; color: var(--text-faint); }

/* --- 日期行 --- */
.day-group { margin-bottom: 22px; }

.day-group__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 15px;
  margin-bottom: 10px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-variant-numeric: tabular-nums;
}
.day-group__date { font-size: 15px; font-weight: 700; }
.day-group__weekday { font-size: 13px; color: var(--text-dim); }

.day-group__badge {
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--orange-dim);
  color: var(--orange);
  font-size: 13px;
  font-weight: 700;
}
/* "今天"：带一个会呼吸的小圆点，扫一眼就知道今天有比赛 */
.day-group__badge--today {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding-left: 6px;
}
.day-group__badge--today::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--orange);
  animation: livePulse 1.6s ease-in-out infinite;
}
.day-group__meta {
  margin-left: auto;
  font-size: 13px;
  color: var(--text-faint);
  white-space: nowrap;
}

/* --- 比赛卡网格：宽屏一行两张 ---
   单列时每张卡会被拉到近 990px 宽，看着太肥、信息也铺得太散。
   两张一行后每张约 490px，是比赛卡比较舒服的尺寸。
   代价：某一天只有一场比赛时，它会只占左半边、右半边空着 ——
   这是所有赛程站的通行做法（HLTV / Liquipedia 也是这样），
   换来的是大部分日子（2 场及以上）都排得满满当当。 */
.match-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.match-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 18px;
  background: linear-gradient(180deg, rgba(20, 25, 33, 0.92), rgba(16, 20, 27, 0.92));
  border: 1px solid var(--border);
  border-left: 3px solid var(--border-strong);
  border-radius: var(--radius);
  /* 灯条颜色抽成变量：只有"鼠标悬停 / 键盘选中"时才亮，
     静止状态不发光 —— 否则没碰它也在亮，像被选中了一样，很误导 */
  --light-rgb: 127, 141, 158;
  box-shadow: var(--shadow-sm);
  /* 入场：同一组里的比赛卡依次浮现 */
  animation: cardIn 0.42s cubic-bezier(0.16, 1, 0.3, 1) backwards;
  animation-delay: calc(var(--i, 0) * 48ms);
  transition: background-color 0.16s ease, border-color 0.16s ease,
              transform 0.16s ease, box-shadow 0.16s ease;
}
/* 只有已结束的比赛能点进去，才给"可点"的手感和高亮 */
.match-card--clickable { cursor: pointer; }
.match-card--clickable:hover,
.match-card--clickable:focus-visible {
  border-color: var(--border-strong);
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5), -3px 0 22px -6px rgba(var(--light-rgb), 0.85);
}
/* 还没结束的比赛：一样能选中（有悬停 / 键盘焦点反馈），但光晕收着，
   点了只弹一句提示 —— 手感上"能选"，视觉上"打不开" */
.match-card--locked { cursor: pointer; }
.match-card--locked:hover,
.match-card--locked:focus-visible {
  border-color: var(--border-strong);
  transform: translateY(-3px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.42), -3px 0 18px -6px rgba(var(--light-rgb), 0.5);
}

/* 状态着色：左侧竖条 + 同色的光晕变量 */
.match-card--finished  { border-left-color: var(--win);  --light-rgb: 63, 211, 124; }
.match-card--live      { border-left-color: var(--live); --light-rgb: 255, 93, 85; }
.match-card--scheduled { border-left-color: var(--wait); --light-rgb: 127, 141, 158; }

/* 悬停时细节跟着动：队标微微放大带光环、比分轻轻"顶"一下、查看数据入口发光 */
.match-card .team__logo {
  transition: transform 0.26s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.26s ease;
}
.match-card:hover .team__logo {
  transform: scale(1.08);
  box-shadow: 0 0 0 3px rgba(var(--light-rgb), 0.24);
}
.match-card .match-card__score { transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1); }
.match-card--clickable:hover .match-card__score { transform: scale(1.06); }
.match-card__link { transition: color 0.18s ease, text-shadow 0.18s ease; }
.match-card--clickable:hover .match-card__link {
  color: var(--orange-hi);
  text-shadow: 0 0 14px rgba(245, 166, 35, 0.55);
}

/* 顶部：状态徽章（左）+ 组别（右，瑞士轮显示"几-几组"） */
.match-card__top {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.match-card__group {
  margin-left: auto;
  padding: 2px 9px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  /* 原来是橙色 —— 但每张卡右上角都有一个，一屏 5 张卡就是 5 处橙，
     橙色到处出现就不值钱了（改版建议 P1-1）。这里只是"1-1组 / 八进四"这种
     分组备注，属于次要信息，改成中性色；橙色留给真正"可点 / 选中"的地方。 */
  color: var(--text-dim);
  white-space: nowrap;
}

/* 主体：左队 | 比分 | 右队 */
.match-card__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.team-side {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.team-side--b { justify-content: flex-end; }

/* 队标：正圆。
   ⚠️ object-fit 必须用 cover 而不是 contain ——
   cover 会让图片铺满整个圆、四角被圆裁掉，所以不管队徽是横的竖的、什么比例，
   看起来都是圆的；contain 会把整张图缩进框内，非方形的队徽就会变成
   "圆圈里嵌着一个长方形"，非常难看（这个坑踩过一次）。 */
.team__logo {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-elev-2);   /* 队徽有透明区域时，衬一层深底 */
}
.team__logo--placeholder {
  border: 1px solid var(--border-strong);
  color: var(--text-dim);
  font-size: 13.5px;
  font-weight: 700;
}
.team__logo-img { width: 100%; height: 100%; object-fit: cover; display: block; }

.team {
  font-size: 15.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.team--tbd { color: var(--text-faint); font-weight: 500; }

/* 弃权场次：比分位置显示"未进行对局"，用弱化色，别跟真比分抢注意力 */
.match-card__map--skip { color: var(--text-faint); font-style: normal; letter-spacing: 0.4px; }

/* 弃权标记：贴在队名靠比分的一侧，灰色不抢眼 */
.team-side__forfeit {
  flex: 0 0 auto;
  padding: 1px 7px;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  background: var(--bg-elev-2);
  color: var(--text-faint);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.4px;
  white-space: nowrap;
}

.team__short { display: none; }   /* 窄屏时启用简称 */

/* 中间比分 */
.match-card__score {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: 0.5px;
  min-width: 66px;
}
.match-card__score .score-sep { color: var(--text-faint); font-weight: 500; font-size: 15.5px; }
.score--win  { color: var(--win); }
.score--lose { color: var(--text-dim); }
.score--tbd  { color: var(--text-faint); font-weight: 600; }
.match-card__score--pending { color: var(--text-faint); }

/* 中间列：比分在上，地图在其正下方 */
.match-card__center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

/* BO3 进行中：比分左右各挂一组"大比分"小灯条。
   点亮顺序：先赢下的那张图点亮【最外侧】的灯条（远离比分那一根），
   所以 B 队那组（在比分右边）用 row-reverse —— 两边的第一胜都往外亮，左右镜像。
   ⚠️ flex: 0 0 auto + min-width 是必须的：这一行挤的时候，没有 min-width 的灯条
   会被压成 0 宽 —— 那就是"颜色改多少遍都看不见"的真正原因（0 宽的元素没有颜色）。
   静止不发光（光晕只留给悬停），靠颜色深浅区分亮/暗。 */
.match-card__scoreline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.series-bars {
  display: flex;
  align-items: center;
  gap: 3px;
  flex: 0 0 auto;          /* 不许压缩 */
}
.series-bars--b { flex-direction: row-reverse; }
.series-bar {
  display: block;
  flex: 0 0 auto;          /* 不许压缩（关键！） */
  min-width: 14px;
  width: 14px;
  height: 6px;
  border-radius: 3px;
  /* 未点亮 = 暗色凹槽：里面是暗的，但加了一圈浅边，
     所以既能看出"这里是一条没亮的灯条"，又不会像白条那样抢眼 */
  background: #39424f;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}
.series-bar.is-on {
  background: #25e57d;     /* 亮起来 = 更鲜艳的绿 */
  box-shadow: none;
}

.match-card__maps {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  font-size: 13px;      /* 小一号，三张图也放得下 */
  color: var(--text-dim);
}
.match-card__map { white-space: nowrap; }
/* 正在打的那张图：橙字加粗（跟"橙 = 当前/可点"这套约定一致，静止不发光） */
.match-card__map--live {
  color: var(--orange);
  font-weight: 700;
}
.match-card__maps-sep { color: var(--text-faint); }

/* 底部：开赛时间 + 赛制 */
.match-card__foot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 9px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}
.match-card__time { white-space: nowrap; }
.match-card__time--tbd { color: var(--text-dim); }
.match-card__link {
  margin-left: auto;
  font-size: 13px;
  font-weight: 600;
  color: var(--orange);
  white-space: nowrap;
}
/* 没结束的比赛：同一个入口，灰色，明确"现在打不开" */
.match-card__link--muted { color: var(--text-faint); }
.match-card--locked:hover .match-card__link--muted,
.match-card--locked:focus-visible .match-card__link--muted { color: var(--text-dim); }

/* ---------------------------------------------------------------------------
   9b. 轻提示（点了还没结束的比赛卡）
   ------------------------------------------------------------------------ */
.toast {
  position: fixed;
  left: 50%;
  bottom: 30px;
  z-index: 90;
  max-width: min(88vw, 440px);
  padding: 12px 20px;
  background: rgba(17, 21, 28, 0.96);
  border: 1px solid var(--border-strong);
  border-left: 3px solid var(--orange);
  border-radius: 10px;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.55);
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.45;
  text-align: center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  pointer-events: none;              /* 别挡住底下的内容 */
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 14px);
  transition: opacity 0.24s ease, transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1),
              visibility 0.24s;
}
.toast.is-show {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
@media (prefers-reduced-motion: reduce) {
  .toast { transition: opacity 0.01ms, visibility 0.01ms; transform: translate(-50%, 0); }
}

/* ---------------------------------------------------------------------------
   10. 比赛详情（选手数据）
   ------------------------------------------------------------------------ */
.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-elev);
  color: var(--text-dim);
  font-size: 13.5px;
  font-weight: 600;
  transition: background-color 0.16s ease, color 0.16s ease,
              transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.16s ease;
}
.back-btn:hover {
  background: var(--bg-elev-2);
  color: var(--text);
  transform: translateX(-3px);
  border-color: var(--border-strong);
}

.detail-head {
  padding: 19px 21px;
  background: linear-gradient(180deg, rgba(20, 25, 33, 0.92), rgba(16, 20, 27, 0.92));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  margin-bottom: 16px;
}
.detail-head__matchup {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  margin-top: 12px;
}
.detail-head__team {
  font-size: 21px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.detail-head__team--a { text-align: left; }
.detail-head__team--b { text-align: right; }
.detail-head__matchup .match-card__score {
  font-size: 31.5px;
  min-width: 112px;
  letter-spacing: 1px;
}
.detail-head__meta { margin-top: 10px; font-size: 13px; color: var(--text-dim); }

/* 选择器：总览 | Dust2 | Mirage | Ancient（总览在最左） */
.stat-nav {
  display: flex;
  gap: 6px;
  margin-bottom: 18px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.stat-nav::-webkit-scrollbar { display: none; }
.stat-nav__item {
  flex: 0 0 auto;
  padding: 6px 13px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-elev);
  color: var(--text-dim);
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}
.stat-nav__item:hover { color: var(--text); }
.stat-nav__item.is-active {
  background: var(--orange-dim);
  border-color: var(--orange);
  color: var(--orange);
}
/* 普通数据 | 趣味数据 之间的小竖线 */
.stat-nav__sep {
  flex: 0 0 auto;
  align-self: stretch;
  width: 1px;
  margin: 4px 2px;
  background: var(--border-strong);
}
/* 模式切换按钮（趣味数据 › / ‹ 普通数据）用橙色区分 */
.stat-nav__item.stat-nav__mode { color: var(--orange); }
.stat-nav__item.stat-nav__mode:hover { color: var(--orange-hi); }

/* 表格容器：切图/切指标时原地替换，新内容做一个轻微淡入 */
.stat-table-wrap { min-height: 60px; }
.stat-area { animation: fadeUp 0.18s cubic-bezier(0.16, 1, 0.3, 1); }
.stat-scroll { overflow-x: auto; }
.stat-table {
  width: 100%;
  border-collapse: collapse;
  background: linear-gradient(180deg, rgba(20, 25, 33, 0.92), rgba(16, 20, 27, 0.92));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  font-variant-numeric: tabular-nums;
}
.stat-table th,
.stat-table td {
  padding: 11px 15px;
  text-align: left;
  white-space: nowrap;
  font-size: 13.5px;
}
.stat-table thead th {
  background: var(--bg-elev-2);
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.4px;
  border-bottom: 1px solid var(--border-strong);
}
.stat-table tbody tr { border-top: 1px solid var(--border); }
.stat-table tbody tr:first-child { border-top: 0; }
.stat-table tbody tr:hover { background: var(--bg-elev-2); }

/* 表格行逐行滑入（--i 在 JS 里给），悬停时左侧亮一条橙线 */
.stat-table tbody tr {
  animation: rowIn 0.32s cubic-bezier(0.16, 1, 0.3, 1) backwards;
  animation-delay: calc(var(--i, 0) * 36ms + 60ms);
  transition: background-color 0.16s ease, box-shadow 0.16s ease;
}
.stat-table tbody tr:hover {
  box-shadow: inset 3px 0 0 var(--orange);
}
.stat-table tbody tr.stat-group { animation: none; }
.stat-table tbody tr.stat-group:hover { box-shadow: none; }
.stat-table .stat-name { font-weight: 600; }
.stat-table .stat-num { text-align: right; }
.stat-rating { font-weight: 700; }
.stat-rating--good { color: var(--win); }   /* ≥ 1.05 绿 */
.stat-rating--bad  { color: var(--live); }  /* ≤ 0.95 红 */
.stat-table th:nth-child(n+2),
.stat-table td:nth-child(n+2) { text-align: right; }
.stat-table .stat-group__label {
  background: var(--bg-elev-2);
  color: var(--text);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.5px;
}

/* 每张地图下面的小比分行：Dust2 13 : 11，胜方绿色 */
.stat-map-score {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
}
.stat-map-score__name { color: var(--text-dim); font-weight: 600; margin-right: 4px; }
.stat-map-score__sep { color: var(--text-faint); }
.stat-map-score .score--win { font-weight: 800; font-size: 15.5px; }
.stat-map-score .score--lose { font-size: 15.5px; }

/* ---------------------------------------------------------------------------
   11. 队伍页（参赛队伍卡）
   ------------------------------------------------------------------------ */
.team-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: start; /* 各自按内容高度，展开 A 不会把同行 B 也拉高 */
}

.team-card {
  position: relative;
  /* 灯条颜色抽成变量：绿=位次已定 / 橙=还没打完。
     悬停光晕、队标光环、行高亮都跟着这个颜色走，改一处全变。 */
  --light: var(--orange);
  --light-rgb: 245, 166, 35;

  background: linear-gradient(180deg, rgba(20, 25, 33, 0.92), rgba(16, 20, 27, 0.92));
  border: 1px solid var(--border);
  border-left: 3px solid var(--light);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm), -2px 0 14px -6px rgba(var(--light-rgb), 0.5);
  overflow: hidden;

  /* 入场：按 --i 错开，一张接一张淡入上浮（和比赛卡同一套） */
  animation: cardIn 0.42s cubic-bezier(0.16, 1, 0.3, 1) backwards;
  animation-delay: calc(var(--i, 0) * 55ms);
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.22s ease;
}

/* 灯条：绿色 = 位次已定不会再变，橙色 = 还没打完 */
.team-card--finalized { --light: var(--win); --light-rgb: 63, 211, 124; }

/* 悬停：整张卡轻轻抬起，灯条那一侧的光晕加强 */
.team-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5), -3px 0 22px -6px rgba(var(--light-rgb), 0.8);
}
/* 展开中：抬高一点并保持光晕，一眼看出"现在开着的是这张" */
.team-card--expanded {
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5), -3px 0 22px -6px rgba(var(--light-rgb), 0.7);
}

.team-card__head {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 19px 21px;
  text-align: left;
  transition: background-color 0.18s ease;
}
/* 悬停底色也跟着灯条颜色走 */
.team-card__head:hover { background: rgba(var(--light-rgb), 0.055); }
.team-card__head:focus-visible { outline: 2px solid var(--orange); outline-offset: -3px; }

/* 队伍卡里的队标预留大一点，展示队伍时更醒目 */
.team-card__head .team__logo {
  width: 70px;
  height: 70px;
  transition: transform 0.26s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.26s ease;
}
.team-card__head .team__logo--placeholder { font-size: 25px; }
.team-card:hover .team-card__head .team__logo {
  transform: scale(1.06);
  box-shadow: 0 0 0 3px rgba(var(--light-rgb), 0.25);
}

.team-card__name {
  font-size: 18.5px;
  font-weight: 800;
  transition: color 0.18s ease;
}
.team-card:hover .team-card__name { color: #fff; }

/* 位次做成小胶囊，悬停时跟着亮起来 */
.team-card__rank {
  margin-left: auto;
  padding: 3px 11px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.025);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-dim);
  white-space: nowrap;
  transition: color 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}
.team-card:hover .team-card__rank {
  color: var(--text);
  border-color: rgba(var(--light-rgb), 0.5);
  background: rgba(var(--light-rgb), 0.1);
}

.team-card__chevron {
  flex: 0 0 auto;
  font-size: 13px;
  color: var(--text-faint);
  transform: rotate(-90deg); /* 默认折叠，箭头朝右 */
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), color 0.18s ease;
}
.team-card--expanded .team-card__chevron { transform: rotate(0); }
.team-card__head:hover .team-card__chevron { color: var(--light); }

/* 折叠/展开：grid 高度动画 */
.team-card__body {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.34s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.24s ease;
}
.team-card__body-inner { overflow: hidden; min-height: 0; }
.team-card--expanded .team-card__body { grid-template-rows: 1fr; opacity: 1; }

/* 队员列表 */
.roster {
  list-style: none;
  margin: 0;
  padding: 0 14px 10px;
  border-top: 1px solid var(--border);
}
.roster__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 8px;
  margin: 0 -6px;
  border-radius: 6px;
  border-bottom: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
  transition: background-color 0.16s ease;
}
.roster__row:last-child { border-bottom: 0; }
.roster__row:hover { background: rgba(var(--light-rgb), 0.06); }

/* 展开时队员逐行滑入：类一加上动画就重新播一次，所以每次展开都有 */
.team-card--expanded .roster__row {
  animation: rosterIn 0.34s cubic-bezier(0.16, 1, 0.3, 1) backwards;
  animation-delay: calc(var(--r, 0) * 45ms + 70ms);
}
@keyframes rosterIn {
  from { opacity: 0; transform: translateX(-7px); }
  to   { opacity: 1; transform: none; }
}

.roster__player { display: flex; align-items: center; gap: 7px; min-width: 0; }
.roster__star {
  color: var(--orange);
  font-size: 13.5px;
  text-shadow: 0 0 9px rgba(245, 166, 35, 0.65);
  animation: starTwinkle 3.4s ease-in-out infinite;
}
@keyframes starTwinkle {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.6; }
}
.roster__name {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* rating：数字对齐 + 按好坏着色的小胶囊 */
.roster__rating {
  flex: 0 0 auto;
  min-width: 60px;
  padding: 2px 9px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.035);
  font-size: 13.5px;
  font-weight: 700;
  text-align: center;
  transition: background-color 0.16s ease;
}
.stat-rating--good.roster__rating { background: rgba(63, 211, 124, 0.13); }
.stat-rating--bad.roster__rating  { background: rgba(255, 93, 85, 0.13); }
.roster__row:hover .roster__rating { background: rgba(255, 255, 255, 0.07); }
.roster__row:hover .stat-rating--good.roster__rating { background: rgba(63, 211, 124, 0.2); }
.roster__row:hover .stat-rating--bad.roster__rating  { background: rgba(255, 93, 85, 0.2); }

/* 系统开了"减少动态效果"就全部关掉（照顾前庭敏感的用户） */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------------------------------------------------------------------------
   12. 窄屏适配（手机 / 平板竖屏）
   ------------------------------------------------------------------------ */
@media (max-width: 900px) {
  .app {
    grid-template-columns: minmax(0, 1fr);
  }

  /* 侧边栏变成顶部横向滚动的赛事条 */
  .sidebar {
    position: static;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--border);
    padding: 14px 14px 12px;
    overflow: visible;
  }

  .brand { padding: 0 2px 12px; }
  .brand__name { font-size: 18px; }
  .side-note { display: none; }

  .side-section { margin-top: 12px; }
  .side-section__title { padding: 0 2px 8px; }

  .tournament-list {
    flex-direction: row;
    overflow-x: auto;
    gap: 8px;
    padding-bottom: 2px;
    scrollbar-width: none;
  }
  .tournament-list::-webkit-scrollbar { display: none; }

  .tournament-item {
    flex: 0 0 auto;
    max-width: 78vw;
    border-left: 0;
    border-bottom: 2px solid transparent;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    padding: 9px 14px;
  }
  /* 手机上赛事选项卡是横排的，所以"让一点"改成往上抬，下划线代替左侧竖条 */
  .tournament-item:hover {
    transform: translateY(-2px);
    border-bottom-color: rgba(245, 166, 35, 0.5);
    box-shadow: 0 6px 16px -8px rgba(245, 166, 35, 0.8);
  }
  .tournament-item:active { transform: translateY(-2px) scale(0.97); }
  .tournament-item.is-active { border-bottom-color: var(--orange); }
  .tournament-item.is-active:hover { transform: translateY(0); }
  .tournament-item.is-active:active { transform: scale(0.97); }
  .tournament-item__name { font-size: 14px; }

  .main { padding: 18px 14px 40px; }
  .tournament-head__name { font-size: 21px; }

  /* 右上角入口：窄屏收起文字，只留图标，免得盖住内容（鼠标悬停仍能看到说明） */
  .quicklinks { top: 12px; right: 12px; gap: 7px; }
  .ql { padding: 6px; border-radius: 14px; }
  .ql__text { display: none; }
  .ql__icon { width: 32px; height: 32px; }
  .ql__icon svg { width: 20px; height: 20px; }

  /* 窄一点的屏幕上比赛卡单列排布 */
  .match-grid { grid-template-columns: minmax(0, 1fr); }
  .team-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 620px) {
  body { font-size: 14.5px; }

  /* 阶段标题 */
  .stage { margin-bottom: 24px; }
  .stage__head { padding: 9px 13px 9px 10px; gap: 6px 10px; }
  .stage__title { font-size: 16.5px; }

  /* 日期行：日期和时间占一行，场次数换到下一行 */
  .day-group__head {
    flex-wrap: wrap;
    gap: 6px 8px;
    padding: 7px 10px;
  }
  .day-group__meta {
    flex: 1 0 100%;
    margin-left: 0;
  }

  /* 比赛卡：收紧间距 */
  .match-card { padding: 13px 14px; gap: 11px; }
  .match-card__body { gap: 10px; }
  .match-card__score { font-size: 18px; min-width: 58px; }
  .match-card__maps { font-size: 13px; }
  .match-card__link { font-size: 13px; }
  .team-side__forfeit { font-size: 13px; padding: 2px 7px; }
  .team__logo { width: 30px; height: 30px; font-size: 13px; }
  /* 手机上的队伍卡队标也稍缩小一点，但仍保持醒目 */
  .team-card__head .team__logo { width: 56px; height: 56px; }
  .team-card__head .team__logo--placeholder { font-size: 20px; }
  .team-card__name { font-size: 17px; }

  /* 用简称，避免长队名把比分挤下去 */
  .team__full  { display: none; }
  .team__short { display: inline; }

  /* 详情页：标题收紧，选择器变小 */
  .detail-head { padding: 13px 14px; }
  .detail-head__team { font-size: 17px; }
  .detail-head__matchup { gap: 10px; }
  .detail-head__matchup .match-card__score { font-size: 25px; min-width: 90px; }
  .stat-nav__item { padding: 5px 11px; font-size: 13px; }
  .stat-table th,
  .stat-table td { padding: 7px 10px; font-size: 13px; }
}