/* =============================================================
   V587 Lobby — 主首页（手机壳风格）
   桌面端居中显示 440px 手机壳；移动端直接全屏。
   ============================================================= */

/* —— 整页背景（占满视口，无 padding）—— */
.lobby-page {
  height: 100vh;
  background: #FADEA6;   /* 壳外大背景：淡暖黄 */
  display: flex;
  align-items: stretch;        /* 上下撑满 */
  justify-content: center;
  padding: 0;                  /* 顶到顶，底到底 */
}

/* —— 应用容器（PC 端居中固定宽度，上下顶满）—— */
.phone-shell {
  position: relative;
  width: 100%;
  max-width: 440px;
  height: 100vh;               /* 占满视口高度 */
  background: #0b1430;         /* 壳内底色：深蓝(防切页/载入时米白闪屏；内容仍黑金) */
  border-left: 1px solid var(--border-2);
  border-right: 1px solid var(--border-2);
  border-radius: 0;
  box-shadow: none;   /* 取消壳体黑色阴影 */
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* 移动端：直接全屏 */
@media (max-width: 480px) {
  .phone-shell {
    border: none;
    box-shadow: none;
  }
}

/* ===================================================
   顶栏 TopBar
   =================================================== */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  padding: 0 16px;
  background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg-1) 100%);
  border-bottom: 1px solid var(--border-1);
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}
.topbar .left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.topbar .menu-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid transparent;
  border-radius: 0;
  color: var(--gold-3);
  cursor: pointer;
  transition: all .15s;
}
.topbar .menu-btn:hover {
  background: rgba(212,175,55,0.10);
  border-color: var(--border-2);
}
.topbar .menu-btn:active { background: rgba(212,175,55,0.20); }

.topbar .brand {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 4px;
  background: linear-gradient(180deg, #ffe9a0 0%, #d4af37 70%, #8a6a30 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: );
  user-select: none;
}

.topbar .balance {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: 4px 12px;
  background: rgba(212,175,55,0.08);
  border: 1px solid var(--border-2);
  border-radius: 0;
  line-height: 1.1;
  cursor: pointer;
  transition: background .15s;
}
.topbar .balance:hover {
  background: rgba(212,175,55,0.15);
}
.topbar .balance .label {
  font-size: 9px;
  color: var(--text-tertiary);
  letter-spacing: 1px;
}
.topbar .balance .amount {
  font-family: var(--font-mono);
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--gold-4);
}
.topbar .balance .amount .currency {
  font-size: 10px;
  margin-right: 2px;
  opacity: 0.7;
}
.topbar .balance .refresh-icon {
  margin-left: 4px;
  color: var(--text-tertiary);
  opacity: 0;
  transition: opacity .15s;
  display: inline-flex;
  vertical-align: middle;
}
.topbar .balance:hover .refresh-icon { opacity: 1; }
.topbar .balance.refreshing .refresh-icon {
  opacity: 1;
  animation: spin 0.6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* —— 顶栏「登录」按钮(游客态,替换余额位)—— */
/* 登录按钮:与存款按钮同款(金色图片皮肤,文字/图标烘焙进图) */
.topbar .topbar-login {
  flex: 0 0 auto;
  width: 122px; height: 46px; min-width: 122px; padding: 0;
  background: url("/assets/skin/topbar-login.png") center / contain no-repeat;
  border: none; border-radius: 0; box-shadow: none; cursor: pointer;
  transition: filter .15s, transform .1s;
}
.topbar .topbar-login:hover { filter: brightness(1.06); }
.topbar .topbar-login:active { transform: scale(0.97); }
.topbar .topbar-login svg, .topbar .topbar-login span { display: none; }
/* hidden 属性要能真正隐藏 */
.topbar .balance[hidden], .topbar .topbar-login[hidden] { display: none !important; }

/* —— 顶栏右侧组（余额 + 存款按钮）—— */
.topbar .right {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* —— 顶栏存款按钮（金色 CTA，PC 直角）—— */
.topbar .btn-deposit {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 36px;
  padding: 0 14px;
  background: var(--grad-gold);
  border: none;
  border-radius: 0;
  color: var(--text-on-gold);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 2px;
  cursor: pointer;
  transition: filter .15s, transform .1s;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3);
}
.topbar .btn-deposit:hover {
  filter: brightness(1.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
}
.topbar .btn-deposit:active { transform: scale(0.97); }

/* ===================================================
   主内容区
   =================================================== */
.content {
  flex: 1;
  /* ★ flex 子元素的经典 trap：默认 min-height: auto 让它被内容撑大，
     超出 flex:1 限制 → overflow-y:auto 失效。必须显式 min-height:0。 */
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;   /* 防止滚到边后冒泡给父元素 */
  position: relative;
  padding: 16px;
  scrollbar-width: thin;
  scrollbar-color: var(--gold-2) transparent;
}
.content::-webkit-scrollbar { width: 6px; }
.content::-webkit-scrollbar-thumb { background: var(--gold-2); border-radius: 3px; }
.content::-webkit-scrollbar-thumb:hover { background: var(--gold-3); }

/* Tab 切换 */
.tab-pane {
  display: none;
  animation: tabFadeIn .25s ease-out;
}
.tab-pane.active { display: block; }
@keyframes tabFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 占位卡片 */
.placeholder-card {
  background: linear-gradient(180deg, var(--bg-2) 0%, rgba(20,20,26,0.6) 100%);
  border: 1px solid var(--border-1);
  border-radius: 0;
  padding: 24px;
  text-align: center;
}
.placeholder-card .pc-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(212,175,55,0.10);
  border: 1px solid var(--border-2);
  border-radius: 0;
  color: var(--gold-3);
}
.placeholder-card .pc-title {
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 2px;
  margin-bottom: 6px;
}
.placeholder-card .pc-desc {
  font-size: var(--fs-sm);
  color: var(--text-tertiary);
  letter-spacing: 0.5px;
  line-height: 1.6;
  max-width: 280px;
  margin: 0 auto;
}
.placeholder-card .pc-tag {
  margin-top: 14px;
  display: inline-block;
  padding: 4px 12px;
  background: rgba(212,175,55,0.08);
  border: 1px solid var(--border-2);
  border-radius: 0;
  font-size: 10px;
  color: var(--gold-3);
  letter-spacing: 2px;
}

/* ===================================================
   充提款 Tab — 主入口 + 二级页 + 余额小卡
   =================================================== */

/* 子视图切换 */
.cash-view { display: none; }
.cash-view.active { display: block; }

/* —— 充值/提现 大入口模块 —— */
.cash-module {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 18px;
  margin-bottom: 12px;
  border: 1px solid var(--border-2);
  border-radius: 0;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  text-align: left;
  transition: all .2s var(--ease-in-out);
}
.cash-module::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(135deg, transparent 0 18px, rgba(255,255,255,0.04) 18px 20px);
  pointer-events: none;
}
.cash-module:hover {
  border-color: var(--gold-3);
  transform: translateX(2px);
}
.cash-module:active { transform: translateX(0); }

.cash-module .cm-icon {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(212,175,55,0.10);
  border: 1px solid var(--border-2);
  color: var(--gold-4);
  position: relative;
  z-index: 1;
}
.cash-module .cm-text {
  flex: 1;
  min-width: 0;
  position: relative;
  z-index: 1;
}
.cash-module .cm-title {
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 4px;
  line-height: 1;
}
.cash-module .cm-sub {
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-tertiary);
  letter-spacing: 0.5px;
}
.cash-module .cm-arrow {
  flex-shrink: 0;
  font-size: 28px;
  color: var(--text-tertiary);
  font-weight: 300;
  line-height: 1;
  position: relative;
  z-index: 1;
  transition: color .15s, transform .15s;
}
.cash-module:hover .cm-arrow {
  color: var(--gold-4);
  transform: translateX(4px);
}

/* 充值：绿色调 */
.module-deposit {
  background: linear-gradient(135deg, #0f2620 0%, #061612 100%);
}
.module-deposit .cm-icon {
  background: rgba(46,194,126,0.12);
  border-color: rgba(46,194,126,0.40);
  color: var(--success);
  box-shadow: none;
}
.module-deposit:hover { border-color: var(--success); }
.module-deposit:hover .cm-arrow { color: var(--success); }

/* 提现：红色调 */
.module-withdraw {
  background: linear-gradient(135deg, #2a1612 0%, #160a08 100%);
}
.module-withdraw .cm-icon {
  background: rgba(232,90,79,0.12);
  border-color: rgba(232,90,79,0.40);
  color: var(--error);
  box-shadow: none;
}
.module-withdraw:hover { border-color: var(--error); }
.module-withdraw:hover .cm-arrow { color: var(--error); }

/* 当前余额小卡 */
.cash-balance-mini {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 18px;
  padding: 14px 18px;
  background: linear-gradient(90deg, rgba(212,175,55,0.10), rgba(212,175,55,0.02));
  border: 1px solid var(--border-1);
  border-left: 3px solid var(--gold-4);
}
.cash-balance-mini .lbl {
  font-size: 11px;
  color: var(--text-secondary);
  letter-spacing: 2px;
}
.cash-balance-mini .val {
  font-family: var(--font-mono);
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--gold-4);
  letter-spacing: 0.5px;
}
.cash-balance-mini .val .currency {
  font-size: 12px;
  color: rgba(212,175,55,0.7);
  font-weight: 400;
  margin-right: 4px;
}

/* —— 二级页头部（返回 + 标题） —— */
.cash-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: -16px -16px 16px;
  padding: 12px 16px;
  background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg-1) 100%);
  border-bottom: 1px solid var(--border-1);
}
.cash-header .back-btn {
  width: 32px;
  height: 32px;
  background: rgba(212,175,55,0.08);
  border: 1px solid var(--border-2);
  border-radius: 0;
  color: var(--gold-3);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
}
.cash-header .back-btn:hover {
  background: rgba(212,175,55,0.18);
  border-color: var(--gold-3);
  color: var(--gold-4);
}
.cash-header .cash-title {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 4px;
}

/* ===================================================
   游戏 Tab — 轮播图 / 金刚区 / 公告区
   =================================================== */

