/* RESET E BASE */
html {
    overflow-y: scroll; /* scrollbar sempre visível para evitar shift horizontal entre páginas */
}

body {
    background: black url("../images/fantasyfundo.webp") center center fixed no-repeat;
    background-size: 100% 100%;

    margin: 0;
    padding: 0;

    -webkit-transition: background-image 0.2s ease-in-out;
    transition: background-image 0.2s ease-in-out;

    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* === NAVBAR === */
.navbar-container {
    position: relative;
    width: 1000px;
    margin: 90px auto 100px auto; 
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.navbar-bar {
    background: transparent;
    border: none;
    box-shadow: none;
    height: 60px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
}

.navbar-links {
    background: #3a1f1f;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    gap: 4px;
    border-bottom: 3px solid #1a0e0e;
    box-shadow: 0 3px 16px 0 #1a0e0e;
    width: 40%;
    position: relative;
    z-index: 1;

    /* ADICIONE ESTAS 3 LINHAS: */
    list-style: none; 
    margin: 0;
    padding: 0;
}

.navbar-links a {
    text-decoration: none;
    font-weight: bold;
    font-size: 16px;
    color: #e0c090; /* Dourado */
    text-transform: uppercase;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    transition: color 0.3s ease, background 0.3s ease;
    display: block;
    padding: 9px 16px;
    border-radius: 6px;
    white-space: nowrap;
}

.navbar-links a:hover {
    color: #ffffff;
}

.navbar-links li:hover {
    background: #5c2f2f;
    cursor: pointer;
    border-radius: 5px;
}

.navbar-links.left {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    padding-left: 10px;
    padding-right: 30px;
    clip-path: polygon(0 0, 100% 0, 95% 100%, 0% 100%); 
}

.navbar-links.right {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    padding-right: 10px;
    padding-left: 30px;
    clip-path: polygon(5% 0, 100% 0, 100% 100%, 0% 100%);
}

.navbar-logo-center {
    position: absolute;
    top: -80px; 
    left: 50.5%;
    transform: translateX(-50%);
    z-index: 10;
    width: 250px;
    pointer-events: none;
}

.navbar-logo-center a {
    pointer-events: auto;
}

.navbar-logo-center img {
    width: 100%;
    display: block;
    filter: drop-shadow(0px 10px 10px rgba(0,0,0,0.6)); 
    transition: transform 0.3s ease;
}

/* Mude de .navbar-logo-center :hover para .navbar-logo-center img:hover */
.navbar-logo-center img:hover {
   transform: scale(1.1);
}

/* === PAINÉIS LATERAIS (LOGIN, ETC) === */
.member-panel {
    background: rgba(58, 31, 31, 0.95); /* Marrom Transparente */
    color: #e0c090; /* Texto Dourado */
    position: relative;
    margin-bottom: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 18px 0 #1a0e0e; /* Sombra escura */
    border: 1px solid #5c2f2f;
}

.member-panel h1 {
    text-transform: uppercase;
    font-size: 16px;
    color: #e0c090;
    border-bottom: 1px solid #5c2f2f;
    padding-bottom: 10px;
}

/* Linhas decorativas */
.border-ls {
    border-bottom: 1px transparent;
    position: relative;
    z-index: 10
}

.border-ls:after {
    content: "";
    display: block;
    position: absolute;
    z-index: -1;
    top: 8px;
    left: 2px;
    right: 2px;
    bottom: -2px;
    border-bottom: 1px solid #5c2f2f; /* Linha Marrom clara */
}

.member-panel form {
    width: 100%;
}

.member-panel input {
    width: 90%;
    padding: 10px;
    background: #2a1616; /* Fundo do input escuro */
    border: 1px solid #5c2f2f;
    color: white;
    margin-bottom: 10px;
}

/* === BOTÕES (Sem Gradiente Azul/Roxo) === */
.button-login, .button {
    margin: 10px auto 20px auto;
    background: #5c2f2f; /* Fundo Sólido Marrom/Vermelho */
    color: #e0c090; /* Texto Dourado */
    border: 1px solid #3a1f1f;
    text-transform: uppercase;
    font-weight: bold;
    width: 50% !important;
    border-radius: 10px;
    display: block;
    padding: 10px 20px;
    cursor: pointer;
    text-align: center;
    box-shadow: 0 4px 16px 0 #1a0e0e;
    transition: background 0.3s, color 0.3s;
    font-size: 17px;
}

.button-login:hover, .button:hover {
    background: #e0c090; /* Hover Dourado Sólido */
    color: #3a1f1f; /* Texto Escuro */
    border-color: #e0c090;
}

.member-panel-options ul {
    list-style: none;
    margin: 5px 0 0;
    padding: 0;
}

.member-panel-options ul li {
    display: inline;
    font-size: 12px;
    margin-right: 10px;
}

.member-panel-options a {
    text-decoration: none;
    color: #e0c090;
    font-weight: bold;
}
.member-panel-options a:hover {
    color: white;
}

/* === PAINEL DE CONTROLE === */
.control-panel {
    position: relative;
}

.control-panel ul {
    margin: 0;
    padding: 0;
    list-style: none;
    margin-bottom: 30px;
}

.control-panel a {
    text-decoration: none;
}

.control-panel li {
    color: #e0c090; /* Dourado */
    padding: 5px 0;
    border-bottom: 1px solid #3a1f1f;
}

.control-panel li:hover {
    color: #ffffff;
    background-color: #3a1f1f;
}

/* === SERVER STATUS (CÓDIGO COMPLETO E CORRIGIDO) === */
.server-status {
    background: rgba(58, 31, 31, 0.95);
    box-shadow: inset 0px 0px 0px 3px #1a0e0e;
    position: relative;
    margin-bottom: 20px;
    border-radius: 10px;
    color: #e0c090;
    border: 1px solid #5c2f2f;
}

.server-status h1 {
    margin-bottom: 20px;
    color: #e0c090;
    text-transform: uppercase;
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
    border-bottom: 1px solid #5c2f2f;
    padding-bottom: 10px;
}

.server-status h3 {
    font-size: 16px;
    display: inline;
    color: white;
}

.online {
    padding: 10px 0px;
    background: #4a6b2f; /* Verde Militar Sólido */
    color: white;
    width: 100%;
    float: left;
    text-align: center;
    text-transform: uppercase;
    font-weight: bold;
    margin-bottom: 5px;
    margin-top: -10px;
    border-radius: 5px;
    border: 1px solid #2a3b1a;
}

.offline {
    padding: 10px 0px;
    background: #8b0000; /* Vermelho Sangue Sólido */
    color: white;
    width: 100%;
    float: left;
    text-align: center;
    text-transform: uppercase;
    font-weight: bold;
    margin-bottom: 5px;
    margin-top: -10px;
    border-radius: 5px;
    border: 1px solid #500000;
}

/* LISTA DE INFORMAÇÕES (Accounts, Chars, Clans) */
.user-info {
    list-style: none;
    padding: 0;
    margin: 15px 0; /* Espaço em cima e embaixo da lista */
    padding-left: 20px; /* Alinhamento leve à direita */
}

.user-info li {
    margin-bottom: 2px; /* CORREÇÃO: Reduzido para 2px para ficarem colados */
    color: #e0c090;
    font-size: 14px;
    font-weight: bold;
}

/* LISTA DE RATES (Alinhamento Perfeito com Flexbox) */
.rates {
    border: solid 1px #5c2f2f;
    padding: 10px;
    background: #2a1616;
    list-style: none;
    margin: 0 10px 10px 10px;
    border-radius: 5px;
}

.rates li {
    display: flex; /* CORREÇÃO: Flexbox para alinhar verticalmente */
    align-items: center; /* Centraliza o texto "80x" com a caixa */
    margin-bottom: 8px;
    color: #fff;
    font-weight: bold;
    font-size: 14px;
}

.rates li:last-child {
    margin-bottom: 0;
}

.server-rate {
    background: #5c2f2f;
    width: 60px; /* Largura fixa para manter alinhamento */
    text-transform: uppercase;
    text-align: center;
    padding: 5px 0;
    color: white;
    font-weight: bold;
    margin-right: 15px; /* Espaço entre a caixa e o texto */
    border-radius: 4px;
    border: 1px solid #3a1f1f;
    display: inline-block;
    font-size: 12px;
}

/* === RANKING (Removido azul/roxo) === */
.ranking {
    background: rgba(58, 31, 31, 0.95);
    margin-bottom: 20px;
    border: 3px solid #1a0e0e;
    border-radius: 10px;
}

.header {
    background: #3a1f1f; /* Fundo Sólido Escuro */
    border-bottom: 2px solid #5c2f2f;
}

.position {
    padding: 1px 5px 1px 4px;
    background: #e0c090; /* Dourado Sólido */
    color: #3a1f1f; /* Texto escuro */
    text-align: center;
    border: 1px solid #b89c72;
    border-radius: 5px;
    font-weight: bold;
}

.ranking h2 {
    text-align: center;
    color: #e0c090;
    text-transform: uppercase;
    font-size: 22px;
    font-weight: bold;
    margin-top: 11px;
}

.ranking table {
    font-size: 14px;
    color: #e0c090;
    width: 100%;
    margin: 0;
    padding: 0;
    border-collapse: collapse;
}

.ranking tr:nth-child(even) {
    background-color: #2a1616; /* Marrom bem escuro para linhas pares */
}

.ranking th {
    border-bottom: 1px solid #5c2f2f;
    padding: 10px;
    color: white;
}

.ranking td {
    text-align: center;
    margin: 0;
    padding: 10px;
    border: none;
}

.white-link{
    text-decoration: none;
    color: #e0c090;
}

.white-link:hover{
    color: white;
    text-decoration: underline;
}

/* === FOOTER === */
/* Sticky footer: empurra o rodapé pro fim da viewport em páginas curtas (Armory, Download...). */
#root {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.wrapper {
    flex: 1 0 auto;
}

.footer {
    padding-top: 60px;
    width: 100%;
    flex-shrink: 0;
    background: linear-gradient(180deg, rgba(58, 31, 31, 0) 0%, #3a1f1f 80%);
    color: #e0c090;
}

.inner-footer {
    width: 1165px;
    padding: 1px;
    background: none;
    margin-right: auto;
    margin-left: auto;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.nav-footer-ls a {
    text-decoration: none;
    color: #e0c090;
    display: inline-block;
    padding: 5px;
    border-radius: 5px;
    transition: background 0.3s, color 0.3s;
}

.nav-footer-ls a:hover {
    background-color: #5c2f2f;
    color: #fff;
}

.nav-footer-ls ul {
    list-style: none;
}

.nav-footer-ls li {
    padding: 2px 5px 2px 5px;
    display: inline;
    border-right: 1px solid #5c2f2f;
}

.nav-footer-ls li:last-child {
    border: none;
}

.nav-copyright ul {
    list-style: none;
}

.nav-copyright li {
    display: inline;
}

.nav-copyright {
    color: #e0c090;
    padding-top: 30px;
    text-align: center;
}

/* === REGISTER/PAGINAS === */
.register {
    background: rgba(58, 31, 31, 0.95);
    position: relative;
    border-radius: 10px;
    border: 1px solid #5c2f2f;
    padding: 15px;
}

.register h1 {
    color: #e0c090;
}

.register input {
    width: 90%;
    padding: 10px;
    background: #2a1616;
    border: 1px solid #5c2f2f;
    color: white;
}

.personal input {
    padding-left: 100px;
    width: 79%;
}

.register p {
    color: #e0c090;
}

.g-recaptcha {
    margin-top: 50px;
}

.error {
    list-style: none;
    display: list-item;
    color: #ff6b6b; /* Vermelho claro para erro */
    font-weight: bold;
}

#birthdate {
    z-index: 10;
    position: relative;
}

.ui-datepicker {
    margin-left: 100px !important;
}

/* Caixa de sucesso de conta criada */
.account-created {
    background: #5c2f2f; /* Fundo sólido */
    border: 1px solid #e0c090;
    border-radius: 8px;
    color: white;
}

.account-created h1 {}

.account-created h2 {
    font-weight: 100;
    color: #e0c090;
}

.account-verified {
    width: 95%;
    background-color: #3a1f1f;
    border: 1px solid #5c2f2f;
    color: #e0c090;
    font-size: 18px;
}

.account-verified-inner h1 {
    font-size: 30px;
    min-height: 100px;
}

.account-verified h3 {
    font-size: 20px;
    margin-bottom: 20px;
    color: white;
}

/* === NOVOS BOTÕES MEDIEVAIS (Substituem as imagens) === */
.big-action-button {
    display: block;
    width: 100%;
    padding: 15px 0; /* Altura do botão */
    background: #3a1f1f; /* Cor de fundo MARROM (igual navbar) */
    color: #e0c090 !important; /* Texto DOURADO */
    text-align: center;
    text-decoration: none !important;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 20px;
    border: 2px solid #5c2f2f; /* Borda um pouco mais clara */
    border-radius: 8px; /* Cantos arredondados */
    box-shadow: 0 4px 6px rgba(0,0,0,0.3); /* Sombra para dar profundidade */
    transition: all 0.3s ease;
    margin-bottom: 15px; /* Espaço abaixo do botão */
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* Efeito ao passar o mouse */
.big-action-button:hover {
    background: #5c2f2f; /* Fica um pouco mais claro */
    color: #ffffff !important; /* Texto fica branco */
    border-color: #e0c090; /* Borda fica dourada brilhante */
    box-shadow: 0 6px 12px rgba(0,0,0,0.5); /* Sombra aumenta */
    transform: translateY(-2px); /* Botão sobe um pouquinho */
}

/* ============================================================
   SELETOR DE IDIOMA (BANDEIRAS)
   ============================================================ */
.lang-switcher {
    display: flex;
    gap: 8px;
    align-items: center;
}

.lang-switcher .lang-flag {
    display: inline-block;
    width: 32px;
    height: 22px;
    border-radius: 4px;
    overflow: hidden;
    border: 2px solid #5c2f2f;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
    transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
    line-height: 0;
}

.lang-switcher .lang-flag svg {
    display: block;
    width: 100%;
    height: 100%;
}

.lang-switcher .lang-flag:hover {
    transform: translateY(-1px);
    border-color: #e0c090;
}

.lang-switcher .lang-flag.is-active {
    border-color: #e0c090;
    box-shadow: 0 0 0 1px #e0c090, 0 2px 8px rgba(224, 192, 144, 0.4);
}

/* Posicionamento desktop: canto superior direito do wrapper */
.lang-switcher-desktop {
    position: absolute;
    top: 14px;
    right: 18px;
    z-index: 11;
}

/* No mobile, o switcher desktop esconde, e aparece dentro do menu mobile */
@media (max-width: 992px) {
    .lang-switcher-desktop {
        display: none;
    }
}

.navbar-mobile-menu .lang-switcher {
    justify-content: center;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #5c2f2f;
}

/* ============================================================
   MENU HAMBÚRGUER MOBILE
   - Botão de 3 linhas que aparece só ≤992px
   - Ao clicar, expande .navbar-mobile-menu (links + sign out)
   ============================================================ */

.navbar-toggle {
    display: none; /* visível só no mobile */
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 20;
    width: 44px;
    height: 44px;
    background: #3a1f1f;
    border: 2px solid #5c2f2f;
    border-radius: 8px;
    cursor: pointer;
    padding: 0;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.5);
    transition: background 0.3s, border-color 0.3s;
}

.navbar-toggle:hover {
    background: #5c2f2f;
    border-color: #e0c090;
}

.navbar-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: #e0c090;
    border-radius: 1px;
    transition: transform 0.3s, opacity 0.3s;
}

.navbar-toggle.is-active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.navbar-toggle.is-active span:nth-child(2) {
    opacity: 0;
}

.navbar-toggle.is-active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.navbar-mobile-menu {
    display: none; /* mostrado via .is-open no mobile */
    width: 100%;
    background: rgba(58, 31, 31, 0.97);
    border: 1px solid #5c2f2f;
    border-radius: 10px;
    padding: 14px;
    margin: 10px auto 0 auto;
    max-width: 500px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.5);
    box-sizing: border-box;
}

