/* Apex Tale — base responsiva compartilhada do site público. */
:root{
  --site-content-max:1200px;
  --site-edge-gutter:clamp(16px,2vw,28px);
  --site-social-rail:92px;
}
html{max-width:100%;overflow-x:hidden;overflow-x:clip;-webkit-text-size-adjust:100%;text-size-adjust:100%;scrollbar-gutter:stable}
body{max-width:100%;min-width:0;overflow-x:hidden}
main,section,header,footer,.page,.section,.container{min-width:0;max-width:100%}
img,svg,video,canvas,iframe{max-width:100%}
img,video{height:auto}
canvas,[class*="particle"],[class*="particles"],.home-hero__media{pointer-events:none}
table{max-width:100%}
.table-responsive,.dataTables_wrapper,.rb-table-wrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-inline:contain}
input,select,textarea,button{max-width:100%}
textarea{resize:vertical}
[role="dialog"]{max-width:100%}

/* Componentes visuais reutilizados nunca podem crescer além do próprio
   bloco disponível. As regras são deliberadamente dimensionais: não mudam
   cores, hierarquia, efeitos ou comportamento funcional. */
:where(
  [class*="-card"],[class*="__card"],
  [class*="-panel"],[class*="__panel"],
  [class*="-grid"],[class*="__grid"],
  [class*="-banner"],[class*="__banner"],
  [class*="-media"],[class*="__media"]
){box-sizing:border-box;max-inline-size:100%;min-inline-size:0}

:where(
  [class*="-card"],[class*="__card"],
  [class*="-panel"],[class*="__panel"],
  [class*="-grid"],[class*="__grid"]
)>*{min-inline-size:0}

/* Área útil compartilhada: em desktop reserva a mesma faixa nos dois lados.
   Assim o conteúdo permanece centrado na viewport e nunca entra sob a barra
   social fixa da direita. Só containers de primeiro nível são dimensionados,
   evitando encolhimento cumulativo em componentes internos. */
@media(min-width:1200px){
  body.site-premium-mmo .page>.section:not([data-section="navigation"]):not([data-section="footer"])>.container,
  body.site-premium-mmo .page>main>.section>.container,
  body.site-premium-mmo #main-content>.section>.container{
    box-sizing:border-box;
    width:calc(100% - (2 * (var(--site-social-rail) + var(--site-edge-gutter))));
    max-width:var(--site-content-max);
    margin-inline:auto;
  }

  /* O menu é centralizado pela viewport, independentemente do logo, cadastro,
     idioma e conta que ocupam as extremidades da navegação. */
  body.body--shared-nav .navigation{
    position:relative!important;
  }
  body.body--shared-nav .navigation__menu{
    position:absolute;
    inset-block:0;
    inset-inline-start:50%;
    width:max-content;
    max-width:calc(100% - 36rem);
    transform:translateX(-50%);
    flex-grow:0;
  }
  body.body--shared-nav .navigation__menu .menu__content,
  body.body--shared-nav .navigation__menu .menu__list{
    width:auto;
  }

  /* Mantém cadastro e conta agrupados à direita sem deslocar o menu
     principal, que permanece centralizado pela viewport. */
  body.body--shared-nav .navigation__el_register{
    order:1;
    margin-inline-start:auto!important;
    margin-inline-end:clamp(.5rem,.8vw,.875rem)!important;
  }
  body.body--shared-nav .navigation__el_auth{
    order:2;
    margin-inline-end:58px;
  }
  body.body--shared-nav .navigation__el_auth .account-info-btn.info-btn{
    width:clamp(150px,12vw,225px);
    min-width:clamp(150px,12vw,225px);
  }
  body.body--shared-nav .navigation__el_language{
    order:3;
    margin-inline:0!important;
  }

  /* Centraliza o conjunto de links dentro da coluna disponível no rodapé,
     em vez de prendê-lo à extremidade direita. */
  body.body--shared-nav .footer__fnav{
    width:fit-content;
    max-width:100%;
    margin-inline:auto!important;
    justify-self:center;
    justify-content:center;
  }
}

