/* Custom media controls omit the native menu and its download entry. */
.player-stage { isolation: isolate; }
.player-stage video, .poster-wrap img {
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
}
.player-stage video { cursor: pointer; }
.player-stage video::-webkit-media-controls { display: none !important; }
.video-controls {
  position: absolute;
  z-index: 2;
  inset: auto 0 0;
  padding: 26px 12px max(7px, env(safe-area-inset-bottom));
  background: linear-gradient(transparent, #000d);
  color: #fff;
}
.video-control-row { display: flex; align-items: center; gap: 4px; }
.video-control-button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #fff;
  padding: 11px;
}
.video-control-button:hover { background: #ffffff26; }
.video-control-button svg { width: 22px; height: 22px; }
.video-controls :focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.video-time { white-space: nowrap; font-size: 11px; font-variant-numeric: tabular-nums; }
.video-control-spacer { flex: 1; }
.video-seek, .video-volume {
  display: block;
  margin: 0;
  padding: 0;
  height: 24px;
  accent-color: #fff;
  cursor: pointer;
}
.video-seek { width: 100%; }
.video-volume { width: 64px; flex: 0 0 64px; }
.video-seek:disabled { cursor: wait; }
.is-paused .pause-icon, .player-stage:not(.is-paused) .play-icon,
.muted-cross, .is-muted .sound-waves { display: none; }
.is-muted .muted-cross { display: block; }
.video-error { z-index: 3; }
.video-loading { z-index: 3; }
.player-stage:fullscreen { width: 100vw; height: 100dvh; max-height: none; }
.player-dialog.is-player-expanded[open] {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  border-radius: 0;
}
.is-player-expanded .player-stage { flex: 1; height: auto; min-height: 0; }
.is-player-expanded .player-top, .is-player-expanded .player-bottom { flex-shrink: 0; }
@media (max-width: 540px) {
  .video-volume { display: none; }
  .video-controls { padding-left: 8px; padding-right: 8px; }
}