#log {
  width: 300px;
  overflow: hidden;
  position: relative;
}

#log > div {
  background: #a559fbd5;
  margin: 7px 0;
  padding: 6px;
  border-radius: 4px;
  position: relative;
}

.match-card-wide {
  width: 100%;
  max-width: 215px;
  padding: 10px 14px;
  background: #f6f6f6;
  border-radius: 8px;
  font-family: sans-serif;
  box-shadow: 0 1px 4px #a559fbd5;
}

.top-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  margin-bottom: -24px;
}

.type {
  font-family: "Anton", sans-serif;
  font-size: 14px;
  color: #fff;
}

.replayid {
  color: #fff;
}

.result {
  font-family: "Anton", sans-serif;
  font-size: 25px;
  padding-right: 10px;
}

.result.win {
  color: #6bf157;
}

.result.lose {
  color: #f68c8c;
}

.result.draw {
  color: #acacc0;
}

.item.uploaded {
  margin-left: 10px;
}

.info-row {
  display: flex;
  justify-content: start;
  gap: 12px 20px;
  color: #fff;
  margin-bottom: -4px;
}

.opponent-info {
  margin-left: -15px;
}

.item b {
  font-weight: 600;
}

.item .c {
  font-family: "Anton", sans-serif;
  color: #f2e2fe;
}

.item .m {
  font-family: "Anton", sans-serif;
  color: #f18344;
}

.item.rank-name {
  margin-bottom: -6px;
  margin-top: 2px;
  font-size: small;
  font-family: Oswald, sans-serif;
}

.item.mr {
  margin-bottom: -6px;
  margin-top: 2px;
  font-size: small;
  font-family: Oswald, sans-serif;
}

.item.char-name {
  font-size: large;
}

.item.vs {
  font-size: 30px;
  padding-left: 30px;
  font-family: "Anton", sans-serif;
  margin-bottom: -11px;
}

.item.count {
  font-size: 8px;
  padding-left: 38px;
}

.bottom-row {
  color: #fff;
  display: flex;
  justify-content: space-between;
  font-size: 9px;
}

.match-card-wide {
  position: relative;
  /* z軸指定 */
  z-index: 0;
  overflow: hidden;
}

/* グラデーションは上に乗せておくが、最初は透明 */
.match-card-wide::after {
  content: "";
  position: absolute;
  inset: 0;
  /* 背面へ */
  z-index: -1;
  background: linear-gradient(
    90deg,
    rgba(234, 50, 240, 0.85) 0%,
    rgba(66, 6, 162, 0.85) 10%,
    rgba(66, 6, 162, 0.85) 90%,
    rgba(234, 50, 240, 0.85) 100%
  );
  opacity: 0;
  transition: opacity 0.8s ease;
  pointer-events: none;
}

/* グラデーションを表示する状態 */
.match-card-wide.grad-show::after {
  opacity: 1;
}