body,
  html {
      height: 100%;
      margin: 0;
      /* overflow: hidden; */
      /* overflow-y: auto; */
      /* background-color: transparent; */
      background-color: transparent;
      font-size: 16px;
      /* animation: pageFadeIn 0.2s ease-in-out; */
  }

  /* @media (max-width: 992px) {
      html {
          font-size: 14px;
      }
  } */

  /* 4. 桌面端大屏（≥1200px）：24寸及以上显示器 */
  /* @media (min-width: 1200px) {
      html {
          font-size: 16px;
      }
  } */

  @keyframes pageFadeIn {
      from {
          opacity: 0.5;
          /* transform: translateY(3px); */
      }

      to {
          opacity: 1;
          transform: translateY(0);
      }
  }


  .background {
      /* background: linear-gradient(to bottom, #4408c0 0%, #241c34 100%); */
      background-color: #FBD7FB;
      /* height: 100%; */
      min-height: 100vh;
      width: 100%;
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      /* justify-content: center;
        align-items: center; */
  }

  .background:before {
      content: "";
      background-image: inherit;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      filter: blur(20px);
      z-index: -1;
  }

  #container {
      opacity: 1;
  }

  .mask-purple {
      position: absolute;
      width: 100%;
  }

  .float-rect {
      position: fixed;
      background-color: transparent;
      bottom: 0;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: flex-end;
  }

  .switch-lang {
      position: fixed;
      display: none;
      opacity: 0;
      top: calc(var(--bar-Height) - 0.5rem);
      transition: transform 0.3s, opacity 0.3s;
  }

  .switch-lang.show {
      display: block;
      opacity: 1;
  }


  /* 移动端：手机竖屏（小于 768px）这里写手机样式 */
  @media (max-width: 767px) {
      :root {
          --base-scale: 0.55;
          --base-w-padding: 12px;
          --expand-font-size: 0.8rem;
          --arrow-w: 12px;
          --p-size: 14px;
          --expand-padding: 0.8rem;
          --lang-option-padding: 0.8rem;
      }

      p {
          font-size: var(--p-size);
      }

      .about-us-div p {
          font-size: var(--p-size);
      }

      #langBtn {
          height: 1.3rem;
      }

      .game-top-margin {
          margin-top: 1rem
      }

      .game-top-left {
          padding-top: 1rem;
          padding-bottom: 0;
      }

      h3 {
          font-size: calc(1.5rem*var(--base-scale));
      }

      .game-top-left h1 {
          line-height: calc(2.5rem * var(--base-scale));
          font-size: calc(1.8rem * var(--base-scale));

          align-self: flex-start;
          margin-left: 0.5rem;
      }


      .game-top-left-img {
          margin-top: 0.5rem;
          width: 90%;
          align-self: flex-start;
          margin-left: 0.2rem;
      }

      .game-top-right img {
          width: 100%;
      }


      .info-rect-left p {
          font-size: 0.8rem;
      }

      .expand-header {
          padding: var(--expand-padding);
      }

      /* 展开状态样式 */
      .expand-item.active .expand-content {
          padding: var(--expand-padding);
          max-height: 400px;
      }

      .optionBg {
          border-radius: 3px;
          gap: 0.5rem;
          padding: calc(var(--lang-option-padding)*0.7) var(--lang-option-padding);
      }

      .langSpan {
          font-size: calc(1.2rem * var(--base-scale));
          color: #4B2183;
          cursor: pointer;
      }
  }

  /* PC端：平板/电脑（大于等于 768px） */
  @media (min-width: 768px) {
      /* 这里写PC样式 */
  }