/* ===== 本地可变字体 ===== */

/* Inter：正文与数字（全面替代原 Montserrat 英文方案） */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  /* block+head 预载:回退字体永不渲染,杜绝闪换抖动(FOUT);勿改回 swap */
  font-display: block;
  src: url('fonts/Inter-VariableFont_wght.ttf') format('truetype');
}

/* 中文正文/标题回退字体。本文件为子集(约1.8MB,由 scripts/subset_noto.py 生成,勿手改;
   新增球员出现缺字时重跑该脚本——源字体已移出仓库,脚本会按 --src/NOTO_SRC_FONT/
   ../fonts-src/ 顺序查找,详见脚本 docstring)。
   font-display 保持 swap:CJK 方块字宽=1em 与系统回退一致,换字体无位移,无需 block */
@font-face {
  font-family: 'Noto Sans SC';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/NotoSansSC-Subset.woff2') format('woff2');
}

/* Oswald：窄体 display 字体（模板站英文标题方案）。用于站名、hero 大标题、大号统计数字 */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 200 700;
  /* block+head 预载:站名/hero 为比例字体,swap 时回退→真字宽度突变致导航抖动(用户反馈),勿改回 swap */
  font-display: block;
  src: url('fonts/Oswald-VariableFont_wght.ttf') format('truetype');
}

:root {
  /* 中性色 */
  --color-dark: #323232;
  --color-dark-hover: #454545;
  --color-ink: #000000;          /* 纯黑带：导航 / hero / 页脚 */
  --color-ink-muted: #999999;    /* 黑底上的次级文字 */
  --color-ink-line: #3d3d3d;     /* 黑底上的分隔线 */
  --color-light: #E6E6E6;
  --color-light-alt: #f0f0f0;
  --color-page: #ffffff;         /* 页面大面积白 */
  --color-card: #F4F4F5;         /* 球员卡片底色 */
  --color-card-hover: #E9E9EB;   /* 球员卡片悬停底色（card 稍微加深） */
  --color-text: #000000;         /* 正文与姓名：纯黑（第七轮起取消灰黑 #323232 字色） */
  --color-text-muted: #6b6b6b;
  --color-border: #d4d4d4;
  /* 强调红：全站唯一红色字色（第五轮起弃用亮红 accent，令牌已移除） */
  --color-primary: #952323;      /* 深酒红：激活态、下划线、站名、hero 副标题、排名数字、Committed */
  --font-player-db: 'Inter', 'Noto Sans SC', sans-serif;
  --font-display: 'Oswald', 'Noto Sans SC', sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  font-family: var(--font-player-db);
  background-color: var(--color-page);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
}

/* Oswald 轴为 200-700:超轴的 800/900 会被浏览器钳制渲染成 700(实测字形一致),
   故 display 字体元素一律如实声明 700;.player-name 为 Inter(轴 100-900)不受此限 */
