.screen-controls.vod-controls{
  position:absolute!important;
  inset:0!important;
  left:0!important;
  right:0!important;
  top:0!important;
  bottom:0!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  min-width:0!important;
  transform:none!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  background:linear-gradient(to top,rgba(0,0,0,.72) 0,rgba(0,0,0,0) 28%)!important;
  padding:0!important;
  pointer-events:none!important;
}

.screen-controls.vod-controls .vod-progress-row{
  position:absolute!important;
  left:max(18px,env(safe-area-inset-left))!important;
  right:max(18px,env(safe-area-inset-right))!important;
  bottom:max(12px,env(safe-area-inset-bottom))!important;
  width:auto!important;
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:10px!important;
  pointer-events:auto!important;
}

.screen-controls.vod-controls .vod-progress{
  width:100%!important;
  min-width:0!important;
}

.screen-controls.vod-controls .vod-actions{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  display:block!important;
  pointer-events:none!important;
}

/* Centro: voltar 10s, play/pause e adiantar 10s. */
.screen-controls.vod-controls .vod-actions>.seek-button,
.screen-controls.vod-controls .vod-actions>.round-play{
  position:absolute!important;
  top:50%!important;
  pointer-events:auto!important;
  z-index:2!important;
}
.screen-controls.vod-controls .vod-actions>.seek-button:first-child{
  left:calc(50% - 82px)!important;
  transform:translate(-50%,-50%)!important;
}
.screen-controls.vod-controls .vod-actions>.round-play{
  left:50%!important;
  transform:translate(-50%,-50%)!important;
}
.screen-controls.vod-controls .vod-actions>.seek-button:nth-child(3){
  left:calc(50% + 82px)!important;
  transform:translate(-50%,-50%)!important;
}

/* O player já ocupa a tela inteira; não é necessário botão de maximizar. */
.screen-controls.vod-controls .vod-fullscreen{
  display:none!important;
}

/* Volume à esquerda e brilho à direita, ambos verticais no centro da tela. */
.screen-controls.vod-controls .vod-actions>.slider{
  position:absolute!important;
  top:50%!important;
  width:54px!important;
  height:190px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:12px!important;
  color:#fff!important;
  background:rgba(5,12,22,.48)!important;
  border:1px solid rgba(255,255,255,.12)!important;
  border-radius:18px!important;
  backdrop-filter:blur(8px)!important;
  transform:translateY(-50%)!important;
  pointer-events:auto!important;
  z-index:2!important;
}
.screen-controls.vod-controls .vod-actions>.slider:nth-of-type(1){
  left:max(18px,env(safe-area-inset-left))!important;
}
.screen-controls.vod-controls .vod-actions>.slider:nth-of-type(2){
  right:max(18px,env(safe-area-inset-right))!important;
}
.screen-controls.vod-controls .vod-actions>.slider input{
  width:126px!important;
  height:22px!important;
  min-width:126px!important;
  margin:42px -36px!important;
  transform:rotate(-90deg)!important;
  transform-origin:center!important;
  accent-color:#42b7ff!important;
}

@media (orientation:landscape){
  .screen-controls.vod-controls .vod-progress-row{
    bottom:max(10px,env(safe-area-inset-bottom))!important;
  }
  .screen-controls.vod-controls .vod-actions>.slider{
    height:168px!important;
  }
  .screen-controls.vod-controls .vod-actions>.slider input{
    width:110px!important;
    min-width:110px!important;
    margin:34px -28px!important;
  }
}

@media (max-width:760px){
  .screen-controls.vod-controls .vod-progress-row{
    left:max(12px,env(safe-area-inset-left))!important;
    right:max(12px,env(safe-area-inset-right))!important;
  }
  .screen-controls.vod-controls .vod-actions>.slider:nth-of-type(1){
    left:max(10px,env(safe-area-inset-left))!important;
  }
  .screen-controls.vod-controls .vod-actions>.slider:nth-of-type(2){
    right:max(10px,env(safe-area-inset-right))!important;
  }
  .screen-controls.vod-controls .vod-actions>.slider{
    width:46px!important;
    height:154px!important;
  }
  .screen-controls.vod-controls .vod-actions>.slider input{
    width:98px!important;
    min-width:98px!important;
    margin:29px -24px!important;
  }
  .screen-controls.vod-controls .vod-actions>.seek-button:first-child{
    left:calc(50% - 70px)!important;
  }
  .screen-controls.vod-controls .vod-actions>.seek-button:nth-child(3){
    left:calc(50% + 70px)!important;
  }
}