:root { --media-play-size: 72px; --media-play-icon-size: 34px; }
.media-play { display: grid; place-items: center; width: var(--media-play-size); height: var(--media-play-size); border-radius: 50%; color: #fff; background: #11272270; backdrop-filter: blur(3px); pointer-events: none; transition: opacity 140ms ease, transform 140ms ease, scale 140ms ease; }
.media-play .media-play__icon { width: var(--media-play-icon-size); height: var(--media-play-icon-size); flex: none; }
.media-play-trigger:active .media-play { scale: .94; }
@media (max-height: 650px), (max-width: 359px) {
  :root { --media-play-size: 56px; --media-play-icon-size: 28px; }
}
@media (max-height: 480px) {
  :root { --media-play-size: 44px; --media-play-icon-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .media-play { transition: none; }
  .media-play-trigger:active .media-play { scale: 1; }
}