/* NBA数据看板 — 亮色主题，电脑为主、手机自适应 */
:root {
  --bg: #f5f6f8;
  --card: #ffffff;
  --ink: #1a1f2b;
  --sub: #6b7280;
  --line: #e5e7eb;
  --accent: #1d4289;
  --accent-soft: #eaf0fa;
  --red: #c8102e;
  --win: #15803d;
  --loss: #b91c1c;
  --live: #d97706;
  --radius: 14px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif;
  font-size: 15px;
  line-height: 1.5;
}
a { color: var(--accent); text-decoration: none; }
.container { max-width: 1240px; margin: 0 auto; padding: 16px 20px 60px; }

/* 顶栏 */
.topbar {
  background: var(--accent);
  color: #fff;
  padding: 14px 20px;
}
.topbar-inner { max-width: 1240px; margin: 0 auto; display: flex; align-items: center; gap: 14px; }
.topbar .logo { font-size: 20px; font-weight: 800; letter-spacing: 1px; cursor: pointer; }
.topbar .logo span { color: #ffb6c1; }
.topbar .sub { font-size: 12px; opacity: .75; }

/* 日期条 */
.datebar { display: flex; align-items: center; gap: 8px; margin: 18px 0 6px; }
.datebar .arrow {
  border: 1px solid var(--line); background: var(--card); border-radius: 10px;
  width: 34px; height: 34px; font-size: 16px; cursor: pointer; color: var(--ink); flex: none;
}
.datebar .arrow:hover { border-color: var(--accent); }
.dates { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; flex: 1; }
.dates::-webkit-scrollbar { display: none; }
.date-chip {
  flex: none; min-width: 64px; text-align: center; padding: 6px 8px;
  border: 1px solid var(--line); background: var(--card); border-radius: 10px; cursor: pointer;
}
.date-chip .dow { font-size: 11px; color: var(--sub); }
.date-chip .d { font-size: 14px; font-weight: 600; }
.date-chip.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.date-chip.active .dow { color: rgba(255,255,255,.8); }
.date-chip.has-games .d::after { content: "·"; color: var(--red); font-weight: 900; }
.date-chip.active.has-games .d::after { color: #ffb6c1; }
.today-btn {
  border: 1px solid var(--line); background: var(--card); border-radius: 10px;
  padding: 7px 14px; cursor: pointer; font-size: 13px; flex: none;
}
.today-btn:hover { border-color: var(--accent); color: var(--accent); }

.day-note { font-size: 12px; color: var(--sub); margin: 4px 0 12px; }

/* 比赛列表（纵向条状，按开球时间排序） */
.gamelist { display: flex; flex-direction: column; gap: 10px; }
.game-row {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 16px 22px; cursor: pointer; transition: box-shadow .15s, border-color .15s;
  display: grid; grid-template-columns: 96px 1fr 200px; gap: 12px; align-items: center;
}
.game-row:hover { box-shadow: 0 3px 14px rgba(29,66,137,.12); border-color: #c5d3ec; }
.game-row .g-time { text-align: center; border-right: 1px solid var(--line); padding-right: 16px; }
.game-row .g-time .t { font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; }
.game-row .g-main { min-width: 0; }
.g-match { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; }
.gside { display: flex; align-items: center; gap: 10px; min-width: 0; }
.gside.away { justify-content: flex-end; }
.gside img { width: 30px; height: 30px; flex: none; }
.gside .gn { font-weight: 700; font-size: 18px; white-space: nowrap; }
.gside .gn i { font-style: normal; font-weight: 400; font-size: 13px; color: var(--sub); margin-left: 9px; }
.gside .tag {
  font-size: 11px; color: var(--sub); border: 1px solid var(--line); border-radius: 5px;
  padding: 1px 5px; flex: none;
}
.g-score { font-size: 26px; font-weight: 400; color: var(--sub); font-variant-numeric: tabular-nums; white-space: nowrap; letter-spacing: 1px; }
.g-score b { color: var(--ink); font-weight: 800; }
.g-vs-mid { color: #b0b5bd; font-size: 15px; font-weight: 600; }
.game-row .g-right { text-align: right; font-size: 14px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.game-row .badge { margin-top: 5px; font-size: 12px; }

/* 博彩模块 */
.bet-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.bet-item { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; }
.bet-item .k { font-size: 11px; color: var(--sub); margin-bottom: 2px; }
.bet-item .v { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.bet-verdict {
  border-radius: 10px; padding: 10px 14px; margin-bottom: 10px; font-weight: 700; font-size: 14px;
  background: #f0fdf4; color: var(--win); border: 1px solid #bbf7d0;
}
.bet-verdict.upset { background: #fff7ed; color: #c2410c; border-color: #fed7aa; }


/* 通用面板 */
.panel {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 18px; margin-bottom: 16px;
}
.panel h3 { font-size: 15px; font-weight: 700; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.panel h3 .hint { font-size: 11px; color: var(--sub); font-weight: 400; }
.sub-head { font-weight: 700; font-size: 13px; margin: 10px 0 6px; color: var(--accent); }
.sub-head:first-of-type { margin-top: 0; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* 详情页拼排：12 栅格，小模块并排、大模块独占 */
.dgrid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.dgrid .panel { margin-bottom: 0; }
.dgrid .span4 { grid-column: span 4; }
.dgrid .span5 { grid-column: span 5; }
.dgrid .span6 { grid-column: span 6; }
.dgrid .span7 { grid-column: span 7; }
.dgrid .span12 { grid-column: span 12; }
@media (max-width: 1000px) {
  .dgrid .span4, .dgrid .span5, .dgrid .span6, .dgrid .span7 { grid-column: span 12; }
}
@media (max-width: 860px) {
  .grid2 { grid-template-columns: 1fr; }
  .game-row { grid-template-columns: 52px 1fr; padding: 12px 10px; gap: 6px; }
  .game-row .g-right { display: none; }
  .game-row .g-time { padding-right: 6px; }
  .game-row .g-time .t { font-size: 14px; }
  .gside .gn { font-size: 15px; }
  .gside .gn i { display: none; } /* 手机宽度不够，隐藏战绩 */
  .gside img { width: 20px; height: 20px; }
  .g-match { gap: 8px; }
  .gside { gap: 5px; }
  .g-score { font-size: 18px; letter-spacing: 0; }
}

/* 排名榜 */
.stand-team { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.stand-team img { width: 20px; height: 20px; }
.nav-btn {
  background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.35);
  border-radius: 10px; padding: 6px 16px; font-size: 13px; cursor: pointer;
}
.nav-btn:hover { background: rgba(255,255,255,.25); }

/* 状态徽章（全局） */
.badge {
  display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600;
}
.badge.pre { background: var(--accent-soft); color: var(--accent); }
.badge.live { background: #fef3c7; color: var(--live); }
.badge.final { background: #f3f4f6; color: var(--sub); }

/* 详情页头部 */
.detail-head {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px; margin: 14px 0 16px;
}
.matchup { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; text-align: center; }
.matchup .side img { width: 56px; height: 56px; }
.matchup .side .nm { font-size: 18px; font-weight: 800; margin-top: 4px; }
.matchup .side .seed { font-size: 12px; color: var(--sub); }
.matchup .mid .bigscore { font-size: 34px; font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: 2px; }
.matchup .mid .state { font-size: 13px; color: var(--sub); margin-top: 2px; }
.matchup .mid .clock { color: var(--live); font-weight: 700; }
.backline { display: flex; align-items: center; justify-content: space-between; }
.back-btn {
  border: 1px solid var(--line); background: var(--card); border-radius: 10px;
  padding: 6px 14px; cursor: pointer; font-size: 13px;
}
.back-btn:hover { border-color: var(--accent); color: var(--accent); }

/* 数据对比条（单行：数值与条严格同行） */
.compare-teams { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 8px; font-weight: 700; font-size: 14px; max-width: 560px; }
.compare-teams .l { color: var(--accent); display: inline-flex; align-items: center; gap: 6px; }
.compare-teams .r { text-align: right; color: var(--red); }
.compare-teams img { width: 20px; height: 20px; }
.compare-row { display: grid; grid-template-columns: 60px 1fr 60px; align-items: center; gap: 10px; margin: 7px 0; max-width: 560px; }
.compare-row .val { font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; }
.bar-mid { min-width: 0; }
.cbar { height: 18px; border-radius: 9px; background: #eef0f3; overflow: hidden; display: flex; position: relative; }
.cbar .l { background: var(--accent); height: 100%; }
.cbar .r { background: var(--red); height: 100%; }
.cbar .lbl-on {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  background: rgba(255,255,255,.95); border-radius: 9px; padding: 0 10px;
  font-size: 12px; color: var(--ink); line-height: 14px; white-space: nowrap;
}
.gl-chips { display: flex; gap: 5px; flex-wrap: wrap; }
.gl-chip {
  width: 26px; height: 26px; border-radius: 7px; color: #fff; font-size: 12px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.gl-chip.w { background: var(--win); }
.gl-chip.l { background: #9ca3af; }
.gl-item { font-size: 11px; color: var(--sub); text-align: center; margin-top: 3px; }
.gl-col { display: flex; flex-direction: column; align-items: center; }
.res { font-weight: 700; white-space: nowrap; }
.res-w { color: var(--win); }
.res-l { color: var(--loss); }

/* 表格（全站统一：字号加大 + 悬停整行高亮） */
table.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th, .tbl td { padding: 8px 10px; text-align: center; border-bottom: 1px solid #f0f1f3; white-space: nowrap; }
.tbl th { color: var(--sub); font-weight: 600; font-size: 13px; }
.tbl td.name, .tbl th.name { text-align: left; font-weight: 600; }
.tbl tbody tr { transition: background .1s; }
.tbl tbody tr:hover td { background: #eef3fb; }
.tbl tr.tot td { background: #f8f9fb; font-weight: 700; border-top: 2px solid var(--line); }
.tbl tr.dnp td { color: #9ca3af; font-size: 12px; }
.tbl tr.dnp td.name { font-weight: 400; }
.sub-note { font-weight: 700; font-size: 13px; margin-bottom: 6px; }
.jc-tag {
  display: inline-block; background: #ffe9d6; color: #c2410c; border-radius: 5px;
  font-size: 11px; font-weight: 700; padding: 1px 6px; margin-right: 6px; vertical-align: 1px;
}

/* 伤病 */
.inj-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.inj-item { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid #f0f1f3; font-size: 13px; }
.inj-item .st { font-weight: 700; font-size: 12px; }
.st.out { color: var(--loss); }
.st.gtd { color: var(--live); }
.st.prob { color: var(--win); }
.inj-item .why { color: var(--sub); font-size: 12px; }

/* 交手列表 */
.series-list { font-size: 13px; }
.series-item { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid #f0f1f3; }
.series-item .sc { font-weight: 700; font-variant-numeric: tabular-nums; }
.series-item.win-sc .sc { color: var(--win); }

/* 排名卡 */
.rank-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.rank-card { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font-size: 13px; }
.rank-card .r1 { font-weight: 800; font-size: 14px; }
.rank-card .line { color: var(--sub); margin-top: 2px; }

/* 球星 */
.star-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.star-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid #f0f1f3; font-size: 13px; }
.star-row img { width: 26px; height: 26px; border-radius: 50%; background: #eef0f3; }
.star-row .nm { flex: 1; font-weight: 600; }
.star-row .nums { font-variant-numeric: tabular-nums; color: var(--sub); }
.star-row .nums b { color: var(--ink); font-size: 14px; }

.loading { text-align: center; color: var(--sub); padding: 40px 0; font-size: 14px; }
.err-box { background: #fef2f2; border: 1px solid #fecaca; color: var(--loss); border-radius: 10px; padding: 12px 16px; margin: 16px 0; font-size: 14px; }
.empty { color: var(--sub); font-size: 13px; padding: 10px 0; }
.footer-note { text-align: center; color: #9ca3af; font-size: 12px; margin-top: 30px; }