* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  min-height: 100%;
}

body {
  overflow-x: hidden;
  background: #2c211e;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  border: 0;
  background: transparent;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

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

/*
 * 未配置素材的槽位保持留空。
 * index.js 在取不到地址时会 removeAttribute('src')，此时浏览器会退化成渲染
 * alt 文字当占位（例如「Game icon」「App Store」），这里直接不显示。
 */
.common-website img:not([src]) {
  visibility: hidden;
}

[hidden] {
  display: none !important;
}

.common-website {
  position: relative;
  width: 100%;
  min-width: 320px;
}

.cms-data-call {
  position: absolute;
  z-index: 50;
  width: max-content;
  max-width: 100%;
  pointer-events: auto;
  white-space: nowrap;
}

.cms-data-call-page {
  position: fixed;
  top: calc(4.5833vw + 4px);
  left: 4px;
  z-index: 120;
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  height: 4.5833vw;
  background: #2c211e;
}

.site-header-background-layer {
  position: absolute;
  inset: 0;
}

.cms-data-call-navigation-assets {
  top: 0;
  left: 0;
}

.cms-data-call-navigation {
  top: 0;
  left: 0;
}

.cms-data-call-languages {
  top: calc(100% + 6px);
  right: 7vw;
  z-index: 110;
  width: max-content;
  max-width: none;
}

.site-header-background,
.language-panel-background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.site-header-background {
  object-fit: fill;
}

.main-navigation {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.main-navigation-item {
  position: absolute;
  top: .625vw;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 11.9271vw;
  height: 3.3333vw;
}

.main-navigation-item:nth-of-type(1) {
  left: 27.8646vw;
}

.main-navigation-item:nth-of-type(2) {
  left: 44.0104vw;
}

.main-navigation-item:nth-of-type(3) {
  left: 58.9583vw;
}

.main-navigation-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.language-switcher {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 3;
  width: 6.15vw;
  min-width: 74px;
  height: 100%;
  overflow: visible;
}

.language-trigger {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .55vw;
  width: 100%;
  height: 100%;
}

.language-icon {
  width: 2.3vw;
  height: 2.3vw;
  object-fit: contain;
}

.language-arrow {
  width: 1.1vw;
  height: auto;
}

.language-panel {
  position: absolute;
  top: 100%;
  right: 0;
  width: 100%;
  min-height: 9.9vw;
  padding: .42vw .65vw .55vw;
}

.language-panel-background {
  z-index: -1;
  object-fit: fill;
}

.language-list {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  min-height: 8.7vw;
}

.language-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 1.25vw;
}

.language-item + .language-item {
  border-top: 1px solid rgba(255, 255, 255, .22);
}

.language-item img {
  max-width: 72%;
  max-height: 1.2vw;
  object-fit: contain;
}

.language-item[aria-current="page"] {
  filter: drop-shadow(0 0 .25vw rgba(255, 239, 155, .95));
}

.site-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 2415;
  overflow: hidden;
  background-color: #2c211e;
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% 100%;
}

.cms-data-call-background {
  top: 6%;
  left: 50%;
  transform: translateX(-50%);
}

