/**
 * 出奖图尺寸定稿（用户锁定，禁止 Agent/layout 另写宽高或 fill/contain 压图）
 *
 * 唯一数据源：
 *   js/core/core.js  → H5_IMG
 *   css/client.css   → :root --h5-img-*
 *
 * | 用途              | 像素    | H5_IMG / CSS 变量              |
 * |-------------------|---------|--------------------------------|
 * | 开奖球 bg_ball_*  | 80×80   | ball / --h5-img-ball-w/h       |
 * | 赛车 bg_che_*     | 64×64   | ballCar / --h5-img-ball-car-*  |
 * | 顶栏第2行等方框   | 64×64   | tagTs / --h5-img-tag-ts-*      |
 * | 顶栏第3行方框     | 48×48   | tagTsLast / --h5-img-tag-ts-last-* |
 * | 第3行标签底图     | 按文件  | H5_IMG.tagTsByFile + span --h5-tag-ts-* |
 *
 * | VS 底 bg_*_1    | 327–328×128 | vsPaneByFile + --h5-vs-pane-*   |
 * | 扑克 res/poker  | 80×104      | pokerCard / pokerCardImg      |
 *
 * 加载于所有 *-layout.css 之后；layout 不得再写 .ref-head-row 球/方框宽高。
 * 禁止对 .poker-img / .ref-vs-pane-bg 使用 contain 或小于 H5_IMG 的宽高。
 */

.ref-game .ref-head-row .ref-draw-balls,
.ref-game .ref-head-row .ref-last {
  overflow: visible;
}

.ref-game .ref-head-row .ref-draw-balls {
  align-items: center;
  min-height: var(--h5-img-ball-h);
}

.ref-game .ref-head-row .ref-draw-balls .ref-vs-open {
  min-height: var(--h5-vs-pane-h, var(--h5-img-vs-pane-h));
  flex-shrink: 0;
}

.ref-game .ref-head-row .ref-draw-balls .ref-vs-pane,
.ref-game .marksix-draw-rec-balls .ref-vs-pane {
  width: var(--h5-vs-pane-w, var(--h5-img-vs-pane-w)) !important;
  height: var(--h5-vs-pane-h, var(--h5-img-vs-pane-h)) !important;
  min-width: var(--h5-vs-pane-w, var(--h5-img-vs-pane-w)) !important;
  min-height: var(--h5-vs-pane-h, var(--h5-img-vs-pane-h)) !important;
  max-width: var(--h5-vs-pane-w, var(--h5-img-vs-pane-w)) !important;
  max-height: var(--h5-vs-pane-h, var(--h5-img-vs-pane-h)) !important;
  flex-shrink: 0 !important;
  box-sizing: border-box;
}

/* 龙虎半幅窗：容器半宽裁切，底图 img 仍满幅（见 client.css half-bg left 偏移） */
.ref-game[data-kind="lfd"] .ref-head-row .ref-draw-balls .ref-vs-open-half-bg .ref-vs-pane.ref-vs-pane-half,
.ref-game[data-kind="lfd"] .marksix-draw-rec-balls .ref-vs-open-half-bg .ref-vs-pane.ref-vs-pane-half {
  width: calc(var(--h5-vs-pane-w, var(--h5-img-vs-pane-w)) * var(--h5-lfd-vs-half-ratio, 0.5)) !important;
  min-width: calc(var(--h5-vs-pane-w, var(--h5-img-vs-pane-w)) * var(--h5-lfd-vs-half-ratio, 0.5)) !important;
  max-width: calc(var(--h5-vs-pane-w, var(--h5-img-vs-pane-w)) * var(--h5-lfd-vs-half-ratio, 0.5)) !important;
}

