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

  :root {
      --base-scale: 1;
      --in-scale: 1.1;
      --base-max-width: 1280px;
      --expand-font-size: 1rem;
      --content-max-width: 61.5%;
      --big-font-weight: 800;
      --vice-font-weight: 400;
      --normal-font-weight: 400;
      --medium-font-weight: 500;
      --bar-Height: 3.56rem;
      --base-w-padding: 20px;
      --title-color: #213CC5;
      --purple-color: #B97BFF;
      --bg-color: #0E1D7C;
      --line-color: #273489;
      --expand-rect-col: #1D77D3;
      --expand-bg-col: #FDF7FF;
      --expand-p-col: #242C7D;
      --info-p-col: #51A7FF;
      --lang-bg-col: #111D48;
      --lang-pAct-col: #53F1FF;
      --lang-pNor-col: #FFFFFF;
      --page-title-col: #FFBB63;
      /*尺寸适配
        --paid-width:768px;
        --medium-pc-width:992px;
        --big-pc-width:1200px;*/
  }

  /* 手机 */
  @media (max-width: 767px) {
      :root {
          --base-scale: 0.85;
      }

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

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


  @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: var(--bg-color);
      /* 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: center;
  }

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

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