/* --- 全局样式重置 --- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

html {
  font-family: "PingFang SC", "Microsoft YaHei", -apple-system, sans-serif;
}
a {
  text-decoration: none;
}
body {
  user-select: none;
}
.mb59 {
  margin-left: 0.39rem;
  margin-right: 0.42rem;
  margin-bottom: 0.59rem;
}

body {
  margin: 0 auto; /* PC端居中 */
  min-height: 100vh;
  background-color: #66a1dc;
  /* 整体背景大渐变 */
  /* background-image: linear-gradient(180deg, #99cdff 0%, #1c68d4 15%, #082672 40%, #082672 100%); */
  color: #333;
  overflow-x: hidden;
}

img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}

/* 辅助类 */
.flex {
  display: flex;
}
.flex-col {
  flex-direction: column;
}
.flex-center {
  align-items: center;
  justify-content: center;
}
.flex-between {
  justify-content: space-between;
}
.flex-wrap {
  flex-wrap: wrap;
}

/* --- 1. 头部区域 (Header) --- */
.header {
  position: relative;
  width: 100%;
  height: 7.15rem;
  background: url("images/banner.png") no-repeat center top;
  background-size: 100% 100%;
  z-index: 1;
}

.header .download {
  position: absolute;
  top: 4.2rem;
  left: 1.5rem;
  width: 4.7rem;
  height: 1rem;
  /* background: #00f2fe; */
}

.header .download a {
  display: block;
  width: 100%;
  height: 100%;
}

.content {
  position: relative;
  background: url("images/background.png") no-repeat center top;
  background-size: cover;
  background-position: center -6.5359rem;
}

/* --- 2. 通告栏 (Announcement) --- */
.notice-bar {
  width: 11.8rem; /* 左右留边 */
  height: 1.2rem;
  margin: -0.6rem auto 0; /* 向上重叠 */
  background: #fff;
  border-radius: 0.6rem;
  position: relative;
  z-index: 5;
  box-shadow: 0 0.1rem 0.3rem rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.55rem;
  color: #333;
  font-weight: bold;
  /* font-weight: 600; */
}
.notice-bar span.highlight {
  color: #e60012;
  font-weight: bold;
  margin: 0;
}

/* --- 4. 主功能入口 (Grid Buttons) --- */
.main-menu {
  margin: 0 auto;
  padding: 0.59rem 0.28rem;
  padding-bottom: 0;
  /* background: #87c3f3; */
  /* margin: 0 auto; */
  display: flex;
  flex-wrap: wrap;
}

.menu-btn {
  width: 5.94rem;
  height: 2.27rem;
  margin-bottom: 0.64rem;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  /* 默认背景色，实际请用切图 */
  background-size: cover;
}

.menu-btn:nth-of-type(even) {
  margin-left: 0.42rem;
}

.menu-btn .title {
  font-size: 0.6rem;
  font-weight: 800;
  color: #fff;
  margin-left: 1.98rem;
  margin-top: 0.6rem;
}

.btn-register {
  background-image: url(images/menu_newman_red.png);
  background-size: cover;
}
.btn-bigmoney {
  background-image: url(images/big_money_no_problem.png);
  background-size: cover;
}
.btn_many_plays {
  background-image: url(images/many_plays.png);
  background-size: cover;
}
.btn_day_caijin {
  background-image: url(images/day_lottery_money.png);
  background-size: cover;
}
.btn_day_fanli {
  background: url(images/day_fanli.png) no-repeat center top;
  background-size: cover;
  background-position: center;
}
.btn_max_fandian {
  background-image: url(images/max_fandian.png);
  background-size: cover;
}
.navbar {
  margin-left: 0.3rem;
  margin-right: 0.3rem;
  margin-bottom: 0.52rem;
}
.recharge-activity {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 1.45rem;
  background: url(images/activity_title_bg.png);
  background-size: cover;
  margin-left: 0.98rem;
  margin-right: 0.98rem;
}
.recharge-activity .title {
  font-size: 0.8rem;
  /* font-family: "Alibaba"; */
  text-align: center;
  font-weight: bold;
  color: #fff;
  padding-bottom: 0.08rem;
  /* 1. 设置描边宽度和颜色 */
  /* 这里的宽度可以设大一点，因为只有一半会露在外面 */
  -webkit-text-stroke: 0.04rem #57a2fc;
  /* 2. 关键属性：先画描边，再画填充（这样填充会压在描边上面，实现只向外扩） */
  paint-order: stroke fill;
  /* 3. 底部投影 */
  /* 由于使用了描边，建议用 drop-shadow 滤镜，它能完美包裹住描边后的外轮廓 */
  filter: drop-shadow(0 0.04rem 0px #3d65b8);
}
/* 按钮内的文字/标签模拟 */
.btn-content {
  text-align: right;
  color: #fff;
}
.btn-title {
  font-size: 0.35rem; /* 小标题 */
  color: #ffe400; /* 黄色 */
  font-weight: 800;
  margin-bottom: 0.1rem;
  text-shadow: 0.0625rem 0.0625rem 0.125rem rgba(0, 0, 0, 0.5);
  display: block;
}
.btn-tag {
  background: #e60012;
  color: #fff;
  padding: 0.1rem 0.3rem;
  border-radius: 0.3rem;
  font-size: 0.4rem;
  font-weight: bold;
  display: inline-block;
  box-shadow: 0 0.05rem 0.1rem rgba(0, 0, 0, 0.3);
}

/* --- 5. 分类导航栏 (Pill Nav) --- */
.quick-nav {
  width: 12rem;
  margin: 0.3rem auto;
  background: linear-gradient(
    180deg,
    #69bcab 0%,
    #207e6b 100%
  ); /* 绿色渐变底 */
  border-radius: 1.1rem; /* 胶囊形状 */
  height: 2.2rem;
  display: flex;
  align-items: center;
  justify-content: space-around;
  border: 0.125rem solid #a3e6d8;
  box-shadow: 0 0.1rem 0.3rem rgba(0, 0, 0, 0.3);
}
.q-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #fff;
  font-size: 0.3rem;
  font-weight: bold;
}
.q-icon {
  width: 1.2rem;
  height: 1.2rem;
  background: #fff; /* 图标占位 */
  border-radius: 50%;
  margin-bottom: 0.1rem;
}

