* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  height: 100%;
  background: #0b0c12;
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", sans-serif;
  -webkit-tap-highlight-color: transparent;
}
body { overflow: hidden; }
.page {
  height: 100%;
  overflow: auto;
  padding-bottom: 28px;
  background:
    radial-gradient(120% 60% at 50% -10%, #2a1a55 0%, transparent 55%),
    #0b0c12;
}
.page::-webkit-scrollbar { width: 0; height: 0; }

/* 顶栏固定：叠在 Banner 上，上下滑不跟着走
 * 占位只认宿主 --app-inset-top（默认 0）。
 * 不在这里用 env(safe-area-inset-top)：App 自带标题栏时 WebView 已在其下，
 * 再用 safe-area 会多出一块空黑条。 */
.hero {
  position: relative;
}
.hero-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  padding-top: var(--app-inset-top, 0px);
  background: transparent;
  pointer-events: none;
}
.hero-bar .top,
.hero-bar .icon-btn,
.hero-bar .wallet,
.hero-bar .recharge-btn,
.hero-bar .notice-bar {
  pointer-events: auto;
}

.top {
  display: flex;
  align-items: center;
  padding: 0 12px;
  gap: 8px;
  height: 40px;
  background: linear-gradient(180deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.58) 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background .2s ease, backdrop-filter .2s ease;
}
.hero-bar.is-solid .top {
  background: rgba(11, 12, 18, .92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.icon-btn {
  width: 32px; height: 32px;
  border: 0; background: transparent; color: #fff;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.45));
}
#btnCashWithdraw[hidden],
html.in-game #btnCashWithdraw,
html.in-game #settingsCashWithdraw,
html.in-game #settingsCashWithdrawRecords {
  display: none !important;
}
.logo { flex: 1; min-width: 0; line-height: 1.15; }
.logo .brand {
  font-size: 17px; font-weight: 800; letter-spacing: 0.5px;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.55);
}
.auth { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.userbox {
  display: flex; align-items: center; gap: 6px;
}
.nick {
  max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 12px; color: rgba(255,255,255,.82);
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
}
.nick.is-guest {
  cursor: pointer;
  height: 28px;
  padding: 0 12px;
  border-radius: 14px;
  line-height: 28px;
  color: #fff;
  background: rgba(0,0,0,.38);
  border: 1px solid rgba(255,255,255,.18);
}
.auth.authed .nick {
  color: #fff;
}
.wallet {
  display: none;
  align-items: center;
  gap: 6px;
  height: 28px;
  max-height: 28px;
  padding: 0 8px 0 4px;
  border-radius: 14px;
  background: rgba(0,0,0,.38);
  border: 1px solid rgba(255,255,255,.18);
  font-size: 12px;
  color: #fff;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  flex-shrink: 1;
  min-width: 0;
  max-width: min(168px, 42vw);
}
.wallet #gems {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
.auth.authed .wallet {
  display: flex;
  cursor: pointer;
}
.recharge-btn {
  font-size: 13px;
  font-weight: 700;
  color: #fff !important;
  background: rgba(0,0,0,.38) !important;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 8px;
}
html.host-embed #btnBank {
  display: none !important;
}
/* 手机顶栏：隐藏保险箱/提现按钮；昵称、积分、充/客服/设置保留 */
html:not(.is-desktop) .hero-bar #btnBank,
html:not(.is-desktop) .hero-bar #btnCashWithdraw {
  display: none !important;
}
/* 嵌入 App（仅手机宽）：局内/大厅商行与 H5 大厅同一全屏壳；PC 浏览器嵌套走 is-desktop 弹窗分栏 */
html.host-embed:not(.is-desktop) .shop-page:not([hidden]) {
  position: fixed;
  inset: 0;
  z-index: 10051;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  min-height: 100vh;
  min-height: 100dvh;
  padding: var(--app-inset-top, 0px) 0 0;
  box-sizing: border-box;
  transform: none;
  background:
    radial-gradient(120% 60% at 50% -10%, #2a1a55 0%, transparent 55%),
    #0b0c12;
  overflow: hidden;
}
html.host-embed:not(.is-desktop) .shop-page > .pay-top,
html.host-embed:not(.is-desktop) .shop-page > .shop-recharge-user,
html.host-embed:not(.is-desktop) .shop-page > .shop-body {
  width: 100%;
  max-width: none;
  flex-shrink: 0;
  box-sizing: border-box;
}
html.host-embed:not(.is-desktop) .shop-page > .shop-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  max-height: none;
  margin: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
}
html.host-embed:not(.is-desktop) .shop-page .shop-body > .shop-strip {
  flex-shrink: 0;
  border-bottom: 1px solid rgba(0, 0, 0, .38);
  border-right: none;
  flex: none;
  width: auto;
  max-width: none;
  grid-template-columns: repeat(2, 1fr);
}
html.host-embed:not(.is-desktop) .shop-page .shop-body > .shop-strip.layout-split {
  grid-template-columns: repeat(2, 1fr);
  flex: none;
  width: auto;
  max-width: none;
  overflow-x: auto;
  overflow-y: hidden;
  border-right: none;
  padding: 10px 12px 12px;
  background: transparent;
}
html.host-embed:not(.is-desktop) .shop-page .shop-body > .cs-pane.on {
  flex: 1;
  min-height: 0;
  margin: 0 12px;
}
html.host-embed:not(.is-desktop) .shop-page.shop-landscape-ui:not([hidden]),
html.host-embed:not(.is-desktop).ingame-pay-land .shop-page:not([hidden]) {
  align-items: stretch;
  justify-content: flex-start;
  padding: var(--app-inset-top, 0px) 0 0;
}
html.host-embed:not(.is-desktop) .shop-page.shop-landscape-ui > .shop-body,
html.host-embed:not(.is-desktop).ingame-pay-land .shop-page > .shop-body,
html.host-embed:not(.is-desktop).game-orient-land .shop-page > .shop-body {
  flex-direction: column;
}
html.host-embed:not(.is-desktop).ingame-pay-land .shop-page > .pay-top,
html.host-embed:not(.is-desktop).ingame-pay-land .shop-page > .shop-recharge-user,
html.host-embed:not(.is-desktop).ingame-pay-land .shop-page > .shop-body {
  width: 100%;
  max-width: none;
}
html.host-embed:not(.is-desktop).ingame-pay-land .shop-page .shop-body > .shop-strip {
  flex: none;
  width: auto;
  max-width: none;
  border-right: none;
}
html.host-embed:not(.is-desktop).ingame-pay-land .shop-page .shop-body > .cs-pane.on {
  border-left: none;
  margin: 0 12px;
}
/* 局内（Cocos iframe 已打开）时充值/商行盖在游戏之上 */
html.ingame-pay .pay-page:not([hidden]),
html.ingame-pay .bank-page:not([hidden]),
html.ingame-pay .shop-page:not([hidden]),
html.ingame-pay .cs-page:not([hidden]) {
  z-index: 10050;
}

/* 局内 + 竖版游戏：全屏；横版游戏的商行不走这条 */
html.ingame-pay-port .pay-page:not([hidden]),
html.ingame-pay-port .bank-page:not([hidden]),
html.ingame-pay-port .cs-page:not([hidden]) {
  inset: 0;
  min-height: 100vh;
  min-height: 100dvh;
}
html.ingame-pay-port:not(.is-desktop) .shop-page:not([hidden]) {
  inset: 0;
  min-height: 100vh;
  min-height: 100dvh;
}
html.ingame-pay-port:not(.is-desktop) .shop-page > .shop-body {
  flex-direction: column;
}
/* 嵌套 + PC 浏览器局内：商行仍用桌面居中弹窗（盖在游戏上） */
html.is-desktop.ingame-pay .shop-page:not([hidden]) {
  z-index: 10050;
}

