/* 澳彩盘口板 — 盘房账簿
 *
 * 金色只标一件事:澳彩。
 *
 * 红色标两件事,靠位置分开:在盘口那几列是「升」(依中文市场惯例,红升绿降,
 * 与欧美相反),在左边的状态徽章、行首那道轨、和比分格里是「正在进行」。
 * 两者隔着大半个行宽,且升降那套是 11px 小字、比分是 15px 粗体,不会混。
 * 绿色始终只有一个意思:降。
 *
 * 数字全部走 IBM Plex Mono 的等宽数字,让整列盘口在纵向上对齐可扫。
 */

:root {
  --ink: #10151c;
  --slip: #171d26;
  --slip-hi: #1e2632;
  --rule: #29313d;
  --rule-soft: #212832;
  --chalk: #e6e9ed;
  --muted: #79848f;
  --macau: #e0ae4b;
  --rise: #f0524b;
  --fall: #35be79;

  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --han: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB',
         'Microsoft YaHei', sans-serif;

  --cols: 52px 76px 108px minmax(150px, 1fr) 74px minmax(150px, 1fr) 118px 118px 60px 40px;

  /* 低水表的九列。总宽 1018px,压在 1040 那个断点底下 —— 两页共用同一个断点,
   * 不再多设一档:多一个断点就多一处只在某个宽度区间才犯的错。 */
  --lw-cols: 52px 76px 108px minmax(130px, 1fr) 74px minmax(130px, 1fr) 120px 108px 140px;

  /* 走势页的九列,同样压在 1040 那个断点底下(含间距 1014px)。
   * 盘口那列最宽:它要写下一整程「客让平手/半球 → 客让半球/一球」,是这四页
   * 里唯一可能长到十四个汉字的东西。队名那两列的下限因此从 130 让到 108 ——
   * 队名本来就带省略号,盘口一个字都不能少。
   * 末列 108:它现在是两行(打出 / 上盘赢 +0.75),凭据那行得放下「低水边胜 +2」。
   * 加的这 16px 从队名那两列各让 8px 来,总宽仍是 1014。 */
  --mv-cols: 52px 76px 108px minmax(108px, 1fr) 74px minmax(108px, 1fr) 184px 116px 108px;

  --gut: 10px;
  --pad: clamp(16px, 3vw, 40px);
}

/* 欧赔那两格要放三个价而不是两个,所以给它自己一套列宽:赔率列各加 32px,
 * 从赛事和队名那几列借回来(总宽反倒比亚盘窄一点,窄屏断点不必跟着动)。
 *
 * 150px 是量出来的,不是估的:最长的价是 5 个字(实测极值 `11.50`),在 14px
 * 的 IBM Plex Mono 下占 43px,三列加两道 6px 间距要 141px。留 150px 是给
 * 每列 3px 的余量 —— 挤到刚好的话第三个价会溢到「变化」列上。
 * 价宁可让队名打点,一个字都不能少。 */
body[data-odds='euro'] {
  --cols: 52px 76px 96px minmax(116px, 1fr) 74px minmax(116px, 1fr) 150px 150px 62px 40px;
}

/* ── 右边并排的第二组(大小球)───────────────────────────────────────────
 * 主盘种旁边再排一组大小球,一行就是十三列。默认**不出现**:十列本来就要 1040px,
 * 十三列要 1300px 才排得开,不够宽还硬排的结果是每一格都缩到读不出小数点。
 * 排不开时整组收起来,那份数据在展开表的「大小球」tab 里一样能看 —— 少一个视图,
 * 强过多一屏挤成一团的数字。
 *
 * 「大小球」当主盘种时它永远不出现:那是同一份数据印两遍。
 */
.cell-odds.ou,
.cell-move.ou,
.colhead .ou { display: none; }

@media (min-width: 1300px) {
  body:not([data-odds='over_under']) .cell-odds.ou,
  body:not([data-odds='over_under']) .cell-move.ou,
  body:not([data-odds='over_under']) .colhead .ou { display: block; }

  /* 第二组给 100px:大小球的盘口话最长是 `两球/两球半` 六个字,水位是 `0.92/0.94`
   * 九个字符 —— 都比亚盘的短(亚盘要写 `主让一球/球半` 加方向前缀),所以它比
   * 主盘种那组窄一档。省下来的宽度留给主盘种,主次分明也正好合读法。 */
  body[data-odds='asia'] {
    --cols: 52px 76px 92px minmax(120px, 1fr) 74px minmax(120px, 1fr)
            116px 116px 58px 100px 100px 54px 40px;
  }

  body[data-odds='euro'] {
    --cols: 52px 76px 88px minmax(112px, 1fr) 74px minmax(112px, 1fr)
            150px 150px 58px 100px 100px 54px 40px;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--chalk);
  font-family: var(--han);
  font-size: 14px;
  line-height: 1.45;
  /* 账簿纸的极淡横纹,给纯色底一点材质,不抢内容 */
  background-image: repeating-linear-gradient(
    to bottom, transparent 0 43px, rgba(255, 255, 255, 0.012) 43px 44px
  );
}

button { font: inherit; color: inherit; cursor: pointer; }

.ta-r { text-align: right; }
.ta-c { text-align: center; }

/* ── 报头 ─────────────────────────────────────────────────────────── */

.masthead {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  padding: 24px var(--pad) 18px;
  border-bottom: 1px solid var(--rule);
}

.eyebrow {
  margin: 0 0 6px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--macau);
}

