@charset "UTF-8";

/* Apex Tale Bronze Theme — 70% ink / 20% bronze / 8% gold / 2% gem steel-blue */

body.site-premium-mmo {
  --mmo-black: #0c0b0a;
  --mmo-black-1: #17120b;
  --mmo-black-2: #1e1810;
  --mmo-bronze: #7b5b2d;
  --mmo-bronze-mid: #8a6a3a;
  --mmo-bronze-bright: #c79c4d;
  --mmo-gold: #d4af37;
  --mmo-gold-bright: #f0ce60;
  --mmo-gold-soft: rgba(199, 156, 77, 0.45);
  --mmo-gold-muted: rgba(123, 91, 45, 0.22);
  --mmo-gem-blue: #6a7a78;
  --mmo-gem-blue-glow: rgba(106, 122, 120, 0.45);
  --mmo-navy-0: var(--mmo-black);
  --mmo-navy-1: var(--mmo-black-1);
  --mmo-shadow: rgba(0, 0, 0, 0.55);
  --mmo-glass: rgb(16 12 7 / 78%);
  --mmo-text: rgba(248, 245, 238, 0.98);
  --mmo-text-muted: rgba(215, 200, 161, 0.72);
}

/* Nav glass/position: owned by page-nav-layout.css (body--shared-nav).
   Keep only non-layout accent here so shared-nav pages stay identical. */
body.site-premium-mmo:not(.body--shared-nav) .page > .section[data-section="navigation"],
body.site-premium-mmo:not(.body--shared-nav) [data-section="navigation"] {
  background: rgba(12, 11, 10, 0.88) !important;
  border-bottom-color: rgba(123, 91, 45, 0.35) !important;
  box-shadow: 0 0.5rem 1.5rem var(--mmo-shadow) !important;
}

/* Top menu — reference: muted pale-gold inactive, bright gold active
   (Cinzel + logo filters for shared nav live in page-nav-layout.css / body--shared-nav) */
body.site-premium-mmo .menu__item {
  font-family: var(--font-1, "ChelseaCYR", "OlympiaDeco", serif) !important;
  font-weight: 400 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  text-shadow: 0 0.08rem 0.25rem rgba(0, 0, 0, 0.65) !important;
  transition: color 0.2s ease, text-shadow 0.2s ease !important;
}

body.site-premium-mmo .menu__item:hover,
body.site-premium-mmo .menu__el:hover [data-menu-open-sub-list],
body.site-premium-mmo .menu__item.menu__item--active {
  color: var(--mmo-gold-bright) !important;
  text-shadow:
    0 0 1.2rem rgba(212, 175, 55, 0.4),
    0 0.08rem 0.25rem rgba(0, 0, 0, 0.7) !important;
  background: transparent !important;
}

body.site-premium-mmo .menu__item:hover .menu__link,
body.site-premium-mmo .menu__item--active .menu__link {
  color: var(--mmo-gold-bright) !important;
}

body.site-premium-mmo .menu__item::after {
  background: linear-gradient(
    90deg,
    transparent 0,
    rgba(212, 175, 55, 0.65) 40%,
    rgba(240, 206, 96, 0.95) 50%,
    rgba(212, 175, 55, 0.65) 60%,
    transparent 100%
  ) !important;
  height: 1px !important;
  bottom: 0.28rem !important;
  filter: none !important;
  transition: opacity 0.2s ease, transform 0.2s ease, height 0.2s ease, filter 0.2s ease !important;
}

body.site-premium-mmo .menu__item.menu__item--active::after,
body.site-premium-mmo .menu__item:hover::after,
body.site-premium-mmo .menu__el:hover .menu__item::after {
  opacity: 1 !important;
  transform: scaleX(1) !important;
  height: 1.5px !important;
  filter: drop-shadow(0 0 0.2rem rgba(212, 175, 55, 0.55)) !important;
}

body.site-premium-mmo .account-info-btn.info-btn {
  transition: filter 0.2s ease;
}