.ref-game .ref-head-row .ref-draw-balls .ref-vs-pane-bg,
.ref-game .marksix-draw-rec-balls .ref-vs-pane-bg {
  width: var(--h5-vs-pane-w, var(--h5-img-vs-pane-w)) !important;
  height: var(--h5-vs-pane-h, var(--h5-img-vs-pane-h)) !important;
  min-width: var(--h5-vs-pane-w, var(--h5-img-vs-pane-w)) !important;
  min-height: var(--h5-vs-pane-h, var(--h5-img-vs-pane-h)) !important;
  max-width: var(--h5-vs-pane-w, var(--h5-img-vs-pane-w)) !important;
  max-height: var(--h5-vs-pane-h, var(--h5-img-vs-pane-h)) !important;
  object-fit: none !important;
  flex: none !important;
}

.ref-game .ref-head-row .ref-draw-balls .ref-vs-ico,
.ref-game .marksix-draw-rec-balls .ref-vs-ico {
  width: var(--h5-img-vs-w) !important;
  height: var(--h5-img-vs-h) !important;
  object-fit: none !important;
  flex: none !important;
}

.ref-game .ref-head-row .ref-draw-balls .poker-img,
.ref-game .marksix-draw-rec-balls .poker-img {
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: none !important;
  flex-shrink: 0 !important;
}

.ref-game .ref-head-row .ref-draw-balls .ball.ball-img,
.ref-game .ref-head-row .ref-draw .ball.ball-img,
.ref-game .ref-head-row .ref-last .ball.ball-img,
.ref-game .ref-head-row .ref-draw-balls.ref-draw-dense .ball.ball-img,
.ref-game .ref-head-row .ref-draw-balls.ref-draw-xdense .ball.ball-img,
.ref-game .ref-head-row .ref-draw-balls.ref-draw-xxdense .ball.ball-img,
.ref-game .ref-head-row .ref-draw-balls .ball.ball-img.car,
.ref-game .ref-head-row .ref-draw-balls .ball.ball-img.ball-streak,
.ref-game[data-kind] .ref-head-row .ref-draw-balls .ball.ball-img {
  box-sizing: content-box;
  position: relative;
  display: inline-block !important;
  vertical-align: middle;
  line-height: 0;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  flex-basis: auto !important;
  padding: 0;
  border-radius: 0 !important;
  overflow: visible;
}

/* 第二行开奖球：容器与 PNG 同尺 80×80，禁止 legacy 30px + border-radius:50% 压成椭圆 */
.ref-game .ref-head-row .ref-draw-balls .ball.ball-img:not(.car) {
  width: var(--h5-img-ball-w) !important;
  height: var(--h5-img-ball-h) !important;
  min-width: var(--h5-img-ball-w) !important;
  min-height: var(--h5-img-ball-h) !important;
  max-width: var(--h5-img-ball-w) !important;
  max-height: var(--h5-img-ball-h) !important;
  flex: 0 0 var(--h5-img-ball-w) !important;
  flex-basis: var(--h5-img-ball-w) !important;
  aspect-ratio: 1 / 1;
}

.ref-game .ref-head-row .ball.ball-img:not(.car) > img,
.ref-game[data-kind] .ref-head-row .ball.ball-img:not(.car) > img,
.ref-game .ref-head-row .ref-draw-balls .ball.ball-img:not(.car) > img,
.ref-game[data-kind] .ref-head-row .ref-draw-balls .ball.ball-img:not(.car) > img {
  display: block;
  position: relative !important;
  left: auto !important;
  top: auto !important;
  width: var(--h5-img-ball-w) !important;
  height: var(--h5-img-ball-h) !important;
  min-width: var(--h5-img-ball-w) !important;
  min-height: var(--h5-img-ball-h) !important;
  max-width: var(--h5-img-ball-w) !important;
  max-height: var(--h5-img-ball-h) !important;
  object-fit: none !important;
  border-radius: 0 !important;
  aspect-ratio: 1 / 1;
  pointer-events: none;
}

