/* Busca no banco do Google a fonte futurista 'Orbitron' nos pesos 400 (normal), 700 (negrito) e 900 (ultra) */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&display=swap');

/* Cria uma caixa global de "variáveis" para não repetirmos códigos de cor mil vezes */
:root {
    /* Nosso Verde Neon marca registrada */
    --neon-green: #39ff14;
    /* Fundo da tela ultra escuro (quase preto) */
    --bg-color: #050505;
}

/* O seletor '*' pega CADA ELEMENTO do site e força essas regras base */
* {
    /* Tira todo e qualquer espaço externo em branco não planejado */
    margin: 0;
    /* Tira os espaços internos não planejados */
    padding: 0;
    /* Força bordas a crescerem 'para dentro' (impede problemas de responsividade e barras de rolagem extras) */
    box-sizing: border-box;
    /* Aplica a nossa fonte puxada no topo. Se a internet do cara falhar, usa a fonte sem-serifa do Windows */
    font-family: 'Orbitron', sans-serif;
}

/* ==========================================================================
   AQUI VOCÊ EDITA O FUNDO (GRADE E ORBES)
   ========================================================================== */
/* O corpo da tela. As regras aplicadas aqui vazam pros filhos */
body {
    /* Pinta o fundo base com a nossa variável escura definida acima */
    background-color: var(--bg-color);
    
    /* AQUI: OPACIDADE DA GRADE - Para deixar as linhas mais fracas ou fortes, altere o valor '0.4' nos dois lugares abaixo (Ex: 0.1 é quase invisível, 0.9 é bem forte) */
    /* Cria duas imagens virtuais de gradiente desenhando linhas horizontais e verticais */
    background-image: 
        /* Linha horizontal: Cor RGBA verde (0, 30, 0) com 0.4 de opacidade e 1px de espessura */
        linear-gradient(rgba(0, 30, 0, 0.3) 1px, transparent 1px),
        /* Linha Vertical: Gradiente girado 90 graus com mesma cor verde e opacidade */
        linear-gradient(90deg, rgba(0, 30, 0, 0.3) 1px, transparent 1px);
    
    /* AQUI: TAMANHO DOS QUADRADOS DA GRADE - Altere o '40px 40px' para aumentar ou diminuir os quadradinhos do fundo */
    background-size: 40px 40px;
    
    /* Deixa a cor padrão dos textos inteiros como Branca */
    color: #fff;
    /* TRAVA DE RESPONSIVIDADE: Oculta qualquer coisa que passar do limite da tela pra direita */
    overflow-x: hidden;
    /* Centraliza os textos e os divs não flexíveis por padrão */
    text-align: center;
    /* Adiciona uma posição relativa para servir de âncora para os orbes do fundo */
    position: relative;
}

/* === OS ORBES (LUZES MOVEDIÇAS DE FUNDO) === */
/* Estilo base compartilhado para ambos os orbes */
.orb {
    /* Prende na tela, não descem com o scroll */
    position: fixed;
    /* Arredonda para virarem bolas perfeitas */
    border-radius: 50%;
    /* Aplica um desfoque massivo de 120 pixels para criar a luz suave de "aurora" */
    filter: blur(120px);
    /* Joga para o fundo, atrás do Canvas e do Site (-2 é a camada mais profunda) */
    z-index: -2;
    
    /* AQUI: OPACIDADE DOS ORBES ROXOS/VERDES - Altere de 0.5 para um valor entre 0.1 e 1.0 para definir a força do brilho do fundo */
    opacity: 0.6;

}

/* Orbe 1 - Topo Esquerda */
.orb-1 {
    /* ... outras cores e tamanhos que você já tem ... */
    animation: floatOrb1 5s infinite alternate ease-in-out; /* Velocidade rápida de 4s */
}

/* Orbe 2 - Baixo Direita */
.orb-2 {
    /* ... outras cores e tamanhos que você já tem ... */
    animation: floatOrb2 5s infinite alternate ease-in-out; /* Velocidade rápida de 4s */
}

/* Orbe 1 do canto superior esquerdo */
.orb-1 {
    /* AQUI: TAMANHO DO ORBE 1 - Altere o 40vw (40% da tela) para aumentar ou diminuir a bola de luz */
    width: 40vw;
    height: 40vw;
    /* Cor de Fundo: Verde muito escuro opaco */
    background: #002200;
    /* Posição no topo da tela */
    top: -10%;
    /* Posição na esquerda */
    left: -10%;
}
/* Orbe 2 do canto inferior direito */
.orb-2 {
    /* AQUI: TAMANHO DO ORBE 2 - Altere o 30vw para alterar o tamanho desta segunda bola de luz */
    width: 30vw;
    height: 30vw;
    /* Um verde levemente mais aberto para misturar */
    background: #003311;
    /* Fixado no fundo */
    bottom: -10%;
    /* Fixado na direita */
    right: -10%;
    /* Atraso negativo faz a animação dele começar em outro ponto, não sendo sincronizado com o Orbe 1 */
    animation-delay: -6s;
}

/* Animação que faz os Orbes pulsarem e moverem */

/* Animação para o Orbe 1: Desce e vai para a direita até o meio */
@keyframes floatOrb1 {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(40vw, 40vh) scale(1.3); } /* Viaja 40% da tela para o centro */
}

/* Animação para o Orbe 2: Sobe e vai para a esquerda até o meio */
@keyframes floatOrb2 {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(-40vw, -40vh) scale(1.3); } /* Viaja 40% da tela para o centro */
}

