@keyframes jumps {
  0% {
    transform: translate(0); 
  }
  
  25% {
    transform: translateY(4px) scaleX(1.08) scaleY(0.92); 
  }
  
  45% {
    transform: translateY(-2px) scaleX(1) scaleY(1) rotate(2deg); 
  }
  
  65% {
    transform: translateY(1px) scale(1) rotate(0);
  }
  
  80% {
    transform: translateY(-1px) scaleX(1.02) scaleY(0.98) rotate(-1deg);
  }
  
  90% {
    transform: translateY(0) scaleX(1) scaleY(1) rotate(0);
  }
  100% {
    transform: translateY(0) scaleX(1) scaleY(1);
  }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-2px); }
  20%, 40%, 60%, 80% { transform: translateX(2px); }
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  color: #333;
  font-size: 17px;
  font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif;
  background-color: #fff;
  overscroll-behavior-y: none;
  -webkit-overflow-scrolling: touch;
}

body {
  max-width: 1024px;
  margin: auto;
}

.game {
  /* display: flex;
  align-items: center;
  justify-content: center; */
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0 20px;
}

.gcont {
  display: flex;
  align-items: flex-end;
  /* margin-top: 20px; */
}

.r1 {
  display: flex;
  justify-content: center;
}

#audio {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.card {
  width: 73px;
  height: 113px;
  border: 2px solid #333;
  border-radius: 8px;
  position: relative;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  background-color: #fef7ed;
  z-index: 3;
  cursor: pointer;
  transition: 0.35s;
  user-select: auto; /* 允许card被选中 */
  -webkit-user-drag: auto; /* 允许拖拽（webkit内核） */
}

.tbg {
  position: absolute;
  overflow: hidden;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 2;
}

.ttbg {
  position: absolute;
  left: 5px;
  bottom: -45px;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.05);
  transform: rotate(250deg);
}

.tp1 {
  display: flex;
  align-items: center;
  height: 100%;
}

.tp1 > .text {
  font-size: 19px;
  padding: 10px;
  word-break: break-all;
  text-align: center;
  font-weight: bolder;
  line-height: 21px;
  width: 100%;
}

.spro {
  position: absolute;
  left: 50%;
  transform: translate(-50%,-50%); 
  top: 50%;
  z-index: 4;
  display: none;
  white-space: nowrap;
  /* 1. 穿透所有鼠标事件（点击/拖拽/hover等） */
  pointer-events: none;
  /* 2. 禁止spro及其子元素的文本选中 */
  /* user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none; */
}

.spro > .sbn {
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  background-color: #fef7ed;
  border: 2px solid #333;
  border-radius: 8px;
  padding: 8px 10px;
  animation: jumps 0.5s ease-in-out 1;
}

.spro > .sbn > .text {
  font-size: 17px;
  font-weight: bolder;
}

.tp2 {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  display: flex;
}

.tp2 > .bg1 { 
  width: 100%;
  padding: 8px;
  background-color: #fef7ed;
  border-radius: 8px;
}

.tp2 > .bg1 > .bg2{
  border-radius: 8px;
  background-color: #c32a2d;
  width: 100%;
  height: 100%;
}

.fthis {
  text-align: center;
  color: #999;
  font-size: 14px;
  padding: 10px 0;
}

.gtop {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  align-content: flex-end;
  flex: 1;
  padding-top: 10px;
}

.gtop > .card,
.wj > .card {
  margin-right: -10px;
}

.gtop > .card:hover,
.wj > .card:hover {
  margin-right: 10px;
}

.gtop > .card:nth-last-child(1):hover,
.wj > .card:nth-last-child(1):hover,
.ai > .card:nth-last-child(1):hover {
  margin-right: 0px;
}

.gtop > .card {
  margin-bottom: 10px;
}

.gcont > .r3,
.gcont > .r2 {
  flex: 1;
  margin-bottom: 10px;
}

.gcont > .r3 > div,
.gcont > .r2 > div {
  display: flex;
}

.gcont > .r2 > div {
  justify-content: flex-end;
}

.box {
  display: flex;
  position: relative;
}

.ai > .card {
  margin-right: -50px;
  transition: margin 0.35s;
}

.ai > .card:hover {
  margin-right: -30px;
}

.gtop > .card:nth-last-child(1),
.wj > .card:nth-last-child(1),
.ai > .card:nth-last-child(1) {
  margin-right: 0px;
}