/* 局内 + 横版游戏：居中「横屏比例」弹窗（嵌套 WebView 常竖屏宽高，宽取长边 vh、高取短边 vw） */
html.ingame-pay-land {
  --ingame-modal-long: max(100vw, 100vh);
  --ingame-modal-short: min(100vw, 100vh);
  --ingame-shop-split-w: min(calc(var(--ingame-modal-long) - 32px), 960px);
  --ingame-shop-modal-max-h: min(calc(var(--ingame-modal-short) - 88px), 520px);
  --ingame-land-overlay-w: min(calc(var(--ingame-modal-long) - 32px), 720px);
  --ingame-land-modal-max-h: min(calc(var(--ingame-modal-short) - 88px), 420px);
  --ingame-land-modal-r: 14px;
}
html.ingame-pay-land .pay-page:not([hidden]),
html.ingame-pay-land .bank-page:not([hidden]),
html.ingame-pay-land .cs-page:not([hidden]) {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: calc(var(--app-inset-top, 0px) + 10px) 14px 10px;
  box-sizing: border-box;
  background: rgba(4, 5, 10, .84);
  overflow: auto;
}
html.ingame-pay-land .pay-page .pay-top,
html.ingame-pay-land .pay-page .pay-body,
html.ingame-pay-land .bank-page .pay-top,
html.ingame-pay-land .bank-page .pay-body,
html.ingame-pay-land .cs-page > .pay-top,
html.ingame-pay-land .cs-page > .cs-tabs,
html.ingame-pay-land .cs-page > .cs-pane {
  width: var(--ingame-land-overlay-w);
  max-width: calc(100vw - 28px);
  box-sizing: border-box;
  flex-shrink: 0;
}
html.ingame-pay-land .pay-page .pay-top,
html.ingame-pay-land .bank-page .pay-top,
html.ingame-pay-land .cs-page > .pay-top,
html.ingame-pay-land .shop-page > .pay-top {
  position: relative;
  top: auto;
  border: 1px solid rgba(255, 255, 255, .1);
  border-bottom: none;
  border-radius: var(--ingame-land-modal-r) var(--ingame-land-modal-r) 0 0;
  background: rgba(14, 15, 22, .98);
}
html.ingame-pay-land .shop-page > .shop-recharge-user {
  border-left: 1px solid rgba(255, 255, 255, .1);
  border-right: 1px solid rgba(255, 255, 255, .1);
  border-bottom: 1px solid rgba(0, 0, 0, .45);
  margin: 0;
  background: #12131c;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}
html.ingame-pay-land .shop-page > .pay-top,
html.ingame-pay-land .shop-page > .shop-recharge-user,
html.ingame-pay-land .shop-page > .shop-body {
  width: var(--ingame-shop-split-w);
  max-width: var(--ingame-shop-split-w);
}
html.ingame-pay-land .shop-page > .shop-body {
  flex-direction: row;
  align-items: stretch;
  min-height: min(260px, calc(var(--ingame-modal-short) - 108px));
  max-height: var(--ingame-shop-modal-max-h);
}
html.ingame-pay-land .shop-page .shop-body > .shop-strip {
  grid-template-columns: 1fr;
  --shop-row-h: auto;
  flex: 0 0 clamp(156px, 30%, 248px);
  width: clamp(156px, 30%, 248px);
  max-width: 34%;
  align-self: stretch;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border-bottom: none;
  border-right: 1px solid rgba(0, 0, 0, .42);
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, .04);
  padding: 10px 8px 12px 10px;
  background: linear-gradient(180deg, #141622 0%, #0b0c12 100%);
}
html.ingame-pay-land .shop-page .shop-body > .shop-strip .shop-item {
  min-height: 72px;
}
html.ingame-pay-land .shop-page .shop-body > .shop-strip .shop-item.on::after {
  left: auto;
  right: -7px;
  bottom: 50%;
  margin-left: 0;
  margin-bottom: -7px;
  border: 7px solid transparent;
  border-left-color: #6a3dff;
  border-top-color: transparent;
}
html.ingame-pay-land .shop-page .shop-body > .cs-pane.on {
  flex: 1;
  min-width: 0;
  min-height: 0;
  margin: 0;
  border: none;
  border-left: 1px solid rgba(0, 0, 0, .38);
  border-radius: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/*
 * 桌面 + 横版局内商行：左栏右聊（嵌入 / 手机走大厅全屏，见 host-embed 与 shopPreferHallLayout）
 */
html.is-desktop:not(.host-embed).game-orient-land.ingame-pay .shop-page:not([hidden]),
html.is-desktop:not(.host-embed).game-orient-land.ingame-pay-land .shop-page:not([hidden]) {
  position: fixed;
  inset: 0;
  z-index: 10051;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  min-height: 100vh;
  min-height: 100dvh;
  padding: var(--app-inset-top, 0px) 0 0;
  box-sizing: border-box;
  transform: none;
  background:
    radial-gradient(120% 60% at 50% -10%, #2a1a55 0%, transparent 55%),
    #0b0c12;
  overflow: hidden;
}
html.is-desktop:not(.host-embed).game-orient-land.ingame-pay .shop-page > .pay-top,
html.is-desktop:not(.host-embed).game-orient-land.ingame-pay .shop-page > .shop-recharge-user,
html.is-desktop:not(.host-embed).game-orient-land.ingame-pay .shop-page > .shop-body {
  width: 100%;
  max-width: none;
  flex-shrink: 0;
  box-sizing: border-box;
}
html.is-desktop:not(.host-embed).game-orient-land.ingame-pay .shop-page > .shop-body {
  flex: 1;
  min-height: 0;
  flex-direction: row;
  max-height: none;
  margin: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
}
html.is-desktop:not(.host-embed).game-orient-land.ingame-pay .shop-page .shop-body > .shop-strip {
  grid-template-columns: 1fr;
  flex: 0 0 clamp(140px, 26%, 248px);
  width: clamp(140px, 26%, 248px);
  max-width: 34%;
  border-bottom: none;
  border-right: 1px solid rgba(0, 0, 0, .42);
}
html.is-desktop:not(.host-embed).game-orient-land.ingame-pay .shop-page .cs-composer {
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}
html.is-desktop:not(.host-embed).game-orient-land.ingame-pay .shop-page .cs-composer input {
  font-size: 16px;
}

html.ingame-pay-land .pay-page .pay-body,
html.ingame-pay-land .bank-page .pay-body {
  flex: 0 1 auto;
  max-height: var(--ingame-land-modal-max-h);
  overflow: auto;
  border: 1px solid rgba(255, 255, 255, .1);
  border-top: none;
  border-radius: 0 0 var(--ingame-land-modal-r) var(--ingame-land-modal-r);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .55);
}
html.ingame-pay-land .cs-page > .cs-tabs {
  border-left: 1px solid rgba(255, 255, 255, .1);
  border-right: 1px solid rgba(255, 255, 255, .1);
  border-top: none;
  border-bottom: none;
  background: #0b0c12;
  max-height: 96px;
  padding-top: 6px;
  padding-bottom: 8px;
}
html.ingame-pay-land .cs-page > .cs-pane.on {
  flex: 0 1 auto;
  min-height: min(200px, 38vh);
  max-height: var(--ingame-land-modal-max-h);
  margin: 0;
  border: 1px solid rgba(255, 255, 255, .1);
  border-top: none;
  border-radius: 0 0 var(--ingame-land-modal-r) var(--ingame-land-modal-r);
  background:
    radial-gradient(120% 60% at 50% -10%, #2a1a55 0%, transparent 55%),
    #0b0c12;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .55);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
/* 嵌套 App 局内横版：仅商行居中弹窗+分栏；充值/客服仍全屏（与竖版老布局一致） */
html.host-embed.ingame-pay-land .pay-page:not([hidden]),
html.host-embed.ingame-pay-land .cs-page:not([hidden]) {
  align-items: stretch;
  justify-content: flex-start;
  padding: var(--app-inset-top, 0px) 0 0;
  background:
    radial-gradient(120% 60% at 50% -10%, #2a1a55 0%, transparent 55%),
    #0b0c12;
  overflow: hidden;
}
html.host-embed.ingame-pay-land .pay-page .pay-top,
html.host-embed.ingame-pay-land .pay-page .pay-body,
html.host-embed.ingame-pay-land .cs-page > .pay-top,
html.host-embed.ingame-pay-land .cs-page > .cs-tabs,
html.host-embed.ingame-pay-land .cs-page > .cs-pane {
  width: 100%;
  max-width: none;
  border-radius: 0;
  box-shadow: none;
}
html.host-embed.ingame-pay-land .pay-page .pay-top,
html.host-embed.ingame-pay-land .cs-page > .pay-top {
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
html.host-embed.ingame-pay-land .pay-page .pay-body,
html.host-embed.ingame-pay-land .cs-page > .cs-pane.on {
  flex: 1;
  min-height: 0;
  max-height: none;
  margin: 0;
  border: none;
}
.wallet .gem {
  position: relative;
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  border-radius: 50%;
  flex: 0 0 20px;
  flex-shrink: 0;
  background: linear-gradient(145deg, #ffe082 0%, #ffb300 42%, #f57c00 100%);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.35),
    inset 0 1px 1px rgba(255, 255, 255, 0.55);
}
.wallet .gem::before {
  content: '';
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffd54f 0%, #ffca28 45%, #ff8f00 100%);
  border: 1px solid rgba(230, 81, 0, 0.55);
  box-sizing: border-box;
}
.wallet .gem::after {
  content: '';
  position: absolute;
  left: 22%;
  top: 18%;
  width: 36%;
  height: 24%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  transform: rotate(-18deg);
  z-index: 1;
}

.banner-wrap {
  --banner-radius: 14px;
  padding: 0 var(--feed-pad, 14px);
  box-sizing: border-box;
}
.carousel {
  position: relative;
  border-radius: var(--banner-radius);
  overflow: hidden;
  background: #161622;
  box-shadow:
    0 4px 16px rgba(0, 0, 0, .28),
    inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.carousel-track {
  display: flex;
  width: 100%;
  transition: transform .35s ease;
  will-change: transform;
  backface-visibility: hidden;
}
.banner {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  /* 素材 750×400，按可视宽度等比（与 banner-wrap 左右留白一致） */
  height: calc((100vw - 2 * var(--feed-pad, 14px)) * 400 / 750);
  aspect-ratio: 750 / 400;
  min-height: 0;
  overflow: hidden;
  border-radius: var(--banner-radius, 14px);
  background: #161622;
  display: block;
  color: inherit;
  text-decoration: none;
}
.banner.banner-text {
  background: linear-gradient(135deg, #222436 0%, #171822 100%);
}
.banner .banner-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: inherit;
  opacity: 0;
  z-index: 0;
  pointer-events: none;
}
.banner.has-img .banner-img {
  opacity: 1;
}
.banner.banner-wait::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    90deg,
    #161622 0%,
    #222436 45%,
    #161622 90%
  );
  background-size: 200% 100%;
  animation: banner-shimmer 1.2s ease-in-out infinite;
}
@keyframes banner-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
.banner .deco {
  position: absolute; left: -8px; bottom: -16px;
  width: 130px; height: 130px; border-radius: 50%;
  background:
    radial-gradient(circle at 40% 35%, #ffd54f 0 18%, transparent 19%),
    radial-gradient(circle at 62% 48%, #ff5252 0 22%, transparent 23%),
    radial-gradient(circle at 38% 62%, #42a5f5 0 16%, transparent 17%),
    radial-gradient(circle at 50% 50%, #2a2d42 0 46%, transparent 47%);
  opacity: .85;
  z-index: 2;
}
.banner .copy { position: absolute; left: 118px; top: 36px; z-index: 2; }
.banner h2 { font-size: 22px; font-weight: 800; letter-spacing: 1px; }
.banner p { margin-top: 6px; font-size: 12px; color: #c9d8ff; }
.banner .chip {
  position: absolute; right: 10px; top: 8px; z-index: 2;
  font-size: 10px; color: #d0dcff;
  background: rgba(0,0,0,.25); border-radius: 4px; padding: 2px 6px;
}
.banner.banner-wait .deco,
.banner.banner-wait .copy,
.banner.banner-wait .chip,
.banner.has-img .deco,
.banner.has-img .copy,
.banner.has-img .chip { display: none; }

.carousel-dots {
  position: absolute;
  left: 0; right: 0; bottom: 10px;
  display: flex;
  justify-content: center;
  gap: 5px;
  pointer-events: none;
  z-index: 2;
}
.carousel-dots span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,.35);
}
.carousel-dots span.on {
  width: 14px;
  border-radius: 3px;
  background: #ff9a3c;
}

.notice-bar {
  margin: 0 12px;
  height: 28px;
  border-radius: 8px;
  background: rgba(0, 0, 0, .52);
  display: flex;
  align-items: center;
  overflow: hidden;
}
.notice-bar[hidden] { display: none !important; }
.hero-bar.is-solid .notice-bar {
  background: rgba(11, 12, 18, .92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.notice-tag {
  flex: 0 0 auto;
  margin-left: 8px;
  font-size: 11px;
  color: #ffd54f;
  background: rgba(255, 213, 79, .16);
  border-radius: 4px;
  padding: 2px 6px;
}
.notice-mask {
  flex: 1;
  overflow: hidden;
  margin: 0 10px;
}
.notice-track {
  display: inline-block;
  white-space: nowrap;
  font-size: 12px;
  color: #e8eefc;
  padding-left: 100%;
  animation: notice-scroll 16s linear infinite;
}
@keyframes notice-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}

.feed {
  padding-bottom: 8px;
  --feed-pad: 14px;
  --tile-gap: 10px;
}

.row-sec {
  padding-top: 8px;
  margin-top: 0;
}
.row-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 var(--feed-pad, 14px) 10px;
}
.row-head .ico {
  font-size: 15px;
  line-height: 1;
}
.row-head h3 {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .3px;
  line-height: 1.2;
}
.row-head .sub {
  margin-left: 4px;
  font-size: 11px;
  color: #7d8296;
}

/* 左侧空档固定在 row-body，横滑卷不动，所有分类与捕鱼对齐 */
.row-body {
  padding-left: var(--feed-pad, 14px);
}
.h-scroll {
  display: flex;
  gap: var(--tile-gap, 10px);
  align-items: flex-start;
  overflow-x: auto;
  padding: 2px var(--feed-pad, 14px) 4px 0;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
.h-scroll::-webkit-scrollbar { display: none; }

.h-scroll-marquee {
  scroll-snap-type: none;
  gap: 0;
  padding-left: 0;
  padding-right: 0;
  overflow: hidden;
  overscroll-behavior-x: none;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
  touch-action: pan-y;
}
.h-scroll-marquee:active {
  cursor: grabbing;
}
.h-scroll-marquee .marquee-track {
  display: flex;
  flex-shrink: 0;
  will-change: transform;
}
.h-scroll-marquee .marquee-group {
  display: flex;
  align-items: flex-start;
  gap: var(--tile-gap, 10px);
  padding-left: 0;
  padding-right: var(--tile-gap, 10px);
  flex-shrink: 0;
}

/* 历史：小方图标 */
.tile-hist {
  flex: 0 0 auto;
  width: 72px;
  border: 0;
  padding: 0;
  background: transparent;
  color: #fff;
  scroll-snap-align: start;
}
.tile-hist .cover-wrap {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 14px;
  overflow: hidden;
  background: #1a1b28;
}
.tile-hist .cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}
.tile-hist .cover.on { display: block; }
.tile-hist .cover-wrap,
.tile-desk-icon .cover-wrap {
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.tile-hist .cover.cover-anim,
.tile-desk-icon .cover.cover-anim {
  transition: filter 0.22s ease;
}
@media (hover: hover) {
  .tile-hist.tile-cover-hover .cover-wrap,
  .tile-desk-icon.tile-cover-hover .cover-wrap {
    transform: scale(1.07);
    box-shadow: 0 0 0 2px rgba(255, 196, 64, 0.65), 0 8px 18px rgba(0, 0, 0, 0.35);
  }
  .tile-hist.tile-cover-hover .cover.cover-anim,
  .tile-desk-icon.tile-cover-hover .cover.cover-anim {
    filter: brightness(1.1) saturate(1.08);
  }
  .tile-card.tile-cover-hover {
    transform: scale(1.04);
    box-shadow: 0 0 0 2px rgba(255, 196, 64, 0.55), 0 10px 22px rgba(0, 0, 0, 0.38);
  }
  .tile-card.tile-cover-hover .cover.cover-anim {
    filter: brightness(1.08) saturate(1.06);
  }
}
.tile-hist.tile-inmatch .cover-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.28);
  pointer-events: none;
  z-index: 1;
}
.tile-hist .hist-inplay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  height: 20px;
  line-height: 20px;
  font-size: 10px;
  font-weight: 800;
  color: #ff3b30;
  text-align: center;
  background: rgba(0, 0, 0, 0.68);
  pointer-events: none;
}

/* 热门 / 分类：素材 296×400。一排 3 个撑满后再整体 ×0.9 */
.tile-card {
  position: relative;
  flex: 0 0 auto;
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  line-height: 0;
  --tile-show: min(148px, calc((100vw - var(--feed-pad, 14px) * 2 - var(--tile-gap, 10px) * 2) / 3));
  width: calc(var(--tile-show) * 0.9);
  height: calc(var(--tile-show) * 0.9 * 400 / 296);
  aspect-ratio: 296 / 400;
  border: 0;
  padding: 0;
  border-radius: 14px;
  overflow: hidden;
  background: #1a1020;
  box-shadow: 0 2px 8px rgba(20, 24, 40, .08);
  scroll-snap-align: start;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.tile-card .cover {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  object-position: center;
  display: none;
}
.tile-card .cover.on { display: block; }
.tile-card .cover.cover-anim {
  transition: filter 0.22s ease;
}
.tile-online {
  position: absolute;
  left: 5px;
  top: 6px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 6px 0 2px;
  border-radius: 9px;
  background: rgba(0, 0, 0, 0.48);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 18px;
  pointer-events: none;
  box-sizing: border-box;
}
.tile-online .u {
  width: 14px;
  height: 14px;
  margin-right: 3px;
  flex-shrink: 0;
  border-radius: 50%;
  background: url('../res/image/bg_renshu.png') no-repeat left center;
  background-size: auto 14px;
}
.tile-online .n {
  display: block;
  min-width: 1.2em;
  text-align: left;
  font-variant-numeric: tabular-nums;
}
.tile-slot {
  position: absolute;
  right: 6px;
  top: 6px;
  z-index: 3;
  max-width: 56px;
  height: 18px;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  color: #fff;
  text-align: right;
  text-shadow: 0 1px 2px rgba(0,0,0,.75);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}
.tile-status {
  position: absolute;
  left: 4px;
  right: 4px;
  top: 28%;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  pointer-events: none;
}
.tile-inplay,
.tile-frozen {
  color: #ff3b30;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.15;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}
.tile-inmatch::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.22);
  pointer-events: none;
  z-index: 1;
}

.empty, .err, .loading {
  text-align: center; color: #8b8d9a;
  padding: 36px 12px; font-size: 13px;
}
.err { color: #ff8a80; }
.retry {
  margin-top: 10px; height: 30px; padding: 0 14px;
  border: 0; border-radius: 6px; color: #fff; background: #6a3dff;
}

.mask {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.68);
  z-index: 30;
  align-items: center; justify-content: center;
  padding: 12px 16px 20px;
}
.mask.on { display: flex; }
.auth-wrap {
  width: 100%; max-width: 340px;
  display: flex; flex-direction: column; align-items: center;
}
.auth-card {
  width: 100%;
  border-radius: 18px;
  overflow: hidden;
  background: #2c2e3b;
}
.auth-banner {
  position: relative;
  height: 118px;
  background:
    radial-gradient(circle at 18% 70%, #ffd54f 0 8%, transparent 9%),
    linear-gradient(115deg, #3d8bff 0%, #5b4bff 70%);
  padding: 10px 14px 0;
}
.auth-banner.has-img {
  background-size: cover;
  background-position: center;
}
.auth-banner.has-img .gift,
.auth-banner.has-img .phone,
.auth-banner.has-img .ky,
.auth-banner.has-img h2,
.auth-banner.has-img p { display: none; }
.auth-banner .ky { font-size: 10px; color: #e8f0ff; opacity: .9; }
.auth-banner h2 { margin-top: 10px; font-size: 22px; font-weight: 800; letter-spacing: 1px; color: #fff; }
.auth-banner p { margin-top: 4px; font-size: 11px; color: #dce7ff; }
.auth-banner .gift, .auth-banner .phone {
  position: absolute; pointer-events: none;
}
.auth-banner .gift {
  left: 8px; bottom: 4px; font-size: 42px; line-height: 1;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.25));
}
.auth-banner .phone {
  right: 10px; bottom: 8px; width: 54px; height: 54px;
  border-radius: 14px;
  background: linear-gradient(180deg, #fff, #d7e4ff);
  color: #3d5bff;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 800;
  box-shadow: 0 6px 12px rgba(0,0,0,.2);
}
.auth-body { padding: 12px 14px 0; }
.seg {
  display: flex; border-radius: 8px; overflow: hidden;
  background: #23242e; margin-bottom: 12px;
}
.seg button {
  flex: 1; height: 38px; border: 0;
  background: transparent; color: #c5c7d4; font-size: 14px;
}
.seg button.on { background: #6d3bff; color: #fff; font-weight: 600; }
.field {
  display: flex; align-items: center; gap: 8px;
  height: 42px; margin-bottom: 10px;
  padding: 0 10px;
  border-radius: 8px;
  background: #1e1f28;
  border: 1px solid #3a3c4a;
}
.field .ico { width: 18px; color: #8b8ea0; flex-shrink: 0; display: flex; }
.field input {
  flex: 1; min-width: 0; height: 40px;
  border: 0; background: transparent; color: #fff;
  font-size: 13px; outline: none;
}
.field input::placeholder { color: #6f7386; }
.field .cc {
  color: #c5c7d4; font-size: 13px; flex-shrink: 0;
  background: none; border: 0; padding: 0;
}
.field .sms {
  flex-shrink: 0; height: 28px; padding: 0 8px;
  border: 0; border-radius: 6px;
  background: #6d3bff; color: #fff; font-size: 12px;
}
.field-pwd .pwd-toggle,
.bank-pwd-wrap .pwd-toggle {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #8b8ea0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.field-pwd .pwd-toggle.is-visible,
.bank-pwd-wrap .pwd-toggle.is-visible {
  color: #c5c7d4;
}
.pwd-toggle .pwd-eye-shut {
  display: none;
}
.pwd-toggle.is-visible .pwd-eye-open {
  display: none;
}
.pwd-toggle.is-visible .pwd-eye-shut {
  display: block;
}
.bank-pwd-wrap {
  position: relative;
  margin-bottom: 10px;
}
.bank-pwd-wrap .bank-input {
  margin-bottom: 0;
  padding-right: 46px;
  box-sizing: border-box;
}
.bank-pwd-wrap .pwd-toggle {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
}
.agree {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: #9aa0b5; margin: 4px 0 12px;
}
.agree input { accent-color: #6d3bff; }
.agree a { color: #ff9a3c; text-decoration: none; }
.btn-main {
  width: 100%; height: 42px; border: 0; border-radius: 8px;
  color: #fff; font-size: 16px; font-weight: 600;
  background: #6d3bff;
}
.btn-main:disabled { opacity: .5; }
.btn-outline {
  width: 100%; height: 42px; margin-top: 10px;
  border-radius: 8px; border: 1px solid #6d3bff;
  background: transparent; color: #fff; font-size: 15px;
}
.btn-guest {
  width: 100%; height: 40px; margin-top: 8px;
  border-radius: 8px; border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .06); color: rgba(255, 255, 255, .88);
  font-size: 14px;
}
.btn-guest:disabled { opacity: .5; }
.auth-cs {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; margin: 12px 0 10px;
  border: 0; background: none; color: #9aa0b5; font-size: 13px;
}
.dlbar {
  display: flex; align-items: center; gap: 8px;
  margin: 0 -14px;
  padding: 8px 12px;
  background: #23212f;
  font-size: 12px; color: #c5c7d4;
}
.dlbar .dl {
  margin-left: auto; height: 26px; padding: 0 10px;
  border: 0; border-radius: 6px;
  background: #6d3bff; color: #fff; font-size: 12px;
}
.errline {
  min-height: 18px; padding: 6px 14px 8px;
  font-size: 12px; color: #ff8a80; text-align: center;
}
.auth-top {
  display: none !important;
}
.auth-form-title {
  display: block;
  margin: 0 0 12px;
  text-align: center;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.3px;
  color: #fff;
}
html.is-desktop .auth-form-title {
  display: none;
}
.auth-top-title {
  flex: 1;
  text-align: center;
  font-size: 17px;
  font-weight: 800;
}
.auth-x {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 14px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: transparent;
  color: #fff;
  font-size: 24px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
}
html.is-desktop .mask {
  background: rgba(4, 5, 10, .78);
  padding: calc(var(--app-inset-top, 0px) + 28px) 24px 28px;
  z-index: 50;
}
html.is-desktop .auth-wrap {
  max-width: var(--desk-overlay-w);
  width: 100%;
}
html.is-desktop .auth-card {
  border-radius: var(--desk-modal-r, 16px);
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 20px 56px rgba(0, 0, 0, .52);
  overflow: hidden;
  background: #0b0c12;
}
html.is-desktop .auth-top {
  display: flex !important;
  position: relative;
  top: auto;
  align-items: center;
  justify-content: flex-end;
  height: 48px;
  padding: 0 8px;
  border-radius: 0;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  background: rgba(14, 15, 22, .98);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html.is-desktop .auth-top .auth-top-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  flex: none;
  width: max-content;
  max-width: calc(100% - 96px);
  margin: 0;
  pointer-events: none;
  text-align: center;
}
html.is-desktop .auth-top .pay-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  margin: 0;
  flex: 0 0 40px;
}
html.is-desktop .auth-wrap > .auth-x {
  display: none;
}
html.is-desktop .auth-body {
  padding: 14px 16px 0;
}
.checks {
  display: flex; gap: 16px; margin: 0 0 12px;
  font-size: 12px; color: #9aa0b5;
}
.checks label { display: flex; align-items: center; gap: 4px; }

.toast {
  position: fixed; left: 50%; bottom: 48px; transform: translateX(-50%);
  background: rgba(20,20,30,.92); color: #fff;
  font-size: 13px; padding: 8px 14px; border-radius: 8px;
  pointer-events: none; opacity: 0; transition: opacity .2s;
  z-index: 10010; white-space: nowrap;
}
.toast.on { opacity: 1; }

.hall-spin {
  display: none !important;
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 10020;
  background: transparent;
  pointer-events: none;
}
.hall-spin.on {
  display: block !important;
  pointer-events: auto;
}
.hall-spin.on {
  display: block !important;
}
.hall-spin-box {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  background: rgba(0, 0, 0, 0.45);
  border-radius: 14px;
}
.hall-spin-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 48px;
  height: 48px;
  margin: -24px 0 0 -24px;
  border: 4px solid rgba(255, 255, 255, 0.22);
  border-top-color: #fff;
  border-radius: 50%;
  animation: hall-spin 0.8s linear infinite;
}
@keyframes hall-spin {
  to { transform: rotate(360deg); }
}

#cocosLayer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  pointer-events: none;
  overflow: hidden;
  background: transparent;
  transform: translate3d(100%, 0, 0);
  /* 不用 CSS transition：App WebView 经常直接跳终点；滑入由 JS 驱动 */
}
#cocosLayer.on {
  pointer-events: none;
}
#cocosLayer.in {
  pointer-events: auto;
}
#cocosFrame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
  pointer-events: auto;
}
.pay-page[hidden] { display: none !important; }
.pay-page {
  position: fixed;
  inset: 0;
  z-index: 40;
  background:
    radial-gradient(120% 60% at 50% -10%, #2a1a55 0%, transparent 55%),
    #0b0c12;
  overflow: auto;
  padding-top: var(--app-inset-top, 0px);
  -webkit-overflow-scrolling: touch;
}
.pay-top {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  height: 44px;
  padding: 0 8px;
  background: rgba(11, 12, 18, .92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.pay-back {
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 28px;
  line-height: 40px;
  padding: 0;
  flex-shrink: 0;
  cursor: pointer;
}
.pay-close {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .92);
  font-size: 24px;
  line-height: 1;
  padding: 0;
  flex-shrink: 0;
  cursor: pointer;
  font-family: inherit;
  -webkit-appearance: none;
  appearance: none;
}
.pay-close:hover {
  background: rgba(255, 255, 255, .14);
}
.pay-title {
  flex: 1;
  text-align: center;
  font-size: 17px;
  font-weight: 800;
  margin-right: 40px;
}
html.is-desktop .pay-top .pay-back {
  display: none;
}
html.is-desktop .pay-top .pay-close {
  display: flex;
  align-items: center;
  justify-content: center;
}
html.is-desktop .pay-top .pay-title {
  margin-right: 0;
}
html.is-desktop .pay-top::before {
  content: '';
  width: 40px;
  flex-shrink: 0;
}
.pay-body {
  padding: 16px 16px 32px;
}
.pay-balance {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 52px;
  padding: 0 14px;
  border-radius: 12px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  font-size: 13px;
  color: rgba(255,255,255,.78);
}
.pay-balance .gem {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(145deg, #ffe082 0%, #ffb300 42%, #f57c00 100%);
  box-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.pay-balance strong {
  margin-left: auto;
  font-size: 20px;
  color: #ffd54f;
  font-variant-numeric: tabular-nums;
}
.pay-sec {
  margin: 18px 0 10px;
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,.72);
}
.pay-withdraw-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 4px;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  background: rgba(255,255,255,.06);
  color: #fff;
  font-size: 16px;
}
.pay-withdraw-input::placeholder {
  color: rgba(255,255,255,.38);
}
#withdrawPage .pay-grid {
  grid-template-columns: repeat(3, 1fr);
}
#withdrawPage .pay-pack {
  min-height: 56px;
  padding: 10px 6px;
}
#withdrawPage .pay-pack .g {
  font-size: 15px;
}
.pay-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}
.pay-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 16px 8px;
  text-align: center;
  font-size: 13px;
  color: rgba(255,255,255,.55);
}
.pay-pack .g small {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,213,79,.85);
}
.pay-pack {
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  border-radius: 12px;
  color: #fff;
  padding: 12px 6px 10px;
  min-height: 76px;
}
.pay-pack.on {
  border-color: #ffb300;
  background: rgba(255, 179, 0, .14);
}
.pay-pack .g {
  display: block;
  font-size: 18px;
  font-weight: 800;
  color: #ffd54f;
}
.pay-pack .p {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: rgba(255,255,255,.7);
}
.pay-methods {
  display: flex;
  gap: 10px;
}
.pay-method {
  flex: 1;
  height: 40px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}
.pay-method.on {
  border-color: #6a3dff;
  background: rgba(106, 61, 255, .28);
}
.pay-submit {
  display: block;
  width: 100%;
  height: 44px;
  margin-top: 22px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffca28 0%, #ff8f00 100%);
  color: #3a2200;
  font-size: 16px;
  font-weight: 800;
}
.pay-submit:disabled {
  opacity: .55;
}
.pay-note {
  margin-top: 12px;
  font-size: 12px;
  line-height: 1.5;
  color: #8b8d9a;
  text-align: center;
}
.pay-records-link {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 10px 0;
  border: 0;
  background: transparent;
  color: rgba(255, 213, 79, .88);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}
.pay-records-link:active {
  opacity: .75;
}
.recharge-orders-body {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding-bottom: calc(16px + var(--app-inset-bottom, 0px));
}
.recharge-records {
  flex: 1;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.recharge-records-loading,
.recharge-records-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: min(280px, 42vh);
  color: rgba(255, 255, 255, .45);
  font-size: 14px;
  line-height: 1.6;
  text-align: center;
  padding: 24px 16px;
}
.recharge-rec {
  padding: 12px 12px 10px;
  margin-bottom: 10px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(0, 0, 0, .22);
}
.recharge-rec:last-child {
  margin-bottom: 0;
}
.recharge-rec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.recharge-rec-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
}
.recharge-rec.ro-st-0 .recharge-rec-badge {
  color: #ffb74d;
  background: rgba(255, 183, 77, .14);
  border: 1px solid rgba(255, 183, 77, .32);
}
.recharge-rec.ro-st-1 .recharge-rec-badge {
  color: #a5d6a7;
  background: rgba(129, 199, 132, .14);
  border: 1px solid rgba(129, 199, 132, .32);
}
.recharge-rec.ro-st-2 .recharge-rec-badge,
.recharge-rec.ro-st-3 .recharge-rec-badge {
  color: #ef9a9a;
  background: rgba(229, 115, 115, .12);
  border: 1px solid rgba(229, 115, 115, .28);
}
.recharge-rec-credit {
  font-size: 20px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #ffd54f;
  letter-spacing: .02em;
}
.recharge-rec-credit small {
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 213, 79, .78);
}
.recharge-rec-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: rgba(255, 255, 255, .72);
}
.recharge-rec-price {
  font-weight: 800;
  color: #fff;
}
.recharge-rec-dot {
  opacity: .45;
}
.recharge-rec-pay {
  font-weight: 600;
}
.recharge-rec-bonus {
  margin-top: 4px;
  font-size: 12px;
  color: rgba(255, 213, 79, .75);
}
.recharge-rec-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, .06);
  font-size: 11px;
  color: rgba(255, 255, 255, .42);
}
.recharge-rec-time {
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.recharge-rec-no {
  text-align: right;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
  letter-spacing: .02em;
  word-break: break-all;
  max-width: 58%;
}
.recharge-rec-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.recharge-rec-go {
  flex: 1;
  height: 36px;
  border: 0;
  border-radius: 8px;
  background: linear-gradient(180deg, #ffca28 0%, #ff8f00 100%);
  color: #3a2200;
  font-size: 13px;
  font-weight: 800;
}
.recharge-rec-go:disabled {
  opacity: .55;
}
.recharge-rec-sync {
  flex: 1;
  height: 36px;
  border: 1px solid rgba(106, 61, 255, .45);
  border-radius: 8px;
  background: rgba(106, 61, 255, .18);
  color: #d1c4e9;
  font-size: 13px;
  font-weight: 700;
}
.recharge-rec-sync:disabled {
  opacity: .55;
}
.recharge-records-more {
  flex-shrink: 0;
  display: block;
  width: 100%;
  height: 40px;
  margin-top: 12px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 10px;
  background: rgba(255, 255, 255, .06);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}
.recharge-records-more:disabled {
  opacity: .5;
}
.recharge-records-more[hidden] {
  display: none !important;
}
.pay-wait[hidden] { display: none !important; }
.pay-wait [hidden],
.pay-wait .pay-submit[hidden],
.pay-wait-link[hidden] {
  display: none !important;
}
.pay-wait {
  position: fixed;
  inset: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(11, 12, 18, .96);
  padding: 24px 20px calc(24px + var(--app-inset-bottom, 0px));
  box-sizing: border-box;
}
.pay-wait-inner {
  width: min(360px, 100%);
  text-align: center;
}
.pay-wait-spin {
  width: 56px;
  height: 56px;
  margin: 0 auto 20px;
  border: 3px solid rgba(255, 255, 255, .16);
  border-top-color: #ffca28;
  border-radius: 50%;
  animation: hall-spin 0.8s linear infinite;
}
.pay-wait-ok {
  width: 56px;
  height: 56px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: #1f8a4c;
  color: #fff;
  font-size: 32px;
  line-height: 56px;
  font-weight: 700;
}
.pay-wait-title {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 800;
  color: #fff;
}
.pay-wait-sub,
.pay-wait-meta {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: #8b8d9a;
}
.pay-wait-meta {
  margin-top: 10px;
  word-break: break-all;
}
.pay-wait .pay-submit {
  margin-top: 28px;
}
.pay-wait-link,
.pay-wait-cancel {
  display: block;
  width: 100%;
  height: 44px;
  margin-top: 10px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}
.pay-wait-link {
  border: 1px solid rgba(255, 255, 255, .16);
  background: transparent;
  color: #fff;
}
.pay-wait-cancel {
  border: 0;
  background: transparent;
  color: #8b8d9a;
}
html.is-desktop .pay-wait {
  border-radius: 0;
}
html.is-desktop .pay-wait-inner {
  width: var(--desk-overlay-w);
  max-width: calc(100vw - 48px);
}

.settings-page[hidden] { display: none !important; }
.settings-body {
  padding-top: 8px;
}
.settings-profile {
  margin-bottom: 18px;
  padding: 16px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1);
}
.settings-name {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: .3px;
  margin-bottom: 8px;
}
.settings-meta {
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255, 255, 255, .72);
  word-break: break-all;
}
.settings-meta + .settings-meta {
  margin-top: 4px;
}
.settings-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.settings-row {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .05);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.settings-row:active {
  background: rgba(255, 255, 255, .1);
}
.settings-row-danger {
  color: #ff6b6b;
  border-color: rgba(255, 107, 107, .35);
  background: rgba(255, 80, 80, .08);
}
.settings-row[hidden] {
  display: none !important;
}
.settings-foot {
  margin-top: 20px;
  font-size: 11px;
  color: #6b6e7a;
  text-align: center;
}

.bank-page[hidden] { display: none !important; }
.bank-balances {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
}
.bank-bal {
  flex: 1;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
}
.bank-bal span {
  display: block;
  font-size: 12px;
  color: rgba(255,255,255,.62);
  margin-bottom: 6px;
}
.bank-bal strong {
  font-size: 18px;
  font-weight: 800;
}
.bank-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
}
.bank-tab {
  flex: 1;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.7);
  font-size: 13px;
  font-weight: 700;
}
.bank-tab.on {
  background: rgba(255, 193, 7, .18);
  border-color: rgba(255, 193, 7, .45);
  color: #ffe082;
}
/* 各 Tab 共用固定内容区高度，避免存入/取出/流水/密码切换时弹窗高度跳动 */
.bank-pane-viewport {
  --bank-pane-h: 400px;
  min-height: var(--bank-pane-h);
}
.bank-pane[hidden] { display: none !important; }
.bank-pane:not([hidden]) {
  display: flex;
  flex-direction: column;
  min-height: var(--bank-pane-h);
  box-sizing: border-box;
}
.bank-pane:not([hidden]) .pay-submit {
  margin-top: auto;
}
.bank-pane:not([hidden]) .bank-records {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.bank-hint {
  font-size: 13px;
  color: rgba(255,255,255,.7);
  line-height: 1.5;
  margin-bottom: 10px;
}
.bank-bind-security-tip {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: #ff5252;
  text-align: center;
}
.bank-input {
  display: block;
  width: 100%;
  height: 44px;
  margin-bottom: 10px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.28);
  color: #fff;
  font-size: 15px;
}
.bank-input-inline {
  flex: 1;
  min-width: 0;
  margin-bottom: 0;
}
.bank-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.bank-chip {
  flex: 1 1 calc(20% - 8px);
  min-width: 56px;
  height: 36px;
  padding: 0 4px;
  border-radius: 8px;
  border: 1px solid rgba(255, 193, 7, .45);
  background: linear-gradient(180deg, rgba(255, 210, 80, .35) 0%, rgba(180, 130, 20, .25) 100%);
  color: #ffe082;
  font-size: 13px;
  font-weight: 800;
}
.bank-chip-all {
  color: #fff8e1;
}
.bank-field {
  margin-bottom: 12px;
}
.bank-label {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #e6c86e;
  margin-bottom: 8px;
}
.bank-field-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.bank-clear {
  flex-shrink: 0;
  height: 44px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid rgba(255, 193, 7, .45);
  background: rgba(255, 193, 7, .12);
  color: #ffe082;
  font-size: 14px;
  font-weight: 700;
}
.bank-records {
  min-height: 0;
  font-size: 13px;
  color: rgba(255,255,255,.82);
  line-height: 1.5;
}
.bank-records-loading,
.bank-records-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  color: rgba(255,255,255,.45);
  font-size: 14px;
}
.bank-rec {
  padding: 12px 12px 10px;
  margin-bottom: 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(0,0,0,.22);
}
.bank-rec:last-child {
  margin-bottom: 0;
}
.bank-rec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.bank-rec-type {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
}
.bank-rec-save .bank-rec-type {
  color: #ffe082;
  background: rgba(255, 193, 7, .16);
  border: 1px solid rgba(255, 193, 7, .35);
}
.bank-rec-take .bank-rec-type {
  color: #80deea;
  background: rgba(0, 188, 212, .14);
  border: 1px solid rgba(0, 188, 212, .32);
}
.bank-rec-amt {
  font-size: 18px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}