.navbar-mobile-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.navbar-mobile-menu li {
    border-bottom: 1px solid #5c2f2f;
}

.navbar-mobile-menu li:last-child {
    border-bottom: none;
}

.navbar-mobile-menu a {
    display: block;
    text-decoration: none;
    color: #e0c090;
    font-weight: bold;
    text-transform: uppercase;
    padding: 12px 14px;
    transition: background 0.3s, color 0.3s;
    border-radius: 6px;
}

.navbar-mobile-menu a:hover {
    background: #5c2f2f;
    color: #ffffff;
}

.navbar-mobile-menu .signout-row {
    margin-top: 10px;
    padding-top: 12px;
    border-top: 2px solid #5c2f2f;
}

.navbar-mobile-menu form {
    margin: 0;
}

.navbar-mobile-menu .signout-btn {
    display: block;
    width: 100%;
    background: #5c2f2f;
    color: #e0c090;
    border: 1px solid #3a1f1f;
    padding: 12px;
    border-radius: 6px;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    transition: background 0.3s, color 0.3s;
}

.navbar-mobile-menu .signout-btn:hover {
    background: #e0c090;
    color: #3a1f1f;
}

/* ============================================================
   ZOOM PROPORCIONAL ENTRE RESOLUÇÕES DESKTOP
   - Mantém o site visualmente do mesmo tamanho em QHD, FHD e HD
   - QHD/4K (>2400px): 100%
   - FHD largo  (2001-2400): 95%
   - FHD padrão (1701-2000): 85%
   - FHD/HD+    (1501-1700): 78%
   - HD         (993-1500):  70%
   - Em <=992px o site empilha (mobile) — zoom desabilitado pra não quebrar
   ============================================================ */