.masthead h1 {
  margin: 0;
  font-size: clamp(26px, 4vw, 38px);
  font-weight: 600;
  letter-spacing: 0.06em;
}

/* 页与页之间的切换。做成报头底下的一行小标签,不做成工具条里的按钮 ——
 * 工具条那些控件全是「改这一页看什么」,换页不是同一件事,混在一起会误点。
 *
 * 六个了(开盘板、低水表、四个走势页),所以必须允许折行:不折的话窄屏上
 * 「平手盘」会被挤出报头外面,而报头没有横向滚动 —— 那一页就等于不存在。 */
.pagenav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-top: 10px;
}

.pagenav a {
  padding-bottom: 3px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.pagenav a:hover { color: var(--chalk); }

.pagenav a[aria-current='page'] {
  color: var(--chalk);
  border-bottom-color: var(--macau);
}

/* 当日盘口分布 — 这一天的「形状」,一眼看出澳彩整体偏向哪一档 */
.masthead-shape { flex: 0 1 clamp(320px, 46vw, 620px); }

.shape-label {
  margin: 0 0 8px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--muted);
  text-transform: uppercase;
}

.shape-bars {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 5px;
  align-items: end;
  height: 68px;
}

.shape-col {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 4px;
  height: 100%;
  text-align: center;
}

.shape-n {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.shape-bar {
  background: color-mix(in srgb, var(--macau) 34%, transparent);
  border-radius: 1px;
  min-height: 2px;
  transition: height 0.35s ease;
}

.shape-col.is-peak .shape-bar { background: var(--macau); }
.shape-col.is-peak .shape-n { color: var(--macau); }

.shape-k {
  font-size: 10px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── 工具条 ───────────────────────────────────────────────────────── */

.toolbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding: 12px var(--pad);
  background: color-mix(in srgb, var(--ink) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}

.tool-group { display: flex; align-items: center; gap: 6px; }

.date-stepper input[type='date'] {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--chalk);
  background: var(--slip);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 5px 8px;
  color-scheme: dark;
}

.step,
.ghost {
  background: var(--slip);
  border: 1px solid var(--rule);
  border-radius: 3px;
  color: var(--muted);
  padding: 4px 9px;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.4;
}

.step:hover,
.ghost:hover { color: var(--chalk); border-color: #3a4552; }

.segmented {
  gap: 0;
  border: 1px solid var(--rule);
  border-radius: 3px;
  overflow: hidden;
  background: var(--slip);
}

.seg {
  background: none;
  border: none;
  border-right: 1px solid var(--rule-soft);
  padding: 5px 12px;
  font-size: 13px;
  color: var(--muted);
}

.seg:last-child { border-right: none; }
.seg:hover { color: var(--chalk); }

.seg.is-on {
  background: var(--slip-hi);
  color: var(--chalk);
  box-shadow: inset 0 -2px 0 var(--macau);
}

.search {
  flex: 1 1 150px;
  max-width: 240px;
  background: var(--slip);
  border: 1px solid var(--rule);
  border-radius: 3px;
  color: var(--chalk);
  padding: 6px 10px;
  font-family: inherit;
  font-size: 13px;
}

.search::placeholder { color: var(--muted); }

.meta { margin-left: auto; gap: 8px; }

.stats {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--rise);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--rise) 60%, transparent);
  animation: pulse 2s ease-out infinite;
}

@keyframes pulse {
  70% { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

:focus-visible { outline: 2px solid var(--macau); outline-offset: 2px; }

/* ── 表体 ─────────────────────────────────────────────────────────── */

.board { padding: 0 var(--pad) 64px; }

.colhead,
.row-main {
  display: grid;
  grid-template-columns: var(--cols);
  gap: var(--gut);
  align-items: center;
}

/* 各页的列头共用这一套外观,列宽各管各的(低水表在 .lw-head、走势页在 .mv-head) */
.colhead,
.lw-head,
.mv-head {
  position: sticky;
  top: 53px;
  z-index: 10;
  padding: 9px 4px;
  background: var(--ink);
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* 状态分带的带头。比小时组头响一档 —— 它是这张表的第一层次序:进行中在最上,
 * 已结束沉到最下(见 app.js 的 bandHtml)。整条带头只有一处颜色,给「进行中」
 * 那道红竖杠,跟行首那道轨、状态徽章是同一个红,同一个意思。 */
.band {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
  padding: 0 4px 8px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--han);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--chalk);
}

.band:first-child { margin-top: 6px; }

.band.is-now::before {
  content: '';
  width: 3px;
  height: 13px;
  border-radius: 1px;
  background: var(--rise);
}

.band em {
  font-style: normal;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--muted);
}

/* 带头底下那条线已经交代了分组,紧跟的小时组头不必再撑开 18px */
.band + .hour { padding-top: 10px; }

/* 开赛时刻分组:同一时刻的比赛聚在一起,时间只写一次 */
.hour {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 4px 6px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--chalk);
}

.hour em {
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.hour::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--rule-soft);
}

.row { border-bottom: 1px solid var(--rule-soft); }

.row-main {
  width: 100%;
  padding: 7px 4px;
  background: none;
  border: none;
  text-align: left;
  transition: background 0.12s;
}

.row-main:hover { background: var(--slip); }
.row.is-open .row-main { background: var(--slip); }

