/**
 * 六合彩 H5 布局定稿（1080×960）
 * — 本文件在 client.css 之后加载，仅作用于 .ref-game[data-kind="marksix"]。
 * — 改其它玩法：不要改本文件；不要动 client.css 里 [data-kind="marksix"] 区块。
 * — 改六合彩布局：只改本文件 + docs/marksix-layout-lock.md，须用户点名。
 */

.ref-game[data-kind="marksix"] {
  /* === 画布分区（定稿 px） === */
  --h5-design-w: 1080px;
  --h5-design-h: 960px;
  --h5-skin-head-h: 310px;
  --h5-skin-qieye-h: 98px;
  --h5-skin-xiazhu-w: 1048px;
  --h5-skin-xiazhu-h: 408px;
  --h5-skin-xiazhu-radius: 16px;
  --h5-skin-xiazhu-left: 16px;
  --h5-skin-xiazhu-top: 426px;
  --h5-skin-touzhu-w: 400px;
  --h5-skin-touzhu-h: 88px;
  --ref-head-block-h: 310px;
  --ref-tabs-bar-h: 98px;
  --ref-bet-pane-h: 408px;
  --ref-foot-block-h: 144px;
  --ref-head-brand-w: 313px;

  /* === 皮肤锚点（ref-ui skinRectFromAnchor / layoutMarksixBetPane） === */
  --h5-skin-anchor-game-x: 0px;
  --h5-skin-anchor-game-y: 325px;
  --h5-skin-anchor-qieye-x: 0px;
  --h5-skin-anchor-qieye-y: 120px;
  --h5-skin-anchor-xiazhu-x: 0px;
  --h5-skin-anchor-xiazhu-y: -150px;
  --h5-skin-anchor-di-x: 0px;
  --h5-skin-anchor-di-y: -155px;
  --h5-skin-di-sheet-h: 650px;

  /* === 顶栏左侧品牌 / 开奖区 === */
  --h5-img-game-icon: 176px;
  --h5-img-player-w: 96px;
  --h5-img-player-h: 96px;
  --h5-marksix-brand-lower-offset: 146px;
  --h5-marksix-outcome-offset-y: 32px;
  --h5-marksix-outcome-edge-gap: 10px;
  --h5-ref-tools-offset-y: 10px;
  --h5-ref-cut-font: 34px;
  --h5-ref-cut-clock-font: 38px;

  /* === 底滑层（玩法说明 / 投注记录 / 开奖记录 / 筹码 / 更多 / 充值） === */
  --h5-marksix-bottom-sheet-max: min(780px, 88%);
  --h5-bottom-sheet-max: min(780px, 88%);
  --h5-sheet-close-font: 26px;
  --h5-sheet-close-pad-y: 12px;
  --h5-sheet-close-pad-x: 28px;
  --h5-sheet-close-radius: 12px;
  --h5-sheet-close-min-w: 128px;
  --h5-sheet-close-min-h: 52px;

  /* === 更多 · 用户信息 === */
  --h5-more-user-row-gap: 28px;
  --h5-more-user-label-w: 176px;
  --h5-more-user-k-size: 28px;
  --h5-more-user-v-size: 30px;
  --h5-more-user-line: 1.48;
  --h5-more-user-row-min-h: 54px;
  --h5-more-user-col-gap: 20px;

  /* === 切页 / 底栏 / 下注格（与 client.css marksix 块一致） === */
  --h5-tab-qieye-font: calc(30px * var(--h5-type-scale));
  --h5-tab-qieye-pad-x: 14px;
  --h5-tab-qieye-pad-y: 8px;
  --h5-tab-qieye-gap: 8px;
  --h5-foot-touzhu-pad-x: 22px;
  --h5-foot-touzhu-chip: 72px;
  --h5-marksix-pile-chip-opacity: 1;

  /* === 中奖提醒层（1 号区域顶边起，设计稿 px 钉死） === */
  --h5-marksix-win-layer-top: 0px;
  --h5-marksix-win-layer-left: 0px;
  --h5-marksix-win-layer-w: 1080px;
  --h5-marksix-win-layer-z: 20;
  --h5-marksix-win-layer-bg: rgba(12, 10, 8, .78);
  --h5-marksix-win-layer-radius: 0 0 8px 8px;
  --h5-marksix-win-layer-pad-top: 10px;
  --h5-marksix-win-layer-pad-x: 16px;
  --h5-marksix-win-layer-pad-bottom: 14px;
  --h5-marksix-win-note-gap: 6px;
  --h5-marksix-win-note-head-size: 36px;
  --h5-marksix-win-note-head-lh: 1.32;
  --h5-marksix-win-note-head-mb: 4px;
  --h5-marksix-win-note-row-size: 24px;
  --h5-marksix-win-note-row-lh: 1.35;
  --h5-marksix-win-note-row-gap: 4px;
  --h5-marksix-win-note-row-color: rgba(176, 182, 194, .9);
  --h5-marksix-win-hit-color: #ffd54f;
  --h5-marksix-win-miss-color: #c5cad6;
}