.hero-section,
.hero-preview {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.brand-logo-module,
.brand-slogan,
.main-download,
.hero-preview-title,
.hero-preview-panel-module,
.hero-preview-content,
.hero-preview-decoration,
.hero-preview-controls {
  position: absolute;
}

.brand-logo-module {
  top: 5.26%;
  left: 1.56%;
  width: 17.4%;
}

.brand-logo {
  width: 100%;
}

.cms-data-call-brand {
  top: 0;
  left: 0;
}

/*
 * slogan 按「底边」定位，让它的下边缘永远贴住 main-download 的上边缘。
 * 不能用 top 定位：slogan 各语言画布高度不同（899-1232 宽 x 250-309 高），
 * 固定 top 会让高画布的语言（如印尼文 309 高）压到下载卷轴上。
 * bottom = 100% - main-download 的 top(38.30%)。
 */
.brand-slogan {
  bottom: 61.70%;
  left: 50%;
  width: 55.99%;
  transform: translateX(-50%);
}

.main-download {
  top: 38.30%;
  left: 50%;
  width: 57.82%;
  aspect-ratio: 1110 / 264;
  transform: translateX(-50%);
  pointer-events: auto;
}

.cms-data-call-download-assets {
  top: 0;
  left: 0;
}

.cms-data-call-downloads {
  top: 0;
  right: 0;
}

.main-download-frame,
.side-download-frame,
.hero-preview-panel {
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.main-download-item,
.side-download-item,
.side-download-topup {
  position: absolute;
  z-index: 2;
  display: block;
}

.main-download-item img,
.side-download-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.main-download-icon {
  top: 26.14%;
  left: 11.53%;
  width: 12.53%;
  height: 53.04%;
}

.main-download-ios,
.main-download-google {
  left: 26.94%;
  width: 17.84%;
  height: 24.62%;
}

.main-download-ios {
  top: 26.89%;
}

.main-download-google {
  top: 54.92%;
}

.main-download-apk {
  top: 27.27%;
  left: 47.93%;
  width: 18.02%;
  height: 50.76%;
}

.main-download-topup {
  top: 14.39%;
  left: 69.10%;
  width: 20.45%;
  height: 64.02%;
}

.side-download {
  position: fixed;
  top: 21.25vw;
  right: 1.56vw;
  z-index: 90;
  width: 16.3vw;
  aspect-ratio: 313 / 466;
  pointer-events: auto;
}

.side-download-frame {
  position: absolute;
  inset: 0;
}

.side-download-topup {
  top: 9%;
  left: 12%;
  width: 76%;
  height: 23%;
}

.side-download-item {
  left: 11.9%;
  width: 76.1%;
  height: 17.38%;
}

.side-download-ios {
  top: 38.41%;
}

.side-download-google {
  top: 57.30%;
}

.side-download-apk {
  top: 75.97%;
}

.hero-preview-title {
  top: 51.97%;
  left: 50%;
  z-index: 4;
  width: 34.69%;
  transform: translateX(-50%);
}

.hero-preview-panel-module {
  top: 55.82%;
  left: 50%;
  z-index: 2;
  width: 58.49%;
  height: auto;
  aspect-ratio: 1123 / 544;
  transform: translateX(-50%);
}

.hero-preview-panel {
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.cms-data-call-hero-assets {
  top: 0;
  left: 0;
}

.hero-preview-content {
  top: 57.52%;
  left: 25.94%;
  z-index: 3;
  width: 50%;
  aspect-ratio: 960 / 450;
}

.hero-preview-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.hero-preview-decoration-left {
  top: 63.93%;
  left: 7.97%;
  z-index: 4;
  width: 13.13%;
}

.hero-preview-decoration-right {
  top: 64.97%;
  right: 5.26%;
  z-index: 4;
  width: 16.93%;
}

.hero-preview-controls {
  top: 78.51%;
  left: 50%;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 55.05%;
  height: 8.2%;
  transform: translateX(-50%);
  pointer-events: auto;
}

.hero-preview-tabs {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.35vw;
  flex: 1;
  min-width: 0;
  height: 100%;
}

.cms-data-call-heroes {
  top: 0;
  left: 50%;
  transform: translate(-50%, -100%);
}

.hero-preview-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 9.45vw;
  height: 100%;
  flex: 0 1 9.45vw;
  transition: transform .18s ease;
}

.hero-preview-tab[aria-pressed="true"] {
  transform: translateY(-.35vw) scale(1.05);
}

.hero-preview-tab img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.hero-preview-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.54vw;
  height: 4.33vw;
  flex: 0 0 auto;
}

.hero-preview-arrow img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/*
 * 底部栏不再使用品牌素材里的整张页脚底图：页脚的深色底已经画在背景图（背景素材）中，
 * 这里只负责限定高度（11.35%，对应设计稿 2415 高下的 274px），并摆放三块独立内容。
 * 三块内容各自是独立 CMS 数据（HTML，直接渲染），几何数值取自 PC 端设计稿实测。
 */
.site-footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 8;
  width: 100%;
  height: 11.35%;
  overflow: hidden;
}