/* 进行中:左侧一道红轨
 *
 * 红色在这一页本来就是「活着」的意思(状态徽章、报头那颗呼吸点都是它),
 * 拿它做轨跟现有语义一致。不给整行上底色 —— 北京时间的深夜有大半屏都在
 * 进行中(见 02:00 那一带,七场同时在踢),一片红底就等于没标。
 * 轨在最左边,跟右边的盘口列离得远,所以两者的红互不干扰。
 */
.row.is-live .row-main { box-shadow: inset 2px 0 0 var(--rise); }

.cell-time {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.row.is-live .cell-time { color: var(--chalk); }

/* 状态 */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--mono);
  font-size: 11px;
  white-space: nowrap;
}

.badge .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex: none;
}

/* 进行中的徽章做成实心小片,已结束的就是一行灰字 ——
 * 「正在发生」值得占一块地方,「已经结束」只需要备案。 */
.badge.live {
  color: var(--rise);
  background: color-mix(in srgb, var(--rise) 13%, transparent);
  border-radius: 2px;
  padding: 1px 6px;
  margin-left: -6px; /* 抵掉内边距,文字左沿仍与其他行的徽章对齐 */
}

.badge.live .dot { background: var(--rise); animation: pulse 2s ease-out infinite; }
.badge.done { color: var(--muted); }
.badge.soon { color: var(--muted); }
.badge.soon .dot { background: var(--rule); }