@media (min-width: 993px) and (max-width: 1500px) {
    body { zoom: 0.7; }
    /* compensa o zoom p/ o #root preencher a viewport visual (sticky footer) */
    #root { min-height: calc(100vh / 0.7); }
}
@media (min-width: 1501px) and (max-width: 1700px) {
    body { zoom: 0.78; }
    #root { min-height: calc(100vh / 0.78); }
}
@media (min-width: 1701px) and (max-width: 2000px) {
    body { zoom: 0.85; }
    #root { min-height: calc(100vh / 0.85); }
}
@media (min-width: 2001px) and (max-width: 2400px) {
    body { zoom: 0.95; }
    #root { min-height: calc(100vh / 0.95); }
}
/* > 2400px (QHD/4K): zoom 1 (default) */

/* ============================================================
   RESPONSIVO
   Breakpoints:
     - 1240px: layout fluido (wrapper deixa de ter 1200px fixo)
     - 992px:  empilha colunas, simplifica navbar
     - 600px:  ajustes finos para mobile
   ============================================================ */

/* Imagens e iframes nunca estouram o container */
img {
    max-width: 100%;
    height: auto;
}

iframe {
    max-width: 100%;
}

/* Tablet / desktop pequeno */
@media (max-width: 1240px) {
    .wrapper {
        width: 100% !important;
        max-width: 1200px;
        padding: 0 15px;
        box-sizing: border-box;
    }

    .inner-footer {
        width: 100% !important;
        max-width: 1165px;
        padding: 0 15px;
        box-sizing: border-box;
    }

    .navbar-container {
        width: 100% !important;
        max-width: 1000px;
    }

    .body-bg, body {
        background-size: cover !important;
    }
}