.bank-rec-save .bank-rec-amt { color: #ffd54f; }
.bank-rec-take .bank-rec-amt { color: #4dd0e1; }
.bank-rec-bal {
  padding: 8px 0 6px;
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.bank-rec-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 3px 0;
  font-size: 12px;
}
.bank-rec-k {
  flex-shrink: 0;
  color: rgba(255,255,255,.5);
}
.bank-rec-v {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: rgba(255,255,255,.88);
  word-break: break-all;
}
.bank-rec-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
  font-size: 11px;
  color: rgba(255,255,255,.42);
}
.bank-rec-scene {
  max-width: 55%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bank-rec-time {
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.bank-links {
  margin: 4px 0 12px;
  text-align: right;
}
.bank-link {
  padding: 0;
  border: 0;
  background: none;
  color: #80cbc4;
  font-size: 13px;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}
.bank-links .bank-link + .bank-link {
  margin-left: 14px;
}
.bank-sms {
  flex-shrink: 0;
  height: 44px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 193, 7, .45);
  background: rgba(255, 193, 7, .12);
  color: #ffe082;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
.bank-sms:disabled {
  opacity: .5;
}

.cs-page[hidden] { display: none !important; }
.cs-page {
  position: fixed;
  inset: 0;
  z-index: 41;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(120% 60% at 50% -10%, #2a1a55 0%, transparent 55%),
    #0b0c12;
  padding-top: var(--app-inset-top, 0px);
}
.cs-tabs {
  display: flex;
  gap: 8px;
  padding: 8px 16px 0;
  flex-shrink: 0;
}
.cs-tab {
  flex: 1;
  height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.72);
  font-size: 14px;
  font-weight: 700;
}
.cs-tab.on {
  border-color: #6a3dff;
  background: rgba(106, 61, 255, .28);
  color: #fff;
}
.cs-pane[hidden] { display: none !important; }
.cs-pane {
  flex: 1;
  min-height: 0;
  display: none;
  flex-direction: column;
}
.cs-pane.on {
  display: flex;
}
.cs-list {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 12px 16px 8px;
  -webkit-overflow-scrolling: touch;
}
.cs-empty {
  margin-top: 48px;
  text-align: center;
  color: #8b8d9a;
  font-size: 13px;
  line-height: 1.6;
}
.cs-bubble {
  max-width: 82%;
  margin: 8px 0;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.5;
  word-break: break-word;
}
.cs-bubble .t {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  opacity: .55;
}
.cs-bubble.user {
  margin-left: auto;
  background: linear-gradient(180deg, #6a3dff 0%, #4b2ad4 100%);
  color: #fff;
}
.cs-bubble.staff {
  margin-right: auto;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  color: #eee;
}
.cs-leave-card {
  display: block;
  width: 100%;
  margin-bottom: 12px;
  padding: 12px;
  border-radius: 12px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  color: #eee;
  font-size: 14px;
  line-height: 1.5;
  word-break: break-word;
  box-sizing: border-box;
}
.cs-leave-block {
  display: block;
  width: 100%;
}
.cs-leave-block + .cs-leave-block {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed rgba(255,255,255,.14);
}
.cs-leave-answer {
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(106, 61, 255, .12);
  border: 1px solid rgba(106, 61, 255, .35);
}
.cs-leave-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 12px;
}
.cs-leave-tag {
  font-weight: 700;
  color: rgba(255,255,255,.82);
}
.cs-leave-time {
  flex-shrink: 0;
  font-size: 11px;
  color: #8b8d9a;
}
.cs-leave-txt {
  display: block;
  white-space: pre-wrap;
  word-break: break-word;
  color: #eee;
}
.cs-leave-answer .cs-leave-tag {
  color: #c4b5fd;
}
.cs-composer,
.cs-leave-form {
  flex-shrink: 0;
  padding: 8px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: rgba(11, 12, 18, .92);
}
.cs-composer {
  display: flex;
  gap: 8px;
  align-items: center;
}
.cs-composer input,
.cs-leave-form input,
.cs-leave-form textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: #fff;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
}
.cs-leave-form textarea {
  resize: none;
  min-height: 88px;
  margin-bottom: 8px;
}
.cs-leave-form input {
  margin-bottom: 10px;
}
.cs-composer input {
  flex: 1;
  min-width: 0;
}
.cs-composer button,
.cs-leave-form button {
  flex-shrink: 0;
  height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(180deg, #ffca28 0%, #ff8f00 100%);
  color: #3a2200;
  font-size: 14px;
  font-weight: 800;
}
.cs-leave-form button {
  width: 100%;
}
.cs-composer button:disabled,
.cs-leave-form button:disabled {
  opacity: .55;
}

/* 商行充值：全屏与客服同壳；顶栏下横向商行卡片，下方客服式会话 */
.shop-page {
  z-index: 45;
}

/* 横版游戏局内商行（JS 打 shop-landscape-ui）：全屏 + 左商行右聊天，不旋转 */
.shop-page.shop-landscape-ui:not([hidden]) {
  position: fixed;
  inset: 0;
  z-index: 10051;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  min-height: 100vh;
  min-height: 100dvh;
  padding: var(--app-inset-top, 0px) 0 0;
  box-sizing: border-box;
  transform: none;
  background:
    radial-gradient(120% 60% at 50% -10%, #2a1a55 0%, transparent 55%),
    #0b0c12;
  overflow: hidden;
}
.shop-page.shop-landscape-ui > .pay-top,
.shop-page.shop-landscape-ui > .shop-recharge-user,
.shop-page.shop-landscape-ui > .shop-body {
  width: 100%;
  max-width: none;
  margin: 0;
  flex-shrink: 0;
  box-sizing: border-box;
}
.shop-page.shop-landscape-ui > .shop-recharge-user {
  background: #12131c;
  border-bottom: 1px solid rgba(0, 0, 0, .45);
}
.shop-page.shop-landscape-ui > .shop-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
}
.shop-page.shop-landscape-ui .shop-body > .shop-strip {
  grid-template-columns: 1fr;
  flex: 0 0 clamp(148px, 28%, 260px);
  width: clamp(148px, 28%, 260px);
  max-width: 38%;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border-bottom: none;
  border-right: 1px solid rgba(0, 0, 0, .42);
  padding: 10px 8px 12px 10px;
  background: linear-gradient(180deg, #141622 0%, #0b0c12 100%);
}
.shop-page.shop-landscape-ui .shop-body > .shop-strip .shop-item.on::after {
  left: auto;
  right: -7px;
  bottom: 50%;
  margin-left: 0;
  margin-bottom: -7px;
  border: 7px solid transparent;
  border-left-color: #6a3dff;
  border-top-color: transparent;
}
.shop-page.shop-landscape-ui .shop-body > .cs-pane.on {
  flex: 1;
  min-width: 0;
  min-height: 0;
  margin: 0;
  border: none;
  border-left: 1px solid rgba(0, 0, 0, .38);
  border-radius: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background:
    radial-gradient(120% 55% at 50% 0%, rgba(42, 26, 85, .55) 0%, transparent 58%),
    #0b0c12;
}
.shop-page.shop-landscape-ui .cs-composer input {
  font-size: 16px;
}
.shop-recharge-user {
  flex-shrink: 0;
  padding: 10px 16px 12px;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(255, 255, 255, .88);
  background: rgba(0, 0, 0, .22);
  border-bottom: 1px solid rgba(0, 0, 0, .35);
}
.shop-recharge-user strong {
  color: #ffd54a;
  font-weight: 600;
}
.shop-strip {
  --shop-row-h: 84px;
  flex-shrink: 0;
  display: grid;
  gap: 10px;
  padding: 8px 16px 14px;
  overflow-x: hidden;
  overflow-y: hidden;
  border-bottom: 1px solid rgba(0, 0, 0, .38);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .05);
}
.shop-strip.cols-2 {
  grid-template-columns: 1fr 1fr;
}
.shop-strip.cols-3 {
  grid-template-columns: 1fr 1fr 1fr;
}
.shop-strip.is-scroll {
  max-height: calc(var(--shop-row-h) * 2 + 10px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.shop-strip.cols-3 .shop-item-av,
.shop-strip.cols-3 .shop-item-av img {
  width: 40px;
  height: 40px;
}
.shop-strip.cols-3 .shop-item-name {
  font-size: 12px;
}
.shop-strip.cols-3 .shop-item-sub {
  font-size: 9px;
  line-height: 1.3;
}
.shop-item-ph {
  opacity: .42;
  pointer-events: none;
  border-style: dashed;
  cursor: default;
}
.shop-item-ph .shop-item-name {
  color: rgba(255, 255, 255, .55);
}
.shop-item {
  position: relative;
  display: flex;
  gap: 8px;
  align-items: flex-start;
  width: 100%;
  min-width: 0;
  min-height: 76px;
  box-sizing: border-box;
  padding: 8px 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .05);
  color: #fff;
  text-align: left;
  cursor: pointer;
}
.shop-item.on {
  border-color: #6a3dff;
  background: rgba(106, 61, 255, .22);
  box-shadow: inset 0 0 0 1px rgba(106, 61, 255, .35);
}
.shop-item.on::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -8px;
  margin-left: -7px;
  border: 7px solid transparent;
  border-top-color: #6a3dff;
}
.shop-item-av {
  position: relative;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
}
.shop-item-av img {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(0, 0, 0, .25);
}
.shop-item-badge {
  position: absolute;
  left: 50%;
  bottom: -4px;
  transform: translateX(-50%);
  min-width: 28px;
  padding: 0 4px;
  height: 16px;
  line-height: 16px;
  border-radius: 8px;
  background: linear-gradient(180deg, #ffca28 0%, #ff8f00 100%);
  color: #3a2200;
  font-size: 10px;
  font-weight: 800;
  text-align: center;
}
.shop-item-meta {
  flex: 1;
  min-width: 0;
}
.shop-item-name {
  font-size: 13px;
  font-weight: 800;
  color: #ffd54f;
  margin-bottom: 4px;
}
.shop-item-sub {
  font-size: 10px;
  line-height: 1.35;
  color: rgba(255, 255, 255, .62);
  word-break: break-all;
}
.shop-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.shop-page .shop-body > .cs-pane.on {
  flex: 1;
  min-height: 0;
  margin: 0 12px;
  border: 1px solid rgba(0, 0, 0, .32);
  border-top: none;
  border-radius: 0 0 12px 12px;
  background: rgba(0, 0, 0, .1);
  overflow: hidden;
}
.shop-page .cs-composer.is-idle {
  opacity: .72;
}

/* 商行：桌面 / 局内横版 — 左列表 + 右会话（在线消息式） */
.shop-strip.layout-split {
  grid-template-columns: 1fr;
  --shop-row-h: auto;
  flex: 0 0 248px;
  width: 248px;
  max-width: 34%;
  align-self: stretch;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border-bottom: none;
  border-right: 1px solid rgba(0, 0, 0, .42);
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, .04);
}
.shop-strip.layout-split.is-scroll {
  max-height: none;
}
.shop-strip.layout-split .shop-item {
  min-height: 72px;
}
.shop-strip.layout-split .shop-item.on::after {
  left: auto;
  right: -7px;
  bottom: 50%;
  margin-left: 0;
  margin-bottom: -7px;
  border: 7px solid transparent;
  border-left-color: #6a3dff;
  border-top-color: transparent;
}
html.is-desktop .shop-page > .pay-top,
html.is-desktop .shop-page > .shop-recharge-user,
html.is-desktop .shop-page > .shop-body {
  width: var(--desk-shop-split-w);
  max-width: calc(100vw - 28px);
}
html.is-desktop .shop-page > .shop-recharge-user,
html.ingame-pay-land .shop-page > .shop-recharge-user {
  border-left: 1px solid rgba(255, 255, 255, .1);
  border-right: 1px solid rgba(255, 255, 255, .1);
  border-bottom: 1px solid rgba(0, 0, 0, .45);
  margin: 0;
  background: #12131c;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}
html.is-desktop .shop-page > .shop-body,
html.ingame-pay-land .shop-page > .shop-body {
  flex: 0 1 auto;
  flex-direction: row;
  align-items: stretch;
  min-height: min(360px, 52vh);
  max-height: var(--desk-shop-modal-max-h, var(--ingame-shop-modal-max-h));
  margin: 0;
  border: 1px solid rgba(255, 255, 255, .1);
  border-top: none;
  border-radius: 0 0 var(--desk-modal-r, var(--ingame-land-modal-r)) var(--desk-modal-r, var(--ingame-land-modal-r));
  background: #0b0c12;
  box-shadow: 0 20px 56px rgba(0, 0, 0, .52);
  overflow: hidden;
}
html.is-desktop .shop-page .shop-body > .shop-strip.layout-split,
html.ingame-pay-land .shop-page .shop-body > .shop-strip.layout-split {
  padding: 10px 8px 12px 10px;
  background: linear-gradient(180deg, #141622 0%, #0b0c12 100%);
}
html.is-desktop .shop-page .shop-body > .cs-pane.on,
html.ingame-pay-land .shop-page .shop-body > .cs-pane.on {
  flex: 1;
  min-width: 0;
  min-height: 0;
  max-height: none;
  margin: 0;
  border: none;
  border-left: 1px solid rgba(0, 0, 0, .38);
  border-radius: 0;
  background:
    radial-gradient(120% 55% at 50% 0%, rgba(42, 26, 85, .55) 0%, transparent 58%),
    #0b0c12;
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, .04);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
html.is-desktop .shop-page .shop-body > .cs-pane .cs-list,
html.ingame-pay-land .shop-page .shop-body > .cs-pane .cs-list {
  flex: 1;
  min-height: 0;
}
html.is-desktop .shop-page .shop-body > .cs-pane .cs-list.shop-chat-idle,
html.ingame-pay-land .shop-page .shop-body > .cs-pane .cs-list.shop-chat-idle {
  display: flex;
  align-items: center;
  justify-content: center;
}
html.is-desktop .shop-page .shop-body > .cs-pane .cs-empty,
html.ingame-pay-land .shop-page .shop-body > .cs-pane .cs-empty {
  margin: 0;
  font-size: 13px;
  font-weight: 400;
  padding: 10px 16px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1);
  color: #8b8d9a;
  box-shadow: none;
}

.banner-desk-triple {
  display: none;
}
.banner-desk-row {
  display: block;
}

/* 桌面浏览器：顶栏独占一行 + Banner 三栏 + 分区游戏网格（不改手机版） */
html.is-desktop {
  --desk-max-w: 1360px;
  --desk-overlay-w: min(720px, calc(100vw - 48px));
  --desk-shop-split-w: min(920px, calc(100vw - 48px));
  --desk-shop-modal-max-h: min(78vh, 560px);
  --desk-banner-h: min(260px, calc((min(100vw, var(--desk-max-w)) - 40px) * 400 / 750));
}
html.is-desktop body {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}
html.is-desktop .hero-bar {
  position: relative;
  flex: 0 0 auto;
  z-index: 30;
  pointer-events: auto;
  width: 100%;
  background:
    linear-gradient(180deg, #1a1730 0%, #12121c 38%, #0c0d12 100%);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .08),
    0 10px 36px rgba(0, 0, 0, .55),
    0 4px 18px rgba(42, 26, 85, .35);
}
html.is-desktop .hero-bar::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(106, 61, 255, .45) 22%,
    rgba(255, 154, 60, .35) 50%,
    rgba(106, 61, 255, .4) 78%,
    transparent 100%
  );
  opacity: .85;
}
html.is-desktop .hero-bar .top {
  position: relative;
  z-index: 1;
  max-width: var(--desk-max-w);
  margin: 0 auto;
  width: 100%;
  height: 52px;
  padding: 0 20px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, 0) 72%);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html.is-desktop .hero-bar.is-solid .top {
  background: linear-gradient(180deg, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, 0) 72%);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html.is-desktop .hero-bar .logo .brand {
  font-size: 18px;
  letter-spacing: 0.6px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
}
html.is-desktop .hero-bar .nick {
  text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}
html.is-desktop .hero-bar .icon-btn {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35));
}
html.is-desktop .hero-bar .wallet,
html.is-desktop .hero-bar .recharge-btn {
  background: rgba(0, 0, 0, .42);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .12),
    0 2px 8px rgba(0, 0, 0, .35);
}
html.is-desktop .hero-bar .notice-bar {
  position: relative;
  z-index: 1;
  max-width: calc(var(--desk-max-w) - 40px);
  margin: 0 auto 12px;
  background: rgba(0, 0, 0, .32);
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}
html.is-desktop .hero-bar.is-solid .notice-bar {
  background: rgba(0, 0, 0, .32);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html.is-desktop .page {
  flex: 1;
  min-height: 0;
  width: 100%;
  max-width: none;
  margin: 0;
  height: auto;
}
html.is-desktop .hero {
  max-width: var(--desk-max-w);
  margin: 0 auto;
  padding: 14px 20px 0;
  box-sizing: border-box;
}
html.is-desktop .banner-wrap {
  padding-left: 0;
  padding-right: 0;
}
html.is-desktop #mainFeed {
  max-width: var(--desk-max-w);
  margin: 0 auto;
}
html.is-desktop .feed {
  --feed-pad: 20px;
  padding-top: 4px;
}
html.is-desktop .banner-desk-row {
  display: block;
}
html.is-desktop .banner-desk-row .carousel {
  display: none;
}
html.is-desktop .banner-desk-triple {
  --desk-banner-gap: 10px;
  --banner-radius: 14px;
  display: block;
  width: 100%;
  overflow: hidden;
}
html.is-desktop .banner-desk-triple.is-static {
  display: flex;
  align-items: stretch;
  gap: var(--desk-banner-gap);
}
html.is-desktop .banner-desk-triple.is-static .banner {
  flex: 1;
  min-width: 0;
}
html.is-desktop .banner-desk-track {
  display: flex;
  align-items: stretch;
  gap: var(--desk-banner-gap);
  width: 100%;
  min-width: 100%;
  transition: transform .45s ease;
  will-change: transform;
}
html.is-desktop .banner-desk-track .banner {
  flex: 0 0 calc((100% - 2 * var(--desk-banner-gap)) / 3);
  max-width: calc((100% - 2 * var(--desk-banner-gap)) / 3);
  box-sizing: border-box;
}
html.is-desktop .banner-desk-triple .banner {
  height: var(--desk-banner-h);
  min-height: 160px;
  border-radius: var(--banner-radius, 14px);
  overflow: hidden;
  aspect-ratio: 750 / 400;
  box-shadow:
    0 4px 14px rgba(0, 0, 0, .22),
    inset 0 0 0 1px rgba(255, 255, 255, .07);
}
html.is-desktop .row-sec {
  padding-top: 12px;
}
html.is-desktop .row-head {
  padding-bottom: 12px;
}
html.is-desktop .row-head h3 {
  font-size: 16px;
}
html.is-desktop .row-sec-hist .h-scroll {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: var(--tile-gap, 10px);
  padding: 2px var(--feed-pad, 20px) 6px 0;
}
html.is-desktop .row-sec:not(.row-sec-hist) .h-scroll {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  gap: 12px;
  overflow: visible;
  padding: 0 var(--feed-pad, 20px) 8px 0;
  scroll-snap-type: none;
}
html.is-desktop .row-sec:not(.row-sec-hist) .tile-card {
  width: 100%;
  max-width: none;
  scroll-snap-align: unset;
}