.cell-comp {
  font-size: 12px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 队伍朝向中间的比分,是足球赛果表的经典读法 */
.cell-team {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.cell-team.home { flex-direction: row-reverse; }

.cell-team img {
  width: 19px;
  height: 19px;
  object-fit: contain;
  flex: none;
}

.cell-team span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cell-score {
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 500;
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  letter-spacing: 0.04em;
}

/* 比分是这一页真正被盯着的那一格,所以「活着」这件事标在这里,而不是只靠
 * 边上的徽章。进行中:红色 + 呼吸;已结束:压暗的白,定论,不再动。
 *
 * 呼吸是在红与偏白的红之间来回,不是明暗闪烁 —— 深夜十几场同时在踢,
 * 真闪起来整屏都在抖。周期 2.6s 比徽章那颗点(2s)慢一档,两者不同步,
 * 免得凑成一个齐步走的节拍反而更吵。
 *
 * 不动字号:一场球踢完时字号一变整行基线就跳一下,而这一页每分钟都有球在结束。
 * 半场比分那行有自己的颜色,不跟着呼吸。 */
@keyframes score-live {
  0%, 100% { color: var(--rise); }
  50% { color: color-mix(in srgb, var(--rise) 55%, var(--chalk)); }
}

.row.is-live .cell-score {
  color: var(--rise);
  font-weight: 600;
  animation: score-live 2.6s ease-in-out infinite;
}

.row.is-done .cell-score { color: color-mix(in srgb, var(--chalk) 76%, transparent); }

/* 进球那一下:比分自己弹一下。整行的底色冲刷(goal-wash)管「这一行有事发生」,
 * 这个弹跳管「事发生在这个数字上」 —— 眼睛跟着的是后者。 */
@keyframes goal-pop {
  0% { transform: scale(1); }
  26% { transform: scale(1.28); }
  100% { transform: scale(1); }
}

.cell-score .fs { display: inline-block; }
.row.just-scored .cell-score .fs { animation: goal-pop 0.9s cubic-bezier(0.2, 1.5, 0.4, 1); }

.cell-score .half {
  display: block;
  font-size: 10px;
  font-weight: 400;
  color: var(--muted);
  letter-spacing: 0;
}

/* 进球瞬间的一次性提示,不做持续动画 */
@keyframes goal-wash {
  from { background: color-mix(in srgb, var(--rise) 22%, transparent); }
  to { background: transparent; }
}

.row.just-scored .row-main { animation: goal-wash 1.4s ease-out; }

/* 盘口格:水位是主角
 *
 * 翻任意一天的看板都能看到,同一家公司从初盘到即时,盘口十有八九一动不动 ——
 * 每分钟真正在走的是水位。所以水位吃大字号,盘口退成上方的小字标注;
 * 盘口一旦动了才升上来,用红升绿降标方向。金色只落在即时水位上,
 * 那是这一行唯一的「现价」。
 */
.cell-odds { min-width: 0; }

.hcp {
  display: block;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hcp .side { opacity: 0.72; }

/* 动过的盘口:初盘和即时同时起一个底色,一眼看出「从 X 变到 Y」 */
.hcp.is-moved {
  display: inline-block;
  max-width: 100%;
  font-size: 12px;
  color: var(--chalk);
  background: color-mix(in srgb, currentColor 13%, transparent);
  border-radius: 2px;
  padding: 0 3px;
  margin: 0 0 1px -3px;
}

.hcp.is-moved.up { color: var(--rise); }
.hcp.is-moved.down { color: var(--fall); }

.water {
  display: block;
  font-family: var(--mono);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: color-mix(in srgb, var(--chalk) 66%, transparent);
}

.water .sep { opacity: 0.3; margin: 0 3px; }

/* 欧赔的三个价:等宽三列、各自右对齐,小数点就在纵向上排成一条线 —— 整屏
 * 两百行主胜赔能一眼扫下来。斜杠在这里反而是噪声(两个分隔符挤三个数),
 * 列间距自己就把它们分开了。 */
.water.three {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 6px;
}

/* 右对齐即小数点对齐 —— 所有赔率都是两位小数,末位一齐,点也就一齐 */
.water.three .v { text-align: right; }

/* 返还率那行平时是空的(只在即时那格、或抽水动过时才有字),但位子得留着 ——
 * 不留的话初盘和即时两格的价会错开一行,而这两列的可比性全靠横向对齐。 */
.cell-odds.euro .hcp { min-height: 16px; }

/* 列头里的「主 平 客」,跟价共用同一套三列网格,所以标签正好压在各自的列上 */
.colhead .trio-head {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 6px;
  margin-top: 3px;
  font-style: normal;
  font-size: 9px;
  letter-spacing: 0;
  opacity: 0.66;
}

.colhead .trio-head span { text-align: right; }

/* 即时水位是现价 —— 整行最亮的数字 */
.cell-odds.last.macau .water { color: var(--macau); }

/* 只给真正走了的那一边上色 */
.water .v.up, .co-table .v.up { color: var(--rise); }
.water .v.down, .co-table .v.down { color: var(--fall); }
.water .v.na, .co-table .v.na { color: var(--rule); }

.cell-odds.blocked .water::after {
  content: ' 封';
  color: var(--rise);
  font-size: 11px;
}

.cell-odds .none { color: var(--rule); font-family: var(--mono); font-size: 12px; }

/* 变化 */
.cell-move {
  text-align: center;
  font-family: var(--mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}

.cell-move.up { color: var(--rise); }
.cell-move.down { color: var(--fall); }
.cell-move.flat { color: var(--rule); }
/* 翻盘不属于升也不属于降 —— 让球方换了人,没有共同的上盘可比。
 * 所以不上红绿,用最亮的白点出来。 */
.cell-move.turn { color: var(--chalk); }
.cell-move .kind { display: block; font-size: 10px; opacity: 0.75; }

.cell-more {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--muted);
  text-align: right;
  white-space: nowrap;
}

.cell-more .caret { display: inline-block; transition: transform 0.16s; }
.row.is-open .cell-more .caret { transform: rotate(90deg); }

/* 另外五页的把手上没有那个「13 ›」格 —— 它们的末列已经归各自的正事了(低边走势、
 * 打出没打出)。所以把角标挪到行外面去:`--pad` 那道边距里,`main` 和各表都不裁
 * overflow,那儿本来是空的。
 *
 * 平时不显形,悬停或键盘聚焦才淡出来 —— 一整屏都挂着角标等于给每一行加了噪点,
 * 而这几页的行本来就密。展开后转 90°,跟看板那个 caret 同一个动作。 */
.lw-main,
.mv-main { position: relative; }

.lw-main::after,
.mv-main::after {
  content: '›';
  position: absolute;
  top: 50%;
  right: -13px;
  transform: translateY(-50%);
  font-family: var(--mono);
  font-size: 13px;
  color: var(--muted);
  opacity: 0;
  transition: opacity 0.12s, transform 0.16s;
  pointer-events: none;
}

.lw-main:hover::after,
.mv-main:hover::after,
.lw-main:focus-visible::after,
.mv-main:focus-visible::after { opacity: 0.8; }

.row.is-open .lw-main::after,
.row.is-open .mv-main::after {
  opacity: 0.8;
  transform: translateY(-50%) rotate(90deg);
}

/* ── 展开:全部公司 ───────────────────────────────────────────────── */

.drawer {
  padding: 4px 4px 18px;
  border-top: 1px dashed var(--rule-soft);
}

/* 横向滚只归表格,不归整个抽屉 —— tab 得始终留在原地,滚表格时它不能跟着跑掉 */
.drawer-scroll { overflow-x: auto; }

/* 这一场的盘种切换。
 *
 * 故意不长成顶部那个分段控件:顶部管整页,这里管一场,两个控件长一样会让人以为
 * 点了就整页都变。下划线式的 tab 是「同一份东西的几个面」这个意思,正合此处 ——
 * 同一场比赛,三种问法。选中那道线用金色,跟全页「这是现在看的东西」一致。
 */
.drawer-tabs {
  display: flex;
  gap: 2px;
  margin: 2px 0 10px;
  border-bottom: 1px solid var(--rule-soft);
}

.tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 5px 13px;
  font-size: 12px;
  color: var(--muted);
}

.tab:hover { color: var(--chalk); }
.tab.is-on { color: var(--chalk); border-bottom-color: var(--macau); }

/* 取第三个盘种时的等待与失败。两者共用一个位置,高度也一致 ——
 * 表格换掉时抽屉不该整段跳一下。 */
.drawer-wait {
  margin: 0;
  padding: 14px 12px 18px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
}

.drawer-wait.err { color: var(--rise); }

.co-table { min-width: 520px; }

.co-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.co-table th {
  padding: 7px 10px;
  text-align: left;
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--rule-soft);
}

.co-table td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--rule-soft);
  color: var(--chalk);
  vertical-align: top;
}

.co-table tr:last-child td { border-bottom: none; }
.co-table tbody tr:hover td { background: var(--slip); }

.co-table .co-name { font-family: var(--han); }
.co-table tr.is-macau .co-name { color: var(--macau); }
.co-table tr.is-macau td:first-child { box-shadow: inset 2px 0 0 var(--macau); }
/* 跟主表一致:水位在前且最亮,盘口退成后面的小字 */
.co-table .num { color: var(--chalk); }
.co-table .hcp { display: inline; font-size: 11px; }
.co-table .hcp.is-moved { display: inline-block; }
.co-table .ts { color: var(--muted); font-size: 10px; white-space: nowrap; }

