/* --- ESTRUTURA PRINCIPAL --- */
.tv-titulo { text-align: center; color: #fff; font-size: 22px; margin-bottom: 20px; text-transform: uppercase; }
.tv-player-container {
    position: relative; width: 100%; max-width: 900px; aspect-ratio: 16/9; margin: 0 auto;
    background: #000; border-radius: 12px; overflow: hidden; border: 2px solid #333;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

/* --- DELAY ANIMADO INICIAL --- */
.delay-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 50;
    display: flex; align-items: center; justify-content: center;
    color: white; font-size: 20px; font-weight: bold; text-shadow: 2px 2px 4px #000;
    background: linear-gradient(45deg, #cc5200, #ff8533, #e65c00);
    background-size: 200% 200%; animation: ondasLaranja 3s ease infinite;
}
@keyframes ondasLaranja { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }

/* --- OVERLAY DE ATIVAR SOM --- */
.unmute-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 40;
    display: none; /* Começa oculto */
    flex-direction: column; align-items: center; justify-content: center;
    color: white; background: rgba(0,0,0,0.5); cursor: pointer; text-shadow: 1px 1px 3px #000;
}
.unmute-overlay .material-icons { font-size: 48px; margin-bottom: 10px; animation: pisca 1.5s infinite; }
.unmute-overlay p { font-size: 16px; font-weight: bold; margin: 0; }

/* --- INDICADORES AO VIVO --- */
.tv-status-bar { position: absolute; bottom: 0; left: 0; width: 100%; height: 4px; background: rgba(0,0,0,0.5); z-index: 10; }
.tv-live-badge { position: absolute; bottom: 10px; left: 15px; background: red; color: white; padding: 2px 8px; font-size: 12px; font-weight: bold; border-radius: 4px; z-index: 10; animation: pisca 1.5s infinite; }
@keyframes pisca { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } }

.tv-top-info { position: absolute; top: 15px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; z-index: 10; align-items: center; }
.tv-badge { background: red; color: white; padding: 4px 10px; border-radius: 4px; font-weight: bold; font-size: 14px; }
.tv-viewers { background: rgba(0,0,0,0.6); color: white; padding: 4px 10px; border-radius: 4px; font-size: 14px; display: flex; align-items: center; gap: 5px; }