/* Estilização do Campo (Canvas) onde rola a Matrix de Pontos Conectados */
#starfield {
    /* Fixo pra cobrir o corpo inteiro */
    position: fixed;
    /* Grudado no topo */
    top: 0;
    /* Grudado na esquerda */
    left: 0;
    /* Joga para o fundo, mas fica À FRENTE dos orbes e da grade (z-index: -1) */
    z-index: -1;
    /* Impede que o usuário consiga clicar num pixel verde por acidente */
    pointer-events: none;
}

/* Painel que segura os Toasts (As mensagens verdes do canto da tela) */
#toast-container {
    /* Prega no canto superior direito */
    position: fixed;
    /* Distância do topo */
    top: 20px;
    /* Distância da direita */
    right: 20px;
    /* Põe ele acima do universo do site todo (inclusive carrossel) */
    z-index: 10000;
    /* Organiza as caixinhas uma embaixo da outra */
    display: flex;
    /* Direção de coluna */
    flex-direction: column;
    /* Dá 10px de ar entre cada caixa */
    gap: 10px;
}

/* Caixinha individual do Toast hacker */
.tech-toast {
    /* Fundo escuro levemente transparente */
    background: rgba(0, 0, 0, 0.8);
    /* Borda fininha verde */
    border: 1px solid var(--neon-green);
    /* A fonte de dentro do toast fica verde */
    color: var(--neon-green);
    /* Espaço gordo dentro dele */
    padding: 10px 20px;
    /* Borda leve redonda */
    border-radius: 5px;
    /* Fonte mediana */
    font-size: 0.9rem;
    /* Sombra que brilha para fora */
    box-shadow: 0 0 10px rgba(57, 255, 20, 0.5);
    /* Dispara a animação que faz ela empurrar e entrar da direita pra esquerda */
    animation: slideIn 0.3s forwards;
}

/* Define as regras da entrada do Toast */
@keyframes slideIn {
    /* Começa transparente e a 100% deslocado pro lado (invisível fora da tela) */
    from { opacity: 0; transform: translateX(100%); }
    /* Para quando entrar pra posição Zero (original visível total) */
    to { opacity: 1; transform: translateX(0); }
}

/* O cabeçalho onde a Logo mora */
header {
    /* Margem de segurança de cima a baixo de 30px */
    margin: 30px 0;
}

/* A caixa onde a Logo física mora */
.logo-wrapper {
    /* Aplica o filtro nativo CSS para dropar uma sombra perfeitamente desenhada contornando o PNG verde */
    filter: drop-shadow(0 0 20px rgba(57, 255, 20, 0.5));
    /* Dá ar em baixo da logo */
    margin-bottom: 10px;
}

/* A imagem em si do ET Tutoriais */
#channel-logo {
    /* Não deixa explodir mais que 150px (Mantém padrão HD) */
    max-width: 150px;
    /* Animação que faz o ET levitar como um disco voador */
    animation: float 2s ease-in-out infinite alternate;
}

/* Regra matemática do disco voador */
@keyframes float {
    /* Térreo zero */
    0% { transform: translateY(0px); }
    /* Sobe menos dez pixels */
    100% { transform: translateY(-10px); }
}

/* Aquele título Letreiro que fica abaixo do ET */
.tech-title {
    /* Cor verde neon */
    color: var(--neon-green);
    /* RESPONSIVIDADE TOP DE LINHA (CLAMP): A fonte vai crescer mínimo de 1.5, acompanhando 4% do monitor, limitando em 2.5 pra n bugar */
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    /* Sombra espalhada na fonte criando brilho texturizado */
    text-shadow: 0 0 15px var(--neon-green);
    /* Força maiúsculo mesmo no html */
    text-transform: uppercase;
    /* Espaçamento de kerning das letras (deixa as palavras respirarem) */
    letter-spacing: 2px;
}

/* A linha Neon que divide cabeçalho do conteúdo */
.tech-line {
    /* A linha usa 60% da página centralizada */
    width: 60%;
    /* Margem automática para centralizar */
    margin: 15px auto;
    /* A espessura é de um traço fino verde */
    border: 1px solid var(--neon-green);
    /* Sombra brilhante verde neon */
    box-shadow: 0 0 10px var(--neon-green);
    /* Deixada pela metade pra parecer linha de luz falhando */
    opacity: 0.5;
}

/* Configuração das Colunas de Anúncios no PC */
.ad-column { 
    display: flex; 
    flex-direction: column; 
    gap: 20px; 
}

/* O cérebro do Posicionamento do corpo de vídeo, travas do player e anúncios! */
.video-page-layout {
    /* Usa o modelo flexível para colocar colunas lado a lado */
    display: flex;
    /* Se faltar espaço ele quebra o Flex pra linha de baixo. Impede esmagamento horizontal de itens! */
    flex-wrap: wrap;
    /* Centraliza o conjunto de colunas */
    justify-content: center;
    /* Distância de 20px entre o vídeo e os anúncios laterais */
    gap: 20px;
    /* Impede esticar infinito em Telas Ultra Wides de 4K, ficando amarrado em 1400px! */
    max-width: 1400px;
    /* Trava 100% no mobile p/ garantir q não quebre fora */
    width: 100%;
    /* Posicionamento automático em relação a box do navegador (TELA INTEIRA CENTRADA) */
    margin: 0 auto;
    /* Padding lateral pra n colar conteúdo no plastico do monitor */
    padding: 0 15px;
    /* RESPONSIVIDADE DE OURO: Garante q layout nunca saia da janela horizontal! */
    overflow-x: hidden;
}

/* A coluna mãe onde mora o Wrapper de Video no meio do Layout principal. */
.video-center-content {
    /* Pega todo o 100% disponível no mobile flexível */
    flex: 1 1 100%;
    /* No PC e Tablet Grande ele breca largura de esticão bizarro em 800px */
    max-width: 800px;
    /* Tática extra de responsividade garantida! Largura n cresce fora. */
    width: 100%;
}