.user > .ns {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.yy {
  width: 18px;
  height: 18px;
  border: 2px solid #333;
  border-radius: 1000px;
  background-color: #c32a2d;
}

.user > .ns > .ico {
  margin-right: 10px;
}

.user > .ns > .uda {
  text-align: center;
  font-size: 19px;
  font-weight: bolder;
  position: relative;
}

.gcont > .r2 .user > .ns > .uda {
  text-align: right;
}

.gcont > .r3 .user > .ns > .uda {
  text-align: left;
}

.gcont > .r0 {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.deck {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  margin-bottom: 10px;
  transition: 0.35s;
}

.deck > .card {
  margin-top: -110px;
}

.deck:hover .card {
  margin-top: -113px;
}

.deck > .card:nth-last-child(1) {
  margin-top: 0;
}

.gcont > .r0 .user > .ns {
  position: relative;
}

.gcont > .r0 .user > .ns > .ico {
  position: absolute;
  left: -30px;
}

.zm > .tp2 {
  display: none;
}

.zm:hover,
.zm:hover {
  z-index: 4;
}

.zm:hover > .spro,
.zm:hover > .spro {
  display: block;
}

.fm {
  display: block;
  transform: scaleX(-1);
}

.check1 {
  bottom: 10px;
}

.inick,
.gaend {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.btnc {
  display: inline-block;
  width: 105px;
  height: 45px;
  position: relative;
  cursor: pointer;
  margin-bottom: 20px;
}

.btnc:nth-last-child(1) {
  margin-bottom: 0px;
}

.btnc > div:nth-child(1) {
  position: absolute;
  top: 0px;
  left: 0px;
  border: 2px solid #333;
  background-color: #c32a2d;
  color: #fff;
  font-weight: bold;
  border-radius: 8px;
  width: 100%;
  height: 100%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
  transition: 0.15s;
}

.btnc > div:nth-child(2) {
  z-index: 1;
  width: 100%;
  height: 50%;
  position: absolute;
  border: 2px solid #333;
  background-color: #af272b;
  border-radius: 8px;
  left: 0px;
  bottom: -12px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.btnc > div:nth-child(1):hover {
  top: 3px;
}

.inick > .bname,
.gaend > .bname {
  font-size: 23px;
  font-weight: bold;
  margin-bottom: 5px;
}

.inick > .title,
.gaend > .title {
  font-size: 17px;
  font-weight: bold;
  margin-bottom: 15px;
}

.gaend > .icon {
  font-size: 48px;
  animation: jumps 1.5s ease-in-out 1;
}

#loading {
  text-align: center;
  margin-top: 10px;
  transition: 0.25s;
  /* animation: rightto 0.35s forwards; */
}

#loading > img {
  width: 16px;
}

.emote {
  z-index: 99999;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -50px);
}

.emote > img {
  display: block;
  width: 150px;
  /* box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); */
}

.w1,
.w2,
.w0 {
  margin-top: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.w0 {
  position: relative;
}

.w1 > .box,
.w2 > .box {
  flex-wrap: wrap;
}

.w1 > .box > .card,
.w2 > .box > .card {
  /* margin-bottom: 10px; */
  margin-bottom: -20px;
}

.w1 > .user > .ns,
.w2 > .user > .ns {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.dj {
  position: absolute;
  top: 0;
  z-index: 1;
  left: 0;
  width: 40px;
}

.dj > img {
  width: 100%;
}

.w1 > .user > .ns > .ico,
.w1 > .user > .ns > .ico {
  position: absolute;
  left: calc(50% - 55px);
}

.btncs {
  display: flex;
}

.btncs > div {
  margin-right: 10px;
  margin-bottom: 10px;
}

.btncs > div:nth-last-child(1) {
  margin-right: 0;
}

.btnc.remind {
  width: 210px;
}

.btnc.remind > div:nth-child(1) {
  background-color: #4caf50;
}

.btnc.remind > div:nth-child(2) {
  background-color: #368138;
}

#xck {
  overflow: hidden;
}

#xck > .tp1 > img {
  width: 100%;
}

.shake {
  animation: shake 0.6s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

.w1 > .box,
.w2 > .box {
  justify-content: center;
}

@media (hover: none) and (pointer: coarse) {
  .fthis {
    font-size: 15px;
  }

  .card {
    width: 62px;
    height: 94px;
  }

  .deck > .card {
    margin-top: -92px;
  }

  .deck:hover .card {
    margin-top: -92px;
  }

  .deck > .card:nth-last-child(n + 4) {
    display: none;
  }

  .gtop > .card:hover,
  .wj > .card:hover {
    margin-right: -10px;
  }

  .ai > .card:hover {
    margin-right: -50px;
  }

  .zm:hover > .spro,
  .zm:hover > .spro {
    display: none;
  }

  .tp1 > .text {
    font-size: 17px;
    line-height: 19px;
  }

  .user > .ns > .uda {
    font-size: 17px;
  }

  .yy {
    width: 15px;
    height: 15px;
  }

  .gcont > .r0 .user > .ns > .ico {
    left: -25px;
  }

  .maxsix2 > .card:nth-child(-n+2) {
    font-size: 14px;
    display: none;
  }

  .maxsix4 > .card:nth-child(-n+4) {
    display: none;
  }

  .maxsix6 > .card:nth-child(-n+6) {
    display: none;
  }
}