html,
body {
  position: relative;
  height: 100%;
}


@font-face {
  font-family: "汉仪书魂体简";
  src: url("../font/hanyishuhuntijian.ttf");
}

:root {
  /* 圆形半径，控制整个旋转半径 */
  --content-left-radius: 4rem;
  /* 水平方向偏移，横向布局需要更大的偏移 */
  --content-left-offset-x: 0rem;
  /* 目标角度，横向布局通常使用 90 度 */
  --content-left-target-angle: 180;
  /* 每次点击旋转的角度 */
  --content-left-click-step: 60;
}

body {
  background: #eee;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 0.875rem;
  color: #000;
  margin: 0;
  padding: 0;
}

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

.swiper-slide {
  text-align: center;
  font-size: 1.125rem;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-slide .con {
  width: 100%;
  height: 100%;
  background: url(../img/H5KH.png) left center / cover no-repeat;
}

.content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: url(../img/H5bg.png) left center / cover no-repeat;
  padding: 1.5rem 0rem;
  box-sizing: border-box;
}

.contentTop {
  width: 100%;
  height: 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.contentTopI {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.listtextTitle {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 8rem;
  height: 100%;
  padding: 0 0.5rem;
  box-sizing: border-box;
  background: url(../img/titleBg.png) left center / contain no-repeat;
}

.listtextTitle>.title {
  font-size: 1rem;
  background: linear-gradient(90deg, #a95220 0%, #7e401c 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-family: "汉仪书魂体简";
}

.listtextTitle>.subtitle {
  font-size: 0.45rem;
  color: #955920;
  font-family: "汉仪书魂体简";
}

.icon {
  width: 2.3rem;
  height: 100%;
  background: url(../img/champion.png) left center / contain no-repeat;
}

.contentTopT {
  width: 100%;
  height: 1rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0 0.2rem;
  box-sizing: border-box;
}

.contentTbtn {
  width: 2.5rem;
  height: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.5rem;
  color: #905333;
  font-family: "汉仪书魂体简";
  background: url(../img/Interview.png) left center / contain no-repeat;
}

.contentSild {
  width: 5rem;
  height: 100%;
  background: url(../img/sild.png) left center / contain no-repeat;
}

.contentTime {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2rem;
  font-size: 0.5rem;
  height: 100%;
  color: #855634;
  font-family: "汉仪书魂体简";
  background: url(../img/timeBg.png) left center / contain no-repeat;
}

.contentList {
  width: 100%;
  height: 12rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  padding: 0.5rem 0.5rem;
  box-sizing: border-box;
}

.contentList_item {
  width: 2.5rem;
  height: 5rem;
  position: relative;
  background: url(../img/Player1.png) left center / contain no-repeat;
}

.position {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 0.3rem;
  height: 0.6875rem;
  color: #fffced;
  background-image: url(../img/position.png);
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  position: absolute;
  font-size: 0.2rem;
  top: 0.1rem;
  left: 0.5rem;
  z-index: 1;
}

.position.position1 {
  background-image: url(../img/position.png);
}

.position.position2 {
  background-image: url(../img/position1.png);
}

.position.position3 {
  background-image: url(../img/position2.png);
}

/* 不同排名的contentList_item背景 */
.contentList_item {
  width: 2.5rem;
  height: 5rem;
  position: relative;
  background: url(../img/Player1.png) left center / contain no-repeat;
}

.contentList_item.player1 {
  background: url(../img/Player1.png) left center / contain no-repeat;
}

.contentList_item.player2 {
  background: url(../img/Player2.png) left center / contain no-repeat;
}

.contentList_item.player3 {
  background: url(../img/Player3.png) left center / contain no-repeat;
}

.logo {
  width: 2rem;
  height: 2rem;
  position: absolute;
  top: 0.33rem;
  left: 0.25rem;
  object-fit: contain;
}

.desc {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 65%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.desc .descT {
  width: 1.8rem;
  font-size: 0.25rem;
  text-align: center;
  color: #905333;
  font-family: "汉仪书魂体简";
  background: url(../img/dian.png) left center / contain no-repeat;
}

.desc .descB {
  width: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 0.25rem;
  color: #905333;
  font-family: "汉仪书魂体简";
  margin-top: 0.2rem;
}

.desc .descB span:nth-child(2) {
  margin-top: 0.1rem;
}

.contentBtn {
  width: 100%;
  height: 1.5rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.contentBtn_item {
  width: 3rem;
  height: 2rem;
  color: #9d4706;
  font-size: 0.35rem;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url(../img/btnNotselected.png);
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  user-select: none;
}

.contentBtn_item.active {
  background-image: url(../img/btnSelected.png);
  color: #fff;
}

/* 确保点击时不改变背景色 */
.contentBtn_item:active {
  background-color: transparent !important;
}

.contentListleft {
  width: 36rem;
  height: 4rem;
  position: absolute;
  bottom: 0;
  left: 0;
  border-radius: 50%;
  /* 添加旋转过渡效果 */
  transition: transform 0.5s ease;
}

.contentListItems {
  position: relative;
  width: 100%;
  height: 100%;
  background-image: url(../img/timeline.png);
  background-size: contain;
  background-position: left center;
  background-repeat: no-repeat;
}

.contentListLeft_item {
  --angle: 0deg;
  --r: var(--content-left-radius);
  --dx: var(--content-left-offset-x);
  background: url(../img/yearNotselected.png) left center / cover no-repeat;
  width: 2rem;
  height: 2rem;
  font-size: 0.35rem;
  color: #ffffff;
  position: absolute;
  left: 170px;
  bottom: -30px;
  transform-origin: center center;
  transform: rotate(var(--angle)) translateY(var(--r)) rotate(calc(-1 * var(--angle))) translateX(var(--dx)) rotate(0deg);
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 定位到圆形边框线�? */
.contentListLeft_item:nth-child(1) {
  --angle: 120deg;
  --content-left-radius: 4rem;
}

.contentListLeft_item:nth-child(2) {
  --angle: 180deg;
  --content-left-radius: 4rem;
}

.contentListLeft_item:nth-child(3) {
  --angle: 240deg;
  --content-left-radius: 4rem;
}

/* 选中状态的样式保留 */
.contentListLeft_item.selected {
  background: url(../img/yearSelected.png) left center / cover no-repeat;
}

.records {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: url(../img/H5bg.png) left center / cover no-repeat;
  padding: 1.5rem 0rem;
  box-sizing: border-box;
}

.records .recordsTop {
  width: 100%;
  height: 2rem;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  background: url(../img/titleBg.png) left center / cover no-repeat;
}

.records .recordsTop .recordsTopI {
  font-size: 1rem;
  background: linear-gradient(90deg, #a95220 0%, #7e401c 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-family: "汉仪书魂体简";
}

.records .recordsTop .recordsTopB {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2.5rem;
  font-size: 0.6rem;
  height: 100%;
  color: #855634;
  font-family: "汉仪书魂体简";
  background: url(../img/timeBg.png) left center / contain no-repeat;
}

.records .recordsTopLine {
  width: 100%;
  height: 0.1rem;
  background: url(../img/sildT.png) center center / contain no-repeat;
  margin-top: 0.5rem;
}

.records .recordsListCenter {
  width: 100%;
  height: 12rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.records .recordsCenterList {
  width: 10rem;
  height: 11rem;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  background: url("../img/tabFramework.png") left center / contain no-repeat;
}

.records .recordsList_item {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.records .recordsList_item table {
  width: 8rem;
  height: 8rem;
  border-collapse: collapse;
  background: url(../img/tabBg.png) left center / contain no-repeat;
  box-sizing: border-box;
}

.records .recordsList_item thead tr th {
  color: #9d4706;
  font-size: 0.25rem;
  height: 0.6rem;
  font-weight: bold;
  text-align: center;
}

.records .recordsList_item tr td {
  color: #9d4706;
  font-size: 0.25rem;
  width: 4rem;
  height: 0.08rem;
  text-align: center;
  border-bottom: 1px solid #e3b152;
}

.records .recordsList_item tr td:nth-child(2) {
  color: #cc5b28;
}

.records .recordsList_item tr:last-child td {
  border-bottom: none;
}

/* 防止表格行和单元格在点击时显示背景颜色 */
.records .recordsList_item tr,
.records .recordsList_item td {
  -webkit-tap-highlight-color: transparent;
  outline: none;
  user-select: none;
}

/* 确保点击时不改变背景色 */
.records .recordsList_item tr:active,
.records .recordsList_item td:active {
  background-color: transparent !important;
}

.records .tips {
  width: 100%;
  height: 0.5rem;
  font-size: 0.25rem;
  color: #9d4706;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  /* 防止点击时显示背景颜色 */
  -webkit-tap-highlight-color: transparent;
  outline: none;
  user-select: none;
}

/* 确保点击时不改变背景色 */
.records .tips:active {
  background-color: transparent !important;
}

.recordsBtn {
  width: 100%;
  height: 1.5rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.recordsBtn_item {
  width: 3rem;
  height: 2rem;
  color: #9d4706;
  font-size: 0.25rem;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url(../img/btnNotselected.png);
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  cursor: pointer;
}

.recordsBtn_item.active {
  background-image: url(../img/btnSelected.png);
  color: #fff;
}

/* 防止按钮点击时显示默认高亮颜色 */
.recordsBtn_item {
  -webkit-tap-highlight-color: transparent;
  outline: none;
  user-select: none;
}

/* 确保点击时不改变背景色 */
.recordsBtn_item:active {
  background-color: transparent !important;
}

.records .recordsListLeft {
  width: 36rem;
  height: 4rem;
  position: absolute;
  bottom: 0%;
  left: 0%;
  border-radius: 50%;
  /* 添加旋转过渡效果 */
  transition: transform 0.5s ease;
}

.records .recordsListItems {
  position: relative;
  width: 100%;
  height: 100%;
  background-image: url(../img/timeline.png);
  background-size: contain;
  background-position: left center;
  background-repeat: no-repeat;
}

.records .recordsListLeft_item {
  --angle: 0deg;
  --r: var(--content-left-radius);
  --dx: var(--content-left-offset-x);
  background: url(../img/yearNotselected.png) left center / cover no-repeat;
  width: 2rem;
  height: 2rem;
  font-size: 0.35rem;
  color: #ffffff;
  position: absolute;
  left: 170px;
  bottom: -30px;
  transform-origin: center center;
  transform: rotate(var(--angle)) translateY(var(--r)) rotate(calc(-1 * var(--angle))) translateX(var(--dx)) rotate(0deg);
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 定位到圆形边框线上 */
.records .recordsListLeft_item:nth-child(1) {
  --content-left-radius: 4rem;
  --angle: 120deg;
}

.records .recordsListLeft_item:nth-child(2) {
  --content-left-radius: 4rem;
  --angle: 180deg;
}

.records .recordsListLeft_item:nth-child(3) {
  --angle: 240deg;
  --content-left-radius: 4rem;
}

/* 选中状态的样式保留 */
.records .recordsListLeft_item.selected {
  background: url(../img/yearSelected.png) left center / cover no-repeat;
}

/* 弹框样式 */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal.show {
  display: flex;
  animation: fadeIn 0.3s ease;
}

.modal_content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: url("../img/popbg.png") left center / contain no-repeat;
  width: 9rem;
  height: 13rem;
  animation: slideIn 0.3s ease forwards;
}

.modal.show .modal_content {
  position: relative;
  animation: slideIn 0.3s ease forwards 0.1s;
}

.modal_title {
  font-size: 0.25rem;
  color: #9d4706;
  font-weight: bold;
}

.modal_close {
  width: 1rem;
  height: 1rem;
  cursor: pointer;
  position: absolute;
  bottom: -1rem;
  right: 50%;
  transform: translateX(50%);
  background: url(../img/close.png) left center / cover no-repeat;
}

.modal_body {
  width: 7rem;
  height: 11.5rem;
}

.team_info {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.team_logo {
  width: 6.25rem;
  height: 6.25rem;
  margin-right: 1.25rem;
}

.team_logo img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid #e3b152;
}

.team_details {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 1;
  text-align: left;
}

.team_name {
  font-size: 0.4rem;
  font-weight: bold;
  color: #9d4706;
}

.team_server {
  font-size: 0.35rem;
  color: #9d4706;
}

.member_list {
  width: 100%;
  margin-top: 0.5rem;
  /* 设置固定高度，当内容超出时可以滚动 */
  height: 9.5rem;
  /* 允许垂直滚动 */
  overflow-y: auto;
  /* 隐藏滚动条但保留滚动功能 */
  -ms-overflow-style: none;
  /* IE 和 Edge */
  scrollbar-width: none;
  /* Firefox */
  /* 防止滚动时触发页面其他区域的滚动 */
  touch-action: pan-y;
}

/* 隐藏WebKit浏览器的滚动条 */
.member_list::-webkit-scrollbar {
  display: none;
}

.member_item {
  width: 100%;
  height: 0.75rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* 使用图片作为底部边框背景 */
  background: url("../img/bottomSilid.png") no-repeat bottom center;
  background-size: 100% 0.1rem;
  padding-bottom: 0.1rem;
}

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

.member_position {
  width: 0.3rem;
  height: 0.75rem;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 0.2rem;
  font-weight: bold;
  color: #753b21;
  background: url(../img/position.png) left center / contain no-repeat;
  margin-right: 0.1rem;
}

.member_info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  height: 0.5rem;
  text-align: center;
  font-size: 0.25rem;
  color: #753b21;
}

.member_right {
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.member_right .member_server {
  font-size: 0.25rem;
  font-weight: bold;
  color: #c35802;
  text-align: end;
  margin-right: 0.25rem;
}

.member_assembly {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 0.25rem;
  font-weight: bold;
  color: #753b21;
}

/* 动画效果 */
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes slideIn {
  from {
    transform: scale(0.9);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* 列表依次进入动画 */
@keyframes listItemSlideIn {
  from {
    transform: translateY(20px);
    opacity: 0;
  }

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

@media screen and (max-height: 925px) {
  .content {
    padding-top: 0rem;
  }

  .contentListleft {
    bottom: -1.5rem;
  }

  .records {
    padding-top: 0rem;
  }

  .records .recordsListLeft {
    bottom: -1.5rem;
  }
}

/* 初始状态 - 隐藏所有列表项 */
.contentCenterList .contentList_item {
  opacity: 0;
  transform: translateY(20px);
  transition: transform 0.6s ease, opacity 0.6s ease;
}

/* 列表项动画类 */
.contentList_item.animate-in {
  animation: listItemSlideIn 0.6s ease forwards;
}

.landscape-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.95);
  z-index: 9999;
  justify-content: center;
  align-items: center;
  color: white;
  text-align: center;
}

.landscape-overlay.show {
  display: flex;
}

.overlay-content {
  font-size: 0.75rem;
  padding: 20px;
}