/* A caixa preta sagrada "O Cinema". Trava o aspect ratio da tela e mantém o frame 16:9 sempre! */
.video-wrapper {
    /* Pega 100% que o Pai Content dele liberar */
    width: 100%;
    /* O Relative prende a ancora das coordenadas Zero */
    position: relative;
    /* CSS TRUQUE: 56.25% é exatamente a divisão 9 / 16 (da regra tela de YouTube) * 100 ! Gera o Player na Proporção Absoluta! */
    padding-top: 56.25%;
    /* Borda sutil escura padrão */
    border: 2px solid #222;
    /* Cantos arredondados do reprodutor */
    border-radius: 10px;
    /* Esconde o que tentar vazar dos cantos redondos */
    overflow: hidden;
    /* Margem embaixo */
    margin-bottom: 20px;
    /* Fundo preto pro caso de atraso na internet */
    background: #000;
    /* Suaviza cor da borda piscando quando dá "PLAY" */
    transition: box-shadow 0.3s, border-color 0.3s;
}

/* O Elemento interno embutido (onde o Google põe o Video). */
.video-wrapper iframe {
    /* O Absoluto escraviza a âncora pra colar em Ponto 0 Top, Ponto 0 Left usando Largura Total do Aspect ratio criado pelo Padding! */
    position: absolute;
    /* Canto superior esquerdo zerado */
    top: 0; left: 0;
    /* Preenche os 100% do pai */
    width: 100%; height: 100%;
    /* Remove as bordas nativas feias do iframe */
    border: none;
}

/* Efeito visual disparado por JavaScript ao dar Play - Acende a luz Neon verde. */
.playing-aura {
    /* Muda a borda para verde */
    border-color: var(--neon-green);
    /* Solta o sombreadão gigante Neon */
    box-shadow: 0 0 40px rgba(57, 255, 20, 0.4);
}

/* Agrupador da Barra e Texto "Assista X tempo" */
.progress-container {
    /* Margem espaçosa em cima e em baixo */
    margin: 30px 0;
}

/* Texto 15% acima da barra */
#progress-text {
    /* Fonte grande legível */
    font-size: 1.2rem;
    /* Negrito peso 700 */
    font-weight: 700;
    /* Margem de baixo */
    margin-bottom: 10px;
    /* Letra verde */
    color: var(--neon-green);
    /* Sombra brilhante nela mesma */
    text-shadow: 0 0 5px var(--neon-green);
    /* Maiúsculas forçadas */
    text-transform: uppercase;
}

/* Fundo Físico da barra (A pista de corrida da cor) */
.progress-bar-bg {
    /* 100% de largura */
    width: 100%;
    /* 15px de altura (fina) */
    height: 15px;
    /* Cinza quase preto de fundo */
    background: #111;
    /* Borda verde para marcar a pista */
    border: 1px solid var(--neon-green);
    /* Arredonda as duas pontas da pista */
    border-radius: 10px;
    /* Poda a tinta que vaza pelas diagonais arredondadas da borda externa */
    overflow: hidden;
    /* Sombreamento interno (inset) pra dar profundidade 3D na pista */
    box-shadow: 0 0 10px inset rgba(57, 255, 20, 0.2);
}

/* A Tinta verde animada em tempo real pelo JS. (A Progressão) */
#progress-bar-fill {
    /* Começa obrigatoriamente no 0% invisível */
    width: 0%;
    /* Altura total do pai (15px) */
    height: 100%;
    /* Cor verde neon puro */
    background: var(--neon-green);
    /* Drop shadow lateral verde gerando incandescência na luz de preenchimento */
    box-shadow: 0 0 15px var(--neon-green);
    /* Dá Transição de 1 segundo Linear (suave sem saltos, contínua) pro avanço. Evita a barra "pular" bruscamente. */
    transition: width 1s linear;
}

/* Div que segura a caixa de busca e o botão dela */
#search-section {
    /* Margem inferior */
    margin-bottom: 40px;
}

/* Campo Input da digitação (Onde escreve o Link ou ID) */
#search-input {
    /* Pega 70% do espaço, dividindo os outros 30% pro botão */
    width: 70%;
    /* Limite máximo pra não ficar bizarro no PC */
    max-width: 500px;
    /* Estofo interno confortável pra digitar */
    padding: 15px;
    /* Fundo escuro igual a barra */
    background: #111;
    /* Borda fina cinza */
    border: 1px solid #333;
    /* Letra branca */
    color: #fff;
    /* Remove canto direito da borda pra grudar botão certinho do outro lado */
    border-radius: 5px 0 0 5px;
    /* Tira linha feia de foco nativa do chrome */
    outline: none;
    /* Animação suave pro Hover/Focus */
    transition: 0.3s;
}

/* Efeito ao clicar lá dentro do campo Input (Quando vai digitar algo) */
#search-input:focus {
    /* Borda acende verde */
    border-color: var(--neon-green);
    /* Sombra neon acende */
    box-shadow: 0 0 10px rgba(57, 255, 20, 0.3);
}

/* O botão atrelado a caixa (Clicador Buscar Vídeo) */
#search-btn {
    /* Estofo compatível com a caixa */
    padding: 15px 20px;
    /* Transparente pq é um botão outlined */
    background: transparent;
    /* Borda dupla verde */
    border: 2px solid var(--neon-green);
    /* Texto verde */
    color: var(--neon-green);
    /* Arredonda apenas os cantos da direita */
    border-radius: 0 5px 5px 0;
    /* Letra gorda negra */
    font-weight: 900;
    /* Cursor de mãozinha de clique */
    cursor: pointer;
    /* Usa menos 5 pra soldar colando a parede transparente da borda na parede do Input de texto */
    margin-left: -5px;
    /* Transição suave pra hover */
    transition: 0.3s;
}

