/* =========================
   SCROLLBAR (GLOBAL)
========================= */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700;900&family=Segoe+UI:wght@400;600&display=swap');

:root {
  --fab-right: 24px;
  --fab-bottom: 24px;
  --fab-gap: 12px;

  /* Cores do Tema Dark Fantasy */
  --gold-main: #c5a059;
  --gold-dim: #8a6e3e;
  --bg-dark: #050505;
  --bg-panel: #0b0c10;
  --text-main: #d0d0d5;
  --magic-glow: rgba(197, 160, 89, 0.35);

  /* NOVA VARIÁVEL: Cor Sólida para Cards (Cinza Chumbo Escuro) */
  --bg-card-solid: #151518;
  /* NOVA VARIÁVEL: Cor Sólida para Itens Internos (Quase Preto) */
  --bg-inner-solid: #0b0c10;
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--gold-dim) rgba(255, 255, 255, 0.06);
}

/* Chrome / Edge / Safari */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 999px;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(
    180deg,
    var(--gold-main),
    var(--gold-dim)
  );
  border-radius: 999px;
  border: 3px solid #000;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(
    180deg,
    #e6c885,
    #aa8e29
  );
}

::-webkit-scrollbar-corner {
  background: transparent;
}

/* =========================
   RESET & BASE (REGISTRO)
========================= */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  background: radial-gradient(
    circle at top,
    #1a1a20 0%,
    #050505 55%,
    #000000 100%
  ), url("../img/hero-bg.gif");
  
  background-size: cover;
  background-attachment: fixed;
  background-position: center top;

  color: var(--text-main);
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Cinzel', serif;
  letter-spacing: 1px;
}

