/**
 * lfd 鍥涙甯冨眬锛?080脳960锛屽榻愬叚鍚堝僵鐨灦鏋勶級
 * 1 椤舵爮 ref-head + bg_game_lfd
 * 2 鍒囬〉 ref-tabs-bar + bg_qieye
 * 3 涓嬫敞 ref-pane + bg_xiazhu_lfd
 * 4 绉垎/绛圭爜 ref-foot + bg_touzhu
 */

.ref-game[data-kind="lfd"] {
  --h5-design-w: 1080px;
  --h5-design-h: 960px;
  /* 涓庡叚鍚堝僵鍚岃鏍煎簳婊戯紙鐜╂硶璇存槑 / 鎶曟敞璁板綍 / 寮€濂栬褰曪級 */
  --h5-marksix-bottom-sheet-max: min(780px, 88%);
  --h5-bottom-sheet-max: min(780px, 88%);
  --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;
  --h5-skin-anchor-di-x: 0px;
  --h5-skin-anchor-di-y: -155px;
  --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;
  /* 运行时由 layoutSkinnedBetPane 写入；默认对齐 xiazhu 底缘 426+408-310-98 */
  --h5-lfd-foot-mt: 426px;
  --h5-tab-qieye-pad-x: 14px;
  --h5-tab-qieye-pad-y: 8px;
  --h5-tab-qieye-gap: 8px;
  --h5-tab-qieye-btn-pad-x: 4px;
  --h5-tab-qieye-btn-radius: 14px;
  --h5-marksix-pile-chip-opacity: 1;
  /* 红黑切页 lay-10（btn_xz_6_1 232×168）：字/倍率小于龙虎 lay-2 大格 */
  --h5-lfd-rb-bet-lab-font: calc(26px * var(--ui-text-scale, 1));
  --h5-lfd-rb-bet-odds-font: calc(15px * var(--ui-text-scale, 1));
  --h5-img-game-icon: 176px;
  --ref-head-brand-w: 313px;
  --ref-head-block-h: 310px;
  --h5-img-player-w: 96px;
  --h5-img-player-h: 96px;
  /* 搂1 椤舵爮鍑犱綍瀵归綈鍏悎褰╋紙marksix-layout-lock + client marksix ref-head锛?*/
  --h5-lfd-brand-lower-offset: 146px;
  --h5-lfd-outcome-offset-y: 32px;
  --h5-lfd-outcome-edge-gap: 10px;
  --h5-lfd-draw-row-gap: 0;
  --ref-draw-balls-max-w: 720px;
  --h5-ref-tool-radius: 11px;
  --h5-ref-tool-bar-w: 192px;
  --h5-ref-tool-bar-h: 72px;
  --h5-ref-tool-sq: 72px;
  --h5-ref-tool-gengduo: 56px;
  --h5-ref-tool-caret-half: 11px;
  --h5-ref-tool-caret-h: 14px;
  /* 鏂囧瓧瑙勬牸瀵归綈鍏悎褰?*/
  --ui-text-scale: var(--h5-type-scale);
  --h5-ref-tools-offset-y: 10px;
  --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-lfd-ball-num-font: var(--h5-skin-ball-num-font);
  --h5-ref-vs-label-font: 52px;
  --h5-ref-vs-pip-font: 36px;
  --h5-ref-vs-card-h: 76px;
  --h5-ref-vs-pane-pad-x: 10px;
  --h5-ref-vs-pane-overlap: -32px;
  --h5-lfd-vs-ico-gap: 8px;
  /* 半幅：long 右段 / hu 左段（有牌一侧），比例 0.5 = 底图截一半 */
  --h5-lfd-vs-half-ratio: 0.5;
  --h5-lfd-vs-half-overlap: -20px;
  --h5-lfd-vs-card-inset: 10px;
  --h5-lfd-vs-art-w: 92px;
  --h5-lfd-vs-pane-pad-x: 6px;
  --h5-lfd-tag-ts-font: var(--h5-skin-tag-ts-font);
  --h5-lfd-win-layer-top: 0px;
  --h5-lfd-win-layer-left: 0px;
  --h5-lfd-win-layer-w: 1080px;
  --h5-lfd-win-layer-z: 20;
  --h5-lfd-win-layer-bg: rgba(12, 10, 8, .78);
  --h5-lfd-win-layer-radius: 0 0 8px 8px;
  --h5-lfd-win-layer-pad-top: 10px;
  --h5-lfd-win-layer-pad-x: 16px;
  --h5-lfd-win-layer-pad-bottom: 14px;
  --h5-lfd-win-note-gap: 6px;
  --h5-lfd-win-note-head-size: 36px;
  --h5-lfd-win-note-head-lh: 1.32;
  --h5-lfd-win-note-head-mb: 4px;
  --h5-lfd-win-note-row-size: 24px;
  --h5-lfd-win-note-row-lh: 1.35;
  --h5-lfd-win-note-row-gap: 4px;
  --h5-lfd-win-note-row-color: rgba(176, 182, 194, .9);
  --h5-lfd-win-hit-color: #ffd54f;
  --h5-lfd-win-miss-color: #c5cad6;
  position: relative;
  background: #0a0a0e;
  isolation: isolate;
  overflow: visible;
}