/* Área externa que engloba as miniaturas do sistema carrossel */
#carousel-section {
    /* Margem de topo e fundo */
    margin: 40px auto;
}

/* Janela de exibição das thumbs (A Caixa que "Corta" o excesso pros lados) */
.carousel-view {
    /* 100% de largura disponível da página */
    width: 100%;
    /* Esconde o scroll e o vazamento do lado esquerdo e direito */
    overflow: hidden;
    /* Aumentado o padding vertical para 60px para impedir o corte abrupto do Neon de cima/baixo! */
    padding: 60px 0;
}

/* A trilha infinita gigante que segura fisicamente todas as caixinhas inline */
.carousel-track {
    /* Flexbox as enfileira deitadas numa linha só */
    display: flex;
    /* Alinha ao centro vertical */
    align-items: center;
    /* O translate fará ela deslocar suavemente via JS (Exceto quando o dedo tiver dragging) */
    transition: transform 0.3s ease-out;
    /* Desativa comportamento feio de dar zoom ou selecionar texto da tela arrastando foto azul do HTML */
    user-select: none;
    /* Mãozinha de "pegue-me" aberta */
    cursor: grab;
}

/* Aplica classe 'dragging' via JS que trava a transição lisa e liga mão fechada! */
.carousel-track.grabbing {
    /* Mãozinha que apertou */
    cursor: grabbing;
    /* Desliga a transição CSS pro arrasto acompanhar o pixel do dedo/mouse em tempo real s/ delay */
    transition: none;
}

/* Estilo Individual da CAPINHA do Youtube (Caixa da Miniatura) */
.carousel-item {
    /* Força q ele recuse encolher na caixa flexivel (Mantém o size 320 cravado) */
    flex: 0 0 auto;
    /* Transições matemáticas Béziers de Aceleração e Freagem na Animação (Suave tipo elástico UI) */
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    
    /* Efeito Desativado Padrão: Reduz a escala da foto não-focada para 70% e opacidade para metade */
    transform: scale(0.7);
    opacity: 0.5;
    
    /* CORREÇÃO DO ESPAÇAMENTO (O Cassino): 
       Como as fotos laterais encolhem pra 70%, gera-se um buraco falso entre elas. 
       Ao aumentar essa margem negativa para -55px, nós forçamos elas a se esmagarem 
       horizontalmente, criando o efeito de sobreposição perfeito onde entram umas nas outras! */
    margin: 0 -49px;
    
    /* Borda sólida neon */
    border: 2px solid var(--neon-green);
    /* Arredondamento */
    border-radius: 8px;
    /* Fundo preto base */
    background: #000;
    
    /* Ao estarem sobrepostas, a z-index 1 joga elas para baixo. A foto focada (Ativa) receberá Z-index alto pra ficar por cima! */
    z-index: 1;
    /* Para a imagem img não sangrar por cima das bordas da DIV */
    overflow: hidden;
}

/* O Elemento físico IMG de cada capinha do YT */
.carousel-item img {
    /* Medidas fixas padronizadas da resolução MqDefault Oficial da API do YouTube */
    width: 320px;
    height: 180px;
    /* Diz que a foto deve cobrir o espaço mantendo proporção (Corte limpo de centro) */
    object-fit: cover;
    /* Arredonda levemente menos que a div pai para casar a quina */
    border-radius: 6px;
    /* Tira a opção de arrastar foto nativa do navegador para n bugar o nosso arrasto Slider */
    pointer-events: none;
}

/* ESSA É A AURA DO FOCADO: Classe Inserida dinamicamente no JS apenas na div do centro! */
.carousel-item.active {
    /* Devolve ao tamanho majestoso real de scale 1 (100%). */
    transform: scale(1);
    /* Retorna à visibilidade luminosa 100% */
    opacity: 1;
    /* Joga a luz gigante verde espalhada q reflete nas vizinhas pra causar o "Glow" */
    box-shadow: 0 0 30px rgba(57, 255, 20, 0.8);
    /* O mais importante: Joga a foto Ativa pra Z-index 10, assim ela senta por cima das outras esmagadas na borda negativa! */
    z-index: 10;
}

/* Fonte do Texto de Alerta da Inscrição */
.subscribe-alert {
    /* Tamanho médio */
    font-size: 1.1rem;
    /* Cor cinza chumbo */
    color: #ccc;
    /* Margem embaixo */
    margin-bottom: 15px;
}

/* O Botão Neon Matrix de Inscrever-se */
.neon-btn {
    /* Preto puro */
    background: #000;
    /* Letra neon */
    color: var(--neon-green);
    /* Borda neon 2px */
    border: 2px solid var(--neon-green);
    /* Enchimento grande pra botão Call-to-action */
    padding: 15px 30px;
    /* Letra grande 1.2 */
    font-size: 1.2rem;
    /* Textos sempre em caixa alta */
    text-transform: uppercase;
    /* Negrito Black */
    font-weight: 900;
    /* Bordas circulares */
    border-radius: 8px;
    /* Brilhozinho verde externo default */
    box-shadow: 0 0 15px rgba(57, 255, 20, 0.4);
    /* Transição suave hover */
    transition: 0.3s;
    /* Cursor de clique livre */
    cursor: pointer;
}

/* O Efeito de Mouse (Hover) do Neon Inscreva */
.neon-btn:hover {
    /* Inverte a cor: O fundo enche de Verde! */
    background: var(--neon-green);
    /* E o texto fica preto! */
    color: #000;
    /* Aumenta a expansão da luz do Box Shadow */
    box-shadow: 0 0 25px rgba(57, 255, 20, 0.8);
    /* O Botão ganha 5% de tamanho explodindo pro usuário */
    transform: scale(1.05);
}