.site-footer-logo,
.site-footer-text,
.site-footer-country {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* logo 图：设计稿 179x220 @ (196,36) */
.site-footer-logo {
  left: 10.21%;
  top: 13.14%;
  width: 9.32%;
  height: 80.29%;
}

/* 文字：设计稿 603x155 @ (614,68)，三行行高 49/24/30 */
.site-footer-text {
  flex-direction: column;
  left: 31.98%;
  top: 24.82%;
  width: 31.41%;
  height: 56.57%;
  color: #fff;
  font-size: 1.56vw;
  line-height: 1.6;
  text-align: center;
}

/* 国家图：设计稿 379x204 @ (1417,41) */
.site-footer-country {
  left: 73.80%;
  top: 14.96%;
  width: 19.74%;
  height: 74.45%;
}

/*
 * 图片按上面规划好的盒子等比缩放：不拉伸、不溢出盒子。
 * 运营上传的图片只要按盒子尺寸出图，即可 1:1 呈现。
 */
.site-footer-logo img,
.site-footer-country img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* 文字块里若带图片（如分隔线），同样不允许撑破盒子 */
.site-footer-text img {
  max-width: 100%;
  max-height: 100%;
}

@media (max-width: 750px) {
  .cms-data-call-page {
    top: calc(8.75vw + 4px);
  }

  .site-header {
    height: 8.75vw;
  }

  /*
   * 移动端设计稿基于 720x1625，导航三项在 720 宽下的横向起点为 28 / 250 / 448。
   * 基类的 .main-navigation-item 是绝对定位，因此这里必须继续用绝对定位 + nth-of-type，
   * 只覆盖宽度与横向起点（不能改成 flex 子项，否则基类的 left 仍会生效导致三项重叠）。
   */
  .main-navigation {
    left: 0;
    width: 100%;
    transform: none;
  }

  .main-navigation-item {
    top: 0;
    width: 23.33%;
    height: 100%;
  }

  .main-navigation-item:nth-of-type(1) {
    left: 3.89%;
  }

  .main-navigation-item:nth-of-type(2) {
    left: 34.72%;
  }

  .main-navigation-item:nth-of-type(3) {
    left: 62.22%;
  }

  /* 多语言：地球 30x30 @ (652,18)，面板 83x134 紧贴导航栏下沿，行距 25 */
  .language-switcher {
    width: 10.14%;
    min-width: 0;
  }

  .cms-data-call-languages {
    right: 10%;
  }

  .language-trigger {
    gap: 1.53vw;
  }

  .language-icon {
    width: 4.17vw;
    height: 4.17vw;
  }

  .language-arrow {
    width: 2.22vw;
  }

  .language-panel {
    width: 11.53vw;
    min-height: 0;
    padding: .49vw .9vw .76vw;
  }

  .language-list {
    min-height: 17.36vw;
  }

  .language-item {
    min-height: 3.47vw;
  }

  .language-item img {
    max-width: 78%;
    max-height: 2.36vw;
  }

  .site-stage {
    aspect-ratio: 720 / 1625;
  }

  .side-download {
    display: none !important;
  }

  /* 设计稿移动端首屏不呈现 logo 模块（品牌 logo 只在 PC 端出现） */
  .brand-logo-module {
    display: none;
  }

  /* slogan 同样按底边定位，贴在下载卷轴（top 50.77%）上方 */
  .brand-slogan {
    bottom: 49.23%;
    width: 88.06%;
  }

  /* 下载卷轴 655x155 @ (33,825)；内部按钮沿用 PC 端比例，实测与设计稿一致 */
  .main-download {
    top: 50.77%;
    width: 90.97%;
  }

  /* 名将标题 359x57 @ (186,1050) */
  .hero-preview-title {
    top: 64.62%;
    width: 49.86%;
  }

  /* 名将卷轴面板 506x245 @ (110,1110) */
  .hero-preview-panel-module {
    top: 68.31%;
    width: 70.28%;
  }

  /* 名将立绘 450x210 @ (150,1124) */
  .hero-preview-content {
    top: 69.17%;
    left: 20.83%;
    width: 62.5%;
  }

  /* 鸡 113x193 @ (10,1208) */
  .hero-preview-decoration-left {
    top: 74.34%;
    left: 1.39%;
    width: 15.69%;
  }

  /* 猪 138x179 @ (582,1220) */
  .hero-preview-decoration-right {
    top: 75.08%;
    right: 0;
    width: 19.17%;
  }

  /* 徽标 81x92，行内步距 93.3；(124,1393) 与 (561,1393) 为两侧箭头 */
  .hero-preview-controls {
    top: 83.14%;
    width: 66.11%;
    height: 7.5%;
  }

  .hero-preview-tabs {
    gap: 1.71vw;
  }

  .hero-preview-tab {
    width: 11.25vw;
    height: 100%;
    flex: 0 1 11.25vw;
  }

  /* 设计稿四个徽标尺寸完全一致（81x92），选中态不做放大位移 */
  .hero-preview-tab[aria-pressed="true"] {
    transform: none;
  }

  .hero-preview-arrow {
    width: 5.42vw;
    height: 5.14vw;
  }

  /*
   * 页脚高度 8.49%（对应移动端设计稿 1625 高下的 138px），
   * 三块内容按移动端设计稿实测取值（与 PC 端是同一套素材、不同缩放）。
   */
  .site-footer {
    height: 8.49%;
  }

  /* logo 图：移动端设计稿 78x96 @ (24,17) */
  .site-footer-logo {
    left: 3.33%;
    top: 12.32%;
    width: 10.83%;
    height: 69.57%;
  }

  /* 文字：移动端设计稿 250x65 @ (200,36)，三行行高 21/10/13 */
  .site-footer-text {
    left: 27.78%;
    top: 26.09%;
    width: 34.72%;
    height: 47.10%;
    font-size: 1.81vw;
    line-height: 1.55;
  }

  /* 国家图：移动端设计稿 163x89 @ (529,22) */
  .site-footer-country {
    left: 73.47%;
    top: 15.94%;
    width: 22.64%;
    height: 64.49%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-preview-tab {
    transition: none;
  }
}