/* 结构高度钉死（避免 :root / 其它玩法改共用变量时牵连六合彩） */
.ref-game[data-kind="marksix"] > .ref-head {
  flex: 0 0 310px;
  height: 310px;
  min-height: 310px;
  max-height: 310px;
}
.ref-game[data-kind="marksix"] > .ref-tabs-bar {
  flex: 0 0 98px;
  height: 98px;
  min-height: 98px;
  max-height: 98px;
}
.ref-game[data-kind="marksix"] .ref-pane[data-pane-body] {
  left: var(--h5-skin-xiazhu-left);
  top: var(--h5-skin-xiazhu-top);
  width: 1048px;
  height: 408px;
  min-width: 1048px;
  max-width: 1048px;
  min-height: 408px;
  max-height: 408px;
}

/* 开奖球闪烁 6 秒（对齐 drawSec） */
.ref-game[data-kind="marksix"] .ref-head-row .ref-draw-balls.marksix-draw-flash .ball.ball-img {
  animation: marksix-draw-flash 0.5s ease-in-out 12;
}
/* 中奖提醒：相对 ref-game 画布绝对定位，勿用 JS inline 改 top/left/width */
.ref-game[data-kind="marksix"] > .win-layer {
  top: var(--h5-marksix-win-layer-top);
  left: var(--h5-marksix-win-layer-left);
  width: var(--h5-marksix-win-layer-w);
  min-width: var(--h5-marksix-win-layer-w);
  max-width: var(--h5-marksix-win-layer-w);
  height: auto;
  max-height: none;
  padding: var(--h5-marksix-win-layer-pad-top) var(--h5-marksix-win-layer-pad-x)
    var(--h5-marksix-win-layer-pad-bottom);
  background: var(--h5-marksix-win-layer-bg);
  border-radius: var(--h5-marksix-win-layer-radius);
  z-index: var(--h5-marksix-win-layer-z);
  box-sizing: border-box;
  overflow: visible;
}
.ref-game[data-kind="marksix"] > .win-layer .win-note {
  gap: var(--h5-marksix-win-note-gap);
}
.ref-game[data-kind="marksix"] > .win-layer .win-note-head,
.ref-game[data-kind="marksix"] > .win-layer .hit,
.ref-game[data-kind="marksix"] > .win-layer .miss {
  font-size: var(--h5-marksix-win-note-head-size);
  line-height: var(--h5-marksix-win-note-head-lh);
  margin-bottom: var(--h5-marksix-win-note-head-mb);
}
.ref-game[data-kind="marksix"] > .win-layer .win-note-head.hit,
.ref-game[data-kind="marksix"] > .win-layer .hit {
  color: var(--h5-marksix-win-hit-color);
}
.ref-game[data-kind="marksix"] > .win-layer .win-note-head.miss,
.ref-game[data-kind="marksix"] > .win-layer .miss {
  color: var(--h5-marksix-win-miss-color);
}
.ref-game[data-kind="marksix"] > .win-layer .win-note-details {
  gap: var(--h5-marksix-win-note-row-gap);
}
.ref-game[data-kind="marksix"] > .win-layer .win-note-row {
  font-size: var(--h5-marksix-win-note-row-size);
  line-height: var(--h5-marksix-win-note-row-lh);
  font-weight: 600;
  color: var(--h5-marksix-win-note-row-color);
}

/* 下注格：底图 z0 → 字/倍率 z5 → 筹码 z6 → 金额 z7（与 client.css 皮服通用一致） */
.ref-game[data-kind="marksix"] .bet-tile .tile-mine-pile,
.ref-game[data-kind="marksix"] .bet-tile .crowd-pile,
.ref-game[data-kind="pc28"] .bet-tile .tile-mine-pile,
.ref-game[data-kind="pc28"] .bet-tile .crowd-pile {
  z-index: 6;
}
.ref-game[data-kind="marksix"] .ref-pane .bet-tile-xz-img,
.ref-game[data-kind="pc28"] .ref-pane .bet-tile-xz-img {
  z-index: 0;
}

/* 底滑层 z-index 栈（定稿，勿与其它玩法对调） */
.ref-game[data-kind="marksix"] .h5-pay-layer { z-index: 51; }
.ref-game[data-kind="marksix"] .h5-chip-layer { z-index: 50; }
.ref-game[data-kind="marksix"] .marksix-rules-layer { z-index: 50; }
.ref-game[data-kind="marksix"] .marksix-settle-layer { z-index: 49; }
.ref-game[data-kind="marksix"] .marksix-draw-rec-layer { z-index: 48; }
.ref-game[data-kind="marksix"] .h5-more-layer { z-index: 47; }