.ref-game .ref-head-row .ref-draw-balls .ball.ball-img.car {
  width: var(--h5-img-ball-car-w) !important;
  height: var(--h5-img-ball-car-h) !important;
  min-width: var(--h5-img-ball-car-w) !important;
  min-height: var(--h5-img-ball-car-h) !important;
  max-width: var(--h5-img-ball-car-w) !important;
  max-height: var(--h5-img-ball-car-h) !important;
  flex: 0 0 var(--h5-img-ball-car-w) !important;
  border-radius: 0 !important;
}

.ref-game .ref-head-row .ball.ball-img.car > img,
.ref-game[data-kind] .ref-head-row .ball.ball-img.car > img,
.ref-game .ref-head-row .ref-draw-balls .ball.ball-img.car > img {
  width: var(--h5-img-ball-car-w) !important;
  height: var(--h5-img-ball-car-h) !important;
  min-width: var(--h5-img-ball-car-w) !important;
  min-height: var(--h5-img-ball-car-h) !important;
  max-width: var(--h5-img-ball-car-w) !important;
  max-height: var(--h5-img-ball-car-h) !important;
  object-fit: none !important;
  border-radius: 0 !important;
}

.ref-game .ref-head-row .ball.ball-img.ball-streak > img {
  width: var(--h5-img-ball-w) !important;
  height: var(--h5-img-ball-h) !important;
  object-fit: none !important;
  border-radius: 0;
}

.ref-game .ref-head-row .ref-last .tag.tag-img,
.ref-game .ref-head-row .ref-draw .tag.tag-img,
.ref-game[data-kind] .ref-head-row .ref-last .tag.tag-img,
.ref-game[data-kind] .ref-head-row .ref-draw .tag.tag-img {
  box-sizing: border-box;
  width: var(--h5-tag-ts-w, var(--h5-img-tag-ts-last-w)) !important;
  height: var(--h5-tag-ts-h, var(--h5-img-tag-ts-last-h)) !important;
  min-width: var(--h5-tag-ts-w, var(--h5-img-tag-ts-last-w)) !important;
  min-height: var(--h5-tag-ts-h, var(--h5-img-tag-ts-last-h)) !important;
  max-width: none !important;
  max-height: none !important;
  flex: 0 0 var(--h5-tag-ts-w, var(--h5-img-tag-ts-last-w)) !important;
  flex-basis: var(--h5-tag-ts-w, var(--h5-img-tag-ts-last-w)) !important;
  flex-shrink: 0 !important;
}
.ref-game .ref-head-row .ref-last .tag.tag-img > img,
.ref-game .ref-head-row .ref-draw .tag.tag-img > img,
.ref-game[data-kind] .ref-head-row .ref-last .tag.tag-img > img,
.ref-game[data-kind] .ref-head-row .ref-draw .tag.tag-img > img {
  display: block;
  position: relative !important;
  left: auto !important;
  top: auto !important;
  width: var(--h5-tag-ts-w, var(--h5-img-tag-ts-last-w)) !important;
  height: var(--h5-tag-ts-h, var(--h5-img-tag-ts-last-h)) !important;
  min-width: var(--h5-tag-ts-w, var(--h5-img-tag-ts-last-w)) !important;
  min-height: var(--h5-tag-ts-h, var(--h5-img-tag-ts-last-h)) !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: none !important;
}

.ref-game .ref-head-row .ball.ball-img em,
.ref-game[data-kind] .ref-head-row .ball.ball-img em {
  position: absolute !important;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  font-style: normal;
  font-weight: 800;
  line-height: 1;
  pointer-events: none;
}

.ref-game .ref-head-row .tag.tag-img em,
.ref-game[data-kind] .ref-head-row .tag.tag-img em {
  position: absolute !important;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  line-height: 1;
  pointer-events: none;
}

.ref-game .marksix-draw-rec-balls .die-img {
  width: auto;
  height: auto;
  object-fit: none;
}

.ref-game .marksix-draw-rec-balls .ball.ball-img:not(.car) img {
  width: var(--h5-img-ball-w);
  height: var(--h5-img-ball-h);
  object-fit: none;
}

