/* 竞猜模式(S7):比赛页进入「观赛 | 编辑 | 竞猜」的竞猜段时,背景被替换成全幅看板。
 *
 * 版面结构(两层 + 让位)保持不变:
 *   #bet-stage  背景看板(z-index 5,pointer-events:none)
 *   #bet-side   数据面板(z-index 20,容器 pointer-events:none / 面板 auto)
 *   卡片层       (z-index 10)夹在两层之间
 *
 * 令牌全部挂在 body.canvas-betting 下,不进全局 :root —— 主站浅/暗主题不受污染。
 * S7 审美:冷静赛事工作台的暗色看板(柔和强调色),不再用黑客帝国霓虹/数字雨。 */

body.canvas-betting {
  /* 轻量子主题:贴近主站暗色工作台,强调色用柔和绿(非霓虹) */
  --bet-bg: #12161c;
  --bet-bg-soft: #1a2028;
  --bet-fg: #e8ecf0;
  --bet-dim: #8b949e;
  --bet-strong: #3dd68c;
  --bet-weak: #24352c;
  --bet-line: rgb(61 214 140 / 0.22);
  --bet-grid: rgb(61 214 140 / 0.07);
  --bet-panel: rgb(18 22 28 / 0.92);
  --bet-mine: #6ba0ff; /* 「我的注」用主站蓝,避免再叠一层赛博青 */
  --bet-left-w: clamp(18rem, 28vw, 26rem);
  --bet-right-w: clamp(17rem, 24vw, 24rem);
  --bet-font-num: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  background: var(--bet-bg);
  color: var(--bet-fg);
}

/* 背景图让位给看板;表情贴纸不渲染(用户口径) */
body.canvas-betting #bg-layer { background-image: none !important; }
body.canvas-betting .sticker-layer { display: none !important; }
body.canvas-betting .zoom-dock { display: none; } /* 竞猜模式不缩放:版面是视口级的 */

/* 点选描边:卡片自身有「进行中/已结束」的状态色,不加这一圈就分不清在看哪张 */
body.canvas-betting .canvas-card.bet-selected {
  outline: 2px solid var(--bet-strong);
  outline-offset: 4px;
  box-shadow: 0 0 0 1px rgb(61 214 140 / 0.35), 0 8px 24px rgb(0 0 0 / 0.35);
}

/* ---------- 卡片让位:左右内边距 + 顶部给标题带留高 ---------- */
body.canvas-betting .canvas-wrap-full {
  /* z-index 必须显式抬到看板(5)之上:否则 fixed 的看板会盖住卡片
   * (重写这一版时漏过这条,截图里卡片直接消失了) */
  z-index: 10;
  padding-left: var(--bet-left-w);
  padding-right: var(--bet-right-w);
  box-sizing: border-box;
}

/* ---------- 背景看板 ---------- */
#bet-stage {
  position: fixed;
  top: var(--header-height, 3rem);
  left: var(--sidebar-w);
  right: 0;
  bottom: 0;
  z-index: 5;
  overflow: hidden;
  pointer-events: none;
  color: var(--bet-fg);
  background:
    radial-gradient(120% 70% at 50% -10%, rgb(61 214 140 / 0.08), transparent 62%),
    linear-gradient(180deg, var(--bet-bg-soft), var(--bet-bg) 62%);
  font-variant-numeric: tabular-nums;
}

/* 网格:整块看板铺满 */
#bet-stage::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--bet-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--bet-grid) 1px, transparent 1px);
  background-size: 44px 44px;
}

/* S7:去掉数字雨动画;保留极淡静态纹理,避免干扰读数 */
.bet-rain,
.bet-rain::after {
  display: none;
}

/* 雨只落在两侧栏目带,中间(卡片区)保持干净:否则条文会爬在卡片与正文上 */
#bet-stage::after {
  content: '';
  position: absolute;
  inset: 0;
  /* 中间只压掉一部分:网格与数字雨要透出来,否则「背景」看起来只是一块纯黑 */
  background: linear-gradient(90deg,
    transparent 0,
    transparent calc(var(--bet-left-w) - 3rem),
    rgb(18 22 28 / 0.45) 50%,
    transparent calc(100% - var(--bet-right-w) + 3rem),
    transparent 100%);
}

@media (prefers-reduced-motion: reduce) {
  /* S7 已无看板动画;保留选择器以免旧缓存样式残留 */
}

/* 一届汇总(总奖池/未结算/我的余额):原在看板顶栏,用户要求下放到右上栏 ——
 * 顶栏整条去掉(届名在页头已有,重复且白占一条版面) */