.player-name {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

h1, h2 {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ===== 锐利风格：全局去圆角（模板网站为直角风格） ===== */

.rounded, .rounded-sm, .rounded-md, .rounded-lg, .rounded-xl,
.rounded-2xl, .rounded-3xl, .rounded-full, .rounded-t-lg, .rounded-r-lg,
.rounded-b-lg, .rounded-l-lg, .rounded-r-md, .rounded-l-md {
  border-radius: 0 !important;
}

/* ===== 窄体 display 工具类 ===== */

.font-display {
  font-family: var(--font-display);
}

/* ===== 黑色大标题栏（占屏约 50%，中英文双行同大：上白下深红） ===== */

.hero {
  background-color: var(--color-ink);
}

.hero-title {
  color: var(--color-page);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3.125rem, 1.875rem + 6.25vw, 5.625rem);
  line-height: 1.05;
  letter-spacing: 0;
}

.hero-subtitle {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(3.125rem, 1.875rem + 6.25vw, 5.625rem);
  line-height: 1.05;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.hero-desc {
  color: var(--color-ink-muted);
  /* 基准字号 ×0.83（原 text-sm / md:text-base） */
  font-size: 0.727rem;
  line-height: 1.7;
}

@media (min-width: 768px) {
  .hero-desc {
    font-size: 0.83rem;
  }
}

/* 标题渐入动画（切换页面时生效） */
@keyframes heroFade {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

.anim-fade {
  animation: heroFade 0.7s ease-out both;
}

.anim-delay-1 { animation-delay: 0.15s; }
.anim-delay-2 { animation-delay: 0.3s; }

/* ===== 页面内小标题：全站统一字号与纯黑 ===== */

/* 基准为主页搜索栏下“球员库”（text-xl = 1.25rem）的 2.14 倍 = 2.675rem */
.section-heading {
  color: var(--color-ink);
  font-size: 2.675rem;
  line-height: 1.15;
}

/* 排名卡大数字：与 section-heading 同字号，颜色由使用处指定 */
.rank-display {
  font-size: 2.675rem;
  line-height: 1;
}

/* ===== 板块/球员卡自下而上渐入（进入视线时触发） ===== */

.reveal {
  opacity: 0;
}

.reveal-visible {
  opacity: 1;
  /* backwards 而非 both：动画结束后不残留层叠上下文，
     否则后续板块会整体盖住此前板块溢出的绝对定位元素（如图例弹出卡） */
  animation: riseIn 0.6s ease-out backwards;
}

/* 与 heroFade 同款位移，批量进入时由 JS 按顺序追加 animationDelay 形成级联 */
@keyframes riseIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; }
  .reveal-visible { animation: none; }
  .anim-fade { animation: none; }
  .info-pop { animation: none; }
}

/* ===== 板块图例弹出卡（ⓘ） ===== */

.info-pop {
  animation: infoFade 0.25s ease-out both;
}

@keyframes infoFade {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* ===== 常见问题解答（about 页 FAQ） ===== */

/* 问题行：黑色小字，字号同球员页时间线学校名（1rem） */
.faq-question {
  color: var(--color-text);
  font-size: 1rem;
  font-weight: 700;
}

/* 答案：灰色小字，字号同 hero 大标题下的灰色说明字 */
.faq-answer {
  color: var(--color-text-muted);
  font-size: 0.727rem;
  line-height: 1.7;
}

@media (min-width: 768px) {
  .faq-answer {
    font-size: 0.83rem;
  }
}

/* 展开动画：grid 行 0fr → 1fr，下方内容（含页脚）自然被推下 */
.faq-answer-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}

.faq-item.open .faq-answer-wrap {
  grid-template-rows: 1fr;
}

.faq-answer-clip {
  overflow: hidden;
  min-height: 0;
}

/* 右侧展开符号：展开时旋转 */
.faq-chevron {
  transition: transform 0.3s ease;
}

.faq-item.open .faq-chevron {
  transform: rotate(180deg);
}

/* ===== 球员页：照片 hero + 全宽交替板块 ===== */

/* 交替板块浅灰底（第十八轮起 #171717 → #F4F4F5，与球员卡底色同值） */
.bg-panel {
  background-color: var(--color-card);
}

/* 板块英文眉题：位于中文标题上方、深红、text-xs 的 0.875 倍 */
.section-eyebrow {
  font-family: var(--font-display);
  color: var(--color-primary);
  font-size: 0.656rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

/* 基本信息小卡：顶部深红横线 + 统一边框底色（不用 Tailwind border 以免覆盖线宽） */
.stat-card {
  background-color: var(--color-light-alt);
  border: 1px solid var(--color-border);
  border-top: 3.5px solid var(--color-primary);
}

/* ===== 黑色页脚（与 hero 呼应） ===== */

.site-footer {
  background-color: var(--color-ink);
}

.big-stat-number {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.5rem;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.profile-label {
  font-weight: 700;
  color: var(--color-text-muted);
}

.stats-table {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  width: 100%;
  /* 移动端：列数多，宽度不足时改为容器内横向滚动而非挤压换行（桌面容器更宽，无影响） */
  min-width: 640px;
  border-collapse: collapse;
  table-layout: fixed;
}

.stats-table th,
.stats-table td {
  padding: 0.75rem 0.4rem;
  font-size: 0.875rem;
  text-align: right;
  border-bottom: 1px solid var(--color-border);
  word-wrap: break-word;
}

.stats-table th:first-child,
.stats-table td:first-child {
  width: 32%;
  text-align: left;
  padding-left: 1.5rem;
}

/* DNP 赛季行（gp=0）：整行文字居中，需覆盖上面的右对齐默认值 */
.stats-table td.dnp {
  text-align: center;
}

.stats-table th:last-child,
.stats-table td:last-child {
  padding-right: 1.5rem;
}

.stats-table th {
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--color-text);
  background-color: transparent;
  border-bottom: 2px solid var(--color-border);
}

/* 行悬停：灰色 tint，与 NET 行（hover:bg-card）/球员卡 hover 同语言。
   统计表位于 bg-panel 浅灰板块上，card 同色不可见，故用深一档 card-hover。
   描边方案已弃：外扩被 overflow-x-auto 容器裁掉首末行边缘；内缩会多出
   左右两条竖线，与历史观感（只有上下红条）不符。表头不响应 */
.stats-table tbody tr:hover {
  background-color: var(--color-card-hover);
}

/* 悬停行整行数据文字变深红（用户口径"整行数据变红"）；
   徽章/分隔符有显式字色类不受影响，DNP/暂无数据占位行保持灰字 */
.stats-table tbody tr:hover td {
  color: var(--color-primary);
}

/* 站名：颜色由使用处指定（导航为深红、页脚为米白） */
.site-title {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
}

.timeline-line {
  position: absolute;
  left: 15px;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: var(--color-border);
}

.timeline-dot {
  position: absolute;
  left: 9px;
  top: 6px;
  width: 14px;
  height: 14px;
  background-color: var(--color-primary);
  border: 2px solid var(--color-page);
  border-radius: 50%;
}

/* 球员列表统计列：标签与数字整体居中对齐 */
.stat-col {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-label {
  font-family: var(--font-display);
  font-size: 0.625rem;
  font-weight: 700;
  color: var(--color-ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 0.125rem;
  text-align: center;
}

/* 排名数字槽位：等宽数字 + 固定槽宽，
   Natl 最多 3 位、Pos 最多 2 位；'-' 居中占位后与数字宽度一致，保证卡片上下对齐 */
.rank-num {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.rank-num-natl {
  width: 3ch;
}

.rank-num-pos {
  width: 2ch;
}

/* ── 移动端体验修正（不影响 sm/md 以上布局） ─────────────────────── */

/* 图例弹层：小屏 position:fixed(以屏幕为定位基准,避免以按钮旁小包裹层
   为基准导致 left/right 相互挤压变窄),水平全宽(左右各留 1rem 自动居中);
   垂直位置"按钮下方"由 positionInfoPop 依按钮位置设定。
   body 前缀提高特异度,压过实例上的 left-0/top-9/w-80/max-w-[...] 工具类 */
@media (max-width: 639px) {
  body .info-pop {
    position: fixed;
    left: 1rem;
    right: 1rem;
    top: auto;
    width: auto;
    max-width: none;
  }
}

/* 右上角菜单手风琴：从上向下展开；visibility 延迟切换保证收起后不可聚焦 */
.mobile-menu {
  overflow: hidden;
  max-height: 0;
  visibility: hidden;
  transition: max-height 0.28s ease, visibility 0s linear 0.28s;
}

.mobile-menu.menu-open {
  max-height: 24rem;
  visibility: visible;
  transition: max-height 0.28s ease, visibility 0s;
}