/* ============================================================
   深色主题覆盖 —— 与主站 index.html 美术风格一致
   原理：Tailwind v4 的工具类全部引用 --color-* 主题变量，
   本文件在构建 CSS 之后加载（且不带 @layer，优先级更高），
   直接重定义变量即可整站换肤，无需改动构建产物。
   主站配色：
     背景 #0b0d12 / 卡片 #141824 / 次面板 #1a2030
     边框 rgba(255,255,255,.07) / 文字 #e9ebf2 / 次要 #a9b1c5
     强调橙 #ff6b4a / 浅橙 #ffb199
   ============================================================ */

:root{
  /* 字体与主站一致 */
  --font-sans:"PingFang SC","Microsoft YaHei","Source Han Sans SC",ui-sans-serif,system-ui,sans-serif;

  /* ---- 背景层次 ---- */
  --color-gray-50:#0b0d12;              /* 页面底色（原浅灰底） */
  --color-white:#141824;                /* 卡片底色（原白色卡片） */
  --color-gray-100:#1a2030;             /* 次级面板 / 标签底 / 细边框 */
  --color-gray-200:rgba(255,255,255,.14);
  --color-gray-300:#39415a;             /* 占位条等 */
  --color-gray-800:#e9ebf2;
  --color-gray-900:#e9ebf2;             /* 主文字（原近黑） */

  /* ---- 文字层次 ---- */
  --color-gray-700:#d5d9e4;
  --color-gray-600:#a9b1c5;             /* 次要文字 */
  --color-gray-500:#8b93a8;
  --color-gray-400:#6d7690;             /* 弱提示文字 */

  /* ---- 强调色：蓝 → 主站橙 ---- */
  --color-blue-900:#b3481f;             /* 深橙（对阵另一方） */
  --color-blue-700:#e05a32;
  --color-blue-600:#ff6b4a;             /* 主强调色 */
  --color-blue-500:#ff8a6b;
  --color-blue-200:rgba(255,107,74,.35);
  --color-blue-100:rgba(255,107,74,.16);
  --color-blue-50:rgba(255,107,74,.08); /* 橙色高亮行底色 */

  /* ---- 琥珀色点缀 → 浅橙 ---- */
  --color-amber-700:#ffb199;
  --color-amber-500:#ffb199;
  --color-amber-200:rgba(255,177,153,.35);
  --color-amber-100:rgba(255,177,153,.16);
  --color-amber-50:rgba(255,177,153,.08);

  /* ---- 紫色点缀调亮，适应深底 ---- */
  --color-purple-700:#c4b5fd;
  --color-purple-200:rgba(196,181,253,.35);
  --color-purple-100:rgba(196,181,253,.16);
  --color-purple-50:rgba(196,181,253,.08);
}

/* 未显式指定颜色的文字继承主站文字色（默认黑色在深底下不可读） */
body{background-color:#0b0d12;color:#e9ebf2}

/* 章节标题前的小竖条用主站强调橙（bg-gray-900 仅用于此处） */
.bg-gray-900{background-color:#ff6b4a}

/* 深色下阴影减弱，改用描边感 */
.shadow-sm,.shadow-inner{box-shadow:0 0 0 1px rgba(255,255,255,.03)}

/* ---- 顶部返回栏（与主站导航同风格） ---- */
.back-bar{
  position:fixed;top:0;left:0;right:0;z-index:60;height:48px;
  display:flex;align-items:center;gap:10px;padding:0 20px;
  background:rgba(11,13,18,.72);backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,.07);
  color:#a9b1c5;text-decoration:none;font-size:13.5px;letter-spacing:1px;
  font-family:"PingFang SC","Microsoft YaHei","Source Han Sans SC",sans-serif;
  transition:color .2s;
}
.back-bar:hover{color:#e9ebf2}
.back-bar .dot{
  width:8px;height:8px;border-radius:50%;flex:none;
  background:linear-gradient(135deg,#ff6b4a,#ffb199);
}
.back-bar b{color:#e9ebf2;font-weight:700}

/* 给页面内容让出返回栏高度 */
#root{padding-top:48px}

/* ============================================================
   手机端适配（≤640px）—— 匹配小屏宽度
   说明：构建产物未提供源码，以下覆盖均基于其 Tailwind 类名，
   选择器均带足够上下文以避免误伤桌面端与弹窗。
   ============================================================ */
@media (max-width:640px){
  /* 兜底：任何内容都不允许撑出横向滚动条 */
  html,body{overflow-x:hidden}

  /* 内容卡片（shadow-sm）减小内边距，释放横向空间；弹窗是 shadow-2xl，不受影响 */
  .shadow-sm.p-6{padding:16px}

  /* ---- 顶部比分区：节分表换行独占一行，比分分列左右 ---- */
  .justify-between.mb-8{flex-wrap:wrap;row-gap:16px;margin-bottom:24px}
  .justify-between.mb-8>.flex-col.items-center{order:3;flex:1 1 100%}
  .justify-between.mb-8 .grid-cols-6{gap:6px}

  /* ---- 技术统计对比：条形条由固定 128px 改为占满剩余空间 ---- */
  .grid-cols-\[1fr_auto_1fr\]{gap:8px}
  .grid-cols-\[1fr_auto_1fr\] .gap-3{gap:6px}
  .grid-cols-\[1fr_auto_1fr\] .w-32{flex:1 1 0%;width:auto;min-width:0}

  /* ---- 投篮分布球场图：不超出屏幕 ---- */
  .max-w-md{max-width:100%}

  /* ---- 球员数据表：压缩留白，列数过多时横向滑动浏览 ---- */
  .overflow-x-auto{max-width:100%;-webkit-overflow-scrolling:touch}
  .overflow-x-auto table{font-size:12px}
  .overflow-x-auto .px-4{padding-left:8px;padding-right:8px}
  .overflow-x-auto .py-3{padding-top:8px;padding-bottom:8px}

  /* 冻结首列（号码+姓名），横向滑动时保持可见 */
  .overflow-x-auto col.w-\[180px\]{width:120px}
  .overflow-x-auto table th:first-child,
  .overflow-x-auto table td:first-child{
    position:sticky;left:0;z-index:2;
    background:#141824; /* 与卡片底色一致，盖住滑过的列 */
    box-shadow:1px 0 0 rgba(255,255,255,.07);
  }
  /* 表头行底色为 gray-50(#0b0d12)，首列需与之同色 */
  .overflow-x-auto table thead th:first-child{background:#0b0d12}
  /* "全队"汇总行底色为 bg-gray-50/50 叠在卡片上的混合色 */
  .overflow-x-auto table tbody tr:last-child td:first-child{background:#10131c}
}