/* Rocola: el input donde se pega el link (invisible: el menú dibuja el texto) y el cuadro del reproductor de YouTube. */
#jbLink {
  position: fixed; left: 0; top: 0; width: 1px; height: 1px;
  opacity: 0; border: 0; padding: 0;
}

/* YouTube exige que el reproductor mida al menos 200x200 y que no haya nada tapándolo ni encima: por eso no se esconde ni se mete en el menú.
   El borde está afuera del reproductor (no lo tapa). Aparece solo mientras suena algo y escuchás la rocola. */
#jbDock {
  display: none;
  position: fixed; right: 12px; bottom: 12px; z-index: 5;
  box-sizing: content-box; width: 200px; height: 200px;
  border: 3px solid #fff; background: #000;
  pointer-events: none; /* para que nadie lo pause sin querer y se desfase */
}
#jbDock.on { display: none; }
#jbDock iframe { display: none; width: 200px; height: 200px; }

/* En el celular el cuadro va arriba a la derecha, para no tapar los controles. */
html.touch #jbDock { top: 6px; right: 6px; bottom: auto; }