/* —— 轮播图 —— */
.carousel {
  position: relative;
  width: 100%;
  aspect-ratio: 984 / 342;
  margin-bottom: 12px;
  overflow: hidden;
  border: 1px solid var(--border-1);
  background: var(--bg-2);
}
.carousel-track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform .5s var(--ease-in-out);
}
.carousel-slide {
  flex: 0 0 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 24px 28px;
  position: relative;
  color: var(--text-primary);
}
.carousel-slide::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(135deg,
      transparent 0 20px,
      rgba(255,255,255,0.04) 20px 22px,
      transparent 22px 40px);
  pointer-events: none;
}
.carousel-slide .slide-title {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 2px;
  text-shadow: none;
  position: relative;
}
.carousel-slide .slide-sub {
  margin-top: 6px;
  font-size: 13px;
  color: rgba(255,255,255,0.8);
  letter-spacing: 1px;
  position: relative;
}
.carousel-slide .slide-cta {
  margin-top: 12px;
  display: inline-block;
  padding: 6px 16px;
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1px;
  background: linear-gradient(135deg, #ffe9a0, #d4af37);
  color: #1a1410;
  position: relative;
  box-shadow: none;
}

/* 3 张占位背景（后期替换为 Figma 图 background-image） */
.carousel-slide.slide-1 {
  background: linear-gradient(135deg, #5b3a1a 0%, #8a5a28 50%, #2a1810 100%);
}
.carousel-slide.slide-2 {
  background: linear-gradient(135deg, #1a3a5b 0%, #285a8a 50%, #101a2a 100%);
}
.carousel-slide.slide-3 {
  background: linear-gradient(135deg, #5b1a3a 0%, #8a285a 50%, #2a101a 100%);
}

/* 指示点 */
.carousel-dots {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 2;
}
.carousel-dots .dot {
  width: 18px;
  height: 3px;
  padding: 0;
  background: rgba(255,255,255,0.35);
  border: none;
  border-radius: 0;
  cursor: pointer;
  transition: all .2s;
}
.carousel-dots .dot.active {
  background: var(--gold-4);
  box-shadow: none;
  width: 24px;
}

/* —— 金刚区 (3 小图) —— */
.kingkong {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}
.kk-item {
  position: relative;
  height: 80px;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  border: 1px solid var(--border-1);
  cursor: pointer;
  overflow: hidden;
  transition: border-color .2s, transform .15s;
}
.kk-item:hover {
  border-color: var(--gold-3);
  transform: translateY(-1px);
}
.kk-item:active { transform: translateY(0); }
.kk-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(135deg, transparent 0 12px, rgba(255,255,255,0.04) 12px 14px);
  pointer-events: none;
}
.kk-item .kk-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 0.5px;
  position: relative;
  z-index: 1;
}
.kk-item .kk-sub {
  margin-top: 4px;
  font-size: 11px;
  color: var(--gold-3);
  font-family: var(--font-mono);
  position: relative;
  z-index: 1;
}
.kk-1 { background: linear-gradient(135deg, #2a1c3e 0%, #1a1024 100%); }
.kk-2 { background: linear-gradient(135deg, #1a2e2a 0%, #0c1a18 100%); }
.kk-3 { background: linear-gradient(135deg, #3e2a1a 0%, #241810 100%); }

/* —— API 模式：纯图片背景（无文字叠加） —— */
.kk-item.api-kk {
  padding: 0;
  background: #0b1f44;              /* 兜底底色 */
}
.kk-item.api-kk::after { display: none; }   /* 关掉斜纹层 */
/* 双层自适应:模糊铺底填满 + 完整图居中(contain),任意比例不裁切、不留白边 */
.kk-item.api-kk .kk-bg {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center; background-repeat: no-repeat;
  filter: blur(14px) brightness(.85);
  transform: scale(1.2);
}
.kk-item.api-kk .kk-img {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%;
  object-fit: contain; display: block;
}

/* —— 公告区 —— */
.notice-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin-bottom: 14px;
  background: linear-gradient(90deg, rgba(212,175,55,0.10) 0%, rgba(212,175,55,0.04) 100%);
  border: 1px solid var(--border-1);
  border-left: 3px solid var(--gold-4);
  cursor: pointer;
}
.notice-bar .notice-icon {
  flex-shrink: 0;
  color: var(--gold-4);
  display: flex;
}
.notice-bar .notice-text {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
}
.notice-bar .notice-text span {
  display: inline-block;
  font-size: 12px;
  color: var(--text-secondary);
  letter-spacing: 0.5px;
  animation: notice-marquee 22s linear infinite;
  padding-left: 100%;
}
@keyframes notice-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}
.notice-bar .notice-more {
  flex-shrink: 0;
  color: var(--text-tertiary);
  font-size: 18px;
  font-weight: 300;
}
.notice-bar:hover { border-color: var(--gold-3); }
.notice-bar:hover .notice-more { color: var(--gold-3); }

/* —— 游戏区 wrapper：左品牌 + 右游戏 —— */
.games-wrap {
  display: flex;
  flex-direction: column;      /* 改：品牌横排在上 + 游戏区在下 */
  gap: 12px;
  margin-bottom: 16px;
}

/* —— 游戏品牌（左侧竖向列表，多了自动上下滚） —— */
.brand-strip {
  display: flex;
  flex-direction: row;         /* 改：横向排列，多了左右滑 */
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 8px;
  border: 1px solid var(--border-1);   /* 整排套圆角外框(仿参考站) */
  border-radius: 12px;
  background: rgba(212,175,55,0.04);
}
.brand-strip::-webkit-scrollbar { display: none; }

.brand-chip {
  flex: 0 0 auto;
  width: 66px;                  /* 改：横排每个标签固定宽 */
  height: 72px;
  padding: 8px 4px;
  background: var(--bg-2);
  border: 1px solid var(--border-1);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  transition: all .15s var(--ease-in-out);
}
.brand-chip:hover {
  border-color: var(--gold-3);
}
.brand-chip.active {
  background: linear-gradient(135deg, rgba(212,175,55,0.20), rgba(212,175,55,0.05));
  border-color: var(--gold-4);
  box-shadow: none;
}
.brand-chip .brand-logo {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-3);
  border: 1px solid var(--border-1);
  color: var(--gold-3);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.brand-chip.active .brand-logo {
  background: var(--grad-gold);
  color: var(--text-on-gold);
  border-color: var(--gold-5);
  box-shadow: none;
}
.brand-chip .brand-name {
  font-size: 10px;
  color: var(--text-secondary);
  letter-spacing: 0.3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;     /* 长名（如 Hacksaw Gaming）截断加 …，不溢出 */
  max-width: 64px;
  text-align: center;
}
.brand-chip.active .brand-name {
  color: var(--gold-4);
  font-weight: 500;
}

/* —— 游戏区 —— */
.game-section {
  flex: 1;            /* 占走 brand-strip 之外的剩余宽度 */
  min-width: 0;       /* 防止 grid 撑开父容器 */
  margin-bottom: 0;   /* games-wrap 已经统一了底部 margin */
}
.game-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  margin-bottom: 10px;
  background: linear-gradient(90deg, rgba(212,175,55,0.10) 0%, rgba(212,175,55,0.02) 100%);
  border: 1px solid var(--border-1);
  border-left: 3px solid var(--gold-4);
}
.game-header .gh-title {
  display: flex;
  align-items: center;
  gap: 8px;
}
.game-header .gh-icon {
  display: inline-flex;
  color: #ff7e3a;     /* 火焰橙金 */
  filter: );
}
.game-header .gh-label {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 1.5px;
}
.game-header .gh-nav {
  display: flex;
  gap: 4px;
}
.game-header .gh-arrow {
  width: 24px;
  height: 24px;
  background: rgba(212,175,55,0.08);
  border: 1px solid var(--border-2);
  border-radius: 0;
  color: var(--gold-3);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
}
.game-header .gh-arrow:hover {
  background: rgba(212,175,55,0.20);
  color: var(--gold-4);
  border-color: var(--gold-4);
}

/* 游戏栅格：每行 3-4 个，auto-fill 自适应宽度 */
.game-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);   /* 改：固定每行 4 个 */
  gap: 6px;
}
.game-card {
  cursor: pointer;
  transition: transform .15s;
}
.game-card:hover { transform: translateY(-2px); }

.game-cover {
  aspect-ratio: 1 / 1;
  border: 1px solid var(--border-1);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: rgba(255,255,255,0.85);
  text-shadow: none;
  margin-bottom: 3px;
  position: relative;
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}
.game-cover span { padding: 0 2px; line-height: 1.25; }
.game-card:hover .game-cover {
  border-color: var(--gold-4);
  box-shadow: none;
}
.game-cover span { position: relative; z-index: 1; line-height: 1.3; padding: 0 4px; }
/* 装饰条纹 */
.game-cover::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(135deg, transparent 0 14px, rgba(255,255,255,0.04) 14px 16px);
  pointer-events: none;
}

/* 9 个占位 cover 不同色系（后续替换为真实图片）*/
.game-cover.g1 { background: linear-gradient(135deg, #c9410f 0%, #6b1f06 100%); }
.game-cover.g2 { background: linear-gradient(135deg, #b88500 0%, #5a3f00 100%); }
.game-cover.g3 { background: linear-gradient(135deg, #a02a8a 0%, #4d0d3f 100%); }
.game-cover.g4 { background: linear-gradient(135deg, #e8528f 0%, #6f1a3f 100%); }
.game-cover.g5 { background: linear-gradient(135deg, #1d72a3 0%, #0a3556 100%); }
.game-cover.g6 { background: linear-gradient(135deg, #d4af37 0%, #6b5614 100%); }
.game-cover.g7 { background: linear-gradient(135deg, #c93030 0%, #6b1414 100%); }
.game-cover.g8 { background: linear-gradient(135deg, #1d8a52 0%, #0a4423 100%); }
.game-cover.g9 { background: linear-gradient(135deg, #4a5f7a 0%, #1d2a3a 100%); }

.game-card .game-name {
  font-size: 10px;
  color: var(--text-secondary);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.3px;
}
.game-card:hover .game-name { color: var(--gold-3); }

/* ===================================================
   次级 Tab（活动子分类，参考 WJ88 Eventos/Rebate/VIP）
   =================================================== */
.sub-nav {
  display: flex;
  gap: 4px;
  /* v4.4：放弃 sticky + 负 margin（在 .content padding 下表现不稳，
           容易在顶部留大空白）。改用 .tab-pane[data-pane="bonus"]
           自身清掉 padding-top 让 sub-nav 自然贴顶。*/
  padding: 4px 4px 4px;
  margin: 0 -16px 6px;          /* 左右仍负 margin 贴到 content 边 */
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  background: transparent;   /* 去掉顶部深色→透明的黑色渐隐(sub-nav) */
  position: relative;            /* v4.4：取消 sticky 避免奇怪空白 */
  z-index: 1;
}
.sub-nav::-webkit-scrollbar { display: none; }
.sub-nav .sub-item {
  flex-shrink: 0;
  padding: 8px 16px;
  background: none;
  border: none;
  border-radius: 0;
  color: var(--text-tertiary);
  font-size: var(--fs-sm);
  letter-spacing: 1px;
  cursor: pointer;
  position: relative;
  transition: color .15s;
  white-space: nowrap;
}
.sub-nav .sub-item:hover { color: var(--gold-3); }
.sub-nav .sub-item.active {
  color: var(--gold-4);
  font-weight: 500;
}
.sub-nav .sub-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 2px;
  background: var(--gold-4);
  border-radius: 2px;
  box-shadow: none;
}

/* ===================================================
   丰盈活动卡片（深金渐变 + 左侧对角条纹 + 右侧大装饰）
   =================================================== */
.rich-card {
  position: relative;
  width: 100%;
  min-height: 110px;
  margin-bottom: 14px;
  border-radius: 0;
  overflow: hidden;
  background: linear-gradient(135deg, #2a2418 0%, #1a1610 45%, #0f0c08 100%);
  border: none;   /* 去掉活动卡边界线 */
  display: flex;
  align-items: flex-end;
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color .2s, transform .15s;
  box-shadow: none;   /* 取消黑色阴影 */
}
.rich-card:hover {
  border-color: var(--gold-3);
  transform: translateY(-1px);
}
.rich-card:active { transform: translateY(0); }

/* 左侧对角条纹装饰 */
.rich-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 60%;
  background:
    repeating-linear-gradient(135deg,
      transparent 0 14px,
      rgba(212,175,55,0.06) 14px 16px,
      rgba(212,175,55,0.10) 16px 28px,
      rgba(212,175,55,0.04) 28px 30px);
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0.7) 0%, transparent 100%);
  mask-image: linear-gradient(90deg, rgba(0,0,0,0.7) 0%, transparent 100%);
  pointer-events: none;
}
/* 左侧绿松石点缀线，模拟截图里的左侧斜条 */
.rich-card::after {
  content: '';
  position: absolute;
  left: 14px;
  top: 20px;
  width: 30px;
  height: 2px;
  background: linear-gradient(90deg, var(--gold-4), transparent);
  border-radius: 1px;
  box-shadow: none;
}

.rich-card .rc-title {
  position: relative;
  z-index: 1;
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: 0.5px;
  max-width: 60%;
  line-height: 1.4;
  text-shadow: none;
}
.rich-card .rc-decor {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 130px;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 90px;
  line-height: 1;
  color: var(--gold-4);
  filter: );
  opacity: 0.9;
  pointer-events: none;
}
.rich-card .rc-tag {
  position: absolute;
  top: 12px;
  right: 14px;
  z-index: 2;
  padding: 2px 8px;
  background: rgba(232,90,79,0.85);
  color: #fff;
  border-radius: 0;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 1px;
  box-shadow: none;
}

/* ===================================================
   底栏 BottomNav（圆形彩色徽章风格，参考 WJ88）
   =================================================== */
.bottom-nav {
  display: flex;
  height: 52px;                     /* v4.3.3：在 40 基础上加 12px 透气，顶边比 SVG 高 ~10px */
  background: linear-gradient(0deg, var(--bg-2) 0%, var(--bg-1) 100%);
  border-top: 1px solid var(--border-1);
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  padding: 0 4px;
}
.bottom-nav .nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;                            /* v4.3.1：文字紧贴图标 */
  background: none;
  border: none;
  color: var(--text-tertiary);
  cursor: pointer;
  position: relative;
  transition: all .15s;
  padding: 0;                        /* v4.3.1：去掉内边距，justify-center 自动平衡 */
}
.bottom-nav .nav-item .nav-icon {
  /* v4.3.2：图标容器缩到 24（SVG 22 + 1px 余量），与上传图自适应保持一致 */
  width: 24px;
  height: 24px;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;          /* 仍去掉每个 tab 的彩色底 */
  border: none;                     /* 仍去掉边框 */
  /* v4.3：默认灰色（未在当前页时所有 tab 一致） */
  color: var(--text-tertiary);
  transition: transform .15s var(--ease-in-out), color .15s, filter .15s;
  overflow: hidden;                 /* 防止 img 略大时溢出 */
}
/* 上传图：自适应填满整个 48×48 图标区 */
.bottom-nav .nav-item .nav-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
/* v4.3.1：SVG 缩小 36 → 22，视觉更小巧 */
.bottom-nav .nav-item .nav-icon svg {
  width: 22px;
  height: 22px;
}
.bottom-nav .nav-item .nav-label {
  font-size: 10px;
  line-height: 1;                    /* 行高=字号 */
  letter-spacing: 1px;
  color: var(--text-tertiary);
  margin-top: -3px;                  /* v4.3.1：文字往上拉，吃掉 SVG 底部空白以紧贴图标 */
}
/* v4.3：所有 tab 激活态统一用 V587 品牌金色（参考 Casino 样式） */
.bottom-nav .nav-item { --nav-color: var(--gold-4); }

.bottom-nav .nav-item:hover .nav-icon {
  transform: translateY(-2px);
}

/* 选中态：取消方框后用上浮 + 主色 + 柔光做选中信号（不依赖背景/边框） */
.bottom-nav .nav-item.active .nav-icon {
  color: var(--nav-color);
  filter: 60%, transparent));
  transform: translateY(-2px);
}
.bottom-nav .nav-item.active .nav-label {
  color: var(--nav-color);
  font-weight: 500;
}
.bottom-nav .nav-item.active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 2px;
  background: var(--nav-color);
  border-radius: 0 0 2px 2px;
  box-shadow: none;
}

/* ===================================================
   侧边栏 Drawer
   =================================================== */
.drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.58);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s var(--ease-in-out);
  z-index: 9;
}
.drawer-backdrop.open { opacity: 1; pointer-events: auto; }

/* —— 侧边抽屉：深暖色 + 金色 Jackpot（固定顶 / 滚动中 / 固定底） —— */
.drawer {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 84%;
  max-width: 338px;
  background: linear-gradient(180deg, #211b14 0%, #171310 55%, #120f0d 100%);
  border-right: 1px solid rgba(212,175,55,0.22);
  transform: translateX(-100%);
  transition: transform .25s var(--ease-in-out);
  z-index: 10;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.drawer.open { transform: translateX(0); }

/* 固定·顶部 */
.drawer-top {
  flex: none;
  padding: 16px 16px 14px;
  background: linear-gradient(180deg, rgba(212,175,55,0.10) 0%, transparent 100%);
  border-bottom: 1px solid rgba(212,175,55,0.14);
}
.drawer-topbar { display: flex; align-items: center; justify-content: space-between; }
.dt-logo { font-family: var(--font-display); font-size: 26px; font-weight: 700; letter-spacing: 1px; color: var(--gold-5); }
.dt-logo span { color: var(--gold-4); }
.dt-actions { display: flex; align-items: center; gap: 6px; }
.dt-cs, .dt-close {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer; border-radius: 8px;
  color: var(--gold-3);
}
.dt-close { font-size: 24px; line-height: 1; color: var(--text-secondary); }
.dt-cs:hover, .dt-close:hover { background: rgba(212,175,55,0.12); color: var(--gold-5); }

/* Jackpot（纯动画） */
.drawer-jackpot {
  margin-top: 14px;
  padding: 14px 12px;
  text-align: center;
  background: radial-gradient(ellipse at 50% 0%, rgba(212,175,55,0.14) 0%, rgba(0,0,0,0.25) 70%);
  border: 1px solid rgba(212,175,55,0.30);
  border-radius: 14px;
}
.jp-head { font-size: 11px; letter-spacing: 3px; color: var(--gold-4); font-weight: 700; }
.jp-amount {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 27px; font-weight: 800; letter-spacing: 0.5px;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #ffe9a0 0%, #f0d27c 45%, #d4af37 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.jp-sub { margin-top: 4px; font-size: 10px; letter-spacing: 1px; color: var(--text-tertiary); }

/* 未登录 登录/注册 */
.drawer-auth { display: flex; gap: 10px; margin-top: 14px; }
.drawer-auth[hidden], .drawer-userbar[hidden] { display: none !important; }
.da-btn {
  flex: 1; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px; font-size: 15px; font-weight: 700; letter-spacing: 2px;
  cursor: pointer; text-decoration: none;
}
.da-login { background: rgba(212,175,55,0.10); border: 1px solid var(--gold-3); color: var(--gold-5); }
.da-reg { background: var(--grad-gold); color: var(--text-on-gold); border: 1px solid var(--gold-5); }
.da-login:active, .da-reg:active { transform: scale(0.98); }

/* 已登录：余额 + 存款 */
.drawer-userbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; padding: 10px 14px; background: rgba(255,255,255,0.03); border: 1px solid rgba(212,175,55,0.20); border-radius: 10px; }
.du-bal { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }
.du-bal-label { font-size: 10px; color: var(--text-tertiary); letter-spacing: 1px; }
.du-bal-amt { font-family: var(--font-mono); font-size: 18px; font-weight: 700; color: var(--gold-5); font-variant-numeric: tabular-nums; }
.du-deposit { flex: none; height: 36px; padding: 0 18px; background: var(--grad-gold); color: var(--text-on-gold); border: 1px solid var(--gold-5); border-radius: 9px; font-size: 14px; font-weight: 700; letter-spacing: 1px; cursor: pointer; }
.du-deposit:active { transform: scale(0.97); }

/* 滚动·中部 */
.drawer-scroll {
  flex: 1; min-height: 0;
  overflow-y: auto; overflow-x: hidden;
  padding: 14px 14px 18px;
  scrollbar-width: none;
}
.drawer-scroll::-webkit-scrollbar { display: none; }
.drawer-sec { margin-bottom: 16px; }
.ds-head {
  display: flex; align-items: center; gap: 7px;
  font-size: 14px; font-weight: 600; color: var(--text-primary);
  letter-spacing: 1px; margin-bottom: 10px;
}
.ds-head .ds-sub { font-size: 11px; color: var(--text-tertiary); font-weight: 400; letter-spacing: 0.5px; }

/* 热门横滑 */
.dh-row { display: flex; gap: 12px; overflow-x: auto; overflow-y: hidden; padding: 2px 6px 4px; scrollbar-width: none; }
.dh-row::-webkit-scrollbar { display: none; }
.dh-loading { color: var(--text-tertiary); font-size: 12px; padding: 20px 0; }
.dh-thumb {
  flex: 0 0 auto; width: 72px; height: 100px;
  border-radius: 10px; overflow: hidden;
  background: linear-gradient(135deg, #2a2118, #1a1511);
  border: 1px solid rgba(212,175,55,0.18);
  cursor: pointer; position: relative;
  transform: skewX(-9deg);
}
.dh-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transform: skewX(9deg) scale(1.2); }
.dh-thumb:active { transform: skewX(-9deg) scale(0.96); }

/* 功能 2 列格 */
.drawer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; }
.dg-item {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(212,175,55,0.16);
  border-radius: 10px; cursor: pointer;
  color: var(--text-primary); font-size: 13px; text-align: left;
}
.dg-item:active { transform: scale(0.98); background: rgba(212,175,55,0.10); }
.dg-ic {
  width: 30px; height: 30px; flex: none;
  display: flex; align-items: center; justify-content: center; font-size: 16px;
  background: radial-gradient(circle at 50% 40%, rgba(212,175,55,0.22), rgba(212,175,55,0.06));
  border: 1px solid rgba(212,175,55,0.35);
  border-radius: 8px;
}
.dg-tx { font-weight: 500; letter-spacing: 0.5px; }
.dg-empty {
  text-align: center; color: var(--text-tertiary); font-size: 12px; padding: 18px 0;
  border: 1px dashed rgba(212,175,55,0.18); border-radius: 10px;
}

/* 固定·底部 社媒 */
.drawer-bottom {
  flex: none; padding: 9px 16px 11px;
  border-top: 1px solid rgba(212,175,55,0.14); text-align: center;
}
.dbm-title { font-size: 12px; color: var(--text-secondary); letter-spacing: 1px; margin-bottom: 10px; }
.dbm-social { display: flex; justify-content: center; gap: 14px; }
.dbm-s { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 50%; cursor: pointer; }
.dbm-tg { background: #2aabee; }
.dbm-wa { background: #25d366; }
.dbm-fb { background: #1877f2; }
.dbm-ig { background: linear-gradient(45deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); }
.dbm-x  { background: #111111; }
.dbm-s[hidden] { display: none !important; }
.dbm-s:active { transform: scale(0.94); }
.dbm-logout {
  display: block; margin: 12px auto 0; background: none; border: none;
  color: var(--text-tertiary); font-size: 11px; letter-spacing: 1px;
  cursor: pointer; text-decoration: underline;
}

/* =============================================================
   动态品牌侧栏 + 游戏网格 + 游戏 iframe overlay（接 Admin 数据）
   ============================================================= */

/* —— 品牌侧栏：图片 logo —— */
.brand-chip .brand-logo-img {
  width: 34px;
  height: 34px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--border-1);
  background: var(--bg-3);
  display: block;
}
.brand-chip.active .brand-logo-img {
  border-color: var(--gold-5);
  box-shadow: none;
}

/* —— 自营/三方之间的分隔线 —— */
.brand-divider {
  height: 1px;
  margin: 6px 4px;
  background: linear-gradient(90deg, transparent, var(--border-2) 30%, var(--border-2) 70%, transparent);
  flex-shrink: 0;
}

/* —— 品牌侧栏 loading / empty 文案 —— */
.brand-loading {
  padding: 12px 4px;
  font-size: 10px;
  color: var(--text-tertiary);
  text-align: center;
  letter-spacing: 1px;
}

/* —— 游戏 header 数量 chip —— */
.game-header .gh-count {
  padding: 2px 8px;
  background: rgba(212,175,55,0.10);
  border: 1px solid var(--border-2);
  color: var(--gold-3);
  font-size: 10px;
  font-family: var(--font-mono);
  letter-spacing: 0.5px;
}

/* —— 游戏卡片：真实封面图 —— */
.game-card {
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  width: 100%;
}
.game-card .game-cover-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  margin-bottom: 3px;
  border: 1px solid var(--border-1);
  transition: border-color .15s, box-shadow .15s;
}
.game-card:hover .game-cover-img {
  border-color: var(--gold-4);
  box-shadow: none;
}
/* fallback cover（没图时显示文字方块）*/
.game-cover-fallback {
  background: linear-gradient(135deg, var(--bg-3) 0%, var(--bg-1) 100%);
  font-size: 10px;
  color: var(--gold-3);
  letter-spacing: 0.5px;
}

/* —— 游戏网格 empty 状态 —— */
.game-empty {
  grid-column: 1 / -1;
  padding: 40px 12px;
  text-align: center;
  font-size: 11px;
  color: var(--text-tertiary);
  letter-spacing: 1px;
  font-style: italic;
}

/* —— 活动卡纯图模式：图片按原始宽高比完整显示，卡片高度跟图走 —— */
.rich-card.rich-card-img {
  background: none;
  min-height: 0;                  /* 撤销默认的 min-height: 110px */
  padding: 0;
  border-color: rgba(212, 175, 55, 0.45);
  display: block;                 /* 让 img 自然撑高 */
  line-height: 0;                 /* 消除 img 底部的 baseline 间隙 */
}
.rich-card.rich-card-img::before { display: none; }   /* 关左侧斜纹 */
.rich-card.rich-card-img::after  { display: none; }   /* 关右侧高光线 */
.rich-card.rich-card-img img {
  display: block;
  width: 100%;
  height: auto;                   /* 按原比例自适应 */
}

/* —— rc-tag 颜色变体（HOT 用默认红，NEW 用金色）—— */
.rich-card .rc-tag.rc-tag-hot {
  background: rgba(232, 90, 79, 0.85);
  color: #fff;
  box-shadow: none;
}
.rich-card .rc-tag.rc-tag-new {
  background: linear-gradient(135deg, var(--gold-4) 0%, var(--gold-5) 100%);
  color: var(--text-on-gold);
  box-shadow: none;
}

/* 让活动卡可点击 */
.rich-card { cursor: pointer; }

/* =============================================================
   v4: 奖金 tab 的 list / detail 双视图（仿 cash-view 模式）
   ============================================================= */
.bonus-view { display: none; }
.bonus-view.active { display: block; }

/* v4.1: 进入活动详情视图时隐藏 sub-nav（次级标签只在列表视图有意义）*/
.tab-pane[data-pane="bonus"].bonus-detail-mode .sub-nav { display: none; }

/* v4.4：bonus tab 自己用 margin-top: -16px 吃掉 .content 的 padding-top，
   让 sub-nav 紧贴 topbar 底部（替代过去 sticky + 负 margin 的脆弱方案） */
.tab-pane[data-pane="bonus"] { margin-top: -16px; }

/* =============================================================
   v4.15：每日充值活动页（bonus-view data-view="recharge"）
   ============================================================= */

/* 顶部 hero 图：圆角 12，跟设计风格的"圆滑长方形"统一 */
.recharge-hero {
  width: 100%;
  margin: 0 0 14px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(212,175,55,0.30);
}
.recharge-hero img {
  width: 100%;
  height: auto;
  display: block;
}

/* 档位表 */
.recharge-table {
  display: flex;
  flex-direction: column;
}

/* 表头：三列对齐（无背景，纯标题行） */
.rt-head {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  padding: 6px 14px 12px;
  font-size: 11px;
  color: var(--text-tertiary);
  letter-spacing: 0.5px;
}
.rt-head .rt-col-amount { text-align: left; }
.rt-head .rt-col-reward { text-align: center; }
.rt-head .rt-col-action { text-align: right; }

/* 每一行：独立卡片，圆滑角，金边 */
.rt-row {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 10px 14px;
  margin-bottom: 8px;
  background: linear-gradient(135deg, #1a1610 0%, #0e0b07 100%);
  border: 1px solid rgba(212,175,55,0.18);
  border-radius: 14px;
  font-size: 13px;
  transition: border-color .15s;
}
.rt-row:hover { border-color: rgba(212,175,55,0.30); }
.rt-row .rt-amount {
  color: var(--text-primary);
  font-weight: 500;
}
.rt-row .rt-reward {
  text-align: center;
  color: var(--gold-4);
  font-weight: 600;
}

/* 按钮三态：可领（金边）/ 当前推荐（黄色填充）/ 未达到（灰） */
.rt-btn {
  height: 32px;
  min-width: 80px;
  padding: 0 16px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: filter .15s, background .15s, color .15s;
  white-space: nowrap;
}

/* 可领（金边）：用户已达到门槛但未领，普通可点 */
.rt-btn.rt-btn-receive {
  background: transparent;
  border: 1px solid var(--gold-4);
  color: var(--gold-3);
}
.rt-btn.rt-btn-receive:hover {
  background: rgba(212,175,55,0.10);
}

/* 推荐档位（亮黄填充）：用户当前可领的最高档（最划算） */
.rt-btn.rt-btn-highlight {
  background: linear-gradient(135deg, var(--gold-4), var(--gold-5));
  border: 1px solid var(--gold-4);
  color: var(--text-on-gold, #1a1408);
}
.rt-btn.rt-btn-highlight:hover {
  filter: brightness(1.05);
}

/* 未达到（灰）：用户充值未到该档，禁用 */
.rt-btn.rt-btn-locked {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--text-tertiary);
  cursor: not-allowed;
}

/* 已领（带勾的浅金）：已领过该档，禁用 */
.rt-btn.rt-btn-claimed {
  background: rgba(212,175,55,0.08);
  border: 1px solid rgba(212,175,55,0.18);
  color: var(--text-tertiary);
  cursor: not-allowed;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.rt-loading {
  padding: 40px 0;
  text-align: center;
  color: var(--text-tertiary);
  font-size: 12px;
}

/* 活动详情视图的顶部 header（仿 cash-header） */
.bonus-detail-header {
  position: relative;
  display: flex;
  align-items: center;
  height: 36px;
  margin-bottom: 12px;
}
.bonus-detail-header .back-btn {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border-1);
  background: var(--bg-1);
  color: var(--gold-4);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0 2px 0;
}
.bonus-detail-header .back-btn:hover { border-color: var(--gold-3); background: var(--bg-2); }
.bonus-detail-title {
  flex: 1;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  color: var(--gold-4);
  letter-spacing: 1px;
  font-family: var(--font-display);
}

/* 活动详情内容 */
.bonus-detail-body {
  background: linear-gradient(180deg, var(--bg-1) 0%, #0e0e14 100%);
  border: 1px solid var(--border-1);
  border-radius: 0;
  overflow: hidden;
  min-height: 200px;
  position: relative;
}
.bonus-detail-body::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-4), transparent);
  opacity: 0.6;
}
.bd-image {
  display: block;
  width: 100%;
  height: auto;
}
.bd-content {
  padding: 16px 14px 20px;
}
.bd-head-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.bd-tag {
  padding: 2px 10px;
  border-radius: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
}
.bd-tag-hot {
  background: rgba(232, 90, 79, 0.85);
  color: #fff;
  box-shadow: none;
}
.bd-tag-new {
  background: linear-gradient(135deg, var(--gold-4) 0%, var(--gold-5) 100%);
  color: var(--text-on-gold);
  box-shadow: none;
}
.bd-emoji {
  font-size: 22px;
  line-height: 1;
}
.bd-text {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-secondary);
  letter-spacing: 0.3px;
  white-space: pre-wrap;
  word-break: break-word;
}
.bd-empty {
  padding: 40px 16px;
  text-align: center;
  color: var(--text-tertiary);
  font-size: 12px;
  font-style: italic;
}

/* 游戏 iframe overlay 已废弃 —— 点击游戏直接 location.href 同窗口跳转 */

/* =============================================================
   合作伙伴区（games-wrap 下方）
   每行最多 3 个品牌大 logo；少于 3 个不换行；超过 3 个 3+N 换行
   ============================================================= */

.partners {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border-1);
}

.partners-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.partners-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: var(--gold-4);
  font-family: var(--font-display);
  /* 左右各加一段金色短线点缀 */
  position: relative;
  padding-left: 14px;
}
.partners-title::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 8px; height: 1px;
  background: var(--gold-4);
  box-shadow: none;
}
.partners-deco {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--gold-1), transparent);
  opacity: 0.5;
}

/* —— flex 布局：每行最多 3 个；justify-content: center 让不满 3 个的行（首行或末行）自动居中 —— */
.partners-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;        /* 关键：满 3 个时刚好占满不影响；不足 3 个的行整体居中 */
}

/* —— 每个 logo 卡片：纯净无底，仅靠 hover 微高亮 —— */
.partner-card {
  position: relative;
  flex: 0 0 calc((100% - 16px) / 3);  /* 3 列：减去 2 个 gap */
  aspect-ratio: 5 / 2;                /* 大 logo 通常横版 */
  background: transparent;            /* 去掉渐变背景 */
  border: 1px solid transparent;      /* 默认无边框，hover 时金边 */
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .2s, transform .15s, opacity .15s;
  opacity: 0.92;
}
.partner-card:hover {
  border-color: var(--gold-3);
  transform: translateY(-1px);
  opacity: 1;
}
/* —— 图片自适应充满整个框 —— */
.partner-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;          /* 保持原比例填满，不变形不裁切 */
  display: block;
}

/* —— 无大 logo 时的文字 fallback —— */
.partner-card .partner-fallback {
  font-size: 11px;
  font-weight: 600;
  color: var(--gold-3);
  letter-spacing: 1px;
  text-align: center;
  padding: 0 4px;
  word-break: break-word;
}

/* —— 空状态 —— */
.partners-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 16px 0;
  font-size: 11px;
  color: var(--text-tertiary);
  font-style: italic;
}

/* =============================================================
   v4.5：钱包 tab 我的钱包 UI
   ============================================================= */

/* ---- 用户信息卡 ---- */
.wallet-card {
  background: linear-gradient(135deg, #221c10 0%, #16110a 50%, #0c0905 100%);
  border: 1px solid rgba(212,175,55,0.30);
  border-radius: 0;
  padding: 16px;
  margin-bottom: 14px;
}
.wc-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.wc-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-3) 0%, var(--gold-5) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 600;
  color: var(--text-on-gold, #1a1408);
  flex-shrink: 0;
  border: 2px solid rgba(212,175,55,0.45);
}
.wc-meta { flex: 1; min-width: 0; }
.wc-id-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.wc-id {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: 0.5px;
}
.wc-copy {
  background: none;
  border: none;
  color: var(--gold-3);
  cursor: pointer;
  padding: 2px 4px;
  display: flex;
  align-items: center;
  transition: color .15s;
}
.wc-copy:hover { color: var(--gold-4); }

/* v4.7: ID 后迷你 VIP 徽章 */
.wc-vip-mini {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  min-width: 28px;
  padding: 0 6px;
  margin-left: 4px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--gold-3), var(--gold-5));
  color: var(--text-on-gold, #1a1408);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  overflow: hidden;
}
/* v4.10：迷你徽章 = 大徽章 42px 的缩小版（28px 高 ≈ 2/3 比例） */
.wc-vip-mini.has-img {
  background: transparent;
  padding: 0;
  height: 28px;
  min-width: 0;
  width: auto;
  border-radius: 0;
  border: none;
  overflow: visible;
  position: relative;
  display: inline-flex;
}
.wc-vip-mini.has-img img {
  width: auto;
  height: 100%;
  object-fit: contain;
  display: block;
}
/* v4.10：迷你徽章浮层文字 —— 跟大徽章同款 "VIP X" + 同款定位 */
.wc-vip-mini-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 34%;
  padding-right: 6%;
  font-size: 7px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.2px;
  text-shadow: none;
  pointer-events: none;
  white-space: nowrap;
}
/* 未入会（lv=0 + 无下级配置 或 vip_level=0 且 vip_levels 没 lv=0）淡色 */
.wc-vip-mini.is-newbie {
  background: rgba(212,175,55,0.12);
  color: var(--text-tertiary);
  border: 1px solid rgba(212,175,55,0.20);
}