/* Matriz de render do Layout Box GRID dos Botões de Download Injetados */
#download-buttons-container {
    /* Tipo Grid de colunas inteligentes */
    display: grid;
    /* Código genial de flexibilidade: Cria colunas que preenchem auto (auto-fit), desde que caibam pelo menos 250px. Assim o botão não fica super fino no celular. */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    /* Buraco (gap) de 15px entre cada botãozinho verde */
    gap: 15px;
    /* Distância de cima */
    margin-top: 20px;
}

/* O Componente Físico CSS do BOTAO FINAL VERDE DE DOWNLOAD */
.download-btn {
    /* Nasce Desativado na cor cinza 333 */
    background: #333;
    /* Letra cinza chumbo */
    color: #666;
    /* Zera bordas nativas HTML */
    border: none;
    /* Preenchimento 15px gordo */
    padding: 15px;
    /* Letra mega negrito */
    font-weight: 900;
    /* Maiusculo */
    text-transform: uppercase;
    /* Redondo suave */
    border-radius: 5px;
    /* Transição lisa pras ações */
    transition: 0.3s;
    /* Cursor de clique liberado */
    cursor: pointer;
}

/* Animação Eletrizante Estilo Erro Hacker que adicionei pros seus Hover ! */
.glitch-hover:hover {
    /* Roda animação infinitamente a cada 0.2 milisegundos */
    animation: glitch-anim 0.2s infinite;
}

/* Keyframes que tremem o elemento X e Y gerando o visual Hacker Ticks */
@keyframes glitch-anim {
    /* Frame 0 */
    0% { transform: translate(2px, 1px); }
    /* Frame 1 */
    25% { transform: translate(-2px, -1px); }
    /* Frame 2 */
    50% { transform: translate(1px, 2px); }
    /* Frame 3 */
    75% { transform: translate(-1px, -2px); }
    /* Volta origem */
    100% { transform: translate(0, 0); }
}

/* O Textão Txt Longevo da Descrição do Youtube */
#description-section {
    /* Margem cima e baixo */
    margin: 30px 0;
    /* Fundo preto 60% de opacidade deixando a matriz aparecer no fundo */
    background: rgba(0,0,0,0.6);
    /* Padding generoso interno */
    padding: 20px;
    /* Borda escura elegante */
    border: 1px solid #222;
    /* Cantos redondos */
    border-radius: 8px;
    /* Alinha à esquerda pois textões centralizados cansam a vista */
    text-align: left;
    /* Cor cinza média, não branca pra não cegar */
    color: #aaa;
    /* Letra 10% menor */
    font-size: 0.9rem;
    /* Espaçamento alto entre as linhas (1.6) melhora leitura no mobile */
    line-height: 1.6;
    
    /* RESPONSIVIDADE DE CORTES: Força as regras abaixo para nunca permitir vazamento de textos ou URLs pro lado da tela */
    width: 100%;
    /* O box-sizing assegura que o padding interno não some largura explodindo a caixa */
    box-sizing: border-box;
    /* Se vier uma URL de 100 caracteres colados, ele CORTA a string no meio quebrando pra linha de baixo na força bruta! */
    overflow-wrap: break-word;
    word-break: break-word;
    /* Mantém os formatos e espaços originais que vierem da quebra do Youtube Px Break */
    white-space: pre-wrap;
}

/* O Rodapé Copyright ET */
footer {
    /* Empurra o rodapé 50px pro fundo */
    margin: 50px 0 20px;
    /* Cinza escuro */
    color: #444;
    /* Letrinha mínima */
    font-size: 0.8rem;
}

/* Botão de Setinha (Voltar ao Topo) */
#back-to-top {
    /* Fixo no vidro da tela */
    position: fixed;
    /* Afastado 20px do rodapé e parede direita */
    bottom: 20px;
    right: 20px;
    /* Cor principal Matrix neles */
    background: var(--neon-green);
    /* Setinha e letra pretas pra contrastar pesado */
    color: #000;
    border: none;
    /* Tamanho quadrado forçado */
    width: 40px;
    height: 40px;
    /* Corta redondo com 50% virando uma bolinha perfeita */
    border-radius: 50%;
    /* Aumenta a seta de icone pra 1.2 */
    font-size: 1.2rem;
    /* Deixa super acima de botões comuns */
    z-index: 1000;
    /* Drop shadow brilhante verde */
    box-shadow: 0 0 15px rgba(57, 255, 20, 0.5);
    /* Cursor ativo manual */
    cursor: pointer;
}

/* A tela Darken preta gigante quando Ele Desbloqueia O Final Com Fogos! */
#fireworks-overlay {
    /* Fixo em relação ao monitor */
    position: fixed;
    /* Agarra as quatro ancoragens puxando o plástico pros cantos absolutos (Tela full width) */
    top: 0; left: 0; right: 0; bottom: 0;
    /* Fundo preto matador 90% (Dá pra ver as coisas borradas no fundo) */
    background: rgba(0, 0, 0, 0.9);
    /* Flexbox p/ centralizar a frase final no X e Y */
    display: flex;
    align-items: center;
    justify-content: center;
    /* Tapa até mesmo os alertas e adblocks (Z-index Max) pois é a conquista final! */
    z-index: 99999;
}

/* Elemento físico HTML Canvas pros Fogos Px */
#fireworks-canvas {
    /* Solto na tela Absoluto */
    position: absolute;
    /* Z-index zero (Fica renderizando atrás do Letreiro escrito "Obrigado!") */
    z-index: 0;
}

