/* Configurações gerais da página blindadas para Mobile */
body {
    background-color: #0B0B10;
    color: #572671;
    font-family: "Open Sans", sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100vw;
    margin: 0;
    padding: 0;
    overflow: hidden;
    position: relative;
    animation: fadeIn 0.8s ease-out forwards;
    opacity: 0; /* Começa invisível */
    -webkit-touch-callout: none; /* iOS: Desativa o menu de "Salvar Imagem" no toque longo */
    -webkit-user-select: none; /* Chrome/Safari/Opera: Desativa a seleção de elementos */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; 
    touch-action: none; /* Desativa TODOS os gestos nativos do celular (zoom, scroll, pinch) */
}

.container-central {
    z-index: 10; 
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    
    /* A CORREÇÃO: Torna o container intangível. Os cliques vazam por ele e acertam as zonas no fundo da tela! */
    pointer-events: none; 
}

.logo {
    pointer-events: auto;
}

.logo img {
    max-width: 80vw;  /* Trava a largura máxima */
    max-height: 70vh; /* Trava a altura máxima para não cortar em cima e embaixo */
    width: auto;
    height: auto;
    object-fit: contain; /* Força a imagem a caber inteira dentro dos limites */
    opacity: 0.75;
    transition: filter .5s ease;
    pointer-events: none;
    -webkit-touch-callout: none;
}

/* Efeito sutil ao passar o mouse na logo (Só funciona no PC) */
.logo img:hover {
    filter: drop-shadow(0 0 20px #572671);
}

/* Zonas de clique da Fase 2 (Invisíveis e Dinâmicas) */
.zona-clique {
    position: absolute;
    width: 25vw; /* Ocupa exatamente os 25% da borda da tela. Assim, as duas juntas usam 50%, deixando os 50% do meio livres para a logo! */
    height: 100vh;
    z-index: 5;
    /* border: 2px solid red; */ /* Descomente para ver onde estão os quadrados de clique na tela */
}

.esq { top: 0; left: 0; }
.dir { top: 0; right: 0; }

/* Indicadores de Progresso Perfeitamente Centralizados */
.indicadores {
    position: absolute;
    /* '12dvh' garante que eles fiquem a 12% do fundo da tela real visível, fugindo da barra nativa do celular */
    bottom: 12dvh; 
    left: 50%; 
    transform: translateX(-50%); 
    display: flex;
    gap: 10vw; 
    z-index: 20;
}

.ponto {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: #120516; /* Roxo muito escuro, apagado */
    border: 2px solid #311440;
    transition: all 0.4s ease;
}

/* Classe adicionada via JS quando a fase é completada */
.ponto.ativo {
    background-color: #572671;
    border-color: #9c4be0;
    box-shadow: 0 0 15px #9c4be0, 0 0 30px #572671;
}

/* Regra bônus para monitores de PC (Deixa os pontos um pouco mais espaçados na tela do computador) */
@media (min-width: 768px) {
    .indicadores {
        gap: 100px;
        /* No computador a barra do navegador não atrapalha, podemos fixar em 50px de novo */
        bottom: 50px; 
    }
    .ponto {
        width: 20px;
        height: 20px;
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Opcional: A classe que o JavaScript usará para escurecer a tela na saída */
.fade-out {
    opacity: 0 !important;
    transition: opacity 0.5s ease-in-out !important;
}