.wc-name {
  font-size: 12px;
  color: var(--text-tertiary);
  letter-spacing: 0.5px;
}
.wc-cs {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(212,175,55,0.12);
  border: 1px solid rgba(212,175,55,0.25);
  color: var(--gold-4);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s;
}
.wc-cs:hover { background: rgba(212,175,55,0.20); }

.wc-bal-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--text-tertiary);
  margin-bottom: 4px;
  letter-spacing: 1px;
}
.wc-bal-refresh {
  background: none;
  border: none;
  color: var(--gold-3);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  transition: transform .3s, color .15s;
}
.wc-bal-refresh:hover { color: var(--gold-4); }
.wc-bal-refresh.spinning { transform: rotate(360deg); }

.wc-balance {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 28px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 16px;
  letter-spacing: 0.5px;
}
.wc-currency {
  font-size: 16px;
  font-weight: 500;
  color: var(--gold-3);
}

.wc-actions { display: flex; gap: 10px; }
.wc-btn {
  flex: 1;
  height: 42px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all .15s;
}
.wc-btn-secondary {
  background: transparent;
  border: 1px solid var(--gold-3);
  color: var(--text-primary);
}
.wc-btn-secondary:hover {
  background: rgba(212,175,55,0.10);
  border-color: var(--gold-4);
}
.wc-btn-primary {
  background: linear-gradient(135deg, var(--gold-4) 0%, var(--gold-5) 100%);
  border: 1px solid var(--gold-4);
  color: var(--text-on-gold, #1a1408);
  font-weight: 600;
}
.wc-btn-primary:hover {
  filter: brightness(1.05);
}

/* ---- VIP 卡片 ---- */
.vip-card {
  background: linear-gradient(135deg, #221c10 0%, #16110a 100%);
  border: 1px solid rgba(212,175,55,0.20);
  border-radius: 0;
  padding: 14px 16px;
  margin-bottom: 14px;
  cursor: pointer;
  transition: border-color .15s;
}
.vip-card:hover { border-color: rgba(212,175,55,0.35); }

.vip-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.vip-medal {
  /* 默认（无徽章图）：金色圆形文字徽章 */
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-3) 0%, var(--gold-5) 100%);
  color: var(--text-on-gold, #1a1408);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  flex-shrink: 0;
  border: 2px solid rgba(212,175,55,0.45);
  overflow: hidden;
  position: relative;
}
/* v4.8 → v4.9 → v4.10：缩小到 42px 高，按徽章图原始 aspect 显示 */
.vip-medal.has-img {
  width: auto;
  height: 42px;
  min-width: 42px;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  overflow: visible;
}
.vip-medal.has-img img {
  width: auto;
  height: 100%;
  object-fit: contain;
  display: block;
}
.vip-medal img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
/* v4.9：等级名文字浮层——往右推到 ribbon 留空区 */
.vip-medal-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 34%;        /* 跳过左边的盾牌区，落到 ribbon 中部 */
  padding-right: 6%;
  font-size: 10px;          /* v4.10：徽章变小，文字同步缩 */
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.5px;
  text-shadow: none;
  pointer-events: none;
  white-space: nowrap;
}
.vip-text {
  flex: 1;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.4;
}
.vip-text strong { color: var(--gold-3); font-weight: 500; }
.vip-arrow {
  color: var(--text-tertiary);
  font-size: 20px;
  line-height: 1;
}

.vip-bar {
  width: 100%;
  height: 5px;
  background: rgba(212,175,55,0.12);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 4px;
}
.vip-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold-3) 0%, var(--gold-5) 100%);
  border-radius: 3px;
  transition: width .35s ease-out;
}
.vip-bar-text {
  text-align: right;
  font-size: 11px;
  color: var(--text-tertiary);
}

/* ---- 功能列表 ---- */
.action-list {
  display: flex;
  flex-direction: column;
  background: linear-gradient(135deg, #1a1610 0%, #0e0b07 100%);
  border: 1px solid rgba(212,175,55,0.15);
  border-radius: 0;
  overflow: hidden;
}
.action-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(212,175,55,0.08);
  cursor: pointer;
  transition: background .15s;
  text-align: left;
  color: var(--text-primary);
}
.action-item:last-child { border-bottom: none; }
.action-item:hover { background: rgba(212,175,55,0.06); }
.action-item:active { background: rgba(212,175,55,0.10); }

.ai-icon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-3);
  flex-shrink: 0;
}
.ai-text {
  flex: 1;
  font-size: 14px;
  color: var(--text-primary);
  letter-spacing: 0.5px;
}
.ai-arrow {
  color: var(--text-tertiary);
  font-size: 18px;
  line-height: 1;
}

/* 退出登录单独红色调 */
.action-logout .ai-icon,
.action-logout .ai-text {
  color: rgba(232, 90, 79, 0.90);
}
.action-logout:hover { background: rgba(232, 90, 79, 0.08); }

/* ---- 头像可点击：钱包卡上 ---- */
.wc-avatar { cursor: pointer; transition: filter .15s; overflow: hidden; }
.wc-avatar:hover { filter: brightness(1.1); }
.wc-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---- wallet-view 二级页切换 ---- */
.wallet-view { display: none; }
.wallet-view.active { display: block; }

/* ===========================================================
   v4.11：VIP 中心页 + 历史页
   =========================================================== */

/* 顶部"历史"按钮（cash-header 右侧） */
.cash-header .vip-history-btn {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  padding: 0 10px;
  background: rgba(212,175,55,0.10);
  border: 1px solid rgba(212,175,55,0.30);
  border-radius: 14px;
  color: var(--gold-3);
  font-size: 11px;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: background .15s;
}
.cash-header .vip-history-btn:hover { background: rgba(212,175,55,0.18); }

/* 当前等级摘要卡 */
.vip-cur-card {
  background: linear-gradient(135deg, #221c10 0%, #16110a 100%);
  border: 1px solid rgba(212,175,55,0.30);
  border-radius: 0;
  padding: 14px 16px;
  margin-bottom: 14px;
}
.vip-cur-head {
  display: flex;
  align-items: center;
  gap: 14px;                  /* v4.12.1：徽章和文字之间多 2px 透气 */
  margin-bottom: 12px;
}
/* v4.12.1：徽章容器变 auto 宽 + 38px 高，让 flex 真正按图片自然宽度推开文字 */
.vip-cur-badge {
  width: auto;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}
.vip-cur-badge img {
  width: auto;
  height: 100%;
  object-fit: contain;
  display: block;
}
.vip-cur-badge .vip-cur-fallback {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-3), var(--gold-5));
  color: var(--text-on-gold, #1a1408);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: 12px;
}
/* v4.12.1：徽章上的 VIP 等级文字浮层（与等级表 / 大厅卡 / 钱包卡同款 ribbon 居右规则） */
.vip-cur-badge-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 34%;
  padding-right: 6%;
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.3px;
  text-shadow: none;
  white-space: nowrap;
  pointer-events: none;
}
.vip-cur-text { flex: 1; min-width: 0; }
.vip-cur-tip {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 4px;
}
.vip-cur-tip strong { color: var(--gold-3); font-weight: 600; }
.vip-cur-progress {
  font-size: 11px;
  color: var(--text-tertiary);
  line-height: 1.4;
}

/* v4.12：领取全部按钮 = 跟底部"领取每日"完全同款（大圆 pill） */
.vip-claim-all-btn {
  width: 100%;
  height: 44px;
  border-radius: 22px;
  background: linear-gradient(135deg, var(--gold-4) 0%, var(--gold-5) 100%);
  border: 1px solid var(--gold-4);
  color: var(--text-on-gold, #1a1408);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  cursor: pointer;
  transition: filter .15s, opacity .15s;
}
.vip-claim-all-btn:hover { filter: brightness(1.05); }
.vip-claim-all-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  filter: grayscale(.3);
}