/* 鐨浘鏍堬紙di / game / qieye / xiazhu锛?*/
.ref-game[data-kind="lfd"] .ref-skin-stack {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--h5-design-w);
  height: var(--h5-design-h);
  pointer-events: none;
  z-index: 0;
}
.ref-game[data-kind="lfd"] .ref-skin-layer {
  position: absolute;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  object-fit: none;
  max-width: none;
  max-height: none;
  pointer-events: none;
  user-select: none;
}

/* 搂1 椤舵爮锛?10脳1080锛屼笌鍏悎褰?1 鍙峰尯鍩熷悓浣嶇疆/鍚屽昂瀵革級 */
.ref-game[data-kind="lfd"] > .ref-head {
  flex: 0 0 var(--ref-head-block-h);
  height: var(--ref-head-block-h);
  min-height: var(--ref-head-block-h);
  max-height: var(--ref-head-block-h);
  position: relative;
  z-index: 3;
  background: transparent;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 12px 16px 0 10px;
  box-sizing: border-box;
  overflow: visible;
}
.ref-game[data-kind="lfd"] .ref-head-brand {
  position: relative;
  align-self: start;
  justify-content: flex-start;
  overflow: visible;
  min-height: calc(
    var(--h5-lfd-brand-lower-offset) + var(--h5-img-player-h) + var(--h5-ref-cut-row-min-h)
  );
}
.ref-game[data-kind="lfd"] .ref-brand-top {
  position: absolute;
  top: 0;
  left: 3px;
  z-index: 2;
  flex-shrink: 0;
}
.ref-game[data-kind="lfd"] .ref-brand-lower {
  position: relative;
  z-index: 3;
  margin-top: var(--h5-lfd-brand-lower-offset);
  justify-content: flex-start;
  padding-bottom: 0;
  flex-shrink: 0;
}
.ref-game[data-kind="lfd"] .ref-head-brand .crowd-dock.ref-player-dock,
.ref-game[data-kind="lfd"] .ref-head-brand .ref-cut {
  flex-shrink: 0;
}
.ref-game[data-kind="lfd"] .ref-head-row {
  --ref-head-grid-r1: 80px;
  --ref-head-grid-gap: 4px;
  --ref-draw-row-min-h: 0;
  --ref-last-row-scale: 1;
  flex: 0 0 auto;
  width: 100%;
  height: auto;
  min-height: 0;
  max-height: none;
  align-items: start;
  align-content: start;
  column-gap: 8px;
  grid-template-rows: auto auto auto;
  row-gap: var(--h5-lfd-draw-row-gap);
  padding-bottom: var(--h5-lfd-outcome-edge-gap);
  box-sizing: border-box;
}
.ref-game[data-kind="lfd"] .ref-head-row .ref-tools {
  align-self: start;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  padding-top: var(--h5-ref-tools-offset-y);
  min-height: var(--h5-ref-tool-bar-h);
}
.ref-game[data-kind="lfd"] .ref-head-row .ref-tool {
  box-sizing: border-box;
  border-radius: var(--h5-ref-tool-radius);
  font-weight: 700;
  line-height: 1;
  gap: 4px;
  outline: none;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--h5-ref-tool-bar-h);
  min-height: var(--h5-ref-tool-bar-h);
  max-height: var(--h5-ref-tool-bar-h);
  width: var(--h5-ref-tool-bar-w);
  min-width: var(--h5-ref-tool-bar-w);
  max-width: var(--h5-ref-tool-bar-w);
  padding: 0 8px;
  font-size: var(--h5-ref-tool-bar-font);
  white-space: nowrap;
}
.ref-game[data-kind="lfd"] .ref-head-row .ref-tool.ref-tool-sq {
  width: var(--h5-ref-tool-sq);
  min-width: var(--h5-ref-tool-sq);
  max-width: var(--h5-ref-tool-sq);
  padding: 0;
}
.ref-game[data-kind="lfd"] .ref-head-row .ref-tool.ref-tool-sq[data-act="help"] {
  background: rgba(22, 22, 30, .92);
  border: 1px solid rgba(255, 255, 255, .88);
  color: #fff;
  font-size: var(--h5-ref-tool-sq-font);
}
.ref-game[data-kind="lfd"] .ref-head-row .ref-tool.ref-tool-sq[data-act="more"] {
  padding: 0;
  background: rgba(22, 22, 30, .92);
  border: 1px solid rgba(255, 255, 255, .88);
  line-height: 0;
}
.ref-game[data-kind="lfd"] .ref-head-row .ref-tool.ref-tool-sq[data-act="more"] .ref-tool-ico {
  width: var(--h5-ref-tool-gengduo);
  height: var(--h5-ref-tool-gengduo);
  min-width: var(--h5-ref-tool-gengduo);
  max-width: var(--h5-ref-tool-gengduo);
  flex-shrink: 0;
  object-fit: contain;
  opacity: 1;
  display: block;
}
.ref-game[data-kind="lfd"] .ref-head-row .ref-tool[data-act="settle-rec"],
.ref-game[data-kind="lfd"] .ref-head-row .ref-tool[data-act="draw-rec"] {
  background: rgba(10, 10, 16, .45);
  border: 1px solid rgba(255, 255, 255, .9);
  color: #f2f2f6;
}
.ref-game[data-kind="lfd"] .ref-head-row .ref-tool-caret {
  margin-left: 6px;
  border-left-width: var(--h5-ref-tool-caret-half);
  border-right-width: var(--h5-ref-tool-caret-half);
}
.ref-game[data-kind="lfd"] .ref-head-row .ref-tool-caret-down {
  border-top: var(--h5-ref-tool-caret-h) solid #fff;
  border-bottom: none;
}
.ref-game[data-kind="lfd"] .ref-head-row .ref-tool-caret-up {
  border-bottom: var(--h5-ref-tool-caret-h) solid #fff;
  border-top: none;
}
.ref-game[data-kind="lfd"] .ref-head-row .ref-tool.is-open .ref-tool-caret-down {
  border-top: none;
  border-bottom: var(--h5-ref-tool-caret-h) solid #fff;
}
.ref-game[data-kind="lfd"] .ref-head-row .ref-tool.is-open .ref-tool-caret-up {
  border-bottom: none;
  border-top: var(--h5-ref-tool-caret-h) solid #fff;
}
.ref-game[data-kind="lfd"] .ref-head-row .ref-draw:empty {
  display: none;
}
.ref-game[data-kind="lfd"] .ref-head-row .ref-draw-balls {
  align-self: start;
  justify-content: flex-end;
  justify-self: stretch;
  align-items: flex-end;
  gap: 7px;
  max-width: 100%;
  min-height: 0;
  margin-top: var(--h5-lfd-outcome-offset-y);
  padding: 0 2px;
}
.ref-game[data-kind="lfd"] .ref-head-row .ref-last {
  margin-top: var(--h5-lfd-outcome-edge-gap);
}
.ref-game[data-kind="lfd"] .ref-head-brand .ref-cut {
  margin-left: 8px;
  line-height: 1.2;
}