body.site-premium-mmo .account-info-btn.info-btn:hover {
  filter: brightness(1.08) drop-shadow(0 0 0.6rem rgba(199, 156, 77, 0.35));
}

/* ==========================================================================
   Barra lateral flutuante — cards Painel / Discord / Instagram
   ==========================================================================
   Substitui o antigo .scl-floating__item (botão circular simples só com
   ícone) por .scl-floating__card: card vertical vazado (ícone + título +
   subtítulo), clicável por inteiro, com a mesma "casca" (fundo navy,
   borda discreta, sombra, raio) para os três — só o badge do ícone muda
   de cor por marca (dourado/Discord/Instagram). Container .scl-floating
   (position fixed / right / top / flex column) continua vindo de
   bundle-homef5b5.css; aqui só ajustamos gap/padding para o novo tamanho
   de card e reativamos a barra em mobile (ver media queries no fim deste
   bloco) em vez do "display:none!important" herdado do bundle. */
body.site-premium-mmo .scl-floating {
  gap: 0.9rem !important;
  padding: 0 !important;
}

body.site-premium-mmo .scl-floating__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  width: 7.3rem;
  padding: 1rem 0.65rem 0.85rem;
  border-radius: 1.25rem;
  background: linear-gradient(180deg, rgba(13, 19, 31, 0.86), rgba(8, 12, 20, 0.92));
  border: 1px solid rgba(148, 163, 184, 0.16);
  box-shadow: 0 0.6rem 1.4rem rgba(0, 0, 0, 0.4);
  color: var(--mmo-text, #f8f5ee);
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transform: scale(1) translateX(0);
  transition:
    transform 220ms ease,
    box-shadow 220ms ease,
    border-color 220ms ease,
    background 220ms ease;
}

/* Aproximação/profundidade ao passar o mouse, focar via teclado ou
   pressionar no touch — sutil (5%–8%), nunca "pulando". O card em hover
   ganha z-index para ficar claramente em primeiro plano; os outros
   permanecem no lugar (nenhuma regra de grupo os afeta). */
body.site-premium-mmo .scl-floating__card:hover,
body.site-premium-mmo .scl-floating__card:focus-visible {
  transform: scale(1.07) translateX(-4px);
  box-shadow: 0 1rem 2.2rem rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(226, 232, 240, 0.05) inset;
  border-color: rgba(203, 213, 225, 0.4);
  background: linear-gradient(180deg, rgba(18, 27, 43, 0.94), rgba(10, 15, 26, 0.96));
  z-index: 2;
  outline: none;
  position: relative;
}

body.site-premium-mmo .scl-floating__card:active {
  transform: scale(1.05) translateX(-3px);
  transition-duration: 90ms;
}

@media (prefers-reduced-motion: reduce) {
  body.site-premium-mmo .scl-floating__card,
  body.site-premium-mmo .scl-floating__icon {
    transition: none !important;
  }
}

body.site-premium-mmo .scl-floating__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.1rem;
  height: 3.1rem;
  border-radius: 28%;
  font-size: 1.5rem;
  transition: transform 220ms ease, box-shadow 220ms ease;
}

body.site-premium-mmo .scl-floating__card:hover .scl-floating__icon,
body.site-premium-mmo .scl-floating__card:focus-visible .scl-floating__icon {
  transform: scale(1.08);
}