/* 欧赔的展开表多两列(凯利、返还),520px 装不下 */
.co-table.is-euro { min-width: 680px; }

/* 三个价在格子里也走等宽三列,跟主表同一个对齐规则 */
.co-table .trio {
  display: inline-grid;
  grid-template-columns: repeat(3, 38px);
  gap: 0 6px;
}

.co-table .trio .v { text-align: right; }

/* 凯利是副证据,不跟赔率抢注意力 */
.co-table .kelly .v { color: var(--muted); }

/* ── 提示 ─────────────────────────────────────────────────────────── */

.notice {
  padding: 56px var(--pad);
  text-align: center;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 13px;
}

.notice.err { color: var(--rise); }

/* ── 窄屏:表格改为三行卡片 ───────────────────────────────────────────
 * 十列网格约需 1040px。再窄就别硬塞了 —— 塞进去的结果是队名被挤成 0 宽,
 * 只剩队徽。改成「时间/赛事」「主 比分 客」「初盘 即时 变化」三行,
 * 每格都拿到真实宽度。
 */

@media (max-width: 1040px) {
  .colhead { display: none; }
  .board { padding-bottom: 40px; }

  /* 中列给一个 100px 的地板。三行共用一套列宽,而两侧的列是被队名撑出来的 ——
   * 不设下限的话长队名(索菲亚中央陆军1948)会把中列压到 64px,即时水位就溢出去
   * 压到「变化」列上。宁可队名打点,价格一个字都不能少。 */
  .row-main {
    grid-template-columns: auto minmax(100px, 1fr) auto;
    grid-template-areas:
      'time  comp   status'
      'home  score  away'
      'first last   move';
    row-gap: 7px;
    column-gap: 8px;
    padding: 12px 4px 14px;
  }

  .cell-time { grid-area: time; }
  .cell-comp { grid-area: comp; justify-self: start; }
  .cell-status { grid-area: status; justify-self: end; }

  .cell-team.home { grid-area: home; justify-content: flex-end; }
  .cell-score { grid-area: score; }
  .cell-team.away { grid-area: away; }
  .cell-team { flex: 1; }

  .cell-odds.first { grid-area: first; }

  /* 水位放大到 14px 后,两组数字挨在一起会连成「0.84/0.86 0.90/0.80」一串,
   * 分不出哪组是初盘。加一道竖线把「之前 | 现在」切开。 */
  .cell-odds.last {
    grid-area: last;
    padding-left: 10px;
    border-left: 1px solid var(--rule-soft);
  }

  /* 动过的盘口在窄屏不再升字号 —— 加上底色的内边距会正好挤出去几个像素。
   * 底色和方向色已经够把它跟没动的盘口区分开。 */
  .hcp.is-moved { font-size: 11px; }
  .cell-move { grid-area: move; justify-self: end; text-align: right; }
  .cell-more { display: none; }

  /* 列头在窄屏隐藏了,给盘口自己加标注,免得分不清初盘和即时 */
  .cell-odds::before {
    display: block;
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.12em;
    color: var(--muted);
    margin-bottom: 1px;
  }

  .cell-odds.first::before { content: '初盘'; }
  .cell-odds.last::before { content: '即时'; }

  /* 欧赔在窄屏是唯一真的放不下的东西:一组价 141px,一行要摆两组再加「变化」,
   * 375px 差十几个像素装不进去。缩字号能塞进去,但那是拿价的可读性换布局 ——
   * 而价是这一页存在的理由。所以改成初盘、即时各占一行,「变化」在右边跨两行:
   * 手机上纵向是最便宜的资源,多一行远比小一号字划算。
   *
   * 两行的价用同一个固定宽度,所以初盘和即时纵向严格对齐 —— 上下相减看变化,
   * 靠的就是这个对齐。 */
  body[data-odds='euro'] .row-main {
    grid-template-areas:
      'time  comp   status'
      'home  score  away'
      'first first  move'
      'last  last   move';
  }

  body[data-odds='euro'] .cell-odds {
    display: flex;
    align-items: baseline;
    gap: 9px;
    padding-left: 0;
    border-left: none;
  }

  /* 上面那条 display:flex 的选择器比顶部「收起第二组」那条更具体,会把大小球
   * 那两格重新放出来 —— 而它们顶着 .first / .last,grid-area 跟主盘种撞在一起,
   * 于是球数直接叠印在欧赔的价上。在这里再收一次,收在起因旁边。 */
  body[data-odds='euro'] .cell-odds.ou { display: none; }

  /* 行首那个标注不再是块级标题,变成同一行的第一格,给个固定宽好让价对齐 */
  body[data-odds='euro'] .cell-odds::before {
    flex: 0 0 26px;
    margin-bottom: 0;
  }

  body[data-odds='euro'] .water.three { order: 1; flex: 0 0 141px; }

  /* 返还率退到价后面 —— 价先读,抽水是注脚。
   * 不许它被压缩:默认的 flex 收缩会把它切成「返…」,一个截断的百分数不如不写。
   * 挤掉的宽度由队名去让(队名本来就带省略号),量过 375px 下不溢出。 */
  body[data-odds='euro'] .cell-odds .hcp {
    order: 2;
    flex: 0 0 auto;
    min-height: 0;
    overflow: visible;
  }

  body[data-odds='euro'] .cell-move { align-self: center; }
}