/* 搂1 宸ュ叿鏍?/ 寮€濂栫悆 / 缁撴灉琛?鈥?浣嶇疆涓庡昂瀵稿榻愬叚鍚堝僵 ref-head-row 瀹氱 */
.ref-game[data-kind="lfd"] .ref-head-row .ref-tools {
  --ref-tools-scale: 1;
  width: 100%;
  min-width: 0;
  overflow: visible;
}
.ref-game[data-kind="lfd"] .ref-head-row .ref-draw-balls {
  display: flex;
  flex-wrap: nowrap;
  max-width: 100%;
  min-height: 0;
  margin-left: auto;
  justify-self: end;
  padding: 0 2px;
}
.ref-game[data-kind="lfd"] .ref-head-row .ref-last {
  --ref-last-scale: 1;
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  min-width: 0;
  overflow: visible;
  padding: 0 4px 0 0;
}
/* 顶栏出奖图尺寸：定稿 H5_IMG + ref-outcome-img.css；此处仅字号/透明底 */
.ref-game[data-kind="lfd"] .ref-head-row .ref-draw-balls .ball.ball-img em {
  font-size: var(--h5-lfd-ball-num-font);
  font-weight: 800;
  line-height: 1;
}
.ref-game[data-kind="lfd"] .ref-head-row .ref-draw .tag.tag-img,
.ref-game[data-kind="lfd"] .ref-head-row .ref-last .tag.tag-img {
  background: transparent !important;
}
.ref-game[data-kind="lfd"] .ref-head-row .ref-draw .tag.tag-img em,
.ref-game[data-kind="lfd"] .ref-head-row .ref-last .tag.tag-img em {
  font-style: normal;
  font-size: var(--h5-lfd-tag-ts-font);
  font-weight: 800;
  line-height: 1;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .55);
}
.ref-game[data-kind="lfd"] .ref-head-row .ref-last .tag.tag-img em {
  font-size: var(--h5-skin-tag-ts-last-font);
}

