.hero-media { position: relative; border-radius: 17px; overflow: hidden; aspect-ratio: 9 / 16; }
.hero-media .hero-poster { width: 100%; height: 100%; object-fit: cover; }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; pointer-events: none; }
.hero-gameplay.has-video .hero-video { opacity: 1; }
.hero-video-toggle {
  position: absolute; inset: 0; width: 100%; border: 0; border-radius: 17px; padding: 16px;
  display: flex; flex-direction: column; gap: 12px; align-items: center; justify-content: center;
  color: #effeff; background: linear-gradient(transparent,#030b2244); cursor: pointer;
  font: 600 13px var(--font-display,sans-serif);
}
.hero-video-symbol { display: grid; place-items: center; width: 64px; height: 64px; border: 1px solid #83f3ff; border-radius: 50%; background: #0c274be6; color: #72f3ff; font-size: 24px; box-shadow: 0 0 28px #3de6ff55; }
.hero-video-label { padding: 6px 12px; background: #08172de6; border-radius: 7px; }
.hero-gameplay.is-playing .hero-video-toggle { inset: auto 8px 8px auto; width: 44px; height: 44px; padding: 0; background: #08172de6; border: 1px solid #80ecff99; border-radius: 50%; }
.hero-gameplay.is-playing .hero-video-symbol { width: 100%; height: 100%; font-size: 16px; border: 0; box-shadow: none; background: transparent; }
.hero-gameplay.is-playing .hero-video-label { display: none; }
.hero-video-toggle:focus-visible { outline: 3px solid #3de6ff; outline-offset: -4px; }
.hero-video-toggle[hidden] { display: none; }
.hero-video-status:empty { display: none; }
.hero-video-status { position: absolute; bottom: 12px; left: 10px; right: 10px; padding: 8px; border-radius: 6px; text-align: center; background: #08172de6; color: #d9f5ff; font: 11px/1.5 sans-serif; pointer-events: none; }