:root {
  --page-max: 750px;
  --shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
  --text: #2b2b2b;
  --muted: rgba(0, 0, 0, 0.55);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  max-width: 100%;
  overflow-x: hidden;
  width: 100%;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
    "Noto Sans SC", Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color: var(--text);
  background: #eef1f4 url("./assets/images/BG_.jpg") center top / 100% auto repeat-y;
  position: relative;
}

.page {
  width: min(100%, var(--page-max));
  margin: 0 auto;
  padding-bottom: calc(175px + var(--safe-b));
  position: relative;
  max-width: 100%;
  overflow-x: hidden;
}

.section {
  width: 100%;
  max-width: 100%;
}

.img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

.sectionTitle {
  display: block;
  width: 100%;
  height: auto;
  margin: clamp(12px, 3.6vw, 18px) 0 clamp(8px, 2.6vw, 10px);
}

/* 顶部 */
.hero {
  padding-top: 0px;
}

/* 导航 */
.nav {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  padding: 10px 10px 6px;
}

.navItem {
  text-decoration: none;
  color: var(--text);
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 6px 0 2px;
  border-radius: 14px;
  -webkit-tap-highlight-color: transparent;
}

.navItem:active {
  transform: scale(0.98);
}

.navIcon {
  width: clamp(34px, 10.8vw, 42px);
  height: clamp(34px, 10.8vw, 42px);
  display: block;
}

.navText {
  font-size: clamp(11px, 3.2vw, 12px);
  line-height: 1;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.6);
}

/* 优势与下载 */
.benefits {
  padding: 0 10px 6px;
}

.download {
  padding: 6px 10px 10px;
}

.downloadBtn {
  display: block;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow);
  -webkit-tap-highlight-color: transparent;
}

.downloadBtn:active {
  transform: scale(0.99);
}

.brand {
  padding: 0 10px 4px;
}

/* 手机网页版域名列表 */
.mobileWeb {
  padding: 0 10px 6px;
}

.domains {
  display: grid;
  gap: 10px;
}

.domainRow {
  position: relative;
  width: 100%;
  height: 40px;
  background: url("./组 132.png") center / 100% 100% no-repeat;
  border-radius: 26px;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(255, 0, 0, 0.12);
  display: grid;
  grid-template-columns: 92px 1fr 128px;
  align-items: center;
}

.domainLeft {
  height: 100%;
  width: 100%;
  display: grid;
  place-items: center;
  background: url("./assets/images/组 143.png") left center / 100% 100% no-repeat;
  color: #fff;
  font-weight: 800;
  font-size: clamp(12px, 3.4vw, 13px);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}

.domainText {
  display: grid;
  place-items: center;
  font-weight: 900;
  color: rgba(148, 0, 0, 0.9);
  letter-spacing: 0.2px;
  font-size: clamp(15px, 4.8vw, 18px);
  padding: 0 6px;
  text-align: center;
}

.domainBtn {
  height: 100%;
  width: 100%;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.domainBtnImg {
  width: 100%;
  height: 100%;
  display: block;
}

.domainBtn:active {
  transform: scale(0.99);
}

/* 热门推荐 */
.hot {
  padding: 0 10px 8px;
}

.gameGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(8px, 2.6vw, 12px) clamp(8px, 2.6vw, 10px);
  padding: 8px 0 4px;
}

.gameCard {
  text-decoration: none;
  color: var(--text);
  display: grid;
  justify-items: center;
  gap: 6px;
  -webkit-tap-highlight-color: transparent;
}

.gameCard:active {
  transform: scale(0.985);
}

.gameIcon {
  width: clamp(58px, 18vw, 74px);
  height: clamp(58px, 18vw, 74px);
  border-radius: 18px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
}

.gameName {
  font-size: clamp(11px, 3.1vw, 12px);
  line-height: 1.1;
  font-weight: 800;
  color: rgba(0, 0, 0, 0.65);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: clamp(70px, 22vw, 92px);
}

.gameTag {
  font-size: 11px;
  font-weight: 900;
  color: rgba(0, 0, 0, 0.35);
  line-height: 1;
  display: none;
}

/* 轮播 */
.shots {
  padding: 0 10px 10px;
}

.carousel {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: var(--shadow);
  background: rgba(255, 255, 255, 0.65);
  max-width: 100%;
}

.carouselTrack {
  display: flex;
  width: 300%;
  transform: translateX(0%);
  transition: transform 450ms ease;
  max-width: 100%;
}

.carouselSlide {
  width: 100%;
  flex: 0 0 100%;
  display: block;
}

.carouselDots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  display: flex;
  justify-content: center;
  gap: 8px;
  pointer-events: auto;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(0, 0, 0, 0.08);
  cursor: pointer;
}

.dot.isActive {
  width: 18px;
  background: rgba(255, 70, 70, 0.95);
}

/* 固定底部容器 */
.fixedBottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 20;
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  padding-bottom: var(--safe-b);
  background: #eef1f4;
}

/* 固定底部内图片闪动动画 */
.fixedBottom .img {
  animation: fixedBottomFlash 1.2s ease-in-out infinite;
}

@keyframes fixedBottomFlash {
  0%, 100% {
    opacity: 1;
    filter: brightness(1);
    transform: scale(1);
  }
  50% {
    opacity: 0.85;
    filter: brightness(1.4);
    transform: scale(1.03);
  }
}

/* 底部按钮 */
.bottomCtas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 10px 10px 8px;
}

.cta {
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow);
  -webkit-tap-highlight-color: transparent;
}

.cta:active {
  transform: scale(0.99);
}

.register {
  padding: 0 10px 10px;
}

/* 悬浮客服（高于固定底部，避免被遮挡） */
.floatService {
  position: fixed;
  right: 10px;
  bottom: calc(175px + var(--safe-b));
  width: clamp(70px, 22vw, 96px);
  z-index: 30;
  -webkit-tap-highlight-color: transparent;
  animation: floatServicePulse 2.6s ease-in-out infinite;
}

.floatService:active {
  transform: scale(0.985);
}

@keyframes floatServicePulse {
  0% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-4px) scale(1.04);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}

/* 超小屏进一步紧凑 */
@media (max-width: 340px) {
  .nav {
    padding-left: 8px;
    padding-right: 8px;
    gap: 4px;
  }
  .benefits,
  .download,
  .brand,
  .mobileWeb,
  .hot,
  .shots,
  .bottomCtas,
  .register {
    padding-left: 8px;
    padding-right: 8px;
  }
  .gameGrid {
    gap: 8px 6px;
  }
}