/* 1. Definições de Cores e Fontes */
:root {
    --main-green: #00ff00;
    --dark-bg: #000000;
    --highlight: #ffffff;
}

body {
    background-color: var(--dark-bg);
    color: var(--main-green);
    font-family: 'VT323', monospace;
    margin: 5px;
    margin-top: 5px;
   /* padding: 2vw; /* Padding responsivo */
}

/* 2. Controle de Arte ASCII */
pre {
    font-family: "Courier New", Courier, monospace;
    line-height: 1;
    letter-spacing: 0;
    white-space: pre;
    color: var(--main-green);
}

/* 3. Links e Navegação */
a {
    color: var(--highlight);
    text-decoration: none;
    padding: 2px 5px;
}

a:hover {
    background-color: var(--main-green);
    color: var(--dark-bg);
}

/* 4. Esconder elementos se necessário (ex: imagens) */
.terminal-only {
    display: block;
}

/* Estilo para simular o efeito de fósforo (Scanlines) em browsers modernos */
body::before {
    content: " ";
    display: block;
    position: fixed;
    top: 0; left: 0; bottom: 0; right: 0;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), 
                linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
    z-index: 2;
    background-size: 100% 2px, 3px 100%;
    pointer-events: none;
}

/* Estilos para a Barra de Progresso */
.progress-container {
    display: flex;
    align-items: center;
    width: 100%; /* Ajuste a largura conforme necessário */
    max-width: 80ch; /* Limita a 80 caracteres para terminais */
    margin: 20px 0;
    font-family: 'VT323', monospace;
    font-size: 1.1rem;
    position: relative; /* Para o posicionamento do label e percentual */
}

.progress-label {
    margin-right: 10px;
    color: var(--highlight);
}

.progress-bar {
    flex-grow: 1; /* Faz a barra ocupar o espaço restante */
    height: 1.2rem; /* Altura da barra */
    background-color: #222; /* Fundo escuro da barra */
    border: 1px solid var(--main-green); /* Borda verde */
    overflow: hidden; /* Garante que o preenchimento não saia */
    position: relative;
}

.progress-fill {
    height: 100%;
    width: 0%; /* Começa vazio */
    background-color: var(--main-green); /* Cor de preenchimento */
    animation: progress-anim 4s forwards infinite; /* Animação para navegadores modernos */
    /* Simula um efeito de "brilho" para o preenchimento */
    background-image: linear-gradient(
        to right, 
        transparent 0%, 
        var(--main-green) 50%, 
        transparent 100%
    );
    background-size: 200% 100%;
    animation: progress-shine 2s linear infinite, progress-anim 4s forwards infinite;
}

.progress-percent {
    margin-left: 10px;
    min-width: 4ch; /* Garante espaço para "100%" */
    text-align: right;
    color: var(--highlight);
}

/* Keyframes para a animação do preenchimento da barra */
@keyframes progress-anim {
    0%   { width: 0%; }
    25%  { width: 30%; }
    50%  { width: 70%; }
    75%  { width: 90%; }
    100% { width: 100%; }
}

/* Keyframes para o efeito de "brilho" */
@keyframes progress-shine {
    0% { background-position: -100% 0; }
    100% { background-position: 100% 0; }
}

/* Media Query para navegadores de texto e terminais */
@media screen and (max-width: 80ch) {
    .progress-container {
        /* Remove o flexbox para uma aparência mais simples no terminal */
        display: block;
        text-align: left;
    }
    .progress-label, .progress-percent {
        display: inline-block;
        margin: 5px 0;
    }
    .progress-bar {
        width: 100%;
        margin-top: 5px;
        /* Para terminais, podemos usar apenas um preenchimento estático
           ou uma representação baseada em caracteres */
        content: "[----------]"; /* Exemplo estático para terminal */
        white-space: pre;
    }
    /* Desativa a animação em terminais para evitar sobrecarga */
    .progress-fill {
        display: none; /* Esconde o preenchimento animado */
    }
    /* Podemos usar caracteres para simular a barra de progresso em w3m/elinks */
    .progress-bar::after {
        content: '########################################'; /* Preenchimento estático */
        display: block;
        height: 100%;
        overflow: hidden;
        white-space: pre;
        color: var(--main-green);
        background-color: transparent; /* Certifica de que não há fundo extra */
        width: 100%; /* Ajuste o "preenchimento" se necessário */
    }
    .progress-percent {
        display: block;
        text-align: left;
        margin-top: 5px;
    }
}