/* O Letreiro de Sucesso verde da Vitória */
.success-title {
    /* Posicionado Relativo pra conseguir ganhar do Z-index 0 do canvas fogos */
    position: relative;
    /* Fica 1 degrau a frente dos fogos */
    z-index: 1;
    /* Cor Neon Mestre */
    color: var(--neon-green);
    /* Usa a tag Clamp pra ficar gigante no PC e espremer pra 2rem no celular automatico! */
    font-size: clamp(2rem, 5vw, 4rem);
    /* Brilho neon na fonte pesada */
    text-shadow: 0 0 20px var(--neon-green);
    /* Força caixa alta */
    text-transform: uppercase;
}

/* ==========================================================================
   A MÁGICA DOS 8 ANÚNCIOS DA ADSTERRA (SLOTS DE MONETIZAÇÃO)
   ========================================================================== */
.ad-container { 
    /* Todos ocupam largura de 95% disponíveis no mobile */
    width: 95%; 
    /* O PC não vai deixar a caixa explodir alem de 900 de largura */
    max-width: 900px; 
    /* Centraliza com a margem automatica X do navegador */
    margin: 15px auto; 
    /* Usa flexbox pra alinhar o anuncio de verdade injetado pelo javascript bem no meiolo Exato! */
    display: flex; 
    align-items: center; 
    justify-content: center;
}

/* Iframe gerado tem q ter z-index prioritário ou os robôs da Adsterra rebaixam sua métrica Visibility Rate! */
.ad-container iframe, .ad-container ins, .ad-container script { z-index: 2; }
/* Tag mágica nuclear !important que simplesmente oblitera qualquer Display tornando Inexistente a Box HTML do CSS */
.hidden { display: none !important; }

/* ==========================================================================
   A MÁGICA TELA ANTI-ADBLOCK NEO-HACKER
   ========================================================================== */

/* Cortina Desfocada do Fundo Base */
#adblock-overlay { 
    /* Fixada na tela de forma absoluta em todo o scroll */
    position: fixed; 
    /* O inset:0 cola o top right bottom left = 0 instantaneamente! */
    inset: 0; 
    /* Tela preta bruta com 95% opacity */
    background: rgba(0,0,0,0.95); 
    /* Tem que ser Z-INDEX MAXIMO DIVINO. Para travar o usuário até ele desativar o roubo. */
    z-index: 999999; 
    /* Flex p alinhamentos rápidos centros */
    display: flex; 
    justify-content: center; 
    align-items: center; 
    /* Filtro CSS poderoso que borra a parte de trás do vidro em 8 pixels imitando iOS! */
    backdrop-filter: blur(8px); 
}

/* A Caixa Pop-up em Si Alertando Red */
.adblock-box { 
    /* Fundo Quase Black */
    background: #050505; 
    /* Espaço gordo pras letras respirarem */
    padding: 2.5rem; 
    /* Borda Mestra Verde de Matriz */
    border: 2px solid var(--neon-green); 
    /* Arredondamento */
    border-radius: 15px; 
    /* Textos do meio ali alinhados Center */
    text-align: center; 
    /* Nao estica a caixa infinitamente num monitor 4K Full, breca ela nos agradaveis 600px limit. */
    max-width: 600px; 
    /* Deixa o Celular apertar ela pra caber em telas menores que 600px. Fica em 90% da telinha mobile */
    width: 90%; 
    /* Glow Verde suave indicando que a Caixa exala luz Neon */
    box-shadow: 0 0 30px rgba(57, 255, 20, 0.15); 
    /* Dispara Animação de Salto na tela usando curvas Béziers que dão efeito "Estilingue Elástico" no pop */
    animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
}

/* Quadros de Animação do Salto da Caixa (PopIn) */
@keyframes popIn { 
    /* Nasce de 80% do tamanho e Invisivel Alpha Zero */
    from { transform: scale(0.8); opacity: 0; } 
    /* Assenta na tela Grande Original Visivel Opacity 100 */
    to { transform: scale(1); opacity: 1; } 
}

/* O Vermelho Sirene que Pisca */
.flashing-red { 
    /* Tinta de Perigo Sirene Sangue CSS Red */
    color: #ff003c; 
    /* Letra Flexivel grande H2 Titulo Clamp Px */
    font-size: clamp(1.8rem, 5vw, 2.5rem); 
    /* Fonte Pesada Blocker Black 900 font-weight */
    font-weight: 900; 
    /* Transforma minuscula p Grito caixa alta HTML text Upper */
    text-transform: uppercase; 
    /* Anima com a tag 'Alternate' (Vai do zero ao 100 e do 100 retorna pro zero looping perfeito suave Sirene de Policia) */
    animation: flashRed 0.8s infinite alternate; 
    /* Empurra o parágrafo de baixo com margem */
    margin-bottom: 15px; 
}

