* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
:root { --bar: clamp(46px, 5vw, 58px); }
body {
  background: #d9dde3;
  color: #333;
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
}
button, input { font-family: inherit; }
.page {
  width: 100%;
  max-width: 1200px;
  min-height: 100vh;
  margin: 0 auto;
  background: #fff;
  box-shadow: 0 0 24px rgba(0, 0, 0, .08);
}

.games {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  background: #3a4a67;
}
.games button {
  flex: 1;
  height: var(--bar);
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  color: #e8edf5;
  font-size: clamp(16px, 2vw, 20px);
}
.games button.is-active {
  color: #f5c518;
  border-bottom-color: #f5c518;
}

.board {
  background: #000;
  color: #9a9a9a;
  text-align: center;
  padding: clamp(18px, 3vw, 36px) clamp(12px, 3vw, 32px) clamp(16px, 2vw, 28px);
}
.board-line { margin: 0; font-size: clamp(16px, 2vw, 22px); }
.board-line strong {
  color: #e50012;
  font-size: clamp(22px, 2.8vw, 34px);
  padding: 0 4px;
}
.balls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 16px;
}
.ball, .sum, .tag, .tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}
.ball, .sum, .tick {
  width: clamp(42px, 5vw, 64px);
  height: clamp(42px, 5vw, 64px);
  border-radius: 3px;
  font-size: clamp(22px, 2.6vw, 32px);
}
.ball {
  background: linear-gradient(to bottom right, #fefefe, #ececec);
  color: #fa7513;
}
.sum, .tick {
  background: linear-gradient(to bottom right, #ff9800, #fa7712);
  color: #fff;
}
.op { color: #777; font-size: clamp(18px, 2.2vw, 26px); }
.tags { display: flex; gap: 8px; margin-left: 8px; }
.tag {
  width: clamp(34px, 4vw, 48px);
  height: clamp(34px, 4vw, 48px);
  border-radius: 50%;
  color: #fff;
  font-size: clamp(16px, 1.8vw, 20px);
  font-weight: 400;
}
.tag.dx { background: #96cb3b; }
.tag.ds { background: #ff831f; }
.next {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: clamp(18px, 2.4vw, 28px) 0 0;
  font-size: clamp(16px, 1.8vw, 20px);
}
.board-empty { margin: 28px 0; color: #bbb; }

.tabs {
  position: sticky;
  top: var(--bar);
  z-index: 2;
  display: flex;
}
.tabs button {
  flex: 1;
  height: clamp(44px, 5vw, 54px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 0;
  background: #335397;
  color: #fff;
  font-size: clamp(15px, 1.7vw, 18px);
}
.tabs button svg { width: 16px; height: 16px; fill: currentColor; }
.tabs button.is-active { background: #00c7f7; }

.panel-note {
  margin: 0;
  padding: 8px 12px;
  color: #909399;
  font-size: 12px;
  background: #fff;
}
table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
}
th, td {
  padding: clamp(13px, 1.6vw, 18px) clamp(4px, 1vw, 12px);
  border-bottom: 1px solid #ebeef5;
  text-align: center;
  font-size: clamp(14px, 1.5vw, 18px);
  font-weight: 400;
}
th { color: #909399; background: #fff; }
tbody tr:nth-child(even) { background: #f7f8fa; }
.issue { color: #606266; }
.time { color: #909399; }
.result { color: #606266; letter-spacing: .3px; }
.hit { font-weight: 700; }
.hit.da { color: #67b51a; }
.hit.xiao { color: #3b82f6; }
.hit.dan { color: #d81e06; }
.hit.shuang { color: #ff831f; }
.hit.combo { color: #335397; }
.miss { color: #d81e06; font-weight: 700; }
.ok { color: #18a058; font-weight: 700; }
.trend-wrap { overflow-x: auto; }
.trend th, .trend td { padding: clamp(10px, 1.2vw, 14px) clamp(1px, 0.6vw, 8px); font-size: clamp(12px, 1.4vw, 16px); }
.trend .issue { font-size: clamp(11px, 1.3vw, 15px); letter-spacing: -0.3px; }
.empty { padding: 28px 12px; text-align: center; color: #909399; }
.pending { color: #c0c4cc; }