.container {
  position: relative;
  .btns {
    width: 100%;
    top: 50%;
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
    box-sizing: border-box;
    height: 0;
    button {
      transform: translateY(-50%);
    }
  }
  :global(.ant-pro-checkcard) {
    border-radius: 4px;
    overflow: hidden;
  }
  // 多选卡片的样式
  :global(.ant-pro-checkcard-checked) {
    &::before {
      position: absolute;
      width: 100%;
      height: 100%;
      content: "";
      z-index: 1;
      background-color: #0023bf32;
      box-shadow: 0 0 0 2px #0087e6 inset;
    }
    &::after {
      display: none;
    }
  }
}

.check-group {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.check-card {
  width: 100px;
  aspect-ratio: var(--card-ratio);
  margin-inline-end: 0;
  margin-block-end: 0;
  flex-shrink: 0;
  
  &.opponent {
    &::before {
      background-color: #dc003433;
      box-shadow: 0 0 0 2px #d22d2d inset;
    }
  }
}

.card {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