/* --- MASCOTE E BOTÃO DE ANÚNCIO (!) --- */
.tv-te-peguei { 
    position: absolute; 
    bottom: 10px; 
    right: 10px; 
    width: 100px; 
    height:100px; 
    z-index: 10; 
    margin: -11px;
}
.tv-info-circle { 
    position: absolute; 
    top: 10px; 
    right: 10px; 
    width: 25px; 
    height: 25px; 
    background: rgba(255,255,255,0.8); 
    color: #000; 
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-weight: bold; 
    font-size: 16px; 
    cursor: pointer; 
    z-index: 20; 
    transition: transform 0.2s; 
}
.tv-info-circle:hover { transform: scale(1.1); background: #fff; }

/* --- GRADE DE PROGRAMAÇÃO --- */
.tv-grade-container { max-width: 900px; margin: 30px auto; background: #1a1a1a; padding: 20px; border-radius: 12px; }
.tv-grade-container h3 { color: #f77810; margin-bottom: 15px; border-bottom: 1px solid #333; padding-bottom: 10px; }
.tv-grade-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.tv-grade-item { padding: 10px; background: #2a2a2a; border-radius: 6px; display: flex; gap: 10px; align-items: center; border-left: 4px solid #444; }
.tv-grade-item.ativo { border-left-color: #f77810; background: #3a2510; }
.tv-grade-item .hora { color: #aaa; font-weight: bold; font-size: 14px; }
.tv-grade-item .nome { color: #fff; font-size: 14px; }

/* --- AVISO DISCLAIMER --- */
.tv-aviso { max-width: 900px; margin: 0 auto 30px; background: rgba(247, 120, 16, 0.1); border: 1px dashed #f77810; padding: 20px; border-radius: 12px; text-align: center; color: #ccc; line-height: 1.6; }

/* --- BARRA DE INTERAÇÕES (ESTRELAS E LIKES) --- */
.tv-interactions-bar {
    max-width: 900px; margin: 15px auto; display: flex; justify-content: space-between;
    align-items: center; background: #1a1a1a; padding: 10px 20px; border-radius: 12px;
    flex-wrap: wrap; gap: 15px;
}
.tv-stars-area { display: flex; align-items: center; gap: 5px; color: #f1c40f; cursor: pointer; }
.tv-stars-area .material-icons { font-size: 24px; transition: transform 0.2s; }
.tv-stars-area .material-icons:hover { transform: scale(1.2); }

.tv-votes-area { display: flex; gap: 15px; }
.btn-vote-tv {
    background: #222; color: #fff; border: 1px solid #444; padding: 8px 15px;
    border-radius: 20px; cursor: pointer; display: flex; align-items: center; gap: 5px;
    transition: background 0.3s;
}
.btn-vote-tv:hover { background: #f77810; border-color: #f77810; }

/* --- COMENTÁRIOS --- */
.tv-comments-section { max-width: 900px; margin: 0 auto 40px; background: #1a1a1a; border-radius: 12px; overflow: hidden; }
.tv-comments-header { padding: 15px 20px; background: #222; color: #fff; display: flex; justify-content: space-between; cursor: pointer; font-weight: bold; }
.tv-comments-list { display: none; padding: 15px; max-height: 300px; overflow-y: auto; scrollbar-color: #f77810 #1a1a1a; scrollbar-width: thin; }
.tv-comments-list.show { display: block; }
.tv-comment-item { display: flex; gap: 10px; margin-bottom: 15px; border-bottom: 1px solid #333; padding-bottom: 10px; }
.tv-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.tv-comment-item p { margin: 5px 0 0; color: #ddd; font-size: 14px; }
.tv-comment-form { display: flex; gap: 10px; padding: 15px; background: #222; border-top: 1px solid #333; }
.tv-comment-form input { flex: 1; padding: 10px 15px; border-radius: 20px; border: none; background: #111; color: #fff; }
.tv-comment-form button { background: #f77810; color: #fff; border: none; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; }

/* --- MODAL DE ANÚNCIO --- */
.tv-ad-modal { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 100; align-items: center; justify-content: center; }
.tv-ad-content { 
    position: relative; 
    background: #fff; 
    padding: 5px; 
    border-radius: 8px; 
    max-width: 300px; 
    max-height: 250px; 
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; 
}
.tv-ad-close { position: absolute; top: -15px; right: -15px; background: red; color: white; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; font-weight: bold; border: 2px solid #fff; z-index: 110; }
.tv-ad-content img { width: 100%; height: auto; border-radius: 4px; object-fit: contain; } 

/* --- RESPONSIVIDADE (CELULARES) --- */
@media (max-width: 600px) {
    
    .tv-top-info { top: 10px; gap: 5px; }
    .tv-badge { padding: 2px 6px; font-size: 10px; }
    .tv-viewers { padding: 2px 6px; font-size: 11px; }
    .tv-viewers .material-icons { font-size: 11px !important; }
    
    /* Ajustes Mascote e (!) */
    .tv-info-circle { 
        width: 20px; height: 20px; 
        font-size: 14px; 
        top: 5px; right: 5px; 
    }
    .tv-te-peguei { 
        width: 30px; height: 30px; 
        bottom: 5px; right: 5px; 
        margin: -5.1px;
    }

    /* Ajustes Botão de Som */
    .unmute-overlay .material-icons { font-size: 36px; }
    .unmute-overlay p { font-size: 14px; }

    /* --- NOVA ATUALIZAÇÃO: Banner AINDA MENOR no Celular --- */
    .tv-ad-content {
        /* Restringe o banner a no máximo 150px de largura e 100px de altura */
        max-width: 160px; 
        max-height: 140px;
        width: 200px; 
        height: 190px;
        background-color:#222;
    }
    /* Ajuste do botão de fechar para o novo tamanho mini no celular */
    .tv-ad-close {
        top: -10px; right: -10px;
        width: 22px; height: 22px;
        font-size: 12px;
        border-width: 1px;
    }
    /* Ajuste do texto de carregamento no celular */
    .delay-overlay {
        font-size: 15px;
        text-align: center;
        padding: 0 15px; /* Evita que o texto cole nas bordas se a tela for muito fina */
    }
    
}

/* --- CORREÇÃO DO 'X' DA PUBLICIDADE (Para ele não ficar cortado) --- */
.tv-ad-content {
    /* Permite que o botão 'X', que está posicionado para fora, apareça */
    overflow: visible !important; 
}

/* --- ESTILO DO LETREIRO PASSANDO (MARQUEE) CORRIGIDO --- */
/* --- ESTILO DO LETREIRO PASSANDO (MARQUEE) CORRIGIDO --- */
.tv-marquee-container {
    position: absolute;
    bottom: 4px; 
    left: 0;
    width: 100%;
    height: 30px; 
    line-height: 30px; 
    background-color: #140900; 
    color: #ffffff; 
    /* MÁGICA AQUI: O nível 5 garante que fique ATRÁS da logo (que é 10) e na frente do vídeo (que é 0) */
    z-index: 5; 
    overflow: hidden; 
    white-space: nowrap; 
    box-shadow: 0 -2px 5px rgba(0,0,0,0.5);
}

.tv-marquee-text {
    display: inline-block; 
    padding-left: 100%; 
    font-size: 16px;
    font-family: Arial, sans-serif;
    font-weight: bold;
    animation: marqueeTv 70s linear infinite; 
}

/* Animação que faz o texto correr */
@keyframes marqueeTv {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-100%); } 
}

/* Ajuste Responsivo */
@media (max-width: 600px) {
    .tv-marquee-container {
        height: 22px; 
        line-height: 22px;
        bottom: 2px;
    }
    .tv-marquee-text {
        font-size: 12px; 
        animation: marqueeTv 70s linear infinite; 
    }
}