.bet-totals {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.4rem;
  padding: 0.26rem 0.5rem;
  border: 1px solid var(--bet-line);
  background: rgb(61 214 140 / 0.06);
  border-radius: 8px;
}
.bet-total { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.bet-total i {
  font-style: normal;
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  color: var(--bet-dim);
}
.bet-total b {
  font-family: var(--bet-font-num);
  font-size: 1rem;
  color: var(--bet-strong);
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- 数据面板(左右两栏) ---------- */
#bet-side {
  position: fixed;
  top: var(--header-height, 3rem);
  left: var(--sidebar-w);
  right: 0;
  bottom: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: var(--bet-left-w) minmax(0, 1fr) var(--bet-right-w);
  grid-template-rows: minmax(0, 1fr);
  box-sizing: border-box;
  pointer-events: none; /* 中间空带放行给卡片 */
  color: var(--bet-fg);
  font-size: 0.86rem;
  font-variant-numeric: tabular-nums;
}

.bet-panel {
  pointer-events: auto;
  min-height: 0;
  overflow: auto;
  padding: 0.85rem 1rem 1rem;
  background: var(--bet-panel);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  scrollbar-width: thin;
}
#bet-left {
  grid-column: 1;
  grid-row: 1;
  border-right: 1px solid var(--bet-line);
  box-shadow: 4px 0 18px rgb(0 0 0 / 0.28);
}
/* 右列 = 一个滚动容器(下注区在前、榜单在后):矮屏也先看到下注流程 */
#bet-right {
  grid-column: 3;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: auto;
  pointer-events: auto; /* 容器自身可滚;滚动条/空白都在右列内 */
  border-left: 1px solid var(--bet-line);
  box-shadow: -4px 0 18px rgb(0 0 0 / 0.28);
  scrollbar-width: thin;
}
#bet-right-top {
  /* 不许被 flex 压扁、也不许自己内部滚动:整列统一滚。
   * 否则面板被 shrink 到 430px,底部动作区被裁掉(断言当场抓到「确认下注」不可见) */
  flex: 0 0 auto;
  overflow: visible;
  border-bottom: 1px solid var(--bet-line);
}
#bet-right-bottom {
  flex: 1 0 auto;
  overflow: visible;
}

/* 区块标题:人话小节(不再用终端提示符) */
.bet-panel-head {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--bet-fg);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--bet-line);
}
.bet-panel-head::before { content: none; }

.bet-title {
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--bet-strong);
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  flex-wrap: wrap;
}
.bet-phase { color: var(--bet-dim); font-weight: 500; font-size: var(--text-xs); }
.bet-sub { color: var(--bet-dim); font-size: var(--text-xs); }
.bet-hint {
  color: var(--bet-dim);
  font-size: 0.74rem;
  line-height: 1.5;
  border-left: 2px solid var(--bet-weak);
  padding-left: 0.5rem;
}
.bet-empty { color: var(--bet-fg); font-size: 0.82rem; line-height: 1.75; }