/* 盘路图：顶边向上展开（用户定稿六合彩大路） */
.ref-game[data-kind="marksix"] > .marksix-road-layer {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  width: 100%;
  z-index: 46;
  pointer-events: none;
  box-sizing: border-box;
  transform: translateY(-100%);
}
.ref-game[data-kind="marksix"] > .marksix-road-layer[hidden] {
  display: none !important;
}
.ref-game[data-kind="marksix"] > .marksix-road-layer.is-open .marksix-road-panel {
  pointer-events: auto;
}
html.marksix-road-up-open,
html.marksix-road-up-open body {
  overflow: visible !important;
}
html.marksix-road-up-open .shell.shell--h5-design,
html.marksix-road-up-open .fit-inner.is-game-canvas,
html.marksix-road-up-open .game-stage,
html.marksix-road-up-open .game-pane.ref-stage,
html.marksix-road-up-open .game-pane.ref-stage > .ref-game[data-kind="marksix"] {
  overflow: visible !important;
}
.ref-game[data-kind="marksix"] .marksix-road-panel {
  --h5-marksix-road-bead: 38px;
  --h5-marksix-road-col-w: 38px;
  --h5-marksix-road-row-gap: 6px;
  --h5-marksix-road-col-gap: 8px;
  --h5-marksix-road-edge-pad: 20px;
  --h5-marksix-road-6h: calc(
    6 * var(--h5-marksix-road-bead) + 5 * var(--h5-marksix-road-row-gap)
  );
  margin: 0;
  padding: 8px var(--h5-marksix-road-edge-pad) 10px;
  background: var(--h5-road-panel-bg);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  box-sizing: border-box;
  overflow: hidden;
}
.ref-game[data-kind="marksix"] .marksix-road-wrap {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 8px;
  box-sizing: border-box;
}
.ref-game[data-kind="marksix"] .marksix-road-summary {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  font-size: calc(26px * var(--h5-type-scale, 1));
  font-weight: 800;
  line-height: 1.2;
}
.ref-game[data-kind="marksix"] .marksix-road-sum em,
.ref-game[data-kind="marksix"] .marksix-road-sum-total em {
  font-style: normal;
  font-weight: 800;
}
.ref-game[data-kind="marksix"] .marksix-road-sum.red {
  color: #ff5252;
}
.ref-game[data-kind="marksix"] .marksix-road-sum.blue {
  color: #42a5f5;
}
.ref-game[data-kind="marksix"] .marksix-road-sum.green {
  color: #66bb6a;
}
.ref-game[data-kind="marksix"] .marksix-road-sum-total {
  margin-left: auto;
  color: rgba(255, 255, 255, 0.92);
  font-weight: 700;
}
.ref-game[data-kind="marksix"] .marksix-road-scroll {
  width: 100%;
  height: var(--h5-marksix-road-6h);
  max-height: var(--h5-marksix-road-6h);
  overflow: hidden;
  box-sizing: border-box;
  border: none;
}
.ref-game[data-kind="marksix"] .marksix-road-cols {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: var(--h5-marksix-road-col-gap);
  height: var(--h5-marksix-road-6h);
  width: 100%;
  box-sizing: border-box;
}
.ref-game[data-kind="marksix"] .marksix-road-col {
  flex: 0 0 var(--h5-marksix-road-col-w);
  width: var(--h5-marksix-road-col-w);
  min-width: var(--h5-marksix-road-col-w);
  display: flex;
  flex-direction: column;
  gap: var(--h5-marksix-road-row-gap);
  height: 100%;
  box-sizing: border-box;
  border-right: none;
}
.ref-game[data-kind="marksix"] .marksix-road-cell {
  flex: 0 0 var(--h5-marksix-road-bead);
  width: 100%;
  height: var(--h5-marksix-road-bead);
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border-bottom: none;
}
.ref-game[data-kind="marksix"] .marksix-road-cell-empty {
  visibility: hidden;
  border-color: transparent;
}
.ref-game[data-kind="marksix"] .marksix-road-cell-ball .ball.ball-img {
  width: 88%;
  height: 88%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}
.ref-game[data-kind="marksix"] .marksix-road-cell-ball .ball.ball-img img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.ref-game[data-kind="marksix"] .marksix-road-cell-ball .ball.ball-img em {
  font-size: max(14px, calc(var(--h5-marksix-road-bead) * 0.42));
  font-weight: 800;
}
.ref-game[data-kind="marksix"] .marksix-road-empty {
  padding: 16px 8px;
  text-align: center;
  font-size: calc(18px * var(--h5-type-scale, 1));
  color: rgba(255, 255, 255, 0.55);
}