.mat-bg {
  display: flex;
  flex-direction: column;
  row-gap: var(--row-gap);
  justify-content: center;
  align-items: center;
  background-color: transparent;
  .row {
    display: flex;
    column-gap: var(--col-gap);
    &.opponent {
      flex-direction: row-reverse;
    }
  }
}

.block {
  height: var(--block-height-m);
  width: var(--block-width);
  background: radial-gradient(#ffffff00, #151212);
  position: relative;
  &.extra {
    margin-inline: calc(var(--block-width) / 2 + var(--col-gap) / 2);
  }
  &.szone {
    height: var(--block-height-s);
  }
  &.highlight {
    background: #102639;
    cursor: pointer;
    .triangle {
      --color: #006eff;
      transform: scale(1.5);
    }
    &:hover {
      opacity: 0.7;
      .triangle {
        transform: scale(1.2);
      }
    }
  }
  .triangle {
    width: 0;
    height: 0;
    --color: #333;
    border-width: 4px;
    border-style: solid;
    position: absolute;
    transition: 0.3s;
    &:nth-of-type(1) {
      border-color: var(--color) transparent transparent var(--color);
    }
    &:nth-of-type(2) {
      border-color: var(--color) var(--color) transparent transparent;
      right: 0;
    }
    &:nth-of-type(3) {
      border-color: transparent var(--color) var(--color) transparent;
      right: 0;
      bottom: 0;
    }
    &:nth-of-type(4) {
      border-color: transparent transparent var(--color) var(--color);
      bottom: 0;
    }
  }
}

// 下面应该和moveToOutside、moveToGround对应
.other-blocks {
  width: 0;
  height: 0;
  &.op {
    transform: rotate(180deg);
  }
  position: absolute;
  --height: var(--card-height-o);
  --width: calc(var(--height) * var(--card-ratio));
  --left: calc(
    var(--col-gap) * 2 + var(--block-width) * 2.5 +
      var(--block-outside-offset-x) + var(--width) / 2
  );
  --top: calc(
    var(--row-gap) + var(--block-height-m) +
      (var(--block-height-m) - var(--height)) / 2
  );

  .banish,
  .field,
  .graveyard,
  .deck,
  .extra-deck {
    position: absolute;
    transform: translate(-50%, -50%);
    height: var(--height);
    width: var(--width);
    top: var(--top);
    left: var(--left);
  }
  .field {
    left: calc(-1 * var(--left));
  }
  .banish {
    top: calc(var(--top) - var(--row-gap) - var(--height));
  }
  .deck {
    --left: calc(
      var(--deck-offset-x) + 2 * (var(--block-width) + var(--col-gap))
    );
    left: var(--left);
    top: calc(
      var(--deck-offset-y) + 2 * var(--block-height-m) + 2 * var(--row-gap)
    );
    transform: translate(-50%, -50%) rotate(calc(-1 * var(--deck-rotate-z)));
    height: var(--deck-card-height);
    width: calc(var(--deck-card-height) * var(--card-ratio));
    &.extra-deck {
      left: calc(-1 * var(--left));
      transform: translate(-50%, -50%) rotate(var(--deck-rotate-z));
    }
  }
}

// 被禁用的样式
.disabled-cross {
  width: 100%;
  height: 100%;
  cursor: not-allowed;
  background: linear-gradient(
      to top right,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0) calc(50% - 1.5px),
      red 50%,
      rgba(0, 0, 0, 0) calc(50% + 1.5px),
      rgba(0, 0, 0, 0) 100%
    ),
    linear-gradient(
      to bottom right,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0) calc(50% - 1.5px),
      red 50%,
      rgba(0, 0, 0, 0) calc(50% + 1.5px),
      rgba(0, 0, 0, 0) 100%
    );
  display: none;
}

.disabled-cross.show {
  display: block;
}

.block.glowing {
  --shadow-color: #13a1ff;
  box-shadow: 0 0 3px 3px var(--shadow-color), 0 0 25px 2px #0099ff87;
  background: var(--shadow-color);
  border-radius: 2px;
  .triangle {
    display: none;
  }
}
