The double piping has to be in your code. It's not a default thing.
So for instance, you would do something like:
var versus_1 = docData['versus_1'].split('||');
Then you would access the two pieces of data with versus_1[0] and versus_1[1].
You are trying to connect to Firebase's Real-Time Database system. We actually use Firebase's Cloud Firestore system.
You are also trying to use the Admin SDK. Use the Client SDK.
JavaScript is a JIT language, and thus has very specific scoping for variables.
Variables only exist within the { } brackets in which they were created.
Browser source pages are in the format of: http://8wr.io/scoreboard/source/<package_id>/<page_id>/
The <package_id> and <page_id> references in the URL to your browser source are essentially the API key to your page. Sharing them means someone could theoretically alter the values in your page...
It is not possible to update CSS in real time... that's just not something browsers can do. You have to place the style information in inline HTML in this case.
Microsoft decided a few months ago that their investment into Beam (later renamed to Mixer) was coming to an end. As such, about two weeks ago, they shut the Mixer platform down completely. It's a shame, because I believe the advancement of Mixer was the only thing forcing Amazon to keep Twitch...