.mf-pvp {
  --mf-pvp-u: 0.0520833333vw;
  display: block;
  width: 100%;
  margin-top: calc(180 * var(--mf-pvp-u));
  margin-bottom: calc(180 * var(--mf-pvp-u));
  padding-right: calc(30 * var(--mf-pvp-u));
  padding-left: calc(30 * var(--mf-pvp-u));
  color: #fff;
  font-family: var(
    --mf-font-body,
    "Schibstedgrotesk",
    "Schibsted Grotesk",
    Arial,
    sans-serif
  );
}

.mf-pvp,
.mf-pvp *,
.mf-pvp *::before,
.mf-pvp *::after {
  box-sizing: border-box;
}

.mf-pvp__inner {
  width: 100%;
}

.mf-pvp__frame {
  position: relative;
  width: 100%;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: linear-gradient(145deg, #3d3e42, #111214);
  border-radius: max(16px, calc(24 * var(--mf-pvp-u)));
  box-shadow: 0 calc(24 * var(--mf-pvp-u)) calc(80 * var(--mf-pvp-u))
    rgb(0 0 0 / 12%);
  isolation: isolate;
}

.mf-pvp__poster-control,
.mf-pvp__embed,
.mf-pvp__video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.mf-pvp__poster-control {
  overflow: hidden;
  padding: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: none;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.mf-pvp__poster-control:focus-visible {
  outline: max(2px, calc(3 * var(--mf-pvp-u))) solid #fff;
  outline-offset: max(-5px, calc(-6 * var(--mf-pvp-u)));
}

.mf-pvp__poster {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.002);
  transition: transform 1.1s cubic-bezier(0.17, 0.84, 0.44, 1),
    filter 0.5s cubic-bezier(0.17, 0.84, 0.44, 1);
  user-select: none;
  -webkit-user-drag: none;
}

.mf-pvp__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
      180deg,
      rgb(0 0 0 / 42%) 0,
      transparent 34%,
      transparent 58%,
      rgb(0 0 0 / 52%) 100%
    ),
    rgb(5 6 8 / 8%);
  transition: background-color 0.4s ease;
}

.mf-pvp__identity {
  position: absolute;
  top: max(18px, calc(24 * var(--mf-pvp-u)));
  left: max(18px, calc(24 * var(--mf-pvp-u)));
  display: flex;
  max-width: min(70%, calc(760 * var(--mf-pvp-u)));
  align-items: center;
  gap: max(10px, calc(12 * var(--mf-pvp-u)));
  text-shadow: 0 1px 18px rgb(0 0 0 / 36%);
}

.mf-pvp__mark {
  display: grid;
  width: max(32px, calc(40 * var(--mf-pvp-u)));
  height: max(32px, calc(40 * var(--mf-pvp-u)));
  flex: none;
  place-items: center;
  color: rgb(255 255 255 / 94%);
  background: rgb(12 13 15 / 18%);
  border-radius: 50%;
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
}

.mf-pvp__mark svg {
  width: 75%;
  height: 75%;
}

.mf-pvp__identity-copy {
  display: grid;
  min-width: 0;
  gap: max(1px, calc(2 * var(--mf-pvp-u)));
  line-height: 1.15;
}

.mf-pvp__identity-copy strong {
  overflow: hidden;
  font-size: max(14px, calc(17 * var(--mf-pvp-u)));
  font-weight: 600;
  letter-spacing: -0.025em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mf-pvp__identity-copy span {
  color: rgb(255 255 255 / 76%);
  font-size: max(11px, calc(12 * var(--mf-pvp-u)));
  font-weight: 400;
}

.mf-pvp__play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  width: clamp(58px, calc(76 * var(--mf-pvp-u)), 76px);
  height: clamp(58px, calc(76 * var(--mf-pvp-u)), 76px);
  place-items: center;
  color: #111214;
  background: rgb(255 255 255 / 82%);
  border-radius: 50%;
  box-shadow: 0 max(8px, calc(12 * var(--mf-pvp-u)))
    max(28px, calc(42 * var(--mf-pvp-u))) rgb(0 0 0 / 18%);
  transform: translate(-50%, -50%);
  transition: background-color 0.3s ease,
    transform 0.45s cubic-bezier(0.17, 0.84, 0.44, 1);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
}