@media (max-width: 560px) {
  .cell-comp { font-size: 11px; }
  .cell-team span { font-size: 13px; }
  .masthead-shape { flex-basis: 100%; }
  .shape-k { font-size: 9px; }
  .co-table .ts { display: none; }
}

/* ── 低水表 ───────────────────────────────────────────────────────────
 *
 * 跟看板共用行、比分、队名、徽章那一套,只把右边三列换掉:盘种·盘口、即时水位、
 * 低边走势。行的容器叫 .lw-main 而不是 .row-main,所以看板那些针对 .row-main 的
 * 规则不会漏过来 —— 该共用的在下面明写一遍,共 4 行,换来的是改看板时不会顺手
 * 把这一页碰坏。
 *
 * 金色在这一页只落在**入选那一边**的水位上。全站金色的意思是「澳彩的现价」,
 * 而这一页每个数都是澳彩现价,一律涂金就等于没涂。
 */

.lw-head,
.lw-main {
  display: grid;
  grid-template-columns: var(--lw-cols);
  gap: var(--gut);
  align-items: center;
}

.lw-main {
  padding: 7px 4px;
  transition: background 0.12s;
}

.lw-main:hover { background: var(--slip); }
.row.is-live .lw-main { box-shadow: inset 2px 0 0 var(--rise); }
.row.just-scored .lw-main { animation: goal-wash 1.4s ease-out; }

/* 盘种是标注,盘口是内容 —— 跟看板里「盘口退成水位上方的小字」同一个层级关系,
 * 这里再退一级,因为这一页真正的主角在右边两列。 */
.lw-kind { min-width: 0; }

.lw-type {
  display: block;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.lw-kind > .hcp:not(.is-moved) {
  font-size: 12px;
  color: color-mix(in srgb, var(--chalk) 80%, transparent);
}

/* 入选那一边吃金色并加粗,另一边压到三成 —— 这一页问的就是「低的是哪一边」 */
.lw-water { min-width: 0; }

.lw-water .v.is-low {
  color: var(--macau);
  font-weight: 500;
}

.lw-water .v:not(.is-low) { color: color-mix(in srgb, var(--chalk) 36%, transparent); }
.lw-water.blocked .water::after { content: ' 封'; color: var(--rise); font-size: 11px; }

/* 低边走势:主水 0.94 → 0.68。数字吃方向色(红升绿降),边名留在灰里 */
.lw-fall {
  font-family: var(--mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: color-mix(in srgb, var(--chalk) 72%, transparent);
}

.lw-fall .kind {
  display: inline-block;
  min-width: 28px;
  margin-right: 7px;
  font-family: var(--han);
  font-size: 10px;
  color: var(--muted);
}

.lw-fall i { font-style: normal; margin: 0 5px; opacity: 0.4; }
.lw-fall.up { color: var(--rise); }
.lw-fall.down { color: var(--fall); }

/* 「一开就低」是话不是数,走正文字体 */
.lw-fall.flat {
  font-family: var(--han);
  font-size: 12px;
  color: var(--muted);
}

/* ── 涨走的那一行 ─────────────────────────────────────────────────────
 * 划掉,不移走。移走的话它就跟从来没入选过的行没了区别,而「刚刚还在、现在涨上去了」
 * 恰是这一页最有信息量的一件事。
 *
 * 划线用红 —— 水位往上走,全站一个意思。
 * 划的是那些已经不成立的字(时间、队名、盘口、水位),**不划最后那一列**:
 * 「0.68 → 0.74」是划掉它的理由,理由得留着能读。
 */
.lw-row.is-gone .lw-main > * { opacity: 0.46; }
.lw-row.is-gone .lw-main > .lw-fall { opacity: 1; }

/* 逐格点名,不指望划线自己传下去:text-decoration 只往在流内的块级后代传,
 * 遇到 inline-block / inline-flex 这种「原子行内盒」就断 —— 比分那个 .fs、
 * 状态徽章、升上来的盘口都是这种,漏掉哪个哪个就不划,得自己写上。
 *
 * 一律**从 .lw-main 往下选**,不从 .lw-row:展开的抽屉也在这一行里,而抽屉里
 * 各公司那张表照样有 .hcp。不加这一层的话,某一格涨走会把十三家公司的盘口
 * 全划一遍 —— 划掉的意思是「这个数已经不成立了」,别家的数并没有不成立。 */
.lw-row.is-gone .lw-main .cell-time,
.lw-row.is-gone .lw-main .badge,
.lw-row.is-gone .lw-main .cell-comp,
.lw-row.is-gone .lw-main .cell-team span,
.lw-row.is-gone .lw-main .cell-score,
.lw-row.is-gone .lw-main .cell-score .fs,
.lw-row.is-gone .lw-main .lw-type,
.lw-row.is-gone .lw-main .hcp,
.lw-row.is-gone .lw-main .water {
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--rise) 70%, transparent);
  text-decoration-thickness: 1px;
}

/* 金色收走:它已经不是低水了 */
.lw-row.is-gone .lw-water .v.is-low {
  color: inherit;
  font-weight: 400;
}

/* 理由那一格反过来亮起来,照徽章那套做成一小片底色 */
.lw-row.is-gone .lw-main > .lw-fall {
  background: color-mix(in srgb, var(--rise) 13%, transparent);
  border-radius: 2px;
  padding: 1px 6px;
  margin-left: -6px;
}