/* Tablet / mobile grande — empilha colunas */
@media (max-width: 992px) {
    .one-fourth,
    .two-fourth,
    .three-fourth,
    .three-fourth-right {
        width: 100% !important;
        float: none !important;
        margin: 0 0 15px 0 !important;
        box-sizing: border-box;
    }

    /* Cancela o deslocamento da sidebar do /account no mobile */
    .account-sidebar {
        left: 0 !important;
    }

    /* Navbar empilhada com logo em fluxo */
    .navbar-container {
        height: auto !important;
        margin: 25px auto 30px auto !important;
        flex-direction: column;
        padding: 0 10px;
        position: relative;
    }

    .navbar-logo-center {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
        width: 160px !important;
        margin: 0 auto 10px auto;
        pointer-events: auto;
    }

    /* Esconde a navbar desktop e mostra o hambúrguer + menu mobile */
    .navbar-bar {
        display: none !important;
    }

    .navbar-toggle {
        display: flex;
    }

    .navbar-mobile-menu.is-open {
        display: block;
    }

    /* Esconde o membersection (Click below to Sign Out) no mobile,
       o sign out fica dentro do menu hambúrguer */
    .one-fourth .member-panel {
        display: none;
    }

    /* Footer em wrap */
    .nav-footer-ls ul {
        flex-wrap: wrap;
        gap: 4px 0;
    }

    /* Tabelas de ranking com scroll horizontal */
    .ranking {
        overflow-x: auto;
    }

    /* Painel de checkout/donate */
    .donation-grid,
    .account-stats,
    .actions {
        flex-wrap: wrap;
    }
}

