/* Watching together (js/together.js): who's live, easter eggs, quick message. Subtle: fades, small type, never in the way. */
.tglive { position: absolute; left: 60px; top: 46px; z-index: 6; max-width: 900px; opacity: 0; transition: opacity .7s ease; pointer-events: none;
  font: 500 20px/1.5 sans-serif; color: rgba(255,255,255,.82); text-shadow: 0 1px 8px rgba(0,0,0,.9); }
#player .osd.on ~ .tglive, .tglive.ping { opacity: .9; }
.tglive .tgh { display: block; font-size: 12px; font-weight: 800; letter-spacing: 3px; color: rgba(255,255,255,.5); }
.tglive .tgp { display: block; }
.tglive .tgp i { display: inline-block; width: 9px; height: 9px; margin-right: 10px; border-radius: 50%; vertical-align: 2px;
  -webkit-animation: tgbeat 2.4s ease-in-out infinite; animation: tgbeat 2.4s ease-in-out infinite; }
.tglive .tgp.paused i { -webkit-animation: none; animation: none; opacity: .5; }
.tglive .tgp b { font-weight: 700; }
.tglive .tgp em { font-style: normal; font-size: 15px; color: rgba(255,255,255,.5); }
@-webkit-keyframes tgbeat { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
@keyframes tgbeat { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
.tgegg { position: absolute; left: 60px; bottom: 70px; z-index: 6; max-width: 720px; padding: 16px 22px; border-radius: 16px; opacity: 0;
  -webkit-transform: translateY(10px); transform: translateY(10px); transition: opacity 1.2s ease, -webkit-transform 1.2s ease, transform 1.2s ease;
  background: rgba(10,12,18,.62); font: 400 21px/1.4 Georgia, serif; color: rgba(255,255,255,.9); pointer-events: none; }
.tgegg.on { opacity: .92; -webkit-transform: none; transform: none; }
.tgegg .tge { margin-right: 10px; }
.tgmsg { position: absolute; left: 120px; right: 120px; bottom: 200px; z-index: 8; padding: 22px 26px; border-radius: 22px; opacity: 0; pointer-events: none;
  background: rgba(12,14,20,.86); transition: opacity .25s ease; }
.tgmsg.on { opacity: 1; pointer-events: auto; }
.tgmsg .tgmt { font: 700 16px/1 sans-serif; letter-spacing: 3px; color: rgba(255,255,255,.5); text-transform: uppercase; }
.tgmsg .tgrow { margin-top: 16px; white-space: nowrap; overflow: hidden; opacity: .55; }
.tgmsg .tgrow.cur { opacity: 1; }
.tgmsg .tgc { display: inline-block; margin-right: 12px; padding: 12px 22px; border-radius: 26px; font: 600 22px/1 sans-serif; background: rgba(255,255,255,.08); }
.tgmsg .tgc.on { background: #fff; color: #10141c; }
.tgmsg .tgrow:not(.cur) .tgc.on { background: rgba(255,255,255,.35); color: #fff; }
.tgmsg .ppl .tgc i { display: inline-block; width: 9px; height: 9px; margin-right: 8px; border-radius: 50%; background: #5ee6a8; vertical-align: 2px; }
.tgmsg .tghint { margin-top: 16px; font: 500 15px/1 sans-serif; color: rgba(255,255,255,.4); letter-spacing: 1px; }

.tgsent { position: absolute; right: 60px; top: 46px; z-index: 7; padding: 10px 18px; border-radius: 20px; opacity: 0; pointer-events: none;
  background: rgba(10,12,18,.62); font: 600 19px/1.2 sans-serif; color: rgba(255,255,255,.92); transition: opacity .6s ease; }
.tgsent.on { opacity: .95; }