/* ── 深度计 ───────────────────────────────────────────────────────────
 * 水线在顶上那道金线,每条低水从线上垂一道下来:垂得越长水越深,由深到浅
 * 从左排到右。读出来是一条海底线 —— 右端总有一片贴着水线的平地,那是
 * 0.70 这个停车位(库里 634 条低水有 282 条正停在 0.70)。
 *
 * 轴钉死在 0.60–0.70(见 low.js 的 FLOOR),不随当天数据伸缩 —— 翻日期时前后两天的
 * 剖面得能直接比。两道横线是中点 0.65 和轴底 0.60。
 */
.lw-profile {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 2px;
  height: 64px;
  border-top: 1px solid color-mix(in srgb, var(--macau) 60%, transparent);
  background: linear-gradient(
    to bottom,
    transparent 0 calc(50% - 1px),
    var(--rule-soft) calc(50% - 1px) 50%,
    transparent 50% calc(100% - 1px),
    var(--rule-soft) calc(100% - 1px) 100%
  );
}

.lw-sound {
  position: relative;
  height: 100%;
  min-width: 3px;
}

.lw-sound i {
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: var(--d);
  background: color-mix(in srgb, var(--macau) 42%, transparent);
  transition: height 0.35s ease;
}

/* 线尽头那个点就是水位所在的深度 */
.lw-sound i::after {
  content: '';
  position: absolute;
  left: -1.5px;
  bottom: -2px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--macau);
}

.lw-sound:hover i { background: var(--macau); }

