.card {
  margin: 0 1em;
  padding-top: 1em;
  .star {
    background-color: rgba(0, 0, 0, 0.5);
    background-image: url('./images/star-icon-light.png');
    border-radius: 50%;
    background-size: contain;
  }
  .overview {
    margin: 0.5em;
    margin-bottom: 1.5em;
    background-image: url('./images/block-bg-m.png');
    background-size: 100% 100%;
    padding: 2.2em 2.2em 1.8em 2.2em;
    .u-info {
      display: flex;
      align-items: center;
      gap: 0.2em;
      margin-bottom: 0.3em;
      .avatar {
        width: 1.2em;
        height: 1.2em;
        border-radius: 50%;
        overflow: hidden;
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
    }
    .content {
      display: flex;
      justify-content: space-between;
      .left {
        display: flex;
        align-items: center;
        gap: 1em;
        .value {
          font-size: 1.7em;
          background: linear-gradient(
            180deg,
            rgba(255, 255, 255, 1) 0%,
            rgba(255, 255, 255, 0.4) 100%
          );
          -webkit-background-clip: text;
          background-clip: text;
          -webkit-text-fill-color: transparent;
        }
        .percent {
          background-color: #ec83de;
          color: black;
          padding: 0 1em 0 0.6em;
          border-radius: 1em;
        }
      }
      .right {
        display: flex;
        align-items: center;
        gap: 0.3em;
        .star {
          width: 1.5em;
          height: 1.5em;
        }
      }
    }
  }
  .tips {
    font-size: 0.8em;
    margin: 1em;
    color: #979797;
    p {
      margin-bottom: 0.5em;
    }
  }
  .item-card {
    border-image-source: url('./images/BgFrame01.png');
    border-image-slice: 200 100 70 280 fill;
    border-image-width: 2em 1em 0.7em 2.8em;
    border-image-outset: 0em 0em 0em 0em;
    border-image-repeat: stretch stretch;
    padding: 1.5em 1.7em;
    margin-bottom: 1em;
    display: flex;
    gap: 1.2em;
    position: relative;
    .pop {
      position: absolute;
      top: 0;
      right: 0;
      width: 2.5em;
      height: 2.5em;
      background-image: url('./images/PetSelectBG.png');
      background-size: 100% 100%;
      padding: 0.3em;
      img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
      z-index: 2;
    }
    .cover {
      position: relative;
      height: 11em;
      border-radius: 0.6em;
      overflow: hidden;
      border: 0.1em solid #343434;
      box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.3), 0.2em 0.2em 0 rgb(0, 0, 0);
      flex-shrink: 0;
      flex-grow: 0;
      &::before {
        content: '';
        position: absolute;
        border-radius: 0.6em;
        z-index: 2;
        inset: 0;
        border: 0.15em solid rgba(255, 255, 255, 0.3);
      }
      .bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          display: block;
        }
      }
      .icon {
        position: absolute;
        bottom: 0.2em;
        right: 0.2em;
        width: 3em;
        height: 3em;
        z-index: 3;
        img {
          width: 100%;
          height: 100%;
          object-fit: contain;
          display: block;
        }
      }
      img {
        height: 100%;
        position: relative;
        z-index: 1;
        display: block;
      }
    }
    .content {
      display: flex;
      flex-direction: column;
      gap: 0.2em;
      flex: 1;
      margin-right: 0.3em;
      .name {
        background: linear-gradient(
          180deg,
          rgba(255, 255, 255, 1) 0%,
          rgba(255, 255, 255, 0.4) 100%
        );
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        font-size: 1.2em;
      }
      .value {
        display: flex;
        font-size: 1.6em;
        gap: 0.2em;
        align-items: center;
        .val {
          background: linear-gradient(
            180deg,
            rgba(255, 255, 255, 1) 0%,
            rgba(255, 255, 255, 0.4) 100%
          );
          -webkit-background-clip: text;
          background-clip: text;
          -webkit-text-fill-color: transparent;
        }
        .stars {
          display: flex;
          margin-left: 0.2em;
          align-items: center;
          .star {
            width: 0.9em;
            height: 0.9em;
            margin-left: -0.25em;
          }
        }
      }
      .time {
        margin-top: 0.3em;
        margin-bottom: 0.6em;
        font-size: 0.8em;
        color: #979797;
      }
      .list {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 0.7fr;
        align-items: flex-end;
        gap: 1em;
        margin-top: auto;
        margin-bottom: 0.2em;
        .item {
          width: 100%;
          position: relative;
          border-radius: 0.5em;
          box-shadow: 0 0 0 0.12em black, 0 0 0 0.24em #333534;
          > * {
            position: inherit;
            z-index: 1;
          }
          &.bangboo {
            font-size: 0.8em;
          }
          .count {
            position: absolute;
            right: 0;
            top: 0;
            z-index: 2;
            background-color: rgba(0, 0, 0, 0.5);
            padding: 0.1em 0.3em;
            font-size: 0.8em;
            border-bottom-left-radius: 0.3em;
            border-top-right-radius: 0.5em;
          }
          .rank_disp {
            position: absolute;
            top: 0em;
            left: 0em;
            background-color: rgb(0, 0, 0);
            z-index: 2;
            padding: 0.1em;
            border-bottom-right-radius: 0.25em;
            border-top-left-radius: 0.25em;
            .rank {
              width: 1em;
              color: white;
              position: relative;
              &::before {
                content: '';
                position: absolute;
                top: -0.1em;
                right: -0.4em;
                width: 0.3em;
                height: 0.3em;
                background: radial-gradient(
                  circle at 100% 0,
                  transparent 0.3em,
                  rgb(0, 0, 0) 0.3em
                );
                rotate: 90deg;
              }
              &::after {
                content: '';
                position: absolute;
                bottom: -0.4em;
                left: -0.1em;
                width: 0.3em;
                height: 0.3em;
                background: radial-gradient(
                  circle at 100% 0,
                  transparent 0.3em,
                  rgb(0, 0, 0) 0.3em
                );
                rotate: 90deg;
              }
            }
          }
          .image {
            width: 100%;
            aspect-ratio: 1;
            border-radius: 0.5em;
            overflow: hidden;
            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
              object-position: top;
              display: block;
            }
          }
          &.bangboo {
            .image {
              position: relative;
              img {
                width: 210%;
                height: 200%;
                position: absolute;
                object-position: center;
                top: 50%;
                left: 50%;
                transform: translate(-40%, -35%);
              }
            }
          }
          .c-info {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            background: rgb(0, 0, 0);
            color: white;
            display: flex;
            text-align: center;
          }
        }
      }
    }
  }
}