/* ==========================================================================
   video-player.css — the clone's video player (js/video-player.js), shared
   by the chat pane and the landing feed. Mirrors OF's video.js control bar:
   a 3px progress track with buffered + played fills and a hover handle, then
   the button row (34x32 buttons, 22px glyphs), "-remaining" in 500 12px,
   the quality menu under the gear. Controls fade while playing.
   ========================================================================== */
.b-video { position: relative; background: #000; }
.b-video__el { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }
/* the loading ring, video.js's own (50px, a 6px slate ring with two white
   arcs chasing each other), shown after a .3s grace so a quick start never
   flashes it */
.b-video__spinner {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50px;
  height: 50px;
  margin: -25px 0 0 -25px;
  box-sizing: border-box;
  /* the two arcs are absolutely placed pseudo-elements that sit at their
     static position, which honours the inherited text-align -- the feed's
     media box centres text, which split the ring in two (video.js sets this
     for the same reason) */
  text-align: left;
  border: 6px solid rgba(43, 51, 63, .7);
  border-radius: 50%;
  opacity: .85;
  background-clip: padding-box;
  visibility: hidden;
  z-index: 3;
  pointer-events: none;
}
.b-video.m-waiting .b-video__spinner { display: block; animation: vjs-spinner-show 0s linear .3s forwards; }
.b-video__spinner::before,
.b-video__spinner::after {
  content: "";
  position: absolute;
  margin: -6px;
  box-sizing: inherit;
  width: inherit;
  height: inherit;
  border-radius: inherit;
  border: inherit;
  border-color: transparent;
  border-top-color: #fff;
  opacity: 1;
}
.b-video.m-waiting .b-video__spinner::before { animation: vjs-spinner-spin 1.1s cubic-bezier(.6, .2, 0, .8) infinite, vjs-spinner-fade 1.1s linear infinite; }
.b-video.m-waiting .b-video__spinner::after { animation: vjs-spinner-spin 1.1s cubic-bezier(.6, .2, 0, .8) infinite, vjs-spinner-fade 1.1s linear infinite; animation-delay: .44s; }
@keyframes vjs-spinner-show { to { visibility: visible; } }
@keyframes vjs-spinner-spin { to { transform: rotate(360deg); } }
@keyframes vjs-spinner-fade {
  0% { border-top-color: #73859f; }
  20% { border-top-color: #73859f; }
  35% { border-top-color: #fff; }
  60% { border-top-color: #73859f; }
  100% { border-top-color: #73859f; }
}
.b-video__controls {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 0 6px 4px;
  background: linear-gradient(to top, rgba(0, 0, 0, .65), rgba(0, 0, 0, 0));
  opacity: 1; transition: opacity .2s;
}
.b-video.m-hide-controls .b-video__controls { opacity: 0; pointer-events: none; }
.b-video__progress { padding: 9px 2px 7px; cursor: pointer; }
.b-video__progress-track { position: relative; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .3); }
.b-video__progress-buffered { position: absolute; left: 0; top: 0; height: 100%; width: 0; border-radius: 3px; background: rgba(255, 255, 255, .4); }
.b-video__progress-fill { position: absolute; left: 0; top: 0; height: 100%; width: 0; border-radius: 3px; background: var(--of-blue); }
.b-video__progress-handle { position: absolute; top: 50%; left: 0; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--of-blue); transform: translateY(-50%); opacity: 0; transition: opacity .15s; }
.b-video__progress:hover .b-video__progress-handle { opacity: 1; }
.b-video__row { display: flex; align-items: center; gap: 0; }
.b-video__btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 32px; padding: 0; border: 0; background: transparent; color: #fff; cursor: pointer; }
.b-video__btn svg { width: 22px; height: 22px; fill: currentColor; }
.b-video__time { margin: 0 6px; color: #fff; font: 500 12px/1 var(--of-font); white-space: nowrap; }
.b-video__spacer { flex: 1; }
.b-video__gear { position: relative; display: inline-flex; }
.b-video__menu { position: absolute; right: 4px; bottom: 38px; min-width: 84px; padding: 4px 0; background: rgba(0, 0, 0, .85); border-radius: 6px; }
.b-video__menu[hidden] { display: none; }
.b-video__menu-item { display: block; width: 100%; padding: 7px 16px; border: 0; background: transparent; color: #fff; font: 500 13px/1 var(--of-font); text-align: left; cursor: pointer; }
.b-video__menu-item:hover { background: rgba(255, 255, 255, .12); }
.b-video__menu-item.m-active { color: var(--of-blue); }

/* the volume panel (live video.js, 2026-09-21): a 30x92 popup over the mute
   button, a 4x76 vertical bar with margin 13 15 0 -- white 25% track, blue
   75% level, a 24px knob -- fading in over .5s while the panel is hovered */
.b-video__volume-panel { position: relative; display: flex; align-items: center; }
.b-video__volume-control { position: absolute; left: 3px; bottom: 49px; z-index: 3; width: 30px; height: 92px; opacity: 0; visibility: hidden; transition: visibility .5s, opacity .5s; }
.b-video__volume-panel:hover .b-video__volume-control { opacity: 1; visibility: visible; }
.b-video__volume-bar { position: relative; width: 4px; height: 76px; margin: 13px 15px 0; border-radius: 4px; background-color: rgba(255, 255, 255, .25); cursor: pointer; }
.b-video__volume-level { position: absolute; left: 0; bottom: 0; width: 4px; height: 100%; border-radius: 4px; background-color: rgba(0, 175, 240, .75); }
.b-video__volume-level::before { content: ""; position: absolute; top: -12px; left: -10px; width: 24px; height: 24px; border-radius: 1000px; transition: box-shadow .3s; }
.b-video__volume-bar:hover .b-video__volume-level::before { box-shadow: inset 0 0 0 6px rgba(0, 175, 240, .06); }