/* Badge do Painel — acabamento dourado (identidade Apex Tale) */
body.site-premium-mmo .scl-floating__icon--painel {
  background: linear-gradient(145deg, var(--mmo-gold-bright, #f0ce60), var(--mmo-bronze-bright, #c79c4d));
  color: #1a1409;
  box-shadow: 0 0.3rem 0.9rem rgba(199, 156, 77, 0.35);
}

body.site-premium-mmo .scl-floating__card:hover .scl-floating__icon--painel,
body.site-premium-mmo .scl-floating__card:focus-visible .scl-floating__icon--painel {
  box-shadow: 0 0 1.15rem rgba(240, 206, 96, 0.6), 0 0.4rem 1rem rgba(199, 156, 77, 0.4);
}

/* Badge do Discord — tonalidade azul/roxa oficial (blurple) */
body.site-premium-mmo .scl-floating__icon--discord {
  background: linear-gradient(145deg, #5865f2, #3c40a8);
  color: #fff;
  box-shadow: 0 0.3rem 0.9rem rgba(88, 101, 242, 0.35);
}

body.site-premium-mmo .scl-floating__card:hover .scl-floating__icon--discord,
body.site-premium-mmo .scl-floating__card:focus-visible .scl-floating__icon--discord {
  box-shadow: 0 0 1.15rem rgba(88, 101, 242, 0.65), 0 0.4rem 1rem rgba(60, 64, 168, 0.4);
}

/* Badge do Instagram — degradê oficial da marca, mantendo o glifo neutro
   para não destoar do acabamento premium do restante da barra */
body.site-premium-mmo .scl-floating__icon--instagram {
  background: radial-gradient(circle at 30% 110%, #fdf497 0%, #fdf497 6%, #fd5949 45%, #d6249f 65%, #285aeb 92%);
  color: #fff;
  box-shadow: 0 0.3rem 0.9rem rgba(214, 36, 159, 0.35);
}

body.site-premium-mmo .scl-floating__card:hover .scl-floating__icon--instagram,
body.site-premium-mmo .scl-floating__card:focus-visible .scl-floating__icon--instagram {
  box-shadow: 0 0 1.15rem rgba(214, 36, 159, 0.6), 0 0.4rem 1rem rgba(253, 89, 73, 0.4);
}

/* Badge do Facebook — azul oficial da marca (Fase 4/7/20: rede agora
   ativável dinamicamente via Master → Configurações → Redes sociais, então
   precisa de acabamento próprio em vez de cair no ícone genérico). */
body.site-premium-mmo .scl-floating__icon--facebook {
  background: linear-gradient(145deg, #2d88ff, #1256b3);
  color: #fff;
  box-shadow: 0 0.3rem 0.9rem rgba(24, 119, 242, 0.35);
}

body.site-premium-mmo .scl-floating__card:hover .scl-floating__icon--facebook,
body.site-premium-mmo .scl-floating__card:focus-visible .scl-floating__icon--facebook {
  box-shadow: 0 0 1.15rem rgba(24, 119, 242, 0.6), 0 0.4rem 1rem rgba(18, 86, 179, 0.4);
}

/* Badge do YouTube — vermelho oficial da marca */
body.site-premium-mmo .scl-floating__icon--youtube {
  background: linear-gradient(145deg, #ff4d4d, #cc0000);
  color: #fff;
  box-shadow: 0 0.3rem 0.9rem rgba(255, 0, 0, 0.35);
}

body.site-premium-mmo .scl-floating__card:hover .scl-floating__icon--youtube,
body.site-premium-mmo .scl-floating__card:focus-visible .scl-floating__icon--youtube {
  box-shadow: 0 0 1.15rem rgba(255, 0, 0, 0.6), 0 0.4rem 1rem rgba(204, 0, 0, 0.4);
}

/* Badge do WhatsApp — verde oficial da marca */
body.site-premium-mmo .scl-floating__icon--whatsapp {
  background: linear-gradient(145deg, #3ee085, #1da851);
  color: #0b2416;
  box-shadow: 0 0.3rem 0.9rem rgba(37, 211, 102, 0.35);
}

body.site-premium-mmo .scl-floating__card:hover .scl-floating__icon--whatsapp,
body.site-premium-mmo .scl-floating__card:focus-visible .scl-floating__icon--whatsapp {
  box-shadow: 0 0 1.15rem rgba(37, 211, 102, 0.6), 0 0.4rem 1rem rgba(29, 168, 81, 0.4);
}

/* Badge genérico ("link") — fallback para redes futuras adicionadas pelo
   admin sem um ícone de marca dedicado ainda no mapa de social_links.php. */
body.site-premium-mmo .scl-floating__icon--link {
  background: linear-gradient(145deg, rgba(148, 163, 184, 0.9), rgba(71, 85, 105, 0.9));
  color: #fff;
  box-shadow: 0 0.3rem 0.9rem rgba(100, 116, 139, 0.35);
}

body.site-premium-mmo .scl-floating__card:hover .scl-floating__icon--link,
body.site-premium-mmo .scl-floating__card:focus-visible .scl-floating__icon--link {
  box-shadow: 0 0 1.15rem rgba(148, 163, 184, 0.55), 0 0.4rem 1rem rgba(71, 85, 105, 0.4);
}

body.site-premium-mmo .scl-floating__title {
  font-family: var(--font-1, "ChelseaCYR", "OlympiaDeco", serif);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.15;
  color: var(--mmo-text, #f8f5ee);
}

body.site-premium-mmo .scl-floating__subtitle {
  font-family: var(--font-0, "Intro", sans-serif);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.1;
  color: rgba(203, 213, 225, 0.62);
}

/* Utilitário local: mantém título/subtítulo no DOM (leitores de tela,
   title/aria-label continuam funcionando) mas oculto visualmente — usado
   só no recorte mais compacto do mobile abaixo. */
body.site-premium-mmo .scl-floating__text--hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Tablets / telas menores: reduz proporcionalmente tamanho, padding e
   espaçamento, mantendo ícone + título + subtítulo completos. */
@media (max-width: 1024px) {
  body.site-premium-mmo .scl-floating {
    gap: 0.7rem !important;
  }

  body.site-premium-mmo .scl-floating__card {
    width: 6.2rem;
    padding: 0.85rem 0.5rem 0.7rem;
    border-radius: 1.1rem;
    gap: 0.25rem;
  }

  body.site-premium-mmo .scl-floating__icon {
    width: 2.7rem;
    height: 2.7rem;
    font-size: 1.3rem;
  }

  body.site-premium-mmo .scl-floating__title {
    font-size: 0.76rem;
  }

  body.site-premium-mmo .scl-floating__subtitle {
    font-size: 0.62rem;
  }
}

/* Smartphones: o bundle base (bundle-homef5b5.css) esconde .scl-floating
   inteira em <=768px com display:none!important. Aqui reativamos (maior
   especificidade por causa de body.site-premium-mmo, então ganha
   independente de ordem de carregamento) com uma versão compacta —
   ícones preservados e funcionais, título/subtítulo viram texto acessível
   oculto visualmente para a barra não cobrir conteúdo nem gerar overflow. */
@media (max-width: 768px) {
  body.site-premium-mmo .scl-floating {
    display: flex !important;
    right: 0.5rem !important;
    gap: 0.55rem !important;
  }

  body.site-premium-mmo .scl-floating__card {
    width: 4.1rem;
    min-height: 4.1rem;
    padding: 0.5rem;
    border-radius: 1rem;
    gap: 0;
  }

  body.site-premium-mmo .scl-floating__icon {
    width: 2.9rem;
    height: 2.9rem;
    font-size: 1.4rem;
  }

  body.site-premium-mmo .scl-floating__title,
  body.site-premium-mmo .scl-floating__subtitle {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* Toque não tem hover: aproximação rápida ao pressionar. */
  body.site-premium-mmo .scl-floating__card:active {
    transform: scale(1.06) translateX(-2px);
  }
}

/* Corrige um possível overflow horizontal em telas estreitas: os círculos
   de brilho decorativos da seção de rankings (.rb-orb, ver pages/home.php)
   usam offsets negativos (ex.: left:-80px) que podem extrapolar a largura
   do container em mobile. Isso só recorta o excesso horizontal — não afeta
   o layout normal do componente. */
body.site-premium-mmo [data-container="media"] .media {
  overflow-x: hidden;
}

/* ==========================================================================
   Background global — arte dos 4 heróis (identidade visual do site inteiro)
   ==========================================================================
   Aplicado direto no <body class="site-premium-mmo">, presente em TODA
   página pública (Home, Notícias, Download, Rankings, Wiki/Guia,
   Histórico — ver Head-Home.php / Head-News.php / Head-Download.php /
   Head-Rankings.php / Head-Wiki.php / Head-Logs.php, todos carregam este
   arquivo). Um único ponto central: nenhuma página precisa repetir esta
   regra.

   background-attachment:fixed faz a imagem cobrir sempre a viewport
   inteira, em qualquer altura de página e em qualquer posição de scroll —
   por isso nunca aparece uma "quebra" de preto/branco ao rolar, mesmo em
   páginas bem longas (Notícias, Wiki).

   A camada linear-gradient() é puramente um véu translúcido MUITO sutil
   por cima da arte (não um filter aplicado na imagem) — preserva 100% das
   cores/qualidade originais, só melhora o contraste de texto/menus/cards
   sobre o céu mais claro da cena.

   background-position:center 55% foi calibrado para manter os 4
   personagens (rostos e corpos) sempre dentro do enquadramento, do 16:9
   comum até monitores ultrawide 21:9 (onde o corte vertical do "cover" é
   mais agressivo, por a imagem original ser proporcionalmente mais
   "quadrada" que a tela). */
body.site-premium-mmo {
  background-color: #0c0b0a;
  background-repeat: no-repeat;
  background-image:
    linear-gradient(180deg, rgba(10, 8, 6, 0.30) 0%, rgba(9, 7, 5, 0.38) 55%, rgba(7, 6, 4, 0.50) 100%),
    url("../templates/default/images/bg/bg-site-hero.jpg?v=2");
  background-position: center 55%;
  background-size: cover;
  background-attachment: fixed;
}

/* Smartphones e tablets em retrato (proporção mais alta que larga): a arte
   original é bem mais larga que alta, então "cover" cortaria os heróis das
   pontas (roxo e ruiva) de forma inadequada. Trocamos para "contain" — os
   4 personagens ficam sempre visíveis por completo, centralizados no topo,
   e o espaço restante é preenchido pelo tom escuro do próprio tema (sem
   faixas brancas). Usa aspect-ratio (não largura) para também cobrir
   corretamente celulares em modo paisagem, que continuam com "cover". */
@media (max-aspect-ratio: 4/5) {
  body.site-premium-mmo {
    background-size: contain;
    background-position: center top;
  }
}

/* Substitui globalmente o antigo mecanismo de background "por página"
   (.page:before, bg-top-new3.jpg) — ele só cobria uma faixa fixa de 90rem
   no topo do conteúdo (com fade em gradient-mask) e deixava o resto da
   página no fundo escuro sólido, sem a arte. Esse comportamento antigo é
   exatamente a causa de "fundo preto aparecendo ao rolar" em páginas
   longas (Notícias, Wiki). O Home já desligava isso individualmente em
   home-bronze.css; aqui desligamos para as demais páginas (Notícias,
   Download, Rankings, Wiki, Histórico) também, evitando qualquer conflito
   com o novo background global acima. */
body.site-premium-mmo .page:before {
  background-image: none !important;
  height: 0 !important;
  -webkit-mask: none;
  mask: none;
}
/* Cursor oficial do Apex Tale — aplicado também a controles que definem
   pointer/default em folhas específicas carregadas depois deste tema. */
html,body,body *,body *::before,body *::after{
  cursor:url("../cursor/DefaultCursor.cur"),default!important;
}

:where(
  a,button,select,option,summary,label[for],
  input,textarea,[role="button"],[role="link"],[tabindex]:not([tabindex="-1"]),
  [onclick],.clickable,.swiper-button-prev,.swiper-button-next
),
:where(
  a,button,select,summary,label[for],input,textarea,[role="button"],
  [role="link"],[onclick],.clickable
) *{
  cursor:url("../cursor/Talk_Cursor.cur"),pointer!important;
}

:where(.loading,.is-loading,.preloader,[aria-busy="true"]),
:where(.loading,.is-loading,.preloader,[aria-busy="true"]) *{
  cursor:url("../cursor/DefaultCursor.cur"),wait!important;
}