/* =========================
   FORM CARD
========================= */
form {
  width: 100%;
  max-width: 420px;
  padding: 32px;
  border-radius: 4px;

  /* Fundo Sólido (Linear Gradient opaco) */
  background: linear-gradient(180deg, #151518, #0a0a0c); 
  border: 1px solid rgba(197, 160, 89, 0.15);
  
  box-shadow:
    0 20px 60px rgba(0,0,0,0.85),
    inset 0 0 0 1px rgba(0,0,0,0.5);
}

form h2 {
  margin: 0 0 22px;
  text-align: center;
  font-weight: 800;
  color: var(--gold-main);
  text-shadow: 0 2px 10px rgba(0,0,0,0.8);
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* =========================
   LABELS & HELPERS
========================= */
label {
  display: block;
  margin: 14px 0 8px;
  font-size: 13px;
  font-weight: 700;
  color: #b0b0b5;
  font-family: 'Cinzel', serif;
  letter-spacing: 0.5px;
}

small {
  font-size: 12px;
  opacity: .75;
}

/* =========================
   FIELDS (BASE)
========================= */
input,
select {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  border-radius: 4px;

  border: 1px solid rgba(255,255,255,0.08);
  background: var(--bg-inner-solid); /* Fundo sólido nos inputs */

  color: #e6c885;
  font-size: 14px;

  outline: none;
  display: block;
  transition: all 0.3s ease;
}

input::placeholder {
  color: rgba(255,255,255,0.3);
}

input:focus,
select:focus {
  border-color: var(--gold-main);
  box-shadow: 0 0 10px var(--magic-glow);
  background: #000; /* Fica mais preto ao focar */
}

/* =========================
   LOGIN ROW
========================= */
.login-row {
  display: grid;
  grid-template-columns: 1fr 0px;
  gap: 10px;
  align-items: stretch; 
}

.login-input { min-width: 0; }

.suffix-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 40px; 
  font-weight: 800;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(197, 160, 89, 0.8) 50%),
    linear-gradient(135deg, rgba(197, 160, 89, 0.8) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 19px,
    calc(100% - 12px) 19px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.suffix-select:invalid { color: rgba(255,255,255,0.4); }
.suffix-select option { background: #0b0c10; color: var(--gold-main); }

@media (max-width: 460px){ .login-row{ grid-template-columns: 1fr; } }

/* =========================
   CAPTCHA
========================= */
.captcha-row {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 10px;
  align-items: stretch;
  margin-top: 0px;
}

.captcha-img {
  width: 170px;
  height: 46px;              
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.1);
  background: var(--bg-inner-solid); /* Sólido */
  cursor: pointer;
  display: block;
  object-fit: cover;
  opacity: 0.8;
  transition: opacity 0.2s;
}

.captcha-img:hover { opacity: 1; border-color: var(--gold-dim); }
.captcha-input { height: 46px; }
.captcha-hint { display: block; margin-top: 8px; opacity: .75; font-size: 12px; }

@media (max-width: 520px){
  .captcha-row{ grid-template-columns: 1fr; }
  .captcha-img{ width: 100%; }
}

/* =========================
   BUTTON
========================= */
button {
  width: 100%;
  height: 48px;
  margin-top: 14px;
  border: 1px solid #4a3b22;
  border-bottom: 3px solid #3d2e10;
  border-radius: 4px;
  background: linear-gradient(180deg, #8a6e3e 0%, #5e4b2a 100%);
  color: #fff;
  text-shadow: 0 1px 2px #000;
  font-family: 'Cinzel', serif;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 1px;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

button:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 15px rgba(197, 160, 89, 0.4);
  filter: brightness(1.15);
  background: linear-gradient(180deg, #a88a52 0%, #755e35 100%);
}

button:active {
  transform: translateY(0);
  box-shadow: none;
  border-bottom-width: 1px;
  margin-top: 16px;
}

/* =========================
   MESSAGE
========================= */
form p { margin: 12px 0 0; text-align: center; }
form p strong { color: var(--gold-main); }

/* ===============================
   BOTÃO MÚSICA
================================ */
.music-toggle {
    position: fixed;
    bottom: var(--fab-bottom);
    right: var(--fab-right);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #151518; /* Sólido */
    border: 1px solid var(--gold-dim);
    color: var(--gold-main);
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 15px rgba(0,0,0,0.7);
    transition: all 0.2s ease;
    z-index: 9999;
}
.music-toggle:hover {
    background: #2a2a30;
    box-shadow: 0 0 20px var(--magic-glow);
    transform: translateY(-2px);
    color: #fff;
}
.music-toggle.muted { opacity: 0.7; filter: grayscale(1); }

.to-top {
  position: fixed;
  bottom: calc(var(--fab-bottom) + 2px); 
  right: calc(var(--fab-right) + 48px + var(--fab-gap));
  width: 44px;
  height: 44px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.1);
  background: #151518; /* Sólido */
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 900;
  cursor: pointer;
  z-index: 9999;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, border-color .18s ease;
}
.to-top:hover {
  border-color: var(--gold-main);
  box-shadow: 0 0 15px var(--magic-glow);
}
.to-top.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.to-top::before {
  content: ''; width: 10px; height: 10px;
  border-top: 3px solid var(--gold-main);
  border-left: 3px solid var(--gold-main);
  transform: rotate(45deg); margin-top: 4px;
}

@media (max-width: 640px) { :root { --fab-right: 14px; --fab-bottom: 72px; } }

/* =========================
   HEADER / NAVBAR
========================= */
header {
    height: 80px; 
    padding: 0 32px;
    background: #0b0c10;
    
    display: flex;
    align-items: center;
    justify-content: center; /* Centraliza o menu na tela */
    
    position: relative; 
    border-bottom: 1px solid rgba(197, 160, 89, 0.2);
    box-shadow: 0 5px 20px rgba(0,0,0,0.8);
    z-index: 100;
}

/* Container */
nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px; 
    height: 100%; 
}

/* ANIMAÇÃO APENAS PARA O HOVER (FOGO/ELETRICIDADE) */
@keyframes arcaneBurn {
    0% {
        box-shadow: 0 0 10px rgba(197, 160, 89, 0.3), inset 0 0 5px rgba(197, 160, 89, 0.1);
        border-color: var(--gold-dim);
    }
    50% {
        box-shadow: 
            0 0 25px rgba(255, 140, 0, 0.6),
            0 0 45px rgba(197, 160, 89, 0.4),
            inset 0 0 20px rgba(255, 140, 0, 0.2);
        border-color: #ffdf9f;
        text-shadow: 0 0 8px #ffdf9f;
    }
    100% {
        box-shadow: 0 0 10px rgba(197, 160, 89, 0.3), inset 0 0 5px rgba(197, 160, 89, 0.1);
        border-color: var(--gold-dim);
    }
}

/* Estilo Base dos Botões */
nav a {
    width: 140px;  
    height: 70px;  
    
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    
    background: linear-gradient(180deg, #1f1f25 0%, #0b0c10 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 2px;
    
    text-decoration: none;
    color: #a0a0a5;
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden; 
}

/* === INTERAÇÕES === */

/* 1. HOVER: Mantém a animação pulsante (loop) */
nav a:hover {
    color: #fff;
    background: linear-gradient(180deg, #2a2a30 0%, #151518 100%);
    animation: arcaneBurn 1s infinite ease-in-out; /* Animação viva */
    transform: translateY(-1px);
    z-index: 10;
}

/* 2. ACTIVE: Estático e Aceso (Sem loop, travado no brilho) */
nav a.active {
    color: #fff;
    /* Fundo levemente diferenciado para indicar seleção */
    background: linear-gradient(180deg, #352a18 0%, #1a150a 100%);
    
    /* Estado "Final" da animação (Aceso e Estável) */
    border-color: #ffdf9f;
    box-shadow: 
        0 0 20px rgba(255, 140, 0, 0.5),   /* Glow Laranja Estático */
        0 0 35px rgba(197, 160, 89, 0.3),  /* Glow Dourado Estático */
        inset 0 0 15px rgba(255, 140, 0, 0.15);
    
    text-shadow: 0 0 8px #ffdf9f;
    transform: translateY(1px); /* Levemente pressionado */
    opacity: 1;
    z-index: 5;
}

/* Responsivo */
@media (max-width: 1100px) {
    header { height: auto; flex-direction: column; padding: 15px; gap: 15px; }
    nav { flex-wrap: wrap; height: auto; }
    nav a { width: 110px; height: 50px; font-size: 11px; }
}

/* =========================
   MAIN / HERO
========================= */
main { padding: 10px 20px; }

mainregister {
  min-height: 100vh;
  padding: 5px 5px;      
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translateY(-28px); 
}

.hero h2 {
    font-size: 36px;
    margin-bottom: 16px;
    color: #ffffff;
    text-shadow: 0 0 10px rgba(197, 160, 89, 0.5), 0 0 20px rgba(0, 0, 0, 0.8);
}

.hero p {
    font-size: 16px;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
    color: #cfd6ff;
    text-shadow: 0 1px 2px #000;
}

form { margin: 60px auto; }

/* =========================
   USER PANEL
========================= */
.panel {
    max-width: 900px;
    margin: 60px auto;
    padding: 32px;
    /* Fundo Sólido */
    background: var(--bg-card-solid);
    border: 1px solid rgba(197, 160, 89, 0.1);
    border-radius: 4px;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.8), 0 20px 60px rgba(0,0,0,0.9);
}

.panel h2 {
    margin-bottom: 12px;
    color: var(--gold-main);
    border-bottom: 1px solid rgba(197, 160, 89, 0.1);
    padding-bottom: 10px;
}
.panel p { color: #a0a0a5; }

.panel a {
    display: inline-block;
    margin-top: 14px; margin-right: 14px;
    color: var(--gold-dim); text-decoration: none;
    font-size: 14px; font-weight: 600;
}
.panel a:hover { color: var(--gold-main); text-shadow: 0 0 8px rgba(197, 160, 89, 0.4); }

/* =========================
   PANEL GRID
========================= */
.panel-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
}

/* =========================
   PANEL CARD
========================= */
.panel-card {
    border-radius: 4px;
    padding: 24px;
    
    /* ALTERADO: Fundo sólido */
    background: var(--bg-card-solid);
    
    border: 1px solid rgba(255,255,255,0.05);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    transition: transform 0.2s, border-color 0.2s;
}

.panel-card:hover {
    border-color: rgba(197, 160, 89, 0.3);
    transform: translateY(-2px);
}

.panel-card h3 {
    margin-top: 0; margin-bottom: 16px;
    font-size: 18px; color: #e0e0e0;
}

.panel-card p { font-size: 14px; margin: 6px 0; color: #a0a0a5; }
.panel-full { grid-column: 1 / -1; }

/* =========================
   PANEL IMAGE
========================= */
.panel-image { margin-top: 18px; display: flex; justify-content: center; }

.panel-image img {
    width: 100%; max-width: 420px; height: auto;
    border-radius: 4px;
    border: 1px solid rgba(197, 160, 89, 0.2);
    box-shadow: 0 15px 40px rgba(0,0,0,0.8), inset 0 0 0 1px rgba(0,0,0,0.5);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s;
}

.panel-image img:hover {
    transform: scale(1.02);
    border-color: var(--gold-main);
    box-shadow: 0 20px 50px rgba(0,0,0,0.9), 0 0 20px rgba(197, 160, 89, 0.2);
}

@media (max-width: 520px) { .panel-image img { max-width: 100%; } }

/* =========================
   ACTIONS
========================= */
.panel-actions { margin-top: 16px; }

.panel-actions .btn {
    display: inline-block;
    padding: 10px 16px;
    background: linear-gradient(180deg, #2a2a30, #151518);
    border: 1px solid #3a3a40;
    border-radius: 4px;
    color: #fff;
    text-decoration: none;
    font-size: 13px; font-weight: 600;
    font-family: 'Cinzel', serif;
}

.panel-actions .btn:hover {
    border-color: var(--gold-dim);
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    color: var(--gold-main);
}

/* =========================
   STATUS
========================= */
.status { font-weight: 600; font-family: 'Cinzel', serif; }
.status.online { color: #4cff9a; text-shadow: 0 0 8px rgba(76,255,154,0.4); }
.status.offline { color: #ff5555; text-shadow: 0 0 8px rgba(255,85,85,0.4); }

/* =========================
   MINI METRICS
========================= */
.mini-metrics {
    margin-top: 14px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.mini-metric {
    /* ALTERADO: Fundo sólido mais escuro (inset) */
    background: var(--bg-inner-solid);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 4px;
    padding: 12px 14px;
}

.mini-metric .label {
    display: block; font-size: 11px; color: #888;
    text-transform: uppercase; margin-bottom: 6px; font-family: 'Cinzel', serif;
}
.mini-metric .value {
    display: block; font-size: 18px; font-weight: 800;
    color: var(--gold-main); letter-spacing: 0.5px;
}
@media (max-width: 820px) { .mini-metrics { grid-template-columns: 1fr; } }

/* =========================
   TABLE
========================= */
.panel-table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 13px; }
.panel-table th, .panel-table td { padding: 10px; border-bottom: 1px solid rgba(255,255,255,0.05); }
.panel-table th { color: var(--gold-dim); text-align: left; font-family: 'Cinzel', serif; font-size: 11px; text-transform: uppercase; }
.panel-table td { color: #ccc; }

/* =========================
   PANEL FORM
========================= */
.panel-form { display: flex; flex-direction: column; }
.panel-form label { font-size: 13px; margin: 10px 0 4px; color: #aaa; }
.panel-form input {
    background: var(--bg-inner-solid); /* Sólido */
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 4px; padding: 12px; color: #fff;
}

/* =========================
   MESSAGES
========================= */
.msg {
    margin-top: 14px; padding: 10px; border-radius: 4px;
    font-size: 13px; text-align: center; border: 1px solid transparent;
}
.msg.success { background: #0f2b1a; color: #4cff9a; border-color: rgba(76,255,154,0.2); }
.msg.error { background: #2b0f0f; color: #ff7d7d; border-color: rgba(255,125,125,0.2); }

/* =========================
   SECURITY LIST
========================= */
.security-list { margin: 12px 0 0; padding-left: 18px; font-size: 13px; color: #a0a0a5; }
.security-list li { margin-bottom: 6px; }

/* =========================
   NAV BADGE
========================= */
.nav-badge {
    margin-left: 18px; font-size: 11px; font-weight: 700; color: #000;
    padding: 4px 8px; border-radius: 2px;
    background: var(--gold-main); border: 1px solid var(--gold-dim);
    white-space: nowrap; box-shadow: 0 0 10px rgba(197, 160, 89, 0.4);
}

/* =========================
   RANK TABLE
========================= */
.rank-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.rank-table th, .rank-table td { padding: 8px; border-bottom: 1px solid rgba(255,255,255,0.05); }
.rank-table th { color: var(--gold-dim); text-align: left; font-weight: 600; font-family: 'Cinzel', serif; }
.rank-table td { color: #ccc; }

/* =========================
   RANKING UNIFICADO
========================= */
.rank-unified th, .rank-unified td { text-align: center; }
.rank-unified th:nth-child(2), .rank-unified td:nth-child(2) { text-align: left; }
.rank-unified .pvp { color: #4cff9a; font-weight: 600; text-shadow: 0 0 5px rgba(76,255,154,0.3); }
.rank-unified .pk { color: #ff5555; font-weight: 600; text-shadow: 0 0 5px rgba(255,85,85,0.3); }

/* =========================
   CHAR GRID
========================= */
.char-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px; margin-top: 16px;
}

.char-tile {
    all: unset; cursor: pointer;
    display: flex; align-items: center; gap: 14px;
    /* ALTERADO: Fundo Sólido */
    background: var(--bg-card-solid);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 4px; padding: 12px 14px;
    transition: all .2s ease;
}

.char-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(0,0,0,0.6);
    border-color: var(--gold-main);
    background: #1f1f25; /* Ligeiramente mais claro no hover */
}

.char-icon {
    width: 64px; height: 64px; flex-shrink: 0;
    border-radius: 4px; border: 1px solid #444; background: #000; object-fit: cover;
}

.char-meta { flex: 1; min-width: 0; }
.char-name {
    display: flex; align-items: center; gap: 8px;
    font-weight: 700; color: #fff; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; font-family: 'Cinzel', serif;
}
.char-sub { margin-top: 6px; font-size: 13px; color: #888; opacity: .9; }
.dot { width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 5px rgba(0,0,0,0.5); }
.dot.on  { background:#4cff9a; box-shadow:0 0 8px rgba(76,255,154,.6); }
.dot.off { background:#ff5555; box-shadow:0 0 8px rgba(255,85,85,.5); }

/* =========================
   MODAL BASE
========================= */
.modal-open { overflow: hidden; }
.char-modal { position: fixed; inset: 0; z-index: 9999; }
.char-modal[aria-hidden="true"] { display: none; }
.char-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.9); backdrop-filter: blur(4px); }

.char-modal-card {
    position: relative; max-width: 760px; max-height: 86vh; margin: 6vh auto;
    display: flex; flex-direction: column;
    /* Sólido */
    background: #151518;
    border-radius: 6px; border: 1px solid var(--gold-dim);
    box-shadow: 0 0 0 1px #000, 0 40px 120px rgba(0,0,0,.95);
    overflow: hidden;
}

.char-modal-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 18px; border-bottom: 1px solid rgba(197, 160, 89, 0.2);
    background: #0b0c10;
}
.char-modal-head h4 { margin: 0; font-size: 18px; color: var(--gold-main); font-family: 'Cinzel', serif; }

.char-close {
    width: 36px; height: 36px; border-radius: 4px;
    border: 1px solid rgba(255,255,255,0.1);
    background: #2a2a30; color: #fff; font-size: 20px;
    cursor: pointer; transition: background .15s;
}
.char-close:hover { background: #3a1111; border-color: #ff5555; }
.char-modal-body { padding: 18px; overflow-y: auto; }

.char-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.char-table th, .char-table td { padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,0.05); vertical-align: top; }
.char-table th { width: 38%; text-align: left; font-weight: 700; color: var(--gold-dim); font-family: 'Cinzel', serif; }
.char-table td { color: #cfd6ff; word-break: break-word; }

.char-modal-actions { display: flex; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.char-modal-actions .btn { padding: 10px 16px; }
.btn.ghost { background: transparent; border: 1px solid rgba(255,255,255,0.14); }
.btn.ghost:hover { border-color: var(--gold-main); color: var(--gold-main); }

@media (max-width: 720px) {
    .char-modal-card { margin: 0; height: 100vh; max-height: 100vh; border-radius: 0; }
    .char-modal-body { padding: 14px; }
    .char-table th { width: 44%; }
}

/* =========================
   HERO / HOME
========================= */
.hero {
    max-width: 1100px; margin: 0 auto; padding: 80px 40px;
    /* Hero background texturizado ou solido se preferir */
    background: #111;
    border-radius: 4px; border: 1px solid rgba(197, 160, 89, 0.15);
    box-shadow: 0 30px 80px rgba(0,0,0,0.8); text-align: center;
}

.hero-home .hero-inner { max-width: 1050px; margin: 0 auto; }

.hero-badge {
  display: inline-block; padding: 6px 12px; border-radius: 2px;
  background: #000; border: 1px solid var(--gold-dim);
  color: var(--gold-main); margin-bottom: 10px;
  font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; font-size: 11px;
}

.hero-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top: 14px; }

.btn { 
    display:inline-flex; align-items:center; justify-content:center; 
    padding: 10px 14px; border-radius: 4px; text-decoration:none; 
    border: 1px solid rgba(255,255,255,.10); font-family: 'Cinzel', serif;
    text-transform: uppercase; font-size: 12px; letter-spacing: 1px;
}
.btn.primary { 
    font-weight: 800; border-color: var(--gold-dim); color: #fff;
    background: linear-gradient(180deg, #8a6e3e, #5e4b2a);
}

.hero-mini { display:flex; gap:12px; flex-wrap:wrap; margin-top: 18px; }

.hero-mini-item {
  padding: 10px 12px;
  border-radius: 4px;
  /* ALTERADO: Fundo Sólido */
  background: var(--bg-card-solid);
  border: 1px solid rgba(255,255,255,0.1);
}
.hero-mini-item .k { display:block; font-weight: 800; opacity: .9; color: var(--gold-main); }
.hero-mini-item .v { display:block; opacity: .8; margin-top: 2px; }

.home-grid {
  display:grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px; padding: 18px 0;
}
@media (max-width: 980px){ .home-grid { grid-template-columns: 1fr; } }

.feature-list { margin: 10px 0 0; padding-left: 18px; }
.feature-list li { margin: 6px 0; opacity: .92; color: #ccc; }
.steps { margin: 10px 0 0; padding-left: 18px; }
.steps li { margin: 6px 0; opacity: .92; }
.muted { opacity: .75; }

.status-box {
  margin-top: 10px; padding: 12px; border-radius: 4px;
  /* ALTERADO: Fundo Sólido (Item Interno) */
  background: var(--bg-inner-solid);
  border: 1px solid rgba(255,255,255,0.06);
}
.status-row { display:flex; justify-content:space-between; padding: 6px 0; }
.status-row .label { opacity: .75; font-family: 'Cinzel', serif; }
.status-row .value { font-weight: 800; color: var(--gold-main); }

.news-list { margin-top: 10px; display:flex; flex-direction:column; gap: 10px; }

.news-item {
  padding: 10px 12px; border-radius: 4px;
  /* ALTERADO: Fundo Sólido (Item Interno) */
  background: var(--bg-inner-solid);
  border: 1px solid rgba(255,255,255,0.07);
  transition: border-color 0.2s;
}
.news-item:hover { border-color: var(--gold-dim); }

.news-title { font-weight: 900; color: #e0e0e0; }
.news-meta { opacity: .7; font-size: 12px; margin-top: 4px; color: var(--gold-dim); }
.news-summary{ opacity:.85; font-size:13px; margin-top:6px; line-height:1.35; color: #aaa; }

.community { padding: 6px 0 18px; }
.community-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top: 10px; }
.panel-full { grid-column: 1 / -1; }

.hero.hero-home {
    background: linear-gradient(180deg, rgba(0,0,0,0.0), rgba(0,0,0,0.2)), 
                url("../img/fundo memory.png") center 15% / cover no-repeat, 
                #0b0f1a;
    width: 100%; max-width: 100%; margin: 0; border-radius: 0;
    height: 750px;
    display: flex; align-items: center; justify-content: center;
    position: relative; z-index: 1;
}

main { position: relative; z-index: 2; margin-top: -200px; padding: 10px 20px; }

@media (max-width: 900px) {
    .hero.hero-home { height: 500px; }
    main { margin-top: -150px; }
}
@media (max-width: 600px) {
  .hero.hero-home { height: 280px; }
}

.hero.hero-home h2 {
  text-shadow: 0 0 18px rgba(255, 94, 0, 0.45), 0 0 36px rgba(255, 38, 0, 0.25);
}

.hero-info { padding: 26px 16px 10px; background: transparent; position: relative; }
.hero-info-inner { max-width: 1050px; margin: 0 auto; }
.hero-description { margin: 10px 0 14px; max-width: 780px; opacity: 0.85; }
.hero-info .hero-mini { margin-top: 14px; }
.hero-info::before {
  content: ""; position: absolute; top: -40px; left: 0; right: 0; height: 40px;
  background: transparent;
}

.btn { gap: 15px; }
.btn svg { flex: 0 0 auto; opacity: 0.95; }

/* ===============================
   COMMUNITY BUTTONS (MMORPG)
================================ */
.community-actions--mmorpg{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
@media (max-width: 900px){ .community-actions--mmorpg{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px){ .community-actions--mmorpg{ grid-template-columns: 1fr; } }

.soc-btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 44px; padding: 0 14px; border-radius: 4px;
  text-decoration: none; font-weight: 800; letter-spacing: .3px;
  color: rgba(255,255,255,0.88);
  /* Sólido */
  background: var(--bg-card-solid);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 5px 15px rgba(0,0,0,0.35);
  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.soc-btn svg{ width: 18px; height: 18px; opacity: .92; }
.soc-btn:hover{
  transform: translateY(-2px);
  background: #222; border-color: var(--gold-dim);
  box-shadow: 0 10px 20px rgba(0,0,0,0.5);
}
.soc-btn:focus-visible{ outline: none; box-shadow: 0 0 0 3px rgba(197, 160, 89, 0.25), 0 16px 40px rgba(0,0,0,0.45); }
.soc-discord { border-color: rgba(114, 137, 218, 0.3); }
.soc-whatsapp{ border-color: rgba(37, 211, 102, 0.3); }
.soc-facebook{ border-color: rgba(255,255,255,0.12); } 
.soc-btn.is-primary{
  background: linear-gradient(180deg, rgba(197, 160, 89, 0.15), rgba(0,0,0,0.2));
  border-color: var(--gold-dim); color: #ffdf9f;
}
.soc-btn.is-primary:hover{
  background: linear-gradient(180deg, rgba(197, 160, 89, 0.25), rgba(0,0,0,0.25));
  border-color: var(--gold-main);
}

/* =========================
   SUFIXO TOGGLE
========================= */
.suffix-toggle{ display: flex; align-items: center; gap: 10px; margin: 14px 0 6px; font-size: 13px; font-weight: 700; color: #a0a0a5; cursor: pointer; }
.suffix-toggle input{ width: 16px; height: 16px; accent-color: var(--gold-main); }
.suffix-row{ margin-bottom: 6px; opacity: 0; max-height: 0; overflow: hidden; transition: all .25s ease; }
.suffix-row.active{ opacity: 1; max-height: 80px; }
.suffix-select{
  width: 100%; height: 46px; border-radius: 4px; padding: 0 40px 0 14px; font-weight: 800;
  border: 1px solid rgba(255,255,255,0.12);
  background-color: var(--bg-inner-solid); /* Sólido */
  color: rgba(255,255,255,0.92);
  appearance: none;
}
.suffix-select:disabled{ opacity: .5; }
.login-hint{ margin-top: 10px; text-align: center; font-size: 12px; opacity: 0; max-height: 0; overflow: hidden; transition: opacity .25s ease, max-height .25s ease; }
.login-hint.active{ opacity: .8; max-height: 40px; }

/* =========================
   SIEGE GRID
========================= */
.siege-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; width: 100%; }

.siege-card{
  /* ALTERADO: Fundo Sólido */
  background: var(--bg-card-solid);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 4px; padding: 14px;
  box-shadow: 0 12px 34px rgba(0,0,0,0.35);
  transition: border-color 0.2s;
}
.siege-card:hover { border-color: var(--gold-dim); }

.siege-card h3{ margin: 0 0 10px 0; font-size: 16px; letter-spacing: .3px; color: var(--gold-main); font-family: 'Cinzel', serif; }
.siege-meta{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }

.siege-meta .item{
  /* Fundo Interno Sólido */
  background: var(--bg-inner-solid);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 4px; padding: 10px 12px;
}
.siege-meta .k{ display:block; font-size: 11px; opacity: .75; text-transform: uppercase; color: #888; }
.siege-meta .v{ display:block; font-weight: 800; margin-top: 2px; color: #ddd; }

.siege-registrations{ margin-top: 10px; }
.siege-registrations .title{ font-size: 12px; opacity: .8; margin-bottom: 8px; display:flex; justify-content: space-between; align-items:center; }
.clan-list{ display: grid; gap: 8px; }

.clan-row{
  display:flex; justify-content: space-between; align-items:center; gap: 10px;
  padding: 10px 12px; border-radius: 4px;
  /* Fundo Interno Sólido */
  background: var(--bg-inner-solid);
  border: 1px solid rgba(255,255,255,0.04);
}
.clan-name{ font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
.clan-badge{ font-size: 11px; padding: 4px 8px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.12); opacity: .9; font-weight: 600; }
.badge-attacker{ background: rgba(255,80,80,0.08); color: #ff8888; border-color: rgba(255,80,80,0.2); }
.badge-defender{ background: rgba(120,150,255,0.08); color: #88aaff; border-color: rgba(120,150,255,0.2); }
.badge-owner{ background: rgba(255,200,90,0.08); color: #ffdd88; border-color: rgba(255,200,90,0.2); }
.siege-empty{ padding: 10px 12px; border-radius: 4px; background: var(--bg-inner-solid); border: 1px solid rgba(255,255,255,0.04); opacity: .6; font-size: 13px; font-style: italic; }

.clan-more{
  margin-top: 10px; width: 100%; padding: 10px 12px; border-radius: 4px; cursor: pointer;
  background: var(--bg-inner-solid); border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.8); font-weight: 700; font-size: 12px;
}
.clan-more:hover{ border-color: var(--gold-dim); color: #fff; }
.clan-list.is-hidden{ display: none; margin-top: 10px; }
.clan-list{ max-height: 260px; overflow: auto; padding-right: 4px; }


/* =========================
   DOWNLOAD PAGE (EXCLUSIVO)
========================= */
.download-wrap { width: 100%; display: flex; flex-direction: column; gap: 22px; }
.download-header h2 { margin: 0; font-size: 22px; color: var(--gold-main); font-family: 'Cinzel', serif; }
.download-header p { opacity: .8; margin-top: 6px; max-width: 720px; }
.download-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }

.download-card {
  /* ALTERADO: Fundo Sólido */
  background: var(--bg-card-solid);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 4px; padding: 16px;
  display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.35);
  transition: all 0.2s ease;
}
.download-card:hover { border-color: var(--gold-dim); transform: translateY(-2px); }
.download-card.is-primary {
  border-color: var(--gold-dim);
  background: linear-gradient(180deg, #1f1a10, #151518);
  box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}

.download-card-head { display: flex; align-items: center; gap: 10px; }
.download-icon { font-size: 20px; color: var(--gold-main); }
.download-title { font-weight: 800; font-size: 15px; color: #fff; }
.download-desc { opacity: .85; font-size: 14px; line-height: 1.4; color: #aaa; }
.download-meta { display: flex; justify-content: space-between; font-size: 12px; opacity: .75; }

.download-btn {
  margin-top: auto; text-align: center; padding: 12px; border-radius: 4px;
  font-weight: 800; text-decoration: none;
  background: linear-gradient(180deg, #8a6e3e, #5e4b2a);
  color: #fff; border: 1px solid #4a3b22;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.download-btn:hover {
  transform: translateY(-2px); box-shadow: 0 14px 34px rgba(0,0,0,0.45);
  background: linear-gradient(180deg, #a88a52, #755e35); color: #fff;
}

.download-box {
  background: rgba(0,0,0,0.25); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 4px; padding: 16px;
}
.download-box h3 { margin: 0 0 10px; color: var(--gold-main); font-family: 'Cinzel', serif; font-size: 16px; }
.download-steps { padding-left: 18px; line-height: 1.6; opacity: .9; color: #ccc; }

.download-reqs { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.download-req {
  display: block; padding: 12px; border-radius: 4px;
  background: var(--bg-inner-solid);
  border: 1px solid rgba(255,255,255,0.08); text-decoration: none; color: inherit;
}
.download-req:hover { border-color: var(--gold-dim); }
.download-notes { padding-left: 18px; opacity: .85; }

.download-support { display: flex; gap: 12px; flex-wrap: wrap; }
.support-btn {
  padding: 12px 18px; border-radius: 4px; font-weight: 800; text-decoration: none;
  background: var(--bg-card-solid); border: 1px solid rgba(255,255,255,0.1); color: #fff;
}
.support-btn.primary { background: rgba(197, 160, 89, 0.2); border-color: var(--gold-dim); color: var(--gold-main); }
.support-btn:hover { box-shadow: 0 10px 28px rgba(0,0,0,0.45); border-color: #fff; }
@media (max-width: 640px) { .download-header h2 { font-size: 18px; } }


/* =========================
   BOSS PAGE
========================= */
.boss-header{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:10px; }
.boss-header h3{ margin:0; color: var(--gold-main); font-family: 'Cinzel', serif; }

.boss-search{
  width:min(360px, 100%); height:42px; padding:0 12px; border-radius:4px;
  background: var(--bg-inner-solid); /* Sólido */
  border:1px solid rgba(255,255,255,0.12); color: #fff; font-weight:800; outline:none;
}
.boss-search:focus{ border-color: var(--gold-main); box-shadow: 0 0 0 3px rgba(197, 160, 89, 0.15); }
.boss-list{ display:flex; flex-direction:column; gap:10px; }

.boss-row{
  /* ALTERADO: Fundo Sólido */
  background: var(--bg-card-solid);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 4px; padding: 12px 14px; transition: all 0.2s;
}
.boss-row:hover { border-color: var(--gold-dim); background: #1f1f25; }

.boss-main{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.boss-title{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.boss-name{ font-weight:900; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color: #fff; font-family: 'Cinzel', serif; }
.boss-sub{ display:flex; align-items:center; gap:10px; font-size:12px; opacity:.78; }
.boss-right{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.boss-chip{
  font-size:11px; font-weight:900; padding:5px 10px; border-radius:999px;
  border:1px solid rgba(255,255,255,0.12); background: var(--bg-inner-solid);
  opacity:.95; text-transform: uppercase; letter-spacing: 0.5px;
}
.boss-chip.alive{ background: rgba(60,200,120,0.1); color:#7dffb3; border-color: rgba(60,200,120,0.25); }
.boss-chip.dead{ background: rgba(200,60,60,0.1); color:#ff9a9a; border-color: rgba(200,60,60,0.25); }
.boss-chip.respawn{ background: rgba(255,170,60,0.1); color:#ffd19a; border-color: rgba(255,170,60,0.25); }
.boss-chip.countdown{ background: rgba(120, 150, 255, 0.1); border-color: rgba(120, 150, 255, 0.25); color: #aaccff; }

.boss-extra{ margin-top:10px; padding-top:10px; border-top:1px solid rgba(255,255,255,0.08); opacity:.9; font-size:13px; display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:10px; }
.boss-box{
  background: var(--bg-inner-solid);
  border: 1px solid rgba(255,255,255,0.05); border-radius: 4px; padding: 10px 12px;
}
.boss-box .k{ display:block; opacity:.75; font-size:11px; text-transform:uppercase; color:#888; }
.boss-box .v{ display:block; font-weight:900; margin-top:4px; color:#ddd; }

.boss-pager{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:12px; flex-wrap:wrap; }
.boss-pager .info{ opacity:.75; font-size:12px; }
.boss-btn{
  padding:10px 12px; border-radius:4px; cursor:pointer; font-weight:700;
  border:1px solid rgba(255,255,255,0.1);
  background: var(--bg-card-solid); color: rgba(255,255,255,0.9); white-space: nowrap; 
}
.boss-btn:hover { border-color: var(--gold-dim); color: #fff; }
.boss-btn:disabled{ opacity:.45; cursor:not-allowed; }
.boss-chip.sleeping { background: rgba(120,120,255,0.1); color: #aab6ff; border: 1px solid rgba(120,120,255,0.2); }
@media (max-width: 640px){ .boss-main{ flex-direction:column; align-items:flex-start; } .boss-right{ justify-content:flex-start; } }

/* =========================
   FOOTER
========================= */
footer {
    margin-top: 5px; padding: 20px; text-align: center; font-size: 11px; color: #555;
    border-top: 1px solid rgba(255,255,255,0.05); background: #030303;
    font-family: 'Cinzel', serif; text-transform: uppercase; letter-spacing: 1px;
}