.lw-note {
  margin: 8px 0 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* 窄屏跟看板同一个改法:三行卡片。前两行的格位由上面那个断点里的公共规则安排,
 * 这里只管第三行换成「盘种 水位 走势」。 */
@media (max-width: 1040px) {
  /* 收列头这一句必须写在这里,不能搭上面那个断点里 .colhead 的车:.lw-head 的
   * display:grid 在本文件里排在那之后,同样是单类选择器,后来的赢 —— 头会重新
   * 冒出来,顶着 1018px 的九列网格把整页撑出横向滚动条。 */
  .lw-head { display: none; }

  .lw-main {
    grid-template-columns: auto minmax(100px, 1fr) auto;
    grid-template-areas:
      'time comp  status'
      'home score away'
      'kind water fall';
    row-gap: 7px;
    column-gap: 8px;
    padding: 12px 4px 14px;
  }

  .lw-kind { grid-area: kind; }
  .lw-water { grid-area: water; justify-self: center; }
  .lw-fall { grid-area: fall; justify-self: end; }

  /* 窄屏没有列头,水位自己带一个标注 —— 跟看板的 .cell-odds::before 同一个办法 */
  .lw-water::before {
    content: '即时';
    display: block;
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.12em;
    color: var(--muted);
    margin-bottom: 1px;
  }
}

@media (max-width: 560px) {
  /* 三格挤一行时,走势那列的边名(主水/小水)先让 —— 它在水位那格的金色里
   * 已经能看出来是哪一边 */
  .lw-fall { font-size: 12px; }
  .lw-fall .kind { min-width: 0; margin-right: 5px; }
}

/* ── 走势四页 ─────────────────────────────────────────────────────────
 * 升盘降水 / 升盘升水 / 降盘 / 平手盘 —— 四页一套样式,跟低水表一样只换右边
 * 三列:盘口这一程、上盘水位这一程、上盘赛果。
 *
 * 这一页的红绿**只归价的方向**(红升绿降,全站一个意思),所以赛果那一列
 * 一个颜色都不用,改用亮度排:赢盘最亮、走盘居中、输盘压暗。一格里两套颜色
 * 意思的页面,读的人每次都要先想一下这个红是哪个红。
 */

.mv-head,
.mv-main {
  display: grid;
  grid-template-columns: var(--mv-cols);
  gap: var(--gut);
  align-items: center;
}

/* 跟低水表同一个理由明写一遍:行的容器不叫 .row-main,看板那几条不会漏过来 */
.mv-main {
  padding: 7px 4px;
  transition: background 0.12s;
}

.mv-main:hover { background: var(--slip); }
.row.is-live .mv-main { box-shadow: inset 2px 0 0 var(--rise); }
.row.just-scored .mv-main { animation: goal-wash 1.4s ease-out; }

/* 盘口这一程:初盘小而暗(它已经过去了),即时正常字号,幅度在底下一行吃方向色。
 * 十四个汉字的极端行会在这里被切掉尾巴而不是溢到水位那列上 —— 切掉的是
 * 「/一球」这半截,title 里有完整的小数,而幅度那行照样把 +0.5 写出来。 */
.mv-line { min-width: 0; }

.mv-line .pair {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 13px;
}

.mv-line .from { font-size: 11px; color: var(--muted); }
.mv-line .to { color: var(--chalk); font-weight: 500; }
.mv-line i,
.mv-water i { font-style: normal; margin: 0 5px; opacity: 0.4; }

/* 幅度这一行是这一页的定义所在:页面叫「升盘」,凭据就是这个 +0.5 */
.mv-line .delta,
.mv-water .delta {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.mv-line .delta.up,
.mv-water .delta.up { color: var(--rise); }
.mv-line .delta.down,
.mv-water .delta.down { color: var(--fall); }

/* 上盘水位这一程。边名(主水/客水)留在灰里,它是标注;两个价里**即时那个**
 * 亮起来 —— 全站金色只留给「入选的那一边」这种回答问题的用法,这里两个价都是
 * 澳彩现价,一律涂金等于没涂,所以用亮度分先后。 */
.mv-water {
  min-width: 0;
  font-family: var(--mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.mv-water .pair { display: block; }

.mv-water .kind {
  display: inline-block;
  min-width: 26px;
  margin-right: 6px;
  font-family: var(--han);
  font-size: 10px;
  color: var(--muted);
}

.mv-water .v { color: color-mix(in srgb, var(--chalk) 52%, transparent); }
.mv-water .v.to { color: var(--chalk); font-weight: 500; }
.mv-water .v.na { color: var(--muted); }
.mv-water .sep { margin: 0 3px; color: var(--muted); opacity: 0.6; }

/* 平手盘那一页没有上盘,这一列换成即时两边 —— 低的那边吃金色,跟低水表同一个
 * 意思:这一页问的就是「盘口平了,水位偏向哪边」。 */
.mv-water .v.is-low {
  color: var(--macau);
  font-weight: 500;
}

/* 打出没打出。亮度三档,不上红绿(见本节开头)。打出那一格给一小片底色,让它在
 * 一屏里能被扫出来 —— 底色是 chalk 的极淡一层,不是任何一个有方向含义的颜色。
 *
 * 两行,跟左边盘口和水位那两格同一个形状:上面一行是结论(打出 / 没打出 / 走盘),
 * 底下小字是凭据(上盘赢 +0.75)。凭据那行**不吃这一格的亮度**,一律留在灰里 ——
 * 它是注脚,亮度是给结论那个词的。 */
.mv-res {
  min-width: 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.mv-res .pair { display: block; }
.mv-res .mark { margin-right: 5px; opacity: 0.8; }

/* 凭据那行跟 .mv-line / .mv-water 的 delta 同一档字号,三列的第二行才对得齐 */
.mv-res .why {
  font-size: 10px;
  font-weight: 400;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
}

.mv-res.win {
  color: var(--chalk);
  font-weight: 500;
  background: color-mix(in srgb, var(--chalk) 9%, transparent);
  border-radius: 2px;
  padding: 1px 6px;
  margin-left: -6px;
}

.mv-res.push { color: color-mix(in srgb, var(--chalk) 62%, transparent); }
.mv-res.lose { color: color-mix(in srgb, var(--chalk) 34%, transparent); }
.mv-res.none { color: var(--muted); }

/* 没进这张表的那些去哪了。压在表尾,字比表里任何一格都小 —— 它是交代,不是内容 */
.mv-gap {
  margin: 0;
  padding: 0 var(--pad) 48px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  line-height: 1.7;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* ── 报头那把尺 ───────────────────────────────────────────────────────
 * 一条横尺:左边亮的那截是赢盘占比,分界线落在哪就是赢盘率;金色那道竖刻度是
 * 基准。要读的只有一件事 —— **分界线离刻度有多远**。贴着就是没话说,而这四个桶
 * 目前全都贴着,那正是这把尺要说的话(见 move.js 的 renderWinRate)。
 *
 * 亮的那截用 chalk 不用金:金色在全站是「澳彩」的意思,而这条尺上的两边都是
 * 澳彩,只有那道基准刻度是需要被认出来的东西,金色留给它一个人。
 */
.wr-bar {
  position: relative;
  display: flex;
  height: 10px;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: var(--slip);
  overflow: visible;
}

.wr-bar .win {
  background: color-mix(in srgb, var(--chalk) 74%, transparent);
  transition: width 0.4s ease;
}

.wr-bar .lose { flex: 1; }

/* 刻度比尺高出上下各 4px:它得能从尺里认出来,又不能变成第二根柱子 */
.wr-bar .tick {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 1px;
  background: var(--macau);
}

.wr-note {
  margin: 8px 0 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  line-height: 1.6;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* 窄屏跟另两页同一个改法:三行卡片,第三行换成「盘口 水位 赛果」。 */
@media (max-width: 1040px) {
  /* 跟 .lw-head 完全一样的道理,也必须写在这里而不是搭上面 .colhead 的车:
   * .mv-head 的 display:grid 在本文件里排得更后,同为单类选择器,后来的赢。 */
  .mv-head { display: none; }

  .mv-main {
    grid-template-columns: auto minmax(100px, 1fr) auto;
    grid-template-areas:
      'time comp  status'
      'home score away'
      'line water res';
    row-gap: 7px;
    column-gap: 8px;
    padding: 12px 4px 14px;
  }

  /* 这三格不加「初盘/即时」那种标注:盘口写的是汉字盘口话、水位写的是两位小数、
   * 赛果第一个字符是 ✓✗=,三格各是一种形状,列头没了也认得出谁是谁。 */
  .mv-line { grid-area: line; }
  .mv-water { grid-area: water; justify-self: center; }
  .mv-res { grid-area: res; justify-self: end; }

  /* 宽屏那条 ellipsis 在这里必须撤掉:三格挤 375px 时被切掉的正好是「→ 即时」
   * 那半截,而即时才是这一程的结果 —— 宁可让它折成两行。 */
  .mv-line .pair {
    white-space: normal;
    overflow: visible;
  }
}

@media (max-width: 560px) {
  /* 三格挤一行时,盘口那一程先让:幅度那行(升 0.5)已经把这一页的定义说全了 */
  .mv-line .pair { font-size: 12px; }
  .mv-water { font-size: 12px; }
  .mv-water .kind { min-width: 0; margin-right: 4px; }
  .mv-res { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}