/* 标签 */
.vip-reward-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid rgba(212,175,55,0.15);
  margin-bottom: 8px;
}
.vrt-item {
  flex: 1;
  padding: 10px 4px;
  background: none;
  border: none;
  color: var(--text-tertiary);
  font-size: 13px;
  letter-spacing: 0.5px;
  cursor: pointer;
  position: relative;
  transition: color .15s;
}
.vrt-item:hover { color: var(--gold-3); }
.vrt-item.active { color: var(--gold-4); font-weight: 500; }
.vrt-item.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 2px;
  background: var(--gold-4);
  border-radius: 2px;
  box-shadow: none;
}

/* 等级列表 */
.vip-levels-list {
  background: linear-gradient(135deg, #1a1610 0%, #0e0b07 100%);
  border: 1px solid rgba(212,175,55,0.15);
  border-radius: 0;
  margin-bottom: 12px;
}
.vll-head, .vll-row {
  display: grid;
  grid-template-columns: 90px 1fr 1fr;
  align-items: center;
  gap: 8px;
  padding: 12px 12px;
}
.vll-head {
  border-bottom: 1px solid rgba(212,175,55,0.15);
  font-size: 11px;
  color: var(--text-tertiary);
  letter-spacing: 0.5px;
  text-align: center;          /* v4.12：表头三列居中 */
}
.vll-head .col-lv { text-align: center; }
.vll-row {
  border-bottom: 1px solid rgba(212,175,55,0.06);
  font-size: 12px;
}
.vll-row:last-child { border-bottom: none; }
/* v4.12：三列内容居中 */
.vll-row .col-lv {
  display: flex;
  align-items: center;
  justify-content: center;
}
.vll-row .col-cond {
  color: var(--text-secondary);
  text-align: center;
}
.vll-row .col-reward {
  color: var(--gold-4);
  font-weight: 500;
  text-align: center;
}
/* v4.12：徽章包装容器 + VIP X 文字浮层（与大厅卡 .vip-medal-text 同样规则） */
.vll-badge-wrap {
  position: relative;
  display: inline-flex;
  height: 32px;                /* 比之前 24 大一点，文字浮层才能塞下 */
}
.vll-badge-wrap .vll-badge {
  height: 100%;
  width: auto;
  object-fit: contain;
  display: block;
}
.vll-badge-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 34%;
  padding-right: 6%;
  font-size: 8px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.3px;
  text-shadow: none;
  white-space: nowrap;
  pointer-events: none;
}
.vll-row .vll-lv-fallback {
  height: 24px;
  min-width: 36px;
  padding: 0 8px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--gold-3), var(--gold-5));
  color: var(--text-on-gold, #1a1408);
  font-size: 11px;
  font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.vll-row.is-current {
  background: rgba(212,175,55,0.05);
}
.vll-row.is-locked {
  opacity: 0.5;
}
.vll-row.is-locked .col-reward {
  color: var(--text-tertiary);
}

/* 当前等级行的小进度条 */
.vll-row-progress {
  grid-column: 1 / -1;
  margin-top: 6px;
  height: 4px;
  background: rgba(212,175,55,0.12);
  border-radius: 2px;
  overflow: hidden;
}
.vll-row-progress > .fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold-3), var(--gold-5));
  border-radius: 2px;
  transition: width .35s ease-out;
}
.vll-row-progress-text {
  grid-column: 1 / -1;
  font-size: 10px;
  color: var(--text-tertiary);
  text-align: right;
  margin-top: 2px;
}

.vll-loading {
  padding: 40px 16px;
  text-align: center;
  color: var(--text-tertiary);
  font-size: 12px;
}

/* v4.12：底部"领取当前 tab"按钮 = sticky 固定到 .content 滚动容器底部 */
.vip-claim-current-btn {
  width: 100%;
  height: 44px;
  border-radius: 22px;
  background: linear-gradient(135deg, var(--gold-4) 0%, var(--gold-5) 100%);
  border: 1px solid var(--gold-4);
  color: var(--text-on-gold, #1a1408);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  cursor: pointer;
  transition: filter .15s, opacity .15s;
  /* sticky 关键三件套 */
  position: sticky;
  bottom: 0;
  z-index: 5;
  /* 视觉上跟下方 bg 融合，避免突兀 */
  margin-top: 8px;
  margin-bottom: 0;
  box-shadow: none;
}
.vip-claim-current-btn:hover { filter: brightness(1.05); }
.vip-claim-current-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  filter: grayscale(.3);
}

/* 历史页 */
.vip-history-list {
  display: flex;
  flex-direction: column;
  background: linear-gradient(135deg, #1a1610 0%, #0e0b07 100%);
  border: 1px solid rgba(212,175,55,0.15);
}
.vh-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(212,175,55,0.06);
}
.vh-row:last-child { border-bottom: none; }
.vh-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.vh-title {
  font-size: 13px;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 6px;
}
.vh-type-pill {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 8px;
  background: rgba(212,175,55,0.15);
  color: var(--gold-3);
  font-size: 10px;
  letter-spacing: 0.5px;
}
.vh-sub {
  font-size: 11px;
  color: var(--text-tertiary);
}
.vh-amount {
  font-size: 15px;
  color: var(--gold-4);
  font-weight: 600;
}
.vh-amount .cur { font-size: 10px; margin-right: 2px; color: var(--gold-3); }
.vh-empty {
  padding: 40px 16px;
  text-align: center;
  color: var(--text-tertiary);
  font-size: 12px;
}

/* cash-header 已有 position: relative，"历史"按钮 absolute 才能放右边 */
.wallet-view[data-view="vip-center"] .cash-header,
.wallet-view[data-view="vip-history"] .cash-header {
  position: relative;
}

/* ---- 个人资料：头像预览大圆 ---- */
.profile-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 18px 0 20px;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(212,175,55,0.10);
}
.profile-avatar-big {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-3) 0%, var(--gold-5) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  font-weight: 600;
  color: var(--text-on-gold, #1a1408);
  border: 3px solid rgba(212,175,55,0.45);
  margin-bottom: 10px;
  overflow: hidden;
}
.profile-avatar-big img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.profile-id {
  font-size: 14px;
  color: var(--text-primary);
  letter-spacing: 0.5px;
  font-weight: 500;
}
.profile-nick {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-top: 3px;
}

/* ---- 钱包 modal ---- */
.wallet-modal-overlay {
  display: none;
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.65);
  z-index: 30;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.wallet-modal-overlay.open { display: flex; }
.wallet-modal-box {
  width: 100%;
  max-width: 380px;
  background: linear-gradient(135deg, #1a1610 0%, #0e0b07 100%);
  border: 1px solid rgba(212,175,55,0.30);
  border-radius: 0;
  display: flex;
  flex-direction: column;
  max-height: 80vh;
}
.wallet-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(212,175,55,0.15);
}
.wallet-modal-title {
  font-size: 15px;
  font-weight: 500;
  color: var(--gold-3);
  letter-spacing: 1px;
}
.wallet-modal-close {
  background: none;
  border: none;
  color: var(--text-tertiary);
  font-size: 22px;
  cursor: pointer;
  line-height: 1;
  padding: 0 4px;
}
.wallet-modal-close:hover { color: var(--text-primary); }
.wallet-modal-body {
  padding: 16px;
  overflow-y: auto;
}
.wallet-modal-foot {
  display: flex;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid rgba(212,175,55,0.15);
}
.wallet-modal-foot .btn-cancel,
.wallet-modal-foot .btn-ok {
  flex: 1;
  height: 40px;
  border-radius: 4px;
  font-size: 14px;
  letter-spacing: 1px;
  cursor: pointer;
  transition: filter .15s;
}
.wallet-modal-foot .btn-cancel {
  background: transparent;
  border: 1px solid var(--border-2);
  color: var(--text-tertiary);
}
.wallet-modal-foot .btn-cancel:hover { color: var(--text-primary); }
.wallet-modal-foot .btn-ok {
  background: linear-gradient(135deg, var(--gold-4) 0%, var(--gold-5) 100%);
  border: 1px solid var(--gold-4);
  color: var(--text-on-gold, #1a1408);
  font-weight: 600;
}
.wallet-modal-foot .btn-ok:hover { filter: brightness(1.05); }
.wallet-modal-foot .btn-ok:disabled { opacity: 0.6; cursor: not-allowed; }

/* form 通用 */
.form-error {
  background: rgba(232,90,79,0.10);
  border: 1px solid rgba(232,90,79,0.35);
  color: rgba(232,90,79,0.90);
  padding: 8px 10px;
  font-size: 12px;
  margin-bottom: 12px;
}
.form-error.hidden { display: none; }
.form-row { margin-bottom: 4px; }
.form-row label {
  display: block;
  font-size: 12px;
  color: var(--text-tertiary);
  margin-bottom: 6px;
  letter-spacing: 0.5px;
}
.form-row input[type="text"] {
  width: 100%;
  height: 38px;
  background: rgba(212,175,55,0.05);
  border: 1px solid rgba(212,175,55,0.25);
  border-radius: 4px;
  padding: 0 10px;
  color: var(--text-primary);
  font-size: 14px;
  box-sizing: border-box;
}
.form-row input[type="text"]:focus {
  outline: none;
  border-color: var(--gold-3);
}
.hint-text {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 4px;
}

/* 头像上传区 */
.avatar-upload {
  display: flex;
  gap: 12px;
  align-items: center;
}
.avatar-preview {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: rgba(212,175,55,0.06);
  border: 1px dashed rgba(212,175,55,0.30);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.avatar-preview .placeholder-text {
  font-size: 10px;
  color: var(--text-tertiary);
  text-align: center;
  line-height: 1.4;
  padding: 0 4px;
}
.avatar-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.avatar-upload-side {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.avatar-upload-side .upload-btn {
  background: transparent;
  border: 1px solid var(--gold-3);
  color: var(--text-primary);
  padding: 8px 14px;
  font-size: 12px;
  letter-spacing: 1px;
  cursor: pointer;
  border-radius: 4px;
  transition: background .15s;
}
.avatar-upload-side .upload-btn:hover { background: rgba(212,175,55,0.10); }
.avatar-upload-side .upload-btn.uploading { opacity: 0.7; cursor: wait; }
.avatar-upload-side .upload-meta {
  font-size: 11px;
  color: var(--text-tertiary);
}


/* =============================================================
   v4.20：红包雨活动页（bonus-view data-view="redpacket"）
   ============================================================= */

/* 顶部 hero 图 */
.rp-hero {
  width: 100%;
  margin: 0 0 16px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(212,175,55,0.30);
  background: var(--bg-2);
}
.rp-hero img {
  width: 100%;
  height: auto;
  display: block;
}

/* 倒计时 */
.rp-countdown {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 18px 0 10px;
}
.rp-cd-box {
  flex: 1;
  max-width: 76px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 4px 6px;
  background: var(--bg-2);
  border: 1.5px solid var(--gold-3);
  border-radius: 10px;
  box-shadow: 0 0 12px rgba(212,175,55,0.08) inset;
}
.rp-cd-num {
  font-family: var(--font-display, var(--font-base));
  font-size: 24px;
  font-weight: 700;
  color: var(--gold-4);
  line-height: 1;
  letter-spacing: 1px;
  font-variant-numeric: tabular-nums;
}
.rp-cd-label {
  margin-top: 4px;
  font-size: 10px;
  color: var(--text-secondary);
  letter-spacing: 2px;
}
.rp-cd-sep {
  font-size: 18px;
  color: var(--text-tertiary);
  font-weight: 600;
  padding: 0 2px;
  align-self: flex-start;
  margin-top: 10px;
}

/* 规则一行小字 */
.rp-meta {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 14px;
}
.rp-meta b {
  color: var(--text-primary);
  font-weight: 500;
}

/* 今日收益卡 */
.rp-earnings {
  background: linear-gradient(135deg, #1a1610 0%, #0e0b07 100%);
  border: 1px solid rgba(212,175,55,0.20);
  border-radius: 14px;
  padding: 14px 16px 16px;
  margin-bottom: 16px;
}
.rp-earn-label {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.rp-earn-value {
  font-size: 26px;
  font-weight: 700;
  color: var(--gold-4);
  line-height: 1.1;
  margin-bottom: 8px;
  letter-spacing: 0.5px;
  font-variant-numeric: tabular-nums;
}
.rp-earn-hint {
  font-size: 11px;
  color: var(--text-tertiary);
  line-height: 1.7;
}

/* 时段网格：24 小时 3 列 */
.rp-slot-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 80px;   /* 为底部 CTA 留位 */
}
.rp-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 9px 4px;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--border-1);
  border-radius: 10px;
  font-size: 12px;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
  transition: all .15s;
}
.rp-slot .rp-slot-ic { color: inherit; flex-shrink: 0; opacity: .85; }
.rp-slot.active {
  background: rgba(212,175,55,0.10);
  border-color: var(--gold-3);
  color: var(--gold-4);
}
.rp-slot.active .rp-slot-ic { opacity: 1; }
.rp-slot.done {
  opacity: 0.45;
}

/* v4.23：红包雨视图本身 flex column 撑满，让 CTA-bar 用 margin-top:auto 顶到底 */
.bonus-view[data-view="redpacket"].active {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
.bonus-view[data-view="redpacket"] .rp-slot-grid { margin-bottom: 16px; }

/* 底部 CTA：sticky 固定 + margin-top:auto 让它永远停在视图底部 */
.rp-cta-bar {
  position: sticky;
  bottom: -16px;             /* 抵消 .content 的 padding 让按钮贴到底沿 */
  left: 0; right: 0;
  margin: auto -16px 0;       /* margin-top:auto → flex 把它推到最下面 */
  padding: 12px 16px 14px;
  background: linear-gradient(180deg, transparent 0%, var(--bg-1) 30%);
  z-index: 3;
}
.rp-cta-hint {
  text-align: center;
  font-size: 11px;
  color: var(--text-tertiary);
  margin-bottom: 6px;
  line-height: 1.5;
}
.rp-cta-btn {
  position: relative;
  width: 100%;
  height: 46px;
  border: none;
  border-radius: 23px;
  background: linear-gradient(180deg, #ffe89a 0%, #d4af37 70%, #b08a28 100%);
  color: #1a1410;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 4px;
  cursor: pointer;
  box-shadow: 0 0 0 1px rgba(212,175,55,0.50) inset;
  transition: filter .15s, transform .08s, background .2s;
}
.rp-cta-btn:hover  { filter: brightness(1.05); }
.rp-cta-btn:active { transform: translateY(1px); }
/* v4.23：disabled 状态（非活动时段） */
.rp-cta-btn.disabled,
.rp-cta-btn:disabled {
  background: linear-gradient(180deg, #4a4035 0%, #3a322a 100%);
  color: rgba(255,255,255,0.30);
  cursor: not-allowed;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.05) inset;
  filter: none;
  letter-spacing: 4px;
}
.rp-cta-btn.disabled:active { transform: none; }
.rp-cta-dot {
  position: absolute;
  top: 8px;
  right: 14px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #e85a4f;
  box-shadow: none;
}

/* =============================================================
   v4.24 Phase 3：投注返水（cb-* 一套；原"现金返水"，v4.58 改名）
   - 顶部 hero 图（与红包雨 .rp-hero 风格一致）
   - 品牌卡片列表：每张卡含标题行（昨日返水/上周返水 + 领取按钮）+ 进度条 + 品牌图标行
   ============================================================= */
.cb-hero {
  width: 100%;
  margin: 0 0 16px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(212,175,55,0.30);
  background: var(--bg-2);
}
.cb-hero img { width: 100%; height: auto; display: block; }

.cb-loading,
.cb-empty,
.cb-error {
  text-align: center;
  padding: 36px 0;
  font-size: 12px;
}
.cb-loading { color: var(--text-tertiary); }
.cb-empty   { color: var(--text-tertiary); }
.cb-error   { color: #e85a4f; }

.cb-brand-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 16px;
}

/* 一张品牌卡 */
.cb-brand-card {
  background: linear-gradient(135deg, #1a1610 0%, #0e0b07 100%);
  border: 1px solid rgba(212,175,55,0.18);
  border-radius: 14px;
  padding: 16px 16px 14px;
}

/* 顶部标题行：昨日返水 / 上周返水 + 金额 + 按钮 */
.cb-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.cb-card-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.cb-card-label {
  font-size: 15px;
  color: var(--text-primary);
  font-weight: 500;
}
.cb-card-amount {
  font-size: 20px;
  color: var(--text-primary);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.5px;
}

/* 领取按钮（每个品牌一个独立按钮） */
.cb-claim-btn {
  flex-shrink: 0;
  padding: 7px 22px;
  border: 1px solid rgba(212,175,55,0.40);
  background: linear-gradient(135deg, rgba(212,175,55,0.08) 0%, rgba(212,175,55,0.04) 100%);
  color: var(--gold-4);
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 1.5px;
  cursor: pointer;
  transition: filter .15s, transform .08s, background .2s, color .2s;
}
.cb-claim-btn:hover  { filter: brightness(1.10); }
.cb-claim-btn:active { transform: translateY(1px); }
.cb-claim-btn.disabled,
.cb-claim-btn:disabled {
  background: rgba(120,120,120,0.08);
  border-color: rgba(170,170,170,0.20);
  color: rgba(170,170,170,0.40);
  cursor: not-allowed;
  filter: none;
}
.cb-claim-btn.disabled:active { transform: none; }

/* 进度条三段（左已投 / 中% / 右目标） */
.cb-progress-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 12px;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
  margin-bottom: 6px;
}
.cb-progress-center {
  color: var(--text-secondary);
  font-weight: 500;
}

.cb-progress-track {
  width: 100%;
  height: 4px;
  background: rgba(255,255,255,0.05);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 14px;
}
.cb-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold-3), var(--gold-4));
  border-radius: 2px;
  transition: width .35s ease-out;
}

/* 底部品牌图标 + 说明行（v4.24 Phase 3.1：logo 用大图 + 文案右对齐到框边） */
.cb-card-foot {
  display: flex;
  align-items: center;
  gap: 12px;
}
.cb-brand-logo {
  flex-shrink: 0;
  width: 96px;          /* v4.24 Phase 3.1：放大容器以承载 big_logo */
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.cb-brand-logo img {
  max-width: 100%;
  max-height: 100%;
  display: block;
  object-fit: contain;
  object-position: left center;
}
.cb-brand-logo-fallback {
  font-size: 13px;
  font-weight: 700;
  color: var(--gold-4);
  letter-spacing: 0.5px;
}

.cb-foot-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  text-align: right;          /* v4.24 Phase 3.1：文案右对齐到框右边 */
}
.cb-foot-tip { color: var(--text-tertiary); font-size: 11.5px; }
.cb-foot-tip b { color: var(--text-primary); font-weight: 600; }
.cb-foot-bet  { color: var(--text-tertiary); font-size: 11.5px; }
.cb-foot-bet b { color: var(--text-primary); font-weight: 600; }
.cb-foot-claim { color: var(--text-tertiary); font-size: 11.5px; }
.cb-foot-claim b { color: var(--gold-4); font-weight: 600; }

/* =============================================================
   v4.25：兑换码（rdm-* 一套）
   - 顶部 hero
   - 输入框 + 粘贴按钮
   - 大兑换按钮（4 态：disabled / active / loading / success）
   - 通讯平台占位
   - 活动详情
   ============================================================= */
.rdm-hero {
  width: 100%;
  margin: 0 0 22px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(212,175,55,0.30);
  background: var(--bg-2);
}
.rdm-hero img { width: 100%; height: auto; display: block; }
.rdm-hero:empty,
.rdm-hero img[src=""] { display: none; }

.rdm-input-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 10px;
  letter-spacing: 0.5px;
}