/* Quadros do Flash Vermelho Brilhante Sirene */
@keyframes flashRed { 
    /* 0% Ligado Máximo: 100% Visto, E Com Sombra 20px Gigante Red Light */
    0% { opacity: 1; text-shadow: 0 0 20px #ff003c; } 
    /* 100% Desligado Baixo: 40% Visto e Sombra ZERADA de luz. */
    100% { opacity: 0.4; text-shadow: none; } 
}

/* Os textos informacionais normais do Aviso Adblock */
.adblock-msg { 
    /* Fonte normal +1 */
    font-size: 1.1rem; 
    /* Branco Gelo não muito estourado */
    color: #ddd; 
    /* Afasta do próximo Box Escudo Segurança */
    margin-bottom: 25px; 
    /* Aumenta a entrelinha das palavras qdo ele faz quebra em celulares apertados p facilitar ler */
    line-height: 1.5; 
    /* Negrito Bold default HTML 700 */
    font-weight: bold; 
}

/* O Painel Tracejado de Promessa Segura que Remove a Ansiedade do Usuário ("Não é vírus po") */
.safe-highlight { 
    /* Flexbox vai jogar o icone Escudo da ESQUERDA da Caixa Textos */
    display: flex; 
    /* Alinha eles certinho no Eixo Y Vertical do Centro */
    align-items: center; 
    /* Bota 15px de Buraco entre o Escudo e o Texto lado-a-lado */
    gap: 15px; 
    /* Pinta de um Verde mega fraquinho 5% quase zero Alpha color rgb CSS background style */
    background: rgba(57, 255, 20, 0.05); 
    /* O SEGREDO DO VISUAL NOTA FISCAL: Borda de CSS pontilhada 'dashed' com a cor neon! */
    border: 2px dashed var(--neon-green); 
    /* Barrigão de espaços internos nas linhas em volta */
    padding: 15px; 
    /* Arredondar os cantos do tracejado um cado */
    border-radius: 10px; 
    /* Joga todos Textos desse trecho alinhados A Esquerda. Parecendo doc informativo técnico. Text Alignments! */
    text-align: left; 
    /* Margem separando Botão Verde Inferior da Box! */
    margin-bottom: 25px; 
}

/* A Tag emoji icon do Escudo Hacker */
.shield-icon { 
    /* Seta Tamanho Giga Font Size Rem Px Size Fix! */
    font-size: 2.5rem; 
    /* Drop shadow Filter é bruxaria CSS. O Escudo emoji não é uma caixa quadrada Div, ele é um texto de imagem nativo. Se eu jogar Shadow num emoji, o shadow vira a silhueta exata do desenho do escudo! Hack de Mestre. */
    filter: drop-shadow(0 0 10px var(--neon-green)); 
}

/* Título Encorpado da Mensagem Segura "Fica Frio Fera" Tag Strong HTML Styling CSS Dom */
.safe-highlight strong { 
    /* Cor Neon Verde Text Px Color Html CSS Variables */
    color: var(--neon-green); 
    /* Força o elemento Inline Strong virar Bloco Block, fazendo o parágrafo texto secundário de baixo ir DE FATO pra baixo, quebrando linha. Display Block Methods Html Inlines */
    display: block; 
    font-size: 1.1rem; 
    margin-bottom: 5px; 
    text-transform: uppercase; 
}

/* Textos menores Secondary P do Trust Trust Security Check Shield Boxes Html CSS Text Px */
.safe-highlight p { 
    /* Cinza chumbinho de leitura densa secundária coloração p/ diminuir poluição UI Info Hierarchy  */
    color: #aaa; 
    /* Letra Fonte Size Média Reduzida */
    font-size: 0.95rem; 
    /* Quebra de linha espaçada do mobile Responsive texts Lines Reading Height */
    line-height: 1.4; 
    /* Destrói margens que o chrome dá de graça pras tags P do Html Normalize Margins  */
    margin: 0; 
}

/* O Grande Botão Call To Action do Final: RECARREGAR! Verde Chamativo! Call To Actions Styling Butons Classes */
.adblock-btn { 
    /* Ocupa a Caixa Inteira dele Width Pct */
    width: 100%; 
    /* Tinta de fundo Neon Full */
    background: var(--neon-green); 
    /* A Letra fica Preta! Contraste 100% visual Tinta Preta vs Verde! Color Accessibility Renders Px */
    color: #000; 
    font-size: 1.1rem; 
    /* Pad gordo Call action Clickability Areas Fatz Px Pad Values Fat Buttons Mobile Touches UI */
    padding: 18px; 
    border-radius: 8px; 
    /* Tira border Cinza Windows Browser Native Styles Border Removes Elements Buttons Styles */
    border: none; 
    font-weight: 900; 
    text-transform: uppercase; 
    /* Cursors Navigations Action Clicks Mouse Point Event Hover Styles Action Values Enable CSS Mouse Cursors */
    cursor: pointer; 
    /* Transições Suaves Animation Delay Speeds Timer Transforms */
    transition: 0.3s; 
    /* Glow External Caixas Sombras Outer Px Value Shading Drop Green Neons */
    box-shadow: 0 0 15px rgba(57, 255, 20, 0.3); 
}

/* Quando Mouse do cara roça no Botão Green (Hover Action User Mouse Point Event States Focus Hovers Active Visited Links Logic CSS Selection State Modifiers Classes Pseudo) */
.adblock-btn:hover { 
    /* Elemento dá Pulinho Cima Aumento Dimensions Transform Scale Px Zoom Scale Effects UI CSS Animations Scale Values Zoom Value Float Numeric Increases Add Scale  */
    transform: scale(1.02); 
    /* Explode Brilho Sombra Box Shadows Spread Px Width Spread Radius Values Alpha Color Change Px Box Shadows Changes Spread Light Blur */
    box-shadow: 0 0 25px rgba(57, 255, 20, 0.7); 
    /* O Fundo Troca Totalmente: Brancão Estourado No Olho Piscou Action Clicks White Color Replace Css Prop Value Replace Back Background Styles Color Changes Hex Values White #fff Px Paint Change Bg Color Changes Actions UI */
    background: #fff; 
}

/* ==========================================================================
   SCROLLBAR HACKER (BARRA DE ROLAGEM PERSONALIZADA)
   ========================================================================== */
/* Largura total da barra de rolagem na lateral da tela */
::-webkit-scrollbar {
    width: 12px;
}
/* A "pista" por onde a barra escorrega (Fundo escuro) */
::-webkit-scrollbar-track {
    background: #050505;
    /* Borda sutil para separar a barra do site */
    border-left: 1px solid #111;
}
/* O "carrinho" (a parte física que você clica e arrasta para descer) */
::-webkit-scrollbar-thumb {
    /* Fundo quase preto */
    background: #111;
    /* Borda Matrix Neon */
    border: 1px solid var(--neon-green);
    /* Cantos arredondados */
    border-radius: 6px;
}
/* O efeito quando o usuário passa o mouse por cima do "carrinho" */
::-webkit-scrollbar-thumb:hover {
    /* Acende o fundo pra verde */
    background: rgba(57, 255, 20, 0.2);
    /* Acende a luz neon externa */
    box-shadow: 0 0 10px var(--neon-green);
}

/* ==========================================================================
   ESTILO DO BOTÃO DE COMPARTILHAR
   ========================================================================== */
.share-btn {
    /* Fundo transparente pra não brigar com a atenção dos anúncios */
    background: transparent;
    /* Letra verde */
    color: var(--neon-green);
    /* Borda tracejada verde */
    border: 1px dashed var(--neon-green);
    /* Preenchimento interno */
    padding: 10px 20px;
    /* Tamanho da fonte padrão */
    font-size: 1rem;
    /* Maiúsculas */
    text-transform: uppercase;
    /* Letra gordinha */
    font-weight: 700;
    /* Bordas arredondadas */
    border-radius: 5px;
    /* Cursor de clique */
    cursor: pointer;
    /* Margem de segurança pro anúncio de baixo */
    margin-bottom: 20px;
    /* Transição suave */
    transition: 0.3s;
}
/* Hover do botão de compartilhar */
.share-btn:hover {
    /* Fundo verde fraquinho */
    background: rgba(57, 255, 20, 0.1);
    /* Brilho */
    box-shadow: 0 0 10px rgba(57, 255, 20, 0.3);
}

/* ==========================================================================
   MEDIA QUERIES (O ROBÔ DA RESPONSIVIDADE) Celular e PC Modifiers! 
   ========================================================================== */
/* Regra Disparo Oculto CSS Media: O Monitor User Device Limitador Abaixo de MÁXIMO 1000 pixels Dispara Condicional Px Tela Largura Width Limites CSS Screen Width Mobile Tablets Devices Detect Checks Screen Render Checks Screen Size Match Mobile Values Media Queries Bounds Evaluator Media Matches CSS Execute Actions Screen Resize Events */
@media (max-width: 1000px) {
    
    /* No celular não tem espaço, escondemos as colunas laterais para não esmagar o vídeo */
    .ad-column { display: none; }

    /* Barra de Digitar e Botao Buscar Esmagados Pra 100% no Celular Formato Stacked Rows Div Lines Borders Fix Remove Canto Certo Pra Total Cantos Redondos Borders Remove Px Sizes Adjustments Responsive Mobile Views Inputs CSS Elements Sizes Fixes Border Round Edges 5px Margin Spaces Add Lines Px */
    #search-input, #search-btn { width: 100%; border-radius: 5px; margin: 5px 0; }
    
    /* === REDUTOR DE ESPAÇOS NO CELULAR === */
    header { margin: 15px 0; }
    #carousel-section { margin: 10px auto; }
    .carousel-view { padding: 40px 0; }
    #search-section { margin-bottom: 15px; }
    
    /* === AUMENTA AS ORBS SÓ NO CELULAR === */
    .orb-1 { width: 90vw; height: 90vw; }
    .orb-2 { width: 80vw; height: 80vw; }
}

/* ==========================================================================
   EFEITO SCANLINES CRT (MONITOR DE TUBO ANOS 90)
   ========================================================================== */
/* O "::after" cria uma camada fantasma no corpo do site sem precisarmos mexer no HTML */
body::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    /* Cria linhas horizontais escurecidas que se repetem a cada 4 pixels */
    background: linear-gradient(rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.05) 50%);
    background-size: 100% 4px;
    /* Fica por cima do site, mas abaixo da tela de Adblock (999999) e dos Fogos */
    z-index: 9990;
    /* ISSO É VITAL: Permite que o mouse atravesse a textura e clique nos anúncios e botões normalmente! */
    pointer-events: none;
}