/* Em tablet/celular a barra social vira uma faixa horizontal no rodapé. Isso
   preserva todos os atalhos sem cobrir cards, tabelas ou textos. */
@media(max-width:1199.98px){
  body.site-premium-mmo .scl-floating{
    position:static!important;
    inset:auto!important;
    width:auto;
    max-width:calc(100% - 1rem);
    margin:1.25rem auto max(1rem,env(safe-area-inset-bottom));
    flex-flow:row nowrap!important;
    justify-content:center;
    transform:none!important;
  }
}

@supports(height:100dvh){
  .launch-modal,.feature-modal{min-height:100dvh}
  .launch-modal__frame,.launch-modal__panel,.feature-modal__panel{max-height:calc(100dvh - 20px)}
}

@media(max-width:768px){
  input,select,textarea{font-size:max(16px,1em)}
  a,button,[role="button"],[role="option"]{touch-action:manipulation}
  .container{width:100%;padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}
  .scl-floating{right:max(6px,env(safe-area-inset-right));bottom:max(10px,env(safe-area-inset-bottom))}
  .modal-dialog{width:auto;max-width:calc(100% - 20px);margin:10px auto}
  .modal-content{max-height:calc(100dvh - 20px);overflow:auto;-webkit-overflow-scrolling:touch}
  .wiki-hero-metal__title,
  .wiki-hero-metal__layer,
  .wiki-hero-metal__text{white-space:normal;text-align:center}
  .wiki-hero-metal__title{width:100%;max-width:100%;line-height:1.02}
  #community .rb-table-wrap{overflow-x:auto!important;-webkit-overflow-scrolling:touch}
}

@media(max-width:480px){
  .container{padding-left:max(10px,env(safe-area-inset-left));padding-right:max(10px,env(safe-area-inset-right))}
  h1,h2,h3,p,a,button,td,th{overflow-wrap:anywhere}
  .feature-modal{
    align-items:center!important;
    padding:10px max(10px,env(safe-area-inset-left)) 10px max(10px,env(safe-area-inset-right))!important;
  }
  .feature-modal__panel{
    width:100%;
    height:auto;
    max-height:calc(100dvh - 20px);
  }
  body.body--rankings .rankings-hero__tabs,
  body.body--logs .rankings-hero__tabs{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:0.65rem!important;
    width:100%!important;
    overflow:visible!important;
  }
  body.body--rankings .rankings-hero__tab,
  body.body--logs .rankings-hero__tab{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
  }
  #community .rb-tabs,
  #community .rb-tabs[style],
  #community #rb-tabs-clans{
    display:grid!important;
    grid-template-columns:1fr!important;
    width:100%!important;
    overflow:visible!important;
  }
  #community .rb-tab{width:100%!important;min-width:0!important}
  /* Em celulares estreitos as tabelas responsivas passam a caber no painel.
     DataTables continua ocultando colunas secundárias; a Home permite quebra
     de texto em vez de manter uma tabela artificialmente maior que a tela. */
  .rb-table,
  .rankings-table,
  .guias-wiki__table{
    width:100%!important;
    min-width:100%!important;
    max-width:100%!important;
    table-layout:auto;
  }
  .rb-table th,.rb-table td,
  .rankings-table th,.rankings-table td,
  .guias-wiki__table th,.guias-wiki__table td{
    white-space:normal!important;
    overflow-wrap:anywhere;
  }
}

@media(max-height:520px) and (orientation:landscape){
  .launch-modal,.feature-modal{align-items:flex-start;padding-block:8px}
  .launch-modal__frame,.launch-modal__panel,.feature-modal__panel{max-height:calc(100dvh - 16px)}
}

@media(prefers-reduced-motion:reduce){
  html:focus-within{scroll-behavior:auto}
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}