body{
  margin:0;
  background:#f5efe6;
  font-family:"Microsoft YaHei",sans-serif;
  overscroll-behavior:none;
}
.app{
  max-width:420px;      /* 手机宽度 */
  margin:0 auto;
  background:#f5efe6;
  min-height:100vh;
  box-shadow:0 0 20px rgba(0,0,0,.15);
}

/* ===== 顶部置顶栏 ===== */
.header{
  position:fixed;
  top:0;
  width:100%;
  max-width:420px;
  left:50%;
  transform:translateX(-50%);
  height:60px;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
 /* padding:0 12px;*/
  box-shadow:0 2px 8px rgba(0,0,0,.1);
  z-index:1000;
}
.header img{height:50px}
.header .btn{
  background:#0049ff;
  color:#fff;
  padding:6px 10px;
  margin-left:18px;
  margin-right: 18px;
  border-radius:6px;
  font-size:18px;
  text-decoration:none;
}

/* 占位，防止内容被 header 挡住 */
.spacer{height:56px}

/* ===== 轮播 ===== */
.swiper{
  overflow: hidden;
  max-width: 562px;
  height: 273px;              /* 轮播容器高度，可调 */
  margin: 9px auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.swiper-track{
  display: flex;
  height: 100%;
}

.swiper img{
  width: 100%;
  height: 100%;
  object-fit: contain;        /* ✅ 原图比例 */
  object-position: center;    /* ✅ 居中显示 */
  flex-shrink: 0;
  display: block;
}

@keyframes slide{
  0%{transform:translateX(0)}
  33%{transform:translateX(-100%)}
  66%{transform:translateX(-200%)}
  100%{transform:translateX(0)}
}

/* ===== 游戏入口 ===== */
.games{
  display:grid;
  max-width:560px;
  grid-template-columns:repeat(6,1fr);
  gap:12px;
  padding:16px;
}
.game{
  background:#fff;
  border-radius:12px;
  text-align:center;
  padding:12px 6px;
}
.game img{
  width:48px;
  height:48px;
}
.game span{
  display:block;
  margin-top:6px;
  font-size:13px;
}

/* ===== 生肖模块 ===== */
.zodiac-wrap{
  padding:12px;
  margin-top:-10px;
  display:grid;
  grid-template-columns:repeat(1,1fr);
  gap:12px;
}
.card{
  background:#fff;
  border-radius:10px;
  padding:12px;
  border:1px solid #e4d6c5;
}
.card-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.enter{
  background:#1e6fff;
  color:#ffffff;
  padding:4px 10px;
  border-radius:12px;
  font-size:18px;
  text-decoration:none;
}
.card-body{
  display:flex;
  gap:12px;
  margin-top:10px;
}
.logo{
  width:64px;height:64px;
  border-radius:15%;
  border:1px solid #eee;
  overflow:hidden;
}
.logo img{
  width:100%;height:100%;
  object-fit:cover;
}
.star{color:#f4c542}
.gray{color:#ccc}
.desc a{
  color:#c89b3c;
  text-decoration:none
  display: inline-block;
  font-size:16px;
}
.desc{
  margin-top:8px;
  font-size:13px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ===== 弹层 ===== */
.mask{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.6);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:2000;
}
.modal{
  background:#fff;
  width:90%;
  max-width:420px;
  border-radius:12px;
  padding:16px;
  position:relative;
}
.close{
  position:absolute;
  top:10px;right:12px;
  font-size:20px;
  cursor:pointer;
}
.date{font-size:12px;color:#c44;margin-left:6px}
.lucky-box{
  background:#fff;
  margin:12px;
  padding:14px;
  border-radius:12px;
  text-align:center;
}
.lucky-title{
  font-weight:bold;
  color:#c89b3c;
  margin-bottom:6px;
}
.lucky-content span{
  margin:0 6px;
  color:#333;
  cursor:pointer;
  font-weight:bold;
}
/*万年历*/
.calendar-box{
  background:#fff;
  margin:12px;
  padding:14px;
  border-radius:14px;
  display:flex;
  align-items:center;
  box-shadow:0 2px 8px rgba(0,0,0,.05);
}
.calendar-left{
  width:70px;
  height:70px;
  background:#c89b3c;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-right:14px;
}
.cal-day{
  font-size:28px;
  font-weight:bold;
  color:#000;
}
.calendar-right{
  flex:1;
}
.cal-date{
  font-size:14px;
  color:#333;
}
.cal-week{
  font-size:13px;
  color:#666;
  margin:2px 0;
}
.cal-lunar{
  font-size:13px;
  color:#a06a00;
}
.calendar-lucky-box{
  background:#fff;
  margin:12px;
  padding:14px;
  border-radius:14px;
  display:flex;
  align-items:center;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
}

.cal-left{
  width:72px;
  height:72px;
  background:#c89b3c;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-right:14px;
}

.cal-day{
  font-size:60px;
  font-weight:bold;
  color:#000;
}

.cal-right{
  flex:1;
  font-size:13px;
}

.cal-line{
  font-size:14px;
  color:#333;
}

.cal-line span{
  margin-right:6px;
}

.cal-lunar{
  margin-top:2px;
  color:#a06a00;
}

.cal-lucky{
  margin-top:6px;
  font-size:14px;
  font-weight:bold;
  color:#c89b3c;
}

.cal-lucky span span{
  margin:6px 10px 10px -6px;
  cursor:pointer;
  color:#333;
}

.almanac-toggle{
  margin-top:8px;
  font-size:13px;
  color:#666;
  cursor:pointer;
}

.almanac-box{
  display:block;
  margin-top:8px;
  background:#faf7f2;
  border-radius:10px;
  padding:10px;
  font-size:13px;
  animation:fadeIn .25s ease;
}

.almanac-item{
  display:flex;
  align-items:flex-start;
  margin-bottom:6px;
}

.almanac-item:last-child{
  margin-bottom:0;
}

.label{
  display:inline-block;
  /*width:26px;*/
  text-align:center;
  border-radius:6px;
  margin-right:8px;
  font-weight:bold;
}

.label.yi{
  background:#e8f5e9;
  color:#2e7d32;
}

.label.ji{
  background:#fdecea;
  color:#c62828;
}

/*十二生肖预览层*/
.page-wrap{
  width:100%;
  max-width:560px;        /* 🔥 推荐 375 / 390 / 420 */
  margin:12px auto;         /* 居中 */
  padding:0 12px;        /* 防止贴边溢出 */
  box-sizing:border-box;
}
.zodiac-grid{
  display:grid;
  grid-template-columns:repeat(6, minmax(0, 1fr));
  gap:0px;
  width:100%;
}
.zodiac-grid .logo{
  display:flex;
  border-radius:15%;
  justify-content:center;
  align-items:center;
  
}
.ellipsis{
  display: inline-block;      /* 或 block */
  max-width: 280px;           /* 必须有宽度 */
  white-space: nowrap;        /* 不换行 */
  overflow: hidden;           /* 隐藏溢出 */
  text-overflow: ellipsis;    /* 显示 ... */
}

.zodiac-grid img{
  width:100%;
  border-radius:15%;
  max-width:50px;    /* 🔥 控制图标大小 */
  height:auto;
}

/*十二生肖预览层结束*/
/*轮盘样式*/
/* 右下角按钮 */
#wheelBtn{
  position:fixed;
  right:16px;
  bottom:16px;
  width:48px;
  height:48px;
  background:#ff9800;
  color:#fff;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
  cursor:pointer;z-index:9998;
}

/* 蒙版 */
#wheelMask{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.6);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:9999;   /* 🔥 必须高于 header */
}

/* 轮盘容器 */
#wheelBox{
  position:relative;
}

/* 轮盘 */
.wheel{
  width:300px;
  height:300px;
  border-radius:50%;
  background:conic-gradient(
    #4caf50 0deg 30deg,
    #ff9800 30deg 60deg,
    #2196f3 60deg 90deg,
    #e91e63 90deg 120deg,
    #cddc39 120deg 150deg,
    #9c27b0 150deg 180deg,
    #03a9f4 180deg 210deg,
    #ff5722 210deg 240deg,
    #8bc34a 240deg 270deg,
    #ffc107 270deg 300deg,
    #673ab7 300deg 330deg,
    #00bcd4 330deg 360deg
  );
  position:relative;
  transition:transform 4s cubic-bezier(.17,.67,.23,1);
}

/* 指针 */
.pointer{
  position:absolute;
  right:-12px;              /* 🔥 放在轮盘右侧 */
  top:50%;
  transform:translateY(-50%);
  width:0;
  height:0;
  border-top:10px solid transparent;
  border-bottom:10px solid transparent;
  border-left:18px solid red; /* 🔥 尖朝左，指向中心 */
  z-index:10;
  pointer-events:none;
}

/* 中心按钮 */
.wheel-center{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:64px;
  height:64px;
  background:#fff;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:bold;
  cursor:pointer;
  user-select:none;
}
.wheel-labels{
  position:absolute;
  inset:0;
  border-radius:50%;
  pointer-events:none; /* 防止挡住点击 */
}

.wheel-label{
  position:absolute;
  left:50%;
  top:50%;
  transform-origin:0 0;
  font-size:14px;
  font-weight:bold;
  color:#000;
  white-space:nowrap;
}


/*轮盘样式结束*/

@keyframes fadeIn{
  from{opacity:0;transform:translateY(-4px)}
  to{opacity:1;transform:translateY(0)}
}
/*回到顶部悬浮按钮*/
#backToTop{
  position:fixed;
  right:16px;
  bottom:90px;
  width:46px;
  height:46px;
  border-radius:14px;
  background:linear-gradient(145deg,#e6c77a,#c89b3c);
  box-shadow:
    0 6px 14px rgba(200,155,60,.35),
    inset 0 1px 0 rgba(255,255,255,.4);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:999;
  display:none;
  transition:all .25s ease;
}

/* 箭头 */
#backToTop .arrow{
  width:10px;
  height:10px;
  border-top:3px solid #5c4300;
  border-left:3px solid #5c4300;
  transform:rotate(45deg);
  margin-top:4px;
}