/* ==========================================================================
   CURSOR PISCANTE DA MÁQUINA DE ESCREVER (TERMINAL HACKER)
   ========================================================================== */
.cursor-hacker {
    font-weight: bold;
    color: var(--neon-green);
    /* Pisca infinitamente a cada 0.8 segundos */
    animation: piscarCursor 0.8s infinite;
}

@keyframes piscarCursor {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* ==========================================================================
   TELA DE BOOT HACKER (TERMINAL DE ENTRADA) - CORRIGIDO
   ========================================================================== */
#boot-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #050505;
    z-index: 9999999;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Crava no meio verticalmente */
    align-items: center;     /* Crava no meio horizontalmente */
    font-family: 'Courier New', Courier, monospace;
    color: var(--neon-green);
    /* Matemática pura: Letra 1.2rem no PC, mas encolhe até 0.85rem no celular para caber a frase longa */
    font-size: clamp(0.85rem, 3vw, 1.2rem); 
    transition: opacity 0.8s ease-out; 
}

/* Garante que o texto fique alinhado à esquerda (como terminal), mas o bloco todo fique no centro */
#boot-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 95vw; /* Impede de encostar nas bordas do celular */
}

/* Centraliza o cursor piscante no final de tudo */
#boot-screen .cursor-hacker {
    margin-top: 10px;
}

/* Classe que o JavaScript vai adicionar para fazer a tela sumir */
#boot-screen.hidden-boot {
    opacity: 0;
    pointer-events: none;
}

/* Estilo de cada linha que vai brotando na tela */
.boot-line {
    margin: 6px 0;
    text-shadow: 0 0 5px var(--neon-green);
}