/* ============================
   CONTAINER PRINCIPAL DO SLIDER
   ============================ */
.slider-container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 24px;
  padding: 24px 0;
  background: #000000; /* Fundo preto puro */
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(156, 108, 63, 0.6); /* Sombra bronze antigo */
  color: #FFFFFF; /* Texto branco */
}

/* =====================
   VIDEO E SLIDER BASE
   ===================== */
.video-container,
.slider {
  flex: 1;
  max-width: 580px;
  border: 2px solid #9C6C3F; /* Borda bronze antigo */
  border-radius: 16px;
  overflow: hidden;
  background: #000000; /* Fundo preto puro */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  min-height: 360px;
  color: #FFFFFF; /* Texto branco */
}

/* LOGO */
.logo-img {
  max-width: 350px;
  height: auto;
  display: block;
  filter: drop-shadow(0 0 5px #B88A51); /* sombra dourado envelhecido */
}

/* IFRAME DO VÍDEO */
.video-container iframe {
  width: 100%;
  height: 175px;
  border: none;
  border-radius: 16px 16px 0 0;
  flex-shrink: 0;
}

/* SLIDES (IMAGENS DO SLIDER) */
.slider .slides {
  flex-grow: 1;
  display: flex;
  width: 900%; /* 9 imagens no total */
  transition: transform 0.5s ease;
}

.slider .slides img {
  width: calc(100% / 9);
  height: auto;
  user-select: none;
}

/* =====================
   BOTÕES DE NAVEGAÇÃO
   ===================== */
.nav-buttons {
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: 12px 0;
}

.nav-buttons button {
  background-color: #9C6C3F; /* Bronze antigo */
  border: none;
  color: #000000; /* Preto para contraste */
  padding: 8px 18px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 700;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.nav-buttons button:hover {
  background-color: #B88A51; /* Dourado envelhecido */
  box-shadow: 0 0 12px #B88A51;
  color: #fff;
}

/* ====================
   SUBMENU E BOTÕES
   ==================== */
.submenu {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 32px;
  padding: 5px;
  background: #000000; /* Fundo preto puro */
  border-top: 1px solid #9C6C3F; /* Bronze antigo */
  width: 100%;
  box-sizing: border-box;
  color: #FFFFFF;
}

.submenu button,
.nav-buttons button {
  background: rgba(156, 108, 63, 0.85); /* Bronze antigo translúcido */
  border: none;
  color: #000000;
  font-weight: 700;
  font-size: 16px;
  padding: 10px 20px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  line-height: normal;
  text-transform: uppercase;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.submenu button:hover,
.nav-buttons button:hover {
  background: #B88A51; /* Dourado envelhecido */
  color: #fff;
  box-shadow: 0 0 15px #B88A51;
  transform: scale(1.05);
}

/* ======================
   MENU PRINCIPAL
   ====================== */
#menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  height: 70px;
  background: #000000; /* Fundo preto puro */
  font-family: 'Montserrat', sans-serif;
  user-select: none;
  border-radius: 16px;
  box-shadow: 0 2px 6px rgba(156, 108, 63, 0.7); /* Bronze antigo */
  color: #FFFFFF;
}

#menu li {
  position: relative;
}

#menu li a {
  color: #FFFFFF;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 13px;
  line-height: 25px;
  padding: 14px 24px;
  display: block;
  background: rgba(156, 108, 63, 0.25); /* Bronze antigo translúcido */
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.1);
  text-decoration: none;
  transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
  white-space: nowrap;
}

#menu li a:hover,
#menu li:hover > a {
  background: #9C6C3F; /* Bronze antigo */
  color: #000000;
  box-shadow: 0 0 15px #9C6C3F;
}

/* ======================
   SUBMENU DO MENU PRINCIPAL
   ====================== */
#menu li ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #000000;
  padding: 0;
  list-style: none;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(156, 108, 63, 0.5);
  min-width: 180px;
  z-index: 9999;
}

#menu li:hover ul {
  display: block;
}

#menu li ul li {
  display: block;
}

#menu li ul li a {
  padding: 12px 20px;
  font-size: 13px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  color: #FFFFFF;
}

#menu li ul li a:hover {
  background: #9C6C3F; /* Bronze antigo */
  color: #000000;
  box-shadow: none;
}

/* ======================
   BOTÃO DE DOWNLOAD
   ====================== */
#menu-download {
  position: relative;
  display: inline-block;
  padding: 14px 40px;
  font-size: 18px;
  font-weight: 700;
  color: #000000;
  background: linear-gradient(90deg, #9C6C3F, #B88A51);
  border-radius: 16px;
  box-shadow:
    0 0 20px #B88A51cc,
    inset 0 0 25px #9C6C3Fcc;
  text-shadow: none;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  overflow: hidden;
  user-select: none;
  white-space: nowrap;
  transition: color 0.3s ease, box-shadow 0.3s ease;
  will-change: color, box-shadow;
}