/* 悬浮效果 */
#backToTop:hover{
  transform:translateY(-4px);
  box-shadow:
    0 10px 20px rgba(200,155,60,.45),
    inset 0 1px 0 rgba(255,255,255,.5);
}

/* 点击效果 */
#backToTop:active{
  transform:translateY(-1px) scale(.96);
}
/*回到顶部悬浮按钮结束*/
/* ===== 虚拟盈利排行榜 ===== */
.rank-wrap{
  margin:0px 12px 40px;
  padding:16px;
  /*background:linear-gradient(145deg,#1e1e1e,#2a2a2a);*/
  border-radius:16px;
  box-shadow:0 10px 24px rgba(0,0,0,.35);
  color:#fff;
}

.rank-title{
  position:relative;
  z-index:2;
  font-size:20px;
  font-weight:bold;
  text-align:center;
  color:#f50202;
  margin-bottom:12px;
  letter-spacing:1px;
}

.rank-list{
  list-style:none;
  padding:0;
  margin:0;
}

.rank-list li{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 12px;
  margin-bottom:8px;
  background:#ffffff;
  border-radius:12px;
  font-size:13px;
}

.rank-left{
  display:flex;
  align-items:center;
  gap:8px;
}

.rank-badge{
  width:22px;
  height:22px;
  border-radius:50%;
  background:#c89b3c;
  color:#000;
  font-weight:bold;
  font-size:12px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.rank-site{
  color:#f5d37a;
  font-weight:bold;
}

.rank-user{
  color:#ccc;
}

.rank-money{
  color:#00e676;
  font-weight:bold;
}

.rank-tip{
  margin-top:8px;
  font-size:11px;
  color:#888;
  text-align:center;
}
/* ===== 滚动容器 ===== */
.rank-scroll{
  height:220px;              /* 显示 4~5 条 */
  overflow:hidden;
  position:relative;
  z-index:1;
}

/* 列表项动效 */
.rank-list li{
  animation:fadeUp .4s ease;
}

/* 金银铜 */
.rank-list li:nth-child(1) .rank-badge{
  background:linear-gradient(145deg,#ffd700,#ffb300);
}
.rank-list li:nth-child(2) .rank-badge{
  background:linear-gradient(145deg,#cfd8dc,#b0bec5);
}
.rank-list li:nth-child(3) .rank-badge{
  background:linear-gradient(145deg,#d7a86e,#b87333);
}

/* 盈利数字呼吸 */
.rank-money{
  animation:pulse 1.6s infinite;
}

/* 动画 */
@keyframes scrollUp{
  from{transform:translateY(0)}
  to{transform:translateY(-100%)}
}

@keyframes pulse{
  0%{opacity:.6}
  50%{opacity:1}
  100%{opacity:.6}
}

@keyframes fadeUp{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}

/*虚拟盈利排行榜*/