.ref-game[data-kind="lfd"] > .g-body.ref-body {
  position: static;
  z-index: 1;
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
  max-height: none;
  background: transparent !important;
  overflow: visible;
}

.ref-game[data-kind="lfd"] .bet-main {
  position: static;
  background: transparent;
  flex: 0 0 auto;
  min-height: 0;
}

/* 搂2鈥撀? 鍒囬〉 / 涓嬫敞 btn_xz / 搴曟爮锛氫笌鍏悎褰╁悓涓€濂楋紝瑙?css/client.css + marksix-layout-lock.css */

.ref-game[data-kind="lfd"] .ref-pane > .lay-10 .bet-tile .lab {
  font-size: var(--h5-lfd-rb-bet-lab-font);
  line-height: 1.08;
}
.ref-game[data-kind="lfd"] .ref-pane > .lay-10 .bet-tile .odds {
  font-size: var(--h5-lfd-rb-bet-odds-font);
  line-height: 1.1;
}

/* === 涓鎻愰啋灞傦紙瀵归綈鍏悎褰?win-layer 瀹氱锛?=== */
.ref-game[data-kind="lfd"] > .win-layer {
  top: var(--h5-lfd-win-layer-top);
  left: var(--h5-lfd-win-layer-left);
  width: var(--h5-lfd-win-layer-w);
  min-width: var(--h5-lfd-win-layer-w);
  max-width: var(--h5-lfd-win-layer-w);
  height: auto;
  max-height: none;
  padding: var(--h5-lfd-win-layer-pad-top) var(--h5-lfd-win-layer-pad-x)
    var(--h5-lfd-win-layer-pad-bottom);
  background: var(--h5-lfd-win-layer-bg);
  border-radius: var(--h5-lfd-win-layer-radius);
  z-index: var(--h5-lfd-win-layer-z);
  box-sizing: border-box;
  overflow: visible;
}
.ref-game[data-kind="lfd"] > .win-layer .win-note {
  gap: var(--h5-lfd-win-note-gap);
}
.ref-game[data-kind="lfd"] > .win-layer .win-note-head,
.ref-game[data-kind="lfd"] > .win-layer .hit,
.ref-game[data-kind="lfd"] > .win-layer .miss {
  font-size: var(--h5-lfd-win-note-head-size);
  line-height: var(--h5-lfd-win-note-head-lh);
  margin-bottom: var(--h5-lfd-win-note-head-mb);
}
.ref-game[data-kind="lfd"] > .win-layer .win-note-head.hit,
.ref-game[data-kind="lfd"] > .win-layer .hit {
  color: var(--h5-lfd-win-hit-color);
}
.ref-game[data-kind="lfd"] > .win-layer .win-note-head.miss,
.ref-game[data-kind="lfd"] > .win-layer .miss {
  color: var(--h5-lfd-win-miss-color);
}
.ref-game[data-kind="lfd"] > .win-layer .win-note-details {
  gap: var(--h5-lfd-win-note-row-gap);
}
.ref-game[data-kind="lfd"] > .win-layer .win-note-row {
  font-size: var(--h5-lfd-win-note-row-size);
  line-height: var(--h5-lfd-win-note-row-lh);
  font-weight: 600;
  color: var(--h5-lfd-win-note-row-color);
}