#menu-download::before,
#menu-download::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 20px;
  background: radial-gradient(circle at top, #9C6C3Fcc, #B88A51cc 70%);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  opacity: 0.7;
  animation: lavaDrop 3s linear infinite;
  filter: drop-shadow(0 0 4px #B88A51cc);
  pointer-events: none;
}

#menu-download::before {
  top: -20px;
  left: 20%;
  animation-delay: 0s;
}

#menu-download::after {
  top: -25px;
  left: 60%;
  animation-delay: 1.5s;
}

@keyframes lavaDrop {
  0% {
    transform: translateY(0) scale(1);
    opacity: 0.7;
  }
  80% {
    opacity: 0.9;
  }
  100% {
    transform: translateY(35px) scale(0.6);
    opacity: 0;
  }
}

/* ======================
   BARRAS DE FACÇÃO
   ====================== */
.faction-bar-container {
  max-width: 400px;
  margin: 15px auto;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: #FFFFFF;
  text-align: center;
  font-size: 16px;
}

.faction-bar-wrapper {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.faction-bar {
  height: 28px;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  font-weight: 700;
  font-size: 16px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  white-space: nowrap;
  text-transform: uppercase;
}

.faction-bar.light {
  background-color: #B88A51; /* Dourado envelhecido */
  width: <?= $percentLight ?>%;
  justify-content: flex-start;
  color: #000000;
}

.faction-bar.dark {
  background-color: #665500;
  width: <?= $percentDark ?>%;
  justify-content: flex-end;
  color: #000000;
}

/* ======================
   CLASSES (Itens/Personagens)
   ====================== */
.class-bar-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.class-bar-item {
  flex: 0 0 auto;
  border-radius: 6px;
  padding: 8px 14px;
  font-size: 1rem;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 100px;
  justify-content: center;
  user-select: none;
}

.light {
  background-color: #665500;
  color: #f0e6c8;
}

.dark {
  background-color: #B88A51;
  color: #f0e6c8;
}

.class-bar-item .emoji {
  font-size: 1.5rem;
}

.class-bar-item .class-name,
.class-bar-item .class-count {
  font-weight: 700;
}

/* ======================
   RESPONSIVIDADE
   ====================== */
@media (max-width: 768px) {
  .slider-container {
    flex-direction: column;
    gap: 16px;
  }

  .video-container,
  .slider {
    max-width: 100%;
  }

  .submenu {
    flex-wrap: wrap;
  }
}

@media (max-width: 700px) {
  #menu {
    flex-wrap: wrap;
    height: auto;
    gap: 8px;
    padding: 12px 0;
    font-size: 15px;
  }

  #menu li a {
    padding: 12px 20px;
    font-size: 14px;
    line-height: 22px;
  }

  #menu-download {
    padding: 14px 36px;
    font-size: 18px;
  }

  .submenu,
  .submenu button,
  .nav-buttons button {
    font-size: 16px;
  }

  .faction-bar {
    height: 24px;
    font-size: 14px;
    padding: 0 8px;
  }

  .class-bar-item {
    font-size: 0.9rem;
    padding: 6px 12px;
    min-width: 90px;
    gap: 6px;
  }

  .class-bar-item .emoji {
    font-size: 1.3rem;
  }
}

/* ======================
   CARTÃO DE INFORMAÇÕES
   ====================== */
.info-card1 {
  background-color: #1e1e2f;
  color: #eee;
  border-radius: 8px;
  padding: 20px;
  max-width: 576px;
  font-family: 'Cinzel Decorative', serif;
  box-shadow: 0 4px 10px rgba(0,0,0,0.4);
  margin-bottom: 20px;
}

.info-card1 h2 {
  margin-bottom: 15px;
  font-weight: 700;
  font-size: 1.6rem;
  color: #9C6C3F; /* bronze antigo para destaque */
}

/* ======================
   ACORDION
   ====================== */
.accordion {
  margin-bottom: 10px;
}

.accordion-button {
  background-color: #292942;
  color: #9C6C3F;
  cursor: pointer;
  padding: 12px 15px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 1.1rem;
  border-radius: 5px;
  transition: background-color 0.3s ease;
  user-select: none;
}

.accordion-button:hover,
.accordion-button.active {
  background-color: #9C6C3F;
  color: #000000;
}

.accordion-content {
  padding: 0 15px;
  background-color: #33334d;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  border-radius: 0 0 5px 5px;
  color: #ddd;
  font-size: 0.95rem;
  line-height: 1.4;
}