/* 手机端基础约束 */
html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  overflow-x: hidden;
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

img,
uni-image,
video,
canvas {
  max-width: 100%;
}

/* 任意宽度（含 F12 设备模式）：下注页禁止横向撑破 */
body.kind-page-mobile,
body.page-kind-index {
  overflow-x: hidden !important;
}

body.kind-page-mobile #app,
body.kind-page-mobile uni-app,
body.kind-page-mobile .page,
body.kind-page-mobile .page .container,
body.kind-page-mobile .sys-header,
body.kind-page-mobile .sys-header .header,
body.kind-page-mobile .top-mod,
body.kind-page-mobile .container > .tag,
body.kind-page-mobile .list-contet,
body.kind-page-mobile .list-contet .right,
body.kind-page-mobile .list-contet .right .scroll-view,
body.kind-page-mobile .type-one,
body.kind-page-mobile .type-one .item-flex,
body.kind-page-mobile .container > .footer,
body.kind-page-mobile .footer {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

body.kind-page-mobile .type-one .item-flex {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  justify-content: flex-start !important;
}

/* 特码等简单项四列；特肖等由 bet-layout 的 .bet-item-full / :has 撑满一行 */
body.kind-page-mobile .type-one .item-flex-item {
  min-width: 0 !important;
  box-sizing: border-box !important;
}

body.kind-page-mobile .type-one .item-flex-item.bet-item-full,
body.kind-page-mobile .type-one .item-flex-item.line,
body.kind-page-mobile .type-one .item-flex-item:has(.ball-view) {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
}

/* Tab 条必须能横滑，勿被父级 overflow 吃掉 */
body.kind-page-mobile .list-contet > .left {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  touch-action: pan-x !important;
  max-width: 100% !important;
}

/* 窄屏：号码可换行，避免 top-mod 把右侧倒计时挤出 */
@media (max-width: 600px) {
  body.kind-page-mobile .top-mod .left .ball-view,
  html.lhc-ball-skin .top-mod .ball-view,
  html.lhc-ball-skin .top-mod .left .ball-view {
    flex-wrap: wrap !important;
  }

  body.kind-page-mobile .type-one .item-flex-item .label {
    font-size: 15px !important;
  }

  body.kind-page-mobile .type-one .item-flex-item .value {
    font-size: 13px !important;
  }

  body.kind-page-mobile .container > .tag .bet-reset-mid .btn.reset-proxy {
    min-width: 64px !important;
    padding: 0 12px !important;
    font-size: 14px !important;
  }
}

/*
 * 桌面网页：整站居中手机框（750），不要全屏。
 * rpx 已按框宽计算；框内再防横向溢出。
 * 注意：不要给 #app 加 overflow:hidden 裁掉顶栏返回键——只用 overflow-x。
 */
@media (min-width: 791px) {
  body.h5-desktop-shell {
    background: #e8eaed !important;
  }

  body.h5-desktop-shell #app,
  body.h5-desktop-shell uni-app {
    width: var(--h5-frame-width, 750px) !important;
    max-width: var(--h5-frame-width, 750px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    min-height: 100vh !important;
    background: #fff !important;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 12px 32px rgba(0, 0, 0, .08);
    position: relative !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  /* 框内所有主结构强制吃满框宽，禁止撑出右边 */
  body.h5-desktop-shell .page,
  body.h5-desktop-shell .page .container,
  body.h5-desktop-shell .sys-header,
  body.h5-desktop-shell .sys-header .header,
  body.h5-desktop-shell .top-mod,
  body.h5-desktop-shell .top-two-mod,
  body.h5-desktop-shell .container > .tag,
  body.h5-desktop-shell .list-contet,
  body.h5-desktop-shell .list-contet .right,
  body.h5-desktop-shell .list-contet .right .scroll-view,
  body.h5-desktop-shell .type-one,
  body.h5-desktop-shell .type-one .item-flex,
  body.h5-desktop-shell .container > .footer,
  body.h5-desktop-shell .footer {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  body.h5-desktop-shell .type-one .item-flex {
    gap: 6px !important;
    padding-left: 2px !important;
    padding-right: 2px !important;
  }

  body.h5-desktop-shell .type-one .item-flex-item {
    min-width: 0 !important;
  }

  body.h5-desktop-shell .type-one .item-flex-item.bet-item-full,
  body.h5-desktop-shell .type-one .item-flex-item.line,
  body.h5-desktop-shell .type-one .item-flex-item:has(.ball-view) {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }

  body.h5-desktop-shell .list-contet > .left {
    overflow-x: auto !important;
    touch-action: pan-x !important;
  }

  /* 覆盖原生 left:50% + translateX(-50%)，避免顶栏和内容错位 */
  body.h5-desktop-shell uni-page-head,
  body.h5-desktop-shell .uni-page-head,
  body.h5-desktop-shell .page .sys-header,
  body.h5-desktop-shell .sys-header,
  body.h5-desktop-shell uni-tabbar,
  body.h5-desktop-shell .uni-tabbar,
  body.h5-desktop-shell uni-tabbar .uni-tabbar {
    left: var(--h5-frame-left, 0px) !important;
    right: auto !important;
    width: var(--h5-frame-width, 750px) !important;
    max-width: var(--h5-frame-width, 750px) !important;
    transform: none !important;
    -webkit-transform: none !important;
    box-sizing: border-box !important;
  }

  /* 首页顶栏 Logo / 右侧菜单不贴边被裁 */
  body.h5-desktop-shell .header .header,
  body.h5-desktop-shell .page .sys-header,
  body.h5-desktop-shell .sys-header {
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box !important;
  }

  body.h5-desktop-shell .header .header .left,
  body.h5-desktop-shell .header .header .logo {
    min-width: 0 !important;
    overflow: visible !important;
  }

  /* 下注页「快捷/一般」不被裁切 */
  body.h5-desktop-shell .container > .tag {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  body.h5-desktop-shell .container > .tag .left {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body.h5-desktop-shell .container > .tag .right {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }

  /* 内容避开固定顶栏：
   * sys-page 自身已有 customBar 占位条，下注页再 margin-top 会双倍垫高，
   * 刷新后要滑一下才看到下注。仅非 sys-page 场景由 --window-top 处理。 */
  body.h5-desktop-shell .page > .container,
  body.h5-desktop-shell.page-kind-index .page > .container,
  body.h5-desktop-shell .page .container {
    margin-top: 0 !important;
  }

  body.h5-desktop-shell.kind-page-mobile .page > .container,
  body.h5-desktop-shell.kind-page-mobile .page .container {
    margin-top: 0 !important;
  }

  body.h5-desktop-shell uni-page-wrapper,
  body.h5-desktop-shell .uni-page-wrapper {
    padding-top: 0 !important;
  }

  /* 购彩查询等 uni-page-head 页面：保证内容不被顶栏压住 */
  body.h5-desktop-shell uni-page-body {
    padding-top: 0 !important;
  }

  /* 六合开奖区略收紧，首屏多露下注格 */
  body.h5-desktop-shell.kind-page-mobile .top-mod {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }

  body.h5-desktop-shell.kind-page-mobile .top-mod .left .ball-view {
    margin-top: 2px !important;
  }

  body.h5-desktop-shell.kind-page-mobile .draw-summary {
    margin-top: 4px !important;
  }
}

/*
 * 仅约束跑出内容区的 fixed（不含 .menu-box，避免破坏 left:100vw 隐藏）。
 */
.h5-fixed-constrained {
  left: var(--h5-frame-left, 0px) !important;
  right: auto !important;
  width: var(--h5-frame-width, 100%) !important;
  max-width: var(--h5-frame-width, 100%) !important;
  box-sizing: border-box !important;
}

/*
 * 桌面端抽屉：只有检测到内容区窄于视口时才启用。
 * 默认先藏在框外，且首屏无 transition，避免刷新「闪一下再划走」。
 */
body.h5-frame-page .menu-box.menu.h5-drawer-framed,
body.h5-frame-page .menu-box.kind.h5-drawer-framed {
  left: var(--h5-frame-left, 0px) !important;
  right: auto !important;
  width: var(--h5-frame-width, 100%) !important;
  max-width: var(--h5-frame-width, 100%) !important;
  height: var(--app-height, 100dvh) !important;
  max-height: var(--app-height, 100dvh) !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  transition: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* 用户菜单默认在右侧外；彩种默认在左侧外 */
body.h5-frame-page .menu-box.menu.h5-drawer-framed {
  transform: translateX(110%) !important;
}

body.h5-frame-page .menu-box.kind.h5-drawer-framed {
  transform: translateX(-110%) !important;
}

body.h5-frame-page .menu-box.menu.h5-drawer-framed.hide {
  transform: translateX(110%) !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.h5-frame-page .menu-box.kind.h5-drawer-framed.hide-kind {
  transform: translateX(-110%) !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.h5-frame-page .menu-box.menu.h5-drawer-framed:not(.hide),
body.h5-frame-page .menu-box.kind.h5-drawer-framed:not(.hide-kind) {
  transform: translateX(0) !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* 稳定后再开滑动动画 */
body.h5-frame-page.h5-drawer-anim .menu-box.menu.h5-drawer-framed,
body.h5-frame-page.h5-drawer-anim .menu-box.kind.h5-drawer-framed {
  transition: transform .3s ease, visibility .3s ease !important;
}

body.h5-frame-page .menu-box.kind.h5-drawer-framed .menu-view,
body.h5-frame-page .menu-box.menu.h5-drawer-framed .menu-view {
  width: 72% !important;
  max-width: 280px !important;
}

body.h5-frame-page .mask.h5-drawer-framed {
  left: var(--h5-frame-left, 0px) !important;
  right: auto !important;
  width: var(--h5-frame-width, 100%) !important;
  max-width: var(--h5-frame-width, 100%) !important;
}

/* 未打开时遮罩也不要露 */
body.h5-frame-page .mask.hide,
.page > .mask.hide,
.mask.hide {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* iOS 下注页高度 */
body.kind-page-mobile .container {
  height: calc(var(--app-height, 100dvh) - var(--top, 0px)) !important;
  max-height: calc(var(--app-height, 100dvh) - var(--top, 0px)) !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

body.kind-page-mobile .container > .list-contet {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

body.kind-page-mobile .container > .footer {
  position: relative !important;
  z-index: 20;
  flex: 0 0 auto !important;
  width: 100% !important;
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  margin-bottom: 0 !important;
  transform: translateZ(0);
}

@media (max-width: 390px) {
  body.kind-page-mobile .container > .footer .input-box {
    flex-basis: 42% !important;
    width: 42% !important;
    max-width: 42% !important;
    padding-left: 5px !important;
    padding-right: 4px !important;
  }

  body.kind-page-mobile .container > .footer .button-box {
    flex-basis: 58% !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
    gap: 4px !important;
  }

  body.kind-page-mobile .container > .footer .button-box .btn.confirm {
    min-width: 66px !important;
  }
}

@supports (height: 100dvh) {
  body.kind-page-mobile .container {
    height: calc(var(--app-height, 100dvh) - var(--top, 0px)) !important;
    max-height: calc(var(--app-height, 100dvh) - var(--top, 0px)) !important;
  }
}

body.kind-log-page .log-main {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

body.kind-log-page .log-main > .top {
  left: var(--kind-log-left, 0px) !important;
  width: var(--kind-log-width, 100%) !important;
  max-width: var(--kind-log-width, 100%) !important;
  box-sizing: border-box !important;
}

body.k3-history-fix-page .log-main > .list,
body.k3-history-fix-page .log-main > .load-btn,
body.k3-history-fix-page .log-main > sys-empty,
body.k3-history-fix-page .log-main > .sys-empty,
body.k3-history-fix-page .log-main uni-view.sys-empty,
body.k3-history-fix-page .log-main .sys-empty {
  display: none !important;
  height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

#k3-history-fix {
  width: 100%;
  padding: 0 8px 14px;
  box-sizing: border-box;
}

.k3-history-card {
  margin: 8px 0 0;
  padding: 12px;
  border-radius: 7px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(31, 45, 61, .06);
}

.k3-history-title {
  font-size: 15px;
  font-weight: 600;
  color: #222;
}

.k3-history-balls {
  display: flex;
  gap: 9px;
  margin: 12px 0;
}

.k3-history-ball {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  background: #e22312;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
}

.k3-history-time {
  color: #999;
  font-size: 12px;
  text-align: right;
}

.k3-history-empty {
  padding: 80px 12px;
  color: #999;
  text-align: center;
}

.k3-history-empty.error {
  color: #e22312;
}