/* 定义图片渐变消失动画 */
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.background {
  position: relative;
  background-color: #000; /* 黑色背景 */
  height: 530vh; /* 设置高度覆盖视口 */
  overflow: hidden;
  -ms-overflow-style:none; //兼容Edge
  scrollbar-width: none;//兼容火狐



  /*过渡界面部分*/

  .transition {
    position: absolute;
    height: 100vh;
    width: 100%;
    z-index: 1;
    .transition_nba {
      position: absolute;
      height: 40%;
      width: 20%;
      left: 40%;
      top: 30%;
      opacity: 1; /* 初始透明度 */
      animation: fadeOut 2s ease-out forwards; /* 动画定义 */
    }

    .transition_logo {
      position: absolute;
      height: 40%;
      width: 30%;
      left: 35%;
      top: 30%;
      opacity: 1; /* 初始透明度 */
      animation: fadeOut 2s ease-out forwards; /* 动画定义 */
    }

    .transition_signature {
      position: absolute;
      top: 40%;
      width: 100%;
      text-align: center; /* 居中对齐 */
      color: #ffffff; /* 白色文字 */
      font-size: 50px; /* 调整字体大小 */
      line-height: 1.5; /* 设置行高 */
      font-weight: bold; /* 加粗 */
      opacity: 1; /* 初始透明度 */
      animation: fadeOut 2s ease-out forwards; /* 动画定义 */

      .transition_text {
        display: block; /* 强制换行 */
        margin-bottom: 5px; /* 设置行间距（可选） */
      }
    }

  } /*过渡部分结束*/
  /*比赛内容部分*/
  .content {
    position: relative;
    width: 100%;
    z-index: 0;

    .top_logo {
      position: absolute;
      width: 100%;
      height: 12%;
      z-index: 1;

      .top_logo_nba {
        position: absolute;
        height: 80%;
        width: 5%;
        top: 10%;
        margin: 0 auto;
        display: block;
      }

      .top_logo_signature {
        position: absolute;
        height: 100%;
        width: 40%;
        left: 30%;
        margin: 0 auto;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        color: #ffffff;
        font-size: 55px;
        line-height: 1.5;
        font-weight: bold;
      }

      .transition_text {
        display: block;
        margin-bottom: 5px;
      }

      .top_logo_all_sport {
        position: absolute;
        height: 89%;
        width: 9%;
        top: 5%;
        left: 89%;
        margin: 0 auto;
        display: block;
      }
    }


    .line1 {
      position: absolute;
      width: 90%;
      height: 2px;
      left: 5%;
      top: 14%;
      background-color: #ffffff;
      z-index: 1;
    }

    .basketball_match {
      position: absolute;
      width: 100%;
      height: 87%;
      top: 13%;

      z-index: 1;

      .image {
        width: 95%;
        height: 90%;
        left: 2.5%;
        top: 4%;
      }
      .arrow_wolf_attack {
        position: absolute;
        width: 50%;
        height: 20%;
        left: 15%;
        top: 60%;
        z-index: 100;
        opacity: 0.7; /* 设置透明度为低 */
      }
      .wolf_word_area {
        position: absolute;
        height: 16%;
        width: 30%;
        left: 25%;
        top: 62%;

        z-index: 101;
        display: flex;  /* 使用 flexbox 来控制内容布局 */
        justify-content: center;  /* 居中对齐 */
        align-items: center;  /* 垂直居中对齐 */
        text-align: center;  /* 文字水平居中 */
        color: #000000;  /* 字体颜色为黑色 */
        font-size: 16px;  /* 字体大小，适当调整 */
        font-weight: bold;  /* 加粗字体 */
        word-wrap: break-word;  /* 自动换行 */
        white-space: normal;  /* 允许文本换行 */
        padding: 5px;  /* 可选：添加内边距来增加空间 */
        line-height: 1.5;  /* 行高，适当调整 */
      }


      .arrow_laker_attack {
        position: absolute;
        width: 50%;
        height: 20%;
        left: 28%;
        top: 63%;
        z-index: 100;
        opacity: 0.7; /* 设置透明度为低 */
      }
      .laker_word_area{
        position: absolute;
        height: 16%;
        width: 30%;
        left: 38%;
        top:65%;

        z-index: 101;
      }

      .event_screen {
        position: absolute;
        width: 40%;
        height: 25%;
        left: 30%;
        top: 6.5%;
        background-color: rgba(0, 0, 0, 0.7);
        border: 2px solid #4cd964;
        border-radius: 10px;
        z-index: 99;
        display: flex;
        flex-direction: column;
        padding: 10px;
        box-shadow: 0 0 10px rgba(76, 217, 100, 0.5);

        .event_buttons {
          display: flex;
          justify-content: space-around;
          padding: 10px 0;
          margin-top: 10px;
          border-top: 1px solid rgba(76, 217, 100, 0.3);
        }

        .event_btn {
          width: 40%;
          height: 36px;
          line-height: 36px;
          text-align: center;
          font-size: 14px;
          border-radius: 18px;
          background: transparent;
          border: 1px solid #4cd964;
          color: #4cd964;
          transition: all 0.2s ease; /* 添加过渡效果 */

          /* 移除默认按钮样式 */
          -webkit-appearance: none;
          -moz-appearance: none;
          appearance: none;
          outline: none;

          /* 添加点击效果 */
          &:active {
            transform: scale(0.95);
            opacity: 0.8;
          }
        }

        .send_btn {
          background: #4cd964;
          color: #000000;

          &:active {
            background: #45c559;
          }
        }

        .retry_btn {
          background: transparent;
          color: #4cd964;

          &:active {
            background: rgba(76, 217, 100, 0.1);
          }
        }
      }

      .event_title {
        color: #4cd964;
        font-size: 24px;
        font-weight: bold;
        text-align: center;
        margin-bottom: 10px;
        border-bottom: 1px solid #4cd964;
        padding-bottom: 5px;
      }

      .event_content {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow-y: auto;
      }

      .event_text {
        color: #ffffff;
        font-size: 20px;
        text-align: center;
        line-height: 1.5;
        padding: 0 10px;
      }
    }
    .line2{
      position: absolute;
      width: 90%;
      height: 2px;
      left: 5%;
      top: 98%;
      background-color: #ffffff;
      z-index: 1;
    }
    .score{
      position: absolute;
      width: 100%;
      height: 7%;
      top: 100%;
      /*  border: #4cd964 solid 2px;*/
    }
  }/*比赛内容部分结束*/

  /*比分部分开始*/
  .score {
    position: relative;
    height: 50vh;

    .now_time1 {
      position: absolute;
      height: 10%;
      width: 100%;
      margin: 0 auto;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      color: #ffffff;
      font-size: 55px;  /* 设置字体大小 */
      line-height: 1.5;
      font-weight: bold;
      top: 2%;  /* 定位在顶部 */
    }

    .now_time2 {
      position: absolute;
      height: 10%;
      width: 100%;
      margin: 0 auto;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      color: #ffffff;
      font-size: 40px;  /* 设置字体大小较小 */
      line-height: 1.5;
      font-weight: normal;
      letter-spacing: 20px;
      top: 14%;
    }
    .wolf_score_text{
      position: absolute;
      height: 14%;
      width: 14%;
      left: 8%;
      top: 27%;
    }
    .vs{
      position: absolute;
      height: 60%;
      width: 32%;
      left: 34%;
      top: 28%;
    }
    .laker_score_text{
      position: absolute;
      height: 14%;
      width: 11%;
      right: 10%;
      top: 27%;
    }
    .wolf_score{
      position: absolute;

      height: 40%;
      top: 48%;
      left: 10%;
      width: 9%;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      color: #ffffff;
      font-size: 120px;  /* 设置字体大小较小 */
      line-height: 1.5;
      font-weight: normal;
      letter-spacing: 20px;

    }
    .laker_score{
      position: absolute;
      height: 40%;
      top: 48%;
      right: 10%;
      width: 9%;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      color: #ffffff;
      font-size: 120px;  /* 设置字体大小较小 */
      line-height: 1.5;
      font-weight: normal;
      letter-spacing: 20px;
    }
  }/*比分部分结束*/

  /*球队数据开始*/
  .team_statics{
    position: relative;
    height: 150vh;
    .cut_off_line{
      position: absolute;
      height: 100%;
      width: 2px;
      left: 50%;
    }
    .statistics1{
      position: absolute;

      height: 8%;
      top: 1%;
      right: 5%;
      width: 40%;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      color: #ffffff;
      font-size: 50px;  /* 设置字体大小较小 */
      line-height: 1.5;
      font-weight: normal;
      letter-spacing: 20px;
    }
    .statistics2{
      position: absolute;

      height: 8%;
      top: 1%;
      left: 5%;
      width: 40%;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      color: #ffffff;
      font-size: 50px;  /* 设置字体大小较小 */
      line-height: 1.5;
      font-weight: normal;
      letter-spacing: 20px;
    }
    .three_point_wolf{
      position: absolute;

      height: 15%;
      top: 8%;
      left: 1%;
      width: 22%;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      color: #ffffff;
      font-size: 30px;  /* 设置字体大小较小 */
      line-height: 1.5;
      font-weight: normal;
      letter-spacing: 20px;
    }
    .three_point_laker{
      position: absolute;

      height: 15%;
      top: 8%;
      right: 28%;
      width: 22%;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      color: #ffffff;
      font-size: 30px;  /* 设置字体大小较小 */
      line-height: 1.5;
      font-weight: normal;
      letter-spacing: 20px;
    }



    .charts-box-score-wolf{
      position: absolute;
      width: 25%;
      height: 28%;
      top: 18%;
      left: 12%;
    }
    .charts-box-score-laker{
      position: absolute;
      width: 25%;
      height: 28%;
      top: 18%;
      right: 12%;
    }
    .charts-box-tech-wolf{
      position: absolute;
      width: 25%;
      height: 28%;
      top: 68%;
      left: 12%;
    }
    .charts-box-tech-laker{
      position: absolute;
      width: 25%;
      height: 28%;
      top: 68%;
      right: 12%;
    }



    .two_point_wolf{
      position: absolute;

      height: 15%;
      top: 8%;
      left: 28%;
      width: 22%;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      color: #ffffff;
      font-size: 30px;  /* 设置字体大小较小 */
      line-height: 1.5;
      font-weight: normal;
      letter-spacing: 20px;
    }
    .two_point_laker{
      position: absolute;

      height: 15%;
      top: 8%;
      right: 1%;
      width: 22%;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      color: #ffffff;
      font-size: 30px;  /* 设置字体大小较小 */
      line-height: 1.5;
      font-weight: normal;
      letter-spacing: 20px;
    }
    .foul_wolf{
      position: absolute;

      height: 15%;
      top: 40%;
      left: 1%;
      width: 22%;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      color: #ffffff;
      font-size: 30px;  /* 设置字体大小较小 */
      line-height: 1.5;
      font-weight: normal;
      letter-spacing: 20px;
    }
    .block_wolf{
      position: absolute;

      height: 15%;
      top: 50%;
      left: 1%;
      width: 22%;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      color: #ffffff;
      font-size: 30px;  /* 设置字体大小较小 */
      line-height: 1.5;
      font-weight: normal;
      letter-spacing: 20px;
    }
    .rebound_wolf{
      position: absolute;

      height: 15%;
      top: 40%;
      left: 28%;
      width: 22%;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      color: #ffffff;
      font-size: 30px;  /* 设置字体大小较小 */
      line-height: 1.5;
      font-weight: normal;
      letter-spacing: 20px;
    }
    .steal_wolf{
      position: absolute;

      height: 15%;
      top: 50%;
      left: 28%;
      width: 22%;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      color: #ffffff;
      font-size: 30px;  /* 设置字体大小较小 */
      line-height: 1.5;
      font-weight: normal;
      letter-spacing: 20px;
    }
    .foul_laker{
      position: absolute;

      height: 15%;
      top: 40%;
      right: 28%;
      width: 22%;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      color: #ffffff;
      font-size: 30px;  /* 设置字体大小较小 */
      line-height: 1.5;
      font-weight: normal;
      letter-spacing: 20px;
    }
    .block_laker{
      position: absolute;

      height: 15%;
      top: 50%;
      right: 28%;
      width: 22%;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      color: #ffffff;
      font-size: 30px;  /* 设置字体大小较小 */
      line-height: 1.5;
      font-weight: normal;
      letter-spacing: 20px;
    }
    .rebound_laker{
      position: absolute;

      height: 15%;
      top: 40%;
      right: 1%;
      width: 22%;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      color: #ffffff;
      font-size: 30px;  /* 设置字体大小较小 */
      line-height: 1.5;
      font-weight: normal;
      letter-spacing: 20px;
    }
    .steal_laker{
      position: absolute;

      height: 15%;
      top: 50%;
      right: 1%;
      width: 22%;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      color: #ffffff;
      font-size: 30px;  /* 设置字体大小较小 */
      line-height: 1.5;
      font-weight: normal;
      letter-spacing: 20px;
    }
  }/*球队数据部分结束*/
  .line3{
    position: absolute;
    height: 2px;
    width: 90%;
    left: 5%;
    top: 57%;
  }
















  /*球员数据开始*/
  .human_statics{
    position: relative;
    height: 230vh;
    /*  border: #4cd964 2px solid;*/
    .tech{
      position: absolute;
      height: 8%;
      top: 0%;
      left: 35%;
      width: 30%;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      color: #ffffff;
      font-size: 30px;  /* 设置字体大小较小 */
      line-height: 1.0;
      font-weight: normal;
      letter-spacing: 10px;
    }
    .laker_icon{
      position: absolute;
      height: 8%;
      width: 30%;
      top: 5%;
      left: 35%;
    }
    .laker_charts{
      position: absolute;
      height: 40%;
      width: 90%;
      top: 13.5%;
      left: 5%;
    }
    .wolf_icon{
      position: absolute;
      height: 8%;
      width: 40%;
      top: 53%;
      left: 30%;
    }
    .wolf_charts{
      position: absolute;
      height: 36%;
      width: 90%;
      top: 61%;
      left: 5%;
    }
    .player_table {
      position: absolute;
      width: 95%;
      left: 2.5%;
      border: #4cd964 2px solid;
      background-color: rgba(255, 255, 255, 0.1);
      border-radius: 8px;
      display: flex;
      flex-direction: column;
      height: 100%; /* 确保表格容器占满整个高度 */
    }

    .laker_table {
      top: 13.5%;
      height: 35%;
    }

    .wolf_table {
      top: 61%;
      height: 35%;
    }

    .table_header {
      display: flex;
      background-color: rgba(255, 255, 255, 0.2);
      padding: 10px 0;
      flex: 0 0 auto; /* 表头固定高度 */
    }

    .table_row {
      display: flex;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      padding: 8px 0;
      flex: 1; /* 让每一行平均分配剩余空间 */
      &:hover {
        background-color: rgba(255, 255, 255, 0.05);
      }
    }

    .header_cell, .cell {
      flex: 1;
      text-align: center;
      color: #ffffff;
      font-size: 14px;
      padding: 0 2px;
      white-space: nowrap;
      display: flex;
      align-items: center; /* 垂直居中 */
      justify-content: center; /* 水平居中 */
    }

    .header_cell:nth-child(1), .cell:nth-child(1) {
      flex: 2;
    }
    .header_cell:nth-child(2), .cell:nth-child(2) {
      flex: 0.8;
    }
    .header_cell:nth-child(3), .cell:nth-child(3) {
      flex: 0.8;
    }

    .header_cell {
      font-weight: bold;
      font-size: 16px;
    }

    /* 让表格内容区域占满剩余空间 */
    .table_content {
      display: flex;
      flex-direction: column;
      flex: 1;
      overflow-y: auto; /* 如果内容过多则显示滚动条 */
    }
  }/*球员数据部分结束*/

}