/* === 灞€鍐呭簳婊?/ 鍏抽棴閽?/ 鏇村锛?ref-game 鍏辩敤缁勪欢锛孭C28 灞€鍐呭榻愬叚鍚堝僵瀛楀彿锛?=== */
.ref-game[data-kind="lfd"] .h5-chip-close,
.ref-game[data-kind="lfd"] .h5-more-close,
.ref-game[data-kind="lfd"] .h5-pay-close {
  font-size: var(--h5-sheet-close-font);
  min-width: var(--h5-sheet-close-min-w);
  min-height: var(--h5-sheet-close-min-h);
  padding: var(--h5-sheet-close-pad-y) var(--h5-sheet-close-pad-x);
  border-radius: var(--h5-sheet-close-radius);
}
.ref-game[data-kind="lfd"] .h5-more-k {
  font-size: var(--h5-more-user-k-size);
}
.ref-game[data-kind="lfd"] .h5-more-v {
  font-size: var(--h5-more-user-v-size);
}
.ref-game[data-kind="lfd"] .h5-more-btn {
  font-size: 22px;
}
.ref-game[data-kind="lfd"] .h5-more-sec {
  font-size: 24px;
}
.ref-game[data-kind="lfd"] .h5-chip-title {
  font-size: 32px;
}
.ref-game[data-kind="lfd"] .h5-chip-body .ref-chip-opt {
  font-size: 22px;
}

/* 开牌：龙→虎逐张翻（与百家乐同一套 Y 轴翻转） */
.ref-game[data-kind="lfd"] .ref-draw-balls .lfd-poker-slot {
  display: inline-block;
  vertical-align: middle;
  line-height: 0;
}
.ref-game[data-kind="lfd"] .ref-draw-balls .lfd-poker-slot.is-flip-in {
  animation: lfd-poker-flip-in 0.36s ease-out both;
}
@keyframes lfd-poker-flip-in {
  from {
    transform: rotateY(88deg);
    opacity: 0.85;
  }
  to {
    transform: rotateY(0deg);
    opacity: 1;
  }
}

/* 底滑 z-index 与六合彩 lock 同栈（仅 lfd，勿改 marksix-layout-lock） */
.ref-game[data-kind="lfd"] .marksix-rules-layer { z-index: 50; }
.ref-game[data-kind="lfd"] .marksix-settle-layer { z-index: 49; }
.ref-game[data-kind="lfd"] .marksix-draw-rec-layer { z-index: 48; }

