/**
 * 大厅对齐官方 loby-root / pc-loby / m-loby
 */

/* ---------- 根 ---------- */
.loby-root.lobby {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #3c2d17;
  box-sizing: border-box;
}

html:not(.is-mobile) #app > .loby-root.lobby {
  width: 1280px;
  height: 720px;
}

html.is-mobile #app > .loby-root.lobby {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  z-index: 1;
}

/* 手机隐藏桌面结构，桌面隐藏手机结构（两套 DOM 始终存在） */
html.is-mobile .loby-root .pc-loby { display: none !important; }
html.is-mobile .loby-root .m-loby { display: flex !important; flex-direction: column !important; }

html:not(.is-mobile) .loby-root .pc-loby { display: flex !important; flex-direction: column !important; }
html:not(.is-mobile) .loby-root .m-loby { display: none !important; }

/* 兜底：若 is-mobile 未挂上且宽屏，强制显示 pc 列表 */
@media (min-width: 901px) {
  html:not(.is-mobile) .loby-root .pc-loby .list-container.tables,
  .loby-root .pc-loby .list-container.tables {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  .loby-root .pc-loby .list-container .table.item {
    display: grid !important;
    visibility: visible !important;
  }
}

/*
 * ========== 桌面 pc-loby 尺寸（对照官方 --pc*）==========
 * 官方设计宽 960：1pc = 1px
 * 本站舞台 1280：1pc = 1280/960 = 4/3 px
 * 例：顶栏 --pc71 ≈ 94.67px，LOGO --pc93×--pc66 ≈ 124×88
 */
html:not(.is-mobile) .loby-root,
.loby-root .pc-loby {
  --pc-u: 1.3333333333; /* 1280/960 */
  --white: #fff;
  --pc1: calc(var(--pc-u) * 1px);
  --pc2: calc(var(--pc-u) * 2px);
  --pc3: calc(var(--pc-u) * 3px);
  --pc4: calc(var(--pc-u) * 4px);
  --pc5: calc(var(--pc-u) * 5px);
  --pc6: calc(var(--pc-u) * 6px);
  --pc8: calc(var(--pc-u) * 8px);
  --pc10: calc(var(--pc-u) * 10px);
  --pc11: calc(var(--pc-u) * 11px);
  --pc12: calc(var(--pc-u) * 12px);
  --pc13: calc(var(--pc-u) * 13px);
  --pc14: calc(var(--pc-u) * 14px);
  --pc15: calc(var(--pc-u) * 15px);
  --pc16: calc(var(--pc-u) * 16px);
  --pc17: calc(var(--pc-u) * 17px);
  --pc18: calc(var(--pc-u) * 18px);
  --pc19: calc(var(--pc-u) * 19px);
  --pc20: calc(var(--pc-u) * 20px);
  --pc21: calc(var(--pc-u) * 21px);
  --pc22: calc(var(--pc-u) * 22px);
  --pc24: calc(var(--pc-u) * 24px);
  --pc25: calc(var(--pc-u) * 25px);
  --pc26: calc(var(--pc-u) * 26px);
  --pc27: calc(var(--pc-u) * 27px);
  --pc28: calc(var(--pc-u) * 28px);
  --pc30: calc(var(--pc-u) * 30px);
  --pc31: calc(var(--pc-u) * 31px);
  --pc33: calc(var(--pc-u) * 33px);
  --pc35: calc(var(--pc-u) * 35px);
  --pc36: calc(var(--pc-u) * 36px);
  --pc38: calc(var(--pc-u) * 38px);
  --pc40: calc(var(--pc-u) * 40px);
  --pc45: calc(var(--pc-u) * 45px);
  --pc50: calc(var(--pc-u) * 50px);
  --pc66: calc(var(--pc-u) * 66px);
  --pc71: calc(var(--pc-u) * 71px);
  --pc78: calc(var(--pc-u) * 78px);
  --pc88: calc(var(--pc-u) * 88px);
  --pc91: calc(var(--pc-u) * 91px);
  --pc93: calc(var(--pc-u) * 93px);
  --pc108: calc(var(--pc-u) * 108px);
  --pc147: calc(var(--pc-u) * 147px);
  --pc165: calc(var(--pc-u) * 165px);
  --pc182: calc(var(--pc-u) * 182px);
  --pc309: calc(var(--pc-u) * 309px);
  /* 路单整格：设计 20px → 舞台 80/3 */
  --cell: calc(var(--pc-u) * 20px);
}

.loby-root .pc-loby {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  background: #3c2d17;
  overflow: hidden;
}

/* 官方顶栏：height var(--pc71) + 双层渐变 + blend（≈94.7px @1280） */
.loby-root .pc-loby .header {
  height: var(--pc71) !important;
  min-height: var(--pc71) !important;
  max-height: var(--pc71) !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  background-image:
    linear-gradient(90deg, #806d3e, #a18f4e 30%, #c1b15d 50%, #a18f4e 70%, #806d3e),
    linear-gradient(#413413, #413413) !important;
  background-blend-mode: normal, normal !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
  position: relative !important;
  left: auto !important;
  top: auto !important;
  padding: 0 !important;
  margin: 0 !important;
}

/*
 * 顶部 LOGO：官方 var(--pc93)×var(--pc66)（≈124×88 @1280）
 * mask + background 同图；扫光用 .logo-shine
 */
.loby-root .pc-loby .header .logo {
  width: var(--pc93) !important;
  height: var(--pc66) !important;
  min-width: var(--pc93) !important;
  min-height: var(--pc66) !important;
  max-width: var(--pc93) !important;
  max-height: var(--pc66) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  position: relative !important;
  left: auto !important;
  top: auto !important;
  right: auto !important;
  transform: none !important;
  overflow: hidden !important;
  filter: none !important;
  display: block !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
  background: url(/assets/logo-official.png) !important;
  background-image: url(/assets/logo-official.png) !important;
  background-repeat: no-repeat !important;
  background-position: 0 0 !important;
  background-size: var(--pc93) var(--pc66) !important;
  -webkit-mask-image: url(/assets/logo-official.png) !important;
  mask-image: url(/assets/logo-official.png) !important;
  -webkit-mask-size: var(--pc93) var(--pc66) !important;
  mask-size: var(--pc93) var(--pc66) !important;
  -webkit-mask-position: 0 0 !important;
  mask-position: 0 0 !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
}

/* 关掉 site.css .logo:before 静止白角 */
.loby-root .pc-loby .header .logo:before,
.loby-root .pc-loby .header .logo:after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  background: none !important;
  filter: none !important;
  animation: none !important;
  -webkit-animation: none !important;
  transform: none !important;
}

/* 隐藏 img，避免双重绘制发糊 */
.loby-root .pc-loby .header .logo .crest-image,
.loby-root .pc-loby .header .crest-image {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* 真实扫光层：transform 动画 + JS 兜底驱动 */
.loby-root .pc-loby .header .logo .logo-shine {
  display: block !important;
  position: absolute !important;
  z-index: 4 !important;
  top: 0 !important;
  left: 0 !important;
  width: 46% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
  filter: none !important;
  box-shadow: none !important;
  background: linear-gradient(
    90deg,
    hsla(0, 0%, 100%, 0) 0%,
    hsla(0, 0%, 100%, 0.12) 20%,
    hsla(0, 0%, 100%, 0.9) 50%,
    hsla(0, 0%, 100%, 0.12) 80%,
    hsla(0, 0%, 100%, 0) 100%
  ) !important;
  background-repeat: no-repeat !important;
  will-change: transform !important;
  /* transform driven by keyframes only */
  -webkit-animation: lobbyShineMove 2.8s linear infinite !important;
  animation: lobbyShineMove 2.8s linear infinite !important;
}

@-webkit-keyframes lobbyShineMove {
  0% { transform: skewX(-30deg) translate3d(-220%, 0, 0); }
  100% { transform: skewX(-30deg) translate3d(320%, 0, 0); }
}
@keyframes lobbyShineMove {
  0% { transform: skewX(-30deg) translate3d(-220%, 0, 0); }
  100% { transform: skewX(-30deg) translate3d(320%, 0, 0); }
}

/* 导航栏（官方 menu 原文尺寸） */
.loby-root .pc-loby .menu {
  width: 100% !important;
  height: var(--pc35) !important;
  min-height: var(--pc35) !important;
  max-height: var(--pc35) !important;
  background-image:
    linear-gradient(0deg, #a49347, #c6bc69 53%, #e7e48a 89%, #b7b46c 93%, #86844e),
    linear-gradient(#daae3d, #daae3d) !important;
  background-blend-mode: normal, normal !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
  position: relative !important;
  left: auto !important;
  top: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
}

/* 导航按钮（官方 menu-item 原文） */
.loby-root .pc-loby .menu .menu-item {
  width: var(--pc91) !important;
  height: var(--pc33) !important;
  min-width: var(--pc91) !important;
  min-height: var(--pc33) !important;
  max-width: var(--pc91) !important;
  max-height: var(--pc33) !important;
  margin-left: var(--pc45) !important;
  margin-top: var(--pc4) !important;
  margin-right: 0 !important;
  margin-bottom: 0 !important;
  white-space: nowrap !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: var(--pc16) !important;
  line-height: 1 !important;
  background: url(/assets/menu-item-btn.png) !important;
  background-repeat: no-repeat !important;
  background-position: 0 0 !important;
  background-size: var(--pc91) var(--pc33) !important;
  font-family: buttonface2, "Courier New", Courier, monospace !important;
  color: #5a5633 !important;
  cursor: pointer !important;
  user-select: none !important;
  border: 0 !important;
  box-shadow: none !important;
  clip-path: none !important;
  filter: none !important;
  outline: none !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  font-weight: 400 !important;
  text-shadow: none !important;
}

.loby-root .pc-loby .menu .menu-item:first-child { margin-left: 0 !important; }
.loby-root .pc-loby .menu .menu-item:hover {
  background-image: url(/assets/menu-item-btn-hover.png) !important;
  background-repeat: no-repeat !important;
  background-position: 0 0 !important;
  background-size: var(--pc91) var(--pc33) !important;
  filter: none !important;
  color: #3a3210 !important;
}

/* 百家乐/龙虎/先发牌区 条（官方 game-option-wrap 原文） */
.loby-root .pc-loby .game-option-wrap {
  width: calc(100% - var(--pc6)) !important;
  height: var(--pc28) !important;
  min-height: var(--pc28) !important;
  max-height: var(--pc28) !important;
  background-image:
    linear-gradient(180deg, #6b612f, #4b441d 30%, #2b260b),
    linear-gradient(#6b612f, #6b612f) !important;
  background-blend-mode: normal, normal !important;
  border-radius: var(--pc17) var(--pc17) 0 0 !important;
  margin-top: var(--pc30) !important;
  margin-left: var(--pc3) !important;
  margin-right: var(--pc3) !important;
  margin-bottom: 0 !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: flex-end !important;
  box-sizing: border-box !important;
}

.loby-root .pc-loby .game-option-group {
  width: calc(100% - var(--pc38)) !important;
  height: 100% !important;
  margin: 0 var(--pc19) !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  color: #e6db85 !important;
  background-image:
    linear-gradient(180deg, #9d904d, #6f642f 28%, #403811),
    linear-gradient(#6b612f, #6b612f) !important;
  background-blend-mode: normal, normal !important;
  box-sizing: border-box !important;
}

/* ① 百家乐/龙虎/先发牌区：官方字号 0.976625rem → 舞台等价 --pc20 */
html:not(.is-mobile) .loby-root .pc-loby .game-option,
.loby-root .pc-loby .game-option {
  width: var(--pc147) !important;
  height: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-direction: row !important;
  font-size: var(--pc20) !important; /* 0.976625rem */
  cursor: pointer !important;
  position: relative !important;
  color: #e6db85 !important;
  font-family: FZCusong-B09S, KaiTi, "Microsoft YaHei", serif !important;
  font-weight: 700 !important;
  user-select: none !important;
  margin-left: 0 !important;
}
.loby-root .pc-loby .game-option:not(:first-child) {
  margin-left: calc(var(--pc1) * -10) !important;
}

html:not(.is-mobile) .loby-root .pc-loby .game-option span,
.loby-root .pc-loby .game-option span {
  color: #e6db85 !important;
  font-size: var(--pc20) !important; /* 0.976625rem */
  line-height: 1 !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

html:not(.is-mobile) .loby-root .pc-loby .game-option.active,
.loby-root .pc-loby .game-option.active {
  color: #e6db85 !important;
  font-weight: 700 !important;
}

html:not(.is-mobile) .loby-root .pc-loby .game-option.active span,
.loby-root .pc-loby .game-option.active span {
  position: relative !important;
  z-index: 1 !important;
  color: #e6db85 !important;
  font-size: var(--pc20) !important;
  font-weight: 700 !important;
}

/* 官方 active 底板：182×36 pc */
.loby-root .pc-loby .game-option.active:before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  bottom: 0 !important;
  z-index: 0 !important;
  width: var(--pc182) !important;
  height: var(--pc36) !important;
  background: url(/assets/tab-active.png) 0 0 / var(--pc182) var(--pc36) no-repeat !important;
  background-repeat: no-repeat !important;
  background-position: 0 0 !important;
  background-size: var(--pc182) var(--pc36) !important;
  border-radius: 0 !important;
  clip-path: none !important;
}

/*
 * 列表：官方 3 列（--pc309），可纵向滚动
 * flex-grow:1; height:0 占满剩余高度
 */
.loby-root .pc-loby .list-container.tables,
.loby-root.lobby .pc-loby .list-container.tables,
.lobby .list-container.tables {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  flex: 1 1 0 !important;
  flex-grow: 1 !important;
  min-height: 0 !important;
  height: 0 !important;
  max-height: none !important;
  display: flex !important;
  flex-wrap: wrap !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  margin-left: var(--pc6) !important;
  margin-right: var(--pc6) !important;
  margin-top: var(--pc6) !important;
  margin-bottom: var(--pc6) !important;
  width: calc(100% - var(--pc12)) !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  align-content: flex-start !important;
  gap: 0 !important;
  padding: 0 !important;
  grid-template-columns: none !important;
  grid-auto-rows: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 2 !important;
  box-sizing: border-box !important;
  background: transparent !important;
}

/*
 * 外层 item：官方固定 --pc309 × --pc165，一排仅 3 张
 */
.loby-root .pc-loby .list-container .table.item,
.loby-root .pc-loby .list-container .item.table,
.lobby .list-container .table.item {
  position: relative !important;
  flex: 0 0 var(--pc309) !important;
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
  width: var(--pc309) !important;
  min-width: var(--pc309) !important;
  max-width: var(--pc309) !important;
  height: var(--pc165) !important;
  min-height: var(--pc165) !important;
  max-height: var(--pc165) !important;
  margin-top: var(--pc4) !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  border: solid var(--pc1) rgba(142, 128, 74, 0.7) !important;
  background-color: rgba(0, 0, 0, 0.2) !important;
  background-image: none !important;
  box-sizing: border-box !important;
  visibility: visible !important;
  opacity: 1 !important;
  float: none !important;
  display: block !important;
  overflow: hidden !important;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
}

/* 第 2、3 列左边距；首行无上边距 —— 严格 3 列 */
.loby-root .pc-loby .list-container .table.item:nth-child(3n+2),
.loby-root .pc-loby .list-container .table.item:nth-child(3n+3) {
  margin-left: var(--pc4) !important;
}
.loby-root .pc-loby .list-container .table.item:nth-child(-n+3) {
  margin-top: 0 !important;
}
.loby-root .pc-loby .list-container .table.item:nth-child(3n+1) {
  margin-left: 0 !important;
}

/*
 * 内层卡片（官方 item 内层原文）：
 * flex 列 + 100% 铺满 + 金渐变 + #885735 边 + padding
 */
/*
 * ========== 房间卡 1:1 官方结构（对照截图） ==========
 * pc-item-root: flex 列 + padding --pc5
 * 上排: side(--pc33) + 白格(flex 铺满)
 * 下排: height --pc31，单限 + 进入游戏
 */
.loby-root .pc-loby .list-container .table.item .item-body {
  width: 100% !important;
  height: 100% !important;
  background-image:
    linear-gradient(90deg, #5f512c, #6e5e33 30%, #7d6a39 50%, #6e5e33 70%, #5f512c),
    linear-gradient(#daae3d, #daae3d) !important;
  background-blend-mode: normal, normal !important;
  border: none !important;
  padding: var(--pc5) !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  position: relative !important;
  margin: 0 !important;
  gap: 0 !important;
}

/* 上排：侧栏 + 白格（13×6 整格，垂直居中） */
.loby-root .pc-loby .table .item-body .item-main {
  position: relative !important;
  flex: 1 1 auto !important;
  flex-grow: 1 !important;
  height: 0 !important;
  min-height: 0 !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: var(--pc2) var(--pc4) var(--pc2) 0 !important;
  box-sizing: border-box !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  gap: var(--pc2) !important;
}

/*
 * ② 卡片左侧台名 + F：细体/常规，不用粗体（压过 site.css .lobby .side b{25px}）
 */
html:not(.is-mobile) .loby-root .pc-loby .table .side,
html:not(.is-mobile) .loby-root .pc-loby .table .item-body .side,
.loby-root .pc-loby .table .side,
.loby-root .pc-loby .table .item-body .side,
.lobby .list-container .table .side {
  flex: 0 0 var(--pc33) !important;
  width: var(--pc33) !important;
  min-width: var(--pc33) !important;
  max-width: var(--pc33) !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  padding: 0 !important;
  margin: 0 !important;
  color: var(--white) !important;
  background: transparent !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  font-size: var(--pc16) !important;
  font-family: "Microsoft YaHei UI Light", "Microsoft YaHei Light", "Microsoft YaHei", "PingFang SC", sans-serif !important;
  font-weight: 400 !important;
  white-space: nowrap !important;
  grid-column: auto !important;
  grid-row: auto !important;
}

html:not(.is-mobile) .loby-root .pc-loby .table .side .side-name,
html:not(.is-mobile) .loby-root .pc-loby .table .side span.side-name,
html:not(.is-mobile) .loby-root .pc-loby .table .side span,
.loby-root .pc-loby .table .side .side-name,
.loby-root .pc-loby .table .side span.side-name,
.loby-root .pc-loby .table .side span,
.lobby .list-container .table .side span {
  display: block !important;
  width: auto !important;
  max-width: none !important;
  flex: 1 1 auto !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: var(--pc16) auto 0 !important;
  padding: 0 !important;
  font-size: var(--pc16) !important;
  line-height: 1.2 !important;
  font-weight: 400 !important;
  font-family: "Microsoft YaHei UI Light", "Microsoft YaHei Light", "Microsoft YaHei", "PingFang SC", sans-serif !important;
  color: var(--white) !important;
  letter-spacing: 0 !important;
  word-break: keep-all !important;
  white-space: nowrap !important;
  -ms-writing-mode: tb-rl !important;
  writing-mode: vertical-rl !important;
  text-orientation: mixed !important;
  overflow: hidden !important;
  transform: none !important;
  text-shadow: none !important;
}

html:not(.is-mobile) .loby-root .pc-loby .table .side .side-desk,
html:not(.is-mobile) .loby-root .pc-loby .table .side b.side-desk,
html:not(.is-mobile) .loby-root .pc-loby .table .side b,
.loby-root .pc-loby .table .side .side-desk,
.loby-root .pc-loby .table .side b.side-desk,
.loby-root .pc-loby .table .side b,
.lobby .list-container .table .side b {
  display: block !important;
  flex: 0 0 auto !important;
  margin-top: var(--pc6) !important;
  margin-bottom: var(--pc4) !important;
  font-size: var(--pc15) !important;
  line-height: 1.1 !important;
  font-weight: 400 !important;
  font-family: "Microsoft YaHei UI Light", "Microsoft YaHei Light", "Microsoft YaHei", "Courier New", monospace !important;
  color: var(--white) !important;
  white-space: nowrap !important;
  letter-spacing: 0 !important;
  writing-mode: horizontal-tb !important;
  transform: none !important;
  text-shadow: none !important;
}

/*
 * ④ 白色路单：不改珠子数量；区域靠右、靠下铺满（flex 吃满）
 * 格子高度 = 白格高度/6，底边贴齐；格线铺满右侧空白
 */
/*
 * 白格：严格 13 列 × 6 行整格，固定 --cell-px: 25px
 * 总尺寸 325×150
 */
html:not(.is-mobile) .loby-root .pc-loby .table .road,
.loby-root .pc-loby .table .road {
  --cell-px: 25px;
  --road-cols: 13;
  --road-rows: 6;
  position: relative !important;
  flex: 0 0 calc(var(--cell-px) * 13) !important;
  width: calc(var(--cell-px) * 13) !important;
  min-width: calc(var(--cell-px) * 13) !important;
  max-width: calc(var(--cell-px) * 13) !important;
  height: calc(var(--cell-px) * 6) !important;
  min-height: calc(var(--cell-px) * 6) !important;
  max-height: calc(var(--cell-px) * 6) !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  cursor: pointer !important;
  background-color: #fff !important;
  background-image:
    linear-gradient(to right, #c8c8c8 1px, transparent 1px),
    linear-gradient(to bottom, #c8c8c8 1px, transparent 1px) !important;
  background-size: var(--cell-px) var(--cell-px) !important;
  background-position: 0 0 !important;
  background-repeat: repeat !important;
  box-sizing: border-box !important;
  box-shadow: inset -1px 0 0 #c8c8c8, inset 0 -1px 0 #c8c8c8 !important;
  grid-column: auto !important;
  grid-row: auto !important;
  align-self: center !important;
}

html:not(.is-mobile) .loby-root .pc-loby .table .beads,
.loby-root .pc-loby .table .beads,
.lobby .list-container .table .beads {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  right: auto !important;
  bottom: auto !important;
  display: grid !important;
  grid-template-rows: repeat(6, var(--cell-px)) !important;
  grid-auto-flow: column !important;
  grid-auto-columns: var(--cell-px) !important;
  width: calc(var(--cell-px) * 13) !important;
  max-width: calc(var(--cell-px) * 13) !important;
  height: calc(var(--cell-px) * 6) !important;
  max-height: calc(var(--cell-px) * 6) !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  font-size: calc(var(--cell-px) * 0.45) !important;
  font-weight: 400 !important;
  font-family: "Microsoft YaHei", Arial, sans-serif !important;
  line-height: 1 !important;
}

html:not(.is-mobile) .loby-root .pc-loby .table .bead,
.loby-root .pc-loby .table .bead,
.lobby .list-container .table .bead {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  width: 82% !important;
  height: 82% !important;
  margin: auto !important;
  border-radius: 50% !important;
  color: #fff !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-size: inherit !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
}

/* 对齐官方路单：庄 #c70004 / 闲 #0000fe / 和 #00c40c */
.loby-root .pc-loby .table .bead.b { background: #c70004 !important; }
.loby-root .pc-loby .table .bead.p { background: #0000fe !important; }
.loby-root .pc-loby .table .bead.t { background: #00c40c !important; }
.loby-root .pc-loby .table .bead.empty { background: #ccc !important; color: #666 !important; font-size: var(--pc10) !important; }

/*
 * 进入游戏：三张限额小卡
 * 盖在 325×150 白格上：半透明遮罩 + 三卡均分 + 间距
 * 压过 site.css .limit-cards 绝对偏移
 */
.loby-root .pc-loby .table .item-body {
  position: relative !important;
}

html:not(.is-mobile) .loby-root .pc-loby .table .road .limit-cards,
.loby-root .pc-loby .table .road .limit-cards,
.loby-root .pc-loby .table .item-body > .limit-cards,
.lobby .list-container .table .limit-cards {
  position: absolute !important;
  z-index: 20 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  /* 白格 325×150：内边距约 8px，三卡均分 */
  padding: 8px !important;
  transform: none !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  justify-content: space-between !important;
  gap: 8px !important;
  background: rgba(0, 0, 0, 0.5) !important;
  pointer-events: auto !important;
  box-sizing: border-box !important;
}

html:not(.is-mobile) .loby-root .pc-loby .table .road .limit-cards > .limit-card,
html:not(.is-mobile) .loby-root .pc-loby .table .road .limit-cards > div,
.loby-root .pc-loby .table .road .limit-cards > .limit-card,
.loby-root .pc-loby .table .road .limit-cards > div,
.loby-root .pc-loby .table .item-body > .limit-cards > .limit-card,
.loby-root .pc-loby .table .item-body > .limit-cards > div,
.lobby .list-container .table .limit-cards > div {
  white-space: nowrap !important;
  color: var(--white) !important;
  font-size: 17px !important;
  line-height: 1.15 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-evenly !important;
  align-items: flex-start !important;
  padding: 6px 8px !important;
  background-image:
    linear-gradient(0deg, #ef919a, #c4765a 0, #985a1a 0, #b57321 40%, #d18c27),
    linear-gradient(#e6db85, #e6db85) !important;
  background-blend-mode: normal, normal !important;
  border: 1px solid #fff !important;
  border-radius: 0 !important;
  /* 三卡等宽均分： (100% - 2*gap) / 3 */
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  flex: 1 1 0 !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  overflow: hidden !important;
  gap: 4px !important;
  font-weight: 400 !important;
  font-family: "Microsoft YaHei", sans-serif !important;
  text-align: left !important;
}

/* 取消旧的 margin-left，改用 gap */
html:not(.is-mobile) .loby-root .pc-loby .table .road .limit-cards > .limit-card:not(:first-child),
html:not(.is-mobile) .loby-root .pc-loby .table .road .limit-cards > div:not(:first-child),
.loby-root .pc-loby .table .road .limit-cards > .limit-card:not(:first-child),
.loby-root .pc-loby .table .road .limit-cards > div:not(:first-child),
.lobby .list-container .table .limit-cards > div:not(:first-child) {
  margin-left: 0 !important;
}

.loby-root .pc-loby .table .limit-cards .lc-block,
.loby-root .pc-loby .table .road .limit-cards .lc-block {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 2px !important;
  min-height: 0 !important;
  flex: 0 0 auto !important;
  width: 100% !important;
}

.loby-root .pc-loby .table .limit-cards .lc-lab,
.loby-root .pc-loby .table .limit-cards span,
.loby-root .pc-loby .table .road .limit-cards .lc-lab,
.loby-root .pc-loby .table .road .limit-cards span {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 17px !important;
  line-height: 1.2 !important;
  font-weight: 400 !important;
  color: var(--white) !important;
  white-space: nowrap !important;
  letter-spacing: 0 !important;
}

.loby-root .pc-loby .table .limit-cards .lc-val,
.loby-root .pc-loby .table .limit-cards b,
.loby-root .pc-loby .table .road .limit-cards .lc-val,
.loby-root .pc-loby .table .road .limit-cards b {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 20px !important;
  line-height: 1.2 !important;
  font-weight: 400 !important;
  color: var(--white) !important;
  white-space: nowrap !important;
  font-family: Arial, "Microsoft YaHei", sans-serif !important;
}

.loby-root .pc-loby .table .limit-cards > .limit-card:hover,
.loby-root .pc-loby .table .limit-cards > div:hover {
  filter: brightness(1.08);
}

/*
 * 底栏：官方 last-child
 * flex-grow:0; height:--pc31; font-size 加大
 * 结构：侧栏等宽占位 | 单限+数值(flex) | 进入游戏
 */
.loby-root .pc-loby .table .limit,
.loby-root .pc-loby .table .item-body .limit,
.lobby .list-container .table .limit {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  top: auto !important;
  flex: 0 0 var(--pc31) !important;
  flex-grow: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: var(--pc31) !important;
  min-height: var(--pc31) !important;
  max-height: var(--pc31) !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  color: var(--white) !important;
  overflow: visible !important;
  box-sizing: border-box !important;
  z-index: 6 !important;
  font-size: var(--pc18) !important;
  line-height: 1 !important;
  transform: none !important;
  grid-column: auto !important;
  grid-row: auto !important;
}

/* 与 side 同宽占位，使「单限」与白格左缘对齐（官方 first-child width --pc33） */
.loby-root .pc-loby .table .limit:before {
  content: "" !important;
  display: block !important;
  flex: 0 0 var(--pc33) !important;
  width: var(--pc33) !important;
  min-width: var(--pc33) !important;
  height: 100% !important;
}

/* ③ 单限 / 200000：再小一点（--pc16） */
html:not(.is-mobile) .loby-root .pc-loby .table .limit .limit-meta,
.loby-root .pc-loby .table .limit .limit-meta,
.lobby .list-container .table .limit .limit-meta {
  display: flex !important;
  flex-direction: row !important;
  flex-grow: 1 !important;
  width: 0 !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: var(--pc14) !important;
  margin: 0 !important;
  padding: 0 var(--pc8) 0 var(--pc4) !important;
  min-width: 0 !important;
  height: 100% !important;
  overflow: visible !important;
  transform: none !important;
  box-sizing: border-box !important;
  font-size: var(--pc16) !important;
  color: var(--white) !important;
}

html:not(.is-mobile) .loby-root .pc-loby .table .limit .limit-label,
html:not(.is-mobile) .loby-root .pc-loby .table .limit .limit-value,
.loby-root .pc-loby .table .limit .limit-label,
.loby-root .pc-loby .table .limit .limit-value,
.lobby .list-container .table .limit .limit-label,
.lobby .list-container .table .limit .limit-value {
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  font-size: var(--pc16) !important;
  line-height: 1 !important;
  color: var(--white) !important;
  font-weight: 400 !important;
  transform: none !important;
  text-align: left !important;
  height: auto !important;
}

html:not(.is-mobile) .loby-root .pc-loby .table .limit .limit-value,
.loby-root .pc-loby .table .limit .limit-value,
.lobby .list-container .table .limit .limit-value {
  color: var(--white) !important;
  font-size: var(--pc16) !important;
}

/*
 * 进入游戏：官方原文 88×25 / font 10 / 黑底圆角
 */
.loby-root .pc-loby .table .limit .btn,
.loby-root .pc-loby .table .limit .btn.enter-btn,
.loby-root .pc-loby .list-container .table .btn,
.lobby .list-container .table .limit .btn {
  width: var(--pc88) !important;
  min-width: var(--pc88) !important;
  max-width: var(--pc88) !important;
  height: var(--pc25) !important;
  min-height: var(--pc25) !important;
  max-height: var(--pc25) !important;
  font-size: var(--pc10) !important;
  line-height: 1 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  background-color: #000 !important;
  background-image: none !important;
  color: var(--white) !important;
  border: 0 !important;
  border-radius: var(--pc5) !important;
  padding: 0 !important;
  margin: 0 !important;
  flex: 0 0 var(--pc88) !important;
  box-shadow: none !important;
  clip-path: none !important;
  filter: none !important;
  text-shadow: none !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  font-weight: 400 !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 8 !important;
  pointer-events: auto !important;
}

/* 官方金属高光条 */
.loby-root .pc-loby .table .limit .btn:after,
.loby-root .pc-loby .list-container .table .btn:after,
.lobby .list-container .table .limit .btn:after {
  content: " " !important;
  position: absolute !important;
  top: var(--pc2) !important;
  left: var(--pc2) !important;
  right: var(--pc2) !important;
  height: 46% !important;
  width: calc(100% - var(--pc4)) !important;
  border-radius: var(--pc3) !important;
  background-image:
    linear-gradient(0deg, #535353, #818181 60%, #afafaf),
    linear-gradient(#000, #000) !important;
  background-blend-mode: normal, normal !important;
  z-index: 0 !important;
  pointer-events: none !important;
  display: block !important;
  animation: none !important;
  transform: none !important;
  opacity: 1 !important;
}

.loby-root .pc-loby .table .limit .btn .btn-label,
.loby-root .pc-loby .list-container .table .btn .btn-label,
.lobby .list-container .table .limit .btn .btn-label {
  position: relative !important;
  z-index: 1 !important;
  color: var(--white) !important;
  pointer-events: none !important;
  font-size: var(--pc10) !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* 强制 LOGO 尺寸，避免 site.css .logo{222×142} 干扰 */
html:not(.is-mobile) .loby-root .pc-loby .header .logo,
html:not(.is-mobile) .loby-root .pc-loby .header .logo .crest-image {
  width: var(--pc93) !important;
  height: var(--pc66) !important;
}

/* ========== 手机 m-loby ========== */
html.is-mobile {
  --mp1: calc(100vw / 375);
}

.loby-root .m-loby {
  display: none;
  flex-direction: column;
  height: 100%;
  width: 100%;
  background: #3c2d17;
  overflow: hidden;
  position: relative;
}

.loby-root .m-loby .m-header {
  height: calc(var(--mp1) * 40);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 calc(var(--mp1) * 10);
  box-sizing: border-box;
  flex-shrink: 0;
  background-image:
    linear-gradient(0deg, #a49347, #c6bc69 53%, #e7e48a 89%, #b7b46c 93%, #86844e),
    linear-gradient(#daae3d, #daae3d);
  background-blend-mode: normal, normal;
  z-index: 3;
}

.loby-root .m-loby .m-header .m-inf {
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: calc(var(--mp1) * 12);
  color: #ffd0d7;
  min-width: 0;
}

.loby-root .m-loby .m-header .m-inf .m-label {
  width: calc(var(--mp1) * 52);
  color: #010101;
  font-size: calc(var(--mp1) * 14);
  text-align: end;
  padding-right: calc(var(--mp1) * 6);
  flex-shrink: 0;
  white-space: nowrap;
}

.loby-root .m-loby .m-header .m-inf .m-value {
  width: calc(var(--mp1) * 80);
  height: calc(var(--mp1) * 26);
  background: #5c491b;
  border-radius: calc(var(--mp1) * 2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--mp1) * 13);
  color: #ffd0d7;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 4px;
  box-sizing: border-box;
}

.loby-root .m-loby .m-header .m-btn-setting {
  width: calc(var(--mp1) * 30);
  height: calc(var(--mp1) * 30);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
}

.loby-root .m-loby .m-header .m-btn-setting svg {
  width: calc(var(--mp1) * 22);
  height: calc(var(--mp1) * 22);
  display: block;
}

.loby-root .m-loby .m-tab-container {
  height: calc(var(--mp1) * 26);
  width: 100%;
  display: flex;
  flex-direction: row;
  margin-top: calc(var(--mp1) * 4);
  flex-shrink: 0;
  gap: 0;
}

.loby-root .m-loby .m-tab-container > div {
  flex: 1 1 0;
  width: 0;
  background-image:
    linear-gradient(0deg, #5f5315, #726522 23%, #85772f 58%, #726522 83%, #5f5315),
    linear-gradient(#9b8a32, #9b8a32);
  background-blend-mode: normal, normal;
  border-radius: calc(var(--mp1) * 2);
  border: solid calc(var(--mp1) * 1) #83742e;
  font-size: calc(var(--mp1) * 15);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  margin: 0 1px;
  box-sizing: border-box;
}

.loby-root .m-loby .m-tab-container > div.active {
  color: #e6db85;
  background-image:
    linear-gradient(0deg, #483f12, #524919 23%, #5c5220 58%, #4d4118 83%, #3e300f);
}

.loby-root .m-loby .m-list-container {
  flex: 1 1 auto;
  height: 0;
  width: calc(100% - var(--mp1) * 16);
  margin: calc(var(--mp1) * 8) calc(var(--mp1) * 6) calc(var(--mp1) * 8) calc(var(--mp1) * 8);
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

.loby-root .m-loby .m-item {
  width: 100%;
  min-height: calc(var(--mp1) * 137);
  height: auto;
  background: rgba(0, 0, 0, 0.2);
  border: solid calc(var(--mp1) * 1) rgba(142, 128, 74, 0.7);
  margin-top: calc(var(--mp1) * 11);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.loby-root .m-loby .m-item:first-child {
  margin-top: 0;
}

.loby-root .m-loby .m-item-main {
  display: flex;
  flex-direction: row;
  flex: 1 1 auto;
  min-height: calc(var(--mp1) * 96);
  cursor: pointer;
}

.loby-root .m-loby .m-item-side {
  width: calc(var(--mp1) * 56);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: calc(var(--mp1) * 8) 2px;
  box-sizing: border-box;
  color: #f3e49c;
  text-align: center;
}

.loby-root .m-loby .m-item-side .m-game {
  font-size: calc(var(--mp1) * 13);
  line-height: 1.25;
  font-family: KaiTi, "Microsoft YaHei", serif;
  color: #eee;
}

.loby-root .m-loby .m-item-side .m-desk {
  display: block;
  margin-top: 4px;
  font-size: calc(var(--mp1) * 18);
  font-weight: 700;
  color: #f3e49c;
  font-family: Arial, "Microsoft YaHei", sans-serif;
}

/* 手机路单：20px 格，珠子居中落在格内 */
.loby-root .m-loby .m-item-road {
  --cell: calc(var(--mp1) * 20);
  flex: 1 1 auto;
  min-width: 0;
  margin: calc(var(--mp1) * 4) calc(var(--mp1) * 4) 0 0;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  background-color: #fafafa;
  background-image:
    linear-gradient(to right, #d0d0d0 1px, transparent 1px),
    linear-gradient(to bottom, #d0d0d0 1px, transparent 1px);
  background-size: var(--cell) var(--cell);
  background-position: 0 0;
}

.loby-root .m-loby .m-item-road .beads {
  display: grid;
  grid-template-rows: repeat(6, var(--cell));
  grid-auto-flow: column;
  grid-auto-columns: var(--cell);
  width: max-content;
  height: calc(var(--cell) * 6);
  max-width: none;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box;
  font: 400 11px/1 "Microsoft YaHei", Arial, sans-serif;
  overflow: hidden;
  line-height: 1 !important;
}

.loby-root .m-loby .m-item-road .bead {
  display: flex !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: calc(var(--cell) - 4px) !important;
  height: calc(var(--cell) - 4px) !important;
  margin: 2px !important;
  border-radius: 50%;
  color: #fff;
  font-style: normal;
  font-weight: 400 !important;
  font-size: calc(var(--mp1) * 10) !important;
  line-height: 1 !important;
  letter-spacing: 0;
  text-align: center;
}

.loby-root .m-loby .m-item-road .bead.b { background: #c70004 !important; }
.loby-root .m-loby .m-item-road .bead.p { background: #0000fe !important; }
.loby-root .m-loby .m-item-road .bead.t { background: #00c40c !important; }
.loby-root .m-loby .m-item-road .bead.t { background: #0caf48; }
.loby-root .m-loby .m-item-road .bead.empty {
  background: #ccc;
  color: #666;
  font-size: calc(var(--mp1) * 9) !important;
}

/* 手机：官方 table-limit 遮罩 + 30% 小卡 */
.loby-root .m-loby .m-item-road .limit-cards {
  position: absolute !important;
  z-index: 8 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: calc(var(--mp1) * 10) !important;
  background: rgba(0, 0, 0, 0.5) !important;
  pointer-events: auto !important;
  box-sizing: border-box !important;
}

.loby-root .m-loby .m-item-road .limit-cards > .limit-card,
.loby-root .m-loby .m-item-road .limit-cards > div {
  white-space: nowrap !important;
  color: #fff !important;
  font-size: calc(var(--mp1) * 16) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-around !important;
  padding: 2% !important;
  background-image:
    linear-gradient(0deg, #ef919a, #c4765a 0, #985a1a 0, #b57321 40%, #d18c27),
    linear-gradient(#e6db85, #e6db85) !important;
  border: solid calc(var(--mp1) * 1) #fff !important;
  border-radius: 0 !important;
  width: 30% !important;
  min-width: 0 !important;
  max-width: 30% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  flex: 0 0 30% !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  overflow: hidden !important;
  gap: 0 !important;
}

.loby-root .m-loby .m-item-road .limit-cards > .limit-card:not(:first-child),
.loby-root .m-loby .m-item-road .limit-cards > div:not(:first-child) {
  margin-left: calc(var(--mp1) * 20) !important;
}

.loby-root .m-loby .m-item-road .limit-cards .lc-block {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  flex: 1 1 50% !important;
  width: 100% !important;
}

.loby-root .m-loby .m-item-road .limit-cards .lc-lab,
.loby-root .m-loby .m-item-road .limit-cards span {
  display: block !important;
  font-size: calc(var(--mp1) * 16) !important;
  line-height: 1.2 !important;
  font-weight: 400 !important;
  color: #fff !important;
}

.loby-root .m-loby .m-item-road .limit-cards .lc-val,
.loby-root .m-loby .m-item-road .limit-cards b {
  display: block !important;
  font-size: calc(var(--mp1) * 16) !important;
  line-height: 1.25 !important;
  font-weight: 400 !important;
  color: #fff !important;
  margin: 0 !important;
}

.loby-root .m-loby .m-item-foot {
  height: calc(var(--mp1) * 36);
  display: flex;
  align-items: center;
  padding: 0 calc(var(--mp1) * 8);
  background: #8d7b36;
  color: #fff;
  font-size: calc(var(--mp1) * 13);
  flex-shrink: 0;
  box-sizing: border-box;
}

.loby-root .m-loby .m-item-foot .m-limit-lab {
  margin-right: 4px;
}

.loby-root .m-loby .m-item-foot .m-limit-val {
  flex: 1 1 auto;
  min-width: 0;
}

.loby-root .m-loby .m-item-foot .m-enter {
  height: calc(var(--mp1) * 28);
  min-width: calc(var(--mp1) * 88);
  padding: 0 calc(var(--mp1) * 10);
  border: 2px solid #070707;
  border-radius: 5px;
  background: linear-gradient(#a8aaa7 0%, #5c5d5b 44%, #090909 50%, #050505 100%);
  color: #fff;
  font-size: calc(var(--mp1) * 12);
  cursor: pointer;
  flex-shrink: 0;
}

/* 手机侧滑菜单 */
.loby-root .m-loby .m-menu-mask {
  display: none;
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 20;
}

.loby-root .m-loby .m-menu-mask.on { display: block; }

.loby-root .m-loby .m-menu-panel {
  position: absolute;
  top: calc(var(--mp1) * 40);
  right: 0;
  width: calc(var(--mp1) * 160);
  background: linear-gradient(180deg, #6b612f, #3c2d17);
  border: 1px solid rgba(227, 210, 120, 0.55);
  border-right: 0;
  border-radius: 8px 0 0 8px;
  z-index: 21;
  transform: translateX(110%);
  transition: transform 0.2s ease;
  overflow: hidden;
  box-shadow: -4px 4px 16px rgba(0, 0, 0, 0.4);
}

.loby-root .m-loby .m-menu-panel.on {
  transform: translateX(0);
}

.loby-root .m-loby .m-menu-item {
  height: calc(var(--mp1) * 40);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f3e49c;
  font-size: calc(var(--mp1) * 14);
  border-bottom: 1px solid rgba(0, 0, 0, 0.25);
  cursor: pointer;
  user-select: none;
}

.loby-root .m-loby .m-menu-item:active {
  background: rgba(255, 255, 255, 0.08);
}

.loby-root .m-loby .m-menu-item.danger {
  color: #ffb0b0;
}

.loby-root .tables-empty {
  color: #ffe9a0;
  padding: 40px;
  text-align: center;
  width: 100%;
}

/* 旧 site 大厅样式在新结构下不再强制 1280 顶栏冲突 */
html.is-mobile .loby-root .lobby .top,
html.is-mobile .loby-root .nav:not(.m-header) {
  /* no-op: 旧结构已替换 */
}

/* 顶栏 + LOGO 强制官方（防 site.css 覆盖 background） */
.loby-root .pc-loby .header{
  height:var(--pc71)!important;
  width:100%!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  background-image:
    linear-gradient(90deg,#806d3e,#a18f4e 30%,#c1b15d 50%,#a18f4e 70%,#806d3e),
    linear-gradient(#413413,#413413)!important;
  background-blend-mode:normal,normal!important
}
.loby-root .pc-loby .header .logo{
  display:block!important;
  opacity:1!important;
  visibility:visible!important;
  width:var(--pc93)!important;
  height:var(--pc66)!important;
  margin:0 auto!important;
  position:relative!important;
  z-index:5!important;
  overflow:hidden!important;
  filter:none!important;
  background:url(/assets/logo-official.png) 0 0 / var(--pc93) var(--pc66) no-repeat!important;
  background-size:var(--pc93) var(--pc66)!important;
  -webkit-mask-image:none!important;
  mask-image:none!important
}
.loby-root .pc-loby .header .logo:before,
.loby-root .pc-loby .header .logo:after{
  content:none!important;
  display:none!important;
  animation:none!important
}
.loby-root .pc-loby .header .logo .crest-image{
  display:none!important
}
.loby-root .pc-loby .header .logo .logo-shine{
  display:block!important;
  position:absolute!important;
  z-index:4!important;
  top:0!important;
  left:0!important;
  width:46%!important;
  height:100%!important;
  opacity:1!important;
  visibility:visible!important;
  pointer-events:none!important;
  filter:none!important;
  background:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.15) 25%,hsla(0,0%,100%,.85) 50%,hsla(0,0%,100%,.15) 75%,hsla(0,0%,100%,0))!important;
  /* transform via keyframes */
  -webkit-animation:lobbyShineMove 2.8s linear infinite!important;
  animation:lobbyShineMove 2.8s linear infinite!important
}

/* 顶部导航栏强制官方（参考） */
.loby-root .pc-loby .menu{
  width:100%!important;
  height:var(--pc35)!important;
  background-image:
    linear-gradient(0deg,#a49347,#c6bc69 53%,#e7e48a 89%,#b7b46c 93%,#86844e),
    linear-gradient(#daae3d,#daae3d)!important;
  background-blend-mode:normal,normal!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important
}

/* 导航按钮强制官方背景图 */
.loby-root .pc-loby .menu .menu-item{
  width:var(--pc91)!important;
  height:var(--pc33)!important;
  margin-left:var(--pc45)!important;
  margin-top:var(--pc4)!important;
  white-space:nowrap!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  font-size:var(--pc16)!important;
  background:url(/assets/menu-item-btn.png) 0 0 / var(--pc91) var(--pc33) no-repeat!important;
  background-repeat:no-repeat!important;
  background-position:0 0!important;
  background-size:var(--pc91) var(--pc33)!important;
  font-family:"Microsoft YaHei","Courier New",Courier,monospace!important;
  color:#5a5633!important;
  cursor:pointer!important;
  border:0!important;
  box-shadow:none!important;
  clip-path:none!important;
  filter:none!important;
  text-shadow:none!important
}
.loby-root .pc-loby .menu .menu-item:first-child{margin-left:0!important}
.loby-root .pc-loby .menu .menu-item:hover{
  filter:brightness(1.08) saturate(1.05)!important;
  color:#3a3210!important
}

/* Tab 条 + 选中底板强制官方 */
.loby-root .pc-loby .game-option-wrap{
  width:calc(100% - var(--pc6))!important;
  height:var(--pc28)!important;
  background-image:
    linear-gradient(180deg,#6b612f,#4b441d 30%,#2b260b),
    linear-gradient(#6b612f,#6b612f)!important;
  background-blend-mode:normal,normal!important;
  border-radius:var(--pc17) var(--pc17) 0 0!important;
  margin-top:var(--pc30)!important;
  margin-left:var(--pc3)!important;
  margin-right:var(--pc3)!important
}
.loby-root .pc-loby .game-option.active:before{
  width:var(--pc182)!important;
  height:var(--pc36)!important;
  background:url(/assets/tab-active.png) 0 0 / var(--pc182) var(--pc36) no-repeat!important;
  background-size:var(--pc182) var(--pc36)!important;
  clip-path:none!important
}

/* 三个房间 Tab 字体加大 + 色 #e6db85 */
.loby-root .pc-loby .game-option,
.loby-root .pc-loby .game-option span,
.loby-root .pc-loby .game-option.active,
.loby-root .pc-loby .game-option.active span{
  color:#e6db85!important;
  font-size:24px!important
}
.loby-root .pc-loby .game-option.active span{
  font-weight:700!important
}

/* 房间 F 卡强制官方渐变底 */
.loby-root .pc-loby .list-container .table.item,
.loby-root .pc-loby .list-container .item.table{
  background-image:
    linear-gradient(90deg,#5f512c,#6e5e33 30%,#7d6a39 50%,#6e5e33 70%,#5f512c),
    linear-gradient(#daae3d,#daae3d)!important;
  background-blend-mode:normal,normal!important;
  border:none!important;
  padding:var(--pc5)!important;
  box-sizing:border-box!important
}

/* 白卡边界 + 整格路单 + 侧栏白字常规字重 */
.loby-root .pc-loby .table.item{
  overflow:hidden!important;
  --cell:20px
}
.loby-root .pc-loby .table .road{
  overflow:hidden!important;
  justify-self:start!important;
  width:calc(var(--cell)*12)!important;
  min-width:calc(var(--cell)*12)!important;
  max-width:calc(var(--cell)*12)!important;
  height:calc(var(--cell)*6)!important;
  background-size:var(--cell) var(--cell)!important
}
.loby-root .pc-loby .table .side span,
.loby-root .pc-loby .table .side .side-name{
  font-size:18px!important;
  line-height:22px!important;
  font-weight:400!important;
  color:#fff!important;
  max-width:26px!important;
  width:22px!important
}
.loby-root .pc-loby .table .side b,
.loby-root .pc-loby .table .side .side-desk{
  font-size:20px!important;
  line-height:1.15!important;
  font-weight:400!important;
  color:#fff!important
}
.loby-root .pc-loby .table .limit .limit-label,
.loby-root .pc-loby .table .limit .limit-value{
  font-size:14px!important;
  line-height:18px!important;
  font-weight:400!important;
  color:#fff!important
}
.loby-root .pc-loby .table .limit .limit-value{
  margin-left:14px!important
}
/* 进入游戏：钉右下角 */
.loby-root .pc-loby .table .limit .btn,
.loby-root .pc-loby .table .limit .btn.enter-btn{
  display:inline-flex!important;
  visibility:visible!important;
  opacity:1!important;
  position:absolute!important;
  right:10px!important;
  bottom:2px!important;
  width:78px!important;
  height:24px!important;
  font-size:11px!important;
  font-weight:400!important;
  background-color:#0a0a0a!important;
  color:#fff!important;
  border-radius:4px!important;
  z-index:8!important
}

/* ===== FORCE overrides ===== */
html:not(.is-mobile) .loby-root .pc-loby .game-option,
html:not(.is-mobile) .loby-root .pc-loby .game-option span {
  font-size: var(--pc20) !important;
  font-weight: 700 !important;
}
html:not(.is-mobile) .loby-root .pc-loby .table .side,
html:not(.is-mobile) .loby-root .pc-loby .table .side span,
html:not(.is-mobile) .loby-root .pc-loby .table .side b {
  font-family: "Microsoft YaHei UI Light","Microsoft YaHei Light","Microsoft YaHei",sans-serif !important;
  font-weight: 400 !important;
  font-size: var(--pc16) !important;
}
html:not(.is-mobile) .loby-root .pc-loby .table .side b {
  font-size: var(--pc15) !important;
  font-weight: 400 !important;
}
html:not(.is-mobile) .loby-root .pc-loby .table .limit .limit-label,
html:not(.is-mobile) .loby-root .pc-loby .table .limit .limit-value {
  font-size: var(--pc16) !important;
  font-weight: 400 !important;
  color: #fff !important;
}
html:not(.is-mobile) .loby-root .pc-loby .table .road {
  --cell-px: 25px !important;
  flex: 0 0 calc(25px * 13) !important;
  width: calc(25px * 13) !important;
  min-width: calc(25px * 13) !important;
  max-width: calc(25px * 13) !important;
  height: calc(25px * 6) !important;
  min-height: calc(25px * 6) !important;
  max-height: calc(25px * 6) !important;
  align-self: center !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background-color: #fff !important;
  background-image:
    linear-gradient(to right, #c8c8c8 1px, transparent 1px),
    linear-gradient(to bottom, #c8c8c8 1px, transparent 1px) !important;
  background-size: 25px 25px !important;
  background-repeat: repeat !important;
}
html:not(.is-mobile) .loby-root .pc-loby .table .beads {
  width: calc(25px * 13) !important;
  max-width: calc(25px * 13) !important;
  height: calc(25px * 6) !important;
  grid-template-rows: repeat(6, 25px) !important;
  grid-auto-columns: 25px !important;
  overflow: hidden !important;
  font-size: 11px !important;
}