.mf-pvp__play svg {
  width: 42%;
  height: 42%;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.mf-pvp__status {
  position: absolute;
  bottom: max(18px, calc(24 * var(--mf-pvp-u)));
  left: max(18px, calc(24 * var(--mf-pvp-u)));
  display: grid;
  min-width: max(126px, calc(180 * var(--mf-pvp-u)));
  gap: max(7px, calc(9 * var(--mf-pvp-u)));
  color: rgb(255 255 255 / 88%);
  font-size: max(11px, calc(12 * var(--mf-pvp-u)));
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  text-shadow: 0 1px 14px rgb(0 0 0 / 48%);
}

.mf-pvp__progress {
  position: relative;
  display: block;
  width: 100%;
  height: 2px;
  overflow: hidden;
  background: rgb(255 255 255 / 32%);
  border-radius: 999px;
}

.mf-pvp__progress > span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 8%;
  background: #fff;
  border-radius: inherit;
}

.mf-pvp__embed {
  border: 0;
}

.mf-pvp__video {
  object-fit: contain;
  background: #000;
}

@media (hover: hover) {
  .mf-pvp__poster-control:hover .mf-pvp__poster {
    filter: saturate(1.04);
    transform: scale(1.022);
  }

  .mf-pvp__poster-control:hover .mf-pvp__play {
    background: #fff;
    transform: translate(-50%, -50%) scale(1.06);
  }
}

@media (max-width: 767.98px) {
  .mf-pvp {
    --mf-pvp-u: 0.2666666667vw;
    margin-top: calc(60 * var(--mf-pvp-u));
    margin-bottom: calc(60 * var(--mf-pvp-u));
    padding-right: calc(15 * var(--mf-pvp-u));
    padding-left: calc(15 * var(--mf-pvp-u));
  }

  .mf-pvp__inner {
    width: 100%;
  }

  .mf-pvp__frame {
    border-radius: max(12px, calc(16 * var(--mf-pvp-u)));
    box-shadow: 0 calc(14 * var(--mf-pvp-u)) calc(46 * var(--mf-pvp-u))
      rgb(0 0 0 / 12%);
  }

  .mf-pvp__identity {
    top: calc(14 * var(--mf-pvp-u));
    left: calc(14 * var(--mf-pvp-u));
    max-width: calc(100% - calc(28 * var(--mf-pvp-u)));
    gap: calc(8 * var(--mf-pvp-u));
  }

  .mf-pvp__mark {
    width: calc(30 * var(--mf-pvp-u));
    height: calc(30 * var(--mf-pvp-u));
  }

  .mf-pvp__identity-copy strong {
    font-size: calc(13 * var(--mf-pvp-u));
  }

  .mf-pvp__identity-copy span {
    font-size: calc(10 * var(--mf-pvp-u));
  }

  .mf-pvp__play {
    width: calc(50 * var(--mf-pvp-u));
    height: calc(50 * var(--mf-pvp-u));
  }

  .mf-pvp__status {
    bottom: calc(14 * var(--mf-pvp-u));
    left: calc(14 * var(--mf-pvp-u));
    min-width: calc(110 * var(--mf-pvp-u));
    gap: calc(6 * var(--mf-pvp-u));
    font-size: calc(10 * var(--mf-pvp-u));
  }
}

@media (prefers-reduced-motion: reduce) {
  .mf-pvp__poster,
  .mf-pvp__play {
    transition: none;
  }
}

@media (forced-colors: active) {
  .mf-pvp__poster-control:focus-visible {
    outline-color: Highlight;
  }

  .mf-pvp__play {
    color: ButtonText;
    background: ButtonFace;
    border: 1px solid ButtonText;
  }
}