/* ?? css/style.css */

/* Reset básico e fontes da época */
body, h1, h2, h3, p, ul, li {
    margin: 0;
    padding: 0;
}

/* Definição das variáveis de cor que serão controladas pelo editor */
:root {
    --cor-fundo-navegador: #E6E6E6;
    --cor-fundo-site: #FFFFFF;
    --cor-link-menu: #D8D8D8;
    --cor-link-menu-hover: #ac5d0b;
    --cor-titulo-painel: #ac5d0b;
    --cor-link-noticia: #045FB4;
    --cor-texto-golds: #AEB404;
    --cor-status-online: #0B3B0B;
}

body {
    background-color: var(--cor-fundo-navegador);
    font-family: Tahoma, Arial, sans-serif;
    font-size: 11px;
    color: #ac5d0b;
}

/* Container principal com a LARGURA AJUSTADA */
#container {
    width: 820px; /* AJUSTADO */
    margin: 10px auto;
    background-color: var(--cor-fundo-site);
    border: 1px solid #999;
}

/* Cabeçalho com o banner e ALTURA AJUSTADA */
#header {
    height: 248px; /* AJUSTADO */
    background: url(../imagens/mu-hades-banner.jpg) no-repeat center center #000;
    border-bottom: 1px solid #000;
}

/* Menu de Navegação */
#navbar {
    background-color: #060606;
    height: 35px;
    display: flex;
    align-items: center;
    padding-left: 20px;
    border-bottom: 3px solid #4A4A4A;
}

#navbar ul { list-style: none; }
#navbar ul li { display: inline-block; margin-right: 25px; }
#navbar ul li a {
    color: var(--cor-link-menu);
    text-decoration: none;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    transition: color 0.2s;
}
#navbar ul li a:hover { color: var(--cor-link-menu-hover); }

/* Corpo principal do site */
#main-body { padding: 15px; display: flex; gap: 15px; }
#left-column { width: 220px; }
#center-column { flex: 1; } /* Ocupa o espaço restante */
.panel { margin-bottom: 15px; }

.panel-title {
    background-color: #F2F2F2;
    border: 1px solid #D8D8D8;
    padding: 5px;
    font-weight: bold;
    font-size: 12px;
    color: var(--cor-titulo-painel);
}

.panel-content {
    border: 1px solid #D8D8D8;
    border-top: none;
    padding: 10px;
    font-size: 11px;
    line-height: 1.6;
}

#server-info p { margin-bottom: 5px; }
#server-info span { font-weight: bold; color: var(--cor-status-online); }
#server-info .golds { font-weight: bold; color: var(--cor-texto-golds); }

.news-list li { list-style: none; padding: 5px 0; border-bottom: 1px dotted #ccc; }
.news-list a { color: var(--cor-link-noticia); text-decoration: none; }
.news-list a:hover { text-decoration: underline; }

#shoutbox-content { background-color: #F7F8E0; height: 200px; overflow-y: auto; padding: 5px; border: 1px solid #D8D8D8; margin-bottom: 5px; }
#shoutbox-content .chat-message { margin-bottom: 5px; }
#shoutbox-content .chat-user { font-weight: bold; }
#shoutbox-controls { text-align: center; }
#shoutbox-controls input[type="text"] { width: 70%; margin-right: 5px; }

#footer { background-color: #3A3A3A; padding: 10px; text-align: center; color: #A4A4A4; font-size: 11px; }

/* Estilo do Popup */
.popup-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.7);
    display: none;
    align-items: center; justify-content: center; z-index: 1000;
    opacity: 0;
    transition: opacity 0.5s;
}
.popup-overlay.active {
    display: flex;
    opacity: 1;
}
.popup-content { background: #fff; padding: 20px; border-radius: 5px; max-width: 500px; text-align: center; }
.popup-close { padding: 5px 10px; background: #8A0808; color: #fff; cursor: pointer; display: inline-block; margin-top: 15px; }