.bet-versus { display: flex; align-items: center; gap: 0.5rem; }
.bet-side { display: flex; align-items: center; gap: 0.4rem; min-width: 0; }
.bet-side .name { font-weight: 700; color: var(--bet-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bet-side .tag { color: var(--bet-dim); font-size: var(--text-xs); }
.bet-avatar {
  width: 2rem; height: 2rem; border-radius: 50%; flex: none;
  display: grid; place-items: center; color: #0b1510; font-weight: 700; font-size: 0.8rem;
  background: var(--bet-strong); object-fit: cover; overflow: hidden;
  box-shadow: 0 0 0 1px var(--bet-line);
}
.bet-avatar img { width: 100%; height: 100%; object-fit: cover; }
.bet-vs { color: var(--bet-dim); font-weight: 700; font-size: var(--text-xs); font-family: var(--bet-font-num); }

/* 系统预测 */
.bet-predict-top { display: flex; align-items: baseline; gap: 0.5rem; }
.bet-predict-top b {
  font-family: var(--bet-font-num);
  font-size: 1.5rem;
  color: var(--bet-strong);
}
.bet-predict-top span { color: var(--bet-dim); font-size: 0.75rem; }

/* 柱状图(奖池档位 / 预测概率共用) */
.bet-bars { display: flex; flex-direction: column; gap: 0.28rem; }
.bet-bar-row { display: grid; grid-template-columns: 4.4rem minmax(0, 1fr) 6rem; align-items: center; gap: 0.45rem; }
.bet-bar-track {
  background: rgb(61 214 140 / 0.10);
  border: 1px solid var(--bet-weak);
  border-radius: 4px;
  height: 0.75rem;
  overflow: hidden;
}
.bet-bar-fill { height: 100%; background: linear-gradient(90deg, #2a9a5c, var(--bet-strong)); }
.bet-bar-key { font-family: var(--bet-font-num); font-weight: 700; color: var(--bet-fg); }
.bet-bar-val {
  text-align: right;
  font-family: var(--bet-font-num);
  color: var(--bet-dim);
  font-size: 0.76rem;
  white-space: nowrap; /* 「120 · 100%」不许折行,折了就挤成一团 */
}
.bet-bar-row.is-mine .bet-bar-fill { background: linear-gradient(90deg, #4a7fd4, var(--bet-mine)); }
.bet-bar-row.is-mine .bet-bar-key::after { content: ' ·我'; color: var(--bet-mine); font-weight: 600; }
.bet-bar-row.is-predict .bet-bar-fill {
  background: repeating-linear-gradient(45deg, var(--bet-strong) 0 4px, transparent 4px 8px);
  border-right: 1px solid var(--bet-strong);
}

.bet-pool { display: flex; align-items: baseline; gap: 0.5rem; }
.bet-pool strong {
  font-family: var(--bet-font-num);
  font-size: 1.6rem;
  color: var(--bet-strong);
}
.bet-pool .bet-sub { font-size: 0.75rem; }

/* 盘口行列表:整行可点(点=选这个比分),行内直接显示该档奖池条与金额 */
.bet-panel-head.bet-subhead {
  border-bottom: 0;
  padding: 0.1rem 0 0;
  color: var(--bet-dim);
}
.bet-opt-list { display: flex; flex-direction: column; gap: 0.25rem; }
.bet-opt-row {
  display: grid;
  grid-template-columns: 1rem 2.6rem 3.2rem minmax(0, 1fr) 5.2rem auto;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  padding: 0.16rem 0.4rem;
  background: rgb(61 214 140 / 0.04);
  border: 1px solid var(--bet-weak);
  border-radius: 6px;
  color: var(--bet-fg);
  font: inherit;
  text-align: left;
  cursor: default;
}
button.bet-opt-row { cursor: pointer; }
button.bet-opt-row:hover { background: rgb(61 214 140 / 0.10); border-color: var(--bet-line); }
.bet-opt-row.is-pick {
  background: rgb(61 214 140 / 0.14);
  border-color: var(--bet-strong);
  box-shadow: inset 0 0 0 1px rgb(61 214 140 / 0.28);
}
.bet-opt-row.is-mine { border-color: var(--bet-mine); box-shadow: inset 0 0 0 1px rgb(107 160 255 / 0.35); }
.bet-opt-mark { color: var(--bet-strong); font-family: var(--bet-font-num); }
.bet-opt-row.is-mine .bet-opt-mark { color: var(--bet-mine); }
.bet-opt-key { font-family: var(--bet-font-num); font-weight: 700; }
.bet-opt-odds {
  font-family: var(--bet-font-num);
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--bet-strong);
  white-space: nowrap;
}
.bet-opt-val {
  text-align: right;
  font-family: var(--bet-font-num);
  font-size: 0.76rem;
  color: var(--bet-dim);
  white-space: nowrap;
}
.bet-field-label { color: var(--bet-dim); font-size: var(--text-xs); min-width: 2.4rem; }

/* 卡片选择器:面板底色是深色看板,原生 select 需显式给配色 */
.bet-picker select {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.22rem 0.4rem;
  border: 1px solid var(--bet-line);
  border-radius: 6px;
  background: rgb(0 0 0 / 0.35);
  color: var(--bet-fg);
  font: inherit;
  font-family: var(--bet-font-num);
}

/* 下注面板 */
/* 主体滚动区 + 固定动作区 */
.bet-panel-body {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.bet-panel-foot {
  border-top: 1px solid var(--bet-line);
  background: linear-gradient(180deg, rgb(18 22 28 / 0.55), rgb(18 22 28 / 0.96) 35%);
  padding-top: 0.5rem;
}
.bet-panel-foot:empty { display: none; }

.bet-bet-form {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.bet-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.bet-row input[type='number'] {
  width: 5.5rem;
  padding: 0.22rem 0.45rem;
  font: inherit;
  font-family: var(--bet-font-num);
  border-radius: 6px;
  border: 1px solid var(--bet-line);
  background: rgb(0 0 0 / 0.35);
  color: var(--bet-fg);
}
.bet-btn {
  border: 1px solid var(--bet-strong);
  border-radius: 8px;
  padding: 0.4rem 0.95rem;
  font: inherit;
  font-weight: 700;
  background: var(--bet-strong);
  color: #0b1510;
  cursor: pointer;
}
.bet-btn:hover { filter: brightness(1.06); }
.bet-btn.secondary { background: transparent; color: var(--bet-strong); }
.bet-btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.bet-error { color: #ff5f56; font-size: var(--text-xs); min-height: 1rem; font-family: var(--bet-font-num); }
.bet-ok { color: var(--bet-strong); font-size: var(--text-xs); font-family: var(--bet-font-num); }

/* 表格 */
.bet-table { width: 100%; border-collapse: collapse; font-size: var(--text-xs); }
.bet-table th, .bet-table td {
  text-align: left;
  padding: 0.2rem 0.28rem;
  border-bottom: 1px solid rgb(61 214 140 / 0.12);
}
.bet-table th { color: var(--bet-dim); font-weight: 600; font-size: var(--text-xs); }
.bet-table td.num, .bet-table th.num { text-align: right; font-family: var(--bet-font-num); }
.bet-table tr.is-mine td { background: rgb(107 160 255 / 0.10); }
.bet-chip {
  display: inline-block; font-size: 0.68rem; padding: 0 0.35rem; border-radius: 4px;
  border: 1px solid var(--bet-strong); color: var(--bet-strong); margin-left: 0.3rem;
}
.bet-win { color: var(--bet-strong); font-weight: 700; }
.bet-lose { color: var(--bet-dim); }
.bet-refund { color: var(--bet-mine); }

/* 职业对阵矩阵 */
.bet-h2h { display: flex; flex-direction: column; gap: 0.35rem; }
.bet-h2h svg { width: 100%; height: auto; display: block; overflow: visible; }
.bet-h2h .h2h-line { stroke: var(--bet-strong); fill: none; }
.bet-h2h .h2h-line.is-current { stroke: var(--bet-mine); }
.bet-h2h .h2h-ball { cursor: pointer; }
/* 图标不吃指针事件:hover 一律落在透明热区(否则命中不到,悬停就没反应) */
.bet-h2h .h2h-icon { pointer-events: none; }
/* 职业图标是彩色 SVG:暗色下**不能**被反色。这里再显式兜一道(权威豁免在 styles.css 的
 * 「职业 svg 保持原色」清单里,两处都在是因为这个坑踩过多次)。 */
.bet-h2h .h2h-icon { filter: none; }
.bet-h2h .h2h-label {
  font-size: 12px;
  fill: var(--bet-dim);
  font-family: var(--bet-font-num);
  font-variant-numeric: tabular-nums;
}
/* 悬停时被改写成胜率的那个标签要显眼(它是这一下的答案) */
.bet-h2h .h2h-label:not([data-base='']) { transition: fill 0.1s ease; }
.bet-toggle {
  align-self: flex-start;
  background: none;
  border: 1px solid var(--bet-line);
  border-radius: 6px;
  padding: 0.18rem 0.6rem;
  font: inherit;
  font-size: var(--text-xs);
  color: var(--bet-strong);
  cursor: pointer;
}
.bet-toggle:hover { background: rgb(61 214 140 / 0.1); }

/* ---------- 赛事设置弹窗里的「竞猜模式」分区(admin 用) ----------
 * 它在赛程页的赛事设置弹窗里,而 bet.css 只在赛程页加载,所以放这里。
 * 注意:这些都在弹窗内(浅色主题),所以用站点令牌而不是看板的黑绿配色。 */
.bet-admin-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.4rem; }
.bet-admin-grant { display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center; }
.bet-admin-grant select,
.bet-admin-grant input {
  padding: 0.25rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: inherit;
  font: inherit;
}
.bet-admin-grant select { flex: 1 1 11rem; min-width: 8rem; }
.bet-admin-grant input[type='number'] { width: 6.5rem; }
.bet-admin-grant input[type='text'] { flex: 1 1 7rem; min-width: 5rem; }
.bet-admin-ledger {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 14rem;
  overflow: auto;
  margin-top: 0.35rem;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.bet-admin-ledger:empty { border: 0; }
.bet-admin-row {
  display: grid;
  grid-template-columns: 3rem 6.5rem minmax(6rem, 1fr) 4.5rem minmax(6rem, 1.2fr) auto;
  gap: 0.4rem;
  align-items: center;
  padding: 0.22rem 0.5rem;
  font-size: var(--text-xs);
  border-bottom: 1px solid var(--border);
}
.bet-admin-row:last-child { border-bottom: 0; }
.bet-admin-seq { color: var(--text-muted, #6b7280); font-variant-numeric: tabular-nums; }
.bet-admin-type { font-weight: 600; }
.bet-admin-amt { text-align: right; font-variant-numeric: tabular-nums; }
.bet-admin-reason { color: var(--text-muted, #6b7280); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bet-admin-voided { color: var(--text-muted, #6b7280); font-size: var(--text-xs); }

/* 管理员单卡封盘(竞猜右栏脚) */
.bet-admin-close {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  padding: 0.35rem 0 0.55rem;
  border-bottom: 1px solid var(--bet-line);
  margin-bottom: 0.45rem;
}
.bet-locked-note {
  margin: 0.15rem 0 0.35rem;
  color: var(--bet-dim);
}

/* 窄屏不提供竞猜模式:按钮隐藏,看板/面板也不该被误挂 */
@media (max-width: 48rem) {
  #header-bet-btn { display: none !important; }
  #bet-stage, #bet-side { display: none !important; }
}