.rdm-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  padding: 0 18px 0 0;
  transition: border-color .15s, background .15s;
  margin-bottom: 16px;
}
.rdm-input-wrap:focus-within {
  border-color: var(--gold-3);
  background: rgba(212,175,55,0.04);
}
.rdm-code-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-size: 15px;
  padding: 16px 18px;
  font-family: var(--font-mono, var(--font-base));
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.rdm-code-input::placeholder {
  color: var(--text-tertiary);
  text-transform: none;
  letter-spacing: normal;
  font-family: var(--font-base);
}
.rdm-paste-btn {
  flex-shrink: 0;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 14px;
  padding: 8px 0;
  cursor: pointer;
  font-weight: 500;
  transition: color .15s;
}
.rdm-paste-btn:hover  { color: var(--gold-4); }
.rdm-paste-btn:active { color: var(--gold-3); }

/* 大兑换按钮 */
.rdm-claim-btn {
  position: relative;
  width: 100%;
  height: 56px;
  border: none;
  border-radius: 28px;
  background: linear-gradient(180deg, #ffe89a 0%, #d4af37 70%, #b08a28 100%);
  color: #1a1410;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 6px;
  cursor: pointer;
  margin-bottom: 18px;
  box-shadow: 0 0 0 1px rgba(212,175,55,0.50) inset;
  transition: filter .15s, transform .08s, background .2s;
}
.rdm-claim-btn:hover  { filter: brightness(1.05); }
.rdm-claim-btn:active { transform: translateY(1px); }
.rdm-claim-btn.disabled,
.rdm-claim-btn:disabled {
  background: linear-gradient(180deg, #4a4035 0%, #3a322a 100%);
  color: rgba(255,255,255,0.30);
  cursor: not-allowed;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.05) inset;
  filter: none;
}
.rdm-claim-btn.disabled:active { transform: none; }

/* 通讯平台占位 5 个圆圈 */
.rdm-social-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: 8px 0 28px;
}
.rdm-social-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: not-allowed;       /* 占位时不可点 */
  color: #fff;
  transition: transform .12s, filter .15s;
  opacity: 0.85;
}
.rdm-social-item:hover { transform: scale(1.05); filter: brightness(1.10); }
/* 给每个占位一个品牌色（参考截图）*/
.rdm-social-item                  { background: #4a4a4a; }  /* X 灰 */
.rdm-social-item.tg               { background: #229ED9; }
.rdm-social-item.fb               { background: #1877F2; }
.rdm-social-item.wa               { background: #25D366; }
.rdm-social-item.ig               { background: linear-gradient(135deg, #F58529, #DD2A7B, #8134AF, #515BD4); }

/* 活动详情 */
.rdm-detail {
  margin-top: 8px;
}
.rdm-detail-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 12px;
  letter-spacing: 0.5px;
}
.rdm-detail-body {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.85;
  white-space: pre-wrap;
  word-break: break-word;
}
.rdm-detail-body:empty::after {
  content: '暂无活动详情';
  color: var(--text-tertiary);
  font-style: italic;
}

/* =============================================================
   v4.26：移动端 + PWA 增量适配（不动现有规则，全部新增叠加）
   - safe-area-inset：iOS 刘海 / Dynamic Island / Home indicator
   - 100dvh：解决 iOS Safari 地址栏伸缩内容跳动
   - <400px 紧凑模式：iPhone Mini / 旧机型字号微调
   - PWA / 全屏模式：进一步压缩留白
   注：桌面端 / >480px 屏幕完全不受影响（env() 默认 = 0）
   ============================================================= */

/* —— 全局：用 100dvh 替代 100vh（高优先级覆盖原 100vh）—— */
@supports (height: 100dvh) {
  .lobby-page  { height: 100dvh; }
  .phone-shell { height: 100dvh; }
}

/* —— iOS 刘海 / Android 状态栏：顶栏让出空间 —— */
/* viewport-fit=cover 后，env(safe-area-inset-top) 在 PWA 全屏时 > 0 */
.topbar {
  padding-top: env(safe-area-inset-top);
  /* 同时增加 height 让内容仍居中（原 height: 56px 改成 min-height） */
  min-height: calc(56px + env(safe-area-inset-top));
  height: auto;
  box-sizing: border-box;
}

/* —— iOS Home indicator / Android 手势条：底栏让出空间 —— */
.bottom-nav {
  padding-bottom: env(safe-area-inset-bottom);
  min-height: calc(52px + env(safe-area-inset-bottom));
  height: auto;
  box-sizing: border-box;
}

/* —— 红包雨 / 投注返水 / 兑换码的 sticky 底部按钮，避免被 home indicator 挡 —— */
.rp-cta-bar {
  padding-bottom: calc(14px + env(safe-area-inset-bottom));
}

/* —— 大厅手机壳两侧（横屏 / iPhone Pro Max 横屏时刘海在侧面）—— */
@media (orientation: landscape) {
  .phone-shell {
    padding-left:  env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
}

/* —— 紧凑模式（<400px 小屏：iPhone Mini / 旧 Android）—— */
@media (max-width: 400px) {
  /* 顶栏紧凑 */
  .topbar {
    min-height: calc(48px + env(safe-area-inset-top));
    padding-left: 12px;
    padding-right: 12px;
  }
  .topbar .brand            { font-size: 18px; letter-spacing: 0.6px; }
  .topbar .menu-btn         { width: 32px; height: 32px; }
  .topbar .balance          { padding: 4px 10px; }
  .topbar .balance .label   { font-size: 9px; }
  .topbar .balance .amount  { font-size: 13px; }
  .topbar .balance .currency{ font-size: 10px; }
  .topbar .btn-deposit      { padding: 6px 12px; font-size: 13px; }

  /* 底栏 */
  .bottom-nav               { min-height: calc(48px + env(safe-area-inset-bottom)); }
  .bottom-nav .nav-item     { gap: 0; }

  /* 主滚动区减小 padding */
  .content                  { padding: 12px; }
}

/* —— PWA 全屏（standalone）：删掉桌面手机壳边框 + 禁用 overscroll —— */
@media (display-mode: standalone) {
  html, body                { overscroll-behavior: none; }
  .phone-shell              { border: none !important; box-shadow: none; }
  .phone-shell              { -webkit-tap-highlight-color: transparent; }
}

/* =============================================================
   v4.26.1：全局锁横滑（一劳永逸覆盖所有 tab / view）
   - 整个手机壳 + 主滚动区禁横滑
   - 只允许内部"明确需要横滑"的组件（sub-nav / carousel）自己处理
   - touch-action 在祖先用 pan-y 限定方向，子组件可用 pan-x 反向放开
   ============================================================= */
.phone-shell {
  overflow-x: hidden;                  /* 任何横向溢出都被裁掉 */
}
.content {
  overflow-x: hidden;
  touch-action: pan-y;                 /* 触摸只允许垂直滚动 */
}
/* 内部明确需要横滑的组件，反向声明 pan-x 单独放开 */
.sub-nav {
  overscroll-behavior-x: contain;      /* 横滑止于自己边界，不冒泡 */
  touch-action: pan-x;                 /* sub-nav 允许水平触摸 */
}
.carousel {
  touch-action: pan-y pinch-zoom;      /* 默认垂直；手势 swipe 由 JS 监听 touchstart/end 处理 */
}

/* —— 钱包页 v2(仿参考图) —— */
.wallet-card { border-radius: 14px; }
.wc-head { margin-bottom: 14px; }
.wc-meta { display: flex; flex-direction: column; }
.wc-name-row { order: -1; display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }
.wc-name { font-size: 17px; font-weight: 700; color: var(--text-primary); }
.wc-id-row { margin-bottom: 0; }
.wc-id { font-size: 12px; color: var(--text-tertiary); font-weight: 400; }
.wc-stats { display: flex; align-items: flex-start; gap: 12px; }
.wc-stat { flex: 1; min-width: 0; }
.wc-stat:last-child { text-align: right; }
.wc-stat-label { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-tertiary); letter-spacing: 0.5px; margin-bottom: 4px; }
.wc-stat:last-child .wc-stat-label { justify-content: flex-end; }
.wc-stat-val { font-family: var(--font-mono); font-size: 22px; font-weight: 800; color: var(--gold-5); font-variant-numeric: tabular-nums; }
.wc-stat-val .wc-currency { font-size: 14px; color: var(--gold-4); margin-right: 2px; }
.wc-stat-plain { color: var(--text-primary); }
.wc-divider { height: 1px; background: linear-gradient(90deg, transparent, rgba(212,175,55,0.35), transparent); margin: 14px 0; }
.wc-btn { border-radius: 10px; }
.vip-card { border-radius: 14px; }
.vip-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.vip-cur-level { display: flex; align-items: center; gap: 10px; }
.vip-cur-label { font-size: 13px; color: var(--text-secondary); }
.vip-detail-btn { display: inline-flex; align-items: center; gap: 2px; padding: 6px 14px; background: rgba(255,255,255,0.06); border: 1px solid rgba(212,175,55,0.25); border-radius: 999px; font-size: 12px; color: var(--gold-4); white-space: nowrap; }
.vip-req { margin-top: 10px; font-size: 12px; color: var(--text-secondary); line-height: 1.5; }
.vip-req strong { color: var(--gold-4); font-weight: 600; }
.vip-req-sub { color: var(--text-tertiary); }
.action-list { border-radius: 14px; overflow: hidden; }

/* —— 首页(game-home)v3:背景占满手机壳,固定不滚动 —— */
/* cash 页:内容区不滚动;首页铺满整个 .phone-shell(顶栏/底栏盖在上面遮挡) */
/* .content 改 static,让 .ghome 以 .phone-shell 为定位基准铺满整屏 */
body[data-page="cash"] .content { overflow: hidden; padding: 0; position: static; }

.ghome { position: absolute; inset: 0; z-index: 1; overflow: hidden; background: #0b070a; }

/* 背景整图(admin 上传整屏图;拉伸填满,保证触发%对齐) */
.gh-bg { position: absolute; inset: 0; background-size: 100% 100%; background-position: center; background-repeat: no-repeat; }

/* 触发基础:默认透明热区;有图则叠该位置的图 */
.gh-trig {
  position: absolute;
  border: none; padding: 0; margin: 0;
  background: transparent center / contain no-repeat;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .06s;
  z-index: 1;
}
.gh-trig:active { transform: scale(0.97); }

/* 固定触发位置(= 整屏 941×1672 的百分比) */
.gh-spin  { left: 25.5%; top: 53.8%; width: 49%; height: 10.6%; } /* SPIN:对齐背景图里的 SPIN 金牌热区(941×1672 实测 26.7%/54.7%/46.4%/8.9% + 微边距) */
.gh-card1 { left: 6.2%; top: 74%; width: 27.2%; height: 14.5%; } /* 活动卡上移 */
.gh-card2 { left: 35%;  top: 74%; width: 29%;   height: 14.5%; }
.gh-card3 { left: 65%;  top: 74%; width: 29.1%; height: 14.5%; }

/* —— SPIN 缓慢呼吸放大动效 —— */
/* 低端机适配:只动 transform:scale(走合成层,不触发 layout/paint,逐帧最省);
   提升为独立图层(will-change/backface)避免背景跟着重绘;
   幅度小(6%)、周期慢(2.6s);系统开启"减少动态效果/省电"时自动关闭。 */
.gh-spin {
  transform-origin: center center;
  will-change: transform;
  backface-visibility: hidden;
  animation: gh-spin-pulse 2.6s ease-in-out infinite;
}
@keyframes gh-spin-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .gh-spin { animation: none; }
}


/* Jackpot 动态数字(叠在背景奖池面板上;壳的 jackpot 动画写 #cash-jp-amount) */
.gh-jackpot { position: absolute; left: 0; width: 100%; top: 52%; text-align: center; z-index: 1; pointer-events: none; }
.gh-jp-num {
  font-family: 'sans-serif-condensed', 'Roboto Condensed', Impact, 'Arial Narrow', sans-serif;
  font-weight: 900; font-size: 34px; letter-spacing: -0.5px; font-stretch: condensed;
  background: linear-gradient(180deg, #ffe9a0, #f0c04a 55%, #d4902f);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  text-shadow: 0 2px 10px rgba(0,0,0,.6);
}

/* 右侧动态按钮竖排(顶栏下方) */
.gh-btnstack {
  position: absolute; top: 9%; right: 2%;
  display: flex; flex-direction: column; gap: 10px;
  width: 15%; z-index: 2;
}
.gh-sbtn {
  width: 100%; aspect-ratio: 1 / 1;
  border: none; padding: 0; cursor: pointer;
  background: center / contain no-repeat;
  -webkit-tap-highlight-color: transparent;
  transition: transform .06s;
}
.gh-sbtn:active { transform: scale(0.95); }
.gh-sbtn.no-img {
  aspect-ratio: auto;
  background: linear-gradient(180deg, #e23a2e, #a81818);
  border: 1px solid #f0d27c; border-radius: 10px;
  color: #ffe9a0; font-size: 11px; font-weight: 700;
  padding: 8px 4px; line-height: 1.2;
}

/* =============================================================
   皇室风换皮 v2(顶栏 + 钱包背景;纯换图,不动布局)
   用 .topbar 前缀提升优先级,盖过原 .topbar .brand/.balance/.btn-deposit
   ============================================================= */
.topbar { background: transparent; border-bottom: none; overflow: visible; }

/* 菜单 */
.topbar #btn-menu {
  width: 42px; height: 42px; padding: 0; flex-shrink: 0;
  background: url("/assets/skin/topbar-menu.png") center / contain no-repeat;
  border: none; box-shadow: none;
}
.topbar #btn-menu svg { display: none; }

/* V587 logo —— 关掉文字裁剪,图才显示;文本隐藏 */
.topbar .brand {
  width: 104px; height: 66px; margin-left: 6px;
  background: url("/assets/skin/topbar-logo.png") center / contain no-repeat;
  -webkit-background-clip: border-box; background-clip: border-box;
  -webkit-text-fill-color: transparent; color: transparent;
  font-size: 0; letter-spacing: 0; text-indent: -9999px; overflow: hidden; white-space: nowrap;
  filter: none; transform: translateY(-2px);
}

/* 存款 */
.topbar .btn-deposit {
  width: 108px; height: 42px; min-width: 0; padding: 0;
  background: url("/assets/skin/topbar-deposit.png") center / contain no-repeat;
  border: none; box-shadow: none;
}
.topbar .btn-deposit svg, .topbar .btn-deposit span { display: none; }

/* 余额深色金边胶囊 */
.topbar .balance {
  background: linear-gradient(180deg, #16305e 0%, #0e2144 100%);
  border: 1px solid rgba(240,200,80,0.55);
  border-radius: 12px; padding: 5px 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 2px 6px rgba(0,0,0,0.25);
}
.topbar .balance .label { color: #cdd8ef; }
.topbar .balance .amount, .topbar .balance .amount .currency { color: #f6cf55; }
.topbar .balance #bal-amount { color: #f6cf55; }
.topbar .balance .refresh-icon { color: #cdd8ef; }

/* —— 钱包页背景:城堡图(替换米白) —— */
body[data-page="wallet"] .phone-shell {
  background: #0b1430 url("/assets/skin/wallet-bg.jpg") center top / cover no-repeat;
}

/* =============================================================
   壳:移除 hover 特效 → 改按下反馈;存款按钮放大到与余额相当
   (hover 覆盖均 re-assert 常态,保护换皮不被原 hover 盖回;不改结构)
   ============================================================= */
/* 1) 去掉 hover 变化(保持常态外观) */
.topbar .menu-btn:hover,
.topbar #btn-menu:hover { transform: none; }
.topbar .btn-deposit:hover {
  transform: none; box-shadow: none;
  background: url("/assets/skin/topbar-deposit.png") center / contain no-repeat;
}
.topbar .balance:hover {
  transform: none;
  background: linear-gradient(180deg, #16305e 0%, #0e2144 100%);
  border-color: rgba(240,200,80,0.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 2px 6px rgba(0,0,0,0.25);
}
.bottom-nav .nav-item:hover .nav-icon { transform: none; }
/* 余额刷新图标常显(原来只在 hover 显示) */
.topbar .balance .refresh-icon { opacity: 1; }

/* 2) 按下反馈(替代 hover) */
.topbar #btn-menu:active,
.topbar .btn-deposit:active,
.topbar .balance:active,
.bottom-nav .nav-item:active {
  transform: scale(0.93);
  transition: transform .08s ease;
}

/* 3) 存款按钮放大,与账户余额胶囊相当 */
.topbar .btn-deposit { width: 104px; height: 42px; }

/* =============================================================
   钱包「个人信息板块」换皮 v3 —— 绝对定位 + 容器单位(cqw)
   目标:精确贴合设计图,且任意手机宽度下比例不变(不再松散/凌乱)
   卡框线:上43% / 下63% / 竖线62%;三段按此绝对定位。
   仅样式与定位,DOM 不变。
   ============================================================= */
body[data-page="wallet"] .wallet-card { width: 100%;
  position: relative; container-type: inline-size;
  background: url("/assets/skin/wc-frame.png") center / 100% 100% no-repeat;
  border: none; border-radius: 18px; aspect-ratio: 1448 / 1086;
  padding: 0; margin-bottom: 14px; overflow: visible;
}
/* 头部 band 0-43% */
body[data-page="wallet"] .wc-head {
  position: absolute; left: 5%; right: 5%; top: 12%; height: 36%;
  display: flex; align-items: center; gap: 3.5cqw; margin: 0;
}
body[data-page="wallet"] .wc-avatar {
  width: 20cqw; height: 20cqw; flex-shrink: 0;
  background: url("/assets/skin/wc-avatar.png") center / contain no-repeat;
  border: none; border-radius: 50%; color: transparent; font-size: 0; box-shadow: none;
}
body[data-page="wallet"] .wc-avatar img { display: none; }  /* 固定默认国王头像,隐藏玩家上传图 */
body[data-page="wallet"] .wc-meta { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
body[data-page="wallet"] .wc-name-row { order: -1; display: flex; align-items: center; gap: 2.5cqw; margin-bottom: 1cqw; }
body[data-page="wallet"] .wc-name { color: #fff; font-size: 5cqw; font-weight: 800; line-height: 1.05; text-shadow: 0 1px 2px rgba(0,30,80,.6); }
body[data-page="wallet"] .wc-id-row { display: flex; align-items: center; gap: 1.5cqw; margin: 0; }
body[data-page="wallet"] .wc-id { color: #cfe0ff; font-size: 3.4cqw; font-weight: 600; text-shadow: 0 1px 1px rgba(0,20,60,.5); }
body[data-page="wallet"] .wc-copy {
  width: 4cqw; height: 4cqw; padding: 0; margin-left: 1cqw; flex-shrink: 0;
  background: url("/assets/skin/wc-copy.png") center / contain no-repeat; color: transparent;
}
body[data-page="wallet"] .wc-copy svg { display: none; }
body[data-page="wallet"] .wc-vip-mini:not(.has-img),
body[data-page="wallet"] .wc-vip-mini.is-newbie {
  height: 6cqw; min-width: 17cqw; padding: 0 2.5cqw 0 7cqw; margin-left: 0; overflow: visible;
  background: url("/assets/skin/wc-vip.png") center / 100% 100% no-repeat;
  border: none; border-radius: 0; color: #fff; font-size: 2.8cqw; font-weight: 800; text-shadow: 0 1px 1px rgba(120,40,0,.6);
}
body[data-page="wallet"] .wc-cs {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  width: 10.5cqw; height: 10.5cqw; flex-shrink: 0;
  background: url("/assets/skin/wc-notify.png") center / contain no-repeat; border: none; border-radius: 0;
}
body[data-page="wallet"] .wc-cs svg { display: none; }
/* 数据 band 43-63% */
body[data-page="wallet"] .wc-stats {
  position: absolute; left: 6%; right: 5%; top: 45%; height: 18%;
  display: flex; align-items: center; gap: 0;
}
body[data-page="wallet"] .wc-stat { min-width: 0; }
body[data-page="wallet"] .wc-stat:first-child { flex: 0 0 61%; text-align: left; padding-right: 2cqw; }
body[data-page="wallet"] .wc-stat:last-child { flex: 1; text-align: left; padding-left: 4cqw; }
body[data-page="wallet"] .wc-stat-label { display: flex; align-items: center; gap: 1.2cqw; color: #cfe0ff; font-size: 3cqw; margin-bottom: .6cqw; letter-spacing: 0; text-shadow: 0 1px 1px rgba(0,20,60,.5); }
body[data-page="wallet"] .wc-stat:last-child .wc-stat-label { justify-content: flex-start; }
body[data-page="wallet"] .wc-stat-val { font-size: 6.6cqw; font-weight: 900; line-height: 1; font-family: "Arial Black","Helvetica Neue",Arial,sans-serif; -webkit-text-stroke: .6px currentColor; }
body[data-page="wallet"] .wc-stat:first-child .wc-stat-val {
  padding-left: 7.5cqw; color: #ffd964;
  background: url("/assets/skin/wc-coin.png") left center / 6cqw no-repeat;
}
body[data-page="wallet"] .wc-stat:first-child .wc-currency { color: #ffcf55; font-size: 4cqw; }
body[data-page="wallet"] .wc-stat:last-child .wc-stat-val {
  display: inline-block; padding-left: 7cqw; color: #fff;
  background: url("/assets/skin/wc-gift.png") left center / 5.5cqw no-repeat;
}
body[data-page="wallet"] .wc-bal-refresh { color: #cfe0ff; padding: 0 0 0 1cqw; }
body[data-page="wallet"] .wc-divider { display: none; }
/* 按钮 band 63-~92% */
body[data-page="wallet"] .wc-actions {
  position: absolute; left: 8%; right: 8%; top: 66%; height: 17.5%;
  display: flex; gap: 4cqw; margin: 0;
}
body[data-page="wallet"] .wc-btn {
  flex: 1; height: 100%; border: none; border-radius: 0;
  background: center / 100% 100% no-repeat; font-size: 4.5cqw; font-weight: 800; letter-spacing: .5px; padding-left: 6.5cqw;
}
body[data-page="wallet"] .wc-btn[data-wallet-go="deposit"] { background-image: url("/assets/skin/wc-deposit.png"); color: #4a3208; text-shadow: 0 1px 1px rgba(255,235,160,.55); }
body[data-page="wallet"] .wc-btn[data-wallet-go="withdraw"] { background-image: url("/assets/skin/wc-withdraw.png"); color: #fff; text-shadow: 0 1px 2px rgba(0,30,90,.6); }
body[data-page="wallet"] .wc-btn-primary:hover { filter: none; }
body[data-page="wallet"] .wc-btn:active { transform: scale(.97); transition: transform .08s ease; }

/* ============================================================
   底栏导航换皮:瓦片图标(常态/高亮)+ 文字浮于瓦片下部预留区
   映射: games=剑 bonus=礼盒 cash=城堡(首页) invite=双人 wallet=钱袋
   admin 改导航名(nav-label)仍生效;图标统一用瓦片。
   ============================================================ */
.bottom-nav { min-height: calc(64px + env(safe-area-inset-bottom)); height: auto; overflow: visible; }
.bottom-nav .nav-item {
  background-repeat: no-repeat;
  background-position: center top;
  background-size: auto 100%;
}
.bottom-nav .nav-item .nav-icon { display: none; }
.bottom-nav .nav-item[data-tab="games"]  { background-image: url("/assets/skin/nav-games.png"); }
.bottom-nav .nav-item[data-tab="bonus"]  { background-image: url("/assets/skin/nav-bonus.png"); }
.bottom-nav .nav-item[data-tab="cash"]   { background-image: url("/assets/skin/nav-home.png"); }
.bottom-nav .nav-item[data-tab="invite"] { background-image: url("/assets/skin/nav-invite.png"); }
.bottom-nav .nav-item[data-tab="wallet"] { background-image: url("/assets/skin/nav-wallet.png"); }
.bottom-nav .nav-item.active[data-tab="games"]  { background-image: url("/assets/skin/nav-games-on.png"); }
.bottom-nav .nav-item.active[data-tab="bonus"]  { background-image: url("/assets/skin/nav-bonus-on.png"); }
.bottom-nav .nav-item.active[data-tab="cash"]   { background-image: url("/assets/skin/nav-home-on.png"); }
.bottom-nav .nav-item.active[data-tab="invite"] { background-image: url("/assets/skin/nav-invite-on.png"); }
.bottom-nav .nav-item.active[data-tab="wallet"] { background-image: url("/assets/skin/nav-wallet-on.png"); }
.bottom-nav .nav-item .nav-label {
  position: absolute; left: 0; right: 0; bottom: 3px; margin: 0;
  text-align: center; font-size: 9px; font-weight: 700; letter-spacing: 0; line-height: 1;
  color: #eaf2ff; text-shadow: 0 1px 2px rgba(0,16,48,.95), 0 0 3px rgba(0,0,0,.7);
}
.bottom-nav .nav-item.active .nav-label { color: #ffdf7a; }
.bottom-nav .nav-item.active::before { display: none; }
.bottom-nav .nav-item:hover { transform: none; }
.bottom-nav .nav-item:active { transform: scale(.92); transition: transform .08s ease; }

/* —— 底栏:背景透明 + 瓦片拉大填满整行 —— */
.bottom-nav {
  background: transparent;
  border-top: none;
  box-shadow: none;
  padding: 0;
  min-height: calc(80px + env(safe-area-inset-bottom));
}
.bottom-nav .nav-item { background-size: auto 100%; background-position: center center; }
.bottom-nav .nav-item .nav-label { bottom: 5px; font-size: 10px; }

/* ============================================================
   钱包功能列表换皮:米色长条行 + 彩色3D图标 + 银色箭头
   行背景 act-bar;图标按 data-wallet-action 映射;退出登录红字
   ============================================================ */
body[data-page="wallet"] .action-list {
  background: none; border: none; border-radius: 0; overflow: visible;
  display: flex; flex-direction: column; gap: 0;
}
body[data-page="wallet"] .action-item {
  position: relative; overflow: visible;
  background: url("/assets/skin/act-bar.png") center / 100% 100% no-repeat;
  border: none; border-bottom: none; border-radius: 0;
  height: 54px; padding: 0 16px 0 14px; gap: 12px;
}
body[data-page="wallet"] .action-item:hover { filter: brightness(1.03); background: url("/assets/skin/act-bar.png") center / 100% 100% no-repeat; }
body[data-page="wallet"] .action-item:active { transform: scale(.985); filter: brightness(.96); }
body[data-page="wallet"] .action-item .ai-icon {
  width: 42px; height: 42px; margin-top: -3px; color: #2f2a20;
  background-position: center; background-repeat: no-repeat; background-size: contain;
}
body[data-page="wallet"] .action-item[data-wallet-action="cash-history"] .ai-icon { background-image: url("/assets/skin/act-cash.png"); }
body[data-page="wallet"] .action-item[data-wallet-action="bet-history"]  .ai-icon { background-image: url("/assets/skin/act-bet.png"); }
body[data-page="wallet"] .action-item[data-wallet-action="bonus"]       .ai-icon { background-image: url("/assets/skin/act-bonus.png"); }
body[data-page="wallet"] .action-item[data-wallet-action="cs"]          .ai-icon { background-image: url("/assets/skin/act-cs.png"); }
body[data-page="wallet"] .action-item[data-wallet-action="security"]    .ai-icon { background-image: url("/assets/skin/act-security.png"); }
body[data-page="wallet"] .action-item[data-wallet-action="agent"]       .ai-icon { background-image: url("/assets/skin/act-agent.png"); }
body[data-page="wallet"] .action-item .ai-text { color: #2f2a20; font-size: 15px; font-weight: 700; letter-spacing: .5px; }
body[data-page="wallet"] .action-item .ai-arrow {
  width: 11px; height: 16px; color: transparent; font-size: 0; flex-shrink: 0;
  background: url("/assets/skin/act-chevron.png") center / contain no-repeat;
}
/* 退出登录:红字 + 门图标红(保留 svg) */
body[data-page="wallet"] .action-logout .ai-icon { color: #d6382f; }
body[data-page="wallet"] .action-logout .ai-text { color: #d6382f; }

/* ============================================================
   钱包 VIP 卡换皮:蓝底金角框(vip-bg)+ 内容适配蓝底
   ============================================================ */
body[data-page="wallet"] .vip-card {
  background: url("/assets/skin/vip-bg.png") center / 100% 100% no-repeat;
  border: none; border-radius: 0;
  padding: 15px 20px 14px; margin-bottom: 14px;
}
body[data-page="wallet"] .vip-card:hover { border: none; }
body[data-page="wallet"] .vip-top { margin-bottom: 9px; }
body[data-page="wallet"] .vip-cur-label { color: #eaf2ff; font-weight: 700; text-shadow: 0 1px 2px rgba(0,20,60,.6); }
body[data-page="wallet"] .vip-detail-btn {
  background: linear-gradient(180deg, rgba(12,44,96,.6), rgba(6,24,60,.6));
  border: 1px solid rgba(240,200,90,.6);
  color: #ffdf7a; text-shadow: 0 1px 1px rgba(0,20,60,.6);
}
body[data-page="wallet"] .vip-bar {
  height: 7px; background: rgba(2,18,48,.55);
  border: 1px solid rgba(240,200,90,.28); box-sizing: border-box;
}
body[data-page="wallet"] .vip-bar-fill { background: linear-gradient(90deg,#ffd964 0%,#f0a83c 100%); }
body[data-page="wallet"] .vip-req { color: #cfe0ff; margin-top: 8px; text-shadow: 0 1px 1px rgba(0,20,60,.5); }
body[data-page="wallet"] .vip-req strong { color: #ffdf7a; }
body[data-page="wallet"] .vip-req-sub { color: #9fc0f0; }

/* —— 资料卡+VIP卡整体上移 & 两卡拉近(wc-frame 上下各~10%透明,用负边距吃掉) —— */
body[data-page="wallet"] .content { padding-top: 2px; }
body[data-page="wallet"] .wallet-card { margin-top: -6px; margin-bottom: -24px; }

/* ============================================================
   侧边栏(抽屉)换皮:城堡图背景 + 藏青渐变遮罩(保证浅色文字可读)
   ============================================================ */
.drawer {
  background:
    linear-gradient(180deg, rgba(5,11,28,0.14) 0%, rgba(4,9,24,0.12) 42%, rgba(2,6,18,0.34) 100%),
    url("/assets/skin/drawer-bg.jpg") center top / cover no-repeat;
  border-right: 1px solid rgba(240,200,90,0.40);
  text-shadow: 0 1px 3px rgba(0,0,0,0.90), 0 0 3px rgba(0,0,0,0.6);
}

/* ============================================================
   侧边栏顶部换皮:V587 logo / 客服 / 关闭 图标 + JACKPOT 面板框
   ============================================================ */
.drawer-top { background: none; border-bottom: none; }
/* V587 logo 图 */
.dt-logo {
  width: 108px; height: 73px; font-size: 0; color: transparent; margin-left: -2px; margin-top: 0;
  background: url("/assets/skin/dr-logo.png") center / contain no-repeat;
}
.dt-logo span { font-size: 0; }
/* 客服 / 关闭:蓝金瓦片按钮 */
.dt-cs, .dt-close {
  width: 40px; height: 40px; border-radius: 0; background: none; color: transparent; font-size: 0;
  transition: transform .12s ease, filter .12s ease;
}
.dt-cs { background: url("/assets/skin/dr-cs.png") center / contain no-repeat; }
.dt-close { background: url("/assets/skin/dr-close.png") center / contain no-repeat; }
.dt-cs svg { display: none; }
.dt-cs:hover { background: url("/assets/skin/dr-cs.png") center / contain no-repeat; filter: brightness(1.13) drop-shadow(0 0 4px rgba(255,215,120,.5)); transform: scale(1.07); }
.dt-close:hover { background: url("/assets/skin/dr-close.png") center / contain no-repeat; filter: brightness(1.13) drop-shadow(0 0 4px rgba(255,215,120,.5)); transform: scale(1.07); }
.dt-cs:active, .dt-close:active { transform: scale(.92); transition: transform .08s ease; }
/* JACKPOT 面板:框图铺底 + 文字三段绝对定位 */
.drawer-jackpot {
  position: relative; container-type: inline-size; width: auto;
  aspect-ratio: 1437 / 720;
  background: url("/assets/skin/dr-jackpot.png") center / 100% 100% no-repeat;
  border: none; border-radius: 0; padding: 0; margin: 10px -16px 0; text-align: center;
}
.jp-fire { display: none; }
.jp-head {
  position: absolute; left: 0; right: 0; top: 31%; transform: translateY(-50%); margin: 0;
  font-size: 5.6cqw; font-weight: 900; letter-spacing: 2px; color: #fff;
  text-shadow: 0 1px 0 rgba(120,10,10,.9), 0 2px 3px rgba(80,0,0,.6);
}
.jp-amount {
  position: absolute; left: 0; right: 0; top: 61%; transform: translateY(-50%); margin: 0;
  font-family: var(--font-mono); font-size: 8.4cqw; font-weight: 900; letter-spacing: -1.6px; -webkit-text-stroke: 0.7px #ffd23f;
  font-variant-numeric: tabular-nums;
  color: #ffd23f; -webkit-text-fill-color: #ffd23f;
  background: none; -webkit-background-clip: border-box; background-clip: border-box;
  text-shadow: 0 1px 0 #6e3200, 0 2px 0 #5a2800, 0 2px 4px rgba(50,15,0,.5), 0 0 7px rgba(255,190,60,.35);
}
.jp-sub {
  position: absolute; left: 0; right: 0; top: 84%; transform: translateY(-50%); margin: 0;
  font-size: 3.2cqw; letter-spacing: 1px; color: #dce9ff; text-shadow: 0 1px 1px rgba(0,20,60,.6);
}

/* =============================================================
   首页固定比例舞台 (lock 500×784 设计比例)
   开发时按 500×784 画面定位,各设备上等比缩放居中,不变形;
   触发热区的 % 坐标直接对应设计画面坐标,跨设备一致。
   占满壳内:按设计比例裁剪铺满(cover),竖直方向完整、左右超出部分裁掉,不变形。
   ============================================================= */
body[data-page="cash"] .ghome {
  display: flex; align-items: center; justify-content: center;
  background: #0b1430 url("/uploads/home/1791648566120_5f5602.png") center center / cover no-repeat;
}
body[data-page="cash"] #gh-backdrop {
  display: none;
  position: absolute; inset: 0; z-index: 0;
  background-position: center; background-repeat: no-repeat; background-size: cover;
  filter: blur(18px) brightness(.66); transform: scale(1.15);
  pointer-events: none;
}
body[data-page="cash"] #gh-stage {
  position: relative; z-index: 1; overflow: hidden;
  aspect-ratio: 941 / 1672;           /* fallback≈背景图比例(JS 会按实际图精确覆盖) */
  min-height: 100%; width: auto; height: auto; flex: none;  /* 首帧按图比例填满壳高(cover)；JS sizeStage 再精确 */
}



/* =============================================================
   新奖金页(bonus-v2)—— 沉浸式背景 + 每日登录模块
   仅作用于 body.bonus-v2(新页),旧 bonus.html 不受影响。
   面板锁设计比例 900/292,内部用 cqw 排布,各图尺寸=设计比例。
   ============================================================= */
body.bonus-v2 .content { overflow: hidden; padding: 0; position: static; }
body.bonus-v2 .bhome { position: absolute; inset: 0; z-index: 1; overflow: hidden; background: #0b1430; }
body.bonus-v2 .bh-bg {
  position: absolute; inset: 0; z-index: 0;
  background: url("/assets/skin/bonus2-bg.jpg") center center / cover no-repeat;
}
/* 叠加层:城堡墙(透明顶,盖在原背景上,位于内容之下) */
body.bonus-v2 .bh-overlay {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url("/assets/skin/bonus2-overlay.png?v=1791905097399") center bottom / cover no-repeat;
}
/* BONUS logo:叠在英雄区第一只(最左)哥布林上方 */
body.bonus-v2 .bh-logo {
  position: absolute; z-index: 1; left: 0%; top: 7%; width: 48%; height: auto;
  pointer-events: none; filter: drop-shadow(0 4px 10px rgba(0,0,0,.55));
}
body.bonus-v2 .bh-scroll {
  position: absolute; inset: 0; z-index: 1;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding-bottom: calc(76px + env(safe-area-inset-bottom));
}
/* 顶部留白:露出背景英雄区(国王+哥布林);面板顶≈屏幕 38.5% */
body.bonus-v2 .bh-hero-gap { height: 40vh; min-height: 225px; }

/* ===== 每日登录模块(面板锁 900/292 比例)===== */
body.bonus-v2 .dl-panel {
  width: 100%; max-width: 680px; margin: 0 auto;
  box-sizing: border-box;
  background: none;
  container-type: inline-size;
  display: flex; flex-direction: column;
  padding: 2.4cqw 1.2cqw 2.8cqw;
}

/* 头部:日历 + 标题 + 倒计时 */
body.bonus-v2 .dl-head { flex: none; display: flex; align-items: center; gap: 2.4cqw; margin-bottom: 1.8cqw; padding-right: 8%; }
body.bonus-v2 .dl-cal { width: 10.6cqw; height: auto; flex: none; filter: drop-shadow(0 2px 3px rgba(0,0,0,.4)); }
body.bonus-v2 .dl-titles { flex: 1 1 auto; min-width: 0; }
body.bonus-v2 .dl-title {
  font-size: 6.4cqw; font-weight: 900; color: #fff; line-height: 1.05; white-space: nowrap;
  text-shadow: 0 1px 0 #10306a, 0 2px 4px rgba(0,0,0,.5); letter-spacing: .5px;
}
body.bonus-v2 .dl-sub {
  font-size: 3.3cqw; color: #cfe0ff; margin-top: .5cqw;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.bonus-v2 .dl-timer { flex: none; display: flex; align-items: center; gap: .8cqw; margin-right: 1cqw; }
body.bonus-v2 .dl-clock { width: 5.3cqw; height: auto; }
body.bonus-v2 .dl-pill {
  background: url("/assets/skin/daily/02_timer_pill_blank.webp") 100% 100% no-repeat;
  font-size: 2.9cqw; color: #ffe9a0; white-space: nowrap;
  padding: 1.1cqw 3.1cqw; line-height: 1.6;
}
body.bonus-v2 .dl-pill b { color: #fff; font-weight: 800; margin-left: .4cqw; }

/* 槽位行:7 个每日 + 右侧大奖(大奖更大并上溢)*/
body.bonus-v2 .dl-slotrow { display: flex; align-items: flex-end; gap: 1.4cqw; margin-top: 2.2cqw; }
body.bonus-v2 .dl-slots { display: flex; align-items: flex-end; gap: 0.7cqw; padding-right: 0; flex: 1 1 auto; min-width: 0; }

body.bonus-v2 .dl-slot {
  flex: 1 1 0; min-width: 0; background: none; border: none; padding: 0;
  cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: .6cqw;
  -webkit-tap-highlight-color: transparent;
}
body.bonus-v2 .dl-slot:active { transform: scale(.95); }
body.bonus-v2 .dl-slot-art {
  position: relative; width: 100%; aspect-ratio: 130 / 172;
  background-size: 100% 100%; background-repeat: no-repeat;
  display: flex; align-items: center; justify-content: center;
}
body.bonus-v2 .dl-rw {
  width: 100%; height: auto; object-fit: contain; position: relative; z-index: 2;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.45));
}
body.bonus-v2 .dl-ov { position: absolute; pointer-events: none; }
body.bonus-v2 .dl-check { width: 42%; bottom: 1%; left: 50%; transform: translateX(-50%); z-index: 3; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
body.bonus-v2 .dl-halo { width: 94%; bottom: 7%; left: 50%; transform: translateX(-50%); z-index: 1; }
body.bonus-v2 .dl-lock { width: 44%; top: 46%; left: 50%; transform: translate(-50%,-50%); z-index: 3; }
/* 每日奖励金额标签 */
body.bonus-v2 .dl-amt { font-size: 2.5cqw; color: #ffe08a; font-weight: 800; line-height: 1; text-shadow: 0 1px 2px rgba(0,0,0,.6); margin-top: .3cqw; }
body.bonus-v2 .dl-dnum { font-size: 3.3cqw; color: #ffe9a0; font-weight: 700; white-space: nowrap; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
body.bonus-v2 .dl-slot[data-state="claimed"] .dl-dnum { color: #8fe39a; }

/* 右侧累计大奖:比日常槽位更大,宝箱上溢面板顶部 */
body.bonus-v2 .dl-grand {
  position: static; flex: 0 0 auto; width: 18%; align-self: flex-end;
  background: none; border: none; padding: 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: .6cqw;
  -webkit-tap-highlight-color: transparent;
}
body.bonus-v2 .dl-grand:active { transform: scale(.96); }
body.bonus-v2 .dl-grand-art {
  position: relative; width: 100%; aspect-ratio: 170 / 192;
  background: none;   /* 已移除大奖框,仅保留宝箱(14 自带底座+星星) */
}
body.bonus-v2 .dl-grand-chest {
  position: absolute; width: 132%; height: auto; left: 50%; bottom: -6%;
  transform: translateX(-50%);
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.55));
}
body.bonus-v2 .dl-grand-label { color: #ffd98a; }
body.bonus-v2 .dl-grand.is-claimed { filter: grayscale(.5) brightness(.8); }

/* =============================================================
   每日任务模块 + 三个活动卡(bonus-v2)—— 不含活动剩余时间
   ============================================================= */
/* ---- 每日任务面板 v2(整合图:剑盾/横幅/按钮框/宝藏已内置,仅叠文字+进度)---- */
body.bonus-v2 .ct-panel {
  position: relative; width: 96%; max-width: 700px; margin: -6px auto 0;
  aspect-ratio: 2167 / 726; box-sizing: border-box;
  background: url("/assets/skin/event/ct-panel-v2.webp") center / 100% 100% no-repeat;
  container-type: inline-size;
}
/* 标题(叠在蓝色横幅上) */
body.bonus-v2 .ct-title {
  position: absolute; left: 26%; top: 15%;
  font-size: 5cqw; font-weight: 900; color: #fff; line-height: 1; letter-spacing: .5px;
  text-shadow: 0 1px 0 #0d2b6b, 0 2px 5px rgba(0,0,0,.5);
}
/* 副标题 */
body.bonus-v2 .ct-sub {
  position: absolute; left: 23%; top: 44%;
  font-size: 2.75cqw; color: #dbe7ff; white-space: nowrap; text-shadow: 0 1px 2px rgba(0,0,0,.6);
}
/* 进度条 */
body.bonus-v2 .ct-track {
  position: absolute; left: 7%; top: 63%; width: 52%; aspect-ratio: 700 / 66;
  background: url("/assets/skin/event/05_progress_track_empty.webp") center / 100% 100% no-repeat;
  overflow: hidden;
}
body.bonus-v2 .ct-fill {
  position: absolute; left: 0; top: 0; height: 100%; width: var(--ct-progress, 30%);
  background: url("/assets/skin/event/06_progress_fill_full.webp") left center / auto 100% no-repeat;
}
body.bonus-v2 .ct-ptext {
  position: absolute; left: 57.5%; top: 64%; z-index: 2;
  font-size: 3.6cqw; font-weight: 800; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.85);
}
/* 查看任务(叠在内置金色按钮框上,透明可点) */
body.bonus-v2 .ct-view {
  position: absolute; left: 73.5%; top: 28.5%; width: 23.5%; height: 27%;
  background: none; border: none; padding: 0; cursor: pointer;
  color: #5a2d00; font-weight: 900; font-size: 4.2cqw; text-shadow: 0 1px 0 rgba(255,255,255,.5);
  -webkit-tap-highlight-color: transparent; display: flex; align-items: center; justify-content: center;
}
body.bonus-v2 .ct-view:active { transform: scale(.96); }

/* ---- 三个活动卡(37/38/39 无按钮版 + 叠标题/按钮)---- */
body.bonus-v2 .ev-grid { display: flex; gap: 1.6%; width: 94%; max-width: 680px; margin: -14px auto 0; }
body.bonus-v2 .ev-card {
  flex: 1 1 0; min-width: 0; position: relative; aspect-ratio: 400 / 445;
  background-color: transparent; background-size: 100% 100%; background-repeat: no-repeat; background-position: center;
  border: none; padding: 0; cursor: pointer; display: block;
  -webkit-appearance: none; appearance: none;
  container-type: inline-size; -webkit-tap-highlight-color: transparent;
}
body.bonus-v2 .ev-card:active { transform: scale(.97); }
body.bonus-v2 .ev-cashback { background-image: url("/assets/skin/event/37_cashback_card_no_button.webp"); }
body.bonus-v2 .ev-wheel    { background-image: url("/assets/skin/event/38_wheel_card_no_button.webp"); }
body.bonus-v2 .ev-ranking  { background-image: url("/assets/skin/event/39_ranking_card_no_button.webp?r=2"); }
body.bonus-v2 .ev-titles { position: absolute; top: 6.5%; left: 0; width: 100%; text-align: center; padding: 0 6%; box-sizing: border-box; }
body.bonus-v2 .ev-title { display: block; font-size: 15cqw; font-weight: 900; color: #fff; line-height: 1; text-shadow: 0 1px 0 rgba(0,0,0,.45), 0 2px 5px rgba(0,0,0,.6); }
body.bonus-v2 .ev-sub { display: block; font-size: 6cqw; color: #fff; margin-top: 3.5%; line-height: 1.12; text-shadow: 0 1px 3px rgba(0,0,0,.75); }
body.bonus-v2 .ev-btn {
  position: absolute; left: 50%; bottom: 5%; transform: translateX(-50%);
  width: 84%; aspect-ratio: 290 / 120;
  background: url("/assets/skin/event/24_gold_blank_button.webp") center / 100% 100% no-repeat;
  display: flex; align-items: center; justify-content: center;
  color: #5a2d00; font-weight: 900; font-size: 8cqw; text-shadow: 0 1px 0 rgba(255,255,255,.45);
}


/* —— 游戏页(home.html)背景图 —— */
body[data-page="games"] .phone-shell {
  background: #0b1430 url("/assets/skin/games-bg.jpg?v=1791905097399") center top / cover no-repeat;
}
/* 模块区蓝底:只盖住轮播图下方的模块面板,两侧留出城堡(靠 .content 内边距),
   轮播图在面板之外 → 不染蓝 */
body[data-page="games"] .content { padding-top: 5px; }
body[data-page="games"] .carousel {
  margin-bottom: 0;
  border-radius: 14px;
  border: 1.5px solid rgba(246,206,96,0.9);
}
body[data-page="games"] .games-modbg {
  background: linear-gradient(180deg,
    rgba(22,48,94,0) 0px,
    rgba(22,48,94,0.8) 34px,
    rgba(18,40,80,0.8) 50%,
    rgba(14,33,68,0.8) 100%);
  border: none;
  border-radius: 0 0 16px 16px;
  padding: 8px 10px 12px;
  margin-top: -6px;
  margin-bottom: 8px;
}

/* =============================================================
   游戏页模块重建(促销卡 + 继续游戏 + 热门游戏 + 游戏厂商)
   —— 仅游戏页用到这些类
   ============================================================= */
/* 促销三卡 */
body[data-page="games"] .kingkong { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; margin-top: 10px; margin-bottom: 12px; }
body[data-page="games"] .kk-item {
  min-width: 0; height: auto; aspect-ratio: 294/156; padding: 0; border: none; border-radius: 12px;
  position: relative; overflow: hidden; cursor: pointer; font-family: inherit; display: block;
  container-type: size;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 2px 5px rgba(0,0,0,.25);
}
body[data-page="games"] .kk-1 { background: linear-gradient(135deg,#8a5cf0 0%,#5a2fb0 100%); }
body[data-page="games"] .kk-2 { background: linear-gradient(135deg,#f0605a 0%,#b02f2f 100%); }
body[data-page="games"] .kk-3 { background: linear-gradient(135deg,#3f8bf0 0%,#2f4fb0 100%); }
body[data-page="games"] .kk-txt {
  position: absolute; left: 9%; top: 14%; right: 33%; z-index: 1;
  display: flex; flex-direction: column; gap: 8%; align-items: flex-start;
}
body[data-page="games"] .kk-tt { color: #fff; font-size: 17cqh; font-weight: 800; line-height: 1.12; text-align: left; white-space: nowrap; text-shadow: 0 1px 2px rgba(0,0,0,.45); }
body[data-page="games"] .kk-btn {
  font-size: 12.5cqh; color: #6a3d06; font-weight: 800; letter-spacing: .2px; line-height: 1;
  background: linear-gradient(180deg,#ffe9a0,#e6b94a); border-radius: 999px; padding: 4% 9%; white-space: nowrap;
}
body[data-page="games"] .kk-ic { position: absolute; right: 5%; bottom: 6%; font-size: 44cqh; line-height: 1; z-index: 0; filter: drop-shadow(0 2px 2px rgba(0,0,0,.3)); }

/* 跑马灯:按设计图改薄 + 金色描边框 */
body[data-page="games"] .notice-bar {
  aspect-ratio: 867/78; gap: 7px; padding: 0 12px; margin-bottom: 12px;
  background: linear-gradient(90deg, rgba(22,62,132,.55), rgba(14,44,104,.5));
  border: 1.5px solid rgba(255,215,120,.55); border-left: 1.5px solid rgba(255,215,120,.55);
  border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(255,215,120,.12);
}
body[data-page="games"] .notice-bar .notice-icon { color: #ffd98a; flex-shrink: 0; }
body[data-page="games"] .notice-bar .notice-text { color: #e8f0ff; }
body[data-page="games"] .notice-bar .notice-more { color: #ffd98a; }

/* 区块头 */
body[data-page="games"] .g-sec { margin-bottom: 16px; }
body[data-page="games"] .g-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
body[data-page="games"] .g-title { display: flex; align-items: center; gap: 6px; color: #fff; font-size: 15px; font-weight: 800; text-shadow: 0 1px 3px rgba(0,12,45,.7); }
body[data-page="games"] .g-fire { font-size: 15px; line-height: 1; }
body[data-page="games"] .g-more { background: none; border: none; color: #cfe0ff; font-size: 11px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 3px; font-family: inherit; }
body[data-page="games"] .g-arr { color: #ffd98a; font-size: 14px; line-height: 1; }

/* 继续游戏:2 大卡 */
body[data-page="games"] .cg-row { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; padding-bottom: 2px; }
body[data-page="games"] .cg-row::-webkit-scrollbar { display: none; }
body[data-page="games"] .cg-card { position: relative; flex: 0 0 48%; scroll-snap-align: start; aspect-ratio: 427/183; border-radius: 10px; overflow: hidden; border: 2px solid rgba(246,206,96,0.9); background: #0b2a5c; cursor: pointer; padding: 0; }
body[data-page="games"] .cg-img { width: 100%; height: 100%; object-fit: cover; display: block; }
body[data-page="games"] .cg-fb { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; padding: 6px; text-align: center; }
body[data-page="games"] .cg-card::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 52%; background: linear-gradient(0deg, rgba(0,0,0,.78), transparent); pointer-events: none; z-index: 1; }
body[data-page="games"] .cg-name { position: absolute; z-index: 2; left: 8px; bottom: 22px; color: #ffd76a; font-size: 13px; font-weight: 800; text-shadow: 0 1px 3px rgba(0,0,0,.85); max-width: 70%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body[data-page="games"] .cg-tag { position: absolute; z-index: 2; left: 8px; bottom: 6px; background: rgba(0,0,0,.5); color: #ffe6b0; font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 6px; }
body[data-page="games"] .cg-play { position: absolute; z-index: 2; right: 8px; bottom: 8px; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(180deg,#ffe08a,#e0a830); display: flex; align-items: center; justify-content: center; color: #5a3a06; box-shadow: 0 2px 5px rgba(0,0,0,.35); }

/* 热门游戏:3 列网格 */
body[data-page="games"] .hot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
body[data-page="games"] .hg-card { position: relative; aspect-ratio: 283/174; border-radius: 10px; overflow: hidden; border: 2px solid rgba(246,206,96,0.9); background: #0b2a5c; cursor: pointer; padding: 0; }
body[data-page="games"] .hg-img { width: 100%; height: 100%; object-fit: cover; display: block; }
body[data-page="games"] .hg-fb { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 11px; padding: 4px; text-align: center; }
body[data-page="games"] .hg-badge { position: absolute; right: 4px; top: 4px; background: rgba(0,0,0,.62); color: #ffd98a; font-size: 8px; font-weight: 800; padding: 1px 5px; border-radius: 6px; max-width: 60%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body[data-page="games"] .hg-name { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(0deg, rgba(0,0,0,.78), transparent); color: #ffd76a; font-size: 10px; font-weight: 800; padding: 12px 4px 4px; text-align: center; text-shadow: 0 1px 3px rgba(0,0,0,.85); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 游戏厂商:横向条 */
body[data-page="games"] .ven-strip { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
body[data-page="games"] .ven-strip::-webkit-scrollbar { display: none; }
body[data-page="games"] .vp-pill { flex: 0 0 auto; min-width: 66px; height: 42px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.08); border: 1px solid rgba(255,215,120,.35); border-radius: 10px; cursor: pointer; padding: 4px 12px; }
body[data-page="games"] .vp-pill.active { border-color: #ffd98a; background: rgba(255,215,120,.16); }
body[data-page="games"] .vp-pill img { max-height: 26px; max-width: 54px; object-fit: contain; display: block; }
body[data-page="games"] .vp-fb { color: #fff; font-size: 12px; font-weight: 700; white-space: nowrap; }
body[data-page="games"] .vp-pill.vp-hot .vp-fb { font-weight: 800; }
body[data-page="games"] .vp-pill.vp-hot.active .vp-fb { color: #ffd76a; }

/* 空/加载态 */
body[data-page="games"] .g-empty, body[data-page="games"] .g-loading { grid-column: 1/-1; color: rgba(255,255,255,.72); font-size: 12px; text-align: center; padding: 16px 8px; }

/* —— 顶栏余额:两行(标题 / 币图+金额+刷新 同一行)—— */
.topbar .balance .bal-row { display: flex; align-items: center; gap: 4px; }
.topbar .balance .bal-coin { width: 17px; height: 17px; object-fit: contain; display: block; flex-shrink: 0; filter: drop-shadow(0 1px 1px rgba(0,0,0,.3)); }
.topbar .balance .bal-row .refresh-icon { margin-left: 1px; }

/* —— 顶栏余额:去标题 + 加粗 + 数字等宽防跳动(存款按钮不随数字变动)—— */
.topbar .balance .label { display: none; }
.topbar .balance .amount { font-weight: 800; white-space: nowrap; }
.topbar .balance .amount .currency { font-weight: 800; opacity: .85; }
.topbar .balance #bal-amount {
  display: inline-block; text-align: left;
  font-variant-numeric: tabular-nums; font-weight: 800; white-space: nowrap;
}

/* 顶栏余额紧凑化(给大额余额留空间,存款不被挤出)*/
.topbar .balance { padding: 6px 10px; }
.topbar .balance .bal-coin { width: 15px; height: 15px; }
.topbar .balance .bal-row { gap: 3px; }
.topbar .right { gap: 6px; min-width: 0; }
.topbar .balance { min-width: 0; }

/* —— 顶栏「在线客服」图标(存款按钮右侧)—— */
.topbar .btn-cs {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  padding: 0; border: none; background: transparent;
  cursor: pointer; line-height: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.topbar .btn-cs img {
  width: 100%; height: 100%; object-fit: contain; display: block;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.35));
}
.topbar .btn-cs:active { transform: scale(0.92); transition: transform .08s ease; }

/* —— 顶栏为客服图标腾出空间:微缩 logo / 固定存款宽度(不被挤压)/ 客服图标 —— */
.topbar .brand { width: 76px; margin-left: 4px; }
.topbar .btn-deposit { flex: 0 0 auto; width: 90px; min-width: 90px; }
.topbar .btn-cs { width: 36px; height: 36px; }
.topbar .right { gap: 4px; }
/* 余额胶囊内部再紧凑,让大额数字有更大字号空间 */
.topbar .balance { padding: 6px 7px; }
.topbar .balance .bal-coin { width: 14px; height: 14px; }
.topbar .balance .bal-row { gap: 2px; }

/* —— 大厅游戏页悬浮窗(最多3个;固定不随 .content 滚动;滚动滑向右侧隐藏,停住复现) —— */
.gh-float {
  position: absolute;
  right: 10px;
  top: 60%;                        /* 中间靠下 */
  transform: translateY(-50%);
  z-index: 15;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  transition: transform .4s cubic-bezier(.22,.61,.36,1), opacity .4s ease;
}
.gh-float[hidden] { display: none; }
.gh-float.gh-float-away {           /* 滚动时整体滑向右侧隐藏 */
  transform: translate(130%, -50%);
  opacity: 0;
  pointer-events: none;
}
.gh-float-item {
  position: relative;
  width: 78px;
  height: 78px;
}
.gh-float-img {
  width: 100%; height: 100%;
  border: none; padding: 0; margin: 0;
  background: transparent center / contain no-repeat;
  cursor: pointer;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.45));
  animation: gh-float-bob 2.8s ease-in-out infinite;
  -webkit-tap-highlight-color: transparent;
}
@keyframes gh-float-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}
.gh-float-close {
  position: absolute;
  top: -6px; right: -6px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: rgba(10,15,30,.72);
  border: 1px solid rgba(255,255,255,.45);
  color: #fff;
  font-size: 13px; line-height: 1;
  cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  z-index: 1;
}
@media (prefers-reduced-motion: reduce) { .gh-float-img { animation: none; } }


/* ==== 游戏页：游戏卡爱心 + 收藏 pill（追加） ==== */
body[data-page="games"] .g-heart {
  position: absolute; left: 3px; top: 3px; z-index: 3; width: 24px; height: 24px;
  border: none; cursor: pointer; padding: 0; border-radius: 50%;
  background: rgba(0,0,0,.42); display: flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
body[data-page="games"] .g-heart svg { width: 15px; height: 15px; display: block; }
body[data-page="games"] .g-heart .g-ht {
  fill: none; stroke: #ffffff; stroke-width: 2;
  transition: fill .15s ease, stroke .15s ease, transform .15s ease;
}
body[data-page="games"] .g-heart.faved .g-ht { fill: #ff4d6d; stroke: #ff4d6d; }
body[data-page="games"] .g-heart.faved { background: rgba(0,0,0,.5); }
body[data-page="games"] .g-heart:active svg { transform: scale(1.25); }
body[data-page="games"] .vp-pill.vp-fav .vp-fb { font-weight: 800; }
body[data-page="games"] .vp-pill.vp-fav.active .vp-fb { color: #ffd76a; }


/* ==== 游戏页：合作伙伴（追加） ==== */
body[data-page="games"] .partner-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
body[data-page="games"] .partner-logo {
  aspect-ratio: 16 / 9; border-radius: 10px;
  border: 1.5px solid rgba(246,206,96,0.45);
  background: rgba(6,20,46,0.55);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  color: #ffd98a;
}
body[data-page="games"] .partner-logo svg { width: 28px; height: 28px; opacity: .88; filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
body[data-page="games"] .partner-logo .pl-cap {
  font-size: 9px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #9fb4da;
}


/* ==== 游戏页：网站信息（追加） ==== */
body[data-page="games"] .si-sec { margin-top: 2px; }
body[data-page="games"] .si-top {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  flex-wrap: nowrap; margin-bottom: 12px;
}
body[data-page="games"] .si-certs { display: flex; align-items: center; gap: 6px; }
body[data-page="games"] .si-cert {
  font-size: 10px; font-weight: 800; border-radius: 10px; padding: 4px 9px;
  display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; line-height: 1;
}
body[data-page="games"] .si-21 {
  color: #ffb020; border: 1.6px solid #ffb020; border-radius: 50%;
  width: 30px; height: 30px; padding: 0; font-size: 11px;
}
body[data-page="games"] .si-gc { color: #dfe8f7; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22); }
body[data-page="games"] .si-ga { color: #1a1205; background: linear-gradient(180deg,#ffcf6b,#e0a830); }

body[data-page="games"] .si-socials { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
body[data-page="games"] .si-soc {
  width: 28px; height: 28px; border-radius: 50%; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; color: #fff;
}
body[data-page="games"] .si-soc svg { width: 16px; height: 16px; display: block; }
body[data-page="games"] .si-tg { background: #2AABEE; }
body[data-page="games"] .si-fb { background: #1877F2; }
body[data-page="games"] .si-wa { background: #25D366; }
body[data-page="games"] .si-ig { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }

body[data-page="games"] .si-license {
  font-size: 11px; line-height: 1.75; color: #aebcd6; margin: 0 0 10px; letter-spacing: .2px;
}
body[data-page="games"] .si-terms {
  margin: 0 0 14px; padding-left: 16px; color: #aebcd6; font-size: 11px; line-height: 1.75;
}
body[data-page="games"] .si-terms li { margin-bottom: 1px; }

body[data-page="games"] .si-dl { display: flex; align-items: center; gap: 10px; }
body[data-page="games"] .si-mascot {
  flex: 0 0 126px; display: flex; align-items: center; justify-content: center;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.45));
}
body[data-page="games"] .si-mascot img { width: 100%; height: auto; display: block; }
body[data-page="games"] .si-dl-main { flex: 1 1 auto; min-width: 0; }
body[data-page="games"] .si-dl-tip {
  background: rgba(0,0,0,.3); border-radius: 10px; padding: 9px 12px; margin-bottom: 9px;
  color: #dfe8f7; font-size: 11px; line-height: 1.6;
}
body[data-page="games"] .si-dl-btns { display: flex; flex-direction: column; gap: 8px; }
body[data-page="games"] .si-dl-btn {
  display: flex; align-items: center; gap: 11px; text-decoration: none;
  background: rgba(0,0,0,.42); border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px; padding: 8px 14px; color: #fff;
}
body[data-page="games"] .si-dl-btn:active { background: rgba(0,0,0,.55); }
body[data-page="games"] .si-dl-ic { flex: 0 0 auto; display: flex; }
body[data-page="games"] .si-dl-ic svg { width: 22px; height: 22px; display: block; }
body[data-page="games"] .si-dl-txt { display: flex; flex-direction: column; line-height: 1.2; }
body[data-page="games"] .si-dl-sm { font-size: 9px; color: #b9c6de; }
body[data-page="games"] .si-dl-lg { font-size: 14px; font-weight: 800; }


/* ==== 游戏页：网站信息社媒补充（追加） ==== */
body[data-page="games"] .si-x { background: #0a0a0a; }
body[data-page="games"] .si-soc[hidden] { display: none !important; }


/* ==== 游戏页：网站信息完善（追加） ==== */
body[data-page="games"] .si-certs { display: flex; align-items: center; flex: 0 0 auto; }
body[data-page="games"] .si-certs-img { height: 26px; width: auto; display: block; }

/* 认证 / 合作徽章行 */
body[data-page="games"] .si-certs2 {
  display: flex; align-items: center; justify-content: center;
  margin: 16px 0 12px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.09);
}
body[data-page="games"] .si-cert-strip { width: 300px; max-width: 86%; height: auto; display: block; }
body[data-page="games"] .si-c2 {
  display: inline-flex; align-items: center; gap: 5px;
  color: #cbb488; font-size: 10px; font-weight: 700; opacity: .85;
}
body[data-page="games"] .si-c2 svg { width: 14px; height: 14px; }
body[data-page="games"] .si-c2-oc {
  flex-direction: column; gap: 1px; line-height: 1.05; text-align: center;
  color: #e6b76c; border: 1px solid rgba(240,170,60,.5); border-radius: 8px; padding: 4px 11px;
}
body[data-page="games"] .si-c2-oc b { font-size: 9px; font-weight: 800; letter-spacing: .4px; }
body[data-page="games"] .si-c2-oc i { font-size: 8px; font-style: normal; letter-spacing: 2.5px; }

/* 品牌 logo */
body[data-page="games"] .si-logo { text-align: center; margin: 4px 0 10px; }
body[data-page="games"] .si-logo img {
  width: 130px; max-width: 46%; height: auto; display: inline-block;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.45));
}

/* 版权 */
body[data-page="games"] .si-copy { text-align: center; color: #8ea2c7; font-size: 11px; padding-bottom: 2px; }


/* ==== 游戏页：全部游戏入口按钮（追加） ==== */
body[data-page="games"] .all-games-cta {
  display: flex; align-items: center; justify-content: center;
  width: 82%; max-width: 270px; aspect-ratio: 900 / 132; margin: 4px auto 14px; text-decoration: none; cursor: pointer;
  background: url("/assets/skin/allgames-btn.png?v=1791905097399") center / 100% 100% no-repeat;
}
body[data-page="games"] .all-games-cta span {
  color: #6a3d06; font-size: 13px; font-weight: 900; letter-spacing: 2px;
  text-shadow: 0 1px 0 rgba(255,255,255,.45);
}
body[data-page="games"] .all-games-cta:active { transform: translateY(1px); filter: brightness(.97); }


/* ==== 游戏页：品牌栏 All 固定按钮（追加） ==== */
body[data-page="games"] .ven-wrap { display: flex; align-items: center; gap: 8px; }
body[data-page="games"] .ven-wrap .ven-strip { flex: 1 1 auto; min-width: 0; margin: 0; }
body[data-page="games"] .ven-all {
  flex: 0 0 auto; height: 42px; min-width: 50px; padding: 0 16px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px; text-decoration: none; cursor: pointer;
  border: 1px solid rgba(255,215,120,.6);
  background: linear-gradient(180deg, rgba(255,215,120,.24), rgba(255,215,120,.1));
  color: #ffd76a; font-size: 13px; font-weight: 800; letter-spacing: 1px;
}
body[data-page="games"] .ven-all:active { filter: brightness(.95); }


/* ==== 奖金页：模块蓝底面板（与游戏页一致）==== */
body.bonus-v2 .bonus-modbg {
  background: linear-gradient(180deg,
    rgba(22,48,94,0) 0px,
    rgba(22,48,94,0.8) 40px,
    rgba(18,40,80,0.8) 50%,
    rgba(14,33,68,0.8) 100%);
  border-radius: 0 0 16px 16px;
  padding: 8px 2px 18px;
  margin: 0 2px;
}


/* ==== 首页：宝箱格子（对齐背景图已画好的 4 个格子）==== */
/* 背景图里 4 个格子位置：x 8.7%~91.2%，y 72.2%~83.8%（背景 100% 100% 拉伸，图%=舞台%）*/
body[data-page="cash"] .gh-chests {
  position: absolute; left: 8.6%; width: 82.6%; top: 72.2%; height: 11.6%;
  display: flex; gap: 2.3%; z-index: 6;
}
body[data-page="cash"] .ghc-slot {
  flex: 1 1 0; position: relative;
  display: flex; align-items: center; justify-content: center;
}
/* 背景已画格子框，这里不再画边框/底色 */
body[data-page="cash"] .ghc-slot.empty .ghc-plus { color: rgba(255,235,185,.5); font-size: 20px; font-weight: 300; }
body[data-page="cash"] .ghc-img {
  width: 92%; height: 92%; object-fit: contain; display: block;
  margin-top: -6%; filter: drop-shadow(0 2px 5px rgba(0,0,0,.5));
}
body[data-page="cash"] .ghc-act {
  position: absolute; bottom: -4%; left: 50%; transform: translateX(-50%);
  border: none; cursor: pointer; font-family: inherit; font-weight: 800; font-size: 10px;
  padding: 2px 11px; border-radius: 9px; white-space: nowrap; line-height: 1.4;
}
body[data-page="cash"] .ghc-unlock { background: linear-gradient(180deg,#9bc0ff,#4a74d6); color: #fff; }
body[data-page="cash"] .ghc-open {
  background: linear-gradient(180deg,#ffe08a,#e0a830); color: #5a3a06;
  box-shadow: 0 0 9px rgba(255,210,100,.9); animation: ghcPulse 1.2s ease-in-out infinite;
}
@keyframes ghcPulse { 0%,100%{transform:translateX(-50%) scale(1)} 50%{transform:translateX(-50%) scale(1.09)} }
body[data-page="cash"] .ghc-timer {
  position: absolute; bottom: -4%; left: 50%; transform: translateX(-50%);
  background: rgba(0,0,0,.66); color: #ffd98a; font-size: 9px; font-weight: 800;
  padding: 2px 8px; border-radius: 8px; white-space: nowrap;
}

/* —— 修复奖金/首页切换闪屏：壳首帧即铺场景图(与游戏/邀请/钱包同机制) —— */
body.bonus-v2 .phone-shell {
  background: #0b1430 url("/assets/skin/bonus2-bg.jpg") center center / cover no-repeat;
}
body[data-page="cash"] .phone-shell {
  background: #0b1430;   /* 占位纯色：只防白屏，不再露出含 mock 文字的设计图 ghome-bg.jpg */
}


/* ============ [实验·仅 bonus.html 的 .bonus-exp] 奖金页：正常文档流 + 背景固定于手机壳(参考 games/wallet) ============ */
body.bonus-exp .content { position: relative; overflow-y: auto; padding: 0; }
body.bonus-exp .bhome { position: static; overflow: visible; background: transparent; }
/* 背景挪到 .phone-shell(max-width:440px 固定)：不随窗口放大、不随内容滚动 —— 同 games/wallet 机制 */
body.bonus-exp .phone-shell {
  background:
    url("/assets/skin/bonus-logo.webp?v2") left 2% top 6% / 48% auto no-repeat,
    url("/assets/skin/bonus2-overlay.png?v=1791905097399") center bottom / cover no-repeat,
    url("/assets/skin/bonus2-bg.jpg") center center / cover no-repeat,
    #0b1430;
}
/* 原 div/img 背景层改由 phone-shell 承载，隐藏掉 */
body.bonus-exp .bh-bg,
body.bonus-exp .bh-overlay,
body.bonus-exp .bh-logo { display: none; }
body.bonus-exp .bh-scroll { position: static; overflow: visible; z-index: 1; }
body.bonus-exp .bonus-modbg { position: relative; z-index: 1; }

/* 首页首帧占位：gh-bg 先用当前配置图，避免切换时裸露 ghome 深蓝(JS 的 home-config 会再覆盖) */
body[data-page="cash"] #gh-bg { background-image: url("/uploads/home/1791648566120_5f5602.png"); }