/* Плеер: видео на всю ширину блока, переключатель качества в правом верхнем углу. */
.vp { position: relative; max-width: 100%; background: #000; border-radius: 12px; overflow: hidden; }
.vp video {
  display: block; width: 100%; height: auto; /* width/height у <video> дают пропорцию - без скачка вёрстки */
  max-height: 85vh; object-fit: contain;     /* вертикальное видео не растягивается на три экрана */
}
/* Вертикальный ролик: без чёрных полей на всю ширину - блок по ширине самого видео. */
.vp--portrait { max-width: min(100%, calc(85vh * 9 / 16)); margin-left: auto; margin-right: auto; }
.vp-q {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  display: flex; gap: 2px; padding: 3px; border-radius: 999px;
  background: rgba(0, 0, 0, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.vp-q button {
  border: 0; margin: 0; background: transparent; cursor: pointer;
  font: 600 12px/1 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color: rgba(255, 255, 255, .72); padding: 7px 10px; border-radius: 999px;
  min-height: 28px; /* палец попадает на телефоне */
}
.vp-q button:hover { color: #fff; }
.vp-q button[aria-pressed="true"] { background: #fff; color: #111; }
.vp-q button:focus-visible { outline: 2px solid #4c9ffe; outline-offset: 1px; }