/* --- CONFIGURAÇÕES BÁSICAS --- */
* {
    box-sizing: border-box; /* Garante que padding não quebre o layout */
}

body {
    background-color: #000000;
    background-image: url('images/fundo6.png');
    background-repeat: repeat; /* Faz a imagem se repetir como um mosaico */
    background-attachment: fixed; /* O fundo fica parado enquanto você rola o site (efeito clássico) */    
    color: #710C04; /*  */
    font-family: 'Playfair Display', serif; /* Fonte serifada gótica */
    margin: 0;
    padding: 0;
    font-size: 1.1rem;
    line-height: 1.6;
    
    /* Reativando o cursor de caveira personalizado */
    cursor: url('images/cursed_cursor666.png'), auto;
}

/* --- ESTRUTURA (IDs FIEIS À IMAGEM) --- */
#container {
    max-width: 960px; /* Mantém a largura central */
    margin: 0 auto;    /* Centraliza o container na tela */
    background-color: #000000; /* Garante que o fundo do conteúdo seja preto sólido */
    
    /* BARRAS VERMELHAS LATERAIS */
    border-left: 5px solid #710C04;  /* Barra vertical esquerda */
    border-right: 5px solid #710C04; /* Barra vertical direita */
    
    /* Opcional: Adiciona uma sombra para dar profundidade sobre o wallpaper */
    box-shadow: 0 0 20px rgba(0, 0, 0, 1);
    
    min-height: 100vh; /* Faz o container ir até o final da tela mesmo com pouco texto */
}

#headerArea {
    height: 220px; /* Altura exata vista no inspetor */
    width: 100%;
    position: relative;
    overflow: hidden;
}

.header-img {
    width: 100%;       /* Faz a imagem ocupar toda a largura do cabeçalho */
    height: 100%;      /* Faz a imagem ocupar toda a altura (220px) */
    object-fit: cover; /* Isso é importante: corta a imagem sem distorcer caso as proporções sejam diferentes */
    display: block;    /* Remove espaços vazios estranhos abaixo da imagem */
}

.bottom-img {
    width: 100%;       /* Faz a imagem ocupar toda a largura do cabeçalho */
    height: 100%;      /* Faz a imagem ocupar toda a altura (220px) */
    object-fit: cover; /* Isso é importante: corta a imagem sem distorcer caso as proporções sejam diferentes */
    display: block;    /* Remove espaços vazios estranhos abaixo da imagem */
}


#header {
    height: 100%;
    width: 100%;
    background-color: #1a0000; /* Fundo de fallback escuro */
    border-bottom: 2px solid #710C04;
}

/* Para o Flexbox funcionar (Sidebar ao lado do Main) */
#flex {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

/* --- BARRA LATERAL (Sidebar) --- */
#leftSidebar {
    width: 200px; /* Largura da sidebar */
    flex-shrink: 0; /* Impede que a sidebar diminua */
}

#leftSidebar h2 {
    font-family: 'Playfair Display', serif;
    font-size: 1.4rem;
    font-weight: normal;
    font-style: italic;
    color: #710C04;
}

.box {
    border: 1px solid #710C04;
    background-color: rgba(20, 0, 0, 0.5); /* Fundo sutil */
    padding: 10px;
    margin-bottom: 10px;
}

.box p {
    font-family: 'VT323', monospace; /* Fonte Mono para a barra lateral */
    font-size: 1rem;
    color: #710C04;
    margin: 5px 0;
}

/* Links da Sidebar */
#leftSidebar ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

#leftSidebar li {
    margin: 8px 0;
}

#leftSidebar a {
    color: #ffd700; /* Ouro/Amarelo para links (comum no estilo) */
    text-decoration: none;
    font-family: 'Playfair Display', serif;
    font-size: 1.1rem;
}

#leftSidebar a:hover {
    color: #ffffff;
    text-shadow: 0 0 10px #710C04;
    text-decoration: underline;
}

/* --- CONTEÚDO PRINCIPAL (Main) --- */
main {
    flex-grow: 1; /* O main ocupa o espaço restante */
    background-color: transparent;
    padding: 0 20px 20px 20px;
}

main h1 {
    font-size: 2.8rem;
    font-weight: normal;
    color: #710C04;
    margin-top: 0;
}

.center-text {
    text-align: center;
}

/* Texto em destaque (Ciano) */
p .highlight {
    color: #00ffff;
    text-shadow: 0 0 10px #00ffff;
    font-weight: bold;
}

/* --- INDICATIVOS DE IMAGEM --- */
.image-placeholder {
    width: 100%;
    height: 100%;
    background: #111; /* Cinza muito escuro */
    border: 2px dashed #333; /* Borda tracejada sutil */
    color: #666;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'VT323', monospace;
    font-size: 1.2rem;
    margin: 0;
}

#contentImageArea .image-placeholder {
    height: 400px; /* Altura sugerida para a imagem de conteúdo */
    max-width: 500px;
    margin: 0 auto; /* Centraliza */
    border-radius: 10px; /* Borda arredondada como na imagem */
}

.audio-controls {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 100;
}

.audio-controls button {
    background: black;
    color: #d80000;
    border: 2px double #d80000;
    font-family: 'VT323', monospace;
    font-size: 1.2rem;
    padding: 5px 15px;
    cursor: pointer; /* Lembra que configuramos o cursor de caveira? Ele vai aparecer aqui! */
}

.audio-controls button:hover {
    background: #d80000;
    color: black;
}