/* ========== Reset ========== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
img, svg { display: block; max-width: 100%; }
ul, dl, dd { list-style: none; padding: 0; }
a, a:hover, a:focus, a:active { color: inherit; text-decoration: none; }

html { height: 100%; background: #53545c; }
body {
  max-width: 500px;
  margin: 0 auto;
  min-height: 100%;
  padding-bottom: .2rem;
  background: #fdefe6;
  color: #000;
  font-size: 0;
  line-height: 1.5;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ========== 通用 ========== */
[card] { padding: .16rem; }
[flex] { display: flex; }
[flex-middle] { align-items: center; }
[flex-between] { justify-content: space-between; }
[flex-1] { flex: 1; }
[mla] { margin-left: auto; }
[txt-hidden] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 占位图：用渐变代替图片 */
.ph {
  background: linear-gradient(135deg, var(--c1, #ffb27a), var(--c2, #ff6a3d));
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.9); font-weight: 700; font-size: .28rem;
}

/* ========== 公告跑马灯 ========== */
[marquee] {
  display: flex; height: .8rem; padding: .14rem .24rem;
  align-items: center; gap: .16rem;
  border-radius: .66rem; background: #fff;
}
[marquee] [icon] {
  width: .32rem; height: .32rem; flex-shrink: 0; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffb27a, #ff5c00);
}
[marquee] [msg] { flex: 1; color: #77636b; overflow: hidden; }
[marquee] p {
  display: inline-block; padding-left: 100%; white-space: nowrap;
  font-size: .26rem; line-height: .44rem;
  animation: marquee 14s linear infinite;
}
@keyframes marquee {
  0%   { transform: translate3d(0,0,0); }
  100% { transform: translate3d(-100%,0,0); }
}

/* ========== 顶部轮播 ========== */
[s-main] { height: 3.28rem; }
[s-main] .swiper-slide { position: relative; display: flex; align-items: center; justify-content: center; }
[s-main] .banner {
  width: 6rem; height: 3.28rem; border-radius: .2rem; overflow: hidden;
  transition: all .3s; font-size: .36rem;
}
[s-main] .swiper-slide-prev .banner,
[s-main] .swiper-slide-next .banner { width: 7.5rem; height: 2.8rem; }
[s-main] .swiper-slide-prev { transform: translateX(.6rem) !important; }
[s-main] .swiper-slide-next { transform: translateX(-.6rem) !important; }
[s-main] a { position: absolute; inset: 0; }
.swiper .swiper-pagination-bullet { width: .08rem; height: .08rem; border-radius: 50%; opacity: .3; background: #fff; }
.swiper .swiper-pagination-bullet-active { width: .16rem; border-radius: .34rem; opacity: .8; }

/* ========== 分类 Tab ========== */
[top-header] {
  display: flex; align-items: center; justify-content: space-between;
  height: .72rem; background: #fff; border-radius: .24rem; overflow: hidden;
}
[top-header] div {
  display: flex; align-items: center; justify-content: center;
  flex: 1; height: .72rem; cursor: pointer;
  font-size: .28rem; font-weight: 600; letter-spacing: .02rem;
  transition: all .2s;
}
/* 每个 Tab 一种文字颜色 */
[top-header] div:nth-child(7n+1) { color: #ff5c00; }
[top-header] div:nth-child(7n+2) { color: #1e88ff; }
[top-header] div:nth-child(7n+3) { color: #9c3dff; }
[top-header] div:nth-child(7n+4) { color: #00b36b; }
[top-header] div:nth-child(7n+5) { color: #ff3d7f; }
[top-header] div:nth-child(7n+6) { color: #ff9f1a; }
[top-header] div:nth-child(7n+7) { color: #00a8b5; }
[top-header] [active] {
  color: #fff; border-radius: .24rem;
  background: linear-gradient(90deg, #ff8d2a 0%, #ff5c00 100%);
  box-shadow: 0 .04rem .12rem rgba(255, 92, 0, .3);
}

[main] .swiper-slide { padding: .24rem .16rem .4rem; }

/* ========== 图标网格 5 列 ========== */
[n-hot] {
  display: grid; grid-gap: .16rem .24rem;
  grid-template-columns: repeat(5, 1fr); margin-bottom: .24rem;
}
[n-hot] > div { position: relative; width: 1.24rem; text-align: center; cursor: pointer; }
[n-hot] .ic { width: 1.24rem; height: 1.24rem; border-radius: .2rem; }
[n-hot] [name] {
  height: .36rem; margin-top: .08rem; font-size: .24rem; line-height: .28rem; color: #333;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
[n-hot] > div::after {
  content: "进入"; display: flex; width: 1.08rem; height: .4rem; margin: 0 auto;
  justify-content: center; align-items: center; font-size: .22rem; color: #fff;
  border-radius: .2rem; background: linear-gradient(90deg, #ff8d2a 0%, #ff5c00 100%);
}
[n-hot] a { position: absolute; inset: 0; }

/* ========== 文字按钮 3 列 ========== */
[txt-grid] {
  display: grid; grid-gap: .08rem;
  grid-template-columns: repeat(3, 1fr); margin-bottom: .24rem;
}
[txt-grid] > div {
  position: relative; display: flex; height: .76rem; padding: .12rem;
  align-items: center; border-radius: .12rem; background: #fff;
}
[txt-grid] .ic { width: .32rem; height: .32rem; border-radius: .06rem; flex-shrink: 0; }
[txt-grid] p {
  flex: 1; margin-left: .08rem; font-size: .24rem; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
[txt-grid] [icon-right] {
  width: .16rem; height: .16rem; flex-shrink: 0;
  border-right: 2px solid #c9c9c9; border-top: 2px solid #c9c9c9;
  transform: rotate(45deg) scale(.7);
}
[txt-grid] a { position: absolute; inset: 0; }

/* ========== 栏目标题 ========== */
h2 {
  position: relative; height: .4rem; display: flex; align-items: center; gap: .08rem;
  margin-bottom: .08rem; color: #ff5f02; font-size: .28rem; font-weight: 600;
}
h2::before { content: ""; width: .06rem; height: .24rem; border-radius: .34rem; background: #ff0e02; }
h2 p { color: #666; font-size: .26rem; font-weight: 400; }

/* ========== 列表 2 列（图标 + 标题 + 描述） ========== */
[game-list] {
  display: grid; grid-gap: .1rem;
  grid-template-columns: repeat(2, 1fr); margin-bottom: .24rem;
}
[game-list] > div {
  position: relative; display: flex; align-items: center;
  height: .96rem; padding: 0 .12rem; gap: .16rem;
  border-radius: .1rem; background: #fff;
}
[game-list] .ic { width: .72rem; height: .72rem; border-radius: .2rem; flex-shrink: 0; }
[game-list] dt { font-size: .28rem; font-weight: 600; color: #000; }
[game-list] dd { color: #999; font-size: .24rem; }
[game-list] a { position: absolute; inset: 0; }

/* ========== 卡片 2 列（大图 + 标题 + 状态） ========== */
[live-list] {
  display: grid; grid-gap: .08rem;
  grid-template-columns: repeat(2, 1fr); margin-bottom: .24rem;
}
[live-list] > div {
  position: relative; border-radius: .2rem; background: #fff;
  font-size: .24rem; color: #999; overflow: hidden; padding-bottom: .16rem;
}
[live-list] .cover { width: 100%; height: 4.2rem; border-radius: .16rem; font-size: .4rem; object-fit: cover; }
[live-list] [total] {
  position: absolute; left: .08rem; top: .08rem; height: .5rem; padding: 0 .16rem;
  display: flex; align-items: center; border-radius: .64rem;
  background: rgba(0,0,0,.35); color: #fff; font-size: .22rem; backdrop-filter: blur(4px);
}
[live-list] h3 {
  margin: .16rem 0 .08rem; padding: 0 .16rem; color: #000; font-size: .3rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
[live-list] [time] { margin-left: .16rem; }
[live-list] a { position: absolute; inset: 0; }
[time] { display: flex; align-items: center; color: #0fd457; font-size: .22rem; }
[time]::before {
  content: ""; width: .08rem; height: .08rem; border-radius: 50%; margin-right: .06rem;
  background: #0fd457; filter: drop-shadow(0 0 .06rem #00ff09);
}

/* ========== 商品网格 2 列 + 分页 ========== */
[column-two] { display: grid; grid-template-columns: 1fr 1fr; gap: .16rem; margin-top: .16rem; }
[mall-list] > div {
  position: relative; border-radius: .2rem; background: #fff;
  font-size: .24rem; color: #666; overflow: hidden; padding-bottom: .16rem;
}
[mall-list] .cover { width: 100%; height: 3.54rem; border-radius: .1rem; font-size: .36rem; object-fit: cover; }
[mall-list] h3 {
  margin: .12rem .16rem; color: #000; font-size: .3rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
[mall-list] [price] { color: #ff0e02; font-size: .28rem; font-weight: 600; padding: 0 .16rem; }
[mall-list] [meta] { padding: 0 .16rem; margin-top: .06rem; }
[mall-list] a { position: absolute; inset: 0; }

.p-wrap .p-item { display: none; }
.p-wrap .p-item.active { display: block; }
.p-control { display: flex; align-items: center; justify-content: center; margin-top: .24rem; }
.p-control .page-content { display: flex; align-items: center; gap: .2rem; margin: 0 .2rem; }
.p-control .page-item {
  width: .8rem; height: .8rem; display: flex; align-items: center; justify-content: center;
  border: 1px solid #fce0ce; border-radius: .1rem; background: #fdeade;
  font-size: .24rem; font-weight: 700; color: #d3a69b; cursor: pointer; user-select: none;
}
.p-control .page-item.active { background: #fff; border-color: transparent; color: #ff7d1c; }
.p-control .prev::before, .p-control .next::before {
  content: ""; width: .18rem; height: .18rem;
  border-left: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); margin-left: .06rem;
}
.p-control .next::before { transform: rotate(-135deg); margin-left: -.06rem; }
.p-control .disabled { opacity: .4; cursor: not-allowed; }

/* ========== 回到顶部 ========== */
.scroll-2-top {
  position: fixed; right: .24rem; bottom: 1.2rem; width: .8rem; height: .8rem;
  border-radius: 50%; background: #fff; box-shadow: 0 .04rem .16rem rgba(0,0,0,.15);
  display: none; cursor: pointer; z-index: 99;
}
.scroll-2-top::before {
  content: ""; position: absolute; left: 50%; top: 55%; width: .2rem; height: .2rem;
  border-left: 2px solid #ff5c00; border-top: 2px solid #ff5c00;
  transform: translate(-50%,-50%) rotate(45deg);
}