/* Mobile (telefones) */
@media (max-width: 600px) {
    .wrapper {
        padding: 0 10px;
    }

    .navbar-logo-center {
        width: 140px !important;
    }

    .navbar-links {
        gap: 4px 12px;
    }

    .navbar-links a {
        font-size: 14px !important;
    }

    .navbar-links li {
        padding: 2px 4px;
    }

    /* Cards/painéis com padding menor */
    .account-options,
    .passreset,
    .forgot,
    .login.big-padding,
    .register {
        padding: 18px !important;
    }

    /* Stats RC + Gift Points em coluna */
    .account-stats {
        flex-direction: column !important;
    }

    /* Botões de actions em coluna */
    .actions {
        flex-direction: column !important;
    }

    /* Option cards do /account em coluna */
    .account-options .option-card {
        flex-direction: column;
        align-items: stretch !important;
        gap: 12px;
        text-align: center;
    }

    .account-options .option-action {
        text-align: center;
    }

    .account-options .option-action a,
    .account-options .option-action button {
        width: 100%;
        box-sizing: border-box;
    }

    /* News na home */
    .news-item {
        flex-direction: column;
    }

    .news-image {
        width: 100% !important;
    }

    /* Tabelas de ranking — fonte menor */
    .ranking table {
        font-size: 12px !important;
    }

    .ranking td,
    .ranking th {
        padding: 6px !important;
    }

    /* Footer text */
    .nav-footer-ls li {
        font-size: 13px;
        padding: 2px 4px !important;
    }

    /* Discord iframe altura menor no mobile */
    .banner iframe {
        height: 350px !important;
    }
}

/* Mobile pequeno */
@media (max-width: 380px) {
    .navbar-links a {
        font-size: 13px !important;
    }

    .navbar-logo-center {
        width: 120px !important;
    }
}