.ref-game .marksix-draw-rec-balls .ball.ball-img.car img {
  width: var(--h5-img-ball-car-w);
  height: var(--h5-img-ball-car-h);
  object-fit: none;
}

.ref-game .marksix-draw-rec-tags .tag.tag-img {
  width: var(--h5-tag-ts-w, var(--h5-img-tag-ts-last-w)) !important;
  height: var(--h5-tag-ts-h, var(--h5-img-tag-ts-last-h)) !important;
  min-width: var(--h5-tag-ts-w, var(--h5-img-tag-ts-last-w)) !important;
  max-width: none !important;
  flex: 0 0 var(--h5-tag-ts-w, var(--h5-img-tag-ts-last-w)) !important;
  flex-basis: var(--h5-tag-ts-w, var(--h5-img-tag-ts-last-w)) !important;
  flex-shrink: 0 !important;
}
/* 两字/多字标签底图 96×48（bg_ts_duizi/shunzi），与顶栏 --h5-tag-ts-* 一致 */
.ref-game .marksix-draw-rec-tags .tag.tag-img.tag-ts-wide {
  width: var(--h5-tag-ts-w, var(--h5-img-tag-ts-wide-w)) !important;
  height: var(--h5-tag-ts-h, var(--h5-img-tag-ts-wide-h)) !important;
  min-width: var(--h5-tag-ts-w, var(--h5-img-tag-ts-wide-w)) !important;
  flex: 0 0 var(--h5-tag-ts-w, var(--h5-img-tag-ts-wide-w)) !important;
  flex-basis: var(--h5-tag-ts-w, var(--h5-img-tag-ts-wide-w)) !important;
}
.ref-game .marksix-draw-rec-tags .tag.tag-img img {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  width: var(--h5-tag-ts-w, var(--h5-img-tag-ts-last-w)) !important;
  height: var(--h5-tag-ts-h, var(--h5-img-tag-ts-last-h)) !important;
  min-width: var(--h5-tag-ts-w, var(--h5-img-tag-ts-last-w)) !important;
  min-height: var(--h5-tag-ts-h, var(--h5-img-tag-ts-last-h)) !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: none !important;
}
.ref-game .marksix-draw-rec-tags .tag.tag-img.tag-ts-wide img {
  width: var(--h5-tag-ts-w, var(--h5-img-tag-ts-wide-w)) !important;
  height: var(--h5-tag-ts-h, var(--h5-img-tag-ts-wide-h)) !important;
  min-width: var(--h5-tag-ts-w, var(--h5-img-tag-ts-wide-w)) !important;
  min-height: var(--h5-tag-ts-h, var(--h5-img-tag-ts-wide-h)) !important;
}

.ref-game .marksix-draw-rec-tags .ball.ball-img img {
  width: var(--h5-img-ball-w);
  height: var(--h5-img-ball-h);
  object-fit: none;
}

/* 开奖记录叠字：与顶栏第2行球号、第3行标签/特码同尺（跟 H5_IMG + --h5-tag-ts-*） */
.ref-game .marksix-draw-rec-balls .ball.ball-img em {
  font-size: var(--h5-skin-ball-num-font) !important;
  font-weight: 800;
  line-height: 1;
}
.ref-game .marksix-draw-rec-balls .marksix-draw-plus {
  font-size: calc(var(--h5-img-ball-h) * 0.48 * var(--h5-type-scale, 1)) !important;
  font-weight: 800;
  line-height: 1;
}
.ref-game .marksix-draw-rec-tags .tag.tag-img em {
  font-size: calc(var(--h5-tag-ts-h, var(--h5-img-tag-ts-last-h)) * 0.52 * var(--h5-type-scale, 1)) !important;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}
.ref-game .marksix-draw-rec-tags .tag.tag-img.tag-ts-wide em {
  font-size: var(--h5-skin-tag-ts-wide-font) !important;
}
.ref-game .marksix-draw-rec-tags .ball.ball-img em {
  font-size: var(--h5-skin-tag-ts-font) !important;
  font-weight: 800;
  line-height: 1;
}