/* ===== 基础重置 ===== */
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html{-webkit-text-size-adjust:100%;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Helvetica Neue","Microsoft YaHei",Arial,sans-serif;
  font-size:14px;line-height:1.6;color:#2c3444;background:#ffffff;
  overflow-x:hidden;
}
img{display:block;max-width:100%;border:0;outline:none;}
a{text-decoration:none;color:inherit;}
ul,ol{list-style:none;}

/* ===== 页面容器 ===== */
.wrap{
  max-width:750px;margin:0 auto;background:#ffffff;
  overflow:hidden;position:relative;
}

/* ===== HERO 区域（高度已缩小） ===== */
.hero{
  position:relative;
  min-height:210px;              /* 原 320px，缩小 */
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  background:#eef1f6;
}
/* 无边框背景图 */
.hero-bg{
  position:absolute;
  top:0;left:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:center;
  border:none;
  outline:none;
  -webkit-user-drag:none;
  user-select:none;
}
.hero-mask{
  position:absolute;top:0;left:0;right:0;bottom:0;
  background:linear-gradient(180deg,
    rgba(255,255,255,.58) 0%,
    rgba(255,255,255,.84) 55%,
    rgba(255,255,255,1) 100%);
  z-index:1;
}
.hero-inner{
  position:relative;z-index:2;
  padding:26px 20px 24px;        /* 原 56px 22px 46px，缩小 */
  text-align:center;
  width:100%;
}
.hero-tag{
  display:inline-block;
  font-size:10.5px;
  letter-spacing:2px;
  color:#a67c10;
  border:1px solid rgba(201,155,30,.5);
  border-radius:20px;
  padding:2px 10px;
  margin-bottom:9px;             /* 原 14px，缩小 */
  background:rgba(255,255,255,.55);
}
.hero h1{
  font-size:21px;                /* 原 25px，缩小 */
  line-height:1.35;
  font-weight:700;
  letter-spacing:1px;
  color:#1a2233;
}
.hero h1 em{
  font-style:normal;
  background:linear-gradient(180deg,#e0b43c 0%,#a67c10 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero-desc{
  margin-top:7px;                /* 原 10px，缩小 */
  font-size:12.5px;
  color:#5a6678;
  letter-spacing:.5px;
}
.hero-btn{
  display:inline-block;
  margin-top:14px;               /* 原 22px，缩小 */
  padding:8px 26px;              /* 原 11px 34px，缩小 */
  font-size:13.5px;
  font-weight:600;
  color:#3a2a00;
  letter-spacing:1px;
  border-radius:24px;
  background:linear-gradient(135deg,#ffe9a8 0%,#e7bf4d 55%,#c99b1e 100%);
  box-shadow:0 6px 18px rgba(201,155,30,.3);
}
.hero-btn:active{transform:translateY(1px);}

/* ===== 通用区块 ===== */
.section{padding:26px 16px 4px;}
.section-title{
  position:relative;
  font-size:19px;
  font-weight:700;
  color:#1a2233;
  padding-left:12px;
  margin-bottom:6px;
  letter-spacing:.5px;
}
.section-title::before{
  content:"";
  position:absolute;
  left:0;top:50%;
  transform:translateY(-50%);
  width:4px;height:18px;
  border-radius:2px;
  background:linear-gradient(180deg,#e0b43c,#a67c10);
}
.section-sub{
  font-size:12px;
  color:#8a95a6;
  padding-left:12px;
  margin-bottom:16px;
}

/* ===== 排行榜列表 ===== */
.game-card{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:13px 14px;
  margin-bottom:11px;
  border-radius:12px;
  background:linear-gradient(135deg,#fbfcfe 0%,#f4f6fa 100%);
  border:1px solid #e8ecf2;
}
.rank{
  flex:0 0 38px;
  width:38px;height:38px;
  line-height:38px;
  text-align:center;
  font-size:15px;
  font-weight:700;
  font-style:italic;
  color:#8a95a6;
  border-radius:10px;
  background:#eef1f6;
}
.game-card.top3 .rank{
  color:#3a2a00;
  background:linear-gradient(135deg,#ffe9a8,#d9ad33);
  box-shadow:0 3px 10px rgba(201,155,30,.28);
}
.game-body{flex:1;min-width:0;}
.game-body h3{
  font-size:15.5px;
  font-weight:600;
  color:#1a2233;
  line-height:1.4;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:7px;
}
.hot{
  font-size:10.5px;
  font-weight:400;
  color:#a67c10;
  background:rgba(201,155,30,.1);
  border:1px solid rgba(201,155,30,.3);
  border-radius:6px;
  padding:1px 6px;
  line-height:1.5;
  white-space:nowrap;
}
.game-body p{
  margin-top:5px;
  font-size:12.5px;
  line-height:1.62;
  color:#6b7686;
}

/* ===== 游戏展示（轮播） ===== */
.slider{
  position:relative;
  width:100%;
  padding-top:56.25%;   /* 16:9 */
  border-radius:14px;
  overflow:hidden;
  background:#eef1f6;
  box-shadow:0 8px 24px rgba(26,34,51,.12);
}
.slide{
  position:absolute;
  top:0;left:0;
  width:100%;height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity .7s ease;
  border:none;
}
.slide.active{opacity:1;}
.slider-caption{
  position:absolute;
  left:0;right:0;bottom:0;
  padding:26px 14px 12px;
  font-size:12.5px;
  color:#fff;
  background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.72));
  z-index:2;
}
.dots{
  position:absolute;
  left:0;right:0;bottom:10px;
  display:flex;
  justify-content:center;
  gap:7px;
  z-index:3;
}
.dot{
  width:7px;height:7px;
  border-radius:50%;
  background:rgba(255,255,255,.5);
  transition:all .3s;
}
.dot.active{
  width:18px;
  border-radius:4px;
  background:linear-gradient(90deg,#ffe9a8,#d9ad33);
}

/* ===== 防沉溺提示 ===== */
.tips{
  margin:24px 16px 0;
  padding:16px 15px;
  border-radius:12px;
  background:#fffaf0;
  border:1px solid #f0e2c0;
}
.tips h2{
  font-size:15px;
  font-weight:700;
  color:#a67c10;
  margin-bottom:9px;
  display:flex;
  align-items:center;
  gap:6px;
}
.tips h2::before{
  content:"!";
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:17px;height:17px;
  font-size:12px;
  border-radius:50%;
  color:#3a2a00;
  background:#e0b43c;
  font-weight:700;
}
.tips p{
  font-size:12.5px;
  line-height:1.75;
  color:#6b7686;
  margin-bottom:6px;
}
.tips p:last-child{margin-bottom:0;}
.tips strong{color:#a67c10;font-weight:600;}

/* ===== 底部版权 ===== */
.footer{
  margin-top:28px;
  padding:22px 20px 30px;
  text-align:center;
  border-top:1px solid #e8ecf2;
  background:#fafbfc;
}
.footer p{
  font-size:11.5px;
  line-height:1.9;
  color:#8a95a6;
}
.footer .copyright{
  color:#4a5568;
  font-size:12.5px;
  margin-bottom:5px;
}