body {
margin: 0;
padding: 0;
background-color: black;
}
#playerUI {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
overflow: hidden;
z-index: 1;
}
#player {
position: relative;
top: 0;
left: 0;
width: 100vw;
height: 100vh !important;
overflow: hidden;
z-index: 0;
}
#streamingVideo {
position: relative;
top: 0;
left: 0;
width: 100vw;
height: 100vh !important;
}
#overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 1);
z-index: 3;
}
.centered-image {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}
#imageContainer {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
z-index: 4;
flex-direction: column;
opacity: 0 !important;
}
#loadingBar {
width: 210px;
height: 5px;
background-color: rgba(255, 255, 255, 0.3);
border-radius: 2.5px;
overflow: hidden;
margin-top: -10px;
position: relative;
display: none;
}
#loadingProgressBar, #loadingProgressBarNew {
height: 100%;
background-color: #ffca07;
width: 0;
}
#loadingText {
margin-top: 20px;
font-size: 18px;
color: white;
font-family: Arial, sans-serif !important;
}
#loadingDots, #loadingDotsNew {
display: inline-block;
width: 1ch;
text-align: left;
animation: dots 1s steps(4, end) infinite;
}
@keyframes dots {
0% { content: ""; }
25% { content: "."; }
50% { content: ".."; }
75% { content: "..."; }
100% { content: ""; }
}
#loadingTip {
    margin-top: 12px;              /* logo abaixo da barra amarela           */
    font-family: Arial, sans-serif !important; /* mesma fonte do “Connecting…”           */
    font-style: italic;
    font-size: 14px;               /* menorzinho                             */
    color: rgba(255,255,255,0.65); /* levemente translúcido                  */
    white-space: nowrap;           /* evita quebrar em 2 linhas              */
    pointer-events: none;
    position: relative;
    opacity: 0;                    /* começa invisível                       */
}

/* anima-entrar: revela de baixo p/ cima */
@keyframes tipInBottom {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0);    }
}

/* anima-entrar: desliza da direita */
@keyframes tipInRight {
    from { opacity: 0; transform: translateX(24px); }
    to   { opacity: 1; transform: translateX(0);    }
}

/* anima-sair: desliza p/ esquerda */
@keyframes tipOutLeft {
    from { opacity: 1; transform: translateX(0);    }
    to   { opacity: 0; transform: translateX(-24px);}
}
/* animações aplicadas via classes */
.tip-in-first { animation: tipInBottom .45s ease-out forwards; }  /* 1ª vez */
.tip-in       { animation: tipInRight  .40s ease-out forwards; }  /* trocas */
.tip-out      { animation: tipOutLeft  .30s ease-in  forwards; }  /* saída  */