/* =========================
   全局重置 & 禁止滚动
========================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-size: var(--base-font-size);
}

#app,
.container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background-color: #000;
}

/* =========================
   Header（正常流）
========================= */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.6rem 3.6rem 0;
}

.logo {
  height: 3.6rem;
}

.logo img {
  height: 100%;
  display: block;
}

.actions {
  display: flex;
  align-items: center;
}

.actions a {
  margin-left: 1.04rem;
}

.actions a img {
  height: 2.4rem;
  display: block;
}

@media screen and (max-width: 600px) {
  .header {
    padding: 0.8rem;
  }

  .logo {
    height: 2.4rem;
  }

  .actions a img {
    height: 2.24rem;
  }
}

/* =========================
   Section / Swiper
========================= */
.section {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow: hidden;
}

.swiper {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

/* PC：左右 */
@media screen and (min-width: 600px) {
  .swiper-slide {
    flex-direction: row;
  }
}

/* Mobile：上下 */
@media screen and (max-width: 599px) {
  .swiper-slide {
    flex-direction: column;
  }
}

/* =========================
   Title / Content
========================= */
.section .title {
  width: 50%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-evenly;
  padding-left: 3.6rem;
}

.section .title .title-images {
  width: 85%;
}

/* ---------- 关键修复点 ① ----------
   content 内图片真正居中
---------------------------------- */
.section .content {
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.section .content picture {
  display: flex;
  justify-content: center;
  align-items: center;
}

.section .content img {
  width: 43vw;
  display: block;
}

/* =========================
   Mobile 调整
========================= */
@media screen and (max-width: 600px) {
  .section .title {
    width: 100%;
    padding: 0;
    align-items: center;
    justify-content: center;
  }

  .section .title .title-images {
    width: 80vw;
  }

  .section .content {
    width: 100%;
  }

  .section .content img {
    width: 80%;
  }

  .qrcode-container {
    display: none;
  }
}

/* =========================
   固定 GIF（不占位）
========================= */
.mobile-only-title {
  display: none;
}

@media screen and (max-width: 600px) {
  .mobile-only-title {
    display: block;
    position: fixed;
    left: 50%;
    bottom: 5.6rem;
    transform: translateX(-50%);
    z-index: 9;
    pointer-events: none;
  }

  .mobile-only-title img {
    max-width: 70vw;
    height: auto;
    display: block;
  }
}

/* =========================
   Footer（安卓下载按钮）
========================= */
footer {
  display: none;
}

@media screen and (max-width: 600px) {
  footer {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 1.2rem;
    z-index: 10;
    background: transparent;
    padding: 0;
  }

  /* ---------- 关键修复点 ② ----------
     android clipboard-btn 内图片居中
  ---------------------------------- */
  footer .device-container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  footer .device-container a.android {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
  }

  footer .device-container a.android img {
    width: 44%;
    max-width: 220px;
    display: block;
  }
}

/* =========================
   背景图
========================= */
.container {
  background-image: url("../images/background_pc.png?v=20260115");
  background-size: cover;
  background-position: center;
}

@media screen and (max-width: 600px) {
  .container {
    background-image: url("../images/background.png?v=20260115");
  }
}

/* =========================
   字号缩放（原逻辑）
========================= */
:root {
  --base-font-size: calc(0px + (41 - 10) * ((100vw - 0px) / (640 - 0)));
}

@media (min-width: 640px) and (max-width: 960px) {
  :root {
    --base-font-size: calc(20px + (12 - 10) * ((100vw - 640px) / (960 - 640)));
  }
}

@media (min-width: 960px) and (max-width: 1200px) {
  :root {
    --base-font-size: calc(15.5px + (12 - 10) * ((100vw - 960px) / (1200 - 960)));
  }
}

@media (min-width: 1200px) {
  :root {
    --base-font-size: 20px;
  }
}