/* --- 通用标题组件 --- */
.section-header {
  text-align: center;
  margin: 0.6rem 0 0.3rem;
}
.section-title-img {
  height: 1.2rem; /* 模拟标题图片高度 */
  background: rgba(255, 255, 255, 0.2); /* 占位 */
  border-radius: 0.2rem;
  width: 80%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: bold;
  font-size: 0.5rem;
  text-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.5);
  /* 实际请使用类似 "全网最强首存活动来袭" 的切图 */
}

/* --- 6. 优惠活动表格 --- */
.promo-table-container {
  width: 11.8rem;
  margin: 0 auto;
  background: #fff;
  border-radius: 0.4rem;
  overflow: hidden;
  box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.2);
}
.table-head-bar {
  background: linear-gradient(90deg, #4facfe, #00f2fe);
  color: #fff;
  text-align: center;
  padding: 0.25rem 0;
  font-size: 0.5rem;
  font-weight: bold;
}
table {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
}
thead th {
  background: #fff;
  color: #000;
  font-weight: 800;
  font-size: 0.5rem;
  padding: 0.3rem 0;
  border-bottom: 0.02rem solid #13abf2;
  /* border-right: 0.0625rem solid #eee; */
}
tbody td {
  padding: 0.3rem 0;
  font-size: 0.45rem;
  font-weight: bold;
  color: #333;
  /* border-bottom: 0.0625rem solid #f0f0f0;
  border-right: 0.0625rem solid #f0f0f0; */
}
tbody tr:nth-child(even) td {
  background-color: #f2f8ff; /* 隔行变色 */
}
/* 中间列彩金文字颜色 */
tbody td:nth-child(2) {
  color: #000;
}
/* 右侧合并单元格特殊样式 */
.merged-cell {
  background-color: #fff !important;
  vertical-align: middle;
  color: #333;
  font-weight: bold;
  line-height: 1.4;
}

.table-footer {
  text-align: center;
  padding: 0.3rem;
  font-size: 0.32rem;
  color: #333;
  font-weight: 600;
  background: #fff;
}

/* --- 7. 优质服务 (Good Service) --- */
.service-grid {
  width: 12rem;
  margin: 0.4rem auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.service-item {
  width: 5.9rem;
  background: #fff;
  border-radius: 0.2rem;
  padding: 0.3rem;
  margin-bottom: 0.2rem;
  display: flex;
  align-items: center;
  box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.1);
}
.svc-icon {
  width: 1.2rem;
  height: 1.2rem;
  background: linear-gradient(135deg, #ffd000, #ff9900);
  border-radius: 50%;
  margin-right: 0.2rem;
  flex-shrink: 0;
}
.svc-text h4 {
  font-size: 0.38rem;
  color: #333;
  margin-bottom: 0.05rem;
}
.svc-text p {
  font-size: 0.26rem;
  color: #888;
}

/* --- 8. 热门游戏 (Popular Games) --- */
.games-grid {
  width: 12rem;
  margin: 0 auto 1rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.game-card {
  width: 5.9rem;
  height: 7rem; /* 约 43.75rem 高 */
  margin-bottom: 0.2rem;
  border-radius: 0.3rem;
  overflow: hidden;
  position: relative;
  background: #fff;
  border: 0.05rem solid #fff;
  box-shadow: 0 0.1rem 0.3rem rgba(0, 0, 0, 0.2);
}
/* 模拟不同颜色的游戏卡片背景 */
.gc-1 {
  background: linear-gradient(180deg, #aaddff 0%, #3a8dff 100%);
}
.gc-2 {
  background: linear-gradient(180deg, #e0c3fc 0%, #8ec5fc 100%);
}
.gc-3 {
  background: linear-gradient(180deg, #ff9a9e 0%, #fecfef 99%, #fecfef 100%);
}

.game-img-placeholder {
  width: 100%;
  height: 5rem;
  /* 占位图 */
  background-image: url("https://placehold.co/590x500/ffffff/999999?text=Game+Image");
  background-size: cover;
  background-position: center;
}

.game-info {
  text-align: center;
  padding: 0.2rem;
  color: #fff;
}
.game-info h3 {
  font-size: 0.45rem;
  margin-bottom: 0.1rem;
  text-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.3);
}
.game-info p {
  font-size: 0.3rem;
  opacity: 0.9;
}

/* 底部留白 */
.footer-spacer {
  display: none;
  height: 1rem;
}

/* 主体白色卡片 */
.card {
  background-color: #ffffff;
  /* width: 100%; */
  /* 限制最大宽度，适配PC */
  /* max-width: 6rem;  */
  border-radius: 0.5rem;
  padding: 0.2rem;
  box-shadow: 0 0.1rem 0.25rem rgba(0, 80, 200, 0.15);
  text-align: center;
}

/* 标题 */
.card .title {
  color: #0069eb;
  font-size: 0.66rem;
  font-weight: 900;
  margin-bottom: 0.18rem;
  letter-spacing: 0.02rem;
  background: #203be4;
  background: linear-gradient(
    0deg,
    rgba(32, 59, 228, 1) 0%,
    rgba(19, 172, 242, 1) 100%
  );
  background-clip: text;

  /* 4. 设为透明使背景透出 */
  color: transparent;
}

/* 表格容器 - 负责外层的粗蓝框和圆角 */
.card .table-container {
  border: 0.5rem solid #0069eb; /* 外层粗蓝框 */
  border-radius: 1rem;
  overflow: hidden; /* 确保内部表格圆角不溢出 */
  margin-bottom: 0.2rem;
}

.card table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.16rem;
}

/* 表头样式 */
.card head th {
  background-color: #ffffff;
  color: #000;
  font-weight: 800;
  padding: 0.12rem 0.05rem;
  font-size: 0.18rem;
  border-bottom: 0.01rem solid #0069eb;
}
/* 表头竖线分割 */
.card thead th:not(:last-child) {
  border-right: 0.01rem solid #13abf2;
}

/* 单元格通用样式 */
td {
  padding: 0.1rem 0;
  font-weight: 700;
  font-size: 0.18rem;
}

/* --- 隔行变色逻辑 --- */

/* 蓝色背景行 (数据行 1, 3, 5, 7) */
tr.row-blue td {
  background-color: #0c71eb;
  color: #ffffff;
}
/* 蓝色行中间的分割线是浅色的 */
tr.row-blue td:first-child {
  border-right: 0.01rem solid rgba(255, 255, 255, 0.3);
}

/* 白色背景行 (数据行 2, 4, 6) */
tr.row-white td {
  background-color: #ffffff;
  color: #000000;
}
/* 白色行中间的分割线是浅蓝色的 */
tr.row-white td:first-child {
  border-right: 0.01rem solid #cce0ff;
}

/* --- 提款要求（右侧合并单元格） --- */
.merge-cell {
  background-color: #ffffff !important; /* 强制白色背景 */
  color: #000 !important; /* 强制黑色字体 */
  border-left: 0.01rem solid #0069eb; /* 左侧蓝色分割线 */
  font-weight: 800;
  line-height: 1.6;
}

/* 底部提示文字 */
.footer-text {
  color: #333;
  font-size: 0.5rem;
  font-weight: 700;
  line-height: 2;
}
.ad-fixed-wrapper {
  position: absolute;
  right: 0;
  bottom: 3rem; /* 这里的 bottom 控制广告在页面底部的初始位置 */
  width: 0; /* 容器宽度设为0，不干扰布局 */
  height: 0;
  z-index: 9999;
}
.ad {
  position: fixed;
  /* right: 0.3rem; */
  bottom: 2rem;
  transform: translateX(-100%); /* 修正：让广告内容向左偏移出包装点，展示在容器内 */
  padding-right: .3rem;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.ad1 {
  width: 2rem;
  margin-bottom: 0.2rem;
}
.ad2 {
  width: 2rem;
}

@media screen and (min-width: 768px) {
  html {
    background-color: #050e24; /* PC端背景深色 */
  }
  .footer-spacer {
    display: block;
    height: 0.34rem;
  }
}

/*cssrem-disable-next-line */
@media (min-width: 768px) {
  html {
    background-color: #050e24; /* PC端背景深色 */
  }
}