/* ===== 基础：冰冷数据展示 ===== */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: #ffffff;
  color: #000000;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
               "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.4;
}

#app {
  padding: 8px;
}

/* ===== 主区（唯一可拖动区域） ===== */
.scroll-x {
  /* 移动端只能左右拖：横向滚动，纵向禁用 */
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  /* 禁止画布式自由拖拽：不选整张表 */
  touch-action: pan-x;
  overscroll-behavior: contain;
}

/* ===== 表格 ===== */
table.trend {
  border-collapse: collapse;
  table-layout: fixed;
  /* 表格整体宽度由内容决定，超出时外层滚动 */
  white-space: nowrap;
}

table.trend th,
table.trend td {
  border: 1px solid #d0d0d0;
  padding: 0;
  margin: 0;
  text-align: center;
  vertical-align: middle;
  height: 28px;
  font-variant-numeric: tabular-nums;
}

/* 列宽 */
table.trend col.col-period { width: 80px; }
table.trend col.col-red    { width: 22px; }
table.trend col.col-blue   { width: 22px; }

/* 头部：红 1-33、蓝 1-16 */
table.trend thead th {
  background: #fafafa;
  font-weight: 500;
  color: #000;
}
table.trend thead th.period-head { background: #fafafa; }

/* 历史期区 / 预选区之间的视觉分割线 */
table.trend tr.divider td {
  padding: 0;
  height: 0;
  border: 0;
  background: #000;
}

/* ===== 单元格内部 ===== */
.cell-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 12px;
  color: #888;          /* 未命中：浅灰号码 */
}

/* 命中：实心红球 + 白字 */
.hit .cell-inner {
  background: #d8232a;
  color: #ffffff;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  margin: 0 auto;
  font-weight: 600;
}

/* 空心红球：外壁贴格、圆圈大小撑满方格 */
.hollow .cell-inner {
  position: relative;
  width: 26px;
  height: 26px;
  margin: 0 auto;
  color: #d8232a;
  font-weight: 600;
}
.hollow .cell-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid #d8232a;
  border-radius: 50%;
  background: transparent;
}
.hollow .cell-inner > span {
  position: relative;
  z-index: 1;
}

/* 预选：与"普通命中"不同的视觉（蓝边+蓝字、空心蓝圆） */
.picked .cell-inner {
  color: #1f6feb;
  font-weight: 600;
  position: relative;
  width: 26px;
  height: 26px;
  margin: 0 auto;
}
.picked .cell-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid #1f6feb;
  border-radius: 50%;
  background: #ffffff;
}
.picked .cell-inner > span {
  position: relative;
  z-index: 1;
}

/* 蓝球列之间的连接线：仅在 .blue-col 的相邻命中之间画线 */
table.trend td.blue-col { position: relative; }
table.trend td.blue-col .cell-inner { color: #444; }
table.trend td.blue-col.hit .cell-inner {
  background: #1f6feb;
  color: #fff;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  margin: 0 auto;
  font-weight: 600;
}

/* 跨行蓝球连接线：把每列蓝球命中单元格的右边画一条向右的小线 */
table.trend td.blue-col.hit::after {
  content: "";
  position: absolute;
  right: -1px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: #1f6feb;
  z-index: 0;
}
table.trend td.blue-col.hit:last-of-type::after { display: none; }

/* 期号 */
td.period { color: #000; }
td.summary { color: #000; font-size: 12px; }

/* 占位页 */
.placeholder {
  padding: 40px 16px;
  text-align: center;
  color: #555;
}