/* 路单：贴 ref-game 顶边向上展开（结构同百家乐） */
.ref-game[data-kind="lfd"] > .lfd-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="lfd"] > .lfd-road-layer[hidden] {
  display: none !important;
}
.ref-game[data-kind="lfd"] > .lfd-road-layer.is-open .lfd-road-panel {
  pointer-events: auto;
}
html.lfd-road-up-open,
html.lfd-road-up-open body {
  overflow: visible !important;
}
html.lfd-road-up-open .shell.shell--h5-design,
html.lfd-road-up-open .fit-inner.is-game-canvas,
html.lfd-road-up-open .game-stage,
html.lfd-road-up-open .game-pane.ref-stage,
html.lfd-road-up-open .game-pane.ref-stage > .ref-game[data-kind="lfd"] {
  overflow: visible !important;
}
.ref-game[data-kind="lfd"] .lfd-road-panel {
  --h5-lfd-road-bead: 26px;
  --h5-lfd-road-row-gap: 6px;
  --h5-lfd-road-col-gap: 8px;
  --h5-lfd-road-edge-pad: calc(
    var(--h5-lfd-road-bead) + var(--h5-lfd-road-col-gap)
  );
  --h5-lfd-road-6h: calc(
    6 * var(--h5-lfd-road-bead) + 5 * var(--h5-lfd-road-row-gap)
  );
  --h5-lfd-road-24w: calc(
    24 * var(--h5-lfd-road-bead) + 23 * var(--h5-lfd-road-col-gap)
  );
  margin: 0;
  padding: 10px 14px 12px;
  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="lfd"] .lfd-road-wrap {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 8px;
  box-sizing: border-box;
}
.ref-game[data-kind="lfd"] .lfd-road-head {
  width: 100%;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-sizing: border-box;
}
.ref-game[data-kind="lfd"] .lfd-road-head .lfd-road-stats {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 10px;
}
.ref-game[data-kind="lfd"] .lfd-road-head .lfd-road-main {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.ref-game[data-kind="lfd"] .lfd-road-head .lfd-road-main-lab {
  font-size: calc(22px * var(--h5-type-scale, 1));
  font-weight: 800;
  line-height: 1;
  color: #fff;
}
.ref-game[data-kind="lfd"] .lfd-road-head .lfd-road-main-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  padding: 4px 10px;
  font-size: calc(22px * var(--h5-type-scale, 1));
  font-weight: 800;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.ref-game[data-kind="lfd"] .lfd-road-head .lfd-road-main.long .lfd-road-main-pill {
  background: rgba(198, 40, 40, 0.42);
  border-color: rgba(229, 57, 53, 0.75);
}
.ref-game[data-kind="lfd"] .lfd-road-head .lfd-road-main.ping .lfd-road-main-pill {
  background: rgba(46, 125, 50, 0.45);
  border-color: rgba(67, 160, 71, 0.8);
}
.ref-game[data-kind="lfd"] .lfd-road-head .lfd-road-main.feng .lfd-road-main-pill {
  background: rgba(57, 73, 171, 0.42);
  border-color: rgba(92, 107, 192, 0.78);
}
.ref-game[data-kind="lfd"] .lfd-road-head .lfd-road-main-pill em {
  font-style: normal;
  font-weight: 800;
  color: #fff;
}
.ref-game[data-kind="lfd"] .lfd-road-head .lfd-road-sub {
  width: 100%;
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: calc(18px * var(--h5-type-scale, 1));
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
}
.ref-game[data-kind="lfd"] .lfd-road-head .lfd-road-sub em {
  font-style: normal;
  font-weight: 800;
  color: #fff;
}
.ref-game[data-kind="lfd"] .lfd-road-split {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  box-sizing: border-box;
  gap: 0;
}
.ref-game[data-kind="lfd"] .lfd-road-left {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  padding-right: 6px;
  border-right: 1px solid rgba(255, 255, 255, 0.14);
  box-sizing: border-box;
}
.ref-game[data-kind="lfd"] .lfd-road-left-plate {
  flex: 0 0 auto;
  height: var(--h5-lfd-road-6h);
  max-height: var(--h5-lfd-road-6h);
  overflow: hidden;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  box-sizing: border-box;
}
.ref-game[data-kind="lfd"] .lfd-road-plate {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-end;
  gap: var(--h5-lfd-road-col-gap);
  max-width: 100%;
  height: var(--h5-lfd-road-6h);
  box-sizing: border-box;
}
.ref-game[data-kind="lfd"] .lfd-road-plate-col {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  box-sizing: border-box;
}
.ref-game[data-kind="lfd"] .lfd-road-right {
  flex: 0 0 auto;
  width: var(--h5-lfd-road-24w);
  max-width: var(--h5-lfd-road-24w);
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
}
.ref-game[data-kind="lfd"] .lfd-road-stat-road {
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}
.ref-game[data-kind="lfd"] .lfd-road-grid {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  width: 100%;
  box-sizing: border-box;
}
.ref-game[data-kind="lfd"] .lfd-road-col {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
.ref-game[data-kind="lfd"] .lfd-road-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.ref-game[data-kind="lfd"] .lfd-road-cell .lfd-road-bead {
  flex: 0 0 auto !important;
  width: calc(var(--h5-lfd-road-bead) * 0.88) !important;
  height: calc(var(--h5-lfd-road-bead) * 0.88) !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-weight: 800;
  line-height: 1;
  color: #1a1208;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
  box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.45);
  font-size: max(12px, calc(var(--h5-lfd-road-bead) * 0.5));
  box-sizing: border-box;
}
.ref-game[data-kind="lfd"] .lfd-road-bead.long {
  background: radial-gradient(circle at 35% 28%, #ffcdd2 0%, #e53935 42%, #b71c1c 100%);
  color: #3d0a0a;
}
.ref-game[data-kind="lfd"] .lfd-road-bead.feng {
  background: radial-gradient(circle at 35% 28%, #c5cae9 0%, #5c6bc0 45%, #283593 100%);
  color: #0d1440;
}
.ref-game[data-kind="lfd"] .lfd-road-bead.ping {
  background: radial-gradient(circle at 35% 28%, #a5f5a8 0%, #43a047 48%, #1b5e20 100%);
  color: #0d3312;
}
.ref-game[data-kind="lfd"] .lfd-road-bead-empty {
  visibility: hidden;
  box-shadow: none;
  background: transparent;
  border-color: transparent;
}
.ref-game[data-kind="lfd"] .lfd-road-stat-road .lfd-road-bead--hollow {
  box-sizing: border-box;
  background: rgba(8, 8, 10, 0.92);
  box-shadow: none;
  text-shadow: none;
  border: max(2px, calc(var(--h5-lfd-road-bead) * 0.1)) solid currentColor;
  position: relative;
}
.ref-game[data-kind="lfd"] .lfd-road-stat-road .lfd-road-bead--hollow.long {
  color: #e53935;
  border-color: #e53935;
}
.ref-game[data-kind="lfd"] .lfd-road-stat-road .lfd-road-bead--hollow.feng {
  color: #5c6bc0;
  border-color: #5c6bc0;
}
.ref-game[data-kind="lfd"] .lfd-road-stat-road .lfd-road-bead--hollow.ping {
  color: #43a047;
  border-color: #43a047;
}
.ref-game[data-kind="lfd"] .lfd-road-stat-road .lfd-road-bead--hollow.ping::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  top: 50%;
  height: max(2px, calc(var(--h5-lfd-road-bead) * 0.08));
  background: #43a047;
  transform: rotate(-42deg);
  pointer-events: none;
}
.ref-game[data-kind="lfd"] .lfd-road-empty {
  padding: 16px 8px;
  text-align: center;
  font-size: calc(18px * var(--h5-type-scale, 1));
  color: rgba(255, 255, 255, 0.55);
}