/* 桌面：左大卡 + 右 2×3 紧挨排列（禁止 1fr 把图标顶到最右侧） */
html.is-desktop .desk-hall {
  --desk-icon-gap: 12px;
  /* 行宽 ≈ 0.74H + 右(1.5H+0.5×格距) + 中缝12 → H=(行宽-12-0.5×格距)/2.24 */
  --desk-row-w: calc(min(100vw, var(--desk-max-w)) - 2 * var(--feed-pad, 20px));
  --desk-block-h: clamp(
    380px,
    calc((var(--desk-row-w) - 12px - 0.5 * var(--desk-icon-gap)) / 2.24),
    720px
  );
  --desk-icon-cell: calc((var(--desk-block-h) - var(--desk-icon-gap)) / 2);
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: flex-start;
  gap: 12px;
  padding: 8px var(--feed-pad, 20px) 4px;
  min-height: 0;
}
html.is-desktop .desk-feature {
  flex: 0 0 auto;
  display: flex;
  height: var(--desk-block-h);
  min-width: 0;
}
html.is-desktop .desk-feature .tile-card.tile-featured {
  flex: 0 0 auto;
  height: 100%;
  width: calc(var(--desk-block-h) * 296 / 400);
  min-height: 0;
  max-height: none;
  max-width: none;
  aspect-ratio: 296 / 400;
}
html.is-desktop .desk-feature-empty {
  width: calc(var(--desk-block-h) * 296 / 400);
  height: 100%;
  border-radius: 14px;
  border: 1px dashed rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .03);
}
html.is-desktop .desk-grid {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(3, var(--desk-icon-cell));
  grid-template-rows: repeat(2, var(--desk-icon-cell));
  gap: var(--desk-icon-gap);
  width: calc(3 * var(--desk-icon-cell) + 2 * var(--desk-icon-gap));
  height: var(--desk-block-h);
  box-sizing: border-box;
}
html.is-desktop .desk-grid .tile-desk-icon {
  width: var(--desk-icon-cell);
  height: var(--desk-icon-cell);
  min-height: 0;
  max-width: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
html.is-desktop .desk-grid .tile-desk-icon .cover-wrap {
  width: 100%;
  height: 100%;
  max-height: none;
  aspect-ratio: 1;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1a1b28;
}
html.is-desktop .desk-grid .tile-desk-icon .cover {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
html.is-desktop .desk-grid .tile-desk-icon .cover.on {
  display: block;
}
html.is-desktop .row-sec-desk-more .h-scroll {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  gap: 12px;
  overflow: visible;
  padding: 0 var(--feed-pad, 20px) 8px 0;
}
html.is-desktop .row-sec-desk-more .tile-card {
  width: 100%;
  max-width: none;
}

/* 桌面：充值 / 客服 / 商行 / 设置 — 居中弹窗（非顶底撑满） */
html.is-desktop .pay-page,
html.is-desktop .cs-page,
html.is-desktop .settings-page,
html.is-desktop .bank-page {
  --desk-modal-r: 16px;
  --desk-modal-max-h: min(78vh, 680px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: calc(var(--app-inset-top, 0px) + 28px) 24px 28px;
  box-sizing: border-box;
  background: rgba(4, 5, 10, .78);
  overflow: auto;
}
html.is-desktop .pay-page .pay-top,
html.is-desktop .pay-page .pay-body,
html.is-desktop .settings-page .pay-top,
html.is-desktop .settings-page .pay-body,
html.is-desktop .bank-page .pay-top,
html.is-desktop .bank-page .pay-body,
html.is-desktop .cs-page > .pay-top,
html.is-desktop .cs-page > .cs-tabs,
html.is-desktop .cs-page > .cs-pane,
html.is-desktop .shop-page > .pay-top,
html.is-desktop .shop-page > .shop-recharge-user,
html.is-desktop .shop-page > .shop-body {
  width: var(--desk-overlay-w);
  max-width: calc(100vw - 48px);
  box-sizing: border-box;
  flex-shrink: 0;
}
html.is-desktop .shop-page > .pay-top,
html.is-desktop .shop-page > .shop-recharge-user,
html.is-desktop .shop-page > .shop-body {
  width: var(--desk-shop-split-w);
}
html.is-desktop .pay-page .pay-top,
html.is-desktop .settings-page .pay-top,
html.is-desktop .bank-page .pay-top,
html.is-desktop .cs-page > .pay-top,
html.is-desktop .shop-page > .pay-top {
  position: relative;
  top: auto;
  border: 1px solid rgba(255, 255, 255, .1);
  border-bottom: none;
  border-radius: var(--desk-modal-r) var(--desk-modal-r) 0 0;
  background: rgba(14, 15, 22, .98);
}
html.is-desktop .pay-page .pay-body,
html.is-desktop .settings-page .pay-body,
html.is-desktop .bank-page .pay-body {
  flex: 0 1 auto;
  max-height: var(--desk-modal-max-h);
  overflow: auto;
  border: 1px solid rgba(255, 255, 255, .1);
  border-top: none;
  border-radius: 0 0 var(--desk-modal-r) var(--desk-modal-r);
  background:
    radial-gradient(120% 60% at 50% -10%, #2a1a55 0%, transparent 55%),
    #0b0c12;
  box-shadow: 0 20px 56px rgba(0, 0, 0, .52);
}
html.is-desktop .cs-page > .cs-tabs {
  border-left: 1px solid rgba(255, 255, 255, .1);
  border-right: 1px solid rgba(255, 255, 255, .1);
  border-top: none;
  border-bottom: none;
  background: #0b0c12;
}
html.is-desktop .cs-page > .cs-pane.on {
  flex: 0 1 auto;
  min-height: min(380px, 52vh);
  max-height: var(--desk-modal-max-h);
  margin: 0;
  border: 1px solid rgba(255, 255, 255, .1);
  border-top: none;
  border-radius: 0 0 var(--desk-modal-r) var(--desk-modal-r);
  background:
    radial-gradient(120% 60% at 50% -10%, #2a1a55 0%, transparent 55%),
    #0b0c12;
  box-shadow: 0 20px 56px rgba(0, 0, 0, .52);
  overflow: hidden;
}
html.is-desktop .bank-pane-viewport {
  --bank-pane-h: min(380px, 52vh);
}
html.is-desktop .settings-page .pay-body {
  max-height: min(70vh, 560px);
}
html.is-desktop .recharge-orders-page .pay-body {
  display: flex;
  flex-direction: column;
  max-height: min(72vh, 580px);
  overflow: hidden;
  padding-top: 12px;
  padding-bottom: 14px;
}
html.is-desktop .pay-page .pay-body {
  max-height: min(82vh, 640px);
}
html.ingame-pay-land .recharge-orders-page .pay-body {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-top: 12px;
  padding-bottom: 12px;
  background:
    radial-gradient(120% 60% at 50% -10%, #2a1a55 0%, transparent 55%),
    #0b0c12;
}